/* =====================================================================
   BARRANCOLÍ · COFFEE ROASTERS — DESIGN SYSTEM
   Fuente única de verdad. Diseño "La Casa": lienzo crema, verde + oro,
   tipografía editorial. Aesop como norte de elegancia y contención.
   Tipografías (Google Fonts): Marcellus · Cormorant Garamond · Jost
   ===================================================================== */

/* ---------- 1. TOKENS ------------------------------------------------ */
:root{
  /* Marca — color (hex exactos + Pantone de referencia) */
  --green:#106838;        /* P.349C  · tueste medio/suave */
  --greenD:#284E36;       /* P.553C  · hero / footer / autoridad */
  --gold:#A9772E;         /* oro/cobre · reserva / acento premium */
  --gold2:#C2873E;        /* oro claro (hover/realces) */
  --orange:#E5844F;       /* P.7576C · ave / detalles cálidos */
  --burg:#8A1538;         /* P.1955C · tueste oscuro */

  /* Superficies neutras */
  --canvas:#E8E3D7;       /* fondo del lienzo (fuera del marco) */
  --page:#F6F3EC;         /* crema · fondo dominante de página */
  --panel:#ffffff;        /* tarjetas / paneles */
  --util:#EFE9DD;         /* barras, bloques suaves */
  --arena:#EBE1D0;        /* placeholders / superficies cálidas */

  /* Tinta y líneas */
  --ink:#1F1B14;          /* texto principal */
  --ink2:#6E665A;         /* texto secundario */
  --line:rgba(31,27,20,.09);  /* hairline */
  --line2:rgba(31,27,20,.16); /* hairline sobre oscuro */

  /* Tipografía */
  --fd:'Marcellus',Georgia,serif;            /* display / titulares */
  --fed:'Cormorant Garamond',Georgia,serif;  /* editorial / cuerpo */
  --fui:'Jost',system-ui,sans-serif;         /* UI / labels */

  /* Escala tipográfica (fluida en titulares) */
  --t-h1:clamp(32px,5vw,56px);
  --t-h2:clamp(26px,3.4vw,40px);
  --t-h3:24px; --t-h4:20px;
  --t-lead:20px; --t-body:16px; --t-ui:15px; --t-sm:13px;
  --t-eyb:11.5px;

  /* Espaciado */
  --s-1:6px; --s-2:10px; --s-3:14px; --s-4:18px; --s-5:24px;
  --s-6:34px; --s-7:46px; --s-8:56px;
  --pad-sec:56px;     /* padding vertical de sección */
  --pad-x:34px;       /* padding horizontal de página */
  --maxw:1180px;      /* ancho máximo del lienzo */
  --maxw-read:760px;  /* ancho de lectura (artículos) */

  /* Bordes / sombras / movimiento */
  --bd:1px solid var(--line);
  --bd-h:.5px solid var(--line);
  --sh-card:0 16px 30px rgba(20,20,16,.10);
  --sh-soft:0 12px 24px rgba(20,20,16,.08);
  --ring:0 0 0 3px rgba(169,119,46,.12);  /* focus oro */
  --ease:.25s cubic-bezier(.4,0,.2,1);
  --ease-slow:.4s cubic-bezier(.4,0,.2,1);
}

/* ---------- 2. RESET / BASE ----------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--canvas);color:var(--ink);
  font-family:var(--fui);font-size:var(--t-ui);line-height:1.7;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none;cursor:pointer}
img{max-width:100%;display:block}
::selection{background:rgba(169,119,46,.18)}

/* Lienzo centrado */
.aw{max-width:var(--maxw);margin:0 auto;background:var(--page);overflow:hidden}

/* ---------- 3. TIPOGRAFÍA ------------------------------------------- */
.dsp{font-family:var(--fd);font-weight:400;line-height:1.12}   /* titulares */
.ed{font-family:var(--fed);line-height:1.45}                   /* editorial */
.eyb{                                                          /* eyebrow */
  font-family:var(--fui);font-size:var(--t-eyb);letter-spacing:.26em;
  text-transform:uppercase;color:var(--gold);
}
.h1{font-family:var(--fd);font-weight:400;font-size:var(--t-h1);line-height:1.06}
.h2{font-family:var(--fd);font-weight:400;font-size:var(--t-h2);line-height:1.12}
.h3{font-family:var(--fd);font-weight:400;font-size:var(--t-h3)}
.h4{font-family:var(--fd);font-weight:400;font-size:var(--t-h4)}
.lead{font-family:var(--fed);font-size:var(--t-lead);color:var(--ink2);line-height:1.5}
.muted{color:var(--ink2)}
.price{font-family:var(--fd)}
.price small{font-family:var(--fui);font-size:11px;color:var(--ink2);margin-left:4px}

/* ---------- 4. LAYOUT ----------------------------------------------- */
.sec{padding:var(--pad-sec) var(--pad-x);border-top:var(--bd)}
.wrap{padding:0 var(--pad-x)}
.ctr{text-align:center;max-width:58ch;margin:0 auto var(--s-7)}
.read{max-width:var(--maxw-read);margin:0 auto}
.grid{display:grid;gap:var(--s-5)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

/* ---------- 5. CABECERA / NAV --------------------------------------- */
.util{
  display:flex;justify-content:space-between;align-items:center;
  padding:11px var(--pad-x);font-size:11.5px;letter-spacing:.05em;
  color:var(--ink2);background:var(--util);
}
.util .r{display:flex;gap:22px;align-items:center}
.util .pro{color:var(--gold)}
.hdr{text-align:center;padding:30px var(--pad-x) 16px}
.hdr .logo{height:108px;width:auto}
.nav{
  display:flex;justify-content:center;gap:30px;margin-top:22px;
  font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink);
}
.nav a{padding-bottom:5px;border-bottom:1px solid transparent;transition:border-color var(--ease),color var(--ease)}
.nav a:hover{border-color:var(--gold);color:var(--gold)}
.nav a.cur{color:var(--gold);border-color:var(--gold)}

/* ---------- 6. BOTONES ---------------------------------------------- */
/* Primario (verde) · CTA principal */
.btnD{display:inline-block;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  padding:14px 28px;background:var(--green);color:#fff;border:1px solid var(--green);
  transition:background var(--ease),border-color var(--ease);cursor:pointer;text-align:center}
.btnD:hover{background:var(--greenD);border-color:var(--greenD)}
/* Oro (outline) · secundario premium */
.btnG{display:inline-block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:14px 30px;border:1px solid var(--gold);color:var(--ink);background:transparent;
  transition:background var(--ease),color var(--ease);cursor:pointer}
.btnG:hover{background:var(--gold);color:#fff}
/* Tinta (outline) · terciario */
.btnL{display:inline-block;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  padding:13px 26px;border:1px solid var(--ink);color:var(--ink);background:transparent;
  transition:background var(--ease),color var(--ease);cursor:pointer}
.btnL:hover{background:var(--ink);color:var(--page)}
/* Hairline · acciones suaves */
.btnGh{display:inline-block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  padding:11px 18px;border:1px solid var(--line);color:var(--ink2);background:transparent;
  transition:border-color var(--ease),color var(--ease);cursor:pointer}
.btnGh:hover{border-color:var(--gold);color:var(--gold)}
/* Claro · sobre fondos oscuros (verde) */
.btnGlt{display:inline-block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:14px 30px;border:1px solid rgba(246,243,236,.5);color:#F6F3EC;background:transparent;
  transition:background var(--ease),border-color var(--ease);cursor:pointer}
.btnGlt:hover{background:rgba(246,243,236,.12);border-color:#F6F3EC}
/* Estados */
.btnD[disabled],.btnG[disabled],.btnL[disabled]{opacity:.4;pointer-events:none;cursor:not-allowed}
.btn-block{display:block;width:100%}

/* ---------- 7. FORMULARIOS ------------------------------------------ */
label{display:block;font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink2);margin-bottom:6px}
input,select,textarea{width:100%;border:1px solid var(--line);background:var(--panel);
  padding:0 15px;height:48px;font-family:var(--fui);font-size:14px;color:var(--ink);
  border-radius:0;-webkit-appearance:none;appearance:none;transition:border-color var(--ease),box-shadow var(--ease)}
textarea{height:auto;padding:13px 15px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);box-shadow:var(--ring)}
input::placeholder,textarea::placeholder{color:#a89e8e}
select{background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236E665A'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center}
.fld{margin-bottom:14px}
.fr2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fr3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.check{display:flex;align-items:center;gap:10px;font-family:var(--fed);font-size:16px;color:var(--ink2);cursor:pointer}
.check input{width:17px;height:17px;accent-color:var(--green)}

/* ---------- 8. TAGS · CHIPS · ESTADOS ------------------------------- */
/* Tag de tueste — codificación de color (sutil) */
.tag{font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:5px 11px;
  background:#ffffffcc;border:1px solid}
.tag--medio{color:var(--green);border-color:#10683855}    /* medio/suave */
.tag--oscuro{color:var(--burg);border-color:#8A153855}    /* oscuro */
.tag--reserva{color:var(--gold);border-color:#A9772E55}   /* reserva/edición */
/* Chip de filtro */
.chip{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;padding:9px 18px;
  border:1px solid var(--line);cursor:pointer;color:var(--ink2);transition:var(--ease)}
.chip:hover{border-color:var(--ink2);color:var(--ink)}
.chip.on{background:var(--ink);color:var(--page);border-color:var(--ink)}
/* Pill de estado (suscripción / pedido) */
.pill{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;padding:5px 11px;border:1px solid;border-radius:999px}
.pill .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.pill--active{color:var(--green);border-color:#10683844;background:#10683810}
.pill--paused{color:var(--gold);border-color:#a9772e44;background:#a9772e12}
.pill--transit{color:var(--gold);border-color:#a9772e40;background:#a9772e10}
.pill--roast{color:var(--orange);border-color:#e5844f40;background:#e5844f12}

/* ---------- 9. TARJETAS --------------------------------------------- */
.card{background:var(--panel);border:var(--bd-h);padding:24px 26px}
.card--glow{background:linear-gradient(180deg,#f3ede1,#fff)}
/* Tarjeta de producto / pack */
.pcard{background:var(--panel);border:var(--bd-h);overflow:hidden;cursor:pointer;
  display:flex;flex-direction:column;transition:transform var(--ease),box-shadow var(--ease)}
.pcard:hover{transform:translateY(-3px);box-shadow:var(--sh-card)}
.pcard .ph{aspect-ratio:1/1;position:relative;overflow:hidden;display:flex;align-items:flex-start}
.pcard .ph .seal{position:absolute;right:-18px;bottom:-14px;width:120px;opacity:.16}
.pcard .bd{padding:18px;display:flex;flex-direction:column;flex:1}
.pcard .pname{font-family:var(--fd);font-size:19px;line-height:1.12;margin:5px 0 8px}
.pcard .pprod{font-size:10.5px;color:var(--gold);letter-spacing:.12em;text-transform:uppercase}

/* ---------- 10. COMPONENTES ----------------------------------------- */
/* Acordeón */
.acc{border-bottom:var(--bd)}
.acc summary{list-style:none;cursor:pointer;padding:19px 0;display:flex;justify-content:space-between;
  align-items:center;gap:20px;font-family:var(--fd);font-size:18px}
.acc summary::-webkit-details-marker{display:none}
.acc summary .pm{color:var(--gold);font-size:20px;transition:transform var(--ease);flex:0 0 auto}
.acc[open] summary .pm{transform:rotate(45deg)}
.acc .body{font-family:var(--fed);font-size:16px;color:var(--ink2);padding:0 0 20px;line-height:1.5;max-width:64ch}
/* Stepper de cantidad */
.qty{display:inline-flex;align-items:center;border:1px solid var(--line)}
.qty button{width:34px;height:34px;border:0;background:transparent;font-size:16px;cursor:pointer;
  color:var(--ink);font-family:var(--fui);transition:color var(--ease)}
.qty button:hover{color:var(--gold)}
.qty span{min-width:34px;text-align:center;font-size:14px}
/* Opción seleccionable (radio-card) */
.opt{border:1px solid var(--line);background:var(--page);padding:15px 16px;cursor:pointer;
  position:relative;transition:border-color var(--ease),box-shadow var(--ease)}
.opt:hover{border-color:var(--ink2)}
.opt.on{border-color:var(--green);background:var(--panel);box-shadow:0 0 0 2px rgba(16,104,56,.14)}
.opt.on--gold{border-color:var(--gold);box-shadow:0 0 0 2px rgba(169,119,46,.16)}
.opt .ot{font-family:var(--fd);font-size:17px;line-height:1.1}
.opt .od{font-family:var(--fed);font-size:14px;color:var(--ink2);margin-top:2px}
/* Barra de progreso (envío gratis) */
.bar-track{height:4px;background:var(--util);position:relative;overflow:hidden}
.bar-fill{position:absolute;inset:0 auto 0 0;background:var(--gold);transition:width var(--ease-slow)}
/* Cita / pull-quote */
.pull{border-left:2px solid var(--gold);padding:6px 0 6px 26px;font-family:var(--fed);
  font-style:italic;font-size:26px;line-height:1.32;color:var(--ink)}

/* ---------- 11. BANDAS / FOOTER ------------------------------------- */
.news{background:var(--util);text-align:center;padding:54px var(--pad-x);border-top:var(--bd)}
.news .form{display:flex;gap:10px;max-width:440px;margin:0 auto}
.news input{flex:1;height:50px;background:var(--page)}
.ftr{background:var(--greenD);color:rgba(246,243,236,.74);padding:46px var(--pad-x)}
.ftr .flogo{height:46px;margin-bottom:14px}
.ftr h5{color:var(--gold);letter-spacing:.18em;font-size:11px;font-weight:400;margin:0 0 12px;text-transform:uppercase}
.ftr .fg{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:26px}
.ftr .col div{font-size:12px;line-height:2.05;color:rgba(246,243,236,.72);cursor:pointer}
.ftr .col div:hover{color:var(--gold)}
.ftr .bar{border-top:1px solid var(--line2);margin-top:24px;padding-top:16px;display:flex;
  justify-content:space-between;font-size:11.5px;letter-spacing:.04em;flex-wrap:wrap;gap:8px}

/* ---------- 12. UTILIDADES ------------------------------------------ */
.tc{text-align:center}.tr{text-align:right}
.mt0{margin-top:0}.mt2{margin-top:var(--s-2)}.mt4{margin-top:var(--s-4)}.mt6{margin-top:var(--s-6)}
.c-green{color:var(--green)}.c-gold{color:var(--gold)}.c-burg{color:var(--burg)}.c-ink2{color:var(--ink2)}
.bg-green{background:var(--greenD);color:#F6F3EC}
.bg-gold{background:var(--gold);color:#fff}
.bg-util{background:var(--util)}
.hairline{border-top:var(--bd)}

/* ---------- 13. RESPONSIVE (breakpoints canónicos) ------------------ */
/* 880px = tablet · 560px = móvil */
@media(max-width:880px){
  .g4{grid-template-columns:1fr 1fr}.g3{grid-template-columns:1fr}
  .ftr .fg{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  :root{--pad-x:18px;--pad-sec:42px}
  .hdr .logo{height:78px}
  .nav{flex-wrap:wrap;gap:14px}
  .g2,.g4{grid-template-columns:1fr}
  .fr2,.fr3{grid-template-columns:1fr}
  .ftr .fg{grid-template-columns:1fr}
}