/* ============================================================
   SISTEMA VISUAL COMPARTIDO — torolince.com
   index.html · producto.html · business.html cargan ESTE archivo.
   Aquí vive todo lo que debe ser idéntico entre páginas:
   tokens, escala tipográfica, cabecera, mega-menú, cajón móvil,
   tarjeta de producto, pie y botones.
   Lo específico de cada página va en su propio <style>.
   Display = Bodoni Moda (nunca por debajo de 24 px).
   Texto   = Archivo.
   ============================================================ */

:root{
  /* ---- Paleta Yanbal + tokens accesibles (ratios verificados) ---- */
  --tinta:#1c1f28; --tinta-suave:#54555e;
  --crema:#f7f7f8; --blanco:#fff;
  --terra:#dc582a;          /* solo superficies grandes, aros y titulares >=24px */
  --oro:#b8451c;            /* texto pequeño terracota sobre blanco/crema — 5.38 AA */
  --oro-hondo:#9c3a17;      /* texto pequeño sobre durazno/oro-claro — 6.26 AA */
  --oro-claro:#fbe3d9;      /* píldoras y bloques (texto en tinta u oro-hondo) */
  --durazno:#fdf1ec;        /* fondo de la banda de sellos y bloques suaves */
  --vino:#b8451c;
  --wa:#0e8043;             /* verde WhatsApp accesible — blanco 5.02 AA */
  --wa-hover:#0b6a37;
  --borde-campo:#8d8e99;    /* bordes de input/select — 3.25 (WCAG 1.4.11) */
  --humo:#6b6c74;           /* precio tachado y texto auxiliar */
  --linea:#e6e6e9;          /* separadores decorativos */
  --foco:#b8451c; --foco-oscuro:#fbe3d9;
  --sombra:0 2px 14px rgba(28,31,40,.07);
  --sombra-panel:0 12px 30px rgba(28,31,40,.10);
  --radio:10px;

  /* ---- DISPLAY (Bodoni Moda) — nunca por debajo de 24 px ---- */
  --fs-h1:    clamp(2rem,     1.315rem + 3.04vw, 3.75rem);   /* 32 → 60 */
  --fs-h2:    clamp(1.625rem, 1.234rem + 1.74vw, 2.625rem);  /* 26 → 42 */
  /* El mínimo va a 1.5rem, no a 1.375rem: la regla dura es que Bodoni nunca baje
     de 24 px y a 360-420 px de ancho el clamp original caía a 22 px. */
  --fs-h2s:   clamp(1.5rem,   1.397rem + 0.46vw, 1.875rem);  /* 24 → 30 */
  --fs-precio:clamp(1.5rem,   1.353rem + 0.65vw, 1.875rem);  /* 24 → 30 */
  --fs-cita:  clamp(1.5rem,   1.397rem + 0.46vw, 1.75rem);   /* 24 → 28 — suelo de Bodoni */
  /* ---- TEXTO (Archivo) ---- */
  --fs-h3:    clamp(1.0625rem, 0.99rem + 0.33vw, 1.25rem);   /* 17 → 20 */
  --fs-body:  clamp(1rem,      0.976rem + 0.11vw, 1.0625rem);/* 16 → 17 */
  --fs-small: clamp(0.8125rem, 0.788rem + 0.11vw, 0.875rem); /* 13 → 14 */
  --fs-micro: 0.75rem;                                        /* 12 — mínimo absoluto */
}

*{margin:0;padding:0;box-sizing:border-box}
html{font-size:100%;scroll-behavior:smooth}
body{font-family:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
     font-size:var(--fs-body);line-height:1.6;color:var(--tinta);background:var(--crema);
     font-optical-sizing:auto;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
button{font-family:inherit;cursor:pointer;color:inherit;background:none;border:0}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{
  outline:3px solid var(--foco);outline-offset:2px;border-radius:2px}
.oscuro a:focus-visible,.oscuro button:focus-visible{outline-color:var(--foco-oscuro)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- tipografía display ---------- */
.display{font-family:'Bodoni Moda',Georgia,serif;font-weight:600}
.t-h1{font-family:'Bodoni Moda',Georgia,serif;font-weight:600;font-size:var(--fs-h1);
      line-height:1.04;letter-spacing:-.028em;text-wrap:balance;max-width:17ch}
.t-h2{font-family:'Bodoni Moda',Georgia,serif;font-weight:600;font-size:var(--fs-h2);
      line-height:1.10;letter-spacing:-.022em;text-wrap:balance;max-width:20ch}
.t-h2s{font-family:'Bodoni Moda',Georgia,serif;font-weight:600;font-size:var(--fs-h2s);
      line-height:1.14;letter-spacing:-.018em;text-wrap:balance}
.t-cita{font-family:'Bodoni Moda',Georgia,serif;font-weight:500;font-style:italic;
      font-size:var(--fs-cita);line-height:1.32;letter-spacing:-.012em;text-wrap:pretty}
.eyebrow{font-size:var(--fs-micro);font-weight:600;letter-spacing:.16em;text-transform:uppercase;line-height:1.4}
p{text-wrap:pretty}
.lead,.parrafo{max-width:62ch}

/* ---------- barras superiores ---------- */
.barra-campana{background:var(--vino);color:#fff;text-align:center;padding:9px 14px;
  font-size:var(--fs-small);letter-spacing:.02em}
.barra-campana strong{font-weight:600}
.barra-campana b{font-variant-numeric:tabular-nums}
/* display:block a propósito: en flex, el <strong> se convertiría en un ítem
   independiente y la frase se rompería en columnas al llegar a móvil.
   El alto táctil de 44 px se consigue con min-height + padding. */
.barra-business{display:block;min-height:44px;background:var(--tinta);color:#e8e9ee;text-align:center;
  padding:11px 14px;font-size:var(--fs-small);text-decoration:none;letter-spacing:.02em;
  transition:background .15s ease}
.barra-business strong{color:var(--oro-claro);font-weight:600}
.barra-business:hover{background:#2a2e3d}

/* ---------- header ---------- */
header{background:var(--blanco);position:sticky;top:0;z-index:50;box-shadow:var(--sombra)}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 20px;max-width:1200px;margin:0 auto}
.marca{display:flex;align-items:center;gap:12px;text-decoration:none;min-height:44px;min-width:0}
.marca>span:last-child{min-width:0}
.marca-logo{width:48px;height:48px;border-radius:50%;background:var(--terra);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:'Bodoni Moda',Georgia,serif;font-size:1.6rem;font-weight:700;flex-shrink:0;line-height:1}
.marca-n{font-family:'Bodoni Moda',Georgia,serif;font-weight:500;
  font-size:clamp(1.7rem,1.55rem + .55vw,2rem);line-height:1.05;letter-spacing:.01em;display:block;
  font-optical-sizing:auto}
.marca small{display:block;font-family:'Archivo',sans-serif;font-size:var(--fs-micro);
  color:var(--tinta-suave);letter-spacing:.14em;text-transform:uppercase;font-weight:600;margin-top:3px}
.head-acc{display:flex;align-items:center;gap:10px}

/* ---------- botones ---------- */
.btn-wa{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--wa);color:#fff;
  text-decoration:none;padding:11px 20px;border-radius:999px;font-weight:600;font-size:var(--fs-small);
  letter-spacing:.01em;min-height:44px;transition:background .15s ease,transform .15s ease,box-shadow .15s ease}
.btn-wa:hover{background:var(--wa-hover);transform:translateY(-1px);box-shadow:0 6px 18px rgba(14,128,67,.32)}
.btn-wa svg{width:20px;height:20px;flex-shrink:0}
.btn-sec{display:inline-flex;align-items:center;justify-content:center;padding:11px 24px;
  border:1.5px solid var(--tinta);border-radius:999px;text-decoration:none;font-weight:600;
  font-size:var(--fs-small);letter-spacing:.01em;min-height:44px;
  transition:background .15s ease,color .15s ease}
.btn-sec:hover{background:var(--tinta);color:#fff}
.btn-menu{display:none;align-items:center;gap:8px;min-width:44px;min-height:44px;padding:8px 12px;
  border:1.5px solid var(--linea);border-radius:999px;font-weight:600;font-size:var(--fs-small)}
.btn-menu svg{width:20px;height:20px}
.btn-menu:hover{border-color:var(--terra)}

/* ---------- nav + mega-menú (escritorio) ---------- */
/* La fila envuelve: si los enlaces de la derecha no caben, bajan a una segunda línea
   alineados a la derecha. Nunca hay scroll horizontal ni texto cortado. */
.nav-mm{border-top:1px solid var(--linea);background:var(--blanco);min-height:46px}
.nav-mm-in{max-width:1340px;margin:0 auto;padding:0 20px;display:flex;align-items:center;flex-wrap:wrap}
.mm-list{display:flex;list-style:none;flex-wrap:nowrap}
.mm-list>li{position:static}
.mm-trigger{font-size:var(--fs-micro);font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:14px clamp(9px,.9vw,15px);min-height:46px;position:relative;white-space:nowrap;color:var(--tinta);
  text-decoration:none;display:inline-flex;align-items:center}
.mm-trigger::after{content:"";position:absolute;left:clamp(9px,.9vw,15px);right:clamp(9px,.9vw,15px);
  bottom:8px;height:2px;background:var(--terra);transform:scaleX(0);transform-origin:left;
  transition:transform .18s ease}
.mm-trigger:hover::after,.mm-trigger[aria-expanded="true"]::after,.mm-trigger.act::after{transform:scaleX(1)}
.nav-sep{display:none;width:1px;align-self:stretch;background:var(--linea);margin:12px 14px;flex-shrink:0}
.nav-util{display:flex;list-style:none;margin-left:auto;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.nav-util a{font-size:var(--fs-micro);font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--oro);text-decoration:none;padding:12px clamp(7px,.6vw,12px);display:inline-flex;align-items:center;
  min-height:44px;white-space:nowrap;border-bottom:2px solid transparent;transition:border-color .15s ease}
.nav-util a:hover{border-bottom-color:var(--oro)}
.nav-util a[aria-current="page"]{border-bottom-color:var(--oro)}
@media (min-width:1340px){.nav-sep{display:block}}

.mm-velo{position:fixed;inset:0;background:rgba(28,31,40,.28);z-index:39;opacity:0;
  transition:opacity .18s ease-out}
.mm-velo.on{opacity:1}
.mm-panel{position:absolute;left:0;right:0;top:100%;background:var(--blanco);
  border-top:1px solid var(--linea);box-shadow:var(--sombra-panel);z-index:2;
  max-height:calc(100vh - 150px);overflow-y:auto;overscroll-behavior:contain;
  opacity:0;transform:translateY(-6px);transition:opacity .18s ease-out,transform .18s ease-out}
.mm-panel.on{opacity:1;transform:translateY(0)}
.mm-in{max-width:1340px;margin:0 auto;padding:30px 20px 34px;
  display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:28px;align-items:start}
.mm-cols{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:26px 24px;align-content:start}
.mm-col h3{font-size:var(--fs-micro);font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--oro-hondo);padding-bottom:8px;margin-bottom:6px;border-bottom:1px solid var(--linea)}
.mm-col ul{list-style:none}
.mm-col button{display:flex;align-items:center;width:100%;text-align:left;font-size:.9375rem;
  line-height:1.32;padding:8px 0;min-height:44px;color:var(--tinta);transition:color .15s ease}
.mm-col button:hover{color:var(--oro);text-decoration:underline;text-underline-offset:3px}
.mm-n{color:var(--humo);font-size:var(--fs-micro);font-variant-numeric:tabular-nums;margin-left:5px}
.mm-side img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  border-radius:var(--radio);background:var(--crema)}
.mm-todo{display:inline-flex;align-items:center;gap:7px;margin-top:14px;
  font-size:var(--fs-micro);font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--oro);min-height:44px;transition:gap .15s ease}
.mm-todo:hover{gap:12px;text-decoration:underline;text-underline-offset:4px}

/* ---------- cajón móvil ---------- */
.drawer{position:fixed;inset:0;z-index:60;background:var(--blanco);
  display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;transform:translateX(100%);transition:transform .22s ease-out}
.drawer.on{transform:translateX(0)}
.drawer[hidden]{display:none}
.drawer-head{position:sticky;top:0;background:var(--blanco);display:flex;align-items:center;
  justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--linea);z-index:2}
.drawer-head span{font-size:var(--fs-micro);font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--oro-hondo)}
.drawer-x{width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--linea);border-radius:50%}
.drawer-x svg{width:18px;height:18px}
.ac-fila{display:flex;align-items:center;justify-content:space-between;width:100%;gap:12px;
  min-height:56px;padding:0 18px;border-bottom:1px solid var(--linea);
  font-size:1rem;font-weight:600;letter-spacing:.02em;text-align:left}
.ac-fila svg{width:18px;height:18px;flex-shrink:0;transition:transform .2s ease;color:var(--oro)}
.ac-fila[aria-expanded="true"] svg{transform:rotate(180deg)}
.ac-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .24s ease-out;
  background:var(--crema);border-bottom:1px solid var(--linea)}
.ac-panel.on{grid-template-rows:1fr}
.ac-in{overflow:hidden;min-height:0;visibility:hidden;transition:visibility 0s linear .24s}
.ac-panel.on .ac-in{visibility:visible;transition-delay:0s}
.ac-in>div{padding:6px 18px 16px}
.ac-g{font-size:var(--fs-micro);font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--oro-hondo);margin:14px 0 2px}
.ac-in ul{list-style:none}
.ac-in li{border-bottom:1px solid var(--linea)}
.ac-in li:last-child{border-bottom:0}
.ac-in button{display:flex;justify-content:space-between;gap:10px;width:100%;text-align:left;
  min-height:48px;align-items:center;font-size:.9375rem}
.ac-todo{display:inline-flex;align-items:center;gap:7px;margin-top:14px;min-height:44px;
  font-size:var(--fs-micro);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--oro)}
.drawer-util{list-style:none;border-top:8px solid var(--crema);margin-top:auto}
.drawer-util a{display:flex;align-items:center;min-height:52px;padding:0 18px;
  border-bottom:1px solid var(--linea);text-decoration:none;color:var(--oro);
  font-size:var(--fs-micro);font-weight:700;letter-spacing:.16em;text-transform:uppercase}

/* ---------- tarjeta de producto (rejilla del catálogo y relacionados) ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:20px;padding:18px 0 40px}
.card{background:var(--blanco);border-radius:var(--radio);overflow:hidden;box-shadow:var(--sombra);
  display:flex;flex-direction:column;position:relative;transition:transform .18s ease,box-shadow .18s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(29,26,23,.12)}
.badge{position:absolute;top:12px;left:12px;background:var(--vino);color:#fff;font-weight:600;
  font-size:var(--fs-micro);letter-spacing:.04em;padding:5px 11px;border-radius:6px;z-index:3}
.badge.agotado{background:#54555e}
.card-img{position:relative;aspect-ratio:1/1;background:#fff;overflow:hidden}
.card-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  transition:transform .25s ease,opacity .28s ease}
.card-img .im2{opacity:0;object-fit:cover}
.card-link{display:block;text-decoration:none}
.card-body{padding:14px 16px 18px;display:flex;flex-direction:column;gap:9px;flex:1}
.card-body h3{font-size:var(--fs-h3);font-weight:500;line-height:1.3;letter-spacing:-.005em;
  text-wrap:balance;min-height:2.6em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* el enlace ocupa las dos líneas reservadas del título: área táctil >=44 px sin cambiar el diseño */
.card-body h3 a{display:block;min-height:2.6em;text-decoration:none;transition:color .15s ease}
.card-body h3 a:hover{color:var(--oro)}
.precios{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.p-antes{color:var(--humo);text-decoration:line-through;font-size:var(--fs-small)}
.p-ahora{font-family:'Bodoni Moda',Georgia,serif;font-size:var(--fs-precio);font-weight:700;
  line-height:1;letter-spacing:-.01em;color:var(--tinta);font-variant-numeric:tabular-nums}
.card .btn-wa{margin-top:auto;font-size:var(--fs-small);padding:10px 14px}
.card .btn-wa.consultar{background:var(--tinta-suave)}
.card .btn-wa.consultar:hover{background:#43444c}
@media (hover:hover) and (pointer:fine){
  .card:hover .card-img .im1{transform:scale(1.03)}
  .card:hover .card-img .im2.lista{opacity:1}
}

/* ---------- footer ----------
   Ojo al selector: <footer> también es la firma de una cita (business.html usa
   <blockquote><footer>Yanbal</footer></blockquote>). Se limita al pie de página
   real para no pintar de negro esas firmas. */
body>footer{background:var(--tinta);color:#c7c9d1;padding:46px 0 30px;font-size:var(--fs-small);line-height:1.65}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:30px;margin-bottom:30px}
body>footer h3{color:#fff;font-size:var(--fs-micro);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:14px}
body>footer a{color:#f2b59a;text-decoration:none}
body>footer a:hover{text-decoration:underline}
body>footer li{list-style:none;margin-bottom:4px}
/* listas de enlaces del pie: área táctil de 44 px sin separar las líneas de texto plano */
.foot-grid li a{display:inline-flex;align-items:center;min-height:44px}
.legal{border-top:1px solid #34374a;padding-top:26px;text-align:center}
.legal__firma{font-family:'Bodoni Moda',Georgia,serif;font-size:1.75rem;font-weight:600;
  color:#fff;font-style:italic;line-height:1.2}
.legal__rol{font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;
  color:var(--oro-claro);margin:8px 0 14px;font-weight:600}
.legal__txt{font-size:var(--fs-small);color:#a9acb8;line-height:1.7;max-width:72ch;margin:0 auto}

/* ---------- WhatsApp flotante ---------- */
.wa-float{position:fixed;bottom:22px;right:22px;z-index:55;width:60px;height:60px;border-radius:50%;
  background:var(--wa);display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px rgba(14,128,67,.42);transition:transform .15s ease,background .15s ease}
.wa-float:hover{transform:scale(1.08);background:var(--wa-hover)}
.wa-float svg{width:32px;height:32px;fill:#fff}

/* ---------- responsive del armazón ---------- */
@media (max-width:1023px){
  .nav-mm{display:none}
  .btn-menu{display:inline-flex}
  .mm-velo{display:none}
}
@media (min-width:1024px){
  .drawer{display:none!important}
}
@media (max-width:860px){
  .head-in .btn-wa span{display:none}
  .head-in .btn-wa{padding:11px 14px}
  .marca-logo{width:42px;height:42px;font-size:1.5rem}
}
@media (max-width:560px){
  /* el cargo ya lo dicen el sello del hero y el pie: en móvil roba tres líneas al header */
  .marca small{display:none}
  /* el nombre encoge con el viewport y, si aun así no cabe, se corta con elipsis
     en vez de empujar la página a scroll horizontal */
  .marca-n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
    font-size:clamp(1.1rem,5vw,1.7rem)}
}
@media (max-width:420px){
  .btn-menu span{display:none}
  .grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}