/* ═══════════════════════════════════════════════════════════════
   SOBRE EL NÚCLEO — la capa que va arriba de todo
   ───────────────────────────────────────────────────────────────
   Se carga DESPUÉS de `nucleo.css`, y ése es todo el punto: acá no
   hace falta pelear especificidad, lo que se escriba en este
   archivo gana. Por eso no lleva los `html` adelante que sí lleva
   `piel.css`, que se carga antes.

   Nació como la "v2" de esta web —la versión con menú y
   desplegables, que ganó contra la original—. La original quedó
   archivada en `_archivo/`, sin deployar.

   Qué agrega:
     · barra de navegación fija, con menú de pantalla completa en celular
     · desplegables nativos (<details>), sin JavaScript propio
     · un ritmo vertical más corto
   ═══════════════════════════════════════════════════════════════ */

/* ── Ritmo más corto ──────────────────────────────────────────── */
.seccion { padding: clamp(3.25rem, 6vw, 5rem) 0; }
.seccion__titulo { margin-bottom: 1.3rem; }

/* ── NAVEGACIÓN ───────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 80;
  border-bottom: 1px solid rgba(242, 185, 117, 0.18);
}
/* El fondo con desenfoque va en un ::before y no en la barra.
   Trampa: `backdrop-filter` (igual que `filter` y `transform`) convierte al
   elemento en bloque contenedor de sus descendientes `position:fixed`. Con el
   desenfoque puesto en `.nav`, el `inset: 58px 0 0` del panel del menú se
   calculaba contra la barra —58 px de alto— y el menú abría con altura cero:
   se veía un hilo de texto arriba y nada más. */
.nav::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: rgba(15, 37, 64, 0.92);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
}
.nav__caja {
  max-width: 1120px; margin: 0 auto; padding: 0 1.75rem;
  height: 58px; display: flex; align-items: center; gap: 1.5rem;
}
.nav__marca {
  font-family: var(--font-serif); font-weight: 600; font-size: 1.02rem;
  color: #fff; letter-spacing: .01em; white-space: nowrap;
}
.nav__lista {
  display: flex; align-items: center; gap: 1.45rem;
  margin: 0 0 0 auto; padding: 0; list-style: none;
}
.nav__lista a {
  font-family: var(--font-sans); font-size: .82rem; font-weight: 500;
  color: var(--sobre-oscuro); position: relative; padding: .45rem 0;
  white-space: nowrap; transition: color .2s var(--suave);
}
.nav__lista a:hover { color: #fff; }
.nav__lista a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--oro);
  transform: scaleX(0); transform-origin: left;
  transition: transform .28s var(--suave);
}
.nav__lista a:hover::after,
.nav__lista a[aria-current="true"]::after { transform: scaleX(1); }
.nav__lista a[aria-current="true"] { color: #fff; }

.nav .boton { padding: .6rem 1.15rem; font-size: .82rem; }
.nav__cta--movil { display: none; }

.nav__hamburguesa {
  display: none; margin-left: auto;
  width: 42px; height: 42px; padding: 0;
  align-items: center; justify-content: center;
  background: none; border: 1px solid rgba(201, 212, 228, .28);
  border-radius: var(--radio-sm); color: #fff; cursor: pointer;
}
.nav__hamburguesa span {
  display: block; width: 17px; height: 1.5px; background: currentColor;
  position: relative; transition: background .2s var(--suave);
}
.nav__hamburguesa span::before,
.nav__hamburguesa span::after {
  content: ''; position: absolute; left: 0; width: 17px; height: 1.5px;
  background: currentColor; transition: transform .28s var(--suave);
}
.nav__hamburguesa span::before { top: -5.5px; }
.nav__hamburguesa span::after { top: 5.5px; }
.nav__hamburguesa[aria-expanded="true"] span { background: transparent; }
.nav__hamburguesa[aria-expanded="true"] span::before { transform: translateY(5.5px) rotate(45deg); }
.nav__hamburguesa[aria-expanded="true"] span::after { transform: translateY(-5.5px) rotate(-45deg); }

/* La barra es azul profundo y el anillo de foco del núcleo es `--acento`
   (marino): sobre ese fondo da 1.59:1, o sea invisible justo para quien
   navega con el tabulador. Adentro de la barra el foco va en oro: 8.81:1. */
.nav a:focus-visible,
.nav button:focus-visible {
  outline: 2px solid var(--oro); outline-offset: 3px;
}

/* Las secciones tienen que frenar abajo de la barra, no atrás. */
.seccion, .cita-banda, .hero { scroll-margin-top: 66px; }

/* ── DESPLEGABLES ─────────────────────────────────────────────── */
/* <details> nativo: sin JavaScript, accesible con teclado, y el texto
   de adentro lo sigue leyendo Google aunque esté cerrado. */
.desp { border-top: 1px solid rgba(16, 23, 32, .12); }
.desp:last-of-type { border-bottom: 1px solid rgba(16, 23, 32, .12); }
.seccion--profunda .desp { border-color: rgba(201, 212, 228, .16); }

.desp > summary {
  display: block; list-style: none; cursor: pointer;
  padding: 1.15rem 2.5rem 1.15rem 0; position: relative;
  font-family: var(--font-serif); font-size: 1.24rem; font-weight: 600;
  line-height: 1.3; letter-spacing: -.01em; color: var(--texto);
  transition: color .2s var(--suave);
}
.desp > summary::-webkit-details-marker { display: none; }
.seccion--profunda .desp > summary { color: #fff; }
.desp > summary:hover { color: var(--oro-tierra); }
.seccion--profunda .desp > summary:hover { color: var(--oro); }
.desp > summary:focus-visible { outline: 2px solid var(--marino); outline-offset: 3px; }
.seccion--profunda .desp > summary:focus-visible { outline-color: var(--oro); }

/* El signo + que invita a tocar. Gira 45° y queda ×. */
.desp > summary::after {
  content: ''; position: absolute; right: .3rem; top: 1.55rem;
  width: 13px; height: 13px; flex: none;
  background:
    linear-gradient(var(--oro-tierra), var(--oro-tierra)) center/13px 1.5px no-repeat,
    linear-gradient(var(--oro-tierra), var(--oro-tierra)) center/1.5px 13px no-repeat;
  transition: transform .3s var(--suave);
}
.seccion--profunda .desp > summary::after {
  background:
    linear-gradient(var(--oro), var(--oro)) center/13px 1.5px no-repeat,
    linear-gradient(var(--oro), var(--oro)) center/1.5px 13px no-repeat;
}
.desp[open] > summary::after { transform: rotate(135deg); }

/* La invitación: es el CTA del desplegable. */
.desp__gancho {
  display: block; margin-top: .4rem;
  font-family: var(--font-mono); font-weight: 500; font-size: .66rem;
  letter-spacing: .19em; text-transform: uppercase;
  color: var(--oro-tierra);
}
.seccion--profunda .desp__gancho { color: var(--oro); }
.desp[open] .desp__gancho { display: none; }

.desp__cuerpo { padding: 0 0 1.6rem; }
.desp[open] .desp__cuerpo { animation: desp-aparece .4s var(--suave) both; }
@keyframes desp-aparece {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.desp__cuerpo > :last-child { margin-bottom: 0; }

/* La pregunta de cada etapa vive en el summary: es lo que hace tocar. */
.desp--etapa > summary { padding-left: 2.6rem; }
.desp--etapa .etapa__n {
  position: absolute; left: 0; top: 1.35rem; transform: none;
  background: none; padding: 0;
}
.desp--etapa .etapa__pregunta {
  display: block;                  /* si no, la pregunta sigue en la misma
                                      línea que el título y se lee como una
                                      sola frase larga */
  font-size: 1.04rem; font-weight: 400; color: var(--sobre-oscuro);
  line-height: 1.45; margin: .5rem 0 0; max-width: 33rem;
}
.desp--etapa[open] .etapa__pregunta { color: #fff; }
.desp--etapa .desp__cuerpo { padding-left: 2.6rem; }

/* ── Retoques de v2 ───────────────────────────────────────────── */
.entregas { gap: 1.1rem; }
.hero__oferta { margin-bottom: 1.75rem; }

@media (max-width: 900px) {
  .nav__hamburguesa { display: inline-flex; }
  .nav__cta--movil {
    display: inline-flex; margin-left: auto; margin-right: .65rem;
    padding: .55rem 1rem; font-size: .8rem;
  }

  /* El menú abierto ocupa toda la pantalla: en un celular, una lista
     colgando de la barra se toca mal y tapa la mitad del contenido. */
  .nav__panel {
    position: fixed; inset: 58px 0 0; z-index: 79;
    background: var(--profundo);
    padding: 2rem 1.75rem calc(2rem + env(safe-area-inset-bottom));
    overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .25s var(--suave), transform .25s var(--suave),
                visibility 0s linear .25s;
  }
  .nav__panel.abierto {
    opacity: 1; visibility: visible; transform: none;
    transition-delay: 0s;
  }
  .nav__panel .nav__lista {
    display: flex; flex-direction: column; align-items: stretch;
    gap: 0; margin: 0;
  }
  .nav__panel .nav__lista li { border-bottom: 1px solid rgba(201, 212, 228, .14); }
  .nav__panel .nav__lista a {
    display: block; padding: 1.05rem 0; font-size: 1.12rem;
    font-family: var(--font-serif); color: #fff;
  }
  .nav__panel .nav__lista a::after { display: none; }
  .nav__panel .nav__lista a[aria-current="true"] { color: var(--oro); }
  .nav__panel .boton { display: flex; width: 100%; margin-top: 1.9rem; }
  body.menu-abierto { overflow: hidden; }
  /* El flotante de WhatsApp vive en z-index 100 y quedaba encima del menú. */
  body.menu-abierto .whatsapp-flotante { opacity: 0; pointer-events: none; }
}

@media (min-width: 901px) {
  .nav__panel { display: contents; }
}

@media (max-width: 640px) {
  .nav__caja { height: 54px; padding: 0 1.25rem; }
  .nav__panel { inset: 54px 0 0; }
  .seccion, .cita-banda, .hero { scroll-margin-top: 62px; }
  .nav__marca { font-size: .95rem; }
  .nav__cta--movil { padding: .5rem .85rem; font-size: .76rem; }
  .desp > summary { font-size: 1.12rem; padding-right: 2.2rem; }
  .desp--etapa > summary,
  .desp--etapa .desp__cuerpo { padding-left: 2.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .desp[open] .desp__cuerpo { animation: none; }
  .nav__panel { transition: none; }
}