@font-face { font-family: 'Anton'; src: url('assets/fonts/Anton-Regular.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('assets/fonts/IBMPlexSans-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Homemade Apple'; src: url('assets/fonts/HomemadeApple-Regular.ttf') format('truetype'); font-display: swap; }
:root { --ink: var(--color-verde-hierba); --paper: var(--color-blanco-cascaron); --accent: var(--color-verde-fresco); --soft: var(--color-amarillo-mantequilla); }
* { box-sizing: border-box; }
html, body { margin: 0; }
body { display: grid; min-height: 100svh; place-items: center; overflow: hidden; background: var(--paper); color: var(--ink); font-family: var(--fuente-interfaz), system-ui, sans-serif; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
/* `/` siempre rebota aquí (`entrada.js`) — es la página a la que llega todo el
   mundo, y era la única de las cuatro sin «Ir al contenido» (26 sep 2026). Mismo
   patrón que `.skip-link` de `estilo.css`, con los tokens de esta hoja. */
.skip-link { position: fixed; top: -5rem; left: 1rem; z-index: 100; padding: .8rem 1rem; background: var(--soft); color: var(--ink); }
.skip-link:focus { top: 1rem; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
.page { display: grid; width: min(96rem, calc(100% - 2rem)); height: calc(100svh - 2rem); min-height: 38rem; grid-template-rows: 3.6rem minmax(0, 1fr); gap: .65rem; margin: 0 auto; padding: .7rem; background: var(--paper); }
.topbar { position: relative; z-index: 30; display: grid; grid-template-columns: 16rem minmax(0, 1fr) 16rem; align-items: center; padding: 0 .65rem; border: 1px solid var(--ink); border-radius: 1rem; }
.brand-link { display: grid; width: 100%; min-height: 2.75rem; place-items: center; }
.logo { display: block; width: 7.5rem; aspect-ratio: 1080 / 709; background: var(--accent); -webkit-mask: url('assets/brand/wordmark-verde.svg') center / contain no-repeat; mask: url('assets/brand/wordmark-verde.svg') center / contain no-repeat; }
.nav { display: flex; align-items: center; justify-content: center; gap: clamp(.45rem, 1vw, .8rem); font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.nav a { display: inline-flex; min-height: 2.75rem; align-items: center; }
.nav-separator { color: var(--accent); }
.nav a:hover { text-decoration: underline; text-underline-offset: .3rem; }
.header-tools { display: flex; align-items: center; justify-content: flex-end; gap: .3rem; }
.icon-link { display: inline-flex; min-height: 2.75rem; align-items: center; justify-content: center; border-radius: 999px; }
.icon-link { position: relative; width: 2.75rem; }
.header-tools svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.bag-count { position: absolute; right: .08rem; top: .18rem; display: grid; width: 1rem; height: 1rem; place-items: center; border-radius: 50%; background: var(--soft); font-size: .58rem; font-weight: 700; }
.more-menu { position: relative; display: none; justify-self: end; }
.more-menu summary { display: grid; width: 2.75rem; height: 2.75rem; padding: 0; place-items: center; border-radius: 50%; background: var(--ink); color: var(--soft); cursor: pointer; list-style: none; }
.more-menu summary::-webkit-details-marker { display: none; }
.more-menu-icon { position: relative; display: block; width: 1.1rem; height: 1.1rem; transition: transform 180ms ease-out; }
.more-menu-icon::before, .more-menu-icon::after { position: absolute; left: 50%; top: 50%; width: 1.1rem; height: 2px; background: currentColor; content: ''; transform: translate(-50%, -50%); }
.more-menu-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.more-menu[open] .more-menu-icon { transform: rotate(45deg); }
.more-menu-panel { position: absolute; right: 0; top: calc(100% + .6rem); isolation: isolate; display: grid; width: min(20rem, calc(100vw - 2rem)); max-height: calc(100svh - 8rem); padding: .65rem; overflow: auto; border-radius: 1.25rem; background: transparent; box-shadow: 0 .75rem 2rem -.8rem var(--ink); -webkit-backdrop-filter: blur(22px) saturate(135%); backdrop-filter: blur(22px) saturate(135%); }
.more-menu-panel::before { position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--paper); content: ''; opacity: .92; }
.more-menu-panel a, .more-menu-social { display: flex; min-height: 2.9rem; align-items: center; justify-content: space-between; gap: 1rem; margin: 0; padding: .65rem .75rem; border-radius: .8rem; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.more-menu-panel a:hover { background: var(--soft); }
.more-menu-social { margin-top: .25rem; background: var(--ink); color: var(--paper); }
.more-menu-social small { font-size: .62rem; font-weight: 600; letter-spacing: .08em; opacity: .78; }
.board { display: grid; min-height: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: .65rem; }
.left { display: grid; min-height: 0; grid-template-rows: 1.75fr .9fr; gap: .65rem; }
.small-grid { display: grid; min-height: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.card { position: relative; min-width: 0; min-height: 0; overflow: hidden; border-radius: 1.25rem; background: var(--soft); box-shadow: 0 .35rem .85rem -.45rem var(--ink); }
.about { display: flex; flex-direction: column; justify-content: space-between; padding: clamp(1.4rem, 3vw, 3rem); background: var(--ink); color: var(--paper); }
.about-heading { position: relative; z-index: 1; }
.about-heading::after { display: block; clear: both; content: ''; }
.about-isotipo { float: right; width: clamp(9rem, 15vw, 13rem); aspect-ratio: 1; margin: -.65rem -.65rem .15rem .65rem; background: var(--soft); -webkit-mask: url('assets/brand/isotipo-secundario-mantequilla.svg') center / contain no-repeat; mask: url('assets/brand/isotipo-secundario-mantequilla.svg') center / contain no-repeat; opacity: .88; pointer-events: none; shape-outside: circle(46% at 50% 50%); shape-margin: .35rem; transform: scaleX(-1); }
.about h1 { max-width: 100%; margin: 0; font-family: var(--fuente-encabezado), sans-serif; font-size: clamp(3rem, min(6.8vw, 11vh), 7.5rem); font-weight: 400; letter-spacing: .01em; line-height: .98; word-spacing: .08em; text-transform: uppercase; }
.about h1 span { display: inline-flex; align-items: center; gap: 1rem; }
.about h1 span::after { width: clamp(2.5rem, 6vw, 6rem); height: 1px; background: currentColor; content: ''; }
.about h1, .about-copy { position: relative; z-index: 1; }
.about-copy { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.about-copy p { max-width: 34rem; margin: 0; font-size: clamp(.8rem, 1.1vw, 1rem); }
.arrow { display: grid; min-width: 6.5rem; min-height: 3rem; flex: 0 0 auto; padding: .65rem 1rem; place-items: center; border: 1px solid currentColor; border-radius: 999px; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.photo-card img { transition: transform 220ms ease-out; }
.photo-card:hover img { transform: scale(1.025); }
.tile-label { position: absolute; right: 1rem; bottom: 1rem; left: 1rem; z-index: 1; display: flex; align-items: end; justify-content: space-between; gap: .75rem; color: var(--paper); font-family: var(--fuente-encabezado), sans-serif; font-size: clamp(.9rem, 1.4vw, 1.25rem); line-height: 1; text-transform: uppercase; }
/* Sin fondo, por palabra de Pablo (26 sep 2026: «esto no lleva fondo»). Queda sólo el
   `text-shadow`, que WCAG no cuenta: sobre foto clara el rótulo puede bajar de 4.5:1. */
.tile-label span:first-child { padding: .3rem 0; text-shadow: 0 2px 12px var(--ink); }
.tile-label span:last-child { font-family: var(--fuente-interfaz), sans-serif; font-size: 1rem; text-shadow: 0 2px 12px var(--ink); }
.hero-card .hero-copy { position: absolute; inset: 1rem 1rem auto; z-index: 1; display: flex; align-items: start; justify-content: space-between; gap: 1rem; color: var(--paper); }
.hero-title-glass { position: relative; isolation: isolate; padding: .9rem 1.05rem 1rem; border-radius: 1rem; background: transparent; -webkit-backdrop-filter: blur(14px) saturate(120%); backdrop-filter: blur(14px) saturate(120%); }
/* Contraste sobre foto (medido 26 sep 2026): a .68 «La receta de la casa» (11.5px)
   caía a 4.00:1 contra el umbral 4.5:1. Subido a .78 — sigue siendo vidrio, no una
   tarjeta opaca — deja el peor píxel muestreado de `chipotle.jpg` en ~5.16:1. */
.hero-title-glass::before { position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--ink); content: ''; opacity: .78; }
.hero-copy p { margin: 0; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; }
.hero-copy h2 { max-width: 8ch; margin: .35rem 0 0; font-family: var(--fuente-encabezado), sans-serif; font-size: clamp(3rem, 6vw, 6.5rem); font-weight: 400; line-height: .88; text-transform: uppercase; }
.round-cta { display: grid; width: 5rem; height: 5rem; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--soft); color: var(--ink); font-size: .75rem; font-weight: 700; text-align: center; text-transform: uppercase; transform: rotate(7deg); }
.hero-actions { position: absolute; right: 1rem; bottom: 1rem; z-index: 1; display: flex; justify-content: flex-end; }
.pill { display: flex; min-width: 16rem; min-height: 2.9rem; align-items: center; justify-content: space-between; padding: .6rem .65rem .6rem 1rem; border: 1px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--paper); font-size: .78rem; font-weight: 700; text-transform: uppercase; }
.pill span { display: grid; width: 1.8rem; height: 1.8rem; place-items: center; border-radius: 50%; background: var(--soft); color: var(--ink); }
.mobile-nav { display: none; }
@media (max-height: 760px) and (min-width: 801px) {
  .page { min-height: 0; }
  .about h1 { font-size: clamp(2.8rem, 5.6vw, 5.7rem); }
  .round-cta { width: 4.2rem; height: 4.2rem; }
}
@media (max-width: 1024px) {
  .page { height: calc(100svh - 7rem); margin-bottom: 5rem; }
  .topbar { grid-template-columns: 1fr auto; }
  .brand-link { justify-content: start; }
  .nav { display: none; }
  .header-tools { display: none; }
  .more-menu { display: block; }
  .mobile-nav { position: fixed; right: max(.75rem, env(safe-area-inset-right, 0px)); bottom: max(.75rem, env(safe-area-inset-bottom, 0px)); left: max(.75rem, env(safe-area-inset-left, 0px)); z-index: 40; isolation: isolate; display: grid; grid-template-columns: repeat(4, 1fr); width: min(32rem, calc(100% - 1.5rem)); min-height: 4.65rem; margin-inline: auto; padding: .38rem; overflow: hidden; border-radius: 1.4rem; background: transparent; color: var(--paper); box-shadow: 0 .35rem .85rem -.45rem var(--ink); -webkit-backdrop-filter: blur(18px) saturate(135%); backdrop-filter: blur(18px) saturate(135%); }
  .mobile-nav::before { position: absolute; inset: 0; z-index: -1; background: var(--ink); content: ''; opacity: .72; }
  .mobile-nav a { position: relative; display: flex; min-width: 0; min-height: 3.85rem; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; border-radius: 1.05rem; font-size: .72rem; line-height: 1; }
  .mobile-nav a[aria-current='page'] { background: var(--soft); color: var(--ink); font-weight: 700; }
  .mobile-nav a[aria-current='page']::after { position: absolute; right: .65rem; top: .55rem; width: .35rem; height: .35rem; border-radius: 50%; background: var(--accent); content: ''; }
  .mobile-nav svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
  /* La burbuja de piezas sobre «Carrito» (`burbuja-carrito.js`), igual que en `estilo.css`. */
  .mobile-nav .burbuja-carrito { position: absolute; top: .35rem; left: calc(50% + .35rem); display: grid; min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem; place-items: center; border-radius: 999px; background: var(--soft); color: var(--ink); font-size: .66rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
  /* Sin borde: sobre la pestaña activa (fondo `--soft`) se invierte para seguir viéndose. */
  .mobile-nav a[aria-current='page'] .burbuja-carrito { background: var(--ink); color: var(--soft); }
}
@media (max-width: 800px) {
  body { display: block; overflow: auto; }
  .page { width: calc(100% - 1rem); height: auto; min-height: 0; grid-template-rows: auto auto; margin: .5rem auto 6.5rem; padding: .5rem; }
  .board { grid-template-columns: 1fr; }
  /* Ana, 10-OCT-2026: «En el teléfono y en tablet primero se ve el pollo al chipotle y después pollos al horno
     gourmet, debe ser al revés». Antes el chipotle iba en la fila 1; ahora el orden es: «Pollos al horno gourmet»,
     el pollo al chipotle y, al final, las dos tarjetas de fotos. `.left` deja de ser caja para que sus hijos se ordenen. */
  .left { display: contents; }
  .about { order: 1; min-height: 31rem; }
  .hero-card { order: 2; min-height: 42rem; }
  .small-grid { order: 3; min-height: 28rem; }
  .hero-copy h2 { font-size: 4rem; }
}
@media (max-width: 520px) {
  .small-grid { grid-template-columns: 1fr; min-height: 54rem; }
  .about h1 { font-size: 3.7rem; }
  .pill { min-width: min(16rem, calc(100vw - 4rem)); }
}
/* Nuestros aliados (Ana, 8-OCT-2026: «en home se sigue viendo la foto del granjero extranjero. Cambiala
   por el carrusel de fotos»): las tres fotos de la chinampa, una por pantalla, en la tarjeta del inicio.
   La pista se desliza con el dedo (scroll-snap); flechas y puntos los pone carrusel.js. El rótulo es la
   liga a la página; los puntos suben para no encimarse con él. */
.tile-carrusel { min-height: 14rem; background: var(--ink); }
.tile-carrusel .carrusel-pista { position: absolute; inset: 0; display: flex; margin: 0; padding: 0; overflow-x: auto; list-style: none; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.tile-carrusel .carrusel-pista::-webkit-scrollbar { display: none; }
.tile-carrusel .carrusel-pista li { height: 100%; flex: 0 0 100%; scroll-snap-align: start; }
.tile-carrusel picture, .tile-carrusel img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tile-carrusel:hover img { transform: none; }
/* La tarjeta es casi cuadrada y las fotos son verticales: cada una se encuadra donde está lo que importa
   (las lechugas, el árbol con la gente y el agua, el hombre de cuerpo entero). */
.tile-carrusel .carrusel-pista li:nth-child(1) img { object-position: 50% 28%; }
.tile-carrusel .carrusel-pista li:nth-child(2) img { object-position: 50% 24%; }
.tile-carrusel .carrusel-pista li:nth-child(3) img { object-position: 50% 62%; }
.tile-carrusel .tile-label { right: 1rem; left: 1rem; }
.tile-carrusel .carrusel-flecha { position: absolute; top: 45%; z-index: 2; display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border: 1px solid var(--ink); border-radius: 50%; background: var(--paper); color: var(--ink); font-size: 1.1rem; cursor: pointer; transform: translateY(-50%); }
.tile-carrusel .carrusel-anterior { left: .65rem; }
.tile-carrusel .carrusel-siguiente { right: .65rem; }
.tile-carrusel .carrusel-flecha[disabled] { opacity: .35; cursor: default; }
.tile-carrusel .carrusel-flecha:focus-visible, .tile-carrusel .tile-label:focus-visible { outline: 3px solid var(--paper); outline-offset: 3px; }
.tile-carrusel .carrusel-puntos { position: absolute; right: 0; bottom: 3rem; left: 0; z-index: 2; display: flex; justify-content: center; gap: .5rem; }
.tile-carrusel .carrusel-punto { width: .7rem; height: .7rem; padding: 0; border: 1px solid var(--paper); border-radius: 50%; background: transparent; cursor: pointer; }
.tile-carrusel .carrusel-punto[aria-current="true"] { background: var(--paper); }
@media (prefers-reduced-motion: reduce) { .photo-card img { transition: none; } }