/* ======================================================
   AYUDA ESPIRITUAL EFECTIVA — Premium Stylesheet v2
   Editorial · Animado · Cinematográfico
   ====================================================== */

/* ============== TOKENS ============== */
:root{
  --cream:        #f5efe2;
  --cream-pure:   #faf6ec;
  --paper:        #ebe1cb;
  --beige:        #ddc9a4;
  --sand:         #c9b489;
  --gold:         #c8a45c;
  --gold-soft:    #d9bf83;
  --gold-deep:    #8a6f30;
  --gold-glow:    rgba(200,164,92,.25);
  --brown:        #2a1a0e;
  --brown-soft:   #5a4332;
  --sienna:       #b06a3a;
  --burgundy:     #6e2e2c;
  --ink:          #1a1108;

  --text:         #2a1a0e;
  --text-soft:    #5a4332;
  --text-mute:    #8a7659;
  --line:         rgba(42,26,14,.12);
  --line-soft:    rgba(42,26,14,.06);
  --line-gold:    rgba(200,164,92,.3);

  --whatsapp:     #25D366;
  --whatsapp-d:   #1ea954;

  --serif:  'Cormorant Garamond', 'Times New Roman', serif;
  --sans:   'Manrope', system-ui, -apple-system, sans-serif;
  --mono:   ui-monospace, 'SF Mono', Menlo, monospace;

  --maxw:        1280px;
  --maxw-narrow: 760px;
  --gutter:      max(24px, 4vw);
  --radius:      18px;
  --radius-sm:   10px;

  --ease:        cubic-bezier(.2, .7, .2, 1);
  --ease-out:    cubic-bezier(.16, 1, .3, 1);

  --shadow-sm:   0 2px 8px -2px rgba(42,26,14,.08);
  --shadow:      0 24px 60px -28px rgba(42,26,14,.25);
  --shadow-lg:   0 40px 80px -30px rgba(42,26,14,.35);
  --shadow-gold: 0 20px 50px -20px var(--gold-glow);
}

/* ============== RESET ============== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--sans);
  font-weight:400;
  font-size:16px;
  line-height:1.65;
  color:var(--text);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{max-width:100%; display:block; height:auto}
a{color:inherit; text-decoration:none}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; padding:0}
input,textarea,select{font-family:inherit; font-size:inherit; color:inherit}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:1;
  background-image:
    radial-gradient(1100px 700px at 85% -10%, rgba(200,164,92,.18), transparent 55%),
    radial-gradient(800px 600px at -10% 30%, rgba(176,106,58,.07), transparent 60%),
    radial-gradient(900px 500px at 50% 100%, rgba(110,46,44,.06), transparent 60%);
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:2;
  opacity:.4;
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.16  0 0 0 0 0.10  0 0 0 0 0.05  0 0 0 0.4 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode:multiply;
}

/* ============== CUSTOM CURSOR ============== */
.cursor-dot, .cursor-ring{
  position:fixed; top:0; left:0;
  pointer-events:none; z-index:9999;
  transform:translate(-50%,-50%);
  will-change:transform;
  display:none;
}
@media (hover: hover) and (pointer: fine){
  body:not(.no-cursor) .cursor-dot,
  body:not(.no-cursor) .cursor-ring{display:block}
  body:not(.no-cursor),
  body:not(.no-cursor) a,
  body:not(.no-cursor) button{cursor:none}
}
.cursor-dot{
  width:6px; height:6px;
  border-radius:50%;
  background:var(--gold);
  transition:opacity .25s, background .25s;
}
.cursor-ring{
  width:36px; height:36px;
  border:1px solid var(--gold);
  border-radius:50%;
  transition:width .35s var(--ease), height .35s var(--ease), background .25s, opacity .25s;
}
body.cursor-hover .cursor-ring{
  width:64px; height:64px;
  background:rgba(200,164,92,.08);
}
body.cursor-hover .cursor-dot{opacity:0}

/* ============== LOADER ============== */
.preloader{
  position:fixed; inset:0;
  background:var(--cream);
  z-index:99999;
  display:grid; place-items:center;
  transition:opacity .8s var(--ease), visibility .8s;
}
.preloader.done{opacity:0; visibility:hidden}
.preloader-mark{
  font-family:var(--serif);
  font-size:3rem;
  font-style:italic;
  color:var(--gold-deep);
  position:relative;
}
.preloader-mark::after{
  content:"";
  position:absolute;
  bottom:-10px; left:50%;
  width:60px; height:1px;
  background:var(--gold);
  transform:translateX(-50%) scaleX(0);
  animation:loader-line 1.2s var(--ease) infinite;
}
@keyframes loader-line{
  0%{transform:translateX(-50%) scaleX(0); transform-origin:left}
  50%{transform:translateX(-50%) scaleX(1); transform-origin:left}
  51%{transform:translateX(-50%) scaleX(1); transform-origin:right}
  100%{transform:translateX(-50%) scaleX(0); transform-origin:right}
}

/* ============== TIPOGRAFÍA ============== */
h1,h2,h3,h4,h5{
  font-family:var(--serif);
  font-weight:500;
  letter-spacing:-.015em;
  line-height:1.08;
  color:var(--brown);
  margin:0 0 .4em;
}
h1{font-size:clamp(2.8rem, 8vw, 6rem); font-weight:400; letter-spacing:-.025em; line-height:1.02}
h2{font-size:clamp(2rem, 4.5vw, 3.6rem); line-height:1.06}
h3{font-size:clamp(1.4rem, 2.5vw, 2rem)}
h4{font-size:1.15rem}
p{margin:0 0 1em}

.eyebrow{
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:.32em;
  font-size:.7rem;
  font-weight:500;
  color:var(--gold-deep);
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin-bottom:1.4rem;
}
.eyebrow::before{content:""; display:inline-block; width:24px; height:1px; background:var(--gold)}
.eyebrow.center::after{content:""; display:inline-block; width:24px; height:1px; background:var(--gold)}

.lead{
  font-size:clamp(1.05rem, 1.4vw, 1.2rem);
  color:var(--text-soft);
  max-width:62ch;
  line-height:1.65;
}
em, .italic-accent{font-style:italic; color:var(--gold-deep)}

.display-quote{
  font-size:clamp(1.6rem, 3.5vw, 3rem);
  font-style:italic;
  font-weight:400;
  line-height:1.25;
  color:var(--brown);
}

/* Word reveal */
.word-mask{display:inline-block; overflow:hidden; vertical-align:bottom}
.word-mask > span{
  display:inline-block;
  transform:translateY(110%);
  animation:wordUp 1s var(--ease-out) forwards;
}
@keyframes wordUp{
  0%{transform:translateY(110%)}
  100%{transform:translateY(0)}
}
/* Fallback: tras 2.5s, si por algo no se ejecutó la animación, las palabras serán visibles */
.word-mask > span{
  animation:wordUp 1s var(--ease-out) forwards, wordFallback 0s 2.5s forwards;
}
@keyframes wordFallback{
  to{transform:translateY(0)}
}

/* ============== LAYOUT ============== */
.container{max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); position:relative; z-index:3}
.container-narrow{max-width:var(--maxw-narrow); margin:0 auto; padding:0 var(--gutter); position:relative; z-index:3}
section{padding:clamp(80px, 11vw, 160px) 0; position:relative; z-index:3}

/* ============== BUTTONS ============== */
.btn{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:16px 32px;
  border-radius:999px;
  font-weight:600;
  font-size:.92rem;
  font-family:var(--sans);
  border:1px solid transparent;
  position:relative;
  overflow:hidden;
  transition:transform .4s var(--ease), color .3s, background .3s, border-color .3s, box-shadow .4s;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn svg{width:18px; height:18px; flex-shrink:0}

.btn-primary{
  background:var(--whatsapp);
  color:#fff;
  box-shadow:0 14px 30px -10px rgba(37,211,102,.55);
}
.btn-primary:hover{
  background:var(--whatsapp-d);
  box-shadow:0 18px 36px -10px rgba(37,211,102,.65);
  color:#fff;
}
.btn-dark{background:var(--brown); color:var(--cream-pure)}
.btn-dark:hover{background:var(--ink); color:#fff}
.btn-gold{
  background:linear-gradient(135deg, var(--gold), var(--gold-deep));
  color:var(--cream-pure);
  box-shadow:0 14px 30px -10px var(--gold-glow);
}
.btn-gold:hover{background:var(--gold-deep)}
.btn-ghost{border:1px solid var(--brown); color:var(--brown)}
.btn-ghost:hover{background:var(--brown); color:var(--cream-pure)}

.magnetic{display:inline-block; transition:transform .4s var(--ease); will-change:transform}

.link-arrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--gold-deep);
  font-size:.88rem;
  font-weight:600;
  letter-spacing:.05em;
  position:relative;
  padding-bottom:4px;
}
.link-arrow::before{
  content:"";
  position:absolute;
  bottom:0; left:0;
  width:100%; height:1px;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .5s var(--ease-out);
}
.link-arrow:hover::before{transform:scaleX(1); transform-origin:left}
.link-arrow svg{width:16px; height:16px; transition:transform .4s var(--ease)}
.link-arrow:hover svg{transform:translate(4px, -4px)}

/* ============== NAVIGATION ============== */
.nav{
  position:fixed; top:0; left:0; right:0;
  z-index:100;
  padding:18px 0;
  transition:background .4s var(--ease), padding .4s var(--ease), border-color .4s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(245,239,226,.85);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  padding:14px 0;
  border-bottom-color:var(--line-soft);
}
.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--gutter);
  gap:24px;
}
.brand{
  display:flex;
  align-items:center;
  gap:14px;
  font-family:var(--serif);
  font-size:1.4rem;
  font-weight:500;
  color:var(--brown);
}
.brand-mark{
  width:42px; height:42px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%, var(--gold-soft), var(--gold) 55%, var(--gold-deep));
  display:grid; place-items:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3), 0 0 0 1px var(--gold-deep), 0 8px 20px -8px var(--gold-glow);
  font-family:var(--serif);
  font-style:italic;
  font-size:1.05rem;
  color:var(--cream-pure);
  font-weight:600;
}
.brand-name em{font-style:italic; color:var(--gold-deep); font-weight:400}

.nav-links{display:flex; align-items:center; gap:4px}
.nav-links a:not(.nav-cta){
  font-size:.9rem;
  color:var(--text-soft);
  padding:10px 16px;
  border-radius:8px;
  transition:color .25s, background .25s;
  position:relative;
}
.nav-links a:not(.nav-cta)::after{
  content:"";
  position:absolute;
  bottom:6px; left:50%;
  width:0; height:1px;
  background:var(--gold);
  transition:width .35s var(--ease), left .35s var(--ease);
}
.nav-links a:not(.nav-cta):hover,
.nav-links a:not(.nav-cta).active{color:var(--brown)}
.nav-links a:not(.nav-cta):hover::after,
.nav-links a:not(.nav-cta).active::after{width:18px; left:calc(50% - 9px)}
.nav-cta{
  margin-left:8px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:11px 20px;
  border-radius:999px;
  background:var(--brown);
  color:var(--cream-pure) !important;
  font-weight:600;
  font-size:.85rem;
  transition:all .3s var(--ease);
  box-shadow:0 8px 20px -10px rgba(42,26,14,.4);
}
.nav-cta:hover{
  background:var(--whatsapp);
  transform:translateY(-1px);
  box-shadow:0 12px 24px -8px rgba(37,211,102,.5);
}

.nav-toggle{
  display:none;
  width:44px; height:44px;
  border-radius:10px;
  background:transparent;
  position:relative;
}
.nav-toggle span{
  position:absolute;
  left:11px; right:11px;
  height:1.5px;
  background:var(--brown);
  border-radius:2px;
  transition:all .35s var(--ease);
}
.nav-toggle span:nth-child(1){top:15px}
.nav-toggle span:nth-child(2){top:21px}
.nav-toggle span:nth-child(3){top:27px}
.nav-toggle.open span:nth-child(1){top:21px; transform:rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){top:21px; transform:rotate(-45deg)}

@media (max-width:920px){
  .nav-toggle{display:block}
  .nav-links{
    position:fixed;
    top:0; right:0; bottom:0; left:0;
    flex-direction:column;
    justify-content:center;
    gap:20px;
    padding:80px 24px 40px;
    background:var(--cream-pure);
    transform:translateX(100%);
    transition:transform .5s var(--ease);
  }
  .nav-links.open{transform:none}
  .nav-links a:not(.nav-cta){font-family:var(--serif); font-size:2rem; color:var(--brown); padding:8px 16px}
  .nav-cta{margin-top:16px; padding:14px 28px; font-size:.95rem}
}

/* ============== HERO ============== */
.hero{
  min-height:100vh;
  padding:160px 0 80px;
  position:relative;
  display:flex;
  align-items:center;
  overflow:hidden;
}
.hero-bg-deco{position:absolute; inset:0; pointer-events:none; z-index:1}
.hero-bg-deco::before{
  content:"";
  position:absolute;
  top:10%; right:-10%;
  width:60vw; height:60vw;
  background:radial-gradient(circle, var(--gold-glow), transparent 60%);
  filter:blur(60px);
  animation:hero-pulse 8s ease-in-out infinite;
}
.hero-bg-deco::after{
  content:"";
  position:absolute;
  bottom:-20%; left:-15%;
  width:50vw; height:50vw;
  background:radial-gradient(circle, rgba(176,106,58,.1), transparent 60%);
  filter:blur(60px);
  animation:hero-pulse 11s ease-in-out infinite reverse;
}
@keyframes hero-pulse{
  0%,100%{opacity:.7; transform:scale(1)}
  50%{opacity:1; transform:scale(1.1)}
}
.hero-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:80px;
  align-items:center;
  position:relative;
  z-index:3;
}
@media (max-width:980px){.hero-grid{grid-template-columns:1fr; gap:60px}}

.hero-meta{
  display:flex;
  gap:24px;
  margin-bottom:2rem;
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--text-mute);
  flex-wrap:wrap;
}
.hero-meta span{display:inline-flex; align-items:center; gap:8px}
.hero-meta span + span::before{content:"·"; color:var(--gold)}

.hero h1 .accent{font-style:italic; color:var(--gold-deep); font-weight:400}
.hero h1 .accent-line{display:inline-block; position:relative}
.hero h1 .accent-line::after{
  content:"";
  position:absolute;
  bottom:.05em; left:0; right:0;
  height:1px;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:left;
  animation:lineDraw 1.2s var(--ease-out) 1.2s forwards;
}
@keyframes lineDraw{to{transform:scaleX(1)}}

.hero-sub{
  margin-top:2rem;
  max-width:46ch;
  font-size:1.15rem;
  color:var(--text-soft);
  line-height:1.6;
  opacity:0;
  animation:fadeUp 1s var(--ease-out) .8s forwards;
}
@keyframes fadeUp{from{opacity:0; transform:translateY(20px)} to{opacity:1; transform:none}}

.hero-actions{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin-top:2.5rem;
  opacity:0;
  animation:fadeUp 1s var(--ease-out) 1s forwards;
}
.hero-trust{
  display:flex;
  gap:32px;
  margin-top:3.5rem;
  flex-wrap:wrap;
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--text-mute);
  opacity:0;
  animation:fadeUp 1s var(--ease-out) 1.2s forwards;
}
.hero-trust span{display:inline-flex; align-items:center; gap:8px}
.hero-trust span::before{
  content:"";
  width:5px; height:5px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 10px var(--gold);
}

.hero-visual{
  position:relative;
  aspect-ratio:1/1.2;
  max-width:520px;
  margin-left:auto;
  opacity:0;
  animation:fadeUp 1.2s var(--ease-out) .4s forwards;
}
.hero-orb-bg{
  position:absolute;
  inset:0;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--gold-soft) 0%, var(--gold) 30%, var(--sienna) 70%, var(--burgundy) 100%);
  filter:blur(2px);
  animation:hero-rotate 30s linear infinite;
  box-shadow:inset 0 0 80px rgba(0,0,0,.2), 0 50px 100px -30px rgba(110,46,44,.4);
}
@keyframes hero-rotate{to{transform:rotate(360deg)}}
.hero-orb-glow{
  position:absolute;
  inset:-15%;
  border-radius:50%;
  background:radial-gradient(circle, transparent 50%, var(--gold-glow) 65%, transparent 80%);
  filter:blur(30px);
  animation:hero-pulse 6s ease-in-out infinite;
}
.hero-constellation{position:absolute; inset:0; z-index:2; pointer-events:none}
.hero-constellation circle{
  fill:var(--cream-pure);
  filter:drop-shadow(0 0 6px var(--cream-pure));
  animation:twinkle 3s ease-in-out infinite;
}
.hero-constellation circle:nth-child(2n){animation-delay:.6s}
.hero-constellation circle:nth-child(3n){animation-delay:1.2s}
.hero-constellation circle:nth-child(4n){animation-delay:1.8s}
@keyframes twinkle{
  0%,100%{opacity:.4; transform:scale(1)}
  50%{opacity:1; transform:scale(1.4)}
}
.hero-constellation line{
  stroke:rgba(245,239,226,.4);
  stroke-width:.5;
  stroke-dasharray:200;
  stroke-dashoffset:200;
  animation:lineFlow 3s var(--ease-out) 1s forwards;
}
@keyframes lineFlow{to{stroke-dashoffset:0}}

.hero-card{
  position:absolute;
  padding:18px 22px;
  background:rgba(250,246,236,.92);
  border:1px solid var(--line);
  border-radius:14px;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:var(--shadow);
  font-size:.85rem;
  z-index:4;
}
.hero-card.float-1{top:5%; left:-10%; max-width:240px; animation:floatY 6s ease-in-out infinite}
.hero-card.float-2{bottom:8%; right:-8%; max-width:240px; animation:floatY 7s ease-in-out infinite reverse}
@keyframes floatY{0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)}}
.hero-card .label{
  font-family:var(--mono);
  color:var(--gold-deep);
  font-size:.65rem;
  letter-spacing:.25em;
  text-transform:uppercase;
  margin-bottom:8px;
  font-weight:600;
}
.hero-card .text{
  color:var(--brown);
  font-family:var(--serif);
  font-size:1.1rem;
  line-height:1.3;
  font-style:italic;
}

.scroll-hint{
  position:absolute;
  bottom:30px; left:50%;
  transform:translateX(-50%);
  font-family:var(--mono);
  font-size:.65rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--text-mute);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  z-index:5;
  opacity:0;
  animation:fadeUp 1s var(--ease-out) 1.6s forwards;
}
.scroll-hint::after{
  content:"";
  width:1px; height:50px;
  background:linear-gradient(180deg, var(--gold), transparent);
  animation:scroll-down 2s ease-in-out infinite;
}
@keyframes scroll-down{
  0%{transform:scaleY(0); transform-origin:top}
  50%{transform:scaleY(1); transform-origin:top}
  51%{transform:scaleY(1); transform-origin:bottom}
  100%{transform:scaleY(0); transform-origin:bottom}
}

/* ============== MARQUEE ============== */
.marquee{
  border-block:1px solid var(--line);
  background:var(--paper);
  padding:22px 0;
  overflow:hidden;
  position:relative;
  z-index:3;
}
.marquee-track{
  display:flex;
  white-space:nowrap;
  animation:marquee 35s linear infinite;
  font-family:var(--serif);
  font-style:italic;
  font-size:1.4rem;
  color:var(--brown);
}
.marquee-track > span{display:inline-flex; align-items:center; gap:50px; padding-right:50px}
.marquee-track > span::after{content:"✦"; color:var(--gold); font-size:1rem}
@keyframes marquee{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* ============== SECTION HEAD ============== */
.sect-head{max-width:780px; margin:0 auto clamp(60px, 7vw, 90px); text-align:center}
.sect-head.left{margin-left:0; text-align:left}
.sect-head h2{margin-bottom:.4em}
.sect-head h2 em{color:var(--gold-deep); font-style:italic}
.sect-head .lead{margin:0 auto}
.sect-head.left .lead{margin:0}
.divider{display:flex; align-items:center; justify-content:center; gap:14px; margin:0 auto 2rem; max-width:240px}
.divider::before,.divider::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold-deep), transparent);
}
.divider svg{width:24px; height:24px; color:var(--gold)}

/* ============== STORY (sticky) ============== */
.story{position:relative; background:var(--cream-pure)}
.story-grid{display:grid; grid-template-columns:1fr 1.3fr; gap:80px; align-items:start}
@media (max-width:980px){.story-grid{grid-template-columns:1fr; gap:40px}}
.story-sticky{position:sticky; top:140px}
.story-sticky h2{font-size:clamp(2.2rem, 4.5vw, 3.4rem)}
.story-items{display:flex; flex-direction:column; gap:8px}
.story-item{padding:36px 0; border-bottom:1px solid var(--line)}
.story-item:first-child{padding-top:0}
.story-item:last-child{border:none; padding-bottom:0}
.story-item-head{display:flex; align-items:baseline; gap:18px; margin-bottom:14px}
.story-num{font-family:var(--serif); font-style:italic; color:var(--gold-deep); font-size:1.4rem; flex-shrink:0}
.story-item h3{font-size:clamp(1.4rem, 2.5vw, 1.9rem); margin:0}
.story-item p{color:var(--text-soft); font-size:1rem; line-height:1.7; margin:0 0 0 38px; max-width:54ch}

/* ============== SVC CARDS ============== */
.svc-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:24px}
@media (max-width:980px){.svc-grid{grid-template-columns:1fr}}
.svc{
  position:relative;
  padding:48px 36px;
  background:var(--cream-pure);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  transition:transform .6s var(--ease), border-color .4s, box-shadow .6s;
  isolation:isolate;
}
.svc::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(400px 300px at var(--mx,50%) var(--my,50%), var(--gold-glow), transparent 60%);
  opacity:0;
  transition:opacity .5s;
  pointer-events:none;
  z-index:-1;
}
.svc:hover{transform:translateY(-6px); border-color:var(--gold); box-shadow:var(--shadow)}
.svc:hover::before{opacity:1}
.svc-num{
  font-family:var(--serif);
  font-style:italic;
  color:var(--gold-deep);
  font-size:1rem;
  display:block;
  margin-bottom:32px;
}
.svc-icon{
  position:absolute;
  top:32px; right:32px;
  width:60px; height:60px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--gold-soft), var(--gold));
  display:grid; place-items:center;
  color:var(--brown);
  font-size:1.4rem;
  font-family:var(--serif);
  opacity:.15;
  transition:opacity .4s, transform .6s var(--ease);
}
.svc:hover .svc-icon{opacity:1; transform:rotate(15deg)}
.svc h3{font-size:1.55rem; margin-bottom:.7em; position:relative; z-index:1}
.svc p{color:var(--text-soft); font-size:.95rem; margin:0 0 28px; line-height:1.65}

/* ============== PROCESS / TIMELINE ============== */
.process{background:var(--paper); position:relative}
.process-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:24px;
  margin-top:60px;
}
@media (max-width:980px){.process-grid{grid-template-columns:repeat(2, 1fr)}}
@media (max-width:560px){.process-grid{grid-template-columns:1fr}}
.process-step{
  position:relative;
  padding:40px 28px 32px;
  background:var(--cream-pure);
  border:1px solid var(--line);
  border-radius:var(--radius);
  transition:all .4s var(--ease);
}
.process-step:hover{border-color:var(--gold); transform:translateY(-4px); box-shadow:var(--shadow-sm)}
.process-step-num{
  position:absolute;
  top:-24px; left:28px;
  width:48px; height:48px;
  border-radius:50%;
  background:var(--brown);
  color:var(--cream-pure);
  display:grid; place-items:center;
  font-family:var(--serif);
  font-style:italic;
  font-size:1.2rem;
  border:4px solid var(--paper);
  transition:background .4s, color .4s;
}
.process-step:hover .process-step-num{background:var(--gold); color:var(--brown)}
.process-step h4{font-family:var(--serif); font-size:1.3rem; margin:8px 0 12px; color:var(--brown)}
.process-step p{font-size:.92rem; color:var(--text-soft); margin:0; line-height:1.6}

/* ============== QUIZ ============== */
.quiz-section{background:var(--cream-pure); position:relative}
.quiz-wrap{
  max-width:780px;
  margin:0 auto;
  position:relative;
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(36px, 5vw, 64px);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.quiz-wrap::before{
  content:"";
  position:absolute;
  top:-100px; right:-100px;
  width:300px; height:300px;
  background:radial-gradient(circle, var(--gold-glow), transparent 70%);
  pointer-events:none;
}
.quiz-progress{display:flex; gap:8px; margin-bottom:36px; position:relative; z-index:1}
.quiz-progress span{
  flex:1; height:3px;
  border-radius:3px;
  background:var(--line);
  position:relative;
  overflow:hidden;
}
.quiz-progress span::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, var(--gold), var(--gold-deep));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .5s var(--ease-out);
}
.quiz-progress span.active::after{transform:scaleX(1)}
.quiz-step{display:none; position:relative; z-index:1}
.quiz-step.active{display:block; animation:quiz-in .6s var(--ease-out)}
@keyframes quiz-in{from{opacity:0; transform:translateX(20px)} to{opacity:1; transform:none}}
.quiz-step-label{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--gold-deep);
  margin-bottom:16px;
  display:inline-block;
}
.quiz-step h3{font-size:clamp(1.6rem, 3vw, 2.1rem); margin-bottom:.4em}
.quiz-step > p{color:var(--text-soft); margin:0 0 32px; font-size:1rem}
.quiz-options{display:grid; gap:10px}
.quiz-options button{
  text-align:left;
  padding:18px 22px;
  background:var(--cream-pure);
  border:1px solid var(--line);
  border-radius:12px;
  color:var(--text);
  font-size:.96rem;
  transition:all .3s var(--ease);
  position:relative;
  overflow:hidden;
}
.quiz-options button:hover{border-color:var(--gold); transform:translateX(4px)}
.quiz-options button.selected{
  border-color:var(--gold);
  background:linear-gradient(135deg, rgba(200,164,92,.15), rgba(200,164,92,.05));
  color:var(--brown);
  font-weight:500;
}
.quiz-options button.selected::after{
  content:"✓";
  position:absolute;
  right:22px; top:50%;
  transform:translateY(-50%);
  color:var(--gold-deep);
  font-weight:700;
}
.quiz-input{
  width:100%;
  padding:16px 20px;
  background:var(--cream-pure);
  border:1px solid var(--line);
  border-radius:12px;
  font-size:.95rem;
  margin-bottom:14px;
  transition:border-color .25s, box-shadow .25s;
}
.quiz-input:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 4px var(--gold-glow);
}
.quiz-nav{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:36px}
.quiz-back{color:var(--text-mute); font-size:.88rem; padding:10px 18px; border-radius:8px}
.quiz-back:hover{color:var(--brown); background:var(--paper)}
.quiz-back:disabled{opacity:.3; cursor:not-allowed}
.quiz-final{text-align:center}
.quiz-final-icon{
  width:80px; height:80px;
  margin:0 auto 28px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%, var(--gold-soft), var(--gold) 60%, var(--gold-deep));
  display:grid; place-items:center;
  color:var(--cream-pure);
  font-size:2rem;
  font-family:var(--serif);
  font-style:italic;
  box-shadow:0 0 40px -8px var(--gold-glow);
  animation:final-spin .8s var(--ease-out);
}
@keyframes final-spin{
  from{transform:rotate(-180deg) scale(0); opacity:0}
  to{transform:none; opacity:1}
}
.quiz-disclaimer{
  font-size:.75rem;
  color:var(--text-mute);
  margin-top:18px;
  letter-spacing:.05em;
  font-family:var(--mono);
}

/* ============== STATEMENT ============== */
.statement{
  background:var(--brown);
  color:var(--cream-pure);
  padding:clamp(100px, 12vw, 160px) 0;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.statement::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(800px 400px at 50% 0%, rgba(200,164,92,.15), transparent 70%),
    radial-gradient(600px 400px at 50% 100%, rgba(110,46,44,.3), transparent 70%);
}
.statement .container{position:relative; z-index:2}
.statement .eyebrow{color:var(--gold)}
.statement .eyebrow::before, .statement .eyebrow.center::after{background:var(--gold)}
.statement-text{
  font-family:var(--serif);
  font-size:clamp(1.8rem, 3.8vw, 3.2rem);
  font-style:italic;
  font-weight:400;
  line-height:1.3;
  max-width:24ch;
  margin:0 auto;
  color:var(--cream-pure);
}
.statement-text em{color:var(--gold-soft); font-style:italic}
.statement-author{
  margin-top:40px;
  font-family:var(--mono);
  font-size:.75rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--gold-soft);
  opacity:.8;
}

/* ============== TESTIMONIALS ============== */
.testimonials-section{background:var(--cream-pure)}
.testi-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:24px}
@media (max-width:980px){.testi-grid{grid-template-columns:1fr}}
.testi{
  position:relative;
  padding:40px 36px 32px;
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:var(--radius);
  display:flex;
  flex-direction:column;
  gap:20px;
  transition:transform .5s var(--ease), box-shadow .5s;
}
.testi:hover{transform:translateY(-4px); box-shadow:var(--shadow-sm)}
.testi-quote{
  position:absolute;
  top:14px; right:24px;
  font-family:var(--serif);
  font-size:5rem;
  font-style:italic;
  color:var(--gold);
  opacity:.18;
  line-height:.5;
  pointer-events:none;
}
.testi .stars{color:var(--gold); letter-spacing:3px; font-size:.9rem}
.testi blockquote{
  margin:0;
  font-family:var(--serif);
  font-style:italic;
  font-size:1.18rem;
  line-height:1.45;
  color:var(--brown);
}
.testi .author{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:auto;
  padding-top:20px;
  border-top:1px solid var(--line-soft);
}
.testi .avatar{
  width:46px; height:46px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--sienna), var(--gold));
  display:grid; place-items:center;
  font-family:var(--serif);
  font-weight:500;
  color:var(--cream-pure);
  font-size:1.1rem;
  font-style:italic;
}
.testi .name{font-size:.92rem; font-weight:600; color:var(--brown)}
.testi .meta{
  font-size:.7rem;
  color:var(--text-mute);
  font-family:var(--mono);
  letter-spacing:.1em;
  text-transform:uppercase;
}

/* ============== FAQ ============== */
.faq-list{max-width:840px; margin:0 auto}
.faq{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;
  cursor:pointer;
  padding:28px 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  font-family:var(--serif);
  font-size:clamp(1.2rem, 2vw, 1.5rem);
  font-weight:500;
  color:var(--brown);
  transition:color .3s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--gold-deep)}
.faq-toggle{
  width:36px; height:36px;
  border-radius:50%;
  border:1px solid var(--line);
  display:grid; place-items:center;
  flex-shrink:0;
  transition:all .3s;
  position:relative;
}
.faq-toggle::before, .faq-toggle::after{content:""; position:absolute; background:var(--brown)}
.faq-toggle::before{width:14px; height:1px}
.faq-toggle::after{width:1px; height:14px; transition:transform .35s var(--ease)}
.faq[open] .faq-toggle{background:var(--gold); border-color:var(--gold)}
.faq[open] .faq-toggle::before, .faq[open] .faq-toggle::after{background:var(--cream-pure)}
.faq[open] .faq-toggle::after{transform:scaleY(0)}
.faq-body{padding:0 0 32px; color:var(--text-soft); max-width:62ch; font-size:1rem; line-height:1.7}
.faq-body strong{color:var(--brown); font-weight:600}

/* ============== FINAL CTA ============== */
.final-cta{
  text-align:center;
  background:
    radial-gradient(700px 350px at 50% 50%, rgba(200,164,92,.2), transparent 70%),
    var(--paper);
  border-block:1px solid var(--line);
  position:relative;
  overflow:hidden;
}
.final-cta::before{
  content:"";
  position:absolute;
  top:-200px; left:50%;
  transform:translateX(-50%);
  width:800px; height:800px;
  background:radial-gradient(circle, var(--gold-glow), transparent 60%);
  filter:blur(40px);
  opacity:.6;
  animation:hero-pulse 8s ease-in-out infinite;
}
.final-cta .container{position:relative; z-index:2}
.final-cta h2{font-size:clamp(2.4rem, 5vw, 4rem); margin-bottom:.4em}
.final-cta h2 em{color:var(--gold-deep); font-style:italic}
.final-cta .lead{margin:0 auto 2.4rem}

/* ============== FOOTER ============== */
footer{
  padding:80px 0 40px;
  border-top:1px solid var(--line);
  background:var(--cream-pure);
  position:relative;
  z-index:3;
}
.footer-top{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:60px;
  margin-bottom:60px;
}
@media (max-width:980px){.footer-top{grid-template-columns:1fr 1fr; gap:40px}}
@media (max-width:560px){.footer-top{grid-template-columns:1fr}}
.footer-brand p{color:var(--text-soft); margin:18px 0 0; max-width:34ch; line-height:1.6}
.footer-col h4{
  font-family:var(--mono);
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.25em;
  color:var(--gold-deep);
  margin:0 0 20px;
  font-weight:600;
}
.footer-col ul{list-style:none; padding:0; margin:0}
.footer-col li{margin-bottom:12px}
.footer-col a{color:var(--text-soft); font-size:.94rem; transition:color .25s}
.footer-col a:hover{color:var(--brown)}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
  padding-top:32px;
  border-top:1px solid var(--line-soft);
  font-size:.78rem;
  color:var(--text-mute);
  font-family:var(--mono);
  letter-spacing:.05em;
}

/* ============== FAB ============== */
.fab{
  position:fixed;
  bottom:24px; right:24px;
  z-index:80;
  width:60px; height:60px;
  border-radius:50%;
  background:var(--whatsapp);
  display:grid; place-items:center;
  box-shadow:0 12px 30px -8px rgba(37,211,102,.6), 0 0 0 0 rgba(37,211,102,.5);
  animation:pulse 2.4s infinite;
  transition:transform .25s;
}
.fab:hover{transform:scale(1.08)}
.fab svg{width:30px; height:30px; fill:#fff}
@keyframes pulse{
  0%{box-shadow:0 12px 30px -8px rgba(37,211,102,.6), 0 0 0 0 rgba(37,211,102,.5)}
  70%{box-shadow:0 12px 30px -8px rgba(37,211,102,.6), 0 0 0 18px rgba(37,211,102,0)}
  100%{box-shadow:0 12px 30px -8px rgba(37,211,102,.6), 0 0 0 0 rgba(37,211,102,0)}
}

/* ============== REVEAL ============== */
.reveal{opacity:0; transform:translateY(40px); transition:opacity 1s var(--ease-out), transform 1s var(--ease-out)}
.reveal.in{opacity:1; transform:none}
.reveal-fade{opacity:0; transition:opacity 1.2s var(--ease-out)}
.reveal-fade.in{opacity:1}
.reveal-scale{opacity:0; transform:scale(.95); transition:opacity 1s var(--ease-out), transform 1s var(--ease-out)}
.reveal-scale.in{opacity:1; transform:scale(1)}
.reveal-stagger > *{opacity:0; transform:translateY(30px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out)}
.reveal-stagger.in > *{opacity:1; transform:none}
.reveal-stagger.in > *:nth-child(1){transition-delay:.1s}
.reveal-stagger.in > *:nth-child(2){transition-delay:.2s}
.reveal-stagger.in > *:nth-child(3){transition-delay:.3s}
.reveal-stagger.in > *:nth-child(4){transition-delay:.4s}
.reveal-stagger.in > *:nth-child(5){transition-delay:.5s}
.reveal-stagger.in > *:nth-child(6){transition-delay:.6s}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
  .reveal,.reveal-fade,.reveal-scale,.reveal-stagger > *{opacity:1; transform:none}
}

/* ============== PÁGINAS INTERNAS ============== */
.page-header{
  padding:160px 0 60px;
  text-align:center;
  position:relative;
  background:radial-gradient(800px 400px at 50% 0%, var(--gold-glow), transparent 70%);
}
.page-header h1{font-size:clamp(2.4rem, 5vw, 4.4rem)}
.page-header h1 em{color:var(--gold-deep); font-style:italic}
.page-header .lead{margin:1.5rem auto 0}
.breadcrumb{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--text-mute);
  margin-bottom:1.5rem;
}
.breadcrumb a:hover{color:var(--gold-deep)}
.breadcrumb .sep{margin:0 10px; color:var(--gold)}

/* Blog */
.blog-controls{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:20px;
  margin-bottom:60px;
  padding:24px 28px;
  background:var(--cream-pure);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.blog-search{flex:1; min-width:240px; position:relative}
.blog-search input{
  width:100%;
  padding:14px 18px 14px 48px;
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:10px;
  font-size:.95rem;
  transition:border-color .25s, box-shadow .25s;
}
.blog-search input:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-glow)}
.blog-search::before{
  content:"";
  position:absolute;
  left:18px; top:50%;
  transform:translateY(-50%);
  width:18px; height:18px;
  border:1.5px solid var(--gold-deep);
  border-radius:50%;
  pointer-events:none;
}
.blog-search::after{
  content:"";
  position:absolute;
  left:31px; top:calc(50% + 4px);
  width:8px; height:1.5px;
  background:var(--gold-deep);
  transform:rotate(45deg);
  pointer-events:none;
}
.blog-filters{display:flex; gap:8px; flex-wrap:wrap}
.filter-btn{
  padding:9px 18px;
  background:transparent;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:.85rem;
  color:var(--text-soft);
  transition:all .25s;
}
.filter-btn:hover{border-color:var(--gold-deep); color:var(--brown)}
.filter-btn.active{background:var(--brown); color:var(--cream-pure); border-color:var(--brown)}
.blog-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:32px}
@media (max-width:980px){.blog-grid{grid-template-columns:repeat(2, 1fr)}}
@media (max-width:640px){.blog-grid{grid-template-columns:1fr}}
.post-card{
  background:var(--cream-pure);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  transition:all .5s var(--ease);
  display:flex;
  flex-direction:column;
}
.post-card:hover{transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--gold)}
.post-thumb{
  aspect-ratio:16/10;
  background:linear-gradient(135deg, var(--paper), var(--beige));
  position:relative;
  overflow:hidden;
}
.post-thumb::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 30% 30%, var(--gold-glow), transparent 70%);
  opacity:.4;
  transition:opacity .5s, transform .5s;
}
.post-card:hover .post-thumb::after{opacity:1; transform:scale(1.1)}
.post-thumb-icon{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-family:var(--serif);
  font-size:5rem;
  font-style:italic;
  color:var(--gold);
  opacity:.5;
  transition:transform .6s var(--ease);
}
.post-card:hover .post-thumb-icon{transform:scale(1.1) rotate(-5deg)}
.post-card-body{padding:28px 30px 30px; display:flex; flex-direction:column; gap:14px; flex:1}
.post-cat{
  display:inline-block;
  font-family:var(--mono);
  font-size:.65rem;
  text-transform:uppercase;
  letter-spacing:.25em;
  color:var(--gold-deep);
  font-weight:600;
}
.post-card h3{font-size:1.4rem; margin:0; line-height:1.2; color:var(--brown); transition:color .3s}
.post-card:hover h3{color:var(--gold-deep)}
.post-excerpt{color:var(--text-soft); font-size:.93rem; line-height:1.6; margin:0; flex:1}
.post-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  font-family:var(--mono);
  font-size:.7rem;
  color:var(--text-mute);
  letter-spacing:.1em;
  text-transform:uppercase;
  padding-top:16px;
  border-top:1px solid var(--line-soft);
}
.no-results{
  text-align:center;
  padding:80px 20px;
  color:var(--text-soft);
  font-style:italic;
  font-family:var(--serif);
  font-size:1.4rem;
  display:none;
}

/* Artículo */
.article-hero{padding:140px 0 50px; text-align:center; background:radial-gradient(800px 400px at 50% 0%, var(--gold-glow), transparent 70%)}
.article-hero .post-cat{margin-bottom:20px}
.article-hero h1{font-size:clamp(2.2rem, 5vw, 3.8rem); max-width:24ch; margin:0 auto .8em; line-height:1.08}
.article-meta{
  display:flex;
  justify-content:center;
  gap:20px;
  flex-wrap:wrap;
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--text-mute);
}
.article-meta span{display:inline-flex; align-items:center; gap:8px}
.article-meta span + span::before{content:"·"; color:var(--gold); margin-right:8px}
.article-cover{max-width:1080px; margin:0 auto; padding:0 var(--gutter) clamp(50px, 6vw, 80px)}
.article-cover-inner{
  aspect-ratio:16/8;
  background:linear-gradient(135deg, var(--paper), var(--beige), var(--sand));
  border-radius:var(--radius);
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.article-cover-inner::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 30% 30%, var(--gold-glow), transparent 60%);
}
.article-cover-inner .symbol{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-family:var(--serif);
  font-size:clamp(8rem, 18vw, 14rem);
  font-style:italic;
  color:var(--gold);
  opacity:.4;
}
.article-body{
  max-width:740px;
  margin:0 auto;
  padding:0 var(--gutter);
  font-size:1.1rem;
  line-height:1.85;
  color:var(--text);
}
.article-body h2{font-size:1.95rem; margin-top:2.2em; margin-bottom:.6em; color:var(--brown)}
.article-body h3{font-size:1.45rem; margin-top:1.8em; margin-bottom:.5em; color:var(--brown)}
.article-body p{margin:0 0 1.3em}
.article-body ul, .article-body ol{margin:0 0 1.5em; padding-left:1.5em}
.article-body li{margin-bottom:.6em}
.article-body strong{color:var(--brown); font-weight:600}
.article-body em{color:var(--gold-deep); font-style:italic}
.article-body a{color:var(--gold-deep); border-bottom:1px solid var(--gold-soft); transition:all .25s}
.article-body a:hover{color:var(--brown); border-color:var(--brown)}
.article-body blockquote{
  margin:2.4em 0;
  padding:32px 36px;
  background:var(--paper);
  border-left:3px solid var(--gold);
  border-radius:0 var(--radius) var(--radius) 0;
  font-family:var(--serif);
  font-style:italic;
  font-size:1.3rem;
  line-height:1.45;
  color:var(--brown);
  position:relative;
}
.article-body blockquote::before{
  content:"❝";
  position:absolute;
  top:-8px; left:24px;
  font-size:2.5rem;
  color:var(--gold);
  background:var(--paper);
  padding:0 8px;
}
.article-body blockquote p{margin:0}
.article-cta-box{
  margin:3em 0;
  padding:40px;
  background:radial-gradient(400px 200px at 50% 0%, var(--gold-glow), transparent 70%), var(--paper);
  border:1px solid var(--gold-soft);
  border-radius:var(--radius);
  text-align:center;
  position:relative;
}
.article-cta-box::before{
  content:"✦";
  position:absolute;
  top:24px; left:50%;
  transform:translateX(-50%);
  color:var(--gold);
  font-size:1.2rem;
}
.article-cta-box h3{font-size:1.6rem; margin:20px 0 .5em; color:var(--brown)}
.article-cta-box h3 em{color:var(--gold-deep); font-style:italic}
.article-cta-box p{color:var(--text-soft); margin:0 0 24px}
.article-share{
  display:flex;
  align-items:center;
  gap:14px;
  margin:3em 0 2em;
  padding:24px 0;
  border-block:1px solid var(--line);
  flex-wrap:wrap;
}
.article-share span{
  font-family:var(--mono);
  font-size:.7rem;
  color:var(--text-mute);
  letter-spacing:.25em;
  text-transform:uppercase;
  font-weight:600;
}
.share-btn{
  width:42px; height:42px;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--cream-pure);
  border:1px solid var(--line);
  color:var(--brown);
  transition:all .3s var(--ease);
}
.share-btn:hover{
  background:var(--brown);
  color:var(--cream-pure);
  border-color:var(--brown);
  transform:translateY(-2px);
}
.share-btn svg{width:16px; height:16px; fill:currentColor}
.related-section{background:var(--paper); margin-top:60px}

/* Servicios */
.service-block{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:80px;
  align-items:center;
  padding:60px 0;
  border-bottom:1px solid var(--line-soft);
}
.service-block:last-child{border:none}
.service-block.reverse{grid-template-columns:1.2fr 1fr}
.service-block.reverse .service-visual{order:2}
@media (max-width:980px){
  .service-block, .service-block.reverse{grid-template-columns:1fr; gap:40px}
  .service-block.reverse .service-visual{order:0}
}
.service-visual{
  aspect-ratio:1/1;
  max-width:420px;
  background:radial-gradient(circle at 30% 30%, var(--gold-soft), var(--paper) 60%, var(--beige));
  border-radius:50%;
  display:grid;
  place-items:center;
  font-family:var(--serif);
  font-style:italic;
  font-size:7rem;
  color:var(--gold-deep);
  margin:0 auto;
  position:relative;
  box-shadow:inset 0 0 80px rgba(200,164,92,.2);
  transition:transform .8s var(--ease);
}
.service-visual:hover{transform:rotate(8deg)}
.service-content h2{font-size:clamp(1.9rem, 3.5vw, 2.6rem); margin-bottom:.5em}
.service-content h2 em{color:var(--gold-deep); font-style:italic}
.service-features{list-style:none; padding:0; margin:1.6em 0}
.service-features li{
  padding-left:32px;
  position:relative;
  margin-bottom:.7em;
  color:var(--text-soft);
  line-height:1.6;
}
.service-features li::before{
  content:"✦";
  position:absolute;
  left:0; top:0;
  color:var(--gold);
  font-size:1.05rem;
}

/* Contacto */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start}
@media (max-width:980px){.contact-grid{grid-template-columns:1fr}}
.contact-card{
  padding:48px 40px;
  background:var(--cream-pure);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}
.contact-card h3{font-size:1.6rem; margin-bottom:.5em}
.contact-method{display:flex; gap:18px; align-items:flex-start; padding:20px 0; border-bottom:1px solid var(--line-soft)}
.contact-method:last-child{border:none}
.contact-method-icon{
  width:48px; height:48px;
  border-radius:14px;
  background:linear-gradient(135deg, rgba(200,164,92,.18), rgba(176,106,58,.12));
  display:grid; place-items:center;
  font-size:1.2rem;
  color:var(--gold-deep);
  flex-shrink:0;
}
.contact-method h4{
  font-family:var(--mono);
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.25em;
  color:var(--text-mute);
  margin:0 0 4px;
  font-weight:600;
}
.contact-method p{margin:0; color:var(--brown); font-weight:500}
.form-group{margin-bottom:20px}
.form-group label{
  display:block;
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--text-soft);
  margin-bottom:10px;
  font-weight:600;
}
.form-input, .form-textarea{
  width:100%;
  padding:14px 18px;
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:10px;
  font-size:.95rem;
  transition:all .25s;
}
.form-input:focus, .form-textarea:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 3px var(--gold-glow);
}
.form-textarea{min-height:140px; resize:vertical}

/* Sobre mí */
.about-hero{display:grid; grid-template-columns:1fr 1.4fr; gap:80px; align-items:center; padding-top:30px}
@media (max-width:980px){.about-hero{grid-template-columns:1fr; gap:50px}}
.about-portrait{
  aspect-ratio:1/1;
  max-width:420px;
  background:radial-gradient(circle at 30% 30%, var(--gold-soft), var(--paper) 70%);
  border-radius:50%;
  display:grid;
  place-items:center;
  font-family:var(--serif);
  font-style:italic;
  font-size:8rem;
  color:var(--gold-deep);
  margin:0 auto;
  box-shadow:inset 0 0 80px rgba(200,164,92,.2), 0 30px 80px -30px rgba(42,26,14,.3);
}
.about-content h2 em{color:var(--gold-deep); font-style:italic}
.values-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; margin-top:50px}
@media (max-width:880px){.values-grid{grid-template-columns:repeat(2, 1fr)}}
.value{
  text-align:center;
  padding:32px 24px;
  background:var(--cream-pure);
  border:1px solid var(--line);
  border-radius:var(--radius);
  transition:all .4s var(--ease);
}
.value:hover{transform:translateY(-4px); border-color:var(--gold); box-shadow:var(--shadow-sm)}
.value-num{font-family:var(--serif); font-style:italic; color:var(--gold-deep); font-size:1.4rem; display:block; margin-bottom:12px}
.value h4{font-family:var(--serif); font-size:1.2rem; color:var(--brown); margin:0 0 8px}
.value p{font-size:.88rem; color:var(--text-soft); margin:0; line-height:1.6}

/* Legales */
.legal-content{
  max-width:800px;
  margin:0 auto;
  padding:30px var(--gutter) 80px;
  font-size:1.02rem;
  line-height:1.8;
}
.legal-content h2{font-size:1.7rem; margin-top:2.2em; margin-bottom:.6em; color:var(--brown)}
.legal-content h3{font-size:1.3rem; margin-top:1.6em; margin-bottom:.4em; color:var(--brown)}
.legal-content p{margin-bottom:1.1em; color:var(--text)}
.legal-content ul{margin:0 0 1.4em; padding-left:1.4em}
.legal-content li{margin-bottom:.5em; color:var(--text)}
.legal-content strong{color:var(--brown)}
.legal-meta{
  font-family:var(--mono);
  font-size:.78rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--text-mute);
  margin-bottom:2.5em;
  padding-bottom:1.5em;
  border-bottom:1px solid var(--line);
}

.text-center{text-align:center}

@media print{
  .nav, .fab, .article-share, .article-cta-box, .cursor-dot, .cursor-ring, .preloader{display:none !important}
  body::before, body::after{display:none}
}

/* ====================================================== */
/* ============== MOBILE OPTIMIZATIONS ================== */
/* ====================================================== */

/* === TABLET PORTRAIT & SMALLER (≤980px) ============== */
@media (max-width: 980px){
  /* Hero stacked: visual no debe usar offsets negativos */
  .hero{padding:130px 0 70px; min-height:auto}
  .hero-grid{gap:50px}
  .hero-visual{
    max-width:380px;
    margin:0 auto;
    aspect-ratio:1;
  }
  .hero-card{
    font-size:.82rem;
    padding:14px 18px;
    max-width:200px;
  }
  .hero-card .text{font-size:.98rem}
  .hero-card.float-1{left:-2%; top:5%}
  .hero-card.float-2{right:-2%; bottom:8%}
  
  /* Story sticky se desactiva (ya está stackeado) */
  .story-sticky{position:static}
  .story-item p{margin-left:0}
}

/* === TABLET / MOBILE (≤768px) ======================== */
@media (max-width: 768px){
  /* Section padding reducido */
  section{padding:75px 0}
  
  /* Nav tighter */
  .nav{padding:14px 0}
  .nav-cta{padding:10px 16px; font-size:.8rem}
  
  /* Hero */
  .hero{padding:110px 0 60px}
  .hero h1{
    font-size:clamp(2.3rem, 9vw, 3.6rem);
    line-height:1.06;
    letter-spacing:-.02em;
  }
  .hero h1 br{display:none} /* Permitir flujo natural */
  
  /* Meta como pills */
  .hero-meta{gap:8px; font-size:.6rem; letter-spacing:.18em}
  .hero-meta span + span::before{display:none}
  .hero-meta span{
    padding:5px 12px;
    background:rgba(200,164,92,.1);
    border:1px solid var(--line-gold);
    border-radius:999px;
  }
  
  .hero-sub{font-size:1.02rem; margin-top:1.5rem; max-width:none}
  
  /* Botones en mobile: full-width vertical */
  .hero-actions{gap:12px; margin-top:2rem; flex-direction:column}
  .hero-actions .magnetic{width:100%}
  .hero-actions .btn{width:100%; justify-content:center; padding:16px 24px}
  
  .hero-trust{
    gap:12px;
    margin-top:2.4rem;
    font-size:.6rem;
    letter-spacing:.16em;
  }
  
  /* Hero visual smaller */
  .hero-visual{max-width:320px}
  .hero-card{font-size:.78rem; padding:12px 16px; max-width:175px}
  .hero-card .text{font-size:.92rem}
  .hero-card .label{font-size:.6rem; letter-spacing:.2em}
  
  /* Hide scroll hint on mobile */
  .scroll-hint{display:none}
  
  /* Marquee */
  .marquee{padding:16px 0}
  .marquee-track{font-size:1.05rem; animation-duration:25s}
  .marquee-track > span{gap:28px; padding-right:28px}
  
  /* Section heads */
  .sect-head{margin-bottom:50px}
  
  /* Story */
  .story-item{padding:28px 0}
  .story-item-head{gap:12px}
  .story-num{font-size:1.1rem}
  .story-item h3{font-size:1.3rem}
  .story-item p{font-size:.94rem; line-height:1.65}
  
  /* Service cards */
  .svc{padding:36px 28px}
  .svc-icon{width:48px; height:48px; top:24px; right:24px; font-size:1.05rem}
  .svc h3{font-size:1.35rem}
  .svc-num{margin-bottom:24px}
  
  /* Process timeline */
  .process-step{padding:32px 22px 26px}
  .process-step-num{
    top:-22px; left:20px;
    width:44px; height:44px;
    font-size:1.05rem;
    border-width:3px;
  }
  
  /* Quiz */
  .quiz-wrap{padding:32px 24px}
  .quiz-options button{padding:16px 18px; font-size:.92rem}
  .quiz-step h3{font-size:1.5rem}
  .quiz-back{font-size:.82rem; padding:8px 14px}
  .quiz-final-icon{width:70px; height:70px; font-size:1.7rem}
  
  /* Statement */
  .statement{padding:80px 0}
  .statement-text{
    font-size:clamp(1.5rem, 5.5vw, 2.4rem);
    max-width:22ch;
    line-height:1.32;
  }
  
  /* Testimonials */
  .testi{padding:32px 28px 28px; gap:16px}
  .testi blockquote{font-size:1.05rem; line-height:1.5}
  .testi-quote{font-size:4rem}
  
  /* FAQ */
  .faq summary{padding:22px 0; font-size:1.1rem; gap:14px}
  .faq-toggle{width:32px; height:32px}
  .faq-toggle::before, .faq-toggle::after{width:12px}
  .faq-toggle::after{height:12px}
  .faq-body{padding-bottom:24px; font-size:.95rem}
  
  /* Final CTA */
  .final-cta{padding:80px 0}
  .final-cta h2{font-size:clamp(2rem, 7vw, 3rem)}
  
  /* Page headers internas */
  .page-header{padding:110px 0 40px}
  .page-header h1{font-size:clamp(2rem, 7vw, 3.2rem)}
  
  /* Article */
  .article-hero{padding:105px 0 35px}
  .article-hero h1{font-size:clamp(1.95rem, 6.5vw, 3rem); line-height:1.1}
  .article-meta{gap:14px; font-size:.65rem}
  .article-cover{padding-bottom:50px}
  .article-cover-inner{aspect-ratio:16/9}
  .article-body{font-size:1.02rem; line-height:1.78}
  .article-body h2{font-size:1.55rem; margin-top:1.8em}
  .article-body h3{font-size:1.22rem}
  .article-body blockquote{
    padding:22px 24px;
    font-size:1.08rem;
    margin:1.8em 0;
  }
  .article-body blockquote::before{left:16px; font-size:2rem; top:-6px}
  .article-cta-box{padding:30px 24px; margin:2.4em 0}
  .article-cta-box h3{font-size:1.3rem}
  .article-share{gap:10px; padding:20px 0}
  .share-btn{width:38px; height:38px}
  .share-btn svg{width:14px; height:14px}
  
  /* Service blocks */
  .service-block, .service-block.reverse{padding:40px 0; gap:36px}
  .service-visual{font-size:5rem; max-width:280px}
  .service-content h2{font-size:clamp(1.7rem, 5vw, 2.2rem)}
  .service-features li{font-size:.95rem}
  
  /* Sobre mí */
  .about-portrait{font-size:6rem; max-width:280px}
  .about-content h2{font-size:clamp(1.8rem, 5vw, 2.4rem)}
  
  /* Contact */
  .contact-card{padding:36px 28px}
  .contact-card h3{font-size:1.4rem}
  .contact-method{gap:14px; padding:16px 0}
  .contact-method-icon{width:42px; height:42px; font-size:1.05rem}
  .form-group label{font-size:.65rem; letter-spacing:.18em}
  .form-input, .form-textarea{padding:13px 16px; font-size:.95rem}
  
  /* Blog */
  .blog-controls{padding:18px 20px; gap:14px}
  .blog-search input{font-size:.92rem; padding:12px 16px 12px 42px}
  .filter-btn{padding:8px 14px; font-size:.78rem}
  .post-card-body{padding:24px 24px 26px}
  .post-card h3{font-size:1.25rem}
  .post-thumb-icon{font-size:4rem}
  
  /* Footer */
  .footer-top{gap:32px; margin-bottom:40px}
  .footer-bottom{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
    font-size:.7rem;
    letter-spacing:.04em;
  }
  
  /* FAB */
  .fab{bottom:18px; right:18px; width:54px; height:54px}
  .fab svg{width:26px; height:26px}
  
  /* Performance: aliviar fondos pesados en mobile */
  body::after{display:none} /* Quitar grain - costoso en mobile */
  body::before{
    background-image:
      radial-gradient(700px 400px at 85% 0%, rgba(200,164,92,.13), transparent 60%),
      radial-gradient(500px 350px at -10% 50%, rgba(176,106,58,.05), transparent 60%);
  }
  
  /* Reduce blurs for performance */
  .hero-bg-deco::before, .hero-bg-deco::after{filter:blur(40px)}
  .final-cta::before{filter:blur(30px)}
  
  /* Quiz progress bars más visibles */
  .quiz-progress span{height:4px}
  
  /* Legal page */
  .legal-content{padding:20px var(--gutter) 60px; font-size:.96rem}
  .legal-content h2{font-size:1.45rem}
  .legal-content h3{font-size:1.15rem}
}

/* === PHONE (≤520px) ================================== */
@media (max-width: 520px){
  :root{--gutter:18px; --radius:14px}
  
  /* Brand más compacto */
  .brand{gap:10px; font-size:1.2rem}
  .brand-mark{width:38px; height:38px; font-size:.95rem}
  
  /* Mobile menu items */
  .nav-links a:not(.nav-cta){font-size:1.7rem}
  
  /* Hero ajuste fino */
  .hero{padding:100px 0 60px}
  .hero h1{
    font-size:clamp(2rem, 9.5vw, 2.8rem);
    line-height:1.05;
  }
  
  /* Hero meta: ocultar el de fecha (menos ruido) */
  .hero-meta span:nth-child(3){display:none}
  
  /* Hero visual aún más pequeño */
  .hero-visual{max-width:280px}
  .hero-card{font-size:.72rem; padding:11px 14px; max-width:155px}
  .hero-card .text{font-size:.86rem; line-height:1.25}
  .hero-card .label{font-size:.56rem; letter-spacing:.18em}
  .hero-card.float-1{top:-2%; left:-4%}
  .hero-card.float-2{bottom:0; right:-4%}
  
  /* Hero trust en columna */
  .hero-trust{flex-direction:column; gap:8px; align-items:flex-start; margin-top:2rem}
  
  /* Marquee */
  .marquee-track{font-size:.95rem}
  .marquee-track > span{gap:24px; padding-right:24px}
  
  /* Story item layout simplificado */
  .story-item-head{flex-direction:column; align-items:flex-start; gap:8px}
  .story-item h3{font-size:1.22rem}
  
  /* Quiz padding más pequeño */
  .quiz-wrap{padding:26px 20px}
  .quiz-step h3{font-size:1.35rem}
  .quiz-step > p{font-size:.92rem}
  .quiz-options button{
    padding:14px 16px;
    padding-right:38px;
    font-size:.88rem;
  }
  .quiz-options button.selected::after{right:14px; font-size:.95rem}
  .quiz-input{padding:14px 16px; font-size:.92rem}
  
  /* Process step: número arriba en vez de flotante */
  .process-step{padding:24px 22px 26px; padding-top:74px}
  .process-step-num{
    top:18px; left:22px;
    width:40px; height:40px;
    font-size:1rem;
    border:none;
    box-shadow:0 4px 12px -2px rgba(42,26,14,.25);
  }
  
  /* Statement padding y tipografía */
  .statement{padding:70px 0}
  .statement-text{font-size:clamp(1.4rem, 6vw, 2rem); max-width:20ch}
  .statement-author{margin-top:30px; font-size:.7rem}
  
  /* Testimonial */
  .testi{padding:28px 24px 24px}
  .testi blockquote{font-size:1rem}
  .testi-quote{font-size:3.5rem; top:10px; right:18px}
  .testi .avatar{width:40px; height:40px; font-size:1rem}
  
  /* FAQ */
  .faq summary{font-size:1.05rem; padding:20px 0}
  
  /* Article */
  .article-cover-inner .symbol{font-size:clamp(6rem, 22vw, 9rem)}
  
  /* Service block */
  .service-visual{font-size:4.5rem; max-width:240px}
  
  /* About */
  .about-portrait{font-size:5rem; max-width:240px}
  
  /* Page header */
  .page-header{padding:100px 0 30px}
  .breadcrumb{margin-bottom:1.2rem; font-size:.65rem}
  
  /* FAB un poco más pequeño */
  .fab{width:50px; height:50px}
  .fab svg{width:24px; height:24px}
  
  /* Footer mejor en columna */
  .footer-top{gap:28px}
  .footer-col h4{font-size:.65rem; letter-spacing:.22em; margin-bottom:14px}
  .footer-col li{margin-bottom:8px}
  .footer-col a{font-size:.9rem}
}

/* === TINY PHONES (≤370px) ============================ */
@media (max-width: 370px){
  /* Brand: ocultar la palabra "Espiritual" para que quepa */
  .brand-name em{display:none}
  
  .hero h1{font-size:clamp(1.8rem, 9vw, 2.4rem)}
  .hero-card{max-width:140px}
  
  .nav-cta{padding:9px 12px; font-size:.75rem}
  .nav-cta svg{display:none}
}

/* === LANDSCAPE PHONE (alto bajo) ===================== */
@media (max-height: 600px) and (max-width: 900px){
  .hero{padding:90px 0 50px; min-height:auto}
  .scroll-hint{display:none}
  .preloader-mark{font-size:2rem}
}

/* === TOUCH DEVICES: hover deshabilitado =============== */
@media (hover: none){
  /* Quitar efectos hover que no aplican */
  .post-card:hover, .svc:hover, .testi:hover, .value:hover{
    transform:none;
  }
  /* Tap targets más grandes */
  .nav-links a, .filter-btn, .quiz-options button{min-height:44px}
  /* Botones de share más fáciles de tocar */
  .share-btn{width:44px; height:44px}
}

/* === MOBILE MENU: stagger animation =================== */
@media (max-width: 920px){
  .nav-links > a{
    opacity:0;
    transform:translateY(24px);
    transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);
  }
  .nav-links.open > a{opacity:1; transform:none}
  .nav-links.open > a:nth-child(1){transition-delay:.18s}
  .nav-links.open > a:nth-child(2){transition-delay:.24s}
  .nav-links.open > a:nth-child(3){transition-delay:.30s}
  .nav-links.open > a:nth-child(4){transition-delay:.36s}
  .nav-links.open > a:nth-child(5){transition-delay:.42s}
  .nav-links.open > a:nth-child(6){transition-delay:.48s}
  
  /* Línea decorativa en menú abierto */
  .nav-links::before{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%) scaleX(0);
    width:80px;
    height:1px;
    background:var(--gold);
    opacity:0;
    transition:opacity .5s var(--ease-out) .1s, transform .8s var(--ease-out) .1s;
  }
  .nav-links.open::before{
    opacity:1;
    transform:translate(-50%,-160px) scaleX(1);
  }
  
  /* Marca decorativa abajo del menú */
  .nav-links::after{
    content:"✦";
    position:absolute;
    bottom:60px;
    left:50%;
    transform:translateX(-50%);
    color:var(--gold);
    font-size:1.2rem;
    opacity:0;
    transition:opacity .6s var(--ease-out) .5s;
  }
  .nav-links.open::after{opacity:.6}
}

/* === REDUCIR ANIMACIONES si el usuario prefiere ====== */
@media (prefers-reduced-motion: reduce){
  .hero-orb-bg, .hero-bg-deco::before, .hero-bg-deco::after,
  .marquee-track, .fab, .scroll-hint::after, .hero-orb-glow,
  .preloader-mark::after, .final-cta::before, .hero-card{
    animation:none !important;
  }
  .word-mask > span{transform:none !important; animation:none !important}
}


/* === iOS SAFARI ESPECÍFICO ============================ */
/* Dynamic viewport height (iOS Safari toolbar) */
@supports (height: 100dvh){
  .hero{min-height:100dvh}
  .preloader{min-height:100dvh}
  @media (max-width: 920px){
    .nav-links{height:100dvh; min-height:100dvh}
  }
}

/* Safe area insets (iPhone notch / home indicator) */
.fab{
  bottom:calc(18px + env(safe-area-inset-bottom, 0px));
  right:calc(18px + env(safe-area-inset-right, 0px));
}
.nav{padding-top:max(18px, env(safe-area-inset-top, 18px))}
@media (max-width: 920px){
  .nav-links{
    padding-top:max(80px, calc(80px + env(safe-area-inset-top, 0px)));
    padding-bottom:max(40px, calc(40px + env(safe-area-inset-bottom, 0px)));
  }
}

/* iOS form fields no zoom on focus (font-size 16+) */
@media (max-width: 768px){
  input, textarea, select{font-size:16px !important}
}

/* iOS tap highlight cleaner */
a, button{-webkit-tap-highlight-color:rgba(200,164,92,.2)}

/* Smooth scroll en iOS */
html, body{
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:none;
}

/* Prevent text size adjust en mobile */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

/* ============== ILLUSTRATION ENHANCEMENTS ============== */

/* Mandala rotando detrás del orbe del hero */
.hero-mandala{
  position:absolute;
  inset:-15%;
  width:130%;
  height:130%;
  z-index:0;
  opacity:.7;
  animation:mandala-spin 60s linear infinite;
  pointer-events:none;
}
@keyframes mandala-spin{to{transform:rotate(360deg)}}

/* En las service cards, reemplazar el icono carácter por imagen */
.svc-icon{
  background:transparent !important;
  width:80px !important;
  height:80px !important;
  padding:0;
  overflow:visible;
}
.svc-icon img{
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 4px 12px rgba(200,164,92,.3));
  transition:transform .8s var(--ease);
}
.svc:hover .svc-icon img{transform:rotate(20deg) scale(1.08)}

/* Override del transform en hover (era rotate(15deg) sobre el div) */
.svc:hover .svc-icon{transform:none}

/* Decorative ornament-divider use */
.deco-divider{
  display:block;
  width:100%;
  max-width:560px;
  margin:24px auto 0;
  height:auto;
  opacity:.85;
}

/* Section deco illustration (background, behind sections) */
.section-deco{
  position:absolute;
  pointer-events:none;
  opacity:.5;
  z-index:1;
}
.section-deco.constellation{
  top:0; left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.18;
}

/* About portrait override - usar SVG en vez de letra */
.about-portrait img{
  width:90%;
  height:90%;
  object-fit:contain;
}
.about-portrait.has-illustration{
  background:transparent;
  box-shadow:none;
}

/* Article cover - usar SVG según categoría */
.article-cover-illustration{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}
.article-cover-illustration img{
  max-width:55%;
  max-height:75%;
  object-fit:contain;
  opacity:.85;
  filter:drop-shadow(0 8px 24px rgba(200,164,92,.25));
}

/* Mobile adjustments */
@media (max-width: 768px){
  .hero-mandala{
    inset:-8%;
    width:116%;
    height:116%;
    opacity:.55;
  }
  .svc-icon{
    width:60px !important;
    height:60px !important;
    top:24px !important;
    right:24px !important;
  }
}
@media (max-width: 520px){
  .hero-mandala{opacity:.4}
}

/* Service visual con imagen SVG (página servicios) */
.service-visual:has(img){
  background:transparent;
  box-shadow:none;
}
.service-visual img{
  width:90%;
  height:90%;
  object-fit:contain;
  filter:drop-shadow(0 8px 24px rgba(200,164,92,.25));
  transition:transform .8s var(--ease);
}
.service-visual:hover img{transform:rotate(-8deg) scale(1.05)}

/* En page Sobre mí */
.about-portrait:has(img){
  background:transparent;
  box-shadow:none;
}


/* Post-thumb con imagen (en lugar de carácter) */
.post-thumb-icon{
  display:flex !important;
  align-items:center;
  justify-content:center;
}
.post-thumb-icon img{
  width:62%;
  height:62%;
  object-fit:contain;
  opacity:.9;
  filter:drop-shadow(0 4px 16px rgba(200,164,92,.25));
  transition:transform .8s var(--ease);
}
.post-card:hover .post-thumb-icon img{
  transform:scale(1.08) rotate(-4deg);
}


/* ============================================ */
/* ============== UPGRADE VISUAL v3 =========== */
/* ============================================ */

/* === FLOATING DECORATIVE SYMBOLS (todo el sitio) === */
.float-deco{
  position:absolute;
  pointer-events:none;
  font-family:var(--serif);
  font-style:italic;
  color:var(--gold);
  opacity:.15;
  z-index:1;
  animation:float-rotate 15s ease-in-out infinite;
  user-select:none;
}
.float-deco.fd-1{top:8%; left:5%; font-size:3rem; animation-delay:0s}
.float-deco.fd-2{top:25%; right:8%; font-size:2.5rem; animation-delay:2s}
.float-deco.fd-3{bottom:30%; left:7%; font-size:2.2rem; animation-delay:4s}
.float-deco.fd-4{bottom:10%; right:5%; font-size:3.5rem; animation-delay:1s}
.float-deco.fd-5{top:55%; left:50%; font-size:1.8rem; animation-delay:3s; opacity:.1}
@keyframes float-rotate{
  0%,100%{transform:translateY(0) rotate(0deg)}
  33%{transform:translateY(-20px) rotate(8deg)}
  66%{transform:translateY(10px) rotate(-5deg)}
}

/* === HUGE INDEX NUMBER (editorial style) === */
.section-num{
  font-family:var(--serif);
  font-size:clamp(8rem, 22vw, 16rem);
  font-style:italic;
  font-weight:400;
  color:var(--gold);
  opacity:.08;
  position:absolute;
  top:30px;
  right:var(--gutter);
  line-height:.85;
  pointer-events:none;
  z-index:1;
  letter-spacing:-.04em;
}
.section-num.left{right:auto; left:var(--gutter)}
@media (max-width:520px){
  .section-num{font-size:clamp(6rem, 28vw, 9rem); opacity:.07; top:20px}
}

/* === SECTION CURVED DIVIDERS (transitions between sections) === */
.curve-divider{
  position:relative;
  width:100%;
  height:80px;
  pointer-events:none;
  margin-top:-80px;
  z-index:4;
}
.curve-divider svg{width:100%; height:100%; display:block}
.curve-divider path{fill:var(--cream-pure)}
.curve-divider.flip svg{transform:scaleY(-1)}
.curve-divider.paper path{fill:var(--paper)}
.curve-divider.brown path{fill:var(--brown)}
@media (max-width:768px){
  .curve-divider{height:50px; margin-top:-50px}
}

/* === STATS SECTION (numbers that count up) === */
.stats-section{
  background:var(--cream-pure);
  position:relative;
  overflow:hidden;
}
.stats-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
  position:relative;
  z-index:2;
}
@media (max-width:760px){
  .stats-grid{grid-template-columns:1fr; gap:0}
}
.stat-item{
  text-align:center;
  padding:32px 24px;
  position:relative;
}
.stat-item:not(:last-child){border-right:1px solid var(--line)}
@media (max-width:760px){
  .stat-item{padding:32px 20px; border-right:none !important}
  .stat-item:not(:last-child){border-bottom:1px solid var(--line)}
}
.stat-number{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(3.5rem, 10vw, 6rem);
  font-weight:400;
  line-height:1;
  background:linear-gradient(135deg, var(--gold-soft), var(--gold-deep));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  margin-bottom:8px;
  letter-spacing:-.03em;
}
.stat-label{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--text-mute);
  margin-bottom:4px;
  font-weight:600;
}
.stat-desc{
  color:var(--text-soft);
  font-size:.92rem;
  margin-top:8px;
  max-width:24ch;
  margin-inline:auto;
  line-height:1.5;
}
.stat-mark{
  display:inline-block;
  font-style:italic;
  color:var(--gold-deep);
  margin-left:4px;
}

/* === BENTO GRID (modern asymmetric layout) === */
.bento{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  grid-auto-rows:minmax(220px, auto);
  gap:18px;
}
.bento > * {
  background:var(--cream-pure);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:32px 28px;
  position:relative;
  overflow:hidden;
  transition:transform .5s var(--ease), box-shadow .5s, border-color .4s;
}
.bento > *:hover{
  border-color:var(--gold);
  transform:translateY(-4px);
  box-shadow:var(--shadow);
}
.bento .b-large{grid-column:span 4; grid-row:span 2}
.bento .b-small{grid-column:span 2}
.bento .b-medium{grid-column:span 3}
.bento .b-wide{grid-column:span 6}
.bento .b-dark{
  background:var(--brown);
  color:var(--cream-pure);
  border-color:var(--brown);
}
.bento .b-dark h3{color:var(--cream-pure)}
.bento .b-dark p{color:rgba(245,239,226,.7)}
.bento .b-gold{
  background:linear-gradient(135deg, var(--gold-soft), var(--gold));
  border-color:var(--gold);
  color:var(--brown);
}
.bento .b-gold h3, .bento .b-gold p{color:var(--brown)}

@media (max-width:980px){
  .bento{grid-template-columns:repeat(2, 1fr)}
  .bento > *, .bento .b-large, .bento .b-small, .bento .b-medium, .bento .b-wide{
    grid-column:span 2;
    grid-row:span 1;
  }
}
@media (max-width:560px){
  .bento{grid-template-columns:1fr}
  .bento > *, .bento .b-large, .bento .b-small, .bento .b-medium, .bento .b-wide{grid-column:span 1}
}

.bento-tag{
  font-family:var(--mono);
  font-size:.65rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--gold-deep);
  font-weight:600;
  margin-bottom:14px;
  display:inline-block;
}
.bento .b-dark .bento-tag, .bento .b-gold .bento-tag{color:rgba(255,255,255,.8)}
.bento h3{
  font-size:1.5rem;
  margin:0 0 12px;
}
.bento p{
  font-size:.95rem;
  line-height:1.6;
  margin:0;
}
.bento-icon-bg{
  position:absolute;
  bottom:-30px;
  right:-30px;
  width:160px;
  height:160px;
  opacity:.08;
  pointer-events:none;
  transition:opacity .5s, transform .5s;
}
.bento > *:hover .bento-icon-bg{opacity:.15; transform:rotate(15deg)}
.bento .b-large .bento-icon-bg{width:220px; height:220px; bottom:-40px; right:-40px}

/* === TESTIMONIALS SLIDER (mobile-first carousel) === */
.testi-slider{
  position:relative;
  margin:0 calc(var(--gutter) * -1);
  padding:0 var(--gutter);
}
.testi-track{
  display:flex;
  gap:24px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-padding:var(--gutter);
  padding:8px var(--gutter) 24px;
  scrollbar-width:none;
  -ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
}
.testi-track::-webkit-scrollbar{display:none}
.testi-track > .testi{
  flex:0 0 calc((100% - 48px) / 3);
  scroll-snap-align:start;
  min-width:0;
}
@media (max-width:980px){
  .testi-track > .testi{flex:0 0 calc(50% - 12px)}
}
@media (max-width:640px){
  .testi-track > .testi{flex:0 0 86%}
}

.testi-slider-controls{
  display:none;
  justify-content:center;
  gap:12px;
  margin-top:24px;
}
@media (max-width:640px){
  .testi-slider-controls{display:flex}
}
.testi-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--line);
  transition:all .3s var(--ease);
  cursor:pointer;
}
.testi-dot.active{
  width:32px;
  border-radius:8px;
  background:linear-gradient(90deg, var(--gold), var(--gold-deep));
}

.testi-hint{
  display:none;
  text-align:center;
  font-family:var(--mono);
  font-size:.65rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--text-mute);
  margin-top:16px;
}
.testi-hint::before{content:"← "}
.testi-hint::after{content:" →"}
@media (max-width:640px){
  .testi-hint{display:block}
}

/* === DRAMATIC PULL QUOTE === */
.pull-quote{
  text-align:center;
  padding:clamp(80px, 12vw, 140px) var(--gutter);
  position:relative;
  background:var(--paper);
  overflow:hidden;
}
.pull-quote::before, .pull-quote::after{
  content:"❝";
  position:absolute;
  font-family:var(--serif);
  font-style:italic;
  color:var(--gold);
  opacity:.1;
  font-size:clamp(15rem, 30vw, 28rem);
  line-height:.7;
  pointer-events:none;
}
.pull-quote::before{top:-20px; left:5%}
.pull-quote::after{
  content:"❞";
  bottom:-50px;
  right:5%;
}
.pull-quote .text{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1.8rem, 4.5vw, 3.4rem);
  font-weight:400;
  line-height:1.25;
  color:var(--brown);
  max-width:22ch;
  margin:0 auto;
  position:relative;
  z-index:2;
  letter-spacing:-.01em;
}
.pull-quote .text em{color:var(--gold-deep); font-style:italic}
.pull-quote .author{
  margin-top:32px;
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--gold-deep);
  position:relative;
  z-index:2;
}
.pull-quote .author::before{
  content:"";
  display:inline-block;
  width:30px;
  height:1px;
  background:var(--gold);
  vertical-align:middle;
  margin-right:14px;
}

/* === EMOTIONAL TIMELINE (antes/después) === */
.timeline-emotional{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  position:relative;
}
@media (max-width:760px){
  .timeline-emotional{grid-template-columns:1fr; gap:30px}
}
.timeline-side{
  padding:48px 36px;
  position:relative;
}
.timeline-side.before{
  background:var(--paper);
  border-radius:var(--radius) 0 0 var(--radius);
}
.timeline-side.after{
  background:linear-gradient(135deg, var(--cream-pure), var(--paper));
  border-radius:0 var(--radius) var(--radius) 0;
  border-left:1px solid var(--line);
  position:relative;
}
@media (max-width:760px){
  .timeline-side.before{border-radius:var(--radius)}
  .timeline-side.after{border-radius:var(--radius); border-left:none}
}
.timeline-side .label{
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--gold-deep);
  font-weight:600;
  margin-bottom:24px;
  display:inline-block;
}
.timeline-side ul{
  list-style:none;
  padding:0;
  margin:0;
}
.timeline-side li{
  padding:14px 0 14px 30px;
  position:relative;
  border-bottom:1px solid var(--line-soft);
  color:var(--text-soft);
  font-size:.96rem;
  line-height:1.5;
}
.timeline-side li:last-child{border-bottom:none}
.timeline-side.before li::before{
  content:"";
  position:absolute;
  left:0; top:20px;
  width:14px; height:14px;
  border:1.5px solid var(--burgundy);
  border-radius:50%;
  opacity:.5;
}
.timeline-side.before li::after{
  content:"";
  position:absolute;
  left:3px; top:23px;
  width:8px; height:8px;
  background:var(--burgundy);
  border-radius:50%;
  opacity:.6;
}
.timeline-side.after li::before{
  content:"✓";
  position:absolute;
  left:0; top:14px;
  width:18px; height:18px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--gold-soft), var(--gold));
  display:grid;
  place-items:center;
  font-size:.75rem;
  color:var(--cream-pure);
  font-weight:700;
}

/* === SCROLL REVEAL (text letter by letter) === */
.text-reveal{
  font-family:var(--serif);
  font-size:clamp(2rem, 5vw, 3.6rem);
  font-style:italic;
  line-height:1.2;
  text-align:center;
  color:var(--brown);
  max-width:18ch;
  margin:0 auto;
}
.text-reveal span{
  display:inline-block;
  opacity:.15;
  transition:opacity .8s var(--ease);
}
.text-reveal span.in{opacity:1}
.text-reveal em{font-style:italic; color:var(--gold-deep)}

/* === BACKGROUND PATTERN (subtle waves) === */
.wave-bg{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.04;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><path d='M0 100 Q50 50 100 100 T200 100' stroke='%238a6f30' fill='none' stroke-width='1'/><path d='M0 130 Q50 80 100 130 T200 130' stroke='%238a6f30' fill='none' stroke-width='1'/><path d='M0 160 Q50 110 100 160 T200 160' stroke='%238a6f30' fill='none' stroke-width='1'/></svg>");
  background-size:200px 200px;
}

/* === DOTS PATTERN === */
.dots-bg{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.5;
  background-image:radial-gradient(circle, var(--gold-deep) 1px, transparent 1px);
  background-size:24px 24px;
  mask:radial-gradient(circle at center, #000, transparent 70%);
  -webkit-mask:radial-gradient(circle at center, #000, transparent 70%);
}

/* === INSTAGRAM-STYLE VERTICAL CARDS (servicios mejorados en móvil) === */
@media (max-width:640px){
  .svc{
    padding:32px 24px;
    background:linear-gradient(180deg, var(--cream-pure) 0%, var(--paper) 100%);
    position:relative;
  }
  .svc::after{
    content:"";
    position:absolute;
    top:0; left:0; right:0;
    height:4px;
    background:linear-gradient(90deg, var(--gold-soft), var(--gold), var(--gold-deep));
    border-radius:var(--radius) var(--radius) 0 0;
  }
  .svc-icon{
    position:relative !important;
    top:auto !important;
    right:auto !important;
    margin:0 0 24px;
    width:90px !important;
    height:90px !important;
    opacity:1 !important;
  }
  .svc-num{margin-bottom:0; font-size:.85rem; letter-spacing:.2em}
}

/* === HERO ENHANCEMENTS === */
/* Big quote mark in hero corner */
.hero-quote-mark{
  position:absolute;
  top:120px;
  left:30px;
  font-family:var(--serif);
  font-style:italic;
  color:var(--gold);
  opacity:.15;
  font-size:clamp(8rem, 20vw, 18rem);
  line-height:.7;
  pointer-events:none;
  z-index:1;
  user-select:none;
}
@media (max-width:768px){
  .hero-quote-mark{display:none}
}

/* Hero badge (NEW arriba del título) */
.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:6px 16px;
  background:rgba(200,164,92,.12);
  border:1px solid var(--line-gold);
  border-radius:999px;
  font-family:var(--mono);
  font-size:.65rem;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--gold-deep);
  font-weight:600;
  margin-bottom:1.5rem;
  position:relative;
  overflow:hidden;
}
.hero-badge::before{
  content:"";
  width:6px; height:6px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 0 var(--gold);
  animation:badge-pulse 2s ease-out infinite;
}
@keyframes badge-pulse{
  0%{box-shadow:0 0 0 0 rgba(200,164,92,.6)}
  100%{box-shadow:0 0 0 12px rgba(200,164,92,0)}
}

/* === PROCESS STEPS connected line === */
.process{position:relative}
.process .container{position:relative; z-index:2}
.process-grid{position:relative}
@media (min-width:981px){
  .process-grid::before{
    content:"";
    position:absolute;
    top:24px;
    left:8%;
    right:8%;
    height:2px;
    background:linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold) 80%, transparent);
    opacity:.4;
    z-index:-1;
  }
}

/* === FAQ ENHANCEMENT === */
.faq summary{position:relative}
.faq summary::before{
  content:counter(faq-counter, decimal-leading-zero);
  counter-increment:faq-counter;
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.2em;
  color:var(--gold-deep);
  margin-right:20px;
  font-weight:700;
}
.faq-list{counter-reset:faq-counter}
@media (max-width:520px){
  .faq summary::before{display:block; margin:0 0 8px}
  .faq summary{flex-wrap:wrap}
  .faq summary > span:not(.faq-toggle){flex:1}
}

/* === MARQUEE upgrade with logo === */
.marquee-track > span{
  display:inline-flex;
  align-items:center;
}
.marquee-track > span::before{
  content:"";
  display:inline-block;
  width:8px;
  height:8px;
  background:var(--gold);
  transform:rotate(45deg);
  margin-right:50px;
}

/* === STORY items con icono === */
.story-item-icon{
  width:50px;
  height:50px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--gold-soft), var(--gold));
  display:grid;
  place-items:center;
  flex-shrink:0;
  box-shadow:0 4px 12px -2px var(--gold-glow);
}
.story-item-icon svg{
  width:22px;
  height:22px;
  color:var(--brown);
}
.story-item-head{align-items:center}
.story-item p{margin-left:68px}
@media (max-width:520px){
  .story-item p{margin-left:0}
  .story-item-icon{width:42px; height:42px}
}

/* === ANIMATED COUNTER === */
.counter[data-count]{
  display:inline-block;
}
@keyframes counter-glow{
  0%,100%{filter:none}
  50%{filter:drop-shadow(0 0 12px var(--gold-glow))}
}

/* === CARD DECORATIVE LINES (top accent en cards) === */
.svc::before{
  z-index:0 !important;
}
.svc-num{
  position:relative;
}
.svc-num::after{
  content:"";
  display:inline-block;
  width:30px;
  height:1px;
  background:var(--gold);
  vertical-align:middle;
  margin-left:12px;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .6s var(--ease) .1s;
}
.svc:hover .svc-num::after{transform:scaleX(1)}

/* === GRADIENT TEXT EFFECTS === */
.gradient-text{
  background:linear-gradient(135deg, var(--gold-soft), var(--gold-deep));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  display:inline-block;
}

/* === GLOWING ELEMENTS === */
.glow-on-hover{
  transition:filter .4s var(--ease);
}
.glow-on-hover:hover{
  filter:drop-shadow(0 0 20px var(--gold-glow));
}

/* === SECTION DECORATIVE CIRCLE (background)=== */
.section-circle-deco{
  position:absolute;
  border-radius:50%;
  border:1px solid var(--gold);
  opacity:.15;
  pointer-events:none;
  z-index:1;
}
.section-circle-deco::before, .section-circle-deco::after{
  content:"";
  position:absolute;
  inset:20px;
  border:1px solid var(--gold);
  border-radius:50%;
  opacity:.6;
}
.section-circle-deco::after{
  inset:40px;
  opacity:.3;
}

/* Hide some decorations on mobile for performance */
@media (max-width:520px){
  .float-deco.fd-3, .float-deco.fd-5{display:none}
  .pull-quote::before{font-size:10rem; top:10px}
  .pull-quote::after{font-size:10rem; bottom:-30px}
}

/* === ENHANCED MOBILE CARDS === */
@media (max-width:768px){
  /* Cards with more visual interest */
  .post-card{
    background:linear-gradient(180deg, var(--cream-pure) 0%, var(--paper) 100%);
    position:relative;
  }
  .post-card::after{
    content:"";
    position:absolute;
    top:0; left:0; right:0;
    height:3px;
    background:linear-gradient(90deg, var(--gold-soft), var(--gold-deep));
    z-index:5;
  }
  
  /* Process steps con número en grande */
  .process-step{
    padding-top:80px;
  }
  .process-step-num{
    width:56px !important;
    height:56px !important;
    font-size:1.4rem !important;
    box-shadow:0 8px 20px -4px rgba(42,26,14,.3);
  }
  
  /* Quiz options con más impacto */
  .quiz-options button{
    padding:18px 22px;
    background:linear-gradient(180deg, var(--cream-pure) 0%, var(--cream) 100%);
  }
  
  /* Testimonios con sombra dorada */
  .testi{
    background:linear-gradient(180deg, var(--cream-pure) 0%, var(--paper) 100%);
    box-shadow:0 4px 16px -4px var(--gold-glow);
  }
  
  /* FAB con efecto de respiración más intenso */
  .fab{
    background:linear-gradient(135deg, var(--whatsapp), #1a8a3f);
  }
}

/* === PARALLAX IMAGE BACKGROUND === */
.parallax-bg{
  position:relative;
  background:var(--brown);
  overflow:hidden;
}
.parallax-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("assets/illustrations/constellation-bg.svg");
  background-size:120% auto;
  background-position:center;
  background-repeat:no-repeat;
  opacity:.12;
  filter:invert(1) sepia(1) hue-rotate(15deg) saturate(2);
  transform:translateZ(0);
}
.parallax-bg .container{position:relative; z-index:2}

/* ============================================ */
/* ============ GUIDES GRID (Sobre nosotros) === */
/* ============================================ */

.guides-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:32px;
}
@media (max-width: 880px){
  .guides-grid{grid-template-columns:1fr; gap:24px}
}

.guide-card{
  background:var(--cream-pure);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:0;
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:200px 1fr;
  transition:all .5s var(--ease);
}
.guide-card::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background:linear-gradient(90deg, var(--gold-soft), var(--gold), var(--gold-deep));
  z-index:5;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .8s var(--ease);
}
.guide-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow);
  border-color:var(--gold);
}
.guide-card:hover::before{transform:scaleX(1)}

.guide-portrait{
  background:linear-gradient(135deg, var(--paper) 0%, var(--beige) 100%);
  display:grid;
  place-items:center;
  position:relative;
  padding:30px 20px;
  border-right:1px solid var(--line-soft);
  overflow:hidden;
}
.guide-portrait::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 30% 30%, var(--gold-glow), transparent 70%);
  opacity:.5;
}
.guide-portrait::after{
  content:"";
  position:absolute;
  bottom:-30px;
  right:-30px;
  width:120px; height:120px;
  border:1px solid var(--gold);
  border-radius:50%;
  opacity:.2;
}
.guide-portrait img{
  width:90%;
  height:auto;
  max-height:160px;
  object-fit:contain;
  position:relative;
  z-index:1;
  filter:drop-shadow(0 8px 24px rgba(200,164,92,.3));
  transition:transform .8s var(--ease);
}
.guide-card:hover .guide-portrait img{
  transform:scale(1.06) rotate(-4deg);
}

.guide-info{
  padding:32px 32px 28px;
  display:flex;
  flex-direction:column;
}
.guide-num{
  font-family:var(--serif);
  font-style:italic;
  color:var(--gold-deep);
  font-size:1rem;
  letter-spacing:.05em;
  margin-bottom:8px;
}
.guide-tag{
  display:inline-block;
  align-self:flex-start;
  padding:5px 14px;
  background:rgba(200,164,92,.12);
  border:1px solid var(--line-gold);
  border-radius:999px;
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--gold-deep);
  font-weight:600;
  margin-bottom:14px;
}
.guide-info h3{
  font-size:1.7rem;
  margin:0 0 .4em;
  letter-spacing:-.01em;
  color:var(--brown);
}
.guide-info h3 em{font-style:italic; color:var(--gold-deep); font-weight:400}

.guide-spec{
  color:var(--text-soft);
  font-size:.95rem;
  line-height:1.55;
  margin:0 0 18px;
}

.guide-skills{
  list-style:none;
  padding:0;
  margin:0 0 20px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px 14px;
}
.guide-skills li{
  font-size:.85rem;
  color:var(--text-soft);
  padding-left:18px;
  position:relative;
  line-height:1.4;
}
.guide-skills li::before{
  content:"✦";
  position:absolute;
  left:0;
  color:var(--gold);
  font-size:.8rem;
}

.guide-meta{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  padding-top:16px;
  margin-top:auto;
  border-top:1px solid var(--line-soft);
  font-family:var(--mono);
  font-size:.65rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--text-mute);
}
.guide-meta span{display:inline-flex; align-items:center; gap:8px}
.guide-meta span + span::before{
  content:"";
  width:3px; height:3px;
  border-radius:50%;
  background:var(--gold);
  display:inline-block;
}
.guide-meta strong{
  color:var(--brown);
  font-weight:700;
  letter-spacing:.05em;
}

/* === GUIDE CARDS MOBILE === */
@media (max-width: 700px){
  .guide-card{
    grid-template-columns:1fr;
  }
  .guide-portrait{
    padding:36px 20px 30px;
    border-right:none;
    border-bottom:1px solid var(--line-soft);
  }
  .guide-portrait img{
    max-height:140px;
  }
  .guide-info{
    padding:28px 24px 24px;
  }
  .guide-info h3{font-size:1.5rem}
  .guide-skills{
    grid-template-columns:1fr;
    gap:4px;
  }
  .guide-skills li{font-size:.88rem}
  .guide-meta{
    font-size:.62rem;
    letter-spacing:.15em;
  }
}

@media (max-width: 480px){
  .guide-portrait{padding:30px 16px 24px}
  .guide-portrait img{max-height:110px}
  .guide-info{padding:24px 22px 22px}
  .guide-info h3{font-size:1.35rem}
  .guide-tag{font-size:.58rem; padding:4px 12px}
}


/* ============================================ */
/* ============ URGENCY TOAST ================= */
/* ============================================ */

.urgency-toast{
  position:fixed;
  bottom:24px;
  left:24px;
  z-index:90;
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 18px 14px 14px;
  background:var(--cream-pure);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 20px 50px -10px rgba(42,26,14,.35), 0 0 0 1px rgba(200,164,92,.2);
  max-width:340px;
  font-family:var(--sans);
  opacity:0;
  transform:translateY(30px) scale(.95);
  pointer-events:none;
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.urgency-toast.show{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.urgency-toast::before{
  content:"";
  position:absolute;
  top:0; left:0;
  width:100%;
  height:3px;
  background:linear-gradient(90deg, var(--gold-soft), var(--gold), var(--gold-deep));
  border-radius:14px 14px 0 0;
}

/* Avatar con pulse verde (presencia activa) */
.urgency-avatar{
  flex-shrink:0;
  width:46px;
  height:46px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%, var(--gold-soft), var(--gold) 55%, var(--gold-deep));
  display:grid;
  place-items:center;
  font-family:var(--serif);
  font-style:italic;
  font-size:1.2rem;
  color:var(--cream-pure);
  position:relative;
  font-weight:600;
  box-shadow:0 4px 12px -2px rgba(200,164,92,.4);
}
.urgency-avatar::after{
  content:"";
  position:absolute;
  bottom:0; right:0;
  width:14px; height:14px;
  border-radius:50%;
  background:#25D366;
  border:2.5px solid var(--cream-pure);
  box-shadow:0 0 0 0 rgba(37,211,102,.6);
  animation:online-pulse 2s ease-out infinite;
}
@keyframes online-pulse{
  0%{box-shadow:0 0 0 0 rgba(37,211,102,.6)}
  70%{box-shadow:0 0 0 10px rgba(37,211,102,0)}
  100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}
}

.urgency-content{
  flex:1;
  min-width:0;
}
.urgency-title{
  font-size:.78rem;
  font-weight:600;
  color:var(--brown);
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:3px;
  letter-spacing:.01em;
}
.urgency-title::before{
  content:"";
  display:inline-block;
  width:6px; height:6px;
  border-radius:50%;
  background:#25D366;
  box-shadow:0 0 6px #25D366;
  flex-shrink:0;
  animation:dot-pulse 1.5s ease-in-out infinite;
}
@keyframes dot-pulse{
  0%,100%{opacity:1; transform:scale(1)}
  50%{opacity:.5; transform:scale(1.3)}
}
.urgency-message{
  font-size:.85rem;
  color:var(--text-soft);
  line-height:1.4;
  margin-bottom:8px;
}
.urgency-cta{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.78rem;
  font-weight:600;
  color:var(--whatsapp);
  text-decoration:none;
  transition:gap .25s, color .25s;
}
.urgency-cta:hover{
  gap:10px;
  color:var(--whatsapp-d);
}
.urgency-cta svg{
  width:14px; height:14px;
  fill:currentColor;
  flex-shrink:0;
}

.urgency-close{
  position:absolute;
  top:8px;
  right:10px;
  width:22px;
  height:22px;
  border-radius:50%;
  background:transparent;
  display:grid;
  place-items:center;
  cursor:pointer;
  opacity:.5;
  transition:opacity .25s, background .25s;
  font-size:1rem;
  line-height:1;
  color:var(--text-soft);
}
.urgency-close:hover{
  opacity:1;
  background:var(--line);
}

/* Mobile: toast on top of FAB area */
@media (max-width:640px){
  .urgency-toast{
    left:12px;
    right:12px;
    bottom:90px;
    max-width:none;
    padding:12px 16px 12px 12px;
  }
  .urgency-avatar{width:42px; height:42px; font-size:1.1rem}
  .urgency-message{font-size:.82rem}
  .urgency-title{font-size:.74rem}
}

/* iOS safe area */
@supports (padding: env(safe-area-inset-bottom)){
  @media (max-width:640px){
    .urgency-toast{
      bottom:calc(90px + env(safe-area-inset-bottom, 0px));
    }
  }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .urgency-avatar::after, .urgency-title::before{animation:none}
}

/* ============================================ */
/* ============ COOKIE CONSENT ================ */
/* ============================================ */

.cookie-banner{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  z-index:88;
  background:rgba(42,26,14,.96);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  color:var(--cream-pure);
  padding:18px 24px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
  transform:translateY(100%);
  transition:transform .6s var(--ease-out);
  border-top:1px solid rgba(200,164,92,.3);
  box-shadow:0 -10px 40px -8px rgba(0,0,0,.35);
}
.cookie-banner.show{transform:translateY(0)}
.cookie-banner::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:2px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
}

.cookie-text{
  flex:1;
  min-width:280px;
  font-size:.88rem;
  line-height:1.5;
  color:rgba(245,239,226,.85);
}
.cookie-text strong{color:var(--cream-pure); font-weight:600}
.cookie-text a{
  color:var(--gold-soft);
  text-decoration:underline;
  text-decoration-color:rgba(217,191,131,.4);
  text-underline-offset:3px;
  transition:color .25s, text-decoration-color .25s;
}
.cookie-text a:hover{
  color:var(--gold);
  text-decoration-color:var(--gold);
}

.cookie-actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.cookie-btn{
  padding:10px 22px;
  border-radius:999px;
  font-family:var(--sans);
  font-size:.84rem;
  font-weight:600;
  border:none;
  cursor:pointer;
  transition:all .3s var(--ease);
  white-space:nowrap;
}
.cookie-btn-primary{
  background:linear-gradient(135deg, var(--gold), var(--gold-deep));
  color:var(--cream-pure);
  box-shadow:0 4px 12px -2px rgba(200,164,92,.4);
}
.cookie-btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 16px -4px rgba(200,164,92,.5);
}
.cookie-btn-secondary{
  background:transparent;
  color:rgba(245,239,226,.8);
  border:1px solid rgba(245,239,226,.25);
}
.cookie-btn-secondary:hover{
  background:rgba(245,239,226,.08);
  color:var(--cream-pure);
  border-color:rgba(245,239,226,.4);
}

@media (max-width:640px){
  .cookie-banner{
    padding:16px 18px;
    flex-direction:column;
    align-items:stretch;
    text-align:center;
    gap:14px;
  }
  .cookie-text{font-size:.82rem; min-width:0}
  .cookie-actions{justify-content:center; width:100%}
  .cookie-btn{flex:1; padding:11px 18px}
}

/* iOS safe area */
@supports (padding: env(safe-area-inset-bottom)){
  .cookie-banner{
    padding-bottom:calc(18px + env(safe-area-inset-bottom, 0px));
  }
}


/* ============================================ */
/* ============ LANDING PAGES (Google Ads) ===== */
/* ============================================ */

/* Layout simplificado: sin nav ni footer pesado */
.lp-body{
  background:var(--cream);
}

/* Mini-nav ultra simple (solo logo + WA) */
.lp-nav{
  position:sticky;
  top:0;
  left:0; right:0;
  z-index:100;
  padding:14px 0;
  background:rgba(245,239,226,.92);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line-soft);
}
.lp-nav-inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--gutter);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
}
.lp-nav .brand{font-size:1.2rem}
.lp-nav .brand-mark{width:36px; height:36px; font-size:.9rem}
.lp-nav-cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 18px;
  background:var(--whatsapp);
  color:#fff !important;
  border-radius:999px;
  font-weight:600;
  font-size:.85rem;
  box-shadow:0 4px 12px -2px rgba(37,211,102,.4);
  transition:all .3s var(--ease);
}
.lp-nav-cta:hover{
  background:var(--whatsapp-d);
  transform:translateY(-1px);
  box-shadow:0 6px 16px -2px rgba(37,211,102,.5);
}
.lp-nav-cta svg{width:14px; height:14px}
@media (max-width:520px){
  .lp-nav-cta span{display:none}
  .lp-nav-cta{padding:10px 12px; width:42px; height:42px; justify-content:center}
  .lp-nav-cta svg{width:18px; height:18px}
}

/* HERO landing (más directo) */
.lp-hero{
  padding:60px 0 40px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.lp-hero::before{
  content:"";
  position:absolute;
  top:-30%;
  left:50%;
  transform:translateX(-50%);
  width:80vw;
  max-width:900px;
  height:600px;
  background:radial-gradient(ellipse, var(--gold-glow), transparent 60%);
  filter:blur(40px);
  pointer-events:none;
}
.lp-hero .container{position:relative; z-index:2}

.lp-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 16px;
  background:rgba(200,164,92,.12);
  border:1px solid var(--line-gold);
  border-radius:999px;
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold-deep);
  font-weight:600;
  margin-bottom:1.5rem;
}
.lp-badge::before{
  content:"";
  width:7px; height:7px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 10px var(--gold);
  animation:dot-pulse 1.5s ease-in-out infinite;
}

.lp-hero h1{
  font-size:clamp(2.4rem, 7vw, 4.6rem);
  line-height:1.04;
  max-width:18ch;
  margin:0 auto .6em;
  letter-spacing:-.025em;
}
.lp-hero h1 em{font-style:italic; color:var(--gold-deep)}

.lp-hero-sub{
  font-size:clamp(1.1rem, 2vw, 1.3rem);
  color:var(--text-soft);
  max-width:42ch;
  margin:0 auto 2.4rem;
  line-height:1.55;
}

.lp-hero-cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:20px 40px;
  background:linear-gradient(135deg, var(--whatsapp) 0%, #1da851 100%);
  color:#fff;
  border-radius:999px;
  font-weight:700;
  font-size:1.05rem;
  box-shadow:0 14px 30px -8px rgba(37,211,102,.55);
  transition:all .35s var(--ease);
  position:relative;
  overflow:hidden;
}
.lp-hero-cta::before{
  content:"";
  position:absolute;
  top:0; left:-100%;
  width:100%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  animation:cta-shine 3s ease-in-out infinite;
}
@keyframes cta-shine{
  0%{left:-100%}
  50%{left:100%}
  100%{left:100%}
}
.lp-hero-cta:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 20px 40px -10px rgba(37,211,102,.65);
  color:#fff;
}
.lp-hero-cta svg{width:22px; height:22px; flex-shrink:0; fill:currentColor; position:relative; z-index:2}
.lp-hero-cta span{position:relative; z-index:2}

.lp-hero-trust{
  display:flex;
  justify-content:center;
  gap:24px;
  margin-top:1.8rem;
  flex-wrap:wrap;
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--text-mute);
}
.lp-hero-trust span{display:inline-flex; align-items:center; gap:6px}
.lp-hero-trust span::before{
  content:"✓";
  color:var(--gold);
  font-weight:700;
  font-family:var(--sans);
}

/* CHECKLIST de problemas (señales) */
.lp-checklist{
  background:var(--cream-pure);
  padding:80px 0;
  border-block:1px solid var(--line);
  position:relative;
}
.lp-checklist h2{
  text-align:center;
  font-size:clamp(1.8rem, 4vw, 2.6rem);
  margin-bottom:3rem;
  max-width:24ch;
  margin-left:auto;
  margin-right:auto;
}
.lp-checklist h2 em{color:var(--gold-deep); font-style:italic}
.lp-check-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:18px;
  max-width:760px;
  margin:0 auto;
}
@media (max-width:640px){
  .lp-check-grid{grid-template-columns:1fr; gap:14px}
}
.lp-check-item{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:18px 22px;
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:14px;
  transition:all .3s var(--ease);
}
.lp-check-item:hover{
  border-color:var(--gold);
  transform:translateX(4px);
}
.lp-check-icon{
  width:30px;
  height:30px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--gold-soft), var(--gold));
  display:grid;
  place-items:center;
  color:var(--cream-pure);
  font-weight:700;
  font-size:.95rem;
  flex-shrink:0;
}
.lp-check-text{
  font-size:.96rem;
  color:var(--brown);
  line-height:1.4;
  font-weight:500;
}

.lp-check-cta{
  text-align:center;
  margin-top:3rem;
  padding-top:2.5rem;
  border-top:1px solid var(--line);
  font-family:var(--serif);
  font-style:italic;
  font-size:1.3rem;
  color:var(--text-soft);
  max-width:34ch;
  margin-left:auto;
  margin-right:auto;
}

/* SOLUTION (lo que ofrecemos) */
.lp-solution{
  padding:90px 0;
  text-align:center;
  position:relative;
}
.lp-solution h2{
  font-size:clamp(1.9rem, 4.5vw, 3rem);
  margin-bottom:.5em;
}
.lp-solution h2 em{color:var(--gold-deep); font-style:italic}
.lp-solution > .container > p{
  color:var(--text-soft);
  max-width:50ch;
  margin:0 auto 3rem;
  font-size:1.08rem;
  line-height:1.6;
}

.lp-features{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
  max-width:980px;
  margin:0 auto 3rem;
}
@media (max-width:760px){
  .lp-features{grid-template-columns:1fr}
}
.lp-feature{
  padding:32px 24px;
  background:var(--cream-pure);
  border:1px solid var(--line);
  border-radius:18px;
  text-align:center;
  transition:all .4s var(--ease);
}
.lp-feature:hover{
  transform:translateY(-4px);
  border-color:var(--gold);
  box-shadow:var(--shadow-sm);
}
.lp-feature-icon{
  width:64px;
  height:64px;
  margin:0 auto 18px;
}
.lp-feature-icon img{width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 4px 12px var(--gold-glow))}
.lp-feature h3{
  font-size:1.2rem;
  margin-bottom:.6em;
  color:var(--brown);
}
.lp-feature p{
  font-size:.92rem;
  color:var(--text-soft);
  line-height:1.55;
  margin:0;
}

/* TESTIMONIO destacado (1 solo, gigante) */
.lp-testimonial{
  background:var(--paper);
  padding:80px 0;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.lp-testimonial::before{
  content:"❝";
  position:absolute;
  top:20px;
  left:50%;
  transform:translateX(-50%);
  font-family:var(--serif);
  color:var(--gold);
  opacity:.18;
  font-size:14rem;
  line-height:.7;
  pointer-events:none;
}
.lp-testimonial .container{position:relative; z-index:2}
.lp-testi-stars{
  color:var(--gold);
  font-size:1.3rem;
  letter-spacing:6px;
  margin-bottom:24px;
}
.lp-testi-quote{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1.4rem, 3vw, 2rem);
  line-height:1.4;
  color:var(--brown);
  max-width:34ch;
  margin:0 auto 32px;
  font-weight:400;
}
.lp-testi-author{
  display:inline-flex;
  align-items:center;
  gap:14px;
}
.lp-testi-avatar{
  width:50px;
  height:50px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--sienna), var(--gold));
  display:grid;
  place-items:center;
  color:var(--cream-pure);
  font-family:var(--serif);
  font-style:italic;
  font-size:1.3rem;
  font-weight:500;
}
.lp-testi-name{
  text-align:left;
}
.lp-testi-name strong{
  display:block;
  font-weight:600;
  color:var(--brown);
  font-size:.95rem;
}
.lp-testi-name span{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--text-mute);
}

/* CTA BLOCK (penúltimo) */
.lp-cta-block{
  padding:90px 0;
  text-align:center;
  background:var(--brown);
  color:var(--cream-pure);
  position:relative;
  overflow:hidden;
}
.lp-cta-block::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 0%, rgba(200,164,92,.3), transparent 60%);
}
.lp-cta-block .container{position:relative; z-index:2}
.lp-cta-block h2{
  font-size:clamp(2rem, 5vw, 3.4rem);
  margin-bottom:.5em;
  color:var(--cream-pure);
  max-width:18ch;
  margin-left:auto;
  margin-right:auto;
}
.lp-cta-block h2 em{color:var(--gold-soft); font-style:italic}
.lp-cta-block p{
  color:rgba(245,239,226,.75);
  max-width:48ch;
  margin:0 auto 2.4rem;
  font-size:1.08rem;
  line-height:1.55;
}

/* FAQ landing (más compacta) */
.lp-faq{
  padding:80px 0;
  background:var(--cream-pure);
}
.lp-faq h2{
  text-align:center;
  margin-bottom:2.5rem;
  font-size:clamp(1.8rem, 4vw, 2.6rem);
}
.lp-faq h2 em{color:var(--gold-deep); font-style:italic}

/* Footer ultra-compacto landing */
.lp-footer{
  padding:40px 0 32px;
  background:var(--cream-pure);
  border-top:1px solid var(--line);
  text-align:center;
}
.lp-footer-text{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--text-mute);
  margin-bottom:14px;
}
.lp-footer-links{
  display:flex;
  justify-content:center;
  gap:20px;
  flex-wrap:wrap;
  font-size:.82rem;
}
.lp-footer-links a{
  color:var(--text-soft);
  transition:color .25s;
}
.lp-footer-links a:hover{color:var(--brown)}

/* Stick CTA bottom (mobile) */
.lp-sticky-cta{
  display:none;
  position:fixed;
  bottom:0; left:0; right:0;
  z-index:90;
  padding:12px 16px;
  background:rgba(250,246,236,.95);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-top:1px solid var(--line);
  box-shadow:0 -8px 24px -4px rgba(42,26,14,.15);
}
.lp-sticky-cta a{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 24px;
  background:var(--whatsapp);
  color:#fff !important;
  border-radius:999px;
  font-weight:700;
  font-size:.95rem;
  box-shadow:0 6px 16px -4px rgba(37,211,102,.5);
}
.lp-sticky-cta svg{width:18px; height:18px; fill:currentColor}
@media (max-width:640px){
  .lp-sticky-cta{display:block}
  /* Padding extra al body para que no tape contenido */
  body.lp-body{padding-bottom:80px}
}
@supports (padding: env(safe-area-inset-bottom)){
  @media (max-width:640px){
    .lp-sticky-cta{padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px))}
    body.lp-body{padding-bottom:calc(80px + env(safe-area-inset-bottom, 0px))}
  }
}


/* ============================================ */
/* ====== LANDING WHATSAPP FAB EXTRA-FLASHY === */
/* ============================================ */

.lp-fab-wrap{
  position:fixed;
  bottom:24px;
  right:24px;
  z-index:95;
  pointer-events:none;
  display:flex;
  align-items:center;
  gap:14px;
  flex-direction:row-reverse; /* etiqueta a la izquierda del botón */
}

/* Etiqueta lateral "Hablar ahora" */
.lp-fab-label{
  pointer-events:auto;
  background:#fff;
  color:var(--brown);
  padding:12px 18px;
  border-radius:14px;
  font-weight:600;
  font-size:.92rem;
  white-space:nowrap;
  box-shadow:0 8px 24px -6px rgba(42,26,14,.25);
  position:relative;
  opacity:0;
  transform:translateX(20px) scale(.9);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);
  cursor:pointer;
  text-decoration:none;
  border:1px solid var(--line);
}
.lp-fab-label::after{
  content:"";
  position:absolute;
  top:50%;
  right:-7px;
  transform:translateY(-50%) rotate(45deg);
  width:14px; height:14px;
  background:#fff;
  border-right:1px solid var(--line);
  border-top:1px solid var(--line);
}
.lp-fab-label.show{
  opacity:1;
  transform:translateX(0) scale(1);
}
.lp-fab-label .label-emoji{
  display:inline-block;
  margin-right:6px;
  animation:wave 2s ease-in-out infinite;
  transform-origin:70% 70%;
}
@keyframes wave{
  0%,100%{transform:rotate(0deg)}
  20%{transform:rotate(14deg)}
  40%{transform:rotate(-8deg)}
  60%{transform:rotate(14deg)}
  80%{transform:rotate(-4deg)}
}
.lp-fab-label-close{
  display:inline-block;
  margin-left:10px;
  width:18px; height:18px;
  border-radius:50%;
  background:rgba(42,26,14,.08);
  color:var(--text-mute);
  font-size:.85rem;
  text-align:center;
  line-height:18px;
  cursor:pointer;
  transition:background .25s, color .25s;
}
.lp-fab-label-close:hover{
  background:rgba(42,26,14,.15);
  color:var(--brown);
}

/* El botón principal */
.lp-fab{
  pointer-events:auto;
  width:68px;
  height:68px;
  border-radius:50%;
  background:linear-gradient(135deg, #25D366 0%, #1da851 60%, #128c4d 100%);
  display:grid;
  place-items:center;
  color:#fff;
  text-decoration:none;
  box-shadow:
    0 12px 32px -6px rgba(37,211,102,.55),
    0 6px 14px -4px rgba(37,211,102,.4),
    inset 0 1px 0 rgba(255,255,255,.25);
  position:relative;
  transition:all .4s var(--ease);
  animation:lp-fab-wiggle 6s ease-in-out infinite;
}
.lp-fab svg{
  width:34px;
  height:34px;
  fill:currentColor;
  position:relative;
  z-index:3;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.15));
}

/* Halo doble pulsante */
.lp-fab::before, .lp-fab::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:#25D366;
  z-index:1;
  animation:lp-fab-pulse 2.4s ease-out infinite;
}
.lp-fab::after{
  animation-delay:1.2s;
}
@keyframes lp-fab-pulse{
  0%{
    transform:scale(1);
    opacity:.6;
  }
  100%{
    transform:scale(1.7);
    opacity:0;
  }
}

/* Wiggle cada 6s para llamar atención */
@keyframes lp-fab-wiggle{
  0%, 90%, 100%{transform:rotate(0deg) scale(1)}
  92%{transform:rotate(-12deg) scale(1.05)}
  94%{transform:rotate(12deg) scale(1.05)}
  96%{transform:rotate(-8deg) scale(1.05)}
  98%{transform:rotate(8deg) scale(1.05)}
}

.lp-fab:hover{
  transform:scale(1.1);
  box-shadow:
    0 16px 40px -6px rgba(37,211,102,.7),
    0 8px 18px -4px rgba(37,211,102,.5),
    inset 0 1px 0 rgba(255,255,255,.3);
  animation:none; /* pausar wiggle al hover */
}
.lp-fab:active{
  transform:scale(.95);
}

/* Indicador "online" verde encima */
.lp-fab-status{
  position:absolute;
  top:6px;
  right:6px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#5af278;
  border:2.5px solid #fff;
  z-index:4;
  box-shadow:0 0 0 0 rgba(90,242,120,.6);
  animation:lp-fab-status-pulse 2s ease-out infinite;
}
@keyframes lp-fab-status-pulse{
  0%{box-shadow:0 0 0 0 rgba(90,242,120,.7)}
  70%{box-shadow:0 0 0 8px rgba(90,242,120,0)}
  100%{box-shadow:0 0 0 0 rgba(90,242,120,0)}
}

/* Badge contador de mensajes (decorativo) */
.lp-fab-badge{
  position:absolute;
  top:-4px;
  left:-4px;
  min-width:22px;
  height:22px;
  padding:0 7px;
  background:#e74c3c;
  color:#fff;
  font-size:.7rem;
  font-weight:700;
  font-family:var(--sans);
  border-radius:11px;
  display:grid;
  place-items:center;
  z-index:4;
  box-shadow:0 4px 8px -2px rgba(231,76,60,.5);
  border:2px solid #fff;
  animation:lp-fab-badge-bounce 0.6s ease-out;
}
@keyframes lp-fab-badge-bounce{
  0%{transform:scale(0)}
  60%{transform:scale(1.2)}
  100%{transform:scale(1)}
}

/* MOBILE adjustments */
@media (max-width:640px){
  .lp-fab-wrap{
    bottom:90px;        /* Encima del sticky-cta */
    right:14px;
  }
  .lp-fab{
    width:60px;
    height:60px;
  }
  .lp-fab svg{width:30px; height:30px}
  .lp-fab-label{
    padding:10px 14px;
    font-size:.85rem;
  }
}

/* Safe area for iPhone notch */
@supports (padding: env(safe-area-inset-bottom)){
  @media (max-width:640px){
    .lp-fab-wrap{
      bottom:calc(90px + env(safe-area-inset-bottom, 0px));
    }
  }
}

/* Accesibilidad: reducir motion */
@media (prefers-reduced-motion: reduce){
  .lp-fab,
  .lp-fab::before,
  .lp-fab::after,
  .lp-fab-status,
  .label-emoji{
    animation:none !important;
  }
  .lp-fab::before, .lp-fab::after{display:none}
}


/* Cuando el FAB está presente, ocultamos el sticky-cta inferior 
   para no duplicar CTAs */
body.lp-body:has(.lp-fab-wrap) .lp-sticky-cta{
  display:none !important;
}
/* Quitar el padding del body que era para el sticky */
body.lp-body:has(.lp-fab-wrap){
  padding-bottom:0 !important;
}
@media (max-width:640px){
  /* Volver a poner el bottom natural del fab en móvil */
  body.lp-body:has(.lp-fab-wrap) .lp-fab-wrap{
    bottom:24px;
  }
  @supports (padding: env(safe-area-inset-bottom)){
    body.lp-body:has(.lp-fab-wrap) .lp-fab-wrap{
      bottom:calc(24px + env(safe-area-inset-bottom, 0px));
    }
  }
}


/* ============================================ */
/* === FIX MOVIL: HERO Y CARDS FLOTANTES ====== */
/* ============================================ */

/* FIX 1: En móvil, las palabras del H1 deben ser visibles SIEMPRE
   sin esperar animación. La animación queda como un "plus" si
   el navegador la ejecuta, pero el contenido NO depende de ella. */
@media (max-width: 920px){
  .word-mask{
    overflow:visible !important;
  }
  .word-mask > span{
    transform:none !important;
    animation:wordFadeIn .7s var(--ease-out) forwards !important;
    opacity:1 !important;
  }
  @keyframes wordFadeIn{
    from{opacity:.4}
    to{opacity:1}
  }
}

/* FIX 2: Garantizar que el H1 sea visible aunque el JS no se ejecute */
.hero h1, .hero h1 .word-mask, .hero h1 .word-mask > span{
  visibility:visible !important;
}

/* FIX 3: En móvil, OCULTAR las cards flotantes "Nuestra Promesa" y 
   "Cómo Trabajamos" — están diseñadas para desktop y en móvil 
   se sobreponen al contenido. Las recuperamos como sección normal después. */
@media (max-width: 920px){
  .hero-card.float-1,
  .hero-card.float-2{
    display:none !important;
  }
}

/* FIX 4: Asegurar que el hero-visual no tape el texto en móvil */
@media (max-width: 920px){
  .hero-visual{
    position:relative !important;
    margin-top:30px;
    z-index:1 !important;
    pointer-events:none;
  }
  .hero-text{
    position:relative;
    z-index:5;
  }
}

/* FIX 5: En móviles muy pequeños (iPhone SE), reducir tamaño del H1 */
@media (max-width: 380px){
  .hero h1{
    font-size:clamp(2rem, 9vw, 2.6rem) !important;
    line-height:1.1 !important;
  }
}

/* FIX 6: Si el preloader nunca se quita (JS bloqueado), 
   aún así el sitio debe ser visible tras 3 segundos */
@keyframes forceShow{
  to{opacity:0; visibility:hidden; pointer-events:none}
}
.preloader{
  animation:forceShow .5s 3s forwards;
}


/* === PROMISE STRIP (sustituye cards flotantes en móvil) === */
.promise-strip{
  display:none;  /* Solo se muestra en móvil */
  background:linear-gradient(180deg, var(--cream) 0%, var(--cream-pure) 100%);
  padding:30px 0 10px;
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
}
.promise-strip .container{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.promise-card{
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid var(--line-gold);
  border-radius:14px;
  padding:18px 20px;
  text-align:center;
  position:relative;
}
.promise-card::before{
  content:"";
  position:absolute;
  top:0; left:50%;
  width:40px;
  height:2px;
  transform:translateX(-50%);
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
}
.promise-label{
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--gold-deep);
  font-weight:600;
  margin-bottom:8px;
}
.promise-text{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.05rem;
  line-height:1.4;
  color:var(--brown);
}

/* Mostrar la strip SOLO en móvil */
@media (max-width: 920px){
  .promise-strip{display:block !important}
}

/* En desktop, oculta la strip y muestra las cards flotantes (comportamiento original) */
@media (min-width: 921px){
  .promise-strip{display:none !important}
}