/* =============================================================================
   styleweb.css — Personalizaciones front-end
   Proyecto : Ingenieros Arquitectos 3.1416 (migración WordPress → Laravel)
   Prefijo  : .iaw-  (Ingenieros Arquitectos Web) — aísla del tema heredado
   Carga    : ÚLTIMO <link> del <head> en resources/views/layouts/app.blade.php
              (después de web.css) para que gane en cascada.
   Paleta   : tomada del tema Blocksy del sitio actual (--theme-palette-color-*)
             1/2 #18394d · 3 #3A4F66 · 4 #192a3d · 5 #e1e8ed · 6 #f2f5f7 · 7 #FAFBFC
   Fuentes  : Kelson (display, autoalojada — 6 pesos) + Roboto (texto, Google Fonts)
   -----------------------------------------------------------------------------
   TABLA DE CONTENIDO
     01. Tokens (:root)
     02. Fuentes
     03. Base / normalización (scoped .iaw)
     04. Layout .......... contenedor, sección, grid
     05. Tipografía ...... kicker, título, lead, prosa
     06. Botones ......... primary / outline / accent / whatsapp
     07. Header + Nav .... topbar, barra, dropdown, móvil, sticky
     08. Hero ............ slider de portada
     09. Servicios ...... tarjeta de servicio + iconos
     10. Contadores ..... "Siempre trabajando para ti" (10 / 200 / 100)
     11. Proyectos ...... grid + filtros por servicio
     12. Casos de éxito . tarjeta + detalle (reto / solución / resultados)
     13. Clientes ....... marquee de logos "Confían en nosotros"
     14. Testimonios
     15. Video
     16. Breadcrumb
     17. Contacto ....... formulario + datos + mapa
     18. Footer
     19. Flotantes ...... WhatsApp, volver-arriba, cookies
     20. Utilidades
     21. Responsive
     22. Accesibilidad / print
   ========================================================================== */


/* == 01. TOKENS ============================================================ */
:root {
  /* --- Marca / azules (Blocksy) --- */
  --iaw-navy-900:  #101f2b;   /* overlays, footer profundo */
  --iaw-navy-800:  #17303f;
  --iaw-navy-700:  #18394d;   /* ★ COLOR PRIMARIO de marca */
  --iaw-navy-600:  #24506b;   /* hover sobre primario */
  --iaw-navy-500:  #2f6180;

  /* --- Neutros gris-azulados --- */
  --iaw-slate-600: #3A4F66;   /* títulos */
  --iaw-slate-500: #5c7186;
  --iaw-slate-400: #90a2b3;
  --iaw-line:      #e1e8ed;   /* bordes / divisores */
  --iaw-bg-alt:    #f2f5f7;   /* fondo de sección alterna */
  --iaw-bg-soft:   #fafbfc;
  --iaw-white:     #ffffff;

  /* --- Texto --- */
  --iaw-ink:       #1f2d3a;
  --iaw-muted:     #6b7c8c;
  --iaw-on-dark:   #dfe7ee;

  /* --- Acento para CTA (PROPUESTA — confirmar) --- */
  --iaw-accent:     #c8862f;  /* ocre/dorado, contrasta con el azul */
  --iaw-accent-600: #a96e22;
  --iaw-wa:         #25d366;  /* verde WhatsApp */
  --iaw-wa-600:     #1da851;

  /* --- Estados --- */
  --iaw-focus: #24506b;
  --iaw-error: #c0392b;
  --iaw-ok:    #2e7d32;

  /* --- Tipografía --- */
  --iaw-font-display: "Kelson", "Abel", "Oswald", "Segoe UI", sans-serif;
  --iaw-font-body:    "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --iaw-fs-100: .75rem;
  --iaw-fs-200: .8125rem;
  --iaw-fs-300: .875rem;
  --iaw-fs-400: 1rem;
  --iaw-fs-500: 1.125rem;
  --iaw-fs-600: 1.375rem;
  --iaw-fs-700: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem);
  --iaw-fs-800: clamp(2rem, 1.4rem + 2.6vw, 3rem);
  --iaw-fs-900: clamp(2.5rem, 1.6rem + 3.8vw, 4rem);

  --iaw-lh-tight: 1.15;
  --iaw-lh-snug:  1.35;
  --iaw-lh-base:  1.65;

  --iaw-fw-normal: 400;
  --iaw-fw-medium: 500;
  --iaw-fw-bold:   700;
  --iaw-tracking:  .04em;   /* para kickers en mayúsculas */

  /* --- Espaciado (escala 4px) --- */
  --iaw-space-1: .25rem;  --iaw-space-2: .5rem;   --iaw-space-3: .75rem;
  --iaw-space-4: 1rem;    --iaw-space-5: 1.5rem;  --iaw-space-6: 2rem;
  --iaw-space-7: 2.5rem;  --iaw-space-8: 3rem;    --iaw-space-10: 4rem;
  --iaw-space-12: 6rem;
  --iaw-section-y: clamp(3.5rem, 2rem + 6vw, 7rem);

  /* --- Contenedor / grid --- */
  --iaw-container:        1200px;
  --iaw-container-narrow: 880px;
  --iaw-gutter:           1.5rem;

  /* --- Logo (logo_web_cropped.png ≈ 1.22:1, lockup vertical recortado, arte oscuro sobre transparente) --- */
  --iaw-logo-h:        88px;   /* cabecera, en reposo */
  --iaw-logo-h-stuck:  52px;   /* cabecera, condensada al hacer scroll */
  --iaw-logo-h-footer: 162px;   /* pie (se invierte a blanco vía filter) */

  /* --- Bordes / sombras / motion --- */
  --iaw-radius-sm: 4px;
  --iaw-radius:    10px;
  --iaw-radius-lg: 18px;
  --iaw-shadow-sm: 0 1px 3px rgba(24, 57, 77, .08);
  --iaw-shadow:    0 10px 30px rgba(24, 57, 77, .12);
  --iaw-shadow-lg: 0 24px 60px rgba(16, 31, 43, .22);
  --iaw-ring:      0 0 0 3px rgba(36, 80, 107, .35);
  --iaw-gradient:  linear-gradient(135deg, var(--iaw-navy-700), var(--iaw-navy-500));
  --iaw-ease:      cubic-bezier(.22, .61, .36, 1);
  --iaw-dur:       .28s;

  /* --- Capas --- */
  --iaw-z-header:   1000;
  --iaw-z-dropdown: 1010;
  --iaw-z-float:    1040;
  --iaw-z-overlay:  1050;
}


/* == 02. FUENTES ========================================================== */
/* Roboto se declara vía <link> de Google Fonts en layouts/web.blade.php
   (300,400,500,700). Kelson (display) va autoalojada aquí, 6 pesos, desde
   public/assets/fonts/kelson/ — ruta relativa a este CSS (public/assets/css/).
   Fallback si no cargan: pila definida en los tokens (--iaw-font-*). */
@font-face {
  font-family: "Kelson";
  src: url("../fonts/kelson/kelson-Thin.otf") format("opentype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Kelson";
  src: url("../fonts/kelson/kelson-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Kelson";
  src: url("../fonts/kelson/kelson.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Kelson";
  src: url("../fonts/kelson/kelson-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Kelson";
  src: url("../fonts/kelson/kelson-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Kelson";
  src: url("../fonts/kelson/Kelson-ExtraBold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Iconos de la fila de contacto del header, extraídos tal cual de
   clsperu.com (paquete "ElementsKit", clases .icon-phone1/.icon-google-map/
   .icon-email1 → códigos \e976/\e910/\ea12 en su propia hoja ekiticons.css).
   Se autoalojó el mismo archivo .woff en vez de redibujarlos, para que el
   trazo sea idéntico al original — solo se usan estos 3 glifos. */
@font-face {
  font-family: "iaw-header-icons";
  src: url("../fonts/header-icons/header-icons.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
.iaw-hicon {
  font-family: "iaw-header-icons" !important;
  font-style: normal; font-weight: 400; font-variant: normal; line-height: 1;
  text-transform: none; speak: none; -webkit-font-smoothing: antialiased;
}
.iaw-hicon-phone::before    { content: "\e976"; }
.iaw-hicon-location::before { content: "\e910"; }
.iaw-hicon-email::before    { content: "\ea12"; }


/* == 03. BASE (scoped a .iaw-scope en <body> del front-end) =============== */
.iaw-scope {
  font-family: var(--iaw-font-body);
  font-size: var(--iaw-fs-400);
  line-height: var(--iaw-lh-base);
  color: var(--iaw-ink);
  background: var(--iaw-white);
  -webkit-font-smoothing: antialiased;
}
.iaw-scope h1, .iaw-scope h2, .iaw-scope h3, .iaw-scope h4 {
  font-family: var(--iaw-font-display);
  font-weight: var(--iaw-fw-normal);
  line-height: var(--iaw-lh-tight);
  color: var(--iaw-slate-600);
  margin: 0 0 var(--iaw-space-4);
}
.iaw-scope a { color: var(--iaw-navy-700); text-decoration: none; transition: color var(--iaw-dur) var(--iaw-ease); }
.iaw-scope a:hover { color: var(--iaw-navy-600); }
.iaw-scope :focus-visible { outline: none; box-shadow: var(--iaw-ring); border-radius: var(--iaw-radius-sm); }
.iaw-scope img { max-width: 100%; height: auto; display: block; }


/* == 04. LAYOUT ========================================================== */
.iaw-container        { width: 100%; max-width: var(--iaw-container); margin-inline: auto; padding-inline: var(--iaw-gutter); }
.iaw-container--narrow { max-width: var(--iaw-container-narrow); }
.iaw-section          { padding-block: var(--iaw-section-y); }
.iaw-section--alt     { background: var(--iaw-bg-alt); }
.iaw-section--dark    { background: var(--iaw-navy-700); color: var(--iaw-on-dark); }
.iaw-section--dark h2, .iaw-section--dark h3 { color: var(--iaw-white); }

.iaw-grid       { display: grid; gap: var(--iaw-space-6); }
.iaw-grid--2    { grid-template-columns: repeat(2, 1fr); }
.iaw-grid--3    { grid-template-columns: repeat(3, 1fr); }
.iaw-grid--4    { grid-template-columns: repeat(4, 1fr); }
.iaw-grid--auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }


/* == 05. TIPOGRAFÍA ===================================================== */
.iaw-kicker {
  display: inline-block;
  font-family: var(--iaw-font-body);
  font-size: var(--iaw-fs-200);
  font-weight: var(--iaw-fw-bold);
  letter-spacing: var(--iaw-tracking);
  text-transform: uppercase;
  color: var(--iaw-navy-500);
  margin-bottom: var(--iaw-space-3);
}
.iaw-title      { font-size: var(--iaw-fs-800); }
.iaw-title--lg  { font-size: var(--iaw-fs-900); }
.iaw-section-head { max-width: 46rem; margin-bottom: var(--iaw-space-8); }
.iaw-section-head--center { margin-inline: auto; text-align: center; }
.iaw-lead { font-size: var(--iaw-fs-500); color: var(--iaw-muted); line-height: var(--iaw-lh-snug); }

/* Frase de valor (cita editorial) */
.iaw-value       { text-align: center; }
.iaw-value__mark { display: block; font-size: 2.25rem; color: var(--iaw-accent); opacity: .3; margin-bottom: var(--iaw-space-3); }

/* Prosa para páginas de contenido (Páginas, detalle de servicio/caso/post) */
.iaw-prose { max-width: var(--iaw-container-narrow); }
.iaw-prose > * + * { margin-top: var(--iaw-space-4); }
.iaw-prose h2 { font-size: var(--iaw-fs-700); margin-top: var(--iaw-space-8); }
.iaw-prose h3 { font-size: var(--iaw-fs-600); margin-top: var(--iaw-space-6); }
.iaw-prose ul, .iaw-prose ol { padding-left: 1.4rem; }
.iaw-prose li + li { margin-top: var(--iaw-space-2); }
.iaw-prose img { border-radius: var(--iaw-radius); margin-block: var(--iaw-space-5); }
.iaw-prose blockquote {
  border-left: 3px solid var(--iaw-accent);
  padding-left: var(--iaw-space-4);
  color: var(--iaw-slate-500);
  font-style: italic;
}


/* == 06. BOTONES ======================================================= */
/* Cada variante define su propio estado de reposo (--_bg/--_fg/--_bd) Y de
   hover (--_bg-h/--_fg-h/--_bd-h) para que el color del texto siempre sea
   el correcto sobre su fondo — nada de un :hover genérico "adivinando". */
.iaw-btn {
  --_bg: var(--iaw-navy-700); --_fg: #fff; --_bd: var(--_bg);
  --_bg-h: var(--iaw-navy-600); --_fg-h: #fff; --_bd-h: var(--_bg-h);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--iaw-space-2);
  padding: .9em 1.8em;
  font-family: var(--iaw-font-body);
  font-size: var(--iaw-fs-300); font-weight: var(--iaw-fw-bold);
  letter-spacing: .02em;
  background: var(--_bg);
  border: 1.5px solid var(--_bd); border-radius: 999px;
  cursor: pointer; box-shadow: 0 6px 16px -8px rgba(16, 31, 43, .45);
  transition: transform var(--iaw-dur) var(--iaw-ease), background var(--iaw-dur) var(--iaw-ease),
              color var(--iaw-dur) var(--iaw-ease), border-color var(--iaw-dur) var(--iaw-ease),
              box-shadow var(--iaw-dur) var(--iaw-ease);
}
/* .iaw-scope a { color: var(--iaw-navy-700) } (sección 03) es más específico
   que ".iaw-btn { color: … }" (1 clase + 1 tipo vs. 1 clase) y ganaba la
   cascada, dejando SIEMPRE el texto en navy sin importar la variante del
   botón. ".iaw-scope .iaw-btn" (2 clases) es más específico que ambos. */
.iaw-scope .iaw-btn        { color: var(--_fg); }
.iaw-scope .iaw-btn:hover  { color: var(--_fg-h); }
.iaw-btn:hover {
  transform: translateY(-2px);
  background: var(--_bg-h); border-color: var(--_bd-h);
  box-shadow: 0 16px 30px -10px rgba(16, 31, 43, .5);
}
.iaw-btn--outline { --_bg: transparent; --_fg: var(--iaw-navy-700); --_bd: var(--iaw-navy-700); --_bg-h: var(--iaw-navy-700); --_fg-h: #fff; --_bd-h: var(--iaw-navy-700); box-shadow: none; }
.iaw-btn--accent  { --_bg: var(--iaw-accent); --_bd: var(--iaw-accent); --_fg: #fff; --_bg-h: var(--iaw-accent-600); --_bd-h: var(--iaw-accent-600); --_fg-h: #fff; }
.iaw-btn--wa      { --_bg: var(--iaw-wa); --_bd: var(--iaw-wa); --_fg: #fff; --_bg-h: var(--iaw-wa-600); --_bd-h: var(--iaw-wa-600); --_fg-h: #fff; }
/* Botón blanco sólido para usar sobre fondos de color (banda CTA, hero) */
.iaw-btn--white   { --_bg: #fff; --_bd: #fff; --_fg: var(--iaw-navy-700); --_bg-h: var(--iaw-bg-alt); --_bd-h: var(--iaw-bg-alt); --_fg-h: var(--iaw-navy-700); }
/* Sobre foto: fondo "esmerilado" translúcido en reposo (siempre legible,
   sea cual sea el brillo de la imagen de fondo) y se llena de blanco al pasar el cursor. */
.iaw-btn--ghost-light {
  --_bg: rgba(255, 255, 255, .16); --_fg: #fff; --_bd: rgba(255, 255, 255, .8);
  --_bg-h: #fff; --_fg-h: var(--iaw-navy-700); --_bd-h: #fff;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.iaw-btn--lg { padding: 1.05em 2.2em; font-size: var(--iaw-fs-400); }


/* == 07. HEADER + NAV ===================================================
   Estructura tomada de clsperu.com (ver comentario en web-nav.blade.php):
   - ".iaw-header" (clara, NO fija) — logo + razón social + teléfono/
     dirección/email en columnas, más la hamburguesa móvil.
   - ".iaw-nav"    (color de marca, SÍ fija al hacer scroll) — menú +
     redes sociales + CTA de WhatsApp.

   ".iaw-nav" vive como hijo directo de <body> (ver web-nav.blade.php) para
   que su "position: sticky" tenga un contenedor tan alto como toda la
   página — si quedara anidado en una caja corta, se despegaría del top
   apenas esa caja terminara de pasar. */
.iaw-header__bar { width: 100%; padding-inline: clamp(1.25rem, 3vw, 3rem); box-sizing: border-box; }

/* ── Fila 1: logo + razón social + teléfono/dirección/email ──────────
   Clara, con sombra sutil (como el header de referencia), sin franja
   navy encima: aquí vive todo el "contacto rápido" en columnas. */
.iaw-header {
  position: relative; z-index: var(--iaw-z-header);
  background: var(--iaw-white); box-shadow: 0 1px 10px rgba(16, 31, 43, .1);
}
.iaw-header__row1 { display: flex; align-items: center; gap: var(--iaw-space-6); padding-block: var(--iaw-space-3); }
.iaw-header__brand { flex: 0 0 auto; line-height: 0; display: block; }
.iaw-header__brand img { height: var(--iaw-logo-h); width: auto; display: block; margin: 0; }
.iaw-header__name {
  flex: 0 0 auto; font-family: var(--iaw-font-display); font-weight: 700; font-size: var(--iaw-fs-400);
  line-height: 1.2; color: var(--iaw-navy-700); max-width: 16ch; padding-right: var(--iaw-space-5);
  border-right: 1px solid var(--iaw-line);
}
.iaw-header__name:hover { color: var(--iaw-navy-600); }

.iaw-header__info { display: flex; align-items: center; gap: var(--iaw-space-5); flex: 1 1 auto; min-width: 0; margin-left: auto; }
.iaw-header__info-item { display: flex; align-items: center; gap: .65em; min-width: 0; color: var(--iaw-slate-600); }
.iaw-header__info-icon {
  flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center;
  color: var(--iaw-accent); font-size: 2.1rem;
  transition: color var(--iaw-dur) var(--iaw-ease);
}
a.iaw-header__info-item:hover .iaw-header__info-icon { color: var(--iaw-navy-700); }
.iaw-header__info-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.iaw-header__info-text strong { font-size: var(--iaw-fs-100); font-weight: var(--iaw-fw-bold); text-transform: uppercase; letter-spacing: .04em; color: var(--iaw-muted); }
.iaw-header__info-text span { font-size: var(--iaw-fs-300); font-weight: var(--iaw-fw-medium); color: var(--iaw-navy-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.iaw-header__actions { flex: 0 0 auto; display: flex; align-items: center; }

/* ── Fila 2: menú + redes sociales + CTA (color de marca, fija) ───────
   Sombra sutil solo al hacer scroll (clase ".is-scrolled", añadida por
   JS en web.blade.php) para reforzar la separación con el contenido. */
.iaw-nav {
  position: relative; z-index: var(--iaw-z-header); color: #fff;
  /* Azul plano tomado tal cual del menú de referencia (clsperu.com:
     background-color:#204566 en su fila de navegación) — sin degradado
     ni animación, para que coincida con el original. */
  background: #204566;
  transition: box-shadow var(--iaw-dur) var(--iaw-ease);
}
.iaw-nav--sticky { position: sticky; top: 0; }
.iaw-nav.is-scrolled { box-shadow: 0 10px 30px rgba(16, 31, 43, .22); }
.iaw-nav__bar { display: flex; align-items: center; gap: var(--iaw-space-5); padding-block: var(--iaw-space-3); }
.iaw-nav__menu { display: flex; align-items: center; flex: 1 1 auto; }
.iaw-nav__list { display: flex; align-items: center; gap: var(--iaw-space-5); list-style: none; margin: 0; padding: 0; flex: 1 1 auto; }

/* Tamaño de fuente del menú (14px/600) tomado tal cual del header de
   referencia (clsperu.com): ".elementor-nav-menu .elementor-item{
   font-size:14px; font-weight:600 }". El resto del estilo (mayúsculas,
   subrayado de acento) es el propio de ingar. */
.iaw-scope .iaw-nav__link {
  display: inline-flex; align-items: center;
  font-family: var(--iaw-font-body); font-size: 14px;
  font-weight: 600; letter-spacing: .02em;
  color: var(--iaw-on-dark); padding: var(--iaw-space-2) var(--iaw-space-1);
  position: relative; white-space: nowrap; border-radius: var(--iaw-radius-sm);
  transition: color var(--iaw-dur) var(--iaw-ease), background var(--iaw-dur) var(--iaw-ease);
}
.iaw-nav__link-icon { margin-right: .55em; font-size: .95em; color: var(--iaw-accent); }
.iaw-nav__link::after {
  content: ""; position: absolute; left: var(--iaw-space-1); right: var(--iaw-space-1); bottom: -2px; height: 2px;
  background: var(--iaw-accent); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform var(--iaw-dur) var(--iaw-ease);
}
.iaw-scope .iaw-nav__link:hover,
.iaw-scope .iaw-nav__link.is-active { color: var(--iaw-white); }
.iaw-nav__link:hover::after,
.iaw-nav__link.is-active::after { transform: scaleX(1); }

/* Dropdown (Servicios ▾). Se abre con JS (ver web.blade.php), no con :hover
   puro — el modo (click/mouse over) es gestionable desde Configuración →
   Appearance, y el JS agrega un margen de tolerancia al cerrar en modo
   "mouse over" para que no se cierre de golpe al bajar el cursor hacia los
   enlaces (el problema clásico del hueco entre el trigger y el panel). */
.iaw-nav__item--has-children { position: static; }
.iaw-nav__caret { margin-left: .5em; font-size: .7em; color: rgba(255,255,255,.55); vertical-align: 1px; transition: transform var(--iaw-dur) var(--iaw-ease), color var(--iaw-dur) var(--iaw-ease); }
.iaw-nav__item--has-children.is-open .iaw-nav__caret { transform: translateY(1px) rotate(180deg); color: var(--iaw-accent); }

/* Mega menu (Panel admin → Menús). Ancho completo de la franja del menú
   —no del propio enlace— para que:
   1) Caiga siempre pegado a la base de la franja, sin importar qué tan alto
      sea el <li> disparador (se ancla a ".iaw-nav", que es el ancestro
      posicionado más cercano, no al <li>).
   2) Se extienda a todo lo ancho (como pidió el cliente), pero el CONTENIDO
      dentro queda acotado y alineado con el mismo padding del header, para
      no dejar un hueco vacío y desproporcionado con pocos enlaces. */
.iaw-mega-menu {
  position: absolute; top: 100%; left: 0; right: 0; width: 100%;
  background: linear-gradient(180deg, #fff 0%, var(--iaw-bg-soft) 100%);
  border-top: 1px solid var(--iaw-line);
  box-shadow: var(--iaw-shadow-lg);
  padding-block: var(--iaw-space-7);
  display: none; z-index: var(--iaw-z-dropdown);
  opacity: 0; transform: translateY(-6px); transition: opacity var(--iaw-dur) var(--iaw-ease), transform var(--iaw-dur) var(--iaw-ease);
}
.iaw-nav__item--has-children.is-open .iaw-mega-menu { display: block; opacity: 1; transform: translateY(0); }

/* Botón "✕" para cerrar el desplegable explícitamente — a la derecha del
   panel, útil sobre todo en modo "mouse over" (ahí el clic en el
   disparador navega en vez de cerrar). */
.iaw-mega-menu__close {
  position: absolute; top: var(--iaw-space-4); right: clamp(1.25rem, 3vw, 3rem); z-index: 1;
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
  background: var(--iaw-bg-alt); border: 1px solid var(--iaw-line); color: var(--iaw-slate-500);
  font-size: .85rem; cursor: pointer;
  transition: background var(--iaw-dur) var(--iaw-ease), color var(--iaw-dur) var(--iaw-ease), transform var(--iaw-dur) var(--iaw-ease);
}
.iaw-mega-menu__close:hover { background: var(--iaw-navy-700); border-color: var(--iaw-navy-700); color: var(--iaw-white); transform: rotate(90deg); }

.iaw-mega-menu__inner {
  width: 100%; max-width: var(--iaw-container); margin-inline: auto;
  padding-inline: clamp(1.25rem, 3vw, 3rem);
  display: grid; grid-template-columns: 280px 1fr; gap: var(--iaw-space-8); align-items: stretch;
}
.iaw-mega-menu__inner--no-image { grid-template-columns: 1fr; }
/* Imagen a la derecha: mismas columnas invertidas + orden visual invertido
   (el HTML no cambia, solo el acomodo dentro del grid). */
.iaw-mega-menu__inner--image-right { grid-template-columns: 1fr 280px; }
.iaw-mega-menu__inner--image-right .iaw-mega-menu__list  { order: 1; }
.iaw-mega-menu__inner--image-right .iaw-mega-menu__image { order: 2; }

.iaw-mega-menu__image { position: relative; display: block; border-radius: var(--iaw-radius); overflow: hidden; isolation: isolate; }
.iaw-mega-menu__image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(16,31,43,.65) 100%); }
.iaw-mega-menu__image img { width: 100%; height: 100%; min-height: 220px; object-fit: cover; display: block; transition: transform .5s var(--iaw-ease); }
.iaw-mega-menu__image:hover img { transform: scale(1.06); }

/* Número de columnas gestionable desde Panel admin → Menús (1 a 4). Cada
   columna usa "1fr" como techo (no un px fijo) para que, elija el admin
   el número de columnas que elija, la cuadrícula siempre rellene TODO el
   ancho disponible del área de columnas — nunca deja un hueco vacío junto
   a la imagen ni aprieta el texto en una columna más angosta de lo
   necesario. */
.iaw-mega-menu__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(160px, 1fr)); gap: var(--iaw-space-2) var(--iaw-space-5); align-content: start; }
.iaw-mega-menu__list--cols-1 { grid-template-columns: minmax(160px, 1fr); }
.iaw-mega-menu__list--cols-2 { grid-template-columns: repeat(2, minmax(160px, 1fr)); }
.iaw-mega-menu__list--cols-3 { grid-template-columns: repeat(3, minmax(160px, 1fr)); }
.iaw-mega-menu__list--cols-4 { grid-template-columns: repeat(4, minmax(150px, 1fr)); }
.iaw-mega-menu__list a { display: flex; align-items: flex-start; gap: var(--iaw-space-3); padding: var(--iaw-space-4); border-radius: var(--iaw-radius-sm); transition: background var(--iaw-dur) var(--iaw-ease); }
.iaw-mega-menu__list a:hover { background: var(--iaw-white); box-shadow: var(--iaw-shadow-sm); }
.iaw-mega-menu__item-icon {
  flex: 0 0 auto; margin-top: .1em; width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: var(--iaw-radius-sm); font-size: 1rem; text-align: center;
  background: var(--iaw-bg-alt); color: var(--iaw-accent); transition: background var(--iaw-dur) var(--iaw-ease), color var(--iaw-dur) var(--iaw-ease);
}
.iaw-mega-menu__list a:hover .iaw-mega-menu__item-icon { background: var(--iaw-navy-700); color: #fff; }
.iaw-mega-menu__item-label { display: block; font-family: var(--iaw-font-body); font-weight: var(--iaw-fw-bold); font-size: var(--iaw-fs-400); color: var(--iaw-navy-700); }
.iaw-mega-menu__item-desc { display: block; margin-top: .3em; font-size: var(--iaw-fs-200); color: var(--iaw-muted); line-height: var(--iaw-lh-snug); }

/* CTA de WhatsApp: último <li>, empujado al extremo derecho con margin-left:auto.
   El divisor sutil lo separa visualmente del menú, como una acción aparte. */
.iaw-nav__cta-item { margin-left: auto; position: relative; padding-left: var(--iaw-space-5); }
.iaw-nav__cta-item::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 22px; background: rgba(255,255,255,.22); }
.iaw-btn--sm { padding: .55em 1.2em; font-size: var(--iaw-fs-200); }

/* Redes sociales de la fila del menú (con TikTok, ver web-nav.blade.php) */
.iaw-nav__social { flex: 0 0 auto; display: flex; align-items: center; gap: var(--iaw-space-2); margin-left: var(--iaw-space-5); }
.iaw-nav__social a {
  width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(255,255,255,.12); color: #fff; font-size: .85rem;
  transition: background var(--iaw-dur) var(--iaw-ease), color var(--iaw-dur) var(--iaw-ease);
}
.iaw-nav__social a:hover { background: var(--iaw-accent); color: var(--iaw-white); }

/* Toggler móvil — vive en el header, junto al logo. */
.iaw-nav__toggle {
  display: none; flex: 0 0 auto;
  width: 40px; height: 40px; align-items: center; justify-content: center;
  background: var(--iaw-bg-alt); border: 1px solid var(--iaw-line); border-radius: var(--iaw-radius-sm);
  font-size: 1.15rem; color: var(--iaw-navy-700); cursor: pointer;
  transition: background var(--iaw-dur) var(--iaw-ease), border-color var(--iaw-dur) var(--iaw-ease);
}
.iaw-nav__toggle:hover { background: var(--iaw-navy-700); border-color: var(--iaw-navy-700); color: var(--iaw-white); }


/* == 08. HERO ========================================================= */
.iaw-hero          { position: relative; min-height: clamp(460px, 72vh, 700px); display: grid; align-items: center; color: var(--iaw-white); overflow: hidden; padding-block: var(--iaw-space-10); }
.iaw-hero__media   { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.iaw-hero__media img,
.iaw-hero__media video,
.iaw-hero__video   { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; border: 0; background: var(--iaw-navy-900); }
/* Textura sutil de puntos (decorativa, no afecta la legibilidad del texto).
   El slider va a 100% de ancho (full-bleed), sin marco ni márgenes. */
.iaw-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .35;
  background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px); background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 85% 70% at 50% 0%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 85% 70% at 50% 0%, #000 0%, transparent 78%);
}

/* Chip-badge del kicker (punto + texto, sobre fondo esmerilado) */
.iaw-kicker--chip {
  display: inline-flex; align-items: center; gap: .55em;
  padding: .45em 1em; border-radius: 999px; margin-bottom: var(--iaw-space-5);
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3);
  color: #fff; font-size: var(--iaw-fs-200); letter-spacing: var(--iaw-tracking);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.iaw-kicker--chip__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--iaw-accent); box-shadow: 0 0 0 3px rgba(200, 134, 47, .28); flex: 0 0 auto; }

/* Variante compacta: encabezado de página interior (ej. detalle de servicio)
   con video de fondo en bucle, en vez del hero completo del home. */
.iaw-hero--compact { min-height: clamp(320px, 48vh, 460px); padding-block: var(--iaw-space-8); }
.iaw-hero--compact .iaw-hero__title { font-size: var(--iaw-fs-800); }
.iaw-hero--compact .iaw-breadcrumb__trail { color: var(--iaw-on-dark); margin-bottom: var(--iaw-space-3); }
.iaw-hero--compact .iaw-breadcrumb__trail a { color: var(--iaw-accent); }
/* Velo sobre la foto: más claro que antes (menos oscuro), pero con una base
   pareja + un refuerzo hacia la izquierda para que el texto siga siendo
   legible sea cual sea la foto de fondo que se cargue desde Configuración. */
.iaw-hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(95deg, rgba(11,22,31,.68) 0%, rgba(11,22,31,.46) 42%, rgba(11,22,31,.22) 100%),
    linear-gradient(0deg, rgba(11,22,31,.4) 0%, rgba(11,22,31,0) 45%),
    rgba(11,22,31,.14);
}
.iaw-hero__inner   { position: relative; z-index: 1; max-width: 680px; }
.iaw-hero__inner .iaw-kicker { margin-bottom: var(--iaw-space-4); }
.iaw-hero .iaw-hero__title { color: #fff; font-size: var(--iaw-fs-800); text-shadow: 0 2px 20px rgba(0,0,0,.55); }
.iaw-hero .iaw-hero__sub   { color: #fff; opacity: .92; font-size: var(--iaw-fs-500); margin-top: var(--iaw-space-3); margin-bottom: var(--iaw-space-6); text-shadow: 0 1px 12px rgba(0,0,0,.5); }
.iaw-hero__actions { display: flex; flex-wrap: wrap; gap: var(--iaw-space-3); }
.iaw-hero__dots    { position: absolute; bottom: var(--iaw-space-5); left: 50%; transform: translateX(-50%); display: flex; gap: var(--iaw-space-2); z-index: 2; }
.iaw-hero__dot     { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.4); border: 0; cursor: pointer; }
.iaw-hero__dot.is-active { background: var(--iaw-accent); }

/* Slider de portada (Swiper) — gestionable desde Configuración → Slider del home.
   Cada .swiper-slide envuelve un .iaw-hero completo sin tocar sus estilos, así
   que la variante .iaw-hero--compact (encabezados internos) queda intacta. */
.iaw-hero-slider          { position: relative; }
.iaw-hero-swiper          { position: relative; }
/* Altura FIJA (no min-height): antes cada slide crecía según su propio
   contenido (un título más largo hacía ese slide más alto que los demás),
   así que al pasar de uno a otro el slider "saltaba" de tamaño y las fotos
   se veían mal recortadas de forma inconsistente. Con height fija, todos
   los slides miden exactamente lo mismo y la imagen (object-fit:cover) se
   adapta y recorta siempre igual — nunca al revés. */
.iaw-hero-swiper .iaw-hero { height: clamp(520px, 78vh, 640px); overflow: hidden; }
@media (min-width: 861px) {
  /* Escritorio: altura más baja que antes (era hasta 700px). */
  .iaw-hero-swiper .iaw-hero { height: clamp(420px, 56vh, 560px); }
}
/* Sin esto, arrastrar con el mouse desde encima del título/texto dispara la
   selección de texto nativa del navegador en vez del drag de Swiper (que
   "compite" con el gesto y hace que el slide no se mueva). Los botones
   siguen siendo clicables normalmente: solo se desactiva la selección de
   texto e imagen, no los eventos de puntero. */
.iaw-hero-swiper, .iaw-hero-swiper * {
  -webkit-user-select: none; -moz-user-select: none; user-select: none;
  -webkit-user-drag: none;
}
.iaw-hero-swiper .iaw-btn { cursor: pointer; }

.iaw-hero-swiper .swiper-pagination { bottom: var(--iaw-space-5); }
.iaw-hero-swiper .swiper-pagination-bullet { width: 8px; height: 5px; border-radius: 5px; background: rgba(255,255,255,.5); opacity: 1; transition: width var(--iaw-dur) var(--iaw-ease), background var(--iaw-dur) var(--iaw-ease); }
.iaw-hero-swiper .swiper-pagination-bullet-active { width: 26px; background: var(--iaw-accent); }

.iaw-hero-swiper__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.5);
  color: #fff; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background var(--iaw-dur) var(--iaw-ease), border-color var(--iaw-dur) var(--iaw-ease);
}
.iaw-hero-swiper__nav:hover { background: rgba(255,255,255,.32); border-color: #fff; }
.iaw-hero-swiper__nav--prev { left: var(--iaw-space-5); }
.iaw-hero-swiper__nav--next { right: var(--iaw-space-5); }
@media (max-width: 860px) {
  .iaw-hero-swiper__nav { display: none; }
}


/* == 09. SERVICIOS ===================================================
   Tarjeta al estilo del sitio de referencia (carval1.baulcode.com): zona
   superior tipo "media" a todo lo ancho (el icono en vez de una foto, ya
   que los servicios no tienen imagen propia) separada por una línea, y el
   enlace final convertido en una insignia circular con flecha que rota al
   pasar el cursor. Se comparte entre Servicios/Casos de éxito/Blog, así
   que el primer hijo que NO sea el icono recibe el margen superior que
   antes ponía el padding de la tarjeta (los que no llevan icono). */
.iaw-service-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: var(--iaw-space-2);
  padding: 0 0 var(--iaw-space-6);
  background: var(--iaw-white); border: 1px solid var(--iaw-line);
  border-radius: var(--iaw-radius); box-shadow: var(--iaw-shadow-sm);
  transition: transform var(--iaw-dur) var(--iaw-ease), box-shadow var(--iaw-dur) var(--iaw-ease), border-color var(--iaw-dur) var(--iaw-ease);
}
.iaw-service-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--iaw-shadow-lg);
  border-color: transparent;
}
.iaw-service-card > *:not(.iaw-service-card__icon) { margin-inline: var(--iaw-space-6); }
.iaw-service-card > :first-child:not(.iaw-service-card__icon) { margin-top: var(--iaw-space-6); }

.iaw-service-card__icon {
  width: 100%; height: 108px; margin: 0; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 35%, var(--iaw-white) 0%, var(--iaw-bg-alt) 75%);
  border-bottom: 1px solid var(--iaw-line);
  color: var(--iaw-navy-700); font-size: 1.9rem;
  transition: background var(--iaw-dur) var(--iaw-ease), color var(--iaw-dur) var(--iaw-ease);
}
.iaw-service-card__icon i { transition: transform var(--iaw-dur) var(--iaw-ease); }
.iaw-service-card:hover .iaw-service-card__icon { background: var(--iaw-navy-700); color: var(--iaw-white); }
.iaw-service-card:hover .iaw-service-card__icon i { transform: scale(1.12); }

.iaw-service-card__title { font-size: var(--iaw-fs-600); margin: 0; }
.iaw-service-card__more  {
  display: flex; align-items: center; justify-content: space-between; gap: .45em;
  margin-top: auto !important; margin-bottom: var(--iaw-space-6) !important; padding-top: var(--iaw-space-3);
  font-weight: var(--iaw-fw-bold); font-size: var(--iaw-fs-300);
  color: var(--iaw-navy-700); transition: color var(--iaw-dur) var(--iaw-ease);
}
.iaw-service-card__more i {
  width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--iaw-bg-alt); color: var(--iaw-navy-700); font-size: .8rem;
  transition: background var(--iaw-dur) var(--iaw-ease), color var(--iaw-dur) var(--iaw-ease), transform var(--iaw-dur) var(--iaw-ease);
}
.iaw-service-card:hover .iaw-service-card__more i { background: var(--iaw-navy-700); color: var(--iaw-white); transform: rotate(-45deg); }

/* Tarjeta tipo "producto" (igual a carval1.baulcode.com → "Productos
   destacados"): foto real en área cuadrada, insignia "Destacado" cuando
   is_featured, etiqueta de categoría, título, extracto (2 líneas) y un pie
   con dos botones (ver detalle + WhatsApp). Se usa en las 3 cuadrículas
   del home que sí tienen imagen propia — Servicios, Casos de éxito y Blog
   (ver partials/home/*.blade.php). Es una tarjeta distinta de
   ".iaw-service-card" a propósito: esa otra clase se sigue usando en los
   listados/detalle de Servicios, Casos de éxito y Blog (páginas internas),
   que no llevan imagen cuadrada ni botón de WhatsApp por tarjeta. */
.iaw-product-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--iaw-white); border: 1px solid var(--iaw-line);
  border-radius: var(--iaw-radius); box-shadow: var(--iaw-shadow-sm);
  transition: transform var(--iaw-dur) var(--iaw-ease), box-shadow var(--iaw-dur) var(--iaw-ease), border-color var(--iaw-dur) var(--iaw-ease);
}
.iaw-product-card:hover { transform: translateY(-5px); box-shadow: var(--iaw-shadow-lg); border-color: transparent; }

.iaw-product-card__media {
  position: relative; display: block; aspect-ratio: 4 / 4.6; overflow: hidden;
  background: radial-gradient(circle at 50% 42%, var(--iaw-white) 0%, var(--iaw-bg-alt) 78%);
}
.iaw-product-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--iaw-ease); }
.iaw-product-card:hover .iaw-product-card__media img { transform: scale(1.06); }
.iaw-product-card__badge {
  position: absolute; top: 12px; left: 12px; z-index: 1;
  background: var(--iaw-accent); color: var(--iaw-white); font-size: .68rem; font-weight: var(--iaw-fw-bold);
  letter-spacing: .06em; text-transform: uppercase; padding: .3em .75em; border-radius: 999px;
}

.iaw-product-card__body { display: flex; flex-direction: column; flex: 1; padding: var(--iaw-space-5); border-top: 1px solid var(--iaw-line); }
.iaw-product-card__cat {
  display: inline-flex; align-items: center; gap: .4em; align-self: flex-start; max-width: 100%;
  font-size: var(--iaw-fs-100); font-weight: var(--iaw-fw-medium); color: var(--iaw-muted); margin-bottom: var(--iaw-space-2);
}
.iaw-product-card__cat i { font-size: .85em; color: var(--iaw-accent); }
.iaw-product-card__cat span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iaw-product-card__title { font-size: var(--iaw-fs-500); line-height: 1.3; margin: 0 0 var(--iaw-space-2); }
.iaw-product-card__title a { color: var(--iaw-ink); }
.iaw-product-card__title a:hover { color: var(--iaw-navy-700); }
.iaw-product-card__excerpt {
  font-size: var(--iaw-fs-300); color: var(--iaw-muted); line-height: var(--iaw-lh-snug); margin: 0 0 var(--iaw-space-4);
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.iaw-product-card__foot { margin-top: auto; display: flex; gap: var(--iaw-space-2); }
.iaw-product-card__foot .iaw-btn { flex: 1; padding: .7em .9em; font-size: var(--iaw-fs-200); }
.iaw-product-card__foot .iaw-btn--wa { flex: 0 0 44px; width: 44px; height: 44px; padding: 0; font-size: 1.1rem; }


/* == 10. CONTADORES (10 / 200 / 100) ================================ */
.iaw-stats-section { position: relative; overflow: hidden; isolation: isolate; }
.iaw-section--dark.iaw-stats-section { background: radial-gradient(130% 160% at 12% -10%, var(--iaw-navy-600) 0%, var(--iaw-navy-700) 45%, var(--iaw-navy-800) 100%); }
/* Misma textura de puntos que el hero/mapa, para que la sección no se vea
   como un bloque de color plano. */
.iaw-stats-section::before {
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: .3; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px); background-size: 30px 30px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 0%, transparent 78%);
}
.iaw-stats-section .iaw-container { position: relative; z-index: 1; }
/* Kicker ampliado a modo de título de sección (en esta sección es el único
   encabezado), con el mismo punto decorativo que el chip del hero. */
.iaw-stats-section .iaw-kicker {
  display: inline-flex; align-items: center; gap: .6em;
  font-size: var(--iaw-fs-700); font-family: var(--iaw-font-display); font-weight: 700;
  text-transform: none; letter-spacing: normal; margin-bottom: var(--iaw-space-8);
}
.iaw-stats-section .iaw-kicker::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--iaw-accent);
  box-shadow: 0 0 0 4px rgba(200,134,47,.28); flex: 0 0 auto;
}

.iaw-stats        { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--iaw-space-6); text-align: center; }
.iaw-stat         { border-left: 1px solid rgba(255,255,255,.14); padding-left: var(--iaw-space-6); transition: transform var(--iaw-dur) var(--iaw-ease); }
.iaw-stat:first-child { border-left: 0; padding-left: 0; }
.iaw-stat:hover { transform: translateY(-4px); }
.iaw-stat__icon {
  display: inline-grid; place-items: center; width: 84px; height: 84px; margin-bottom: var(--iaw-space-4);
  border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(200,134,47,.28), rgba(200,134,47,.08) 70%);
  border: 1px solid rgba(200,134,47,.35); box-shadow: 0 0 30px -6px rgba(200,134,47,.5);
  font-size: 2.5rem; color: var(--iaw-accent);
}
.iaw-stat__num    { font-family: var(--iaw-font-display); font-size: var(--iaw-fs-900); line-height: 1; color: var(--iaw-white); }
.iaw-stat__label  { margin-top: var(--iaw-space-2); text-transform: uppercase; letter-spacing: var(--iaw-tracking); font-size: var(--iaw-fs-200); color: var(--iaw-on-dark); }
.iaw-stat__num::after { content: attr(data-suffix); }


/* == 11. PROYECTOS (tabs + grid) ================================== */
.iaw-filter       { display: flex; flex-wrap: wrap; gap: var(--iaw-space-2); margin-bottom: var(--iaw-space-6); }
.iaw-filter__btn  { padding: .5em 1.1em; font-size: var(--iaw-fs-300); border: 1px solid var(--iaw-line); border-radius: 999px; background: var(--iaw-white); color: var(--iaw-slate-600); cursor: pointer; }
.iaw-filter__btn.is-active { background: var(--iaw-navy-700); color: var(--iaw-white); border-color: var(--iaw-navy-700); }

/* Tabs de categorías de proyecto */
.iaw-tabs        { display: flex; gap: var(--iaw-space-1); border-bottom: 2px solid var(--iaw-line); margin-bottom: var(--iaw-space-8); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.iaw-tabs::-webkit-scrollbar { display: none; }
.iaw-tab {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--iaw-space-2);
  padding: var(--iaw-space-4) var(--iaw-space-5);
  font-family: var(--iaw-font-body); font-size: var(--iaw-fs-300); font-weight: var(--iaw-fw-medium);
  letter-spacing: .02em; color: var(--iaw-slate-500); background: none; border: 0;
  border-bottom: 2px solid transparent; margin-bottom: -2px; cursor: pointer; white-space: nowrap;
  transition: color var(--iaw-dur) var(--iaw-ease), border-color var(--iaw-dur) var(--iaw-ease);
}
.iaw-tab:hover        { color: var(--iaw-navy-700); }
.iaw-tab.is-active    { color: var(--iaw-navy-700); border-bottom-color: var(--iaw-accent); }
.iaw-tab__count       { font-size: var(--iaw-fs-100); font-weight: var(--iaw-fw-bold); line-height: 1; padding: .2em .5em; border-radius: 999px; background: var(--iaw-bg-alt); color: var(--iaw-slate-500); }
.iaw-tab.is-active .iaw-tab__count { background: var(--iaw-navy-700); color: var(--iaw-white); }

.iaw-tabpane      { display: none; }
.iaw-tabpane.is-active { display: block; animation: iaw-fade var(--iaw-dur) var(--iaw-ease); }
@keyframes iaw-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.iaw-project-card { position: relative; border-radius: var(--iaw-radius); overflow: hidden; box-shadow: var(--iaw-shadow-sm); }
.iaw-project-card__img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; transition: transform .5s var(--iaw-ease); }
.iaw-project-card:hover .iaw-project-card__img { transform: scale(1.05); }
.iaw-project-card__body {
  position: absolute; inset-inline: 0; bottom: 0;
  padding: var(--iaw-space-6) var(--iaw-space-5) var(--iaw-space-4);
  background: linear-gradient(180deg, transparent 0%, rgba(11,22,31,.55) 35%, rgba(11,22,31,.95) 100%);
  color: var(--iaw-white);
}
.iaw-project-card__tag   { display: block; font-size: var(--iaw-fs-100); font-weight: var(--iaw-fw-bold); text-transform: uppercase; letter-spacing: var(--iaw-tracking); color: var(--iaw-accent); margin-bottom: var(--iaw-space-2); }
.iaw-project-card__title { font-family: var(--iaw-font-display); font-size: var(--iaw-fs-500); line-height: 1.2; color: var(--iaw-white); margin: 0 0 var(--iaw-space-1); }
.iaw-project-card__meta  { display: block; font-size: var(--iaw-fs-200); color: var(--iaw-on-dark); }


/* == 12. CASOS DE ÉXITO ============================================ */
.iaw-case-card {
  display: grid; grid-template-columns: 260px 1fr; gap: var(--iaw-space-6);
  padding: var(--iaw-space-6); background: var(--iaw-white);
  border: 1px solid var(--iaw-line); border-radius: var(--iaw-radius);
}
.iaw-case-card__media img { border-radius: var(--iaw-radius-sm); aspect-ratio: 1; object-fit: cover; }
.iaw-case-card__client {
  display: inline-flex; align-items: center; gap: .5em; align-self: flex-start;
  padding: .35em .9em; border-radius: 999px; background: var(--iaw-bg-alt);
  font-size: var(--iaw-fs-100); font-weight: var(--iaw-fw-bold); text-transform: uppercase;
  letter-spacing: var(--iaw-tracking); color: var(--iaw-navy-600);
}
.iaw-case-card__client::before { content: "\f0b1"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--iaw-accent); font-size: .9em; }
.iaw-case-card__title  { font-size: var(--iaw-fs-600); margin: var(--iaw-space-1) 0 var(--iaw-space-2); }

/* Detalle: bloques Reto / Solución / Resultados */
.iaw-case-blocks { display: grid; gap: var(--iaw-space-5); grid-template-columns: repeat(3, 1fr); }
.iaw-case-block  { padding: var(--iaw-space-5); background: var(--iaw-bg-alt); border-radius: var(--iaw-radius); border-top: 3px solid var(--iaw-navy-700); }
.iaw-case-block--result { border-top-color: var(--iaw-accent); }
.iaw-case-block__label { font-family: var(--iaw-font-display); font-size: var(--iaw-fs-600); color: var(--iaw-slate-600); }


/* == 13. CLIENTES (carrusel de logos: auto-scroll + arrastrable) ==== */
.iaw-clients          { overflow: hidden; padding-block: var(--iaw-space-8); }
.iaw-clients .iaw-kicker { font-size: var(--iaw-fs-600); margin-bottom: var(--iaw-space-5); }
.iaw-clients .iaw-section-head { margin-bottom: var(--iaw-space-6); }
.iaw-marquee-viewport { overflow: hidden; cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.iaw-marquee-viewport.is-dragging { cursor: grabbing; }
.iaw-marquee          { display: flex; gap: var(--iaw-space-8); width: max-content; will-change: transform; }
.iaw-marquee__item    { flex: 0 0 auto; display: flex; align-items: center; height: 190px; }
.iaw-marquee__item img { max-height: 165px; max-width: 320px; width: auto; -webkit-user-drag: none; user-select: none; pointer-events: none; filter: grayscale(1); opacity: .6; transition: filter var(--iaw-dur), opacity var(--iaw-dur); }
.iaw-marquee-viewport:hover .iaw-marquee__item img { opacity: .8; }


/* Cobertura — mapa interactivo de México (60% / 40%) + lista de estados.
   Los estados "cubiertos" se gestionan desde Panel admin → Cobertura
   (tabla coverage_states); ver partials/mexico-map.blade.php para la
   geometría del SVG y layouts/web.blade.php para el JS de hover/tooltip. */
.iaw-coverage__panel  { display: grid; grid-template-columns: 6fr 4fr; gap: var(--iaw-space-10); align-items: center; }
.iaw-coverage__media  { position: relative; }
.iaw-coverage__media::before {
  content: ""; position: absolute; inset: 6% -8% -8% 6%; z-index: 0; border-radius: var(--iaw-radius-lg);
  background: var(--iaw-gradient); opacity: .35;
}

.iaw-mexico-map__wrap {
  position: relative; z-index: 1; overflow: hidden; isolation: isolate;
  background: linear-gradient(160deg, var(--iaw-navy-800) 0%, var(--iaw-navy-900) 100%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--iaw-radius-lg); box-shadow: var(--iaw-shadow-lg);
  padding: var(--iaw-space-6);
}
/* Textura + resplandor de fondo (decorativos, el mismo lenguaje visual que
   el hero) para que el panel no se vea como un bloque de color plano. */
.iaw-mexico-map__wrap::before {
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: .5;
  background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 75% 65% at 50% 40%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 40%, #000 0%, transparent 78%);
}
.iaw-mexico-map__wrap::after {
  content: ""; position: absolute; z-index: 0; width: 70%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(200,134,47,.16) 0%, transparent 70%);
  top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none;
}
.iaw-mexico-map { position: relative; z-index: 1; display: block; width: 100%; height: auto; overflow: visible; }
.iaw-map__state {
  fill: var(--iaw-navy-600); stroke: rgba(255,255,255,.35); stroke-width: 1; stroke-linejoin: round;
  cursor: pointer; outline: none;
  transition: fill var(--iaw-dur) var(--iaw-ease), stroke var(--iaw-dur) var(--iaw-ease), stroke-width var(--iaw-dur) var(--iaw-ease), filter var(--iaw-dur) var(--iaw-ease);
}
.iaw-map__state:hover { fill: var(--iaw-navy-500); }
.iaw-map__state.is-covered {
  fill: var(--iaw-accent); stroke: rgba(255,255,255,.65);
  filter: drop-shadow(0 0 5px rgba(200,134,47,.65));
}
.iaw-map__state.is-covered:hover,
.iaw-map__state.is-covered.is-linked,
.iaw-map__state.is-covered:focus-visible {
  fill: #dba24b; stroke: var(--iaw-white);
  filter: drop-shadow(0 0 9px rgba(222,163,61,.9));
}
.iaw-map__state:focus-visible { stroke: var(--iaw-white); stroke-width: 1.5; }

/* Marcadores (pin + anillo que late) sobre el centro de cada estado
   cubierto — posición calculada en tiempo real desde la geometría del
   propio SVG (ver web.blade.php), así que se ajustan solos si cambia la
   cobertura desde el panel admin. */
.iaw-map__marker { pointer-events: none; }
.iaw-map__marker-pulse {
  /* Blanco, no dorado: el anillo late sobre un estado YA relleno de
     dorado — con stroke dorado se perdía de vista contra su propio fondo. */
  fill: none; stroke: var(--iaw-white); stroke-width: 1.5; opacity: .9;
  transform-box: fill-box; transform-origin: center;
  animation: iaw-marker-pulse 2.6s var(--iaw-ease) infinite;
}
.iaw-map__marker-dot { fill: var(--iaw-white); stroke: var(--iaw-accent-600); stroke-width: 1; }
@keyframes iaw-marker-pulse {
  0%   { transform: scale(.4); opacity: .9; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* Leyenda bajo el mapa */
.iaw-mexico-map__legend { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: var(--iaw-space-5); margin-top: var(--iaw-space-5); padding-top: var(--iaw-space-5); border-top: 1px solid rgba(255,255,255,.1); }
.iaw-mexico-map__legend-item { display: inline-flex; align-items: center; gap: .55em; font-size: var(--iaw-fs-200); color: var(--iaw-on-dark); }
.iaw-mexico-map__legend-swatch { width: 14px; height: 14px; border-radius: 4px; flex: 0 0 auto; }
.iaw-mexico-map__legend-swatch--covered { background: var(--iaw-accent); box-shadow: 0 0 6px rgba(200,134,47,.7); }
.iaw-mexico-map__legend-swatch--other   { background: var(--iaw-navy-600); border: 1px solid rgba(255,255,255,.3); }

.iaw-mexico-map__tooltip {
  position: absolute; z-index: 2; left: 0; top: 0; pointer-events: none;
  background: var(--iaw-white); color: var(--iaw-navy-700); font-size: var(--iaw-fs-200); font-weight: var(--iaw-fw-bold);
  padding: .4em .8em; border-radius: var(--iaw-radius-sm); box-shadow: var(--iaw-shadow);
  opacity: 0; transform: translate(-50%, -100%) translateY(-10px); transition: opacity .15s var(--iaw-ease);
  white-space: nowrap;
}
.iaw-mexico-map__tooltip::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--iaw-white);
}
.iaw-mexico-map__tooltip.is-visible { opacity: 1; }

.iaw-coverage__content .iaw-title { margin-bottom: var(--iaw-space-5); }
.iaw-coverage__states { display: flex; flex-wrap: wrap; gap: var(--iaw-space-2); margin-bottom: var(--iaw-space-6); }
.iaw-coverage__state  {
  display: inline-flex; align-items: center; gap: .45em; font-size: var(--iaw-fs-200); font-weight: var(--iaw-fw-medium);
  letter-spacing: .02em; padding: .5em 1.1em; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); color: var(--iaw-white);
  cursor: default; transition: background var(--iaw-dur) var(--iaw-ease), border-color var(--iaw-dur) var(--iaw-ease);
}
.iaw-coverage__state.is-linked { background: rgba(200,134,47,.22); border-color: var(--iaw-accent); }
.iaw-coverage__state i { color: var(--iaw-accent); font-size: .85em; }
.iaw-coverage__actions { display: flex; flex-wrap: wrap; gap: var(--iaw-space-3); }


/* == 14. TESTIMONIOS ============================================= */
.iaw-quote        { padding: var(--iaw-space-6); background: var(--iaw-white); border: 1px solid var(--iaw-line); border-radius: var(--iaw-radius); }
.iaw-quote__text  { font-size: var(--iaw-fs-500); color: var(--iaw-slate-600); }
.iaw-quote__author { display: flex; align-items: center; gap: var(--iaw-space-3); margin-top: var(--iaw-space-4); }
.iaw-quote__author img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }


/* == 15. VIDEO ================================================== */
.iaw-video        { position: relative; border-radius: var(--iaw-radius-lg); overflow: hidden; box-shadow: var(--iaw-shadow-lg); }
.iaw-video__frame { aspect-ratio: 16 / 9; width: 100%; border: 0; display: block; }
.iaw-video__frame[poster] { object-fit: cover; background: #000; }

/* Galería de servicio (lightGallery) */
.iaw-gallery       { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--iaw-space-3); }
.iaw-gallery__item { display: block; overflow: hidden; border-radius: var(--iaw-radius-sm); cursor: zoom-in; background: var(--iaw-bg-alt); aspect-ratio: 4 / 3; }
.iaw-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--iaw-ease); }
.iaw-gallery__item:hover img { transform: scale(1.06); }

/* Cuerpo de la página de servicio: listas reales de trámites, etc. */
.iaw-service-body ul { list-style: none; padding: 0; display: grid; gap: var(--iaw-space-2); grid-template-columns: repeat(2, 1fr); }
.iaw-service-body ul li { position: relative; padding-left: 1.6rem; }
.iaw-service-body ul li::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; left: 0; top: .15em; color: var(--iaw-accent); font-size: .8em; }
.iaw-service-body h2, .iaw-service-body h3 { font-family: var(--iaw-font-display); color: var(--iaw-slate-600); }
.iaw-service-body .iaw-service-body__closing {
  margin-top: var(--iaw-space-6);
  padding: var(--iaw-space-5);
  border-left: 3px solid var(--iaw-accent);
  background: var(--iaw-bg-alt);
  font-family: var(--iaw-font-display);
  font-size: var(--iaw-fs-500);
  color: var(--iaw-slate-600);
  border-radius: 0 var(--iaw-radius-sm) var(--iaw-radius-sm) 0;
}


/* == 16. BREADCRUMB ============================================ */
.iaw-breadcrumb        { background: var(--iaw-navy-700); color: var(--iaw-on-dark); padding-block: var(--iaw-space-6); }
.iaw-breadcrumb h1     { color: var(--iaw-white); margin: 0 0 var(--iaw-space-2); }
.iaw-breadcrumb__trail { font-size: var(--iaw-fs-200); display: flex; gap: var(--iaw-space-2); }
.iaw-breadcrumb__trail a { color: var(--iaw-accent); }


/* == 17. CONTACTO ============================================= */
.iaw-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--iaw-space-8); }
.iaw-field        { display: flex; flex-direction: column; gap: var(--iaw-space-2); margin-bottom: var(--iaw-space-4); }
.iaw-field label  { font-size: var(--iaw-fs-200); font-weight: var(--iaw-fw-medium); text-transform: uppercase; letter-spacing: .03em; color: var(--iaw-slate-500); }
.iaw-field input, .iaw-field textarea, .iaw-field select {
  font: inherit; padding: .75em 1em; color: var(--iaw-ink);
  background: var(--iaw-white); border: 1px solid var(--iaw-line); border-radius: var(--iaw-radius-sm);
}
.iaw-field input:focus, .iaw-field textarea:focus { border-color: var(--iaw-navy-500); box-shadow: var(--iaw-ring); outline: 0; }
.iaw-field--error input, .iaw-field--error textarea { border-color: var(--iaw-error); }
.iaw-field__msg   { font-size: var(--iaw-fs-200); color: var(--iaw-error); }
.iaw-contact-info li { display: flex; gap: var(--iaw-space-3); padding-block: var(--iaw-space-3); border-bottom: 1px solid var(--iaw-line); }
.iaw-map iframe   { width: 100%; min-height: 320px; border: 0; border-radius: var(--iaw-radius); }


/* == 18. FOOTER ============================================== */
.iaw-footer        { position: relative; background: var(--iaw-navy-900); color: var(--iaw-on-dark); padding-block: var(--iaw-space-10) var(--iaw-space-5); }
.iaw-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--iaw-navy-600), var(--iaw-slate-400), var(--iaw-accent)); }
.iaw-footer a      { color: var(--iaw-on-dark); transition: color var(--iaw-dur) var(--iaw-ease); }
.iaw-footer a:hover { color: var(--iaw-white); }

/* Banda CTA que se solapa con la sección anterior (como una tarjeta
   flotante) — reutiliza el mismo WhatsApp/Contacto que ya aparece en el
   header y el hero, sin texto de negocio nuevo. */
.iaw-footer__cta      { position: relative; z-index: 1; margin-top: calc(-1 * var(--iaw-space-10)); margin-bottom: var(--iaw-space-8); }
.iaw-footer__cta-card {
  display: flex; align-items: center; justify-content: space-between; gap: var(--iaw-space-6); flex-wrap: wrap;
  background: var(--iaw-gradient); border-radius: var(--iaw-radius-lg); padding: var(--iaw-space-7) var(--iaw-space-8);
  box-shadow: var(--iaw-shadow-lg); color: #fff;
}
.iaw-footer__cta-card h2 { color: #fff; margin: 0 0 var(--iaw-space-2); font-size: var(--iaw-fs-700); }
.iaw-footer__cta-card p  { margin: 0; color: rgba(255,255,255,.82); max-width: 46ch; }
.iaw-footer__cta-actions { display: flex; gap: var(--iaw-space-3); flex-wrap: wrap; }

.iaw-footer__cols  { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: var(--iaw-space-8); align-items: start; }
.iaw-footer__cols > div:not(:first-child) { border-left: 1px solid rgba(255,255,255,.08); padding-left: var(--iaw-space-8); }
.iaw-footer__brand p { max-width: 34ch; font-size: var(--iaw-fs-300); line-height: var(--iaw-lh-base); opacity: .85; margin: var(--iaw-space-4) 0; }
.iaw-footer__title { position: relative; font-family: var(--iaw-font-body); font-size: var(--iaw-fs-100); font-weight: var(--iaw-fw-bold); text-transform: uppercase; letter-spacing: var(--iaw-tracking); color: var(--iaw-white); margin-bottom: var(--iaw-space-5); padding-bottom: var(--iaw-space-3); }
.iaw-footer__title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 26px; height: 2px; background: var(--iaw-accent); }
/* ".iaw-footer__logo" (1 clase) por sí sola pierde el "height" contra el
   reset ".iaw-scope img{height:auto}" (sección 03: 1 clase + 1 etiqueta,
   más específico) — el logo se renderizaba a su tamaño natural en vez de
   var(--iaw-logo-h-footer). ".iaw-scope .iaw-footer__logo" (2 clases) gana. */
.iaw-scope .iaw-footer__logo { height: var(--iaw-logo-h-footer); width: auto; filter: brightness(0) invert(1); }
.iaw-footer__list  { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--iaw-space-3); font-size: var(--iaw-fs-300); }
.iaw-footer__list a { position: relative; }
.iaw-footer__list a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 1px; background: var(--iaw-accent); transition: width var(--iaw-dur) var(--iaw-ease); }
.iaw-footer__list a:hover::after { width: 100%; }
.iaw-footer__contact { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--iaw-space-3); font-size: var(--iaw-fs-300); }
.iaw-footer__contact li { display: grid; grid-template-columns: 20px 1fr; gap: var(--iaw-space-2); align-items: start; }
.iaw-footer__contact i { color: var(--iaw-accent); margin-top: .2em; }
.iaw-footer__bottom { margin-top: var(--iaw-space-8); padding-top: var(--iaw-space-5); border-top: 1px solid rgba(255,255,255,.12); font-size: var(--iaw-fs-200); opacity: .8; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--iaw-space-3); }
.iaw-social        { display: flex; gap: var(--iaw-space-2); margin-top: var(--iaw-space-5); }
.iaw-social a      { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.08); font-size: .9rem; }
.iaw-social a:hover { background: var(--iaw-accent); color: var(--iaw-white); transform: translateY(-2px); }


/* == 19. FLOTANTES ========================================= */
/* Widget de WhatsApp: botón flotante con anillo de pulso + tarjeta de chat
   expandible (avatar, saludo configurable desde Configuración → General,
   botón "Iniciar chat" con el enlace real a wa.me). El contenedor no
   intercepta clics salvo el botón y la tarjeta abierta, para no tapar el
   contenido que queda detrás de su alto total. */
.iaw-wa { position: fixed; right: 20px; bottom: 20px; z-index: var(--iaw-z-float); display: flex; flex-direction: column; align-items: flex-end; gap: var(--iaw-space-4); pointer-events: none; }
.iaw-wa-float, .iaw-wa__card.is-open { pointer-events: auto; }
.iaw-wa-float {
  position: relative; width: 56px; height: 56px; border-radius: 50%; border: 0;
  background: var(--iaw-wa); color: #fff; display: grid; place-items: center; font-size: 1.5rem;
  box-shadow: var(--iaw-shadow); cursor: pointer; transition: transform var(--iaw-dur) var(--iaw-ease), background var(--iaw-dur) var(--iaw-ease);
}
.iaw-wa-float:hover { background: var(--iaw-wa-600); color: #fff; transform: scale(1.06); }
.iaw-wa-float::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--iaw-wa); z-index: -1; animation: iaw-wa-pulse 2.2s ease-out infinite; }
@keyframes iaw-wa-pulse { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.7); opacity: 0; } }

.iaw-wa__card {
  width: min(320px, calc(100vw - 48px)); background: var(--iaw-white); border-radius: var(--iaw-radius);
  overflow: hidden; box-shadow: var(--iaw-shadow-lg); transform-origin: bottom right;
  opacity: 0; visibility: hidden; transform: translateY(10px) scale(.96);
  transition: opacity .25s var(--iaw-ease), transform .25s var(--iaw-ease), visibility .25s;
}
.iaw-wa__card.is-open { opacity: 1; visibility: visible; transform: none; }
.iaw-wa__head { background: var(--iaw-navy-800); color: #fff; padding: var(--iaw-space-4); display: flex; align-items: center; gap: var(--iaw-space-3); }
.iaw-wa__avatar { position: relative; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.16); display: grid; place-items: center; font-size: 1.1rem; flex: 0 0 auto; }
.iaw-wa__avatar::after { content: ""; position: absolute; right: 0; bottom: 0; width: 10px; height: 10px; border-radius: 50%; background: #4ADE80; border: 2px solid var(--iaw-navy-800); }
.iaw-wa__head strong { display: block; font-size: var(--iaw-fs-300); }
.iaw-wa__head small  { opacity: .78; font-size: var(--iaw-fs-100); }
.iaw-wa__close { margin-left: auto; background: none; border: 0; color: #fff; opacity: .8; font-size: 1rem; cursor: pointer; }
.iaw-wa__close:hover { opacity: 1; }
.iaw-wa__body   { padding: var(--iaw-space-5) var(--iaw-space-4); background: var(--iaw-bg-alt); }
.iaw-wa__bubble { background: var(--iaw-white); border-radius: 0 var(--iaw-radius-sm) var(--iaw-radius-sm) var(--iaw-radius-sm); padding: var(--iaw-space-3) var(--iaw-space-4); font-size: var(--iaw-fs-300); line-height: 1.5; color: var(--iaw-ink); box-shadow: var(--iaw-shadow-sm); max-width: 92%; }
.iaw-wa__foot   { padding: var(--iaw-space-2) var(--iaw-space-4) var(--iaw-space-4); }
.iaw-wa__foot .iaw-btn { width: 100%; }

/* En el mismo lado que el widget de WhatsApp pero por encima de él en
   reposo; si la tarjeta de chat se abre, se oculta un momento (ver JS en
   web.blade.php) para no quedar tapado/chocar con la tarjeta expandida. */
.iaw-totop { position: fixed; right: 20px; bottom: 88px; z-index: var(--iaw-z-float); width: 42px; height: 42px; border-radius: var(--iaw-radius-sm); background: var(--iaw-navy-700); color: #fff; border: 0; display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity var(--iaw-dur); }
.iaw-totop.is-visible { opacity: 1; pointer-events: auto; }
.iaw-totop.iaw-totop--hidden { opacity: 0 !important; pointer-events: none !important; }


/* == 20. UTILIDADES ======================================= */
/* Shims de espaciado estilo Bootstrap 4 (mr-/ml-) y 5 (me-/ms-) usados en las plantillas */
.mr-1,.me-1{margin-right:.25rem}.mr-2,.me-2{margin-right:.5rem}.mr-3,.me-3{margin-right:1rem}
.ml-1,.ms-1{margin-left:.25rem}.ml-2,.ms-2{margin-left:.5rem}.ml-3,.ms-3{margin-left:1rem}
.mt-2{margin-top:.5rem}.mt-3{margin-top:1rem}.mt-4{margin-top:1.5rem}.mb-0{margin-bottom:0}
.iaw-mt-0 { margin-top: 0 !important; }
.iaw-text-center { text-align: center; }
.iaw-text-muted  { color: var(--iaw-muted); }
.iaw-bg-alt      { background: var(--iaw-bg-alt); }
.iaw-stack > * + * { margin-top: var(--iaw-space-4); }
.iaw-hide { display: none !important; }
.iaw-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }


/* == 21. RESPONSIVE ====================================== */
@media (max-width: 1024px) {
  .iaw-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .iaw-footer__cols { grid-template-columns: repeat(2, 1fr); row-gap: var(--iaw-space-8); }
  .iaw-footer__cols > div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .iaw-case-card { grid-template-columns: 1fr; }
  .iaw-case-blocks { grid-template-columns: 1fr; }
  .iaw-gallery { grid-template-columns: repeat(3, 1fr); }
}
/* Header/nav: el punto de quiebre es más ancho (1100px) que el resto del
   sitio (860px) porque el menú tiene 7 enlaces + botón de WhatsApp — a
   860px ya no entran en una sola fila sin el menú hamburguesa y desbordan. */
@media (max-width: 1100px) {
  /* Fila 1: la razón social y las columnas de teléfono/dirección/email no
     caben junto al logo y la hamburguesa en un ancho tan angosto — quedan
     accesibles igual en el pie de página. Solo se conserva el logo. */
  .iaw-header__name, .iaw-header__info { display: none; }
  .iaw-header__row1 { justify-content: space-between; }

  /* Header: logo más pequeño; el menú de escritorio se oculta y se reemplaza
     por el botón de hamburguesa + el cajón desplegable (".iaw-nav__menu"). */
  .iaw-header__brand img { height: 64px; }
  .iaw-nav__toggle { display: inline-flex; }

  /* La franja del menú no tiene contenido visible en móvil (el cajón es
     ".iaw-nav__menu", posicionado absoluto, fuera del flujo) — se colapsa
     a 0 para no dejar una franja de color vacía entre el header y la página. */
  .iaw-nav__bar { padding-block: 0; min-height: 0; }
  .iaw-nav__menu {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; inset-inline: 0; top: 100%;
    max-height: 0; opacity: 0; overflow-y: auto; overflow-x: hidden;
    background: var(--iaw-bg-alt); border-top: 0 solid var(--iaw-line);
    padding-inline: var(--iaw-space-4);
    box-shadow: var(--iaw-shadow-lg);
    transition: max-height .35s var(--iaw-ease), opacity .28s var(--iaw-ease), border-top-width .35s var(--iaw-ease);
  }
  .iaw-nav__menu.is-open {
    display: flex; max-height: calc(100vh - 100%); opacity: 1;
    padding-block: var(--iaw-space-4);
    border-top-width: 1px;
  }
  .iaw-nav__list { flex-direction: column; align-items: stretch; gap: 0; }

  /* Enlaces de primer nivel como un "list-group" de Bootstrap 5: filas
     planas que comparten un único borde (se solapan con margin-top:-1px
     para no duplicar la línea entre renglones), redondeadas solo en la
     primera y la última fila real (".iaw-nav__item--last", ver
     web-nav.blade.php — el <li> del CTA de WhatsApp va aparte, así que no
     puede usarse ":last-child" para esto). Sin sombra ni radio por ítem. */
  .iaw-scope .iaw-nav__link {
    display: flex; align-items: center; justify-content: space-between; gap: var(--iaw-space-2);
    padding: var(--iaw-space-4); margin-top: -1px; background: var(--iaw-white);
    border: 1px solid var(--iaw-line); border-radius: 0;
    color: var(--iaw-slate-600); font-weight: var(--iaw-fw-bold); letter-spacing: .02em;
    transition: background .15s var(--iaw-ease), border-color .15s var(--iaw-ease), color .15s var(--iaw-ease);
  }
  .iaw-nav__list > li:first-child > .iaw-nav__link {
    margin-top: 0; border-top-left-radius: var(--iaw-radius); border-top-right-radius: var(--iaw-radius);
  }
  .iaw-nav__list > li.iaw-nav__item--last > .iaw-nav__link {
    border-bottom-left-radius: var(--iaw-radius); border-bottom-right-radius: var(--iaw-radius);
  }
  .iaw-nav__link::after { display: none; } /* se quita el subrayado animado de escritorio */
  /* El fondo del cajón móvil es claro; el ":hover" de la fila 2 (texto
     blanco, pensado para el fondo navy de escritorio) deja el texto
     invisible aquí, así que se resetea junto con ":active"/".is-active". */
  .iaw-scope .iaw-nav__link:hover,
  .iaw-scope .iaw-nav__link:active {
    color: var(--iaw-navy-700); background: var(--iaw-bg-alt);
  }
  .iaw-scope .iaw-nav__link.is-active {
    color: var(--iaw-white); background: var(--iaw-navy-700); border-color: var(--iaw-navy-700);
  }
  .iaw-nav__item--has-children > .iaw-nav__link .iaw-nav__caret { margin-left: var(--iaw-space-2); color: var(--iaw-accent); }
  /* Mientras el desplegable está abierto, su disparador se resalta en navy
     para que quede claro cuál de los renglones está expandido. Se sube la
     especificidad (4 clases) a propósito para ganarle al ":hover" de arriba
     (mismo peso de selector, así que sin esto el orden en la hoja decide). */
  .iaw-scope .iaw-nav__item--has-children.is-open > .iaw-nav__link {
    background: var(--iaw-navy-700); border-color: var(--iaw-navy-700); color: var(--iaw-white);
  }
  .iaw-scope .iaw-nav__item--has-children.is-open > .iaw-nav__link .iaw-nav__caret { color: var(--iaw-white); }

  /* Mega menu en el drawer móvil: se agrupa en una tarjeta blanca propia
     (con sombra + borde izquierdo de acento) para diferenciarse del fondo
     gris del cajón — panel simple, sin imagen (ahorra espacio), una sola
     columna. Se abre/cierra como acordeón con el mismo ".is-open" que usa
     el desplegable de escritorio (ver web.blade.php): oculto por defecto,
     visible solo si el <li> tiene ".is-open". */
  .iaw-mega-menu {
    position: static; display: none; opacity: 1; transform: none; border: 0;
    width: auto; margin: var(--iaw-space-2) 0 0;
    background: var(--iaw-white); border-left: 3px solid var(--iaw-accent);
    border-radius: 0 var(--iaw-radius) var(--iaw-radius) 0;
    padding: var(--iaw-space-2) 0;
    box-shadow: var(--iaw-shadow-sm);
  }
  .iaw-nav__item--has-children.is-open .iaw-mega-menu { display: block; }
  .iaw-mega-menu__close { display: none; } /* en el acordeón móvil ya se cierra tocando "Servicios" de nuevo */
  .iaw-mega-menu__image { display: none; }
  .iaw-mega-menu__inner, .iaw-mega-menu__inner--no-image { grid-template-columns: 1fr; gap: 0; }
  .iaw-mega-menu__list { grid-template-columns: 1fr; gap: 0; }
  .iaw-mega-menu__list a { display: flex; align-items: center; padding: var(--iaw-space-3) var(--iaw-space-4); border-radius: 0; }
  .iaw-mega-menu__item-icon { width: 20px; font-size: .95rem; }
  .iaw-mega-menu__item-label { color: var(--iaw-slate-600); font-weight: var(--iaw-fw-medium); font-size: var(--iaw-fs-300); }
  .iaw-mega-menu__item-desc { display: none; } /* en el cajón móvil se prioriza compacidad */

  .iaw-nav__cta-item { margin: var(--iaw-space-4) 0 0; }
  .iaw-nav__cta-item::before { content: none; }
  .iaw-nav__cta-item .iaw-btn { width: 100%; justify-content: center; padding-block: var(--iaw-space-4); box-shadow: var(--iaw-shadow-sm); }

  /* Redes sociales al final del cajón — el fondo pasa a ser claro (como el
     resto del cajón), así que los círculos se invierten a tono oscuro. */
  .iaw-nav__social { justify-content: center; margin: var(--iaw-space-5) 0 var(--iaw-space-2); }
  .iaw-nav__social a { background: var(--iaw-bg-alt); color: var(--iaw-navy-700); }
  .iaw-nav__social a:hover { background: var(--iaw-navy-700); color: var(--iaw-white); }

  /* Fondo oscurecido detrás del cajón — el header se mantiene por encima
     gracias a su z-index, así que no se ve afectado. */
  body.iaw-menu-open { overflow: hidden; }
  body.iaw-menu-open::after {
    content: ""; position: fixed; inset: 0;
    background: rgba(16, 31, 43, .5);
    z-index: calc(var(--iaw-z-header) - 1);
    animation: iaw-fade .25s var(--iaw-ease);
  }
}

@media (max-width: 860px) {
  .iaw-footer__cta-card { flex-direction: column; text-align: center; padding: var(--iaw-space-6); }
  .iaw-footer__cta-actions { justify-content: center; }
  .iaw-scope .iaw-footer__logo { height: 68px; }
  .iaw-footer__cols   { grid-template-columns: 1fr; gap: var(--iaw-space-6); text-align: center; }
  .iaw-footer__cols > div { border-left: 0 !important; padding-left: 0 !important; }
  .iaw-footer__title::after { left: 50%; transform: translateX(-50%); }
  .iaw-footer__brand p { max-width: none; margin-inline: auto; }
  .iaw-social         { justify-content: center; }
  .iaw-footer__list a::after { display: none; }
  .iaw-footer__contact li { grid-template-columns: 1fr; justify-items: center; }
  .iaw-footer__bottom { justify-content: center; text-align: center; }
  .iaw-grid--2, .iaw-grid--3, .iaw-grid--4 { grid-template-columns: 1fr; }
  .iaw-stats { grid-template-columns: 1fr; gap: var(--iaw-space-5); }
  .iaw-stat  { border-left: 0; padding-left: 0; padding-top: var(--iaw-space-5); border-top: 1px solid rgba(255,255,255,.14); }
  .iaw-stat:first-child { border-top: 0; padding-top: 0; }
  .iaw-coverage__panel { grid-template-columns: 1fr; gap: var(--iaw-space-6); }
  .iaw-mexico-map__wrap { padding: var(--iaw-space-4); }
  .iaw-coverage__states { justify-content: center; }
  .iaw-contact-grid { grid-template-columns: 1fr; }
  .iaw-gallery { grid-template-columns: repeat(2, 1fr); }
  .iaw-service-body ul { grid-template-columns: 1fr; }
}


/* == 22. ACCESIBILIDAD / PRINT ========================== */
@media (prefers-reduced-motion: reduce) {
  /* El slider de portada queda fuera de esta regla a propósito: su transición
     es funcional (indica el cambio de contenido), no decorativa — matarla
     por completo hace que el cambio de slide se vea como un salto brusco
     en vez de un deslizamiento, en dispositivos con "reducir movimiento"
     activado en el sistema. */
  *:not(.iaw-hero-swiper .swiper-wrapper),
  ::before,
  ::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .iaw-marquee { animation: none; }
}
@media print {
  .iaw-header, .iaw-nav, .iaw-footer, .iaw-wa-float, .iaw-totop, #gdpr-cookie-message { display: none !important; }
  .iaw-scope { color: #000; background: #fff; }
}