/* ============================================================
   CALÍOPE — sistema de diseño
   Editorial mediterráneo, hecho en Uruguay. Navy + arena + latón.
   Tipografía: Playfair Display (display) / Hanken Grotesk (texto) / JetBrains Mono (datos).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500;1,600&family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  /* --- color --- */
  --navy-950:#0b1c2c;
  --navy-900:#112a40;
  --navy-800:#173a56;
  --navy-700:#254e6e;
  --navy-600:#3c6486;

  --cream-50:#fdfaf4;
  --cream-100:#f7f0e2;
  --cream-200:#efe4cd;
  --sand-300:#ddc9a3;
  --sand-400:#c7ac7c;

  --gold-500:#b48a4a;
  --gold-600:#7a5b2c;
  --gold-line:#c9a565;

  --wine-700:#6d2436;
  --wine-800:#551b29;

  --ink:var(--navy-900);
  --ink-soft:#3f5468;
  --paper:var(--cream-50);
  --paper-raised:#ffffff;
  --line:rgba(17,42,64,.14);
  --line-gold:rgba(180,138,74,.45);

  /* --- type --- */
  --font-display:'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-00:.75rem;      /* 12 */
  --fs-0:.875rem;      /* 14 */
  --fs-1:1.0625rem;    /* 17 body */
  --fs-2:1.3125rem;    /* 21 */
  --fs-3:1.6875rem;    /* 27 */
  --fs-4:2.125rem;     /* 34 */
  --fs-5:2.625rem;     /* 42 */
  --fs-6:3.3125rem;    /* 53 */
  --fs-7:4.125rem;     /* 66 */

  /* --- space (4/8/12/16/24/32/48/64/96/128) --- */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.5rem; --sp-6:2rem; --sp-7:3rem; --sp-8:4rem;
  --sp-9:6rem; --sp-10:8rem;

  --radius-s:2px;
  --radius-m:4px;
  --shadow-card:0 1px 2px rgba(11,28,44,.06), 0 12px 28px -12px rgba(11,28,44,.22);
  --shadow-lift:0 4px 10px rgba(11,28,44,.10), 0 24px 48px -18px rgba(11,28,44,.32);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ============================================================ reset */
*,*::before,*::after{box-sizing:border-box;min-width:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{margin:0}
img,svg{display:block;max-width:100%}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p,figure{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
input{font:inherit}
[hidden]{display:none!important}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--fs-1);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

::selection{background:var(--gold-500);color:var(--cream-50)}

/* focus ring, visible always for keyboard */
a:focus-visible,button:focus-visible,input:focus-visible,label:focus-within{
  outline:2px solid var(--gold-600);
  outline-offset:3px;
  border-radius:var(--radius-s);
}

/* ============================================================ layout */
.wrap{max-width:1240px;margin-inline:auto;padding-inline:var(--sp-6)}
@media (max-width:640px){ .wrap{padding-inline:var(--sp-4)} }

section{padding-block:var(--sp-9)}
@media (max-width:780px){ section{padding-block:var(--sp-8)} }

.eyebrow-word{
  font-family:var(--font-mono);
  font-size:var(--fs-00);
  letter-spacing:.14em;
  color:var(--gold-600);
}

h1,h2,h3,h4{font-family:var(--font-display);color:var(--navy-950);font-weight:600;line-height:1.12;letter-spacing:-.015em}
h2{font-size:var(--fs-5)}
h3{font-size:var(--fs-3);letter-spacing:-.01em}
em,.italic{font-style:italic;font-weight:500}

.lede{
  font-size:var(--fs-2);
  color:var(--ink-soft);
  max-width:42ch;
  line-height:1.5;
}
p.body-copy{max-width:65ch;color:var(--ink-soft)}

.section-head{
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
  margin-bottom:var(--sp-7);
  max-width:56ch;
}
.section-head .eyebrow-word{margin-bottom:var(--sp-1)}

/* ============================================================ stitched divider — el hilo del sitio */
.seam{
  --seam-color:var(--gold-line);
  width:100%;
  height:9px;
  background-image:repeating-linear-gradient(
    90deg, var(--seam-color) 0 10px, transparent 10px 20px
  );
  background-position:center;
  background-repeat:repeat-x;
  background-size:20px 1px;
  background-position-y:4px;
  opacity:.6;
}
.seam-tight{margin-block:var(--sp-6)}

/* ============================================================ buttons */
.btn{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  padding:.85em 1.7em;
  font-family:var(--font-body);
  font-weight:600;
  font-size:var(--fs-0);
  letter-spacing:.04em;
  text-transform:uppercase;
  border-radius:var(--radius-s);
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background-color .3s, color .3s;
  border:1px solid transparent;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
@media (max-width:360px){
  /* red de seguridad: si un botón tiene texto largo, que envuelva en vez de desbordar */
  .btn{white-space:normal;text-align:center}
}
.btn:active{transform:translateY(0)}

.btn-primary{
  background:var(--navy-950);
  color:var(--cream-50);
  box-shadow:var(--shadow-card);
}
.btn-primary:hover{background:var(--navy-800);box-shadow:var(--shadow-lift)}

.btn-ghost{
  background:transparent;
  color:var(--navy-950);
  border-color:var(--line);
}
.btn-ghost:hover{border-color:var(--navy-950)}

.btn-whatsapp{
  background:var(--cream-50);
  color:var(--navy-950);
  border-color:var(--gold-line);
}
.btn-whatsapp:hover{background:var(--navy-950);color:var(--cream-50);border-color:var(--navy-950)}
.btn-whatsapp svg{width:16px;height:16px;flex:none}

.btn-block{width:100%;justify-content:center}

/* ============================================================ nav — logo centrado, links a los costados */
.site-nav{
  position:sticky;top:0;z-index:40;
  border-bottom:1px solid var(--line);
}
/* El desenfoque va en un ::before, no en .site-nav directamente: backdrop-filter
   en el propio header convierte a .site-nav en el contenedor de su hijo
   position:fixed (.nav-mobile) en WebKit/Safari, y el panel del menú móvil
   deja de ocupar toda la pantalla (fondo cortado, se ve la foto detrás). */
.site-nav::before{
  content:"";
  position:absolute;inset:0;
  z-index:-1;
  background:rgba(253,250,244,.88);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.nav-grid{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  column-gap:var(--sp-4);
  padding-block:var(--sp-3);
}
.brand-mark{display:flex;align-items:center;gap:var(--sp-3)}
.nav-grid .brand-mark{justify-self:center}
.brand-mark img{height:38px;width:auto}
.brand-mark .word{font-family:var(--font-display);font-size:var(--fs-3);letter-spacing:.02em;color:var(--navy-950);font-style:italic;font-weight:600}

.nav-group{display:flex;align-items:center;gap:var(--sp-6)}
.nav-group--left{justify-self:start}
.nav-group--right{justify-self:end}
.nav-group--right nav{display:flex;align-items:center;gap:var(--sp-6)}

.nav-group a,.nav-mobile a{
  font-size:var(--fs-0);
  letter-spacing:.03em;
  color:var(--ink-soft);
  position:relative;
  padding-block:var(--sp-1);
}
.nav-group a::after,.nav-mobile a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;
  background:var(--navy-950);transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease-out);
}
.nav-group a:hover::after,.nav-group a[aria-current="page"]::after,
.nav-mobile a:hover::after,.nav-mobile a[aria-current="page"]::after{transform:scaleX(1)}
.nav-group a[aria-current="page"],.nav-mobile a[aria-current="page"]{color:var(--navy-950);font-weight:600}

.nav-toggle{display:none}
.nav-mobile{display:none}

@media (max-width:860px){
  .nav-grid{grid-template-columns:auto 1fr auto}
  .nav-group--left{display:none}
  .nav-group--right nav{display:none}
  .nav-group--right{gap:0}

  /* sin JS: los links simplemente se acomodan en fila debajo del header, siempre visibles */
  .no-js .nav-mobile{
    display:flex;flex-wrap:wrap;gap:var(--sp-4) var(--sp-5);
    justify-content:center;padding-block:var(--sp-4);
    border-top:1px solid var(--line);
  }

  /* con JS: panel deslizante */
  .js .nav-mobile{
    display:flex;
    position:fixed;inset:64px 0 0 0;background:var(--cream-50);
    flex-direction:column;justify-content:flex-start;align-items:flex-start;
    padding:var(--sp-7) var(--sp-6);gap:var(--sp-5);
    transform:translateX(100%);transition:transform .35s var(--ease-out);
    border-top:1px solid var(--line);
    z-index:39;
  }
  .js .nav-mobile a{font-size:var(--fs-3);font-family:var(--font-display);max-width:100%;white-space:normal;line-height:1.25}
  .js .nav-mobile.is-open{transform:translateX(0) !important}
  .js .nav-toggle{display:inline-flex;flex-direction:column;gap:5px;padding:8px}
  .nav-toggle span{width:22px;height:2px;background:var(--navy-950);display:block;transition:transform .25s, opacity .25s}
  .site-nav.is-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .site-nav.is-open .nav-toggle span:nth-child(2){opacity:0}
  .site-nav.is-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* ============================================================ hero */
.hero{
  overflow:hidden;
  position:relative;
  background:var(--navy-950);
}
.hero-slides{position:absolute;inset:0}
.hero-slide{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:0;
  transition:opacity 1.4s ease;
}
.hero-slide.is-active{opacity:1}
.hero-scrim{
  position:absolute;inset:0;
  background-image:
    radial-gradient(ellipse 62% 60% at 50% 52%, rgba(11,28,44,.68) 0%, rgba(11,28,44,.42) 55%, rgba(11,28,44,.12) 82%),
    linear-gradient(rgba(11,28,44,.28), rgba(11,28,44,.28));
}
.hero .wrap{
  position:relative;
  min-height:78vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-block:var(--sp-10);
}
@media (max-width:960px){
  .hero .wrap{min-height:70vh;padding-block:var(--sp-9)}
}

.hero-copy h1{
  font-size:clamp(2.4rem, 4.4vw + 1rem, var(--fs-7));
  max-width:16ch;
  color:var(--cream-50);
  text-shadow:0 2px 18px rgba(11,28,44,.45);
}
.hero-copy .lede{
  margin-top:var(--sp-5);
  color:#f4ecdc;
  text-shadow:0 1px 12px rgba(11,28,44,.55);
}
.hero-ctas{display:flex;gap:var(--sp-4);margin-top:var(--sp-7);flex-wrap:wrap}

.hero-copy--center{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  max-width:720px;
  margin-inline:auto;
}
.hero-copy--center h1,.hero-copy--center .lede{margin-inline:auto}
.hero-copy--center .hero-ctas{justify-content:center}
.hero-copy--center .hero-dots{justify-content:center}

.hero-dots{display:flex;gap:var(--sp-3);margin-top:var(--sp-8)}
.hero-dot{
  width:9px;height:9px;border-radius:50%;
  border:1px solid rgba(253,250,244,.6);
  background:transparent;
  transition:background-color .4s, transform .4s var(--ease-out);
}
.hero-dot.is-active{background:var(--cream-50);transform:scale(1.15)}
.hero-dot:hover{border-color:var(--cream-50)}
@media (prefers-reduced-motion: reduce){
  .hero-slide{transition:none}
}
.hero .btn-primary{background:var(--cream-50);color:var(--navy-950)}
.hero .btn-primary:hover{background:#fff}
.hero .btn-ghost{color:var(--cream-50);border-color:rgba(253,250,244,.45)}
.hero .btn-ghost:hover{border-color:var(--cream-50);background:rgba(253,250,244,.08)}

/* ============================================================ manifesto strip — tipografía y silencio, sin efecto */
.manifesto{
  text-align:center;
  padding-block:var(--sp-8);
  background:var(--paper);
}
.manifesto-mark{
  height:52px;width:auto;margin:0 auto var(--sp-5);
  opacity:.85;
}
.manifesto p{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:500;
  font-size:clamp(1.5rem, 2.2vw + 1rem, var(--fs-5));
  color:var(--navy-950);
  max-width:22ch;
  margin-inline:auto;
  line-height:1.35;
}

/* ============================================================ featured editorial pieces */
.featured-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--sp-8);
}
@media (max-width:780px){ .featured-grid{grid-template-columns:1fr} }

.piece-card{position:relative}
.piece-frame{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-m);
  aspect-ratio:4/5;
  background:var(--cream-200);
}
.piece-frame img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.piece-card:hover .piece-frame img{transform:scale(1.02)}

.piece-tag{
  position:absolute;top:var(--sp-4);left:var(--sp-4);
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.06em;
  background:var(--paper-raised);
  border:1px solid var(--line-gold);
  color:var(--navy-900);
  padding:.4em .7em;
  border-radius:var(--radius-s);
}

.piece-meta{
  display:flex;justify-content:space-between;align-items:flex-start;
  margin-top:var(--sp-5);
  gap:var(--sp-4);
}
.piece-meta h3{font-size:var(--fs-3)}
.piece-meta .material{color:var(--ink-soft);font-size:var(--fs-0);margin-top:var(--sp-1)}
.piece-price{font-family:var(--font-mono);font-size:var(--fs-2);color:var(--navy-950);white-space:nowrap}

/* ============================================================ story teaser (index) */
.story-teaser{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:var(--sp-9);
  align-items:center;
}
@media (max-width:860px){ .story-teaser{grid-template-columns:1fr} }
.story-teaser figure{
  border-radius:var(--radius-m);
  overflow:hidden;
  aspect-ratio:4/3.2;
}
.story-teaser img{width:100%;height:100%;object-fit:cover}
.story-teaser blockquote{
  font-family:var(--font-display);font-style:italic;font-weight:500;
  font-size:var(--fs-4);color:var(--navy-950);line-height:1.3;
  margin:0 0 var(--sp-5);
}
.story-teaser cite{font-style:normal;font-family:var(--font-mono);font-size:var(--fs-00);color:var(--gold-600);letter-spacing:.06em}

/* ============================================================ categorías (tiles con foto) */
.category-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6);
}
.category-grid--two{grid-template-columns:repeat(2,1fr);max-width:720px;margin-inline:auto}
@media (max-width:780px){ .category-grid{grid-template-columns:1fr} }
.category-tile{display:block}
.category-tile-frame{
  overflow:hidden;
  aspect-ratio:4/5;border-radius:var(--radius-m);
  background:var(--cream-200);
}
.category-tile-frame img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.category-tile:hover .category-tile-frame img{transform:scale(1.04)}
.category-tile-label{
  margin-top:var(--sp-4);
  color:var(--navy-950);font-family:var(--font-display);font-weight:600;
  font-size:var(--fs-3);letter-spacing:-.01em;
  display:flex;flex-direction:column;gap:var(--sp-1);
}
.category-tile-label small{
  font-family:var(--font-mono);font-size:var(--fs-00);font-weight:400;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);
}

/* ============================================================ why-unique philosophy */
.philosophy-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-7);
}
@media (max-width:780px){ .philosophy-grid{grid-template-columns:1fr} }
.philosophy-item{padding-top:var(--sp-4);border-top:2px solid var(--navy-950)}
.philosophy-item .num{font-family:var(--font-mono);color:var(--navy-800);font-size:var(--fs-0)}
.philosophy-item h4{font-size:var(--fs-3);margin-block:var(--sp-2) var(--sp-3)}
.philosophy-item p{color:var(--ink-soft)}

/* ============================================================ footer */
.site-footer{
  background:var(--navy-950);
  color:var(--cream-100);
  padding-block:var(--sp-8) var(--sp-6);
}
.site-footer .wrap{
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--sp-8);
}
@media (max-width:780px){ .site-footer .wrap{grid-template-columns:1fr;gap:var(--sp-6)} }
.site-footer .brand-mark .word{color:var(--cream-50)}
.site-footer .brand-mark img{filter:brightness(0) invert(1)}
.footer-tag{color:var(--sand-300);font-size:var(--fs-0);margin-top:var(--sp-3);max-width:32ch}
.footer-col h5{
  font-family:var(--font-mono);font-size:var(--fs-00);letter-spacing:.1em;
  text-transform:uppercase;color:var(--sand-300);margin-bottom:var(--sp-4);
}
.footer-col a,.footer-col p{
  display:block;color:var(--cream-100);opacity:.85;font-size:var(--fs-0);
  padding-block:var(--sp-1);
}
.footer-col a:hover{opacity:1;color:var(--cream-50)}
.footer-bottom{
  margin-top:var(--sp-8);padding-top:var(--sp-5);
  border-top:1px solid rgba(253,250,244,.14);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-3);
  font-size:var(--fs-00);color:var(--sand-300);
}

/* ============================================================ page hero (tienda/historia/contacto) */
.page-hero{
  padding-block:var(--sp-8) var(--sp-6);
  border-bottom:1px solid var(--line);
}
.page-hero .eyebrow-word{display:block;margin-bottom:var(--sp-3)}
.page-hero h1{font-size:clamp(2rem, 3vw + 1rem, var(--fs-6));max-width:20ch}
.page-hero .lede{margin-top:var(--sp-4)}

/* ============================================================ tienda: filtros (radio, funciona sin JS) */
.filter-bar{
  display:flex;gap:var(--sp-3);flex-wrap:wrap;
  padding-block:var(--sp-6);
  border-bottom:1px solid var(--line);
  margin-bottom:var(--sp-7);
}
.filter-radio{
  position:absolute;opacity:0;width:1px;height:1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;
}
.filter-bar label{
  font-family:var(--font-mono);font-size:var(--fs-00);letter-spacing:.06em;text-transform:uppercase;
  padding:.6em 1.2em;border:1px solid var(--line);border-radius:999px;
  color:var(--ink-soft);
  transition:all .2s var(--ease-out);
}
.filter-bar input[type="radio"]:checked + label{
  background:var(--navy-950);color:var(--cream-50);border-color:var(--navy-950);
}
.filter-bar input[type="radio"]:focus-visible + label{outline:2px solid var(--gold-600);outline-offset:2px}

/* Fallback seguro: sin soporte de :has(), o sin JS/CSS moderno, se ven todas
   las piezas — nunca queda la tienda vacía. Con :has(), el filtro real. */
.shop-group{display:block}
.wrap:has(#f-prendas:checked) .shop-group:not([data-group="prendas"]){display:none}
.wrap:has(#f-accesorios:checked) .shop-group:not([data-group="accesorios"]){display:none}

.group-title{
  font-family:var(--font-mono);font-size:var(--fs-0);letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold-600);margin-bottom:var(--sp-5);
  display:flex;align-items:center;gap:var(--sp-3);
}
.group-title::after{content:"";flex:1;height:1px;background:var(--line)}
.shop-group + .shop-group{margin-top:var(--sp-9)}

.product-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px,1fr));
  gap:var(--sp-7);
}

.product-card{
  display:flex;flex-direction:column;
  background:var(--paper-raised);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  overflow:hidden;
  transition:box-shadow .4s var(--ease-out), transform .4s var(--ease-out);
}
.product-card:hover{box-shadow:var(--shadow-lift);transform:translateY(-2px)}

.product-photo{
  position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--cream-200);
}
.product-photo img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.product-card:hover .product-photo img{transform:scale(1.025)}

.product-seal{
  position:absolute;top:var(--sp-3);left:var(--sp-3);
  font-family:var(--font-mono);font-size:.65rem;letter-spacing:.05em;
  background:var(--paper-raised);border:1px solid var(--line-gold);
  color:var(--navy-900);padding:.35em .6em;border-radius:var(--radius-s);
}
.product-seal.limited{color:var(--gold-600);border-color:var(--line-gold)}

.product-body{
  padding:var(--sp-5);
  display:flex;flex-direction:column;gap:var(--sp-2);
  flex:1;
}
.product-body h3{font-size:var(--fs-2)}
.product-desc{color:var(--ink-soft);font-size:var(--fs-0);line-height:1.5}
.product-foot{
  margin-top:auto;
  display:flex;align-items:center;justify-content:space-between;
  padding-top:var(--sp-4);
  gap:var(--sp-3);
}
.product-price{font-family:var(--font-mono);font-size:var(--fs-2);color:var(--navy-950)}
.product-size{
  font-family:var(--font-mono);font-size:var(--fs-00);color:var(--ink-soft);
  border:1px solid var(--line);padding:.2em .55em;border-radius:var(--radius-s);
}
.product-body .btn{margin-top:var(--sp-3)}

.empty-state{
  text-align:center;padding-block:var(--sp-9);color:var(--ink-soft);
  border:1px dashed var(--line);border-radius:var(--radius-m);
}

/* ============================================================ historia page */
.founder-block{
  display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--sp-9);align-items:center;
}
@media (max-width:860px){ .founder-block{grid-template-columns:1fr} }
.founder-block figure{border-radius:var(--radius-m);overflow:hidden;aspect-ratio:3/4}
.founder-block img{width:100%;height:100%;object-fit:cover}
.founder-signature{
  font-family:var(--font-display);font-style:italic;font-size:var(--fs-3);
  margin-top:var(--sp-5);color:var(--navy-950);
}
.founder-signature small{
  display:block;font-family:var(--font-mono);font-style:normal;font-size:var(--fs-00);
  color:var(--ink-soft);margin-top:var(--sp-1);letter-spacing:.04em;
}

.pullquote{
  text-align:center;
  padding-block:var(--sp-10);
  background:var(--paper);
}
.pullquote p{
  font-family:var(--font-display);font-style:italic;font-weight:500;
  font-size:clamp(1.5rem,2.4vw + 1rem, var(--fs-5));
  max-width:24ch;margin-inline:auto;color:var(--navy-950);line-height:1.3;
}

.timeline{display:flex;flex-direction:column}
.timeline-row{
  display:grid;grid-template-columns:120px 1fr;gap:var(--sp-6);
  padding-block:var(--sp-6);border-top:1px solid var(--line);
}
.timeline-row:last-child{border-bottom:1px solid var(--line)}
.timeline-row time{font-family:var(--font-mono);color:var(--navy-800);font-size:var(--fs-0)}
.timeline-row h4{font-size:var(--fs-2);margin-bottom:var(--sp-2)}
.timeline-row p{color:var(--ink-soft);max-width:60ch}

/* ============================================================ contacto page */
.contact-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-9);
}
@media (max-width:860px){ .contact-grid{grid-template-columns:1fr} }

.contact-card{
  background:var(--paper-raised);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  padding:var(--sp-7);
}
.contact-card h3{font-size:var(--fs-3);margin-bottom:var(--sp-4)}
.contact-row{
  display:flex;align-items:center;gap:var(--sp-4);
  padding-block:var(--sp-4);border-top:1px solid var(--line);
}
.contact-row:first-of-type{border-top:none}
.contact-row .icon{
  width:38px;height:38px;flex:none;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--cream-100);color:var(--navy-900);
}
.contact-row .icon svg{width:18px;height:18px}
.contact-row .label{font-family:var(--font-mono);font-size:var(--fs-00);color:var(--ink-soft);letter-spacing:.04em}
.contact-row .value{font-size:var(--fs-1);color:var(--navy-950);font-weight:600;overflow-wrap:anywhere}
.contact-row a.value:hover{color:var(--gold-600)}

.how-to-buy{list-style:none;counter-reset:step}
.how-to-buy li{
  counter-increment:step;
  display:grid;grid-template-columns:auto 1fr;gap:var(--sp-5);
  padding-block:var(--sp-5);
}
.how-to-buy li::before{
  content:counter(step,decimal-leading-zero);
  font-family:var(--font-mono);font-size:var(--fs-2);color:var(--navy-800);
}
.how-to-buy li + li{border-top:1px solid var(--line)}
.how-to-buy h4{font-size:var(--fs-2);margin-bottom:var(--sp-2)}
.how-to-buy p{color:var(--ink-soft)}

/* ============================================================ reduced motion: siempre mostrar el estado final */
@media (prefers-reduced-motion: reduce){
  *{transition-duration:.01ms!important; animation-duration:.01ms!important;}
}