:root{
  --bg:#F3EFE5;--card:#FFFCF5;--line:#E4DDCD;--line2:#CFC6B4;--ink:#282725;--muted:#5A544B;--muted2:#6E675C;
  --orange:#DD7C15;--orange-dark:#C86C0C;--brown:#9C5209;--dark:#282725;--dark2:#3A3835;--cream2:#CFC8BA;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;line-height:1.5}
h1,h2,h3{font-family:"Bricolage Grotesque",Inter,sans-serif;letter-spacing:-.02em;margin:0;line-height:1.08}
p{margin:0}
a{color:var(--brown)}a:hover{color:#7A3F05}
img{max-width:100%;display:block}
input,select,button{font:inherit}
input,select{width:100%;height:50px;padding:0 14px;border:1px solid var(--line2);border-radius:10px;background:#fff;color:var(--ink)}
input:focus,select:focus{outline:2px solid var(--orange);outline-offset:1px;border-color:var(--orange)}
select:invalid{color:#8A8378}
label{font-size:14px;font-weight:600}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 22px;border-radius:12px;font-weight:600;font-size:16px;text-decoration:none;border:0;cursor:pointer;text-align:center}
.btn-primary{background:var(--orange);color:#fff}.btn-primary:hover{background:var(--orange-dark);color:#fff}
.btn-dark{background:var(--dark);color:#fff}.btn-dark:hover{background:#000;color:#fff}
.btn-ghost{background:#fff;color:var(--ink);border:1px solid var(--line2)}.btn-ghost:hover{border-color:var(--ink);color:var(--ink)}
.btn-on-dark{background:var(--dark2);color:var(--bg)}.btn-on-dark:hover{background:#4a4845;color:#fff}
.btn:disabled{opacity:.6;cursor:wait}
.btn-wide{width:100%}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
.card{background:var(--card);border:1px solid var(--line);border-radius:20px}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brown)}
.muted{color:var(--muted)}
.h-xl{font-size:clamp(36px,5vw,60px);font-weight:800;max-width:640px}
.h-l{font-size:clamp(30px,3.4vw,42px);font-weight:800}
.lead{font-size:clamp(17px,1.4vw,20px);color:var(--muted);max-width:560px}
.hidden{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* header */
.site-header{background:var(--bg);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:72px}
.site-header img{height:32px;width:auto}
.nav{display:flex;gap:26px;font-size:15px;font-weight:500}
.nav a{color:var(--ink);text-decoration:none}
.header-cta{display:flex;gap:10px;align-items:center}
.header-cta .btn{min-height:44px;padding:0 16px;font-size:15px}

/* sections */
section{padding:88px 0}
.hero{padding:64px 0 80px}
.hero .wrap{display:flex;flex-wrap:wrap;gap:56px;align-items:flex-start}
.hero-copy{flex:1 1 520px;min-width:0;display:flex;flex-direction:column;gap:22px}
.proof{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;font-size:15px;font-weight:500}
.proof span{display:inline-flex;align-items:center;gap:7px}
.hero-img{width:100%;max-width:640px;aspect-ratio:1200/628;object-fit:cover;border-radius:20px;margin-top:6px}

.form-card{flex:1 1 400px;max-width:480px;min-width:0;padding:30px;display:flex;flex-direction:column;gap:14px;box-shadow:0 20px 50px rgba(60,40,10,.10)}
.form-card h2{font-size:26px;font-weight:700}
.field{display:flex;flex-direction:column;gap:6px}
.field .hint{font-size:12.5px;color:var(--muted)}
.error{color:#B42318;font-size:13.5px;font-weight:600}
.consent{font-size:12.5px;line-height:1.5;color:var(--muted)}
.hp{position:absolute;left:-9999px;top:-9999px;height:0;width:0;opacity:0}

.feature .wrap{display:flex;flex-wrap:wrap;gap:48px;align-items:center}
.feature .wrap>*{flex:1 1 440px;min-width:0}
.feature.reverse .wrap{flex-direction:row-reverse}
.feature-copy{display:flex;flex-direction:column;gap:20px}
.feature-img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:24px}
.ticks{display:flex;flex-direction:column;gap:14px}
.tick{display:flex;gap:12px;align-items:flex-start;font-size:17px;line-height:1.5}
.tick svg{flex:none;margin-top:3px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.alt{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.dark{background:var(--dark);color:var(--bg)}
.dark .eyebrow{color:#F0A35A}.dark .lead,.dark .muted{color:var(--cream2)}.dark h2{color:var(--bg)}

.agenda .wrap{display:flex;flex-wrap:wrap;gap:48px;align-items:flex-start}
.agenda .wrap>*{flex:1 1 440px;min-width:0}
.note{padding:16px 20px;display:flex;gap:14px;align-items:center;background:var(--bg)}
.steps{display:flex;flex-direction:column;gap:10px;font-size:15px}
.steps div{display:flex;gap:10px;align-items:center}
.steps b{width:26px;height:26px;border-radius:50%;background:var(--bg);display:inline-flex;align-items:center;justify-content:center;font-size:13px;flex:none}

.pricing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.plan{padding:32px;display:flex;flex-direction:column;gap:16px;position:relative}
.plan.featured{border:2px solid var(--orange)}
.plan .badge{position:absolute;top:-14px;left:24px;background:var(--orange);color:#fff;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:999px}
.price{font-family:"Bricolage Grotesque",Inter,sans-serif;font-size:44px;font-weight:800;letter-spacing:-.02em}
.price small{font-size:16px;font-weight:500;color:var(--muted);font-family:Inter}
.plan .btn{margin-top:auto}

.faq .wrap{display:flex;flex-wrap:wrap;gap:48px}
.faq-list{flex:2 1 560px;min-width:0;border-bottom:1px solid var(--line)}
.faq details{border-top:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:600;font-size:18px;padding:18px 0;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--brown);font-weight:700}
.faq details[open] summary::after{content:"–"}
.faq p{margin:0 0 18px;color:var(--muted);line-height:1.6;max-width:760px}

.final{background:var(--orange);color:#fff}
.final .wrap{display:flex;flex-wrap:wrap;gap:32px;align-items:center;justify-content:space-between}
.final h2{color:#fff}.final p{color:#FBE6CF;font-size:18px}
.site-footer{background:var(--dark);color:var(--cream2);padding:40px 0;font-size:14px}
.site-footer .wrap{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}
.site-footer a{color:var(--cream2)}
.site-footer img{height:26px;width:auto}

/* thank-you */
.thanks .wrap{display:flex;flex-wrap:wrap;gap:56px;align-items:flex-start}
.thanks-copy{flex:1 1 460px;min-width:0;display:flex;flex-direction:column;gap:22px}
.thanks-cal{flex:1 1 440px;min-width:0;padding:24px;display:flex;flex-direction:column;gap:14px;box-shadow:0 20px 50px rgba(60,40,10,.10)}
.calendly-inline{min-width:320px;height:700px;border:0;border-radius:14px}
.mini-form{padding:22px;display:flex;flex-direction:column;gap:12px;max-width:560px}
.ok{color:#067647;font-weight:600;font-size:14px}

/* header CTA swap: "Recibir la guía" shows once the form has scrolled away (sticky header on mobile,
   so nothing sits at the bottom where Netlify's badge is) */
#headerGuia{display:none}
body.form-away #headerGuia{display:inline-flex}
body.form-away #headerAgenda{display:none}

@media (max-width:860px){
  section{padding:56px 0}
  .hero{padding:28px 0 40px}
  .wrap{padding:0 16px}
  .nav{display:none}
  .header-cta .btn-ghost{display:none}
  .form-card{max-width:none;padding:20px;order:4}
  .hero .wrap{flex-direction:column;gap:18px}
  .hero-copy{display:contents}
  .hero-copy .eyebrow{order:1}.hero-copy .h-xl{order:2}.hero-copy .lead{order:3}
  .hero-copy .proof{order:5;margin-top:10px}.hero-img{order:6}
  .pricing-grid{grid-template-columns:1fr}
  .feature .wrap{gap:24px}
  .feature .wrap>*{flex-basis:100%}
  .cta-row .btn{width:100%}
  .site-header{position:sticky;top:0;z-index:30}
  #headerGuia{padding:0 14px}
  .calendly-inline{height:640px}
}
