/* ============================================================
   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%; height:auto}
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:linear-gradient(180deg, var(--celeste-500) 0%, var(--celeste-600) 100%); color:#fff;
  font-weight:var(--fw-bold); letter-spacing:.08em;
  box-shadow:0 6px 16px rgba(31,149,196,.28), inset 0 1px 0 rgba(255,255,255,.22);
}
.tc-btn--primary:hover{
  background:linear-gradient(180deg, var(--celeste-600) 0%, var(--celeste-700) 100%); color:#fff;
  transform:translateY(-2px); box-shadow:0 12px 26px rgba(23,116,154,.34), inset 0 1px 0 rgba(255,255,255,.22);
}
.tc-btn--primary:focus-visible{outline:none; box-shadow:0 0 0 3px #fff, 0 0 0 6px var(--celeste-500)}
.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{transition-duration:var(--dur-base)}
.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){
  position:relative; padding:6px 0; color:rgba(255,255,255,.92); font-size:14px; letter-spacing:.04em;
  font-weight:var(--fw-semibold); transition:color var(--dur-base) ease;
}
.nav a:not(.tc-btn)::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; border-radius:2px;
  background:var(--celeste-400); transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-base) var(--ease-out);
}
.nav a:not(.tc-btn):hover{color:var(--celeste-300)}
.nav a:not(.tc-btn):hover::after{transform:scaleX(1)}
.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)}
.hdr.is-scrolled .nav a:not(.tc-btn)::after{background: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:36px 0 18px}
.ft__in{
  max-width:var(--container); margin:0 auto; padding:0 var(--gutter);
  display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:28px; align-items:start;
}
.ft__brand{display:flex; flex-direction:column; gap:14px}
.ft__brand img{width:150px; height:auto}
.ft__col{display:flex; flex-direction:column; gap:7px}
.ft__col h3{color:#fff; font-size:11.5px; font-weight:var(--fw-bold); letter-spacing:.16em; text-transform:uppercase; margin:0 0 4px}
.ft__col a{color:rgba(255,255,255,.66); font-size:13.5px; line-height:1.4}
.ft__col a:hover{color:var(--celeste-400)}
.ft__social{display:flex; gap:10px; margin-top:6px}
.ft__col .ft__social a,.ft__social a{display:inline-grid; place-items:center; width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.08); color:rgba(255,255,255,.75); line-height:0}
.ft__social svg{display:block}
.ft__social a:hover{background:var(--celeste-400); color:var(--navy-900)}
.ft__bar{
  max-width:var(--container); margin:24px auto 0; padding:14px var(--gutter) 0;
  border-top:1px solid rgba(255,255,255,.12);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px 16px;
}
.ft__bar>span{color:rgba(255,255,255,.4); font-size:12.5px}
.ft__legal{display:flex; flex-wrap:wrap; gap:4px 16px}
.ft__legal a{font-size:12.5px; color:rgba(255,255,255,.5); text-decoration:none}
.ft__legal a:hover{color:#fff}

/* ============================================================
   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;
}

/* ============================================================
   PÁGINA DE PROYECTOS (/proyectos/)
   Reusa header, footer, botones y tokens de la portada.
   ============================================================ */

/* Cabecera de página: banda navy compacta, no un hero de 100vh */
.phead{
  background:var(--navy-900); padding:172px 0 72px; /* 172 = 84 del header fijo + aire */
  border-bottom:1px solid rgba(255,255,255,.08);
}
.phead__in{
  max-width:var(--container); margin:0 auto; padding:0 var(--gutter);
  display:flex; flex-direction:column; gap:16px;
}
.phead h1{
  color:#fff; font-size:clamp(38px,5.4vw,66px); font-weight:var(--fw-light);
  line-height:1.04; letter-spacing:-.025em;
}
.phead h1 strong{font-weight:var(--fw-bold)}
.phead p{
  color:rgba(255,255,255,.72); font-size:18px; line-height:1.55;
  max-width:52ch; font-weight:var(--fw-light);
}
.phead__meta{
  display:flex; gap:0; flex-wrap:wrap; margin-top:14px;
  border-top:1px solid rgba(255,255,255,.16); padding-top:18px;
}
.phead__meta div{padding-right:34px; margin-right:34px; border-right:1px solid rgba(255,255,255,.16)}
.phead__meta div:last-child{border-right:none; margin-right:0; padding-right:0}
.phead__meta b{
  display:block; color:#fff; font-size:21px; font-weight:var(--fw-light);
  letter-spacing:-.01em; font-variant-numeric:tabular-nums;
}
.phead__meta span{
  display:block; font-size:9.5px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--celeste-400); margin-top:6px; font-weight:var(--fw-bold);
}

/* Listado de proyectos */
.plist{max-width:var(--container); margin:0 auto; padding:var(--section-y) var(--gutter); display:flex; flex-direction:column; gap:72px}

.pr{display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:stretch;
    border:1px solid var(--border-subtle); border-radius:var(--radius-panel);
    overflow:hidden; background:var(--surface-card); box-shadow:var(--shadow-sm)}
.pr__media{position:relative; min-height:340px; background:var(--surface-sunken)}
.pr__media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.pr__badge{
  position:absolute; top:18px; left:18px; z-index:2;
  font-size:10px; font-weight:var(--fw-bold); letter-spacing:.16em;
  padding:7px 13px; border-radius:var(--radius-pill); text-transform:uppercase;
}
.pr__badge--now{background:var(--celeste-400); color:var(--navy-900)}
.pr__badge--dark{background:var(--navy-900); color:#fff}

.pr__body{display:flex; flex-direction:column; gap:14px; padding:44px}
.pr__loc{
  color:var(--text-muted); font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; font-weight:var(--fw-semibold);
}
.pr__t{
  color:var(--text-heading); font-size:clamp(28px,3.2vw,38px);
  font-weight:var(--fw-semibold); letter-spacing:-.02em; line-height:1.12;
}
.pr__d{color:var(--text-muted); font-size:15.5px; line-height:1.6; max-width:48ch}

/* Ficha de datos: dos columnas de pares etiqueta/valor */
.pr__specs{
  display:grid; grid-template-columns:1fr 1fr; gap:14px 24px; margin:6px 0 0;
  border-top:1px solid var(--border-subtle); padding-top:20px;
}
.pr__specs>div{display:flex; flex-direction:column; gap:3px}
.pr__specs dt{
  font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--text-muted); font-weight:var(--fw-bold);
}
.pr__specs dd{margin:0; font-size:14.5px; color:var(--text-body); line-height:1.4}

.pr__foot{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; flex-wrap:wrap; margin-top:auto; padding-top:24px;
  border-top:1px solid var(--border-subtle);
}
.pr__price{display:flex; flex-direction:column; gap:3px}
.pr__price small{font-size:11px; letter-spacing:.14em; color:var(--text-muted); text-transform:uppercase; font-weight:var(--fw-bold)}
.pr__price b{font-size:27px; font-weight:var(--fw-bold); color:var(--text-heading); white-space:nowrap; letter-spacing:-.02em}
.pr__cta{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.pr__map{font-size:13px; font-weight:var(--fw-semibold); color:var(--celeste-600); white-space:nowrap}
.pr__map:hover{color:var(--celeste-700)}

/* Alterna el lado de la foto */
.pr:nth-child(even) .pr__media{order:2}

@media (max-width:1080px){
  .phead{padding:132px 0 56px}
  .pr{grid-template-columns:1fr}
  .pr:nth-child(even) .pr__media{order:0}
  .pr__media{min-height:260px}
  .pr__body{padding:30px}
  .plist{gap:44px}
}
@media (max-width:620px){
  .pr__specs{grid-template-columns:1fr}
  .pr__foot{flex-direction:column; align-items:flex-start; gap:16px}
  .phead__meta div{padding-right:20px; margin-right:20px}
}
/* Tarjetas simplificadas (28-sep-2026, pedido de Jan): bajada de una línea, solo tipología,
   "desde" y "Más información". Más grandes en escritorio y cortas en celular. */
@media (min-width:1081px){
  .pr{grid-template-columns:1.15fr 1fr}
  .pr__media{min-height:460px}
  .pr__body{padding:52px}
}
.pr__body{justify-content:center; gap:16px}
.pr__t{font-size:clamp(34px,3.8vw,54px); line-height:1.02}
.pr__d{font-size:18px; line-height:1.5; color:var(--text-body); max-width:36ch}
.pr__specs--one{grid-template-columns:1fr}
.pr__specs--one dd{font-size:18px; font-weight:var(--fw-semibold); color:var(--text-heading)}
.pr__foot{margin-top:8px; align-items:center}
.pr__price b{font-size:34px}
@media (max-width:1080px){
  .pr__media{min-height:0; aspect-ratio:16/10}
  .pr__body{padding:28px}
}
@media (max-width:620px){
  .plist{gap:22px; padding-top:40px; padding-bottom:56px}
  .pr__media{aspect-ratio:16/11}
  .pr__body{padding:20px 20px 22px; gap:8px}
  .pr__loc{font-size:11px}
  .pr__t{font-size:30px}
  .pr__d{font-size:16px}
  .pr__specs--one{padding-top:12px; margin-top:4px}
  .pr__specs--one dd{font-size:16px}
  .pr__foot{flex-direction:row; align-items:center; justify-content:space-between; gap:12px; padding-top:14px}
  .pr__price b{font-size:24px}
  .pr__cta .tc-btn{height:44px; padding:0 18px}
}

/* ===================== Páginas interiores (blog, FAQ, contacto) ===================== */
/* Páginas interiores: cabecera blanca fija desde el inicio (mismo look que la portada al hacer scroll) */
.page-inner .hdr{position:sticky; top:0; background:rgba(251,252,254,.96); -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)}
.page-inner .hdr .lg-white{opacity:0} .page-inner .hdr .lg-navy{opacity:1}
.page-inner .hdr .nav a:not(.tc-btn){color:var(--navy-700)} .page-inner .hdr .nav a:not(.tc-btn):hover{color:var(--celeste-600)} .page-inner .hdr .nav a:not(.tc-btn)::after{background:var(--celeste-600)}
.page-inner .hdr .nav-toggle{color:var(--navy-700); border-color:var(--border-default)}
.phead{background:var(--surface-dark); color:#fff; padding:56px var(--gutter) 48px}
.phead__in{max-width:var(--container); margin:0 auto}
.phead .eyebrow{font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--celeste-400); font-weight:var(--fw-semibold); margin:0 0 10px}
.phead h1{font-size:clamp(32px,4.4vw,52px); line-height:1.06; letter-spacing:-.02em; margin:0; font-weight:var(--fw-light); text-wrap:balance}
.phead h1 strong{font-weight:var(--fw-bold)}
.phead p:not(.eyebrow){margin:14px 0 0; max-width:52ch; font-size:18px; line-height:1.55; color:rgba(255,255,255,.78); font-weight:var(--fw-light)}
/* /proyectos/ tiene la cabecera fija encima del título: el título baja para que el logo no lo tape */
body:not(.page-inner) .phead{padding-top:172px}
@media (max-width:1080px){body:not(.page-inner) .phead{padding-top:132px}}

/* listado */
.blog{max-width:var(--container); margin:0 auto; padding:64px var(--gutter) var(--section-y)}
.blog__grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:32px}
.bcard{display:flex; flex-direction:column; background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--radius-card); overflow:hidden; text-decoration:none; color:inherit; box-shadow:var(--shadow-sm); transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base)}
.bcard:hover{transform:translateY(-3px); box-shadow:var(--shadow-md)}
.bcard__img{background:var(--surface-sunken); flex:none}
.bcard__img img{display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover}
.bcard__txt{padding:20px 22px 24px; display:flex; flex-direction:column; gap:8px}
.bcard time{font-size:13px; color:var(--text-muted); letter-spacing:.04em; text-transform:uppercase}
.bcard h2{font-size:20px; line-height:1.3; margin:0; color:var(--text-heading); font-weight:var(--fw-bold); text-wrap:balance}
.bcard p{margin:0; font-size:15.5px; line-height:1.55; color:var(--text-body); font-weight:var(--fw-light)}

/* nota */
.post{max-width:820px; margin:0 auto; padding:48px var(--gutter) var(--section-y)}
.post__back{display:inline-block; font-size:14px; color:var(--text-accent); text-decoration:none; margin-bottom:22px; font-weight:var(--fw-semibold)}
.post__head h1{font-size:clamp(30px,4vw,46px); line-height:1.1; letter-spacing:-.02em; color:var(--text-heading); margin:0 0 14px; text-wrap:balance}
.post__meta{color:var(--text-muted); font-size:15px; margin:0 0 32px}
.post__hero{width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--radius-card); margin:0 0 36px}
.post__body{font-size:18px; line-height:1.7; color:var(--text-body); font-weight:var(--fw-light)}
.post__body p{margin:0 0 1.2em}
.post__body h2{font-size:28px; line-height:1.2; margin:2em 0 .6em; color:var(--text-heading); letter-spacing:-.01em}
.post__body h3{font-size:22px; line-height:1.3; margin:1.6em 0 .5em; color:var(--text-heading)}
.post__body h4{font-size:18px; margin:1.4em 0 .4em; color:var(--text-heading)}
.post__body strong{font-weight:var(--fw-bold); color:var(--text-heading)}
.post__body a{color:var(--text-accent); text-decoration:underline; text-underline-offset:3px}
.post__body ul,.post__body ol{padding-left:1.4em; margin:0 0 1.2em}
.post__body li{margin:.35em 0}
.post__body img{border-radius:var(--radius-input); margin:1.4em auto}
.post__body blockquote{margin:1.6em 0; padding:4px 0 4px 22px; border-left:4px solid var(--celeste-400); color:var(--text-heading); font-size:20px}
.post__body table{border-collapse:collapse; width:100%; margin:1.4em 0; font-size:16px}
.post__body th,.post__body td{border:1px solid var(--border-default); padding:8px 12px; text-align:left; vertical-align:top}
.post__body th{background:var(--surface-sunken); font-weight:var(--fw-semibold)}
.post__video{position:relative; aspect-ratio:16/9; margin:1.6em 0; border-radius:var(--radius-card); overflow:hidden; background:#000}
.post__video iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.post__cta{margin-top:56px; padding:36px; background:var(--surface-dark); color:#fff; border-radius:var(--radius-panel); text-align:center}
.post__cta h2{margin:0 0 10px; font-size:26px; font-weight:var(--fw-bold)}
.post__cta p{margin:0 0 22px; color:rgba(255,255,255,.78); font-weight:var(--fw-light); max-width:48ch; margin-inline:auto}
@media (max-width:620px){ .post{padding-top:28px} .post__body{font-size:17px} .post__cta{padding:28px 22px} }

/* ===================== Preguntas frecuentes ===================== */
.faq{max-width:var(--container); margin:0 auto; padding:48px var(--gutter) var(--section-y); display:grid; grid-template-columns:260px minmax(0,760px); gap:48px; align-items:start}
.faq__nav{position:sticky; top:104px; display:flex; flex-direction:column; gap:6px}
.faq__nav a{display:flex; justify-content:space-between; align-items:center; padding:10px 14px; border-radius:var(--radius-input); text-decoration:none; color:var(--text-heading); font-weight:var(--fw-semibold); font-size:15px; background:var(--surface-sunken)}
.faq__nav a span{font-size:12px; color:var(--text-muted); background:var(--surface-card); border-radius:var(--radius-pill); padding:2px 8px}
.faq__nav a:hover{background:var(--surface-accent-soft)}
.faq__group{margin-bottom:44px; scroll-margin-top:110px}
.faq__group h2{font-size:26px; margin:0 0 14px; color:var(--text-heading); letter-spacing:-.01em}
.faq__item{border-top:1px solid var(--border-subtle)}
.faq__item:last-child{border-bottom:1px solid var(--border-subtle)}
.faq__item summary{cursor:pointer; list-style:none; padding:18px 40px 18px 0; font-size:18px; font-weight:var(--fw-semibold); color:var(--text-heading); position:relative; line-height:1.35}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+"; position:absolute; right:6px; top:14px; font-size:26px; font-weight:300; color:var(--text-accent); transition:transform var(--dur-base) var(--ease-out)}
.faq__item[open] summary::after{transform:rotate(45deg)}
.faq__a{padding:0 0 20px; font-size:17px; line-height:1.65; color:var(--text-body); font-weight:var(--fw-light); max-width:66ch}
.faq__a p{margin:0 0 .9em} .faq__a ul{padding-left:1.3em; margin:0 0 .9em} .faq__a strong{font-weight:var(--fw-semibold); color:var(--text-heading)}
.faq .post__cta{grid-column:1/-1; margin-top:24px}
@media (max-width:900px){ .faq{grid-template-columns:1fr; gap:24px} .faq__nav{position:static; flex-direction:row; flex-wrap:wrap} }

/* ===================== Contacto / Gracias ===================== */
.contact{max-width:var(--container); margin:0 auto; padding:48px var(--gutter) var(--section-y)}
.contact__grid{display:grid; grid-template-columns:minmax(0,720px) 320px; gap:48px; align-items:start}
.contact .cta__card{background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--radius-panel); padding:12px; box-shadow:var(--shadow-md)}
.contact .cta__card iframe{width:100%; height:640px; border:0; display:block}
.contact__info h2{font-size:22px; margin:0 0 16px; color:var(--text-heading)}
.contact__info p{margin:0 0 18px; font-size:16px; line-height:1.6; color:var(--text-body)}
.contact__info strong{color:var(--text-heading); font-weight:var(--fw-semibold)}
.contact__info a{color:var(--text-accent); text-decoration:none}
@media (max-width:900px){ .contact__grid{grid-template-columns:1fr} }
.thanks{max-width:720px; margin:0 auto; padding:96px var(--gutter); text-align:center}
.thanks .eyebrow{color:var(--text-accent); font-size:13px; letter-spacing:.14em; text-transform:uppercase; font-weight:var(--fw-semibold)}
.thanks h1{font-size:clamp(32px,4.4vw,50px); line-height:1.08; margin:10px 0 18px; color:var(--text-heading); font-weight:var(--fw-light)}
.thanks h1 strong{font-weight:var(--fw-bold)}
.thanks p{font-size:18px; line-height:1.6; color:var(--text-body); font-weight:var(--fw-light); margin:0 auto 28px; max-width:52ch}
.thanks__actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.tc-btn--ghost{background:transparent; color:var(--text-heading); border:1.5px solid var(--border-default)}
.tc-btn--ghost:hover{border-color:var(--celeste-400); color:var(--text-accent)}

/* ===================== Páginas legales ===================== */
.legal{max-width:820px; margin:0 auto; padding:40px var(--gutter) var(--section-y)}
.legal__meta{font-size:14px; color:var(--text-muted); margin:0 0 28px}
.legal__body{font-size:17px; line-height:1.7; color:var(--text-body); font-weight:var(--fw-light)}
.legal__body h2{font-size:24px; margin:2em 0 .5em; color:var(--text-heading); letter-spacing:-.01em}
.legal__body p{margin:0 0 1em} .legal__body ul,.legal__body ol{padding-left:1.4em; margin:0 0 1em} .legal__body li{margin:.35em 0}
.legal__body strong{font-weight:var(--fw-semibold); color:var(--text-heading)}
.legal__body a{color:var(--text-accent)}
.legal__body table{border-collapse:collapse; width:100%; margin:.6em 0 1.4em; font-size:15.5px}
.legal__body th,.legal__body td{border:1px solid var(--border-default); padding:8px 12px; text-align:left; vertical-align:top}
.legal__body th{background:var(--surface-sunken); font-weight:var(--fw-semibold); color:var(--text-heading)}
.legal__body .wrap{overflow-x:auto}

/* ===================== Cookies + enlaces legales del pie ===================== */
.consent{display:none; position:fixed; left:16px; right:16px; bottom:16px; z-index:100; margin:0 auto; max-width:680px; background:var(--surface-card); color:var(--text-body); border:1px solid var(--border-subtle); border-radius:var(--radius-card); box-shadow:0 20px 44px rgba(7,21,46,.28); padding:18px 22px}
.consent.visible{display:block}
.consent p{margin:0; font-size:14px; line-height:1.55}
.consent a{color:var(--text-accent)}
.consent__actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px}

/* ===================== Simulador en página propia ===================== */
.page-inner .sim{padding-top:56px}
.sim-notes{max-width:820px; margin:0 auto; padding:0 var(--gutter) var(--section-y)}
.sim-notes h2{font-size:22px; margin:0 0 10px; color:var(--text-heading)}
.sim-notes p{font-size:16.5px; line-height:1.65; color:var(--text-body); font-weight:var(--fw-light); margin:0 0 .9em}
.sim-notes a{color:var(--text-accent)}


/* ===================== Movimiento ===================== */
/* Aparición al entrar en pantalla: solo cuando corre JS (html.js-motion); sin JS todo se ve igual. */
html.js-motion [data-reveal]{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease-out), transform .8s var(--ease-out)}
html.js-motion [data-reveal].is-in{opacity:1; transform:none}
html.js-motion [data-reveal-stagger]>*{opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease-out), transform .7s var(--ease-out)}
html.js-motion [data-reveal-stagger].is-in>*{opacity:1; transform:none}
html.js-motion [data-reveal-stagger].is-in>*:nth-child(2){transition-delay:.08s}
html.js-motion [data-reveal-stagger].is-in>*:nth-child(3){transition-delay:.16s}
html.js-motion [data-reveal-stagger].is-in>*:nth-child(4){transition-delay:.24s}
html.js-motion [data-reveal-stagger].is-in>*:nth-child(5){transition-delay:.32s}
html.js-motion [data-reveal-stagger].is-in>*:nth-child(n+6){transition-delay:.4s}
/* tarjetas de proyecto: foto que se acerca y sombra */
.pr{transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out)}
.pr:hover{transform:translateY(-4px); box-shadow:0 18px 40px rgba(7,21,46,.12)}
.pr__media{overflow:hidden}
.pr__media img{transition:transform var(--dur-scenic) var(--ease-out)}
.pr:hover .pr__media img{transform:scale(1.04)}
.pr__map{transition:color var(--dur-fast) ease, transform var(--dur-fast) ease; display:inline-block}
.pr__map:hover{color:var(--celeste-600); transform:translateX(3px)}
/* enlaces del pie y de texto */
.ft__col a{transition:color var(--dur-fast) ease, transform var(--dur-fast) ease; display:inline-block}
.ft__col a:not(.ft__social a):hover{transform:translateX(3px)}
.ft__col .ft__social a:hover{transform:translateY(-2px)}
.ft__social a{transition:background var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-fast) ease}
.ft__social a:hover{transform:translateY(-2px)}
.post__body a,.faq__a a,.legal__body a{transition:color var(--dur-fast) ease}
.faq__item summary{transition:color var(--dur-fast) ease, padding-left var(--dur-base) var(--ease-out)}
.faq__item summary:hover{color:var(--celeste-600)}
.bcard__img{overflow:hidden}
.bcard__img img{transition:transform var(--dur-scenic) var(--ease-out)}
.bcard:hover .bcard__img img{transform:scale(1.05)}
.consent{animation:consent-in .5s var(--ease-out)}
@keyframes consent-in{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){
  html.js-motion [data-reveal],html.js-motion [data-reveal-stagger]>*{opacity:1; transform:none; transition:none}
  .pr,.pr__media img,.bcard__img img,.tc-btn{transition:none}
  .consent{animation:none}
}

/* Botones dentro de textos (legal, blog, FAQ): que el color de enlace no les gane */
.legal__body a.tc-btn, .post__body a.tc-btn, .faq__a a.tc-btn, .thanks a.tc-btn{text-decoration:none}
.legal__body a.tc-btn--primary, .post__body a.tc-btn--primary, .faq__a a.tc-btn--primary{color:#fff}
.legal__body a.tc-btn--primary:hover{color:#fff}

/* ═══ Botones iguales a los de la portada nueva (28-sep-2026, Jan: "no me gusta su estilo, color ni sombreado")
   Plano, sin degradado ni sombra, sin mayúsculas; al pasar el mouse se rellena de azul marino. ═══ */
.tc-btn{text-transform:none; letter-spacing:0; font-weight:800; position:relative; overflow:hidden; isolation:isolate}
.tc-btn--sm{font-size:14px; padding:0 20px; height:42px}
.tc-btn--md{font-size:15px; padding:0 24px; height:48px}
.tc-btn--lg{font-size:16px; padding:0 30px; height:54px}
.tc-btn--primary,.tc-btn--primary:hover{background:#1f95c4; color:#fff; box-shadow:none; transform:none}
.tc-btn--primary::before{content:""; position:absolute; inset:0; z-index:-1; background:#07152e; transform:translateY(101%); transition:transform .55s cubic-bezier(.16,1,.3,1)}
.tc-btn--primary:hover::before{transform:none}
.tc-btn--primary:focus-visible{box-shadow:0 0 0 3px #fff, 0 0 0 5px #1f95c4}