/* =====================================================================
   FUENTES AUTO-HOSPEDADAS — antes venían de Google Fonts (recurso externo
   que algunas redes/firewalls bloquean o ralentizan, retrasando el render).
   Ahora viven en /fonts del propio sitio: cero dependencia externa, carga
   más rápida y funciona aunque la red bloquee a Google. font-display:swap
   pinta ya con la fuente de respaldo y cambia al cargar la real.
   ===================================================================== */

@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/fonts/inter-400-latin-ext.woff2') format('woff2');
  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:'Inter';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/fonts/inter-400-latin.woff2') format('woff2');
  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:'Inter';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/fonts/inter-500-latin-ext.woff2') format('woff2');
  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:'Inter';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/fonts/inter-500-latin.woff2') format('woff2');
  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:'Space Grotesk';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/fonts/spacegrotesk-400-latin-ext.woff2') format('woff2');
  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:'Space Grotesk';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/fonts/spacegrotesk-400-latin.woff2') format('woff2');
  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:'Space Grotesk';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/fonts/spacegrotesk-500-latin-ext.woff2') format('woff2');
  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:'Space Grotesk';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/fonts/spacegrotesk-500-latin.woff2') format('woff2');
  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:'Space Grotesk';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/fonts/spacegrotesk-700-latin-ext.woff2') format('woff2');
  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:'Space Grotesk';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/fonts/spacegrotesk-700-latin.woff2') format('woff2');
  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:'Space Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/fonts/spacemono-400-latin-ext.woff2') format('woff2');
  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:'Space Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/fonts/spacemono-400-latin.woff2') format('woff2');
  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:'Space Mono';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/fonts/spacemono-700-latin-ext.woff2') format('woff2');
  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:'Space Mono';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/fonts/spacemono-700-latin.woff2') format('woff2');
  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;
}
:root{
  --tinta:        #15171c;
  --tinta-suave:  #5a6270;
  --tenue:        #8b93a1;
  --papel:        #f3f2ec;
  --papel-2:      #ffffff;
  --linea:        #e2e0d6;

  --acento:       #17a2b8;
  --acento-claro: #4fc3d9;
  --coral:        #f0662f;
  --violeta:      #6a5cff;
  --lima:         #37b47e;

  --radio:        14px;
  --radio-sm:     8px;
  --ancho-max:    1120px;
  --transicion:   .4s cubic-bezier(.22,.61,.36,1);

  --sans:    'Inter', system-ui, sans-serif;
  --display: 'Space Grotesk', var(--sans);
  --mono:    'Space Mono', ui-monospace, monospace;
}

/* Paleta oscura. Se aplica en dos casos:
   1) el SO está en oscuro y el usuario NO forzó claro con el botón;
   2) el usuario eligió oscuro con el botón ([data-theme="dark"]). */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --tinta:#ecebe4; --tinta-suave:#a7adba; --tenue:#6c7480;
    --papel:#0e1014; --papel-2:#171a20; --linea:#262a33; --acento-claro:#6ad4e8;
  }
}
:root[data-theme="dark"]{
  --tinta:#ecebe4; --tinta-suave:#a7adba; --tenue:#6c7480;
  --papel:#0e1014; --papel-2:#171a20; --linea:#262a33; --acento-claro:#6ad4e8;
}

/* botón para cambiar entre claro/oscuro (lo controla js/tema.js) */
.tema-toggle{
  display:inline-grid; place-items:center; width:38px; height:38px;
  border-radius:999px; border:1px solid var(--linea); background:transparent;
  color:var(--tinta-suave); transition:var(--transicion); flex-shrink:0;
}
.tema-toggle:hover{ color:var(--tinta); border-color:var(--tinta-suave); }
.tema-toggle svg{ width:18px; height:18px; }

*{ margin:0; padding:0; box-sizing:border-box; }
/* El color base vive en <html> y el <body> es transparente, para que el fondo
   aurora (position:fixed, z-index:-1) se vea detrás del contenido. El crossfade
   del cambio de tema anima este background cuando el navegador no soporta la
   View Transitions API (el fallback del corte seco claro/oscuro). */
html{ scroll-behavior:smooth; background:var(--papel); }
body{
  font-family:var(--sans);
  background:transparent;
  color:var(--tinta);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---------- Fondo aurora sutil (detrás de todo; en las páginas que traen el
   div .aurora: home y portafolio). Dos manchas de color desenfocadas que se
   mueven muy lento → profundidad y sensación premium sin distraer. ---------- */
.aurora{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
/* La suavidad la da el GRADIENTE radial (se desvanece a transparente), no un
   filter:blur. Antes había blur(72px) sobre manchas de 46vw: una capa borrosa
   enorme que iOS re-rasteriza al animar → tirones. Sin filtro, la mancha es un
   simple degradado pintado UNA vez; al promoverla a capa de GPU (translateZ +
   will-change), animar su transform es prácticamente gratis, y así se anima
   fluido en TODOS los dispositivos (incluido celular). */
.aurora::before, .aurora::after{
  content:''; position:absolute; border-radius:50%;
  opacity:.5; will-change:transform; transform:translateZ(0);
}
.aurora::before{
  width:46vw; height:46vw; left:-8vw; top:-6vw;
  /* Fallback SIN color-mix: navegadores viejos o webviews de apps (Instagram,
     etc.) no soportan color-mix() y descartarían todo el background → el aurora
     quedaría invisible. Con el rgba equivalente delante, siempre hay color. */
  background:radial-gradient(circle, rgba(23,162,184,.42), transparent 72%);
  background:radial-gradient(circle, color-mix(in srgb,var(--acento) 42%, transparent), transparent 72%);
  animation:auroraA 24s ease-in-out infinite alternate;
}
.aurora::after{
  width:40vw; height:40vw; right:-6vw; top:26vh;
  background:radial-gradient(circle, rgba(106,92,255,.34), transparent 72%);
  background:radial-gradient(circle, color-mix(in srgb,var(--violeta) 34%, transparent), transparent 72%);
  animation:auroraB 30s ease-in-out infinite alternate;
}
@keyframes auroraA{ to{ transform:translate(13vw, 16vh) scale(1.15) translateZ(0); } }
@keyframes auroraB{ to{ transform:translate(-11vw, -9vh) scale(1.12) translateZ(0); } }

/* Cambio de tema claro/oscuro — fundido corto y UNIFORME de colores.
   Antes se usaba document.startViewTransition (capturaba una foto de toda la
   página y la fundía): lento en equipos modestos. Ahora, mientras dura el
   cambio, la clase .tema-cambiando en <html> pone una transición breve SOLO de
   propiedades de color (paint, barato) sobre todo. Al terminar (~260ms) se
   quita la clase para no dejar transiciones colgando. */
html.tema-cambiando, html.tema-cambiando *{
  transition-property: background-color, color, border-color, fill, box-shadow !important;
  transition-duration: .2s !important;
  transition-timing-function: ease !important;
}

@media (prefers-reduced-motion:reduce){
  .aurora::before, .aurora::after{ animation:none; }
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

/* Transición suave entre páginas (fade). Solo con movimiento permitido;
   usa opacidad (no transform) para no romper los elementos position:fixed. */
@media (prefers-reduced-motion:no-preference){
  @keyframes pagEntra{ from{ opacity:0; } to{ opacity:1; } }
  body{ animation:pagEntra .25s ease both; }
}
button{ font:inherit; color:inherit; cursor:pointer; border:none; background:none; }
::selection{ background:var(--acento); color:#fff; }

.contenedor{ width:min(100% - 48px, var(--ancho-max)); margin-inline:auto; }
.mono{ font-family:var(--mono); }
.acento{ color:var(--acento); }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* Foco visible para navegación con teclado (accesibilidad) */
:where(a, button, input, textarea, select, [tabindex]):focus-visible{
  outline: 2px solid var(--acento);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Saltar al contenido (skip link) — patrón estándar de accesibilidad.
   CLAVE: cuando NO está enfocado se RECORTA a 1px con overflow:hidden
   (clip). Así NO se pinta nada: ni posición, ni transform, ni tamaño.
   Antes se ocultaba con transform sobre un position:fixed, y en iOS Safari
   los elementos fixed+transform tienen un bug de repintado: al navegar/scroll
   asoman un frame en su posición de layout (top:0) antes de componer el
   transform → por eso "Saltar al contenido" parpadeaba arriba en cada cambio
   de página, en cualquier iPhone y sin importar la caché. Con clip no hay
   nada que pintar: el bug desaparece. */
.saltar{
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Solo con puntero fino (teclado/desktop) al enfocarlo se despliega el botón.
   En táctil (celular) nunca sale del recorte de 1px: no aporta y solo estorba. */
@media (pointer:fine){
  .saltar:focus, .saltar:focus-visible{
    position: fixed; left: 50%; top: 0; z-index: 1000;
    transform: translateX(-50%);
    width: auto; height: auto;
    margin: 0; padding: .6rem 1.1rem;
    overflow: visible; clip: auto; clip-path: none;
    background: var(--acento); color: #fff;
    border-radius: 0 0 10px 10px;
    font-family: var(--mono); font-size: .8rem; font-weight: 600;
    outline: none;
  }
}

@media (pointer:fine){
  /* cursor:none en TODOS los nodos: si no, al mover rápido
     elementos con cursor:pointer vuelven a mostrar el del SO */
  body.cursor-activo,
  body.cursor-activo *{
    cursor: none !important;
  }
}
/* Con "reducir movimiento" también mostramos el cursor personalizado, pero
   PEGADO al puntero (sin el rezago/lerp que es lo que se movía) y sin la
   estela. Así quien lo tiene activado igual ve el "circulito", sin animación
   molesta. El cursor:none lo hereda del bloque (pointer:fine) de arriba. */
@media (prefers-reduced-motion:reduce){
  .cursor-anillo{ transition:opacity .001ms !important; }
}

.cursor-anillo{
  position:fixed; top:0; left:0; z-index:9999;
  width:38px; height:38px; border:1.5px solid var(--acento);
  border-radius:50%; pointer-events:none;
  transform:translate(-50%,-50%);
  transition:width .3s, height .3s, background .3s, border-color .3s, opacity .2s;
  will-change:transform;
  mix-blend-mode:difference;
  display:none;
  opacity:0;
}
.cursor-punto{
  position:fixed; top:0; left:0; z-index:9999;
  width:6px; height:6px; background:var(--acento);
  border-radius:50%; pointer-events:none;
  transform:translate(-50%,-50%);
  will-change:transform;
  display:none;
  opacity:0;
}
body.cursor-activo .cursor-anillo,
body.cursor-activo .cursor-punto{ display:block; }
body.cursor-activo .cursor-anillo.is-on,
body.cursor-activo .cursor-punto.is-on{ opacity:1; }
.cursor-anillo.crece,
body.cursor-activo .cursor-anillo.is-on.crece{
  width:64px; height:64px;
  background:var(--acento); border-color:transparent;
  opacity:.25;
}
.chip-estela{
  position:fixed; z-index:9998; pointer-events:none;
  font-family:var(--mono); font-weight:700;
  transform:translate(-50%,-50%);
  transition:transform .8s ease-out, opacity .8s ease-out;
}

@media (hover:none), (pointer:coarse){
  .cursor-anillo,.cursor-punto,.chip-estela{ display:none !important; }
}

@media (prefers-reduced-motion:reduce){
  .chip-estela{ display:none !important; }   /* la estela sí es movimiento */
  html{ scroll-behavior:auto; }
  /* Se apaga el MOVIMIENTO (transformaciones, animaciones en bucle, deslizados):
     eso es lo que marea. */
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  /* Pero se permite UN fundido de opacidad — que NO marea — para que el
     contenido aparezca suave en vez de "de golpe". Nada se desliza (transform
     en 0). Así quien pide menos movimiento igual ve un sitio vivo, no muerto. */
  .aparece{ transform:none !important; transition:opacity .5s ease !important; }
}

/* Barra "vidrio esmerilado". El backdrop-filter se recompone al scrollear, y
   en Safari móvil eso cuesta; para aligerarlo bajamos el radio de blur (12→8)
   y subimos la opacidad del fondo (80→90%): así hay MENOS de atrás que
   desenfocar, se ve prácticamente igual y el scroll queda más suave. */
.nav{
  position:sticky; top:0; z-index:100;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  /* Fallback opaco para navegadores sin color-mix (si no, la barra quedaría
     transparente y el contenido se leería por detrás al scrollear). */
  background:var(--papel);
  background:color-mix(in srgb, var(--papel) 90%, transparent);
  border-bottom:1px solid var(--linea);
}
.nav__caja{
  display:flex; align-items:center; justify-content:space-between;
  height:68px;
}
.nav__logo{
  font-family:var(--display); font-weight:700; font-size:1.15rem;
  letter-spacing:-.02em; display:flex; align-items:center; gap:.5rem;
}
.nav__logo b{ color:var(--acento); }
.nav__links{ display:flex; gap:.5rem; align-items:center; }
.nav__link{
  font-family:var(--mono); font-size:.82rem;
  padding:.5rem .9rem; border-radius:var(--radio-sm);
  color:var(--tinta-suave); transition:var(--transicion);
}
.nav__link:hover{ color:var(--tinta); background:color-mix(in srgb,var(--acento) 12%,transparent); }

.boton{
  position:relative; display:inline-flex; align-items:center; gap:.6rem;
  padding:.85rem 1.5rem; border-radius:999px;
  font-family:var(--mono); font-weight:700; font-size:.85rem;
  background:var(--acento); color:#fff;
  transition:transform .25s cubic-bezier(.22,.61,.36,1), background .25s;
  will-change:transform;
}
.boton:hover{ background:var(--tinta); }
.boton--fantasma{ background:transparent; color:var(--tinta); border:1.5px solid var(--linea); }
.boton--fantasma:hover{ background:var(--tinta); color:var(--papel); border-color:var(--tinta); }
.boton .flecha{ transition:transform .25s; }
.boton:hover .flecha{ transform:translateX(4px); }

.pata-wrap{ position:relative; display:inline-flex; isolation:isolate; }
.pata-wrap > .boton{ position:relative; z-index:1; }
.pata-wrap > .boton--fantasma{ background:var(--papel); }
.pata-wrap > .boton--fantasma:hover{ background:var(--tinta); color:var(--papel); }
.pata{
  display:block;
  position:absolute; top:50%; left:50%;
  width:46px; height:40px; margin:-20px 0 0 -23px;
  z-index:0; opacity:0; pointer-events:none;
  transform-origin:50% 50%; will-change:transform, opacity;
}
.pata svg{ width:100%; height:100%; display:block; }
.pata--agarra svg{ animation:zarpazo .45s ease-in-out infinite; transform-origin:70% 50%; }
@keyframes zarpazo{ 0%,100%{transform:scale(1)} 50%{transform:scale(.88,1.08)} }

@media (prefers-reduced-motion:reduce){ .pata{ display:none; } }

.pie{
  border-top:1px solid var(--linea);
  margin-top:6rem; padding:3rem 0;
}
.pie__caja{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center; }
.pie__nota{ font-family:var(--mono); font-size:.78rem; color:var(--tenue); }

.subir{
  position:fixed; right:1.4rem; bottom:1.4rem; z-index:90;
  width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--acento); color:#fff;
  box-shadow:0 10px 28px color-mix(in srgb,var(--acento) 40%,transparent);
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(12px);
  transition:opacity .3s, visibility .3s, transform .3s, background .25s;
}
.subir.visible{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateY(0);
}
.subir:hover{ background:var(--tinta); transform:translateY(-2px); }
.subir:focus-visible{
  outline:2px solid var(--acento); outline-offset:3px;
  opacity:1; visibility:visible; pointer-events:auto; transform:none;
}
.subir svg{ display:block; }
@media (prefers-reduced-motion:reduce){
  .subir{ transition:none; }
}

.aparece{
  opacity:0; transform:translateY(28px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);
}
.aparece.visible{ opacity:1; transform:none; }

/* —— Responsive global (nav / contenedor / botones) —— */
@supports (padding: env(safe-area-inset-top)){
  .nav{
    padding-top: env(safe-area-inset-top);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  .subir{
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
  }
}

@media (max-width: 900px){
  .contenedor{ width:min(100% - 28px, var(--ancho-max)); }
  .nav__caja{ height:58px; gap:.3rem; }
  .nav__logo{ font-size:1.02rem; flex-shrink:0; }
  .nav__links{
    gap:.15rem;
    flex-shrink:1;
    min-width:0;
    flex-wrap:nowrap;
    justify-content:flex-end;
  }
  .nav__link{
    font-size:.72rem;
    padding:.38rem .5rem;
    white-space:nowrap;
  }
  .nav .boton{
    padding:.48rem .85rem;
    font-size:.7rem;
    gap:.3rem;
    white-space:nowrap;
    flex-shrink:0;
  }
  .tema-toggle, .lang-toggle{
    width:34px; height:34px; flex-shrink:0;
  }
  .lang-toggle{ font-size:.65rem; padding:0; }
}

@media (max-width: 700px){
  /* En móvil: deja espacio; EN sigue visible (idioma importa) */
  .nav__links > a.nav__link:nth-of-type(2){ display:none; }
}

@media (max-width: 640px){
  .contenedor{ width:min(100% - 22px, var(--ancho-max)); }
  .nav__caja{ height:54px; }
  .nav__logo{ font-size:.95rem; }
  /* Solo CTA + tema: evita desborde en SE / Mini */
  .nav__links > a.nav__link{ display:none; }
  .nav .boton{
    padding:.45rem .75rem;
    font-size:.68rem;
  }
  .nav .boton .flecha{ display:none; }
  .boton{ padding:.72rem 1.1rem; font-size:.78rem; }
  .pie{ margin-top:3.5rem; padding:2rem 0; }
  .subir{ width:44px; height:44px; }
}

@media (max-width: 400px){
  .nav__logo{ font-size:.88rem; }
  .nav .boton{ padding:.42rem .62rem; font-size:.64rem; }
  .tema-toggle{ width:32px; height:32px; }
}

/* =====================================================================
   SOLO EN CELULAR: sin animación de ENTRADA al cambiar de vista.
   El contenido aparece firme, sin el "sube/baja" (los bloques .aparece
   que entran deslizándose) ni el fade de página. TODO lo demás sigue
   animado en el celular (aurora, búho, cursores, hovers): esto apaga
   únicamente la animación de entrada/navegación, que es la molesta.
   El desktop conserva el efecto completo.
   ===================================================================== */
@media (pointer:coarse){
  body{ animation:none; }
  .aparece{ opacity:1 !important; transform:none !important; transition:none !important; }
}