/* Glosilla Formación: shared stylesheet.
   Order: tokens, reset, type, layout helpers, motion, buttons and small parts, forms, tables,
   header, footer, 404 (.site-*), print, reduced motion. Page CSS files only add to this.
   Luxe language: ivory paper, deep-green ink, brass in hairlines, radius 0-2px, no shadows. */

:root{
  --paper:#f6f1e7; --surface:#fffdf8; --tint:#ece4d3;
  --ink:#14241d;      /* headings 14.3:1 on paper */
  --text:#2b3a33;     /* body 10.6:1 paper, 9.5:1 tint */
  --muted:#56635b;    /* captions 5.6:1 paper, 5.0:1 tint */
  --brass:#7d5a16;    /* text/links on light 5.6:1 paper, 5.0:1 tint */
  --brass-l:#d2ac62;  /* hairlines, numerals on DARK only; decoration on light */
  --green:#2f5d46;    /* primary fill: --on-dark on it 6.7:1; green text on paper 6.7:1 */
  --terra:#a3432a;    /* errors only, 5.5:1 on paper / 6.1 on surface */
  --line:rgba(20,36,29,.18); --line-strong:rgba(20,36,29,.4);
  --on-dark:#f6f1e7; --muted-d:#b9c5bc;            /* on --ink: 14.3 / 9.1 */
  --line-d:rgba(210,172,98,.4);                    /* hairline on dark */
  --sc-accent:#2f5d46; --sc-icon-stroke:1.5;       /* chat widget (module supplies the rest) */
  --wrap:1180px; --r:2px;
  --font-head:'Cormorant Garamond',Georgia,serif; --font-ui:'Jost',sans-serif;
  --head-h:72px; --ease:cubic-bezier(.22,.7,.2,1);
  --gutter:clamp(16px,4vw,48px);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--head-h) + 16px)}
body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul,ol{padding:0}
body{background:var(--paper);color:var(--text);font:400 1.0625rem/1.65 var(--font-ui);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;min-width:320px}
main img,.site-head img,.site-foot img,main svg{max-width:100%}
main img,.site-head img,.site-foot img{display:block;height:auto}
a{color:inherit;text-decoration:none}
::selection{background:var(--green);color:var(--on-dark)}
:where(main,.site-head) button{font:inherit;color:inherit}
main{display:block;min-height:60vh}
hr{border:0;border-top:1px solid var(--line);margin:0}

/* ---------- typography ---------- */
h1,h2,h3,h4{font-family:var(--font-head);font-weight:500;color:var(--ink);text-wrap:balance}
h1{font-size:clamp(2.6rem,6.2vw,5rem);line-height:1.02;letter-spacing:.02em}
h2{font-size:clamp(2rem,4.2vw,3.35rem);line-height:1.08;letter-spacing:.02em}
h3{font-size:clamp(1.4rem,2.2vw,1.8rem);line-height:1.2;letter-spacing:.01em}
h4{font-size:1.2rem;line-height:1.25;font-weight:600}
:where(h1,h2,h3,h4) em,.italic{font-style:italic;font-weight:500}
p{text-wrap:pretty}
strong,b{font-weight:600;color:var(--ink)}
small{font-size:.875rem}
.lead{font-family:var(--font-head);font-style:italic;font-weight:500;font-size:clamp(1.35rem,2.2vw,1.75rem);line-height:1.35;color:var(--ink)}
.muted{color:var(--muted)}
.measure{max-width:620px}
.numeral{font-family:var(--font-head);font-weight:500;color:var(--brass);line-height:1;font-variant-numeric:lining-nums}
.prose>*+*{margin-top:1em}
.prose a,p a:not([class]){color:var(--brass);text-decoration:underline;text-decoration-color:var(--brass-l);text-decoration-thickness:1px;text-underline-offset:.2em;transition:text-decoration-color .3s}
.prose a:hover,p a:not([class]):hover{text-decoration-color:var(--brass)}

/* ---------- layout helpers ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.bleed{width:100%;max-width:none;position:relative}
.pad{padding-block:clamp(56px,9vw,120px)}
.grid{display:grid;gap:clamp(16px,2.4vw,32px)}
.grid>*{min-width:0}
.frame{outline:1px solid var(--line);outline-offset:10px;margin:10px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
[hidden]{display:none!important}
.skip{position:fixed;left:12px;top:-80px;z-index:100;background:var(--ink);color:var(--on-dark);padding:.8rem 1.1rem;font-weight:600;font-size:.9rem;transition:top .2s}
.skip:focus{top:12px}

/* dark band: background ink, secondary text, hairlines and numerals in light brass */
.dark{background:var(--ink);color:var(--on-dark)}
.dark :where(h1,h2,h3,h4,strong,b){color:var(--on-dark)}
.dark .muted,.dark :where(small){color:var(--muted-d)}
.dark .eyebrow,.dark .numeral{color:var(--brass-l)}
.dark :where(hr){border-color:var(--line-d)}
.dark ::selection{background:var(--brass-l);color:var(--ink)}
.dark .prose a,.dark p a:not([class]){color:var(--on-dark);text-decoration-color:var(--brass-l)}

/* focus: green on light, light brass on dark */
:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.dark :focus-visible,.site-foot :focus-visible{outline-color:var(--brass-l)}
:focus:not(:focus-visible){outline:none}

/* ---------- motion ---------- */
@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes slow-zoom{from{transform:scale(1)}to{transform:scale(1.09)}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.zoom{animation:slow-zoom 24s ease-out both;transform-origin:50% 40%}

html.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
html.js .reveal.in{opacity:1;transform:none}
html.js .reveal[data-delay="1"]{transition-delay:.12s}
html.js .reveal[data-delay="2"]{transition-delay:.24s}
html.js .reveal[data-delay="3"]{transition-delay:.36s}
html.no-rv .reveal{opacity:1;transform:none}   /* site.js never loaded: show everything */

.rule{display:block;height:1px;border:0;background:var(--brass-l);transform-origin:left center;margin:0}
html.js .rule{transform:scaleX(0)}
html.js .rule.in,html.js .in .rule{animation:draw 1.1s var(--ease) both}
html.no-rv .rule{transform:none}

/* ---------- buttons and small parts ---------- */
.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:48px;padding:.7rem 1.7rem;border:1px solid var(--green);border-radius:var(--r);background:var(--green);color:var(--on-dark);font:600 .8rem/1.2 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;text-align:center;cursor:pointer;transition:color .4s var(--ease),border-color .4s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);transform:scaleX(0);transform-origin:left center;transition:transform .45s var(--ease)}
.btn:hover::before,.btn:focus-visible::before{transform:scaleX(1)}
.btn:hover{border-color:var(--ink)}
.btn--ghost{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn--ghost:hover,.btn--ghost:focus-visible{color:var(--on-dark)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.btn[disabled]::before{display:none}
.dark .btn{background:var(--on-dark);border-color:var(--on-dark);color:var(--ink)}
.dark .btn::before{background:var(--brass-l)}
.dark .btn:hover{border-color:var(--brass-l)}
.dark .btn--ghost{background:transparent;color:var(--on-dark);border-color:var(--on-dark)}
.dark .btn--ghost::before{background:var(--on-dark)}
.dark .btn--ghost:hover,.dark .btn--ghost:focus-visible{color:var(--ink)}

.eyebrow{display:inline-block;font:600 .78rem/1.3 var(--font-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--brass)}
.tag{display:inline-block;padding:.2rem .6rem;border:1px solid var(--line-strong);border-radius:var(--r);font:500 .78rem/1.35 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.dark .tag{border-color:var(--line-d);color:var(--muted-d)}
.price{font-family:var(--font-head);font-weight:600;font-size:1.5rem;line-height:1.1;letter-spacing:.01em;color:var(--ink);font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.dark .price{color:var(--on-dark)}

.link{background:linear-gradient(var(--brass),var(--brass)) 0 100%/0 1px no-repeat,linear-gradient(var(--line-strong),var(--line-strong)) 0 100%/100% 1px no-repeat;padding-bottom:3px;transition:background-size .45s var(--ease)}
.link:hover,.link:focus-visible{background-size:100% 1px,100% 1px}
.dark .link{background-image:linear-gradient(var(--brass-l),var(--brass-l)),linear-gradient(var(--line-d),var(--line-d))}

/* ---------- forms (scoped to main and the header: the chat widget keeps its own look) ---------- */
main label,.site-head label{display:block;margin-bottom:.35rem;font:500 .9rem/1.3 var(--font-ui);color:var(--ink)}
main :where(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=hidden]),select,textarea),.site-head input[type=search]{width:100%;min-height:48px;padding:.65rem .9rem;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface);color:var(--ink);font:400 1rem/1.4 var(--font-ui);-webkit-appearance:none;appearance:none;transition:border-color .25s}
main textarea{min-height:120px;resize:vertical}
main select{padding-right:2.4rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%2314241d' stroke-width='1.4'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .9rem center}
main :where(input,select,textarea)::placeholder,.site-head input::placeholder{color:var(--muted);opacity:1}
main :where(input,select,textarea):hover,.site-head input[type=search]:hover{border-color:var(--ink)}
main :where(input,select,textarea):focus-visible,.site-head input[type=search]:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-color:var(--green)}
main :where(input[type=checkbox],input[type=radio]){width:1.2rem;height:1.2rem;margin:0;accent-color:var(--green);flex:none}
.field{display:grid;gap:.1rem;min-width:0}
.field__hint{font-size:.875rem;color:var(--muted);margin-top:.3rem}
.field.is-error :where(input,select,textarea){border-color:var(--terra)}
.error,.field__error{color:var(--terra);font-size:.9rem;font-weight:500}
.check{display:flex;gap:.7rem;align-items:flex-start;font-size:.95rem}
.check input{margin-top:.2rem}
.dark :where(input,select,textarea){background:rgba(246,241,231,.06);border-color:var(--line-d);color:var(--on-dark)}
.dark label{color:var(--on-dark)}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:.97rem}
th{font:600 .78rem/1.3 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:left;padding:.8rem .8rem;border-bottom:1px solid var(--line-strong);white-space:nowrap}
td{padding:.95rem .8rem;border-bottom:1px solid var(--line);vertical-align:top}
tbody tr:last-child td{border-bottom:0}
caption{text-align:left;padding-bottom:.8rem;color:var(--muted);font-size:.9rem}
.dark th{color:var(--muted-d);border-color:var(--line-d)}
.dark td{border-color:var(--line-d)}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:40;background:rgba(246,241,231,.95);-webkit-backdrop-filter:saturate(1.2) blur(10px);backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--line)}
.site-head__bar{display:flex;align-items:center;gap:clamp(6px,1.6vw,22px);min-height:var(--head-h)}
.site-brand{display:flex;align-items:center;gap:.7rem;margin-right:auto;min-height:44px;color:var(--ink)}
.site-brand img{width:40px;height:40px;flex:none}
.site-brand span{font:600 1.5rem/1 var(--font-head);letter-spacing:.02em;white-space:nowrap}
.site-icon{display:grid;place-items:center;width:44px;height:44px;cursor:pointer;color:var(--ink);list-style:none;position:relative}
.site-icon::-webkit-details-marker{display:none}
.site-icon::marker{content:""}
.site-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.site-icon .bars path{transition:transform .3s var(--ease),opacity .2s;transform-origin:center}
.site-icon:hover{color:var(--green)}
.site-menu,.site-search{position:static}
.site-search{order:1}.site-cart{order:2}.site-menu{order:3}
.site-menu[open] .site-icon .bars path:nth-child(1){transform:translateY(5px) rotate(45deg)}
.site-menu[open] .site-icon .bars path:nth-child(2){opacity:0}
.site-menu[open] .site-icon .bars path:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

.site-nav{display:none}
.site-menu[open]+.site-nav{display:block;position:absolute;top:100%;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--line);padding:.4rem var(--gutter) 1.2rem}
.site-nav ul{list-style:none;max-width:var(--wrap);margin-inline:auto}
.site-nav li+li{border-top:1px solid var(--line)}
.site-nav a{display:flex;align-items:center;min-height:54px;font:500 1.6rem/1.2 var(--font-head);letter-spacing:.02em;color:var(--ink)}
.site-nav a[aria-current="page"]{color:var(--green);font-style:italic}

.site-search__panel{position:absolute;top:100%;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--line);padding:1rem 0 1.2rem}
.site-sform{display:flex;gap:10px;align-items:stretch}
.site-sform input[type=search]{flex:1;min-width:0;min-height:52px;font-family:var(--font-head);font-size:1.3rem;font-weight:500}
.site-sform .btn{flex:none;padding-inline:1.3rem}

.site-cart{position:relative;display:flex;align-items:center;justify-content:center;gap:.5rem;width:44px;min-height:44px;color:var(--ink)}
.site-cart svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
.site-cart__label{display:none;font:500 .92rem/1 var(--font-ui);letter-spacing:.02em}
.site-cart__n{position:absolute;top:1px;right:-3px;display:inline-grid;place-items:center;min-width:1.3rem;height:1.3rem;padding:0 .25rem;background:var(--paper);border:1px solid var(--brass);border-radius:var(--r);color:var(--brass);font:600 .8rem/1 var(--font-ui);font-variant-numeric:tabular-nums}
.site-cart.has-items .site-cart__n{background:var(--green);border-color:var(--green);color:var(--on-dark)}
.site-cart:hover svg{color:var(--green)}

@media (min-width:1080px){
  .site-menu{display:none}
  .site-nav,.site-menu[open]+.site-nav{display:block;position:static;background:none;border:0;padding:0;margin-left:auto}
  .site-nav ul{display:flex;gap:clamp(14px,1.9vw,30px);max-width:none}
  .site-nav li+li{border:0}
  .site-nav a{position:relative;min-height:44px;font:500 .95rem/1 var(--font-ui);letter-spacing:.02em}
  .site-nav a::after{content:"";position:absolute;left:0;right:0;bottom:7px;height:1px;background:var(--brass);transform:scaleX(0);transform-origin:left center;transition:transform .4s var(--ease)}
  .site-nav a:hover::after,.site-nav a[aria-current="page"]::after{transform:scaleX(1)}
  .site-nav a[aria-current="page"]{color:var(--ink);font-style:normal}
  .site-brand{margin-right:0}
  .site-search,.site-cart{order:0}
}
@media (min-width:1260px){.site-cart{width:auto;padding-inline:.35rem}.site-cart__label{display:inline}.site-cart__n{position:static;min-width:1.5rem;height:1.5rem}}
@media (max-width:1079px){.site-head{--head-h:64px}}
@media (max-width:480px){.site-brand{gap:.5rem;min-width:0}.site-brand span{font-size:1.2rem;white-space:normal;line-height:.95}.site-brand img{width:36px;height:36px}.site-sform .btn{padding-inline:1rem}}
@media (max-width:360px){.site-brand span{font-size:1.15rem}}

/* ---------- footer ---------- */
.site-foot{margin-top:clamp(56px,8vw,112px);background:var(--ink);color:var(--on-dark);padding:clamp(48px,7vw,88px) 0 2rem}
.site-foot__grid{display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr;gap:clamp(28px,4vw,56px);padding-bottom:clamp(32px,5vw,56px);border-bottom:1px solid var(--line-d)}
.site-foot__grid>*{min-width:0}
.site-foot__brand{display:flex;align-items:center;gap:.8rem;color:var(--on-dark)}
.site-foot__brand svg{width:48px;height:48px;flex:none;color:var(--brass-l)}
.site-foot__brand span{font:600 1.5rem/1 var(--font-head);letter-spacing:.02em}
.site-foot__tag{margin-top:1rem;max-width:30ch;color:var(--muted-d);font-size:.97rem}
.site-foot h2{font:600 .78rem/1.3 var(--font-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--brass-l);margin-bottom:1rem}
.site-foot ul{list-style:none}
.site-foot li+li{margin-top:.15rem}
.site-foot li a{display:inline-flex;align-items:center;min-height:36px;color:var(--on-dark);font-size:.97rem;background:linear-gradient(var(--brass-l),var(--brass-l)) 0 calc(100% - 6px)/0 1px no-repeat;transition:background-size .4s var(--ease),color .3s}
.site-foot li a:hover{background-size:100% 1px;color:var(--on-dark)}
.site-foot__bottom{display:flex;flex-wrap:wrap;gap:1.2rem 2rem;align-items:center;justify-content:space-between;padding-top:1.6rem}
.site-foot__pay{display:grid;gap:.6rem}
.pagos{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pagos img{height:26px;width:auto}
.site-foot__pay p{font-size:.85rem;color:var(--muted-d);max-width:56ch}
.site-foot__copy{font:500 .8rem/1.4 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-d)}
@media (max-width:900px){.site-foot__grid{grid-template-columns:1fr 1fr}.site-foot__grid>:first-child{grid-column:1/-1}.site-foot li a{min-height:44px}}
@media (max-width:560px){.site-foot__grid{grid-template-columns:1fr}.site-foot{padding-bottom:5.5rem}}

/* ---------- 404 ---------- */
.site-404{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,6vw,96px);align-items:center;padding-block:clamp(40px,7vw,96px)}
.site-404__num{font:500 clamp(5.5rem,16vw,12rem)/.8 var(--font-head);letter-spacing:.02em;color:var(--brass-l);display:block;margin-bottom:.15em;font-variant-numeric:lining-nums}
.site-404 h1{max-width:14ch;margin:.5rem 0 1.2rem}
.site-404__text{max-width:520px}
.site-404__text>p{margin-top:1.4rem}
.site-404__lab{margin-top:2.2rem}
.site-404__cta{display:flex;flex-wrap:wrap;gap:12px;margin:1.8rem 0}
.site-404 .site-sform{max-width:520px;margin-top:.4rem}
.site-404__shelves{margin-top:.6rem;display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;max-width:520px}
.site-404__shelves a{display:inline-flex;align-items:center;min-height:44px;color:var(--green);font-weight:500}
.site-404__photo{margin:10px}
.site-404__photo img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%;outline:1px solid var(--line);outline-offset:10px}
@media (max-width:800px){.site-404{grid-template-columns:1fr}.site-404__photo{order:-1;max-width:420px}.site-404__photo img{aspect-ratio:16/10;object-position:50% 40%}}

/* ---------- print ---------- */
@media print{
  .site-head,.site-foot,.sc,.sc-launch,.skip,.btn{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  a{color:#000;text-decoration:underline}
  html.js .reveal{opacity:1;transform:none}
  .dark{background:#fff;color:#000}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important}
  html.js .reveal{opacity:1;transform:none}
  html.js .rule{transform:none}
  .zoom{animation:none}
}