/* ============================================================
   IMPERCALA S.A.S — Hoja de estilos principal
   Paleta corporativa y estilo premium
   ============================================================ */

/* ---------- Variables ---------- */
:root{
  --azul:    #0B1E59;   /* principal */
  --rojo:    #D62828;   /* secundario */
  --dorado:  #F4C542;   /* acento */
  --gris:    #F5F7FA;   /* apoyo */
  --texto:   #222222;
  --blanco:  #FFFFFF;
  --sombra:  0 10px 30px rgba(11,30,89,.10);
  --radio:   14px;
  --trans:   .3s ease;
}

/* ---------- Reset y base ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Manrope',sans-serif;color:var(--texto);background:var(--blanco);line-height:1.65}
a{text-decoration:none;color:inherit}
ul{list-style:none}
img{max-width:100%;display:block}
.contenedor{width:min(1140px,92%);margin:0 auto}

h1,h2,h3{line-height:1.15;color:var(--azul);font-weight:800}
h2{font-size:clamp(1.8rem,4vw,2.6rem);margin:.4rem 0 2.4rem}
.claro{color:var(--blanco)}
.eyebrow{color:var(--rojo);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.8rem}
.eyebrow-claro{color:var(--dorado)}

/* ---------- Botones ---------- */
.btn{display:inline-block;font-weight:700;padding:.85rem 1.8rem;border-radius:50px;border:0;cursor:pointer;font-size:1rem;transition:transform var(--trans),box-shadow var(--trans),background var(--trans)}
.btn:hover{transform:translateY(-3px)}
.btn-dorado{background:var(--dorado);color:var(--azul);box-shadow:0 6px 18px rgba(244,197,66,.4)}
.btn-dorado:hover{background:#e6b52f;box-shadow:0 10px 24px rgba(244,197,66,.55)}
.btn-borde{border:2px solid var(--blanco);color:var(--blanco)}
.btn-borde:hover{background:var(--blanco);color:var(--azul)}
.btn-whatsapp{background:#25D366;color:#fff;box-shadow:0 6px 18px rgba(37,211,102,.35)}

/* ============================================================
   HEADER — transparente al inicio, blanco al hacer scroll
   ============================================================ */
header{position:fixed;top:0;left:0;right:0;z-index:100;padding:1rem 0;transition:background var(--trans),box-shadow var(--trans),padding var(--trans)}
header.solido{background:var(--blanco);box-shadow:0 2px 14px rgba(11,30,89,.10);padding:.6rem 0}
.nav-flex{display:flex;align-items:center;justify-content:space-between;gap:1.2rem}
.logo img{height:52px;width:auto}
.logo-texto{font-weight:800;font-size:1.5rem;color:var(--blanco)}
.logo-texto b{color:var(--dorado)}
header.solido .logo-texto{color:var(--azul)}
header.solido .logo-texto b{color:var(--rojo)}
.menu{display:flex;gap:1.6rem;font-weight:600}
.menu a{color:var(--blanco);padding:.3rem 0;border-bottom:2px solid transparent;transition:color var(--trans),border-color var(--trans)}
header.solido .menu a{color:var(--texto)}
.menu a:hover{color:var(--dorado);border-color:var(--dorado)}
.hamburguesa{display:none;background:none;border:0;font-size:1.7rem;color:var(--blanco);cursor:pointer}
header.solido .hamburguesa{color:var(--azul)}

/* ============================================================
   HERO
   ============================================================ */
.hero{min-height:100vh;display:flex;align-items:center;position:relative;
  /* Coloque su fotografía real en images/hero.jpg (cubierta siendo impermeabilizada) */
  background:linear-gradient(135deg,#0B1E59 0%,#12307e 60%,#0B1E59 100%);
  background-image:url("../images/hero.jpg");background-size:cover;background-position:center;background-attachment:fixed}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,30,89,.85) 0%,rgba(11,30,89,.72) 100%)}
.hero-contenido{position:relative;z-index:2;color:var(--blanco);padding:8rem 0 5rem;text-align:left}
.hero-eyebrow{color:var(--dorado);font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:.85rem;margin-bottom:1rem}
.hero h1{color:var(--blanco);font-size:clamp(2.4rem,6vw,4.2rem)}
.hero-sub{max-width:56ch;margin:1.4rem 0 2.2rem;font-size:1.15rem;color:#DDE4F5}
.hero-botones{display:flex;gap:1rem;flex-wrap:wrap}
.hero-stats{display:flex;gap:3rem;margin-top:3.5rem;flex-wrap:wrap}
.stat span{font-size:2.6rem;font-weight:800;color:var(--dorado)}
.stat b{display:block;font-size:1rem}
.stat small{color:#B9C4E4}

/* ============================================================
   SECCIONES GENERALES
   ============================================================ */
.seccion{padding:5.5rem 0}
.seccion-gris{background:var(--gris)}
.seccion-azul{background:var(--azul)}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.6rem}

/* Tarjetas "por qué" */
.tarjeta{background:var(--blanco);border-radius:var(--radio);padding:2rem;box-shadow:var(--sombra);transition:transform var(--trans),box-shadow var(--trans)}
.tarjeta:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(11,30,89,.16)}
.icono{width:54px;height:54px;border-radius:12px;background:linear-gradient(135deg,var(--azul),#1a3a9e);color:var(--dorado);display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin-bottom:1rem}
.tarjeta h3{font-size:1.2rem;margin-bottom:.5rem}
.tarjeta p{font-size:.95rem;color:#4A5568}

/* Servicios */
.servicio{background:var(--blanco);border-radius:var(--radio);overflow:hidden;box-shadow:var(--sombra);transition:transform var(--trans),box-shadow var(--trans)}
.servicio:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(11,30,89,.16)}
.servicio-img{height:180px;background-size:cover;background-position:center;transition:transform var(--trans)}
.servicio:hover .servicio-img{transform:scale(1.05)}
/* Fondos degradados de respaldo — reemplace por fotos reales en /images/ */
.img-1{background-image:linear-gradient(135deg,#0B1E59,#2b4dbb);background-image:url("../images/servicio-cubiertas.jpg"),linear-gradient(135deg,#0B1E59,#2b4dbb)}
.img-2{background-image:linear-gradient(135deg,#D62828,#8f1414);background-image:url("../images/servicio-terrazas.jpg"),linear-gradient(135deg,#D62828,#8f1414)}
.img-3{background-image:linear-gradient(135deg,#1a3a9e,#0B1E59);background-image:url("../images/servicio-fachadas.jpg"),linear-gradient(135deg,#1a3a9e,#0B1E59)}
.img-4{background-image:linear-gradient(135deg,#41547c,#0B1E59);background-image:url("../images/servicio-filtraciones.jpg"),linear-gradient(135deg,#41547c,#0B1E59)}
.img-5{background-image:linear-gradient(135deg,#B91C1C,#D62828);background-image:url("../images/servicio-sellado.jpg"),linear-gradient(135deg,#B91C1C,#D62828)}
.img-6{background-image:linear-gradient(135deg,#0B1E59,#41547c);background-image:url("../images/servicio-obras.jpg"),linear-gradient(135deg,#0B1E59,#41547c)}
.servicio-body{padding:1.6rem}
.servicio-body h3{font-size:1.15rem;margin-bottom:.5rem}
.servicio-body p{font-size:.93rem;color:#4A5568;margin-bottom:.9rem}
.enlace{color:var(--rojo);font-weight:700;transition:color var(--trans)}
.enlace:hover{color:var(--azul)}

/* Línea de tiempo */
.timeline{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1.4rem;counter-reset:paso}
.timeline li{background:var(--blanco);border-radius:var(--radio);padding:1.8rem 1.4rem;box-shadow:var(--sombra);text-align:center;position:relative}
.paso{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:var(--rojo);color:#fff;font-weight:800;font-size:1.2rem;margin-bottom:.8rem}
.timeline h3{font-size:1.05rem;margin-bottom:.3rem}
.timeline p{font-size:.88rem;color:#4A5568}

/* Galería */
.galeria{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.4rem}
.galeria figure{background:var(--blanco);border-radius:var(--radio);overflow:hidden;box-shadow:var(--sombra)}
.galeria-img{height:210px;background-size:cover;background-position:center;transition:transform .4s ease;background-color:#c9d3e8}
.galeria figure:hover .galeria-img{transform:scale(1.08)}
.g-1{background-image:url("../images/galeria-1.jpg")}
.g-2{background-image:url("../images/galeria-2.jpg")}
.g-3{background-image:url("../images/galeria-3.jpg")}
.g-4{background-image:url("../images/galeria-4.jpg")}
.g-5{background-image:url("../images/galeria-5.jpg")}
.g-6{background-image:url("../images/galeria-6.jpg")}
.g-7{background-image:url("../images/galeria-7.jpg")}
.g-8{background-image:url("../images/galeria-8.jpg")}
figcaption{padding:.8rem 1.2rem;font-weight:600;font-size:.9rem;color:var(--azul)}
.nota{margin-top:1.6rem;font-size:.85rem;color:#64748B}
.nota code{background:#E8EDF6;padding:.1rem .4rem;border-radius:4px}

/* Testimonios (carrusel) */
.carrusel{position:relative;max-width:760px;margin:0 auto;min-height:150px}
.testimonio{display:none;background:var(--gris);border-left:5px solid var(--dorado);border-radius:var(--radio);padding:2rem;font-size:1.1rem;color:#334}
.testimonio.activo{display:block;animation:aparecer .5s ease}
.testimonio cite{display:block;margin-top:1rem;font-style:normal;font-weight:700;color:var(--azul)}
@keyframes aparecer{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.carrusel-puntos{display:flex;gap:.5rem;justify-content:center;margin-top:1.4rem}
.punto{width:12px;height:12px;border-radius:50%;background:#C7D0E4;border:0;cursor:pointer;transition:background var(--trans)}
.punto.activo{background:var(--rojo)}

/* Contacto */
.grid-contacto{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.datos li{margin-bottom:1.1rem;color:#DDE4F5}
.datos b{display:block;color:var(--dorado);font-size:.9rem}
.datos a{color:#fff;font-weight:700;font-size:1.1rem}
.formulario{background:var(--blanco);border-radius:var(--radio);padding:2.2rem;box-shadow:0 20px 50px rgba(0,0,0,.25);display:grid;gap:1rem}
.formulario h3{font-size:1.3rem}
.formulario input,.formulario textarea{font-family:inherit;font-size:1rem;padding:.85rem 1rem;border:1.5px solid #D8DFEC;border-radius:10px;width:100%;transition:border-color var(--trans)}
.formulario input:focus,.formulario textarea:focus{outline:none;border-color:var(--azul)}
.formulario small{color:#64748B}

/* Footer */
footer{background:#081540;color:#AAB6D8;padding:3.5rem 0 0;font-size:.93rem}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2.5rem;padding-bottom:2.5rem}
.logo-footer{font-size:1.5rem;font-weight:800;color:#fff;margin-bottom:.8rem}
.logo-footer b{color:var(--dorado)}
footer h4{color:#fff;margin-bottom:.9rem}
footer li{margin-bottom:.5rem}
footer a:hover{color:var(--dorado)}
.footer-base{border-top:1px solid rgba(255,255,255,.12);text-align:center;padding:1.2rem 0}

/* Botón flotante WhatsApp */
.wa-flotante{position:fixed;bottom:22px;right:22px;width:58px;height:58px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.6rem;box-shadow:0 8px 24px rgba(37,211,102,.5);z-index:90;transition:transform var(--trans)}
.wa-flotante:hover{transform:scale(1.1)}

/* ============================================================
   ANIMACIONES SCROLL REVEAL (Intersection Observer)
   ============================================================ */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero{background-attachment:scroll}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .grid-contacto{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .menu{position:fixed;top:0;right:-100%;height:100vh;width:min(320px,80%);background:var(--azul);flex-direction:column;padding:5rem 2rem;transition:right .35s ease;box-shadow:-10px 0 30px rgba(0,0,0,.3)}
  .menu.abierto{right:0}
  .menu a{color:#fff !important;font-size:1.1rem}
  .hamburguesa{display:block;z-index:110}
  .nav-flex .btn{display:none}
  .hero{background-attachment:scroll}
  .hero-stats{gap:1.8rem}
}

/* ---------- Agenda pública (sección #agenda) ---------- */
.form-agenda{max-width:680px;margin:0 auto}
.formulario select{font-family:inherit;font-size:1rem;padding:.85rem 1rem;border:1.5px solid #D8DFEC;border-radius:10px;width:100%;background:var(--blanco);color:var(--texto);transition:border-color var(--trans)}
.formulario select:focus{outline:none;border-color:var(--azul)}
.oculto-hp{position:absolute !important;left:-9999px !important;width:1px;height:1px;opacity:0;pointer-events:none}