/* ==========================================================================
   PALETA / TIPOGRAFÍA / TOKENS
   - Centraliza variables de color, radios, sombras y tipografía
   ========================================================================== */
:root{
  --primary:#0A3D62;     /* Azul corporativo principal (header, fondos intensos) */
  --accent:#1ABC9C;      /* Verde para acciones primarias (CTA, énfasis) */
  --bg:#F4F6F7;          /* Gris claro para secciones alternas (Galería) */
  --text:#0F172A;        /* Color base de texto (alto contraste) */
  --muted:#5b6b7a;       /* Texto secundario (descripciones, figcaption) */
  --radius:16px;         /* Radio de borde global (tarjetas, inputs, botones) */
  --shadow:0 10px 22px rgba(16,24,40,.06); /* Sombra suave para profundidad */
}

*{ box-sizing:border-box }

/* ==========================================================================
   BASE / RESETEO LIGERO
   - Resetea márgenes y asegura tipografía, colores y line-height
   ========================================================================== */
html,body{ margin:0; padding:0 }
html{ scroll-behavior:smooth } /* scroll suave para anclas (#seccion) */

/* Tipografía base + contraste y legibilidad */
body{
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:#fff;
  line-height:1.55;
}

/* Medios fluidos */
img{ max-width:100%; height:auto; display:block }

/* Enlaces heredan color y evitan subrayado por defecto (lo añadiremos cuando convenga) */
a{ color:inherit; text-decoration:none }

/* Utilidad “solo pantalla” (accesibilidad): contenido para lectores de pantalla */
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ==========================================================================
   ACCESIBILIDAD: Foco visible y Motion-Reduce
   ========================================================================== */
:focus-visible{
  outline:3px solid rgba(26,188,156,.55); /* aro de foco en clave del tema */
  outline-offset:2px;
  border-radius:.25rem;
}

/* Respeta la preferencia del usuario de reducir animaciones */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }
}

/* ==========================================================================
   UTILIDADES GENERALES
   ========================================================================== */

/* Aparición suave de secciones (respetando motion-reduce arriba) */
.fade-in{ animation:fade .5s ease both }
@keyframes fade{ from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }

/* Cuando saltas a una sección con header sticky, evita que tape el título */
section{ scroll-margin-top:90px }

/* Contenedor centralizado y respiración lateral */
.container{ max-width:1140px; margin:0 auto; padding:0 18px }

/* ==========================================================================
   HEADER STICKY + NAVEGACIÓN
   ========================================================================== */
header{
  position:sticky; top:0; z-index:50;    /* se queda pegado arriba */
  background:var(--primary); color:#fff;  /* fondo de marca + texto blanco */
  border-bottom:1px solid rgba(255,255,255,.1);
  box-shadow:0 1px 0 rgba(255,255,255,.08);
}
header .container{
  display:flex; align-items:center; gap:16px;
}

/* Marca / logotipo */
.brand{ display:flex; align-items:center; gap:10px }
.brand__img{ height:70px; width:auto }         /* LOGO algo más grande (mejora de identidad) */
@media (max-width:540px){ .brand__img{ height:44px } } /* tamaño cómodo en móvil */
.brand__name{ font-weight:700 }
.brand__plus{ color:var(--accent) }             /* el “+” en color de acento */

/* Menú principal */
.main-nav{ margin-left:auto; display:flex; gap:18px; flex-wrap:wrap }
.main-nav a{
  opacity:.9; padding:8px 10px; border-radius:10px;
  transition: background .2s ease, opacity .2s ease;
}
.main-nav a.active,
.main-nav a:hover{ background:rgba(255,255,255,.12); opacity:1 }

/* CTA del menú (Presupuesto) en chip redondo */
.main-nav a[href="#presupuesto"]{
  background:rgba(255,255,255,.12);
  padding:8px 14px; border-radius:999px; font-weight:600;
}
.main-nav a[href="#presupuesto"]:hover{ filter:brightness(.95) }

/* ==========================================================================
   HERO (portada) + CTA
   - Incluye variante para h1 u h2 (según tu HTML actual)
   ========================================================================== */
#inicio.hero{
  background:linear-gradient(180deg,#0A3D62,#0A3552); /* degradado dentro de la misma gama */
  color:#fff; text-align:left;
  padding:84px 0 66px;
}
#inicio.hero .container{ max-width:1100px }

/* Soporta <h1> o <h2> sin romper estilos */
#inicio.hero h1,
#inicio.hero h2{
  margin:0 0 10px;
  font-size:clamp(34px,4.8vw,48px);
  line-height:1.15;
  font-weight:800;
}
#inicio.hero p{ margin:0 0 18px; opacity:.95; font-size:16px }

/* Fila de call-to-actions */
.cta-row{ display:flex; gap:12px; align-items:center; flex-wrap:wrap }

/* Botón primario del hero */
.cta-primary{
  background:var(--accent); color:#fff;
  padding:14px 22px; border-radius:14px; font-weight:700;
  box-shadow:0 10px 22px rgba(16,24,40,.08);
  transition: filter .2s ease, transform .2s ease;
}
.cta-primary:hover{ filter:brightness(.96); transform:translateY(-1px) }

/* Iconos redondos del hero (WhatsApp / Llamar) */
.cta-icon{
  width:48px; height:48px; border-radius:999px; display:grid; place-items:center;
  background:#0E3D5F; color:#fff; box-shadow:0 10px 22px rgba(16,24,40,.08);
  transition: filter .2s ease, transform .2s ease;
}
.cta-icon:hover{ filter:brightness(.96); transform:translateY(-1px) }
.cta-icon .fa-whatsapp{ font-size:20px; color:#25D366 } /* color oficial WA */
.cta-icon .fa-phone{ font-size:18px; color:#fff }

/* ==========================================================================
   SECCIONES GENÉRICAS
   ========================================================================== */
main section{ padding:56px 18px }
main h2{ margin:0 0 18px; font-size:clamp(22px,3vw,28px) }

/* ==========================================================================
   SERVICIOS (tarjetas en grid responsivo)
   ========================================================================== */
#servicios{ background:#fff }
.services{
  display:grid; gap:20px; grid-template-columns:repeat(5,1fr);
}
.service-card{
  background:#fff;
  border:1px solid #e8edf1;
  border-radius:var(--radius);
  padding:18px; min-height:180px;
  box-shadow:0 8px 18px rgba(16,24,40,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.service-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow) }
.service-card h3{ margin:10px 0 6px; font-size:18px; font-weight:700 }
.icon-service{ color:var(--primary) }
.service-card p{ margin:0; color:var(--muted); font-size:14px }

/* Breakpoints para una buena densidad en tablets/móviles */
@media (max-width:1100px){
  .services{ grid-template-columns:repeat(3,1fr) }
}
@media (max-width:780px){
  .services{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width:540px){
  .services{ grid-template-columns:1fr }
}

/* ==========================================================================
   GALERÍA: fondo alterno + figure/figcaption + comparador + carrusel
   ========================================================================== */
#galeria{
  background:var(--bg);
  border-top:1px solid #e7ecef;
  border-bottom:1px solid #e7ecef;
}
#galeria h2{ font-weight:700 }
.gallery{ display:grid; gap:18px }
.gallery figcaption{ margin-top:8px; color:#4b5563; font-size:14px }

/* === Comparador ANTES/DESPUÉS =============================================
   - Usa variable CSS --pos (0–100) que actualiza el JS del HTML
   - Corregido: las imágenes ocupan 100% (antes 60%), superposición real
   ========================================================================== */
.before-after{
  position:relative; overflow:hidden; isolation:isolate;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  background:#000;
  --pos:50; /* valor inicial por si no carga JS */
}

/* Ambas imágenes al 100% para aprovechar el ancho del contenedor */
.before-after img{ width:100%; height:auto; display:block }

/* Coloca la imagen “después” encima y recórtala con clip-path */
.before-after .after{
  position:absolute; inset:0;
  clip-path:inset(0 calc(100% - var(--pos)%) 0 0);
  transition:clip-path .06s linear; /* micro feedback al deslizar */
  border-radius:inherit;
}

/* Slider: ocupa ancho completo; elevamos z-index para ser “clicable” */
.before-after input[type="range"]{
  appearance:none; width:100%;
  position:absolute; left:0; bottom:10px;
  background:transparent; z-index:2; height:36px;
}

/* Pista y pulgar accesibles (contraste y tamaño de toque > 44px en total) */
.before-after input[type="range"]::-webkit-slider-runnable-track{
  height:4px; background:rgba(255,255,255,.85); border-radius:3px;
}
.before-after input[type="range"]::-moz-range-track{
  height:4px; background:rgba(255,255,255,.85); border-radius:3px;
}
.before-after input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:22px; height:22px; margin-top:-9px;          /* centra el pulgar */
  border-radius:50%; background:var(--accent);
  border:2px solid #fff; box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.before-after input[type="range"]::-moz-range-thumb{
  width:22px; height:22px; border-radius:50%;
  background:var(--accent); border:2px solid #fff;
}

/* Etiqueta sobre la imagen para contexto (accesible y visible) */
.before-after figcaption{
  position:absolute; left:12px; top:12px; z-index:2;
  background:rgba(10,61,98,.85); color:#fff;
  padding:6px 10px; border-radius:999px; font-size:13px;
}

/* === Carrusel CSS (scroll-snap): usable sin JS ============================ */
.slider{
  display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:6px 6px 10px; -webkit-overflow-scrolling:touch;
}
.slider::-webkit-scrollbar{ height:8px }
.slider::-webkit-scrollbar-thumb{ background:#cfd8df; border-radius:8px }

.slide{
  position:relative; flex:0 0 85%; max-width:520px; scroll-snap-align:start;
  background:#fff; border:1px solid #e7ecef;
  border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden;
}
.slide img{ width:100%; height:280px; object-fit:cover }
.slide::after{
  content:attr(data-cap); position:absolute; left:12px; bottom:10px;
  background:rgba(10,61,98,.85); color:#fff;
  padding:6px 10px; border-radius:999px; font-size:12px;
}

/* ==========================================================================
   TESTIMONIO + FORMULARIO (layout split)
   ========================================================================== */
.split{ display:grid; grid-template-columns:1.1fr .9fr; gap:24px }
@media (max-width:960px){ .split{ grid-template-columns:1fr } }

/* Tarjeta de testimonio */
.quote{
  background:#fff; border:1px solid #e7ecef; border-radius:16px;
  padding:22px; box-shadow:var(--shadow);
}
.stars{ color:#f5b400; font-size:18px; margin-bottom:8px }
.client{ display:flex; align-items:center; gap:12px; margin-top:16px }
.client img{ width:44px; height:44px; border-radius:999px; object-fit:cover }

.phone-card{
  margin-top:16px; display:flex; align-items:center; gap:10px;
  background:#F4F6F7; border:1px solid #e7ecef;
  border-radius:12px; padding:12px 14px; font-weight:700;
}
.phone-card i{ color:var(--primary) }

/* Tarjeta de formulario */
.form-card{
  background:#fff; border:1px solid #e7ecef; border-radius:16px;
  padding:20px; box-shadow:var(--shadow);
}
.form-card h3{ margin:0 0 6px }
.form-sub{ color:#6b7280; font-size:14px; margin:0 0 10px }

/* === Formulario: estilos consistentes con accesibilidad visual ============ */
#presupuesto form{
  max-width:720px; margin:0 auto; background:#fff; padding:22px;
  border:1px solid #e7ecef; border-radius:var(--radius); box-shadow:var(--shadow);
}
#presupuesto label{ display:block; margin:8px 0 4px; font-weight:600 }
#presupuesto input,
#presupuesto select,
#presupuesto textarea{
  width:100%; padding:12px; font:inherit;
  background:#fff; color:var(--text);
  border:1px solid #d7dde2; border-radius:12px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
/* Estados de foco mejorados en inputs */
#presupuesto input:focus,
#presupuesto select:focus,
#presupuesto textarea:focus{
  border-color: color-mix(in srgb, var(--accent) 60%, #d7dde2);
  box-shadow: 0 0 0 3px rgba(26,188,156,.25);
}

/* Botón de envío (consistente con CTA del hero) */
#presupuesto button{
  margin-top:12px; border:0; padding:12px 18px;
  border-radius:999px; font-weight:700;
  background:var(--accent); color:#fff; cursor:pointer;
  transition: filter .2s ease, transform .2s ease;
}
#presupuesto button:hover{ filter:brightness(.95); transform:translateY(-1px) }

/* Validación visual simple (aprovecha validación nativa si no hay JS) */
#presupuesto input:invalid,
#presupuesto select:invalid{ border-color:#ef4444 }
#presupuesto input:valid,
#presupuesto select:valid{ border-color:#22c55e }

/* ==========================================================================
   CONTACTO / FOOTER
   ========================================================================== */
#contacto a{ text-decoration:underline; color:var(--primary) }

footer{
  background:#0b2f49; color:#e8f2f8;
  padding:26px 18px; text-align:center;
}
footer a{ color:#fff }
footer a:hover{ text-decoration:underline }

/* ==========================================================================
   BOTONES FLOTANTES (FAB)
   ========================================================================== */
.fab{
  position:fixed; right:18px; bottom:18px;
  display:flex; flex-direction:column; gap:10px; z-index:60;
}
.fab__btn{
  width:56px; height:56px; border-radius:999px;
  display:grid; place-items:center;
  color:#fff; font-weight:700;
  box-shadow:var(--shadow);
  transition: filter .2s ease, transform .2s ease;
}
.fab__btn:hover{ filter:brightness(.96); transform:translateY(-1px) }
.fab__wa{ background:#25D366 }        /* Color oficial WhatsApp */
.fab__call{ background:var(--primary) } /* Llamada en color corporativo */

/* Iconos dentro de los FAB */
.fab__btn i{
  font-size: 22px;   /* puedes subir a 24px si lo ves pequeño */
  line-height: 1;
}


/* ==========================================================================
   RESPONSIVE EXTRAS
   ========================================================================== */
@media (max-width:900px){
  .slider .slide{ flex-basis:88% }   /* tarjetas más anchas en carrusel */
}
@media (max-width:560px){
  .gallery-tiles{ grid-template-columns:1fr } /* (si usas el mosaico 3 col) */
}

/* ==========================================================================
   MOSAICO GALERÍA (si usas gallery-tiles)
   ========================================================================== */
.gallery-tiles{
  margin-top:12px; display:grid; gap:18px; grid-template-columns:repeat(3,1fr);
}
.gallery-tiles figure{
  background:#fff; border:1px solid #e7ecef; border-radius:16px;
  overflow:hidden; box-shadow:0 8px 18px rgba(16,24,40,.06);
}
.gallery-tiles img{ width:100%; height:210px; object-fit:cover }
.gallery-tiles figcaption{ padding:10px 12px; font-size:14px; color:#4b5563 }
@media (max-width:900px){ .gallery-tiles{ grid-template-columns:1fr 1fr } }
@media (max-width:560px){ .gallery-tiles{ grid-template-columns:1fr } }

/* ==========================================================================
   CLASES OPCIONALES PARA CTA (si prefieres clases en lugar de nth-child)
   ========================================================================== */
.contact-btn i{ margin-right:8px; font-size:18px; display:inline-block }
.btn-quote{ background:var(--accent); color:#fff }
.btn-wa{ background:#25D366; color:#fff }
.btn-call{ background:var(--accent); color:#fff }
.contact-btn:hover{ filter:brightness(.95) }


/* ================================
   1) LOGO MÁS GRANDE (desktop y móvil)
   ================================ */
.brand__img{
  height: 90px;          /* antes: 70px */
  width: auto;
}
@media (max-width: 540px){
  .brand__img{
    height: 56px;        /* antes: 44px en móvil */
  }
}

/* ======================================
   2) TEXTO DE LA MARCA (junto al logotipo)
   ====================================== */
.brand__name{
  font-size: clamp(20px, 1.2vw + 14px, 30px); /* más grande y adaptable */
  font-weight: 800;
  letter-spacing: .2px;
}
.brand__plus{
  font-size: 1em;  /* mantiene proporción con brand__name */
}

/* ======================================
   3) MENÚ DE NAVEGACIÓN (links del header)
   ====================================== */
.main-nav a{
  font-size: 18px;     /* súbelo a 17–18px si lo quieres aún mayor */
  padding: 10px 12px;  /* un pelín más de área clicable */
}

/* ======================================
   4) TÍTULO DEL HERO (h1/h2)
   - Usa el que tengas en #inicio.hero (h1 o h2)
   ====================================== */
#inicio.hero h1,
#inicio.hero h2{
  font-size: clamp(35px, 5.2vw, 56px); /* antes: clamp(34px,4.8vw,48px) */
  line-height: 1.1;
}

/* ======================================
   5) BOTONES / CTA
   ====================================== */
.cta-primary{
  font-size: 16px;         /* texto más grande */
  padding: 16px 24px;      /* y más “clickable” */
}
.cta-icon{
  width: 60px; height: 52px;  /* iconos redondos un poco mayores */
}

/* ======================================
   6) TARJETAS Y TEXTOS INTERNOS (opcional)
   - Sube el tamaño de títulos y copys de servicios
   ====================================== */
.service-card h3{
  font-size: 20px;   /* antes: 18px */
}
.service-card p{
  font-size: 15px;   /* antes: 14px */
}

/* ======================================
   7) AJUSTE DE ALTURA DEL HEADER (opcional)
   - Por si al crecer el logo necesitas un poco más de "aire"
   ====================================== */
header .container{
  padding: 12px 18px; /* más alto = cabecera más cómoda */
}