/* Soluciones ALA — hoja de estilo del sitio.
   Colores tomados del logo oficial: ver 00 Empresa/Identidad Visual/Logo/Uso_del_logo.md */

:root{
  --azul:#002f6c;
  --azul-oscuro:#00224e;
  --dorado:#d98c00;
  --gris:#8b8b8b;
  --verde:#5a8f1b;
  --whatsapp:#25d366;
  --texto:#1f2733;
  --texto-suave:#5b6472;
  --linea:#e3e7ee;
  --fondo:#ffffff;
  --fondo-alt:#f5f7fa;
  --radio:10px;
  --ancho:1080px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--texto);
  background:var(--fondo);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.contenedor{width:100%;max-width:var(--ancho);margin:0 auto;padding:0 20px}

.saltar{
  position:absolute;left:-9999px;top:0;background:var(--azul);color:#fff;
  padding:10px 16px;z-index:100
}
.saltar:focus{left:0}

a{color:var(--azul)}

/* ---------------------------------------------------------- cabecera */
.cabecera{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);
  backdrop-filter:blur(6px);border-bottom:1px solid var(--linea)
}
.cabecera-caja{display:flex;align-items:center;gap:20px;padding-top:10px;padding-bottom:10px}

.marca{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.marca-simbolo{height:44px;width:auto;display:block}
.marca-texto{
  font-size:1.15rem;font-weight:700;letter-spacing:.01em;color:var(--azul);
  white-space:nowrap
}
.marca-texto b{font-weight:700}
.a1{color:var(--azul)} .l{color:var(--dorado)} .a2{color:var(--gris)}

.nav{display:flex;gap:22px;margin-left:auto}
.nav a{color:var(--texto);text-decoration:none;font-weight:600;font-size:.95rem}
.nav a:hover{color:var(--dorado)}

.btn{
  display:inline-block;border-radius:var(--radio);font-weight:700;
  text-decoration:none;text-align:center;transition:transform .06s ease,filter .15s ease
}
.btn:active{transform:translateY(1px)}
.btn-tel{
  background:var(--dorado);color:#fff;padding:9px 16px;font-size:.95rem;white-space:nowrap
}
.btn-tel:hover{filter:brightness(1.07)}

/* -------------------------------------------------------------- hero */
.hero{
  /* la foto va debajo; el velo azul encima para que el texto blanco se lea siempre */
  background:
    linear-gradient(160deg, rgba(0,47,108,.74) 0%, rgba(0,34,78,.88) 100%),
    url("assets/fotos/casa-piscina.webp") center/cover no-repeat;
  color:#fff;padding:76px 0 84px;text-align:center
}
.hero h1{
  font-size:clamp(1.85rem,4.6vw,3rem);line-height:1.18;font-weight:800;
  letter-spacing:-.01em;max-width:16ch;margin:0 auto
}
.hero-texto{
  margin:20px auto 30px;max-width:52ch;font-size:1.08rem;color:#d7e0ee
}
.hero-botones{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn-principal{background:var(--dorado);color:#fff;padding:15px 28px;font-size:1.05rem}
.btn-principal:hover{filter:brightness(1.08)}
.btn-whatsapp{
  background:var(--whatsapp);color:#04331a;padding:15px 28px;font-size:1.05rem
}
.btn-whatsapp:hover{filter:brightness(1.06)}

/* selector de idioma en la cabecera */
.idioma{
  margin-left:12px;border:1.5px solid var(--linea);border-radius:var(--radio);
  padding:7px 11px;font-size:.85rem;font-weight:800;color:var(--azul);
  text-decoration:none;letter-spacing:.06em;white-space:nowrap
}
.idioma:hover{border-color:var(--dorado);color:var(--dorado)}

/* sello de presupuesto bajo el titular */
.hero-sello{
  display:inline-block;margin:0 auto 26px;padding:7px 16px;border-radius:999px;
  border:1.5px solid rgba(255,255,255,.45);color:#fff;font-weight:700;font-size:.92rem
}

/* municipios donde se trabaja: para que Google los lea y el cliente se reconozca */
.contacto-horario{
  text-align:center;margin-top:22px;color:#dbe3ee;font-size:1rem
}
.contacto-horario strong{color:#fff}
.zonas{margin-top:26px;text-align:center}
.zonas-titulo{
  font-size:.82rem;text-transform:uppercase;letter-spacing:.18em;font-weight:800;
  color:var(--dorado);margin-bottom:14px
}
.zonas-lista{
  list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 12px;margin-bottom:14px
}
.zonas-lista li{
  border:1px solid rgba(255,255,255,.32);border-radius:999px;padding:7px 16px;
  font-weight:600;font-size:1rem;color:#fff
}
.zonas-nota{font-size:.92rem;color:#c9d3e2}

/* --------------------------------------------------------- secciones */
.seccion{padding:74px 0}
.seccion-alt{background:var(--fondo-alt);border-block:1px solid var(--linea)}

h2{
  font-size:clamp(1.5rem,3vw,2.05rem);color:var(--azul);text-align:center;
  font-weight:800;letter-spacing:-.01em
}
.seccion-intro{
  text-align:center;max-width:56ch;margin:14px auto 40px;color:var(--texto-suave)
}

/* bloque destacado: el trabajo recurrente, que no es un arreglo suelto */
.destacado{
  margin-top:26px;background:var(--azul);color:#fff;border-radius:var(--radio);
  border-left:8px solid var(--dorado);overflow:hidden;
  display:grid;grid-template-columns:1.35fr 1fr;align-items:stretch
}
.destacado-texto{padding:28px 30px}
.destacado h3{font-size:1.25rem;color:var(--dorado);margin-bottom:10px}
.destacado p{color:#dbe3ee;line-height:1.65}
.destacado-foto{min-height:210px;background:url("assets/fotos/piscina.webp") center/cover no-repeat}
/* en pantalla estrecha la foto pasa arriba y ocupa el ancho */
@media (max-width:720px){
  .destacado{grid-template-columns:1fr}
  .destacado-foto{order:-1;min-height:170px}
}

.rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(215px,100%),1fr));gap:20px}
/* franja de foto en la cabecera de cada tarjeta: sale del padding para tocar los bordes */
.tarjeta-foto{
  display:block;height:140px;object-fit:cover;background:var(--fondo-alt);
  margin:-26px -22px 18px;width:calc(100% + 44px)
}
.tarjeta{
  background:#fff;border:1px solid var(--linea);border-radius:var(--radio);
  padding:26px 22px;border-top:4px solid var(--gris)
}
.tarjeta h3{font-size:1.14rem;color:var(--azul);margin-bottom:8px}
.tarjeta p{color:var(--texto-suave);font-size:.97rem}
.t-azul{border-top-color:var(--azul)}
.t-dorado{border-top-color:var(--dorado)}
.t-gris{border-top-color:var(--gris)}
.t-verde{border-top-color:var(--verde)}

/* ----------------------------------------------------- quiénes somos */
.filosofia{
  text-align:center;font-size:clamp(1.1rem,2.2vw,1.35rem);font-style:italic;
  color:var(--azul);max-width:38ch;margin:26px auto 34px;line-height:1.5
}
.socios-intro{text-align:center;max-width:58ch;margin:0 auto 34px;color:var(--texto-suave)}
.socios-intro strong{color:var(--texto)}

.valores-titulo{
  text-align:center;color:var(--azul);margin:46px 0 18px;font-size:1.1rem
}
.valores{
  list-style:none;display:flex;flex-wrap:wrap;gap:10px;justify-content:center
}
.valores li{
  background:#fff;border:1px solid var(--linea);color:var(--texto);
  padding:7px 15px;border-radius:999px;font-weight:600;font-size:.92rem
}

/* ---------------------------------------------------------- contacto */
.contacto{
  background:linear-gradient(160deg,var(--azul) 0%,var(--azul-oscuro) 100%);
  color:#fff;padding:74px 0;text-align:center
}
.contacto h2{color:#fff}
.contacto-intro{max-width:52ch;margin:14px auto 36px;color:#d7e0ee}

.contacto-vias{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));
  gap:16px;max-width:820px;margin:0 auto
}
.via{
  display:block;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radio);padding:22px 16px;text-decoration:none;color:#fff;
  transition:background .15s ease
}
.via:hover{background:rgba(255,255,255,.15)}
.via-etiqueta{
  display:block;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--dorado);font-weight:700;margin-bottom:6px
}
.via-dato{display:block;font-size:1.12rem;font-weight:700;word-break:break-word}
.contacto-zona{
  margin-top:32px;color:#aebbcf;font-size:.95rem;text-transform:uppercase;letter-spacing:.14em
}

/* --------------------------------------------------------------- pie */
.pie{background:#00224e;color:#9fb0c8;padding:24px 0;font-size:.9rem}
.pie-caja{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.pie a{color:#cfd9e8}

/* -------------------------------------------------------- responsive */
/* Entre tablet y escritorio los cuatro servicios quedaban 3 + 1 huérfano */
@media (min-width:620px) and (max-width:900px){
  .rejilla{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:420px){
  .marca-simbolo{height:38px}
  .marca-texto{font-size:1rem}
  .btn-tel{padding:8px 12px;font-size:.9rem}
}

@media (max-width:760px){
  .cabecera-caja{flex-wrap:wrap;gap:12px}
  .nav{order:3;width:100%;margin-left:0;justify-content:center;gap:18px;
       padding-top:10px;border-top:1px solid var(--linea)}
  .btn-tel{margin-left:auto}
  .hero{padding:56px 0 62px}
  .seccion,.contacto{padding:56px 0}
  .hero-botones .btn{width:100%;max-width:340px}
}

/* --------------------------------------------------------- impresión */
@media print{
  .cabecera,.hero-botones,.saltar{display:none}
  body{color:#000}
  .hero,.contacto{background:#fff;color:#000}
}

/* ------------------------------------------------------ aviso legal */
.legal{max-width:760px}
.legal h1{font-size:1.9rem;color:var(--azul);margin-bottom:8px}
.legal-h2{
  text-align:left;font-size:1.12rem;color:var(--azul);
  margin:32px 0 10px;border-bottom:1px solid var(--linea);padding-bottom:6px
}
.legal p{margin-bottom:12px;color:var(--texto-suave)}
.legal-lista{list-style:none;margin-bottom:12px}
.legal-lista li{padding:6px 0;border-bottom:1px solid var(--linea);color:var(--texto-suave)}
.legal-lista b{color:var(--texto)}
.legal-fecha{margin-top:28px;font-size:.9rem}
.aviso-borrador{
  background:#fff3cd;border:1px solid #e0c068;color:#6b5200;
  padding:16px 18px;border-radius:var(--radio);margin-bottom:30px;font-size:.95rem
}
.aviso-borrador code{background:rgba(0,0,0,.07);padding:1px 5px;border-radius:4px}