/* =============================================================
   CASA LENTA — El arte de quedarse en casa
   1. Tokens
   ============================================================= */
:root{
  /* Superficies cálidas */
  --bg:        #F5F0E6;   /* crema */
  --bg-2:      #EDE3D4;   /* arena */
  --bg-3:      #E4D7C3;   /* lino tostado */
  --paper:     #FDFBF6;   /* blanco roto */
  --night:     #201A15;   /* noche cálida */
  --night-2:   #2C241C;

  /* Tinta */
  --ink:       #1E1A16;
  --ink-soft:  #3B342C;
  --ink-mute:  #7C7266;
  --ink-faint: #A79C8D;

  /* Acentos */
  --accent:    #C0562F;   /* brasa / terracota */
  --accent-d:  #9C4222;
  --ember:     #E39150;   /* llama suave */
  --wood:      #9A6B44;   /* madera */
  --moss:      #4E5B45;   /* pino, para Navidad */
  --gold:      #C9A961;

  --line:      rgba(30,26,22,.13);
  --line-soft: rgba(30,26,22,.07);

  /* Tipografía */
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Ritmo */
  --gutter: clamp(1.15rem, 4vw, 3.5rem);
  --maxw: 1320px;
  --readw: 68ch;
  --radius: 14px;
  --radius-lg: 22px;

  /* Sombras cálidas (nunca grises) */
  --sh-1: 0 1px 2px rgba(93,64,38,.05), 0 4px 14px rgba(93,64,38,.06);
  --sh-2: 0 2px 6px rgba(93,64,38,.07), 0 14px 38px rgba(93,64,38,.10);
  --sh-3: 0 4px 12px rgba(93,64,38,.09), 0 28px 70px rgba(93,64,38,.16);
  --sh-warm: 0 24px 70px rgba(192,86,47,.20);

  /* Easings */
  --ease-out:   cubic-bezier(.16,1,.3,1);
  --ease-in:    cubic-bezier(.7,0,.84,0);
  --ease-soft:  cubic-bezier(.25,.46,.45,.94);
  --ease-bounce:cubic-bezier(.34,1.56,.64,1);

  --nav-h: 74px;
}

/* =============================================================
   2. Reset & base
   ============================================================= */
*,*::before,*::after{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%;tab-size:2;overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 20px)}
body{
  font-family:var(--sans);
  font-size:16px;line-height:1.65;
  color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:clip;overscroll-behavior-y:none;
}
img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
a{color:inherit;text-decoration:none}
p{text-wrap:pretty}
h1,h2,h3,h4{text-wrap:balance;line-height:1.05;letter-spacing:-.02em;font-weight:400}
::selection{background:var(--accent);color:var(--paper)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* =============================================================
   3. Utilidades
   ============================================================= */
.wrap{width:min(100% - var(--gutter)*2, var(--maxw));margin-inline:auto}
.wrap-narrow{width:min(100% - var(--gutter)*2, 940px);margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:-100px;left:1rem;padding:.7rem 1.1rem;background:var(--ink);color:var(--paper);z-index:9999;border-radius:10px;font-weight:500}
.skip-link:focus{top:1rem}
.center{text-align:center}

/* Grano — la textura que hace que el crema no parezca plano */
.grain{
  position:fixed;inset:0;z-index:9000;pointer-events:none;opacity:.30;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

/* =============================================================
   4. Tipografía
   ============================================================= */
.kicker{
  font-family:var(--sans);font-size:.685rem;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--accent);
  display:flex;align-items:center;gap:.7rem;
}
.kicker::before{content:"";width:26px;height:1px;background:currentColor;opacity:.55;flex:none}
.kicker.is-center{justify-content:center}
.kicker.is-plain::before{display:none}

.display{font-family:var(--serif);font-optical-sizing:auto;font-variation-settings:"SOFT" 40,"WONK" 1}
.display em,em.wonk{font-style:italic;font-variation-settings:"SOFT" 80,"WONK" 1}

h1.display{font-size:clamp(2.55rem,7.2vw,5.6rem);line-height:.99;font-weight:400}
h2.display{font-size:clamp(2.05rem,4.6vw,3.7rem);line-height:1.03}
h3.display{font-size:clamp(1.35rem,2.1vw,1.85rem);line-height:1.14}

.lead{font-size:clamp(1.06rem,1.55vw,1.28rem);line-height:1.62;color:var(--ink-soft);max-width:60ch}
.muted{color:var(--ink-mute)}
.meta{font-size:.775rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-mute);font-weight:500}

/* Cabecera de sección */
.sec-head{display:grid;gap:1.15rem;margin-bottom:clamp(2.2rem,4vw,3.6rem)}
.sec-head .lead{max-width:52ch}
@media (min-width:960px){
  .sec-head.is-split{grid-template-columns:1.05fr .95fr;align-items:end;gap:2.5rem}
  .sec-head.is-split .sec-head-l{display:grid;gap:1.1rem}
}

/* =============================================================
   5. Componentes — botones, enlaces, formularios
   ============================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.95rem 1.7rem;border-radius:999px;font-size:.875rem;font-weight:500;
  letter-spacing:.03em;position:relative;isolation:isolate;
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out), background-color .35s var(--ease-out), color .35s var(--ease-out);
  will-change:transform;
}
.btn-primary{background:var(--ink);color:var(--paper);box-shadow:var(--sh-1)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(30,26,22,.24)}
.btn-ember{background:var(--accent);color:#fff;box-shadow:0 6px 20px rgba(192,86,47,.28)}
.btn-ember:hover{transform:translateY(-3px);background:var(--accent-d);box-shadow:0 16px 40px rgba(192,86,47,.36)}
.btn-ghost{border:1px solid var(--line);color:var(--ink);background:rgba(253,251,246,.5)}
.btn-ghost:hover{transform:translateY(-3px);background:var(--paper);box-shadow:var(--sh-2)}
.btn-light{background:rgba(253,251,246,.94);color:var(--ink);backdrop-filter:blur(8px)}
.btn-light:hover{transform:translateY(-3px);background:#fff;box-shadow:0 16px 40px rgba(0,0,0,.22)}
.btn-sm{padding:.66rem 1.15rem;font-size:.8rem}
.btn-block{width:100%}

/* Enlace con subrayado animado */
.ulink{position:relative;display:inline-block;padding-bottom:2px}
.ulink::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease-out);
}
.ulink:hover::after{transform:scaleX(1);transform-origin:left}

/* Enlace flecha */
.alink{display:inline-flex;align-items:center;gap:.5rem;font-size:.85rem;font-weight:500;letter-spacing:.04em;color:var(--accent)}
.alink svg{transition:transform .5s var(--ease-out)}
.alink:hover svg{transform:translateX(5px)}

.field{
  width:100%;padding:1rem 1.15rem;border:1px solid var(--line);border-radius:12px;
  background:var(--paper);color:var(--ink);font:inherit;font-size:.95rem;
  transition:border-color .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.field::placeholder{color:var(--ink-faint)}
.field:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(192,86,47,.12)}

/* =============================================================
   6. Splash
   ============================================================= */
.splash{
  position:fixed;inset:0;z-index:9500;background:var(--bg);
  display:grid;place-items:center;gap:1rem;
  transition:opacity .9s var(--ease-out), clip-path 1s var(--ease-out);
  animation:splashSafety .01s 4.5s forwards;
}
.splash-inner{display:grid;justify-items:center;gap:1.1rem;text-align:center}
.splash-mark{
  font-family:var(--serif);font-size:clamp(1.6rem,4vw,2.3rem);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink);opacity:0;animation:splashIn .9s .15s var(--ease-out) forwards;
}
.splash-sub{font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-mute);opacity:0;animation:splashIn .9s .45s var(--ease-out) forwards}
.splash-bar{width:120px;height:1px;background:var(--line);position:relative;overflow:hidden}
.splash-bar::after{content:"";position:absolute;inset:0;background:var(--accent);transform:translateX(-100%);animation:splashBar 1.9s .3s var(--ease-soft) forwards}
.splash.is-out{opacity:0;pointer-events:none;clip-path:inset(0 0 100% 0)}
@keyframes splashIn{to{opacity:1}}
@keyframes splashBar{to{transform:translateX(0)}}
@keyframes splashSafety{to{opacity:0;pointer-events:none;clip-path:inset(0 0 100% 0)}}

/* =============================================================
   7. Cursor
   ============================================================= */
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;z-index:9400;pointer-events:none;border-radius:50%;opacity:0;transition:opacity .3s var(--ease-out)}
.cursor-dot{width:6px;height:6px;background:var(--accent);margin:-3px 0 0 -3px}
.cursor-ring{width:34px;height:34px;border:1px solid rgba(192,86,47,.55);margin:-17px 0 0 -17px;transition:opacity .3s var(--ease-out), width .4s var(--ease-out), height .4s var(--ease-out), background-color .4s var(--ease-out), border-color .4s var(--ease-out)}
.cursor-dot.is-ready,.cursor-ring.is-ready{opacity:1}
.cursor-ring.is-hover{width:58px;height:58px;margin:-29px 0 0 -29px;background:rgba(192,86,47,.10);border-color:rgba(192,86,47,.3)}
@media (hover:none),(pointer:coarse){.cursor-dot,.cursor-ring{display:none}}

/* =============================================================
   8. Navegación
   ============================================================= */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:900;height:var(--nav-h);
  display:flex;align-items:center;
  transition:background-color .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .5s var(--ease-out);
  border-bottom:1px solid transparent;
}
.nav-inner{width:min(100% - var(--gutter)*2,var(--maxw));margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.brand{display:flex;align-items:baseline;gap:.55rem;font-family:var(--serif);font-size:1.16rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ink);transition:color .4s var(--ease-out)}
.brand-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none;align-self:center;box-shadow:0 0 0 0 rgba(192,86,47,.45);animation:emberPulse 3.4s var(--ease-soft) infinite}
@keyframes emberPulse{0%,100%{box-shadow:0 0 0 0 rgba(192,86,47,.5)}50%{box-shadow:0 0 0 7px rgba(192,86,47,0)}}
.nav-links{display:none;gap:2rem;align-items:center}
.nav-links a{font-size:.855rem;font-weight:450;letter-spacing:.02em;color:var(--ink-soft);transition:color .35s var(--ease-out)}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--accent)}
.nav-actions{display:flex;align-items:center;gap:.7rem}
.nav.is-solid{background:rgba(245,240,230,.86);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);border-bottom-color:var(--line-soft);box-shadow:0 1px 30px rgba(93,64,38,.06)}
@supports not (backdrop-filter:blur(4px)){.nav.is-solid{background:#F5F0E6}}
/* Nav sobre hero oscuro */
.nav.is-over-hero:not(.is-solid) .brand,
.nav.is-over-hero:not(.is-solid) .nav-links a{color:rgba(255,252,246,.92)}
.nav.is-over-hero:not(.is-solid) .burger span{background:#fff}
.nav.is-over-hero:not(.is-solid) .nav-cta{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.35);backdrop-filter:blur(8px)}
.nav-cta{border:1px solid var(--line);border-radius:999px;padding:.55rem 1.05rem;font-size:.8rem;font-weight:500;transition:all .4s var(--ease-out)}
.nav-cta:hover{transform:translateY(-2px);box-shadow:var(--sh-1)}

.burger{width:42px;height:42px;display:grid;place-content:center;gap:5px;border-radius:50%;z-index:2}
.burger span{display:block;width:19px;height:1.5px;background:var(--ink);border-radius:2px;transition:transform .5s var(--ease-out),opacity .3s var(--ease-out)}
.burger.is-open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.menu{
  position:fixed;inset:0;z-index:890;background:var(--bg);
  display:grid;align-content:center;gap:.3rem;padding:6rem var(--gutter) 3rem;
  clip-path:inset(0 0 100% 0);transition:clip-path .85s var(--ease-out);
  overflow-y:auto;
}
.menu.is-open{clip-path:inset(0 0 0 0)}
.menu a{font-family:var(--serif);font-size:clamp(2rem,9vw,3.2rem);line-height:1.22;color:var(--ink);opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out),color .3s}
.menu.is-open a{opacity:1;transform:none}
.menu a:hover{color:var(--accent);font-style:italic}
.menu-foot{margin-top:2.2rem;display:flex;flex-wrap:wrap;gap:1.2rem;font-size:.82rem;color:var(--ink-mute)}
@media (min-width:960px){
  .nav-links{display:flex}
  .burger{display:none}
  .menu{display:none}
}

/* =============================================================
   9. HERO
   ============================================================= */
.hero{position:relative;min-height:100vh;min-height:100svh;display:grid;align-items:end;overflow:hidden;isolation:isolate}
.hero-media{position:absolute;inset:0;z-index:-3}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 52%;transform:scale(1.04);animation:kenburns 30s var(--ease-soft) infinite alternate}
@keyframes kenburns{to{transform:scale(1.10) translate3d(-.8%,-.6%,0)}}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:
    linear-gradient(180deg, rgba(20,15,11,.52) 0%, rgba(20,15,11,.04) 30%, rgba(20,15,11,.16) 56%, rgba(20,15,11,.74) 100%),
    linear-gradient(100deg, rgba(18,13,10,.58) 0%, rgba(18,13,10,.14) 44%, rgba(18,13,10,0) 66%),
    radial-gradient(110% 75% at 68% 58%, rgba(192,86,47,.14), transparent 62%);
}
/* Resplandor de chimenea que sigue al cursor */
.hero-glow{
  position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.55;
  background:radial-gradient(420px 420px at var(--gx,50%) var(--gy,70%), rgba(227,145,80,.30), transparent 70%);
  transition:opacity .8s var(--ease-out);
}
.hero-embers{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero-inner{position:relative;padding:calc(var(--nav-h) + 5rem) 0 clamp(3.2rem,7vh,5.5rem);width:min(100% - var(--gutter)*2,var(--maxw));margin-inline:auto;color:#fff}
.hero .kicker{color:var(--ember);margin-bottom:1.5rem}
.hero h1{color:#fff;max-width:15ch;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.hero-sub{margin-top:1.6rem;max-width:46ch;font-size:clamp(1rem,1.35vw,1.18rem);line-height:1.66;color:rgba(255,250,243,.86)}
.hero-actions{margin-top:2.4rem;display:flex;flex-wrap:wrap;gap:.85rem}
.hero-foot{
  margin-top:clamp(2.8rem,6vh,4.5rem);padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.18);
  display:flex;flex-wrap:wrap;gap:1.4rem 2.6rem;align-items:center;justify-content:space-between;
}
.hero-stats{display:flex;flex-wrap:wrap;gap:1.6rem 2.6rem}
.hero-stat{display:grid;gap:.15rem}
.hero-stat b{font-family:var(--serif);font-size:1.55rem;font-weight:400;color:#fff}
.hero-stat span{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,250,243,.6)}
.scroll-hint{display:flex;align-items:center;gap:.7rem;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,250,243,.65)}
.scroll-hint i{display:block;width:1px;height:40px;background:linear-gradient(180deg,rgba(255,255,255,.7),transparent);position:relative;overflow:hidden}
.scroll-hint i::after{content:"";position:absolute;inset:0;background:var(--ember);animation:scrollLine 2.4s var(--ease-soft) infinite}
@keyframes scrollLine{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}
@media (prefers-reduced-motion:reduce){
  .hero-media img{animation:none;transform:scale(1.02)}
  .scroll-hint i::after{animation:none}
  .brand-dot{animation:none}
  .hero-embers{display:none}
}

/* =============================================================
   10. Secciones base
   ============================================================= */
.section{padding:clamp(4.2rem,10vw,8.5rem) 0;position:relative}
.section.is-paper{background:var(--paper)}
.section.is-sand{background:var(--bg-2)}
.section.is-night{background:var(--night);color:#EFE6D9}
.section.is-night h2,.section.is-night h3{color:#FBF6EE}
.section.is-night .lead,.section.is-night p{color:rgba(239,230,217,.78)}
.section.is-night .kicker{color:var(--ember)}
.halo{position:absolute;inset:-60% 0 -40% 0;pointer-events:none;z-index:0;
  background:radial-gradient(40% 34% at 50% 50%,rgba(227,145,80,.30),transparent 72%);filter:blur(110px)}
.section > .wrap,.section > .wrap-narrow{position:relative;z-index:1}

/* =============================================================
   11. Manifiesto
   ============================================================= */
.manifesto{display:grid;gap:2.6rem}
.manifesto-lead{font-family:var(--serif);font-size:clamp(1.5rem,3.1vw,2.45rem);line-height:1.28;letter-spacing:-.015em;max-width:22ch}
.manifesto-lead em{font-style:italic;color:var(--accent)}
.manifesto-body{display:grid;gap:1.15rem;max-width:56ch;color:var(--ink-soft)}
.manifesto-sign{margin-top:1.4rem;display:flex;align-items:center;gap:.9rem;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute)}
.manifesto-sign i{width:34px;height:1px;background:var(--line);display:block}
@media (min-width:960px){
  .manifesto{grid-template-columns:1fr 1fr;gap:clamp(3rem,7vw,6rem);align-items:start}
}

/* Pilares */
.pillars{display:grid;gap:1.5rem;margin-top:clamp(3rem,6vw,5rem)}
.pillar{padding:1.9rem 1.7rem;background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--radius-lg);box-shadow:var(--sh-1);
  transition:transform .55s var(--ease-out),box-shadow .55s var(--ease-out)}
.pillar:hover{transform:translateY(-6px);box-shadow:var(--sh-2)}
.pillar-n{font-family:var(--serif);font-size:.9rem;color:var(--accent);letter-spacing:.1em;display:block;margin-bottom:1rem}
.pillar h3{font-family:var(--serif);font-size:1.22rem;margin-bottom:.6rem}
.pillar p{font-size:.92rem;color:var(--ink-mute);line-height:1.62}
@media (min-width:720px){.pillars{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.pillars{grid-template-columns:repeat(4,1fr)}}

/* =============================================================
   12. Artículos — tarjetas
   ============================================================= */
.card{
  position:relative;display:grid;gap:1.05rem;border-radius:var(--radius-lg);
  transition:transform .6s var(--ease-out);
}
.card-media{position:relative;overflow:hidden;border-radius:var(--radius-lg);background:var(--bg-3);box-shadow:var(--sh-1);
  transition:box-shadow .6s var(--ease-out)}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-out),filter .7s var(--ease-out)}
.card-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(28,20,14,.42));opacity:0;transition:opacity .6s var(--ease-out)}
.card:hover .card-media img{transform:scale(1.06);filter:saturate(1.1) brightness(1.03)}
.card:hover .card-media{box-shadow:var(--sh-3)}
.card:hover .card-media::after{opacity:1}
.card-tag{
  position:absolute;top:.9rem;left:.9rem;z-index:2;padding:.42rem .8rem;border-radius:999px;
  background:rgba(253,251,246,.92);backdrop-filter:blur(6px);
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ink)
}
.card-tag.is-guide{background:var(--accent);color:#fff}
.card-body{display:grid;gap:.55rem}
.card h3{font-family:var(--serif);font-size:1.28rem;line-height:1.2;transition:color .4s var(--ease-out)}
.card:hover h3{color:var(--accent)}
.card p{font-size:.9rem;color:var(--ink-mute);line-height:1.6}
.card-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint)}
.card-meta span:not(:last-child)::after{content:"·";margin-left:.55rem;opacity:.6}
.card-link{position:absolute;inset:0;z-index:3}
.ratio-32{aspect-ratio:3/2}
.ratio-45{aspect-ratio:4/5}
.ratio-11{aspect-ratio:1/1}
.ratio-169{aspect-ratio:16/9}

/* Rejilla editorial destacados: 1 grande + 4 */
.feat-grid{display:grid;gap:clamp(1.6rem,3vw,2.4rem)}
.feat-main .card-media{aspect-ratio:4/3}
.feat-main h3{font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.08}
.feat-main p{font-size:1rem;max-width:52ch}
.feat-side{display:grid;gap:clamp(1.4rem,2.4vw,2rem)}
.feat-side .card{grid-template-columns:104px 1fr;gap:1.1rem;align-items:center}
.feat-side .card-media{aspect-ratio:1/1}
.feat-side h3{font-size:1.02rem}
@media (min-width:960px){
  .feat-grid{grid-template-columns:1.32fr 1fr;align-items:start}
  .feat-side .card{grid-template-columns:130px 1fr}
}

/* Rejilla estándar */
.grid-cards{display:grid;gap:clamp(1.7rem,3vw,2.6rem)}
@media (min-width:640px){.grid-cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.grid-cards{grid-template-columns:repeat(3,1fr)}.grid-cards.is-4{grid-template-columns:repeat(4,1fr)}}

/* =============================================================
   13. Marquee
   ============================================================= */
.marquee{overflow:hidden;padding:clamp(2rem,4vw,3.2rem) 0;border-block:1px solid var(--line-soft);background:var(--bg-2);--mq-speed:46s}
.marquee-track{display:flex;width:max-content;animation:mq var(--mq-speed) linear infinite;will-change:transform}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-group{display:flex;align-items:center;gap:clamp(1.6rem,3.5vw,3rem);padding-right:clamp(1.6rem,3.5vw,3rem)}
.marquee-item{font-family:var(--serif);font-size:clamp(1.25rem,2.6vw,2.05rem);color:var(--ink-soft);white-space:nowrap;font-style:italic}
.marquee-sep{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none;opacity:.7}
@keyframes mq{to{transform:translate3d(-50%,0,0)}}

/* =============================================================
   14. Categorías (bento)
   ============================================================= */
.bento{display:grid;gap:clamp(1rem,1.8vw,1.4rem)}
.bento-cell{
  position:relative;overflow:hidden;border-radius:var(--radius-lg);min-height:230px;
  display:flex;align-items:flex-end;isolation:isolate;box-shadow:var(--sh-1);
  transition:transform .65s var(--ease-out),box-shadow .65s var(--ease-out);
  transform-style:preserve-3d;
}
.bento-cell img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.3s var(--ease-out),filter .7s var(--ease-out)}
.bento-cell::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(28,20,14,.05) 20%,rgba(24,17,12,.78) 100%);transition:background .6s var(--ease-out)}
.bento-cell:hover{transform:translateY(-7px);box-shadow:var(--sh-warm)}
.bento-cell:hover img{transform:scale(1.09);filter:saturate(1.12)}
.bento-cell:hover::after{background:linear-gradient(180deg,rgba(28,20,14,.12) 10%,rgba(90,32,10,.82) 100%)}
.bento-inner{position:relative;padding:1.5rem;color:#fff;display:grid;gap:.35rem;width:100%}
.bento-inner h3{font-family:var(--serif);font-size:clamp(1.2rem,2vw,1.6rem);color:#fff}
.bento-inner p{font-size:.83rem;color:rgba(255,250,243,.78);max-width:34ch}
.bento-count{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ember);margin-bottom:.3rem}
.bento-cell .card-link{z-index:4}
@media (min-width:720px){
  .bento{grid-template-columns:repeat(4,1fr);grid-auto-rows:200px}
  .bento-cell{min-height:0}
  .b-a{grid-column:span 2;grid-row:span 2}
  .b-b{grid-column:span 2;grid-row:span 1}
  .b-c{grid-column:span 1;grid-row:span 1}
  .b-d{grid-column:span 1;grid-row:span 1}
  .b-e{grid-column:span 2;grid-row:span 1}
  .b-f{grid-column:span 2;grid-row:span 1}
}

/* =============================================================
   15. Proceso / confianza
   ============================================================= */
.steps{display:grid;gap:0;counter-reset:step;border-top:1px solid var(--line)}
.step{display:grid;gap:.6rem;padding:1.9rem 0;border-bottom:1px solid var(--line);position:relative;transition:padding-left .6s var(--ease-out)}
.step:hover{padding-left:1rem}
.step-n{font-family:var(--serif);font-size:.85rem;color:var(--accent);letter-spacing:.12em}
.step h3{font-family:var(--serif);font-size:clamp(1.2rem,2vw,1.55rem)}
.step p{color:var(--ink-mute);max-width:62ch;font-size:.95rem}
@media (min-width:860px){
  .step{grid-template-columns:80px 300px 1fr;gap:2rem;align-items:baseline}
  .step p{max-width:none}
}

/* =============================================================
   16. Bloque "sobre nosotros" (imagen + texto)
   ============================================================= */
.split{display:grid;gap:clamp(2rem,4vw,3.6rem);align-items:center}
.split-media{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--sh-2)}
.split-media img{width:100%;height:100%;object-fit:cover}
.split-media.is-tall{aspect-ratio:4/5}
.split-badge{
  position:absolute;bottom:1.1rem;left:1.1rem;right:1.1rem;padding:1rem 1.2rem;border-radius:14px;
  background:rgba(253,251,246,.9);backdrop-filter:blur(10px);box-shadow:var(--sh-1);
  display:flex;align-items:center;gap:.9rem;
}
.split-badge b{font-family:var(--serif);font-size:1.5rem;font-weight:400;color:var(--accent);line-height:1}
.split-badge span{font-size:.8rem;color:var(--ink-mute);line-height:1.4}
.split-body{display:grid;gap:1.3rem}
@media (min-width:960px){
  .split{grid-template-columns:.92fr 1.08fr}
  .split.is-rev .split-media{order:2}
}

/* =============================================================
   17. Newsletter
   ============================================================= */
.news{position:relative;overflow:hidden;border-radius:var(--radius-lg);padding:clamp(2.4rem,6vw,4.6rem) clamp(1.4rem,5vw,4rem);background:var(--night);color:#F4EBDD;isolation:isolate}
.news::before{content:"";position:absolute;inset:-40% 0;z-index:-1;
  background:
   radial-gradient(38% 44% at 18% 22%,rgba(192,86,47,.42),transparent 70%),
   radial-gradient(34% 40% at 82% 78%,rgba(201,169,97,.28),transparent 70%),
   radial-gradient(30% 36% at 60% 15%,rgba(78,91,69,.30),transparent 70%);
  filter:blur(60px);animation:meshDrift 22s var(--ease-soft) infinite alternate}
@keyframes meshDrift{to{transform:translate3d(4%,-3%,0) scale(1.12)}}
.news-inner{display:grid;gap:1.6rem;max-width:46rem;margin-inline:auto;text-align:center;justify-items:center}
.news h2{color:#FBF6EE}
.news p{color:rgba(244,235,221,.8);max-width:48ch}
.news-form{display:grid;gap:.7rem;width:min(100%,470px);margin-top:.5rem}
.news-form .field{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:#fff;text-align:center}
.news-form .field::placeholder{color:rgba(244,235,221,.5)}
.news-form .field:focus{border-color:var(--ember);box-shadow:0 0 0 4px rgba(227,145,80,.18)}
.news-note{font-size:.74rem;color:rgba(244,235,221,.55)}
.news-msg{min-height:1.3rem;font-size:.85rem;color:var(--ember)}
.news-msg.is-ok{color:#9BD1A0}
@media (min-width:560px){.news-form{grid-template-columns:1fr auto}.news-form .field{text-align:left}}

/* =============================================================
   18. Footer
   ============================================================= */
.footer{background:var(--night);color:rgba(239,230,217,.72);padding:clamp(3.4rem,7vw,5.5rem) 0 2rem}
.footer-top{display:grid;gap:2.6rem}
.footer .brand{color:#FBF6EE}
.footer-about{max-width:34ch;font-size:.9rem;line-height:1.7;margin-top:1.1rem}
.footer-cols{display:grid;gap:2rem}
.footer-col h4{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ember);margin-bottom:1rem;font-weight:600}
.footer-col ul{list-style:none;padding:0;display:grid;gap:.6rem}
.footer-col a{font-size:.88rem;transition:color .35s var(--ease-out)}
.footer-col a:hover{color:#fff}
.footer-bot{margin-top:3rem;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.12);display:grid;gap:1rem;font-size:.76rem;color:rgba(239,230,217,.5)}
.footer-legal{display:flex;flex-wrap:wrap;gap:1.2rem}
.afiliados-nota{font-size:.76rem;line-height:1.6;color:rgba(239,230,217,.55);max-width:70ch}
@media (min-width:720px){.footer-cols{grid-template-columns:repeat(3,1fr)}}
@media (min-width:960px){
  .footer-top{grid-template-columns:1.1fr 1.4fr;gap:4rem}
  .footer-bot{grid-template-columns:1fr auto;align-items:center}
}

/* =============================================================
   19. Página de artículo
   ============================================================= */
.progress{position:fixed;top:0;left:0;height:2px;background:var(--accent);z-index:950;width:0;transition:width .1s linear}
.art-head{padding:calc(var(--nav-h) + clamp(2.6rem,7vw,5rem)) 0 clamp(1.6rem,3vw,2.4rem);background:var(--paper)}
.art-head-inner{display:grid;gap:1.35rem;max-width:56rem}
.art-title{font-family:var(--serif);font-size:clamp(2.1rem,5.2vw,4rem);line-height:1.02}
.art-sub{font-size:clamp(1.02rem,1.5vw,1.22rem);color:var(--ink-soft);line-height:1.6;max-width:60ch}
.art-meta{display:flex;flex-wrap:wrap;gap:.5rem 1.3rem;align-items:center;padding-top:.6rem;border-top:1px solid var(--line);font-size:.79rem;color:var(--ink-mute);letter-spacing:.04em}
.art-meta b{color:var(--ink);font-weight:600}
.art-hero{background:var(--paper)}
.art-hero figure{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--sh-2)}
.art-hero img{width:100%;aspect-ratio:16/9;object-fit:cover}
.art-hero figcaption{margin-top:.8rem;font-family:var(--serif);font-style:italic;font-size:.86rem;color:var(--ink-mute);text-align:center}

.art-body{padding:clamp(2.6rem,6vw,4.6rem) 0 clamp(3rem,7vw,5.5rem);background:var(--paper)}
.art-layout{display:grid;gap:clamp(2rem,4vw,3.4rem)}
@media (min-width:1100px){
  .art-layout{grid-template-columns:238px minmax(0,1fr);gap:4rem;align-items:start}
  .toc{position:sticky;top:calc(var(--nav-h) + 28px)}
}
.toc{display:none}
@media (min-width:1100px){.toc{display:block}}
.toc h4{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:1rem}
.toc ul{list-style:none;padding:0;display:grid;gap:.62rem;border-left:1px solid var(--line);padding-left:1.05rem}
.toc a{font-size:.845rem;line-height:1.4;color:var(--ink-mute);transition:color .35s var(--ease-out),transform .35s var(--ease-out);display:block}
.toc a:hover{color:var(--ink)}
.toc a.is-active{color:var(--accent);transform:translateX(3px);font-weight:500}
.toc-cta{margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid var(--line);font-size:.8rem;color:var(--ink-mute);line-height:1.55}

/* Prosa */
.prose{max-width:var(--readw);font-size:1.055rem;line-height:1.78;color:var(--ink-soft)}
.prose > * + *{margin-top:1.35rem}
.prose h2{font-family:var(--serif);font-size:clamp(1.6rem,3vw,2.15rem);color:var(--ink);margin-top:3.2rem;line-height:1.14;scroll-margin-top:calc(var(--nav-h) + 24px)}
.prose h3{font-family:var(--serif);font-size:clamp(1.22rem,2.2vw,1.5rem);color:var(--ink);margin-top:2.4rem;scroll-margin-top:calc(var(--nav-h) + 24px)}
.prose h2 + p,.prose h3 + p{margin-top:.9rem}
.prose strong{color:var(--ink);font-weight:600}
.prose a:not(.btn){color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:rgba(192,86,47,.35);transition:text-decoration-color .3s}
.prose a:not(.btn):hover{text-decoration-color:var(--accent)}
.prose ul,.prose ol{padding-left:1.3rem;display:grid;gap:.6rem}
.prose li{padding-left:.25rem}
.prose li::marker{color:var(--accent)}
.prose figure{margin-top:2.4rem}
.prose figure img{border-radius:var(--radius);box-shadow:var(--sh-1);width:100%}
.prose figcaption{margin-top:.7rem;font-family:var(--serif);font-style:italic;font-size:.85rem;color:var(--ink-mute)}
.dropcap::first-letter{
  font-family:var(--serif);font-size:3.9em;line-height:.82;float:left;
  padding:.06em .11em 0 0;color:var(--accent);font-style:italic;font-weight:400;
}
.pull{
  margin:2.8rem 0;padding:1.6rem 0 1.6rem 1.8rem;border-left:2px solid var(--accent);
  font-family:var(--serif);font-size:clamp(1.28rem,2.4vw,1.72rem);line-height:1.34;color:var(--ink);font-style:italic;
}
.note{
  margin-top:2rem;padding:1.3rem 1.4rem;background:var(--bg-2);border-radius:var(--radius);
  font-size:.93rem;color:var(--ink-soft);border:1px solid var(--line-soft)
}
.note b{color:var(--ink)}

/* Ficha de producto */
.pcard{
  margin-top:2.6rem;background:var(--bg);border:1px solid var(--line-soft);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--sh-1);transition:box-shadow .6s var(--ease-out),transform .6s var(--ease-out)
}
.pcard:hover{box-shadow:var(--sh-2);transform:translateY(-3px)}
.pcard-top{display:grid;gap:1.2rem;padding:1.5rem}
.pcard-rank{
  display:inline-flex;align-items:center;gap:.5rem;align-self:start;padding:.4rem .85rem;border-radius:999px;
  background:var(--accent);color:#fff;font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;font-weight:600;justify-self:start
}
.pcard-rank.is-alt{background:var(--ink)}
.pcard-rank.is-value{background:var(--moss)}
.pcard h3{font-family:var(--serif);font-size:1.42rem;margin:0;line-height:1.16}
.pcard-desc{font-size:.96rem;color:var(--ink-soft);line-height:1.68;margin:0}
.pcard-score{display:flex;align-items:center;gap:.7rem;font-size:.8rem;color:var(--ink-mute)}
.score-bar{flex:1;height:5px;border-radius:99px;background:var(--bg-3);overflow:hidden;max-width:150px}
.score-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--ember),var(--accent));width:var(--v,80%)}
.score-num{font-family:var(--serif);font-size:1.1rem;color:var(--ink)}
.proscons{display:grid;gap:1rem;padding:0 1.5rem 1.5rem}
.pc-col{display:grid;gap:.5rem}
.pc-col h4{font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;font-weight:600}
.pc-col.is-pro h4{color:var(--moss)}
.pc-col.is-con h4{color:var(--accent-d)}
.pc-col ul{list-style:none;padding:0;display:grid;gap:.45rem;margin:0}
.pc-col li{font-size:.9rem;line-height:1.55;padding-left:1.4rem;position:relative;color:var(--ink-soft)}
.pc-col.is-pro li::before{content:"＋";position:absolute;left:0;color:var(--moss);font-size:.85rem}
.pc-col.is-con li::before{content:"−";position:absolute;left:.15rem;color:var(--accent-d);font-size:1rem;line-height:1.3}
.pcard-foot{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;justify-content:space-between;padding:1.15rem 1.5rem;background:var(--bg-2);border-top:1px solid var(--line-soft)}
.pcard-for{font-size:.85rem;color:var(--ink-mute);max-width:38ch;line-height:1.5}
.pcard-for b{color:var(--ink)}
@media (min-width:640px){.proscons{grid-template-columns:1fr 1fr;gap:1.6rem}}

/* Botón Amazon */
.amz{
  display:inline-flex;align-items:center;gap:.55rem;padding:.85rem 1.4rem;border-radius:999px;
  background:var(--ink);color:var(--paper);font-size:.83rem;font-weight:500;white-space:nowrap;
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out),background-color .35s
}
.amz:hover{transform:translateY(-3px);background:var(--accent);box-shadow:0 14px 32px rgba(192,86,47,.3)}
.amz::after{content:"↗";font-size:.9em;opacity:.7}
.amz[data-pendiente="1"]{position:relative}
.amz[data-pendiente="1"]::before{
  content:"";position:absolute;top:-4px;right:-4px;width:9px;height:9px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 0 2px var(--bg-2)
}

/* Tabla comparativa */
.tablewrap{margin-top:2.4rem;overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);-webkit-overflow-scrolling:touch}
table.cmp{width:100%;border-collapse:collapse;font-size:.875rem;min-width:620px}
table.cmp th,table.cmp td{padding:.85rem 1rem;text-align:left;border-bottom:1px solid var(--line-soft)}
table.cmp thead th{background:var(--bg-2);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-mute);font-weight:600;white-space:nowrap}
table.cmp tbody tr:last-child td{border-bottom:0}
table.cmp tbody tr{transition:background-color .3s var(--ease-out)}
table.cmp tbody tr:hover{background:var(--bg-2)}
table.cmp td:first-child{font-weight:600;color:var(--ink)}
.tablehint{font-size:.76rem;color:var(--ink-faint);margin-top:.6rem;display:none}
@media (max-width:719px){.tablehint{display:block}}

/* Veredicto */
.verdict{
  margin-top:3rem;padding:1.9rem 1.7rem;border-radius:var(--radius-lg);background:var(--night);color:#F4EBDD;
  position:relative;overflow:hidden;isolation:isolate
}
.verdict::before{content:"";position:absolute;inset:-50% 0;z-index:-1;background:radial-gradient(40% 50% at 15% 20%,rgba(192,86,47,.4),transparent 70%);filter:blur(50px)}
.verdict .kicker{color:var(--ember);margin-bottom:1rem}
.verdict h3{font-family:var(--serif);font-size:clamp(1.35rem,2.5vw,1.85rem);color:#FBF6EE;margin-bottom:.8rem}
.verdict p{color:rgba(244,235,221,.84);font-size:.98rem;line-height:1.7}
.verdict p + p{margin-top:.8rem}
.verdict-actions{margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:.7rem}
.verdict .amz{background:var(--ember);color:var(--night)}
.verdict .amz:hover{background:#fff;color:var(--night)}

/* FAQ */
.faq{margin-top:2.6rem;display:grid;gap:0;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  padding:1.15rem 2rem 1.15rem 0;cursor:pointer;list-style:none;position:relative;
  font-family:var(--serif);font-size:1.08rem;color:var(--ink);line-height:1.35;transition:color .3s
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:.4rem;top:1.55rem;width:11px;height:11px;border-right:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);transform:rotate(45deg);transition:transform .45s var(--ease-out)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq summary:hover{color:var(--accent)}
.faq-a{padding:0 0 1.3rem;font-size:.96rem;color:var(--ink-mute);line-height:1.72;max-width:64ch}

/* Firma autor */
.byline-box{margin-top:3.2rem;padding:1.6rem;border:1px solid var(--line-soft);border-radius:var(--radius-lg);background:var(--bg);display:grid;gap:1rem}
.byline-box h4{font-family:var(--serif);font-size:1.1rem}
.byline-box p{font-size:.9rem;color:var(--ink-mute);line-height:1.65}
@media (min-width:600px){.byline-box{grid-template-columns:70px 1fr;gap:1.3rem;align-items:start}}
.byline-mark{width:70px;height:70px;border-radius:50%;background:linear-gradient(140deg,var(--bg-3),var(--wood));display:grid;place-items:center;font-family:var(--serif);font-size:1.5rem;color:var(--paper)}

/* =============================================================
   20. Blog index — filtros
   ============================================================= */
.page-head{padding:calc(var(--nav-h) + clamp(3rem,8vw,6rem)) 0 clamp(2rem,4vw,3rem);background:var(--paper)}
.page-head-inner{display:grid;gap:1.3rem;max-width:52rem}
.filters{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:.6rem}
.chip{
  padding:.55rem 1.05rem;border-radius:999px;border:1px solid var(--line);font-size:.8rem;font-weight:450;
  color:var(--ink-soft);background:transparent;transition:all .4s var(--ease-out)
}
.chip:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.chip.is-active{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.card.is-hidden{display:none}
.empty-state{padding:3rem 0;color:var(--ink-mute);font-size:.95rem}

/* =============================================================
   21. Asistente IA (Brasa)
   ============================================================= */
.ai-fab{
  position:fixed;right:clamp(1rem,3vw,1.8rem);bottom:clamp(1rem,3vw,1.8rem);z-index:940;
  display:flex;align-items:center;gap:.6rem;padding:.75rem 1.15rem .75rem .8rem;border-radius:999px;
  background:var(--ink);color:var(--paper);box-shadow:0 10px 34px rgba(30,26,22,.3);
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out),opacity .4s;
}
.ai-fab:hover{transform:translateY(-4px);box-shadow:0 18px 46px rgba(192,86,47,.36);background:var(--accent)}
.ai-fab .flame{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 50% 62%,#FFD9A0,var(--ember) 42%,var(--accent) 80%);flex:none;box-shadow:0 0 14px rgba(227,145,80,.7);animation:flameGlow 3.2s var(--ease-soft) infinite}
@keyframes flameGlow{0%,100%{box-shadow:0 0 12px rgba(227,145,80,.55)}50%{box-shadow:0 0 22px rgba(227,145,80,.95)}}
.ai-fab span{font-size:.83rem;font-weight:500;white-space:nowrap}
.ai-fab.is-hidden,.ai-fab.is-tucked{opacity:0;pointer-events:none;transform:translateY(14px) scale(.94)}
@media (max-width:479px){.ai-fab span{display:none}.ai-fab{padding:.7rem}}

.ai-panel{
  position:fixed;right:clamp(.6rem,3vw,1.8rem);bottom:clamp(.6rem,3vw,1.8rem);z-index:945;
  width:min(calc(100vw - 1.2rem),392px);height:min(calc(100dvh - 1.2rem),610px);
  background:var(--paper);border-radius:var(--radius-lg);box-shadow:0 30px 90px rgba(30,26,22,.32);
  display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line-soft);
  opacity:0;transform:translateY(20px) scale(.97);pointer-events:none;
  transition:opacity .45s var(--ease-out),transform .5s var(--ease-out);
}
.ai-panel.is-open{opacity:1;transform:none;pointer-events:auto}
.ai-head{padding:1rem 1.1rem;background:var(--night);color:#F4EBDD;display:flex;align-items:center;gap:.75rem;flex:none}
.ai-head .flame{width:32px;height:32px;border-radius:50%;background:radial-gradient(circle at 50% 62%,#FFD9A0,var(--ember) 42%,var(--accent) 80%);flex:none}
.ai-head-txt{flex:1;display:grid;gap:.1rem}
.ai-head-txt b{font-family:var(--serif);font-size:1rem;font-weight:400;letter-spacing:.03em}
.ai-head-txt small{font-size:.7rem;color:rgba(244,235,221,.6)}
.ai-close{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:rgba(244,235,221,.8);transition:background-color .3s}
.ai-close:hover{background:rgba(255,255,255,.12);color:#fff}
.ai-log{flex:1;overflow-y:auto;padding:1.1rem;display:flex;flex-direction:column;gap:.85rem;scroll-behavior:smooth}
.ai-msg{max-width:88%;padding:.75rem .95rem;border-radius:15px;font-size:.88rem;line-height:1.6}
.ai-msg.is-bot{background:var(--bg-2);color:var(--ink-soft);border-bottom-left-radius:5px;align-self:flex-start}
.ai-msg.is-me{background:var(--ink);color:var(--paper);border-bottom-right-radius:5px;align-self:flex-end}
.ai-msg a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.ai-msg.is-me a{color:var(--ember)}
.ai-msg strong{font-weight:600;color:var(--ink)}
.ai-sugs{display:flex;flex-wrap:wrap;gap:.4rem;padding:0 1.1rem .85rem}
.ai-sug{padding:.48rem .8rem;border-radius:999px;border:1px solid var(--line);font-size:.76rem;color:var(--ink-soft);transition:all .35s var(--ease-out);text-align:left}
.ai-sug:hover{border-color:var(--accent);color:var(--accent);background:rgba(192,86,47,.05)}
.ai-form{display:flex;gap:.5rem;padding:.85rem 1.1rem;border-top:1px solid var(--line-soft);background:var(--bg);flex:none}
.ai-form input{flex:1;padding:.72rem .95rem;border:1px solid var(--line);border-radius:999px;background:var(--paper);font:inherit;font-size:.87rem}
.ai-form input:focus{outline:none;border-color:var(--accent)}
.ai-send{width:40px;height:40px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;flex:none;transition:transform .4s var(--ease-out),background-color .3s}
.ai-send:hover{transform:scale(1.08);background:var(--accent-d)}
.ai-send:disabled{opacity:.45;cursor:not-allowed;transform:none}
.ai-typing{display:inline-flex;gap:4px;align-items:center;padding:.2rem 0}
.ai-typing i{width:6px;height:6px;border-radius:50%;background:var(--ink-faint);animation:typing 1.3s var(--ease-soft) infinite}
.ai-typing i:nth-child(2){animation-delay:.18s}
.ai-typing i:nth-child(3){animation-delay:.36s}
@keyframes typing{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}
.ai-foot{padding:.5rem 1.1rem .8rem;font-size:.68rem;color:var(--ink-faint);text-align:center;background:var(--bg)}

/* =============================================================
   22. Reveals
   ============================================================= */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .95s var(--ease-out),transform .95s var(--ease-out)}
.reveal.is-visible{opacity:1;transform:none}
.reveal[data-split]{opacity:1;transform:none}   /* defensa A.4.5 */
.reveal[data-d="1"]{transition-delay:.09s}
.reveal[data-d="2"]{transition-delay:.18s}
.reveal[data-d="3"]{transition-delay:.27s}
.reveal[data-d="4"]{transition-delay:.36s}
.reveal[data-d="5"]{transition-delay:.45s}
.split-line{display:block;overflow:hidden}
.split-line > i{display:block;font-style:inherit;transform:translateY(105%);transition:transform 1.05s var(--ease-out)}
.is-visible .split-line > i,.split-ready .split-line > i{transform:none}
.split-word{display:inline-block;transform:translateY(.9em);opacity:0;transition:transform .85s var(--ease-out),opacity .85s var(--ease-out)}
.split-ready .split-word{transform:none;opacity:1}

/* Imagen con clip reveal */
.clipimg{clip-path:inset(0 0 100% 0);transition:clip-path 1.25s var(--ease-out)}
.clipimg.is-visible{clip-path:inset(0 0 0 0)}

/* =============================================================
   23. Transiciones de página
   ============================================================= */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.5s;animation-timing-function:cubic-bezier(.16,1,.3,1)}
::view-transition-old(root){animation-name:vtOut}
::view-transition-new(root){animation-name:vtIn}
@keyframes vtOut{to{opacity:0}}
@keyframes vtIn{from{opacity:0}}

/* =============================================================
   24. Reduced motion — solo lo intrusivo
   ============================================================= */
@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:none;transform:none}
  .news::before{animation:none}
  .ai-fab .flame{animation:none}
  .hero-glow{display:none}
}

/* =============================================================
   25. Ajustes móviles finales
   ============================================================= */
@media (max-width:719px){
  .nav-cta{display:none}
  .hero-inner{padding-top:calc(var(--nav-h) + 3.5rem)}
  .hero-foot{gap:1.2rem}
  .feat-side .card{grid-template-columns:88px 1fr;gap:.9rem}
  .pcard-foot{flex-direction:column;align-items:flex-start}
  .pcard-foot .amz{width:100%;justify-content:center}
  .verdict-actions .amz{width:100%;justify-content:center}
}
@media (max-width:539px){
  .hero-stats{gap:1.1rem 1.8rem}
  .hero-stat b{font-size:1.35rem}
  .marquee-item{font-size:1.15rem}
}
/* Red de seguridad contra desbordes horizontales */
.wrap,.wrap-narrow,.hero-inner,.prose,.art-head-inner,.page-head-inner{max-width:100%}
.prose pre,.prose code{overflow-x:auto;max-width:100%}