/* ==========================================================================
   ABANIC — Sistema de diseño
   Paleta: azul y verde reales de marca (extraídos del logo) sobre fondo blanco
   Tipografía: una sola familia — Plus Jakarta Sans — en todos los pesos
   Layout: editorial, fondo claro, fotografía real, movimiento deliberado
   ========================================================================== */

:root{
  /* color */
  --tinta:        #122A38;
  --tinta-700:    #1B3A4B;
  --tinta-600:    #27516A;
  --papel:        #FFFFFF;
  --papel-suave:  #F5F7F8;
  --papel-alto:   #FFFFFF;
  --azul:         #0D6199;
  --azul-700:     #0A4D7A;
  --azul-vivo:    #50ACE4;
  --verde:        #247A33;
  --verde-700:    #1C5F28;
  --verde-vivo:   #2D9940;
  --linea:        rgba(18,42,56,0.12);
  --texto:        #16222A;
  --texto-suave:  #55666F;
  --sombra:       0 24px 60px -24px rgba(18,42,56,0.28);

  /* tipografía — una sola familia para todo el sitio */
  --f-display: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --f-texto:   "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --f-mono:    "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;

  /* escala */
  --paso-xs: clamp(.78rem, .74rem + .1vw, .85rem);
  --paso-s:  clamp(.95rem, .9rem + .15vw, 1.05rem);
  --paso-m:  clamp(1.1rem, 1.05rem + .2vw, 1.25rem);
  --paso-l:  clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem);
  --paso-xl: clamp(2.4rem, 1.9rem + 2.6vw, 3.6rem);
  --paso-xxl:clamp(3.1rem, 2.3rem + 4vw, 5.2rem);

  --radio-s: 10px;
  --radio-m: 18px;
  --radio-l: 32px;
  --cont: 1240px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--papel);
  color:var(--texto);
  font-family:var(--f-texto);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;line-height:1.1;margin:0;text-wrap:balance;color:var(--tinta);letter-spacing:-.01em;}
p{margin:0;}
ul{margin:0;padding:0;list-style:none;}
button{font-family:inherit;cursor:pointer;}

.envoltura{
  width:100%;
  max-width:var(--cont);
  margin-inline:auto;
  padding-left:max(20px, env(safe-area-inset-left,0px));
  padding-right:max(20px, env(safe-area-inset-right,0px));
}

.etiqueta{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  font-family:var(--f-mono);
  font-weight:700;
  font-size:var(--paso-xs);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--verde);
}
.etiqueta::before{
  content:"";
  width:7px;height:7px;border-radius:50%;
  background:var(--azul-vivo);
  flex:none;
}

/* ---------- Navegación ---------- */
.nav-barra{
  position:sticky;
  top:env(safe-area-inset-top,0px);
  z-index:40;
  background:var(--papel);
  border-bottom:1px solid var(--linea);
}
/* Nota: a propósito sin backdrop-filter/transform aquí — cualquiera de los dos
   convierte esta barra en el "containing block" del menú móvil de abajo
   (position:fixed), achicándolo a la altura de la barra en vez de pantalla completa. */
.nav-interior{
  display:flex;align-items:center;justify-content:space-between;
  padding-block:14px;
}
.marca{display:flex;align-items:center;}
.marca img{height:38px;width:auto;display:block;}
.nav-enlaces{display:flex;align-items:center;gap:28px;}
.nav-enlaces a{
  font-size:.95rem;font-weight:600;color:var(--texto-suave);
  position:relative;padding-block:4px;transition:color .2s;
}
.nav-enlaces a::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--azul-vivo);transition:width .25s ease;
}
.nav-enlaces a:hover,.nav-enlaces a[aria-current="page"]{color:var(--tinta);}
.nav-enlaces a:hover::after,.nav-enlaces a[aria-current="page"]::after{width:100%;}
.boton-menu{display:none;background:none;border:none;padding:8px;}
.boton-menu span{display:block;width:24px;height:2px;background:var(--tinta);margin:5px 0;border-radius:2px;}

.boton{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:700;font-size:.92rem;
  padding:13px 24px;border-radius:999px;border:2px solid transparent;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.boton-primario{background:var(--azul);color:#fff;box-shadow:0 10px 24px -10px rgba(13,97,153,.55);}
.boton-primario:hover{transform:translateY(-2px);background:var(--azul-700);box-shadow:0 16px 30px -10px rgba(13,97,153,.65);}
.boton-fantasma{border-color:var(--tinta);color:var(--tinta);}
.boton-fantasma:hover{background:var(--tinta);color:var(--papel);}
.boton-claro{border-color:rgba(255,255,255,.5);color:var(--papel);}
.boton-claro:hover{background:var(--papel);color:var(--tinta);}

/* ---------- Secciones genéricas ---------- */
section{padding-block:clamp(56px,8vw,112px);}
.seccion-suave{background:var(--papel-suave);}
.cabecera-seccion{
  display:flex;flex-direction:column;gap:18px;margin-bottom:48px;
  max-width:680px;
}
.cabecera-seccion.centrada{margin-inline:auto;text-align:center;align-items:center;}
.cabecera-seccion p{color:var(--texto-suave);font-size:var(--paso-m);}

.seccion-oscura{background:var(--tinta);color:var(--papel);}
.seccion-oscura h1,.seccion-oscura h2,.seccion-oscura h3{color:var(--papel);}
.seccion-oscura p{color:rgba(255,255,255,.76);}
.seccion-oscura .etiqueta{color:var(--azul-vivo);}

/* ---------- Héroe ---------- */
.heroe{
  position:relative;
  padding-top:clamp(56px,8vw,96px);
  padding-bottom:clamp(40px,6vw,72px);
  overflow:hidden;
}
.heroe-fondo{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(60% 50% at 82% 8%, rgba(80,172,228,.16), transparent 70%),
    radial-gradient(45% 40% at 8% 90%, rgba(45,153,64,.12), transparent 70%);
}
.heroe-grilla{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;
}
.heroe h1{font-size:var(--paso-xxl);letter-spacing:-.02em;}
.heroe h1 em{font-style:normal;color:var(--azul);}
.heroe-parrafo{font-size:var(--paso-m);color:var(--texto-suave);max-width:46ch;margin-top:20px;}
.heroe-acciones{display:flex;gap:16px;flex-wrap:wrap;margin-top:34px;}
.heroe-confianza{
  display:flex;gap:28px;flex-wrap:wrap;margin-top:44px;
  padding-top:28px;border-top:1px solid var(--linea);
}
.heroe-confianza b{display:block;font-family:var(--f-display);font-weight:800;font-size:1.6rem;color:var(--tinta);}
.heroe-confianza span{font-size:.72rem;letter-spacing:.06em;color:var(--texto-suave);text-transform:uppercase;}

.heroe-arte{position:relative;}
.heroe-foto{
  position:relative;border-radius:28px;overflow:hidden;box-shadow:var(--sombra);
  aspect-ratio:4/5;
}
.heroe-foto img{width:100%;height:100%;object-fit:cover;display:block;}
.heroe-foto::after{
  content:"";position:absolute;inset:0;border-radius:28px;
  box-shadow:inset 0 0 0 1px rgba(18,42,56,.08);
}
.heroe-foto-insignia{
  position:absolute;left:18px;bottom:18px;z-index:2;
  background:rgba(18,42,56,.88);color:#fff;border-radius:var(--radio-m);
  padding:14px 18px;display:flex;align-items:center;gap:12px;
  backdrop-filter:none;
}
.heroe-foto-insignia b{display:block;font-size:1.3rem;font-weight:800;}
.heroe-foto-insignia span{display:block;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.75);}

/* ---------- Imágenes reutilizables ---------- */
.bloque-foto{border-radius:var(--radio-l);overflow:hidden;box-shadow:var(--sombra);}
.bloque-foto img{width:100%;height:100%;object-fit:cover;display:block;}

.franja-foto{
  position:relative;background-size:cover;background-position:center;
  border-radius:var(--radio-l);overflow:hidden;color:#fff;
  padding:clamp(44px,7vw,84px) clamp(24px,5vw,56px);
  display:flex;flex-direction:column;align-items:flex-start;gap:18px;
}
.franja-foto::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg, rgba(18,42,56,.90) 0%, rgba(18,42,56,.62) 55%, rgba(18,42,56,.32) 100%);
}
.franja-foto > *{position:relative;z-index:1;}
.franja-foto h2{color:#fff;max-width:26ch;}
.franja-foto p{color:rgba(255,255,255,.82);max-width:48ch;}

.bloque-split{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center;}
.bloque-split.invertido{grid-template-columns:1.1fr .9fr;}
.bloque-split.invertido .bloque-split-foto{order:2;}
.bloque-split-foto{aspect-ratio:1/1;border-radius:var(--radio-l);overflow:hidden;box-shadow:var(--sombra);}
.bloque-split-foto img{width:100%;height:100%;object-fit:cover;display:block;}

/* ---------- Tarjetas de servicio ---------- */
.rejilla{display:grid;gap:22px;}
.rejilla-3{grid-template-columns:repeat(3,1fr);}
.rejilla-2{grid-template-columns:repeat(2,1fr);}
.rejilla-4{grid-template-columns:repeat(4,1fr);}

.tarjeta{
  background:var(--papel-alto);
  border:1px solid var(--linea);
  border-radius:var(--radio-m);
  padding:30px;
  display:flex;flex-direction:column;gap:14px;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.tarjeta:hover{transform:translateY(-6px);box-shadow:var(--sombra);border-color:transparent;}
.tarjeta .icono{width:46px;height:46px;color:var(--azul);}
.tarjeta h3{font-size:1.2rem;}
.tarjeta p{color:var(--texto-suave);font-size:.98rem;}
.tarjeta-enlace{
  margin-top:auto;font-size:.82rem;letter-spacing:.02em;
  color:var(--azul);display:inline-flex;align-items:center;gap:6px;font-weight:700;
}

/* ---------- Franja de cifras ---------- */
.cifras{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--linea);
  border:1px solid var(--linea);border-radius:var(--radio-m);overflow:hidden;
}
.cifra{background:var(--papel-alto);padding:30px 22px;text-align:center;}
.cifra b{display:block;font-family:var(--f-display);font-weight:800;font-size:clamp(2rem,1.6rem+1.8vw,3rem);color:var(--tinta);font-variant-numeric:tabular-nums;}
.cifra span{font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;color:var(--texto-suave);font-weight:600;}

/* ---------- Proceso ---------- */
.proceso{display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative;}
.paso{position:relative;padding:28px 18px 0 0;}
.paso-num{
  font-family:var(--f-display);font-weight:800;font-size:2.6rem;color:var(--azul-vivo);
  opacity:.65;display:block;margin-bottom:10px;
}
.paso h3{font-size:1.05rem;margin-bottom:8px;}
.paso p{font-size:.9rem;color:var(--texto-suave);}
.paso:not(:last-child)::after{
  content:"";position:absolute;top:44px;right:-10px;width:20px;height:1px;
  background:var(--linea);
}

/* ---------- Franja con fondo oscuro de cita / CTA ---------- */
.cta-franja{
  background:var(--tinta);
  border-radius:var(--radio-l);
  padding:clamp(40px,6vw,72px);
  color:var(--papel);
  display:grid;grid-template-columns:1.3fr .7fr;gap:32px;align-items:center;
  position:relative;overflow:hidden;
}
.cta-franja::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(60% 80% at 90% 0%, rgba(80,172,228,.35), transparent 70%);
}
.cta-franja h2{color:var(--papel);position:relative;}
.cta-franja p{color:rgba(255,255,255,.78);position:relative;margin-top:14px;}
.cta-acciones{display:flex;flex-direction:column;gap:12px;position:relative;}

/* ---------- Mapa de cobertura ---------- */
.mapa-bloque{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center;}
.contacto-grilla{display:grid;grid-template-columns:1fr 1.2fr;gap:48px;align-items:start;}
.lista-ciudades{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 24px;margin-top:22px;}
.lista-ciudades li{
  display:flex;align-items:center;gap:10px;font-size:.96rem;color:var(--texto-suave);
  padding-block:4px;border-bottom:1px dashed var(--linea);
}
.lista-ciudades li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--verde-vivo);flex:none;}
.punto-mapa{fill:var(--azul-vivo);stroke:var(--papel-alto);stroke-width:2;}
.punto-mapa-anim{animation:pulso 2.6s ease-in-out infinite;}
@keyframes pulso{0%,100%{r:4.5;opacity:1;}50%{r:7.5;opacity:.55;}}

/* ---------- Testimonio / confianza de clientes ---------- */
.franja-clientes{
  border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);
  padding-block:34px;
}
.franja-clientes .envoltura{display:flex;align-items:center;gap:36px;flex-wrap:wrap;justify-content:space-between;}
.franja-clientes p{font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--texto-suave);font-weight:700;}
.marcas-clientes{display:flex;gap:34px;flex-wrap:wrap;align-items:center;}
.marcas-clientes span{font-family:var(--f-display);font-weight:700;font-size:1.1rem;color:var(--tinta-600);opacity:.8;}

/* ---------- FAQ ---------- */
.faq-item{border-bottom:1px solid var(--linea);}
.faq-pregunta{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;
  background:none;border:none;text-align:left;padding:22px 0;
  font-family:var(--f-display);font-weight:700;font-size:1.08rem;color:var(--tinta);
}
.faq-mas{font-size:1.4rem;color:var(--azul);transition:transform .25s ease;flex:none;}
.faq-item[aria-expanded="true"] .faq-mas{transform:rotate(45deg);}
.faq-respuesta{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.faq-respuesta p{padding-bottom:20px;color:var(--texto-suave);max-width:68ch;}

/* ---------- Pie de página ---------- */
footer{background:var(--tinta);color:rgba(255,255,255,.72);padding-block:56px 32px;}
.logo-pie{height:32px;width:auto;display:block;margin-bottom:14px;filter:brightness(0) invert(1);opacity:.95;}
.pie-rejilla{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.14);}
.pie-rejilla h4{color:var(--papel);font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px;}
.pie-rejilla li{margin-bottom:10px;font-size:.92rem;}
.pie-rejilla a:hover{color:var(--azul-vivo);}
.pie-base{display:flex;justify-content:space-between;align-items:center;padding-top:24px;font-size:.82rem;flex-wrap:wrap;gap:10px;}

/* ---------- WhatsApp flotante ---------- */
.whatsapp-flotante{
  position:fixed;
  right:max(20px, env(safe-area-inset-right,0px));
  bottom:max(20px, env(safe-area-inset-bottom,0px));
  z-index:60;width:58px;height:58px;border-radius:50%;
  background:#25D366;display:flex;align-items:center;justify-content:center;
  box-shadow:0 14px 30px -8px rgba(18,42,56,.45), 0 0 0 0 rgba(37,211,102,.5);
  transition:transform .2s ease;
  animation:whatsapp-pulso 2.8s ease-in-out infinite;
}
.whatsapp-flotante:hover{transform:scale(1.08);}
.whatsapp-flotante svg{width:29px;height:29px;}
@keyframes whatsapp-pulso{
  0%,100%{box-shadow:0 14px 30px -8px rgba(18,42,56,.45), 0 0 0 0 rgba(37,211,102,.45);}
  50%{box-shadow:0 14px 30px -8px rgba(18,42,56,.45), 0 0 0 10px rgba(37,211,102,0);}
}

/* ---------- Formularios ---------- */
.formulario{
  background:var(--papel-alto);border:1px solid var(--linea);border-radius:var(--radio-m);
  padding:clamp(24px,4vw,40px);display:grid;gap:18px;box-shadow:var(--sombra);
}
.campo{display:flex;flex-direction:column;gap:6px;}
.campo label{font-size:.82rem;font-weight:700;color:var(--tinta);}
.campo input,.campo select,.campo textarea{
  font-family:inherit;font-size:1rem;padding:13px 15px;border-radius:var(--radio-s);
  border:1.5px solid var(--linea);background:var(--papel);color:var(--texto);
}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:2px solid var(--azul-vivo);border-color:var(--azul-vivo);}
.campo-doble{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.nota-privacidad{font-size:.8rem;color:var(--texto-suave);}
.mensaje-envio{display:none;background:rgba(36,122,51,.1);color:var(--verde);border-radius:var(--radio-s);padding:14px 16px;font-weight:600;font-size:.92rem;}
.mensaje-envio.visible{display:block;}

/* ---------- Animaciones de entrada ----------
   Visible por defecto: si el JS no corre, el sitio se ve completo igual.
   El JS solo añade .pre a bloques que parten fuera de pantalla, con una
   red de seguridad que los revela de todas formas si algo falla. */
[data-rev]{opacity:1;transform:translateY(0);transition:opacity .7s ease, transform .7s ease;}
[data-rev].pre{opacity:0;transform:translateY(22px);}

/* ---------- Banda de página interior (servicios, nosotros, cobertura, contacto) ---------- */
.banda-pagina{
  padding-top:clamp(60px,9vw,120px);padding-bottom:clamp(44px,7vw,72px);
  position:relative;overflow:hidden;background:var(--tinta) center/cover no-repeat;color:var(--papel);
}
.banda-pagina::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(110deg, rgba(18,42,56,.92) 0%, rgba(18,42,56,.74) 48%, rgba(18,42,56,.42) 100%);
}
.migas{position:relative;font-size:.78rem;letter-spacing:.02em;color:rgba(255,255,255,.62);margin-bottom:18px;}
.migas a:hover{color:var(--azul-vivo);}
.banda-pagina h1{position:relative;font-size:var(--paso-xl);max-width:18ch;color:var(--papel);}
.banda-pagina .heroe-parrafo{position:relative;color:rgba(255,255,255,.8);max-width:52ch;}

/* ---------- Página servicios: bloques alternados ---------- */
.servicio-bloque{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding-block:clamp(40px,6vw,76px);border-bottom:1px solid var(--linea);}
.servicio-bloque:last-child{border-bottom:none;}
.servicio-bloque.invertido{grid-template-columns:1fr 1fr;}
.servicio-bloque.invertido .servicio-texto{order:2;}
.servicio-numero{color:var(--azul);font-weight:700;font-size:.85rem;letter-spacing:.04em;margin-bottom:10px;display:block;}
.lista-check{display:grid;gap:10px;margin-top:18px;}
.lista-check li{display:flex;gap:10px;align-items:flex-start;font-size:.96rem;color:var(--texto-suave);}
.lista-check svg{flex:none;width:20px;height:20px;color:var(--verde);margin-top:2px;}

/* ---------- utilitarios ---------- */
.centrar-boton{display:flex;justify-content:center;margin-top:36px;}
.separador-vertical{height:1px;background:var(--linea);margin-block:8px;}
.leyenda-nota{font-size:.82rem;color:var(--texto-suave);font-style:italic;}

/* ===================== Responsive ===================== */
@media (max-width:980px){
  .nav-enlaces{position:fixed;inset:72px 0 0 0;background:var(--papel);flex-direction:column;align-items:flex-start;padding:28px 24px;gap:22px;transform:translateX(100%);transition:transform .3s ease;overflow-y:auto;}
  .nav-enlaces.abierto{transform:translateX(0);}
  .boton-menu{display:block;}
  .heroe-grilla{grid-template-columns:1fr;}
  .heroe-arte{order:-1;max-width:360px;margin-inline:auto;}
  .rejilla-3,.rejilla-4{grid-template-columns:repeat(2,1fr);}
  .cifras{grid-template-columns:repeat(2,1fr);}
  .proceso{grid-template-columns:1fr 1fr;gap:28px;}
  .paso:not(:last-child)::after{display:none;}
  .cta-franja{grid-template-columns:1fr;}
  .mapa-bloque{grid-template-columns:1fr;}
  .contacto-grilla{grid-template-columns:1fr;}
  .lista-ciudades{grid-template-columns:1fr 1fr;}
  .pie-rejilla{grid-template-columns:1fr 1fr;gap:28px;}
  .servicio-bloque,.servicio-bloque.invertido{grid-template-columns:1fr;}
  .servicio-bloque.invertido .servicio-texto{order:0;}
  .bloque-split,.bloque-split.invertido{grid-template-columns:1fr;}
  .bloque-split .bloque-split-foto,.bloque-split.invertido .bloque-split-foto{order:-1;}
}
@media (max-width:620px){
  .rejilla-2,.rejilla-3,.rejilla-4{grid-template-columns:1fr;}
  .cifras{grid-template-columns:1fr 1fr;}
  .campo-doble{grid-template-columns:1fr;}
  .heroe-confianza{gap:20px;}
  .pie-rejilla{grid-template-columns:1fr;}
  .franja-clientes .envoltura{flex-direction:column;align-items:flex-start;gap:16px;}
  .whatsapp-flotante{width:52px;height:52px;}
  .whatsapp-flotante svg{width:25px;height:25px;}
  .heroe-foto-insignia{left:12px;bottom:12px;padding:10px 14px;}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  [data-rev],[data-rev].pre{opacity:1!important;transform:none!important;transition:none!important;}
  .punto-mapa-anim{animation:none;}
  .whatsapp-flotante{animation:none;}
}