/* ══════════════════════════════════════════════════════════════════
   DULCES CRIOLLOS · SISTEMA COMPARTIDO

   Única fuente de la identidad y del marco: tokens, reset, tipografía,
   contenedor, botones base, cabecera, navegación, pie y firma.

   Lo carga TODA página —portada, historia, blog y artículos— antes de
   su CSS propio, de modo que lo específico de cada una pueda matizar
   sin duplicar el sistema.

   Salió tal cual del <style> de la portada, que es la referencia visual
   V13. Ni una regla reescrita: si algo se ve distinto tras la
   extracción, es un error de la extracción, no una decisión de diseño.

   NO poner aquí: hero, catálogo, carrito, vitrina, tortas, momentos,
   FAQ ni comunidad (viven en index.html), ni los layouts editoriales de
   historia/blog (viven en dc-paginas.css).
   ══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════
   DULCES CRIOLLOS — V11.1
   Dirección visual congelada. Esta pasada es de movimiento con
   propósito y conversión: cada animación revela producto, confirma
   una acción o facilita una venta.
   ══════════════════════════════════════════════════════════ */
:root{
  --pagina:#FBF2EA; --blanco:#FFFFFF; --rosa:#F7E2E8; --rosa2:#FBECF0;
  --panelc:#E9C2CE; --vino:#7A2138; --vino-hondo:#5E1A2A;
  --marca:#8C2640; --marca-h:#6E1E32; --tinta:#33222A; --humo:#7C6068;
  --linea:#EFE0DA; --crema-sobre-vino:#F7E6DC; --tenue-vino:#DDB6BE; --verde:#25A366;
  --f:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  /* Solo para titulares y momentos editoriales. Nunca en interfaz:
     botones, filtros, precios y cuerpo siguen en Poppins. */
  --fd:'Fraunces','Poppins',Georgia,serif;
  --ease:cubic-bezier(.22,.9,.28,1); --muelle:cubic-bezier(.2,1.1,.3,1);
  --max:1180px;
  --s1:0 2px 4px rgba(51,34,42,.03),0 14px 34px -16px rgba(51,34,42,.2);
  --s2:0 4px 10px rgba(51,34,42,.05),0 34px 70px -26px rgba(51,34,42,.34);
  --barra-movil:0px;
}
*{box-sizing:border-box;margin:0;padding:0}
/* clip y no hidden: contiene el sangrado del producto sin romper el
   position:sticky de la cabecera, y hace falta en html ademas de body. */
html{scroll-behavior:smooth;overflow-x:clip}
body{background:var(--pagina);color:var(--tinta);font-family:var(--f);font-size:16px;line-height:1.65;
  font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:clip;padding-bottom:var(--barra-movil)}
body.trab{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2.5px solid var(--marca);outline-offset:3px;border-radius:10px}
h1,h2,h3,h4{font-weight:600;line-height:1.16;letter-spacing:-.025em}
/* Fraunces solo en los titulares grandes: h1 del hero, h2 de sección,
   panel de vitrina y bloque de historia. Los h3/h4 de tarjeta y de
   producto se quedan en Poppins, que es donde empieza la interfaz. */
.hero h1,.cab h2,.panel-tx h2,.linea-t .an,.cifra .n,.cierre h2{
  font-family:var(--fd);font-optical-sizing:auto;font-variation-settings:'SOFT' 0,'WONK' 0}
.hero h1,.cab h2,.panel-tx h2,.cierre h2{font-weight:600;letter-spacing:-.03em;line-height:1.08}
.cifra .n,.linea-t .an{font-weight:700}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:24px}
.f-crema{background:var(--pagina)} .f-blanco{background:var(--blanco)}
.f-vino{background:var(--vino-hondo);color:var(--crema-sobre-vino)}
section{padding-block:clamp(44px,5.5vw,84px)}

/* el hilo: tres momentos — portada, historia y cierre. Ni uno más. */
.hilo{display:block;width:100%;height:auto;color:var(--marca);opacity:.5}
.hilo path{stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.js .hilo path{stroke-dasharray:1;stroke-dashoffset:1}
.js .hilo.vis path{animation:traza 1.5s var(--ease) forwards}
@keyframes traza{to{stroke-dashoffset:0}}

.js .rv{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0s)}
.js .rv.vis{opacity:1;transform:none}
.js .mask{clip-path:inset(0 0 100% 0);transition:clip-path 1s var(--ease);transition-delay:var(--d,0s)}
.js .mask.vis{clip-path:inset(0 0 0 0)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:52px;padding:0 26px;
  border:0;border-radius:99px;cursor:pointer;font-family:var(--f);font-size:15px;font-weight:500;
  text-decoration:none;transition:.24s var(--ease);white-space:nowrap}
.btn svg{width:17px;height:17px;flex:none}
.btn:hover{transform:translateY(-2px)}
.b1{background:var(--marca);color:#fff;box-shadow:0 12px 28px -12px var(--marca)}
.b1:hover{background:var(--marca-h)}
.b2{background:var(--blanco);color:var(--vino);border:1px solid var(--linea)}
.b2:hover{border-color:var(--marca)}
.b3{background:var(--crema-sobre-vino);color:var(--vino-hondo)}
.b3:hover{background:#fff}
.bw{background:var(--verde);color:#fff;box-shadow:0 12px 28px -12px var(--verde)}
.bw:hover{background:#1E8B56}
.btn[disabled]{opacity:.4;cursor:not-allowed;transform:none!important;box-shadow:none}
.bsm{min-height:44px;padding:0 18px;font-size:13.5px}

/* ══ CABECERA ══ */
header{position:sticky;top:0;z-index:60;background:rgba(251,242,234,.92);backdrop-filter:blur(14px)}
header.sm{box-shadow:0 4px 24px -16px rgba(51,34,42,.6)}
.hb{display:flex;align-items:center;gap:16px;padding:15px 24px;max-width:var(--max);margin-inline:auto}
.hb .logo{height:28px;flex:none}
/* El logo es un enlace a la portada: necesita alto de objetivo tactil,
   no el alto de la imagen. */
.logo-l{display:flex;align-items:center;min-height:44px}
.hnav{display:none;gap:4px;margin-inline:auto}
@media(min-width:1000px){.hnav{display:flex}}
.hnav a{padding:9px 15px;border-radius:99px;text-decoration:none;font-size:14px;color:var(--humo);transition:.2s}
.hnav a:hover{color:var(--vino);background:var(--rosa2)}
.hacc{display:flex;align-items:center;gap:9px;margin-left:auto}
@media(min-width:1000px){.hacc{margin-left:0}}
.mon{display:none;gap:2px;padding:3px;border-radius:99px;background:var(--rosa2)}
@media(min-width:360px){.mon{display:flex}}
.mb{min-height:44px;padding:0 14px;border-radius:99px;cursor:pointer;background:transparent;border:0;
  color:var(--humo);font-family:var(--f);font-size:12.5px;font-weight:500;transition:.2s}
.mb[aria-pressed="true"]{background:var(--marca);color:#fff}
.bolsa{position:relative;display:inline-flex;align-items:center;gap:9px;min-height:46px;padding:0 8px 0 17px;
  border-radius:99px;cursor:pointer;background:var(--marca);color:#fff;border:0;font-family:var(--f);
  font-size:13.5px;font-weight:500;transition:.24s var(--ease);box-shadow:0 12px 26px -14px var(--marca)}
.bolsa{text-decoration:none}
.bolsa:hover{background:var(--marca-h);transform:translateY(-1px)}
.bolsa svg{width:17px;height:17px}
.bolsa .rot{display:none}
@media(min-width:480px){.bolsa .rot{display:inline}}
.bolsa .n{min-width:24px;height:24px;padding:0 7px;border-radius:99px;background:rgba(255,255,255,.24);
  display:grid;place-items:center;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.bolsa.pop{animation:pop .42s var(--muelle)}
@keyframes pop{38%{transform:scale(1.12)}}
@media(max-width:999px){
  .hb{flex-wrap:wrap;padding:12px 24px 10px;gap:10px 12px;align-items:center}
  .hb .logo{height:31px}
  .hacc{display:contents}
  .bolsa{order:0;margin-left:auto}
  .hb::after{content:"";flex:1 0 100%;order:1;height:0}
  .hnav{display:flex;order:2;flex:1 1 0;min-width:0;gap:2px;overflow-x:auto;scrollbar-width:none}
  .hnav::-webkit-scrollbar{display:none}
  .hnav a{flex:none;min-height:44px;display:inline-flex;align-items:center;white-space:nowrap;font-size:13.5px;padding:0 12px}
  .hnav a:first-child{padding-left:0}
  .mon{order:2;flex:none;margin-left:auto}
}

/* ── rótulo de sección ─────────────────────────────────────────── */
.et{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--marca);margin-bottom:10px}
.f-vino .et,.oscura .et{color:var(--tenue-vino)}

/* ── pie ────────────────────────────────────────────────────────────
   Tres columnas, compacto y con aire. El anterior se había quedado en
   una sola línea de iconos y no daba ni la dirección ni el horario.
   No se vuelve al pie pesado: sin cajas, sin bordes, sin iconos
   grandes; solo jerarquía tipográfica. */
footer{background:var(--vino-hondo);color:var(--tenue-vino);
  padding:clamp(40px,5vw,64px) clamp(18px,4.4vw,44px) clamp(20px,2.4vw,28px)}
.pie-g{max-width:var(--max);margin-inline:auto;display:grid;gap:clamp(26px,3.4vw,44px);
  grid-template-columns:1fr}
@media(min-width:760px){.pie-g{grid-template-columns:1.25fr 1fr 1fr;gap:clamp(30px,4vw,64px)}}
.pie-c h4,.pie-m{font-family:var(--disp,var(--f));font-size:13px;font-weight:700;
  letter-spacing:.02em;color:var(--crema-sobre-vino);margin-bottom:12px;display:block}
.pie-m{font-size:16px;letter-spacing:-.01em}
.pie-c p{font-size:13.5px;font-weight:300;line-height:1.62;color:var(--tenue-vino)}
.pie-c p b{font-weight:600;color:var(--crema-sobre-vino)}
.pie-hr{margin-top:10px}
.pie-c a{color:var(--tenue-vino);text-decoration:none;
  border-bottom:1px solid rgba(221,182,190,.28);padding-bottom:1px;transition:.2s}
.pie-c a:hover{color:#fff;border-bottom-color:currentColor}

/* Franja de cierre: la línea legal y la autoría, discretas pero
   legibles. La firma estaba al 70% de opacidad y 11px, y en la práctica
   no se leía en ninguna página. */
.pie-f{max-width:var(--max);margin:clamp(30px,3.6vw,48px) auto 0;
  padding-top:clamp(16px,1.8vw,22px);border-top:1px solid rgba(247,230,220,.16);
  display:flex;flex-wrap:wrap;gap:8px 26px;align-items:center;justify-content:space-between;
  font-size:12px;font-weight:300;color:var(--tenue-vino)}
.firma{font-size:12.5px;font-weight:400;color:var(--crema-sobre-vino);letter-spacing:.01em}
.firma a{color:#fff;font-weight:600;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:1px;transition:.2s}
.firma a:hover{border-bottom-color:#fff;color:#fff}
@media(max-width:599px){
  .pie-f{flex-direction:column;align-items:flex-start;gap:10px}
}

/* ── mobiliario de cabecera: la referencia de tasa ──────────────── */
/* Una sola referencia de tasa, discreta. Si no hay tasa del día, se dice
   que es una referencia anterior y con qué fecha; nunca se hace pasar
   una tasa vieja por la de hoy. */
.tasa-p{display:inline-flex;align-items:center;gap:7px;background:var(--rosa2);
  border-radius:99px;padding:8px 15px;font-size:12.5px;font-weight:600;color:var(--vino);
  white-space:nowrap;font-variant-numeric:tabular-nums}
.tasa-p[hidden]{display:none}
.tasa-p i{width:6px;height:6px;border-radius:50%;background:var(--verde);flex:none;font-style:normal}
.tasa-p.vieja i{background:var(--panelc)}
@media(max-width:640px){.tasa-p{display:none}}