/* ============================================================
   gozo · gelato artesano — demo de Golden Deer Tech
   Dirección: maximalismo de color juguetón. Papel crema (el mismo
   de la foto del hero: el cono flota en la página), tinta chocolate,
   4 colores caramelo + azur/cobalto eléctrico como bloque pleno.
   Display chunky-redonda en minúsculas, rótulos a mano, pegatinas.
   ============================================================ */

/* Baloo 2 (SIL OFL) autohospedada — la display redonda de la marca.
   Pesos que usa la demo: 400 (etiquetas), 700 (nav/botones), 800 (títulos/logo). */
@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/baloo-2-v23-latin-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/baloo-2-v23-latin-700.woff2") format("woff2");
}
@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("assets/fonts/baloo-2-v23-latin-800.woff2") format("woff2");
}

:root {
  /* Cebo deliberado contra el oscurecido forzado (Mi Browser y familia):
     esos motores solo respetan a las páginas "con modo oscuro propio", así
     que gozo declara soporte... y su modo oscuro (media query de abajo) es
     el mismo papel claro. Donde el prefers-color-scheme llega de verdad,
     el bloque de abajo re-impone only light. */
  color-scheme: light dark;

  /* papel y tinta */
  --papel: #f8edd9;        /* fondo del hero.webp: integración sin costura */
  --papel-card: #fffbef;
  --tinta: #2e1b10;        /* chocolate muy oscuro, no negro */

  /* caramelos (medidos en las fotos) */
  --fresa: #e4716d;
  --pistacho: #877d26;
  --pistacho-hondo: #5f591a; /* oliva más profundo para pistacho CON texto papel encima (AA) */
  --mango: #f5a300;
  --choco: #5b2c1a;
  --barquillo: #e0aa60;

  /* eléctricos y fondos de foto */
  --azur: #4a9bf6;         /* acento eléctrico: pricetag, salpicaduras del vaso */
  --cielo: #82d0f6;        /* pegatina de temporada */
  --menta: #b6e3c6;        /* pegatina de la vitrina, pill "todo el año", badge vegano */
  --beige: #ead1b3;        /* pegatina del obrador */
  --cobalto: #2b55c4;      /* bloque de color pleno */
  --cobalto-sombra: #16307a;

  /* sabores de temporada (dots, bolas del vaso, pills del calendario) */
  --melocoton: #f4a261;
  --frutos: #9c3a5c;       /* frutos del bosque, magenta */
  --higo: #7b5ea7;
  --mandarina: #ec6b2d;
  --limon: #ecc73a;        /* amarillo limón */

  /* tipografía: Baloo 2 autohospedada (SIL OFL, en assets/fonts/) al frente para
     que la identidad "chunky redonda" se vea en TODAS las plataformas. Detrás,
     red de seguridad de sistema por si el woff2 fallara: "Arial Rounded MT"
     (nombre DirectWrite en Chromium/Windows; el "…MT Bold" solo resuelve en
     Safari/mac) → Segoe UI/system. Baloo 2 llega hasta 800, no 900. */
  --display: "Baloo 2", "Arial Rounded MT Bold", "Arial Rounded MT", ui-rounded,
             "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --hand: "Ink Free", "Segoe Print", "Bradley Hand", "Chalkboard SE",
          "Comic Sans MS", cursive;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, sans-serif;

  /* pegatina */
  --borde: 3px solid var(--tinta);
  --sombra: 0.3rem 0.3rem 0 var(--tinta);
}

/* El "modo oscuro" de gozo: el mismo papel de siempre. Existe para que los
   motores que oscurecen por su cuenta (Mi Browser y familia WebView) apliquen
   ESTO en vez de invertir la página; en navegadores estándar con sistema en
   oscuro re-impone el esquema claro y no cambia nada visible. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: only light;
  }
  html,
  body {
    background: var(--papel);
    color: var(--tinta);
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 { margin: 0; }
p { margin: 0; }

::selection { background: var(--mango); color: var(--tinta); }

:focus-visible {
  outline: 3px solid var(--cobalto);
  outline-offset: 3px;
  border-radius: 6px;
}
.g-tarrina :focus-visible { outline-color: var(--papel); }
/* sobre fondos tinta el cobalto se queda a 2,5:1 (<3:1 no-textual): outline papel */
.demo-bar :focus-visible, .g-footer :focus-visible { outline-color: var(--papel); }
/* la nota de pedido es papel dentro de la tarrina: papel sobre papel = invisible */
.g-order-note :focus-visible { outline-color: var(--cobalto); }

/* ---------- utilidades ---------- */

.skip-link {
  position: absolute;
  left: -999px;
  top: 0.5rem;
  z-index: 20;
  background: var(--tinta);
  color: var(--papel);
  padding: 0.6em 1.2em;
  border-radius: 999px;
  font-family: var(--display);
  text-decoration: none;
}
.skip-link:focus { left: 0.5rem; }

.g-hand { font-family: var(--hand); }

/* solo para lectores de pantalla */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- barra de demostración (marco honesto) ---------- */

.demo-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  justify-content: space-between;
  align-items: center;
  padding: 0.55rem 1.25rem;
  background: var(--tinta);
  color: var(--papel);
  font-size: 0.82rem;
}
.demo-bar a {
  color: var(--papel);
  text-underline-offset: 3px;
  white-space: nowrap;
}

/* ---------- cabecera ---------- */

.g-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.1rem;
  padding: 1.1rem clamp(1.25rem, 4vw, 2.5rem);
}
.g-brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--tinta);
}
.g-wordmark {
  font-family: var(--display);
  font-weight: 800;
  font-size: 2.1rem;
  letter-spacing: -0.02em;
  line-height: 1;
}
.g-wordmark-sm { font-size: 1.5rem; }
.g-brand-tag {
  font-family: var(--hand);
  font-size: 1.02rem;
  transform: rotate(-2deg);
  margin-top: 0.4rem;
}
.g-nav {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.g-nav a {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--tinta);
  text-decoration: none;
  padding: 0.35em 0.85em;
  border-radius: 999px;
  border: 2px solid transparent;
  transition: background 0.15s, color 0.15s;
}
.g-nav a:hover, .g-nav a:focus-visible {
  background: var(--tinta);
  color: var(--papel);
}

/* ---------- secciones: full-bleed con contenido centrado ---------- */

.g-section {
  padding: clamp(3rem, 7vw, 4.5rem) max(1.25rem, calc((100% - 72rem) / 2));
}
.g-section[id] { scroll-margin-top: 1rem; }

.g-head {
  text-align: center;
  max-width: 44rem;
  margin: 0 auto clamp(1.8rem, 4vw, 2.8rem);
}
.g-head h2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-top: 0.9rem;
}
.g-head-lede {
  font-size: 1.08rem;
  margin-top: 0.9rem;
}
.g-head-lede a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; }

.g-eyebrow { line-height: 1; }

/* pegatinas (eyebrows, chips, precios) */
.g-sticker {
  display: inline-block;
  font-family: var(--hand);
  font-size: 1rem;
  color: var(--tinta);
  padding: 0.3em 0.95em;
  border: 2.5px solid var(--tinta);
  border-radius: 999px;
  transform: rotate(-2deg);
  box-shadow: 0.2rem 0.2rem 0 var(--tinta);
}
.g-sticker-crema { background: var(--papel-card); }
.g-sticker-menta { background: var(--menta); }
.g-sticker-beige { background: var(--beige); }
.g-sticker-cielo { background: var(--cielo); }
.g-sticker-fresa { background: var(--fresa); }

/* botones pegatina */
.g-button {
  display: inline-block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.08rem;
  color: var(--papel);
  background: var(--tinta);
  border: var(--borde);
  border-radius: 999px;
  padding: 0.75em 1.6em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0.32rem 0.32rem 0 var(--mango);
  transition: transform 0.15s, box-shadow 0.15s;
}
.g-button:hover, .g-button:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: 0.45rem 0.45rem 0 var(--mango);
}
.g-button:active {
  transform: translate(2px, 2px);
  box-shadow: 0.08rem 0.08rem 0 var(--mango);
}
.g-button-crema {
  color: var(--tinta);
  background: var(--papel);
  border-color: var(--tinta);
  box-shadow: 0.32rem 0.32rem 0 var(--cobalto-sombra);
}
.g-button-crema:hover, .g-button-crema:focus-visible {
  box-shadow: 0.45rem 0.45rem 0 var(--cobalto-sombra);
}
.g-button-crema:active { box-shadow: 0.08rem 0.08rem 0 var(--cobalto-sombra); }
.g-button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: 0.32rem 0.32rem 0 var(--cobalto-sombra);
}

.g-textlink {
  font-weight: 700;
  color: var(--tinta);
  text-decoration-thickness: 2.5px;
  text-underline-offset: 4px;
}
.g-textlink:hover { text-decoration-style: wavy; }

/* ---------- HERO ---------- */

.g-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1.5rem, 5vw, 4rem);
  padding: clamp(1.5rem, 4vw, 3rem) max(1.25rem, calc((100% - 76rem) / 2)) clamp(2.5rem, 5vw, 4rem);
}
.g-hero-copy h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.4rem, 5.2vw, 4.1rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-top: 1.2rem;
}
.g-hero-copy h1 em {
  font-style: normal;
  text-decoration: underline wavy;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.1em;
}
.g-sub-mango { text-decoration-color: var(--mango); }
.g-sub-fresa { text-decoration-color: var(--fresa); }

.g-lede {
  font-size: 1.14rem;
  max-width: 36ch;
  margin-top: 1.1rem;
}
.g-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.4rem;
  margin-top: 1.7rem;
}

.g-hero-fig {
  position: relative;
  margin: 0 clamp(1.5rem, 7vw, 6rem) 0 auto;  /* separa el cono del borde derecho */
  width: fit-content;          /* la figura envuelve al cono → las etiquetas cuadran */
}
/* cono recortado a transparente: flota sobre el crema, sin máscara ni marco */
.g-hero-fig img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: min(74vh, 620px);
  position: relative;
  z-index: 1;                  /* las etiquetas (chips) van por encima, a z 2 */
}

/* etiquetas que nombran cada bola de la foto y llevan a su ficha */
.g-chip {
  position: absolute;
  z-index: 2;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(0.85rem, 1.4vw, 1.05rem);
  padding: 0.3em 0.9em;
  border: 2.5px solid var(--tinta);
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0.18rem 0.18rem 0 var(--tinta);
  transition: transform 0.15s, box-shadow 0.15s;
}
.g-chip:hover, .g-chip:focus-visible {
  box-shadow: 0.3rem 0.3rem 0 var(--tinta);
}
/* posiciones calibradas contra el cono retrato (mango arriba, fresa, pistacho) */
.g-chip-mango {
  top: 9%; left: 62%;
  background: var(--mango);
  color: var(--tinta);
  transform: rotate(-5deg);
}
.g-chip-mango:hover, .g-chip-mango:focus-visible { transform: rotate(-5deg) translate(-2px, -2px); }
.g-chip-fresa {
  top: 28%; right: 63%;
  background: var(--fresa);
  color: var(--tinta);
  transform: rotate(4deg);
}
.g-chip-fresa:hover, .g-chip-fresa:focus-visible { transform: rotate(4deg) translate(-2px, -2px); }
.g-chip-pistacho {
  top: 43%; left: 62%;
  background: var(--pistacho-hondo);
  color: var(--papel);
  transform: rotate(-3deg);
}
.g-chip-pistacho:hover, .g-chip-pistacho:focus-visible { transform: rotate(-3deg) translate(-2px, -2px); }

.g-pricetag {
  position: absolute;
  z-index: 2;
  right: 4%;
  bottom: 6%;
  font-family: var(--hand);
  font-size: 1.05rem;
  background: var(--azur);
  color: var(--tinta);
  border: 2.5px solid var(--tinta);
  border-radius: 999px;
  padding: 0.3em 0.95em;
  transform: rotate(3deg);
  box-shadow: 0.2rem 0.2rem 0 var(--tinta);
}

/* ---------- SABORES · la vitrina ---------- */

.g-vitrina {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  gap: 1.5rem;
  align-items: start; /* al abrir una ficha, las hermanas no se estiran en blanco */
}

.g-card {
  --flood: var(--papel-card);
  background: var(--papel-card);
  border: var(--borde);
  border-radius: 1.4rem;
  padding: 1rem 1rem 1.25rem;
  box-shadow: var(--sombra);
  transition: background 0.3s;
}
/* al pasar/abrir, la ficha se tiñe de un tono suave de SU sabor (legible con
   texto tinta). Un tinte por sabor, no el fondo saturado de la foto. */
.g-card[data-flavor="pistacho"]  { --flood: color-mix(in srgb, var(--pistacho) 30%, var(--papel-card)); }
.g-card[data-flavor="limon"]     { --flood: color-mix(in srgb, var(--limon) 40%, var(--papel-card)); }
.g-card[data-flavor="fresa"]     { --flood: color-mix(in srgb, var(--fresa) 32%, var(--papel-card)); }
.g-card[data-flavor="melocoton"] { --flood: color-mix(in srgb, var(--melocoton) 36%, var(--papel-card)); }
.g-card[data-flavor="frutos"]    { --flood: color-mix(in srgb, var(--frutos) 26%, var(--papel-card)); }
.g-card[data-flavor="mango"]     { --flood: color-mix(in srgb, var(--mango) 34%, var(--papel-card)); }
.g-card[data-flavor="higo"]      { --flood: color-mix(in srgb, var(--higo) 28%, var(--papel-card)); }
.g-card[data-flavor="mandarina"] { --flood: color-mix(in srgb, var(--mandarina) 30%, var(--papel-card)); }

/* al pasar o abrir, la tarjeta se inunda del color de SU foto:
   la foto pierde el marco y el sabor te enseña su fondo */
.g-card:hover, .g-card:focus-within, .g-card.is-open { background: var(--flood); }

.g-card-fig {
  margin: 0;
  border-radius: 0.9rem;
  overflow: hidden;
}
.g-card-body { padding: 0.9rem 0.35rem 0; }
.g-card h3 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5em;
}
/* apellido de sabor: siempre tinta (legible sobre el crema en reposo y sobre
   cualquier fondo inundado). El color caramelo vive en los rellenos, no en el
   texto pequeño — así ningún par texto/fondo baja de contraste AA. */
.g-tag {
  font-family: var(--hand);
  font-weight: 400;
  font-size: 0.95rem;
  letter-spacing: 0;
  transform: rotate(-2deg);
  color: var(--tinta);
}

.g-badge-vegano {
  font-family: var(--hand);
  font-size: 0.75rem;
  background: var(--menta);
  border: 2px solid var(--tinta);
  border-radius: 999px;
  padding: 0.1em 0.7em;
}

/* estado de temporada en la carta (lo pone gozo.js con la fecha real) */
.g-status {
  display: inline-block;
  margin-top: 0.55rem;
  font-family: var(--hand);
  font-size: 0.9rem;
  color: var(--tinta);
  padding: 0.15em 0.85em;
  border: 2px solid var(--tinta);
  border-radius: 999px;
}
.g-status[hidden] { display: none; }
.g-status-on { background: var(--mango); }     /* en temporada — vivo */
.g-status-fijo { background: var(--menta); }   /* todo el año */
.g-status-off { background: transparent; border-style: dashed; } /* vuelve en… */
/* fuera de temporada: la foto se atenúa; el texto sigue legible */
.g-card.is-off .g-card-fig img { filter: grayscale(0.55) opacity(0.72); }

.g-card-toggle {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--tinta);
  background: transparent;
  border: 2.5px solid var(--tinta);
  border-radius: 999px;
  padding: 0.3em 0.95em;
  margin-top: 0.8rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.g-card-toggle::after { content: " +"; }
.g-card-toggle[aria-expanded="true"]::after { content: " –"; }
.g-card-toggle:hover, .g-card-toggle:focus-visible {
  background: var(--tinta);
  color: var(--papel);
}

.g-nota {
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transition: max-height 0.35s ease, opacity 0.3s ease, visibility 0s linear 0.35s;
}
/* la ficha se abre SOLO con click (el hover mantiene el tinte de color, no
   despliega): así no se disparan todas en cadena al pasar el ratón. */
.g-card.is-open .g-nota,
.no-js .g-nota {
  max-height: 22rem;
  opacity: 1;
  visibility: visible;
  transition: max-height 0.35s ease, opacity 0.3s ease 0.1s;
}
.g-nota p { margin-top: 0.8rem; font-size: 0.98rem; }
.g-nota-dato { font-family: var(--hand); font-size: 0.95rem; }
/* alérgenos: informativo y sobrio (sin color), separado por un filete */
.g-nota .g-alergenos {
  margin-top: 0.9rem;
  padding-top: 0.7rem;
  border-top: 1.5px dashed color-mix(in srgb, var(--tinta) 28%, transparent);
  font-size: 0.86rem;
  line-height: 1.4;
}
.g-alergenos b { font-family: var(--display); }
.no-js .g-card-toggle { display: none; }

/* ---------- goteo entre secciones ---------- */

.g-drip {
  display: block;
  width: 100%;
  height: clamp(26px, 4vw, 44px);
}
.g-drip-top { margin-bottom: -1px; }
.g-drip-bottom { margin-top: -1px; }

/* ---------- LA TARRINA · bloque cobalto ---------- */

.g-tarrina {
  background: var(--cobalto);
  color: var(--papel);
}
.g-tarrina .g-head h2 { color: var(--papel); }

.g-tarifa {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.2rem;
  max-width: 44rem;
}
.g-tarifa li {
  background: var(--papel);
  color: var(--tinta);
  border: var(--borde);
  border-radius: 1.1rem;
  padding: 0.75rem 1.5rem;
  text-align: center;
  box-shadow: 0.3rem 0.3rem 0 var(--cobalto-sombra);
}
.g-tarifa li:nth-child(1) { transform: rotate(-2deg); }
.g-tarifa li:nth-child(2) { transform: rotate(1.5deg); }
.g-tarifa li:nth-child(3) { transform: rotate(-1deg); }
.g-tarifa b {
  display: block;
  font-family: var(--display);
  font-size: 1rem;
}
.g-tarifa span {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.55rem;
}

.g-builder[hidden] { display: none; }
.g-builder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  max-width: 58rem;
  margin: 2.6rem auto 0;
}
.g-builder-label {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  margin-bottom: 0.9rem;
}
.g-flavor-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}
.g-fbtn {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.15em 0.55em;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.08rem;
  color: var(--tinta);
  background: var(--papel);
  border: var(--borde);
  border-radius: 999px;
  padding: 0.7em 1em;
  cursor: pointer;
  box-shadow: 0.28rem 0.28rem 0 var(--cobalto-sombra);
  transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
}
.g-fbtn:hover:not([disabled]), .g-fbtn:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: 0.4rem 0.4rem 0 var(--cobalto-sombra);
}
.g-fbtn:active:not([disabled]) {
  transform: translate(2px, 2px);
  box-shadow: 0.06rem 0.06rem 0 var(--cobalto-sombra);
}
.g-fbtn[disabled] { opacity: 0.45; cursor: not-allowed; }
/* fuera de temporada: bloqueado pero legible, con su "vuelve en…" y borde punteado */
.g-fbtn.is-locked[disabled] { opacity: 1; }
.g-fbtn.is-locked {
  cursor: not-allowed;
  border-style: dashed;
  box-shadow: none;
}
.g-fbtn.is-locked .g-dot { opacity: 0.5; }
.g-fbtn.is-locked .g-fbtn-name { opacity: 0.72; }
.g-dot {
  width: 1em;
  height: 1em;
  border-radius: 50%;
  border: 2px solid var(--tinta);
  flex: none;
}
.g-dot-pistacho { background: var(--pistacho); }
.g-dot-limon { background: var(--limon); }
.g-dot-fresa { background: var(--fresa); }
.g-dot-melocoton { background: var(--melocoton); }
.g-dot-frutos { background: var(--frutos); }
.g-dot-mango { background: var(--mango); }
.g-dot-higo { background: var(--higo); }
.g-dot-mandarina { background: var(--mandarina); }
/* nombre y estado ("vuelve en…") dentro del botón de sabor */
.g-fbtn-name { line-height: 1.1; }
.g-fbtn-state:not(:empty) {
  flex-basis: 100%;
  font-family: var(--hand);
  font-weight: 400;
  font-size: 0.78rem;
}

.g-builder-edit {
  display: flex;
  gap: 0.8rem;
  margin-top: 1rem;
}
.g-minibtn {
  font-family: var(--display);
  font-size: 0.9rem;
  color: var(--papel);
  background: transparent;
  border: 2.5px solid var(--papel);
  border-radius: 999px;
  padding: 0.35em 1em;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, opacity 0.15s;
}
.g-minibtn:hover:not([disabled]), .g-minibtn:focus-visible {
  background: var(--papel);
  color: var(--tinta);
}
.g-minibtn[disabled] { opacity: 0.4; cursor: not-allowed; }

.g-builder-cup {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}
.g-cup { width: min(15rem, 70%); }
/* bolas fantasma: enseñan dónde caerán las bolas mientras el vaso está vacío */
.g-ghost circle {
  fill: none;
  stroke: var(--papel);
  stroke-width: 2.5;
  stroke-dasharray: 6 7;
  stroke-linecap: round;
  opacity: 0.45;
  transition: opacity 0.2s;
}
.g-cup:not(.is-empty) .g-ghost circle { opacity: 0; }
.g-bola {
  opacity: 0;
  transform: scale(0.2);
  transform-origin: center;
  transform-box: fill-box;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s;
}
.g-bola.is-on { opacity: 1; transform: scale(1); }
.g-bola-pistacho { fill: var(--pistacho); }
.g-bola-limon { fill: var(--limon); }
.g-bola-fresa { fill: var(--fresa); }
.g-bola-melocoton { fill: var(--melocoton); }
.g-bola-frutos { fill: var(--frutos); }
.g-bola-mango { fill: var(--mango); }
.g-bola-higo { fill: var(--higo); }
.g-bola-mandarina { fill: var(--mandarina); }

.g-builder-price {
  font-family: var(--display);
  font-weight: 800;
  font-size: 2.3rem;
  line-height: 1;
}
.g-builder-summary {
  font-size: 1rem;
  max-width: 28ch;
  margin: 0.35rem auto 0;
  min-height: 2.6em;
}
.g-order-note {
  background: var(--papel);
  color: var(--tinta);
  border: var(--borde);
  border-radius: 1rem;
  padding: 0.9rem 1.2rem;
  max-width: 30rem;
  font-size: 0.98rem;
  box-shadow: 0.3rem 0.3rem 0 var(--cobalto-sombra);
}
.g-order-note a { color: inherit; text-decoration-thickness: 2px; }

.g-nojs-note {
  display: none;
  text-align: center;
  margin-top: 2rem;
  font-size: 0.95rem;
}
.no-js .g-nojs-note { display: block; }

.g-disclaimer {
  text-align: center;
  font-size: 0.85rem;
  margin-top: 2.4rem;
}

/* ---------- EL OBRADOR ---------- */

.g-pasos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
  gap: 2rem 1.8rem;
  max-width: 66rem;
  margin-inline: auto;
}
.g-paso-hora {
  font-family: var(--display);
  font-weight: 800;
  font-size: 2.1rem;
  letter-spacing: -0.02em;
  line-height: 1;
  transform: rotate(-2deg);
  display: inline-block;
}
/* horas grandes del obrador: mango y fresa vivos no llegan a 3:1 sobre el crema,
   así que aquí (texto, no relleno) van un punto más profundos y sí pasan AA large.
   Pistacho y chocolate ya pasan de sobra con su color de marca. */
.g-c-mango { color: #b37500; }
.g-c-fresa { color: #cc4b47; }
.g-c-pistacho { color: var(--pistacho); }
.g-c-choco { color: var(--choco); }
.g-pasos h3 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.3rem;
  margin-top: 0.6rem;
}
.g-pasos p:last-child { margin-top: 0.45rem; font-size: 0.98rem; }

/* ---------- TEMPORADA · calendario de la fruta ---------- */

.g-cal-now {
  text-align: center;
  font-size: 1.1rem;
  margin-bottom: 0.9rem;
}
.g-cal-now[hidden] { display: none; }
.g-cal-now .g-hand {
  display: inline-block;
  background: var(--papel-card);
  border: 2.5px solid var(--tinta);
  border-radius: 999px;
  padding: 0.25em 0.95em;
  transform: rotate(-2deg);
  box-shadow: 0.2rem 0.2rem 0 var(--tinta);
}

.g-cal {
  max-width: 56rem;
  margin: 0 auto;
}
.g-cal-months, .g-cal-row {
  display: grid;
  grid-template-columns: clamp(5.2rem, 12vw, 7rem) repeat(12, 1fr);
  gap: 0 0.3rem;
  align-items: center;
}
.g-cal-months { margin-bottom: 0.55rem; }
.g-cal-months b {
  font-family: var(--display);
  font-size: 0.88rem;
  text-align: center;
  opacity: 0.72;
  border-radius: 999px;
  padding: 0.15em 0;
}
.g-cal-months b.is-now {
  background: var(--tinta);
  color: var(--papel);
  opacity: 1;
}
.g-cal-row { margin-block: 0.5rem; }
.g-cal-label {
  font-family: var(--hand);
  font-size: 1.02rem;
  line-height: 1.12;
  text-align: right;
  padding-right: 0.9rem;
}
.g-pill {
  grid-row: 1;
  height: 1.95rem;
  border: 2px solid var(--tinta);
  border-radius: 999px;
  font-family: var(--display);
  font-style: normal;
  font-size: 0.78rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  white-space: nowrap;
}
.g-p-pistacho { background: var(--pistacho-hondo); color: var(--papel); }
.g-p-limon { background: var(--limon); }
.g-p-fresa { background: var(--fresa); }
.g-p-melocoton { background: var(--melocoton); }
.g-p-frutos { background: var(--frutos); color: var(--papel); }
.g-p-mango { background: var(--mango); }
.g-p-higo { background: var(--higo); color: var(--papel); }
.g-p-mandarina { background: var(--mandarina); }

/* columnas de meses: col 1 = etiqueta, mes m = columna m+1 */
.gc-1-12 { grid-column: 2 / 14; }
.gc-4-6  { grid-column: 5 / 8; }
.gc-6-8  { grid-column: 7 / 10; }
.gc-6-9  { grid-column: 7 / 11; }
.gc-7-9  { grid-column: 8 / 11; }
.gc-9-10 { grid-column: 10 / 12; }
.gc-11-12 { grid-column: 12 / 14; }
.gc-1-2  { grid-column: 2 / 4; }

/* banda "estamos aquí" que el JS coloca en el mes actual */
.g-cal-band {
  grid-row: 1;
  height: 2.6rem;
  border: 2.5px dashed var(--tinta);
  border-radius: 0.8rem;
  opacity: 0.55;
}
.g-cal-band.m1 { grid-column: 2; } .g-cal-band.m2 { grid-column: 3; }
.g-cal-band.m3 { grid-column: 4; } .g-cal-band.m4 { grid-column: 5; }
.g-cal-band.m5 { grid-column: 6; } .g-cal-band.m6 { grid-column: 7; }
.g-cal-band.m7 { grid-column: 8; } .g-cal-band.m8 { grid-column: 9; }
.g-cal-band.m9 { grid-column: 10; } .g-cal-band.m10 { grid-column: 11; }
.g-cal-band.m11 { grid-column: 12; } .g-cal-band.m12 { grid-column: 13; }

.g-cal-nota {
  text-align: center;
  font-size: 0.95rem;
  opacity: 0.85;
  max-width: 46ch;
  margin: 1.6rem auto 0;
}

/* ---------- DÓNDE ---------- */

.g-donde-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.6rem;
  max-width: 60rem;
  margin: 0 auto;
}
.g-donde-card {
  background: var(--papel-card);
  border: var(--borde);
  border-radius: 1.3rem;
  padding: 1.4rem 1.5rem;
  box-shadow: var(--sombra);
}
.g-donde-card:nth-child(1) { transform: rotate(-1.2deg); }
.g-donde-card:nth-child(2) { transform: rotate(0.8deg); }
.g-donde-card:nth-child(3) { transform: rotate(-0.6deg); }
.g-donde-card h3 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.25rem;
}
.g-donde-card p { margin-top: 0.5rem; }

/* ---------- pie ---------- */

.g-footer {
  background: var(--tinta);
  color: var(--papel);
  padding: 2.4rem max(1.25rem, calc((100% - 72rem) / 2)) 2.2rem;
  margin-top: clamp(2rem, 5vw, 3.5rem);
}
.g-footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  justify-content: space-between;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid rgba(248, 237, 217, 0.3);
}
/* el cono de marca junto al wordmark del pie (como en la cabecera) */
.g-foot-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.g-footer-top nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
}
.g-footer a {
  color: var(--papel);
  text-underline-offset: 3px;
}
.g-footer-bottom {
  padding-top: 1.4rem;
  font-size: 0.88rem;
  display: grid;
  gap: 0.5rem;
}

/* ---------- revelado al entrar (una vez, con muelle) ---------- */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px) scale(0.98);
}
.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.45s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.js .g-vitrina .g-card:nth-child(2).is-in { transition-delay: 0.06s; }
.js .g-vitrina .g-card:nth-child(3).is-in { transition-delay: 0.12s; }
.js .g-vitrina .g-card:nth-child(4).is-in { transition-delay: 0.18s; }
.js .g-vitrina .g-card:nth-child(5).is-in { transition-delay: 0.24s; }
.js .g-vitrina .g-card:nth-child(6).is-in { transition-delay: 0.30s; }
.js .g-vitrina .g-card:nth-child(7).is-in { transition-delay: 0.36s; }
.js .g-vitrina .g-card:nth-child(8).is-in { transition-delay: 0.42s; }
.js .g-pasos li:nth-child(2).is-in { transition-delay: 0.07s; }
.js .g-pasos li:nth-child(3).is-in { transition-delay: 0.14s; }
.js .g-pasos li:nth-child(4).is-in { transition-delay: 0.21s; }

/* ---------- movimiento reducido: todo visible, nada salta ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .g-button, .g-fbtn, .g-chip, .g-card, .g-nota, .g-bola,
  .g-card-toggle, .g-minibtn, .g-nav a,
  .g-card.is-open .g-nota, .g-ghost circle { transition: none; }
  .g-bola { transform: none; }
}

/* ---------- responsive ---------- */

@media (max-width: 64rem) {
  .g-hero { grid-template-columns: 1fr; }
  .g-hero-copy { text-align: center; }
  .g-hero-copy .g-lede { margin-inline: auto; }
  .g-hero-actions { justify-content: center; }
  .g-hero-fig { max-width: 44rem; margin-inline: auto; }
  .g-builder { grid-template-columns: 1fr; max-width: 34rem; }
}

@media (max-width: 40rem) {
  .g-header { justify-content: center; text-align: center; }
  .g-nav { margin-left: 0; justify-content: center; }
  .g-wordmark { font-size: 1.8rem; }
  .g-hero-copy h1 { font-size: clamp(2.15rem, 9vw, 2.6rem); }
  .g-chip { font-size: 0.78rem; box-shadow: 0.14rem 0.14rem 0 var(--tinta); }
  .g-pricetag { font-size: 0.9rem; }
  .g-tarifa { gap: 0.8rem; }
  .g-tarifa li { padding: 0.6rem 1.1rem; }
  .g-cal-months, .g-cal-row {
    grid-template-columns: 4.6rem repeat(12, 1fr);
    gap: 0 0.16rem;
  }
  .g-cal-label { font-size: 0.86rem; padding-right: 0.5rem; }
  .g-cal-months b { font-size: 0.72rem; }
  .g-pill { height: 1.7rem; font-size: 0.62rem; }
  .g-footer-top { justify-content: center; text-align: center; }
  .g-footer-bottom { text-align: center; }
}