/* La Isla Outlet — Recorrido. Layout, componentes, animación y estados
   que no vienen de los tokens (esos se importan tal cual desde styles.css). */

/* El lienzo no es blanco puro ni negro puro: los dos están corridos hacia el
   verde del logo, para que la página y la marca se lean como un mismo lugar. */
:root {
  --surface-page: #FAFAF7;
  --surface-subtle: #F2F3EE;
  --surface-inverse: #0A0C09;
  --surface-marquee: #0A0C09;
  --shell-max: 1360px;
  --gutter: clamp(20px, 4vw, 48px);
  --dur-reveal: 620ms;
}

html, body { margin: 0; padding: 0; background: var(--surface-page); overflow-x: hidden; overflow-x: clip; width: 100%; min-height: 100%; }
#app { width: 100%; min-height: 100vh; overflow-x: hidden; overflow-x: clip; display: flex; flex-direction: column; background: transparent; color: var(--text-strong); font-family: var(--font-body); }

.shell { max-width: var(--shell-max); width: 100%; margin: 0 auto; box-sizing: border-box; padding-left: var(--gutter); padding-right: var(--gutter); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--lime-500);
  color: var(--ink-900); padding: 12px 18px; font-weight: 700; font-size: var(--size-small);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: 12px; color: var(--ink-900); }

:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--lime-500); outline-offset: 3px; border-radius: 2px;
}
:where(a, button, input, [tabindex]):focus:not(:focus-visible) { outline: none; }

a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--text-link-hover); }
button { font: inherit; color: inherit; background: none; }

/* ── Keyframes propios del prototipo (más allá de motion.css) ── */
@keyframes isla-pop { 0% { transform: scale(1); } 45% { transform: scale(1.28); } 100% { transform: scale(1); } }
@keyframes isla-chip {
  0% { opacity: 0; transform: translateY(14px) scale(.94); }
  20% { opacity: 1; transform: translateY(0) scale(1); }
  72% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-18px) scale(.86); }
}
@keyframes isla-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes isla-word { from { opacity: 0; transform: translateY(0.42em) rotate(1.5deg); } to { opacity: 1; transform: none; } }

/* ── Botón del design system (Button.jsx) ── */
.ds-btn {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2); font-family: var(--font-body); font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; white-space: nowrap;
  border-radius: var(--radius-none); cursor: pointer; padding: 0; margin: 0;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out), transform var(--dur-instant) var(--ease-out);
}
.ds-btn:active { transform: scale(var(--press-scale)); }
.ds-btn--full { width: 100%; }
.ds-btn--sm { height: var(--control-height-sm); padding: 0 var(--space-4); font-size: var(--size-micro); }
.ds-btn--md { height: var(--control-height-md); padding: 0 var(--space-6); font-size: var(--size-small); }
.ds-btn--lg { height: var(--control-height-lg); padding: 0 var(--space-10); font-size: var(--size-body); }
.ds-btn--solid { background: var(--action-solid-bg); color: var(--action-solid-fg); border: 1px solid var(--action-solid-bg); }
.ds-btn--solid:hover { background: var(--action-solid-hover); border-color: var(--action-solid-hover); }
.ds-btn--accent { background: var(--action-accent-bg); color: var(--action-accent-fg); border: 1px solid var(--action-accent-bg); }
.ds-btn--accent:hover { background: var(--action-accent-hover); border-color: var(--action-accent-hover); }
.ds-btn--outline { background: transparent; color: var(--text-strong); border: 1px solid var(--border-strong); }
.ds-btn--outline:hover { background: var(--ink-900); color: var(--paper-0); }

/* ── Chrome persistente ── */
.announcement-bar {
  height: 38px; flex: none; background: var(--ink-900); color: var(--text-inverse);
  display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 0 16px;
}
.announcement-track { display: flex; align-items: center; flex: 0 0 auto; }
/* En pantalla ancha el aviso cabe entero: se muestra una sola copia, quieta. */
.announcement-track .announcement-text:last-child { display: none; }
.announcement-track .announcement-text:first-child .ann-sep:last-child { display: none; }
.announcement-text {
  font-family: var(--font-body); font-weight: 700; font-size: var(--size-micro);
  letter-spacing: var(--tracking-wider); text-transform: uppercase; white-space: nowrap;
}
.ann-accent { color: var(--lime-400); }

/* En el celular el aviso no cabe entero, así que se desliza. El texto va
   duplicado para que al reiniciarse el ciclo no aparezca un hueco. */
@media (max-width: 860px) {
  .announcement-bar { justify-content: flex-start; padding: 0; }
  .announcement-track { width: max-content; animation: isla-marquee 18s linear infinite; }
  .announcement-track .announcement-text:last-child { display: inline; }
  .announcement-track .announcement-text:first-child .ann-sep:last-child { display: inline; }
}

/* La cabecera NO queda pegada arriba al bajar: se va con la página. */
.site-header {
  position: static; z-index: 40; min-height: 96px; flex: none; background: var(--paper-0);
  box-shadow: inset 0 -1px 0 var(--border-hairline); display: flex; align-items: center;
  justify-content: space-between; gap: clamp(12px, 2vw, 28px); flex-wrap: wrap;
  padding: 0 clamp(20px, 4vw, 48px);
}

/* Accesos a cada zona, en la misma fila del logo y el carrito. */
.zonenav { display: flex; align-items: center; gap: clamp(4px, 1.6vw, 20px); }
.zonenav-link {
  cursor: pointer; border: none; padding: 10px 12px; white-space: nowrap; background: transparent;
  font-family: var(--font-body); font-weight: 700; font-size: var(--size-small);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-900);
  box-shadow: inset 0 -1px 0 transparent;
  transition: color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.zonenav-link:hover { color: var(--lime-600); box-shadow: inset 0 -1px 0 var(--lime-600); }

/* En pantallas angostas el logo y el carrito ocupan la fila entera, así que los
   accesos bajan a una segunda línea DENTRO de la misma zona blanca. */
@media (max-width: 900px) {
  .site-header { padding-top: 10px; padding-bottom: 6px; row-gap: 2px; }
  .zonenav { order: 3; width: 100%; justify-content: space-between; gap: 0; box-shadow: inset 0 1px 0 var(--border-hairline); padding-top: 4px; }
  .zonenav-link { flex: 1 1 auto; text-align: center; font-size: var(--size-micro); letter-spacing: var(--tracking-wider); padding: 12px 6px; }
}
.logo-btn { cursor: pointer; display: flex; align-items: center; border: none; padding: 0; }
.bag-btn {
  cursor: pointer; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px;
  box-shadow: inset 0 0 0 1px var(--border-strong); border: none;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.bag-btn:hover { background: var(--ink-900); color: var(--text-inverse); }
.bag-btn-label { font-family: var(--font-body); font-weight: 700; font-size: var(--size-micro); letter-spacing: var(--tracking-wider); text-transform: uppercase; }
.bag-chip {
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--radius-pill, 999px);
  background: var(--lime-500); color: var(--ink-900); display: inline-flex; align-items: center;
  justify-content: center; font-family: var(--font-mono); font-weight: 600; font-size: var(--size-small);
}
.bag-chip--pop { animation: isla-pop var(--dur-base) var(--ease-out); }

.progress-track { position: sticky; top: 86px; z-index: 39; height: 3px; flex: none; background: var(--ink-100); }
.progress-fill { height: 3px; background: var(--lime-500); transform-origin: left center; transition: width var(--dur-slow) var(--ease-out); }

.fly-chip-slot { position: fixed; top: 76px; right: clamp(20px, 4vw, 48px); z-index: 60; pointer-events: none; display: block; text-align: right; }
.fly-chip {
  display: inline-block; animation: isla-chip 1100ms cubic-bezier(.16,1,.3,1) forwards;
  background: var(--lime-500); color: var(--ink-900); font-family: var(--font-body); font-weight: 700;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; padding: 7px 10px; white-space: nowrap;
}

footer.site-footer { background: var(--surface-inverse); color: var(--text-inverse); margin-top: auto; }
.footer-cols {
  max-width: 1360px; margin: 0 auto; box-sizing: border-box;
  padding: clamp(40px,6vw,80px) clamp(20px, 4vw, 48px) clamp(24px,3vw,40px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: clamp(28px, 4vw, 56px);
}
.footer-heading { font-family: var(--font-body); font-weight: 700; font-size: var(--size-micro); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-inverse-muted); }
.footer-link { cursor: pointer; text-align: left; border: none; padding: 0; font-size: var(--size-body); color: var(--text-inverse); transition: color var(--dur-fast) var(--ease-out); }
.footer-link:hover { color: var(--lime-400); }
.footer-help-item { font-size: var(--size-body); color: var(--text-inverse-muted); }
.footer-wa-link { font-family: var(--font-mono); font-weight: 600; font-size: var(--size-body); color: var(--lime-400); }
.footer-legal { border-top: 1px solid var(--border-inverse); }
.footer-legal-inner {
  max-width: 1360px; margin: 0 auto; box-sizing: border-box; padding: 18px clamp(20px, 4vw, 48px);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.footer-legal-text { font-family: var(--font-mono); font-size: var(--size-small); color: var(--text-inverse-muted); }

/* ── Hero (intro) ── */
.hero-section {
  position: relative; overflow: hidden; flex: 1; min-height: calc(100vh - 96px - 38px);
  background: var(--surface-inverse); color: var(--text-inverse); display: grid; grid-template-rows: 1fr auto;
  padding: clamp(28px, 5vw, 72px) clamp(20px, 4vw, 48px) clamp(24px, 3vw, 48px);
  animation: isla-fade-in var(--dur-base) var(--ease-out) both;
}
.hero-word { display: inline-block; animation: isla-word 620ms var(--ease-out) both; }
.hero-outline-btn {
  cursor: pointer; height: 56px; display: inline-flex; align-items: center; padding: 0 24px; border: none;
  box-shadow: inset 0 0 0 1px var(--border-inverse); color: var(--text-inverse); font-weight: 700;
  font-size: var(--size-small); letter-spacing: var(--tracking-wide); text-transform: uppercase;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.hero-outline-btn:hover { background: var(--paper-0); color: var(--ink-900); }
.hero-steps { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0; margin-top: clamp(28px, 4vw, 56px); border-top: 1px solid var(--border-inverse); }
.hero-step { padding: 20px 24px 0 0; display: flex; gap: 14px; animation: isla-fade-up var(--dur-base) var(--ease-out) both; }
.hero-step + .hero-step { box-shadow: inset 1px 0 0 var(--border-inverse); }

/* ── Zonas (intro + zone) ── */
.zone-link {
  cursor: pointer; display: inline-flex; align-items: center; gap: 8px; border: none; padding: 0 0 4px;
  font-family: var(--font-body); font-weight: 700; font-size: var(--size-micro); letter-spacing: var(--tracking-wider);
  text-transform: uppercase; color: var(--text-strong); box-shadow: inset 0 -1px 0 var(--border-strong);
  transition: color var(--dur-fast) var(--ease-out);
}
.zone-link:hover { color: var(--lime-600); }
/* La foto de zona, entera. El fondo blanco continúa el de las propias fotos,
   así que el producto se lee como flotando en la página en vez de metido en
   un recuadro recortado. */
/* La foto de zona ocupa todo el ancho de la pantalla y se ve entera. El alto lo
   manda la propia foto: en cuanto se le fija un alto, algo se recorta. */
.zone-photo-band {
  position: relative; width: 100%; background: #fff;
  margin-bottom: clamp(24px, 4vw, 48px); display: block;
  /* Piso de seguridad por si una foto se agrega sin declarar su tamaño: sin
     alto reservado la banda mide cero, nunca entra en pantalla y la carga
     diferida no se dispara jamás, así que la foto no llega nunca. */
  min-height: 180px;
}
.zone-photo-band img { display: block; width: 100%; height: auto; }

/* Dentro de la zona la banda es más baja. Al fijarle un alto y mantener el
   ancho completo, la foto se recorta un poco arriba y abajo: es el precio de
   pedir las dos cosas a la vez. Se recorta desde el centro. */
.zone-photo-band--compact { min-height: 0; margin-bottom: 0; }
/* El alto sigue al ANCHO de la pantalla, no a su altura. Con un alto fijo, en
   un monitor de 1440 la banda mostraba una franja del 28% de la foto y se veía
   como un recorte al azar; en el celular, en cambio, calzaba casi entera. Con
   una proporción, el recorte es el mismo en todas las pantallas. */
.zone-photo-band--compact img {
  height: auto; aspect-ratio: 3 / 1; max-height: 78vh;
  object-fit: cover; object-position: center;
}
@media (max-width: 760px) {
  .zone-photo-band--compact img { aspect-ratio: 5 / 4; }
}
/* El velo se calibró contra el píxel más claro que hay debajo del título, no
   contra el promedio. Con el velo anterior el título medía 2.82 sobre un mínimo
   de 3; con este pasa con holgura y la foto sigue viva en las esquinas. */

/* ── Rejilla / card de producto ── */
.product-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 0; margin: -1px; }
@media (min-width: 520px) { .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .product-grid { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); } }

.product-card {
  box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; width: 100%; text-align: left;
  border: none; background: var(--surface-card); box-shadow: inset 0 0 0 1px var(--border-hairline);
  outline-offset: -2px; transition: outline-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
  animation: isla-fade-up var(--dur-base) var(--ease-out) both;
}
.product-card:hover { background: var(--paper-50); }
.product-media { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 4; overflow: hidden; background: var(--paper-50); }
.product-badge-slot { position: absolute; top: 12px; left: 12px; z-index: 2; }
.product-check {
  position: absolute; top: 10px; right: 10px; z-index: 2; width: 30px; height: 30px; display: flex; align-items: center;
  justify-content: center; font-weight: 700; font-size: 15px;
}
.product-body { display: flex; flex-direction: column; gap: 8px; padding: 16px; }
.product-zone-label { font-family: var(--font-body); font-weight: 700; font-size: var(--size-micro); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-muted); }
.product-name { font-size: var(--size-small); font-weight: 500; line-height: 1.35; text-transform: uppercase; letter-spacing: var(--tracking-tight); }

/* ── Visítanos ── */
.visit-card {
  background: var(--paper-0); box-shadow: inset 0 0 0 1px var(--border-hairline);
  padding: clamp(20px, 3vw, 32px); display: flex; flex-direction: column; gap: 0;
}
.visit-row { display: flex; align-items: flex-start; gap: 14px; padding: 16px 0; box-shadow: inset 0 -1px 0 var(--border-hairline); }
.visit-row:last-of-type { box-shadow: none; }
.visit-row-label { font-family: var(--font-body); font-weight: 700; font-size: var(--size-micro); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-muted); }
.visit-map { box-shadow: inset 0 0 0 1px var(--border-hairline); min-height: 280px; overflow: hidden; }

/* ── Mapa ── */
.map-row {
  box-sizing: border-box; cursor: pointer; width: 100%; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center; gap: clamp(14px, 3vw, 32px); padding: clamp(18px, 2.4vw, 28px) 8px; border: none;
  border-bottom: 1px solid var(--border-hairline); transition: background var(--dur-fast) var(--ease-out);
  animation: isla-fade-up var(--dur-base) var(--ease-out) both; text-align: left;
}
.map-row:hover { background: var(--paper-50); }
.map-num { font-family: var(--font-mono); font-weight: 600; font-size: var(--size-body); }
.map-title { font-family: var(--font-display); font-weight: 900; font-size: clamp(20px, 3.4vw, 34px); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); text-transform: uppercase; }
.map-status { font-family: var(--font-body); font-weight: 700; font-size: var(--size-micro); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-faint); }

/* ── Zona individual: ticks de navegación ── */
.tick { position: relative; cursor: pointer; border: none; width: clamp(28px, 5vw, 54px); height: 4px; transition: background var(--dur-fast) var(--ease-out); }
.tick:hover { background: var(--lime-500) !important; }
/* Zona de toque más grande (invisible) para que sea fácil de tocar en el celular, sin cambiar el grosor visual de 4px. */
.tick::before { content: ''; position: absolute; left: 0; right: 0; top: -18px; bottom: -18px; }

/* ── Resumen ── */
.summary-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 780px) {
  .summary-grid { grid-template-columns: minmax(0, 1fr); }
  .summary-aside { position: static !important; }
}
.cart-line { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: clamp(14px, 2vw, 24px); align-items: center; padding: 16px 0; border-bottom: 1px solid var(--border-hairline); animation: isla-fade-up var(--dur-fast) var(--ease-out) both; }
.qty-btn { cursor: pointer; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: none; box-shadow: inset 0 0 0 1px var(--border-hairline); font-family: var(--font-mono); font-size: var(--size-body); transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.qty-btn:hover { background: var(--ink-900); color: var(--text-inverse); }
.remove-btn { cursor: pointer; border: none; font-family: var(--font-body); font-weight: 700; font-size: var(--size-micro); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-faint); transition: color var(--dur-fast) var(--ease-out); }
.remove-btn:hover { color: var(--status-sale); }

.summary-aside { position: sticky; top: 92px; background: var(--surface-inverse); color: var(--text-inverse); padding: clamp(20px, 3vw, 32px); display: flex; flex-direction: column; gap: 14px; }
.envio-aviso {
  display: block; margin-top: 4px; padding: 10px 12px;
  background: rgba(125,197,34,.14); box-shadow: inset 0 0 0 1px rgba(125,197,34,.42);
  font-size: var(--size-small); line-height: 1.4; color: var(--lime-300);
}
.calc-eyebrow { display: block; font-family: var(--font-body); font-weight: 700; font-size: var(--size-micro); letter-spacing: var(--tracking-wider); text-transform: uppercase; }
.calc-option-ship { box-sizing: border-box; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: none; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.calc-option-pay { box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 6px; text-align: center; border: none; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.calc-option-cuota { box-sizing: border-box; cursor: pointer; text-align: center; padding: 10px 6px; font-size: 11px; font-weight: 600; border: none; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.seguir-link { cursor: pointer; border: none; text-align: center; padding-top: 6px; font-family: var(--font-body); font-weight: 700; font-size: var(--size-micro); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-inverse-muted); transition: color var(--dur-fast) var(--ease-out); }
.seguir-link:hover { color: var(--lime-400); }

/* ── Checkout ── */
.wa-cta { display: flex; align-items: center; justify-content: center; gap: 12px; height: 60px; background: var(--action-accent-bg); color: var(--action-accent-fg); font-family: var(--font-body); font-weight: 700; font-size: var(--size-small); letter-spacing: var(--tracking-wide); text-transform: uppercase; transition: background var(--dur-fast) var(--ease-out); }
.wa-cta:hover { background: var(--action-accent-hover); color: var(--action-accent-fg); }
.volver-link { cursor: pointer; border: none; text-align: center; font-family: var(--font-body); font-weight: 700; font-size: var(--size-micro); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-faint); transition: color var(--dur-fast) var(--ease-out); }
.volver-link:hover { color: var(--text-strong); }

/* ── Done ── */
.done-check { width: 76px; height: 76px; border-radius: 999px; background: var(--lime-500); color: var(--ink-900); display: flex; align-items: center; justify-content: center; font-size: 34px; font-weight: 700; animation: isla-pop var(--dur-slow) var(--ease-out); }

/* ══════════════════════════════════════════════════════════════════════════
   EL AMBIENTE
   Las secciones oscuras comparten un mismo aire: un resplandor verde muy lento
   y un grano finísimo. No es decoración suelta, es que la página sea un lugar.
   ══════════════════════════════════════════════════════════════════════════ */

.night { position: relative; isolation: isolate; }
.night > * { position: relative; z-index: 1; }
.night::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 18% 12%, rgba(125,197,34,.13), transparent 62%),
    radial-gradient(ellipse 60% 50% at 88% 82%, rgba(20,160,220,.09), transparent 60%);
}
.night.live::before { animation: isla-aura 78s var(--ease-in-out) -22s infinite; }
.night::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .38;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}
@keyframes isla-aura {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
  50%      { transform: translate3d(2.2%, -1.6%, 0) scale(1.07); opacity: .82; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ENTRADAS
   Nada aparece de golpe. Cada cosa entra cuando le toca y, una vez adentro,
   suelta su retraso para que el mouse le responda al instante.
   ══════════════════════════════════════════════════════════════════════════ */

.reveal {
  opacity: 0; transform: translateY(15px);
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
}
.reveal.in { opacity: 1; transform: none; }
.reveal[data-stagger="1"] { transition-delay: 70ms; }
.reveal[data-stagger="2"] { transition-delay: 140ms; }
.reveal[data-stagger="3"] { transition-delay: 210ms; }
.reveal[data-stagger="4"] { transition-delay: 280ms; }
.reveal[data-stagger="5"] { transition-delay: 350ms; }
/* La limpieza tiene que ganarle en peso a las reglas de arriba o no se aplica
   nunca y los hover quedan lentos para siempre. */
.reveal.settled,
.reveal.settled[data-stagger="1"], .reveal.settled[data-stagger="2"],
.reveal.settled[data-stagger="3"], .reveal.settled[data-stagger="4"],
.reveal.settled[data-stagger="5"] { transition-delay: 0s; }

/* ══════════════════════════════════════════════════════════════════════════
   LA FIRMA: LA LÍNEA DE COSTA
   Una curva de nivel de isla que se dibuja sola. Separa las secciones y es lo
   único que este sitio tiene y ningún otro.
   ══════════════════════════════════════════════════════════════════════════ */

.coast {
  position: relative; width: 100%; height: 56px; margin: clamp(24px, 4vw, 48px) 0 0;
  display: flex; align-items: center; pointer-events: none;
}
.coast svg { width: 100%; height: 56px; display: block; }
.coast-path {
  stroke: var(--lime-500); stroke-width: 1.6; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1900ms var(--ease-out);
}
.coast.in .coast-path { stroke-dashoffset: 0; }
.coast-path--echo { stroke: var(--ink-300); stroke-width: 1; transition-delay: 200ms; }
.coast--light .coast-path { stroke: var(--lime-400); }
.coast--light .coast-path--echo { stroke: rgba(255,255,255,.22); }
.coast-label {
  position: absolute; left: var(--gutter); top: 50%; transform: translateY(-140%);
  font-family: var(--font-mono); font-weight: 600; font-size: var(--size-small);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted);
}

/* ══════════════════════════════════════════════════════════════════════════
   PIEZAS COMPARTIDAS
   ══════════════════════════════════════════════════════════════════════════ */

.eyebrow {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-body); font-weight: 700; font-size: var(--size-micro);
  letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-muted);
}
/* Sobre fondo oscuro el gris apagado no alcanza el mínimo de lectura (medía
   3.68 y necesita 4.5). Se aclara. */
.eyebrow--light, .night .eyebrow { color: rgba(255,255,255,.78); }
.eyebrow-dot {
  width: 6px; height: 6px; border-radius: 999px; background: var(--lime-500);
  display: inline-block; flex: 0 0 auto;
}
.live .eyebrow-dot, .eyebrow.in .eyebrow-dot { animation: isla-pulse 4.2s var(--ease-in-out) -1.4s infinite; }
@keyframes isla-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(125,197,34,.42); }
  50%      { box-shadow: 0 0 0 7px rgba(125,197,34,0); }
}

.section-title {
  margin: 14px 0 0; font-family: var(--font-display); font-weight: 900;
  font-size: clamp(30px, 4.8vw, 60px); line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight); text-transform: uppercase; text-wrap: balance;
}
.section-title--light { color: var(--text-inverse); }

.ds-btn--outline-light { background: transparent; color: var(--paper-0); border: 1px solid rgba(255,255,255,.42); }
.ds-btn--outline-light:hover { background: var(--paper-0); color: var(--ink-900); border-color: var(--paper-0); }

/* ══════════════════════════════════════════════════════════════════════════
   PORTADA
   ══════════════════════════════════════════════════════════════════════════ */

.hero-section { overflow: clip; }
/* Sin ancho máximo en "ch" acá: un "ch" se mide con la letra que hereda el
   contenedor, no con la letra grande de adentro, y partía el titular en cinco
   líneas. Los anchos de texto se limitan en el párrafo, no en la caja. */
.hero-body { position: relative; z-index: 1; display: grid; align-content: center; gap: clamp(20px, 3vw, 36px); }
.hero-title {
  margin: 0; font-family: var(--font-display); font-variation-settings: 'wdth' 118;
  /* El titular creció de 4 a 6 palabras, así que la letra bajó para que las dos
     líneas quepan sin salirse de la pantalla. */
  font-weight: 900; font-size: clamp(34px, 6.2vw, 92px); line-height: var(--lh-tight);
  letter-spacing: var(--tracking-hero); text-transform: uppercase; overflow: hidden;
  padding-bottom: .06em; margin-bottom: -.06em;   /* aire para las colas de las letras */
}
.hero-tagline {
  margin: 0; font-family: var(--font-body); font-weight: 700;
  font-size: clamp(14px, 1.8vw, 22px); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--lime-400);
  animation: isla-fade-up var(--dur-base) var(--ease-out) 120ms both;
}

/* ══════════════════════════════════════════════════════════════════════════
   LAS ZONAS
   ══════════════════════════════════════════════════════════════════════════ */

.zone-sec { position: relative; padding-top: clamp(24px, 3.5vw, 44px); }
.zone-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
  flex-wrap: wrap; padding-bottom: clamp(18px, 2.4vw, 28px);
}
.zone-head-title { display: flex; align-items: baseline; gap: clamp(12px, 2vw, 24px); min-width: 0; }
.zone-head-actions { display: flex; align-items: center; gap: 14px; }
.zone-num { font-family: var(--font-mono); font-weight: 600; font-size: var(--size-small); color: var(--text-muted); }
.zone-title {
  margin: 0; font-family: var(--font-display); font-weight: 900;
  font-size: clamp(28px, 4.6vw, 56px); line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight); text-transform: uppercase;
}
.zone-sub { margin: 6px 0 0; font-size: var(--size-body); color: var(--text-muted); }
.zone-link svg { transition: transform var(--dur-base) var(--ease-out); }
.zone-link:hover svg { transform: translateX(4px); }

/* Las tres zonas: foto entera a lo ancho y la rejilla debajo. Sin alto fijo,
   porque un alto fijo es justo lo que recortaba las fotos. */

/* ══════════════════════════════════════════════════════════════════════════
   TARJETA DE PRODUCTO
   ══════════════════════════════════════════════════════════════════════════ */

.product-card { outline: 2px solid transparent; outline-offset: -2px; transition: outline-color var(--dur-base) var(--ease-out), background var(--dur-fast) var(--ease-out), opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }
.product-card.is-picked { outline-color: var(--ink-900); }
.product-media { background: var(--surface-subtle); }
/* Las fotos de producto son de catálogo, recortadas sobre blanco. Van completas
   dentro del recuadro, no recortadas, y sobre una baldosa blanca. En la zona
   oscura esa baldosa se lee como una vitrina iluminada. */
.product-media--photo { background: #fff; }
.product-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; display: block;
  padding: 6%; box-sizing: border-box;
  transition: transform 620ms var(--ease-out);
}
.product-card:hover .product-photo { transform: scale(1.045); }

/* Segunda foto de la prenda (la espalda): aparece al pasar el mouse por encima.
   En celular no hay "pasar por encima", así que ahí se ve solo la primera. */
.product-photo--alt { opacity: 0; transition: opacity 420ms var(--ease-out), transform 620ms var(--ease-out); }
.product-card:hover .product-photo--alt { opacity: 1; }
.product-card:focus-visible .product-photo--alt { opacity: 1; }

.product-ask {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-weight: 700; font-size: var(--size-small);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--lime-700);
}
.product-check--ask { font-family: var(--font-mono); font-size: 14px; }

/* En la portada se muestran 8 productos por zona en computador y 4 en celular,
   donde van de a uno por fila y la página se hacía eterna. Se resuelve
   escondiendo los últimos cuatro, no volviendo a dibujar la página, así también
   funciona si giras el teléfono. */
@media (max-width: 760px) {
  .product-grid--preview > *:nth-child(n+5) { display: none; }
}

.zone-more {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding-top: clamp(20px, 3vw, 32px);
}
.zone-more-note { font-family: var(--font-mono); font-size: var(--size-small); color: var(--text-muted); }

/* Sin foto todavía: un recuadro compuesto con la isla, no un rayado de error. */
.product-blank {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(158deg, var(--surface-subtle) 0%, #E9ECE3 100%);
}
.blank-mark { width: 58%; height: auto; stroke: var(--lime-600); stroke-width: 4; fill: none; opacity: .17; }
.product-card:hover .blank-mark { opacity: .26; }
.blank-mark { transition: opacity var(--dur-base) var(--ease-out); }

.product-check {
  background: var(--paper-0); color: var(--text-faint); box-shadow: inset 0 0 0 1px var(--border-hairline);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.product-card.is-picked .product-check { background: var(--lime-500); color: var(--ink-900); box-shadow: inset 0 0 0 1px var(--lime-500); transform: scale(1.06); }

/* Sobre la baldosa blanca de una foto, el botón se queda en su versión clara. */
.product-card .product-media--photo .product-check { background: var(--paper-0); color: var(--text-muted); box-shadow: inset 0 0 0 1px var(--border-hairline); }
.product-card.is-picked .product-media--photo .product-check { background: var(--lime-500); color: var(--ink-900); box-shadow: inset 0 0 0 1px var(--lime-500); }

.bag-cta { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; padding-top: clamp(32px, 5vw, 64px); padding-bottom: clamp(32px, 5vw, 64px); }
.bag-cta-note { font-family: var(--font-mono); font-size: var(--size-small); color: var(--text-muted); }

/* ══════════════════════════════════════════════════════════════════════════
   VISÍTANOS
   ══════════════════════════════════════════════════════════════════════════ */

.visit { background: var(--surface-subtle); box-shadow: inset 0 1px 0 var(--border-hairline); padding: clamp(44px, 6vw, 92px) 0; }
.visit-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(20px, 3vw, 32px); margin-top: clamp(24px, 4vw, 40px); align-items: stretch;
}

.cart-thumb {
  width: 84px; aspect-ratio: 3 / 4; background: var(--surface-subtle); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.cart-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cart-thumb-blank { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; }
.cart-thumb-blank .blank-mark { width: 62%; }

.footer-social { display: flex; gap: 14px; align-items: center; margin-top: 4px; }
.footer-social a { display: inline-flex; color: var(--paper-0); transition: color var(--dur-fast) var(--ease-out); }
.footer-social a:hover { color: var(--lime-400); }

/* ══════════════════════════════════════════════════════════════════════════
   FICHA DEL PRODUCTO
   Se abre al tocar cualquier producto. Muestra las fotos grandes, y es lo que
   permite ver la segunda foto en el celular, donde no hay "pasar por encima".
   ══════════════════════════════════════════════════════════════════════════ */

body.preview-open { overflow: hidden; }

.preview-backdrop {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  padding: clamp(12px, 3vw, 40px); background: rgba(8,10,8,.72);
  animation: isla-fade-in var(--dur-base) var(--ease-out) both;
}
.preview-panel {
  position: relative; background: var(--paper-0); width: min(980px, 100%);
  max-height: 92vh; overflow: auto; display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  animation: isla-fade-up var(--dur-slow) var(--ease-out) both;
}
.preview-close {
  position: absolute; top: 10px; right: 10px; z-index: 3; cursor: pointer; border: none;
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  font-size: 17px; background: var(--paper-0); color: var(--ink-900);
  box-shadow: inset 0 0 0 1px var(--border-hairline);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.preview-close:hover { background: var(--ink-900); color: var(--paper-0); }

.preview-media {
  position: relative; background: #fff; aspect-ratio: 3 / 4;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.preview-photo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  padding: 4%; box-sizing: border-box; opacity: 0;
  transition: opacity 320ms var(--ease-out);
}
.preview-photo.is-on { opacity: 1; }
.preview-blank { display: flex; width: 70%; }
.preview-blank .blank-mark { width: 100%; }

.preview-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; cursor: pointer;
  width: 46px; height: 46px; border: none; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.94); color: var(--ink-900);
  box-shadow: inset 0 0 0 1px var(--border-hairline);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.preview-arrow:hover { background: var(--ink-900); color: var(--paper-0); }
.preview-arrow--prev { left: 10px; }
.preview-arrow--prev svg { transform: rotate(180deg); }
.preview-arrow--next { right: 10px; }
.preview-dots { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 2; }
.preview-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--ink-300); }
.preview-dot.is-on { background: var(--ink-900); }

.preview-body {
  padding: clamp(22px, 3.5vw, 40px); display: flex; flex-direction: column; gap: 12px;
  justify-content: center;
}
.preview-zone {
  font-family: var(--font-body); font-weight: 700; font-size: var(--size-micro);
  letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-muted);
}
.preview-name {
  margin: 0; font-family: var(--font-display); font-weight: 900;
  font-size: clamp(22px, 3vw, 34px); line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight); text-transform: uppercase;
}
.preview-price { font-family: var(--font-mono); font-weight: 600; font-size: var(--size-h3); }
.preview-price--ask { font-family: var(--font-body); font-weight: 700; font-size: var(--size-body); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--lime-700); }
.preview-hint { margin: 0; font-size: var(--size-small); color: var(--text-muted); }
.preview-seguir {
  cursor: pointer; border: none; padding: 6px 0; text-align: center;
  font-family: var(--font-body); font-weight: 700; font-size: var(--size-micro);
  letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease-out);
}
.preview-seguir:hover { color: var(--ink-900); }

@media (max-width: 760px) {
  .preview-backdrop { padding: 0; align-items: stretch; }
  .preview-panel {
    grid-template-columns: minmax(0, 1fr); max-height: 100vh; width: 100%;
    /* Sin esto la rejilla reparte el espacio sobrante entre las dos filas y
       queda un hueco blanco entre la foto y el texto. */
    align-content: start;
  }
  .preview-media { aspect-ratio: 4 / 5; }
  .preview-body { justify-content: flex-start; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PANTALLAS TÁCTILES: nada bajo 44px, sin mover la maqueta
   ══════════════════════════════════════════════════════════════════════════ */

@media (pointer: coarse) {
  .ds-btn, .hero-outline-btn, .wa-cta { min-height: 44px; }
  .zone-link, .footer-link, .remove-btn, .seguir-link, .volver-link { position: relative; }
  .zone-link::after, .footer-link::after, .remove-btn::after, .seguir-link::after, .volver-link::after {
    content: ''; position: absolute; left: 0; right: 0; top: 50%;
    height: 44px; transform: translateY(-50%);
  }
  .qty-btn { width: 44px; height: 44px; }
  .product-check { width: 34px; height: 34px; }
  .footer-social a { padding: 12px; margin: -12px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOVIMIENTO REDUCIDO
   Si la persona lo pidió en su teléfono, todo se muestra terminado. Va al final
   a propósito, para que le gane a todo lo de arriba.
   ══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
    animation-delay: -.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .hero-word, .hero-step, .product-card, .map-row, .cart-line,
  .hero-section, .done-check { opacity: 1 !important; transform: none !important; }
  .coast-path { stroke-dashoffset: 0 !important; }
  .fly-chip { display: none; }
  /* Los desplazamientos de maqueta se vuelven a poner uno por uno, porque un
     "transform: none" general deja piezas fuera de vista. */
  .coast-label { transform: translateY(-140%) !important; }
}

/* Pestaña escondida: se detiene todo, incluidos los pseudo-elementos.
   El estado de animación no se hereda, por eso se apunta a cada elemento. */
body.paused *, body.paused *::before, body.paused *::after { animation-play-state: paused !important; }