/* ============================================================
   Daily Viandas — Tienda Online
   Sistema de marca OFICIAL (Manual Guanacos 2023)
   Fuentes: Chapu Chaps (display/marca) + General Sans (cuerpo) — self-host
   Estética: color plano + formas orgánicas + tira multicolor. Sin gradientes de fondo.
   ============================================================ */

/* ---------- Fuentes propias ---------- */
@font-face{font-family:'Chapu Chaps';src:url('brand/fonts/ChapuChaps.otf') format('opentype');font-weight:400 900;font-display:swap}
@font-face{font-family:'General Sans';src:url('brand/fonts/GeneralSans-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'General Sans';src:url('brand/fonts/GeneralSans-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'General Sans';src:url('brand/fonts/GeneralSans-Semibold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'General Sans';src:url('brand/fonts/GeneralSans-Bold.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  /* Paleta oficial (hex del manual) */
  --terracota:#E56E43; --terracota-osc:#C6552F;
  --verde:#268B65; --rosa:#F0B9CE; --azul:#2184BD; --marino:#0F3D6E;
  --mostaza:#D1AB3E; --lima:#A9C947; --crema:#EDE6D3;
  --tinta:#241F1B; --tinta-suave:#6E655B; --blanco:#fff;
  --papel:#F7F1E6; --papel-2:#EFE7D6;
  --linea:#e2d7c3;
  --sombra:0 8px 24px rgba(36,31,27,.08);
  --sombra-alta:0 18px 44px rgba(36,31,27,.14);
  --radio:16px; --radio-sm:10px;
  --fuente-display:'Chapu Chaps',cursive;
  --fuente:'General Sans',system-ui,-apple-system,sans-serif;
  /* color de línea activo (lo setea el JS) */
  --lc:var(--terracota); --lc-ink:#fff;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth; scroll-padding-top:92px}
body{
  font-family:var(--fuente); color:var(--tinta); background:var(--papel);
  line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden;
  padding-bottom:calc(78px + env(safe-area-inset-bottom));
}
@media(min-width:861px){ body{padding-bottom:96px} }
h1,h2,h3,h4{line-height:1.1; font-weight:700}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font-family:inherit; cursor:pointer; border:none; background:none}
.wrap{max-width:1180px; margin:0 auto; padding:0 20px}
.eyebrow{font-family:var(--fuente); font-weight:600; font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color:var(--terracota)}

/* Display en Chapu Chaps (marca, líneas, números) */
.script{font-family:var(--fuente-display); font-weight:400; letter-spacing:.01em}

/* Tira multicolor firma (rayas planas, no gradiente suave) */
.brand-stripe{height:12px; width:100%;
  background:repeating-linear-gradient(90deg,
    var(--mostaza) 0 26px, var(--marino) 26px 44px, var(--terracota) 44px 70px,
    var(--azul) 70px 88px, var(--verde) 88px 114px)}

/* Formas orgánicas decorativas */
.shape{position:absolute; z-index:0; pointer-events:none}
.shape svg{display:block; width:100%; height:100%}

/* ---------- Botones ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:600;
  padding:14px 26px; border-radius:999px; font-size:1rem; transition:transform .14s ease, background .14s ease, border-color .14s; min-height:52px}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--terracota); color:#fff}
.btn-primary:hover{background:var(--terracota-osc)}
.btn-ghost{background:#fff; color:var(--tinta); border:1.5px solid var(--linea)}
.btn-ghost:hover{border-color:var(--terracota); color:var(--terracota)}
.btn-verde{background:var(--verde); color:#fff}
.btn-block{width:100%}
.btn-sm{padding:11px 18px; min-height:46px; font-size:.92rem}

/* ---------- Header ---------- */
header.top{position:fixed; top:0; left:0; right:0; z-index:60; background:rgba(247,241,230,.6); backdrop-filter:blur(18px) saturate(1.5); -webkit-backdrop-filter:blur(18px) saturate(1.5); border-bottom:1px solid rgba(255,255,255,.3)}
.nav{display:flex; align-items:center; gap:18px; height:84px}
.nav .logo{margin-left:-7px}
.nav .logo img{height:70px; width:auto}
.nav-links{display:flex; gap:24px; margin-left:auto; font-weight:600; font-size:.95rem}
.nav-links a{padding:6px 2px; color:var(--tinta-suave); transition:color .15s}
.nav-links a:hover{color:var(--terracota)}
.nav-actions{display:flex; gap:10px; align-items:center; margin-left:18px}
.cart-btn{position:relative; display:inline-flex; align-items:center; gap:8px; background:rgba(36,31,27,.6); color:#fff; padding:12px 18px; border-radius:999px; font-weight:600; font-size:.92rem; min-height:46px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.14)}
.cart-count{background:var(--terracota); color:#fff; border-radius:999px; min-width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; font-size:.78rem; padding:0 6px; font-weight:700}
.hamb{display:none; margin-left:auto; width:46px; height:46px; border-radius:12px; border:1.5px solid var(--linea); background:#fff; align-items:center; justify-content:center}
.hamb span{display:block; width:20px; height:2px; background:var(--tinta); position:relative}
.hamb span::before,.hamb span::after{content:''; position:absolute; left:0; width:20px; height:2px; background:var(--tinta)}
.hamb span::before{top:-6px} .hamb span::after{top:6px}

@media(max-width:860px){
  .nav-links{display:none; position:absolute; top:84px; left:0; right:0; background:#fff; flex-direction:column; padding:14px 20px; gap:4px; border-bottom:1px solid var(--linea); box-shadow:var(--sombra)}
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 4px; border-bottom:1px solid var(--papel-2)}
  .hamb{display:inline-flex}
  .nav-actions{margin-left:0; gap:8px}
  .cart-btn .lbl{display:none}
  .wa-btn .lbl{display:none}
  .wa-btn{padding:12px 13px}
}

/* ---------- Hero (Swiper multicapa: fondo + foto + texto) ---------- */
.hero{position:relative; overflow:hidden; background:var(--crema)}
.hero .shape.s1{top:-70px; right:-40px; width:340px; height:340px; color:var(--terracota); opacity:.12; z-index:0}
.hero .shape.s2{bottom:-90px; left:-60px; width:280px; height:280px; color:var(--verde); opacity:.10; z-index:0}
.hero .shape.s3{top:40px; left:44%; width:90px; height:90px; color:var(--mostaza); opacity:.7; z-index:0}
.heroswiper{position:relative; z-index:1}
.heroswiper .swiper-slide{overflow:hidden; background:transparent}
.hbg{position:absolute; inset:-10% -6%; z-index:0}
/* Lienzo de fondo persistente: cubre todo el hero (hasta detrás del header) y hace crossfade
   limpio entre tramas. Va DETRÁS de los slides; el Swiper solo cruza el contenido. */
.hero-canvas{position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none}
.hero-canvas .layer{position:absolute; inset:-6% -6%; opacity:0; transition:opacity .85s ease}
.hero-canvas .layer.on{opacity:1}
.hgrid{position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; padding:148px 0 96px}
.htext h1{font-size:clamp(2.3rem,5.2vw,3.7rem); font-weight:700; margin:12px 0 16px; letter-spacing:-.01em; line-height:1.08}
.htext h1 .mark{font-family:var(--fuente-display); font-weight:400; color:var(--terracota); font-size:1.16em; letter-spacing:.01em}
.htext p.lead{font-size:1.12rem; color:var(--tinta-suave); max-width:31em; margin-bottom:22px}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap}
.aval{display:inline-flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--linea); border-radius:22px; padding:8px 16px 8px 8px; font-weight:600; font-size:.88rem; box-shadow:var(--sombra); margin-top:18px; max-width:100%}
.aval-txt{display:flex; flex-direction:column; line-height:1.25; min-width:0}
.aval-txt b{font-weight:700}
.aval .mat{font-weight:500; font-size:.78rem; opacity:.75}
.aval .dot{width:32px; height:32px; border-radius:50%; background:var(--verde); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-weight:700; flex:none}
.aval .dot svg{width:17px; height:17px}
/* Fondo BOLD: color por slide + trama distinta por slide (derivadas del manual de marca:
   cuadrillé, líneas orgánicas, íconos-comida, semillas). Blancas y sutiles = prolijo. */
.hbg{background:transparent}
/* Cuadrillé (rombos) — trama cuadrillé del manual */
.pat-rombos{background-color:var(--terracota); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='62' height='62'%3E%3Cpath d='M31 1L61 31 31 61 1 31z' fill='none' stroke='white' stroke-opacity='0.18' stroke-width='6'/%3E%3C/svg%3E")}
/* Líneas orgánicas — trama LÍNEAS del manual (fluido/natural) */
.pat-chevron{background-color:var(--verde); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='70'%3E%3Cg fill='none' stroke='white' stroke-linecap='round'%3E%3Cpath d='M0 26 Q35 2 70 26 T140 26' stroke-opacity='0.16' stroke-width='5'/%3E%3Cpath d='M0 52 Q35 28 70 52 T140 52' stroke-opacity='0.10' stroke-width='4'/%3E%3C/g%3E%3C/svg%3E")}
/* Íconos-comida — trama del manual (tomate, hoja, tenedor) */
.pat-grid{background-color:var(--azul); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cg fill='none' stroke='white' stroke-opacity='0.16' stroke-width='3'%3E%3Ccircle cx='36' cy='40' r='13'/%3E%3Cpath d='M36 29v22M26 33l20 14M46 33 26 47' stroke-width='2'/%3E%3Cpath d='M99 44q11-15 22 0-11 15-22 0z'/%3E%3Cpath d='M64 96v26M72 96v26M80 96v26M72 122v16' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E")}
/* Semillas — puntitos (elemento del manual), calmo */
.pat-ondas{background-color:var(--marino); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46'%3E%3Cg fill='white' fill-opacity='0.15'%3E%3Ccircle cx='11' cy='11' r='3'/%3E%3Ccircle cx='34' cy='34' r='3'/%3E%3C/g%3E%3C/svg%3E")}
/* Texto blanco sobre el fondo bold */
.htext .eyebrow{color:rgba(255,255,255,.9)}
.htext h1{color:#fff}
.htext h1 .mark{color:var(--crema)}
.htext p.lead{color:rgba(255,255,255,.94)}
.htext .aval{background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.32); color:#fff; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}
.htext .aval .dot{background:#fff; color:var(--verde)}
.hero .btn-primary{background:#fff; color:var(--tinta)}
.hero .btn-primary:hover{background:var(--crema)}
.hero .btn-ghost{background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.55); color:#fff; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}
.hero .btn-ghost:hover{background:rgba(255,255,255,.24); border-color:#fff; color:#fff}
@media(max-width:860px){ .hgrid{grid-template-columns:1fr; gap:22px; padding:112px 0 88px} .hero-iso{order:-1} }

/* ---------- Tira de sellos ---------- */
.sellos{background:var(--marino); color:#fff; padding:16px 0}
.sellos .wrap{display:flex; gap:28px; justify-content:center; flex-wrap:wrap; font-weight:500; font-size:.95rem}
.sellos b{color:var(--mostaza); font-weight:700}

/* ---------- Secciones ---------- */
section{padding:60px 0}
.sec-head{text-align:center; max-width:660px; margin:0 auto 36px}
.sec-head h2{font-size:clamp(1.9rem,4vw,2.7rem); margin:10px 0; font-weight:700; letter-spacing:-.01em}
.sec-head p{color:var(--tinta-suave); font-size:1.05rem}

/* ---------- Info / garantías (3 tarjetas foto + pie, estilo hero-iso) ---------- */
.info-cards{padding:46px 0 26px}
.info-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.info-card{display:flex; flex-direction:column}
.info-photo{position:relative; aspect-ratio:4/5; border-radius:22px; overflow:hidden; box-shadow:var(--sombra); display:flex; align-items:center; justify-content:center}
.info-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1}
.info-photo .info-ic{width:60px; height:60px; color:#fff; opacity:.9; z-index:0}
.info-photo.t1{background:var(--verde)} .info-photo.t2{background:var(--azul)} .info-photo.t3{background:var(--marino)}
.info-photo .info-iso{position:absolute; z-index:2; right:12px; bottom:12px; width:62px; height:auto; background:#fff; border-radius:10px; padding:6px; box-shadow:var(--sombra)}
.info-cap{padding:16px 6px 0; text-align:center}
.info-cap h3{font-size:1.18rem; font-weight:700; color:var(--tinta); margin-bottom:4px}
.info-cap p{font-size:.95rem; color:var(--tinta-suave); line-height:1.5}
@media(max-width:860px){ .info-grid{grid-template-columns:1fr 1fr; gap:16px} }
@media(max-width:520px){ .info-grid{grid-template-columns:1fr; max-width:360px; margin:0 auto} }

/* ---------- Líneas ---------- */
.lineas-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.linea-card{position:relative; border-radius:var(--radio); overflow:hidden; aspect-ratio:3/4; box-shadow:var(--sombra); background:var(--lc); color:#fff; display:flex; flex-direction:column; justify-content:flex-end; isolation:isolate}
.linea-card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform .5s ease}
.linea-card::after{content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, transparent 34%, rgba(20,15,10,.72) 100%)}
.linea-card .shape.lc{top:-30px; right:-30px; width:150px; height:150px; color:#fff; opacity:.16; z-index:-1}
.linea-card:hover img{transform:scale(1.05)}
.linea-card .body{padding:22px}
.linea-card .chip{display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:5px 11px; border-radius:999px; background:rgba(255,255,255,.24); margin-bottom:8px}
.linea-card h3{font-family:var(--fuente-display); font-weight:400; font-size:2rem; margin-bottom:4px; letter-spacing:.01em}
.linea-card p{font-size:.92rem; opacity:.94}
.linea-card .go{margin-top:12px; display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:.9rem}
@media(max-width:860px){ .lineas-grid{grid-template-columns:1fr 1fr; gap:14px} .linea-card .body{padding:16px} .linea-card h3{font-size:1.6rem} }
@media(max-width:480px){ .lineas-grid{grid-template-columns:1fr} .linea-card{aspect-ratio:16/10} }

/* ---------- Cómo funciona ---------- */
.pasos{background:var(--papel-2)}
.pasos-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.paso{background:#fff; border-radius:var(--radio); padding:30px 28px; box-shadow:var(--sombra); text-align:center}
.paso .num{font-family:var(--fuente-display); font-weight:400; width:56px; height:56px; border-radius:50%; background:var(--terracota); color:#fff; font-size:1.7rem; display:inline-flex; align-items:center; justify-content:center; margin-bottom:14px}
.paso:nth-child(2) .num{background:var(--verde)} .paso:nth-child(3) .num{background:var(--azul)}
.paso h3{font-size:1.2rem; margin-bottom:6px; font-weight:700}
.paso p{color:var(--tinta-suave); font-size:.96rem}
@media(max-width:760px){ .pasos-grid{grid-template-columns:1fr} }

/* ---------- Tienda ---------- */
.tienda{background:var(--papel)}
.pack-banner{position:relative; overflow:hidden; background:var(--marino); color:#fff; border-radius:var(--radio); padding:28px 30px; display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-bottom:26px}
.pack-banner .shape{top:-40px; right:6%; width:150px; height:150px; color:#fff; opacity:.12}
.pack-banner .txt{flex:1; min-width:220px; position:relative; z-index:1}
.pack-banner h3{font-family:var(--fuente-display); font-weight:400; font-size:2rem; color:#fff}
.pack-banner p{opacity:.86; font-size:.96rem; margin-top:2px}
.pack-banner .precio{font-family:var(--fuente-display); font-weight:400; font-size:2.3rem; color:var(--mostaza); position:relative; z-index:1}

.tier-nudge{background:#fff; border:1.5px dashed var(--lima); color:var(--tinta); border-radius:var(--radio-sm); padding:12px 18px; font-weight:500; font-size:.95rem; margin-bottom:20px; display:flex; align-items:center; gap:10px}
.tier-nudge b{color:var(--verde); font-weight:700}

.tabs{display:flex; gap:8px; overflow-x:auto; padding-bottom:8px; margin-bottom:8px; -webkit-overflow-scrolling:touch}
.tab{white-space:nowrap; padding:11px 18px; border-radius:999px; background:#fff; border:1.5px solid var(--linea); font-weight:600; font-size:.92rem; color:var(--tinta-suave); transition:all .15s; min-height:44px}
.tab.active{background:var(--lc); color:var(--lc-ink); border-color:var(--lc)}
.semana-lbl{font-size:.85rem; color:var(--tinta-suave); font-weight:600; margin:6px 0 18px}

.prod-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
@media(max-width:980px){ .prod-grid{grid-template-columns:repeat(3,1fr)} }
@media(max-width:720px){ .prod-grid{grid-template-columns:repeat(2,1fr); gap:12px} }
.prod{background:#fff; border-radius:var(--radio); overflow:hidden; box-shadow:var(--sombra); display:flex; flex-direction:column; transition:transform .18s ease, box-shadow .18s ease; border-top:3px solid var(--lc)}
.prod:hover{transform:translateY(-4px); box-shadow:var(--sombra-alta)}
.prod .ph{position:relative; aspect-ratio:1/1; background:var(--papel-2); overflow:hidden}
.prod .ph img{width:100%; height:100%; object-fit:cover}
/* placeholder de marca (sin foto real) */
.prod .ph.ph-brand{display:flex; align-items:center; justify-content:center; background:var(--lc)}
.ph-brand .pb-shape{position:absolute; width:78%; height:78%; color:#fff; opacity:.14}
.ph-brand .pb-name{position:relative; z-index:1; font-family:var(--fuente-display); font-weight:400; color:#fff; text-align:center; padding:0 14px; font-size:1.35rem; line-height:1.1; text-shadow:0 2px 10px rgba(0,0,0,.14)}
.prod .ph .lchip{position:absolute; top:10px; left:10px; z-index:2; font-size:.66rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:4px 9px; border-radius:999px; background:#fff; color:var(--lc)}
.prod .ph .peso{position:absolute; top:10px; right:10px; z-index:2; font-size:.64rem; font-weight:700; letter-spacing:.03em; padding:4px 9px; border-radius:999px; background:rgba(20,15,10,.32); color:rgba(255,255,255,.92)}
.prod .info{padding:14px 14px 16px; display:flex; flex-direction:column; gap:6px; flex:1}
.prod .info h4{font-weight:600; font-size:.98rem; line-height:1.25}
.prod .info .desc{font-size:.82rem; color:var(--tinta-suave); flex:1; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.prod .precio{font-family:var(--fuente-display); font-weight:400; font-size:1.35rem}
.prod .add{margin-top:6px}
.prod .qty-ctrl{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:6px}
.qty-ctrl button{width:40px; height:40px; border-radius:10px; background:var(--papel-2); font-weight:700; font-size:1.2rem; color:var(--tinta)}
.qty-ctrl .n{font-weight:700; font-size:1.05rem; min-width:20px; text-align:center}

/* ---------- Carrito (drawer) ---------- */
.overlay{position:fixed; inset:0; background:rgba(20,15,10,.5); z-index:90; opacity:0; visibility:hidden; transition:opacity .25s}
.overlay.show{opacity:1; visibility:visible}
.drawer{position:fixed; top:0; right:0; height:100%; width:min(440px,100%); background:var(--papel); z-index:100; transform:translateX(100%); transition:transform .3s ease; display:flex; flex-direction:column; box-shadow:var(--sombra-alta)}
.drawer.open{transform:translateX(0)}
.drawer .dh{display:flex; align-items:center; justify-content:space-between; padding:20px; border-bottom:1px solid var(--linea)}
.drawer .dh h3{font-size:1.3rem; font-weight:700}
.drawer .close{width:40px; height:40px; border-radius:10px; background:#fff; border:1px solid var(--linea); font-size:1.3rem; color:var(--tinta)}
.drawer .items{flex:1; overflow-y:auto; padding:14px 20px; display:flex; flex-direction:column; gap:12px}
.citem{display:flex; gap:12px; align-items:center; background:#fff; border-radius:var(--radio-sm); padding:10px; box-shadow:var(--sombra)}
.citem img{width:64px; height:64px; border-radius:10px; object-fit:cover; background:var(--papel-2); flex:none}
.citem .cinfo{flex:1; min-width:0}
.citem .cinfo h5{font-size:.95rem; font-weight:600; line-height:1.2}
.citem .cinfo .cp{font-weight:700; font-size:.95rem; margin-top:2px}
.citem .cq{display:flex; align-items:center; gap:10px; margin-top:8px}
.citem .cq button{flex:none; width:38px; height:38px; border-radius:10px; background:var(--papel-2); font-weight:700; font-size:1.3rem; line-height:1}
.citem .cq span{min-width:22px; text-align:center; font-weight:700; font-size:1rem}
/* X roja grande para quitar fácil (pensado para gente grande) */
.citem-x{flex:none; width:44px; height:44px; border-radius:50%; background:#dc2626; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 3px 10px rgba(220,38,38,.35); transition:background .14s, transform .12s}
.citem-x:hover{background:#b91c1c}
.citem-x:active{transform:scale(.92)}
.citem-x svg{width:22px; height:22px}
.cart-empty{text-align:center; color:var(--tinta-suave); padding:50px 20px}
/* Carrito ahora en modal centrado (#modalCart): lista con scroll + footer con totales */
#cartItems{display:flex; flex-direction:column; gap:12px; max-height:min(46vh,420px); overflow-y:auto}
#cartFoot:empty{display:none}
#cartFoot{border-top:1px solid var(--linea); padding-top:16px; margin-top:2px}
#cartFoot .row{display:flex; justify-content:space-between; font-size:.95rem; margin-bottom:6px; color:var(--tinta-suave)}
#cartFoot .row.total{font-size:1.35rem; font-weight:700; color:var(--tinta); font-family:var(--fuente-display); margin:8px 0 14px}
#cartFoot .row.desc b{color:var(--verde)}

/* ---------- Modal checkout ---------- */
.modal{position:fixed; inset:0; z-index:110; display:none; align-items:flex-start; justify-content:center; padding:24px 16px; overflow-y:auto}
.modal.open{display:flex}
.modal .card{background:var(--papel); border-radius:var(--radio); width:min(560px,100%); box-shadow:var(--sombra-alta); margin:auto}
.modal .mh{display:flex; align-items:center; justify-content:space-between; padding:20px 22px; border-bottom:1px solid var(--linea)}
.modal .mh h3{font-size:1.4rem; font-weight:700}
.modal .mb{padding:20px 22px; display:flex; flex-direction:column; gap:14px}
.field label{display:block; font-weight:600; font-size:.86rem; margin-bottom:5px; color:var(--tinta)}
.field input,.field select,.field textarea{width:100%; padding:13px 14px; border:1.5px solid var(--linea); border-radius:12px; font-family:inherit; font-size:1rem; background:#fff; color:var(--tinta)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--terracota)}
.field textarea{resize:vertical; min-height:64px}
.field.err input,.field.err select{border-color:var(--terracota-osc)}
.two{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.pay-opts{display:grid; grid-template-columns:1fr; gap:10px}
.pay{display:flex; align-items:center; gap:12px; border:1.5px solid var(--linea); border-radius:12px; padding:14px; cursor:pointer; background:#fff; transition:border .15s}
.pay.sel{border-color:var(--terracota); background:#fdf3ee}
.pay input{width:20px; height:20px; accent-color:var(--terracota)}
.pay .pt{font-weight:600}
.pay .ps{font-size:.82rem; color:var(--tinta-suave)}
.envio-info{background:var(--crema); border-radius:12px; padding:12px 14px; font-size:.88rem; color:var(--tinta)}
.modal .mf{padding:0 22px 22px}
.resumen{background:#fff; border:1px solid var(--linea); border-radius:12px; padding:14px; margin-bottom:14px; font-size:.92rem}
.resumen .r{display:flex; justify-content:space-between; margin-bottom:4px; color:var(--tinta-suave)}
.resumen .r.t{font-weight:700; color:var(--tinta); font-size:1.15rem; margin-top:6px; font-family:var(--fuente-display)}

/* ---------- Envíos ---------- */
.envios{background:var(--marino); color:#fff}
.envios .sec-head h2{color:#fff} .envios .sec-head p{color:rgba(255,255,255,.72)}
.envios-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; max-width:820px; margin:0 auto}
.zona{background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); border-radius:var(--radio); padding:22px}
.zona h4{font-size:1.2rem; color:var(--mostaza); margin-bottom:8px; font-weight:700}
.zona .e{font-family:var(--fuente-display); font-weight:400; font-size:1.8rem}
.zona ul{list-style:none; margin-top:10px; font-size:.92rem; color:rgba(255,255,255,.85)}
.zona ul li{padding:3px 0}
@media(max-width:640px){ .envios-grid{grid-template-columns:1fr} }

/* ---------- Footer ---------- */
footer.foot{background:#17130f; color:rgba(255,255,255,.8); padding:48px 0 30px}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:30px}
footer.foot img.flogo{height:48px; margin-bottom:14px}
footer.foot h5{color:#fff; font-weight:700; margin-bottom:12px; font-size:1rem}
footer.foot a{display:block; padding:4px 0; color:rgba(255,255,255,.72)}
footer.foot a:hover{color:var(--mostaza)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12); margin-top:30px; padding-top:18px; font-size:.85rem; color:rgba(255,255,255,.5); display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px}
.tagline{font-family:var(--fuente-display); font-weight:400; letter-spacing:.04em; color:var(--terracota); font-size:1.15rem}
@media(max-width:760px){ .foot-grid{grid-template-columns:1fr 1fr} }

/* ---------- WhatsApp en header (pastilla glass, ícono verde) ---------- */
.wa-btn{display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.5); color:var(--tinta); padding:12px 16px; border-radius:999px; font-weight:600; font-size:.92rem; min-height:46px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.6); transition:transform .14s, background .14s}
.wa-btn:hover{background:rgba(255,255,255,.72); transform:translateY(-1px)}
.wa-btn svg{width:20px; height:20px; fill:#25D366; flex:none}

/* ---------- Toast ---------- */
.toast{position:fixed; bottom:calc(88px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%) translateY(120px); background:var(--tinta); color:#fff; padding:14px 22px; border-radius:999px; font-weight:600; z-index:200; box-shadow:var(--sombra-alta); transition:transform .3s ease; max-width:90vw; pointer-events:none}

/* ---------- Barra inferior "Comprar" (tab bar cristal oscuro) ---------- */
.modal-open .buy-bar{opacity:0; visibility:hidden; transition:opacity .2s ease}
.buy-bar{position:fixed; left:0; right:0; bottom:0; z-index:88; transition:opacity .2s ease; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:rgba(28,24,20,.72); backdrop-filter:blur(16px) saturate(1.4); -webkit-backdrop-filter:blur(16px) saturate(1.4); border-top:1px solid rgba(255,255,255,.12)}
.buy-btn{display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:54px; padding:0 20px; border-radius:14px; background:var(--terracota); color:#fff; font-weight:700; font-size:1.02rem; letter-spacing:.01em; box-shadow:0 6px 20px rgba(0,0,0,.28); transition:background .15s, transform .12s}
.buy-btn:hover{background:var(--terracota-osc)}
.buy-btn:active{transform:scale(.985)}
.buy-btn .bb-ic{flex:none}
.buy-btn .bb-badge{background:#fff; color:var(--terracota); border-radius:999px; min-width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center; font-size:.82rem; font-weight:800; padding:0 7px}
.buy-btn .bb-total{margin-left:auto; font-weight:800; font-family:var(--fuente-display); font-size:1.12rem}
.buy-btn .bb-badge[hidden],.buy-btn .bb-total[hidden]{display:none}
.buy-btn[data-mode="full"] .bb-lbl{margin-right:2px}
@media(min-width:861px){
  /* Pastilla flotante centrada: cristal oscuro (separa del hero naranja) con el botón terracota adentro */
  .buy-bar{left:50%; right:auto; transform:translateX(-50%); bottom:22px; width:auto; min-width:320px; padding:7px; border-radius:999px; border:1px solid rgba(255,255,255,.16); box-shadow:0 14px 36px rgba(0,0,0,.32)}
  .buy-btn{border-radius:999px; min-height:52px; padding:0 28px; box-shadow:none}
}
.toast.show{transform:translateX(-50%) translateY(0)}

/* ---------- Íconos inline ---------- */
.mi{width:15px; height:15px; display:inline-block; vertical-align:-2px; margin-right:7px; flex:none}
.aval .dot svg{width:18px; height:18px}
.ce-ic{width:46px; height:46px; color:var(--tinta-suave); opacity:.5; margin:0 auto 6px}

/* ---------- Utilidades ---------- */
.skel{background:var(--papel-2)}
.fade-up{animation:fu .5s ease both}
@keyframes fu{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}
.hidden{display:none!important}

/* ============================================================
   Animaciones dinámicas (reveal por scroll + hero vivo)
   Solo activas si <html class="anim"> (lo pone el JS; sin JS o
   con prefers-reduced-motion → todo visible, cero animación)
   ============================================================ */
html.anim .reveal{opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); will-change:opacity,transform}
html.anim .reveal.zoom{transform:translateY(28px) scale(.96)}
html.anim .reveal.left{transform:translateX(-32px)}
html.anim .reveal.right{transform:translateX(32px)}
html.anim .reveal.in{opacity:1; transform:none}
html.anim [data-stagger]>*{opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1)}
html.anim [data-stagger].in>*{opacity:1; transform:none}
html.anim [data-stagger].in>*:nth-child(1){transition-delay:.04s}
html.anim [data-stagger].in>*:nth-child(2){transition-delay:.10s}
html.anim [data-stagger].in>*:nth-child(3){transition-delay:.16s}
html.anim [data-stagger].in>*:nth-child(4){transition-delay:.22s}
html.anim [data-stagger].in>*:nth-child(5){transition-delay:.28s}
html.anim [data-stagger].in>*:nth-child(6){transition-delay:.34s}
html.anim [data-stagger].in>*:nth-child(7){transition-delay:.40s}
html.anim [data-stagger].in>*:nth-child(8){transition-delay:.46s}
html.anim [data-stagger].in>*:nth-child(n+9){transition-delay:.52s}

/* Hero: entrada escalonada + formas flotando */
html.anim .hero-text>*{opacity:0; transform:translateY(22px); animation:heroIn .8s cubic-bezier(.2,.7,.2,1) forwards}
html.anim .hero-text>*:nth-child(1){animation-delay:.05s}
html.anim .hero-text>*:nth-child(2){animation-delay:.15s}
html.anim .hero-text>*:nth-child(3){animation-delay:.25s}
html.anim .hero-text>*:nth-child(4){animation-delay:.35s}
html.anim .hero-text>*:nth-child(5){animation-delay:.45s}
@keyframes heroIn{to{opacity:1; transform:none}}
html.anim .hero .shape.s1{animation:float 9s ease-in-out infinite}
html.anim .hero .shape.s2{animation:float 12s ease-in-out infinite; animation-delay:-4s}
html.anim .hero .shape.s3{animation:floatspin 16s linear infinite}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-18px) rotate(6deg)}}
@keyframes floatspin{to{transform:rotate(360deg)}}
/* comidas flotando en el hero */
.hero-float{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.hero-float span{position:absolute; font-size:0; width:54px; height:54px; opacity:.9}
.hero-float svg{width:100%; height:100%}
html.anim .hero-float span{animation:float 8s ease-in-out infinite}
.hero-float .f1{top:16%; left:6%; color:var(--verde)}
.hero-float .f2{top:64%; left:12%; color:var(--mostaza); width:40px;height:40px; animation-delay:-2s}
.hero-float .f3{top:24%; right:8%; color:var(--rosa); width:46px;height:46px; animation-delay:-4s}
.hero-float .f4{bottom:12%; right:14%; color:var(--lima); width:38px;height:38px; animation-delay:-1s}

/* Foto del hero como ISO circular (modelo dentro del logo) con tilt al tocar + Ken Burns */
.hero-iso{position:relative; aspect-ratio:4/5; border-radius:26px; background:rgba(255,255,255,.12); overflow:hidden; width:min(100%,430px); justify-self:end;
  transform:perspective(1100px) rotateX(0) rotateY(0); transition:transform .5s cubic-bezier(.2,.7,.2,1); transform-style:preserve-3d; box-shadow:0 30px 70px rgba(0,0,0,.28)}
.hero-iso img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:26px}
.hero-iso .ring{position:absolute; inset:0; border-radius:26px; border:5px solid rgba(255,255,255,.85); pointer-events:none; z-index:2}
.hero-iso .ring::after{content:''; position:absolute; inset:10px; border-radius:18px; border:1.5px dashed rgba(255,255,255,.45)}
@media(max-width:860px){ .hero-iso{width:min(86%,340px); justify-self:center} }
html.anim .swiper-slide-active .hero-iso img{animation:kenBurns 8s ease-out both}
@keyframes kenBurns{from{transform:scale(1.14) translate(3%,-3%)}to{transform:scale(1) translate(0,0)}}
html.anim .swiper-slide-active .htext>*{opacity:0; animation:heroItem .6s cubic-bezier(.2,.7,.2,1) forwards}
html.anim .swiper-slide-active .htext>*:nth-child(1){animation-delay:.12s}
html.anim .swiper-slide-active .htext>*:nth-child(2){animation-delay:.24s}
html.anim .swiper-slide-active .htext>*:nth-child(3){animation-delay:.36s}
html.anim .swiper-slide-active .htext>*:nth-child(4){animation-delay:.48s}
html.anim .swiper-slide-active .htext>*:nth-child(5){animation-delay:.58s}
@keyframes heroItem{from{opacity:0; transform:translateY(18px)}to{opacity:1; transform:none}}
html:not(.anim) .htext>*{opacity:1}
/* Fallback sin Swiper: solo el primer slide */
.noswiper .heroswiper .swiper-slide{display:none}
.noswiper .heroswiper .swiper-slide:first-child{display:block}

/* Flechas del hero */
.hero-arrow{position:absolute; top:42%; z-index:6; width:48px; height:48px; border-radius:50%; background:#fff; border:1.5px solid var(--linea); color:var(--tinta); font-size:1.7rem; line-height:0; display:flex; align-items:center; justify-content:center; box-shadow:var(--sombra); transition:transform .15s, background .15s, color .15s; padding-bottom:4px}
.hero-arrow:hover{background:var(--terracota); color:#fff; border-color:var(--terracota); transform:scale(1.08)}
.hero-arrow.prev{left:16px} .hero-arrow.next{right:16px}
.hero-arrow.swiper-button-disabled{opacity:.35}
/* Dots (Swiper pagination) */
.hero-dots{position:absolute; z-index:5; bottom:38px; left:0; width:100%; display:flex; gap:8px; justify-content:center}
.hero-dots .swiper-pagination-bullet{width:9px; height:9px; background:var(--tinta-suave); opacity:.35; border-radius:50%; transition:width .2s, background .2s, opacity .2s; cursor:pointer}
.hero-dots .swiper-pagination-bullet-active{background:var(--terracota); opacity:1; width:24px; border-radius:5px}
@media(max-width:860px){ .hero-arrow{top:32%; width:40px; height:40px; font-size:1.5rem} .hero-arrow.prev{left:10px} .hero-arrow.next{right:10px} .hero-dots{bottom:30px} }
/* Flechas + dots sobre el fondo bold (glass blanco) */
.heroswiper .hero-arrow{background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.45); color:#fff; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}
.heroswiper .hero-arrow:hover{background:#fff; color:var(--tinta); border-color:#fff}
.hero-dots .swiper-pagination-bullet{background:rgba(255,255,255,.55)}
.hero-dots .swiper-pagination-bullet-active{background:#fff; width:24px; border-radius:5px}

/* Contador del carrito con pulso al cambiar */
.cart-count.bump{animation:bump .4s ease}
@keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.5)}100%{transform:scale(1)}}

@media(prefers-reduced-motion:reduce){
  html.anim .reveal, html.anim [data-stagger]>*, html.anim .hero-text>*{opacity:1!important; transform:none!important; animation:none!important; transition:none!important}
  html.anim .hero .shape, html.anim .hero-float span{animation:none!important}
}