/* 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;
  /* #7d7266 daba 4.21:1 sobre el crema y no llegaba al 4.5 de WCAG AA para
     texto normal (medido con navegador, no a ojo). Un 5% mas oscuro sube a
     4.61 y a simple vista es el mismo gris. */
  --mut:#766c60;
  --line:#ded2c0;
  --line-2:#c8b9a2;
  --cream:#f7f2ea;

  --acc:#b0762f;
  --acc-deep:#8a5a1d;
  --acc-soft:#f2e3c9;
  /* El acento sobre CREMA cumple, pero el mismo tono sobre el marron casi
     negro se queda en 2,8-4,4:1 y no llega al 4,5 de AA. Estos son los mismos
     tonos aclarados hasta 4,6:1 sobre --deep, solo para texto sobre oscuro.
     Aclarar el acento general habria estropeado su uso sobre crema. */
  --acc-on-dark:#b57930;

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

  --max:1240px;
  --pad:34px;
  --ease:cubic-bezier(.22,1,.36,1);
  --r:4px;
}
/* ---------- Modo oscuro ----------
   Misma familia cálida, invertida. Los pares se calcularon contra WCAG antes
   de escribirlos, no se eligieron a ojo: el peor queda en 6,49:1.
   --btn-ink existe porque en claro el botón es ámbar oscuro con texto blanco
   y en oscuro es ámbar CLARO: mantener el blanco lo dejaría ilegible. */
/* El boton de la caja de compra necesita su propio par: es el unico que
   vive sobre el bloque oscuro y no debe teñirse del color de la seccion.
   5,90:1 en claro y 7,65:1 en oscuro, calculados antes de escribirlos. */
:root{--btn-ink:#fff;--pick-bg:#8a5a1d;--pick-ink:#fff}
:root[data-tema="dark"]{
  color-scheme:dark;
  --bg:#16130e;
  --paper:#1e1a14;
  --sunk:#272118;
  --deep:#0e0c09;
  --deep-2:#1a160f;
  --ink:#f2ece1;
  --ink-2:#d3c9ba;
  --mut:#a89d8d;
  --line:#332c22;
  --line-2:#4b4234;
  --cream:#f2ece1;
  --acc:#d99a4a;
  --acc-deep:#e0a558;
  --acc-soft:#3a2c17;
  --acc-on-dark:#d99a4a;
  --btn-ink:#16130e;
  --pick-bg:#d99a4a;
  --pick-ink:#16130e;
}
:root[data-tema="dark"] [data-cat="home"]   { --acc:#e08a63; --acc-deep:#e79a75;
                                              --acc-on-dark:#e08a63 }
:root[data-tema="dark"] [data-cat="kitchen"]{ --acc:#9dbb8a; --acc-deep:#aac798;
                                              --acc-on-dark:#9dbb8a }
:root[data-tema="dark"] [data-cat="style"]  { --acc:#dc93a6; --acc-deep:#e5a3b4;
                                              --acc-on-dark:#dc93a6 }
/* La fotografía a pantalla completa deslumbra sobre fondo oscuro. */
:root[data-tema="dark"] .hero>picture>img,
:root[data-tema="dark"] .art-hero>picture>img{opacity:.5}

[data-cat="home"]   { --acc:var(--c-home);    --acc-deep:#833f27;
                      --acc-on-dark:#ce6947 }
[data-cat="kitchen"]{ --acc:var(--c-kitchen); --acc-deep:#42513a;
                      --acc-on-dark:#738d64 }
[data-cat="style"]  { --acc:var(--c-style);   --acc-deep:#6a3a47;
                      --acc-on-dark:#bf6d83 }

*{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)}
.bar-fin{display:flex;align-items:center;gap:22px}
/* Interruptor de tema. 40px de lado para cumplir el mínimo táctil sin que
   el icono tenga que crecer. */
.tema{display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;padding:0;flex:none;cursor:pointer;
  background:transparent;border:1px solid rgba(247,242,234,.26);
  border-radius:50%;color:rgba(247,242,234,.72);
  transition:color .3s var(--ease),border-color .3s var(--ease),
             background .3s var(--ease)}
.tema:hover{color:var(--cream);border-color:var(--cream);
  background:rgba(247,242,234,.08)}
.tema .i-luna{display:none}
:root[data-tema="dark"] .tema .i-sol{display:none}
:root[data-tema="dark"] .tema .i-luna{display:inline}

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-on-dark)}
.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>picture>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:var(--btn-ink);
  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}
/* C6: estados del botón. Sin :active no hay confirmación táctil en móvil —
   se toca y no pasa nada visible hasta que carga Amazon— y sin un foco
   explícito quien navega con teclado depende del contorno por defecto del
   navegador, que sobre fondo oscuro casi no se ve. */
.btn:active{transform:translateY(0) scale(.985)}
a:focus-visible,button:focus-visible{outline:3px solid var(--acc);
  outline-offset:3px;border-radius:2px}
.hero-cta a:focus-visible,.block-dark a:focus-visible,
.picks a:focus-visible{outline-color:var(--cream)}
.btn[aria-disabled="true"]{opacity:.5;pointer-events: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)}
/* h2 y no h3: en la portada estas fichas cuelgan directamente del h1 del
   heroe, y con h3 la jerarquia saltaba un nivel (D5). */
.cat-tile h2{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}

/* ---------- Salto al contenido (D8) ---------- */
/* Fuera de pantalla hasta que recibe el foco por teclado. Un enlace de salto
   que sigue invisible AL ENFOCARLO no sirve de nada: es el fallo habitual. */
.skip{position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--deep);color:var(--cream);padding:13px 22px;
  font:500 13px/1 Inter,'Liberation Sans',system-ui,sans-serif;
  letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
  border-radius:0 0 var(--r) 0}
.skip:focus{left:0}

/* ---------- Migas de pan (E9) ---------- */
/* Discretas: orientan y dan a Google la estructura, sin competir con el
   titular ni robarle sitio al primer punto de compra. */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:9px;
  padding-top:20px;
  font:500 12px/1.4 Inter,'Liberation Sans',system-ui,sans-serif;
  letter-spacing:.07em;text-transform:uppercase;color:var(--mut)}
.crumbs a{color:var(--mut);text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .25s var(--ease),border-color .25s var(--ease)}
.crumbs a:hover{color:var(--ink);border-bottom-color:var(--line-2)}
.crumb-sep{opacity:.45}

/* ---------- Áreas táctiles (H5) ---------- */
/* WCAG 2.2 pide 24x24 px mínimo. Los enlaces de navegación medían 18-21 px de
   alto: se fallan con el pulgar en móvil. Los enlaces dentro de una frase
   quedan como están, porque el propio criterio los exime y agrandarlos
   rompería el interlineado del párrafo. */
nav a{padding:9px 0}
.foot p a,.crumbs a,.save-pin,.exits a,.hero-cta-alt{
  display:inline-block;min-height:24px;line-height:24px}

/* ---------- Declaración de uso de IA (A11) ---------- */
/* Va en el pie del artículo y no solo en About: la guía de la Comisión sobre
   el art. 50 pide etiquetar "en el punto de contacto con el usuario final". */
.ai-note{color:var(--mut)}
.ai-note a{color:var(--mut);text-underline-offset:3px}
.ai-note a:hover{color:var(--ink)}

/* ---------- Guardar en Pinterest (F4) ---------- */
/* Enlace, no pinit.js: el widget oficial es un script de terceros y el sitio
   no carga ninguno, que es lo que hace que no necesite banner de cookies. */
.save-pin{display:inline-flex;align-items:center;gap:7px;margin-left:14px;
  color:var(--acc-deep);text-decoration:none;
  font:500 12.5px/1 Inter,'Liberation Sans',system-ui,sans-serif;
  letter-spacing:.04em;border-bottom:1px solid var(--line-2);padding-bottom:2px;
  transition:color .25s var(--ease),border-color .25s var(--ease)}
.save-pin:hover{color:var(--ink);border-bottom-color:var(--ink)}

/* ---------- Enlazado interno (E10) ---------- */
/* Quien llega de Pinterest aterriza en un artículo y se va. Sin salida
   lateral cada visita vale una página y una oportunidad de compra. */
.related{border-top:1px solid var(--line);padding:34px 0 66px;
  max-width:700px;margin:0 auto}
.related-title{font:500 11px/1 Inter,'Liberation Sans',system-ui,sans-serif;
  letter-spacing:.22em;text-transform:uppercase;color:var(--mut);margin:0 0 20px}
.related ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.related li{padding:15px 0;border-bottom:1px solid var(--line)}
.related li a{display:block;font-size:19px;color:var(--ink);
  text-decoration:none;letter-spacing:-.012em;
  transition:color .25s var(--ease)}
.related li a:hover{color:var(--acc-deep)}
.related li span{display:block;margin-top:5px;font-size:15px;color:var(--mut);
  line-height:1.5}

/* ---------- Salidas de la 404 (E4) ---------- */
.exits{list-style:none;padding:0;margin:28px 0 34px}
.exits li{padding:15px 0;border-top:1px solid var(--line);color:var(--mut)}
.exits li:last-child{border-bottom:1px solid var(--line)}
.exits a{font-weight:500;color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--line-2)}
.exits a:hover{color:var(--acc-deep)}

/* ---------- 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)}
/* padding-block y NO el atajo `padding:74px 0`. Casi todo lo que usa .sec es
   `class="wrap sec"`, y .wrap pone `padding:0 var(--pad)`. Con el atajo, .sec
   tiene la misma especificidad, va después en la hoja y le BORRABA el padding
   lateral: la portada, las categorías y las páginas fijas quedaban con el
   texto pegado al borde de la pantalla. */
.sec{padding-block:74px}

.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}
/* Sobre fotografía el rótulo heredaba color:var(--acc), el acento de la
   categoría. Medido píxel a píxel daba ratios de 1,08 a 3,45 según la foto:
   ilegible. Crema con sombra, que es lo que ya sostiene al titular y a la
   entradilla sobre la misma imagen. */
.hero-in .kicker,.art-hero-in .kicker{margin:0 0 4px;color:var(--cream);
  text-shadow:0 1px 3px rgba(16,13,11,.78)}
.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>picture>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}

/* ---------- Punto de compra dentro del héroe (C9) ---------- */
/* Antes había que pasar un scroll entero de fotografía antes de encontrar
   nada que comprar. La divulgación va AQUÍ y no en la caja de abajo porque
   este pasa a ser el PRIMER enlace de afiliado de la página, y tiene que ir
   por encima del primero, no del segundo. */
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:13px 18px;
  margin:26px 0 0}
/* Crema y no var(--acc): el acento de categoría va de un terracota vivo
   (home) a un oliva y un malva apagados (kitchen, style), así que el mismo
   botón tenía tres fuerzas distintas. Sobre la foto oscura del héroe el crema
   es el contraste máximo y se lee igual en las tres secciones. Este botón
   decide el dinero: no es el sitio para sutilezas de paleta. */
.hero-cta .btn{background:var(--cream);color:var(--deep);
  padding:16px 26px;font-size:15px;font-weight:500}
.hero-cta .btn:hover{background:var(--acc);color:var(--btn-ink)}
.hero-cta-alt{color:rgba(247,242,234,.84);text-decoration:none;
  font:500 13px/1 Inter,'Liberation Sans',system-ui,sans-serif;
  letter-spacing:.06em;text-transform:uppercase;padding-bottom:3px;
  border-bottom:1px solid rgba(247,242,234,.34);
  transition:color .25s var(--ease),border-color .25s var(--ease)}
.hero-cta-alt:hover{color:var(--cream);border-bottom-color:var(--cream)}
/* Opacidad alta a propósito: una divulgación que no se lee no cumple. */
.hero-disc{flex-basis:100%;order:-1;margin:0 0 3px;
  font:400 12.5px/1.5 Inter,'Liberation Sans',system-ui,sans-serif;
  color:rgba(247,242,234,.82)}

/* padding-block por el mismo motivo que .sec: las paginas fijas usan
   `class="wrap sec post"`, las tres clases sobre el MISMO elemento, y el
   atajo `padding:54px 0` volvia a borrar el padding lateral de .wrap. En los
   articulos no se notaba porque ahi .post es hijo de .wrap, no el mismo nodo. */
.post{max-width:700px;margin:0 auto;padding-block:54px 40px}
.post h2{font-size:26px;font-weight:400;margin:48px 0 14px;letter-spacing:-.01em}
/* Las preguntas del About son h3: sin regla propia heredaban el tamaño por
   defecto del navegador y quedaban casi iguales que el h2 de sección. */
.post h3{font-size:19px;font-weight:500;margin:32px 0 8px;color:var(--ink);
  font-family:Inter,'Liberation Sans',system-ui,sans-serif;
  letter-spacing:-.005em}
.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)}
/* `.post a` (0,1,1) ganaba a `.btn` (0,1,0) y pintaba el texto del boton del
   MISMO color que su fondo: el CTA del final del articulo y el de la 404
   tenian el texto invisible. Los botones son el punto de compra, asi que era
   el peor sitio posible para este fallo. */
.post a.btn{color:var(--btn-ink)}
.post a.btn:hover{background:var(--ink);color:var(--bg)}

/* ---------- 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-on-dark);
  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)}

/* TRES columnas, no dos: la ficha tiene tres hijos (número, texto, botón).
   Con `1fr auto` el botón se caía a una segunda fila y quedaba debajo del
   número en vez de al lado del producto, en el componente que más convierte.
   Salió al montar la galería de componentes, no antes. */
.pick{display:grid;grid-template-columns:auto 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,.post .pick a.btn{background:var(--pick-bg);color:var(--pick-ink)}
.pick .btn:hover,.post .pick a.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-block:52px}
  .picks{padding:26px 22px}
  .closer{padding:22px;flex-direction:column;align-items:stretch}
  .closer .btn{justify-content:center}
  /* nowrap vale para un boton corto en linea. En los de ancho completo del
     movil, con un nombre de producto largo dentro, obliga al boton a ser mas
     ancho que la pantalla: medido 324px en un viewport de 320. Y es un CTA,
     o sea justo lo que no puede romperse. */
  .closer .btn,.pick .btn,.sticky-cta .btn{
    white-space:normal;text-align:center;padding-inline:16px;line-height:1.35}
  .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}
}