/*
Theme Name: A3vida Editorial
Theme URI: https://a3vida.com
Author: A3vida
Author URI: https://a3vida.com
Description: Revista editorial de cuidado capilar en español con guías, comparativas y recomendaciones transparentes.
Version: 3.2.1
Requires at least: 6.4
Requires PHP: 8.0

License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: femenino-affiliate
*/

/* ==========================================================================
   1. TOKENS DE DISEÑO
   Paleta: rosa palo/nude + terracota (variante propia) + crema + verde
   esmeralda reservado EXCLUSIVAMENTE para CTAs de alta conversión
   (contraste térmico: cálido en el contenido, frío/saturado en la acción).
   ========================================================================== */
:root {
  --color-cream:      #FAF7F1; /* fondo base, ligeramente más cálido/oscuro que el "cream cliché" */
  --color-cream-alt:   #F2E9DC;
  --color-nude:        #DFC9AD; /* rosa palo/nude */
  --color-nude-dark:   #A68359;
  --color-terracotta:  #A57635; /* variante propia, distinta del tono genérico D97757 */
  --color-terracotta-dark: #765019;
  --color-emerald:     #25201B; /* reservado para CTAs — único acento saturado del sistema */
  --color-emerald-dark:#000000;
  --color-ink:         #211C17;
  --color-ink-soft:    #6B5F5A;
  --color-line:        #E7DCCB;
  --color-white:       #FFFFFF;

  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --measure: 66ch;
  --radius-sm: 4px;
  --radius-md: 10px;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.75rem;
  --space-4: 3rem;
  --space-5: 5.5rem;

  --shadow-card: 0 4px 20px rgba(44, 38, 36, 0.08);
}

/* ==========================================================================
   2. RESET Y BASE (mobile-first)
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--color-cream);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Fondo decorativo de Home: la capa clara conserva la lectura. */
body.a3vida-front-page {
  background-color: var(--color-cream);
  background-image: linear-gradient(rgba(255, 251, 246, .82), rgba(255, 251, 246, .82)), var(--a3vida-home-background);
  background-size: auto, 100% auto;
  background-repeat: repeat, repeat-y;
  background-position: center top;
}

/* Contenedores de imagen con relación de aspecto FIJA — previene Layout Shift (CLS) */
.img-fixed {
  width: 100%;
  aspect-ratio: var(--ar, 4 / 3);
  object-fit: cover;
  background: var(--color-cream-alt);
  border-radius: var(--radius-md);
  display: block;
}

a { color: var(--color-terracotta-dark); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--color-terracotta); }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--color-emerald);
  outline-offset: 2px;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  color: var(--color-ink);
  margin: 0 0 var(--space-2);
}
h1 { font-size: clamp(2.1rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.15rem); }
h3 { font-size: 1.3rem; }

p { max-width: var(--measure); margin: 0 0 var(--space-2); }

.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-2);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-ink);
  color: var(--color-white);
  padding: var(--space-1) var(--space-2);
  z-index: 1000;
}
.skip-link:focus { left: var(--space-2); top: var(--space-2); }

/* ==========================================================================
   3. CABECERA
   ========================================================================== */
.site-header {
  border-bottom: 1px solid var(--color-line);
  padding-block: var(--space-2);
  background: var(--color-cream);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.site-branding a { font-family: var(--font-display); font-size: 1.5rem; color: var(--color-ink); text-decoration: none; }
.primary-nav ul { display: flex; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
.primary-nav a { color: var(--color-ink-soft); text-decoration: none; font-size: 0.95rem; }
.primary-nav a:hover { color: var(--color-terracotta-dark); }

/* ==========================================================================
   4. BOTONES CTA — Conversion-Centered Design
   Contraste térmico deliberado: todo el sistema es cálido (crema/nude/
   terracota); el verde esmeralda aparece SOLO en la acción principal,
   de modo que el ojo la encuentra sin esfuerzo.
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.98rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--color-emerald);
  color: var(--color-white);
  box-shadow: 0 3px 0 var(--color-emerald-dark);
}
.btn-primary:hover { background: #24805F; color: var(--color-white); }
.btn-primary:active { box-shadow: 0 1px 0 var(--color-emerald-dark); }

.btn-secondary {
  background: transparent;
  color: var(--color-ink);
  border: 1.5px solid var(--color-ink);
}
.btn-secondary:hover { background: var(--color-ink); color: var(--color-white); }

/* ==========================================================================
   5. DIVULGACIÓN FTC
   ========================================================================== */
.ftc-disclosure {
  background: var(--color-cream-alt);
  border-left: 3px solid var(--color-terracotta);
  padding: var(--space-1) var(--space-2);
  font-size: 0.875rem;
  color: var(--color-ink-soft);
  margin-block-end: var(--space-3);
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   6. HERO (StoryBrand) — front-page.php
   ========================================================================== */
.hero {
  padding-block: var(--space-5) var(--space-4);
}
.hero .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: center;
}
@media (min-width: 860px) {
  .hero .container { grid-template-columns: 1.1fr 0.9fr; }
}
.hero-eyebrow { color: var(--color-terracotta-dark); font-weight: 700; margin-bottom: var(--space-1); }
.hero h1 { margin-bottom: var(--space-2); }
.hero p.lede { font-size: 1.15rem; color: var(--color-ink-soft); }
.hero-media img { --ar: 4/3; }

/* ==========================================================================
   7. CATEGORÍAS DESTACADAS (home)
   ========================================================================== */
.category-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  padding-block: var(--space-4);
}
@media (min-width: 620px) { .category-grid { grid-template-columns: repeat(3, 1fr); } }

.category-card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  display: block;
  box-shadow: var(--shadow-card);
}
.category-card img { --ar: 3/4; transition: transform 0.3s ease; }
.category-card:hover img { transform: scale(1.04); }
.category-card figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--space-2);
  background: linear-gradient(to top, rgba(44,38,36,0.75), transparent);
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: 1.1rem;
}

/* ==========================================================================
   8. TARJETAS DE PRODUCTO (grid destacado del home)
   ========================================================================== */
.product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  padding-block: var(--space-4);
}
@media (min-width: 620px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }

.product-card {
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.product-card img { --ar: 1/1; object-fit: contain; background: var(--color-cream-alt); }
.badge-social-proof {
  display: inline-block;
  align-self: flex-start;
  background: var(--color-nude);
  color: var(--color-terracotta-dark);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
}
.product-card ul { margin: 0.35rem 0; padding-left: 1.1em; font-size: 0.92rem; color: var(--color-ink-soft); }
.product-card .btn { margin-top: auto; align-self: flex-start; }

/* ==========================================================================
   9. CAPTACIÓN DE LEADS (reciprocidad)
   ========================================================================== */
.lead-box {
  background: var(--color-nude);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-block: var(--space-4);
  display: grid;
  gap: var(--space-2);
}
@media (min-width: 780px) {
  .lead-box { grid-template-columns: 1.3fr 0.7fr; align-items: center; }
}
.lead-box h2 { color: var(--color-terracotta-dark); }
.lead-form { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.lead-form input[type="email"] {
  flex: 1 1 220px;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-line);
  font-family: var(--font-body);
}

/* ==========================================================================
   10. SINGLE — Estructura P-A-S y caja de producto
   ========================================================================== */
.single-entry .entry-header { margin-bottom: var(--space-3); }
.entry-meta { font-size: 0.85rem; color: var(--color-ink-soft); margin-bottom: var(--space-1); }
.reading-time::before { content: "· "; }

.pas-block {
  padding: var(--space-2);
  border-radius: var(--radius-md);
  margin-block: var(--space-2);
}
.pas-block h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.pas-problema { background: var(--color-cream-alt); border-left: 3px solid var(--color-terracotta); }
.pas-agitacion { background: var(--color-nude); border-left: 3px solid var(--color-terracotta-dark); }
.pas-solucion { background: #EAF2EE; border-left: 3px solid var(--color-emerald); }

.featured-product-box {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-block: var(--space-3);
  box-shadow: var(--shadow-card);
}
@media (min-width: 700px) { .featured-product-box { grid-template-columns: 220px 1fr; } }
.featured-product-box img { --ar: 1/1; object-fit: contain; }
.featured-product-box .asc-price { font-family: var(--font-display); color: var(--color-terracotta-dark); font-size: 1.3rem; margin-bottom: 0.5rem; }

.pros-cons {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  margin-block: var(--space-3);
}
@media (min-width: 620px) { .pros-cons { grid-template-columns: 1fr 1fr; } }
.pros-cons > div { padding: var(--space-2); border-radius: var(--radius-md); background: var(--color-white); border: 1px solid var(--color-line); }
.pros-cons.pros h4 { color: var(--color-emerald); }
.pros-cons.cons h4 { color: var(--color-terracotta-dark); }
.pros-cons ul { margin: 0; padding-left: 1.1em; }

.alt-products { padding-block: var(--space-3); }
.alt-products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}
@media (min-width: 700px) { .alt-products-grid { grid-template-columns: repeat(4, 1fr); } }
.alt-products-grid .product-card { padding: var(--space-1); }
.alt-products-grid img { --ar: 1/1; }

/* ==========================================================================
   11. PÁGINA "SOBRE NOSOTRAS" / METODOLOGÍA
   ========================================================================== */
.methodology-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  margin-block: var(--space-3);
}
@media (min-width: 700px) { .methodology-steps { grid-template-columns: repeat(3, 1fr); } }
.methodology-steps > div { background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: var(--space-2); }

/* ==========================================================================
   12. FORMULARIO DE CONTACTO
   ========================================================================== */
.contact-form { max-width: 560px; display: grid; gap: var(--space-2); }
.contact-form label { font-weight: 700; font-size: 0.92rem; display: block; margin-bottom: 0.3rem; }
.contact-form input, .contact-form textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-line);
  font-family: var(--font-body);
}
/* Honeypot anti-spam: oculto visualmente pero accesible a bots, invisible a lectores de pantalla */
.af-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-status { font-size: 0.9rem; margin-top: var(--space-1); }
.form-status.success { color: var(--color-emerald); }
.form-status.error { color: var(--color-terracotta-dark); }

/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.site-footer { border-top: 1px solid var(--color-line); padding-block: var(--space-4); color: var(--color-ink-soft); font-size: 0.875rem; }

/* A3vida editorial */
.site-branding img {display:block;width:auto;max-width:170px;max-height:60px;object-fit:contain}
.site-branding .custom-logo-link img {max-width:170px;max-height:60px}
.site-branding a {font-family:var(--font-display);font-size:1.5rem;text-decoration:none}
.hero-media .img-fixed {aspect-ratio:4/3;object-position:center}
.editorial-intro {max-width:70ch;margin:0 auto 2rem;text-align:center}
.topic-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:2rem 0 4rem}
@media (min-width:700px) {.topic-grid {grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1100px) {.topic-grid {grid-template-columns:repeat(6,minmax(0,1fr))}}
.topic-card {display:block;padding:1.5rem;border:1px solid var(--color-line);border-radius:10px;background:white;text-decoration:none;color:var(--color-ink)}
.topic-card:hover {border-color:var(--color-terracotta-dark)}
.topic-card strong {display:block;font-family:var(--font-display);font-size:1.3rem}
.section-head {display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:1rem;margin-bottom:1.5rem}
.section-head h2 {margin:0}
.hair-guide {margin:4rem auto;padding:2rem;background:#f2e9dc;border-radius:12px}
.article-disclosure {border-left:3px solid #a57635;padding:.6rem 1rem;margin:1.5rem 0;background:#f7f0e5;font-size:.94rem}
.search-field {width:100%;max-width:450px;padding:.75rem;border:1px solid var(--color-line)}
@media(max-width:680px){.primary-nav ul{display:flex;flex-wrap:wrap;gap:.5rem}.site-header .container{flex-wrap:wrap}.hero{padding-top:2rem}}

.editorial-art {min-height:330px;border-radius:12px;background:radial-gradient(circle at 80% 20%,#d7b883,transparent 40%),linear-gradient(135deg,#16130f,#3b3025);color:#f7e9d3;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem;box-shadow:0 16px 40px #251c1630}
.editorial-art span{font:600 clamp(2rem,5vw,4rem) var(--font-display)}
.editorial-art small{letter-spacing:.25em;text-transform:uppercase}

/* Blog */
.blog-hero {background:linear-gradient(120deg,#f2e9dc,#fffaf2);border-bottom:1px solid var(--color-line);padding:3.5rem 0}
.blog-hero-inner {display:grid;gap:2rem;align-items:center}
@media(min-width:850px){.blog-hero-inner{grid-template-columns:1.2fr .8fr}}
.blog-hero h1 {margin:.2rem 0 1rem}
.blog-hero p {max-width:55ch}
.blog-categories {display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;padding-top:2rem}
.blog-categories a {border:1px solid var(--color-line);border-radius:999px;padding:.35rem .85rem;background:white;text-decoration:none}
.blog-categories a:hover {border-color:var(--color-terracotta-dark)}
.blog-list {padding-top:3rem;padding-bottom:4rem}
.blog-card-image {display:block}
.blog-card .img-fixed {object-fit:cover}
.blog-card h3 {margin:.2rem 0}
.blog-card p {margin:.1rem 0}
.blog-read-more {margin-top:auto;font-weight:700}
.pagination {margin:1rem 0 3rem}
.pagination .nav-links {display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center}
.pagination .page-numbers {padding:.45rem .8rem;border:1px solid var(--color-line);border-radius:5px}
.pagination .current {background:var(--color-ink);color:white}

.topic-card {padding:0;overflow:hidden}
.topic-card img {display:block;width:100%;height:175px;object-fit:cover;object-position:center}
.topic-card-copy {display:block;padding:1rem 1.25rem}
.topic-card-copy strong {line-height:1.25;margin-bottom:.35rem}
.topic-card-copy > span {font-size:.9rem}
@media (min-width:1100px) {.topic-card-copy strong {font-size:1.1rem}}