/* ═══════════════════════════════════════════════════════════════════════
   PALETA COMPARTIDA

   Vive acá porque navigation.css es el único archivo que cargan las 513
   páginas. El nombre del archivo le queda chico: conviene renombrarlo a
   compartido.css cuando se regeneren las páginas.

   Por qué con prefijo gg- y no reusando --green: el sitio declara 50
   tokens repartidos por página y 14 tienen valores distintos según dónde
   estés. --green es #166534 en la home y #0E3D22 en recetas; --cream es
   #FBF7EF o #FAF5EC; --ink tiene tres valores. Un componente que use
   var(--green) se ve de un color en una página y de otro en la siguiente.

   Estos no se pisan con los de ninguna página, así que un componente que
   los use se ve igual en todas. No toco los existentes: cambiarlos de
   golpe en diez archivos es justo el tipo de cambio que hoy rompió cinco
   páginas por asumir que eran iguales.
   ═════════════════════════════════════════════════════════════════════ */
:root{
  /* Verdes de marca */
  --gg-verde:#166534;
  --gg-verde-hondo:#0E3D22;
  --gg-verde-suave:#EAF7EF;
  /* Ámbar, el acento */
  --gg-ambar:#E8A93C;
  --gg-ambar-claro:#F7C65D;
  /* Superficies y texto */
  --gg-crema:#FBF7EF;
  --gg-papel:#FFFFFF;
  --gg-tinta:#16211A;
  --gg-tenue:#5C6B60;
  --gg-linea:#E2E8E4;
  /* Estados */
  --gg-alerta:#B42318;
  --gg-alerta-fondo:#FEF3F2;
  --gg-aviso:#9A5A0F;
  --gg-ok:#2F6B45;
  /* Formas y tiempos, para que los componentes no inventen los suyos */
  --gg-radio:12px;
  --gg-radio-chico:8px;
  --gg-radio-pildora:999px;
  --gg-sombra:0 1px 2px rgba(22,33,26,.06);
  --gg-sombra-alta:0 10px 30px rgba(14,61,34,.12);
  --gg-transicion:.18s ease;
  --gg-toque:44px;
}

/* Navegación nativa progresiva: no altera el flujo si View Transitions no existe. */
@view-transition {
  navigation: auto;
}

.site-header,
body > header {
  view-transition-name: gg-site-header;
}

::view-transition-old(gg-site-header),
::view-transition-new(gg-site-header) {
  animation-duration: 240ms;
  animation-timing-function: ease-out;
}

::view-transition-old(*),
::view-transition-new(*) {
  animation-duration: 240ms;
  animation-timing-function: ease-out;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-image-pair(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-duration: 0s;
    animation-delay: 0s;
  }
}

/* ── Menú de secciones en móvil ───────────────────────────────────────
   En la home la navegación de escritorio se oculta y la barra inferior
   solo cubre 4 destinos: Recetas, Guías, Beneficios, Cómo funciona,
   Nuestras fuentes y Valorados quedaban sin ninguna puerta. En las 512
   páginas generadas los enlaces existen pero viven en un carrusel
   horizontal: a 375px el contenido mide 728px y se ven 343, así que la
   mitad queda fuera de pantalla sin que nada lo insinúe. */
.gg-menu-btn{ display:none; }

@media (max-width: 860px){
  /* Ícono y nada más: a 375px la cabecera de la home ya lleva el logo (143px)
     y "Entrar" (83px), y un botón con texto no entra sin romper la fila.
     Los colores van explícitos: la cabecera de la home no declara `color`, así
     que `inherit` tomaba el #1A1A1A del body y quedaba negro sobre verde. */
  .gg-menu-btn{
    display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px; padding:0;
    border:1px solid rgba(255,255,255,.42); border-radius:50%;
    background:rgba(255,255,255,.1); color:var(--gg-papel);
    font:inherit; font-size:1.1rem; line-height:1; cursor:pointer;
    flex:0 0 auto;
  }
  .gg-menu-btn:hover{ background:rgba(255,255,255,.18); }
  .gg-menu-btn:focus-visible{ outline:3px solid var(--gg-ambar-claro); outline-offset:2px; }
  /* Con el botón puesto, la fila de enlaces es redundante y además desbordaba:
     en Recetas y Cómo funciona dejaba una cabecera de tres filas con los
     últimos enlaces cortados. El menú los tiene todos. */
  header.gg-con-menu nav.nav,
  header.gg-con-menu nav.nav-links,
  header.gg-con-menu nav.header-nav{
    display:none;
  }
  /* Varias páginas apilan la cabecera en columna por debajo de 820px, para
     dejar el logo arriba y la fila de enlaces abajo. Sin esa fila, la columna
     solo separa el logo del botón y deja la cabecera en 118 px. Vuelve a fila:
     el selector con la clase gana por especificidad aunque la regla de la
     página venga después. */
  header.gg-con-menu .header-inner,
  header.gg-con-menu .top{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    flex-wrap:nowrap;
  }
  /* Algunas cabeceras son grid de dos columnas: el botón entraba como tercer
     hijo y empujaba lo que seguía a otra fila. */
  header.gg-con-menu.site-header{
    grid-template-columns:1fr auto auto;
  }
}

.gg-sheet[hidden]{ display:none; }
.gg-sheet{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:flex-end; justify-content:center;
}
.gg-sheet-fondo{ position:absolute; inset:0; background:rgba(10,26,17,.55); border:0; padding:0; }
.gg-sheet-panel{
  position:relative; width:100%; max-width:34rem;
  max-height:82vh; overflow-y:auto;
  background:var(--gg-papel); color:var(--gg-tinta);
  border-radius:calc(var(--gg-radio) + 6px) calc(var(--gg-radio) + 6px) 0 0; padding:1.1rem 1.1rem 1.6rem;
  box-shadow:var(--gg-sombra-alta);
  animation:gg-sheet-in .22s ease-out;
}
@keyframes gg-sheet-in{ from{ transform:translateY(14px); opacity:0 } to{ transform:none; opacity:1 } }
@media (prefers-reduced-motion: reduce){ .gg-sheet-panel{ animation:none } }

.gg-sheet-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.6rem; }
.gg-sheet-head h2{ margin:0; font-size:1rem; font-weight:700; }
.gg-sheet-cerrar{
  min-width:var(--gg-toque); min-height:var(--gg-toque); border:0; background:transparent;
  font-size:1.5rem; line-height:1; cursor:pointer; color:inherit; border-radius:var(--gg-radio-chico);
}
.gg-sheet-cerrar:focus-visible{ outline:3px solid currentColor; outline-offset:-3px; }
.gg-sheet-panel ul{ list-style:none; margin:0; padding:0; }
.gg-sheet-panel li + li{ border-top:1px solid var(--gg-linea); }
.gg-sheet-panel a{
  display:flex; align-items:center; min-height:calc(var(--gg-toque) + 4px);
  padding:.55rem .3rem; text-decoration:none; color:inherit;
  font-size:1rem; font-weight:600;
}
.gg-sheet-panel a[aria-current="page"]{ color:var(--gg-verde); }
.gg-sheet-panel a:focus-visible{ outline:3px solid var(--gg-verde); outline-offset:-3px; border-radius:8px; }

/* ═══════════════════════════════════════════════════════════════════════
   COMPONENTES

   Acá van los componentes de biblioteca —uiverse.io y similares— ya
   adaptados. Un componente pegado tal cual trae su propia paleta, sus
   propios radios y sus propios tiempos, y termina siendo un idioma visual
   distinto dentro de la misma página. Reescrito sobre los tokens de
   arriba, se ve como GlutenGo.

   Reglas para sumar uno:
   1. Prefijo .gg- en todas las clases, para que no choque con lo que ya
      existe en las 513 páginas.
   2. Ningún color, radio ni tiempo literal: todo sale de var(--gg-*).
      Hay un test que falla si aparece un hex suelto en esta sección.
   3. Objetivo táctil de var(--gg-toque) en cualquier cosa que se toque.
   4. Foco visible propio: los componentes de biblioteca casi siempre
      traen outline:none y dejan afuera a quien navega con teclado.
   5. Anotar de dónde salió y qué se le cambió.
   ═════════════════════════════════════════════════════════════════════ */

/* Botón de acción principal.
   Origen: patrón de botón con relleno progresivo de uiverse.io.
   Cambios: paleta de GlutenGo, altura mínima táctil, foco visible propio,
   y la animación queda anulada con prefers-reduced-motion. */
.gg-boton{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:.45rem; min-height:var(--gg-toque); padding:.6rem 1.15rem;
  border:1px solid var(--gg-verde); border-radius:var(--gg-radio-pildora);
  background:var(--gg-verde); color:var(--gg-papel);
  font:inherit; font-weight:700; font-size:.92rem; line-height:1;
  cursor:pointer; overflow:hidden; isolation:isolate;
  transition:transform var(--gg-transicion), box-shadow var(--gg-transicion);
}
.gg-boton::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--gg-verde-hondo);
  transform:translateY(100%); transition:transform var(--gg-transicion);
}
.gg-boton:hover::before{ transform:translateY(0); }
.gg-boton:hover{ box-shadow:var(--gg-sombra-alta); }
.gg-boton:active{ transform:translateY(1px); }
.gg-boton:focus-visible{ outline:3px solid var(--gg-ambar); outline-offset:2px; }
/* Deshabilitado tiene que verse. El alta de negocios arranca con el envío
   bloqueado hasta que la persona entra con Google, y sin este estado el botón
   parecía disponible. */
.gg-boton:disabled,
.gg-boton[aria-disabled="true"]{
  opacity:.55; cursor:not-allowed; box-shadow:none;
}
.gg-boton:disabled:hover::before,
.gg-boton[aria-disabled="true"]:hover::before{ transform:translateY(100%); }

/* Variante secundaria: mismo cuerpo, sin peso de color. */
.gg-boton--suave{
  background:transparent; color:var(--gg-verde); border-color:var(--gg-linea);
}
.gg-boton--suave::before{ background:var(--gg-verde-suave); }
.gg-boton--suave:hover{ color:var(--gg-verde-hondo); }

@media (prefers-reduced-motion: reduce){
  .gg-boton, .gg-boton::before{ transition:none; }
  .gg-boton:active{ transform:none; }
}

/* Ocupa el ancho disponible. Los formularios y los cierres de sección lo
   necesitan, sobre todo en móvil, donde un botón angosto queda perdido. */
.gg-boton--ancho{ width:100%; }