/* North Apps — estilos del sitio
   Concepto: "el norte de noche". Cielo azul noche, aurora boreal, constelaciones
   y una aguja ámbar que marca el norte. Diseño oscuro a propósito (un solo tema).
   Motion: entrada de marca, aurora, transiciones entre páginas, textos por letras,
   apariciones con el scroll, parallax, halos que siguen el cursor, bordes con brillo.
   Con "reducir movimiento" activado en el dispositivo, todo queda quieto y visible. */

/* Tipografías: latin + latin-ext (acentos de rumano, alemán, francés, etc.) */
@font-face { font-family: "Schibsted Grotesk"; src: url("../fonts/schibsted-grotesk-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Schibsted Grotesk"; src: url("../fonts/schibsted-grotesk-latin-ext-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Schibsted Grotesk"; src: url("../fonts/schibsted-grotesk-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Schibsted Grotesk"; src: url("../fonts/schibsted-grotesk-latin-ext-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Public Sans"; src: url("../fonts/public-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Public Sans"; src: url("../fonts/public-sans-latin-ext-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Public Sans"; src: url("../fonts/public-sans-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Public Sans"; src: url("../fonts/public-sans-latin-ext-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Serif"; src: url("../fonts/instrument-serif-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Serif"; src: url("../fonts/instrument-serif-latin-ext-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Capas: noche profunda → paneles; acento ámbar (norte); brillo frío (constelación/aurora) */
:root {
  --noche: #060E18;
  --noche-2: #0B1724;
  --panel: #102031;
  --panel-2: #152A3E;
  --texto: #EAF0F5;
  --texto-suave: #9BB0C1;
  --linea: rgb(155 176 193 / .18);
  --norte: #F5B82E;
  --norte-oscuro: #1A1205;
  --hielo: #8FD3FF;
  --aurora: #3EE0B8;

  --f-titulo: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --f-texto: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-acento: "Instrument Serif", Georgia, "Times New Roman", serif;

  --ancho: 76rem;
  --lectura: 40rem;
  --radio: 18px;
  --curva: cubic-bezier(.2, .8, .2, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
body { margin: 0; background: var(--noche); color: var(--texto); font-family: var(--f-texto); font-size: 1.0625rem; line-height: 1.6; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--hielo); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--f-titulo); line-height: 1.05; text-wrap: balance; margin: 0; letter-spacing: -0.02em; }
p { margin: 0; }
.serif { font-family: var(--f-acento); font-style: italic; font-weight: 400; letter-spacing: 0; }
.envoltura { max-width: var(--ancho); margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.saltar { position: absolute; left: -999px; top: 0; background: var(--panel); padding: .5rem 1rem; z-index: 60; }
.saltar:focus { left: 1rem; top: 1rem; }

/* Grano fino sobre todo el sitio (textura de papel fotográfico) */
.grano { position: fixed; inset: 0; z-index: 70; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* Transición entre páginas (navegadores compatibles; el resto navega normal) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: .35s var(--curva) both salir-pagina; }
::view-transition-new(root) { animation: .55s var(--curva) both entrar-pagina; }
.marca { view-transition-name: marca; }

/* Barra de progreso de lectura (scroll) */
.lectura { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; height: 2px; z-index: 40; background: linear-gradient(90deg, var(--aurora), var(--hielo), var(--norte)); transform-origin: 0 50%; transform: scaleX(0); }
@supports (animation-timeline: scroll()) { @media (prefers-reduced-motion: no-preference) { .lectura { animation: progreso-lectura linear both; animation-timeline: scroll(root); } } }

/* ---------- Encabezado ---------- */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--noche); }
.encabezado { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 25; background: rgb(6 14 24 / .6); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); border-bottom: 1px solid var(--linea); }
.encabezado.flotante { position: absolute; left: 0; right: 0; background: transparent; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.encabezado .envoltura { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.2rem; }
.marca { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; font-family: var(--f-titulo); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; }
.marca svg { width: 28px; height: 28px; flex: none; }
.marca .aro, .icono .aro { stroke: var(--texto); }
.marca .aguja, .icono .aguja { fill: var(--norte); }
.marca .sur, .icono .sur { fill: var(--texto); opacity: .55; }
.nav ul { list-style: none; display: flex; gap: 1.6rem; margin: 0; padding: 0; }
.nav a { position: relative; text-decoration: none; font-weight: 700; font-size: .93rem; color: var(--texto-suave); padding-block: .3rem; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--norte); transform: scaleX(0); transform-origin: 100% 50%; transition: transform .35s var(--curva); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--texto); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: 0 50%; }
.menu-movil { display: none; position: relative; }
.menu-movil summary { list-style: none; cursor: pointer; font-weight: 700; padding: .5rem .95rem; border: 1px solid var(--linea); border-radius: 999px; background: rgb(6 14 24 / .5); }
.menu-movil summary::-webkit-details-marker { display: none; }
.menu-movil ul { position: absolute; right: 0; top: calc(100% + .5rem); background: var(--panel); border: 1px solid var(--linea); border-radius: 14px; list-style: none; margin: 0; padding: .5rem; min-width: 13rem; box-shadow: 0 20px 50px rgb(0 0 0 / .5); }
.menu-movil a { display: block; padding: .7rem .8rem; text-decoration: none; font-weight: 700; border-radius: 8px; }
.menu-movil a[aria-current="page"] { background: var(--panel-2); color: var(--norte); }
@media (max-width: 820px) { .nav { display: none; } .menu-movil { display: block; } }

/* Selector de idioma */
.derecha { display: flex; align-items: center; gap: .75rem; }
.idioma { position: relative; }
.idioma summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; font-family: var(--f-titulo); font-weight: 700; font-size: .82rem; letter-spacing: .08em; padding: .45rem .8rem; border: 1px solid var(--linea); border-radius: 999px; background: rgb(6 14 24 / .5); }
.idioma summary::-webkit-details-marker { display: none; }
.idioma summary svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.idioma ul { position: absolute; right: 0; top: calc(100% + .5rem); background: var(--panel); border: 1px solid var(--linea); border-radius: 14px; list-style: none; margin: 0; padding: .4rem; min-width: 11rem; box-shadow: 0 20px 50px rgb(0 0 0 / .5); z-index: 5; }
.idioma a { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem .75rem; text-decoration: none; font-weight: 700; border-radius: 8px; }
.idioma a span { color: var(--texto-suave); font-size: .8rem; font-weight: 400; }
.idioma a:hover { background: var(--panel-2); }
.idioma a[aria-current="true"] { color: var(--norte); }

/* Próximamente (catálogo de un idioma sin productos todavía) */
.pronto { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.pronto > * { min-width: 0; }
.pila { position: relative; width: min(100%, 24rem); aspect-ratio: 1; justify-self: center; }
.pila span { position: absolute; inset: 14% 22%; border-radius: 14px; border: 1px solid rgb(234 240 245 / .16); background: linear-gradient(160deg, var(--panel-2), var(--noche-2)); box-shadow: 0 30px 60px -20px rgb(0 0 0 / .8); transform: rotate(var(--r)) translateX(var(--x)); animation: flotar 6s ease-in-out infinite; animation-delay: var(--dl); }
.pila span::before { content: ""; position: absolute; left: 14%; right: 14%; top: 14%; height: 34%; border-radius: 8px; background: linear-gradient(90deg, rgb(234 240 245 / .05), rgb(234 240 245 / .14), rgb(234 240 245 / .05)) 0 0 / 200% 100%; animation: cargando 2s ease-in-out infinite; }
.pila span::after { content: ""; position: absolute; left: 14%; right: 30%; top: 56%; height: 7%; border-radius: 4px; background: rgb(234 240 245 / .12); box-shadow: 0 1.6em 0 rgb(234 240 245 / .08); }
.pila span:last-child { border-color: rgb(245 184 46 / .45); }
.otro-idioma { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--linea); display: grid; gap: .6rem; color: var(--texto-suave); }
.otro-idioma a { color: var(--texto); font-weight: 700; }
@media (max-width: 860px) { .pronto { grid-template-columns: 1fr; } .pila { max-width: 16rem; order: -1; } }
@keyframes flotar { 50% { translate: 0 -10px; } }

/* ---------- Botones ---------- */
.boton { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 3.1rem; padding: .75rem 1.4rem; border-radius: 999px; font-weight: 700; text-decoration: none; font-size: 1rem; border: 1px solid transparent; cursor: pointer; font-family: var(--f-texto); transition: transform .25s var(--curva), box-shadow .25s ease, background .25s ease, border-color .25s ease, translate .3s var(--curva); translate: var(--mx, 0) var(--my, 0); }
.boton.principal { background: var(--norte); color: var(--norte-oscuro); }
.boton.principal:hover { box-shadow: 0 12px 34px -8px rgb(245 184 46 / .6); }
.boton.fantasma { color: var(--texto); border-color: rgb(234 240 245 / .3); background: rgb(234 240 245 / .04); }
.boton.fantasma:hover { border-color: var(--texto); }
.boton .flecha { transition: transform .25s var(--curva); }
.boton:hover .flecha { transform: translateX(4px); }

/* ---------- Títulos animados (letras y palabras) ---------- */
.letras .l { display: inline-block; animation: letra .9s var(--curva) both; animation-delay: calc(var(--d, 0s) + var(--i) * .045s); }
.palabras .p { display: inline-block; animation: entrar 1s var(--curva) both; animation-delay: calc(var(--d, 0s) + var(--i) * .12s); }
.fundido { animation: aparecer .9s var(--d, 0s) both; }
.antetitulo { font-family: var(--f-titulo); font-weight: 600; text-transform: uppercase; letter-spacing: .16em; font-size: .78rem; color: var(--texto-suave); display: inline-flex; align-items: center; gap: .6rem; }
.antetitulo::before { content: ""; width: 1.6rem; height: 1px; background: var(--norte); }

/* Aparición con el scroll (solo navegadores con scroll-driven animations) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .revelar { animation: revelar linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
    .parallax { animation: parallax linear both; animation-timeline: view(); animation-range: cover; }
  }
}

/* ================= ENTRADA (inicio) ================= */
.entrada { position: relative; isolation: isolate; min-height: 100svh; display: grid; place-items: center; overflow: hidden; text-align: center; background: radial-gradient(70rem 50rem at 50% 120%, rgb(62 224 184 / .10), transparent 60%), var(--noche); }
.aurora { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; animation: aparecer 2.4s 1.2s both; }
.entrada::after { content: ""; position: absolute; inset: auto 0 0; height: 30%; z-index: -1; background: linear-gradient(transparent, var(--noche)); }
.entrada .centro { display: grid; justify-items: center; gap: 1.4rem; padding-block: 7rem 6rem; max-width: 60rem; }
.logo-grande { width: clamp(110px, 18vw, 170px); height: auto; overflow: visible; animation: brillo-logo 2.4s 2.1s ease-out both; }
.logo-grande .chispa { fill: #fff; transform-origin: 80px 80px; animation: chispa 1s ease-out both; }
.logo-grande .aro { fill: none; stroke: var(--texto); stroke-width: 2; stroke-dasharray: 440; animation: dibujar-aro 1.4s .5s cubic-bezier(.65,0,.35,1) both; }
.logo-grande .aro-int { fill: none; stroke: rgb(143 211 255 / .35); stroke-width: 1; stroke-dasharray: 3 7; transform-origin: 80px 80px; animation: aparecer .8s 1.2s both, girar 60s 1.2s linear infinite; }
.logo-grande .marcas line { stroke: var(--texto-suave); stroke-width: 2; stroke-linecap: round; animation: aparecer .5s 1.3s both; }
.logo-grande .rosa { transform-origin: 80px 80px; animation: aguja-grande 2s .9s cubic-bezier(.2,.9,.25,1.3) both; }
.logo-grande .aguja { fill: var(--norte); }
.logo-grande .sur { fill: var(--texto); opacity: .5; }
.nombre-marca { font-size: clamp(3.2rem, 12vw, 8.5rem); line-height: .9; letter-spacing: -0.045em; --d: 1.8s; }
.nombre-marca .l { background: linear-gradient(100deg, var(--texto) 40%, #fff 50%, var(--texto) 60%) 100% 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: converger 1.5s cubic-bezier(.16,1,.3,1) both, destello 2.2s ease-in-out both; will-change: transform, opacity; animation-delay: calc(var(--d) + var(--o) * .07s), 3.6s; }
.nombre-marca::after { content: ""; display: block; height: 2px; margin: .25em auto 0; width: 0; background: linear-gradient(90deg, transparent, var(--norte), transparent); animation: subrayar 1.2s 3.1s cubic-bezier(.65,0,.35,1) both; }
.lema-marca { font-size: clamp(1.2rem, 2.6vw, 1.6rem); color: var(--texto-suave); max-width: 36rem; --d: 2.7s; }
.lema-marca .serif { color: var(--norte); font-size: 1.12em; }
.bajar { margin-top: 1.5rem; display: inline-grid; justify-items: center; gap: .5rem; text-decoration: none; font-family: var(--f-titulo); font-weight: 600; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--texto-suave); --d: 3.2s; }
.bajar span { width: 26px; height: 42px; border: 1.5px solid rgb(234 240 245 / .4); border-radius: 14px; position: relative; }
.bajar span::after { content: ""; position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--norte); animation: rueda 1.8s 3.6s ease-in-out infinite; }
.bajar:hover { color: var(--texto); }
html.sin-intro .entrada *, html.sin-intro .entrada { animation-delay: 0s !important; }

/* Puertas: Ebooks / Apps */
.puertas { padding-block: clamp(3rem, 8vw, 6rem) clamp(4rem, 9vw, 7rem); }
.puertas .cabecera { text-align: center; margin-inline: auto; justify-items: center; }
.grilla-puertas { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.5vw, 1.75rem); }
.puerta { --px: 50%; --py: 50%; position: relative; isolation: isolate; display: grid; grid-template-rows: auto 1fr auto; gap: 1.2rem; min-height: 30rem; padding: clamp(1.5rem, 3vw, 2.3rem); border-radius: 26px; text-decoration: none; background: linear-gradient(180deg, var(--panel), var(--noche-2)); overflow: hidden; transition: transform .5s var(--curva); min-width: 0; }
.puerta::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; z-index: 2; pointer-events: none;
  background: conic-gradient(from var(--giro, 0deg), rgb(234 240 245 / .14), var(--color-puerta) 18%, rgb(234 240 245 / .14) 36%, rgb(234 240 245 / .14));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: girar-borde 6s linear infinite; }
.puerta::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(28rem circle at var(--px) var(--py), color-mix(in srgb, var(--color-puerta) 22%, transparent), transparent 60%); opacity: 0; transition: opacity .4s ease; }
.puerta:hover::after { opacity: 1; }
.puerta:hover { transform: translateY(-6px); }
.puerta .arriba { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.puerta .estado { font-family: var(--f-titulo); font-weight: 700; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; padding: .35rem .75rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--color-puerta) 60%, transparent); color: var(--color-puerta); }
.puerta .num { font-family: var(--f-acento); font-style: italic; font-size: 1.4rem; color: var(--texto-suave); }
.puerta .escena { position: relative; min-height: 15rem; display: grid; place-items: center; }
.puerta h3 { font-size: clamp(2.6rem, 6vw, 4.2rem); line-height: .95; }
.puerta .pie-puerta { display: grid; gap: .7rem; }
.puerta p { color: var(--texto-suave); max-width: 28rem; }
.puerta .ir { display: inline-flex; align-items: center; gap: .6rem; font-weight: 700; color: var(--color-puerta); }
.puerta .ir .flecha { display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1px solid currentColor; transition: transform .35s var(--curva), background .35s ease, color .35s ease; }
.puerta:hover .ir .flecha { transform: translateX(6px) rotate(-45deg); background: var(--color-puerta); color: var(--noche); }
/* Escena ebooks: abanico de tapas */
.abanico { position: relative; width: min(100%, 22rem); aspect-ratio: 1.35; }
.abanico img { position: absolute; top: 8%; left: 50%; width: 52%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; box-shadow: 0 20px 40px -12px rgb(0 0 0 / .8); border: 1px solid rgb(255 255 255 / .12); translate: -50% 0; transform: rotate(var(--r)) translateX(var(--x)); transition: transform .6s var(--curva); }
.puerta:hover .abanico img { transform: rotate(calc(var(--r) * 1.6)) translateX(calc(var(--x) * 1.5)) translateY(-6px); }
/* Escena apps: teléfono en formación */
.telefono { position: relative; width: 8.5rem; aspect-ratio: 9 / 18; border-radius: 1.6rem; border: 1.5px solid rgb(234 240 245 / .35); background: linear-gradient(180deg, rgb(143 211 255 / .06), transparent); display: grid; align-content: start; gap: .55rem; padding: 1.4rem .8rem; }
.telefono::before { content: ""; justify-self: center; width: 2.4rem; height: .35rem; border-radius: 1rem; background: rgb(234 240 245 / .25); margin-bottom: .4rem; }
.telefono i { display: block; height: .7rem; border-radius: .35rem; background: linear-gradient(90deg, rgb(234 240 245 / .08), rgb(234 240 245 / .22), rgb(234 240 245 / .08)) 0 0 / 200% 100%; animation: cargando 1.8s ease-in-out infinite; }
.telefono i:nth-child(2) { width: 70%; animation-delay: .15s; } .telefono i:nth-child(3) { height: 3.2rem; animation-delay: .3s; } .telefono i:nth-child(4) { width: 85%; animation-delay: .45s; } .telefono i:nth-child(5) { width: 55%; animation-delay: .6s; }
.telefono .orb { position: absolute; inset: -2.5rem; border: 1px dashed rgb(245 184 46 / .35); border-radius: 50%; animation: girar 18s linear infinite; }
.telefono .orb::after { content: ""; position: absolute; top: 50%; left: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--norte); box-shadow: 0 0 16px var(--norte); }
@media (max-width: 820px) { .grilla-puertas { grid-template-columns: 1fr; } .puerta { min-height: 26rem; } }

/* ================= PÁGINAS INTERNAS ================= */
.cabeza-pagina { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(3.5rem, 9vw, 7rem) clamp(2.5rem, 6vw, 4.5rem); border-bottom: 1px solid var(--linea); background: radial-gradient(50rem 30rem at 85% 0%, rgb(143 211 255 / .10), transparent 60%), radial-gradient(40rem 30rem at 0% 100%, rgb(62 224 184 / .07), transparent 60%), var(--noche); }
.cabeza-pagina .cielo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.cabeza-pagina .envoltura { display: grid; gap: 1.2rem; }
.cabeza-pagina h1 { font-size: clamp(3rem, 10vw, 7.5rem); line-height: .92; letter-spacing: -0.045em; --d: .15s; }
.cabeza-pagina h1 .serif { color: var(--norte); }
.cabeza-pagina .bajada { font-size: clamp(1.1rem, 2.2vw, 1.35rem); color: var(--texto-suave); max-width: 40rem; --d: .7s; }
.migas { font-size: .85rem; color: var(--texto-suave); display: flex; gap: .5rem; flex-wrap: wrap; }
.migas a { text-decoration: none; } .migas a:hover { color: var(--texto); text-decoration: underline; }

.seccion { padding-block: clamp(4rem, 9vw, 7rem); position: relative; }
.cabecera { display: grid; gap: .9rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); max-width: 46rem; }
.cabecera h2 { font-size: clamp(2.1rem, 5vw, 3.6rem); }
.cabecera h2 .serif { color: var(--norte); }
.cabecera p { color: var(--texto-suave); font-size: 1.1rem; max-width: var(--lectura); }

/* Ebooks: escaparate con video + filas de kits */
.escaparate { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.escaparate > * { min-width: 0; }
.video { position: relative; min-width: 0; animation: subir 1.2s .4s var(--curva) both; }
.pantalla { position: relative; aspect-ratio: 1 / 1; max-width: 100%; border-radius: 26px; overflow: hidden; background: var(--panel); border: 1px solid rgb(234 240 245 / .14); box-shadow: 0 40px 100px -30px rgb(0 0 0 / .8), 0 0 90px -20px var(--halo, rgb(143 211 255 / .35)); transition: box-shadow 1s ease; cursor: pointer; }
.pantalla figure { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1s ease; }
.pantalla figure.activa { opacity: 1; }
.pantalla figure picture { display: block; width: 100%; height: 100%; }
.pantalla figure img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.14); }
.pantalla figure.activa img { animation: kenburns 4.6s linear both; }
.pantalla::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(6 14 24 / .55) 0%, transparent 22%, transparent 58%, rgb(6 14 24 / .88) 100%); pointer-events: none; }
.progreso { position: absolute; z-index: 2; top: 14px; left: 14px; right: 14px; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.progreso span { height: 3px; border-radius: 3px; background: rgb(255 255 255 / .28); overflow: hidden; }
.progreso span i { display: block; height: 100%; width: 0; background: #fff; }
.progreso span.hecho i { width: 100%; }
.progreso span.activo i { animation: llenar 4.6s linear both; }
.leyenda { position: absolute; z-index: 2; left: 18px; right: 18px; bottom: 16px; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.leyenda .rotulo { min-width: 0; }
.leyenda small { display: block; font-family: var(--f-titulo); font-weight: 600; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: rgb(234 240 245 / .75); }
.leyenda a { font-family: var(--f-titulo); font-weight: 700; font-size: clamp(1.25rem, 2.6vw, 1.6rem); text-decoration: none; color: #fff; }
.leyenda a:hover { text-decoration: underline; }
.pausa { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgb(255 255 255 / .35); background: rgb(6 14 24 / .5); color: #fff; display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(6px); }
.pausa svg { width: 16px; height: 16px; fill: currentColor; }
.video.pausado .progreso span.activo i, .video.pausado figure.activa img { animation-play-state: paused; }
.etiqueta-video { margin-top: .9rem; color: var(--texto-suave); font-size: .88rem; display: flex; align-items: center; gap: .5rem; }
.etiqueta-video::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #FF5A5A; animation: latido 1.6s infinite; }
@media (max-width: 900px) { .escaparate { grid-template-columns: 1fr; } }

.franja { border-block: 1px solid var(--linea); background: var(--noche-2); overflow: hidden; padding-block: 1.1rem; }
.franja .pista { display: flex; width: max-content; animation: desfilar 38s linear infinite; }
.franja:hover .pista { animation-play-state: paused; }
.franja ul { display: flex; gap: 2.5rem; padding: 0 1.25rem; margin: 0; list-style: none; flex: none; }
.franja li { font-family: var(--f-titulo); font-weight: 700; font-size: clamp(1.15rem, 2.4vw, 1.6rem); white-space: nowrap; display: inline-flex; align-items: center; gap: 2.5rem; }
.franja li::after { content: "✦"; color: var(--norte); font-size: .8em; }

.catalogo { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(3.5rem, 8vw, 6.5rem); }
.kit { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.75rem, 5vw, 4.5rem); align-items: center; }
.kit:nth-child(even) .visual { order: 2; }
.kit .visual { position: relative; perspective: 1000px; min-width: 0; }
.kit .visual::before { content: ""; position: absolute; inset: 8% 6%; background: radial-gradient(closest-side, var(--marca), transparent); filter: blur(50px); opacity: .55; z-index: -1; }
.kit .marco { border-radius: var(--radio); overflow: hidden; border: 1px solid rgb(234 240 245 / .12); box-shadow: 0 30px 80px -30px rgb(0 0 0 / .85); transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--curva); will-change: transform; }
.kit .marco img { aspect-ratio: 1 / 1; width: 100%; object-fit: cover; background: var(--panel); }
.kit .cuerpo { display: grid; gap: 1.1rem; min-width: 0; }
.kit .rubro { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--f-titulo); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .14em; color: var(--texto-suave); }
.kit .rubro::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--marca); box-shadow: 0 0 14px var(--marca); }
.kit h3 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
.kit .para { color: var(--texto-suave); font-size: 1.1rem; max-width: 34rem; }
.kit .para strong { color: var(--texto); }
.kit ul { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--linea); }
.kit li { padding-block: .8rem; border-bottom: 1px solid var(--linea); display: grid; grid-template-columns: 1.6rem 1fr; gap: .5rem; }
.kit li::before { content: "→"; color: var(--norte); font-weight: 700; }
.kit .pie-kit { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: .4rem; }
.kit .formato { font-size: .9rem; color: var(--texto-suave); }
@media (max-width: 860px) { .kit { grid-template-columns: 1fr; } .kit:nth-child(even) .visual { order: 0; } }

.pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; counter-reset: paso; }
.pasos li { counter-increment: paso; background: linear-gradient(180deg, var(--panel), var(--noche-2)); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.6rem; display: grid; gap: .6rem; align-content: start; min-width: 0; }
.pasos li::before { content: counter(paso, decimal-leading-zero); font-family: var(--f-acento); font-style: italic; font-size: 2.6rem; line-height: 1; color: var(--norte); }
.pasos h3 { font-size: 1.3rem; }
.pasos p { color: var(--texto-suave); }
@media (max-width: 800px) { .pasos { grid-template-columns: 1fr; } }

/* Apps */
.apps-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2.5rem; align-items: center; }
.apps-hero > * { min-width: 0; }
.orbita { position: relative; aspect-ratio: 1; max-width: 26rem; width: 100%; justify-self: center; }
.orbita span { position: absolute; inset: var(--in); border: 1px dashed rgb(143 211 255 / .28); border-radius: 50%; animation: girar var(--t) linear infinite; }
.orbita span::after { content: ""; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--hielo)); box-shadow: 0 0 16px var(--c, var(--hielo)); }
.orbita .nucleo { position: absolute; inset: 36%; border-radius: 28%; background: linear-gradient(145deg, var(--panel-2), var(--noche)); border: 1px solid rgb(234 240 245 / .16); display: grid; place-items: center; box-shadow: 0 0 60px -10px rgb(245 184 46 / .45); }
.orbita .nucleo svg { width: 46%; height: 46%; }
.aviso { display: grid; gap: .9rem; background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); padding: clamp(1.4rem, 3vw, 2rem); max-width: 34rem; }
.aviso h2 { font-size: 1.5rem; }
.aviso p { color: var(--texto-suave); }
.correo { font-family: var(--f-titulo); font-weight: 600; overflow-wrap: anywhere; color: var(--texto); }
.copiar { font: inherit; font-size: .9rem; background: none; border: 0; color: var(--texto-suave); text-decoration: underline; cursor: pointer; padding: 0; justify-self: start; }
@media (max-width: 860px) { .apps-hero { grid-template-columns: 1fr; } .orbita { max-width: 17rem; order: -1; } }

/* Nosotros */
.manifiesto { font-family: var(--f-titulo); font-weight: 700; font-size: clamp(1.8rem, 4.4vw, 3.2rem); line-height: 1.12; letter-spacing: -0.02em; max-width: 58rem; }
.manifiesto .serif { color: var(--norte); }
.manifiesto .tenue { color: rgb(234 240 245 / .38); }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.dos > * { min-width: 0; }
.prosa { display: grid; gap: 1.1rem; max-width: var(--lectura); }
.prosa p { color: var(--texto-suave); font-size: 1.08rem; }
.principios { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.principios li { border-top: 2px solid var(--norte); padding-top: 1.2rem; display: grid; gap: .5rem; align-content: start; min-width: 0; }
.principios h3 { font-size: 1.35rem; }
.principios p { color: var(--texto-suave); }
@media (max-width: 800px) { .dos, .principios { grid-template-columns: 1fr; } }

/* Contacto */
.tarjeta-contacto { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); padding: clamp(1.4rem, 3vw, 2rem); display: grid; gap: 1rem; }
.mail-grande { justify-self: start; font-family: var(--f-titulo); font-weight: 700; font-size: clamp(1.4rem, 4.6vw, 3rem); letter-spacing: -0.02em; text-decoration: none; overflow-wrap: anywhere; background: linear-gradient(90deg, var(--norte), var(--norte)) 0 100% / 0 2px no-repeat; transition: background-size .5s var(--curva); }
.mail-grande:hover { background-size: 100% 2px; }
.ficha { list-style: none; margin: 0; padding: 0; }
.ficha li { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; padding-block: .85rem; border-bottom: 1px solid var(--linea); }
.ficha li:last-child { border-bottom: 0; }
.ficha li > span:first-child { color: var(--texto-suave); font-size: .9rem; }
.ficha li > * { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 700px) { .ficha li { grid-template-columns: 1fr; gap: .15rem; } }

/* Preguntas */
.faq-grupos { display: grid; gap: 3rem; max-width: 56rem; }
.faq-grupo h2 { font-size: .85rem; font-family: var(--f-titulo); text-transform: uppercase; letter-spacing: .16em; color: var(--texto-suave); margin-bottom: 1rem; }
.faq { display: grid; gap: .75rem; }
.faq details { background: var(--panel); border: 1px solid var(--linea); border-radius: 14px; transition: border-color .25s ease, background .25s ease; interpolate-size: allow-keywords; }
.faq details:hover { background: var(--panel-2); }
.faq details[open] { border-color: rgb(245 184 46 / .45); }
.faq details::details-content { block-size: 0; overflow: hidden; transition: block-size .4s var(--curva), content-visibility .4s allow-discrete; }
.faq details[open]::details-content { block-size: auto; }
.faq summary { cursor: pointer; padding: 1.15rem 1.35rem; font-family: var(--f-titulo); font-weight: 600; font-size: 1.1rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 2px solid var(--norte); border-bottom: 2px solid var(--norte); transform: rotate(45deg); transition: transform .3s var(--curva); margin-top: -4px; }
.faq details[open] summary::after { transform: rotate(225deg); margin-top: 4px; }
.faq .respuesta { padding: 0 1.35rem 1.25rem; color: var(--texto-suave); }

/* Cierre con llamada (en páginas internas) */
.cierre { text-align: center; padding-block: clamp(4rem, 9vw, 6.5rem); border-top: 1px solid var(--linea); background: radial-gradient(40rem 20rem at 50% 100%, rgb(245 184 46 / .08), transparent 70%); }
.cierre .envoltura { display: grid; justify-items: center; gap: 1.2rem; }
.cierre h2 { font-size: clamp(2rem, 5vw, 3.4rem); }
.cierre h2 .serif { color: var(--norte); }
.cierre .acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }

/* Legales */
.legal { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.legal article { max-width: 46rem; display: grid; gap: 1rem; }
.legal h1 { font-size: clamp(2.2rem, 5.5vw, 3.4rem); }
.legal h2 { font-size: 1.35rem; margin-top: 1.2rem; }
.legal p, .legal li { color: var(--texto-suave); }
.legal strong { color: var(--texto); }
.legal ul, .legal ol { margin: 0; padding-left: 1.25rem; display: grid; gap: .45rem; }
.legal .fecha { font-size: .92rem; }
.legal .recuadro { background: var(--panel); border: 1px solid var(--linea); border-left: 3px solid var(--norte); border-radius: 10px; padding: 1rem 1.2rem; color: var(--texto); }
.legal a { color: var(--texto); }

/* Pie */
.pie { border-top: 1px solid var(--linea); padding-block: 3rem 2rem; font-size: .93rem; background: var(--noche); position: relative; overflow: hidden; }
.pie .envoltura { display: grid; gap: 2rem; }
.pie .columnas { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 2rem; }
.pie .columnas > * { min-width: 0; }
.pie h2 { font-size: .75rem; text-transform: uppercase; letter-spacing: .16em; color: var(--texto-suave); font-weight: 600; margin-bottom: .8rem; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.pie a { text-decoration: none; color: var(--texto-suave); }
.pie a:hover { color: var(--texto); text-decoration: underline; }
.pie .lema { margin-top: .7rem; color: var(--texto-suave); max-width: 22rem; }
.pie .gigante { font-family: var(--f-titulo); font-weight: 700; font-size: clamp(3.4rem, 15vw, 12rem); line-height: .85; letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 1px rgb(234 240 245 / .16); white-space: nowrap; text-align: center; user-select: none; overflow: hidden; }
.pie .base { color: var(--texto-suave); font-size: .85rem; border-top: 1px solid var(--linea); padding-top: 1.25rem; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; }
@media (max-width: 760px) { .pie .columnas { grid-template-columns: 1fr 1fr; } .pie .columnas > :first-child { grid-column: 1 / -1; } }

/* ---------- Animaciones ---------- */
@property --giro { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes girar-borde { to { --giro: 360deg; } }
@keyframes chispa { 0% { transform: scale(0); opacity: 0; } 40% { transform: scale(1.6); opacity: 1; } 100% { transform: scale(0); opacity: 0; } }
@keyframes dibujar-aro { from { stroke-dashoffset: 440; } to { stroke-dashoffset: 0; } }
@keyframes aguja-grande { 0% { transform: rotate(-540deg) scale(.4); opacity: 0; } 20% { opacity: 1; } 100% { transform: rotate(0deg) scale(1); opacity: 1; } }
@keyframes brillo-logo { 0% { filter: drop-shadow(0 0 0 rgb(245 184 46 / 0)); } 35% { filter: drop-shadow(0 0 40px rgb(245 184 46 / .7)); } 100% { filter: drop-shadow(0 0 18px rgb(245 184 46 / .25)); } }
@keyframes letra { from { opacity: 0; transform: translateY(.6em) rotate(6deg); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes converger { 0% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(var(--s)); filter: blur(14px); } 55% { opacity: 1; filter: blur(2px); } 100% { opacity: 1; transform: none; filter: blur(0); } }
@keyframes subrayar { to { width: 60%; } }
@keyframes destello { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes entrar { from { opacity: 0; transform: translateY(.45em); filter: blur(10px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes subir { from { opacity: 0; transform: translateY(30px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes revelar { from { opacity: 0; transform: translateY(50px); clip-path: inset(12% 0 0 0 round 20px); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 0); } }
@keyframes parallax { from { transform: translateY(40px); } to { transform: translateY(-40px); } }
@keyframes progreso-lectura { to { transform: scaleX(1); } }
@keyframes rueda { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } }
@keyframes cargando { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@keyframes kenburns { from { transform: scale(1.14) translate(1.5%, 1%); } to { transform: scale(1.02) translate(0, 0); } }
@keyframes llenar { from { width: 0; } to { width: 100%; } }
@keyframes desfilar { to { transform: translateX(-50%); } }
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes latido { 0% { box-shadow: 0 0 0 0 rgb(255 90 90 / .6); } 70% { box-shadow: 0 0 0 8px rgb(255 90 90 / 0); } 100% { box-shadow: 0 0 0 0 rgb(255 90 90 / 0); } }
@keyframes salir-pagina { to { opacity: 0; transform: scale(.985); filter: blur(4px); } }
@keyframes entrar-pagina { from { opacity: 0; transform: translateY(18px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
  .pantalla figure img { transform: none; }
  .progreso span.activo i { width: 100%; }
  .franja .pista { flex-wrap: wrap; width: auto; }
  .franja ul[aria-hidden="true"] { display: none; }
  .nombre-marca .l { color: var(--texto); background: none; }
}
@media print { .encabezado, .pie, .aurora, .cielo, .video, .franja, .orbita, .grano, .lectura { display: none; } body { background: #fff; color: #000; } }

/* Redes sociales (pie) */
.redes { display: grid; gap: .9rem; border-top: 1px solid var(--linea); padding-top: 1.75rem; }
.redes h2 { margin: 0; }
.redes ul { display: flex; flex-wrap: wrap; gap: .6rem; }
.red { display: inline-flex; align-items: center; gap: .55rem; padding: .55rem .95rem .55rem .7rem; border: 1px solid var(--linea); border-radius: 999px; color: var(--texto); text-decoration: none; font-weight: 700; font-size: .9rem; transition: border-color .25s ease, background .25s ease, transform .25s var(--curva); }
.red svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
a.red:hover { border-color: var(--norte); background: rgb(245 184 46 / .08); transform: translateY(-2px); }
.red.pronto { color: var(--texto-suave); cursor: default; }
.red.pronto em { font-style: normal; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--norte); border: 1px solid rgb(245 184 46 / .4); border-radius: 999px; padding: .1rem .45rem; }

/* Corrección celular: el cielo de la entrada ocupa la pantalla sin empujar el contenido */
.entrada .cielo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.entrada .centro { width: 100%; min-width: 0; }
.entrada .lema-marca { max-width: min(36rem, 100%); }
html { overflow-x: hidden; }
main { overflow-x: clip; }

/* Blindaje para Safari/iPhone: nada puede ensanchar la página */
html, body { max-width: 100%; overflow-x: hidden; }
body { position: relative; }
.entrada, .puertas, .cabeza-pagina, .seccion, .franja, .pie { contain: paint; max-width: 100vw; }
.entrada .centro { overflow: hidden; padding-inline: max(16px, env(safe-area-inset-left, 0px)); }
canvas { max-width: 100%; }