/* ═══════════════════════════════════════════════════
   GO NAT — Estilos globales
   Paleta: naranja #E8521A · verde #5A9E3A · madera #8B6340 · grafito #1E1E1E
   Tipografías: DM Sans (cuerpo) · Playfair Display (títulos) · Dancing Script (logo)
   ═══════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────
   ARQUITECTURA: MOBILE-FIRST   (26-ago-2026)
   ───────────────────────────────────────────────────
   Este archivo se escribe de chico a grande. Las reglas SIN media query
   son las del celular; las pantallas más grandes AGREGAN sobre esa base
   con @media (min-width). No se usa max-width para "deshacer" estilos.

     base              →  celular          (hasta 479px)
     min-width: 480px  →  celular grande   (480–767px)
     min-width: 768px  →  tablet           (768–1023px)
     min-width: 1024px →  escritorio       (1024px en adelante)

   Al agregar una regla nueva: escribila primero para celular, y recién
   después agregá lo que cambia en pantallas más grandes.
   ─────────────────────────────────────────────────── */

:root {
  --orange:#E8521A; --orange-h:#D44415; --orange-pale:#FDF0EA;
  --green:#5A9E3A; --green-deep:#2D5A1B; --green-pale:#EBF5E4;
  --wood:#8B6340; --wood-light:#C4956A;
  --cream:#FAF7F2; --cream-dark:#F0EBE1;
  --charcoal:#1E1E1E; --charcoal-mid:#3A3A3A;
  --gray:#6B7280; --gray-light:#9CA3AF;
  --white:#FFFFFF; --border:rgba(139,99,64,0.14);
  --fd:'Playfair Display',Georgia,serif;
  --fs:'Dancing Script',cursive;
  --fb:'DM Sans',system-ui,sans-serif;
  --rsm:8px; --rmd:14px; --rlg:22px; --rxl:32px;
  --shadow-sm:0 2px 12px rgba(30,30,30,0.06);
  --shadow-md:0 6px 28px rgba(30,30,30,0.10);
  --shadow-lg:0 16px 56px rgba(30,30,30,0.14);
  --shadow-or:0 8px 28px rgba(232,82,26,0.25);
  --t:0.28s cubic-bezier(0.4,0,0.2,1);
  /* Alto de las barras fijas de arriba. Se usan acá abajo para que los
     enlaces ancla no dejen el título tapado, y los va a reutilizar el
     Paso 2 en vez de repetir "68px" a mano en varios lugares. */
  --nav-h:56px;   /* pasa a 68px desde min-width:768px */
  --strip-h:38px;
  /* Área táctil mínima recomendada para un dedo. Se aplica en los Pasos
     2 y 7 a los botones que hoy miden 20 y 24 px. */
  --tap:44px;
}
@media (min-width:768px){
  :root{--nav-h:68px;}
  html{scroll-padding-top:calc(var(--nav-h) + var(--strip-h) + 12px);}
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{
  scroll-behavior:smooth;
  /* Evita que iOS agrande el texto por su cuenta al girar el teléfono. */
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  /* Con el nav pegajoso, al tocar un enlace ancla el título del destino
     quedaba escondido debajo de la barra. Esto le reserva el espacio. */
  scroll-padding-top:calc(var(--nav-h) + 12px);
}
body{font-family:var(--fb);background:var(--cream);color:var(--charcoal);line-height:1.65;overflow-x:hidden;}
a{text-decoration:none;color:inherit;}
button{font-family:var(--fb);cursor:pointer;}
img{max-width:100%;height:auto;display:block;}

/* PROMO BAR */
#promo-bar{background:var(--green-deep);color:white;font-size:0.68rem;font-weight:500;letter-spacing:0.02em;text-align:center;padding:8px 32px;position:relative;z-index:200;overflow:hidden;}
#promo-slides{display:flex;transition:transform 0.5s ease;}
/* El mensaje que no entra ya no se corta: se desplaza. El texto vive en un
   .promo-inner que app.js mueve con transform. Cuando hay desplazamiento se
   alinea a la izquierda (con el centrado, un texto más ancho que la barra
   se cortaba también por delante). */
.promo-slide{min-width:100%;overflow:hidden;}
.promo-slide.corre{text-align:left;}
.promo-inner{display:inline-block;white-space:nowrap;will-change:transform;}
.promo-slide a{color:#A8D98A;font-weight:700;text-decoration:underline;}
#promo-close{position:absolute;right:4px;top:50%;transform:translateY(-50%);background:none;border:none;color:rgba(255,255,255,0.45);font-size:1rem;line-height:1;cursor:pointer;padding:8px 10px;}

/* NAV */
nav{position:sticky;top:0;z-index:190;background:rgba(250,247,242,0.95);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border);transition:box-shadow var(--t);}
nav.scrolled{box-shadow:0 2px 20px rgba(30,30,30,0.08);}
.nav-inner{max-width:1200px;margin:0 auto;padding:0 16px;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:12px;}
.nav-logo{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.nl-icon{width:30px;height:30px;position:relative;flex-shrink:0;}
.nl-donut{width:26px;height:26px;border-radius:50%;border:7px solid var(--wood);position:absolute;bottom:0;left:2px;}
.nl-leaf{width:13px;height:13px;background:var(--green);border-radius:0 80% 0 80%;transform:rotate(-30deg);position:absolute;top:0;left:7px;}
.nl-text{display:flex;flex-direction:column;line-height:1;}
.nl-main{font-family:var(--fs);font-size:1.5rem;color:var(--orange);}
.nl-sub{font-size:0.5rem;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:var(--green);margin-top:-2px;}
/* En celular los links viven dentro de la hamburguesa. Desde tablet
   (min-width:768px) se muestran en línea y la hamburguesa desaparece. */
.nav-links{display:none;align-items:center;gap:4px;list-style:none;}
.nav-links a{font-size:0.8rem;font-weight:500;color:var(--charcoal-mid);padding:7px 11px;border-radius:50px;transition:all var(--t);}
.nav-expert{background:var(--orange);color:white!important;font-weight:600!important;box-shadow:var(--shadow-or);}
.nav-cart{position:relative;width:40px;height:40px;border-radius:50%;background:var(--cream-dark);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:1.1rem;cursor:pointer;transition:all var(--t);flex-shrink:0;}
#nav-badge{position:absolute;top:-4px;right:-4px;background:var(--orange);color:white;font-size:0.58rem;font-weight:800;width:18px;height:18px;border-radius:50%;display:none;align-items:center;justify-content:center;}
/* El padding le da a la hamburguesa un área táctil cómoda sin agrandar
   visualmente las tres rayitas. */
.hamburger{display:flex;flex-direction:column;gap:5px;background:none;border:none;padding:12px 10px;cursor:pointer;}
.hamburger span{display:block;width:22px;height:2px;background:var(--charcoal);border-radius:2px;transition:var(--t);}
.mob-menu{display:none;position:fixed;top:var(--nav-h);left:0;right:0;background:var(--cream);border-bottom:1px solid var(--border);padding:12px 16px;z-index:189;flex-direction:column;gap:2px;max-height:calc(100vh - var(--nav-h));overflow-y:auto;}
.mob-menu.open{display:flex;}
.mob-menu a{font-size:0.95rem;font-weight:500;color:var(--charcoal-mid);padding:13px 12px;border-radius:var(--rsm);}

/* PRODUCT STRIP */
/* En celular NO es pegajoso: se ve al entrar y se va al scrollear. Así no
   quedan tres barras fijas comiéndose la pantalla — después del scroll
   solo queda el nav. Desde tablet vuelve a quedar fijo debajo del nav,
   igual que en escritorio. */
#nav-strip{background:var(--white);border-bottom:1px solid var(--border);padding:0 12px;position:static;z-index:180;}
/* touch-action:pan-x fija el gesto al eje horizontal: al arrastrar el
   strip con el dedo la página ya no se mueve en vertical al mismo
   tiempo. overscroll-behavior evita que al llegar al final el scroll
   se le contagie a la página. */
.ns-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;touch-action:pan-x;overscroll-behavior-x:contain;}
.ns-inner::-webkit-scrollbar{display:none;}
.ns-lbl{font-size:0.58rem;font-weight:800;letter-spacing:0.12em;text-transform:uppercase;color:var(--orange);white-space:nowrap;padding:10px 10px 10px 0;border-right:1px solid var(--border);margin-right:6px;flex-shrink:0;}
.ns-item{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;cursor:pointer;white-space:nowrap;flex-shrink:0;border-right:1px solid rgba(139,99,64,0.07);transition:background var(--t);}
/* 26-ago-2026: el strip muestra la foto real del producto (renderStrip()
   en app.js). #ns-track usa display:contents para que los .ns-item sigan
   siendo hijos directos del flex de .ns-inner y el layout no cambie.
   .ns-em se conserva: es el respaldo si una foto no carga. */
#ns-track{display:contents;}
.ns-img{width:30px;height:30px;border-radius:6px;object-fit:cover;flex-shrink:0;background:var(--cream-dark);}
.ns-em{font-size:1rem;}
/* Los nombres salen completos del catálogo y algunos son largos
   ("Probióticos + Prebiótico 10K"). Se cortan con puntos suspensivos para
   que entren más productos en pantalla; en escritorio van completos. */
.ns-name{font-size:0.71rem;font-weight:500;color:var(--charcoal-mid);max-width:92px;overflow:hidden;text-overflow:ellipsis;}
.ns-price{font-size:0.71rem;font-weight:700;color:var(--orange);font-family:var(--fd);}
/* El botón se ve de 24px pero su área táctil real es de var(--tap) (44px)
   gracias al ::after invisible — cómodo para el dedo sin engordar la barra.
   Antes medía 20x20, menos de la mitad del mínimo recomendado. */
.ns-add{position:relative;width:24px;height:24px;border-radius:50%;background:var(--orange);color:white;border:none;font-size:0.9rem;line-height:1;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ns-add::after{content:'';position:absolute;top:50%;left:50%;width:var(--tap);height:var(--tap);transform:translate(-50%,-50%);}
.ns-all{font-size:0.68rem;font-weight:700;color:var(--orange);white-space:nowrap;padding:10px 0 10px 10px;border-left:1px solid var(--border);margin-left:6px;flex-shrink:0;}

/* Los efectos de hover solo se aplican donde hay mouse de verdad. En una
   pantalla táctil el primer toque puede quedar "pegado" en estado hover
   en vez de disparar el click. */
@media (hover:hover){
  .nav-links a:hover{color:var(--orange);background:var(--orange-pale);}
  .nav-expert:hover{background:var(--orange-h)!important;transform:translateY(-1px);}
  .nav-cart:hover{background:var(--orange-pale);border-color:var(--orange);}
  .mob-menu a:hover{background:var(--orange-pale);color:var(--orange);}
  .ns-item:hover{background:var(--orange-pale);}
  .ns-add:hover{background:var(--orange-h);}
}

/* ── min-width:480px — celular grande ───────────────────────────── */
@media (min-width:480px){
  .ns-name{max-width:130px;}
}

/* ── min-width:768px — tablet en adelante ───────────────────────── */
@media (min-width:768px){
  #promo-bar{font-size:0.75rem;padding:9px 40px;}
  #promo-close{right:12px;}
  .nav-inner{padding:0 28px;gap:24px;}
  .nav-logo{gap:10px;}
  .nl-icon{width:34px;height:34px;}
  .nl-donut{width:30px;height:30px;border-width:8px;}
  .nl-leaf{width:15px;height:15px;left:8px;}
  .nl-main{font-size:1.7rem;}
  .nl-sub{font-size:0.55rem;letter-spacing:0.18em;}
  .nav-links{display:flex;}
  .hamburger{display:none;}
  #nav-strip{position:sticky;top:var(--nav-h);padding:0 24px;}
  .ns-lbl{font-size:0.62rem;letter-spacing:0.14em;padding:10px 14px 10px 0;margin-right:8px;}
  .ns-item{padding:8px 12px;}
  .ns-name{max-width:none;overflow:visible;}
  .ns-all{font-size:0.7rem;padding:10px 0 10px 12px;margin-left:8px;}
}

/* SHARED */
section{padding:56px 16px;}
.container{max-width:1200px;margin:0 auto;}
.s-tag{display:inline-flex;align-items:center;gap:8px;font-size:0.68rem;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--orange);margin-bottom:12px;}
.s-tag::before{content:'';display:inline-block;width:20px;height:2px;background:var(--orange);border-radius:2px;}
.s-title{font-family:var(--fd);font-size:clamp(1.8rem,3.5vw,2.6rem);font-weight:700;line-height:1.18;color:var(--charcoal);margin-bottom:14px;}
.s-sub{font-size:0.95rem;color:var(--gray);line-height:1.8;font-weight:300;max-width:520px;}
.s-hdr{margin-bottom:48px;}
.s-hdr.center{text-align:center;}
.s-hdr.center .s-tag{justify-content:center;}
.s-hdr.center .s-sub{margin:0 auto;}
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 32px;border-radius:50px;font-size:0.9rem;font-weight:600;border:none;cursor:pointer;transition:all var(--t);}
.btn-p{background:var(--orange);color:white;}
.btn-o{background:transparent;color:var(--charcoal);border:1.5px solid var(--border);}
@media (hover:hover){
  .btn-p:hover{background:var(--orange-h);transform:translateY(-2px);box-shadow:var(--shadow-or);}
  .btn-o:hover{border-color:var(--orange);color:var(--orange);background:var(--orange-pale);}
  .obj-opt:hover{background:rgba(232,82,26,0.15);border-color:rgba(232,82,26,0.35);}
}
.rv{opacity:0;transform:translateY(22px);transition:opacity 0.6s ease,transform 0.6s ease;}
.rv.in{opacity:1;transform:none;}
.rv-d1{transition-delay:.1s;}.rv-d2{transition-delay:.2s;}.rv-d3{transition-delay:.3s;}.rv-d4{transition-delay:.4s;}

/* HERO */
/* En celular es una sola columna: primero el texto, y la zona oscura pasa a
   ser una banda al pie en vez del corte diagonal del escritorio. Los círculos
   decorativos se ocultan — no aportan y roban espacio en pantalla chica. */
#hero{display:grid;grid-template-columns:1fr;align-items:center;position:relative;overflow:hidden;padding:0;}
/* En celular NO se usa la banda oscura absoluta: ocupaba un 46% fijo del
   alto y las estadísticas del Hero ("+500 pacientes", "10+ años") caían
   encima, quedando texto gris sobre fondo negro. Ahora el fondo oscuro es
   de la propia columna de la tarjeta, así envuelve exactamente su contenido
   y no puede pisar nada. En escritorio vuelve el corte diagonal de siempre. */
.hero-bg{display:none;position:absolute;top:auto;bottom:0;right:0;width:100%;height:46%;background:var(--charcoal);clip-path:none;z-index:0;}
.hero-wood{display:none;position:absolute;top:auto;bottom:46%;right:0;width:100%;height:6px;background:repeating-linear-gradient(90deg,var(--wood-light) 0,var(--wood-light) 42px,var(--charcoal) 42px,var(--charcoal) 48px);opacity:0.5;z-index:1;}
.hero-c1,.hero-c2{display:none;}
.hero-c1{position:absolute;width:220px;height:220px;border-radius:50%;border:1.5px solid rgba(232,82,26,0.18);top:12%;right:10%;z-index:1;}
.hero-c2{position:absolute;width:100px;height:100px;border-radius:50%;border:1.5px solid rgba(90,158,58,0.2);bottom:20%;right:5%;z-index:1;}
.hero-left{position:relative;z-index:2;padding:40px 20px 28px;text-align:center;}
.hero-ey{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-size:0.64rem;font-weight:800;letter-spacing:0.16em;text-transform:uppercase;color:var(--orange);margin-bottom:18px;}
.hero-ey::before{content:'';display:inline-block;width:28px;height:2px;background:var(--orange);border-radius:2px;}
.hero-title{font-family:var(--fd);font-size:clamp(1.9rem,8vw,3.5rem);font-weight:700;line-height:1.1;color:var(--charcoal);margin-bottom:8px;}
.hero-script{font-family:var(--fs);font-size:clamp(2.4rem,11vw,4.2rem);color:var(--orange);display:block;line-height:1;margin-bottom:14px;}
.hero-sub{font-size:0.92rem;color:var(--gray);max-width:420px;margin-left:auto;margin-right:auto;line-height:1.75;font-weight:300;margin-bottom:28px;}
.hero-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;}
.hero-stats{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:14px;margin-top:32px;padding-top:24px;border-top:1px solid rgba(30,30,30,0.09);}
.hs-n{font-family:var(--fd);font-size:1.9rem;font-weight:700;color:var(--orange);line-height:1;}
.hs-l{font-size:0.7rem;color:var(--gray);margin-top:3px;}
.hero-right{position:relative;z-index:2;background:var(--charcoal);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px 20px 44px;gap:16px;}
/* El listón de madera marca el borde superior de la zona oscura, igual que
   en escritorio pero siguiendo a la columna en vez de a un porcentaje. */
.hero-right::before{content:'';position:absolute;top:0;left:0;right:0;height:6px;background:repeating-linear-gradient(90deg,var(--wood-light) 0,var(--wood-light) 42px,var(--charcoal) 42px,var(--charcoal) 48px);opacity:0.5;}
.hero-card{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.14);border-radius:var(--rlg);padding:24px;backdrop-filter:blur(6px);max-width:300px;width:100%;}
.hc-tag{display:inline-flex;align-items:center;gap:6px;background:var(--orange);color:white;font-size:0.62rem;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;padding:4px 12px;border-radius:50px;margin-bottom:14px;}
.hero-card h3{font-family:var(--fd);font-size:1.1rem;color:white;margin-bottom:10px;}
.hero-card p{font-size:0.81rem;color:rgba(255,255,255,0.6);line-height:1.7;margin-bottom:18px;}
.hc-pill{display:inline-flex;align-items:center;gap:5px;background:rgba(90,158,58,0.2);color:rgba(255,255,255,0.8);border:1px solid rgba(90,158,58,0.3);font-size:0.68rem;font-weight:500;padding:3px 10px;border-radius:50px;margin:2px;}
.wherever{background:var(--orange);color:white;font-size:0.68rem;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;padding:10px 22px;border-radius:50px;display:inline-flex;align-items:center;gap:8px;}

/* VITRINA */
#vitrina{background:var(--white);padding:28px 16px 24px;border-bottom:1px solid var(--border);}
.vit-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:10px;}
.vit-title{font-family:var(--fd);font-size:1.15rem;font-weight:700;color:var(--charcoal);}
.vit-sub{font-size:0.7rem;color:var(--gray);margin-top:2px;}
/* scroll-padding-left evita que la tarjeta "enganchada" quede pegada al
   borde de la pantalla al desplazar el carrusel. */
#vit-track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:16px;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;padding-bottom:8px;scrollbar-width:none;}
#vit-track::-webkit-scrollbar{display:none;}
.vcard{min-width:158px;max-width:158px;background:var(--cream);border:1px solid var(--border);border-radius:var(--rmd);overflow:hidden;cursor:pointer;scroll-snap-align:start;flex-shrink:0;transition:transform var(--t),box-shadow var(--t);}
.vcard-img{height:104px;display:flex;align-items:center;justify-content:center;font-size:2.6rem;position:relative;}
.vtag{position:absolute;top:7px;left:7px;font-size:0.58rem;font-weight:800;letter-spacing:0.08em;text-transform:uppercase;padding:2px 8px;border-radius:50px;color:white;}
.vtag-or{background:var(--orange);}
.vtag-gr{background:var(--green);}
.vtag-pu{background:#7C3AED;}
.vcard-body{padding:10px 12px;}
.vcard-cat{font-size:0.58rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--orange);margin-bottom:3px;}
.vcard-name{font-family:var(--fd);font-size:0.82rem;font-weight:700;color:var(--charcoal);line-height:1.3;margin-bottom:8px;}
.vcard-footer{display:flex;align-items:center;justify-content:space-between;gap:6px;}
.vcard-price{font-family:var(--fd);font-size:0.95rem;font-weight:700;color:var(--charcoal);}
/* Igual que el "+" del strip: el botón se ve chico pero su área táctil real
   llega a var(--tap) gracias al ::after invisible. */
.vcard-add{position:relative;background:var(--orange);color:white;border:none;border-radius:50px;font-size:0.65rem;font-weight:700;padding:7px 11px;cursor:pointer;white-space:nowrap;transition:background var(--t);}
.vcard-add::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:var(--tap);min-width:var(--tap);}
.vcard-cta{min-width:166px;max-width:166px;background:var(--charcoal);border-radius:var(--rmd);scroll-snap-align:start;flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;text-align:center;gap:10px;cursor:pointer;}

@media (hover:hover){
  .vcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
  .vcard-add:hover{background:var(--orange-h);}
}

/* ── min-width:480px — celular grande ───────────────────────────── */
@media (min-width:480px){
  .hero-stats{flex-direction:row;gap:36px;}
  .vcard{min-width:172px;max-width:172px;}
  .vcard-img{height:112px;}
  .vcard-cta{min-width:180px;max-width:180px;}
  #vit-track{gap:14px;}
}

/* ── min-width:768px — tablet ───────────────────────────────────── */
@media (min-width:768px){
  .hero-left{padding:56px 32px 32px;}
  .hero-right{padding:24px 32px 56px;}
  #vitrina{padding:40px 24px 32px;}
  .vit-hdr{margin-bottom:20px;}
}

/* ── min-width:1024px — escritorio ──────────────────────────────── */
/* Vuelve el layout de dos columnas con el corte diagonal y los círculos.
   Los valores son los mismos que tenía el sitio antes de la migración:
   en escritorio no debe verse ninguna diferencia. */
@media (min-width:1024px){
  #hero{grid-template-columns:1fr 1fr;min-height:calc(100vh - 108px);}
  .hero-bg{top:0;bottom:auto;width:50%;height:100%;clip-path:polygon(10% 0,100% 0,100% 100%,0 100%);}
  .hero-wood{top:0;bottom:auto;width:50%;}
  .hero-bg,.hero-wood{display:block;}
  .hero-right{background:none;}
  .hero-right::before{display:none;}
  .hero-c1,.hero-c2{display:block;}
  .hero-left{padding:80px 56px 80px 72px;text-align:left;}
  .hero-ey{justify-content:flex-start;font-size:0.68rem;letter-spacing:0.18em;margin-bottom:24px;}
  .hero-title{font-size:clamp(2.2rem,4.2vw,3.5rem);}
  .hero-script{font-size:clamp(2.8rem,5vw,4.2rem);}
  .hero-sub{font-size:0.97rem;line-height:1.8;margin-left:0;margin-right:0;margin-bottom:40px;}
  .hero-actions{justify-content:flex-start;gap:12px;}
  .hero-stats{justify-content:flex-start;align-items:flex-start;margin-top:52px;padding-top:32px;flex-wrap:wrap;}
  .hero-right{padding:80px 64px 80px 48px;}
  .hero-card{padding:32px;}
}

/* TRATAMIENTOS */
#tratamientos{background:var(--cream-dark);}
.trat-grid{display:grid;grid-template-columns:1fr;gap:16px;}
.trat-card{border-radius:var(--rlg);padding:28px 22px;display:flex;flex-direction:column;transition:transform var(--t),box-shadow var(--t);}
.trat-light{background:var(--white);border:1px solid var(--border);}
.trat-dark{background:var(--charcoal);border:1px solid rgba(255,255,255,0.06);}
.trat-badge{display:inline-flex;align-items:center;gap:6px;font-size:0.65rem;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;padding:4px 12px;border-radius:50px;width:fit-content;margin-bottom:24px;}
.tb-or{background:var(--orange-pale);color:var(--orange);}
.tb-gr{background:rgba(90,158,58,0.2);color:#8CD040;}
.trat-icon{font-size:2.4rem;margin-bottom:16px;}
.trat-title{font-family:var(--fd);font-size:1.3rem;font-weight:700;line-height:1.25;margin-bottom:12px;}
.trat-light .trat-title{color:var(--charcoal);}
.trat-dark .trat-title{color:white;}
.trat-desc{font-size:0.87rem;line-height:1.8;margin-bottom:26px;}
.trat-light .trat-desc{color:var(--gray);}
.trat-dark .trat-desc{color:rgba(255,255,255,0.58);}
.trat-list{list-style:none;display:flex;flex-direction:column;gap:9px;margin-bottom:32px;flex:1;}
.trat-list li{display:flex;align-items:flex-start;gap:9px;font-size:0.84rem;}
.trat-light .trat-list li{color:var(--charcoal-mid);}
.trat-dark .trat-list li{color:rgba(255,255,255,0.8);}
.chk{width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.62rem;font-weight:700;flex-shrink:0;margin-top:2px;}
.chk-or{background:var(--orange-pale);color:var(--orange);}
.chk-gr{background:rgba(90,158,58,0.2);color:#8CD040;}

/* EXPERT */
#expert{background:var(--charcoal);}
/* En celular el formulario y el resultado van uno debajo del otro. El
   resultado deja de ser pegajoso: en una pantalla chica, fijarlo taparía
   el formulario que se está completando. */
.expert-grid{display:grid;grid-template-columns:1fr;gap:24px;align-items:start;}
.ex-steps{display:flex;align-items:center;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-bottom:22px;}
.ex-steps::-webkit-scrollbar{display:none;}
.step-dot{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:56px;position:relative;}
.step-dot::after{content:'';position:absolute;top:12px;left:calc(50% + 12px);width:calc(100% - 24px);height:1.5px;background:rgba(255,255,255,0.12);}
.step-dot:last-child::after{display:none;}
/* ⚠️ .active y .done las pone updStep() en app.js sobre #s1–#s5. No renombrar. */
.step-num{width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,0.1);color:rgba(255,255,255,0.4);font-size:0.68rem;font-weight:700;display:flex;align-items:center;justify-content:center;transition:all 0.3s;}
.step-num.active{background:var(--orange);color:white;}
.step-num.done{background:var(--green);color:white;}
.step-lbl{font-size:0.56rem;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:rgba(255,255,255,0.3);text-align:center;line-height:1.3;}
.step-lbl.active{color:var(--orange);}
.step-lbl.done{color:var(--green);}
.ex-form{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.09);border-radius:var(--rlg);padding:20px;}
.ex-form h3{font-family:var(--fd);color:white;font-size:1.1rem;margin-bottom:4px;}
.ex-form > p{font-size:0.76rem;color:rgba(255,255,255,0.35);margin-bottom:20px;}
.fl{display:block;font-size:0.74rem;font-weight:600;color:rgba(255,255,255,0.65);margin-bottom:6px;}
/* 16px es el mínimo que evita que iOS haga zoom automático al tocar un
   campo — con menos, el teléfono acerca la pantalla y descoloca el formulario. */
.fi{width:100%;padding:13px 14px;background:rgba(255,255,255,0.07);border:1.5px solid rgba(255,255,255,0.1);border-radius:var(--rsm);font-family:var(--fb);font-size:16px;color:white;outline:none;transition:border-color var(--t);margin-bottom:14px;}
.fi::placeholder{color:rgba(255,255,255,0.2);}
.fi:focus{border-color:var(--orange);background:rgba(255,255,255,0.1);}
.fi option{background:#1E1E1E;color:white;}
.frow{display:grid;grid-template-columns:1fr;gap:0;}
.fgrp{margin-bottom:14px;}
.fgrp .fi{margin-bottom:0;}
.btn-expert{width:100%;padding:16px;background:var(--orange);color:white;border:none;border-radius:var(--rmd);font-size:0.95rem;font-weight:700;cursor:pointer;transition:all var(--t);margin-top:6px;display:flex;align-items:center;justify-content:center;gap:8px;}
.f-disc{font-size:0.66rem;color:rgba(255,255,255,0.22);text-align:center;margin-top:8px;}
.ex-result{position:static;}
.res-empty{background:rgba(255,255,255,0.04);border:2px dashed rgba(255,255,255,0.1);border-radius:var(--rlg);padding:32px 20px;text-align:center;}
.res-empty .em{font-size:3rem;margin-bottom:14px;}
.res-empty h4{font-family:var(--fd);color:white;font-size:1.1rem;margin-bottom:8px;}
.res-empty p{font-size:0.82rem;color:rgba(255,255,255,0.35);line-height:1.7;}
.res-loading{display:none;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:var(--rlg);padding:32px 20px;text-align:center;}
.spinner{width:48px;height:48px;border:3px solid rgba(232,82,26,0.2);border-top-color:var(--orange);border-radius:50%;margin:0 auto 18px;animation:spin 0.8s linear infinite;}
.res-out{display:none;background:var(--white);border-radius:var(--rlg);padding:20px;box-shadow:0 24px 64px rgba(0,0,0,0.35);}
.res-hdr{display:flex;align-items:center;gap:12px;margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid rgba(30,30,30,0.08);}
.res-avatar{width:40px;height:40px;background:var(--orange-pale);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0;}
.res-meta{font-size:0.65rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--orange);}
.res-name{font-family:var(--fd);font-size:0.95rem;color:var(--charcoal);font-weight:700;}
.proto-sec{margin-bottom:18px;}
.proto-sec h4{font-family:var(--fd);font-size:0.95rem;color:var(--charcoal);margin-bottom:8px;padding-bottom:6px;border-bottom:2px solid var(--orange-pale);}
.proto-obj{background:var(--green-pale);border-left:3px solid var(--green);border-radius:0 var(--rsm) var(--rsm) 0;padding:10px 14px;font-size:0.82rem;color:var(--green-deep);margin-bottom:14px;}
.proto-habits{background:var(--cream);border-radius:var(--rsm);padding:10px 14px;}
.proto-habits ul{padding-left:16px;margin:0;}
.proto-habits li{font-size:0.78rem;color:var(--charcoal-mid);margin-bottom:4px;line-height:1.5;}
.prod-rec{display:flex;align-items:flex-start;gap:10px;background:var(--cream);border-radius:var(--rsm);padding:10px 12px;margin-bottom:8px;border:1px solid rgba(30,30,30,0.05);}
.prod-rec-em{font-size:1.3rem;flex-shrink:0;}
.prod-rec-name{font-weight:700;color:var(--charcoal);font-size:0.82rem;margin-bottom:2px;}
.prod-rec-why{font-size:0.73rem;color:var(--orange);font-weight:600;margin-bottom:2px;}
.prod-rec-detail{font-size:0.72rem;color:var(--gray);}
.prod-rec-dose{font-size:0.7rem;font-weight:600;color:var(--green);margin-top:3px;}
.prod-rec-warn{font-size:0.68rem;color:#B45309;background:#FEF3C7;padding:3px 7px;border-radius:4px;margin-top:3px;display:inline-block;}
.proto-add-btn{width:100%;padding:14px;background:var(--orange);color:white;border:none;border-radius:var(--rmd);font-size:0.88rem;font-weight:700;cursor:pointer;transition:all var(--t);margin-top:4px;display:flex;align-items:center;justify-content:center;gap:8px;}
.ia-disc{font-size:0.7rem;color:var(--gray);border-top:1px solid rgba(30,30,30,0.07);padding-top:12px;margin-top:14px;font-style:italic;line-height:1.6;}
.res-actions{margin-top:16px;padding-top:14px;border-top:1px solid rgba(30,30,30,0.08);}
.res-consult{display:block;text-align:center;padding:14px;background:var(--orange);color:white;border-radius:50px;font-size:0.88rem;font-weight:700;margin-bottom:8px;box-shadow:var(--shadow-or);}
.res-copy{width:100%;padding:12px;background:var(--cream);color:var(--charcoal);border:1.5px solid var(--border);border-radius:50px;font-size:0.8rem;font-weight:600;cursor:pointer;transition:all var(--t);}

@media (hover:hover){
  .btn-expert:hover{background:var(--orange-h);transform:translateY(-1px);box-shadow:var(--shadow-or);}
  .proto-add-btn:hover{background:var(--orange-h);}
  .res-copy:hover{border-color:var(--orange);color:var(--orange);}
}

/* ── min-width:480px ────────────────────────────────────────────── */
@media (min-width:480px){
  .frow{gap:12px;}
  .ex-form{padding:24px;}
  .res-out{padding:24px;}
}

/* ── min-width:768px — tablet ───────────────────────────────────── */
@media (min-width:768px){
  .ex-steps{margin-bottom:28px;}
  .ex-form{padding:32px;}
  .ex-form > p{margin-bottom:24px;}
  .fi{font-size:0.87rem;padding:11px 14px;}
  .btn-expert{padding:15px;}
  .res-empty,.res-loading{padding:44px 28px;}
  .res-out{padding:32px;}
  .proto-add-btn{padding:13px;}
  .res-consult{padding:13px;}
  .res-copy{padding:10px;}
}

/* ── min-width:1024px — escritorio ──────────────────────────────── */
/* Vuelven las dos columnas y el resultado pegajoso, con los valores
   originales exactos. */
@media (min-width:1024px){
  .expert-grid{grid-template-columns:1fr 1.1fr;gap:40px;}
  .ex-result{position:sticky;top:90px;}
}

/* TIENDA */
#tienda{background:var(--white);}
#tienda::before{content:'';display:block;height:5px;background:repeating-linear-gradient(90deg,var(--wood-light) 0,var(--wood-light) 52px,var(--wood) 52px,var(--wood) 58px);}
/* Los filtros de categoría van en una fila que se desplaza, en vez de
   apilarse en dos o tres renglones y empujar la grilla hacia abajo. */
.tienda-tabs{display:flex;gap:6px;margin-bottom:24px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px;}
.tienda-tabs::-webkit-scrollbar{display:none;}
.tab-btn{padding:9px 18px;border-radius:50px;font-size:0.8rem;font-weight:600;border:1.5px solid var(--border);background:transparent;color:var(--gray);cursor:pointer;transition:all var(--t);white-space:nowrap;flex-shrink:0;}
.tab-btn.active{background:var(--orange);color:white;border-color:var(--orange);}
/* Dos columnas ya en celular: con 31 productos, una sola columna obliga a
   scrollear muchísimo, y la tarjeta angosta mantiene la proporción de la
   foto parecida a la de escritorio. */
.prod-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.prod-card{background:var(--white);border:1px solid var(--border);border-radius:var(--rmd);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform var(--t),box-shadow var(--t);display:flex;flex-direction:column;}
.prod-img{height:130px;display:flex;align-items:center;justify-content:center;font-size:3rem;position:relative;overflow:hidden;}
.prod-img img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;}
.ptag{position:absolute;top:8px;left:8px;font-size:0.58rem;font-weight:800;letter-spacing:0.08em;text-transform:uppercase;padding:2px 9px;border-radius:50px;color:white;}
.ptag-or{background:var(--orange);}
.ptag-gr{background:var(--green);}
.ptag-wo{background:var(--wood);}
.prod-body{padding:12px;display:flex;flex-direction:column;flex:1;}
.prod-cat{font-size:0.6rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--orange);margin-bottom:4px;}
.prod-name{font-family:var(--fd);font-size:0.88rem;font-weight:700;color:var(--charcoal);margin-bottom:5px;line-height:1.3;}
.prod-desc{font-size:0.74rem;color:var(--gray);line-height:1.55;margin-bottom:12px;flex:1;}
.prod-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;}
.prod-price{font-family:var(--fd);font-size:1.05rem;font-weight:700;color:var(--charcoal);}
.prod-price small{font-size:0.64rem;font-family:var(--fb);color:var(--gray);font-weight:400;display:block;}
/* Mismo criterio que el "+" del strip: se ve chico, pero el área que
   responde al dedo llega a var(--tap). */
.btn-add{position:relative;padding:8px 13px;border-radius:50px;background:var(--orange);color:white;font-size:0.7rem;font-weight:700;border:none;cursor:pointer;transition:background var(--t);white-space:nowrap;}
.btn-add::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:var(--tap);min-width:var(--tap);}

/* FICHA DE PRODUCTO (vista detalle dentro de #tienda) — 25-ago-2026 */
/* ⚠️ #tienda-detail-view{display:none} es lo que mantiene la ficha cerrada
   hasta que showFicha() la abre. No se puede perder. */
#tienda-detail-view{display:none;}
.detail-crumb{background:none;border:none;color:var(--orange);font-size:0.82rem;font-weight:700;cursor:pointer;margin-bottom:18px;padding:10px 0;}
.p-hero{display:grid;grid-template-columns:1fr;gap:20px;margin-bottom:32px;}
.p-hero-img{position:relative;border-radius:var(--rlg);overflow:hidden;min-height:240px;display:flex;align-items:center;justify-content:center;font-size:4rem;}
.p-hero-img img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;}
.p-hero-em{position:relative;z-index:2;}
.p-hero-content{display:flex;flex-direction:column;}
.p-cat{font-size:0.68rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--orange);margin-bottom:8px;}
.p-name{font-family:var(--fd);font-size:clamp(1.5rem,6vw,2.2rem);font-weight:700;color:var(--charcoal);margin-bottom:12px;line-height:1.2;}
.p-tagline{font-size:0.95rem;color:var(--charcoal-mid);line-height:1.7;margin-bottom:16px;font-weight:300;}
.p-tagline .hl{color:var(--orange);font-weight:600;}
.p-tagline .hl.gr{color:var(--green-deep);}
.p-objtags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px;}
.p-objtag{font-size:0.68rem;font-weight:600;padding:4px 12px;border-radius:50px;background:var(--cream-dark);color:var(--charcoal-mid);}
.p-price-row{margin-bottom:16px;}
.p-price{font-family:var(--fd);font-size:1.7rem;font-weight:700;color:var(--charcoal);}
.p-price small{font-size:0.68rem;font-family:var(--fb);color:var(--gray);font-weight:400;display:block;}
/* En celular el botón de comprar ocupa el ancho completo debajo del
   selector de cantidad, en vez de pelear por espacio en la misma línea. */
.ficha-qty-row{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap;}
.ficha-qty-box{display:flex;align-items:center;gap:10px;border:1.5px solid var(--border);border-radius:50px;padding:6px 8px;}
.btn-add-p{flex:1 1 100%;min-width:0;padding:16px 24px;border-radius:50px;background:var(--orange);color:white;border:none;font-size:0.95rem;font-weight:700;cursor:pointer;transition:all var(--t);box-shadow:var(--shadow-or);}
.btn-add-p:disabled{opacity:0.5;cursor:not-allowed;background:var(--gray-light);box-shadow:none;transform:none;}
.p-footnote{font-size:0.72rem;color:var(--gray);}

.p-sec{margin-bottom:32px;}
.p-sec-title{font-family:var(--fd);font-size:1.15rem;font-weight:700;color:var(--charcoal);margin-bottom:14px;}
.acc-list{display:flex;flex-direction:column;gap:8px;}
.acc-item{border:1px solid var(--border);border-radius:var(--rmd);overflow:hidden;background:var(--white);}
.acc-head{display:flex;align-items:center;gap:12px;padding:15px 16px;cursor:pointer;font-size:0.87rem;font-weight:600;color:var(--charcoal);}
.acc-num{font-family:var(--fd);font-size:0.8rem;color:var(--orange);font-weight:700;flex-shrink:0;}
.acc-arrow{margin-left:auto;transition:transform var(--t);color:var(--gray);}
.acc-item.open .acc-arrow{transform:rotate(180deg);}
.acc-body{max-height:0;overflow:hidden;transition:max-height var(--t);}
/* En pantalla angosta el mismo texto ocupa más renglones: con el tope de
   200px de antes, los beneficios largos quedaban cortados al desplegarse. */
.acc-item.open .acc-body{max-height:420px;}
.acc-body p{padding:0 16px 16px 34px;font-size:0.8rem;color:var(--gray);line-height:1.7;}

.dose-band{background:var(--charcoal);border-radius:var(--rlg);padding:22px 20px;margin-bottom:32px;text-align:center;}
.dose-eyebrow{font-size:0.68rem;font-weight:800;letter-spacing:0.14em;text-transform:uppercase;color:var(--orange);margin-bottom:8px;}
.dose-text{font-family:var(--fd);font-size:1.05rem;color:white;line-height:1.5;}

.ingr-story-grid{display:grid;grid-template-columns:1fr;gap:20px;justify-items:center;text-align:center;align-items:start;}
.ingr-photo-wrap{width:140px;height:140px;border-radius:50%;background:var(--orange-pale);display:flex;align-items:center;justify-content:center;padding:24px;flex-shrink:0;}
.ingr-photo-wrap svg{width:100%;height:100%;}
.ingr-story-name{font-family:var(--fd);font-size:1.15rem;font-weight:700;color:var(--charcoal);margin-bottom:8px;}
.ingr-story-desc{font-size:0.87rem;color:var(--charcoal-mid);line-height:1.75;margin:10px 0;}
.ingr-story-ben{padding-left:18px;margin-bottom:8px;text-align:left;}
.ingr-story-ben li{font-size:0.8rem;color:var(--gray);line-height:1.7;}
.ingr-story-prec{font-size:0.74rem;color:#92400E;background:#FEF3C7;padding:8px 12px;border-radius:8px;display:inline-block;}

.comp-list{border:1px solid var(--border);border-radius:var(--rmd);overflow:hidden;margin-bottom:12px;}
.comp-row{display:flex;align-items:center;gap:10px;padding:11px 14px;font-size:0.83rem;border-bottom:1px solid var(--border);}
.comp-row:last-child{border-bottom:none;}
.comp-dot{width:6px;height:6px;border-radius:50%;background:var(--green);flex-shrink:0;}
.comp-name{flex:1;color:var(--charcoal-mid);}
.comp-amt{font-weight:700;color:var(--charcoal);}
.comp-nota{font-size:0.74rem;color:var(--gray);line-height:1.6;margin-bottom:8px;font-style:italic;}
.comp-alerg{font-size:0.76rem;color:var(--charcoal-mid);}

.razones-band{background:var(--green-deep);border-radius:var(--rlg);padding:24px 20px;margin-bottom:32px;}
.razones-grid{display:grid;grid-template-columns:1fr;gap:12px;margin-top:14px;}
.razon-card{background:rgba(255,255,255,0.08);border-radius:var(--rmd);padding:16px;}
.razon-badge{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:white;color:var(--green-deep);font-family:var(--fd);font-weight:700;font-size:0.85rem;margin-bottom:10px;}
.razon-card p{font-size:0.8rem;color:rgba(255,255,255,0.88);line-height:1.65;}

.xsell-row{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;padding-bottom:6px;}
.xsell-row::-webkit-scrollbar{display:none;}
.xsell-card{min-width:150px;max-width:150px;flex-shrink:0;cursor:pointer;background:var(--cream);border:1px solid var(--border);border-radius:var(--rmd);overflow:hidden;transition:transform var(--t);}
.xsell-img{height:96px;display:flex;align-items:center;justify-content:center;font-size:2rem;position:relative;overflow:hidden;}
.xsell-img img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;}
.xsell-name{font-size:0.76rem;font-weight:600;color:var(--charcoal);padding:10px 12px 2px;line-height:1.3;}
.xsell-price{font-family:var(--fd);font-size:0.86rem;font-weight:700;color:var(--orange);padding:0 12px 10px;}

@media (hover:hover){
  .tab-btn:hover{background:var(--orange);color:white;border-color:var(--orange);}
  .prod-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
  .btn-add:hover{background:var(--orange-h);}
  .detail-crumb:hover{text-decoration:underline;}
  .btn-add-p:hover{background:var(--orange-h);transform:translateY(-2px);}
  .btn-add-p:disabled:hover{transform:none;background:var(--gray-light);}
  .xsell-card:hover{transform:translateY(-3px);}
}

/* ── min-width:480px ────────────────────────────────────────────── */
@media (min-width:480px){
  .prod-grid{gap:16px;}
  .prod-img{height:148px;}
  .prod-body{padding:16px;}
  .prod-name{font-size:0.92rem;}
  .xsell-card{min-width:160px;max-width:160px;}
  .xsell-img{height:100px;}
}

/* ── min-width:768px — tablet ───────────────────────────────────── */
@media (min-width:768px){
  .tienda-tabs{flex-wrap:wrap;overflow-x:visible;margin-bottom:36px;}
  .dose-band{padding:28px 32px;margin-bottom:44px;}
  .dose-text{font-size:1.15rem;}
  .razones-band{padding:36px 32px;margin-bottom:44px;}
  .razones-grid{grid-template-columns:repeat(3,1fr);gap:16px;}
  .razon-card{padding:18px;}
  .p-sec{margin-bottom:44px;}
  .p-sec-title{font-size:1.25rem;margin-bottom:18px;}
  .acc-head{padding:14px 18px;}
  .acc-body p{padding:0 18px 16px 42px;}
  .acc-item.open .acc-body{max-height:200px;}
  .ingr-story-grid{grid-template-columns:160px 1fr;gap:32px;justify-items:stretch;text-align:left;}
  .ingr-photo-wrap{width:160px;height:160px;padding:28px;}
  .p-tagline{font-size:1rem;}
  .xsell-row{gap:14px;}
}

/* ── min-width:1024px — escritorio ──────────────────────────────── */
/* Vuelven los cuatro productos por fila y la ficha en dos columnas, con
   los valores originales: en escritorio no cambia nada. */
@media (min-width:1024px){
  .prod-grid{grid-template-columns:repeat(4,1fr);}
  .p-hero{grid-template-columns:380px 1fr;gap:40px;margin-bottom:48px;}
  .p-hero-img{min-height:330px;}
  .p-name{font-size:clamp(1.6rem,3vw,2.2rem);}
  .detail-crumb{margin-bottom:24px;padding:6px 0;}
  .ficha-qty-box{padding:4px 6px;}
  .btn-add-p{flex:1 1 auto;min-width:220px;padding:15px 24px;font-size:0.92rem;}
}

/* INGREDIENTES */
#ingredientes{background:var(--cream-dark);}
.ingr-grid{display:grid;grid-template-columns:1fr;gap:14px;}
.ingr-card{background:var(--white);border:1px solid var(--border);border-radius:var(--rlg);padding:20px;box-shadow:var(--shadow-sm);cursor:pointer;transition:all var(--t);}
.ingr-em{font-size:2rem;margin-bottom:12px;}
.ingr-name{font-family:var(--fd);font-size:1.05rem;font-weight:700;color:var(--charcoal);margin-bottom:6px;}
.ingr-desc{font-size:0.78rem;color:var(--gray);line-height:1.65;margin-bottom:14px;}
.ingr-tags{display:flex;flex-wrap:wrap;gap:4px;}
.ingr-tag{font-size:0.64rem;font-weight:600;padding:3px 9px;border-radius:50px;background:var(--orange-pale);color:var(--orange);}
#ingr-modal{display:none;position:fixed;inset:0;z-index:500;align-items:center;justify-content:center;padding:12px;}
#ingr-modal.open{display:flex;}
.im-overlay{position:absolute;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);}
.im-box{position:relative;background:var(--white);border-radius:var(--rlg);padding:24px 20px;max-width:560px;width:100%;max-height:90vh;overflow-y:auto;z-index:1;box-shadow:var(--shadow-lg);}
.im-close{position:absolute;top:12px;right:12px;background:var(--cream);border:none;width:38px;height:38px;border-radius:50%;font-size:1rem;cursor:pointer;}
.im-em{font-size:3rem;margin-bottom:16px;}
.im-name{font-family:var(--fd);font-size:1.45rem;font-weight:700;color:var(--charcoal);margin-bottom:8px;}
.im-sec{margin-bottom:18px;}
.im-sec h4{font-size:0.72rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--orange);margin-bottom:8px;}
.im-sec p,.im-sec li{font-size:0.87rem;color:var(--charcoal-mid);line-height:1.75;}
.im-sec ul{padding-left:18px;}
.im-sec li{margin-bottom:4px;}
.ev-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:50px;font-size:0.72rem;font-weight:700;}
.ev-high{background:#D1FAE5;color:#065F46;}
.ev-mid{background:#FEF3C7;color:#92400E;}
.im-prods{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.im-prod{font-size:0.72rem;font-weight:500;padding:4px 12px;border-radius:50px;background:var(--cream-dark);color:var(--charcoal-mid);}

/* PROTOCOLOS */
#protocolos{background:var(--white);}
.proto-cards{display:grid;grid-template-columns:1fr;gap:14px;}
.proto-card{background:var(--cream);border:1px solid var(--border);border-radius:var(--rlg);padding:20px;cursor:pointer;transition:all var(--t);}
.pc-icon{font-size:2rem;margin-bottom:12px;}
.pc-name{font-family:var(--fd);font-size:1rem;font-weight:700;color:var(--charcoal);margin-bottom:6px;}
.pc-desc{font-size:0.78rem;color:var(--gray);line-height:1.65;margin-bottom:14px;}
.pc-btn{font-size:0.75rem;font-weight:700;color:var(--orange);display:flex;align-items:center;gap:4px;}
#proto-modal{display:none;position:fixed;inset:0;z-index:500;align-items:center;justify-content:center;padding:12px;}
#proto-modal.open{display:flex;}
.pm-overlay{position:absolute;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);}
.pm-box{position:relative;background:var(--white);border-radius:var(--rlg);padding:24px 20px;max-width:640px;width:100%;max-height:90vh;overflow-y:auto;z-index:1;box-shadow:var(--shadow-lg);}
.pm-close{position:absolute;top:12px;right:12px;background:var(--cream);border:none;width:38px;height:38px;border-radius:50%;font-size:1rem;cursor:pointer;}
.pm-icon{font-size:2.8rem;margin-bottom:14px;}
.pm-name{font-family:var(--fd);font-size:1.45rem;font-weight:700;color:var(--charcoal);margin-bottom:16px;}
.pb{margin-bottom:20px;}
.pb h4{font-size:0.7rem;font-weight:800;letter-spacing:0.14em;text-transform:uppercase;color:var(--orange);margin-bottom:8px;}
.pb p,.pb li{font-size:0.86rem;color:var(--charcoal-mid);line-height:1.75;}
.pb ul{padding-left:16px;}
.pb li{margin-bottom:4px;}
.pp-list{display:flex;flex-direction:column;gap:8px;}
.pp-item{display:flex;align-items:center;gap:10px;background:var(--cream);border-radius:var(--rsm);padding:10px 14px;}
.pp-em{font-size:1.2rem;}
.pp-name{font-size:0.82rem;font-weight:600;color:var(--charcoal);}
.pp-role{font-size:0.72rem;color:var(--orange);font-weight:600;}
.pm-warn{background:#FEF3C7;border-left:3px solid #F59E0B;border-radius:0 var(--rsm) var(--rsm) 0;padding:10px 14px;font-size:0.78rem;color:#92400E;margin-top:16px;}
.pm-add{width:100%;padding:14px;background:var(--orange);color:white;border:none;border-radius:var(--rmd);font-size:0.9rem;font-weight:700;cursor:pointer;margin-top:16px;transition:all var(--t);display:flex;align-items:center;justify-content:center;gap:8px;}

/* SOBRE MI */
#sobre-mi{background:var(--cream-dark);}
.sobre-grid{display:grid;grid-template-columns:1fr;gap:36px;align-items:center;}
.sobre-visual{position:relative;}
.sobre-avatar{width:100%;max-width:240px;margin:0 auto;aspect-ratio:3/4;border-radius:var(--rxl);background:linear-gradient(145deg,var(--orange-pale),var(--cream-dark));display:flex;align-items:center;justify-content:center;font-size:6rem;position:relative;overflow:hidden;}
.sobre-avatar::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0,transparent 32px,rgba(139,99,64,0.05) 32px,rgba(139,99,64,0.05) 36px);}
.sobre-stat{position:absolute;bottom:-10px;right:-8px;background:var(--orange);color:white;padding:18px 20px;border-radius:var(--rmd);box-shadow:var(--shadow-or);text-align:center;}
.sobre-stat strong{display:block;font-size:2rem;font-weight:700;font-family:var(--fd);line-height:1;}
.sobre-stat small{font-size:0.68rem;opacity:0.85;}
.sobre-name{font-family:var(--fs);font-size:1.3rem;color:var(--orange);margin-bottom:3px;}
.sobre-role{font-size:0.72rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--green);margin-bottom:20px;}
.sobre-text{font-size:0.95rem;color:var(--gray);line-height:1.85;font-weight:300;margin-bottom:12px;}
.vals-grid{display:grid;grid-template-columns:1fr;gap:12px;margin:24px 0;}
.val-card{background:var(--white);border-radius:var(--rmd);padding:18px;border:1px solid var(--border);}
.val-icon{font-size:1.3rem;margin-bottom:7px;}
.val-name{font-size:0.82rem;font-weight:700;color:var(--charcoal);margin-bottom:3px;}
.val-text{font-size:0.74rem;color:var(--gray);line-height:1.6;}
.creds{display:flex;gap:8px;flex-wrap:wrap;}
.cred{font-size:0.72rem;font-weight:600;padding:6px 14px;border-radius:50px;background:var(--orange-pale);border:1px solid rgba(232,82,26,0.2);color:var(--orange);}

/* CONTACTO */
#contacto{background:var(--charcoal);}
.cnt-grid{display:grid;grid-template-columns:1fr;gap:36px;align-items:start;}
.cnt-form{background:var(--white);border-radius:var(--rlg);padding:24px 20px;box-shadow:0 20px 60px rgba(0,0,0,0.22);}
.cnt-form-title{font-family:var(--fd);font-size:1.35rem;color:var(--charcoal);margin-bottom:4px;}
.cnt-form-sub{font-size:0.78rem;color:var(--gray);margin-bottom:24px;}
.cf-grp{margin-bottom:16px;}
.cf-lbl{display:block;font-size:0.75rem;font-weight:700;color:var(--charcoal);margin-bottom:6px;}
.cf-inp{width:100%;padding:13px 14px;border:1.5px solid rgba(30,30,30,0.13);border-radius:var(--rsm);font-family:var(--fb);font-size:16px;color:var(--charcoal);background:var(--cream);outline:none;transition:border-color var(--t),background var(--t);}
.cf-inp:focus{border-color:var(--orange);background:white;box-shadow:0 0 0 3px rgba(232,82,26,0.08);}
.cf-row{display:grid;grid-template-columns:1fr;gap:0;}
.btn-sub{width:100%;padding:14px;background:var(--orange);color:white;border:none;border-radius:var(--rmd);font-size:0.95rem;font-weight:700;cursor:pointer;transition:all var(--t);margin-top:4px;}
.cf-note{font-size:0.68rem;color:var(--gray);text-align:center;margin-top:8px;}
.c-methods{display:flex;flex-direction:column;gap:10px;margin-top:32px;}
.c-method{display:flex;align-items:center;gap:12px;padding:13px 16px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);border-radius:var(--rmd);transition:background var(--t);}
.c-icon{width:38px;height:38px;background:rgba(232,82,26,0.18);border-radius:var(--rsm);display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0;}
.c-lbl{font-size:0.78rem;font-weight:700;color:white;margin-bottom:1px;}
.c-val{font-size:0.72rem;color:rgba(255,255,255,0.45);}
.btn-wa{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:16px;background:#25D366;color:white;border:none;border-radius:var(--rmd);font-size:0.95rem;font-weight:700;cursor:pointer;margin-top:18px;transition:all var(--t);box-shadow:0 4px 18px rgba(37,211,102,0.28);}


/* ═══ PASO 6 — Tratamientos, Ingredientes, Protocolos, Sobre mí, Contacto ═══
   Los hover solo donde hay mouse, y de min-width para arriba se restauran
   los valores originales del sitio: en escritorio no cambia nada. */
@media (hover:hover){
  .trat-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);}
  .ingr-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:rgba(232,82,26,0.25);}
  .proto-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);background:var(--white);}
  .pm-add:hover{background:var(--orange-h);transform:translateY(-1px);}
  .btn-sub:hover{background:var(--orange-h);transform:translateY(-1px);box-shadow:var(--shadow-or);}
  .c-method:hover{background:rgba(255,255,255,0.09);}
  .btn-wa:hover{background:#1fb558;transform:translateY(-2px);}
}
@media (min-width:480px){
  section{padding:64px 20px;}
  .cf-row{grid-template-columns:1fr 1fr;gap:12px;}
  .vals-grid{grid-template-columns:1fr 1fr;}
}
@media (min-width:768px){
  section{padding:88px 24px;}
  .trat-grid{grid-template-columns:1fr 1fr;gap:22px;}
  .trat-card{padding:40px 36px;}
  .trat-title{font-size:1.45rem;}
  .ingr-grid{grid-template-columns:repeat(2,1fr);gap:18px;}
  .ingr-card{padding:28px;}
  .proto-cards{grid-template-columns:repeat(2,1fr);gap:18px;}
  .proto-card{padding:28px;}
  #ingr-modal,#proto-modal{padding:20px;}
  .im-box,.pm-box{border-radius:var(--rxl);padding:40px;}
  .im-name,.pm-name{font-size:1.8rem;}
  .im-close,.pm-close{top:16px;right:16px;width:32px;height:32px;}
  .sobre-grid{grid-template-columns:1fr 1.5fr;gap:72px;}
  .sobre-avatar{max-width:340px;margin:0;}
  .sobre-stat{bottom:-14px;right:-16px;}
  .vals-grid{margin:28px 0;}
  .cnt-grid{grid-template-columns:1fr 1fr;gap:72px;}
  .cnt-form{padding:40px;}
  .cf-inp{font-size:0.87rem;padding:11px 14px;}
}
@media (min-width:1024px){
  .ingr-grid{grid-template-columns:repeat(3,1fr);}
  .proto-cards{grid-template-columns:repeat(3,1fr);}
}

/* CART */
#cart-fab{position:fixed;bottom:calc(18px + env(safe-area-inset-bottom,0px));right:18px;z-index:300;width:56px;height:56px;border-radius:50%;background:var(--orange);color:white;display:flex;align-items:center;justify-content:center;font-size:1.35rem;cursor:pointer;box-shadow:var(--shadow-or);transition:transform var(--t);animation:popIn 0.5s cubic-bezier(0.34,1.56,0.64,1) 1s both;}
@keyframes popIn{from{transform:scale(0);opacity:0;}to{transform:scale(1);opacity:1;}}
#cart-badge{position:absolute;top:-4px;right:-4px;background:#DC2626;color:white;font-size:0.58rem;font-weight:800;width:18px;height:18px;border-radius:50%;display:none;align-items:center;justify-content:center;}
#cart-overlay{display:none;position:fixed;inset:0;z-index:400;background:rgba(0,0,0,0.55);backdrop-filter:blur(4px);}
#cart-panel{display:none;position:fixed;top:0;right:0;bottom:0;width:100%;max-width:100%;z-index:401;background:var(--white);box-shadow:-6px 0 48px rgba(0,0,0,0.18);flex-direction:column;overflow:hidden;animation:slideIn 0.3s ease;}
@keyframes slideIn{from{transform:translateX(100%);}to{transform:none;}}
.cart-head{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
.cart-head-title{font-family:var(--fd);font-size:1.1rem;font-weight:700;color:var(--charcoal);}
.cart-head-cnt{font-size:0.72rem;color:var(--gray);}
.cart-close{background:var(--cream);border:none;width:40px;height:40px;border-radius:50%;font-size:1rem;cursor:pointer;}
#cart-items{flex:1;overflow-y:auto;padding:12px 16px;}
#cart-items::-webkit-scrollbar{width:3px;}
#cart-items::-webkit-scrollbar-thumb{background:rgba(30,30,30,0.12);border-radius:3px;}
.cart-empty{text-align:center;padding:44px 20px;}
.cart-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid rgba(30,30,30,0.06);}
.cr-em{width:42px;height:42px;background:var(--cream);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0;}
.cr-info{flex:1;min-width:0;}
.cr-name{font-size:0.78rem;font-weight:600;color:var(--charcoal);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cr-unit{font-size:0.7rem;color:var(--gray);}
.cr-qty{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.qty-btn{position:relative;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--border);background:white;font-size:0.9rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color var(--t);}
.qty-btn::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:var(--tap);height:var(--tap);}
.qty-n{font-size:0.85rem;font-weight:700;min-width:16px;text-align:center;}
.cr-total{font-size:0.85rem;font-weight:700;color:var(--charcoal);min-width:58px;text-align:right;flex-shrink:0;}
.cr-rm{position:relative;background:none;border:none;color:var(--gray-light);font-size:1.05rem;cursor:pointer;padding:6px;flex-shrink:0;}
.cr-rm::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:var(--tap);height:var(--tap);}
.cart-footer{padding:14px 16px;border-top:1px solid var(--border);flex-shrink:0;background:var(--white);display:flex;flex-direction:column;gap:10px;}

/* CART — pasos (Productos / Datos de envío) */
.cart-steps-bar{display:flex;border-bottom:1px solid var(--border);flex-shrink:0;}
.step-tab{flex:1;padding:15px 12px;background:var(--cream);border:none;font-size:0.78rem;font-weight:700;color:var(--gray);cursor:pointer;transition:all var(--t);border-bottom:2px solid transparent;}
.step-tab.active{color:var(--orange);border-bottom-color:var(--orange);background:var(--white);}
.step-tab:disabled{opacity:0.4;cursor:not-allowed;}
.cart-step-content{display:none;flex-direction:column;flex:1;min-height:0;}
.cart-step-content.active{display:flex;}
.buyer-form{flex:1;overflow-y:auto;padding:12px 16px;}
.buyer-form::-webkit-scrollbar{width:3px;}
.buyer-form::-webkit-scrollbar-thumb{background:rgba(30,30,30,0.12);border-radius:3px;}
.form-title{font-weight:600;margin-bottom:12px;font-size:0.88rem;color:var(--charcoal);}
.btn-primary{width:100%;padding:14px;background:var(--orange);color:white;border:none;border-radius:var(--rmd);font-family:var(--fb);font-size:0.92rem;font-weight:700;cursor:pointer;transition:all var(--t);}
.btn-secondary{width:100%;padding:12px;background:var(--cream);color:var(--charcoal);border:1.5px solid var(--border);border-radius:var(--rmd);font-family:var(--fb);font-size:0.86rem;font-weight:600;cursor:pointer;transition:all var(--t);}

/* CART — cupón, desglose de precio y envío */
.gn-coupon-row{display:flex;gap:6px;}
.gn-coupon-row .ch-inp{flex:1;margin-bottom:0;}
.btn-coupon{padding:0 18px;min-height:var(--tap);background:var(--charcoal);color:white;border:none;border-radius:8px;font-size:0.78rem;font-weight:700;cursor:pointer;white-space:nowrap;}
.gn-coupon-msg{font-size:0.7rem;min-height:1em;}
.gn-breakdown{font-size:0.76rem;color:var(--gray);}
.gn-breakdown-row{display:flex;justify-content:space-between;margin-bottom:3px;}
.gn-discount-row{display:none;color:var(--green);}
.gn-discount-row.show{display:flex;}
.gn-shipping-box{font-size:0.72rem;color:var(--charcoal-mid);background:var(--cream);border-radius:8px;padding:8px 12px;margin:4px 0 2px;min-height:1em;}
.cart-total-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
.cart-total-lbl{font-size:0.82rem;color:var(--gray);}
.cart-total-val{font-family:var(--fd);font-size:1.3rem;font-weight:700;color:var(--charcoal);}
.ch-fields{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;}
.ch-inp{padding:12px 13px;border:1.5px solid rgba(30,30,30,0.13);border-radius:8px;font-family:var(--fb);font-size:16px;color:var(--charcoal);background:var(--cream);outline:none;transition:border-color var(--t);}
.ch-inp:focus{border-color:var(--orange);background:white;}
.pago-row{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:10px;}
.pago-opt{display:flex;align-items:center;gap:9px;padding:13px 12px;border:1.5px solid var(--border);border-radius:8px;cursor:pointer;font-size:0.76rem;font-weight:500;transition:border-color var(--t);}
.pago-opt input{accent-color:var(--orange);}
.pago-info{background:var(--cream);border-radius:8px;padding:10px 12px;font-size:0.72rem;color:var(--charcoal-mid);line-height:1.65;margin-bottom:10px;}
.pago-info strong{color:var(--charcoal);}
.pago-mp{display:none;background:#EFF6FF;border-radius:8px;padding:10px 12px;font-size:0.72rem;color:#1E40AF;line-height:1.65;margin-bottom:10px;}
.btn-confirm{width:100%;padding:14px;background:var(--orange);color:white;border:none;border-radius:var(--rmd);font-family:var(--fb);font-size:0.92rem;font-weight:700;cursor:pointer;transition:all var(--t);display:flex;align-items:center;justify-content:center;gap:8px;}
.cart-note{font-size:0.64rem;color:var(--gray);text-align:center;margin-top:6px;}

/* FOOTER */
footer{background:#111;padding:26px 16px;}
.foot-inner{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:space-between;flex-wrap:wrap;gap:14px;}
.foot-logo{font-family:var(--fs);font-size:1.5rem;color:var(--orange);}
.foot-wya{font-size:0.58rem;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--green);}
.foot-copy{font-size:0.68rem;color:rgba(255,255,255,0.22);text-align:center;line-height:1.6;}


/* ═══ PASO 7 — Carrito, footer y toast ═══════════════════════════════
   ⚠️ Las reglas de las que depende el checkout NO se tocan:
      .cart-step-content{display:none} + .cart-step-content.active{display:flex}
      son las que hacen aparecer el paso 2 (Datos de envío).
   De min-width para arriba vuelven los valores originales del sitio. */
@media (hover:hover){
  #cart-fab:hover{transform:scale(1.1);}
  .qty-btn:hover{border-color:var(--orange);}
  .step-tab:hover:not(:disabled){color:var(--orange);}
  .btn-primary:hover{background:var(--orange-h);}
  .btn-secondary:hover{border-color:var(--orange);color:var(--orange);}
  .btn-coupon:hover{background:var(--charcoal-mid);}
  .btn-confirm:hover{background:var(--orange-h);}
}
@media (min-width:480px){
  .pago-row{grid-template-columns:1fr 1fr;}
  .frow{grid-template-columns:1fr 1fr;gap:12px;}
}
@media (min-width:768px){
  #cart-panel{max-width:460px;}
  #cart-fab{bottom:26px;right:26px;}
  .cart-head{padding:18px 22px;}
  #cart-items{padding:14px 22px;}
  .cart-footer{padding:18px 22px;}
  .buyer-form{padding:14px 22px;}
  .cart-close{width:32px;height:32px;}
  .qty-btn{width:24px;height:24px;}
  .cr-rm{font-size:0.95rem;padding:3px;}
  .step-tab{padding:12px;}
  .ch-inp{font-size:0.83rem;padding:10px 13px;}
  .pago-opt{padding:9px 11px;gap:7px;}
  .btn-coupon{padding:0 16px;min-height:0;}
  footer{padding:32px 24px;}
  .foot-inner{flex-direction:row;text-align:left;}
  .foot-copy{text-align:right;}
}

/* TOAST */
#toast{display:none;position:fixed;bottom:26px;left:50%;transform:translateX(-50%);z-index:999;background:var(--charcoal);color:white;padding:12px 22px;border-radius:50px;font-size:0.82rem;font-weight:600;box-shadow:0 6px 24px rgba(0,0,0,0.25);border-left:4px solid var(--orange);white-space:nowrap;animation:toastIn 0.3s ease;}
@keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(12px);}to{opacity:1;transform:translateX(-50%) translateY(0);}}
@keyframes spin{to{transform:rotate(360deg);}}

/* Multi-objective selector */
.obj-opt{display:flex;align-items:center;gap:8px;padding:9px 12px;background:rgba(255,255,255,0.06);border:1.5px solid rgba(255,255,255,0.1);border-radius:var(--rsm);cursor:pointer;font-size:0.78rem;color:rgba(255,255,255,0.7);transition:all var(--t);user-select:none;}
.obj-opt.selected{background:rgba(232,82,26,0.2);border-color:var(--orange);color:white;font-weight:600;}
.obj-opt input[type=checkbox]{accent-color:var(--orange);width:16px;height:16px;flex-shrink:0;}
/* Una sola columna de objetivos en celular; desde 480px vuelve la grilla
   que define index.html. */
#obj-grid{grid-template-columns:1fr;}
@media (min-width:480px){#obj-grid{grid-template-columns:1fr 1fr;}}

/* RESPONSIVE — el esquema viejo de max-width se eliminó en el Paso 8
   (31-ago-2026). Todas sus reglas viven ahora en los bloques min-width
   de cada sección. Solo queda la preferencia de menos animación. */
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;}*{transition-duration:0.01ms!important;}}

/* ============================================================
   UX TANDA 2 (8-sep-2026) — tarjeta de producto del catalogo
   Puntos 3, 4 y 7 de claude/AUDITORIA_UX_UI_SEP.md.
   Va al final a proposito: no modifica ninguna regla anterior,
   y se revierte borrando el bloque entero.
   Detalle y verificacion en claude/PLAN_UX_TANDA_2.md
   ============================================================ */

/* Naranja SOLO para texto chico sobre fondo claro: 5,14:1 (WCAG AA).
   El #E8521A de marca no se toca: sigue en fondos, botones y logo. */
:root{ --orange-txt:#C4400F; }

/* Piso de legibilidad de 12px en toda la tarjeta */
.prod-cat{ font-size:.75rem; color:var(--orange-txt); letter-spacing:.08em; margin-bottom:5px; }
.prod-name{ font-size:.95rem; line-height:1.35; margin-bottom:6px; min-height:2.7em; }
.prod-desc{ font-size:.8125rem; line-height:1.5; flex:0 0 auto; margin-bottom:8px;
            display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
            overflow:hidden; min-height:4.5em; }
.prod-price small{ font-size:.75rem; }
.ptag{ font-size:.75rem; padding:4px 9px; }
.btn-add{ font-size:.8125rem; padding:11px 16px; }

/* La tarjeta ya abre la ficha con su propio onclick: esto es solo el
   indicio visual que faltaba. Sin JS y sin tocar app.js. */
.prod-footer{ margin-top:auto; }
.prod-footer::before{ content:"Ver detalle \2192"; order:-1; flex:1 1 100%;
                      font-size:.75rem; font-weight:700; color:var(--charcoal);
                      text-decoration:underline; text-underline-offset:3px;
                      text-decoration-thickness:1px; margin-bottom:10px; }

/* En mobile el boton ya caia a un renglon propio: que lo ocupe entero */
.prod-footer > .btn-add{ flex:1 1 100%; }
@media (min-width:480px){ .prod-footer > .btn-add{ flex:0 0 auto; } }


/* ══════════════════════════════════════════════════════════════
   TANDA 3 DE UX — la franja "TOP VENTAS" se oculta al bajar
   Bloque agregado al final a proposito: no modifica ninguna regla
   anterior, y revertirlo es borrarlo entero.
   El JS que pone y saca la clase esta al final de app.js.
   Medido el 10-sep-2026: el nav (69px) y esta franja (47px) dejaban
   116px fijos permanentes, ~14% de la pantalla de un telefono.
   ══════════════════════════════════════════════════════════════ */
#nav-strip{
  transition: transform .28s ease, opacity .28s ease;
  will-change: transform;
}
#nav-strip.ns-oculto{
  transform: translateY(-115%);
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce){
  #nav-strip{ transition: none; }
}

/* ===============================================================
   FICHA DE PRODUCTO: CONTEXTO Y SALIDA (10-sep-2026)
   Problema medido: la unica salida de la ficha era un texto de
   13 px arriba de todo, y la ficha mide 2.248 px. Al bajar no
   quedaba nada para volver, y "Tienda" del menu no cerraba la ficha.
   Este bloque estila:
     #gn-ctx         la barra de contexto pegajosa (migas de pan)
     .gn-volver-fin  el boton de volver al final de la ficha
     .detail-crumb   el crumb de arriba, ahora con area tactil de 44 px
   Mobile first: la base es la del telefono. Desde 768 px la barra
   ocupa el lugar de la franja TOP VENTAS, que se oculta mientras
   haya una ficha abierta; en el telefono la franja NO es pegajosa,
   asi que se la deja donde esta para no mover nada de lugar.
   Bloque autonomo: se borra entero y todo vuelve a como estaba.
   =============================================================== */
#gn-ctx{
  position:sticky; top:var(--nav-h); z-index:180;
  display:flex; align-items:center; gap:4px;
  min-height:var(--tap);
  padding:0 12px;
  background:var(--white);
  border-bottom:1px solid var(--border);
  font-family:var(--fb); font-size:0.78rem;
  white-space:nowrap; overflow-x:auto; scrollbar-width:none;
}
#gn-ctx::-webkit-scrollbar{ display:none; }
#gn-ctx button{
  background:none; border:0; margin:0; padding:11px 4px;
  font:inherit; font-weight:700; color:var(--orange-txt);
  cursor:pointer; white-space:nowrap;
}
#gn-ctx .gn-ctx-back{ display:inline-flex; align-items:center; gap:5px; padding-left:0; }
#gn-ctx .gn-ctx-sep{ color:var(--gray); padding:0 2px; }
#gn-ctx .gn-ctx-prod{
  color:var(--charcoal-mid); font-weight:600;
  max-width:42vw; overflow:hidden; text-overflow:ellipsis;
}
#gn-ctx button:hover{ text-decoration:underline; }

/* El crumb que ya estaba arriba de la ficha: mismo texto, area de dedo */
.detail-crumb{ display:inline-flex; align-items:center; min-height:var(--tap); }

/* Salida al pie de la ficha, donde el contenido termina */
.gn-volver-fin{
  display:block; width:100%;
  min-height:var(--tap);
  margin:8px 0 4px;
  padding:12px 18px;
  background:none;
  border:1.5px solid var(--orange);
  border-radius:50px;
  font-family:var(--fb); font-size:0.9rem; font-weight:700;
  color:var(--orange-txt);
  cursor:pointer;
  transition:background var(--t), color var(--t);
}
.gn-volver-fin:hover{ background:var(--orange); color:var(--white); }

@media (min-width:768px){
  #nav-strip.gn-strip-off{ display:none; }
  #gn-ctx{ padding:0 24px; font-size:0.82rem; }
  #gn-ctx .gn-ctx-prod{ max-width:none; }
  .gn-volver-fin{ width:auto; min-width:260px; }
}
@media (prefers-reduced-motion: reduce){
  .gn-volver-fin{ transition:none; }
}

/* ══ PREGUNTAS FRECUENTES (23-sep-2026, Tanda A de PLAN_LEGALES_TANDA_2.md) ══════
   Bloque nuevo AL FINAL del archivo, como manda la regla del Proyecto: revertirlo
   es borrarlo. Todo cuelga de #faq o de .faq-*, asi que no puede alcanzar a
   ninguna otra seccion. Verificado antes de escribir: el sitio no usaba
   <details> ni <summary> en ningun lado, asi que estas reglas no pisan nada.
   Mobile-first, igual que el resto del archivo. */
#faq{ background:var(--white); }
.faq-list{ max-width:760px; margin:0 auto; }

.faq-item{
  border:1px solid var(--border); border-radius:var(--rmd);
  background:var(--cream); margin-bottom:10px; overflow:hidden;
}
.faq-item[open]{ background:var(--white); border-color:rgba(232,82,26,0.30); }

/* <summary> trae marcador propio en cada navegador: se apaga por los dos caminos */
.faq-q{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  min-height:44px; padding:14px 16px;          /* 44px = minimo tactil del Proyecto */
  font-family:var(--fd); font-size:1rem; font-weight:700; line-height:1.4;
  color:var(--charcoal);
}
.faq-q::-webkit-details-marker{ display:none; }
.faq-q::after{
  content:'+'; flex-shrink:0;
  width:26px; height:26px; border-radius:50%;
  background:var(--orange-pale); color:var(--orange);
  font-family:var(--fb); font-size:1.15rem; font-weight:700;
  line-height:26px; text-align:center;
}
.faq-item[open] .faq-q::after{ content:'\2212'; }   /* signo menos, no guion */

/* OJO: el resto del sitio usa --gray con peso 300 para texto secundario
   (.s-sub). Aca se usa --charcoal-mid con peso 400 A PROPOSITO, y es la unica
   desviacion deliberada de esa costumbre: esto no es texto decorativo, es la
   informacion de envios, devoluciones y arrepentimiento que alguien lee cuando
   tiene un problema. Medido: --gray sobre --cream da 4.52:1, que pasa AA por
   dos centesimas; --charcoal-mid da 7.07:1. Los dos colores ya estan en la
   paleta, asi que la identidad visual no cambia. */
.faq-a{
  padding:0 16px 16px;
  font-size:0.9rem; line-height:1.8; font-weight:400; color:var(--charcoal-mid);
}
.faq-a p{ margin:0 0 10px; }
.faq-a p:last-child{ margin-bottom:0; }
.faq-a strong{ font-weight:600; color:var(--charcoal); }
.faq-a a{ color:var(--orange); text-decoration:underline; text-underline-offset:2px; }

/* "por WhatsApp" es un <button> y no un <a> para poder llamar a
   openDirectWhatsApp(), que lee el numero de Setting. Se disfraza de link. */
.faq-link{
  background:none; border:none; padding:0; font:inherit; cursor:pointer;
  color:var(--orange); text-decoration:underline; text-underline-offset:2px;
}

@media (min-width:768px){
  .faq-q{ font-size:1.08rem; padding:16px 20px; }
  .faq-a{ padding:0 20px 18px; font-size:0.95rem; }
  .faq-q:hover{ color:var(--orange); }
}

/* El item "Preguntas" del menu de escritorio aparece recien en 1024px.
   MEDIDO, no supuesto: .nav-links se muestra desde 768px, y a 800px el septimo
   item empujaba la lista MAS ALLA del borde derecho de la barra. A 1024px entra
   con lugar de sobra. Abajo de eso el acceso sigue existiendo por el menu
   hamburguesa y por el pie, asi que no se pierde nada. */
.nav-faq{ display:none; }
@media (min-width:1024px){
  .nav-faq{ display:block; }
}
@media (prefers-reduced-motion: reduce){
  .faq-item{ transition:none; }
}

/* ═══════════════════════════════════════════════════════════════════
   TANDA 29-SEP-2026 — tres arreglos, un bloque. Revertir = borrarlo.
   Todo MEDIDO con Playwright y las tipografias reales antes de escribir.
   ═══════════════════════════════════════════════════════════════════ */

/* 1) EL CARRITO FLOTANTE TAPABA EL PIE.
   El boton ocupa los ultimos 74 px de la pantalla en el telefono (18 de
   margen + 56 de alto) y 82 px en escritorio (26 + 56), pero el pie tenia
   26 y 32 px de relleno abajo. Al llegar al final de la pagina, el boton
   quedaba encima de "Los protocolos no reemplazan la consulta medica" —
   un aviso legal — en los telefonos de 390 y 414 px, y encima de ese mismo
   texto y de "Acceso mayoristas" entre ~1000 y ~1300 px.
   Arreglo: el pie reserva abajo el lugar del boton, mas 14 px de aire.
   No cambia nada en horizontal; solo suma fondo oscuro al final. */
body > footer{ padding-bottom:calc(18px + 56px + 14px + env(safe-area-inset-bottom,0px)); }
@media (min-width:768px){
  body > footer{ padding-bottom:calc(26px + 56px + 14px); }
}

/* 2) EL MENU DE ESCRITORIO SE SALIA DE LA BARRA ENTRE 768 Y ~890 px.
   Medido: a 768 px la lista de links termina 120 px mas alla del borde
   derecho y genera scroll horizontal en toda la pagina; recien a ~890 px
   entra. El 1024 ya habia sido necesario para el item "Preguntas" (ver mas
   arriba) y no alcanzo: siguen siendo 7 items que no entran.
   Arreglo: la hamburguesa sigue hasta 1024 px, que es donde el menu entra
   con 130 px de sobra (un margen que aguanta diferencias de fuente entre
   Windows, Mac y Linux). Solo min-width, como pide el resto del archivo.
   El menu movil ya se ubica solo midiendo la barra, asi que anda en
   cualquier ancho sin tocar JavaScript. */
@media (min-width:768px){
  .nav-links{ display:none; }
  .hamburger{ display:flex; }
}
@media (min-width:1024px){
  .nav-links{ display:flex; }
  .hamburger{ display:none; }
  /* Una tablet que se gira con el menu abierto quedaria con el menu
     desplegado y sin hamburguesa para cerrarlo. */
  .mob-menu.open{ display:none; }
}

/* 3) LA FICHA OCULTA EL RESTO DE LA HOME.
   Hasta hoy, abrir un producto dejaba la home entera arriba y abajo de la
   ficha: medido el 17-sep, el 80,4% del texto de cada una de las 31 URLs
   de producto era el mismo. Tambien habia dos <h1> a la vista.
   app.js pone la clase .ficha-abierta en <body> mientras hay una ficha
   abierta (bloque "FICHA OCULTA LA HOME" al final de app.js).
   Quedan a la vista la tienda con la ficha, el menu, la barra de contexto
   y el pie. El pie se queda a proposito: tiene los links legales y el
   Boton de Arrepentimiento, que tienen que estar siempre accesibles. */
body.ficha-abierta main > section:not(#tienda){ display:none; }


/* ══════════════════════════════════════════════════════════════
   TRANSPARENCIA FISCAL — "precio sin impuestos nacionales"
   1-oct-2026 · Ley 27.743 (art. 99) + Res. SIyC 4/2025, art. 2° inc. c)

   La norma pide que el neto se muestre en caracteres tipograficos
   MENORES a los del precio final. Por eso font-size chico y color gris:
   el protagonista visual sigue siendo el precio que paga el cliente.

   Bloque agregado al final a proposito: no modifica ninguna regla
   existente, solo suma la clase nueva .sin-imp.
   ══════════════════════════════════════════════════════════════ */
.sin-imp{
  display:block;
  font-family:var(--fb);
  font-size:0.62rem;
  font-weight:400;
  line-height:1.3;
  color:var(--gray);
  margin-top:3px;
  letter-spacing:0;
}
/* En el carrito la linea va sola, alineada a la derecha debajo del total */
.sin-imp-row{
  text-align:right;
  margin-top:-8px;
  margin-bottom:14px;
}
.sin-imp-row:empty{ display:none; }

@media (min-width:768px){
  .sin-imp{ font-size:0.68rem; }
}