/* The Quiet Find — tienda, no blog.
   Decisiones apoyadas en datos, no en gusto:
   - fondo crema, no blanco: "el blanco puro con texto gris es la firma visual
     de un blog estandar"
   - tipografia display 72px+: los blogs usan H1 de 24-32px, las tiendas usan
     display como imagen
   - bloques de color a sangre: rompen la fatiga de escaneo del texto continuo
   - 79% de usuarios escanean y solo 21% lee linea a linea (NN/g)
   - 80% de la atencion esta sobre el pliegue
   - CTA pegajoso: Baymard recomienda resumen de producto que siga al scroll */

/* Inter servida desde nuestro dominio, no desde Google Fonts. Dos motivos:
   una peticion menos a un tercero, y el CDN de Google Fonts transfiere la IP
   del visitante a EEUU, lo que ya ha costado sentencias por RGPD en la UE.
   Subconjunto latino: 236 KB -> 17 KB. */
@font-face{font-family:Inter;font-style:normal;font-weight:400;
  font-display:swap;src:url(/fonts/inter-400.woff2) format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:500;
  font-display:swap;src:url(/fonts/inter-500.woff2) format('woff2')}

@view-transition { navigation: auto; }

:root{
  --bg:#f7f2ea;
  --paper:#efe6d8;
  --sunk:#e4d8c6;
  --deep:#201c17;
  --deep-2:#2e2820;
  --ink:#1a1613;
  --ink-2:#4a423a;
  --mut:#7d7266;
  --line:#ded2c0;
  --line-2:#c8b9a2;
  --cream:#f7f2ea;

  --acc:#b0762f;
  --acc-deep:#8a5a1d;
  --acc-soft:#f2e3c9;

  --c-home:#a8563a;
  --c-kitchen:#5c7050;
  --c-style:#8c5060;

  --max:1240px;
  --pad:34px;
  --ease:cubic-bezier(.22,1,.36,1);
  --r:4px;
}
[data-cat="home"]   { --acc:var(--c-home);    --acc-deep:#833f27 }
[data-cat="kitchen"]{ --acc:var(--c-kitchen); --acc-deep:#42513a }
[data-cat="style"]  { --acc:var(--c-style);   --acc-deep:#6a3a47 }

*{box-sizing:border-box}
html{scroll-behavior:smooth}
img{max-width:100%;height:auto}
/* Ninguna palabra larga (un titulo de producto, una URL) debe empujar el
   ancho del documento y provocar scroll horizontal en movil. */
h1,h2,h3,p,li,a{overflow-wrap:break-word}
body{overflow-x:clip}

body{margin:0;background:var(--bg);color:var(--ink);
  font:400 18px/1.7 Georgia,'Liberation Serif',serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.sans{font-family:Inter,'Liberation Sans',system-ui,sans-serif}

/* ---------- Cabecera ---------- */
header{position:sticky;top:0;z-index:50;background:var(--deep);
  border-bottom:1px solid rgba(255,255,255,.07)}
.bar{max-width:var(--max);margin:0 auto;padding:15px var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:28px}
.brand{font-size:16px;letter-spacing:.24em;text-transform:uppercase;
  text-decoration:none;color:var(--cream);white-space:nowrap;
  display:inline-flex;align-items:center;gap:11px}
.brand .mark-img{flex:none;border-radius:5px;display:block;
  transition:transform .5s var(--ease)}
.brand:hover .mark-img{transform:rotate(-6deg) scale(1.06)}
nav{display:flex;gap:30px}
nav a{position:relative;text-decoration:none;color:rgba(247,242,234,.62);
  font:500 12px/1 Inter,'Liberation Sans',system-ui,sans-serif;
  letter-spacing:.15em;text-transform:uppercase;padding:6px 0;
  transition:color .3s var(--ease)}
nav a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--acc);transform:scaleX(0);transform-origin:right;
  transition:transform .4s var(--ease)}
nav a:hover{color:var(--cream)}
nav a:hover::after,nav a.on::after{transform:scaleX(1);transform-origin:left}
nav a.on{color:var(--cream)}

/* ---------- Bloques a sangre ---------- */
.bleed{width:100%;margin:0}
.block-dark{background:var(--deep);color:var(--cream)}
.block-dark .kicker{color:var(--acc)}
.block-paper{background:var(--paper)}

/* ---------- Portada: héroe ---------- */
.hero{position:relative;min-height:min(74vh,660px);display:grid;
  align-items:end;overflow:hidden;background:var(--deep)}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.62}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(32,28,23,.15) 0%,
    rgba(32,28,23,.55) 55%,rgba(32,28,23,.92) 100%)}
.hero-in{position:relative;z-index:2;max-width:var(--max);margin:0 auto;
  padding:0 var(--pad) 60px;width:100%;color:var(--cream)}
.hero h1{font-size:clamp(46px,8.5vw,104px);line-height:.93;margin:14px 0 18px;
  font-weight:400;letter-spacing:-.035em;max-width:16ch}
.hero p{font-size:clamp(17px,2vw,22px);max-width:46ch;margin:0 0 26px;
  color:rgba(247,242,234,.82);line-height:1.5}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  font:500 14px/1 Inter,'Liberation Sans',system-ui,sans-serif;
  letter-spacing:.02em;text-decoration:none;color:#fff;background:var(--acc-deep);
  padding:15px 22px;min-height:46px;border-radius:var(--r);
  border:1px solid transparent;
  transition:background .28s var(--ease),transform .28s var(--ease)}
.btn:hover{background:var(--ink);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--cream);
  border-color:rgba(247,242,234,.42)}
.btn-ghost:hover{background:var(--cream);color:var(--deep);border-color:var(--cream)}
.btn svg{flex:none}

/* ---------- Franja de categorías ---------- */
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border-block:1px solid var(--line)}
.cat-tile{position:relative;display:block;text-decoration:none;
  background:var(--bg);padding:34px var(--pad);overflow:hidden;
  transition:background .35s var(--ease)}
.cat-tile:hover{background:var(--paper)}
.cat-tile h3{font-size:27px;font-weight:400;margin:8px 0 6px;color:var(--ink);
  letter-spacing:-.015em}
.cat-tile p{margin:0;color:var(--mut);font-size:15.5px;line-height:1.5}
.cat-tile .go{position:absolute;right:26px;bottom:30px;color:var(--acc);
  opacity:0;transform:translateX(-8px);
  transition:opacity .35s var(--ease),transform .35s var(--ease)}
.cat-tile:hover .go{opacity:1;transform:none}

/* ---------- Rótulo de sección ---------- */
.rule{display:flex;align-items:baseline;gap:18px;margin:0 0 32px}
.rule h2{font-size:clamp(30px,4vw,46px);font-weight:400;margin:0;
  letter-spacing:-.025em}
.rule::after{content:"";flex:1;height:1px;background:var(--line);
  transform:translateY(-8px)}
.sec{padding:74px 0}

.cat-head{padding:64px var(--pad)}
.cat-head h1{font-size:clamp(38px,6vw,70px);font-weight:400;
  margin:10px 0 12px;letter-spacing:-.03em}
.cat-head p{margin:0;max-width:44ch;font-size:19px;
  color:rgba(247,242,234,.72)}

/* ---------- Retícula editorial asimétrica ---------- */
/* 6 columnas. Las normales ocupan 2 (tres por fila, cuadra exacto) y la
   grande ocupa la fila entera. Antes la grande ocupaba 3 y con 2 normales
   sumaba 7 de 6: la tercera saltaba de fila y dejaba huecos irregulares. */
.grid{display:grid;gap:44px 32px;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.card{display:flex;flex-direction:column}
.card.big{grid-column:1 / -1;display:grid;
  grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.card a.thumb{display:block;overflow:hidden;border-radius:var(--r);
  background:var(--sunk);aspect-ratio:4/3;position:relative}
.card.big a.thumb{aspect-ratio:16/10;grid-row:span 3}
.card.big .kicker{margin:0;align-self:end}
.card.big h3{margin:10px 0 10px}
.card.big p{font-size:17px}
.card .thumb img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1s var(--ease)}
.card:hover .thumb img{transform:scale(1.06)}
.card h3{font-size:21px;line-height:1.26;margin:8px 0 7px;font-weight:400}
.card.big h3{font-size:29px;letter-spacing:-.018em}
.card h3 a{color:var(--ink);text-decoration:none}
.card:hover h3 a{color:var(--acc-deep)}
.card p{color:var(--mut);font-size:15.5px;margin:0;line-height:1.58}
.block-dark .card h3 a{color:var(--cream)}
.block-dark .card p{color:rgba(247,242,234,.6)}

.kicker{display:inline-block;
  font:500 10px/1 Inter,'Liberation Sans',system-ui,sans-serif;
  letter-spacing:.22em;text-transform:uppercase;color:var(--acc)}
.card .kicker{display:block;margin:18px 0 0}
.cat-tile .kicker{display:block;margin:0}
.hero-in .kicker,.art-hero-in .kicker{margin:0 0 4px}
.kicker a{color:inherit;text-decoration:none}

/* ---------- Artículo ---------- */
.progress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:60;
  background:var(--acc);transform:scaleX(0);transform-origin:left}
.art-hero{position:relative;min-height:min(58vh,520px);display:grid;
  align-items:end;overflow:hidden;background:var(--deep)}
.art-hero>img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:.6}
.art-hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(32,28,23,.2),rgba(32,28,23,.9))}
.art-hero-in{position:relative;z-index:2;max-width:820px;margin:0 auto;
  padding:0 var(--pad) 52px;width:100%;color:var(--cream);text-align:center}
.art-hero h1{font-size:clamp(34px,5.4vw,62px);line-height:1.04;
  margin:14px 0 16px;font-weight:400;letter-spacing:-.028em}
.art-hero .lede{color:rgba(247,242,234,.8);font-size:19px;font-style:italic;
  margin:0;line-height:1.5}

.post{max-width:700px;margin:0 auto;padding:54px 0 40px}
.post h2{font-size:26px;font-weight:400;margin:48px 0 14px;letter-spacing:-.01em}
.post h2::before{content:"";display:block;width:38px;height:3px;
  background:var(--acc);margin:0 0 15px}
.post p{margin:0 0 25px}
.post > p:first-of-type::first-letter{float:left;font-size:70px;line-height:.84;
  padding:7px 12px 0 0;color:var(--acc-deep)}
.post a{color:var(--acc-deep);text-underline-offset:3px}
.post a:hover{background:var(--acc-soft)}

/* ---------- Lista de compra ---------- */
.picks{background:var(--deep);color:var(--cream);border-radius:var(--r);
  padding:34px var(--pad) 30px;margin:0 0 46px}
.picks-title{font:500 11px/1 Inter,'Liberation Sans',system-ui,sans-serif;
  letter-spacing:.22em;text-transform:uppercase;color:var(--acc);margin:0 0 14px}
.picks-lede{font-size:20px;line-height:1.45;margin:0 0 20px;color:var(--cream)}
.picks ul{list-style:none;margin:0 0 8px;padding:0}
.picks ul li{position:relative;padding:0 0 0 20px;margin:0 0 8px;
  font:400 15.5px/1.5 Inter,'Liberation Sans',system-ui,sans-serif;
  color:rgba(247,242,234,.72)}
.picks ul li::before{content:"";position:absolute;left:0;top:9px;width:7px;
  height:7px;border-radius:50%;background:var(--acc)}

.pick{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;
  padding:18px 0;border-top:1px solid rgba(247,242,234,.14)}
.pick-name{font-size:18px;line-height:1.28;margin:0 0 4px;color:var(--cream)}
.pick-why{font:400 14.5px/1.45 Inter,'Liberation Sans',system-ui,sans-serif;
  color:rgba(247,242,234,.58);margin:0}
.pick .btn{background:#a06b2a;color:#fff}
.pick .btn:hover{background:var(--cream);color:var(--deep)}
.picks .disclosure{font:400 12.5px/1.55 Inter,'Liberation Sans',system-ui,sans-serif;
  color:rgba(247,242,234,.5);margin:0 0 16px;padding:0 0 14px;
  border-bottom:1px solid rgba(247,242,234,.14)}

/* Cierre del articulo: segundo punto de salida para quien lee entero. */
.closer{background:var(--paper);border-radius:var(--r);padding:28px 30px;
  margin:44px 0 0;display:flex;gap:22px;align-items:center;
  justify-content:space-between;flex-wrap:wrap}
.closer p{margin:0;font-size:17px;color:var(--ink-2);max-width:42ch}
.closer .btn{background:var(--acc-deep)}

/* ---------- CTA pegajoso en móvil ---------- */
.sticky-cta{position:sticky;bottom:0;z-index:40;display:none;
  background:var(--deep);padding:12px 18px;
  box-shadow:0 -6px 24px rgba(32,28,23,.22)}
.sticky-cta .btn{width:100%;justify-content:center;background:var(--acc)}

.date{color:var(--mut);font-size:14px;font-style:italic;margin-top:48px;
  padding-top:20px;border-top:1px solid var(--line)}

/* ---------- Pie ---------- */
footer{background:var(--deep);color:rgba(247,242,234,.6);margin-top:0}
.foot{max-width:var(--max);margin:0 auto;padding:58px var(--pad) 66px;
  text-align:center;
  font:400 14px/1.8 Inter,'Liberation Sans',system-ui,sans-serif}
.foot .mark-img{border-radius:6px;margin:0 0 16px}
.foot a{color:rgba(247,242,234,.72);text-decoration:none;
  border-bottom:1px solid transparent;transition:border-color .3s var(--ease)}
.foot a:hover{border-color:var(--acc)}
.foot .sep{margin:0 11px;opacity:.3}
.fine{font-size:12px;opacity:.42;margin-top:14px;max-width:52ch;
  margin-inline:auto}

/* ---------- Revelado ---------- */
[data-reveal]{opacity:0;transform:translateY(20px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
[data-reveal].seen{opacity:1;transform:none}

/* ---------- Adaptativo ---------- */
@media(max-width:980px){
  :root{--pad:26px}
  .card.big{grid-template-columns:1fr 1fr;gap:28px}
  .cats{grid-template-columns:1fr}
}
@media(max-width:700px){
  :root{--pad:20px}
  .bar{flex-direction:column;gap:12px}
  .grid{gap:36px}
  .card.big{grid-column:1 / -1}
  .card.big{display:flex;flex-direction:column}
  .card.big a.thumb{aspect-ratio:4/3}
  .card.big .kicker{margin:18px 0 0}
  .hero-in,.art-hero-in{padding-bottom:38px}
  .hero{min-height:64vh}
  .sec{padding:52px 0}
  .picks{padding:26px 22px}
  .closer{padding:22px;flex-direction:column;align-items:stretch}
  .closer .btn{justify-content:center}
  .pick{grid-template-columns:1fr}
  .pick .btn{width:100%;justify-content:center;margin-top:12px}
  .sticky-cta{display:block}
  body{font-size:17px}
  .post > p:first-of-type::first-letter{font-size:56px}
}

/* ---------- Sin movimiento ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;transition-duration:.01ms!important}
  [data-reveal]{opacity:1;transform:none}
  html{scroll-behavior:auto}
  @view-transition{navigation:none}
}