/* =========================================================
   Certicedula · capa de diseño moderno
   Se carga DESPUÉS de bootstrap, estil_inicio.css y menu.css
   Ajusta --turquesa / --naranja al hex exacto de tu logo.
   ========================================================= */
:root{
  --turquesa:#14a3a3;
  --turquesa-osc:#0b6f73;
  --turquesa-claro:#e6f6f6;
  --naranja:#f39c12;
  --naranja-osc:#d9820a;
  --texto:#1f2a33;
  --texto-suave:#5b6b78;
  --fondo:#f6f9fa;
  --blanco:#fff;
  --borde:#e3eaee;
  --radio:16px;
  --sombra:0 10px 30px rgba(15,60,70,.08);
  --sombra-hover:0 16px 40px rgba(15,60,70,.14);
}

html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Plus Jakarta Sans',-apple-system,'Segoe UI',Roboto,sans-serif;
  color:var(--texto);
  background:var(--fondo);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:inherit;font-weight:700;letter-spacing:-.01em;color:var(--texto)}
a{color:var(--turquesa-osc)}
a:hover,a:focus{color:var(--naranja-osc);text-decoration:none}
img{max-width:100%;height:auto}

.container{max-width:1170px;margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px}
.seccion{padding:72px 0}
.seccion-blanca{background:var(--blanco)}
.seccion-titulo{text-align:center;margin-bottom:44px}
.seccion-titulo .eyebrow{
  display:inline-block;font-size:13px;font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;color:var(--naranja-osc);margin-bottom:8px
}
.seccion-titulo h2{font-size:34px;margin:0 0 10px}
.seccion-titulo p{color:var(--texto-suave);max-width:620px;margin:0 auto}
.seccion-titulo .linea{
  width:56px;height:4px;border-radius:4px;margin:14px auto 0;
  background:linear-gradient(90deg,var(--turquesa),var(--naranja))
}

/* ---------- HERO ---------- */
.hero{
  position:relative;overflow:hidden;color:#fff;
  padding:72px 0 110px;
  background:
    radial-gradient(circle at 70% 10%,rgba(243,156,18,.18),transparent 40%),
    linear-gradient(135deg,var(--turquesa-osc) 0%,var(--turquesa) 100%);
}
/* Foto de personas: franja derecha que empieza casi tocando el buscador (solo pantallas grandes) */
.hero-foto{display:none}
@media (min-width:1280px){
  .hero-foto{
    display:block;position:absolute;top:0;bottom:0;right:0;z-index:0;
    left:auto;
    /* ~34% del ancho, dejando siempre 64px de aire con el buscador */
    width:min(34%, calc(100% - clamp(40px, 6vw, 110px) - 1014px));
    background:url('../images/hero-foto.jpg') 28% center/cover no-repeat;
    border-radius:28px 0 0 28px;
    box-shadow:-12px 0 40px rgba(0,40,50,.25);
  }
}
@media (min-width:768px){
  .hero .row.hero-row{display:flex;align-items:center;justify-content:flex-start;gap:0;margin:0}
  .hero-row>.col-texto,.hero-row>.col-buscador{float:none;width:auto;padding:0}
  .hero-row>.col-texto{flex:0 1 auto;max-width:540px}
  /* el buscador ocupa el hueco entre texto y foto y se centra en él */
  .hero-row>.col-buscador{flex:1 1 434px;display:flex;justify-content:center}
  .col-buscador .card-presupuesto{width:370px;max-width:100%;box-sizing:border-box}
  .card-presupuesto{margin-top:0}
}
.hero:after{ /* curva inferior */
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:60px;
  background:var(--fondo);
  border-radius:50% 50% 0 0/100% 100% 0 0;
}
.hero .container{position:relative;z-index:1;width:auto;max-width:none;margin:0;padding:0 32px}
/* Un poco de aire a la izquierda (40-110px según pantalla) */
@media (min-width:1200px){
  .hero .container{padding-left:clamp(40px, 6vw, 110px)}
}
@media (max-width:767px){
  .hero .container{padding:0 20px}
}
@media (min-width:768px){
  .hero .row{display:flex;align-items:center}
}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);
  padding:6px 14px;border-radius:999px;font-size:13px;font-weight:600;margin-bottom:20px
}
.hero h1{color:#fff;font-size:44px;line-height:1.12;margin:0 0 22px;font-weight:800}
.hero h1 span{display:block}
.hero h1 .acento{color:#ffd08a}
.hero-checks{list-style:none;padding:0;margin:0 0 30px}
.hero-checks li{display:flex;align-items:center;gap:12px;font-size:17px;font-weight:600;margin-bottom:10px}
.hero-checks .fa{
  width:26px;height:26px;border-radius:50%;flex:0 0 26px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--naranja);color:#fff;font-size:13px
}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- BOTONES ---------- */
.btn-cc{text-decoration:none !important;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 26px;border-radius:12px;font-weight:700;font-size:16px;
  border:0;transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
}
.btn-cc:hover{transform:translateY(-2px)}
.btn-naranja{background:var(--naranja);color:#fff;box-shadow:0 8px 20px rgba(243,156,18,.35)}
.btn-naranja:hover,.btn-naranja:focus{background:var(--naranja-osc);color:#fff}
.btn-whatsapp{background:#25d366;color:#fff;box-shadow:0 8px 20px rgba(37,211,102,.3)}
.btn-whatsapp:hover,.btn-whatsapp:focus{background:#1ebe5a;color:#fff}
.btn-blanco{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.4)}
.btn-blanco:hover,.btn-blanco:focus{background:#fff;color:var(--turquesa-osc)}
.btn-link-cc{font-weight:700;color:var(--turquesa-osc);display:inline-flex;align-items:center;gap:6px}
.btn-link-cc:hover{gap:10px}

/* ---------- TARJETA PRESUPUESTO ---------- */
.card-presupuesto{
  background:#fff;color:var(--texto);border-radius:20px;
  padding:30px 28px;box-shadow:0 24px 60px rgba(0,40,50,.25);
}
.card-presupuesto .etiqueta{
  display:inline-block;background:#fff4e3;color:var(--naranja-osc);
  font-size:13px;font-weight:700;padding:6px 12px;border-radius:999px;margin-bottom:12px
}
.card-presupuesto h3{font-size:24px;margin:0 0 20px}
.card-presupuesto label{display:block;font-size:14px;font-weight:600;color:var(--texto-suave);margin-bottom:6px}
.card-presupuesto .campo{margin-bottom:16px}
.card-presupuesto select.formulario{
  width:100%;height:48px;padding:0 14px;border-radius:10px;
  border:1.5px solid var(--borde);background:#fbfdfd;font-size:15px;color:var(--texto);
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230b6f73' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
  transition:border-color .15s,box-shadow .15s;
}
.card-presupuesto select.formulario:focus{
  outline:0;border-color:var(--turquesa);box-shadow:0 0 0 4px rgba(20,163,163,.15)
}
.card-presupuesto #boton{width:100%;margin-top:6px}
.card-presupuesto .nota{font-size:13px;color:var(--texto-suave);margin:14px 0 0;text-align:center}

/* ---------- RESULTADO PRESUPUESTO ---------- */
#oculto0{display:none;scroll-margin-top:20px}
.presupuesto-box{
  background:#fff;border-radius:var(--radio);box-shadow:var(--sombra);
  padding:36px 32px;max-width:1170px;margin:0 auto;border-top:5px solid var(--naranja)
}
#results{text-align:left}

/* --- Bloque devuelto por submit7.php --- */
.pres-grid{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:28px;align-items:start}
.pres-titulo{font-size:19px;font-weight:700;color:var(--turquesa-osc);margin:0 0 14px}
.pres-card{background:#fff;border:1px solid var(--borde);border-radius:16px;padding:22px}
.pres-desglose .pres-card{background:var(--turquesa-claro);border-color:#cfe7e7}
.pres-doc{font-size:18px;font-weight:700;line-height:1.3;margin-bottom:14px}
.pres-doc small{display:block;font-size:14px;font-weight:600;color:var(--turquesa-osc);margin-top:2px}
.pres-lineas{list-style:none;margin:0;padding:0}
.pres-lineas li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dashed #c4dfdf;font-size:15px;color:var(--texto-suave)}
.pres-lineas li b{color:var(--texto);font-weight:600;white-space:nowrap}
.pres-lineas li.incluido b{color:#1a9850}
.pres-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:14px;padding:14px 16px;
  background:#fff;border-radius:12px}
.pres-total span{font-weight:700}
.pres-total b{font-size:30px;font-weight:800;color:var(--turquesa-osc);white-space:nowrap}
.pres-cerrado{display:flex;align-items:center;gap:8px;margin:14px 0 0;font-size:14px;font-weight:600;color:var(--turquesa-osc)}
.pres-cerrado svg{width:18px;height:18px;flex:0 0 18px;color:var(--naranja)}
.pres-urgente{margin:-6px 0 14px;font-size:14px;font-weight:700;color:var(--naranja-osc)}
.pres-form .pres-card{box-shadow:var(--sombra)}
.pres-campo{margin-bottom:14px}
.pres-campo label{display:block;font-size:14px;font-weight:600;color:var(--texto);margin:0 0 5px}
.pres-campo input,.pres-campo textarea{width:100%;font:inherit;font-size:15px;color:var(--texto);background:#fbfdfd;
  border:1.5px solid var(--borde);border-radius:10px;padding:11px 13px;box-sizing:border-box;transition:border-color .15s,box-shadow .15s}
.pres-campo textarea{resize:vertical;min-height:80px}
.pres-campo input:focus,.pres-campo textarea:focus{outline:0;border-color:var(--turquesa);box-shadow:0 0 0 4px rgba(20,163,163,.15)}
.pres-campo small{display:block;font-size:12px;color:var(--texto-suave);margin-top:4px}
.ob{color:#d9534f}
.pres-captcha{margin:4px 0 14px;max-width:100%;overflow:hidden}
.pres-btn{display:block;width:100%;border:0;border-radius:12px;padding:14px;font:inherit;font-size:16px;font-weight:700;cursor:pointer;
  color:#fff;background:var(--naranja);box-shadow:0 8px 20px rgba(243,156,18,.35);transition:background .15s,transform .15s}
.pres-btn:hover{background:var(--naranja-osc);transform:translateY(-2px)}
.pres-ob{font-size:12px;color:var(--texto-suave);margin:10px 0 0;text-align:center}
.pres-pasos ol{list-style:none;margin:0;padding:0;counter-reset:none}
.pres-pasos li{display:flex;gap:12px;margin-bottom:16px}
.pres-pasos .ic{width:38px;height:38px;flex:0 0 38px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(135deg,var(--turquesa),var(--turquesa-osc))}
.pres-pasos li:nth-child(even) .ic{background:linear-gradient(135deg,var(--naranja),var(--naranja-osc))}
.pres-pasos .ic svg{width:20px;height:20px}
.pres-pasos p{margin:0;font-size:15px;line-height:1.55;color:var(--texto-suave)}
.pres-pasos strong{color:var(--texto)}
.pres-aviso{padding:18px;border-radius:12px;background:#fff4e3;color:#7a4b00;font-weight:600;text-align:center}
@media (max-width:1099px){
  .pres-grid{grid-template-columns:1fr 1fr}
  .pres-pasos{grid-column:1 / -1}
  .pres-pasos ol{display:grid;grid-template-columns:1fr 1fr;gap:4px 24px}
}
@media (max-width:767px){
  .presupuesto-box{padding:26px 16px}
  .pres-grid{grid-template-columns:1fr;gap:26px}
  .pres-pasos ol{display:block}
  .pres-card{padding:18px}
}
@media (max-width:360px){ .pres-captcha .g-recaptcha{transform:scale(.88);transform-origin:0 0} }

/* ---------- CONFIANZA ---------- */
.confianza{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:28px;text-align:center}
.confianza img{width:84px;height:84px;object-fit:contain}
.dato{min-width:200px}
.dato .num{display:block;font-size:42px;font-weight:800;color:var(--turquesa-osc);line-height:1}
.dato .txt{color:var(--texto-suave);font-weight:600}

/* ---------- PASOS ---------- */
.pasos .row{display:grid;grid-template-columns:1fr;gap:24px;margin:0}
@media (min-width:600px){.pasos .row{grid-template-columns:repeat(2,1fr)}}
@media (min-width:992px){.pasos .row{grid-template-columns:repeat(4,1fr)}}
.pasos .row:before,.pasos .row:after{display:none}
.pasos .row>[class*=col-]{display:flex;float:none;width:auto;padding:0}
.paso{
  position:relative;background:#fff;border:1px solid var(--borde);border-radius:var(--radio);
  padding:32px 24px 26px;width:100%;display:flex;flex-direction:column;
  transition:transform .2s ease,box-shadow .2s ease;
}
.paso:hover{transform:translateY(-4px);box-shadow:var(--sombra-hover)}
.paso .n{
  position:absolute;top:18px;right:20px;font-size:40px;font-weight:800;
  color:var(--turquesa-claro);line-height:1
}
.paso .icono{
  width:60px;height:60px;border-radius:16px;margin-bottom:18px;box-shadow:0 8px 18px rgba(11,111,115,.22);
  display:flex;align-items:center;justify-content:center;font-size:24px;color:#fff;
  background:linear-gradient(135deg,var(--turquesa),var(--turquesa-osc));
}
.pasos .row>[class*=col-]:nth-child(even) .icono{background:linear-gradient(135deg,var(--naranja),var(--naranja-osc))}
.paso .icono svg{width:32px;height:32px}
.paso h3{font-size:19px;margin:0 0 10px}
.paso p{color:var(--texto-suave);font-size:15px;flex:1}
.paso .btn-link-cc{margin-top:10px}

/* ---------- SERVICIOS ---------- */
.servicio{
  background:#fff;border-radius:20px;overflow:hidden;box-shadow:var(--sombra);
  margin-bottom:30px;display:flex;flex-wrap:wrap
}
.servicio-img{flex:1 1 320px;min-height:240px;background:var(--turquesa-claro)}
.servicio-img img{width:100%;height:100%;object-fit:cover;display:block}
.servicio-txt{flex:2 1 420px;padding:34px 36px}
.servicio-txt h3{font-size:26px;margin:0 0 6px}
.servicio-txt .tag{
  display:inline-block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--turquesa-osc);background:var(--turquesa-claro);padding:4px 10px;border-radius:6px;margin-bottom:14px
}
.servicio-txt p{color:var(--texto-suave)}
.servicio-txt strong{color:var(--texto)}

/* ---------- BLOG ---------- */
.blog-lista{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.blog-lista a{
  display:flex;align-items:center;gap:12px;height:100%;
  background:#fff;border:1px solid var(--borde);border-radius:12px;padding:16px 18px;
  font-weight:600;color:var(--texto);transition:border-color .15s,box-shadow .15s
}
.blog-lista a .fa{color:var(--naranja);font-size:18px}
.blog-lista a:hover{border-color:var(--turquesa);box-shadow:var(--sombra);color:var(--turquesa-osc)}

/* ---------- DONDE TRABAJAMOS ---------- */
.zonas h3{font-size:18px;margin:0 0 16px;display:flex;align-items:center;gap:10px}
.zonas h3 .fa{color:var(--turquesa)}
.zonas ul{list-style:none;padding:0;margin:0 0 30px;display:flex;flex-wrap:wrap;gap:8px}
.zonas li a{
  display:inline-block;padding:7px 14px;border-radius:999px;font-size:14px;
  background:var(--turquesa-claro);color:var(--turquesa-osc);font-weight:600;transition:background .15s,color .15s
}
.zonas li a:hover{background:var(--turquesa);color:#fff}

/* ---------- CTA FINAL ---------- */
.cta-final{
  border-radius:24px;padding:44px 32px;text-align:center;color:#fff;
  background:linear-gradient(135deg,var(--turquesa) 0%,var(--turquesa-osc) 100%);
}
.cta-final h2{color:#fff;margin:0 0 10px}
.cta-final p{opacity:.9;margin-bottom:24px}
.cta-final .hero-ctas{justify-content:center}

/* ---------- ICONO WHATSAPP ---------- */
.ico-wa{width:22px;height:22px;fill:currentColor;flex:0 0 22px}
.wa-float .ico-wa{width:32px;height:32px;flex-basis:32px}

/* ---------- WHATSAPP FLOTANTE ---------- */
.wa-float{
  position:fixed;right:18px;bottom:18px;z-index:9999;width:58px;height:58px;border-radius:50%;
  background:#25d366;color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:30px;box-shadow:0 10px 25px rgba(0,0,0,.25);transition:transform .15s
}
.wa-float:hover,.wa-float:focus{color:#fff;transform:scale(1.08)}

/* ---------- RESPONSIVE ---------- */
@media (max-width:991px){
  .hero h1{font-size:34px}
}
@media (max-width:767px){
  html,body{overflow-x:clip}
  .seccion{padding:52px 0}
  .hero{padding:44px 0 90px}
  .card-presupuesto{margin-top:32px}
  .hero h1{font-size:30px}
  .seccion-titulo h2{font-size:27px}
  .servicio-txt{padding:26px 22px}
  /* Ilustraciones de servicios pequeñas en móvil */
  .servicio-img{flex:0 0 100%;min-height:0;display:flex;justify-content:flex-start;padding:22px 22px 0;background:transparent}
  .servicio-img img{width:60px;height:60px;border-radius:14px;box-shadow:0 6px 14px rgba(11,111,115,.18)}
  .servicio-txt{padding-top:16px}
  .btn-cc{width:100%}
}

/* Con foto (>=1280px): el bloque texto+buscador termina donde empieza la foto */
@media (min-width:1280px){
  .hero .container{padding-right:min(34%, calc(100% - clamp(40px, 6vw, 110px) - 1014px))}
}