/* ============================================================
   SEMILLAS DE MOSTAZA — Sistema visual compartido
   Paleta, tipografía, escalas y componentes base.
   Paty H. Lozano · Delta Digital
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Source+Sans+3:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

/* ---------- Tokens ---------- */
:root{
  /* Paleta base (preset 'salvia') */
  --sage:        #7C8B6F;
  --sage-soft:   #95A187;
  --green-deep:  #3E4A34;
  --green-deep2: #4F5D43;
  --cream:       #FBF9F3;
  --cream-2:     #F3F0E7;
  --cream-3:     #EDE8DB;
  --gold:        #B8995A;
  --gold-deep:   #9C7F44;
  --ink:         #2B2B26;
  --ink-soft:    #6B6B60;
  --line:        rgba(43,43,38,.12);

  /* CTA (tweakable) */
  --cta-bg:   #A8843D;
  --cta-bg2:  #B8995A;     /* hover */
  --cta-text: #FFFDF7;

  /* Tipografía (tweakable: --serif) */
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'Source Sans 3', system-ui, -apple-system, sans-serif;

  /* Escala */
  --h1: clamp(2.55rem, 7.2vw, 3.85rem);
  --h2: clamp(1.95rem, 4.6vw, 2.7rem);
  --h3: clamp(1.45rem, 3vw, 1.85rem);
  --lead: clamp(1.3rem, 3.4vw, 1.7rem);
  --body: clamp(1.0625rem, 1.4vw, 1.1875rem);

  --wrap: 660px;
  --wrap-wide: 1080px;
  --radius: 4px;
}

/* ---------- Presets de paleta (Tweak) ---------- */
[data-palette="profunda"]{
  --sage:#6F8268; --sage-soft:#879A7F; --green-deep:#2F3A28; --green-deep2:#41503A;
  --cream:#FAF7EF; --cream-2:#EFEADD; --cream-3:#E6DFCD; --gold:#BC8F4E; --gold-deep:#9A7338;
}
[data-palette="amanecer"]{
  --sage:#8A9374; --sage-soft:#9FA888; --green-deep:#45452F; --green-deep2:#5A5A3E;
  --cream:#FCF8F0; --cream-2:#F4ECDC; --cream-3:#ECE0C9; --gold:#C2A15F; --gold-deep:#A6843F;
}

/* ---------- Reset ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  font-family:var(--sans);
  font-size:var(--body);
  line-height:1.68;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:rgba(184,153,90,.28)}

/* ---------- Tipografía ---------- */
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.08;margin:0;letter-spacing:-.01em;color:var(--ink)}
h1{font-size:var(--h1)}
h2{font-size:var(--h2)}
h3{font-size:var(--h3);font-weight:600}
p{margin:0 0 1.15em;text-wrap:pretty}
em,.italic{font-style:italic}
strong{font-weight:600}

.kicker{
  font-family:var(--sans);
  font-size:.78rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-deep);margin:0 0 1.4rem;
  display:inline-flex;align-items:center;gap:.7em;
}
.kicker::before{content:"";width:26px;height:1px;background:var(--gold)}

.eyebrow{
  font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-soft);margin:0 0 1.1rem;
}

.quote{
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:var(--lead);line-height:1.35;color:var(--ink);
  text-wrap:balance;
}

.lead{font-size:clamp(1.15rem,2.2vw,1.34rem);line-height:1.6;color:var(--ink)}
.muted{color:var(--ink-soft)}
.center{text-align:center}
.serif{font-family:var(--serif)}

/* ---------- Layout ---------- */
.section{padding:clamp(3.6rem,8.5vw,6.8rem) 1.5rem}
.wrap{max-width:var(--wrap);margin:0 auto}
.wrap-wide{max-width:var(--wrap-wide);margin:0 auto}
.bleed-sage{background:var(--sage);color:var(--cream)}
.bleed-green{background:var(--green-deep);color:var(--cream)}
.bleed-cream2{background:var(--cream-2)}

.bleed-green h1,.bleed-green h2,.bleed-green h3,.bleed-sage h1,.bleed-sage h2,.bleed-sage h3{color:var(--cream)}
.bleed-green .muted{color:rgba(251,249,243,.72)}

/* ---------- Botón CTA ---------- */
.cta{
  display:inline-flex;align-items:center;justify-content:center;gap:.65em;
  font-family:var(--sans);font-weight:600;font-size:1.075rem;letter-spacing:.005em;
  color:var(--cta-text);background:var(--cta-bg);
  padding:1.12em 2.1em;border:none;border-radius:var(--radius);
  cursor:pointer;text-decoration:none;
  box-shadow:0 1px 2px rgba(43,43,38,.18), 0 14px 30px -12px rgba(168,132,61,.55);
  transition:transform .18s cubic-bezier(.3,.7,.4,1), background .2s, box-shadow .2s;
  text-align:center;line-height:1.25;
}
.cta:hover{background:var(--cta-bg2);transform:scale(1.02) translateY(-1px);
  box-shadow:0 2px 4px rgba(43,43,38,.2), 0 18px 38px -12px rgba(168,132,61,.6)}
.cta:active{transform:scale(.995)}
.cta--lg{font-size:1.18rem;padding:1.22em 2.4em;width:100%;max-width:440px}
.cta__sub{font-weight:400;opacity:.82;font-size:.92em}
.cta .seedmark{width:1.05em;height:1.05em;flex:none}

.trust{font-size:.92rem;color:var(--ink-soft);margin-top:1.1rem;line-height:1.5}
.trust strong{color:var(--ink);font-weight:600}

/* ---------- Marca / sello semilla ---------- */
.seedmark path,.seedmark circle{stroke:currentColor;stroke-width:1.5;fill:none;
  stroke-linecap:round;stroke-linejoin:round}

/* ---------- Imagen / slots ---------- */
image-slot{display:block;background:var(--cream-3);
  box-shadow:inset 0 0 0 1px var(--line)}
.photo-note{font-size:.78rem;color:var(--ink-soft);letter-spacing:.02em;margin-top:.6rem}

/* ---------- Fade-in al scroll ---------- */
.reveal{opacity:0;transform:translateY(22px);
  transition:opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

/* ---------- Barra de progreso de lectura ---------- */
.progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:60;
  background:linear-gradient(90deg,var(--gold),var(--gold-deep));transition:width .1s linear}

/* ---------- Divisor decorativo ---------- */
.rule{display:flex;align-items:center;justify-content:center;gap:1rem;margin:0 auto;
  color:var(--gold);max-width:260px}
.rule::before,.rule::after{content:"";flex:1;height:1px;background:var(--line)}
.rule .seedmark{width:20px;height:20px;opacity:.9}

/* ---------- Listas con check ---------- */
.checklist{list-style:none;margin:0;padding:0;display:grid;gap:.95rem}
.checklist li{display:grid;grid-template-columns:1.6em 1fr;gap:.85em;align-items:start;
  line-height:1.5}
.checklist .ck{width:1.45em;height:1.45em;margin-top:.12em;color:var(--gold-deep);flex:none}
.checklist .ck path{stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Tarjetas ---------- */
.card{background:var(--cream);border:1px solid var(--line);border-radius:6px;
  padding:clamp(1.6rem,3vw,2.1rem)}

/* ---------- Acordeón FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{display:flex;align-items:flex-start;justify-content:space-between;gap:1.2rem;
  width:100%;background:none;border:none;cursor:pointer;text-align:left;
  font-family:var(--serif);font-size:clamp(1.18rem,2.4vw,1.4rem);font-weight:600;color:var(--ink);
  padding:1.45rem .2rem;line-height:1.25}
.faq__q:hover{color:var(--gold-deep)}
.faq__ic{flex:none;width:1.1em;height:1.1em;margin-top:.18em;position:relative;transition:transform .3s}
.faq__ic::before,.faq__ic::after{content:"";position:absolute;background:var(--gold-deep);
  top:50%;left:50%;transform:translate(-50%,-50%)}
.faq__ic::before{width:100%;height:1.6px}
.faq__ic::after{width:1.6px;height:100%;transition:transform .3s}
.faq__item[open] .faq__ic::after{transform:translate(-50%,-50%) scaleY(0)}
.faq__a{overflow:hidden;color:var(--ink-soft);font-size:1.06rem;line-height:1.62;
  padding:0 .2rem}
.faq__a p{margin:0 0 1.4rem}

/* ---------- CTA sticky móvil ---------- */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:50;
  padding:.7rem .9rem calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(251,249,243,.86);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  transform:translateY(120%);transition:transform .35s cubic-bezier(.3,.7,.4,1)}
.sticky-cta.show{transform:none}
.sticky-cta .cta{width:100%;padding:.95em 1rem;font-size:1.05rem}
@media (min-width:880px){.sticky-cta{display:none}}

/* ---------- Countdown ---------- */
.countdown{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}
.cd__cell{min-width:64px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:6px;padding:.7rem .4rem;text-align:center}
.cd__n{font-family:var(--serif);font-size:2.1rem;font-weight:600;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--cream)}
.cd__l{font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(251,249,243,.6);margin-top:.45rem}

/* badge */
.badge{display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-deep);background:rgba(184,153,90,.13);
  border:1px solid rgba(184,153,90,.4);border-radius:999px;padding:.42em 1em}
.badge--solid{background:var(--gold);color:#fff;border-color:transparent}

/* tachado de precio */
.strike{text-decoration:line-through;text-decoration-thickness:1.5px;
  text-decoration-color:rgba(184,153,90,.7);color:var(--ink-soft)}

/* utilidades */
.stack-sm > * + *{margin-top:.6rem}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.hide{display:none !important}

/* ============================================================
   COMPONENTES COMPARTIDOS DEL EMBUDO (L1, L3, L5, L6, L7)
   ============================================================ */

/* ---------- Formularios (compartido) ---------- */
.field{display:grid;gap:.4rem;margin-bottom:1.05rem}
.field label{font-size:.82rem;font-weight:600;letter-spacing:.04em;color:var(--ink)}
.field label .opt{color:var(--ink-soft);font-weight:400;letter-spacing:0}
.field input{font-family:var(--sans);font-size:1.02rem;padding:.92em 1em;border:1px solid var(--line);
  border-radius:8px;background:var(--cream);color:var(--ink);outline:none;width:100%;
  transition:border-color .2s,background .2s,box-shadow .2s}
.field input::placeholder{color:#A8A496}
.field input:focus{border-color:var(--gold);background:#fff;box-shadow:0 0 0 3px rgba(184,153,90,.16)}
.field input:not(:placeholder-shown):valid{border-color:var(--sage)}
.field .hint{font-size:.78rem;color:var(--ink-soft)}
.form-success{display:none;text-align:center;padding:1rem 0}
.form-success .seal{width:56px;height:56px;border-radius:50%;border:1.5px solid var(--gold);
  display:flex;align-items:center;justify-content:center;margin:0 auto 1.2rem;color:var(--gold-deep)}
.form-success .seal svg{width:24px;height:24px}
.form-success .seal path{stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.micro{font-size:.85rem;color:var(--ink-soft);text-align:center;margin:1rem 0 0;
  display:flex;align-items:center;justify-content:center;gap:.5em}
.micro .seedmark{width:1em;height:1em;color:var(--gold);flex:none}

/* ---------- Player de video (placeholder simulado) ---------- */
.player{position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;
  background:linear-gradient(155deg,var(--green-deep),var(--sage));
  box-shadow:0 34px 80px -38px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.1)}
.player__poster{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1.3rem;text-align:center;padding:2rem;
  color:var(--cream);cursor:pointer;transition:opacity .45s;z-index:2}
.player__poster .ttl{font-family:var(--serif);font-size:clamp(1.35rem,3.2vw,2rem);max-width:20ch;line-height:1.18;color:var(--cream)}
.player__poster .sub{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(251,249,243,.72)}
.player.playing .player__poster{opacity:0;pointer-events:none}
.player__play{width:84px;height:84px;border-radius:50%;border:1.5px solid rgba(255,255,255,.8);
  display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08);
  transition:transform .2s,background .2s}
.player__poster:hover .player__play{transform:scale(1.06);background:rgba(255,255,255,.18)}
.player__play::after{content:"";border-left:22px solid var(--cream);
  border-top:13px solid transparent;border-bottom:13px solid transparent;margin-left:6px}
.player__live{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:.8rem;color:rgba(251,249,243,.5);font-size:.74rem;letter-spacing:.2em;
  text-transform:uppercase}
.player__live .seedmark{width:30px;height:30px;opacity:.5;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.3}50%{opacity:.65}}
.player__bar{position:absolute;left:0;bottom:0;height:4px;background:var(--gold);width:0;z-index:4}
.player__time{position:absolute;right:14px;bottom:13px;font-size:.76rem;font-variant-numeric:tabular-nums;
  color:rgba(251,249,243,.9);background:rgba(43,43,38,.45);padding:.22em .6em;border-radius:4px;z-index:4}

/* ---------- CTA que se revela (temporizado) ---------- */
.cta-reveal{max-height:0;opacity:0;overflow:hidden;transform:translateY(12px);
  transition:max-height .7s cubic-bezier(.22,.61,.36,1),opacity .6s ease,transform .6s ease,margin .5s}
.cta-reveal.cta-live{max-height:1200px;opacity:1;transform:none}
.cta-locked{font-size:.86rem;color:var(--ink-soft);text-align:center;display:flex;
  align-items:center;justify-content:center;gap:.5em;padding:1.2rem 0}
.cta-locked .lk{width:1.05em;height:1.05em;opacity:.6}
.cta-reveal.cta-live ~ .cta-locked{display:none}

/* ---------- Botones secundarios ---------- */
.cta-ghost{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--sans);font-weight:600;font-size:1rem;color:var(--gold-deep);
  background:transparent;border:1.5px solid var(--gold);border-radius:var(--radius);
  padding:.95em 1.6em;text-decoration:none;cursor:pointer;transition:background .2s,color .2s}
.cta-ghost:hover{background:var(--gold);color:#fff}

/* ---------- Tile de acción (onboarding) ---------- */
.action-tile{display:flex;align-items:center;gap:1.1rem;text-decoration:none;color:inherit;
  background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:1.15rem 1.3rem;
  transition:border-color .2s,transform .2s,box-shadow .2s}
.action-tile:hover{border-color:var(--gold);transform:translateY(-2px);
  box-shadow:0 18px 36px -24px rgba(43,43,38,.45)}
.action-tile .num{width:40px;height:40px;flex:none;border-radius:50%;border:1px solid var(--gold);
  display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:600;
  font-size:1.2rem;color:var(--gold-deep)}
.action-tile .tl{font-weight:600;font-size:1.06rem;color:var(--ink);margin:0}
.action-tile .ds{font-size:.9rem;color:var(--ink-soft);margin:.15rem 0 0}
.action-tile .arrow{margin-left:auto;color:var(--gold-deep);font-size:1.3rem;flex:none}

/* ---------- Animación de brote (onboarding) ---------- */
.sprout-anim{position:relative;display:inline-flex;align-items:center;justify-content:center}
.sprout-anim svg{width:74px;height:74px;color:var(--gold-deep);position:relative;z-index:2}
.sprout-anim svg path{stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:64;stroke-dashoffset:64;animation:sproutDraw 1.4s cubic-bezier(.4,0,.2,1) .15s forwards}
@keyframes sproutDraw{to{stroke-dashoffset:0}}
.sprout-anim::before{content:"";position:absolute;width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle,rgba(184,153,90,.28),transparent 68%);
  opacity:0;animation:glowIn 1.5s ease forwards}
@keyframes glowIn{0%{opacity:0;transform:scale(.6)}40%{opacity:1}100%{opacity:.5;transform:scale(1)}}
.seedfall{position:absolute;top:0;width:7px;height:9px;background:var(--gold);
  border-radius:50% 50% 50% 50%/62% 62% 38% 38%;opacity:0;z-index:1;
  animation:seedFall 1.7s ease-in forwards}
@keyframes seedFall{0%{opacity:0;transform:translateY(-26px) rotate(0)}
  18%{opacity:.85}100%{opacity:0;transform:translateY(74px) rotate(190deg)}}
@media (prefers-reduced-motion: reduce){
  .sprout-anim svg path{animation:none;stroke-dashoffset:0}
  .sprout-anim::before{animation:none;opacity:.5}
  .seedfall{display:none}
}

/* ---------- Pie de embudo (navegación) ---------- */
.funnel-foot{padding:2.6rem 1.5rem 3.4rem;text-align:center;border-top:1px solid var(--line);
  color:var(--ink-soft);font-size:.85rem}
.funnel-foot .seedmark{width:22px;height:22px;color:var(--gold);margin:0 auto .7rem}
.funnel-foot a{color:var(--gold-deep);text-decoration:none;font-weight:600}
.funnel-foot a:hover{text-decoration:underline}
.funnel-foot .links{display:flex;gap:1.3rem;justify-content:center;flex-wrap:wrap;margin:.5rem 0 1.2rem}