/* Home de Pets & Jack.
 *
 * Los tokens vienen del Design System de la app (lib/core/theme/*.dart)
 * para que la portada y la tienda se sientan la misma marca. Si cambia un
 * color en Dart, cambia acá: dos naranjas distintos se notan al pasar de
 * una a otra.
 *
 * Regla del proyecto: solo se animan `transform` y `opacity`. Son las
 * únicas que el navegador resuelve en el compositor; el resto rehace el
 * layout en cada cuadro y en un Android de gama media eso se ve a saltos.
 */

/* ══ Tokens ═══════════════════════════════════════════════════════ */

:root {
  --orange: #ff7a1a;
  --orange-dark: #e8650a;
  --orange-light: #ffe8d6;
  --orange-soft: #fff1e6;

  --black: #171717;
  --ink: #1f1f1f;
  --ink-soft: #6b6b6b;
  --ink-faint: #9b9b9b;

  --white: #ffffff;
  --gray-bg: #f4f4f4;
  --gray-card: #f7f7f7;
  --gray-line: #e6e6e6;

  --success: #1e9e5a;
  --star: #ffb020;

  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 12px;
  --sp-lg: 16px;
  --sp-xl: 20px;
  --sp-2xl: 24px;
  --sp-3xl: 32px;
  --sp-huge: 40px;
  --sp-section: clamp(56px, 9vw, 120px);

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  --sh-xs: 0 1px 4px rgba(23, 23, 23, 0.04);
  --sh-sm: 0 3px 10px rgba(23, 23, 23, 0.06);
  --sh-md: 0 8px 20px rgba(23, 23, 23, 0.1);
  --sh-lg: 0 16px 32px rgba(23, 23, 23, 0.14);

  /* Mismas duraciones y curvas que app_motion.dart. */
  --dur-fast: 180ms;
  --dur-normal: 250ms;
  --dur-slow: 400ms;
  --dur-emphasis: 600ms;
  --stagger: 60ms;
  --ease-enter: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-exit: cubic-bezier(0.55, 0, 1, 0.45);

  --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-display: clamp(2.1rem, 1.1rem + 4.4vw, 4.25rem);
  --fs-h2: clamp(1.4rem, 1rem + 1.7vw, 2.25rem);
  --fs-lead: clamp(1rem, 0.94rem + 0.5vw, 1.25rem);
  --fs-body: clamp(0.95rem, 0.9rem + 0.2vw, 1.0625rem);
  --fs-sm: 0.875rem;
  --fs-caption: 0.75rem;

  --lh-tight: 1.08;
  --lh-body: 1.6;
  --measure: 52ch;
  --container: 1280px;
  --header-h: 68px;
  /* El margen lateral crece con la pantalla. A 1280px justos, un padding
     fijo de 20px deja el titular pegado al borde y se ve barato. */
  --gutter: clamp(20px, 5vw, 64px);
}

/* Variable: un archivo cubre 400–800. Auto-alojada porque la CSP del sitio
   es `default-src 'self'` y bloquea el CDN de Google Fonts. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215;
}

/* ══ Base ═════════════════════════════════════════════════════════ */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, p { margin: 0; }

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.u-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Aparece solo al tabular. Sin esto, quien navega con teclado tiene que
   recorrer el menú entero antes de llegar al contenido. */
.skip-link {
  position: absolute;
  top: var(--sp-sm);
  left: var(--sp-sm);
  z-index: 100;
  padding: var(--sp-md) var(--sp-xl);
  background: var(--ink);
  color: var(--white);
  border-radius: var(--r-pill);
  font-weight: 700;
  transform: translateY(-200%);
  transition: transform var(--dur-fast) var(--ease-enter);
}
.skip-link:focus { transform: translateY(0); }

/* ══ Header ═══════════════════════════════════════════════════════ */

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--header-h);
  /* Sobre el hero arranca transparente; al bajar se vuelve sólido. */
  background: transparent;
  transition:
    background-color var(--dur-normal) var(--ease-enter),
    box-shadow var(--dur-normal) var(--ease-enter);
}

/* Velo propio del header. Cumple dos funciones: da contraste al texto
   blanco sobre las zonas claras de la foto, y actúa de seguro — si el
   estado "fijo" no llegara a aplicarse, el menú sigue siendo legible en
   vez de desaparecer en blanco sobre blanco. */
.header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(15, 12, 10, 0.55), transparent);
  transition: opacity var(--dur-normal) var(--ease-enter);
}
.header.is-stuck::before { opacity: 0; }

.header.is-stuck {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  box-shadow: var(--sh-sm);
}

.header__inner {
  max-width: var(--container);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--sp-2xl);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  font-weight: 800;
  flex-shrink: 0;
}
.brand img { width: 40px; height: 40px; }
.brand__name { font-size: 1.0625rem; letter-spacing: -0.01em; }

.nav {
  display: flex;
  gap: var(--sp-2xl);
  margin-inline-start: auto;
  font-weight: 700;
  font-size: var(--fs-sm);
}
.nav a { position: relative; padding: var(--sp-sm) 0; }

/* El subrayado se anima con scaleX, no con width: así no obliga a
   recalcular el layout del menú en cada cuadro. */
.nav a::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-fast) var(--ease-enter);
}
.nav a:hover::after,
.nav a:focus-visible::after { transform: scaleX(1); }

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  flex-shrink: 0;
}

/* Sobre el hero el texto va blanco; al fijarse vuelve al tinta. */
.header:not(.is-stuck) .brand,
.header:not(.is-stuck) .nav a { color: var(--white); }
.header:not(.is-stuck) .btn--ghost {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 760px) {
  .nav { display: none; }
  .header__actions { margin-inline-start: auto; }
}

/* ══ Botones ══════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm);
  min-height: 48px;           /* objetivo táctil accesible */
  padding: 0 var(--sp-2xl);
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  background: var(--orange);
  color: var(--white);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition:
    transform var(--dur-fast) var(--ease-enter),
    background-color var(--dur-fast) var(--ease-enter),
    border-color var(--dur-fast) var(--ease-enter);
}

/* 44px es el mínimo táctil accesible; 40 dejaba los del header bajo el
   umbral y son justo los que se tocan con el pulgar en móvil. */
.btn--sm { min-height: 44px; padding: 0 var(--sp-lg); font-size: var(--fs-sm); }
.btn--lg { min-height: 56px; padding: 0 var(--sp-3xl); font-size: var(--fs-lead); }

.btn--ghost { background: transparent; border-color: var(--gray-line); color: var(--ink); }
.btn--outline { background: transparent; border-color: rgba(255, 255, 255, 0.75); color: var(--white); }

@media (hover: hover) {
  .btn:hover { background: var(--orange-dark); transform: translateY(-2px); }
  .btn--ghost:hover { background: rgba(255, 255, 255, 0.14); border-color: currentColor; }
  .btn--outline:hover { background: rgba(255, 255, 255, 0.16); border-color: var(--white); }
}
.btn:active { transform: translateY(0) scale(0.98); }

/* ══ Hero ═════════════════════════════════════════════════════════ */

.hero {
  position: relative;
  /* `svh` evita el salto cuando la barra del navegador móvil se esconde;
     `vh` deja la sección más alta que la pantalla y corta el CTA. */
  min-height: 100svh;
  display: grid;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}

.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* Degradado en vez de un velo plano: oscurece donde va el texto y deja
   respirar el resto de la foto. Sin esto el contraste no llega a AA. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to right, rgba(15, 12, 10, 0.86) 0%, rgba(15, 12, 10, 0.55) 46%, rgba(15, 12, 10, 0.12) 78%),
    linear-gradient(to top, rgba(15, 12, 10, 0.62) 0%, transparent 42%);
}

.hero__body {
  max-width: var(--container);
  width: 100%;
  margin: 0 auto;
  padding: calc(var(--header-h) + var(--sp-huge)) var(--gutter) var(--sp-huge);
  color: var(--white);
}

.hero__eyebrow {
  font-size: var(--fs-caption);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-light);
  margin-bottom: var(--sp-lg);
}

.hero__title {
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: -0.03em;
  text-wrap: balance;
  margin-bottom: var(--sp-xl);
  /* La sombra salva el contraste si la foto cambia a una más clara. */
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

.hero__lead {
  max-width: var(--measure);
  font-size: var(--fs-lead);
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: var(--sp-3xl);
  text-wrap: pretty;
}

.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-md); }

.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: var(--sp-2xl);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: var(--white);
  /* El -50% del centrado vive en la animación para no pelearse con ella. */
  animation: flotar 2.6s var(--ease-enter) infinite;
}

@keyframes flotar {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 7px); }
}

@media (max-width: 560px) {
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__scroll { display: none; }
}

/* ── Entrada del hero ─────────────────────────────────────────────
   El único momento coreografiado de la página; acá se gasta el
   presupuesto de espectáculo. Se dispara al cargar, no por scroll: ya
   está en pantalla. */

.js-anim .hero__media img {
  opacity: 0;
  transform: scale(1.045);
  transition:
    opacity var(--dur-emphasis) var(--ease-enter),
    transform 1200ms var(--ease-enter);
}
.js-anim .hero.is-in .hero__media img { opacity: 1; transform: scale(1); }

.js-anim [data-hero] {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity var(--dur-slow) var(--ease-enter),
    transform var(--dur-slow) var(--ease-enter);
  transition-delay: calc(120ms + (var(--i, 0) * var(--stagger)));
}
.js-anim .hero.is-in [data-hero] { opacity: 1; transform: none; }

/* ══ Beneficios ═══════════════════════════════════════════════════ */

.beneficios {
  background: var(--gray-bg);
  border-block: 1px solid var(--gray-line);
}

.beneficios__lista {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--sp-3xl) var(--gutter);
  display: grid;
  gap: var(--sp-xl);
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
}

.beneficio { display: flex; gap: var(--sp-md); align-items: flex-start; }
.beneficio svg { width: 26px; height: 26px; flex-shrink: 0; color: var(--orange); }
.beneficio b { display: block; font-size: var(--fs-sm); font-weight: 800; }
.beneficio span {
  display: block;
  font-size: var(--fs-caption);
  color: var(--ink-soft);
  line-height: 1.45;
}

/* ══ Movimiento reducido ══════════════════════════════════════════
   WCAG 2.3.3. Para alguien con trastorno vestibular un zoom o un
   desplazamiento al hacer scroll provoca náusea real, no incomodidad
   estética. El contenido queda visible y completo. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
  .js-anim .hero__media img,
  .js-anim [data-hero] { opacity: 1; transform: none; }
  .hero__scroll { animation: none; transform: translateX(-50%); }
}

/* ══ Secciones ════════════════════════════════════════════════════ */

.sec {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--sp-section) var(--gutter) 0;
}

.sec--destacada {
  max-width: none;
  margin-block: var(--sp-section) 0;
  padding-block: var(--sp-section);
  background: var(--orange-soft);
}
.sec--destacada > * { max-width: var(--container); margin-inline: auto; }

.sec__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-xl);
  margin-bottom: var(--sp-3xl);
}

.sec__titulo {
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.sec__bajada {
  margin-top: var(--sp-sm);
  max-width: 56ch;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* Un CTA por sección, con verbo concreto: "Ver el catálogo" convierte más
   que "Ver más" porque dice a dónde lleva. */
.sec__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-sm);
  flex-shrink: 0;
  font-weight: 800;
  font-size: var(--fs-sm);
  color: var(--orange-dark);
  padding: var(--sp-sm) 0;
}
.sec__cta svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--dur-fast) var(--ease-enter);
}
@media (hover: hover) { .sec__cta:hover svg { transform: translateX(4px); } }

@media (max-width: 640px) {
  .sec__head { flex-direction: column; align-items: flex-start; gap: var(--sp-md); }
}

/* ══ Categorías ═══════════════════════════════════════════════════ */

.cats {
  display: grid;
  gap: var(--sp-xl);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.cat { display: grid; gap: var(--sp-md); justify-items: center; text-align: center; }

.cat__media {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--r-xl);
  background: var(--gray-card);
  overflow: hidden;
}

/* `scale` y no `width`: el compositor lo resuelve sin rehacer el layout de
   la grilla completa en cada cuadro. */
.cat__media img {
  width: 78%; height: 78%;
  object-fit: contain;
  transition: transform var(--dur-normal) var(--ease-enter);
}
@media (hover: hover) { .cat:hover .cat__media img { transform: scale(1.07); } }

.cat__nombre { font-weight: 800; font-size: var(--fs-sm); }

/* ══ Carrusel de productos ════════════════════════════════════════ */

/* `scroll-snap` nativo: cero JavaScript, y en móvil respeta la inercia del
   sistema — que ninguna librería imita bien. */
.carrusel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(200px, 232px);
  gap: var(--sp-xl);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  /* Espacio para la sombra al elevar la tarjeta, y para el foco al tabular. */
  padding: 6px 6px var(--sp-xl);
  margin-inline: -6px;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}
.carrusel > * { scroll-snap-align: start; }

/* ══ Tarjeta de producto ══════════════════════════════════════════ */

.pcard {
  display: grid;
  align-content: start;
  gap: 2px;
  padding: var(--sp-md);
  background: var(--white);
  border: 1px solid var(--gray-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
  transition:
    transform var(--dur-fast) var(--ease-enter),
    box-shadow var(--dur-fast) var(--ease-enter);
}
@media (hover: hover) {
  .pcard:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
}

.pcard__media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  margin-bottom: var(--sp-md);
  border-radius: var(--r-md);
  background: var(--gray-card);
  overflow: hidden;
}
.pcard__media img { width: 100%; height: 100%; object-fit: contain; }
.pcard__sinfoto { font-size: 2.5rem; opacity: 0.35; }

.pcard__off,
.pcard__agotado {
  position: absolute;
  top: var(--sp-sm);
  left: var(--sp-sm);
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: var(--orange);
  color: var(--white);
  font-size: var(--fs-caption);
  font-weight: 800;
}
.pcard__agotado { top: auto; bottom: var(--sp-sm); background: var(--ink-faint); }

.pcard__marca {
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.pcard__nombre {
  font-weight: 700;
  line-height: 1.3;
  /* Dos líneas fijas: sin esto los precios de la fila quedan desalineados. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}

.pcard__precio {
  margin-top: var(--sp-xs);
  font-size: 1.125rem;
  font-weight: 800;
}

/* Precio mayorista: quien viene por un saco lo ignora, quien tiene tienda
   ve la oportunidad sin preguntar. */
.pcard__mayorista {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: var(--sp-sm);
  padding-top: var(--sp-sm);
  border-top: 1px solid var(--gray-line);
  font-size: var(--fs-caption);
  color: var(--ink-soft);
}
.pcard__mayorista b { color: var(--ink); }
.pcard__mayorista svg {
  width: 13px; height: 13px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ══ Marcas ═══════════════════════════════════════════════════════ */

.marcas {
  display: grid;
  gap: var(--sp-xl);
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  align-items: center;
}
.marca { display: grid; place-items: center; padding: var(--sp-md); }
.marca img {
  max-width: 100%; height: 52px;
  object-fit: contain;
  /* Grisáceos al reposo y a color al pasar: el logo destaca sin competir
     con los productos. Se anima `opacity` de dos capas y no `filter`,
     que es caro de animar. */
  opacity: 0.55;
  transition: opacity var(--dur-normal) var(--ease-enter);
}
@media (hover: hover) { .marca:hover img { opacity: 1; } }

/* ══ Opiniones ════════════════════════════════════════════════════ */

.ops {
  display: grid;
  gap: var(--sp-xl);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.op {
  margin: 0;
  padding: var(--sp-xl);
  background: var(--gray-card);
  border: 1px solid var(--gray-line);
  border-radius: var(--r-lg);
}
.op__estrellas { color: var(--star); letter-spacing: 2px; }
.op blockquote { margin: var(--sp-md) 0 var(--sp-lg); font-size: 1.0625rem; }
.op figcaption { font-size: var(--fs-sm); font-weight: 800; color: var(--ink-soft); }

/* ══ Newsletter ═══════════════════════════════════════════════════ */

.news { background: var(--orange-soft); }
.news__inner {
  max-width: 620px;
  margin: 0 auto;
  padding: var(--sp-section) var(--gutter);
  text-align: center;
}
.news__texto { margin-top: var(--sp-md); color: var(--ink-soft); text-wrap: pretty; }

.news__form {
  display: flex;
  gap: var(--sp-md);
  margin-top: var(--sp-2xl);
}
@media (max-width: 520px) { .news__form { flex-direction: column; } }

.news__input {
  flex: 1;
  min-height: 48px;
  padding: 0 var(--sp-xl);
  border: 2px solid var(--gray-line);
  border-radius: var(--r-pill);
  background: var(--white);
  font: inherit;
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease-enter);
}
.news__input:focus { outline: none; border-color: var(--orange); }
.news__input[aria-invalid='true'] { border-color: var(--error); }

.news__estado { min-height: 1.5em; margin-top: var(--sp-md); font-size: var(--fs-sm); font-weight: 700; }
.news__estado[data-tipo='ok'] { color: var(--success); }
.news__estado[data-tipo='error'] { color: var(--error); }

/* ══ Footer ═══════════════════════════════════════════════════════ */
/* Sin animación: quien llegó acá busca algo concreto, y hacerlo esperar
   una entrada es hostil. */

.pie { background: var(--ink); color: var(--white); }

.pie__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--sp-section) var(--gutter) var(--sp-huge);
  display: grid;
  gap: var(--sp-huge);
  grid-template-columns: 1.6fr repeat(3, 1fr);
}
@media (max-width: 900px) { .pie__inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pie__inner { grid-template-columns: 1fr; } }

.pie__marca { display: flex; gap: var(--sp-md); align-items: flex-start; }
.pie__marca b { font-size: 1.0625rem; }
.pie__marca p {
  margin-top: var(--sp-sm);
  max-width: 34ch;
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.62);
}

.pie__nav { display: grid; gap: var(--sp-sm); align-content: start; }
.pie__nav h3 {
  margin: 0 0 var(--sp-xs);
  font-size: var(--fs-caption);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.pie__nav a {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.82);
  transition: color var(--dur-fast) var(--ease-enter);
}
@media (hover: hover) { .pie__nav a:hover { color: var(--orange); } }

.pie__wsp { display: inline-flex; align-items: center; gap: 6px; }
.pie__wsp svg { width: 16px; height: 16px; color: #25d366; }
.pie__zona { margin-top: var(--sp-sm); font-size: var(--fs-caption); color: rgba(255,255,255,0.5); }

.pie__legal {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.pie__legal > * { display: inline; }
.pie__legal {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--sp-xl) var(--gutter);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-lg);
  justify-content: space-between;
  font-size: var(--fs-caption);
  color: rgba(255, 255, 255, 0.55);
}
.pie__legal nav { display: flex; gap: var(--sp-lg); }
.pie__legal a { color: inherit; }
@media (hover: hover) { .pie__legal a:hover { color: var(--white); } }

/* ══ Cobertura de despacho ════════════════════════════════════════ */
/* Los precios los inyecta build_home.py desde `app_settings`: la misma
   fuente que cobra el checkout. Escribirlos a mano acá sería prometer un
   precio y cobrar otro, y el cliente lo descubre al pagar. */

.envio { margin-top: var(--sp-section); background: var(--ink); color: var(--white); }

.envio__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--sp-section) var(--gutter);
}

.envio__head { max-width: 62ch; margin-bottom: var(--sp-huge); }
.envio__bajada {
  margin-top: var(--sp-md);
  font-size: var(--fs-lead);
  color: rgba(255, 255, 255, 0.78);
  text-wrap: pretty;
}

.envio__zonas {
  display: grid;
  gap: var(--sp-xl);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: stretch;
}

.zona {
  display: flex;
  flex-direction: column;
  padding: var(--sp-3xl);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-xl);
  background: rgba(255, 255, 255, 0.045);
}

/* La zona propia lleva el acento: es la oferta que diferencia a una tienda
   de barrio de un marketplace. */
.zona--destacada {
  border-color: rgba(255, 122, 26, 0.55);
  background: rgba(255, 122, 26, 0.09);
}

.zona__etiqueta {
  font-size: var(--fs-caption);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.zona--destacada .zona__etiqueta { color: var(--orange); }

.zona__precio {
  margin-top: var(--sp-md);
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  /* Los precios de las dos zonas deben quedar a la misma altura aunque
     uno diga "Gratis" y el otro una cifra. */
  font-variant-numeric: tabular-nums;
}
.zona__precio span {
  display: block;
  margin-top: 6px;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.62);
}

.zona__bajo {
  margin-top: var(--sp-lg);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.72);
}

.zona__comunas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
  margin-top: var(--sp-lg);
}
.zona__comunas li {
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.1);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.zona__cobertura {
  margin-top: var(--sp-lg);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.72);
  text-wrap: pretty;
}
.zona__cobertura b { color: var(--white); }

/* `margin-top: auto` alinea el plazo al pie de ambas tarjetas aunque el
   contenido de arriba mida distinto. */
.zona__plazo {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  margin-top: auto;
  padding-top: var(--sp-xl);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.zona__plazo svg {
  width: 17px; height: 17px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
  color: var(--orange);
}

.envio__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-xl);
  margin-top: var(--sp-huge);
  padding-top: var(--sp-xl);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.envio__nota {
  max-width: 46ch;
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.6);
  text-wrap: pretty;
}
.envio__cta { display: flex; flex-wrap: wrap; gap: var(--sp-md); }
.envio .btn--ghost { color: var(--white); border-color: rgba(255, 255, 255, 0.4); }

@media (max-width: 640px) {
  .zona { padding: var(--sp-xl); }
  .envio__pie { flex-direction: column; align-items: flex-start; }
}