/* =============================================================================
   cabecera.css — la barra de arriba de /planesweb/, igual que la de la home.

   Es COPIA de las reglas de assets/sitio.css (barra, idiomas, tema, menú de
   móvil con la ruleta y el cuadro «Empieza tu proyecto»). No se carga
   sitio.css entero porque trae el reset y los estilos de la home, que se
   pelearían con estilo.css. Si cambia la barra de la home, hay que traer el
   cambio aquí. Los nombres de variables (--black, --white, --orange…) no
   chocan con los de estilo.css (--papel, --tinta, --acento…).
   ========================================================================== */

/* ---------- Variables y tema claro (copia de sitio.css) ---------- */
:root{
  --black:#0a0a0a;
  --btn-ink:#0a0a0a;   /* texto sobre naranja: siempre oscuro en ambos temas */
  --black-2:#111111;
  --black-3:#181818;
  --orange:#ff5c00;
  --orange-soft:#ff7a2e;
  --white:#ffffff;
  --grey:#9a9a9a;
  --line:rgba(255,255,255,.1);
  --font-display:'Anton', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-alt:'Space Grotesk', sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --shade-1:rgba(10,10,10,.55); --shade-2:rgba(10,10,10,.45); --shade-3:rgba(10,10,10,.8);
  --scrim:rgba(10,10,10,.82); --scrim-solid:rgba(10,10,10,.97);
  /* el mismo fondo de página en versión translúcida y transparente:
     sirve para los degradados que se funden con la página en los dos temas */
  --scrim-90:rgba(10,10,10,.94); --scrim-0:rgba(10,10,10,0);
  --ph-1:#161616; --ph-2:#0e0e0e; --ink-soft:#d6d6d6; --ink-softer:#cfcfcf; --ink-bright:#e6e6e6;
  --card-1:#1c1c1c; --card-2:#101010; --pill:#17150f;
  --hair:rgba(255,255,255,.03); --stroke-soft:rgba(255,255,255,.28); --stroke-faint:rgba(255,255,255,.14);
  --dot-idle:rgba(255,255,255,.18); --weave:rgba(255,255,255,.028);
  /* Rampa de fundido: con esto los bordes de arriba y abajo de cada imagen a
     sangre se disuelven en la página en vez de cortar en seco.
     Va como lista de paradas, no como degradado entero, para poder orientarla
     arriba o abajo en el sitio donde se use: linear-gradient(180deg,var(--fundido)).
     La rampa NO es lineal a propósito: una lineal deja ver la raya donde
     empieza. Esta arranca casi plana y se apaga larga, así no hay costura ni
     bandeado. El color es el del fondo de página, y por eso se redefine en el
     tema claro: si no, el degradado moriría en negro sobre pared blanca. */
  --fundido:
    rgba(10,10,10,1) 0%, rgba(10,10,10,.955) 9%, rgba(10,10,10,.87) 19%,
    rgba(10,10,10,.74) 30%, rgba(10,10,10,.58) 42%, rgba(10,10,10,.41) 55%,
    rgba(10,10,10,.26) 68%, rgba(10,10,10,.14) 80%, rgba(10,10,10,.05) 90%,
    rgba(10,10,10,0) 100%;
  --fundido-alto:clamp(64px,10vh,132px);
}
/* ---------- tema claro: blanco de pared, negro y naranja ---------- */
:root[data-theme="light"]{
  --black:#f7f7f6;          /* blanco pared, un toque de gris */
  --black-2:#f1f1f0;
  --black-3:#e9e9e7;
  --white:#0d0d0d;          /* el negro de la marca, como tinta */
  --grey:#5f5d5a;
  --line:rgba(0,0,0,.13);
  --shade-1:rgba(10,10,10,.5); --shade-2:rgba(10,10,10,.42); --shade-3:rgba(10,10,10,.78);
  --scrim:rgba(247,247,246,.86); --scrim-solid:rgba(247,247,246,.97);
  --scrim-90:rgba(247,247,246,.94); --scrim-0:rgba(247,247,246,0);
  --ph-1:#ececeb; --ph-2:#e2e2e0; --ink-soft:#4a4845; --ink-softer:#4f4d4a; --ink-bright:#232322;
  --card-1:#fbfbfa; --card-2:#f3f3f2; --pill:#efefed;
  --hair:rgba(0,0,0,.05); --stroke-soft:rgba(0,0,0,.32); --stroke-faint:rgba(0,0,0,.16);
  --dot-idle:rgba(0,0,0,.18); --weave:rgba(0,0,0,.03);
  /* mismo fundido, pero muriendo en la pared blanca de este tema */
  --fundido:
    rgba(247,247,246,1) 0%, rgba(247,247,246,.955) 9%, rgba(247,247,246,.87) 19%,
    rgba(247,247,246,.74) 30%, rgba(247,247,246,.58) 42%, rgba(247,247,246,.41) 55%,
    rgba(247,247,246,.26) 68%, rgba(247,247,246,.14) 80%, rgba(247,247,246,.05) 90%,
    rgba(247,247,246,0) 100%;
  /* Más largo que en oscuro a propósito: de una foto oscura a pared blanca hay
     mucha más distancia de luz que a negro, y con la misma rampa el paso se
     lee duro. Medido: el mismo degradado que en negro pasa desapercibido, en
     blanco se ve la banda. */
  --fundido-alto:clamp(96px,15vh,200px);
}
/* fundido suave al cambiar de tema: se activa solo durante el cambio,
   así no ralentiza el resto de interacciones ni la carga inicial */
html.theming,html.theming *:not(.cursor):not(.hero-video){
  transition:background-color .55s var(--ease),color .55s var(--ease),
    border-color .55s var(--ease),fill .55s var(--ease),
    box-shadow .55s var(--ease),opacity .55s var(--ease),filter .55s var(--ease)!important;
}
@media(prefers-reduced-motion:reduce){html.theming,html.theming *{transition:none!important}}

/* ---------- Logo claro / oscuro ---------- */
/* especificidad alta a propósito: `.nav-logo img` y `.preloader-logo img`
   fijan display:block y ganarían a un simple `.logo-dark` */
:root img.logo-dark{display:none}
:root[data-theme="light"] img.logo-light{display:none}
:root[data-theme="light"] img.logo-dark{display:block}

/* ---------- Barra, menú de móvil y ruleta ---------- */
/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 48px;
  transition:background .4s,padding .4s,border-color .4s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:var(--scrim);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  padding:14px 48px;
  border-bottom-color:var(--line);
}
.nav-logo{
  font-family:var(--font-display);font-size:1.25rem;letter-spacing:.06em;text-transform:uppercase;
  display:flex;align-items:center;gap:10px;flex:none;      /* nunca se aplasta */
}
.nav-logo .dot{width:10px;height:10px;border-radius:50%;background:var(--orange);display:inline-block}
.nav-logo img{height:46px;width:auto;display:block}
.nav-logo .logo-fallback{display:none;align-items:center;gap:10px}
.nav-logo.no-img img{display:none}
.nav-logo.no-img .logo-fallback{display:flex}
.nav-links{display:flex;gap:clamp(20px,2.2vw,36px);margin:0 clamp(18px,2.5vw,40px);white-space:nowrap;
  font-family:var(--font-alt);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase}
.nav-links a{position:relative;padding:4px 0;color:var(--grey);transition:color .3s}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--orange);
  transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease);
}
.nav-links a:hover{color:var(--white)}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav-cta{
  display:inline-block;white-space:nowrap;flex:none;
  font-family:var(--font-alt);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  border:1px solid var(--orange);color:var(--white);background:transparent;
  padding:12px 26px;border-radius:100px;position:relative;overflow:hidden;transition:color .35s;
}
.nav-cta span{position:relative;z-index:1}
.nav-cta::before{
  content:"";position:absolute;inset:0;background:var(--orange);
  transform:translateY(101%);transition:transform .4s var(--ease);
}
.nav-cta:hover::before{transform:translateY(0)}
.nav-cta:hover{color:var(--btn-ink)}
/* El brillo de «Empieza tu proyecto» (15-10-2026, lo pidió el dueño): el
   mismo destello de las flechas circulares, aquí sobre la píldora. Un arco
   de luz corto con estela recorre el filete —la máscara deja solo un anillo
   de 1,5 px, así que la luz va POR la línea y no por dentro—. En reposo pasa
   una vez cada cuatro segundos y descansa; al pasar el ratón gira seguido.
   El ángulo se anima con @property; sin soporte, el anillo se queda quieto. */
@property --brillo{syntax:'<angle>';inherits:false;initial-value:0deg}
.nav-cta::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:2;
  background:conic-gradient(from var(--brillo),transparent 0deg 250deg,rgba(255,92,0,.18) 285deg,
    rgba(255,138,61,.85) 330deg,#fff1e4 352deg,transparent 360deg);
  -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);
  opacity:0;animation:ctaBrillo 4s cubic-bezier(.45,0,.25,1) infinite}
@keyframes ctaBrillo{
  0%{--brillo:0deg;opacity:0} 6%{opacity:1} 40%{opacity:1}
  46%,100%{--brillo:360deg;opacity:0}}
@keyframes ctaGira{from{--brillo:0deg}to{--brillo:360deg}}
/* y alrededor, un halo suave que acompaña cada pasada: la luz se nota también
   fuera del botón, no solo en la línea */
.nav-cta{animation:ctaHalo 4s cubic-bezier(.45,0,.25,1) infinite}
@keyframes ctaHalo{
  0%,46%,100%{box-shadow:0 0 0 0 rgba(255,92,0,0)}
  22%{box-shadow:0 0 22px -4px rgba(255,92,0,.42)}}
@media (hover:hover){
  .nav-cta:hover::after{opacity:1;animation:ctaGira 1.4s linear infinite}
  .nav-cta:hover{animation:none;box-shadow:0 0 26px -4px rgba(255,92,0,.5)}
}
@media (prefers-reduced-motion:reduce){.nav-cta::after{animation:none;opacity:.5}.nav-cta{animation:none}}
.nav-actions{display:flex;align-items:center;gap:18px;flex:none}
.lang-toggle{
  font-family:var(--font-alt);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grey);background:transparent;border:1px solid var(--line);border-radius:100px;
  padding:8px 13px;transition:color .3s,border-color .3s;
}
.lang-toggle{cursor:pointer}
.lang-toggle:hover{color:var(--white);border-color:var(--orange)}
.lang-toggle:focus{outline:none}
.lang-toggle:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.nav-menu-mobile .lang-toggle{margin-top:12px;font-size:.9rem;padding:10px 20px}
.lang-toggle--bar{display:none}
@media(max-width:1160px){.lang-toggle--bar{display:inline-flex;margin-right:14px}}
/* botón de tema */
.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  width:34px;height:34px;flex:none;background:transparent;
  border:1px solid var(--line);border-radius:100px;color:var(--grey);
  transition:color .3s,border-color .3s;
}
.theme-toggle:hover{color:var(--orange);border-color:var(--orange)}
.theme-toggle:focus{outline:none}
.theme-toggle:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
/* círculo de contraste: gira 180° al cambiar de tema (transición continua,
   más suave que intercambiar dos iconos distintos) */
.theme-toggle svg{width:16px;height:16px;transition:transform .6s var(--ease)}
:root[data-theme="light"] .theme-toggle svg{transform:rotate(180deg)}
@media(prefers-reduced-motion:reduce){.theme-toggle svg{transition:none}}
.theme-toggle--bar{display:none}
.nav.compact .theme-toggle--bar{display:inline-flex;margin-left:auto;margin-right:10px}
.nav.compact .lang-toggle--bar{display:inline-flex;margin-right:10px}
.nav.compact .nav-actions .theme-toggle{display:none}
@media(max-width:1160px){
  .nav-actions .theme-toggle{display:none}
  /* el auto va en el primero del par, así tema + idioma viajan juntos a la derecha */
  .theme-toggle--bar{display:inline-flex;margin-left:auto;margin-right:10px}
  .lang-toggle--bar{margin-right:10px}
}
.nav-menu-mobile .theme-toggle{width:44px;height:44px;margin-top:12px}
.nav-menu-mobile .theme-toggle svg{width:19px;height:19px}
.nav-burger{display:none;flex-direction:column;gap:6px;background:none;border:none}
.nav-burger i{width:28px;height:2px;background:var(--white);display:block;transition:.3s}
.nav-menu-mobile{
  position:fixed;inset:0;background:var(--black);z-index:1001;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(16px,2.6vh,30px);
  /* deja libre la barra de arriba y permite bajar si los enlaces no caben */
  padding:calc(92px + env(safe-area-inset-top)) 20px calc(36px + env(safe-area-inset-bottom));
  overflow-y:auto;overscroll-behavior:contain;
  opacity:0;pointer-events:none;visibility:hidden;transition:opacity .4s,visibility .4s;
}
/* En pantalla baja se aprieta el hueco y la letra, pero se SIGUE centrando.
   Antes aquí había un `justify-content:flex-start` porque la lista larga no
   cabía y se salía por abajo. Con la ruleta cabe de sobra (280px en una
   pantalla de 667), y apoyarla arriba dejaba la opción elegida 102px por
   debajo del centro de la pantalla — justo lo que la rueda promete que no
   pasará. Medido; no volver a ponerlo. */
@media(max-height:760px){
  .nav-menu-mobile{gap:clamp(10px,1.8vh,18px)}
  .nav-menu-mobile a{font-size:clamp(1.25rem,4.4vw,1.6rem)}
}
.nav-menu-mobile.open{opacity:1;pointer-events:auto;visibility:visible}
/* el logo quedaba por encima del menú y se solapaba con el primer enlace */
body.menu-abierto .nav-logo{opacity:0;pointer-events:none}
.nav-logo{transition:opacity .3s}
.nav-menu-mobile a{
  font-family:var(--font-display);font-size:clamp(1.5rem,5.2vw,2rem);text-transform:uppercase;
  letter-spacing:.04em;transition:color .3s;flex:none;
}
.nav-menu-mobile a:hover{color:var(--orange)}

/* ---------- la ruleta del menú ----------
   Una rueda de selección: la opción elegida vive en el centro y las demás se
   inclinan hacia atrás arriba y abajo.

   El encaje NO lo hace el JS. Lo hace `scroll-snap-type` del navegador, que en
   un móvil trae la inercia y el frenado buenos de serie; cualquier cosa que
   escribamos a mano se nota peor. El JS solo lee la posición y pinta.

   El relleno de arriba y abajo es media rueda menos media casilla: sin él, la
   primera y la última opción no podrían llegar nunca al centro. */
.menu-ruleta{
  --casilla:clamp(52px,8.4vh,74px);      /* alto de cada opción */
  --visibles:5;                          /* casillas a la vista, SIEMPRE impar:
                                            con par no habría casilla central */
  position:relative;
  width:100%;max-width:520px;
  height:calc(var(--casilla) * var(--visibles));
  overflow-y:auto;overscroll-behavior:contain;
  scroll-snap-type:y mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  /* se desvanece por los bordes: la rueda parece seguir más allá del recuadro */
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 15%,#000 85%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 15%,#000 85%,transparent 100%);
}
.menu-ruleta::-webkit-scrollbar{display:none}
/* En una pantalla alta sobraba media pantalla en negro por encima de la rueda.
   Con siete casillas se ven las seis opciones a la vez y la composición se
   equilibra. En pantallas bajas se queda en cinco, que es lo que cabe. */
@media(min-height:760px){ .menu-ruleta{--visibles:7} }
.ruleta-pista{
  padding:calc((var(--casilla) * (var(--visibles) - 1)) / 2) 0;
}
/* Las dos rayas que enmarcan la casilla central. Sin ellas no se entiende que
   el centro es donde se elige, y la rueda parece una lista que se ha torcido. */
.ruleta-marco{
  position:sticky;top:calc((var(--casilla) * (var(--visibles) - 1)) / 2);
  height:var(--casilla);margin-bottom:calc(var(--casilla) * -1);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  pointer-events:none;z-index:2;
}
/* El enlace NO se inclina: se queda plano y ocupa la casilla entera. La
   inclinación se la lleva el <span> de dentro.
   Por qué: con `preserve-3d`, un hijo transformado en 3D deja de recibir los
   toques en Chromium — el clic en la opción centrada lo acababa recibiendo el
   contenedor y no pasaba nada. Medido con elementFromPoint. Con el enlace
   plano, el toque llega siempre; la rueda se ve igual. */
.menu-ruleta a{
  display:flex;align-items:center;justify-content:center;
  height:var(--casilla);
  scroll-snap-align:center;scroll-snap-stop:always;
  color:var(--grey);
  transition:color .35s var(--ease);
  /* La perspectiva va aquí, en cada opción, y NO en el contenedor con un
     `preserve-3d` por medio. Con el contexto 3D compartido, el toque llegaba
     dos casillas más abajo de donde se veía la opción: tocabas «Crear» y
     respondía «Clientes». Medido con elementFromPoint. Cada opción con su
     propia perspectiva se ve igual y el toque cae donde debe. */
  perspective:520px;
}
.menu-ruleta a > span{
  display:block;
  transform-origin:50% 50%;backface-visibility:hidden;
  will-change:transform,opacity;
}
/* La del centro: naranja. Es el único color fuerte de la pantalla, así que dice
   sin ayuda de nadie cuál se va a abrir. */
.menu-ruleta a.centro{color:var(--orange)}
.menu-ruleta a:focus-visible{outline:1px solid var(--orange);outline-offset:-6px;border-radius:8px}
.menu-botones{display:flex;align-items:center;gap:14px}
.nav-menu-mobile .menu-botones .lang-toggle,
.nav-menu-mobile .menu-botones .theme-toggle{margin-top:0}
/* Quien pide menos movimiento se queda con la rueda plana: sigue encajando y
   sigue marcando el centro en naranja, pero sin inclinación ni profundidad. */
@media(prefers-reduced-motion:reduce){
  .menu-ruleta a{perspective:none}
  .menu-ruleta a > span{transform:none!important;opacity:1!important}
}

/* ---------- Cuadro «Empieza tu proyecto» (#elige) ---------- */
.elige{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
  padding:clamp(18px,5vw,40px)}
.elige[hidden]{display:none}
.elige-scrim{position:absolute;inset:0;background:var(--scrim);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.elige-caja{position:relative;width:min(560px,100%);background:var(--black-2);
  border:1px solid var(--line);border-radius:18px;padding:clamp(28px,5vw,44px);
  box-shadow:0 40px 90px rgba(0,0,0,.55);
  animation:eligeEntra .42s var(--ease) both}
@keyframes eligeEntra{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.elige-caja{animation:none}}
.elige-cerrar{position:absolute;top:14px;right:14px;width:38px;height:38px;border:0;background:none;
  cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background .3s}
.elige-cerrar:hover{background:var(--black-3)}
.elige-cerrar svg{width:14px;height:14px;fill:var(--white)}
.elige-tag{font-family:var(--font-alt);font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:var(--orange);display:block}
.elige-t{font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.5rem,4vw,2.2rem);line-height:1.02;margin-top:12px;text-wrap:balance}
.elige-ops{display:grid;gap:12px;margin-top:clamp(22px,3.5vh,30px)}
.elige-op{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 18px;
  padding:18px 20px;border:1px solid var(--line);border-radius:12px;
  transition:border-color .35s,background .35s,transform .35s var(--ease)}
.elige-op:hover{border-color:var(--orange);background:linear-gradient(90deg,rgba(255,92,0,.08),transparent 72%);transform:translateX(4px)}
.elige-op:focus-visible{outline:1px solid var(--orange);outline-offset:3px}
.elige-op-t{font-family:var(--font-display);font-size:clamp(1.05rem,2.4vw,1.35rem);
  text-transform:uppercase;letter-spacing:.02em;line-height:1}
.elige-op-s{grid-column:1;color:var(--grey);font-size:.86rem;line-height:1.4}
.elige-op-f{grid-row:1/3;grid-column:2;width:34px;height:34px;border:1px solid var(--line);border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex:none;transition:border-color .35s,transform .4s var(--ease)}
.elige-op-f svg{width:14px;height:14px;fill:var(--orange)}
.elige-op:hover .elige-op-f{border-color:var(--orange);transform:translateX(4px)}

/* ---------- Responsive (las reglas de barra de sitio.css) ---------- */
.nav.compact .nav-links,.nav.compact .nav-actions{display:none}
.nav.compact .nav-burger{display:flex}
@media (max-width:1160px){
  .nav-links,.nav-actions{display:none}
  .nav-burger{display:flex}
}
@media (max-width:1024px){
  .nav{padding:18px 32px}
  .nav.scrolled{padding:12px 32px}
}
@media (max-width:680px){
  .nav{padding:16px 20px}
  .nav.scrolled{padding:12px 20px}
}

/* ---------- Ajustes de /planesweb/ ----------
   Aquí la barra va siempre en su estado «con scroll» (fondo velado), como en
   /produccion-audiovisual/: la página no tiene un hero de vídeo oscuro debajo
   que la sostenga. Las listas y botones no heredan los estilos de la página. */
.nav ul{list-style:none;margin:0;padding:0}
.nav a,.nav-menu-mobile a,.elige a{text-decoration:none;color:inherit}
.nav button,.nav-menu-mobile button,.elige button{font:inherit}
.nav-links a{color:var(--grey)}
.nav{background:var(--scrim);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.nav-logo{color:var(--white)}
/* Las anclas no se esconden debajo de la barra fija */
section[id]{scroll-margin-top:84px}

/* Barra más pequeña en /planesweb/ (lo pidió la dueña, 06-10-2026): logo,
   rayas, idioma y tema en una talla menos que en la home. */
.nav,.nav.scrolled{padding:10px 40px}
.nav-logo img{height:34px}
.nav-burger{gap:5px}
.nav-burger i{width:22px;height:1.5px}
.lang-toggle{font-size:.62rem;padding:6px 10px;letter-spacing:.12em}
.theme-toggle{width:28px;height:28px}
.theme-toggle svg{width:13px;height:13px}
.nav-cta{font-size:.7rem;padding:9px 20px}
.nav-links{font-size:.7rem}
@media(max-width:1160px){.lang-toggle--bar{margin-right:10px}}
.nav.compact .theme-toggle--bar,.theme-toggle--bar{margin-right:8px}
@media (max-width:1024px){ .nav,.nav.scrolled{padding:10px 28px} }
@media (max-width:680px){ .nav,.nav.scrolled{padding:9px 16px} .nav-logo img{height:30px} }
section[id]{scroll-margin-top:64px}
/* La barra sin raya inferior y con el mismo fondo que la página: velo muy
   ligero con desenfoque, no negro (ni blanco) liso. */
.nav,.nav.scrolled{border-bottom-color:transparent;background:rgba(10,10,10,.3);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
:root[data-theme="light"] .nav,:root[data-theme="light"] .nav.scrolled{background:rgba(239,236,230,.45)}
/* «ES» más pequeño todavía. Va con .nav delante: «.nav button{font:inherit}»
   le pisaba el tamaño y la letra, y por eso no encogía. */
.nav .lang-toggle{font-family:var(--font-alt);font-size:.56rem;padding:4px 8px;letter-spacing:.1em;line-height:1.4}

/* «Empieza tu proyecto» en la barra cuando se compacta (08-10-2026). Antes,
   en el móvil, iba en un «+» flotante abajo a la derecha que se peleaba con
   el chat; ahora está arriba, a la vista, y el flotante se quitó. En pantallas
   estrechas tema e idioma se quedan solo dentro del menú, para que quepa. */
.nav-cta--bar{display:none}
.nav.compact .nav-cta--bar{display:inline-block;margin-right:12px}
@media(max-width:1160px){.nav-cta--bar{display:inline-block;margin-right:12px}}
@media(max-width:600px){
  .nav .theme-toggle--bar,.nav .lang-toggle--bar{display:none!important}
  .nav-cta--bar{margin-left:auto;font-size:.62rem;letter-spacing:.12em;padding:9px 14px}
}
/* En el móvil la barra va sin «Empieza tu proyecto» (15-10-2026, lo pidió el
   dueño): solo el logo y las rayas. El botón sigue dentro del menú y, en la
   home, debajo del titular. */
@media(max-width:600px){.nav-cta--bar{display:none!important}}