/* ============ INTERACTIVE MODULES =============
   Calculadora · Formulario · Agendamiento · Chat IA
   Modo claro/oscuro · Cookies · Gracias · Compartir
*/

/* ---- Light theme override ---- */
html[data-theme="light"]{
  --ink:        #F4EFE3;
  --ink-2:      #EAE2CE;
  --panel:      #FFFFFF;
  --panel-2:    #F8F2E2;
  --line:       rgba(140,106,47,.28);
  --line-soft:  rgba(11,15,26,.08);
  --parchment:  #1B1408;
  --parchment-d:#3D3220;
  --muted:      #7A6C4D;
  --gold:       #8C6A2F;
  --gold-deep:  #5A4318;
  --gold-light: #C9A86A;
}
html[data-theme="light"] body::before{
  background:
    radial-gradient(1200px 600px at 50% -200px, rgba(140,106,47,.10), transparent 60%),
    radial-gradient(800px 400px at 100% 120%, rgba(140,106,47,.06), transparent 60%);
}
html[data-theme="light"] body::after{opacity:.18}
html[data-theme="light"] .topbar{background:rgba(244,239,227,.85)}
html[data-theme="light"] .cta-whats{
  color:#06180D;
  box-shadow: 0 0 0 1px rgba(0,0,0,.06) inset, 0 14px 30px -10px rgba(37,209,102,.4);
}
html[data-theme="light"] .crest{background:#0B0F1A}
html[data-theme="light"] .testi .avatar{color:#fff}
html[data-theme="light"] .step-num,
html[data-theme="light"] .audience-num{color:var(--gold-deep)}

/* ---- THEME TOGGLE ---- */
.theme-toggle{
  width:36px;height:36px;
  border:1px solid var(--line);
  display:grid;place-items:center;
  margin-right:10px;
  color:var(--gold);
  border-radius:50%;
  transition: border-color .25s ease, transform .3s ease;
}
.theme-toggle:hover{border-color:var(--gold);transform:rotate(20deg)}
.theme-toggle svg{width:16px;height:16px}
.theme-toggle .sun{display:none}
html[data-theme="light"] .theme-toggle .sun{display:block}
html[data-theme="light"] .theme-toggle .moon{display:none}

.topbar-right{display:flex;align-items:center}

/* ============ SECONDARY ACTIONS BAR (under hero CTA) ============ */
.hero-actions{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  margin-top:14px;
}
.hero-action{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 10px;
  border:1px solid var(--line);
  color:var(--parchment);
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  transition: all .25s ease;
  background:var(--panel);
}
.hero-action:hover{border-color:var(--gold);color:var(--gold)}
.hero-action svg{width:14px;height:14px;color:var(--gold)}

/* ============ MODAL (shared) ============ */
.modal-backdrop{
  position:fixed;inset:0;
  background:rgba(5,7,14,.78);
  backdrop-filter: blur(8px);
  z-index:200;
  display:none;
  align-items:flex-end;justify-content:center;
  opacity:0;transition:opacity .3s ease;
}
.modal-backdrop.open{display:flex;opacity:1}
@media (min-width:720px){
  .modal-backdrop{align-items:center}
}
.modal{
  width:100%;max-width:480px;
  max-height:92vh;overflow-y:auto;
  background:var(--ink);
  border:1px solid var(--gold);
  border-bottom:0;
  position:relative;
  transform:translateY(20px);
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
  padding:28px 24px 32px;
}
@media (min-width:720px){
  .modal{border-bottom:1px solid var(--gold);max-height:88vh}
}
.modal-backdrop.open .modal{transform:none}
.modal::before,.modal::after{
  content:"";position:absolute;width:18px;height:18px;border:1px solid var(--gold);
}
.modal::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.modal::after{top:-1px;right:-1px;border-left:0;border-bottom:0}
.modal-close{
  position:absolute;top:14px;right:14px;
  width:32px;height:32px;
  border:1px solid var(--line);
  display:grid;place-items:center;
  color:var(--parchment-d);
  z-index:5;
  border-radius:50%;
  transition:all .25s ease;
}
.modal-close:hover{border-color:var(--gold);color:var(--gold)}
.modal-close::before,.modal-close::after{
  content:"";position:absolute;width:13px;height:1px;background:currentColor;
}
.modal-close::before{transform:rotate(45deg)}
.modal-close::after{transform:rotate(-45deg)}

.modal-eyebrow{
  font-size:10px;letter-spacing:.4em;text-transform:uppercase;
  color:var(--gold);
  margin-bottom:10px;
  display:inline-flex;align-items:center;gap:8px;
}
.modal-eyebrow::before{content:"";width:18px;height:1px;background:var(--gold)}
.modal h3.modal-title{
  font-family:var(--serif);font-weight:500;font-size:26px;line-height:1.15;
  color:var(--parchment);
  margin-bottom:8px;
  text-wrap:balance;
}
.modal h3.modal-title em{font-style:italic;color:var(--gold)}
.modal p.modal-sub{
  font-size:13.5px;color:var(--parchment-d);margin-bottom:22px;line-height:1.6;
}

/* ============ CALCULATOR ============ */
.calc-progress{
  display:flex;gap:6px;margin-bottom:22px;
}
.calc-progress span{
  flex:1;height:2px;background:var(--line);
  transition:background .3s ease;
}
.calc-progress span.active{background:var(--gold)}
.calc-step{display:none}
.calc-step.active{display:block;animation:slideUp .4s ease both}
@keyframes slideUp{from{transform:translateY(8px)}to{transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.calc-q{
  font-family:var(--serif);font-size:20px;line-height:1.3;
  color:var(--parchment);margin-bottom:18px;
  text-wrap:balance;
}
.calc-options{display:grid;gap:10px}
.calc-opt{
  text-align:left;width:100%;
  padding:16px 18px;
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--parchment);
  font-size:14.5px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  transition:all .2s ease;
}
.calc-opt:hover{border-color:var(--gold);background:var(--panel-2)}
.calc-opt .arrow{
  color:var(--gold);font-size:18px;font-family:var(--serif);
}
.calc-result{
  text-align:center;padding:20px 4px 4px;
}
.calc-result .badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border:1px solid var(--gold);color:var(--gold);
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  margin-bottom:18px;
}
.calc-result .badge .dot{width:7px;height:7px;background:var(--gold);transform:rotate(45deg)}
.calc-result.match-yes .badge{color:#2BD171;border-color:#2BD171}
.calc-result.match-yes .badge .dot{background:#2BD171}
.calc-result.match-maybe .badge{color:var(--gold)}
.calc-result.match-low .badge{color:var(--alert);border-color:var(--alert)}
.calc-result.match-low .badge .dot{background:var(--alert)}
.calc-result h4{
  font-family:var(--serif);font-size:24px;color:var(--parchment);
  line-height:1.2;margin-bottom:10px;text-wrap:balance;
}
.calc-result h4 em{color:var(--gold);font-style:italic}
.calc-result p{
  font-size:14px;color:var(--parchment-d);line-height:1.6;
  max-width:38ch;margin:0 auto 22px;
}

/* ============ FORM ============ */
.form-grid{
  display:grid;gap:14px;
}
.field{display:flex;flex-direction:column;gap:6px}
.field label{
  font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);font-weight:500;
}
.field label .req{color:var(--alert);margin-left:3px}
.field input,
.field select,
.field textarea{
  width:100%;
  padding:13px 14px;
  background:var(--panel);
  border:1px solid var(--line);
  color:var(--parchment);
  font-family:var(--sans);
  font-size:14.5px;
  border-radius:0;
  transition:border-color .2s ease, background .2s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--gold);background:var(--panel-2);
}
.field textarea{resize:vertical;min-height:90px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.field-error{font-size:11px;color:var(--alert);min-height:14px}

.chip-group{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 14px;
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--parchment-d);
  font-size:12.5px;
  cursor:pointer;
  transition:all .2s ease;
}
.chip:hover{border-color:var(--gold);color:var(--parchment)}
.chip input{display:none}
.chip.selected{
  border-color:var(--gold);background:rgba(201,168,106,.12);
  color:var(--gold);
}

.form-submit{
  margin-top:8px;
}
.form-submit .cta-whats{width:100%;max-width:none}

.form-footnote{
  margin-top:14px;
  font-size:11px;color:var(--muted);text-align:center;
  letter-spacing:.04em;line-height:1.6;
}
.form-footnote .lock{color:var(--gold);margin-right:4px}

/* ============ SCHEDULER ============ */
.sched-tabs{
  display:flex;gap:2px;
  margin-bottom:16px;
  border:1px solid var(--line);
  padding:3px;
}
.sched-tab{
  flex:1;padding:10px;
  font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--parchment-d);
  cursor:pointer;
  transition:all .2s ease;
}
.sched-tab.active{background:var(--gold);color:var(--ink);font-weight:600}

.sched-days{
  display:grid;grid-template-columns:repeat(5,1fr);gap:8px;
  margin-bottom:20px;
}
.sched-day{
  text-align:center;padding:12px 4px;
  border:1px solid var(--line);
  background:var(--panel);
  cursor:pointer;
  transition:all .2s ease;
}
.sched-day:hover{border-color:var(--gold)}
.sched-day.selected{
  border-color:var(--gold);background:rgba(201,168,106,.12);
}
.sched-day.selected .num{color:var(--gold)}
.sched-day .dow{
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);
}
.sched-day .num{
  font-family:var(--serif);font-size:22px;color:var(--parchment);
  margin-top:4px;line-height:1;
}
.sched-day .mon{
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin-top:4px;
}

.sched-times-label{
  font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);margin-bottom:10px;
}
.sched-times{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  margin-bottom:20px;
}
.sched-time{
  padding:12px 4px;text-align:center;
  border:1px solid var(--line);
  background:var(--panel);
  font-family:var(--mono);font-size:13px;
  color:var(--parchment);
  cursor:pointer;
  transition:all .2s ease;
}
.sched-time:hover{border-color:var(--gold)}
.sched-time.selected{
  background:var(--gold);color:var(--ink);font-weight:600;border-color:var(--gold);
}
.sched-time.disabled{
  opacity:.35;cursor:not-allowed;text-decoration:line-through;
}

.sched-summary{
  padding:14px 16px;
  border:1px solid var(--gold);
  background:rgba(201,168,106,.06);
  margin-bottom:18px;
  font-size:13px;color:var(--parchment);
}
.sched-summary .label{
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);margin-bottom:4px;
}

/* ============ AI CHAT (floating) ============ */
.chat-fab{
  position:fixed;
  right:16px;bottom:90px;
  width:56px;height:56px;border-radius:50%;
  background:var(--ink);
  border:1px solid var(--gold);
  color:var(--gold);
  display:grid;place-items:center;
  z-index:55;
  box-shadow:0 14px 30px -10px rgba(0,0,0,.6), 0 0 0 4px rgba(201,168,106,.08);
  transition:transform .25s ease;
}
.chat-fab:hover{transform:translateY(-2px)}
.chat-fab svg{width:24px;height:24px}
.chat-fab .badge-dot{
  position:absolute;top:6px;right:6px;
  width:10px;height:10px;border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 3px var(--ink);
}
.chat-fab.open{display:none}

.chat-window{
  position:fixed;
  right:14px;bottom:80px;
  width:calc(100vw - 28px);max-width:380px;
  height:520px;max-height:70vh;
  background:var(--ink);
  border:1px solid var(--gold);
  z-index:65;
  display:none;
  flex-direction:column;
  box-shadow:0 20px 50px -10px rgba(0,0,0,.7);
  transform:translateY(20px);opacity:0;
  transition:transform .3s ease, opacity .3s ease;
}
.chat-window.open{display:flex;transform:none;opacity:1}
.chat-window::before,.chat-window::after{
  content:"";position:absolute;width:14px;height:14px;border:1px solid var(--gold);
}
.chat-window::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.chat-window::after{top:-1px;right:-1px;border-left:0;border-bottom:0}
.chat-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid var(--line);
  flex-shrink:0;
}
.chat-header .who{display:flex;align-items:center;gap:10px}
.chat-header .avatar{
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold-deep),var(--gold));
  display:grid;place-items:center;color:var(--ink);
  font-family:var(--serif);font-weight:600;font-size:14px;
  position:relative;overflow:hidden;
}
.chat-header .avatar img{width:100%;height:100%;object-fit:cover;object-position:center 25%}
.chat-header .name{
  font-family:var(--serif);font-size:15px;color:var(--parchment);
  line-height:1.1;
}
.chat-header .status{
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:#2BD171;margin-top:3px;
  display:flex;align-items:center;gap:5px;
}
.chat-header .status::before{
  content:"";width:6px;height:6px;border-radius:50%;background:#2BD171;
  animation:pulseGreen 1.6s infinite;
}
@keyframes pulseGreen{0%,100%{opacity:1}50%{opacity:.4}}
.chat-close{
  width:30px;height:30px;
  border:1px solid var(--line);
  display:grid;place-items:center;
  color:var(--parchment-d);
  border-radius:50%;
  position:relative;
}
.chat-close:hover{color:var(--gold);border-color:var(--gold)}
.chat-close::before,.chat-close::after{
  content:"";position:absolute;width:11px;height:1px;background:currentColor;
}
.chat-close::before{transform:rotate(45deg)}
.chat-close::after{transform:rotate(-45deg)}

.chat-body{
  flex:1;overflow-y:auto;
  padding:16px;
  display:flex;flex-direction:column;gap:12px;
  background: linear-gradient(180deg,var(--ink) 0%, var(--ink-2) 100%);
}
.chat-msg{
  max-width:84%;
  padding:10px 14px;
  font-size:14px;line-height:1.5;
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--parchment);
  word-wrap:break-word;
}
.chat-msg.ai{
  align-self:flex-start;
  border-top-left-radius:0;
}
.chat-msg.me{
  align-self:flex-end;
  background:rgba(201,168,106,.14);
  border-color:var(--gold);
  color:var(--parchment);
  border-top-right-radius:0;
}
.chat-msg.typing{
  display:inline-flex;gap:4px;padding:14px 16px;
}
.chat-msg.typing span{
  width:6px;height:6px;background:var(--gold);border-radius:50%;
  animation:typing 1.4s infinite;
}
.chat-msg.typing span:nth-child(2){animation-delay:.2s}
.chat-msg.typing span:nth-child(3){animation-delay:.4s}
@keyframes typing{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.chat-suggestions{
  display:flex;flex-wrap:wrap;gap:6px;
  padding:0 16px 8px;
}
.chat-sug{
  padding:7px 11px;
  border:1px solid var(--line);
  font-size:11.5px;color:var(--parchment-d);
  background:var(--panel);
  cursor:pointer;
  transition:all .2s ease;
}
.chat-sug:hover{border-color:var(--gold);color:var(--gold)}

.chat-input{
  display:flex;gap:8px;
  padding:12px 14px calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);
  flex-shrink:0;
}
.chat-input input{
  flex:1;
  padding:11px 14px;
  background:var(--panel);
  border:1px solid var(--line);
  color:var(--parchment);
  font-family:var(--sans);font-size:14px;
}
.chat-input input:focus{outline:0;border-color:var(--gold)}
.chat-send{
  width:44px;height:44px;
  background:var(--gold);
  color:var(--ink);
  display:grid;place-items:center;
  flex-shrink:0;
}
.chat-send:hover{background:var(--gold-light)}
.chat-send svg{width:18px;height:18px}
.chat-send:disabled{opacity:.4;cursor:not-allowed}

.chat-handoff{
  margin: 6px 0;
  padding:12px 14px;
  border:1px dashed var(--gold);
  background:rgba(201,168,106,.06);
  font-size:13px;color:var(--parchment);
  display:flex;flex-direction:column;gap:10px;
  align-self:stretch;
}
.chat-handoff .h-cta{
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:#2BD171;color:#06180D;
  font-weight:600;font-size:13px;
  padding:10px 14px;
  letter-spacing:.04em;
}

/* ============ COOKIES BANNER ============ */
.cookies{
  position:fixed;
  left:14px;right:14px;bottom:14px;
  z-index:80;
  background:var(--ink);
  border:1px solid var(--gold);
  padding:18px 18px 16px;
  display:none;
  max-width:480px;margin:0 auto;
  transform:translateY(20px);opacity:0;
  transition:transform .35s ease, opacity .35s ease;
}
.cookies.show{display:block;transform:none;opacity:1}
.cookies::before{
  content:"";position:absolute;top:-1px;left:-1px;width:14px;height:14px;
  border-left:1px solid var(--gold);border-top:1px solid var(--gold);
}
.cookies p{
  font-size:12.5px;color:var(--parchment-d);line-height:1.55;
  margin-bottom:12px;
}
.cookies p strong{color:var(--gold);font-weight:500}
.cookies p a{color:var(--gold);border-bottom:1px solid var(--gold)}
.cookies-actions{display:flex;gap:8px}
.cookies-btn{
  flex:1;padding:10px;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  border:1px solid var(--line);
  color:var(--parchment-d);
  cursor:pointer;
}
.cookies-btn.primary{
  background:var(--gold);color:var(--ink);border-color:var(--gold);font-weight:600;
}
.cookies-btn:hover{border-color:var(--gold);color:var(--gold)}
.cookies-btn.primary:hover{background:var(--gold-light);color:var(--ink)}

/* ============ THANK-YOU SCREEN ============ */
.thanks{
  text-align:center;padding:14px 0 4px;
}
.thanks .check{
  width:64px;height:64px;border-radius:50%;
  border:1px solid var(--gold);
  display:grid;place-items:center;
  margin: 0 auto 18px;
  color:var(--gold);
  position:relative;
  animation: checkIn .5s ease;
}
@keyframes checkIn{0%{transform:scale(.6);opacity:0}100%{transform:none;opacity:1}}
.thanks .check::before{
  content:"";position:absolute;inset:5px;border:1px solid var(--gold);border-radius:50%;opacity:.4;
}
.thanks .check svg{width:30px;height:30px}
.thanks h3{
  font-family:var(--serif);font-size:26px;color:var(--parchment);
  margin-bottom:10px;line-height:1.2;text-wrap:balance;
}
.thanks h3 em{color:var(--gold);font-style:italic}
.thanks p{
  font-size:14px;color:var(--parchment-d);line-height:1.6;
  max-width:38ch;margin: 0 auto 22px;
}
.thanks .share{
  display:flex;justify-content:center;gap:10px;flex-wrap:wrap;
  padding-top:18px;border-top:1px solid var(--line);
  margin-top:18px;
}
.thanks .share-label{
  width:100%;text-align:center;
  font-size:10px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--muted);
  margin-bottom:4px;
}
.share-btn{
  width:42px;height:42px;
  border:1px solid var(--line);
  display:grid;place-items:center;
  color:var(--parchment-d);
  border-radius:50%;
  transition:all .25s ease;
}
.share-btn:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px)}
.share-btn svg{width:18px;height:18px}

/* ============ HERO LAYOUT TWEAK FOR DESKTOP ============ */
@media (min-width:900px){
  .hero{
    display:grid;grid-template-columns: 1.05fr .95fr;
    gap:48px;align-items:center;
    padding:64px 22px 56px;
  }
  .hero-eyebrow,.hero h1,.hero p.lede,.cta-row,.hero-trust,.hero-actions{grid-column:1}
  .hero-portrait{grid-column:2;grid-row:1 / span 6;margin-bottom:0;max-height:560px;align-self:center}
  .benefit-grid{grid-template-columns:repeat(4,1fr)}
  .credentials{grid-template-columns:repeat(4,1fr)}
}