/*
Theme Name: La Voz de la Abundancia
Theme URI: https://lavozdelaabundancia.com
Author: Ronald Rangel
Author URI: https://ronaldrangel.com.co
Description: Theme propio para La Voz de la Abundancia. Hub completo (landing + blog + tienda Gumroad + comunidad). Diseño fluido con clamp(), sin breakpoints, animaciones GSAP, paleta Aurora Terrosa. Requiere ACF Pro.
Version: 1.2.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lavoz
*/

/* ============================================================
   TOKENS — Aurora Terrosa
   Las fuentes y la escala se inyectan desde el Customizer
   como variables sobreescribibles (ver inc/customizer-output)
   ============================================================ */
:root{
  /* Paleta */
  --tierra:#1E1A16;
  --tierra-90:#2A2420;
  --terracota:#D4856A;
  --ambar:#E8C49A;
  --lino:#F2EDE6;
  --lino-2:#E7DFD4;

  /* Tipografía (defaults; el Customizer los sobreescribe) */
  --font-head:'Spectral', Georgia, serif;
  --font-body:'Spectral', Georgia, serif;
  --font-ui:'Syne', system-ui, sans-serif;
  --scale-ratio:1.32;     /* escala "Amplia" por defecto */
  --font-base:1.18rem;    /* cuerpo cómodo 40-65 */

  /* Escala fluida derivada (sin breakpoints) */
  --step--1:clamp(0.85rem, 0.80rem + 0.25vw, 0.95rem);
  --step-0:var(--font-base);
  --step-1:clamp(1.35rem, 1.10rem + 1.1vw, 1.9rem);
  --step-2:clamp(1.7rem, 1.25rem + 2.2vw, 2.9rem);
  --step-3:clamp(2.1rem, 1.4rem + 3.6vw, 4.2rem);
  --step-4:clamp(2.8rem, 1.6rem + 6vw, 6.8rem);

  /* Ritmo */
  --space-xs:clamp(0.5rem, 0.4rem + 0.5vw, 0.85rem);
  --space-s:clamp(0.9rem, 0.7rem + 1vw, 1.5rem);
  --space-m:clamp(1.5rem, 1rem + 2.5vw, 3rem);
  --space-l:clamp(3rem, 2rem + 5vw, 7rem);
  --space-xl:clamp(5rem, 3rem + 9vw, 12rem);

  --wrap:clamp(20rem, 92vw, 72rem);
  --wrap-narrow:clamp(18rem, 88vw, 44rem);
  --radius:clamp(0.6rem, 0.4rem + 0.6vw, 1rem);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--step-0);
  line-height:1.75;
  color:var(--tierra);
  background:var(--lino);
  font-weight:400;
  font-feature-settings:"liga" 1, "onum" 1;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:0.18em;}

/* Titulares */
h1,h2,h3,h4{
  font-family:var(--font-head);
  line-height:1.04;
  letter-spacing:-0.02em;
  text-wrap:balance;
  margin:0 0 var(--space-s);
  font-weight:300;
}
h1{font-size:var(--step-4);letter-spacing:-0.035em;}
h2{font-size:var(--step-3);}
h3{font-size:var(--step-2);}
h4{font-size:var(--step-1);}
h2.ui,h3.ui{font-family:var(--font-ui);font-weight:800;letter-spacing:-0.02em;}
p{margin:0 0 var(--space-s);max-width:62ch;}
em{font-style:italic;color:var(--terracota);}

.kicker{
  font-family:var(--font-ui);
  font-size:var(--step--1);
  font-weight:700;
  letter-spacing:0.25em;
  text-transform:uppercase;
  color:var(--terracota);
  display:inline-block;
  margin-bottom:var(--space-s);
}

/* Layout */
.wrap{width:var(--wrap);margin-inline:auto;}
.wrap-narrow{width:var(--wrap-narrow);margin-inline:auto;}
.section{padding-block:var(--space-l);position:relative;}
.section--dark{background:var(--tierra);color:var(--lino);}
.section--dark .kicker{color:var(--ambar);}
.section--linen{
  background:var(--lino);
  background-image:url(assets/img/textura.webp);
  background-size:480px;
  background-blend-mode:multiply;
}

/* Botones */
.btn{
  font-family:var(--font-ui);
  font-weight:700;
  font-size:var(--step--1);
  letter-spacing:0.04em;
  text-transform:uppercase;
  display:inline-flex;align-items:center;gap:0.6em;
  padding:0.95em 1.8em;
  border-radius:999px;
  border:1px solid transparent;
  text-decoration:none;
  cursor:pointer;
  transition:transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
  will-change:transform;
}
.btn--primary{background:var(--terracota);color:var(--tierra);}
.btn--primary:hover{transform:translateY(-2px);background:var(--ambar);}
.btn--ghost{background:transparent;border-color:currentColor;color:inherit;}
.btn--ghost:hover{background:var(--lino);color:var(--tierra);transform:translateY(-2px);}
.section--dark .btn--ghost:hover{background:var(--ambar);border-color:var(--ambar);}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;align-items:center;
  background:var(--tierra);
  overflow:clip;
}
.hero__bg{
  position:absolute;inset:0;
  background:url(assets/img/hero.webp) center right / cover no-repeat;
  will-change:transform;
}
.hero__veil{
  position:absolute;inset:0;
  background:linear-gradient(90deg, var(--tierra) 12%, rgba(30,26,22,0.55) 48%, transparent 78%);
}
.hero__inner{position:relative;z-index:2;padding-block:var(--space-l);}
.hero__title{
  color:var(--lino);
  font-weight:300;
  font-size:var(--step-4);
  margin-bottom:var(--space-m);
}
.hero__title em{color:var(--ambar);font-weight:400;}
.hero__sub{
  color:var(--lino);opacity:0.85;
  font-size:var(--step-1);font-weight:300;line-height:1.6;
  max-width:42ch;margin-bottom:var(--space-m);
}
.hero__cta{display:flex;gap:var(--space-s);flex-wrap:wrap;}
/* char-split: oculto inicial gestionado por JS, fallback visible si no hay JS */
.split-char{display:inline-block;will-change:transform,opacity;}

/* ============================================================
   GALERÍA MEDITACIONES
   ============================================================ */
.medi-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap:var(--space-m);
  margin-top:var(--space-m);
}
.medi-card{
  position:relative;
  display:flex;flex-direction:column;
  border-radius:var(--radius);overflow:hidden;cursor:pointer;
  background:var(--tierra-90);
  transition:transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease;
}
.medi-card:hover{transform:translateY(-6px);box-shadow:0 18px 50px rgba(30,26,22,.45);}
/* Thumbnail 16:9 (formato nativo de YouTube, sin huecos) */
.medi-card__media{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--tierra);}
.medi-card__thumb{position:absolute;inset:0;background:var(--tierra-90) center/cover no-repeat;transition:transform .6s cubic-bezier(.2,.7,.2,1);}
.medi-card:hover .medi-card__thumb{transform:scale(1.06);}
.medi-card__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top, rgba(30,26,22,.55), transparent 50%);
  opacity:0;transition:opacity .4s ease;
}
.medi-card:hover .medi-card__media::after{opacity:1;}
.medi-card__cat{
  position:absolute;top:0.9rem;left:0.9rem;z-index:3;
  font-family:var(--font-ui);font-size:0.6rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--tierra);background:var(--ambar);padding:0.35em 0.8em;border-radius:999px;
}
.medi-card__dur{
  position:absolute;bottom:0.9rem;right:0.9rem;z-index:3;
  display:inline-flex;align-items:center;gap:0.35em;
  font-family:var(--font-ui);font-size:0.7rem;font-weight:700;color:var(--lino);
  background:rgba(30,26,22,.6);padding:0.3em 0.7em;border-radius:999px;backdrop-filter:blur(4px);
}
.medi-card__dur svg{width:0.95em;height:0.95em;fill:none;stroke:currentColor;stroke-width:2;}
.medi-card__play{
  position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:4;
  width:clamp(3rem,5vw,3.8rem);height:clamp(3rem,5vw,3.8rem);
  display:grid;place-items:center;
  background:rgba(242,237,230,.95);border-radius:50%;
  opacity:0;transition:transform .35s ease, background .35s ease, opacity .35s ease;
}
.medi-card:hover .medi-card__play{opacity:1;transform:translate(-50%,-50%) scale(1);background:var(--ambar);}
.medi-card__play svg{width:40%;height:40%;fill:var(--tierra);margin-left:8%;}
.medi-card__body{padding:var(--space-s);}
.medi-card__title{font-family:var(--font-ui);font-weight:700;font-size:var(--step-0);letter-spacing:-0.01em;line-height:1.2;color:var(--lino);margin:0;}
.medi-card iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;z-index:5;}

/* ============================================================
   TIENDA GUMROAD
   ============================================================ */
.shop-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 32rem), 1fr));
  gap:var(--space-m);
  margin-top:var(--space-m);
  max-width:64rem;
}
.product{
  display:grid;
  grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);
  background:var(--lino);
  border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--lino-2);
  transition:transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease;
}
.product:hover{transform:translateY(-4px);box-shadow:0 16px 44px rgba(30,26,22,.14);}
.product__img{
  position:relative;
  background:var(--tierra-90) center/cover no-repeat;
  min-height:100%;
}
.product__img::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 40%, rgba(232,196,154,.28), transparent 70%);
}
.product__tag{
  position:absolute;bottom:1rem;left:1rem;z-index:2;
  font-family:var(--font-ui);font-size:0.6rem;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;
  color:var(--lino);background:rgba(30,26,22,.55);padding:0.35em 0.8em;border-radius:999px;backdrop-filter:blur(4px);
}
.product__body{padding:var(--space-m);display:flex;flex-direction:column;gap:var(--space-xs);min-width:0;}
.product__title{font-family:var(--font-head);font-size:var(--step-1);font-weight:400;margin:0;line-height:1.15;color:var(--tierra);}
.product__desc{font-size:var(--step--1);opacity:.75;line-height:1.55;margin:0;flex:1;color:var(--tierra);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;}
.product__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--space-s);margin-top:var(--space-xs);flex-wrap:wrap;}
.product__price{font-family:var(--font-ui);font-weight:800;font-size:var(--step-1);color:var(--terracota);}

/* ============================================================
   MURO DE MILAGROS
   ============================================================ */
.milagros{columns:clamp(1, 40vw, 3);column-gap:var(--space-m);margin-top:var(--space-m);}
.milagro{
  break-inside:avoid;margin-bottom:var(--space-m);
  background:var(--lino);border-radius:var(--radius);
  padding:var(--space-m);
  border-left:3px solid var(--terracota);
  box-shadow:0 2px 20px rgba(30,26,22,.06);
}
.milagro__text{font-family:var(--font-head);font-style:italic;font-size:var(--step-1);line-height:1.5;color:var(--tierra);margin:0 0 var(--space-s);}
.milagro__author{font-family:var(--font-ui);font-weight:700;font-size:var(--step--1);letter-spacing:0.08em;text-transform:uppercase;color:var(--terracota);}
.milagro__place{font-family:var(--font-ui);font-size:var(--step--1);opacity:.6;display:block;text-transform:none;letter-spacing:0;}

.milagro-form{
  margin-top:var(--space-m);background:var(--tierra-90);
  padding:var(--space-m);border-radius:var(--radius);
  max-width:40rem;
}
.milagro-form label{display:block;font-family:var(--font-ui);font-size:var(--step--1);letter-spacing:0.1em;text-transform:uppercase;color:var(--ambar);margin-bottom:0.4em;}
.milagro-form input,.milagro-form textarea{
  width:100%;padding:0.8em 1em;margin-bottom:var(--space-s);
  background:var(--lino);border:1px solid transparent;border-radius:calc(var(--radius)/1.5);
  font-family:var(--font-body);font-size:var(--step-0);color:var(--tierra);
}
.milagro-form input:focus,.milagro-form textarea:focus{outline:2px solid var(--terracota);outline-offset:1px;}
.milagro-form textarea{min-height:7rem;resize:vertical;}
.milagro-form__msg{font-family:var(--font-ui);font-size:var(--step--1);margin-top:var(--space-s);color:var(--ambar);}

/* Separador con silueta flotante */
.silueta-sep{
  position:relative;
  height:clamp(10rem,26vw,20rem);
  overflow:hidden;pointer-events:none;
  background:var(--tierra);
  display:grid;place-items:center;
}
.silueta-sep::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at center, rgba(212,133,106,.22), transparent 62%);
}
.silueta-sep img{
  position:relative;
  width:clamp(7rem,16vw,12rem);height:auto;
  opacity:.92;will-change:transform;
  filter:drop-shadow(0 0 40px rgba(212,133,106,.35));
}

/* Header / Footer */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(1rem,2vw,1.6rem) var(--space-m);
  transition:background .4s ease, padding .4s ease, box-shadow .4s ease;
  --header-fg:var(--lino);
}
.site-header.is-scrolled{
  background:rgba(30,26,22,.92);
  backdrop-filter:blur(12px);
  padding:clamp(0.7rem,1.3vw,1rem) var(--space-m);
  box-shadow:0 1px 0 rgba(242,237,230,.08);
  --header-fg:var(--lino);
}
.site-header.on-light:not(.is-scrolled){--header-fg:var(--tierra);}
.site-header__brand{font-family:var(--font-head);font-size:var(--step-1);color:var(--header-fg);text-decoration:none;font-weight:400;letter-spacing:-0.01em;transition:color .35s ease;}
.nav{display:flex;gap:var(--space-m);align-items:center;}
.nav a{font-family:var(--font-ui);font-size:var(--step--1);letter-spacing:0.08em;text-transform:uppercase;color:var(--header-fg);text-decoration:none;opacity:.9;transition:opacity .2s ease,color .35s ease;}
.nav a:hover{opacity:1;color:var(--terracota);}
.site-header.is-scrolled .nav a:hover{color:var(--ambar);}
.nav__toggle{display:none;background:none;border:0;color:var(--header-fg);font-size:1.6rem;cursor:pointer;transition:color .35s ease;}

.site-footer{background:var(--tierra);color:var(--lino);padding-block:var(--space-l);}
.site-footer .kicker{color:var(--ambar);}
.site-footer__cierre{font-family:var(--font-head);font-style:italic;font-size:var(--step-2);color:var(--ambar);margin-top:var(--space-m);}
.site-footer__links{display:flex;gap:var(--space-m);flex-wrap:wrap;margin-top:var(--space-m);}
.site-footer__links a{font-family:var(--font-ui);font-size:var(--step--1);letter-spacing:0.08em;text-transform:uppercase;color:var(--lino);text-decoration:none;opacity:.8;}
.site-footer__links a:hover{opacity:1;color:var(--ambar);}

/* Blog */
.post-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,22rem),1fr));gap:var(--space-m);margin-top:var(--space-m);}
.post-card{background:var(--lino);border:1px solid var(--lino-2);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;}
.post-card__img{aspect-ratio:16/9;background:var(--lino-2) center/cover no-repeat;}
.post-card__body{padding:var(--space-m);display:flex;flex-direction:column;gap:var(--space-xs);}
.post-card__title{font-family:var(--font-head);font-size:var(--step-1);font-weight:400;margin:0;line-height:1.2;}
.post-card__title a{text-decoration:none;}
.post-card__excerpt{font-size:var(--step--1);opacity:.82;margin:0;}
.entry-content{max-width:var(--wrap-narrow);margin-inline:auto;}
.entry-content p,.entry-content li{font-size:var(--step-0);}
.entry-content h2,.entry-content h3{margin-top:var(--space-m);}

/* Reveal base (CSS) */
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1);}
[data-reveal].is-in{opacity:1;transform:none;}

/* Responsive sin breakpoints: solo el menú móvil necesita un punto de corte funcional */
@media (max-width:48rem){
  .nav{
    position:fixed;inset:0 0 0 auto;width:min(78vw,20rem);
    flex-direction:column;justify-content:center;align-items:flex-start;
    padding:var(--space-l) var(--space-m);gap:var(--space-m);
    background:var(--tierra);transform:translateX(100%);transition:transform .4s cubic-bezier(.2,.7,.2,1);
  }
  .nav.is-open{transform:none;}
  .nav__toggle{display:block;z-index:60;position:relative;}
}

/* Accesibilidad: movimiento reducido */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
  [data-reveal]{opacity:1;transform:none;}
}

/* ============================================================
   ARREGLOS PRO v1.1
   ============================================================ */
/* Anclajes no quedan tapados por el header fijo */
[id]{scroll-margin-top:5rem;}

/* Botón de producto y pie de tarjeta */
.product .btn{align-self:flex-start;}

/* La primera sección tras el hero respira; blog/page con offset correcto */
.section:first-of-type{padding-top:var(--space-l);}
.page-head{padding-top:calc(clamp(4rem,9vw,7rem) + var(--space-l));}

/* Tienda en una sola columna cuando el contenedor es estrecho */
@media (max-width:38rem){
  .product{grid-template-columns:1fr;}
  .product__img{aspect-ratio:16/10;}
}

/* ============================================================
   LUZ QUE SIGUE EL CURSOR (spotlight)
   ============================================================ */
.hero{--mx:70%;--my:35%;}
.hero__glow{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(circle at var(--mx) var(--my), rgba(232,196,154,.18), rgba(212,133,106,.08) 22%, transparent 45%);
  transition:background .12s linear;
  mix-blend-mode:screen;
}
/* Resplandor en tarjetas de meditacion al pasar el cursor */
.medi-card{--cx:50%;--cy:50%;}
.medi-card__media::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(circle at var(--cx) var(--cy), rgba(232,196,154,.35), transparent 40%);
  opacity:0;transition:opacity .3s ease;
}
.medi-card:hover .medi-card__media::before{opacity:1;}
@media (prefers-reduced-motion:reduce){
  .hero__glow,.medi-card__media::before{display:none;}
}