/* ============================================================
   Montacargas Montera — Sistema de diseño de la maqueta
   Inspirado en https://avada.website/mechanic/ (paleta, tipografía y layout)
   Viewport de referencia: MacBook 13" (1440x900)
   ============================================================ */

:root{
  --navy:        #012b7f;   /* azul marino principal (header, footer, hero) */
  --navy-2:      #1531c4;   /* azul secundario (cards de íconos) */
  --navy-dark:   #001849;   /* azul más oscuro (barra superior, overlays) */
  --yellow:      #ffdc4b;   /* acento principal (CTA, cifras, subrayados) */
  --yellow-dark: #f5c400;
  --red:         #d20b09;   /* rojo de marca (tomado del logo) — acento de urgencia/energía */
  --red-dark:    #a80906;
  --white:       #ffffff;
  --offwhite:    #f5f6f8;
  --text:        #21242c;
  --muted:       #6b7280;
  --border:      #e7e9ee;
  --whatsapp:    #25d366;
  --google-blue: #4285F4;
  --google-red:  #EA4335;
  --google-yellow:#FBBC05;
  --google-green:#34A853;

  --radius-pill: 35px;
  --radius-card: 12px;
  --container: 1200px;
  --shadow-card: 0 14px 34px rgba(1,43,127,.10);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Epilogue', Arial, Helvetica, sans-serif;
  color:var(--text);
  background:#fff;
  line-height:1.6;
  font-size:16px;
}
img{max-width:100%; display:block;}
a{text-decoration:none; color:inherit;}
ul{list-style:none; margin:0; padding:0;}
h1,h2,h3,h4{font-family:'Epilogue', Arial, sans-serif; font-weight:700; margin:0 0 .5em; color:var(--navy);}
p{margin:0 0 1em;}
.container{max-width:var(--container); margin:0 auto; padding:0 24px;}
.hidden{display:none !important;}

/* ---------- Utility badges / eyebrow ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--navy); background:var(--yellow);
  font-weight:800; font-size:12.5px; letter-spacing:.5px; text-transform:uppercase;
  padding:6px 16px; border-radius:30px; margin-bottom:14px;
}
.section-head{max-width:680px; margin:0 auto 46px; text-align:center;}
.section-head h2{font-size:clamp(26px,3vw,36px); font-weight:800;}
.section-head p{color:var(--muted); font-size:16px;}
.section-head.left{margin:0 0 32px; text-align:left;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:700; font-size:14.5px; padding:14px 30px; border-radius:var(--radius-pill);
  border:2px solid transparent; cursor:pointer; transition:.2s ease; white-space:nowrap;
}
.btn-yellow{background:var(--yellow); color:var(--navy);}
.btn-yellow:hover{background:var(--yellow-dark); transform:translateY(-1px);}
.btn-white{background:#fff; color:var(--navy);}
.btn-white:hover{background:var(--offwhite);}
.btn-navy{background:var(--navy); color:#fff;}
.btn-navy:hover{background:var(--navy-dark);}
.btn-red{background:var(--red); color:#fff;}
.btn-red:hover{background:var(--red-dark); transform:translateY(-1px);}
.btn-outline{background:transparent; color:#fff; border-color:rgba(255,255,255,.6);}
.btn-outline:hover{background:rgba(255,255,255,.12);}
.btn-outline-navy{background:transparent; color:var(--navy); border-color:var(--navy);}
.btn-outline-navy:hover{background:var(--navy); color:#fff;}
.btn-block{width:100%;}
.btn-lg{padding:17px 34px; font-size:16px;}
.btn svg{width:18px; height:18px; flex-shrink:0;}

/* ---------- Franja de marca (rojo del logo) ---------- */
.brand-stripe{height:5px; width:100%; background:linear-gradient(90deg, var(--red) 0%, var(--red) 35%, var(--yellow) 65%, var(--navy) 100%);}

/* ---------- Topbar (tel | keyword | info) ---------- */
.topbar{background:var(--navy-dark); color:#fff; font-size:13.5px;}
.topbar .container{display:flex; align-items:center; justify-content:space-between; padding:9px 24px; gap:12px; flex-wrap:wrap;}
.topbar-left{display:flex; align-items:center; gap:22px; flex-wrap:wrap;}
.topbar-left > *{display:flex; align-items:center; gap:7px;}
.topbar-left b{color:var(--yellow); font-weight:700;}
.topbar-kw{color:#cfd8ef; font-weight:500;}
.topbar-kw::before{content:"•"; color:var(--yellow); margin-right:14px;}
.topbar-info{color:#cfd8ef;}
.topbar-info::before{content:"•"; color:var(--yellow); margin-right:14px;}
.topbar-right{display:flex; align-items:center; gap:16px;}
.topbar-right a{color:#fff; opacity:.85;}
.topbar-right a:hover{opacity:1; color:var(--yellow);}

@media(max-width:980px){
  .topbar{display:none;}
}

/* ---------- Main header / nav ---------- */
header.site{background:#fff; position:sticky; top:0; z-index:100; box-shadow:0 2px 14px rgba(0,0,0,.06);}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 24px; gap:20px;}
.nav .logo img{height:52px; width:auto;}
nav.menu{flex:1; display:flex; justify-content:center;}
nav.menu ul{display:flex; align-items:center; gap:30px;}
nav.menu li{position:relative;}
nav.menu a.top-link{font-weight:700; font-size:15px; color:var(--navy); padding:10px 0; display:flex; align-items:center; gap:5px;}
nav.menu a.top-link:hover{color:var(--yellow-dark);}
nav.menu .dropdown{
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  background:#fff; border-radius:10px; box-shadow:0 18px 40px rgba(1,43,127,.18);
  padding:10px; min-width:270px; opacity:0; visibility:hidden; translate:0 8px;
  transition:.18s ease; z-index:50;
}
nav.menu li:hover .dropdown{opacity:1; visibility:visible; translate:0 0;}
nav.menu .dropdown a{display:block; padding:10px 14px; border-radius:8px; font-size:14.5px; font-weight:600; color:var(--text);}
nav.menu .dropdown a:hover{background:var(--offwhite); color:var(--navy);}
.nav-cta{display:flex; align-items:center; gap:12px;}
.nav-phone{display:none; align-items:center; gap:8px; font-weight:800; color:var(--navy); font-size:15px;}

.burger{display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px;}
.burger span{width:26px; height:3px; background:var(--navy); border-radius:3px;}

@media(max-width:980px){
  nav.menu{display:none;}
  .burger{display:flex;}
  .nav-cta .btn{display:none;}
}

/* Menú móvil — overlay a pantalla completa (no es un panel lateral / slide-in) */
.mobile-menu{position:fixed; inset:0; background:#fff; z-index:200; display:none;}
.mobile-menu.open{display:block;}
.mobile-menu-panel{position:absolute; inset:0; width:100%; max-width:none; height:100%; background:#fff; padding:26px 22px; overflow-y:auto;}
.mobile-menu-panel .close-btn{background:none; border:0; font-size:26px; color:var(--navy); float:right; cursor:pointer;}
.mobile-menu-panel ul{margin-top:40px;}
.mobile-menu-panel li{border-bottom:1px solid var(--border);}
.mobile-menu-panel a{display:block; padding:14px 4px; font-weight:700; color:var(--navy); font-size:16px;}
.mobile-menu-panel .sub a{padding-left:18px; font-weight:600; font-size:14.5px; color:var(--muted);}

/* ---------- Hero ---------- */
.hero{background:linear-gradient(120deg, var(--navy) 40%, var(--navy-dark) 100%); background-size:cover; background-position:center; color:#fff; position:relative; overflow:hidden;}
/* Cuando el hero lleva foto de fondo (heroes "small"), el gradiente se pone como overlay sobre la imagen vía estilo inline */
.hero.has-photo{background-blend-mode:normal;}

/* Fondo animado: barrido diagonal de líneas + dos manchas de luz (rojo/amarillo) a la deriva */
.hero::before{
  content:""; position:absolute; inset:-20%; z-index:0; pointer-events:none;
  background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 34px);
  animation: heroPan 22s linear infinite;
}
.hero::after{
  content:""; position:absolute; z-index:0; pointer-events:none; border-radius:50%; filter:blur(60px);
  width:520px; height:520px; top:-160px; right:-120px;
  background:radial-gradient(circle at 30% 30%, var(--red) 0%, transparent 65%);
  opacity:.55; animation: heroDrift1 17s ease-in-out infinite;
}
.hero .container{position:relative; z-index:2;}
.hero-glow-2{
  content:""; position:absolute; z-index:1; pointer-events:none; border-radius:50%; filter:blur(70px);
  width:460px; height:460px; bottom:-180px; left:-140px;
  background:radial-gradient(circle at 60% 40%, var(--yellow) 0%, transparent 65%);
  opacity:.28; animation: heroDrift2 20s ease-in-out infinite;
}
@keyframes heroPan{ from{ background-position:0 0; } to{ background-position:-300px 300px; } }
@keyframes heroDrift1{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-40px,50px) scale(1.12); } }
@keyframes heroDrift2{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(50px,-40px) scale(1.15); } }
@media (prefers-reduced-motion: reduce){
  .hero::before, .hero::after, .hero-glow-2{ animation:none; }
}

.hero .container{display:grid; grid-template-columns:1.05fr .95fr; gap:50px; align-items:start; padding:0px 24px 20px;}
.hero h1{color:#fff; font-size:clamp(32px,4vw,48px); font-weight:800; line-height:1.14; margin-bottom:18px;}
.hero h1 em{color:var(--yellow); font-style:normal;}
.hero .lead{font-size:18px; color:#d7def3; max-width:520px; margin-bottom:30px;}
.hero .btn-row{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:26px;}
.hero .trustline{display:flex; gap:18px; flex-wrap:wrap; font-size:13.5px; color:#c9d3ec; font-weight:600;}
.hero .trustline span{display:flex; align-items:center; gap:6px;}
.hero-media{position:relative; align-self:center; margin-top:20px;}
.hero-media img{border-radius:14px; box-shadow:0 26px 60px rgba(0,0,0,.35); position:relative; z-index:2;}
.hero-badge{position:absolute; bottom:-18px; left:-18px; background:#fff; border-radius:14px; padding:16px 20px; box-shadow:0 16px 34px rgba(1,43,127,.25); display:flex; align-items:center; gap:12px; z-index:3;}
.hero-badge .n{font-size:26px; font-weight:900; color:var(--navy);}
.hero-badge .l{font-size:12px; color:var(--muted); font-weight:700; text-transform:uppercase;}

/* Slideshow de fotos del hero de Inicio (crossfade 100% CSS, sin JS) */
.hero-slideshow{position:relative; z-index:2; border-radius:14px; overflow:hidden; box-shadow:0 26px 60px rgba(0,0,0,.35); height:420px; background:var(--navy-dark);}
.hero-slideshow .slide{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; animation:heroSlideFade 20s infinite;}
@keyframes heroSlideFade{
  0%{opacity:0;} 3%{opacity:1;} 22%{opacity:1;} 27%{opacity:0;} 100%{opacity:0;}
}
@media (prefers-reduced-motion: reduce){ .hero-slideshow .slide{ animation:none; opacity:0; } .hero-slideshow > *:first-child .slide{ opacity:1; } }

.hero.small{padding:0;}
.hero.small .container{grid-template-columns:1.05fr .95fr; padding:40px 24px 56px; text-align:left;}
.hero.small h1{font-size:clamp(28px,3.4vw,40px);}
.hero.small .lead{max-width:680px;}
.hero.small .hero-media{align-self:center; margin-top:0;}
.hero.small .hero-media img{aspect-ratio:4/3.3; object-fit:cover; width:100%;}

/* Ilustraciones grandes de montacargas flotando en el fondo del hero */
.hero-illustration{position:absolute; z-index:1; pointer-events:none; width:340px; height:290px; right:-40px; bottom:-30px; animation:heroIllustFloat 12s ease-in-out infinite;}
.hero-illustration-2{width:220px; height:190px; right:16%; top:6%; bottom:auto; animation:heroIllustFloat2 15s ease-in-out infinite;}
.hero.small .hero-illustration{right:2%; bottom:-10%; width:300px; height:260px; opacity:.9;}
.hero.small .hero-illustration-2{right:26%; top:-8%; width:180px; height:160px;}
@keyframes heroIllustFloat{ 0%,100%{ transform:translateY(0) rotate(0deg);} 50%{ transform:translateY(-14px) rotate(-1.5deg);} }
@keyframes heroIllustFloat2{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(12px);} }
@media (prefers-reduced-motion: reduce){ .hero-illustration, .hero-illustration-2{ animation:none; } }
@media(max-width:760px){ .hero-illustration-2{display:none;} .hero-illustration{width:220px; height:190px; opacity:.5;} }

/* Ícono de montacargas reutilizable dentro de badges circulares/redondeados */
.icon-fk{display:flex; align-items:center; justify-content:center; border-radius:12px;}

/* Textura repetida de montacargas (marca de agua decorativa) */
.pattern-fk{position:relative;}
.pattern-fk::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:var(--fk-pattern); background-repeat:repeat; background-size:120px 90px; opacity:1;
}
.pattern-fk > .container{position:relative; z-index:1;}

/* Galería de fotos */
.gallery-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.gallery-item{border-radius:12px; overflow:hidden; aspect-ratio:4/3; box-shadow:var(--shadow-card);}
.gallery-item img{width:100%; height:100%; object-fit:cover; transition:.3s ease;}
.gallery-item:hover img{transform:scale(1.06);}
@media(max-width:980px){ .gallery-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:600px){ .gallery-grid{grid-template-columns:1fr 1fr;} .gallery-item{aspect-ratio:1/1;} }

/* ---------- Trust badge strip ---------- */
.trust-strip{background:#fff; border-bottom:1px solid var(--border);}
.trust-strip .container{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; padding:30px 24px;}
.trust-item{text-align:center;}
.trust-item .icon{font-size:22px; margin:0 auto 10px; width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--offwhite);}
.trust-item:nth-child(2) .icon{background:#fdeceb; }
.trust-item:nth-child(1) .icon, .trust-item:nth-child(3) .icon{background:#fff8e0;}
.trust-item .num{font-size:24px; font-weight:900; color:var(--navy);}
.trust-item .label{font-size:12.5px; color:var(--muted); font-weight:600;}

/* ---------- Sections generic ---------- */
section{padding:76px 0;}
.bg-offwhite{background:var(--offwhite);}
.bg-navy{background:linear-gradient(120deg, var(--navy) 0%, var(--navy-dark) 100%); color:#fff;}
.bg-navy h2, .bg-navy .section-head p{color:#fff;}
.bg-navy .section-head p{color:#c9d3ec;}

/* ---------- Service cards (home grid) ---------- */
.services-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.service-card{background:#fff; border:1px solid var(--border); border-radius:var(--radius-card); padding:30px; transition:.22s ease; position:relative;}
.service-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-card); border-color:transparent;}
.service-card .icon{width:56px; height:56px; border-radius:12px; background:var(--navy); color:var(--yellow); display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:900; margin-bottom:18px;}
.service-card:nth-child(4) .icon{background:var(--red); color:#fff;}
.service-card:nth-child(6) .icon{background:var(--red); color:#fff;}
.service-card h3{font-size:19px; margin-bottom:8px;}
.service-card p{color:var(--muted); font-size:14.5px; margin-bottom:16px;}
.service-card a.more{font-weight:800; font-size:13.5px; color:var(--navy); display:inline-flex; align-items:center; gap:6px;}
.service-card a.more:hover{color:var(--yellow-dark);}

/* Variante con fotografía real (usada en la cuadrícula de servicios de Inicio) */
.service-card.service-card-photo{padding:0; overflow:hidden;}
.service-card-photo .service-photo{width:100%; aspect-ratio:16/10; overflow:hidden; position:relative;}
.service-card-photo .service-photo img{width:100%; height:100%; object-fit:cover; transition:.35s ease;}
.service-card-photo:hover .service-photo img{transform:scale(1.07);}
.service-card-photo .service-photo::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(1,20,73,.30), transparent 45%);}
.service-card-photo .card-body{padding:22px 24px 26px;}

/* ---------- Icon feature cards (navy, Avada style) ---------- */
.feature-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.feature-card{background:var(--navy-2); color:#fff; border-radius:var(--radius-card); padding:34px 28px;}
.feature-card .icon{font-size:34px; margin-bottom:18px;}
.feature-card h3{color:#fff; font-size:19px; margin-bottom:8px;}
.feature-card p{color:var(--yellow); font-size:14px; margin:0;}

/* ---------- Differentiators / value props (premium styling) ---------- */
.value-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px;}
.value-card{background:#fff; border:1px solid var(--border); border-radius:var(--radius-card); padding:24px; display:flex; gap:16px; align-items:flex-start; position:relative;}
.value-card .medal{flex-shrink:0; width:44px; height:44px; border-radius:50%; background:linear-gradient(145deg,var(--yellow),var(--yellow-dark)); color:var(--navy); display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:900;}
.value-card p{margin:0; font-size:14.5px; color:var(--text);}
.value-card b{color:var(--navy);}
.value-card .ribbon{position:absolute; top:-9px; right:14px; background:var(--red); color:#fff; font-size:10.5px; font-weight:800; padding:3px 10px; border-radius:20px; letter-spacing:.4px; text-transform:uppercase; box-shadow:0 4px 10px rgba(210,11,9,.35);}

/* ---------- Stats (dark overlay) ---------- */
.stats{background:var(--navy-dark); color:#fff;}
.stats .container{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center;}
.stats .num{font-size:clamp(28px,3vw,40px); font-weight:900; color:var(--yellow);}
.stats .label{font-size:13.5px; color:#c9d3ec; font-weight:600;}

/* ---------- Numbered process / services steps ---------- */
.steps-grid{display:grid; grid-template-columns:repeat(3,1fr);}
.step{position:relative; min-height:320px; display:flex; flex-direction:column; justify-content:flex-end; padding:28px; color:#fff; background-size:cover; background-position:center;}
.step::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(1,20,73,.15), rgba(1,20,73,.88)); }
.step .num, .step h3, .step p{position:relative; z-index:2;}
.step .num{font-size:38px; font-weight:900; color:var(--yellow); margin-bottom:6px;}
.step h3{color:#fff; font-size:20px; margin-bottom:6px;}
.step p{color:#d7def3; font-size:14px; margin:0;}

/* ---------- Google Reviews ---------- */
.reviews-head{display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap; margin-bottom:10px;}
.google-badge{display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--border); border-radius:14px; padding:12px 20px; box-shadow:var(--shadow-card);}
.google-badge .score{font-size:26px; font-weight:900; color:var(--navy);}
.google-badge .stars{color:#f5b400; font-size:15px; letter-spacing:2px;}
.google-badge small{display:block; color:var(--muted); font-size:12px;}
.reviews-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.review-card{background:#fff; border:1px solid var(--border); border-radius:var(--radius-card); padding:24px; position:relative;}
.review-card .stars{color:#f5b400; font-size:14px; margin-bottom:10px; letter-spacing:2px;}
.review-card p{font-size:14.5px; color:var(--text); margin-bottom:14px;}
.review-card .who{display:flex; align-items:center; gap:10px;}
.review-card .avatar{width:38px; height:38px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px;}
.review-card .name{font-weight:700; font-size:13.5px; color:var(--navy);}
.review-card .date{font-size:12px; color:var(--muted);}
.review-sample-tag{position:absolute; top:14px; right:14px; background:#fff3cd; color:#8a6300; font-size:10px; font-weight:800; text-transform:uppercase; padding:3px 8px; border-radius:6px; border:1px dashed #e0c14a;}
.reviews-note{max-width:680px; margin:22px auto 0; text-align:center; font-size:12.5px; color:var(--muted); background:#fffbe6; border:1px dashed #e0c14a; padding:12px 18px; border-radius:10px;}

/* ---------- FAQ accordion ---------- */
.faq-item{background:#fff; border:1px solid var(--border); border-radius:10px; margin-bottom:14px; overflow:hidden;}
.faq-q{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:18px 22px; cursor:pointer; font-weight:700; color:var(--navy); font-size:15.5px;}
.faq-q .plus{flex-shrink:0; width:26px; height:26px; border-radius:6px; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:900; transition:.2s;}
.faq-item.open .faq-q .plus{background:var(--yellow); color:var(--navy); transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .25s ease;}
.faq-a p{padding:0 22px 20px; color:var(--muted); font-size:14.5px; margin:0;}

/* ---------- Contact form (mailto) ---------- */
.contact-wrap{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:stretch;}
.contact-info{background:var(--navy); color:#fff; border-radius:var(--radius-card); padding:36px; display:flex; flex-direction:column; gap:20px;}
.contact-info h3{color:#fff;}
.contact-info .row{display:flex; gap:14px; align-items:flex-start;}
.contact-info .row .ic{width:38px; height:38px; border-radius:8px; background:rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.contact-info .row b{display:block; color:var(--yellow); font-size:12.5px; text-transform:uppercase; letter-spacing:.4px; margin-bottom:2px;}
.contact-info .row span, .contact-info .row a{color:#e7ecfa; font-size:14.5px; font-weight:600;}
.contact-form{background:#fff; border:1px solid var(--border); border-radius:var(--radius-card); padding:36px; box-shadow:var(--shadow-card);}
.contact-form h3{margin-bottom:6px;}
.contact-form .sub{color:var(--muted); font-size:14px; margin-bottom:22px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px;}
.form-field{margin-bottom:14px;}
.form-field label{display:block; font-size:13px; font-weight:700; color:var(--navy); margin-bottom:6px;}
.form-field input, .form-field select, .form-field textarea{
  width:100%; padding:13px 16px; border:1.5px solid var(--border); border-radius:8px; font-family:inherit; font-size:14.5px; color:var(--text); background:#fbfbfd;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{outline:none; border-color:var(--navy);}
.form-note{font-size:12px; color:var(--muted); margin-top:10px;}

@media(max-width:900px){
  .contact-wrap, .form-row{grid-template-columns:1fr;}
}

/* ---------- CTA banner ---------- */
.cta-banner{background:var(--yellow);}
.cta-banner .container{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; padding:38px 24px;}
.cta-banner h3{color:var(--navy); font-size:22px; margin:0;}
.cta-banner .sub{color:#5c4a00; font-size:14px; margin:4px 0 0;}

/* ---------- Coverage map/tags ---------- */
.coverage-tags{display:flex; justify-content:center; gap:12px; flex-wrap:wrap;}
.coverage-tags .tag{background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.3); color:#fff; padding:9px 20px; border-radius:30px; font-size:13.5px; font-weight:700;}

/* ---------- Brand marks strip ---------- */
.brands-strip{background:#fff; padding:40px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.brands-grid{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:34px;}
.brands-grid .mark{font-weight:900; font-size:16px; color:var(--navy); background:var(--offwhite); padding:10px 20px; border-radius:8px; letter-spacing:.5px;}

/* ---------- Footer ---------- */
footer.site{background:var(--navy-dark); color:#aab6d6;}
footer.site .container{padding:56px 24px 26px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:34px;}
.footer-grid h4{color:#fff; font-size:15px; margin-bottom:16px;}
.footer-grid li{margin-bottom:9px; font-size:14px;}
.footer-grid a:hover{color:var(--yellow);}
.footer-logo img{height:46px; margin-bottom:16px; background:#fff; padding:8px 12px; border-radius:8px;}
.footer-grid p{font-size:13.5px; color:#8d9ac0;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08); margin-top:36px; padding-top:22px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; font-size:13px;}
.footer-bottom .made{color:#8d9ac0;}
.footer-bottom .made a{color:var(--yellow); font-weight:700;}
.footer-bottom .made a:hover{text-decoration:underline;}

/* ---------- WhatsApp + Call floating bubbles ---------- */
.float-bubbles{position:fixed; right:22px; bottom:22px; z-index:300; display:flex; flex-direction:column; gap:14px; align-items:center;}
.bubble{width:58px; height:58px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 26px rgba(0,0,0,.28); color:#fff; font-size:28px; position:relative; transition:.2s;}
.bubble:hover{transform:scale(1.08);}
.bubble.whatsapp{background:var(--whatsapp);}
.bubble.call{background:var(--red); display:none;}
.bubble .ping{position:absolute; inset:0; border-radius:50%; background:var(--whatsapp); opacity:.6; animation:ping 2s infinite;}
@keyframes ping{0%{transform:scale(1); opacity:.5;} 100%{transform:scale(1.9); opacity:0;}}

@media(max-width:760px){
  .bubble.call{display:flex;}
  .float-bubbles{right:16px; bottom:16px;}
}

/* ---------- Mockup ribbon (solo para revisión, quitar en producción) ---------- */
.mockup-note{background:#fffbe6; border-bottom:1px dashed #e0c14a; color:#7a5c00; font-size:12.5px; padding:8px 24px; text-align:center; font-weight:600;}

/* Sección "Detalle del servicio" (imagen + texto a dos columnas) */
.detail-grid{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center;}
@media(max-width:760px){
  .detail-grid{grid-template-columns:1fr;}
  .detail-grid > img{order:2;}
  .detail-grid > div{order:1;}
}

/* ---------- Responsive grids ---------- */
@media(max-width:980px){
  .services-grid{grid-template-columns:repeat(2,1fr);}
  .feature-grid{grid-template-columns:repeat(2,1fr) ;}
  .value-grid{grid-template-columns:1fr;}
  .reviews-grid{grid-template-columns:1fr;}
  .steps-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .stats .container{grid-template-columns:1fr 1fr;}
  .trust-strip .container{grid-template-columns:1fr 1fr;}
}
@media(max-width:640px){
  .hero .container{grid-template-columns:1fr;}
  .services-grid, .feature-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  section{padding:56px 0;}
}