/* ============================================================ BFT EXPERIENCE PHOTO CARDS - FINAL CLEAN 2026-09-18 ============================================================ */ /* ============================================================ GRID ============================================================ */ #experience .exp-grid{ display:grid !important; gap:16px !important; } /* ============================================================ CARD ============================================================ */ html body #experience .exp-grid > .exp-card{ position:relative !important; box-sizing:border-box !important; min-width:0 !important; margin:0 !important; padding:0 !important; overflow:hidden !important; border:0 !important; outline:0 !important; border-radius:22px !important; background:#090909 !important; box-shadow:none !important; transform:none !important; isolation:isolate !important; text-align:right !important; } /* * Anular definitivamente los pseudo-elementos heredados * de home-premium.css. * * Ya no usamos ::before ni ::after. */ html body #experience .exp-grid > .exp-card::before, html body #experience .exp-grid > .exp-card::after{ content:none !important; display:none !important; } /* Quitar iconos antiguos si alguna versión cacheada del HTML apareciera */ html body #experience .exp-card .exp-icon{ display:none !important; } /* ============================================================ FOTO REAL ============================================================ */ html body #experience .exp-card__media{ position:absolute !important; inset:0 !important; z-index:0 !important; overflow:hidden !important; background:#090909 !important; pointer-events:none !important; } /* * Dejamos la imagen 2px más grande que la tarjeta. * * Esto evita el halo claro en las esquinas, pero NO utilizamos * translate, background-position animado ni ningún movimiento X/Y. */ html body #experience .exp-card__media img{ position:absolute !important; top:-2px !important; left:-2px !important; width:calc(100% + 4px) !important; height:calc(100% + 4px) !important; max-width:none !important; display:block !important; object-fit:cover !important; object-position:50% 50% !important; transform:scale(1) !important; transform-origin:50% 50% !important; transition: transform 7s cubic-bezier(.20,.70,.20,1) !important; backface-visibility:hidden !important; -webkit-backface-visibility:hidden !important; pointer-events:none !important; } /* ============================================================ DEGRADADO ============================================================ */ html body #experience .exp-card__shade{ position:absolute !important; inset:0 !important; z-index:1 !important; pointer-events:none !important; background: linear-gradient( 180deg, rgba(0,0,0,.02) 0%, rgba(0,0,0,.06) 28%, rgba(0,0,0,.24) 53%, rgba(0,0,0,.58) 77%, rgba(0,0,0,.88) 100% ) !important; } /* ============================================================ COPY ============================================================ */ html body #experience .exp-card__copy{ position:absolute !important; z-index:2 !important; left:20px !important; right:20px !important; bottom:18px !important; text-align:right !important; pointer-events:none !important; } html body #experience .exp-card__copy h3{ width:auto !important; max-width:74% !important; margin: 0 0 7px auto !important; padding:0 !important; color:#fff !important; font-size: clamp(16px,1.08vw,19px) !important; line-height:1.08 !important; text-align:right !important; text-shadow: 0 2px 10px rgba(0,0,0,.80) !important; } html body #experience .exp-card__copy p{ width:auto !important; max-width:80% !important; margin: 0 0 0 auto !important; padding:0 !important; color: rgba(255,255,255,.92) !important; font-size: clamp(11px,.90vw,13px) !important; line-height:1.42 !important; text-align:right !important; text-shadow: 0 1px 8px rgba(0,0,0,.85) !important; } /* ============================================================ DESKTOP ORDER + HEIGHT ============================================================ */ @media (min-width:981px){ #experience .exp-grid{ grid-template-columns: repeat(3,minmax(0,1fr)) !important; grid-template-areas: "relaxed groups history" "tips born licensed" !important; } #experience .exp-card{ height:218px !important; min-height:218px !important; } #experience .exp-card--relaxed{ grid-area:relaxed; } #experience .exp-card--groups{ grid-area:groups; } #experience .exp-card--history{ grid-area:history; } #experience .exp-card--tips{ grid-area:tips; } #experience .exp-card--born{ grid-area:born; } #experience .exp-card--licensed{ grid-area:licensed; } } /* ============================================================ HOVER ============================================================ */ @media (hover:hover) and (pointer:fine){ /* * Matar TODOS los translateY heredados de style.css * y home-premium.css. */ html body #experience .exp-grid > .exp-card:hover, html body.bft-motion-ready #experience .exp-card.bft-reveal:hover, html body.bft-motion-ready #experience .exp-card[data-bft-reveal]:hover{ transform:none !important; border:0 !important; outline:0 !important; box-shadow:none !important; } /* * ESTE ES EL ÚNICO MOVIMIENTO DEL HOVER. * * scale 1 -> 1.04 * * No cambia: * top * left * object-position * translate * transform-origin */ html body #experience .exp-card:hover .exp-card__media img{ transform:scale(1.04) !important; } } /* ============================================================ TABLET ============================================================ */ @media (min-width:621px) and (max-width:980px){ #experience .exp-grid{ grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap:14px !important; } html body #experience .exp-card{ height:210px !important; min-height:210px !important; border-radius:20px !important; } html body #experience .exp-card__copy{ left:18px !important; right:18px !important; bottom:16px !important; } html body #experience .exp-card__copy h3{ max-width:76% !important; font-size:17px !important; } html body #experience .exp-card__copy p{ max-width:83% !important; font-size:12px !important; } } /* ============================================================ MOBILE ============================================================ */ @media (max-width:620px){ #experience .exp-grid{ grid-template-columns:1fr !important; gap:12px !important; } html body #experience .exp-card{ height:198px !important; min-height:198px !important; border-radius:18px !important; } html body #experience .exp-card__copy{ left:15px !important; right:15px !important; bottom:14px !important; } html body #experience .exp-card__copy h3{ max-width:82% !important; margin-bottom:6px !important; font-size:16px !important; } html body #experience .exp-card__copy p{ max-width:88% !important; font-size:11.5px !important; line-height:1.38 !important; } } /* ============================================================ VERY SMALL MOBILE ============================================================ */ @media (max-width:390px){ html body #experience .exp-card{ height:190px !important; min-height:190px !important; } } /* ============================================================ TOUCH = SIN ZOOM ============================================================ */ @media (hover:none), (pointer:coarse){ html body #experience .exp-card__media img, html body #experience .exp-card:hover .exp-card__media img{ transform:scale(1) !important; transition:none !important; } } /* ============================================================ REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion:reduce){ html body #experience .exp-card__media img, html body #experience .exp-card:hover .exp-card__media img{ transform:scale(1) !important; transition:none !important; } }