/* ───────────────────────────────────────────────────────────────────────── LANDING DE SERVICIO · AVL·Press Se apoya en style.css: usa SUS variables (--gold, --ink, --bg, --surface, --serif, --sans) para que un cambio de paleta o de tema alcance también a esta página. Aquí sólo viven los bloques que la landing agrega. ───────────────────────────────────────────────────────────────────────── */ /* La landing nace en claro: es una página comercial y el crema es la marca. El interruptor de tema sigue funcionando y el oscuro se ve igual de bien. */ .lp{--pad-sec:96px} .lp section{padding:var(--pad-sec) 0} .lp .wrap{max-width:1180px} /* ── FONDOS POR TEMA ──────────────────────────────────────────────────── La textura viaja en el , fija, y CADA tema trae la suya. Se pone aquí y no en style.css para que el catálogo editorial siga como estaba. */ .lp{background-image:url('assets/bg-paper.jpg');background-size:cover; background-position:center top;background-attachment:fixed} :root[data-theme="dark"] .lp{background-image:url('assets/bg-dark.jpg')} /* Las secciones alternas dejan ver el papel en vez de taparlo con color plano: `alt` pasa a ser un velo, no una pared. */ .lp section.alt{background:transparent;position:relative} .lp section.alt::before{content:"";position:absolute;inset:0; background:var(--bg2);opacity:.72;pointer-events:none} .lp section.alt>.wrap{position:relative;z-index:1} .lp-foot{background:var(--bg2)} @media (max-width:900px){ /* `fixed` en iOS repinta en cada scroll y salta: en móvil va pegada. */ .lp{background-attachment:scroll;background-position:center} } /* ── LA BARRA SUPERIOR ────────────────────────────────────────────────── El estilo heredado la pintaba para fondo oscuro: en modo claro los enlaces salían casi blancos sobre crema. Aquí van a tinta, y al bajar la barra se vuelve translúcida en vez de opaca — el contenido se ve pasar por detrás. */ /* LA CAUSA: el estilo heredado le inyecta a la barra —cuando aún no se ha desplazado— la paleta oscura entera (`--ink` casi blanco), porque en el catálogo antiguo flotaba sobre un video negro. Aquí el hero es crema, así que se devuelve la paleta clara. */ [data-theme="light"] .lp .site-nav:not(.scrolled){ --ink:#f3f0e8; --muted:#d6d3ca; --dim:#b3b0a8; --line-2:rgba(255,255,255,.3); --gold:#cda94e; --gold-soft:#e6cd86; color:var(--ink)} /* Siete elementos, una línea, SIEMPRE — bloque auditado por Sol: cuando el espacio no alcanza, el menú se desliza de lado en vez de partirse o de esconder «Precios». Nada desaparece y nada se quiebra, a cualquier ancho. */ .lp .site-nav .wrap{display:flex;align-items:center;gap:28px; transition:height .38s cubic-bezier(.22,.61,.36,1)} .lp .site-nav .logo{flex:0 0 auto;margin-right:4px} .lp .site-nav .links{color:var(--ink);flex:1 1 auto;min-width:0;display:flex; flex-wrap:nowrap;align-items:center;gap:clamp(12px,1.35vw,20px); overflow-x:auto;scrollbar-width:none} .lp .site-nav .links::-webkit-scrollbar{display:none} .lp .site-nav .links>*{flex:0 0 auto;white-space:nowrap} .lp .site-nav .links>:first-child{margin-left:auto} .lp .site-nav .links a{letter-spacing:.07em} @media (max-width:1240px){.lp .site-nav .links{font-size:11.5px}} .lp .site-nav .links a{color:var(--ink)} .lp .site-nav .links a:hover{color:var(--gold)} .lp .site-nav .links a.cta{color:var(--gold)} .lp .site-nav .logo{color:var(--ink)} /* la regla heredada aclaraba el botón cuando la barra está arriba, asumiendo un hero oscuro: aquí el hero es crema, así que se anula */ .lp .site-nav .theme-toggle, .lp .site-nav:not(.scrolled) .theme-toggle{color:var(--ink);border-color:var(--line-2)} :root[data-theme="dark"] .lp .site-nav:not(.scrolled) .theme-toggle{ border-color:rgba(255,255,255,.28);color:#d8d5cd} /* Transparente sobre el hero; al bajar aparece una lámina de vidrio suave que conserva el contexto de la página sin competir con el contenido. */ .lp .site-nav.scrolled{ --ink:#f4f1e9;--gold:#d6ad45;--gold-soft:#efd27d; color:var(--ink);background:rgba(9,12,18,.10); -webkit-backdrop-filter:saturate(145%) blur(18px); backdrop-filter:saturate(145%) blur(18px); border-bottom-color:rgba(230,205,134,.16); box-shadow:0 10px 30px rgba(0,0,0,.09)} .lp .site-nav.scrolled .logo, .lp .site-nav.scrolled .links a{color:#f4f1e9;text-shadow:0 1px 8px rgba(0,0,0,.72)} .lp .site-nav.scrolled .links a:last-child{color:#d6ad45} .lp .site-nav.scrolled .wrap{height:62px} :root[data-theme="dark"] .lp .site-nav.scrolled{ background:rgba(9,12,18,.10); border-bottom-color:rgba(230,205,134,.12); box-shadow:0 10px 34px rgba(0,0,0,.2)} /* El estado inicial es literalmente el de Inicio en todas las páginas: AVL y enlaces blancos, acentos dorados y la misma sombra sobre el head. */ .lp .site-nav:not(.scrolled) .links a, .lp .site-nav:not(.scrolled) .logo{color:#f5f1e8;text-shadow:0 1px 10px rgba(0,0,0,.58)} .lp .site-nav:not(.scrolled) .links a:last-child{color:#e0ba58} .lp .site-nav:not(.scrolled) .theme-toggle{color:#f5f1e8;border-color:rgba(255,255,255,.34)} /* ── HERO ───────────────────────────────────────────────────────────────── */ .lp-hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center; box-sizing:border-box;padding:150px 0 90px;overflow:hidden} .lp-hero>.wrap{width:100%} .lp-hero::after{content:"";position:absolute;top:-220px;right:-160px;width:820px;height:820px; background:radial-gradient(circle,rgba(205,169,78,.16),transparent 62%);pointer-events:none} .lp-hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;position:relative;z-index:1} .lp-badge{display:inline-block;padding:7px 15px;border-radius:100px;background:rgba(205,169,78,.14); border:1px solid rgba(205,169,78,.32);color:var(--gold);font-family:var(--sans);font-weight:600; font-size:11px;letter-spacing:.2em;text-transform:uppercase} /* EL LATIDO. Muy contenido a propósito: 1,5% de escala y un punto de brillo, en seis segundos. Un titular que se mueve mucho se lee como publicidad; uno que respira apenas se siente vivo sin que nadie sepa por qué. El punto de origen es la izquierda, para que el texto no se despegue del margen. */ .lp-hero h1{margin:26px 0 0;font-size:clamp(40px,5.4vw,68px);line-height:1.06; transform-origin:left center;animation:lp-latido 6s ease-in-out infinite} .lp-hero.hero-message-only h1{margin-top:0} @keyframes lp-latido{ 0%,100%{transform:scale(1);filter:brightness(1)} 46% {transform:scale(1.015);filter:brightness(1.06)} } /* la palabra dorada late medio segundo después: el eco del corazón */ .lp-hero h1 em{display:inline-block;font-style:italic;color:var(--gold);font-weight:500; animation:lp-latido-eco 6s ease-in-out .45s infinite} @keyframes lp-latido-eco{ 0%,100%{transform:scale(1);opacity:1} 46% {transform:scale(1.02);opacity:.94} } @media (prefers-reduced-motion:reduce){ .lp-hero h1,.lp-hero h1 em{animation:none} } /* El texto del hero va a plomo firme: sobre el video, un gris medio pierde contraste y se lee lavado. Negro en claro, blanco en oscuro; el dorado del titular y del reto queda como está. */ .lp-hero .lead{margin-top:22px;max-width:30em;font-size:18px;color:var(--ink)} .lp-hero .actions{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap} .lp-hero .btn{padding:15px 30px} .btn-ink{background:var(--ink);color:var(--bg)} .btn-ink:hover{background:var(--gold);color:var(--on-gold)} .lp-hero .shot{position:relative;justify-self:center;width:100%;max-width:540px} /* ── EL ESTANTE DEL HERO ──────────────────────────────────────────────── Seis portadas reales en abanico. No es una foto de producto: es la prueba, y se puede tocar. Cada una flota a su ritmo y el conjunto se renueva con un cruce lento para que desfile todo el catálogo. */ /* `align-items:start` deja que cada libro conserve su altura real en vez de estirarse hasta la fila: es un estante, no una tabla. */ .hero-shelf{position:relative;display:grid;grid-template-columns:repeat(3,1fr); gap:22px 16px;padding:8px;perspective:1200px;align-items:start} .shelf-glow{position:absolute;left:50%;top:50%;width:118%;height:118%; transform:translate(-50%,-50%);pointer-events:none;z-index:0; background:radial-gradient(ellipse at center,rgba(205,169,78,.22),transparent 66%)} .shelf-book{position:relative;z-index:1;border:0;padding:0;background:none;cursor:pointer; transition:transform .45s cubic-bezier(.2,.7,.3,1),filter .45s; animation:shelf-float 7.5s ease-in-out infinite} /* SIN RECORTE: la portada entera, con su propia proporción. Forzar 2:3 le cortaba el pie a las que vienen más alargadas — y ahí va el autor. */ .shelf-book img{display:block;width:100%;height:auto; border-radius:2px 5px 5px 2px; box-shadow:0 16px 30px rgba(40,30,12,.34);transition:opacity .7s ease,box-shadow .45s} :root[data-theme="dark"] .shelf-book img{box-shadow:0 16px 34px rgba(0,0,0,.62)} /* EL BISEL DE LOMO — lo que convierte una imagen plana en un libro: sombra en el canto, un filo de luz donde dobla la tapa, y un hilo claro a la derecha que insinúa el bloque de páginas. Va encima de la portada y no la tapa: son tres franjas de pocos píxeles. */ .shelf-book::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none; border-radius:2px 5px 5px 2px; background: linear-gradient(90deg, rgba(0,0,0,.46) 0, rgba(0,0,0,.24) 3px, rgba(255,255,255,.16) 5px, rgba(255,255,255,.05) 9px, rgba(0,0,0,.10) 11px, rgba(0,0,0,0) 20px), linear-gradient(270deg, rgba(255,255,255,.24) 0, rgba(255,255,255,.06) 2px, rgba(0,0,0,.12) 3px, rgba(0,0,0,0) 8px)} .shelf-book img.mudando{opacity:0} .shelf-book:nth-child(2){animation-duration:8.8s;animation-delay:-1.4s} .shelf-book:nth-child(3){animation-duration:6.9s;animation-delay:-3.2s} .shelf-book:nth-child(4){animation-duration:8.1s;animation-delay:-2.1s} .shelf-book:nth-child(5){animation-duration:7.2s;animation-delay:-4.4s} .shelf-book:nth-child(6){animation-duration:9.2s;animation-delay:-0.7s} /* el abanico: cada una con su inclinación, ninguna alineada con la de al lado */ .shelf-book:nth-child(1){rotate:-3.2deg} .shelf-book:nth-child(2){rotate:1.4deg;translate:0 12px} .shelf-book:nth-child(3){rotate:3.6deg} .shelf-book:nth-child(4){rotate:2.2deg;translate:0 -6px} .shelf-book:nth-child(5){rotate:-2deg;translate:0 6px} .shelf-book:nth-child(6){rotate:-3.8deg} .shelf-book:hover,.shelf-book:focus-visible{transform:translateY(-12px) scale(1.07);z-index:3;outline:none} .shelf-book:hover img,.shelf-book:focus-visible img{box-shadow:0 28px 48px rgba(40,30,12,.46)} .shelf-book:focus-visible img{outline:2px solid var(--gold);outline-offset:3px} @keyframes shelf-float{0%,100%{translate:0 0}50%{translate:0 -10px}} @media (prefers-reduced-motion:reduce){.shelf-book{animation:none}} .shelf-note{margin-top:24px;text-align:center;font-size:15px;letter-spacing:.01em;color:var(--ink)} .shelf-note b{font-weight:700} /* ── HERO CON VIDEO ───────────────────────────────────────────────────── Las capas se cruzan solas. El velo es lo que hace legible el titular sobre cualquier fotograma: sin él, un plano claro se come el texto. */ .lp-hero-bg{position:absolute;inset:0;overflow:hidden;z-index:0} .lp-hero-bg .hero-layer{filter:saturate(.85)} .lp-hero-veil{position:absolute;inset:0;z-index:2; background:linear-gradient(100deg,rgba(247,244,237,.87) 0%,rgba(247,244,237,.8) 34%,rgba(247,244,237,.4) 62%,rgba(247,244,237,.1) 100%)} :root[data-theme="dark"] .lp-hero-veil{ background:linear-gradient(100deg,rgba(10,13,19,.85) 0%,rgba(10,13,19,.76) 34%,rgba(10,13,19,.38) 62%,rgba(10,13,19,.1) 100%)} .lp-hero .wrap{z-index:2} /* el reto, justo bajo la promesa */ .lp-dare{margin-top:16px;font-family:var(--serif);font-style:italic;font-size:20px;color:var(--gold)} .lp-dare::before{content:"";display:inline-block;width:26px;height:1px;background:var(--gold); vertical-align:middle;margin-right:12px} /* el enigma: señala el estante de al lado y pide un gesto */ .lp-riddle{margin-top:10px;font-size:14.5px;color:var(--ink)} .lp-riddle b{color:var(--ink);font-weight:600;border-bottom:1px solid var(--gold);padding-bottom:1px} /* la flechita que invita a bajar */ .lp-scroll{position:absolute;left:50%;bottom:26px;width:16px;height:16px;z-index:3; border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold); transform:translateX(-50%) rotate(45deg);opacity:.6;animation:lp-bob 2.4s ease-in-out infinite} @keyframes lp-bob{0%,100%{transform:translate(-50%,0) rotate(45deg);opacity:.25} 50%{transform:translate(-50%,9px) rotate(45deg);opacity:.75}} @media (prefers-reduced-motion:reduce){.lp-scroll{animation:none}} /* ── FRANJA DE BENEFICIOS ───────────────────────────────────────────────── */ .lp-strip{margin-top:0} .lp-strip .box{display:grid;grid-template-columns:repeat(4,1fr);gap:0; background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--sh-card)} .lp-strip .cell{display:flex;gap:14px;align-items:flex-start;padding:30px 26px} .lp-strip .cell+.cell{border-left:1px solid var(--line)} .lp-ico{flex:0 0 auto;width:44px;height:44px;display:grid;place-items:center;border-radius:100px; background:rgba(205,169,78,.12);border:1px solid rgba(205,169,78,.3);color:var(--gold)} .lp-ico svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.5; stroke-linecap:round;stroke-linejoin:round} .lp-strip h4{font-family:var(--sans);font-weight:600;font-size:15px;letter-spacing:0} .lp-strip p{margin-top:4px;font-size:13.5px;color:var(--dim);line-height:1.5} /* ── TÍTULOS DE SECCIÓN ─────────────────────────────────────────────────── */ .lp-head{text-align:center;max-width:44rem;margin:0 auto 54px} .lp-head h2{font-size:clamp(28px,3.4vw,40px)} .lp-head p{margin-top:14px;color:var(--muted)} /* ── PROCESO EN 4 PASOS ─────────────────────────────────────────────────── */ .lp-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;align-items:start} .lp-step{position:relative;text-align:center;padding:0 18px} .lp-step .n{width:74px;height:74px;margin:0 auto;display:grid;place-items:center;border-radius:100px; background:rgba(205,169,78,.1);border:1px solid rgba(205,169,78,.3); font-family:var(--serif);font-size:30px;font-weight:600;color:var(--gold)} .lp-step h4{margin-top:20px;font-family:var(--sans);font-weight:600;font-size:15.5px;letter-spacing:0} .lp-step p{margin-top:8px;font-size:13.5px;color:var(--dim);line-height:1.55} .lp-step+.lp-step::before{content:"";position:absolute;left:-50%;top:37px;width:100%;height:1px; background:linear-gradient(90deg,transparent,var(--line-2),transparent)} /* ── OCHO FORMAS · carrusel panorámico ───────────────────────────────── Ocho escenas ocupan el mismo plano 16:9. Imagen y mensaje cambian juntos; el velo preserva la lectura en marfil y oro sobre cualquier fotografía. */ #ocho-formas{padding:0;background:#0a0908} .ways-cinema{position:relative;isolation:isolate;width:100%;aspect-ratio:16/9; min-height:440px;overflow:hidden;background:#0a0908;color:#f5f0e5; border-block:1px solid rgba(205,169,78,.34);box-shadow:0 30px 80px rgba(20,14,5,.28); touch-action:pan-y;cursor:pointer} .ways-cinema:focus-visible{outline:2px solid #d7b65c;outline-offset:-5px} .ways-slide{position:absolute;inset:0;z-index:0;opacity:0;visibility:hidden; pointer-events:none;transition:opacity 1.25s ease,visibility 0s linear 1.25s} .ways-slide::after{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(90deg,rgba(6,5,4,.94) 0%,rgba(8,7,6,.78) 33%,rgba(8,7,6,.3) 62%,rgba(8,7,6,.08) 100%), linear-gradient(0deg,rgba(6,5,4,.72) 0%,transparent 48%)} .ways-slide.is-active{z-index:1;opacity:1;visibility:visible;pointer-events:auto; transition:opacity 1.25s ease,visibility 0s} .ways-slide img{position:absolute;inset:-4%;width:108%;height:108%;max-width:none; object-fit:cover;object-position:var(--ways-focus,68%) center; transform:scale(1.015) translateX(0);filter:saturate(.82) contrast(1.06) brightness(.88)} :root[data-theme="light"] #ocho-formas, :root[data-theme="light"] .ways-cinema{background:#e9e0cd;color:#17191d} :root[data-theme="light"] .ways-slide img{ filter:saturate(.62) contrast(.88) brightness(1.26) sepia(.16)} :root[data-theme="light"] .ways-slide::after{ background:linear-gradient(90deg,rgba(248,244,234,.97) 0%,rgba(244,238,224,.88) 34%,rgba(239,229,207,.38) 64%,rgba(236,223,194,.08) 100%), linear-gradient(0deg,rgba(238,228,208,.72) 0%,transparent 48%)} :root[data-theme="light"] .ways-copy{ text-shadow:0 2px 22px rgba(255,255,255,.72)} :root[data-theme="light"] .ways-copy h2, :root[data-theme="light"] .ways-copy h3, :root[data-theme="light"] .ways-copy .ways-lead{color:#17191d} :root[data-theme="light"] .ways-copy p{color:rgba(28,29,31,.74)} :root[data-theme="light"] .ways-kicker, :root[data-theme="light"] .ways-tag{color:#8c6b16} :root[data-theme="light"] .ways-tag{border-top-color:rgba(140,107,22,.42)} .ways-slide.is-active img{animation:ways-camera 7.4s cubic-bezier(.18,.5,.25,1) both} @keyframes ways-camera{to{transform:scale(1.12) translateX(var(--ways-pan,-2%))}} .ways-copy{position:absolute;z-index:2;left:clamp(24px,7vw,132px);top:50%; width:min(620px,52%);transform:translateY(calc(-50% + 18px));opacity:0; text-shadow:0 2px 22px rgba(0,0,0,.48)} .ways-slide.is-active .ways-copy{animation:ways-copy-in .8s .28s cubic-bezier(.2,.75,.25,1) forwards} @keyframes ways-copy-in{to{opacity:1;transform:translateY(-50%)}} .ways-kicker{display:block;margin-bottom:18px;color:#dfbd64;font-size:11px;font-weight:700; letter-spacing:.19em;text-transform:uppercase} .ways-copy h2,.ways-copy h3{margin:0;max-width:13ch;color:#fff8e8;font-family:var(--serif); font-size:clamp(34px,4.8vw,72px);font-weight:600;letter-spacing:-.03em;line-height:.96; text-wrap:balance} .ways-copy p{max-width:50ch;color:rgba(255,250,239,.76);font-size:clamp(13px,1.2vw,17px);line-height:1.55} .ways-copy .ways-lead{margin-top:22px;color:#fff8e8;font-family:var(--serif); font-size:clamp(17px,1.7vw,24px);line-height:1.35} .ways-copy .ways-lead+p{margin-top:10px} .ways-tag{display:inline-block;margin-top:22px;padding-top:12px;border-top:1px solid rgba(223,189,100,.5); color:#e5c56e;font-size:10px;font-weight:700;letter-spacing:.17em;text-transform:uppercase} @media(max-width:760px){ .ways-cinema{aspect-ratio:4/5;min-height:560px} .ways-slide::after{background:linear-gradient(90deg,rgba(6,5,4,.72),rgba(6,5,4,.12)), linear-gradient(0deg,rgba(6,5,4,.95) 0%,rgba(6,5,4,.54) 58%,transparent 84%)} .ways-copy{left:24px;right:24px;top:auto;bottom:94px;width:auto;transform:translateY(18px)} .ways-slide.is-active .ways-copy{animation-name:ways-copy-mobile} @keyframes ways-copy-mobile{to{opacity:1;transform:translateY(0)}} .ways-copy h2,.ways-copy h3{font-size:clamp(36px,11vw,54px)} .ways-copy p{font-size:13.5px}.ways-copy .ways-lead{margin-top:16px;font-size:18px} .ways-tag{margin-top:14px} } @media(prefers-reduced-motion:reduce){ .ways-slide{transition:none}.ways-slide.is-active img,.ways-slide.is-active .ways-copy{animation:none} .ways-copy{opacity:1;transform:translateY(-50%)} } @media(max-width:760px) and (prefers-reduced-motion:reduce){.ways-copy{transform:none}} /* ── LA PROMESA · antesala de la ecuación ─────────────────────────────── Tres columnas sin caja: el peso lo llevan los símbolos, no bordes. La última línea («todo lo anterior cabe en tres líneas») es el puente hacia la franja de la fórmula y por eso va centrada y en dorado. */ .lp-promise .lp-head{max-width:50rem} .lp-promise .lp-head h2{max-width:18em;margin-inline:auto;font-size:clamp(30px,3.9vw,46px)} .lp-promise .lp-head h2 em{font-style:italic;color:var(--gold);font-weight:500} /* la credencial va ANTES del titular y en voz baja: si compite en tamaño con la promesa, se lee como el titular y la promesa como pie de foto */ .prom-lead{margin:18px auto 22px;max-width:36em;font-family:var(--serif); font-size:18px;line-height:1.5;color:var(--muted)} .prom-lead b{color:var(--ink);font-weight:600;font-style:normal} .lp-promise .lp-head p{margin-top:22px;font-size:18px} .lp-promise .lp-head p b{color:var(--ink);font-weight:600} @media (max-width:1040px){ } /* ── FRANJA DEL MOTOR ─────────────────────────────────────────────────── Una banda ancha entre secciones. La foto es el argumento: engranajes y tipos de imprenta ordenados con precisión. El texto va encima con un velo para que se lea sobre cualquier zona de la imagen. */ .lp-band{position:relative;isolation:isolate;aspect-ratio:16/9;min-height:0;display:grid;align-items:end; padding:clamp(110px,12vw,190px) 0 clamp(38px,4.8vw,76px);overflow:hidden} /* EL VIDEO VA EN SU PROPIA CAPA para poder desvanecerlo por arriba: la máscara come el borde superior y la franja deja de ser un recorte pegado a la sección anterior — nace de ella. El póster cubre el caso en que el navegador bloquee la reproducción automática. */ /* EL MONTAJE. Las seis capas viven apiladas y se cruzan con un fundido largo; la máscara se aplica al CONTENEDOR, una sola vez, para que el desvanecido superior sea idéntico en todas y no parpadee al cambiar. */ /* El desvanecido ocupa un 40% menos de alto que antes (13% y 31% en vez de 22% y 52%) y arranca casi invisible: al 4% la imagen sólo se ve al 10%, así el borde superior no es una línea sino una aparición. */ .band-bg{position:absolute;inset:0;z-index:0;overflow:hidden} .band-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; background-size:cover;background-position:center;opacity:0; transition:opacity 1.8s cubic-bezier(.4,0,.2,1);will-change:opacity} .band-layer.activa{opacity:1} /* Las imágenes reciben cámara CSS. Los videos H3 ya contienen su cámara final y no se transforman otra vez: evita el movimiento doble y el judder. */ .band-layer.img{will-change:opacity,transform} .band-layer.img.activa{animation:band-cam 12s linear forwards} @keyframes band-cam{ from{transform:scale(1.04) translate3d(0,0,0)} to {transform:scale(1.14) translate3d(-1.6%,-1.2%,0)} } .band-layer.img:nth-child(2).activa{animation-name:band-cam-b} .band-layer.img:nth-child(4).activa{animation-name:band-cam-c} .band-layer.img:nth-child(6).activa{animation-name:band-cam-b} @keyframes band-cam-b{ from{transform:scale(1.14) translate3d(1.4%,1%,0)} to {transform:scale(1.03) translate3d(0,0,0)} } @keyframes band-cam-c{ from{transform:scale(1.05) translate3d(-1.2%,.8%,0)} to {transform:scale(1.15) translate3d(1.2%,-.8%,0)} } @media (prefers-reduced-motion:reduce){ .band-layer{transition:opacity .3s} .band-layer.activa{animation:none;transform:none} } /* EL VELO OSCURO también se desvanece por arriba — antes entraba a plena fuerza desde el primer píxel y ESO era la línea de corte, no la imagen. */ .lp-band::before{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,rgba(7,10,16,.7) 0,rgba(7,10,16,.42) 38%,rgba(7,10,16,.72) 100%)} /* EL PUENTE: nace exactamente del color de la sección de arriba, al 90% de opacidad, y se disuelve en un tercio de la altura del desvanecido. */ .lp-band::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(90deg,rgba(5,8,13,.38),transparent 52%,rgba(5,8,13,.12))} .lp-band .wrap{position:relative;z-index:2} .band-promise{position:absolute;z-index:3;top:clamp(84px,6.2vw,112px);left:50%; width:min(92%,75rem);transform:translateX(-50%);text-align:center;pointer-events:none} .band-promise h2{margin:0 auto;max-width:18em;font-family:var(--serif);font-size:clamp(34px,4.15vw,72px); line-height:1.12;letter-spacing:-.025em;color:#f4f1e9;text-wrap:balance; text-shadow:0 3px 28px rgba(0,0,0,.62)} .band-promise h2 em{display:inline;font-style:italic;color:#d4aa43;font-weight:500} .band-eq{max-width:34em;padding-bottom:8px} .band-eq :is(.band-kicker,.lp-band-line,.band-sig){ transition:opacity .28s ease,transform .28s ease} .band-eq.is-changing :is(.band-kicker,.lp-band-line,.band-sig){ opacity:0;transform:translateY(7px)} .eq{font-family:var(--serif);font-size:clamp(21px,3.1vw,36px);letter-spacing:.02em; color:#e6cd86;white-space:nowrap;overflow-x:auto;padding-bottom:6px} .eq i{font-style:normal;color:#cda94e;opacity:.45;margin:0 .5em} .eq sub{font-size:.55em;vertical-align:baseline;position:relative;bottom:-.15em} .band-kicker{margin-top:20px;color:#d7b85f;font-size:10px;font-weight:700; letter-spacing:.2em;text-transform:uppercase} .lp-band-line{margin-top:22px;max-width:26em;font-family:var(--serif); font-size:clamp(17px,2vw,23px);line-height:1.38;color:#c9c6bd} .lp-band-line b{color:#f3f0e8;font-weight:600} /* la firma: registro de laboratorio, no de agencia de publicidad */ .band-sig{margin-top:30px;padding-top:18px;border-top:1px solid rgba(205,169,78,.28); max-width:26em;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase; color:rgba(230,205,134,.72)} @media (max-width:620px){ .band-sig{margin-top:24px;font-size:9.5px;letter-spacing:.2em} .lp-band{aspect-ratio:4/5;min-height:0;padding:92px 0 38px} .lp-band::before{background:rgba(10,13,19,.8)} .band-promise{top:84px;width:90%} .band-promise h2{font-size:clamp(28px,8vw,38px);line-height:1.08} .eq{font-size:19px} .lp-band-line{max-width:none;font-size:16.5px} } /* ── LA PRUEBA (reemplaza a los testimonios inventados) ─────────────────── */ .lp-proof .box{display:grid;grid-template-columns:1fr 1.15fr;gap:0; background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden; box-shadow:var(--sh-card)} .lp-proof .left{padding:52px 46px} .lp-proof .left h2{font-size:clamp(26px,3vw,34px)} .lp-proof .left p{margin-top:16px;color:var(--muted)} .lp-proof .right{padding:52px 46px;background:var(--bg2);border-left:1px solid var(--line); display:flex;flex-direction:column;justify-content:center} .lp-proof .quote{font-family:var(--serif);font-size:22px;line-height:1.45;font-style:italic} .lp-proof .quote b{color:var(--gold);font-style:normal;font-weight:600} .lp-proof .who{margin-top:20px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)} .lp-genres{margin-top:26px;display:flex;flex-wrap:wrap;gap:8px} .lp-genres span{padding:6px 13px;border:1px solid var(--line-2);border-radius:100px; font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} /* ── EL VEREDICTO · citas reales del panel ──────────────────────────────── */ .ver-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px} .ver{position:relative;margin:0;padding:38px 30px 26px;background:var(--surface); border:1px solid var(--line);border-radius:10px;box-shadow:var(--sh-card); display:flex;flex-direction:column;transition:transform .3s cubic-bezier(.2,.7,.3,1),border-color .3s} .ver:hover{transform:translateY(-5px);border-color:var(--line-2)} .ver::before{content:"\201C";position:absolute;top:6px;left:22px; font-family:var(--serif);font-size:64px;line-height:1;color:var(--gold);opacity:.32} .ver blockquote{margin:0;font-family:var(--serif);font-size:18px;line-height:1.5;color:var(--ink)} .ver figcaption{margin-top:auto;padding-top:22px;display:flex;align-items:center; justify-content:space-between;gap:14px} .ver-who{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)} .ver-stars{color:var(--gold);font-size:14px;letter-spacing:.08em;white-space:nowrap} .ver-stars i{opacity:.28;font-style:normal} .ver-pie{margin-top:34px;text-align:center;font-size:14.5px;color:var(--muted)} .ver-pie .btn-text{margin-left:10px} @media (max-width:1040px){.ver-grid{grid-template-columns:1fr}} /* ── BIBLIOTECA · portadas flotantes en desfile continuo ──────────────── Una cinta que se desplaza sola en bucle. El truco es duplicar la lista: cuando la primera mitad termina de pasar, la animación vuelve a cero y la segunda mitad está exactamente donde estaba la primera — el salto es invisible. Se detiene al pasar el cursor y al enfocar con el teclado. */ /* EL DESFILE SE MUEVE POR SCROLL, NO POR ANIMACIÓN. Una animación de CSS desplaza el contenido pero deja el contenedor inmóvil: el dedo no tiene de dónde tirar. Empujando `scrollLeft` desde JavaScript, el arrastre táctil y la rueda del ratón funcionan solos, gratis y con inercia nativa. */ #biblioteca .lp-head{margin-bottom:22px} #biblioteca .library-title{color:var(--gold)} .lib-stage{position:relative;overflow-x:auto;overflow-y:hidden;padding:4px 0 10px; -webkit-overflow-scrolling:touch;scrollbar-width:none; overscroll-behavior-x:contain;cursor:grab; -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)} :root[data-theme="light"] .lib-stage{ -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22px,#000 calc(100% - 22px),transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 22px,#000 calc(100% - 22px),transparent 100%)} .lib-stage::-webkit-scrollbar{display:none} .lib-stage.arrastrando{cursor:grabbing} .lib-stage.arrastrando{user-select:none} .lib-rail{display:flex;gap:34px;width:max-content;padding:10px 30px 22px} .lib-book{position:relative;flex:0 0 auto;width:228px;border:0;padding:0;background:none; cursor:pointer;text-align:left; transition:transform .4s cubic-bezier(.2,.7,.3,1),filter .4s} /* Igual que en el estante: la portada entera y el mismo bisel de lomo. */ .lib-book img{display:block;width:100%;height:auto;border-radius:2px 5px 5px 2px; box-shadow:0 18px 34px rgba(40,30,12,.34);transition:box-shadow .4s} :root[data-theme="dark"] .lib-book img{box-shadow:0 18px 34px rgba(0,0,0,.6)} .lomo-wrap{position:relative;display:block} .lib-book .lomo{position:absolute;inset:0;z-index:2;pointer-events:none; border-radius:2px 5px 5px 2px; background: linear-gradient(90deg, rgba(0,0,0,.46) 0,rgba(0,0,0,.24) 3px,rgba(255,255,255,.16) 5px, rgba(255,255,255,.05) 9px,rgba(0,0,0,.10) 11px,rgba(0,0,0,0) 20px), linear-gradient(270deg, rgba(255,255,255,.24) 0,rgba(255,255,255,.06) 2px, rgba(0,0,0,.12) 3px,rgba(0,0,0,0) 8px); box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -2px 0 rgba(0,0,0,.3)} .lib-book:hover,.lib-book:focus-visible{transform:translateY(-14px) scale(1.045);outline:none} .lib-book:hover img,.lib-book:focus-visible img{box-shadow:0 30px 52px rgba(40,30,12,.44)} .lib-book:focus-visible img{outline:2px solid var(--gold);outline-offset:3px} /* las portadas flotan a distinto compás — nada de un bloque rígido */ .lib-book{animation:lib-float 7s ease-in-out infinite} .lib-book:nth-child(3n+1){animation-duration:8.4s;animation-delay:-1.2s} .lib-book:nth-child(3n+2){animation-duration:6.6s;animation-delay:-3.1s} @keyframes lib-float{0%,100%{translate:0 0}50%{translate:0 -9px}} @media (prefers-reduced-motion:reduce){.lib-book{animation:none}} .lib-book .cap{margin-top:14px;font-family:var(--serif);font-size:16px;line-height:1.3; color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .lib-book .by{margin-top:3px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)} .lib-book .peek{position:absolute;left:50%;top:50%;transform:translate(-50%,calc(-50% + 6px)); padding:9px 16px;border-radius:100px;background:var(--gold);color:var(--on-gold); font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase; opacity:0;transition:opacity .3s,transform .3s;pointer-events:none;white-space:nowrap} .lib-book:hover .peek,.lib-book:focus-visible .peek{opacity:1;transform:translate(-50%,-50%)} /* ── VENTANA DE VISTA PREVIA ────────────────────────────────────────────── */ .lib-modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px} .lib-modal[hidden]{display:none} .lib-backdrop{position:absolute;inset:0;background:rgba(8,10,14,.72);backdrop-filter:blur(4px); animation:lib-in .25s ease} .lib-panel{position:relative;width:min(920px,100%);max-height:88vh;overflow:auto; background:var(--surface);border:1px solid var(--line);border-radius:12px; box-shadow:0 40px 90px rgba(0,0,0,.4);animation:lib-rise .32s cubic-bezier(.2,.7,.3,1)} @keyframes lib-in{from{opacity:0}to{opacity:1}} @keyframes lib-rise{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}} .lib-x{position:absolute;top:12px;right:14px;z-index:2;width:38px;height:38px;border:0;border-radius:100px; background:transparent;color:var(--dim);font-size:26px;line-height:1;cursor:pointer;transition:.18s} .lib-x:hover{background:var(--bg2);color:var(--ink)} /* La portada se ve ENTERA: `contain` en vez de `cover`, y la columna respeta la proporción 2:3 del libro. Recortar una portada es borrar justamente lo que el cliente vino a mirar. */ .lib-grid{display:grid;grid-template-columns:290px 1fr;gap:0;align-items:start} /* La portada de la vista previa también es un libro: mismo bisel de lomo. Aquí el marco lo pone `.lib-cover-wrap`, porque la imagen se centra dentro de un espacio con margen y el bisel tiene que seguir a la imagen, no al espacio. */ .lib-cover-wrap{position:relative;display:grid;place-items:center;perspective:1200px; padding:26px 22px;background:var(--bg2);border-right:1px solid var(--line); border-radius:12px 0 0 12px} .lib-cover-book{position:relative;display:inline-block;max-width:calc(100% - 14px); transform:rotateY(-5deg) rotateX(1deg);transform-origin:left center; filter:drop-shadow(9px 16px 16px rgba(40,30,12,.22))} .lib-cover{position:relative;z-index:1;display:block;max-width:100%;max-height:62vh;width:auto;height:auto; border-radius:3px 8px 8px 3px; box-shadow:3px 7px 18px rgba(40,30,12,.32)} :root[data-theme="dark"] .lib-cover-book{filter:drop-shadow(10px 18px 18px rgba(0,0,0,.5))} .lib-cover-lomo{position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:3px 8px 8px 3px; background: linear-gradient(90deg, rgba(0,0,0,.78) 0, rgba(0,0,0,.46) 6px, rgba(255,255,255,.38) 11px, rgba(255,255,255,.14) 17px, rgba(0,0,0,.2) 24px, rgba(0,0,0,0) 48px), linear-gradient(270deg, rgba(255,255,255,.42) 0, rgba(255,255,255,.16) 4px, rgba(0,0,0,.28) 8px, rgba(0,0,0,0) 20px); box-shadow:inset 0 2px 0 rgba(255,255,255,.2),inset 0 -2px 0 rgba(0,0,0,.38)} .lib-info{padding:38px 36px;min-width:0} .lib-info h3{font-size:27px;line-height:1.2} .lib-author{margin-top:7px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)} .lib-excerpt{margin-top:22px;max-height:38vh;overflow:auto;padding-right:14px; font-size:15.5px;line-height:1.72;color:var(--muted)} .lib-excerpt p{margin-bottom:15px} .lib-excerpt p:first-child::first-letter{float:left;font-family:var(--serif);font-size:52px; line-height:.86;padding:4px 10px 0 0;color:var(--gold)} .lib-excerpt h1,.lib-excerpt h2,.lib-excerpt h3{font-size:15px;letter-spacing:.2em; text-transform:uppercase;color:var(--dim);margin-bottom:16px;font-family:var(--sans);font-weight:600} .lib-loading{color:var(--dim);font-style:italic} .lib-excerpt::-webkit-scrollbar{width:5px} .lib-excerpt::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:4px} .lib-actions{margin-top:26px;padding-top:22px;border-top:1px solid var(--line); display:flex;align-items:center;gap:16px;flex-wrap:wrap} .lib-size{font-size:12.5px;color:var(--dim)} @media (max-width:760px){ .lib-grid{grid-template-columns:1fr} .lib-cover-wrap{padding:22px;border-right:0;border-bottom:1px solid var(--line); border-radius:12px 12px 0 0} .lib-cover-book{max-width:min(210px,70vw)} .lib-cover{max-height:min(300px,42vh)} .lib-info{padding:28px 24px} .lib-excerpt{max-height:34vh} #biblioteca .lp-head{margin-bottom:14px} .lib-book{width:168px} .lib-book .peek{font-size:10px;padding:7px 13px} } /* ── PRECIOS ────────────────────────────────────────────────────────────── */ .lp-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:start} .lp-plan{position:relative;padding:38px 32px;background:var(--surface);border:1px solid var(--line); border-radius:12px;transition:transform .28s,border-color .28s,box-shadow .28s} .lp-plan:hover{transform:translateY(-5px);box-shadow:var(--sh-card)} .lp-plan.best{border-color:var(--gold);box-shadow:var(--sh-card);transform:scale(1.03)} .lp-plan.best:hover{transform:scale(1.03) translateY(-5px)} .lp-plan .flag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);padding:6px 16px; border-radius:100px;background:var(--gold);color:var(--on-gold);font-family:var(--sans); font-weight:600;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap} .lp-plan h2,.lp-plan h3{text-align:center;font-size:23px} .lp-plan .for{margin-top:6px;text-align:center;font-size:13px;color:var(--dim)} .lp-plan .price{margin:20px 0 6px;text-align:center;font-family:var(--serif);font-size:44px;font-weight:600} .lp-plan .price sup{font-size:19px;vertical-align:super;color:var(--muted);margin-right:2px} .lp-plan ul{margin:24px 0 28px;list-style:none;display:grid;gap:12px} .lp-plan li{display:flex;gap:11px;font-size:14px;color:var(--muted);line-height:1.45} .lp-plan li svg{flex:0 0 auto;width:17px;height:17px;margin-top:2px;fill:none;stroke:var(--gold); stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .lp-plan .btn{display:block;text-align:center} .lp-guarantee{margin-top:30px;text-align:center;font-size:13.5px;color:var(--dim)} .lp-guarantee svg{width:15px;height:15px;vertical-align:-2px;margin-right:7px;fill:none; stroke:var(--gold);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} /* ── PREGUNTAS ──────────────────────────────────────────────────────────── */ .lp-faq{display:grid;grid-template-columns:1fr 1fr;gap:16px 26px} .lp-faq details{background:var(--surface);border:1px solid var(--line);border-radius:8px; padding:0 22px;transition:border-color .2s} .lp-faq details[open]{border-color:var(--line-2)} .lp-faq summary{padding:19px 0;cursor:pointer;list-style:none;display:flex;align-items:center; justify-content:space-between;gap:16px;font-size:15px;font-weight:500} .lp-faq summary::-webkit-details-marker{display:none} .lp-faq summary::after{content:"";flex:0 0 auto;width:9px;height:9px;border-right:1.6px solid var(--gold); border-bottom:1.6px solid var(--gold);transform:rotate(45deg) translateY(-2px);transition:transform .22s} .lp-faq details[open] summary::after{transform:rotate(-135deg) translateY(-2px)} .lp-faq .a{padding:0 0 20px;font-size:14px;color:var(--muted);line-height:1.6} /* ── PIE ────────────────────────────────────────────────────────────────── */ .lp-foot{border-top:1px solid var(--line);padding:66px 0 34px;background:var(--bg2)} .lp-foot .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px} .lp-foot .about{max-width:22em;margin-top:18px;font-size:13.5px;color:var(--dim);line-height:1.6} .lp-foot .footer-brand{display:flex;flex-direction:column;align-items:center;justify-content:flex-start; text-align:center;justify-self:center} .lp-foot .footer-brand .about{margin-top:7px;line-height:1.35;white-space:nowrap} .lp-foot h5{font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.2em; text-transform:uppercase;color:var(--ink)} .lp-foot ul{margin-top:16px;list-style:none;display:grid;gap:10px} .lp-foot a{font-size:14px;color:var(--muted);text-decoration:none;transition:color .18s} .lp-foot a:hover{color:var(--gold)} .lp-news{margin-top:16px;display:flex;gap:9px} .lp-news input{flex:1;min-width:0;padding:12px 15px;border:1px solid var(--line-2);border-radius:5px; background:var(--surface);color:var(--ink);font-family:var(--sans);font-size:14px} .lp-news input:focus{outline:none;border-color:var(--gold)} .lp-news button{padding:12px 20px;border:0;border-radius:5px;background:var(--gold);color:var(--on-gold); font-family:var(--sans);font-weight:600;font-size:13px;cursor:pointer;transition:.18s;white-space:nowrap} .lp-news button:hover{background:var(--gold-soft)} .lp-foot .base{margin-top:52px;padding-top:26px;border-top:1px solid var(--line); display:flex;justify-content:center;align-items:center;text-align:center; font-size:12.5px;color:var(--dim)} /* ── PÁGINAS DE INFORMACIÓN ───────────────────────────────────────────── */ /* Igual que en Inicio, la barra flota sobre el head. El espacio de lectura pertenece al propio hero, no a una franja vacía situada antes de él. */ .info-main{padding-top:0} .info-hero{padding:clamp(86px,11vw,150px) 0 clamp(48px,7vw,88px)!important;text-align:center} .info-hero .lp-head{max-width:780px;margin:0 auto} .info-hero .lp-head p{max-width:55ch;margin-left:auto;margin-right:auto} .info-back{display:inline-block;margin-bottom:24px} .info-actions{display:flex;justify-content:center;margin-top:26px} .info-main .lp-faq-full{align-items:start} .info-main .lp-faq-full .faq-column{display:flex;min-width:0;flex-direction:column;gap:16px} .info-main .lp-faq-full details{overflow:hidden} .info-main .lp-faq-full details:not([open]){height:84px} .info-main .lp-faq-full summary{min-height:82px;padding:15px 0} .info-main .lp-plans{margin-top:12px} .faq-cta{text-align:center} .faq-cta .lp-head{max-width:650px;margin-left:auto;margin-right:auto;margin-bottom:28px} .faq-cta .btn{display:inline-flex} @media(max-width:620px){.info-main{padding-top:0}.info-hero{padding-top:86px!important}} /* ── RESPONSIVO ─────────────────────────────────────────────────────────── */ @media (max-width:1040px){ /* EL HERO EN MÓVIL. El libro se va ARRIBA y encoge: en una pantalla angosta el titular tiene que ser lo primero que se lee completo, y una imagen de 1.422 px de alto empuja el botón fuera de la pantalla. */ .lp-hero{padding:130px 0 72px;text-align:center} .lp-hero .wrap{grid-template-columns:1fr;gap:36px} .lp-hero .shot{order:-1;max-width:420px} .hero-shelf{gap:14px 12px} .shelf-note{margin-top:16px;font-size:11.5px} .lp-hero h1{margin-top:20px;font-size:clamp(32px,8.4vw,46px);transform-origin:center} .lp-hero .lead{margin-left:auto;margin-right:auto;font-size:16.5px} .lp-hero .actions{justify-content:center} .lp-hero::after{width:520px;height:520px;top:-160px;right:-120px} .lp-strip .box{grid-template-columns:1fr 1fr} .lp-strip .cell:nth-child(3){border-left:0} .lp-strip .cell:nth-child(n+3){border-top:1px solid var(--line)} .lp-steps{grid-template-columns:1fr 1fr;gap:44px 0} .lp-step:nth-child(3)::before{display:none} .lp-proof .box{grid-template-columns:1fr} .lp-proof .right{border-left:0;border-top:1px solid var(--line)} .lp-plans{grid-template-columns:1fr} .lp-plan.best{transform:none} .lp-plan.best:hover{transform:translateY(-5px)} .lp-faq{grid-template-columns:1fr} .lp-foot .cols{grid-template-columns:1fr 1fr;gap:36px} } @media (max-width:620px){ .lp{--pad-sec:66px} .lp-hero{padding:112px 0 58px} /* en el teléfono seis portadas quedan diminutas: van cuatro, más grandes */ .lp-hero .shot{max-width:300px} .hero-shelf{grid-template-columns:repeat(2,1fr);gap:16px 14px} .shelf-book:nth-child(n+6){display:none} .lp-hero .actions{flex-direction:column;align-items:stretch} .lp-hero .actions .btn{width:100%;text-align:center} .lp-hero .lead{font-size:16px} .lp .wrap{padding:0 20px} .lp-badge{font-size:10px;letter-spacing:.16em} .lp-strip .box{grid-template-columns:1fr} .lp-strip .cell+.cell{border-left:0;border-top:1px solid var(--line)} .lp-steps{grid-template-columns:1fr;gap:38px} .lp-step::before{display:none!important} .lp-proof .left,.lp-proof .right{padding:36px 26px} .lp-foot .cols{grid-template-columns:1fr} } /* ── SERVICIOS · carrusel cinematográfico 16:9 ────────────────────────── Una escena por mensaje. El texto y la imagen se funden juntos mientras un movimiento Ken Burns mantiene la toma viva sin depender de video. */ .services-cinema-section{padding:0!important;background:#100e0c} .srv-cinema{position:relative;isolation:isolate;width:100vw;aspect-ratio:16/9; margin-left:calc(50% - 50vw);overflow:hidden;border-block:1px solid rgba(205,169,78,.32); background:#100e0c;box-shadow:0 34px 80px rgba(35,25,8,.2);color:#fff} .srv-intro{position:absolute;z-index:3;top:clamp(84px,7vw,112px);left:50%; width:min(90vw,920px);transform:translateX(-50%);text-align:center;pointer-events:none; text-shadow:0 2px 26px rgba(0,0,0,.72)} .srv-intro .eyebrow{color:#d6ad45;font-weight:700; text-shadow:0 1px 14px rgba(0,0,0,.9),0 0 22px rgba(214,173,69,.22)} .srv-intro h2{margin-top:12px;color:#d6ad45;font-size:clamp(31px,4vw,62px); line-height:1.02;letter-spacing:-.03em;text-wrap:balance} .srv-intro p{margin:16px auto 0;max-width:58rem;color:rgba(255,250,239,.78); font-size:clamp(13px,1.18vw,17px);line-height:1.45;text-wrap:balance} .srv-slide{position:absolute;inset:0;z-index:0;opacity:0;visibility:hidden; pointer-events:none;transition:opacity 1.45s ease,visibility 0s linear 1.45s} .srv-slide::after{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(90deg,rgba(8,7,6,.9) 0%,rgba(8,7,6,.68) 35%,rgba(8,7,6,.2) 68%,rgba(8,7,6,.08) 100%), linear-gradient(0deg,rgba(8,7,6,.66) 0%,transparent 42%)} .srv-slide.is-active{z-index:1;opacity:1;visibility:visible;pointer-events:auto; transition:opacity 1.45s ease,visibility 0s} .srv-slide img{position:absolute;inset:-4%;width:108%;height:108%;max-width:none; object-fit:cover;object-position:var(--focus-x,70%) center;transform:scale(1.02) translate(0,0); filter:saturate(.9) contrast(1.04)} .srv-slide.is-active img{animation:srv-camera 8.6s cubic-bezier(.18,.5,.25,1) both} @keyframes srv-camera{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.13) translate(var(--pan-x,-2%),var(--pan-y,0%))}} .srv-copy{position:absolute;z-index:2;left:clamp(24px,7vw,132px);bottom:clamp(80px,16vw,300px); width:min(590px,53%);text-shadow:0 2px 22px rgba(0,0,0,.38);transform:translateY(18px);opacity:0} .srv-slide.is-active .srv-copy{animation:srv-copy-in .85s .34s cubic-bezier(.2,.75,.25,1) forwards} @keyframes srv-copy-in{to{opacity:1;transform:translateY(0)}} .srv-group{display:inline-block;margin-bottom:18px;color:#dfbd64;font-size:11px;font-weight:700; letter-spacing:.2em;text-transform:uppercase} .srv-soon{display:inline-block;margin-left:10px;padding:5px 10px;border:1px solid rgba(223,189,100,.48); border-radius:100px;color:#e9cc80;font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase} .srv-copy h1,.srv-copy h3{margin:0;max-width:14ch;color:#fff;font-family:var(--serif);font-size:clamp(29px,4.1vw,62px); font-weight:600;letter-spacing:-.025em;line-height:.98;text-wrap:balance} .srv-copy p{margin:20px 0 0;max-width:48ch;color:rgba(255,255,255,.78);font-size:clamp(14px,1.35vw,18px);line-height:1.55} .srv-copy a{display:inline-flex;align-items:center;gap:10px;margin-top:26px;color:#f2d47e;font-size:12px; font-weight:700;letter-spacing:.11em;text-decoration:none;text-transform:uppercase} .srv-copy a span{font-size:18px;transition:transform .25s} .srv-copy a:hover span{transform:translateX(4px)} .sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important; overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important} @media(max-width:700px){ .srv-cinema{aspect-ratio:4/5} .srv-intro{top:84px;width:calc(100% - 40px)} .srv-intro h2{font-size:clamp(28px,8.4vw,40px)} .srv-intro p{margin-top:10px;font-size:12.5px;line-height:1.35} .srv-slide::after{background:linear-gradient(90deg,rgba(8,7,6,.85),rgba(8,7,6,.18)),linear-gradient(0deg,rgba(8,7,6,.82),transparent 65%)} .srv-copy{left:24px;right:24px;bottom:64px;width:auto} .srv-copy h1,.srv-copy h3{font-size:clamp(34px,10vw,49px)} .srv-copy p{font-size:14px;line-height:1.45}.srv-copy a{margin-top:18px} } @media(prefers-reduced-motion:reduce){ .srv-slide{transition:none}.srv-slide.is-active img,.srv-slide.is-active .srv-copy{animation:none} .srv-copy{opacity:1;transform:none} } /* el segundo bloque de preguntas continúa al primero sin salto */ .lp-faq-resto{margin-top:16px} .lp-faq-resto[hidden]{display:none} /* ── PORTALES ESTÁTICOS DE LA PORTADA ─────────────────────────────────── Desde la tercera sección la portada sólo presenta una imagen y una puerta. El movimiento y la explicación extensa viven en las páginas temáticas. */ .story-portal-section{padding:0!important;background:#0a0908} .story-portal{position:relative;isolation:isolate;display:block;width:100%;aspect-ratio:16/9; min-height:440px;overflow:hidden;border-block:1px solid rgba(205,169,78,.3); background:#0a0908;color:#fff8e8} .story-portal>img{position:absolute;inset:0;width:100%;height:100%;max-width:none; object-fit:cover;object-position:center;filter:saturate(.84) contrast(1.06) brightness(.82)} .story-portal::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(90deg,rgba(6,5,4,.94) 0%,rgba(7,6,5,.76) 35%,rgba(7,6,5,.24) 68%,rgba(7,6,5,.08) 100%), linear-gradient(0deg,rgba(6,5,4,.62),transparent 48%)} .story-portal-copy{position:absolute;z-index:2;left:clamp(24px,7vw,132px);top:50%; width:min(650px,55%);transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-start; text-shadow:0 2px 24px rgba(0,0,0,.55)} .story-portal-kicker{margin-bottom:20px;color:#dfbd64;font-size:11px;font-weight:700; letter-spacing:.2em;text-transform:uppercase} .story-portal-copy strong{max-width:14ch;color:#d6ad45;font-family:var(--serif); font-size:clamp(38px,5vw,76px);font-weight:600;letter-spacing:-.035em;line-height:.96} .story-portal-copy>span:not(.story-portal-kicker){margin-top:22px;max-width:46ch; color:rgba(255,250,239,.8);font-size:clamp(14px,1.3vw,18px);line-height:1.55} .story-portal-copy b{margin-top:28px;padding-bottom:6px;border-bottom:1px solid rgba(223,189,100,.52); color:#f0d27d;font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase} .story-portal:focus-visible{outline:3px solid #d6ad45;outline-offset:-4px} @media(max-width:700px){ .story-portal{aspect-ratio:4/5;min-height:560px} .story-portal::after{background:linear-gradient(90deg,rgba(6,5,4,.65),rgba(6,5,4,.12)), linear-gradient(0deg,rgba(6,5,4,.94) 0%,rgba(6,5,4,.52) 62%,transparent 88%)} .story-portal-copy{left:24px;right:24px;top:auto;bottom:58px;width:auto;transform:none} .story-portal-copy strong{font-size:clamp(39px,11vw,55px)} } /* ── PÁGINAS TEMÁTICAS ──────────────────────────────────────────────── */ .detail-page{padding-top:0} .detail-first-frame{position:relative;isolation:isolate;min-height:100svh;overflow:hidden; display:grid;place-items:center;background:#0a0908;color:#fff8e8} .detail-first-frame>:is(img,video){position:absolute;inset:0;width:100%;height:100%;object-fit:cover; filter:saturate(.86) contrast(1.06) brightness(.76)} .detail-first-frame::after{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(90deg,rgba(6,5,4,.9),rgba(6,5,4,.26) 68%,rgba(6,5,4,.08))} .detail-first-copy{position:relative;z-index:2;width:min(1180px,calc(100% - 56px));text-align:left} .detail-first-copy .eyebrow{color:#dfbd64} .detail-first-copy h1{margin-top:18px;max-width:14ch;color:#d6ad45;font-size:clamp(45px,6vw,88px); line-height:.96;letter-spacing:-.035em} .detail-first-copy p{margin-top:24px;max-width:50ch;color:rgba(255,250,239,.8);font-size:clamp(16px,1.5vw,20px)} .detail-explain{padding:clamp(72px,9vw,130px) 0} .detail-explain .detail-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(48px,8vw,120px);align-items:start} .detail-explain h2{color:var(--gold);font-size:clamp(34px,4.2vw,58px)} .detail-explain .detail-copy{display:grid;gap:22px}.detail-explain .detail-copy p{font-size:17px;line-height:1.75} .detail-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:58px} .detail-pillar{padding:28px;border:1px solid var(--line);border-radius:10px;background:var(--surface)} .detail-pillar h3{font-size:21px}.detail-pillar p{margin-top:10px;font-size:14px;line-height:1.6} .detail-identity-brand{display:flex;justify-content:center;margin-top:58px} .detail-identity-logo.logo.compact{--ls:25px;display:flex;width:max-content;max-width:100%;color:var(--ink)} .detail-identity-logo.logo.compact .logo-mark{filter:none} .detail-identity-brand+.detail-pillars{margin-top:26px} .detail-story{padding:clamp(76px,9vw,132px) 0;border-top:1px solid var(--line)} .detail-story-alt{background:color-mix(in srgb,var(--surface) 72%,var(--bg))} .detail-heading{max-width:900px;margin:0 auto 52px;text-align:center} .detail-heading .eyebrow,.detail-split .eyebrow,.detail-cta .eyebrow{color:var(--gold)} .detail-heading h2,.detail-split h2,.detail-cta h2{margin-top:16px;color:var(--gold); font-size:clamp(34px,4.4vw,62px);line-height:1.04;letter-spacing:-.03em} .detail-heading p{max-width:700px;margin:22px auto 0;font-size:17px;line-height:1.75;color:var(--muted)} .detail-feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px} .detail-feature-grid article,.ways-route-grid article{position:relative;padding:34px;border:1px solid var(--line); border-radius:10px;background:var(--surface)} .detail-feature-grid article>span,.ways-route-grid article>span{display:block;margin-bottom:26px;color:var(--gold); font:600 11px/1 var(--sans);letter-spacing:.2em} .detail-feature-grid h3,.ways-route-grid h3{font-size:clamp(21px,2vw,28px)} .detail-feature-grid p,.ways-route-grid p{margin-top:12px;color:var(--muted);font-size:15px;line-height:1.7} .detail-split{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(48px,8vw,120px);align-items:start} .detail-split .detail-copy{display:grid;gap:20px}.detail-split .detail-copy p{font-size:17px;line-height:1.75} .detail-inline-link{justify-self:start;margin-top:14px;padding-bottom:6px;border-bottom:1px solid var(--gold); color:var(--gold);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase} .detail-inline-link span{display:inline-block;margin-left:8px} .detail-route-list{border-top:1px solid var(--line)} .detail-route-list article{display:grid;grid-template-columns:130px 1fr;gap:30px;padding:30px 4px; border-bottom:1px solid var(--line);align-items:start} .detail-route-list article>span{color:var(--gold);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase} .detail-route-list h3{font-size:clamp(22px,2.2vw,30px)} .detail-route-list p{max-width:740px;margin-top:9px;color:var(--muted);font-size:15px;line-height:1.7} .ways-route-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px} .ways-route-grid article{padding:28px}.ways-route-grid h3{font-size:21px} .detail-cta{padding:clamp(68px,8vw,108px) 0;background:#0b0d12;color:#f5f0e5} .detail-cta .wrap{display:flex;align-items:flex-end;justify-content:space-between;gap:50px} .detail-cta h2{max-width:750px;color:#d6ad45}.detail-cta p{max-width:650px;margin-top:18px; color:rgba(245,240,229,.7);font-size:16px;line-height:1.7} .detail-cta .btn{flex:0 0 auto} :root[data-theme="light"] .detail-cta{ background:linear-gradient(180deg,#fffdf8 0%,#f4efe3 100%);color:var(--ink); border-top:1px solid var(--line);border-bottom:1px solid var(--line)} :root[data-theme="light"] .detail-cta h2{color:var(--gold)} :root[data-theme="light"] .detail-cta p{color:var(--muted)} .detail-promise{padding:clamp(80px,10vw,144px) 0;background:#0b0d12;color:#f5f0e5; border-top:1px solid rgba(214,173,69,.28)} .promise-lead{display:grid;grid-template-columns:.75fr 1.25fr;column-gap:clamp(40px,7vw,110px); align-items:start;margin-bottom:58px} .promise-lead .eyebrow{grid-column:1;color:#d6ad45} .promise-lead h2{grid-column:1;margin-top:18px;color:#d6ad45;font-size:clamp(40px,5.2vw,72px); line-height:.98;letter-spacing:-.035em} .promise-lead>p{grid-column:2;grid-row:1 / span 2;align-self:end;max-width:650px; color:rgba(245,240,229,.72);font-size:18px;line-height:1.75} .promise-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid rgba(214,173,69,.25); border-radius:12px;overflow:hidden} .promise-grid article{min-height:290px;padding:32px;border-right:1px solid rgba(214,173,69,.2)} .promise-grid article:last-child{border-right:0} .promise-grid article>span{display:block;margin-bottom:42px;color:#d6ad45;font-size:11px; font-weight:700;letter-spacing:.2em} .promise-grid h3{color:#f5f0e5;font-size:clamp(21px,1.8vw,27px)} .promise-grid p{margin-top:14px;color:rgba(245,240,229,.66);font-size:14px;line-height:1.72} .promise-note{margin-top:20px;color:rgba(245,240,229,.48);font-size:12px;letter-spacing:.04em} :root[data-theme="light"] body[data-detail="motor"] .detail-promise{ background:linear-gradient(180deg,#f7f3e9,#f1ecdf);color:var(--ink);border-top-color:var(--line)} :root[data-theme="light"] body[data-detail="motor"] .promise-lead>p{color:#454545} :root[data-theme="light"] body[data-detail="motor"] .promise-grid{ border-color:color-mix(in srgb,var(--gold) 34%,var(--line));background:rgba(255,255,255,.22)} :root[data-theme="light"] body[data-detail="motor"] .promise-grid article{ border-color:color-mix(in srgb,var(--gold) 24%,var(--line));background:rgba(255,255,255,.24)} :root[data-theme="light"] body[data-detail="motor"] .promise-grid h3{color:var(--ink)} :root[data-theme="light"] body[data-detail="motor"] .promise-grid p{color:var(--muted)} :root[data-theme="light"] body[data-detail="motor"] .promise-note{color:var(--dim)} .lp .site-nav .links a[aria-current="page"], .lp .site-nav.scrolled .links a[aria-current="page"]{ color:var(--gold);font-weight:700;text-shadow:none; box-shadow:inset 0 -1px 0 currentColor;padding-bottom:5px} .detail-error{min-height:70vh;display:grid;place-items:center;text-align:center;padding:80px 28px} @media(max-width:1100px){ .ways-route-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .promise-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .promise-grid article:nth-child(2){border-right:0} .promise-grid article:nth-child(-n+2){border-bottom:1px solid rgba(214,173,69,.2)} } @media(max-width:760px){ .detail-page{padding-top:0}.detail-first-copy{width:calc(100% - 40px)} .detail-first-copy h1{font-size:clamp(39px,12vw,58px)} .detail-explain .detail-grid{grid-template-columns:1fr;gap:28px} .detail-pillars{grid-template-columns:1fr} .detail-feature-grid,.ways-route-grid,.detail-split{grid-template-columns:1fr} .detail-heading{text-align:left}.detail-heading p{margin-left:0} .detail-route-list article{grid-template-columns:1fr;gap:12px} .detail-cta .wrap{display:grid;align-items:start}.detail-cta .btn{justify-self:start} .promise-lead{grid-template-columns:1fr}.promise-lead .eyebrow,.promise-lead h2, .promise-lead>p{grid-column:1;grid-row:auto}.promise-lead>p{margin-top:24px} .promise-grid{grid-template-columns:1fr}.promise-grid article{min-height:0;border-right:0; border-bottom:1px solid rgba(214,173,69,.2)} .promise-grid article:nth-child(3){border-bottom:1px solid rgba(214,173,69,.2)} .promise-grid article:last-child{border-bottom:0} } /* Los heads cinematográficos usan un velo marfil en modo claro. La capa se aplica sobre cada imagen o video, por lo que permanece estable durante los fundidos y no produce destellos oscuros entre escenas. */ :root[data-theme="light"] body[data-detail="motor"] .lp-band::before{ background:linear-gradient(90deg,rgba(249,246,237,.9) 0%,rgba(249,246,237,.68) 44%,rgba(249,246,237,.34) 100%)} :root[data-theme="light"] body[data-detail="motor"] .lp-band::after{ background:linear-gradient(180deg,rgba(255,252,244,.18),rgba(255,252,244,.42))} :root[data-theme="light"] body[data-detail="motor"] .band-layer{ filter:saturate(.72) contrast(.94) brightness(1.06)} :root[data-theme="light"] body[data-detail="motor"] .band-promise h2, :root[data-theme="light"] body[data-detail="motor"] .lp-band-line b{color:#171717;text-shadow:none} :root[data-theme="light"] body[data-detail="motor"] .band-promise h2 em, :root[data-theme="light"] body[data-detail="motor"] :is(.eq,.band-kicker,.band-sig){color:var(--gold)} :root[data-theme="light"] body[data-detail="motor"] .lp-band-line{color:#454545} :root[data-theme="light"] body[data-detail="servicios"] .srv-slide::after{ background:linear-gradient(90deg,rgba(249,246,237,.94) 0%,rgba(249,246,237,.72) 43%,rgba(249,246,237,.34) 100%), linear-gradient(0deg,rgba(249,246,237,.52),transparent 55%)} :root[data-theme="light"] body[data-detail="servicios"] .srv-slide img{ filter:saturate(.72) contrast(.94) brightness(1.07)} :root[data-theme="light"] body[data-detail="servicios"] :is(.srv-intro,.srv-copy){text-shadow:none} :root[data-theme="light"] body[data-detail="servicios"] :is(.srv-intro p,.srv-copy p){color:#4b4b4b} :root[data-theme="light"] body[data-detail="servicios"] :is(.srv-copy h1,.srv-copy h3){color:#161616} :root[data-theme="light"] body[data-detail="servicios"] :is(.srv-intro .eyebrow,.srv-intro h2,.srv-group,.srv-copy a){color:var(--gold)} :root[data-theme="light"] body:is([data-detail="motor"],[data-detail="servicios"]) .detail-first-frame::after{ background:linear-gradient(90deg,rgba(249,246,237,.92),rgba(249,246,237,.48) 68%,rgba(249,246,237,.22))} :root[data-theme="light"] body:is([data-detail="motor"],[data-detail="servicios"]) .detail-first-copy p{color:#454545} /* ── PUBLICACIÓN Y DIFUSIÓN ─────────────────────────────────────────── */ .promo-cinema{position:relative;isolation:isolate;width:100%;min-height:100svh; overflow:hidden;background:#090b0f;color:#f7f2e8;touch-action:pan-y;overscroll-behavior-x:contain} .promo-slide{position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none; transition:opacity 1.5s ease,visibility 0s linear 1.5s} .promo-slide.is-active{opacity:1;visibility:visible;pointer-events:auto;transition:opacity 1.5s ease,visibility 0s} .promo-slide>img{position:absolute;inset:-4%;width:108%;height:108%;max-width:none;object-fit:cover; object-position:center;filter:saturate(.88) contrast(1.05);transform:scale(1.02)} .promo-slide.is-active>img{animation:promo-camera 7.5s cubic-bezier(.18,.5,.25,1) both} .promo-slide:nth-child(even).is-active>img{animation-name:promo-camera-b} @keyframes promo-camera{from{transform:scale(1.02) translate3d(0,0,0)}to{transform:scale(1.12) translate3d(-1.5%,-.8%,0)}} @keyframes promo-camera-b{from{transform:scale(1.12) translate3d(1.3%,.6%,0)}to{transform:scale(1.03) translate3d(0,0,0)}} .promo-slide::after{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(90deg,rgba(6,7,10,.95) 0%,rgba(6,7,10,.78) 38%,rgba(6,7,10,.22) 72%,rgba(6,7,10,.08)), linear-gradient(0deg,rgba(6,7,10,.5),transparent 50%)} .promo-copy{position:absolute;z-index:2;left:clamp(26px,7vw,132px);top:50%;transform:translateY(calc(-50% + 18px)); width:min(720px,56%);opacity:0;text-shadow:0 2px 26px rgba(0,0,0,.55)} .promo-slide.is-active .promo-copy{animation:promo-copy-in .9s .3s cubic-bezier(.2,.75,.25,1) forwards} @keyframes promo-copy-in{to{opacity:1;transform:translateY(-50%)}} .promo-kicker{display:block;margin-bottom:24px;color:#dfbd64;font-size:11px;font-weight:700; letter-spacing:.2em;text-transform:uppercase} .promo-copy h1,.promo-copy h2{margin:0;color:#f7f2e8;font-size:clamp(44px,5.7vw,82px); line-height:.96;letter-spacing:-.04em;text-wrap:balance} .promo-copy :is(h1,h2) em{color:#d6ad45;font-weight:500} .promo-copy p{max-width:56ch;margin-top:25px;color:rgba(247,242,232,.78);font-size:clamp(15px,1.35vw,19px);line-height:1.65} .promo-tag{display:inline-block;margin-top:30px;padding-top:14px;border-top:1px solid rgba(223,189,100,.48); color:#e5c66f;font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase} .publicity-star{border-bottom:1px solid var(--line)} .service-clarity{margin-top:26px;padding:18px 22px;border-left:2px solid var(--gold);background:var(--surface); color:var(--muted);font-size:12px;line-height:1.65} .publicity-services{border-top:1px solid var(--line)} .publicity-services article{display:grid;grid-template-columns:62px 1fr auto;gap:30px;align-items:start; padding:34px 4px;border-bottom:1px solid var(--line)} .publicity-services article>span{color:var(--gold);font-size:11px;font-weight:700;letter-spacing:.2em} .publicity-services h3{font-size:clamp(23px,2.3vw,32px)} .publicity-services p{max-width:760px;margin-top:10px;color:var(--muted);font-size:15px;line-height:1.7} .publicity-services strong{align-self:center;color:var(--gold);font-size:10px;letter-spacing:.15em;text-transform:uppercase} :root[data-theme="light"] body[data-detail="publicidad"] .promo-slide::after{ background:linear-gradient(90deg,rgba(249,246,237,.95) 0%,rgba(249,246,237,.76) 43%,rgba(249,246,237,.25) 100%)} :root[data-theme="light"] body[data-detail="publicidad"] .promo-slide>img{filter:saturate(.74) contrast(.95) brightness(1.05)} :root[data-theme="light"] body[data-detail="publicidad"] .promo-copy{text-shadow:none} :root[data-theme="light"] body[data-detail="publicidad"] .promo-copy :is(h1,h2){color:#171717} :root[data-theme="light"] body[data-detail="publicidad"] .promo-copy p{color:#454545} :root[data-theme="light"] body[data-detail="publicidad"] :is(.promo-kicker,.promo-tag,.promo-copy :is(h1,h2) em){color:var(--gold)} @media(max-width:760px){ .promo-cinema{min-height:100svh} .promo-slide::after{background:linear-gradient(90deg,rgba(6,7,10,.72),rgba(6,7,10,.12)),linear-gradient(0deg,rgba(6,7,10,.94),transparent 75%)} .promo-copy{left:24px;right:24px;top:auto;bottom:60px;width:auto;transform:translateY(18px)} .promo-slide.is-active .promo-copy{animation-name:promo-copy-mobile} @keyframes promo-copy-mobile{to{opacity:1;transform:translateY(0)}} .promo-copy h1,.promo-copy h2{font-size:clamp(38px,11vw,56px)} .publicity-services article{grid-template-columns:44px 1fr}.publicity-services strong{grid-column:2;justify-self:start} } @media(prefers-reduced-motion:reduce){ .promo-slide{transition:none}.promo-slide.is-active>img,.promo-slide.is-active .promo-copy{animation:none} .promo-copy{opacity:1;transform:translateY(-50%)} } /* ── MARKETPLACE · COMPRA PUNTUAL ──────────────────────────────────── */ .market-main{padding-top:0} .market-hero{position:relative;isolation:isolate;display:flex;min-height:290px;align-items:center;overflow:hidden;padding:48px 0; border-bottom:1px solid color-mix(in srgb,var(--gold) 34%,transparent);background:#050608} .market-hero::before{content:"";position:absolute;z-index:-2;inset:-7%;background:url('assets/marketplace/marketplace-bar.jpg') center 52%/cover no-repeat; transform-origin:68% 52%;will-change:transform;animation:market-random-camera var(--camera-duration,108s) cubic-bezier(.45,.05,.55,.95) var(--camera-delay,-28s) infinite} .market-hero::after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,rgba(5,6,8,.94) 0%,rgba(5,6,8,.8) 38%,rgba(5,6,8,.26) 76%,rgba(5,6,8,.18) 100%)} .market-hero>.wrap{position:relative;z-index:1} .market-hero .eyebrow,.market-heading .eyebrow{color:var(--gold)} .market-hero h1{max-width:740px;margin-top:13px;color:#f7f2e8;font-size:clamp(42px,5.3vw,72px);line-height:.92;letter-spacing:-.042em} .market-hero h1 em{color:var(--gold);font-weight:500} .market-hero p{max-width:580px;margin-top:18px;color:rgba(247,242,232,.72);font-size:clamp(15px,1.3vw,18px);line-height:1.55} :root[data-theme="light"] body[data-detail="marketplace"] .market-hero::before{filter:saturate(.72) contrast(.94) brightness(1.07)} :root[data-theme="light"] body[data-detail="marketplace"] .market-hero::after{ background:linear-gradient(90deg,rgba(249,246,237,.95) 0%,rgba(249,246,237,.8) 45%,rgba(249,246,237,.3) 100%)} :root[data-theme="light"] body[data-detail="marketplace"] .market-hero h1{color:#171717;text-shadow:none} :root[data-theme="light"] body[data-detail="marketplace"] .market-hero p{color:#454545;text-shadow:none} :root[data-theme="light"] body[data-detail="marketplace"] .market-hero :is(.eyebrow,h1 em){color:var(--gold)} .market-catalog{padding:clamp(54px,6vw,84px) 0} .detail-marketplace{scroll-margin-top:86px;border-top:1px solid var(--line);background:var(--bg2)} .market-heading{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(40px,8vw,110px);align-items:end;margin-bottom:38px} .market-heading h2{margin-top:14px;color:var(--gold);font-size:clamp(36px,4.2vw,58px);line-height:1.02;letter-spacing:-.035em} .market-heading>p{color:var(--muted);font-size:16px;line-height:1.72} .market-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px} .market-card{position:relative;display:block;aspect-ratio:1;border-radius:9px;color:var(--ink);perspective:1200px; transition:transform .28s cubic-bezier(.2,.7,.3,1),filter .28s} .market-card-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .72s cubic-bezier(.2,.72,.25,1)} .market-face{position:absolute;inset:0;overflow:hidden;border:1px solid var(--line);border-radius:9px;background:var(--surface); box-shadow:0 12px 30px rgba(0,0,0,.06);backface-visibility:hidden;-webkit-backface-visibility:hidden} .market-card.featured .market-face{border-color:color-mix(in srgb,var(--gold) 64%,var(--line))} .market-front img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.02);will-change:transform; animation:market-random-camera var(--camera-duration,84s) cubic-bezier(.45,.05,.55,.95) var(--camera-delay,-20s) infinite} .market-front h3{position:absolute;z-index:1;left:0;right:0;bottom:0;display:flex;align-items:flex-end;min-height:42%; margin:0;padding:34px 18px 16px;background:linear-gradient(transparent,rgba(4,4,4,.9));color:#f7f2e7; font-size:clamp(17px,1.45vw,21px);line-height:1.08;letter-spacing:-.015em;text-shadow:0 1px 12px rgba(0,0,0,.55)} :root[data-theme="light"] body[data-detail="servicios"] .market-front::before{content:"";position:absolute;z-index:1;inset:0; background:linear-gradient(180deg,rgba(249,246,237,.12),rgba(249,246,237,.18) 58%,rgba(249,246,237,.42));pointer-events:none} :root[data-theme="light"] body[data-detail="servicios"] .market-front img{filter:saturate(.76) contrast(.94) brightness(1.04)} :root[data-theme="light"] body[data-detail="servicios"] .market-front h3{z-index:2; background:linear-gradient(transparent,rgba(249,246,237,.92));color:#171717;text-shadow:none} .market-back{display:flex;flex-direction:column;padding:24px;transform:rotateY(180deg); background:radial-gradient(circle at 88% 10%,color-mix(in srgb,var(--gold) 15%,transparent),transparent 34%),var(--surface)} .market-back-number{color:var(--gold);font:700 10px/1 var(--sans);letter-spacing:.2em} .market-back h3{margin:20px 0 12px;color:var(--ink);font-size:clamp(20px,1.8vw,27px);line-height:1.03;letter-spacing:-.025em} .market-back p{color:var(--muted);font-size:13px;line-height:1.55} .market-back-cta{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);color:var(--gold); font:700 10px/1.2 var(--sans);letter-spacing:.13em;text-transform:uppercase} .market-card:hover,.market-card:focus-visible,.market-card.is-flipped{transform:translateY(-4px);outline:none;filter:drop-shadow(0 18px 26px rgba(0,0,0,.12))} .market-card:hover .market-face,.market-card:focus-visible .market-face,.market-card.is-flipped .market-face{border-color:var(--gold)} @media(hover:hover) and (pointer:fine){ .market-card:hover .market-card-inner,.market-card:focus-visible .market-card-inner{transform:rotateY(180deg)} } .market-card.is-flipped .market-card-inner{transform:rotateY(180deg)} /* Cada recorrido alterna acercamiento y alejamiento mientras cambia de rumbo. JavaScript renueva estos seis puntos al terminar cada ciclo, de modo que las imágenes no repiten una oscilación mecánica ni avanzan todas al unísono. */ @keyframes market-random-camera{ 0% {transform:scale(var(--cam-z0,1.08)) translate3d(var(--cam-x0,-1.8%),var(--cam-y0,-1.1%),0)} 19% {transform:scale(var(--cam-z1,1.17)) translate3d(var(--cam-x1,2.2%),var(--cam-y1,-1.4%),0)} 39% {transform:scale(var(--cam-z2,1.09)) translate3d(var(--cam-x2,1.2%),var(--cam-y2,2.1%),0)} 60% {transform:scale(var(--cam-z3,1.16)) translate3d(var(--cam-x3,-2.3%),var(--cam-y3,1.2%),0)} 80% {transform:scale(var(--cam-z4,1.1)) translate3d(var(--cam-x4,-1.1%),var(--cam-y4,-2.2%),0)} 100%{transform:scale(var(--cam-z5,1.15)) translate3d(var(--cam-x5,2%),var(--cam-y5,.8%),0)} } .market-note{max-width:920px;margin:30px auto 0;text-align:center;color:var(--dim);font-size:11px;line-height:1.7} @media(max-width:1080px){.market-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:680px){ .market-main{padding-top:0}.market-heading{grid-template-columns:1fr;gap:24px}.market-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .market-card,.market-face{border-radius:7px}.market-front h3{min-height:52%;padding:28px 12px 12px;font-size:clamp(14px,4.5vw,18px)} .market-back{padding:15px}.market-back h3{margin:12px 0 8px;font-size:clamp(17px,4.8vw,21px)} .market-back p{font-size:11px;line-height:1.42}.market-back-cta{padding-top:10px;font-size:8.5px} .market-hero{min-height:270px;padding:42px 0}.market-hero::before{background-position:58% center} .market-hero h1{font-size:clamp(42px,12.5vw,54px)} } @media(prefers-reduced-motion:reduce){ .market-hero::before,.market-front img{animation:none}.market-card-inner{transition:none} }