/* =============================================================================
   LA PLANICIE — Landing de captación
   Tema: fondo BLANCO con acentos VERDE (#089B4E) y AMARILLO (#FFED00).
   Los colores base se inyectan desde config.php (variables --brand, --accent...).
   ========================================================================== */

:root{
  --bg:#FFFFFF;
  --bg-alt:#F5F8F5;
  --surface:#FFFFFF;
  --text:#16211B;
  --muted:#5C6B60;
  --border:#E6ECE6;
  --border-strong:#D5E0D4;

  --brand:#089B4E;
  --brand-strong:#067A3D;
  --brand-deep:#0B3A22;
  --brand-tint:#E7F4EC;

  --accent:#FFED00;
  --accent-ink:#1B2A12;

  --dark:#0E1A13;
  --wa:#25D366;

  --ring:rgba(8,155,78,.35);
  --shadow-sm:0 1px 2px rgba(11,40,24,.04), 0 4px 12px rgba(11,40,24,.05);
  --shadow-md:0 12px 30px -14px rgba(11,40,24,.20);
  --shadow-lg:0 32px 60px -24px rgba(11,40,24,.28);

  --maxw:1180px;
  --radius:18px;
  --radius-sm:12px;
  --radius-lg:26px;

  --f-display:"Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-sans:"Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:88px; color-scheme:light; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--f-sans); font-size:1.0625rem; line-height:1.65; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font-family:inherit}
h1,h2,h3,h4{font-family:var(--f-display); font-weight:700; line-height:1.08; letter-spacing:-.015em; text-wrap:balance; margin:0}
p{margin:0}
:focus-visible{outline:3px solid var(--ring); outline-offset:3px; border-radius:6px}

.container{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(1.15rem,4vw,2.4rem)}
.section{padding-block:clamp(4rem,8vw,7rem)}
.section.alt{background:var(--bg-alt)}
.eyebrow{font-size:.78rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--brand-strong); display:inline-flex; align-items:center; gap:.55rem}
.eyebrow::before{content:""; width:22px; height:9px; background:var(--accent); border-radius:2px}
.section-head{max-width:640px; margin-bottom:clamp(2.2rem,4vw,3.2rem)}
.section-head.center{margin-inline:auto; text-align:center}
.section-head.center .eyebrow{justify-content:center}
.section-head h2{font-size:clamp(2rem,4.4vw,3rem); margin-top:1rem}
.section-head p{color:var(--muted); font-size:1.1rem; margin-top:1rem; max-width:60ch}

/* ---- Botones ---- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  background:var(--brand-strong); color:#fff; border:1.5px solid transparent;
  padding:.9rem 1.5rem; border-radius:100px; font-weight:700; font-size:1rem; cursor:pointer;
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease; box-shadow:var(--shadow-sm); white-space:nowrap}
.btn svg{width:18px; height:18px; flex:none}
.btn:hover{background:var(--brand-deep); transform:translateY(-2px); box-shadow:var(--shadow-md)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:transparent; color:var(--text); border-color:var(--border-strong); box-shadow:none}
.btn.ghost:hover{background:var(--bg-alt); border-color:var(--brand); color:var(--brand-strong)}
.btn.wa{background:var(--wa)}
.btn.wa:hover{background:#1EBE5A}
.btn.yellow{background:var(--accent); color:var(--accent-ink)}
.btn.yellow:hover{background:#F2E000; color:#000}
.btn.block{width:100%}
.btn.lg{padding:1.05rem 1.8rem; font-size:1.05rem}

/* ---- Header ---- */
.header{position:fixed; inset-block-start:0; inset-inline:0; z-index:70; background:var(--surface);
  border-bottom:1px solid var(--border); transition:box-shadow .3s ease}
.header.scrolled{box-shadow:var(--shadow-sm)}
.header-inner{display:flex; align-items:center; gap:1rem; height:72px}
.brand{display:flex; align-items:center; gap:.6rem; font-family:var(--f-display); font-weight:800; font-size:1.2rem; letter-spacing:-.02em; color:var(--text)}
.brand img{width:40px; height:40px; border-radius:9px; object-fit:cover; flex:none}
.brand .b-sub{display:block; font-family:var(--f-sans); font-weight:600; font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-top:1px}
.nav{margin-inline-start:auto; display:flex; align-items:center; gap:.2rem}
.nav a.navlink{padding:.5rem .7rem; border-radius:8px; font-weight:600; font-size:.92rem; color:var(--muted); transition:color .16s, background .16s; white-space:nowrap}
.nav a.navlink:hover{color:var(--text); background:var(--bg-alt)}
.header-phone{display:inline-flex; align-items:center; gap:.45rem; font-weight:700; color:var(--text); padding:.5rem .6rem; font-size:.92rem; white-space:nowrap}
.header-phone svg{width:18px; height:18px; color:var(--brand-strong)}
.header-cta{margin-inline-start:.4rem}
.nav-toggle{display:none; margin-inline-start:auto; width:46px; height:46px; border-radius:12px; border:1px solid var(--border-strong); background:var(--surface); color:var(--text); cursor:pointer; align-items:center; justify-content:center}
.nav-toggle svg{width:24px; height:24px}

/* ---- HERO (imagen de fondo + formulario flotante) ---- */
.hero{position:relative; min-height:clamp(660px,94vh,900px); display:flex; align-items:center; overflow:hidden; color:#fff; padding-top:74px}
.hero-media{position:absolute; inset:0; z-index:0}
.hero-media img{width:100%; height:100%; object-fit:cover; animation:kenburns 24s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.09)}}
.hero-media::after{content:""; position:absolute; inset:0; background:
  linear-gradient(180deg, rgba(7,26,17,.58) 0%, rgba(7,26,17,.28) 34%, rgba(7,26,17,.52) 74%, rgba(7,26,17,.9) 100%),
  linear-gradient(90deg, rgba(7,26,17,.72) 0%, rgba(7,26,17,.30) 52%, rgba(7,26,17,0) 100%)}
.hero-inner{position:relative; z-index:2; width:100%; padding-block:5.5rem 4.5rem}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.8rem,4vw,3.2rem); align-items:center}
.hero-copy{max-width:600px}
.hero h1{font-size:clamp(2.3rem,5.2vw,3.8rem); font-weight:800; margin-top:1rem; letter-spacing:-.02em; color:#fff}
.hero h1 .hl{position:relative}
.hero h1 .hl::after{content:""; position:absolute; left:-.03em; right:-.03em; bottom:.07em; height:.30em; background:var(--accent); z-index:-1; border-radius:3px; opacity:.95}
.hero .lead{font-size:clamp(1.05rem,2vw,1.22rem); color:rgba(255,255,255,.9); margin-top:1.2rem; max-width:52ch}
.eyebrow.on-dark{color:#fff}
.eyebrow.on-dark::before{background:var(--accent)}
.hero-badges{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.6rem}
.badge-price{display:inline-flex; align-items:center; gap:.6rem; background:var(--accent); color:var(--accent-ink); border-radius:100px; padding:.5rem 1.05rem; font-weight:800; box-shadow:var(--shadow-md); animation:floaty 3.6s ease-in-out infinite}
.badge-ghost{display:inline-flex; align-items:center; gap:.6rem; background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.4); border-radius:100px; padding:.5rem 1.05rem; font-weight:800; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px)}
.badge-price .bp-k,.badge-ghost .bp-k{font-size:.68rem; letter-spacing:.07em; text-transform:uppercase; font-weight:700; opacity:.82}
.badge-price .bp-v,.badge-ghost .bp-v{font-family:var(--f-display); font-size:1.18rem; line-height:1}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.hero-bullets{display:grid; gap:.55rem; margin-top:1.5rem}
.hero-bullets li{list-style:none; display:flex; align-items:center; gap:.6rem; font-weight:600; color:#fff}
.hero-bullets svg{width:22px; height:22px; color:var(--accent); flex:none}
.hero-mini{display:flex; gap:1.7rem; margin-top:1.8rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.22)}
.hero-mini .m .mn{font-family:var(--f-display); font-weight:800; font-size:1.45rem; color:#fff; line-height:1}
.hero-mini .m .ml{font-size:.84rem; color:rgba(255,255,255,.75); margin-top:.25rem}
.hero-scroll{position:absolute; z-index:2; inset-block-end:16px; inset-inline-start:50%; transform:translateX(-50%); width:26px; height:42px; border:2px solid rgba(255,255,255,.55); border-radius:14px; display:grid; justify-items:center; padding-top:7px}
.hero-scroll span{width:4px; height:8px; background:#fff; border-radius:2px; animation:scrolldot 1.6s ease-in-out infinite}
@keyframes scrolldot{0%{opacity:0; transform:translateY(-4px)}40%{opacity:1}80%{opacity:0; transform:translateY(9px)}100%{opacity:0}}

/* Barra de progreso de scroll */
.scroll-progress{position:fixed; inset-block-start:0; inset-inline-start:0; height:3px; width:0; background:linear-gradient(90deg,var(--brand),var(--accent)); z-index:100; transition:width .12s linear}

/* Form card */
.form-card{background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:var(--radius-lg); padding:clamp(1.4rem,2.6vw,2rem); box-shadow:var(--shadow-lg); position:relative}
.form-card.floating{box-shadow:0 44px 90px -34px rgba(0,0,0,.6), 0 12px 34px -14px rgba(0,0,0,.4)}
.form-card::before{content:""; position:absolute; inset-block-start:0; inset-inline:0; height:6px; background:linear-gradient(90deg,var(--brand),var(--accent)); border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.form-card .fc-eyebrow{color:var(--brand-strong); font-weight:800; font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; display:flex; align-items:center; gap:.5rem}
.form-card .fc-eyebrow svg{width:16px; height:16px; flex:none}
.form-card h2{font-size:clamp(1.45rem,2.6vw,1.85rem); margin-top:.5rem; letter-spacing:-.02em}
.form-card .fc-sub{color:var(--muted); font-size:.96rem; margin-top:.35rem; margin-bottom:1.25rem}
.field{margin-bottom:.9rem}
.field label{display:block; font-weight:600; font-size:.88rem; margin-bottom:.35rem}
.field label .req{color:var(--brand-strong)}
.field input,.field textarea{width:100%; font-family:inherit; font-size:1rem; color:var(--text); background:var(--bg-alt);
  border:1.5px solid var(--border-strong); border-radius:12px; padding:.8rem .95rem; transition:border-color .16s, box-shadow .16s, background .16s}
.field textarea{resize:vertical; min-height:88px}
.field input::placeholder,.field textarea::placeholder{color:var(--muted); opacity:.7}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--brand); background:var(--surface); box-shadow:0 0 0 4px var(--ring)}
.field.two{display:grid; grid-template-columns:1fr 1fr; gap:.8rem; margin-bottom:0}
.field .err{display:none; color:#C0392B; font-size:.8rem; margin-top:.3rem; font-weight:600}
.field.invalid input,.field.invalid textarea{border-color:#C0392B; background:rgba(192,57,43,.05)}
.field.invalid .err{display:block}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form-alert{display:none; background:rgba(192,57,43,.08); border:1px solid rgba(192,57,43,.3); color:#A0301F; border-radius:10px; padding:.7rem .9rem; font-size:.88rem; font-weight:600; margin-bottom:1rem}
.form-alert.show{display:block}
.form-legal{font-size:.8rem; color:var(--muted); margin-top:.9rem; text-align:center}
.form-legal a{color:var(--brand-strong); text-decoration:underline}
.form-or{display:flex; align-items:center; gap:.8rem; margin:1rem 0 .2rem; color:var(--muted); font-size:.82rem; font-weight:600}
.form-or::before,.form-or::after{content:""; height:1px; background:var(--border); flex:1}
.form-trust{display:flex; align-items:center; justify-content:center; gap:.4rem; font-size:.82rem; color:var(--muted); margin-top:1rem}
.form-trust svg{width:15px; height:15px; color:var(--brand-strong)}
/* Éxito */
.form-success{display:none; text-align:center; padding:1.5rem .5rem}
.form-success.show{display:block; animation:pop .5s cubic-bezier(.2,.9,.3,1.2)}
.form-success .fs-ic{width:72px; height:72px; border-radius:50%; background:var(--brand-tint); color:var(--brand-strong); display:grid; place-items:center; margin:0 auto 1rem}
.form-success .fs-ic svg{width:38px; height:38px}
.form-success h2{font-size:1.55rem; margin-bottom:.5rem}
.form-success p{color:var(--muted); max-width:34ch; margin:0 auto 1.3rem}
@keyframes pop{from{opacity:0; transform:scale(.94)}to{opacity:1; transform:none}}

/* ---- Trust strip ---- */
.trust{background:var(--brand-deep); color:#fff}
.trust-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; padding-block:clamp(1.8rem,4vw,2.6rem)}
.trust .t{display:flex; align-items:center; gap:.85rem}
.trust .t .ti{width:44px; height:44px; border-radius:12px; background:rgba(255,255,255,.12); color:var(--accent); display:grid; place-items:center; flex:none}
.trust .t .ti svg{width:24px; height:24px}
.trust .t .tn{font-family:var(--f-display); font-weight:800; font-size:1.25rem; line-height:1.05}
.trust .t .tl{font-size:.85rem; color:rgba(255,255,255,.75)}

/* ---- Beneficios ---- */
.benefits-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem}
.bcard{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.6rem 1.5rem; box-shadow:var(--shadow-sm); transition:transform .22s, box-shadow .22s, border-color .22s}
.bcard:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--brand)}
.bcard .ico{width:50px; height:50px; border-radius:13px; background:var(--brand-tint); color:var(--brand-strong); display:grid; place-items:center; margin-bottom:1rem}
.bcard .ico svg{width:25px; height:25px}
.bcard h3{font-size:1.18rem; margin-bottom:.45rem; font-family:var(--f-sans); font-weight:800; letter-spacing:-.01em}
.bcard p{color:var(--muted); font-size:.97rem}

/* ---- Proyecto ---- */
.proj-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.8rem,4vw,3.2rem); align-items:center}
.proj-media{position:relative}
.proj-media img{border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); width:100%; aspect-ratio:4/3.1; object-fit:cover}
.proj-badge{position:absolute; inset-block-end:-18px; inset-inline-start:-16px; background:var(--brand); color:#fff; border-radius:16px; padding:.9rem 1.15rem; box-shadow:var(--shadow-md)}
.proj-badge .bn{font-family:var(--f-display); font-size:1.35rem; font-weight:800; line-height:1}
.proj-badge .bl{font-size:.8rem; font-weight:600; opacity:.9}
.proj-copy h2{font-size:clamp(2rem,4.4vw,3rem); margin-top:1rem}
.proj-copy .lead{color:var(--muted); margin-top:1rem; font-size:1.08rem}
.feature-list{display:grid; gap:.1rem; margin-top:1.5rem}
.feature{display:flex; gap:.85rem; align-items:flex-start; padding:.8rem 0; border-bottom:1px solid var(--border)}
.feature:last-child{border-bottom:0}
.feature .fi{width:34px; height:34px; border-radius:10px; background:var(--brand-tint); color:var(--brand-strong); display:grid; place-items:center; flex:none}
.feature .fi svg{width:19px; height:19px}
.feature h4{font-family:var(--f-sans); font-weight:800; font-size:1rem; margin-bottom:.1rem}
.feature p{color:var(--muted); font-size:.92rem}

/* ---- Galería ---- */
.gallery{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:210px; gap:1rem}
.gitem{position:relative; overflow:hidden; border-radius:var(--radius); cursor:pointer; box-shadow:var(--shadow-sm); border:1px solid var(--border)}
.gitem img{width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.gitem:hover img{transform:scale(1.06)}
.gitem::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 50%,rgba(6,26,16,.62) 100%)}
.gitem .cap{position:absolute; inset-block-end:0; inset-inline:0; padding:.95rem 1rem; color:#fff; font-weight:600; font-size:.92rem; z-index:2; text-shadow:0 1px 6px rgba(0,0,0,.4)}
.gitem .zoom{position:absolute; inset-block-start:.7rem; inset-inline-end:.7rem; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.92); color:var(--brand-deep); display:grid; place-items:center; opacity:0; transform:scale(.85); transition:.25s; z-index:2}
.gitem:hover .zoom{opacity:1; transform:none}
.gitem .zoom svg{width:17px; height:17px}
.gitem.big{grid-column:span 2; grid-row:span 2}
.gitem.wide{grid-column:span 2}
.lightbox{position:fixed; inset:0; z-index:120; background:rgba(6,18,11,.9); backdrop-filter:blur(6px); display:none; align-items:center; justify-content:center; padding:1.5rem}
.lightbox.open{display:flex}
.lightbox img{max-width:min(1000px,92vw); max-height:84vh; border-radius:14px; box-shadow:var(--shadow-lg)}
.lightbox .lb-cap{position:absolute; inset-block-end:1.4rem; inset-inline:0; text-align:center; color:#fff; font-weight:600; font-size:.95rem}
.lightbox button{position:absolute; width:50px; height:50px; border-radius:50%; border:0; background:rgba(255,255,255,.15); color:#fff; cursor:pointer; display:grid; place-items:center}
.lightbox button:hover{background:rgba(255,255,255,.28)}
.lightbox button svg{width:24px; height:24px}
.lb-close{inset-block-start:1.1rem; inset-inline-end:1.2rem}
.lb-prev{inset-block-start:50%; transform:translateY(-50%); inset-inline-start:1.2rem}
.lb-next{inset-block-start:50%; transform:translateY(-50%); inset-inline-end:1.2rem}

/* ---- Ubicación ---- */
.loc-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(1.8rem,4vw,3rem); align-items:stretch}
.loc-refs{display:grid; gap:.7rem; align-content:start; margin-top:1.5rem}
.loc-ref{display:flex; align-items:center; gap:1rem; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:.9rem 1.05rem}
.loc-ref .lr-ic{width:40px; height:40px; border-radius:11px; background:var(--brand-tint); color:var(--brand-strong); display:grid; place-items:center; flex:none}
.loc-ref .lr-ic svg{width:20px; height:20px}
.loc-ref .lr-t{font-weight:700; font-size:.98rem}
.loc-ref .lr-d{color:var(--muted); font-size:.87rem}
.map-shell{border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow-md); min-height:420px; background:var(--bg-alt); position:relative}
.map-shell iframe{width:100%; height:100%; min-height:420px; border:0; display:block}
.map-placeholder{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:.8rem; padding:2rem; color:var(--muted)}
.map-placeholder .mp-pin{width:60px; height:60px; border-radius:50%; background:var(--brand); color:#fff; display:grid; place-items:center; box-shadow:var(--shadow-md)}
.map-placeholder .mp-pin svg{width:30px; height:30px}
.map-placeholder b{color:var(--text)}
.map-placeholder code{background:var(--surface); border:1px solid var(--border); padding:.12rem .4rem; border-radius:6px; font-size:.8rem; color:var(--brand-strong)}

/* ---- Precios ---- */
.pricing-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.8rem,4vw,3rem); align-items:center}
.pricing-copy h2{font-size:clamp(2rem,4.2vw,2.9rem); margin-top:1rem}
.pricing-copy p{color:var(--muted); margin-top:1rem; max-width:46ch}
.pricing-copy .bullets{display:grid; gap:.65rem; margin-top:1.5rem; padding:0}
.pricing-copy .bullets li{list-style:none; display:flex; gap:.6rem; align-items:flex-start}
.pricing-copy .bullets svg{width:21px; height:21px; color:var(--brand-strong); flex:none; margin-top:.1rem}
.finance-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:2rem; box-shadow:var(--shadow-lg)}
.finance-card .fc-top{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.finance-card .fc-label{font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--muted)}
.finance-card .fc-tag{background:var(--accent); color:var(--accent-ink); font-weight:800; font-size:.76rem; padding:.28rem .7rem; border-radius:100px}
.finance-card .fc-initial{font-family:var(--f-display); font-size:clamp(2.6rem,5vw,3.4rem); font-weight:800; line-height:1; margin-top:.35rem; color:var(--brand-strong)}
.finance-card .fc-initial small{font-family:var(--f-sans); font-size:1rem; color:var(--muted); font-weight:500}
.finance-rows{margin-top:1.4rem}
.finance-row{display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.9rem 0; border-bottom:1px solid var(--border)}
.finance-row:last-of-type{border-bottom:0}
.finance-row .fr-k{color:var(--muted); font-weight:500}
.finance-row .fr-v{font-weight:800; font-size:1.12rem; font-variant-numeric:tabular-nums}
.finance-card .fc-note{margin-top:.9rem; font-size:.8rem; color:var(--muted)}
.finance-card code{background:var(--bg-alt); border:1px solid var(--border); padding:.05rem .35rem; border-radius:5px; color:var(--brand-strong)}

/* ---- Testimonios ---- */
.testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem}
.tcard{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.6rem; box-shadow:var(--shadow-sm); display:flex; flex-direction:column}
.tcard .stars{display:flex; gap:.12rem; color:#F5B301; margin-bottom:.9rem}
.tcard .stars svg{width:18px; height:18px}
.tcard blockquote{margin:0; font-size:1rem; color:var(--text); line-height:1.6; flex:1}
.tcard .who{display:flex; align-items:center; gap:.75rem; margin-top:1.3rem; padding-top:1.1rem; border-top:1px solid var(--border)}
.tcard .who .av{width:44px; height:44px; border-radius:50%; background:var(--brand); color:#fff; display:grid; place-items:center; font-weight:800; font-family:var(--f-display); flex:none}
.tcard .who .wn{font-weight:800; font-size:.97rem}
.tcard .who .wr{color:var(--muted); font-size:.84rem}
.placeholder-note{margin-top:1.4rem; text-align:center; font-size:.85rem; color:var(--muted); display:flex; gap:.45rem; align-items:center; justify-content:center}
.placeholder-note svg{width:16px; height:16px; color:var(--brand-strong)}
.placeholder-note code{background:var(--bg-alt); border:1px solid var(--border); padding:.08rem .35rem; border-radius:5px}

/* ---- Clientes (carrusel de fotos reales) ---- */
.clientes-carousel{position:relative; margin-top:.5rem}
.clientes-track{display:flex; gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding:.5rem .2rem 1rem; -webkit-overflow-scrolling:touch; scrollbar-width:none}
.clientes-track::-webkit-scrollbar{display:none}
.ccard{position:relative; flex:0 0 auto; width:clamp(220px,26vw,278px); aspect-ratio:3/4; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-md); border:1px solid var(--border); scroll-snap-align:center; cursor:pointer; background:var(--surface)}
.ccard img{width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.ccard:hover img{transform:scale(1.06)}
.ccard figcaption{position:absolute; inset-block-end:0; inset-inline:0; padding:1.6rem .9rem .85rem; color:#fff; font-size:.85rem; font-weight:600; display:flex; gap:.45rem; align-items:center; line-height:1.3; background:linear-gradient(180deg,transparent,rgba(6,26,16,.88)); text-shadow:0 1px 4px rgba(0,0,0,.5)}
.ccard .cc-ic{width:20px; height:20px; border-radius:50%; background:var(--brand); color:#fff; display:grid; place-items:center; flex:none}
.ccard .cc-ic svg{width:13px; height:13px}
.carousel-btn{position:absolute; inset-block-start:calc(50% - 1rem); transform:translateY(-50%); z-index:5; width:48px; height:48px; border-radius:50%; border:1px solid var(--border); background:var(--surface); color:var(--brand-strong); box-shadow:var(--shadow-md); cursor:pointer; display:grid; place-items:center; transition:background .18s, color .18s}
.carousel-btn:hover{background:var(--brand); color:#fff; border-color:var(--brand)}
.carousel-btn svg{width:22px; height:22px}
.carousel-btn.prev{inset-inline-start:-12px}
.carousel-btn.next{inset-inline-end:-12px}
.clientes-hint{margin-top:1.3rem; text-align:center; color:var(--muted); font-size:.98rem; font-weight:600; display:flex; gap:.5rem; align-items:center; justify-content:center}
.clientes-hint svg{width:20px; height:20px; color:var(--brand-strong); flex:none}
.map-cta{margin-top:1rem}
@media (max-width:640px){ .carousel-btn{display:none} }

/* ---- CTA final (único bloque verde fuerte) ---- */
.finalcta{position:relative; overflow:hidden; background:var(--brand); color:#fff; border-radius:clamp(20px,3vw,32px); padding:clamp(2.4rem,6vw,4.2rem); text-align:center; box-shadow:var(--shadow-lg)}
.finalcta::before{content:""; position:absolute; inset:0; background:radial-gradient(1000px 360px at 50% -30%, rgba(255,255,255,.16), transparent 60%); z-index:0}
.finalcta>*{position:relative; z-index:1}
.finalcta h2{font-size:clamp(2rem,4.6vw,3.1rem); color:#fff; max-width:22ch; margin-inline:auto}
.finalcta p{color:rgba(255,255,255,.92); margin-top:1rem; max-width:54ch; margin-inline:auto; font-size:1.1rem}
.finalcta .fc-actions{display:flex; flex-wrap:wrap; gap:.85rem; justify-content:center; margin-top:2rem}
.finalcta .btn.white{background:#fff; color:var(--brand-strong)}
.finalcta .btn.white:hover{background:#F2FBF5}
.finalcta .btn.wa{background:#fff; color:#0B7A38}

/* ---- Footer ---- */
.footer{background:var(--dark); color:rgba(255,255,255,.72); padding-block:clamp(3rem,6vw,4.2rem) 1.8rem}
.footer-grid{display:grid; grid-template-columns:1.5fr 1fr 1.3fr; gap:2rem}
.footer .brand{color:#fff; margin-bottom:1rem}
.footer .brand .b-sub{color:rgba(255,255,255,.6)}
.footer .f-about{font-size:.95rem; color:rgba(255,255,255,.6); max-width:36ch}
.footer h4{font-family:var(--f-sans); font-weight:800; font-size:.82rem; letter-spacing:.09em; text-transform:uppercase; color:#fff; margin-bottom:1.05rem}
.footer ul{list-style:none; margin:0; padding:0; display:grid; gap:.6rem}
.footer .f-links a{color:rgba(255,255,255,.72); font-size:.95rem}
.footer .f-links a:hover{color:#fff}
.footer .f-contact li{display:flex; gap:.6rem; align-items:center; font-size:.95rem; color:rgba(255,255,255,.8)}
.footer .f-contact svg{width:17px; height:17px; color:var(--accent); flex:none}
.footer .f-contact a:hover{color:#fff}
.socials{display:flex; gap:.55rem; margin-top:1.3rem}
.socials a{width:40px; height:40px; border-radius:10px; background:rgba(255,255,255,.1); display:grid; place-items:center; color:#fff; transition:background .18s, transform .18s}
.socials a:hover{background:var(--brand); transform:translateY(-2px)}
.socials svg{width:19px; height:19px}
.footer-bottom{margin-top:2.4rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.13); display:flex; flex-wrap:wrap; gap:.7rem 1.5rem; justify-content:space-between; align-items:center; font-size:.84rem; color:rgba(255,255,255,.55)}
.footer-bottom .fb-links{display:flex; gap:1.2rem; flex-wrap:wrap}
.footer-bottom a:hover{color:#fff}

/* ---- Flotantes ---- */
.wa-float{position:fixed; inset-block-end:22px; inset-inline-end:22px; z-index:90; display:flex; align-items:center; gap:.6rem; background:var(--wa); color:#fff; padding:.8rem 1.1rem; border-radius:100px; font-weight:700; box-shadow:0 14px 30px -8px rgba(37,211,102,.6); transition:transform .2s}
.wa-float:hover{transform:translateY(-3px) scale(1.02)}
.wa-float svg{width:26px; height:26px; flex:none}
.wa-float .wa-pulse{position:absolute; inset:0; border-radius:100px; animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.45)}70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
.to-top{position:fixed; inset-block-end:24px; inset-inline-start:22px; z-index:80; width:46px; height:46px; border-radius:50%; border:1px solid var(--border); background:var(--surface); color:var(--text); box-shadow:var(--shadow-md); display:grid; place-items:center; cursor:pointer; opacity:0; transform:translateY(12px); pointer-events:none; transition:.25s}
.to-top.show{opacity:1; transform:none; pointer-events:auto}
.to-top svg{width:22px; height:22px}

/* ---- Reveal ---- */
.reveal{opacity:0; transform:translateY(20px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1; transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}

/* ---- Responsive ---- */
@media (max-width:980px){
  .hero{min-height:auto}
  .hero-inner{padding-block:2.5rem 3.5rem}
  .hero-grid{grid-template-columns:1fr; gap:2rem}
  .hero-copy{max-width:none}
  .hero-scroll{display:none}
  .form-card{order:-1}                    /* el formulario primero en pantallas medianas/móvil */
  .proj-grid,.loc-grid,.pricing-grid{grid-template-columns:1fr}
  .proj-media{order:-1; margin-bottom:1rem}
  .trust-grid{grid-template-columns:repeat(2,1fr); gap:1.4rem 1rem}
  .benefits-grid{grid-template-columns:repeat(2,1fr)}
  .testi-grid{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr); grid-auto-rows:180px}
  .gitem.big{grid-column:span 2; grid-row:span 1}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .nav{position:fixed; inset-block-start:0; inset-inline-end:0; height:100vh; width:min(84vw,330px); background:var(--surface);
    flex-direction:column; align-items:stretch; justify-content:flex-start; padding:5.2rem 1.4rem 2rem; gap:.3rem;
    transform:translateX(105%); transition:transform .32s cubic-bezier(.2,.7,.2,1); box-shadow:var(--shadow-lg); border-inline-start:1px solid var(--border); z-index:75}
  .nav.open{transform:none}
  .nav a.navlink{padding:.9rem .5rem; font-size:1.05rem; border-bottom:1px solid var(--border); border-radius:0}
  .nav .header-phone{border-bottom:1px solid var(--border); border-radius:0; padding:.9rem .5rem}
  .nav .header-cta{margin:.8rem 0 0}
  .nav .header-cta .btn{width:100%}
  .nav-toggle{display:flex}
  .nav-scrim{position:fixed; inset:0; background:rgba(6,18,11,.5); z-index:74; opacity:0; pointer-events:none; transition:opacity .3s}
  .nav-scrim.show{opacity:1; pointer-events:auto}
  body.nav-open{overflow:hidden}
}
@media (max-width:560px){
  .benefits-grid,.gallery,.trust-grid{grid-template-columns:1fr}
  .gallery{grid-auto-rows:220px}
  .field.two{grid-template-columns:1fr; gap:0}
  .field.two .field{margin-bottom:.9rem}
  .footer-grid{grid-template-columns:1fr}
  .hero-mini{gap:1.2rem}
  .wa-float .wa-txt{display:none}
  .wa-float{padding:.9rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none; transition:none}
  .wa-pulse{animation:none}
  *{animation-duration:.001ms!important; transition-duration:.08s!important}
}