/* ============================================================
   Ayudas en Casa — sistema de diseño
   Dirección: "casa con luz". Verde pino como color de marca,
   papel cálido casi blanco (no crema), acento miel.
   Display: Fraunces (humanista, cálido). Cuerpo: Hanken Grotesk.
   Accesibilidad como parte de la marca: contraste alto, tipografía
   grande, foco visible, motion reducido respetado.
   ============================================================ */

:root{
  --bg:#FBFAF6;
  --paper:#FFFFFF;
  --ink:#23211C;
  --ink-soft:#5C574E;
  --green:#2C4A3D;
  --green-700:#22392F;
  --green-soft:#E7EEE5;
  --green-soft-2:#D6E3D3;
  --honey:#C7873A;
  --honey-700:#AC722C;
  --line:#E7E1D4;
  --line-soft:#F0EBDF;
  --radius:14px;
  --radius-lg:22px;
  --maxw:1140px;
  --shadow:0 1px 2px rgba(35,33,28,.04), 0 14px 30px -18px rgba(35,33,28,.18);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
  font-size:18px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4{
  font-family:"Fraunces","Hanken Grotesk",serif;
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.01em;
  color:var(--ink);
  margin:0 0 .4em;
}
h1{font-size:clamp(2.1rem,5.2vw,3.6rem);font-weight:600}
h2{font-size:clamp(1.6rem,3.4vw,2.4rem)}
h3{font-size:1.28rem}
p{margin:0 0 1rem}
a{color:var(--green);text-decoration:none}
a:hover{text-decoration:underline}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{
  font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--honey-700);margin:0 0 .9rem;
}
.lead{font-size:1.2rem;color:var(--ink-soft);max-width:60ch}
.muted{color:var(--ink-soft)}

/* ---- foco accesible ---- */
a:focus-visible,button:focus-visible,.btn:focus-visible{
  outline:3px solid var(--honey);outline-offset:3px;border-radius:6px;
}

/* ---- botones ---- */
.btn{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:inherit;font-weight:600;font-size:1rem;
  padding:.85em 1.4em;border-radius:999px;border:1.5px solid transparent;
  cursor:pointer;transition:transform .15s ease,background .15s ease,box-shadow .15s ease;
  text-decoration:none;line-height:1;
}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--green);color:#fff}
.btn-primary:hover{background:var(--green-700);transform:translateY(-1px)}
.btn-honey{background:var(--honey);color:#fff}
.btn-honey:hover{background:var(--honey-700);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--green);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--green);background:#fff}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none}}

/* ============================================================
   Cabecera
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:40;
  background:rgba(251,250,246,.86);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line-soft);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:.6rem;font-family:"Fraunces",serif;
  font-weight:600;font-size:1.32rem;color:var(--ink);letter-spacing:-.01em}
.brand:hover{text-decoration:none}
.brand .mark{flex:0 0 auto}
.nav-links{display:flex;gap:1.6rem;align-items:center}
.nav-links a{color:var(--ink-soft);font-size:.98rem;font-weight:500}
.nav-links a:hover{color:var(--green);text-decoration:none}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px}
@media (max-width:860px){
  .nav-links{display:none;position:absolute;top:72px;left:0;right:0;
    flex-direction:column;gap:0;background:var(--paper);
    border-bottom:1px solid var(--line);padding:8px 0}
  .nav-links.open{display:flex}
  .nav-links a{padding:.85rem 24px;width:100%;font-size:1.05rem}
  .nav-toggle{display:inline-flex}
}

/* ============================================================
   Hero
   ============================================================ */
.hero{padding:clamp(3rem,8vw,6rem) 0 clamp(2.5rem,6vw,4.5rem)}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.hero h1{margin-bottom:.5em}
.hero .lead{margin-bottom:1.8rem}
.hero-cta{display:flex;gap:.8rem;flex-wrap:wrap}
.hero-note{margin-top:1.4rem;font-size:.92rem;color:var(--ink-soft)}
.hero-card{
  background:var(--green);color:#fff;border-radius:var(--radius-lg);
  padding:2rem 1.9rem;box-shadow:var(--shadow);position:relative;overflow:hidden;
}
.hero-card h3{color:#fff;font-size:1.15rem}
.hero-card p{color:rgba(255,255,255,.82);font-size:.98rem;margin-bottom:1.2rem}
.hero-card .stat{font-family:"Fraunces",serif;font-size:2.6rem;line-height:1;color:#fff;margin-bottom:.2rem}
.hero-card .stat-label{color:rgba(255,255,255,.78);font-size:.9rem;margin-bottom:1.4rem}
.hero-card a{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:3px}
@media (max-width:820px){.hero-grid{grid-template-columns:1fr}.hero-card{order:-1}}

/* ============================================================
   Secciones genéricas
   ============================================================ */
.section{padding:clamp(3rem,7vw,5rem) 0}
.section-soft{background:var(--green-soft)}
.section-head{max-width:64ch;margin-bottom:2.4rem}
.section-head .lead{margin-top:.6rem}

/* ---- pilares: zonas de la casa ---- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
@media (max-width:900px){.pillars{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.pillars{grid-template-columns:1fr}}
.pillar{
  display:flex;flex-direction:column;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.6rem 1.5rem;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.pillar:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--green-soft-2);text-decoration:none}
.pillar .ico{width:46px;height:46px;color:var(--green);margin-bottom:1rem}
.pillar .ix{font-family:"Fraunces",serif;font-size:.82rem;color:var(--honey-700);
  letter-spacing:.12em;text-transform:uppercase;margin-bottom:.5rem;display:block}
.pillar h3{margin-bottom:.4rem;color:var(--ink)}
.pillar p{color:var(--ink-soft);font-size:1rem;margin-bottom:1.1rem}
.pillar .go{margin-top:auto;color:var(--green);font-weight:600;font-size:.96rem;
  display:inline-flex;align-items:center;gap:.4em}
.pillar:hover .go{gap:.7em}
@media (prefers-reduced-motion:reduce){.pillar:hover{transform:none}.pillar:hover .go{gap:.4em}}

/* ---- bloque confianza ---- */
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
@media (max-width:760px){.trust{grid-template-columns:1fr}}
.trust-item h3{font-size:1.1rem;display:flex;align-items:center;gap:.5rem}
.trust-item .ico{width:24px;height:24px;color:var(--honey-700);flex:0 0 auto}
.trust-item p{font-size:1rem;color:var(--ink-soft);margin:0}

/* ---- banda CTA ---- */
.cta-band{background:var(--green);color:#fff;border-radius:var(--radius-lg);
  padding:clamp(2rem,5vw,3.2rem);text-align:center}
.cta-band h2{color:#fff}
.cta-band p{color:rgba(255,255,255,.84);max-width:52ch;margin:0 auto 1.6rem}

/* ============================================================
   Páginas pilar / artículo
   ============================================================ */
.page-hero{padding:clamp(2.5rem,6vw,4rem) 0 clamp(1.5rem,3vw,2.2rem);
  background:var(--green-soft);border-bottom:1px solid var(--line)}
.breadcrumb{font-size:.9rem;color:var(--ink-soft);margin-bottom:1rem}
.breadcrumb a{color:var(--ink-soft)}
.page-hero h1{max-width:18ch}
.page-hero .lead{margin-top:.6rem}

.content{padding:clamp(2.5rem,6vw,4rem) 0}
.content-grid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:3rem}
@media (max-width:900px){.content-grid{grid-template-columns:1fr}}
.prose{max-width:68ch}
.prose h2{margin-top:2.2rem}
.prose h3{margin-top:1.6rem}
.prose ul{padding-left:1.2rem}
.prose li{margin-bottom:.4rem}
.prose img{max-width:100%;border-radius:var(--radius)}

aside.side{align-self:start;position:sticky;top:96px}
.side-box{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem 1.3rem;margin-bottom:1.2rem}
.side-box h4{font-family:"Hanken Grotesk",sans-serif;font-size:.8rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:.8rem;font-weight:700}
.side-box ul{list-style:none;margin:0;padding:0}
.side-box li{margin-bottom:.55rem}
.side-box a{font-size:.98rem}

/* ---- lista de artículos ---- */
.articles{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem}
@media (max-width:680px){.articles{grid-template-columns:1fr}}
.article-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.4rem 1.4rem;transition:box-shadow .18s ease,transform .18s ease}
.article-card:hover{box-shadow:var(--shadow);transform:translateY(-2px);text-decoration:none}
.article-card .tag{font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--honey-700);font-weight:700}
.article-card h3{font-size:1.18rem;margin:.5rem 0 .4rem}
.article-card p{font-size:.98rem;color:var(--ink-soft);margin:0}
.placeholder-note{background:var(--line-soft);border:1px dashed var(--green-soft-2);
  border-radius:var(--radius);padding:1.4rem 1.5rem;color:var(--ink-soft);font-size:.96rem}

/* ============================================================
   Ficha de producto (afiliado)
   ============================================================ */
.product{
  display:grid;grid-template-columns:120px 1fr auto;gap:1.3rem;align-items:center;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.3rem 1.4rem;margin:1.6rem 0;
}
.product .ph{width:120px;height:120px;border-radius:10px;background:var(--green-soft);
  display:grid;place-items:center;color:var(--green);font-size:.8rem;text-align:center}
.product img{width:120px;height:120px;object-fit:contain;border-radius:10px;background:#fff}
.product .pinfo h3{font-size:1.12rem;margin:0 0 .25rem}
.product .pinfo .meta{font-size:.92rem;color:var(--ink-soft);margin:0 0 .4rem}
.product .pinfo .why{font-size:.96rem;margin:0}
.product .pcta{display:flex;flex-direction:column;gap:.5rem;align-items:stretch;text-align:center}
.product .price{font-family:"Fraunces",serif;font-size:1.3rem;color:var(--ink)}
@media (max-width:620px){
  .product{grid-template-columns:80px 1fr}
  .product .ph,.product img{width:80px;height:80px}
  .product .pcta{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between}
}
.aff-inline{font-size:.85rem;color:var(--ink-soft);font-style:italic;margin:.4rem 0 0}

/* ============================================================
   Pie
   ============================================================ */
.aff-disclosure{background:var(--green-soft);border-top:1px solid var(--line);
  font-size:.92rem;color:var(--ink-soft);padding:1rem 0;text-align:center}
.site-footer{background:var(--green-700);color:rgba(255,255,255,.82);padding:3rem 0 2rem}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem;margin-bottom:2rem}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.footer-grid{grid-template-columns:1fr}}
.site-footer .brand{color:#fff}
.site-footer h4{color:#fff;font-family:"Hanken Grotesk",sans-serif;font-size:.82rem;
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:.9rem}
.site-footer a{color:rgba(255,255,255,.78);font-size:.96rem}
.site-footer a:hover{color:#fff}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:.5rem}
.footer-bottom{border-top:1px solid rgba(255,255,255,.14);padding-top:1.4rem;
  font-size:.86rem;color:rgba(255,255,255,.6);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

/* utilidades */
.center{text-align:center}
.mt-0{margin-top:0}
.skip{position:absolute;left:-9999px;top:auto}
.skip:focus{left:24px;top:12px;z-index:60;background:#fff;padding:.6rem 1rem;border-radius:8px;box-shadow:var(--shadow)}

/* animación de entrada suave */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.rise{animation:rise .6s cubic-bezier(.2,.7,.3,1) both}
.rise-2{animation-delay:.08s}
.rise-3{animation-delay:.16s}
@media (prefers-reduced-motion:reduce){.rise,.rise-2,.rise-3{animation:none}}

/* ============================================================
   v2 — componentes visuales (home con foto, subapartados,
   artículo con top-3, batería de productos, comparativa)
   ============================================================ */

/* ---- pilares con imagen (home) ---- */
.pillar-v2{padding:0;overflow:hidden}
.pillar-v2 .pillar-media{display:block;width:100%;aspect-ratio:16/10;overflow:hidden;background:var(--green-soft)}
.pillar-v2 .pillar-media img,.pillar-v2 .pillar-media svg{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.pillar-v2:hover .pillar-media img,.pillar-v2:hover .pillar-media svg{transform:scale(1.04)}
.pillar-v2 .pillar-body{padding:1.4rem 1.5rem 1.6rem;display:flex;flex-direction:column;flex:1}
@media (prefers-reduced-motion:reduce){.pillar-v2:hover .pillar-media img,.pillar-v2:hover .pillar-media svg{transform:none}}

/* ---- subapartados (página pilar): tarjetas de artículo con foto ---- */
.subgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
@media (max-width:900px){.subgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.subgrid{grid-template-columns:1fr}}
.sub-card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;transition:transform .18s ease,box-shadow .18s ease}
.sub-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);text-decoration:none}
.sub-thumb{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--green-soft)}
.sub-card .sub-body{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;flex:1}
.sub-card h3{font-size:1.12rem;margin:0 0 .35rem}
.sub-card p{font-size:.95rem;color:var(--ink-soft);margin:0 0 .9rem}
.sub-card .go{margin-top:auto;color:var(--green);font-weight:600;font-size:.94rem}
.sub-card.soon{opacity:.72}
.sub-card.soon .badge-soon{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft);background:var(--line-soft);padding:.2rem .55rem;border-radius:999px;align-self:flex-start;margin-bottom:.5rem}
@media (prefers-reduced-motion:reduce){.sub-card:hover{transform:none}}

/* ---- artículo: cabecera con imagen grande ---- */
.article-hero{padding:clamp(2rem,5vw,3rem) 0 0}
.article-hero .breadcrumb{margin-bottom:.8rem}
.article-hero h1{max-width:20ch;margin-bottom:.5rem}
.article-cover{margin-top:1.6rem;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:21/9;background:var(--green-soft)}
.article-cover img,.article-cover svg{width:100%;height:100%;object-fit:cover;display:block}
.article-intro{max-width:70ch;font-size:1.12rem;color:var(--ink-soft);margin-top:1.6rem}

.block-head{margin:clamp(2.4rem,5vw,3.4rem) 0 1.4rem}
.block-head h2{margin:0}
.block-head p{margin:.4rem 0 0;color:var(--ink-soft)}

/* ---- TOP 3 más vendidos (podio) ---- */
.podium{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
@media (max-width:820px){.podium{grid-template-columns:1fr}}
.top-card{position:relative;display:flex;flex-direction:column;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.3rem;box-shadow:var(--shadow)}
.top-card.is-1{border-color:var(--honey);box-shadow:0 0 0 2px var(--honey) inset,var(--shadow)}
.rank{position:absolute;top:-14px;left:1.3rem;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;font-family:"Fraunces",serif;font-weight:600;color:#fff;
  background:var(--green);box-shadow:var(--shadow)}
.top-card.is-1 .rank{background:var(--honey)}
.top-thumb{width:100%;aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--green-soft);margin:.4rem 0 1rem}
.top-thumb img,.top-thumb svg{width:100%;height:100%;object-fit:cover;display:block}
.top-tag{font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--honey-700)}
.top-card h3{font-size:1.08rem;margin:.3rem 0 .35rem}
.top-card .feat{font-size:.92rem;color:var(--ink-soft);margin:0 0 .9rem}
.top-card .bottom{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.top-card .price{font-family:"Fraunces",serif;font-size:1.35rem}

/* ---- batería de ~20 productos ---- */
.grid-products{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
@media (max-width:1000px){.grid-products{grid-template-columns:repeat(3,1fr)}}
@media (max-width:740px){.grid-products{grid-template-columns:repeat(2,1fr)}}
@media (max-width:430px){.grid-products{grid-template-columns:1fr}}
.pcard{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;transition:box-shadow .16s ease,transform .16s ease}
.pcard:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.pcard-thumb{width:100%;aspect-ratio:1;background:var(--green-soft);overflow:hidden}
.pcard-thumb img,.pcard-thumb svg{width:100%;height:100%;object-fit:cover;display:block}
.pcard-body{padding:.85rem .9rem 1rem;display:flex;flex-direction:column;flex:1}
.pcard h4{font-size:.96rem;font-family:"Hanken Grotesk",sans-serif;font-weight:600;line-height:1.3;margin:0 0 .5rem}
.pcard .row{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding-top:.5rem}
.pcard .price{font-family:"Fraunces",serif;font-size:1.12rem}
.pcard .mini{font-size:.85rem;font-weight:600;padding:.5em .9em;border-radius:999px;background:var(--green);color:#fff;white-space:nowrap}
.pcard .mini:hover{background:var(--green-700);text-decoration:none}
@media (prefers-reduced-motion:reduce){.pcard:hover,.top-card:hover{transform:none}}

/* ---- comparativa top 3 ---- */
.compare-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper)}
table.compare{width:100%;border-collapse:collapse;min-width:560px}
table.compare th,table.compare td{padding:.9rem 1rem;text-align:left;border-bottom:1px solid var(--line-soft);font-size:.96rem;vertical-align:top}
table.compare thead th{background:var(--green-soft);font-family:"Fraunces",serif;font-weight:600;font-size:1rem}
table.compare thead th.best{background:var(--honey);color:#fff}
table.compare tbody th{font-weight:600;color:var(--ink-soft);font-family:"Hanken Grotesk",sans-serif;width:30%}
table.compare .cprice{font-family:"Fraunces",serif;font-size:1.05rem}
table.compare tr:last-child td,table.compare tr:last-child th{border-bottom:0}

/* ---- texto SEO al final ---- */
.seo{margin-top:clamp(2.6rem,6vw,4rem);padding-top:2rem;border-top:1px solid var(--line)}
.seo .prose{max-width:74ch}
.seo h2{margin-top:2rem}
.seo h2:first-child{margin-top:0}