/* ═══ La Última Chupada del Mate — hoja de estilos v1 ═══ */

:root {
  --verde-profundo: #1d3a2c;
  --verde-yerba: #4a7c59;
  --verde-claro: #7fa88b;
  --crema: #f7f2e7;
  --crema-osc: #efe6d3;
  --calabaza: #b5713f;
  --calabaza-osc: #94582e;
  --dorado: #c9a96a;
  --tinta: #26211a;
  --tinta-suave: #5c544a;
  --blanco: #fffdf8;
  --sombra: 0 10px 30px rgba(29, 58, 44, .12);
  --radio: 14px;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  color: var(--tinta);
  background: var(--crema);
  line-height: 1.6;
}
img, svg { max-width: 100%; }

/* ═══ Header ═══ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 24px;
  padding: 14px 28px;
  background: var(--verde-profundo);
  color: var(--crema);
  box-shadow: 0 2px 14px rgba(0,0,0,.18);
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--crema); text-decoration: none; }
.brand-mark { width: 34px; height: 34px; color: var(--dorado); flex-shrink: 0; }
.brand-text { font-family: var(--serif); font-size: 1.12rem; line-height: 1.1; letter-spacing: .3px; }
.brand-sub { display: block; font-size: .72rem; color: var(--dorado); font-style: italic; letter-spacing: 2px; text-transform: uppercase; }
.site-nav { display: flex; gap: 20px; margin-left: auto; }
.site-nav a { color: var(--crema); text-decoration: none; font-size: .92rem; opacity: .85; transition: opacity .15s; }
.site-nav a:hover { opacity: 1; color: var(--dorado); }
.cart-btn {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--calabaza); color: var(--blanco);
  border: none; cursor: pointer; transition: transform .15s, background .15s;
}
.cart-btn:hover { background: var(--calabaza-osc); transform: scale(1.06); }
.cart-count {
  position: absolute; top: -4px; right: -4px;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 10px; background: var(--dorado); color: var(--tinta);
  font-size: .72rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
}

/* ═══ Hero ═══ */
/* ══ PORTADA CON FOTOGRAFÍA (10-08) ══════════════════════════════════════
   El degradado verde cumplió mientras no había material. Ahora hay una foto
   real —manos pasándose el mate sobre una mesa de madera, con la cordillera
   detrás— y esa imagen dice en un segundo lo que el texto tarda un párrafo.
   El velo oscuro no es decoración: sin él el titular en crema se pierde sobre
   el pasto dorado, que es justo la zona donde cae. */
.hero {
  position: relative;
  isolation: isolate;
  color: var(--crema);
  padding: 128px 24px 138px;
  text-align: center;
  overflow: hidden;
  background: var(--verde-profundo);   /* respaldo si la foto no carga */
}
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background: url('/img/ambiente-rueda-mate.png') center 62% / cover no-repeat;
  /* Acercamiento lentísimo: 20 segundos para un 6 %. No se ve moverse, se
     siente que respira. Es el único movimiento continuo de la página. */
  animation: respirar 26s ease-in-out infinite alternate;
}
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(15,32,24,.72) 0%, rgba(15,32,24,.55) 45%,
                    rgba(15,32,24,.88) 100%),
    radial-gradient(ellipse at 50% 40%, transparent 30%, rgba(15,32,24,.45) 100%);
}
@keyframes respirar { from { transform: scale(1); } to { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) {
  .hero::before { animation: none; }
}
.hero-inner { max-width: 780px; margin: 0 auto; }
.hero-kicker {
  font-size: .8rem; letter-spacing: 4px; text-transform: uppercase;
  color: var(--dorado); margin-bottom: 18px;
}
.hero h1 { font-family: var(--serif); font-size: clamp(1.9rem, 4.5vw, 3.1rem); line-height: 1.18; margin-bottom: 22px; }
.hero-lede { font-size: 1.06rem; opacity: .88; max-width: 640px; margin: 0 auto 34px; }
.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ═══ Botones ═══ */
.btn {
  display: inline-block; padding: 13px 28px; border-radius: 999px;
  font-size: .95rem; font-weight: 600; text-decoration: none; cursor: pointer;
  border: none; transition: transform .15s, background .15s, box-shadow .15s;
}
.btn-primary { background: var(--calabaza); color: var(--blanco); box-shadow: 0 6px 18px rgba(181,113,63,.35); }
.btn-primary:hover { background: var(--calabaza-osc); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--crema); border: 1.5px solid rgba(247,242,231,.5); }
.btn-ghost:hover { border-color: var(--dorado); color: var(--dorado); }
.btn-block { width: 100%; text-align: center; }

/* ═══ Secciones ═══ */
.section { padding: 84px 28px; max-width: 1180px; margin: 0 auto; }
.section-alt {
  max-width: none;
  background: var(--crema-osc);
}
.section-alt > * { max-width: 1180px; margin-left: auto; margin-right: auto; }
.section-head { text-align: center; margin-bottom: 48px; }
.section-head h2 { font-family: var(--serif); font-size: clamp(1.6rem, 3vw, 2.3rem); color: var(--verde-profundo); margin-bottom: 10px; }
.section-head p { color: var(--tinta-suave); max-width: 620px; margin: 0 auto; }

/* ═══ Historias ═══ */
.stories-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 26px; }
.story-card {
  background: var(--blanco); border-radius: var(--radio); padding: 30px 28px;
  box-shadow: var(--sombra); border-top: 4px solid var(--dorado);
  display: flex; flex-direction: column;
}
.story-tag {
  font-size: .7rem; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--calabaza); font-weight: 700; margin-bottom: 12px;
}
.story-card h3 { font-family: var(--serif); font-size: 1.35rem; color: var(--verde-profundo); margin-bottom: 12px; }
.story-card p { font-size: .95rem; color: var(--tinta-suave); flex: 1; }
.story-foot { margin-top: 18px; font-size: .78rem; font-style: italic; color: var(--verde-yerba); }

/* ═══ Filtros tienda ═══ */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: center; margin-bottom: 40px; }
.chip-group-label { font-size: .78rem; text-transform: uppercase; letter-spacing: 1px; color: var(--tinta-suave); margin-left: 8px; }
.chip {
  padding: 8px 18px; border-radius: 999px; font-size: .88rem; cursor: pointer;
  background: var(--blanco); color: var(--tinta); border: 1.5px solid rgba(29,58,44,.18);
  transition: all .15s;
}
.chip:hover { border-color: var(--verde-yerba); }
.chip.active { background: var(--verde-profundo); color: var(--crema); border-color: var(--verde-profundo); }
.chip-sub { font-size: .8rem; padding: 6px 14px; }

/* ═══ Productos ═══ */
.products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; }
.product-card {
  background: var(--blanco); border-radius: var(--radio); overflow: hidden;
  box-shadow: var(--sombra); display: flex; flex-direction: column;
  transition: transform .18s, box-shadow .18s;
}
.product-card:hover { transform: translateY(-4px); box-shadow: 0 16px 38px rgba(29,58,44,.18); }
.product-visual {
  height: 150px; display: flex; align-items: center; justify-content: center;
  color: rgba(255,253,248,.92); position: relative;
}
.product-visual svg { width: 54px; height: 54px; }
.pv-suave    { background: linear-gradient(135deg, #7fa88b, #4a7c59); }
.pv-fuerte   { background: linear-gradient(135deg, #2e5941, #1d3a2c); }
.pv-sabores  { background: linear-gradient(135deg, #c9a96a, #b5713f); }
.pv-ahumada  { background: linear-gradient(135deg, #6b5744, #3e3129); }
.pv-termo    { background: linear-gradient(135deg, #44615d, #22403c); }
.pv-bombilla { background: linear-gradient(135deg, #9b8a6b, #6e5f45); }
/* POR ENCARGO NO ES UN CARTEL DE FRENO (11-08). Antes decía "Próximamente" en
   tinta oscura con letra dorada: leía como "no lo tengo" y mataba el impulso
   justo en el catálogo. Ahora dice lo que de verdad pasa —se consigue a
   pedido— y va en tono claro y liviano. Para una pieza artesanal eso no es un
   defecto: una bombilla de alpaca cincelada a mano hecha a pedido se lee como
   hecha para ti. */
.badge-encargo {
  position: absolute; top: 12px; right: 12px;
  background: rgba(255,255,255,.92); color: var(--tinta);
  font-size: .64rem; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  box-shadow: 0 1px 6px rgba(0,0,0,.18);
}
.badge-cat {
  position: absolute; bottom: 12px; left: 12px;
  background: rgba(0,0,0,.35); color: #fff;
  font-size: .68rem; letter-spacing: 1px; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px; backdrop-filter: blur(4px);
}
.product-body { padding: 18px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.product-body h3 { font-size: 1.02rem; color: var(--verde-profundo); line-height: 1.3; margin-bottom: 4px; }
.product-origin { font-size: .78rem; color: var(--tinta-suave); margin-bottom: 10px; }
.product-desc { font-size: .85rem; color: var(--tinta-suave); flex: 1; margin-bottom: 14px; }
.product-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.product-price { font-weight: 800; font-size: 1.05rem; color: var(--tinta); }
.price-ref { display: block; font-size: .66rem; font-weight: 400; color: var(--tinta-suave); }
.add-btn {
  padding: 9px 16px; border-radius: 999px; border: none; cursor: pointer;
  background: var(--verde-profundo); color: var(--crema); font-size: .84rem; font-weight: 600;
  transition: background .15s, transform .1s;
}
.add-btn:hover { background: var(--verde-yerba); }
.add-btn:active { transform: scale(.95); }
.add-btn[disabled] { background: var(--crema-osc); color: var(--tinta-suave); cursor: default; }
.shop-note { text-align: center; margin-top: 36px; font-size: .84rem; color: var(--tinta-suave); font-style: italic; }

/* ═══ En vivo ═══ */
.live-panel {
  background: var(--verde-profundo); border-radius: var(--radio);
  min-height: 380px; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sombra); overflow: hidden;
}
/* Cuando adentro va el widget (vertical 9:16), el panel se ajusta al alto del
   marco en vez de quedar como una plancha ancha con el video chico al medio.
   Los navegadores sin :has() mantienen el comportamiento anterior. */
.live-panel:has(iframe.widget) {
  /* Sin bordes de relleno a los lados, que hacían ver el video más chico de lo
     que es. En ancho acompaña al marco de tres columnas; `fit-content` no sirve
     acá porque el marco se mide en porcentaje y el contenedor colapsaba. */
  width: 100%; max-width: 1180px; margin: 0 auto; min-height: 0; padding: 0;
}
@media (max-width: 1000px) {
  .live-panel:has(iframe.widget) { width: fit-content; max-width: 100%; }
}
.live-placeholder { text-align: center; color: var(--crema); padding: 48px 28px; max-width: 520px; }
.live-dot {
  display: inline-block; width: 14px; height: 14px; border-radius: 50%;
  background: #e2554a; margin-bottom: 16px;
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1);} 50% { opacity: .45; transform: scale(.85);} }
.live-placeholder h3 { font-family: var(--serif); font-size: 1.5rem; margin-bottom: 12px; }
.live-placeholder p { opacity: .82; font-size: .95rem; }
.live-embed { width: 100%; }
.live-embed iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }
/* Player propio (vertical 9:16): marco vertical centrado en vez de 16:9 */
.live-embed iframe.vertical {
  aspect-ratio: 9 / 16;
  width: auto;
  height: min(84vh, 780px);
  margin: 0 auto;
}
#livePanel.mini .live-embed iframe.vertical { height: auto; width: 100%; aspect-ratio: 9 / 16; }
/* Widget embebible: hero ANCHO (3 columnas dentro del widget); en mini,
   marco angosto 9:16 → el widget pasa solo al formato sobre-el-video. */
/* Widget embebible: SIEMPRE marco vertical 9:16 (03-08). Con un marco ancho
   el widget se desplegaba en modo escritorio: el video quedaba recortado y
   sobraba negro a los lados. Un marco angosto lo hace pasar solo al formato
   "todo sobre el video", que es el que respeta la proporción vertical de la
   transmisión — que es lo que se está vendiendo. */
/* CORRECCIÓN DEL 04-08: el marco angosto arreglaba la proporción del video
   pero se llevaba por delante las dos columnas del widget —catálogo a la
   izquierda, chat a la derecha—, que era justo lo que hacía que en pantalla
   grande esto pareciera un canal y no un video suelto perdido en el medio.
   Se puede tener todo: el marco vuelve a ser ANCHO y el widget acomoda solo
   sus tres columnas, con el video en 9:16 al centro (el teléfono tiene su
   propia proporción fija, así que ya no se deforma como en la queja del 03-08).
   Debe superar los 900 px de ancho: por debajo, el widget colapsa a una sola
   columna. En pantallas chicas eso es lo correcto y se fuerza más abajo. */
.live-embed iframe.widget {
  /* Medidas EXPLÍCITAS, no derivadas: con `width:auto` dentro de un contenedor
     `fit-content` el navegador queda esperando que uno defina al otro y el
     marco nacía vacío (visto 03-08). */
  height: min(80vh, 760px);
  width: 100%;
  max-width: 1180px;
  aspect-ratio: auto;
  margin: 0 auto;
  display: block;
}
/* Bajo los 1000 px no caben tres columnas: se vuelve al marco vertical, que es
   el formato "todo sobre el video" y el que respeta la proporción de la
   transmisión — lo que se está vendiendo. */
@media (max-width: 1000px) {
  .live-embed iframe.widget {
    width: calc(min(80vh, 760px) * 9 / 16);
    max-width: 100%;
  }
}
#livePanel.mini .live-embed iframe.widget { height: auto; width: 100%; aspect-ratio: 9 / 16; }

/* ═══ Live al aire: protagonista + mini reproductor flotante ═══ */
.live-hero { max-width: 1180px; margin: 0 auto; padding: 26px 28px 8px; }
.live-hero-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
  font-weight: 800; letter-spacing: 3px; font-size: .85rem; color: var(--verde-profundo);
}
.live-hero-head .live-dot { margin-bottom: 0; }
.nav-live-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #e2554a; margin-right: 6px; vertical-align: middle;
  animation: pulse 1.6s ease-in-out infinite;
}
.mini-bar { display: none; }
#livePanel.mini {
  position: fixed; right: 16px; bottom: 16px; z-index: 400;
  /* Angosto a propósito: el contenido es vertical. Antes la caja era ancha y
     el widget quedaba mitad video, mitad negro (visto 03-08). */
  width: min(260px, 46vw); min-height: 0; display: block;
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
}
#livePanel.mini .mini-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 12px; background: var(--tinta); color: var(--crema);
  font-size: .78rem; font-weight: 600;
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
}
#livePanel.arrastrando .mini-bar { cursor: grabbing; }
#livePanel.mini .live-embed iframe { aspect-ratio: 16 / 9; }
/* EL PIP LLEVA A /live (02-09). Los toques sobre el video los recibe el iframe,
   no la página: este enlace transparente va encima para que tocar el video
   navegue. Se detiene 92 px antes del borde de abajo a propósito: ahí están
   las tarjetas de productos que el widget deja en el mini (v173), y tocarlas
   tiene que seguir agregando al carro. */
#livePanel.mini .live-embed { position: relative; }
#livePanel.mini .mini-ir { position: absolute; left: 0; right: 0; top: 0; bottom: 92px; display: block; z-index: 1; }
.mini-ir { display: none; }
.mini-acciones { display: flex; gap: 2px; flex-shrink: 0; }
.mini-btn {
  background: none; border: none; color: var(--crema);
  font-size: 1.05rem; line-height: 1; cursor: pointer; padding: 2px 7px;
  border-radius: 6px; transition: background .15s;
}
.mini-btn:hover { background: rgba(255, 253, 248, .18); }

/* El bloque "Maximizado" (⛶ agrandaba el mini en el lugar) se retiró el 02-09:
   ahora el ⛶ y el video llevan a /live, donde el widget vive entero. */

.live-pie { max-width: 1180px; margin: 10px auto 0; padding: 0 28px; font-size: .9rem; color: var(--tinta-suave); }
.live-cta { text-align: center; margin: 22px 0 0; }

@media (max-width: 720px) {
  .live-hero { padding: 18px 16px 4px; }
  #livePanel.mini { width: min(210px, 52vw); right: 10px; bottom: 84px; }
}

/* ═══ Temas para el próximo live ═══ */
.temas-card {
  max-width: 680px; margin: 40px auto 0;
  background: var(--blanco); border-radius: var(--radio); padding: 32px 30px;
  box-shadow: var(--sombra); border-top: 4px solid var(--calabaza);
}
.temas-card h3 { font-family: var(--serif); font-size: 1.35rem; color: var(--verde-profundo); margin-bottom: 10px; }
.temas-lede { font-size: .92rem; color: var(--tinta-suave); margin-bottom: 18px; }
.tema-form { display: flex; flex-direction: column; gap: 14px; }
.tema-form textarea {
  padding: 13px 16px; border-radius: 10px; border: 1.5px solid rgba(29,58,44,.2);
  font-family: var(--sans); font-size: .95rem; background: var(--blanco); color: var(--tinta);
  transition: border-color .15s; resize: vertical;
}
.tema-form textarea:focus { outline: none; border-color: var(--verde-yerba); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ═══ Formulario historia ═══ */
.story-form { max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.story-form label { display: flex; flex-direction: column; gap: 7px; font-size: .88rem; font-weight: 600; color: var(--verde-profundo); }
.story-form input, .story-form textarea {
  padding: 13px 16px; border-radius: 10px; border: 1.5px solid rgba(29,58,44,.2);
  font-family: var(--sans); font-size: .95rem; background: var(--blanco); color: var(--tinta);
  transition: border-color .15s;
}
.story-form input:focus, .story-form textarea:focus { outline: none; border-color: var(--verde-yerba); }
.form-note { font-size: .85rem; color: var(--verde-yerba); font-weight: 600; min-height: 1.2em; }
.permiso-group { border: none; display: flex; flex-direction: column; gap: 10px; }
.permiso-group legend { font-size: .88rem; font-weight: 600; color: var(--verde-profundo); margin-bottom: 10px; }
.permiso-opcion {
  display: flex !important; flex-direction: row !important; align-items: flex-start; gap: 12px;
  padding: 13px 16px; border-radius: 10px; cursor: pointer;
  background: var(--blanco); border: 1.5px solid rgba(29,58,44,.2);
  font-weight: 400 !important; font-size: .9rem !important; color: var(--tinta) !important;
  transition: border-color .15s, background .15s;
}
.permiso-opcion:hover { border-color: var(--verde-yerba); }
.permiso-opcion:has(input:checked) { border-color: var(--verde-profundo); background: #eef4ee; }
.permiso-opcion input { margin-top: 3px; accent-color: var(--verde-profundo); }
.permiso-opcion strong { color: var(--verde-profundo); }

/* ═══ Footer ═══ */
.site-footer {
  background: var(--tinta); color: var(--crema);
  padding: 44px 28px; text-align: center;
}
.site-footer strong { font-family: var(--serif); font-size: 1.1rem; }
.site-footer p { opacity: .7; font-size: .85rem; margin-top: 6px; }
.footer-fine { margin-top: 18px; font-size: .74rem !important; opacity: .5 !important; }

/* ═══ Carro drawer ═══ */
.cart-overlay {
  position: fixed; inset: 0; background: rgba(20,16,10,.5); z-index: 90;
  backdrop-filter: blur(2px);
}
.cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 100;
  width: min(420px, 92vw); background: var(--blanco);
  display: flex; flex-direction: column;
  box-shadow: -12px 0 40px rgba(0,0,0,.25);
  animation: slideIn .25s ease;
}
@keyframes slideIn { from { transform: translateX(100%);} to { transform: translateX(0);} }
.cart-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px; background: var(--verde-profundo); color: var(--crema);
}
.cart-head h3 { font-family: var(--serif); font-size: 1.25rem; }
.cart-close { background: none; border: none; color: var(--crema); font-size: 1.8rem; cursor: pointer; line-height: 1; }
.cart-items { flex: 1; overflow-y: auto; padding: 18px 24px; }
.cart-empty { text-align: center; color: var(--tinta-suave); padding: 40px 0; font-style: italic; }
.cart-item {
  display: flex; align-items: center; gap: 12px; padding: 14px 0;
  border-bottom: 1px solid var(--crema-osc);
}
.ci-info { flex: 1; }
.ci-info strong { display: block; font-size: .9rem; color: var(--verde-profundo); }
.ci-info span { font-size: .8rem; color: var(--tinta-suave); }
.ci-qty { display: flex; align-items: center; gap: 8px; }
.ci-qty button {
  width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid rgba(29,58,44,.25);
  background: var(--blanco); cursor: pointer; font-weight: 700; color: var(--verde-profundo);
}
.ci-qty button:hover { background: var(--crema-osc); }
.ci-remove { background: none; border: none; color: #b04a3a; cursor: pointer; font-size: 1.1rem; padding: 4px; }
.cart-foot { padding: 20px 24px 26px; border-top: 2px solid var(--crema-osc); }
.cart-total-row { display: flex; justify-content: space-between; font-size: 1.1rem; margin-bottom: 14px; }
.cart-fine { font-size: .75rem; color: var(--tinta-suave); text-align: center; margin-top: 10px; }

/* ═══ Toast ═══ */
.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--verde-profundo); color: var(--crema);
  padding: 12px 26px; border-radius: 999px; font-size: .9rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.3); opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s; z-index: 200;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ═══ Responsive ═══ */
@media (max-width: 720px) {
  .site-header { padding: 12px 16px; gap: 12px; }
  .site-nav { display: none; }
  .hero { padding: 64px 20px 76px; }
  .section { padding: 60px 18px; }
  .form-row { grid-template-columns: 1fr; }
}

/* Aviso de cierre de compra (03-08): el carro llega hasta el final y se
   detiene acá, sin pedir datos de pago. Tono informativo, no de error: el
   sitio está en lanzamiento, no roto. */
.cart-aviso { margin-top: 14px; padding: 14px 16px; border-radius: 10px;
              background: rgba(74, 124, 89, .12);
              border-left: 3px solid var(--verde-yerba); }
.cart-aviso strong { display: block; margin-bottom: 4px; font-size: .95rem; }
.cart-aviso p { margin: 0; font-size: .84rem; line-height: 1.5;
                color: var(--tinta-suave); }

/* ── La ficha del catálogo lleva a la página del producto (10-08) ──
   El enlace cubre la tarjeta entera para que se pueda tocar en cualquier
   parte, pero va DEBAJO del botón de agregar: agregar al carro sigue siendo
   agregar al carro, no navegar. Quien quiere comprar rápido no pierde el
   atajo, y quien quiere mirar el producto ahora tiene dónde. */
.product-card { position: relative; }
.product-link { position: absolute; inset: 0; z-index: 1; }
.product-card .product-body { position: relative; z-index: 2; pointer-events: none; }
.product-card .product-body a,
.product-card .product-body button { pointer-events: auto; }
.product-card h3 a { color: inherit; text-decoration: none; }
.product-card h3 a:hover { color: var(--calabaza); }

/* Familias nuevas (10-08). Mismo tratamiento que las originales: un degradado
   propio por categoría, para que la grilla se lea aunque todavía no haya foto. */
.pv-mate     { background: linear-gradient(135deg, #a8763f, #6b4522); }
.pv-hierba   { background: linear-gradient(135deg, #8aa870, #4f6b3c); }
.pv-textil   { background: linear-gradient(135deg, #a35c4e, #6d3730); }
.pv-sombrero { background: linear-gradient(135deg, #8b8272, #55503f); }

/* ── Reservas (10-08) ──
   Se puede sumar al carro lo que todavía no tiene stock, pero se ve distinto:
   el botón en tono secundario y la línea del carro marcada. La acción de
   agregar queda intacta —es media demostración del live— sin prometer un
   despacho que no existe. */
/* El botón de encargo ya no existe: es el mismo botón para todo. Se conserva
   la regla vieja apuntando a nada por si algún tema externo la referencia. */
.add-btn-reserva { background: transparent; color: var(--calabaza);
                   border: 1.5px solid var(--calabaza); }
.add-btn-reserva:hover { background: var(--calabaza); color: var(--blanco); }
.cart-item.es-encargo { border-left: 3px solid var(--dorado); padding-left: 9px; }
.ci-encargo { color: var(--calabaza); font-weight: 700; text-transform: uppercase;
              font-size: .72em; letter-spacing: .06em; }
/* Formulario de pedido (11-08). Vive dentro del cajón del carro, así que va
   apretado y sin adornos: cada píxel que ocupa es uno que no ve del pedido. */
.cart-pedido { display: flex; flex-direction: column; gap: 9px; margin-top: 12px; }
.cart-pedido .cp-intro { font-size: .84rem; color: var(--tinta-suave);
                         line-height: 1.5; margin: 0 0 2px; }
.cart-pedido label { display: flex; flex-direction: column; gap: 4px;
                     font-size: .78rem; font-weight: 700; color: var(--tinta); }
.cart-pedido .cp-opt { font-weight: 400; color: var(--tinta-suave); }
/* Mismo trazo que los formularios de temas e historias, para que el sitio se
   vea de una sola mano: 1,5 px del verde de la casa al 20 %, y el foco pasa al
   verde yerba. Los 16 px de letra NO son estéticos — bajo eso, Safari del
   iPhone hace zoom al tocar el campo y saca a la persona del carro. */
.cart-pedido input, .cart-pedido textarea {
  font-family: var(--sans); font-weight: 400; font-size: 16px;
  padding: 11px 14px; border-radius: 10px; border: 1.5px solid rgba(29,58,44,.2);
  background: var(--blanco); color: var(--tinta); width: 100%;
  transition: border-color .15s;
}
.cart-pedido input:focus, .cart-pedido textarea:focus {
  outline: none; border-color: var(--verde-yerba);
}
.cart-pedido textarea { resize: vertical; min-height: 42px; }
.cp-estado { font-size: .82rem; color: var(--tinta-suave); margin: 2px 0 0; min-height: 1em; }
.cp-estado.cp-error { color: #a3341f; }

.cart-nota { font-size: .82rem; color: var(--tinta-suave); line-height: 1.5;
             margin-top: 14px; padding-top: 12px;
             border-top: 1px dashed rgba(38,33,26,.2); }
.nota-encargo { font-size: .85rem; color: var(--tinta-suave); line-height: 1.55;
                margin-top: 12px; max-width: 46ch; }

/* La foto tapa el icono cuando existe; si no carga, `onerror` la quita y el
   icono queda a la vista como siempre. */
.product-visual { position: relative; }
/* EL PRODUCTO ENTERO, SOBRE BLANCO (10-08, con una captura de Sebastián).
   Con `cover` la foto se recortaba para llenar el recuadro: las bombillas
   quedaban cortadas por la mitad y los mates sin base. En retail eso se lee
   como descuido — Jumbo, Paris y cualquier tienda seria muestran la pieza
   completa sobre fondo blanco, porque el comprador está evaluando la FORMA.
   `contain` la muestra entera, y el blanco propio de la imagen tapa el
   degradado de categoría sin depender de `:has()`. */
.product-foto { position: absolute; inset: 0; width: 100%; height: 100%;
                object-fit: contain; background: var(--blanco);
                padding: 10px; z-index: 1; }
.product-visual .badge-encargo, .product-visual .badge-cat { z-index: 2; }


/* ══ APARICIONES AL DESPLAZAR (10-08) ═══════════════════════════════════════
   Minimalista a propósito: solo opacidad y 14 píxeles de subida. Nada rebota,
   nada gira, nada llega tarde. El contenido aparece como si siempre hubiera
   estado ahí y uno recién lo mirara.
   PARTE VISIBLE, NO OCULTA: si el JavaScript no corre —o el observador no
   existe— todo se ve igual que siempre. Una animación jamás puede ser la razón
   por la que alguien no ve la tienda. La clase `.anima` la pone el script, así
   que sin script no hay nada que revelar. */
.anima .reveal { opacity: 0; transform: translateY(14px);
                 transition: opacity .6s ease, transform .6s cubic-bezier(.22,.8,.3,1); }
.anima .reveal.visto { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .anima .reveal { opacity: 1; transform: none; transition: none; }
}

/* ══ FRANJAS DE AMBIENTE ══════════════════════════════════════════════════
   Respiros entre secciones. No llevan botón ni información: existen para que
   la página tenga aire y para que el mundo patagónico esté presente sin que
   nadie lo explique. */
.franja { position: relative; min-height: clamp(240px, 38vw, 420px);
          display: flex; align-items: center; justify-content: center;
          text-align: center; padding: 48px 24px; overflow: hidden;
          isolation: isolate; background: var(--verde-profundo); }
.franja::before { content: ''; position: absolute; inset: 0; z-index: -2;
                  background-size: cover; background-position: center; }
.franja::after { content: ''; position: absolute; inset: 0; z-index: -1;
                 background: linear-gradient(180deg, rgba(15,32,24,.42), rgba(15,32,24,.66)); }
.franja p { color: var(--crema); font-family: var(--serif); font-weight: 400;
            font-size: clamp(1.25rem, 3vw, 2rem); line-height: 1.3;
            max-width: 20ch; text-wrap: balance; }
/* LAS FRANJAS NO SE DESCARGAN HASTA ACERCARSE (10-08). Un fondo en CSS se
   baja apenas la regla aplica, sin importar que esté a tres pantallas de
   distancia: entre las dos franjas se iban 459 KB antes de que nadie viera la
   tienda. La imagen se declara solo cuando el observador le pone `.cerca`, y
   entra con un fundido para que no aparezca de golpe. */
.franja::before { opacity: 0; transition: opacity .7s ease; }
.franja.cerca::before { opacity: 1; }
.franja-estepa.cerca::before { background-image: url('/img/ambiente-estepa-patagonica.png'); }
.franja-fogon.cerca::before  { background-image: url('/img/ambiente-fogon-atardecer.png'); }
@media (prefers-reduced-motion: reduce) {
  .franja::before { transition: none; }
}

/* ══ NAVEGACIÓN EN EL TELÉFONO (10-08) ═══════════════════════════════════════
   El menú de escritorio se oculta bajo 720 px y no lo reemplazaba nada: quien
   abría el enlace en el celular no tenía forma de llegar a la tienda. Y este
   sitio se comparte por mensaje — casi todos llegan por ahí.
   Dos líneas, no tres: menos ruido y la misma lectura. Al abrir se cruzan. */
.nav-abrir { display: none; width: 42px; height: 42px; border: 0; padding: 0;
             background: transparent; cursor: pointer; position: relative;
             flex: none; margin-left: 4px; }
.nav-abrir span { position: absolute; left: 11px; width: 20px; height: 2px;
                  background: var(--crema); border-radius: 2px;
                  transition: transform .28s cubic-bezier(.22,.8,.3,1), opacity .2s; }
.nav-abrir span:nth-child(1) { top: 17px; }
.nav-abrir span:nth-child(2) { top: 23px; }
.nav-abrir[aria-expanded="true"] span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.nav-abrir[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

/* ANIMACIÓN, NO TRANSICIÓN, Y NO ES UN DETALLE (10-08).
   Con una transición el estado BASE del menú es "invisible" y solo se vuelve
   visible si la transición corre. Si no corre —pestaña estrangulada, motor sin
   pintar, cualquier cosa rara— queda una pantalla negra con el fondo bloqueado
   y el usuario atrapado. Con una animación es al revés: lo normal es estar
   visible, y la animación solo decide CÓMO llega. Si no corre, el menú
   simplemente aparece. Nunca puede haber un menú abierto e invisible. */
.nav-movil { position: fixed; inset: 0; z-index: 500; background: var(--verde-profundo);
             display: flex; flex-direction: column; align-items: center;
             justify-content: center; gap: 6px; padding: 80px 24px 40px; }
.nav-movil[hidden] { display: none; }
/* El panel entra INSTANTÁNEO. Un menú a pantalla completa que aparece de una
   se siente más rápido que uno que se funde, y sobre todo: no hay ningún
   estado intermedio en el que pueda quedarse invisible. */
.nav-movil a { color: var(--crema); text-decoration: none; font-family: var(--serif);
               font-size: clamp(1.6rem, 8vw, 2.3rem); line-height: 1.9; }
/* Los enlaces SOLO SE DESLIZAN: la opacidad no participa. Si la animación no
   corre —por lo que sea— quedan visibles diez píxeles más abajo y nadie lo
   nota. Nunca invisibles. Es la misma regla que aprendimos con el visor: el
   estado por defecto tiene que ser el bueno. */
.nav-movil.abierto a { animation: enlaceEntra .34s cubic-bezier(.22,.8,.3,1) both; }
@keyframes enlaceEntra {
  from { transform: translateY(10px); }
  to   { transform: none; }
}
/* Entran de a uno, muy rápido: se nota como intención, no como espera. */
.nav-movil.abierto a:nth-child(1) { animation-delay: .05s; }
.nav-movil.abierto a:nth-child(2) { animation-delay: .10s; }
.nav-movil.abierto a:nth-child(3) { animation-delay: .15s; }
.nav-movil.abierto a:nth-child(4) { animation-delay: .20s; }
.nav-movil a:active { color: var(--dorado); }
.nav-movil-pie { position: absolute; bottom: 34px; color: var(--dorado);
                 font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; }
body.menu-abierto { overflow: hidden; }

@media (max-width: 720px) {
  .nav-abrir { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-movil.abierto, .nav-movil.abierto a { animation: none; }
  .nav-abrir span { transition: none; }
}

/* ── El botón tiene que seguir alcanzable con el menú abierto (10-08) ──
   El panel cubre la pantalla entera, cabecera incluida: el usuario abría el
   menú y no tenía con qué cerrarlo. En un computador queda Escape; en un
   teléfono no queda nada, y este sitio se abre sobre todo en teléfonos.
   Se sube la cabecera por encima del panel y se le quita el fondo: sobre el
   verde del menú sobra, y así la marca y la ✕ quedan flotando limpias. */
body.menu-abierto .site-header { z-index: 600; background: transparent;
                                 box-shadow: none; }
body.menu-abierto .site-header .cart-btn { display: none; }

/* ── Redes (10-08) ──
   En el pie y no en la cabecera: quien llega a una tienda viene a mirar
   productos, y un botón a Instagram arriba es una puerta de salida antes de
   que haya entrado. Abajo, en cambio, es lo natural — ya vio todo y quizá
   quiera seguir viendo. Se abren en pestaña nueva para no perder el carro. */
.redes { display: flex; gap: 10px; justify-content: center; margin: 4px 0 14px;
         flex-wrap: wrap; }
.redes a { display: inline-flex; align-items: center; gap: 8px;
           padding: 9px 16px; border-radius: 999px; text-decoration: none;
           color: var(--crema); border: 1px solid rgba(247,242,231,.28);
           font-size: .86rem; transition: border-color .2s, background .2s, color .2s; }
.redes a:hover { border-color: var(--dorado); color: var(--dorado);
                 background: rgba(201,169,106,.10); }
.redes svg { width: 18px; height: 18px; flex: none; }
@media (max-width: 480px) { .redes a span { display: none; }
                            .redes a { padding: 11px; } }