/* ==========================================================================
   VEGAS DEL VERDE — shell.css
   Cabecera fija translúcida, navegación (escritorio + móvil) y pie de página.
   Sólo el director de arte edita este archivo.
   Depende de tokens.css y base.css.
   ========================================================================== */

/* ==========================================================================
   1. CABECERA
   ========================================================================== */
.cabecera {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-header);
}

/* El vidrio esmerilado vive en una capa aparte, NO en .cabecera.
   Motivo: backdrop-filter convierte al elemento en bloque contenedor de sus
   descendientes position:fixed, y eso impediría que el panel del menú móvil
   cubriera la ventana completa. No mover esta declaración a .cabecera. */
.cabecera::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: rgb(var(--crema-rgb) / 0.78);
  backdrop-filter: var(--blur-vidrio);
  -webkit-backdrop-filter: var(--blur-vidrio);
  border-bottom: 1px solid rgb(var(--verde-oliva-rgb) / 0.09);
  transition:
    background-color var(--transicion),
    box-shadow var(--transicion),
    border-color var(--transicion);
}

/* Estado tras hacer scroll — lo activa main.js añadiendo la clase */
.cabecera--compacta::before {
  background-color: rgb(var(--crema-rgb) / 0.94);
  box-shadow: var(--sombra-header);
  border-bottom-color: rgb(var(--verde-oliva-rgb) / 0.14);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cabecera::before {
    background-color: rgb(var(--crema-rgb) / 0.97);
  }
}

.cabecera__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-sm);
  min-height: var(--alto-header);
}

/* ---- Marca --------------------------------------------------------------- */
/* Cede ancho antes que nadie: si la barra se queda corta, encoge el logotipo
   en vez de empujar fuera de pantalla al idioma o al menú. */
.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--color-texto);
  flex: 0 1 auto;
  min-width: 0;
}

.marca__simbolo {
  width: clamp(2.1rem, 1.7rem + 1.6vw, 2.9rem);
  height: auto;
  background: none;
  flex: none;
}

/* Logotipo horizontal sobre placa verde: trae el símbolo y la palabra en una
   sola pieza, así que la cabecera ya no necesita texto aparte. Se dimensiona
   por ANCHO (no por alto) para que en pantallas angostas o con tipografía
   grande ceda espacio en vez de empujar fuera al selector de idioma. */
.marca__logo {
  width: clamp(7.5rem, 5.6rem + 6.4vw, 11.5rem);
  max-width: 100%; /* el ancho real lo dicta lo que sobre en la barra */
  min-width: 0;    /* sin esto el mínimo automático de flex lo deja rígido */
  height: auto;
  /* v3: es una imagen, y en este sistema ninguna imagen lleva radio. */
  border-radius: 0;
}

/* ---- Navegación ---------------------------------------------------------- */
.nav__lista {
  display: flex;
  align-items: center;
  gap: clamp(0.7rem, 0.05rem + 1.05vw, 1.75rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Los enlaces de la barra son rótulos, no titulares: caps pequeñas con el
   tracking del sistema. El CUERPO no baja de --fs-pequeno (suelo 12,5 px):
   el tracking abre la etiqueta, no el tamaño.                             */
.nav__enlace {
  position: relative;
  display: inline-block;
  padding-block: 0.35rem;
  font-family: var(--fuente-titulo);
  font-size: var(--fs-pequeno);
  font-weight: var(--peso-normal);
  text-transform: uppercase;
  letter-spacing: var(--tracking-rotulo);
  /* El tracking añade un hueco muerto tras la última letra de CADA enlace y
     la barra ya iba justa por debajo de 1280 px; se recupera. */
  margin-inline-end: calc(var(--tracking-rotulo) * -1);
  text-decoration: none;
  color: var(--color-texto);
  white-space: nowrap;
}

.nav__enlace::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: var(--verde-oliva);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transicion) var(--ease-salida);
}

.nav__enlace:hover {
  color: var(--color-acento-texto);
}

.nav__enlace:hover::after,
.nav__enlace:focus-visible::after,
.nav__enlace[aria-current="true"]::after {
  transform: scaleX(1);
}

.nav__enlace[aria-current="true"] {
  color: var(--color-acento-texto);
}

/* ---- Acciones (idioma, WhatsApp, menú) ----------------------------------- */
.cabecera__acciones {
  display: flex;
  align-items: center;
  gap: var(--esp-2xs);
  flex: none; /* intocable: idioma y menú nunca ceden ancho */
}

/* Conmutador segmentado de esquina viva. El barrido «ultrapremium» cuadró
   .boton-menu y .marca__logo pero se saltó estas dos reglas, y el selector se
   quedaba como pastilla circular a 8 px de la hamburguesa cuadrada (móvil) y
   pegado al .cabecera__cta cuadrado (escritorio). No entra en las excepciones
   pactadas: no es .pildora ni un chip diminuto, es un control de 44 × 44 con
   estado activo relleno.                                                    */
.idiomas {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem;
  border: 1px solid rgb(var(--verde-oliva-rgb) / 0.22);
  border-radius: 0;
  flex: none;
}

/* Sólo entra en juego en el modo compacto de más abajo. */
.idiomas__globo {
  display: none;
  width: 1.05rem;
  height: 1.05rem;
  margin-inline-start: 0.3rem;
  color: var(--color-texto-suave);
  flex: none;
}

.idiomas__opcion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.1rem;
  min-height: 1.7rem;
  padding-inline: 0.35rem;
  border-radius: 0;
  font-family: var(--fuente-titulo);
  font-size: var(--fs-micro);
  font-weight: var(--peso-medio);
  letter-spacing: 0.1em;
  text-decoration: none;
  color: var(--color-texto-suave);
  transition:
    background-color var(--transicion-rapida),
    color var(--transicion-rapida);
}

.idiomas__opcion:hover {
  color: var(--color-acento-texto);
}

.idiomas__opcion[aria-current="true"] {
  background-color: var(--verde-oliva);
  color: var(--color-texto-inverso);
}

.cabecera__cta {
  padding-inline: 1.1em;
}

/* ---- Botón hamburguesa --------------------------------------------------- */
.boton-menu {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0;
  border: 1px solid rgb(var(--verde-oliva-rgb) / 0.22);
  color: var(--color-texto);
  transition: background-color var(--transicion-rapida);
}

.boton-menu:hover {
  background-color: rgb(var(--verde-oliva-rgb) / 0.08);
}

.boton-menu__barras {
  position: relative;
  display: block;
  width: 1.25rem;
  height: 0.75rem;
}

.boton-menu__barras span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  border-radius: var(--radio-full);
  background-color: currentColor;
  transition:
    transform var(--transicion) var(--ease-salida),
    opacity var(--dur-rapida) var(--ease);
}

.boton-menu__barras span:nth-child(1) { top: 0; }
.boton-menu__barras span:nth-child(2) { top: 50%; margin-top: -0.75px; }
.boton-menu__barras span:nth-child(3) { bottom: 0; }

.boton-menu[aria-expanded="true"] .boton-menu__barras span:nth-child(1) {
  transform: translateY(0.375rem) rotate(45deg);
}

.boton-menu[aria-expanded="true"] .boton-menu__barras span:nth-child(2) {
  opacity: 0;
}

.boton-menu[aria-expanded="true"] .boton-menu__barras span:nth-child(3) {
  transform: translateY(-0.375rem) rotate(-45deg);
}

/* ---- Velo del menú móvil -------------------------------------------------- */
/* Queda por debajo de .cabecera para que el panel del menú — que es hijo de
   la cabecera y por tanto vive en su contexto de apilamiento — se pinte encima. */
.velo-menu {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-header) - 1);
  background-color: rgb(var(--tinta-rgb) / 0.45);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--transicion),
    visibility 0s linear var(--dur-media);
}

body.menu-abierto .velo-menu {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

body.menu-abierto {
  overflow: hidden;
}

/* ==========================================================================
   2. NAVEGACIÓN MÓVIL  (< 62em)
   ========================================================================== */
@media (max-width: 61.99em) {
  .boton-menu {
    display: inline-flex;
  }

  .cabecera__cta .btn__texto {
    display: none;
  }

  .cabecera__cta {
    width: 2.75rem;
    height: 2.75rem;
    min-height: 2.75rem;
    padding-inline: 0;
  }

  .nav {
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    z-index: var(--z-menu);
    width: min(21rem, 84vw);
    padding: calc(var(--alto-header) + var(--esp-lg)) var(--esp-lg) var(--esp-xl);
    background-color: var(--color-fondo);
    border-left: 1px solid var(--color-borde-suave);
    box-shadow: var(--sombra-xl);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(102%);
    visibility: hidden;
    transition:
      transform var(--dur-lenta) var(--ease-salida),
      visibility 0s linear var(--dur-lenta);
  }

  body.menu-abierto .nav {
    transform: translateX(0);
    visibility: visible;
    transition-delay: 0s;
  }

  .nav__lista {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav__lista li + li {
    border-top: 1px solid var(--color-borde-suave);
  }

  .nav__enlace {
    display: block;
    padding-block: var(--esp-sm);
    font-size: var(--fs-cuerpo);
    letter-spacing: var(--tracking-rotulo);
  }

  .nav__enlace::after {
    display: none;
  }

  .nav__pie {
    margin-top: var(--esp-lg);
    display: flex;
    flex-direction: column;
    gap: var(--esp-xs);
  }
}

@media (min-width: 62em) {
  .velo-menu {
    display: none;
  }

  .nav__pie {
    display: none;
  }

  /* La barra fija se queda con las cinco anclas de destino. «Nosotros» y
     «Contacto» siguen en el menú móvil, en el pie y por scroll: si se
     muestran aquí, la cabecera desborda por debajo de 1280 px. */
  .nav__item--secundario {
    display: none;
  }
}

/* Modo compacto de la barra.

   OJO con este breakpoint: las media queries en `em` se miden contra la fuente
   POR DEFECTO DEL NAVEGADOR, no contra la del sitio. Quien sube el tamaño de
   letra del sistema —típicamente personas mayores— entra aquí aunque su
   pantalla no sea estrecha: con la fuente base en 24 px, 26.5em son 636 px y
   cualquier celular queda por debajo. Por eso aquí NO se puede esconder nada
   que no tenga otra puerta de entrada: el selector de idioma se colapsa, no
   desaparece. */
@media (max-width: 26.5em) {
  .idiomas__globo {
    display: block;
  }

  /* Se muestra sólo el idioma al que se puede cambiar: la mitad de ancho, un
     solo toque, y el globo aclara de qué se trata. */
  .idiomas__opcion[aria-current="true"] {
    display: none;
  }

  .idiomas {
    border-color: rgb(var(--verde-oliva-rgb) / 0.34);
  }

  /* Con la fuente base en 24 px todo lo medido en rem crece un 50 %, y entre el
     idioma y la hamburguesa se comían la barra entera. Estos topes mantienen el
     área táctil por encima de los 44 px sin dejar que sigan creciendo, así el
     logotipo conserva un ancho legible. */
  /* El ancho sí se acota (el chip no necesita crecer con la fuente), pero la
     ALTURA no baja de 44 px: es el objetivo táctil, y con la letra grande
     sube a 48. Antes este tope lo dejaba en 38 y pisaba la regla de
     base.css, que es la que fija el mínimo. */
  .idiomas__opcion {
    min-width: min(2.75rem, 48px);
    min-height: max(2.75rem, min(3rem, 48px));
    padding-inline: 0.3rem;
  }

  .idiomas__globo {
    width: min(1.05rem, 21px);
    height: min(1.05rem, 21px);
  }

  .boton-menu {
    width: min(2.75rem, 48px);
    height: min(2.75rem, 48px);
  }

  /* WhatsApp sí puede salir de la barra: encabeza el menú móvil y se repite en
     cada espacio, en Contacto y en el pie. El idioma no tenía ese respaldo. */
  .cabecera__cta {
    display: none;
  }
}

/* ==========================================================================
   3. PÁGINAS SIN HERO (legales, aviso, etc.)
   ========================================================================== */
.pagina-interior {
  padding-top: calc(var(--alto-header) + var(--esp-xl));
  padding-bottom: var(--esp-3xl);
}

/* ==========================================================================
   4. PIE DE PÁGINA
   ========================================================================== */
/* v3: el pie pasa del verde bosque al CARBÓN. Decidido mirando el contraste,
   no el gusto: el verde bosque #1E3D2F tiene 0.049 de luminancia y el carbón
   #2B2B2B 0.024, o sea que el pie se hace MÁS profundo, no menos. Eso sube
   todos los pares que ya estaban medidos en vez de degradarlos:
     · --color-texto-inverso-suave (crema 78 %) pasa de 7.2:1 a 8.1:1 → los
       créditos de los fotógrafos, que es el texto que había que proteger.
     · --color-texto-inverso (crema plena) pasa de 10.7:1 a 12.1:1.
     · --verde-menta, que es el acento del pie, pasa de 5.5:1 a 6.5:1.
   Ningún token del pie hay que tocarlo: todos mejoran solos.             */
.pie-sitio {
  background-color: var(--color-fondo-carbon);
  color: var(--color-texto-inverso);
  padding-block: var(--esp-3xl) var(--esp-lg);
  scroll-margin-top: calc(var(--alto-header) + var(--esp-md));
}

.pie-sitio a {
  color: var(--color-texto-inverso);
  text-decoration: none;
}

.pie-sitio a:hover {
  color: var(--verde-menta);
}

.pie__rejilla {
  display: grid;
  gap: var(--gap-lg);
  grid-template-columns: 1fr;
}

@media (min-width: 46em) {
  .pie__rejilla {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* El pie adelgazó a dos bloques —marca y acciones—, así que la rejilla ya no
   reparte cuatro columnas iguales: la marca manda y las acciones se van al
   canto derecho en vez de estirarse a media página. */
@media (min-width: 68em) {
  .pie__rejilla {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--gap);
  }
}

.pie__acciones {
  display: flex;
  flex-direction: column;
  gap: var(--esp-sm);
  align-items: flex-start;
}

@media (min-width: 68em) {
  .pie__acciones {
    align-items: flex-end;
    text-align: right;
  }
}

/* .enlace-flecha pinta en --color-acento-texto, pensado para fondo claro:
   sobre el verde oscuro del pie no llega al contraste mínimo. */
.pie__enlace-mapa,
.pie-sitio a.pie__enlace-mapa {
  color: var(--verde-menta);
}

.pie__idioma {
  font-family: var(--fuente-titulo);
  font-size: var(--fs-pequeno);
  color: var(--color-texto-inverso-suave);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.pie__marca {
  display: flex;
  flex-direction: column;
  gap: var(--esp-sm);
  align-items: flex-start;
}

.pie__logo {
  width: clamp(3.25rem, 2.5rem + 3vw, 4.5rem);
  height: auto;
  background: none;
}

.pie__nombre {
  font-family: var(--fuente-display);
  font-size: var(--paso-2);
  font-weight: var(--peso-display);
  line-height: 1.1;
  letter-spacing: var(--tracking-display);
  color: var(--color-texto-inverso);
}

.pie__tagline {
  font-family: var(--fuente-titulo);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-rotulo);
  color: var(--verde-menta);
}

.pie__titulo {
  font-family: var(--fuente-titulo);
  font-size: var(--fs-eyebrow);
  font-weight: var(--peso-medio);
  text-transform: uppercase;
  letter-spacing: var(--tracking-rotulo);
  color: var(--verde-menta);
  margin-bottom: var(--esp-sm);
}

.pie__lista {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-pequeno);
  color: var(--color-texto-inverso-suave);
  line-height: var(--alto-linea-base);
}

.pie__lista a {
  color: var(--color-texto-inverso-suave);
}

.pie__lista a:hover {
  color: var(--verde-menta);
}

.pie__dato {
  display: flex;
  gap: 0.6em;
  align-items: flex-start;
}

.pie__dato svg {
  width: 1.05em;
  height: 1.05em;
  margin-top: 0.35em;
  flex: none;
  color: var(--verde-menta);
}

.pie__social {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.5em 1.1em;
  /* Filete a currentColor, igual que .btn-fantasma en base.css: es la variante
     fantasma del sistema y aquí es la ÚNICA afordancia del control (el enlace
     va sin subrayado y en la misma crema que el <p> .pie__nombre que tiene
     justo encima). Con --color-borde-inverso (crema al 20 %) el contorno se
     quedaba en 1,84:1 sobre el carbón del pie, por debajo del 3:1 que pide
     WCAG 1.4.11. El token sigue siendo correcto para filetes DECORATIVOS
     como el de .pie__legal, por eso no se toca allí.                        */
  border: 1px solid currentColor;
  /* botón fantasma del pie: cuadrado como el resto del sistema */
  border-radius: 0;
  /* La pastilla tiene que poder ENCOGER. Es un inline-flex dentro de la
     columna .pie__marca, así que su ancho es fit-content y su suelo era el
     min-content: icono + separación + «@vegasdelverde» (un token sin espacios,
     con tracking de rótulo) + relleno, todo medido en em y por tanto creciendo
     con la raíz. Quien amplía el texto del navegador al 200 % —el 1.4.4 de
     WCAG, y en la práctica las personas mayores— lo veía desbordar el viewport
     en cualquier ancho de teléfono, y como el body recorta en horizontal no
     había forma de desplazarse hasta la etiqueta. Permitir el corte del token
     baja el min-content y deja que la caja se ajuste a la columna.          */
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  font-family: var(--fuente-titulo);
  font-size: var(--fs-pequeno);
  text-transform: uppercase;
  letter-spacing: var(--tracking-rotulo);
  transition:
    background-color var(--transicion),
    border-color var(--transicion);
}

.pie__social:hover {
  background-color: rgb(var(--crema-rgb) / 0.1);
  border-color: var(--verde-menta);
}

.pie__social svg {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

.pie__legal {
  margin-top: var(--esp-2xl);
  padding-top: var(--esp-md);
  border-top: 1px solid var(--color-borde-inverso);
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2xs) var(--esp-md);
  align-items: baseline;
  justify-content: space-between;
  font-size: var(--fs-micro);
  color: var(--color-texto-inverso-suave);
  line-height: var(--alto-linea-base);
}

.pie__legal p {
  max-width: 52ch;
  margin: 0;
}

.pie__legal-enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2xs) var(--esp-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pie__legal-enlaces a {
  color: var(--color-texto-inverso-suave);
  text-decoration: underline;
  text-decoration-color: rgb(var(--crema-rgb) / 0.3);
}

.pie__legal-enlaces a:hover {
  color: var(--verde-menta);
  text-decoration-color: currentColor;
}

/* Crema al 55 % daba 4,41:1 y no pasaba AA a este cuerpo. El token va al
   78 % (7,2:1). Aquí van los créditos de los fotógrafos del concurso de aves:
   es justo el texto que no puede quedar ilegible. */
.pie__creditos {
  margin-top: var(--esp-md);
  font-size: var(--fs-micro);
  color: var(--color-texto-inverso-suave);
  max-width: 78ch;
}

/* ==========================================================================
   ÁREA TÁCTIL DEL SELECTOR DE IDIOMA
   Va aquí y no en base.css por orden de cascada: shell.css se carga después,
   así que la regla base de .idiomas__opcion (2,1 × 1,7 rem) ganaba y dejaba
   el chip en 34 × 27 px. Mismo criterio que el resto: 44 px con el dedo.
   ========================================================================== */
@media (pointer: coarse), (max-width: 63.99em) {
  .idiomas__opcion {
    min-width: 2.75rem;
    min-height: 2.75rem;
  }
}