/* ============================================================
   Tricapitals — Home
   Tokens portados desde el design system de Tricapitals
   (_ds/tricapitals-design-system-6f3f5468…/tokens/*.css)
   ============================================================ */

:root{
  /* Celeste */
  --celeste-50:#eef9fe; --celeste-100:#d6f1fb; --celeste-200:#ade3f7; --celeste-300:#7ed3f2;
  --celeste-400:#4ec3ed; --celeste-500:#33b3e3; --celeste-600:#1f95c4; --celeste-700:#17749a;
  /* Navy */
  --navy-900:#07152e; --navy-800:#0e1d3a; --navy-700:#1c2448; --navy-600:#2c3760; --navy-500:#425079;
  /* Neutros */
  --white:#fff; --paper:#fbfcfe; --grey-50:#f4f6fa; --grey-100:#e8ecf2;
  --grey-200:#cdd3da; --grey-300:#a9b2bf; --grey-400:#7a8595; --grey-500:#5b6474;

  /* Semánticos */
  --brand-primary:var(--celeste-400); --brand-ink:var(--navy-700);
  --text-heading:var(--navy-900); --text-body:var(--navy-700); --text-muted:var(--grey-400);
  --text-subtle:var(--grey-300); --text-accent:var(--celeste-500);
  --text-on-primary:var(--navy-900);
  --surface-page:var(--paper); --surface-card:var(--white); --surface-sunken:var(--grey-50);
  --surface-dark:var(--navy-900); --surface-glass:rgba(255,255,255,.10);
  --surface-accent-soft:var(--celeste-50);
  --border-subtle:var(--grey-100); --border-default:var(--grey-200);
  --border-on-dark:rgba(255,255,255,.24); --border-accent:var(--celeste-300);

  /* Tipografía */
  --font-sans:"Nunito Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --fw-light:300; --fw-semibold:600; --fw-bold:700;

  /* Espaciado */
  --gutter:40px; --section-y:104px; --container:1280px;

  /* Radios */
  --radius-input:12px; --radius-card:16px; --radius-panel:24px; --radius-pill:999px;

  /* Sombras — siempre azuladas, nunca grises */
  --shadow-sm:0 1px 3px rgba(7,21,46,.06),0 1px 2px rgba(7,21,46,.04);
  --shadow-md:0 6px 18px rgba(7,21,46,.07);
  --shadow-focus:0 0 0 3px rgba(78,195,237,.45);

  /* Motion */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-fast:140ms; --dur-base:220ms; --dur-slow:420ms; --dur-scenic:900ms;

  /* Scrim sobre foto */
  --scrim:linear-gradient(90deg,rgba(7,21,46,.82) 0%,rgba(7,21,46,.55) 45%,rgba(7,21,46,.15) 100%);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--surface-page); color:var(--text-body);
  font-family:var(--font-sans); font-size:16px; line-height:1.45;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,h4,p{margin:0}
img{display:block; max-width:100%}
a{color:var(--celeste-600); text-decoration:none}
a:hover{color:var(--celeste-700)}
button{font-family:inherit}
:focus-visible{outline:none; box-shadow:var(--shadow-focus)}

.container{max-width:var(--container); margin:0 auto; padding:0 var(--gutter)}
.eyebrow{
  display:block; font-size:12px; font-weight:var(--fw-bold);
  letter-spacing:.18em; text-transform:uppercase; color:var(--text-accent);
}
.eyebrow--onDark{color:var(--celeste-400)}
.h2{
  color:var(--text-heading); font-size:clamp(32px,4vw,52px); font-weight:var(--fw-light);
  line-height:1.08; letter-spacing:-.02em; text-wrap:balance;
}
.h2 strong{font-weight:var(--fw-bold)}
.h2--onDark{color:#fff}
.sec-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; flex-wrap:wrap; margin-bottom:44px;
}
.sec-head__t{display:flex; flex-direction:column; gap:14px}
.sec-head__link{font-size:14px; font-weight:var(--fw-semibold); letter-spacing:.04em; color:var(--celeste-600)}

/* ---------- Botones ---------- */
.tc-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-sans); font-weight:var(--fw-semibold); letter-spacing:.06em;
  text-transform:uppercase; border:1px solid transparent; border-radius:var(--radius-pill);
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:background-color var(--dur-fast) ease,color var(--dur-fast) ease,
             border-color var(--dur-fast) ease,box-shadow var(--dur-fast) ease,
             transform var(--dur-fast) ease;
}
.tc-btn--sm{font-size:11px; padding:8px 16px}
.tc-btn--md{font-size:12px; padding:12px 24px}
.tc-btn--lg{font-size:14px; padding:16px 32px}
.tc-btn--full{width:100%}
.tc-btn--primary{background:var(--brand-primary); color:var(--text-on-primary)}
.tc-btn--primary:hover{background:var(--celeste-500); color:var(--text-on-primary)}
.tc-btn--onPhoto{
  background:transparent; color:#fff; border-color:var(--border-on-dark);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}
.tc-btn--onPhoto:hover{background:var(--surface-glass); border-color:rgba(255,255,255,.55); color:#fff}
.tc-btn:active{transform:translateY(1px) scale(.98); transition-duration:80ms}

/* ---------- Inputs ---------- */
.tc-input{
  width:100%; font:inherit; font-size:16px; color:var(--text-body);
  background:var(--surface-card); border:1px solid var(--border-default);
  border-radius:var(--radius-input); padding:13px 16px; appearance:none;
  transition:border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.tc-input:hover{border-color:var(--border-accent)}
.tc-input:focus{outline:none; border-color:var(--celeste-400); box-shadow:var(--shadow-focus)}

/* ============================================================
   1 · Header
   ============================================================ */
.hdr{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:transparent; border-bottom:1px solid transparent;
  transition:background var(--dur-base) ease, box-shadow var(--dur-base) ease,
             border-color var(--dur-base) ease;
}
.hdr.is-scrolled{
  background:rgba(251,252,254,.94);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom-color:var(--border-subtle);
  box-shadow:0 8px 24px rgba(7,21,46,.06);
}
.hdr__in{
  max-width:var(--container); margin:0 auto; padding:0 var(--gutter); height:84px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.hdr__logo{position:relative; display:flex; align-items:center; width:230px; height:52px; flex:none}
.hdr__logo img{
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:auto; transition:opacity var(--dur-base) ease;
}
.hdr__logo .lg-white{height:52px; opacity:1}
.hdr__logo .lg-navy{height:34px; opacity:0}
.hdr.is-scrolled .lg-white{opacity:0}
.hdr.is-scrolled .lg-navy{opacity:1}

.nav{display:flex; align-items:center; gap:34px}
.nav a:not(.tc-btn){
  color:rgba(255,255,255,.92); font-size:14px; letter-spacing:.04em;
  font-weight:var(--fw-semibold); transition:color var(--dur-base) ease;
}
.hdr.is-scrolled .nav a:not(.tc-btn){color:var(--navy-700)}
.hdr.is-scrolled .nav a:not(.tc-btn):hover{color:var(--celeste-600)}

.nav-toggle{
  display:none; align-items:center; justify-content:center; width:44px; height:44px;
  border:1px solid rgba(255,255,255,.4); background:rgba(255,255,255,.12);
  border-radius:var(--radius-pill); cursor:pointer; color:#fff; font-size:18px; line-height:1;
  transition:background var(--dur-base) ease, border-color var(--dur-base) ease, color var(--dur-base) ease;
}
.hdr.is-scrolled .nav-toggle{
  border-color:var(--border-subtle); background:var(--white); color:var(--navy-700);
}
.nav-mobile{
  display:none; flex-direction:column; padding:8px 20px 22px;
  border-top:1px solid var(--border-subtle); background:var(--paper);
}
.nav-mobile.is-open{display:flex}
.nav-mobile a:not(.tc-btn){color:var(--navy-700); font-size:16px; padding:10px 0}
.nav-mobile .tc-btn{margin-top:8px}

/* ============================================================
   2 · Hero
   ============================================================ */
.hero{
  position:relative; height:100vh; min-height:640px; max-height:920px;
  overflow:hidden; background:var(--navy-900);
}
.hero__track{
  display:flex; width:400%; height:100%;
  transform:translate3d(0,0,0);
  transition:transform var(--dur-scenic) var(--ease-out);
}
.slide{position:relative; width:25%; height:100%; flex:0 0 25%}
.slide__ph{position:absolute; inset:0}
.slide__ph img{width:100%; height:100%; object-fit:cover}
.slide__scrim{position:absolute; inset:0; background:var(--scrim); pointer-events:none}
.slide__in{
  position:relative; height:100%; max-width:var(--container); margin:0 auto;
  padding:0 var(--gutter); display:flex; flex-direction:column;
  justify-content:center; gap:20px;
}
.slide__eyebrow{
  color:var(--celeste-400); font-size:12px; font-weight:var(--fw-bold);
  letter-spacing:.18em; text-transform:uppercase;
}
.slide__h{
  color:#fff; font-size:clamp(40px,5.2vw,74px); font-weight:var(--fw-light);
  line-height:1.04; letter-spacing:-.025em; max-width:16ch; text-wrap:balance;
}
.slide__h strong{font-weight:var(--fw-bold)}
.slide__p{
  color:rgba(255,255,255,.78); font-size:18px; line-height:1.5;
  max-width:46ch; font-weight:var(--fw-light);
}
.slide__cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:8px}

.hero__dots{
  position:absolute; left:0; right:0; bottom:40px; max-width:var(--container);
  margin:0 auto; padding:0 var(--gutter); display:flex; align-items:center; gap:10px;
}
.dot{
  width:10px; height:10px; border-radius:var(--radius-pill); border:none; padding:0;
  cursor:pointer; background:rgba(255,255,255,.4);
  transition:width var(--dur-slow) var(--ease-out), background var(--dur-base) ease;
}
.dot[aria-selected="true"]{width:38px; background:var(--celeste-400)}

/* ============================================================
   3 · Proyectos
   ============================================================ */
.projects{max-width:var(--container); margin:0 auto; padding:var(--section-y) var(--gutter)}
.projects__grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px}
.pcard{
  display:flex; flex-direction:column; background:var(--surface-card);
  border:1px solid var(--border-subtle); border-radius:var(--radius-card);
  overflow:hidden; box-shadow:var(--shadow-sm); color:var(--text-body);
  transition:box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.pcard:hover{box-shadow:var(--shadow-md); transform:translateY(-2px); color:var(--text-body)}
.pcard__media{position:relative; height:210px; background:var(--surface-sunken)}
.pcard__media img{width:100%; height:100%; object-fit:cover}
.pcard__badge{
  position:absolute; top:14px; left:14px; font-size:10px; font-weight:var(--fw-bold);
  letter-spacing:.16em; padding:6px 12px; border-radius:var(--radius-pill);
  pointer-events:none; text-transform:uppercase;
}
.pcard__badge--now{background:var(--celeste-400); color:var(--navy-900)}
.pcard__badge--dark{background:var(--navy-900); color:#fff}
.pcard__body{display:flex; flex:1; flex-direction:column; gap:12px; padding:26px}
.pcard__loc{color:var(--text-muted); font-size:12px; letter-spacing:.1em; text-transform:uppercase}
.pcard__t{color:var(--text-heading); font-size:24px; font-weight:var(--fw-semibold); letter-spacing:-.01em}
.pcard__d{color:var(--text-muted); font-size:14px; line-height:1.55}
.pcard__foot{
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
  margin-top:auto; padding-top:18px; border-top:1px solid var(--border-subtle);
}
.pcard__price{display:flex; flex-direction:column}
.pcard__price small{font-size:11px; letter-spacing:.14em; color:var(--text-muted); text-transform:uppercase}
.pcard__price b{font-size:21px; font-weight:var(--fw-bold); color:var(--text-heading); white-space:nowrap}
.pcard__go{
  font-size:12px; font-weight:var(--fw-bold); letter-spacing:.06em;
  color:var(--celeste-600); text-transform:uppercase; white-space:nowrap;
}

/* ============================================================
   4 · Simulador
   ============================================================ */
.sim{
  background:var(--surface-sunken); padding:var(--section-y) 0;
  border-top:1px solid var(--border-subtle); border-bottom:1px solid var(--border-subtle);
}
.sim__in{
  max-width:var(--container); margin:0 auto; padding:0 var(--gutter);
  display:grid; grid-template-columns:1fr 460px; gap:48px; align-items:start;
}
.sim__controls{display:flex; flex-direction:column; gap:26px}
.sim__head{display:flex; flex-direction:column; gap:14px}
.sim__head p{color:var(--text-muted); font-size:17px; line-height:1.55; max-width:46ch; font-weight:var(--fw-light)}
.sim__row2{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.fld{display:flex; flex-direction:column; gap:8px}
.fld__label{
  font-size:12px; font-weight:var(--fw-bold); letter-spacing:.12em;
  text-transform:uppercase; color:var(--navy-700);
}
.fld__row{display:flex; gap:10px; align-items:center}
.fld__row .tc-input{flex:1; min-width:0}
.toggle{
  display:flex; gap:6px; background:var(--white); border:1px solid var(--border-subtle);
  border-radius:var(--radius-pill); padding:4px; flex:none;
}
.toggle button{
  border:none; cursor:pointer; border-radius:var(--radius-pill); padding:8px 16px;
  font-size:13px; font-weight:var(--fw-bold); letter-spacing:.06em;
  background:transparent; color:var(--grey-400);
  transition:background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.toggle button[aria-pressed="true"]{background:var(--celeste-400); color:var(--navy-900)}
.range{width:100%; accent-color:var(--celeste-400); margin:0}
.plazo{display:flex; gap:10px}
.plazo button{
  flex:1; cursor:pointer; border-radius:var(--radius-pill); padding:13px 0;
  font-size:15px; font-weight:var(--fw-bold); background:var(--white);
  color:var(--navy-700); border:1px solid var(--border-subtle);
  transition:background var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.plazo button[aria-pressed="true"]{background:var(--navy-900); color:#fff; border-color:var(--navy-900)}

.sim__out{
  background:var(--navy-900); border-radius:var(--radius-panel); padding:36px;
  display:flex; flex-direction:column; gap:22px;
  position:sticky; top:100px; box-shadow:var(--shadow-md);
}
.sim__lines{display:flex; flex-direction:column; gap:14px}
.sim__line{
  display:flex; justify-content:space-between; align-items:baseline;
  padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,.16); gap:16px;
}
.sim__line span{color:rgba(255,255,255,.66); font-size:14px; font-weight:var(--fw-light)}
.sim__line b{color:#fff; font-size:16px; font-weight:var(--fw-semibold); font-variant-numeric:tabular-nums}
.sim__total{display:flex; flex-direction:column; gap:6px; padding-top:4px}
.sim__total span{color:rgba(255,255,255,.66); font-size:13px; letter-spacing:.1em; text-transform:uppercase}
.sim__total b{
  color:var(--celeste-400); font-size:clamp(34px,4vw,46px); font-weight:var(--fw-bold);
  letter-spacing:-.02em; line-height:1.05; font-variant-numeric:tabular-nums;
}
.sim__total em{color:rgba(255,255,255,.45); font-size:12px; font-style:italic}
.sim__out .tc-btn--primary{color:#fff}

/* ============================================================
   5 · Cifras
   ============================================================ */
.stats{background:var(--navy-900); padding:84px 0}
.stats__in{
  max-width:var(--container); margin:0 auto; padding:0 var(--gutter);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:40px;
}
.stat{display:flex; flex-direction:column; gap:8px}
.stat b{
  color:#fff; font-size:clamp(40px,5vw,64px); font-weight:var(--fw-light);
  letter-spacing:-.03em; line-height:1;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum";
}
.stat span{
  color:var(--celeste-400); font-size:12px; font-weight:var(--fw-bold);
  letter-spacing:.18em; text-transform:uppercase;
}

/* ============================================================
   6 · Casos de éxito
   ============================================================ */
.cases{
  max-width:var(--container); margin:0 auto; padding:var(--section-y) var(--gutter);
  display:flex; flex-direction:column; gap:36px;
}
.cases__grid{display:grid; grid-template-columns:380px 1fr; gap:32px; align-items:start}
/* Video propio en 9:16 (el original es 1080x1920, servido a 540x960). */
.cases__video{
  position:relative; width:100%; max-width:400px; aspect-ratio:9/16; margin:0 auto;
  overflow:hidden; border-radius:var(--radius-card); background:var(--navy-900);
}
.cases__video video{
  width:100%; height:100%; object-fit:cover; display:block; background:var(--navy-900);
}
.cases__reviews{display:flex; flex-direction:column; gap:20px}
.cases__label{
  color:var(--text-muted); font-size:12px; font-weight:var(--fw-bold);
  letter-spacing:.18em; text-transform:uppercase;
}
/* Reserva de espacio para el widget de reseñas — evita saltos de layout (CLS) */
.cases__widget{min-height:420px}
/* Si el widget queda vacío, el JS le quita el alto reservado y muestra esto */
.cases__widget[data-vacio]{min-height:0}
.reviews-fb{
  display:flex; flex-direction:column; align-items:flex-start; gap:12px;
  background:var(--surface-card); border:1px solid var(--border-subtle);
  border-radius:var(--radius-card); padding:32px; box-shadow:var(--shadow-sm);
}
.reviews-fb[hidden]{display:none}
.reviews-fb__t{font-size:19px; font-weight:var(--fw-semibold); color:var(--text-heading); letter-spacing:-.01em}
.reviews-fb__d{font-size:14.5px; line-height:1.6; color:var(--text-muted); max-width:44ch}
.reviews-fb .tc-btn{margin-top:6px}

/* ============================================================
   7 · Agenda
   ============================================================ */
.cta{background:var(--navy-900); padding:96px 0 104px}
.cta__head{
  max-width:720px; margin:0 auto; padding:0 var(--gutter);
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px;
}
.cta__head p{
  color:rgba(255,255,255,.72); font-size:17px; line-height:1.6;
  max-width:52ch; font-weight:var(--fw-light);
}
.cta__form{max-width:720px; margin:40px auto 0; padding:0 var(--gutter)}
.cta__card{background:#fff; border-radius:var(--radius-panel); padding:10px; box-shadow:var(--shadow-md)}
/* Alto fijo porque no cargamos el script de auto-ajuste de GoHighLevel
   (ver el comentario en index.html). En pantallas angostas los campos se
   apilan y el formulario necesita más alto. */
.cta__card iframe{width:100%; height:620px; border:none; border-radius:18px; display:block}
@media (max-width:620px){ .cta__card iframe{height:720px} }
.cta__meta{
  max-width:720px; margin:28px auto 0; padding:0 var(--gutter);
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px 28px;
}
.cta__meta a{color:#fff; font-size:15px}
.cta__meta a:hover{color:var(--celeste-400)}
.cta__meta span{color:rgba(255,255,255,.5); font-size:15px}

/* ============================================================
   8 · Footer
   ============================================================ */
.ft{background:var(--navy-800); padding:64px 0 32px}
.ft__in{
  max-width:var(--container); margin:0 auto; padding:0 var(--gutter);
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px;
}
.ft__brand{display:flex; flex-direction:column; gap:18px}
.ft__brand img{width:180px; height:auto}
.ft__brand p{color:rgba(255,255,255,.55); font-size:14px; line-height:1.6; max-width:34ch; font-weight:var(--fw-light)}
.ft__col{display:flex; flex-direction:column; gap:12px}
.ft__col h3{
  color:#fff; font-size:12px; font-weight:var(--fw-bold); letter-spacing:.18em;
  text-transform:uppercase; margin-bottom:4px;
}
.ft__col a{color:rgba(255,255,255,.66); font-size:14px; line-height:1.5}
.ft__col a:hover{color:var(--celeste-400)}
.ft__bar{
  max-width:var(--container); margin:44px auto 0; padding:24px var(--gutter) 0;
  border-top:1px solid rgba(255,255,255,.12);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px;
}
.ft__bar>span{color:rgba(255,255,255,.4); font-size:13px}
.ft__social{display:flex; gap:20px; flex-wrap:wrap}
.ft__social a{color:rgba(255,255,255,.55); font-size:13px}
.ft__social a:hover{color:var(--celeste-400)}

/* ============================================================
   Responsive — único breakpoint en 1080px (según el handoff)
   ============================================================ */
@media (max-width:1080px){
  :root{--gutter:20px; --section-y:64px}
  .nav{display:none}
  .nav-toggle{display:inline-flex}
  .slide__h{font-size:clamp(34px,8vw,52px)}
  .sim__in{grid-template-columns:1fr}
  .sim__out{position:static}
  .cases__grid{grid-template-columns:1fr}
  .ft__in{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .sim__row2{grid-template-columns:1fr}
  .ft__in{grid-template-columns:1fr}
  .hero__dots{bottom:28px}
  .slide__cta .tc-btn{flex:1 1 auto; justify-content:center}
}

/* ---------- Accesibilidad ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .hero__track{transition:none}
}
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}