:root{
  --cream:#fbf6ee;
  --cream-2:#f3ead9;
  --ink:#2b2620;
  --ink-soft:#5c5346;
  --green:#3f5b48;
  --green-dark:#2c4133;
  --rust:#c1694f;
  --gold:#b8935a;
  --line:#e6dcc8;
  --white:#ffffff;
  --radius:14px;
  --radius-sm:8px;
  --shadow:0 4px 20px rgba(43,38,32,.08);
  --maxw:1100px;
  --font-head:"Playfair Display",Georgia,"Times New Roman",serif;
  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

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

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.contenedor{max-width:var(--maxw);margin:0 auto;padding:0 24px}

h1,h2,h3,h4{
  font-family:var(--font-head);
  font-weight:700;
  line-height:1.2;
  margin:0 0 .5em;
  color:var(--green-dark);
}
h1{font-size:clamp(2rem,4vw,3rem)}
h2{font-size:clamp(1.5rem,3vw,2.1rem)}
h3{font-size:1.3rem}
p{margin:0 0 1.1em}
a{color:var(--rust)}
a:hover{color:var(--green-dark)}

/* Header */
.cabecera{
  background:var(--cream);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:40;
}
.cabecera__fila{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 24px;
}
.marca{
  font-family:var(--font-head);
  font-size:1.5rem;font-weight:700;
  color:var(--green-dark);text-decoration:none;
  letter-spacing:.01em;
}
.marca span::before{content:"✝ "; color:var(--rust)}
.cabecera__nav{display:flex;gap:28px;align-items:center}
.cabecera__nav a{
  color:var(--ink);text-decoration:none;font-weight:500;font-size:.96rem;
}
.cabecera__nav a:hover{color:var(--rust)}
.cabecera__nav-toggle{display:none}

@media (max-width:720px){
  .cabecera__nav{
    display:none;
    position:absolute;top:100%;left:0;right:0;
    background:var(--cream);border-bottom:1px solid var(--line);
    flex-direction:column;gap:0;padding:8px 24px 18px;
  }
  .cabecera__nav.abierto{display:flex}
  .cabecera__nav a{padding:10px 0;border-bottom:1px solid var(--line)}
  .cabecera__nav-toggle{
    display:block;background:none;border:1px solid var(--line);
    border-radius:8px;padding:8px 12px;font-size:1.1rem;cursor:pointer;
  }
}

/* Hero */
.hero{padding:64px 0 48px;text-align:center}
.hero__eyebrow{
  display:inline-block;color:var(--green);font-weight:600;font-size:.85rem;
  text-transform:uppercase;letter-spacing:.14em;margin-bottom:14px;
}
.hero__lead{
  max-width:640px;margin:0 auto 8px;color:var(--ink-soft);font-size:1.15rem;
}

/* Cards */
.cuadricula{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:26px;margin:36px 0;
}
.tarjeta{
  background:var(--white);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;
  text-decoration:none;color:var(--ink);border:1px solid var(--line);
  transition:transform .18s ease, box-shadow .18s ease;
}
.tarjeta:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(43,38,32,.14)}
.tarjeta__cinta{
  background:var(--green);color:var(--white);font-size:.72rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;padding:5px 14px;
  display:inline-block;border-radius:999px;margin:16px 16px 0;width:fit-content;
}
.tarjeta__cuerpo{padding:14px 20px 22px}
.tarjeta__cuerpo h3{margin-bottom:.35em}
.tarjeta__cuerpo p{color:var(--ink-soft);font-size:.96rem;margin-bottom:0}

/* Sections */
.seccion{padding:48px 0}
.seccion--alt{background:var(--cream-2)}
.seccion__cabecera{max-width:640px;margin:0 auto 8px;text-align:center}

/* Prose (articles, legal pages) */
.prosa{max-width:720px;margin:0 auto;padding:48px 24px 80px}
.prosa h1{margin-bottom:.25em}
.prosa .articulo__meta{color:var(--ink-soft);font-size:.9rem;margin-bottom:2em}
.prosa h2{margin-top:1.6em}
.prosa h3{margin-top:1.3em;color:var(--ink)}
.prosa ul,.prosa ol{padding-left:1.3em}
.prosa li{margin-bottom:.5em}
.prosa img{max-width:100%;border-radius:var(--radius)}
.prosa blockquote{
  margin:1.6em 0;padding:1em 1.4em;background:var(--cream-2);
  border-left:4px solid var(--gold);border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-style:italic;color:var(--ink-soft);
}

/* Pick callout (placeholder for future affiliate links) */
.eleccion{
  border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px;margin:1.6em 0;background:var(--white);
  display:flex;gap:16px;align-items:flex-start;
}
.eleccion__numero{
  font-family:var(--font-head);font-weight:700;font-size:1.5rem;color:var(--gold);
  flex-shrink:0;
}
.eleccion h4{margin:0 0 .3em;font-family:var(--font-body);font-weight:700;font-size:1.05rem;color:var(--ink)}
.eleccion p{margin:0;color:var(--ink-soft);font-size:.95rem}

/* Affiliate disclosure banner */
.aviso-afiliados{
  background:var(--cream-2);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:12px 16px;font-size:.85rem;color:var(--ink-soft);margin:0 0 2em;
}
.aviso-afiliados a{color:var(--green)}

/* FAQ */
.faq details{
  border-bottom:1px solid var(--line);padding:14px 0;
}
.faq summary{
  font-weight:600;cursor:pointer;color:var(--green-dark);font-size:1.02rem;
}
.faq p{margin-top:.6em;color:var(--ink-soft)}

/* Ad slots (empty placeholders) */
.anuncio{
  margin:32px auto;max-width:var(--maxw);padding:0 24px;
}
.anuncio__caja{
  border:1px dashed var(--line);border-radius:var(--radius-sm);
  min-height:90px;display:flex;align-items:center;justify-content:center;
  color:var(--ink-soft);font-size:.75rem;text-transform:uppercase;
  letter-spacing:.08em;background:var(--cream-2);
}

/* Footer */
.pie{background:var(--green-dark);color:#e7e0d3;padding:40px 0 26px;margin-top:60px}
.pie__fila{
  display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;
}
.pie a{color:#e7e0d3;text-decoration:none}
.pie a:hover{color:var(--gold)}
.pie__nav{display:flex;gap:22px;flex-wrap:wrap}
.pie p{margin:0;font-size:.9rem}

/* Buttons */
.boton{
  display:inline-block;background:var(--green);color:var(--white)!important;
  padding:12px 26px;border-radius:999px;text-decoration:none;font-weight:600;
  font-size:.95rem;transition:background .15s ease;
}
.boton:hover{background:var(--green-dark)}