@font-face{ font-family:Gotham; src:url('assets/fonts/GothamBook.otf'); font-display:swap; }
@font-face{ font-family:Gotham; src:url('assets/fonts/GothamMedium.otf'); font-weight:700; font-display:swap; }

* { margin:0; padding:0; box-sizing:border-box; }
:root{ --azul:#1d71b8; --azul-d:#156fbb; --dark:#1c202b; --gris:#dedee0; --gris2:#ececed; }
body{ font-family:'Gotham','Montserrat',sans-serif; color:#1c202b; background:#f3f3f3; line-height:1.4; }
img{ max-width:100%; height:auto; }
.container{ width:1110px; max-width:100%; margin:auto; padding:0 15px; position:relative; }
strong{ font-weight:700; }

/* Header */
header{ background:#fff; padding:18px 0; box-shadow:0 1px 6px rgba(0,0,0,.08); position:relative; z-index:100; }
header .container{ display:flex; align-items:center; justify-content:space-between; }
.mh-logo img{ height:50px; }
.hd-cta{ background:#1c9e4d; color:#fff; padding:10px 20px; border-radius:50px; font-weight:700; font-size:14px; display:inline-flex; align-items:center; gap:8px; }
.hd-cta i{ font-size:18px; }

/* Hero */
#hero{ background:linear-gradient(rgba(28,32,43,.82),rgba(28,32,43,.9)), url('images/mainbg.png') center/cover #2c3237; color:#fff; padding:95px 0; }
#hero .eyebrow{ font-size:13px; letter-spacing:6px; text-transform:uppercase; color:#7fb8e8; font-weight:500; margin-bottom:20px; }
#hero h1{ font-size:52px; line-height:1.05; font-weight:700; margin-bottom:25px; max-width:840px; }
#hero h1 span{ color:#5fa8e0; }
#hero .lead{ font-size:19px; line-height:1.55; max-width:650px; margin-bottom:18px; color:#e4e8ee; }
#hero .proof{ font-size:15px; color:#b9c2cf; margin-bottom:35px; }
#hero .proof strong{ color:#fff; }
.btn-ws{ background:#1c9e4d; color:#fff; padding:18px 38px; border-radius:50px; font-weight:700; font-size:17px; display:inline-flex; align-items:center; gap:12px; transition:all .3s; }
.btn-ws:hover{ background:#168a42; transform:translateY(-2px); }
.btn-ws i{ font-size:24px; }
.hero-micro{ display:block; margin-top:14px; font-size:13px; color:#9aa5b3; }

/* Barra dolor */
#dolor{ background:var(--azul); color:#fff; padding:55px 0; }
#dolor .container{ display:flex; align-items:center; gap:40px; }
#dolor .di-ico{ font-size:60px; flex:none; opacity:.85; }
#dolor p{ font-size:22px; line-height:1.5; font-weight:500; }
#dolor strong{ color:#cde6fb; }

/* Caso SPT */
#caso{ padding:90px 0; background:#fff; }
.sec-eyebrow{ text-align:center; font-size:13px; letter-spacing:5px; text-transform:uppercase; color:var(--azul); font-weight:700; margin-bottom:12px; }
.sec-title{ text-align:center; font-size:42px; line-height:1.1; font-weight:700; margin-bottom:18px; }
.sec-title strong{ color:var(--azul); }
.sec-intro{ text-align:center; font-size:18px; line-height:1.6; max-width:760px; margin:0 auto 55px; color:#444; }
.caso-grid{ display:flex; gap:45px; align-items:center; }
.caso-txt{ flex:1; }
.caso-cliente{ display:flex; align-items:center; gap:14px; margin-bottom:22px; padding-bottom:20px; border-bottom:1px solid #e0e0e0; }
.caso-cliente img{ height:42px; }
.caso-cliente span{ font-size:13px; color:#888; line-height:1.3; }
.caso-txt h3{ font-size:25px; font-weight:700; margin-bottom:16px; color:var(--dark); }
.caso-txt p{ font-size:16px; line-height:1.7; margin-bottom:15px; color:#3a3f4a; }
.caso-txt p strong{ color:var(--azul); }
.caso-foto{ flex:1; }
.caso-foto img{ width:100%; border-radius:14px; box-shadow:0 12px 40px rgba(0,0,0,.18); }
.caso-foto .cap{ text-align:center; font-size:13px; color:#999; margin-top:12px; font-style:italic; }

/* Stats */
#stats{ background:var(--dark); color:#fff; padding:60px 0; }
#stats .container{ display:flex; justify-content:space-around; flex-wrap:wrap; gap:30px; text-align:center; }
.stat .num{ font-size:46px; font-weight:700; color:#5fa8e0; line-height:1; }
.stat .lbl{ font-size:15px; color:#b9c2cf; margin-top:10px; max-width:220px; }

/* Testimonio */
#testi{ padding:90px 0; background:var(--gris); }
.testi-box{ background:#fff; border-radius:18px; padding:60px; max-width:880px; margin:50px auto 0; position:relative; box-shadow:0 10px 40px rgba(0,0,0,.08); }
.testi-box .quote-ico{ font-size:60px; color:var(--azul); opacity:.18; position:absolute; top:30px; left:40px; }
.testi-quote{ font-size:22px; line-height:1.6; font-weight:500; color:var(--dark); font-style:italic; position:relative; z-index:2; margin-bottom:30px; }
.testi-author{ display:flex; align-items:center; gap:18px; }
.testi-author .ph-av{ width:64px; height:64px; border-radius:50%; border:2px dashed var(--azul); display:flex; align-items:center; justify-content:center; color:var(--azul); font-size:11px; text-align:center; background:#eef5fc; flex:none; }
.testi-author .who strong{ font-size:18px; display:block; color:var(--dark); }
.testi-author .who span{ font-size:14px; color:#666; }
.testi-note{ text-align:center; font-size:13px; color:#888; margin-top:25px; font-style:italic; }

/* Componentes */
#comp{ padding:90px 0; background:#fff; }
.comp-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:50px; }
.comp-card{ background:var(--gris2); border-radius:12px; padding:30px 20px; text-align:center; transition:all .3s; border-bottom:4px solid transparent; }
.comp-card:hover{ background:var(--azul); color:#fff; border-bottom-color:var(--dark); transform:translateY(-4px); }
.comp-card i{ font-size:34px; color:var(--azul); margin-bottom:14px; transition:all .3s; }
.comp-card:hover i{ color:#fff; }
.comp-card span{ font-weight:700; font-size:15px; letter-spacing:.5px; }
.comp-foot{ text-align:center; margin-top:35px; font-size:16px; color:#555; }

/* Por qué */
#porque{ padding:90px 0; background:var(--gris); }
.pq-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:25px; margin-top:50px; }
.pq-card{ background:#fff; padding:40px 30px; border-radius:14px; border-top:5px solid var(--azul); }
.pq-card i{ font-size:40px; color:var(--azul); margin-bottom:18px; }
.pq-card h4{ font-size:20px; font-weight:700; margin-bottom:12px; color:var(--dark); }
.pq-card p{ font-size:15px; line-height:1.6; color:#444; }

/* Galería */
#galeria{ padding:90px 0; background:#fff; }
.gal-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:50px; }
.gal-grid img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:12px; }
.gal-ph{ aspect-ratio:4/3; border:3px dashed #b9c2cf; border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#8a97a6; background:#f4f6f9; text-align:center; padding:20px; }
.gal-ph i{ font-size:36px; margin-bottom:10px; opacity:.5; }
.gal-ph span{ font-size:13px; font-weight:600; }

/* Sectores */
#sectores{ padding:80px 0; background:var(--dark); color:#fff; }
.sect-grid{ display:flex; justify-content:center; gap:25px; margin-top:45px; flex-wrap:wrap; }
.sect-card{ border:1px solid #3a4150; border-radius:14px; padding:35px 45px; text-align:center; flex:1; max-width:300px; transition:all .3s; }
.sect-card:hover{ background:var(--azul); border-color:var(--azul); }
.sect-card i{ font-size:42px; color:#5fa8e0; margin-bottom:16px; }
.sect-card:hover i{ color:#fff; }
.sect-card h4{ font-size:20px; font-weight:700; margin-bottom:8px; }
.sect-card p{ font-size:14px; color:#b9c2cf; }
.sect-card:hover p{ color:#e4e8ee; }

/* CTA final */
#cta{ background:linear-gradient(rgba(29,113,184,.94),rgba(21,111,187,.96)), url('images/mainbg.png') center/cover var(--azul); color:#fff; padding:90px 0; text-align:center; }
#cta h2{ font-size:44px; font-weight:700; line-height:1.1; margin-bottom:20px; }
#cta p{ font-size:19px; max-width:620px; margin:0 auto 38px; color:#e4f0fb; line-height:1.5; }
#cta .btn-ws{ font-size:19px; padding:20px 45px; }

/* Footer */
footer{ background:#000; padding:50px 0 30px; color:#fff; }
.footer-bottom .container{ display:flex; justify-content:center; align-items:center; }
.footer-bottom img{ height:50px; }
.footer-copy{ padding-top:25px; text-align:center; letter-spacing:5px; font-size:11px; color:#bbb; }
.footer-copy strong{ color:#fff; }

/* WhatsApp flotante */
.ws-float{ position:fixed; bottom:25px; right:25px; width:74px; height:74px; background:#00c749; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 16px rgba(0,0,0,.3); z-index:9999; animation:pulse 2.5s infinite; }
.ws-float i{ color:#fff; font-size:42px; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(0,199,73,.5); } 70%{ box-shadow:0 0 0 16px rgba(0,199,73,0); } 100%{ box-shadow:0 0 0 0 rgba(0,199,73,0); } }

@media(max-width:840px){
  #hero h1{ font-size:36px; }
  #dolor .container{ flex-direction:column; text-align:center; gap:20px; }
  .caso-grid{ flex-direction:column; }
  .comp-grid{ grid-template-columns:repeat(2,1fr); }
  .pq-grid,.gal-grid{ grid-template-columns:1fr; }
  .sec-title,#cta h2{ font-size:32px; }
  .testi-box{ padding:40px 25px; }
  .testi-quote{ font-size:19px; }
}