/**
 * /assets/css/styles.css
 *
 * ETAPA 3 — CSS puro (sin Tailwind) para: Header, Footer, WhatsAppFab,
 * PageHeader y estructura global (site-layout).
 *
 * NO incluye todavía estilos de páginas completas (Home, Servicios, Blog,
 * etc.) — eso se migra página por página en etapas posteriores.
 *
 * Fuente: src/styles.css (tokens de diseño) + clases Tailwind inline de
 * Header.tsx, Footer.tsx, WhatsAppFab.tsx y PageHeader (en SiteLayout.tsx).
 * Los valores de color, tipografía, radios y sombras son exactamente los
 * mismos del proyecto React — no se rediseñó nada.
 *
 * Breakpoints usados (idénticos a los breakpoints por defecto de Tailwind):
 *  sm: 640px | md: 768px | lg: 1024px | xl: 1280px
 */

/* =======================================================================
  1. FUENTES (Ainslie Norm)
  -----------------------------------------------------------------------
  PENDIENTE: los archivos AinslieNormRegular.otf y AinslieNormBold.otf
  dependen del CDN de Lovable (ver informe Etapa 2, "Assets faltantes").
  Se dejan las referencias preparadas a la ruta local definitiva.
  Mientras no existan esos archivos, el navegador usa automáticamente el
  fallback "Inter" (cargado desde Google Fonts abajo) — el sitio se ve
  correctamente, solo cambia la tipografía hasta que se agreguen los .otf.
  ======================================================================= */

@font-face {
 font-family: "Ainslie Norm";
 font-style: normal;
 font-weight: 400;
 font-display: swap;
 src: url("/assets/fonts/AinslieNormRegular.otf") format("opentype"); /* PENDIENTE: archivo aún no disponible */
}
@font-face {
 font-family: "Ainslie Norm";
 font-style: normal;
 font-weight: 700;
 font-display: swap;
 src: url("/assets/fonts/AinslieNormBold.otf") format("opentype"); /* PENDIENTE: archivo aún no disponible */
}

/* =======================================================================
  2. TOKENS DE DISEÑO (colores, radios, sombras, tipografía)
  -----------------------------------------------------------------------
  Copiados literalmente de :root en src/styles.css. Mismos valores oklch,
  mismos comentarios de referencia hex. NO se cambiaron colores.
  ======================================================================= */

:root {
 --radius: 0.5rem;
 --radius-md: calc(var(--radius) - 2px); /* AGREGADO Etapa 11.1: faltaba esta variable (usada en 7 selectores desde Etapa 5) — mismo valor que --radius-md en el @theme inline del React original (src/styles.css) */
 --font-sans: "Ainslie Norm", "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
 --font-display: "Ainslie Norm", "Inter", system-ui, sans-serif;

 /* Brand */
 --navy: oklch(0.38 0.11 255); /* #0C447C */
 --brand-blue: oklch(0.50 0.14 255);/* #185FA5 */
 --brand-red: oklch(0.58 0.22 27);
 --brand-yellow: oklch(0.85 0.17 92);  /* amarillo COECSA */
 --brand-yellow-fg: oklch(0.28 0.06 255);
 --whatsapp: oklch(0.66 0.17 150);

 --background: oklch(1 0 0);
 --foreground: oklch(0.18 0.03 255);
 --card: oklch(1 0 0);
 --card-foreground: oklch(0.18 0.03 255);
 --popover: oklch(1 0 0);
 --popover-foreground: oklch(0.18 0.03 255);
 --primary: var(--navy);
 --primary-foreground: oklch(0.99 0 0);
 --secondary: oklch(0.96 0.01 255);
 --secondary-foreground: var(--navy);
 --muted: oklch(0.97 0.005 255);
 --muted-foreground: oklch(0.48 0.02 255);
 --accent: var(--brand-blue);
 --accent-foreground: oklch(0.99 0 0);
 --destructive: oklch(0.6 0.22 27);
 --destructive-foreground: oklch(0.99 0 0);
 --border: oklch(0.92 0.01 255);
 --input: oklch(0.92 0.01 255);
 --ring: var(--brand-blue);

 --shadow-card: 0 1px 2px oklch(0.18 0.03 255 / 0.06), 0 8px 24px oklch(0.18 0.03 255 / 0.06);
 --gradient-hero: linear-gradient(135deg, var(--navy) 0%, var(--brand-blue) 100%);

 /* Alphas usados por Header/Footer/PageHeader (equivalentes a las
 utilidades Tailwind con "/NN" de opacidad, ej. bg-background/95,
 text-white/80, from-[navy]/95, via-[navy]/80, to-[brand-blue]/60) */
 --background-95: oklch(1 0 0 / 0.95);
 --navy-95: oklch(0.38 0.11 255 / 0.95);
 --navy-80: oklch(0.38 0.11 255 / 0.80);
 --brand-blue-60: oklch(0.50 0.14 255 / 0.60);
 --foreground-80: oklch(0.18 0.03 255 / 0.80);
 --white-80: rgb(255 255 255 / 0.80);
 --white-70: rgb(255 255 255 / 0.70);
 --white-60: rgb(255 255 255 / 0.60);
 --white-50: rgb(255 255 255 / 0.50);
 --white-20: rgb(255 255 255 / 0.20);
 --white-10: rgb(255 255 255 / 0.10);
 --muted-40: oklch(0.97 0.005 255 / 0.40); /* equivalente a bg-muted/40, usado en /nosotros */
 --brand-blue-20: oklch(0.50 0.14 255 / 0.20); /* equivalente a focus:ring-[brand-blue]/20 en QuoteForm */

 /* Agregadas en Etapa 6, para tarjetas/CTAs de Servicios y Políticas */
 --brand-red-5: oklch(0.58 0.22 27 / 0.05);
 --brand-red-10: oklch(0.58 0.22 27 / 0.10);
 --brand-red-20: oklch(0.58 0.22 27 / 0.20);
 --brand-red-30: oklch(0.58 0.22 27 / 0.30);
 --brand-blue-10: oklch(0.50 0.14 255 / 0.10);
 --muted-30: oklch(0.97 0.005 255 / 0.30);
 --navy-5: oklch(0.38 0.11 255 / 0.05); /* Agregada Etapa 12B, para bg-[navy]/5 en tarjetas de Portal de Clientes (Home) */

 --blue_ag: #0c0589;
 --blue_tables:#d1e6f5;
 --blue_marino:#112062;
 --blue_text:#195497;
}

/* =======================================================================
  3. RESET BASE MÍNIMO (equivalente aproximado al "preflight" de Tailwind)
  ======================================================================= */

*, *::before, *::after {box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
 margin: 0;
 background-color: var(--background);
 color: var(--foreground);
 font-family: var(--font-sans);
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4 {
 font-family: var(--font-display);
 letter-spacing: -0.02em;
 margin: 0;
}
p, ul, ol {margin: 0; padding: 0; }
ul, ol { list-style: none; }
a {color: inherit; text-decoration: none; }
img {display: block; max-width: 100%; height: auto; }
button {
 font: inherit;
 color: inherit;
 background: none;
 border: none;
 cursor: pointer;
 padding: 0;
}
svg {display: block; }

/* =======================================================================
  4. UTILIDADES GLOBALES (de src/styles.css)
  ======================================================================= */

.container-page {
 width: 100%;
 margin-inline: auto;
 max-width: 80rem; /* 1280px */
 padding-inline: 1.25rem; /* 20px */
}

.hero-gradient {
 background: var(--gradient-hero);
}

/* =======================================================================
  5. LAYOUT BASE (equivalente a SiteLayout.tsx)
  ======================================================================= */

.site-layout {
 min-height: 100vh;
 display: flex;
 flex-direction: column;
}
.site-main {
 flex: 1 1 auto;
}

/* =======================================================================
  6. HEADER (Header.tsx)
  ======================================================================= */

.site-header {position: sticky; top: 0; z-index: 50; width: 100%; border-bottom: 1px solid var(--border); background-color: var(--background); transition: background-color 0.2s ease, box-shadow 0.2s ease;}
.site-header.is-scrolled {background-color: var(--background-95); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 1px 2px oklch(0.18 0.03 255 / 0.06);}

.site-header__inner {display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 4rem; /* h-16 */}

.site-header__logo {display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0;}
.site-header__logo img {height: 3rem; /* h-12 */ width: auto;}

/* Nav desktop */
.site-header__nav {display: none; align-items: center; gap: 0.125rem;}
@media (min-width: 1024px) {
 .site-header__nav {display: flex; }
}

.site-header__nav-link {padding: 0.5rem 0.625rem; font-size: 0.84rem; font-weight: 500; color: var(--foreground-80); transition: color 0.15s ease;}
.site-header__nav-link:hover { color: var(--navy);}
.site-header__nav-link.is-active {font-weight: 600; color: var(--brand-red);}
.site-header__nav-link.is-contacto {padding: 0.375rem 0.75rem; font-weight: 600; border-radius: 7px; background-color: var(--brand-blue); color: #fff; transition: opacity 0.15s ease;}
.site-header__nav-link.is-contacto:hover {opacity: 0.9; }
.site-header__nav-link.is-rastreo {margin-right: 2px; padding: 0.375rem 0.75rem; font-weight: 600; border-radius: 7px; background-color: var(--brand-yellow); color: var(--brand-yellow-fg); transition: opacity 0.15s ease;}
.site-header__nav-link.is-rastreo:hover {opacity: 0.9; }

/* Acciones (derecha) */
.site-header__actions {display: flex; align-items: center; gap: 0.45rem;}

/* Acceso al portal */
.site-header__login { position: relative; }
.site-header__login-toggle {display: inline-flex; align-items: center; gap: 0.375rem; border: 1px solid var(--border); border-radius: 7px; background: #ecf2ff; padding: 0.42rem 0.625rem; color: var(--navy); font-size: 0.75rem; font-weight: 700; transition: border-color .15s ease, background-color .15s ease; }
.site-header__login-toggle:hover, .site-header__login-toggle[aria-expanded="true"] {border-color: var(--brand-blue); background: var(--brand-blue); color: #fff; }
.site-header__login-toggle svg { width: 1rem; height: 1rem; }
.site-header__login-panel { position: absolute; z-index: 60; top: calc(100% + 0.75rem); right: 0; width: min(22rem, calc(100vw - 2rem)); padding: 1.25rem; border: 1px solid var(--border); border-radius: calc(var(--radius) * 1.5); background: var(--background); box-shadow: 0 18px 40px rgb(12 68 124 / .18); }
.site-header__login-panel[hidden] {display: none; }
.site-header__login-heading {display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.site-header__login-eyebrow {margin: 0 0 0.2rem; color: var(--brand-red); font-size: 0.6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.site-header__login-heading h2 {margin: 0; color: var(--navy); font-size: 1.125rem; font-weight: 700; }
.site-header__login-close {display: inline-grid; width: 2rem; height: 2rem; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--foreground-80); font-size: 1.5rem; line-height: 1; }
.site-header__login-close:hover {background: var(--muted); color: var(--navy); }
.site-header__login-form {display: grid; gap: .45rem; }
.site-header__login-form label {color: var(--foreground); font-size: .75rem; font-weight: 600; }
.site-header__login-form input[type="email"], .site-header__login-form input[type="password"] { width: 100%; min-height: 2.5rem; margin-bottom: .3rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--background); padding: .5rem .625rem; color: var(--foreground); font-size: .875rem; }
.site-header__login-form input:focus {outline: 2px solid var(--brand-blue); outline-offset: 1px; border-color: var(--brand-blue); }
.site-header__login-options {display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: .15rem 0 .55rem; font-size: .7rem; }
.site-header__login-options a, .site-header__login-register a {color: var(--brand-blue); font-weight: 600; }
.site-header__login-remember {display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.site-header__login-remember input { accent-color: var(--brand-blue); }
.site-header__login-submit { width: 100%; min-height: 2.6rem; border: 0; border-radius: var(--radius); background: var(--brand-blue); color: #fff; font-size: .8125rem; font-weight: 700; }
.site-header__login-submit:hover {opacity: .9; }
.site-header__login-register {margin: 1rem 0 0; text-align: center; color: var(--muted-foreground); font-size: .75rem; }
.site-header__login-message {margin: .85rem 0 0; padding: .65rem .75rem; border-radius: var(--radius); font-size: .75rem; font-weight: 600; }
.site-header__login-message.is-error {background: rgb(185 28 28 / .1); color: #b91c1c; }
.site-header__login-message.is-success {background: rgb(22 163 74 / .12); color: #15803d; }
@media (max-width: 639px) {
 .site-header__login-toggle span { /*display: none; */ }
 .site-header__login-toggle { padding: .5rem; }
 .site-header__login-panel { position: fixed; top: 4.5rem; right: 1rem; left: 1rem; width: auto; max-height: calc(100dvh - 5.5rem); overflow-y: auto; }
}

.site-header__cta-cotiza {display: none; align-items: center; border-radius: 7px; background-color: var(--brand-red); padding: 0.5rem 1rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #fff; transition: opacity 0.15s ease;}
.site-header__cta-cotiza:hover {opacity: 0.9; }
@media (min-width: 768px) {
 .site-header__cta-cotiza {display: inline-flex; }
}

.site-header__cta-whatsapp {display: none; align-items: center; gap: 0.5rem; border-radius: 7px; background-color: var(--whatsapp); padding: 0.5rem 0.75rem; font-size: 11px; font-weight: 600; color: #fff; transition: opacity 0.15s ease;}
.site-header__cta-whatsapp:hover {opacity: 0.9; }
.site-header__cta-whatsapp svg {height: 1rem; width: 1rem; flex-shrink: 0; }
@media (min-width: 640px) {
 .site-header__cta-whatsapp {display: inline-flex; }
}
.site-header__whatsapp-full {display: none; }
.site-header__whatsapp-short {display: inline; }
@media (min-width: 1380px) {
 /*.site-header__whatsapp-full {display: inline; }*/
 /*.site-header__whatsapp-short {display: none; }*/
}

.site-header__toggle {
 display: inline-flex;
 padding: 0.5rem;
 color: var(--foreground);
}
.site-header__toggle svg {height: 1.5rem; width: 1.5rem; }
.site-header__toggle .icon-close {display: none; }
.site-header__toggle.is-open .icon-menu {display: none; }
.site-header__toggle.is-open .icon-close {display: block; }
@media (min-width: 1024px) {
 .site-header__toggle {display: none; }
}

.site-header__nav-link.is-contacto{display: none;}
@media (min-width: 640px) {
 .site-header__nav-link.is-contacto {display: inline-flex; }
}
/*.site-header__nav-link.is-rastreo{display: none;}*/
@media (min-width: 600px) {
 /*.site-header__nav-link.is-rastreo {display: inline-flex; }*/
}
/* Menú móvil */
.site-header__mobile-menu {display: none; border-top: 1px solid var(--border); background-color: var(--background);}
.site-header__mobile-menu.is-open {display: block;}
@media (min-width: 1024px) {
 .site-header__mobile-menu {display: none !important; }
}
.site-header__mobile-nav {display: flex; flex-direction: column; padding-block: 0.75rem;}
.site-header__mobile-link {padding: 0.5rem 0; font-size: 0.875rem; font-weight: 500; color: var(--foreground-80);}
.site-header__mobile-link.is-contacto {margin-top: 0.5rem; padding-block: 0.5rem; font-weight: 600; text-align: center; border-radius: var(--radius); background-color: var(--brand-blue); color: #fff;}
.site-header__mobile-link.is-rastreo {margin-top: 0.5rem; padding-block: 0.5rem; font-weight: 600; text-align: center; border-radius: var(--radius); background-color: var(--brand-yellow); color: var(--brand-yellow-fg);}

/* =======================================================================
  7. FOOTER (Footer.tsx)
  ======================================================================= */

.site-footer {background-color: var(--navy); color: #fff; margin-top: 6rem; /* mt-24 */}

.site-footer__grid {display: grid; gap: 2.5rem; padding-block: 3.5rem; grid-template-columns: 1fr;}
@media (min-width: 768px) {
 .site-footer__grid {grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
 .site-footer__grid {grid-template-columns: repeat(5, 1fr); }
}

.site-footer__brand {
 /* lg:col-span-1 es el valor por defecto en grid, no requiere regla extra */
}
.site-footer__logo-wrap {display: inline-block; background-color: #fff; border-radius: var(--radius); padding: 0.61rem;}
.site-footer__logo {height: 3rem; /* h-20 */ width: auto;}
.site-footer__tagline {margin-top: 1rem; font-size: 0.875rem; color: var(--white-80); max-width: 20rem;}
.site-footer__social {margin-top: 1rem; display: flex; align-items: center; gap: 0.75rem;}
.site-footer__social a { color: #fff; transition: color 0.15s ease;}
.site-footer__social a:hover {color: var(--white-80); }
.site-footer__social svg {height: 1rem; width: 1rem; }

.site-footer__col h4,
.site-footer__col-h4--spaced {font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--white-70);}
.site-footer__col-h4--spaced {margin-top: 1.5rem; }
.site-footer__col ul {margin-top: 1rem; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem;}
.site-footer__col ul a { transition: color 0.15s ease; }
.site-footer__col ul a:hover {color: var(--white-80); }
.site-footer__link-strong {font-weight: 600; text-decoration: underline; text-underline-offset: 2px;}

.site-footer__contact-list {margin-top: 1rem; display: flex; flex-direction: column; gap: 0.75rem; font-size: 0.875rem;}
.site-footer__contact-list a {display: flex; align-items: center; gap: 0.5rem; transition: color 0.15s ease;}
.site-footer__contact-list a:hover {color: var(--white-80); }
.site-footer__contact-list svg {height: 1rem; width: 1rem; flex-shrink: 0; }

.site-footer__bottom {border-top: 1px solid var(--white-10);}
.site-footer__bottom-inner {display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.25rem; font-size: 0.75rem; color: var(--white-70);}
@media (min-width: 768px) {
 .site-footer__bottom-inner {flex-direction: row; }
}
.site-footer__trademark {color: var(--white-50); }

/* =======================================================================
  8. WHATSAPP FLOATING BUTTON (WhatsAppFab.tsx)
  ======================================================================= */

.whatsapp-fab {position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 50; display: inline-flex; align-items: center; justify-content: center; height: 3.5rem; /* h-14 */ width: 3.5rem; /* w-14 */ border-radius: 9999px; background-color: var(--whatsapp); color: #fff; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); transition: transform 0.15s ease;}
.whatsapp-fab:hover { transform: scale(1.05); }
.whatsapp-fab svg {height: 1.75rem; width: 1.75rem; } /* h-7 w-7 */

/* =======================================================================
  9. PAGE HEADER (PageHeader, dentro de SiteLayout.tsx)
  ======================================================================= */

.page-header {position: relative; overflow: hidden; color: #fff;}
.page-header__bg {position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover;}
.page-header__overlay {position: absolute; inset: 0; background: linear-gradient(to right, var(--navy-95) 0%, var(--navy-80) 50%, var(--brand-blue-60) 100%);}
.page-header__inner {position: relative; z-index: 10; display: grid; gap: 2rem; align-items: center; padding-block: 4rem; /* py-16 */ grid-template-columns: 1fr;}
@media (min-width: 768px) {
 .page-header__inner {
padding-block: 5rem; /* md:py-20 */
grid-template-columns: 1fr auto;
 }
}
.page-header__eyebrow {font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: var(--white-80);}
.page-header__title {margin-top: 0.75rem; font-size: 2.25rem; /* text-4xl */ font-weight: 700; filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.15));}
@media (min-width: 768px) {
 .page-header__title {font-size: 3rem; } /* md:text-5xl */
}
.page-header__subtitle {margin-top: 1rem; max-width: 42rem; color: var(--white-90, rgb(255 255 255 / 0.9)); font-size: 1.125rem;}
.page-header__logo {display: none; height: 6rem; /* h-24 */ width: auto; opacity: 0.95; justify-self: end; filter: drop-shadow(0 4px 6px rgb(0 0 0 / 0.2));}
@media (min-width: 768px) {
 .page-header__logo {display: block; }
}
@media (min-width: 1024px) {
 .page-header__logo {height: 7rem; } /* lg:h-28 */
}

/* =======================================================================
  10. UTILIDADES DE SECCIÓN Y TARJETA (agregadas en Etapa 4, para /nosotros)
  -----------------------------------------------------------------------
  Nombradas de forma genérica (no "nosotros-*") porque son patrones que se
  van a repetir en varias páginas futuras (Servicios, Convenios, etc.):
  secciones con padding vertical, secciones con fondo muted, tarjetas con
  borde, grids de 2 y 3 columnas. Se agregan aquí, no dentro de una página,
  para no duplicar CSS cuando otras páginas necesiten lo mismo.
  ======================================================================= */

.section-py {padding-block: 4rem; /* py-16 */}
.section-muted {background-color: var(--muted-40); padding-block: 4rem; /* py-16 */}

/* Grid de 2 columnas con separación amplia (usado en la intro de Nosotros:
  "grid lg:grid-cols-2 gap-12 items-start") */
.grid-2-start {display: grid; gap: 3rem; /* gap-12 */ align-items: start; grid-template-columns: 1fr;}
@media (min-width: 1024px) {
 .grid-2-start {grid-template-columns: repeat(2, 1fr); }
}

/* Texto de cuerpo largo (párrafos de introducción) */
.prose-copy {display: flex; flex-direction: column; gap: 1.25rem; /* space-y-5 */ color: var(--foreground-80); line-height: 1.7;}

/* Grid de estadísticas 2x2 (Fundación / Destinos / Colaboradores / Crecimiento) */
.stats-grid {display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; /* gap-4 */}

.stat-card {border-radius: 0.75rem; /* rounded-xl */ border: 1px solid var(--border); background-color: var(--card); padding: 1.5rem; /* p-6 */}
.stat-card svg {height: 1.5rem; /* h-6 */ width: 1.5rem; /* w-6 */ color: var(--brand-red);}
.stat-card__number {margin-top: 0.75rem; font-size: 1.875rem; /* text-3xl */ font-weight: 700; color: var(--navy);}
.stat-card__label {font-size: 0.875rem; /* text-sm */ color: var(--muted-foreground);}

/* Grid de 3 columnas (Misión / Visión / Valores) */
.cards-grid-3 {display: grid; gap: 1.5rem; /* gap-6 */ grid-template-columns: 1fr;}
@media (min-width: 768px) {
 .cards-grid-3 {grid-template-columns: repeat(3, 1fr); }
}

.value-card {border-radius: 0.75rem; /* rounded-xl */ background-color: var(--card); border: 1px solid var(--border); padding: 1.75rem; /* p-7 */}
.value-card h3 {font-size: 1.25rem; /* text-xl */ font-weight: 700; color: var(--navy);}
.value-card p {margin-top: 0.75rem; font-size: 0.875rem; /* text-sm */ color: var(--muted-foreground); line-height: 1.7;}

/* Placeholder temporal donde debería ir el cotizador (QuoteForm) — ver
  informe de Etapa 4: QuoteForm.tsx todavía no se ha migrado a PHP,
  está fuera del alcance de esta etapa. Se documenta visualmente en vez
  de inventar un formulario funcional que aún no existe. */
.pending-block {border-radius: 1rem; border: 1px dashed var(--border); background-color: var(--card); padding: 2.5rem 2rem; text-align: center; color: var(--muted-foreground); font-size: 0.875rem; line-height: 1.6;}
.pending-block strong {display: block; margin-bottom: 0.5rem; font-size: 1rem; color: var(--navy);}

/* =======================================================================
  11. QUOTE FORM / COTIZADOR (agregado en Etapa 5, migración de QuoteForm.tsx)
  ======================================================================= */

.quote-form {border-radius: 1rem; /* rounded-2xl */ background-color: var(--card); box-shadow: var(--shadow-card); border: 1px solid var(--border); padding: 1.5rem; /* p-6 */}
@media (min-width: 768px) {
 .quote-form {padding: 2rem; } /* md:p-8 */
}
.quote-form.quote-form--compact {padding: 1.25rem; /* p-5, sin variante responsive, igual que el original */}

.quote-form__title {font-size: 1.25rem; /* text-xl */ font-weight: 700; color: var(--navy); text-transform: uppercase; letter-spacing: 0.02em; /* tracking-wide */}
@media (min-width: 768px) {
 .quote-form__title {font-size: 1.5rem; } /* md:text-2xl */
}

.quote-form__form {margin-top: 1.5rem; /* mt-6 */ display: grid; gap: 1rem; /* gap-4 */ /*grid-template-columns: 1fr;*/ grid-template-columns: minmax(0, 1fr);}
@media (min-width: 768px) {
 .quote-form__form {grid-template-columns: repeat(6, 1fr); } /* md:grid-cols-6 */
}

/* md:col-span-N — solo aplica desde el breakpoint md, igual que en React
  (en móvil todos los campos ocupan el ancho completo, apilados) */
@media (min-width: 768px) {
 .quote-form__field--span1 {grid-column: span 1 / span 1; }
 .quote-form__field--span3 {grid-column: span 3 / span 3; }
 .quote-form__field--span6 {grid-column: span 6 / span 6; }
}

.quote-form__field {display: flex; flex-direction: column; gap: 0.375rem; /* gap-1.5 */}
.quote-form__field label,
.quote-form__label-plain {font-size: 0.75rem; /* text-xs */ font-weight: 500; color: var(--foreground-80);}
.quote-form__field input,
.quote-form__field select {height: 2.75rem; /* h-11 */ border-radius: var(--radius-md); border: 1px solid var(--input); background-color: var(--background); padding-inline: 0.75rem; /* px-3 */ font-size: 0.875rem; /* text-sm */ outline: none; font-family: inherit; color: inherit;}
.quote-form__field input:focus,
.quote-form__field select:focus {border-color: var(--brand-blue); box-shadow: 0 0 0 2px var(--brand-blue-20);}

.quote-form__priority-hint {margin-top: 0.375rem; /* mt-1.5 */ display: inline-flex; align-items: center; gap: 0.375rem; /* gap-1.5 */ font-size: 0.6875rem; /* text-[11px] */ font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--brand-red);}
.quote-form__priority-hint svg {
 height: 0.75rem; /* h-3 */
 width: 0.75rem; /* w-3 */
}
.quote-form__priority-hint[hidden] {display: none; }

.quote-form__dimensions {margin-top: 0.375rem; /* mt-1.5 */ display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; /* gap-2 */}

.quote-form__footer {display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 0.75rem; /* gap-3 */ padding-top: 0.5rem; /* pt-2 */}
@media (min-width: 640px) {
 .quote-form__footer {flex-direction: row; align-items: center; }
}

.quote-form__hint {font-size: 0.75rem; /* text-xs */ color: var(--muted-foreground);}

.quote-form__submit {display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md); background-color: var(--brand-red); padding: 0.75rem 1.5rem; /* py-3 px-6 */ font-size: 0.875rem; /* text-sm */ font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 0.05); /* shadow-sm */ transition: opacity 0.15s ease;}
.quote-form__submit:hover {opacity: 0.9; }

.quote-form__success {font-size: 0.875rem; /* text-sm */ color: var(--whatsapp); font-weight: 500;}
.quote-form__success[hidden] {display: none; }

/* =======================================================================
  12. POLICY SECTION CARD (agregado en Etapa 6, /includes/policy-section.php)
  -----------------------------------------------------------------------
  Migración de PolicySectionCard() en src/lib/policies.tsx.
  ======================================================================= */

.policy-section { scroll-margin-top: 10rem; /* scroll-mt-40 */ border-radius: 1rem; /* rounded-2xl */ border: 1px solid var(--border); background-color: var(--card); padding: 1.75rem; /* p-7 */}
.policy-section__head {display: flex; align-items: center; gap: 0.75rem; /* gap-3 */}
.policy-section__icon {display: inline-flex; align-items: center; justify-content: center; height: 2.75rem; /* h-11 */ width: 2.75rem; /* w-11 */ border-radius: 0.5rem; /* rounded-lg */ background-color: var(--brand-red-10); color: var(--brand-red); flex-shrink: 0;}
.policy-section__icon svg {height: 1.25rem; width: 1.25rem; } /* h-5 w-5 */
.policy-section__title {font-size: 1.25rem; /* text-xl */ font-weight: 700; color: var(--navy);}
.policy-section__paragraphs {margin-top: 1.25rem; /* mt-5 */ display: flex; flex-direction: column; gap: 0.75rem; /* space-y-3 */ font-size: 0.875rem; color: var(--foreground-80); line-height: 1.7;}
.policy-section__items,.service-policies-list ul {margin-top: 1.25rem; /* mt-5 */ display: flex; flex-direction: column; gap: 0.625rem; /* space-y-2.5 */ font-size: 0.875rem; color: var(--foreground-80); line-height: 1.7; list-style: disc; padding-left: 1.25rem;}
.policy-section__subsections {margin-top: 1.5rem; /* mt-6 */ display: flex; flex-direction: column; gap: 1.25rem; /* space-y-5 */}
.policy-section__subsections h4 {font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--navy);}
.policy-section__subsections ul {margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem; color: var(--foreground-80); line-height: 1.7; list-style: disc; padding-left: 1.25rem;}
.policy-section__table {margin-top: 1.5rem; /* mt-6 */ border-radius: 0.5rem; /* rounded-lg */ border: 1px solid var(--border); background-color: var(--background); padding: 1.25rem; /* p-5 */}
.policy-section__table-title {margin-bottom: 0.75rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--brand-red);}
.policy-section__table-grid {display: grid; gap: 1.5rem; /* gap-6 */ grid-template-columns: 1fr;}
@media (min-width: 640px) {
 .policy-section__table-grid {grid-template-columns: repeat(2, 1fr); }
}
.policy-section__table-grid ul {display: flex; flex-direction: column; gap: 0.375rem; /* space-y-1.5 */ font-size: 0.875rem; color: var(--foreground-80);}
.policy-section__table-header {font-weight: 700; color: var(--navy); border-bottom: 1px solid var(--border); padding-bottom: 0.375rem; margin-bottom: 0.375rem;}

/* =======================================================================
  13. SERVICIOS — LISTADO (agregado en Etapa 6, /servicios/index.php)
  -----------------------------------------------------------------------
  Migración de servicios.index.tsx.
  ======================================================================= */

.services-grid {display: grid; gap: 1.5rem; /* gap-6 */ grid-template-columns: 1fr;}
@media (min-width: 768px) {
 .services-grid {grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
 .services-grid {grid-template-columns: repeat(3, 1fr); }
}

.service-card {display: block; border-radius: 0.75rem; /* rounded-xl */ border: 1px solid var(--border); background-color: var(--card); padding: 1.75rem; /* p-7 */ transition: border-color 0.2s ease, transform 0.2s ease;}
.service-card:hover {border-color: var(--brand-blue); transform: translateY(-0.25rem);}
.service-card__icon {display: inline-flex; align-items: center; justify-content: center; height: 2.75rem; /* h-11 */ width: 2.75rem; border-radius: 0.5rem; background-color: var(--brand-red-10); color: var(--brand-red);}
.service-card__icon svg {height: 1.25rem; width: 1.25rem; }
.service-card__title {margin-top: 1rem; font-size: 1.25rem; /* text-xl */ font-weight: 700; color: var(--navy);}
.service-card__desc {margin-top: 0.5rem; font-size: 0.875rem; color: var(--muted-foreground);}
.service-card__link {margin-top: 1.25rem; display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.875rem; font-weight: 600; color: var(--brand-blue);}
.service-card__link svg {height: 0.875rem; width: 0.875rem; transition: transform 0.2s ease;}
.service-card:hover .service-card__link svg { transform: translateX(0.25rem); }

.policies-cta {margin-top: 3rem; /* mt-12 */ display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; border-radius: 1rem; /* rounded-2xl */ border: 2px solid var(--brand-red-20); background: linear-gradient(to bottom right, var(--brand-red-5), transparent); padding: 1.75rem; /* p-7 */ transition: border-color 0.2s ease, transform 0.2s ease;}
.policies-cta:hover {border-color: var(--brand-red); transform: translateY(-0.125rem);}
@media (min-width: 768px) {
 .policies-cta {flex-direction: row; align-items: center; }
}
.policies-cta__icon {display: inline-flex; align-items: center; justify-content: center; height: 3.5rem; /* h-14 */ width: 3.5rem; border-radius: 0.75rem; background-color: var(--brand-red); color: #fff; flex-shrink: 0;}
.policies-cta__icon svg {height: 1.75rem; width: 1.75rem; }
.policies-cta__body {flex: 1 1 auto; }
.policies-cta__eyebrow {font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: var(--brand-red);}
.policies-cta__title {margin-top: 0.25rem; font-size: 1.25rem; font-weight: 700; color: var(--navy);}
@media (min-width: 768px) {
 .policies-cta__title {font-size: 1.5rem; }
}
.policies-cta__desc {margin-top: 0.375rem; font-size: 0.875rem; color: var(--muted-foreground);}
.policies-cta__link {display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.875rem; font-weight: 700; color: var(--brand-red); flex-shrink: 0;}
.policies-cta__link svg {height: 1rem; width: 1rem; transition: transform 0.2s ease; }
.policies-cta:hover .policies-cta__link svg { transform: translateX(0.25rem); }

/* =======================================================================
  14. SERVICIOS — DETALLE (agregado en Etapa 6, /servicios/index.php)
  -----------------------------------------------------------------------
  Migración de servicios.$slug.tsx.
  ======================================================================= */

.service-detail-grid {display: grid; gap: 3rem; /* gap-12 */ /*grid-template-columns: 1fr;*/ grid-template-columns: minmax(0, 1fr);}
@media (min-width: 1024px) {
 .service-detail-grid {grid-template-columns: repeat(3, 1fr); }
}

.service-detail-main {display: flex; flex-direction: column; gap: 1.5rem; /* space-y-6 */}
@media (min-width: 1024px) {
 .service-detail-main {grid-column: span 2 / span 2; } /* lg:col-span-2 */
}

.service-detail-heading {font-size: 1.5rem; /* text-2xl */ font-weight: 700; color: var(--navy);}

.service-benefits {display: grid; gap: 0.75rem; /* gap-3 */ grid-template-columns: 1fr;}
@media (min-width: 640px) {
 .service-benefits {grid-template-columns: repeat(2, 1fr); }
}
.service-benefits__item {display: flex; align-items: flex-start; gap: 0.75rem; border-radius: 0.5rem; border: 1px solid var(--border); background-color: var(--card); padding: 1rem; font-size: 0.875rem;}
.service-benefits__item svg {height: 1.25rem; width: 1.25rem; color: var(--brand-blue); margin-top: 0.125rem; flex-shrink: 0;}

.service-cta-block {margin-top: 2rem; /* mt-8 */ border-radius: 0.75rem; background-color: var(--navy); color: #fff; padding: 2rem; /* p-8 */}
.service-cta-block h3 {font-size: 1.25rem; font-weight: 700; }
.service-cta-block__desc {margin-top: 0.5rem; font-size: 0.875rem; color: var(--white-80);}
.service-cta-block__actions {margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: 0.75rem;}
.service-cta-block__btn-primary {display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 0.375rem; background-color: var(--brand-red); padding: 0.75rem 1.5rem; font-size: 0.875rem; font-weight: 700; text-transform: uppercase; color: #fff; transition: opacity 0.15s ease;}
.service-cta-block__btn-primary:hover {opacity: 0.9; }
.service-cta-block__btn-primary svg {height: 1rem; width: 1rem; }
.service-cta-block__btn-secondary {display: inline-flex; align-items: center; border-radius: 0.375rem; border: 1px solid var(--white-20, rgb(255 255 255 / 0.4)); padding: 0.625rem 1.25rem; font-size: 0.875rem; font-weight: 600; color: #fff; transition: background-color 0.15s ease;}
.service-cta-block__btn-secondary:hover {background-color: var(--white-10); }

.service-detail-aside__sticky {position: sticky; top: 6rem; /* top-24 */}

/* Secciones de ancho completo con borde superior: políticas, FAQ, protocolo */
.service-policies-section,
.service-faq-section,
.service-protocol-section {padding-block: 4rem; /* py-16 */ border-top: 1px solid var(--border);}
.service-policies-section {background-color: var(--background); }
.service-faq-section {background-color: var(--muted-30); }
.service-protocol-section {background-color: var(--muted-40); }

.service-policies-inner,
.service-faq-inner {max-width: 56rem; /* max-w-4xl */ margin-inline: auto;}
.service-protocol-inner {max-width: 64rem; /* max-w-5xl */ margin-inline: auto;}

.service-section-head {display: flex; align-items: flex-start; gap: 1rem; /* gap-4 */}
.service-section-head__icon {display: inline-flex; align-items: center; justify-content: center; height: 3rem; /* h-12 */ width: 3rem; border-radius: 0.75rem; color: #fff; flex-shrink: 0;}
.service-section-head__icon svg {height: 1.5rem; width: 1.5rem; }
.service-section-head__icon--blue {background-color: var(--brand-blue); }
.service-section-head__icon--red {background-color: var(--brand-red); }
.service-section-head__eyebrow {font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em;}
.service-section-head__eyebrow--blue {color: var(--brand-blue); }
.service-section-head__eyebrow--red {color: var(--brand-red); }
.service-section-head__title {margin-top: 0.25rem; font-size: 1.5rem; /* text-2xl */ font-weight: 700; color: var(--navy);}
@media (min-width: 768px) {
 .service-section-head__title {font-size: 1.875rem; } /* md:text-3xl */
}
.service-section-head__desc {margin-top: 0.5rem; color: var(--muted-foreground);}
.service-section-head__desc--wide {max-width: 42rem; } /* max-w-2xl */

.service-policies-list {margin-top: 2.5rem; /* mt-10 */ display: flex; flex-direction: column; gap: 1.5rem; /* space-y-6 */}

.service-legal-notice {margin-top: 2rem; /* mt-8 */ display: flex; align-items: flex-start; gap: 0.75rem; border-radius: 1rem; border: 2px solid var(--brand-red-30); background-color: var(--brand-red-5); padding: 1.5rem; /* p-6 */}
.service-legal-notice svg {height: 1.25rem; width: 1.25rem; color: var(--brand-red); margin-top: 0.125rem; flex-shrink: 0;}
.service-legal-notice__label {margin-bottom: 0.5rem; font-weight: 700; color: var(--brand-red); text-transform: uppercase; letter-spacing: 0.05em;}
.service-legal-notice p:not(.service-legal-notice__label) {font-size: 0.75rem; color: var(--foreground-80); line-height: 1.7;}

.service-section-footnote {margin-top: 1.5rem; /* mt-6 */ font-size: 0.75rem; color: var(--muted-foreground);}
.service-section-footnote a {font-weight: 600; color: var(--brand-blue);}
.service-section-footnote a:hover { text-decoration: underline; }

.service-protocol-grid {margin-top: 2.5rem; /* mt-10 */ display: grid; gap: 1.25rem; /* gap-5 */ grid-template-columns: 1fr;}
@media (min-width: 768px) {
 .service-protocol-grid {grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
 .service-protocol-grid {grid-template-columns: repeat(4, 1fr); }
}
.service-protocol-step {position: relative; border-radius: 1rem; /* rounded-2xl */ border: 1px solid var(--border); background-color: var(--card); padding: 1.5rem; /* p-6 */}
.service-protocol-step__badge {position: absolute; top: -0.75rem; left: 1.5rem; border-radius: 9999px; background-color: var(--brand-red); color: #fff; font-size: 0.75rem; font-weight: 700; padding: 0.25rem 0.625rem;}
.service-protocol-step svg {height: 1.5rem; width: 1.5rem; /* h-6 w-6 */ color: var(--brand-red);}
.service-protocol-step h3 {margin-top: 0.75rem; font-weight: 700; color: var(--navy);}
.service-protocol-step p {margin-top: 0.375rem; font-size: 0.875rem; color: var(--muted-foreground);}

/* =======================================================================
  15. FAQ ACCORDION (agregado en Etapa 6, usa <details>/<summary> nativos
  -----------------------------------------------------------------------
  No requiere JavaScript — el elemento <details> del navegador ya maneja
  abrir/cerrar de forma nativa, igual de accesible que el original.
  ======================================================================= */

.service-faq-list {margin-top: 2.5rem; /* mt-10 */ border-radius: 1rem; border: 1px solid var(--border); background-color: var(--card); padding-inline: 1.5rem; /* px-6 */}
.service-faq-item {padding-block: 1.25rem; /* py-5 */ border-top: 1px solid var(--border);}
.service-faq-item:first-child {border-top: none; }
.service-faq-item__summary {display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; cursor: pointer; list-style: none;}
.service-faq-item__summary::-webkit-details-marker {display: none; }
.service-faq-item__q {font-size: 1rem; /* text-base */ font-weight: 600; color: var(--navy);}
.service-faq-item__toggle {margin-top: 0.25rem; height: 1.5rem; width: 1.5rem; /* h-6 w-6 */ flex-shrink: 0; border-radius: 9999px; background-color: var(--brand-blue-10); color: var(--brand-blue); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; transition: transform 0.2s ease;}
.service-faq-item[open] .service-faq-item__toggle { transform: rotate(45deg); }
.service-faq-item__a {margin-top: 0.75rem; font-size: 0.875rem; color: var(--foreground-80); line-height: 1.7;}

/* =======================================================================
  16. SERVICIO NO ENCONTRADO (404) — agregado en Etapa 6
  ======================================================================= */

.not-found-block {padding-block: 6rem; /* py-24 */ text-align: center;}
.not-found-block h1 {font-size: 1.875rem; /* text-3xl */ font-weight: 700;}
.not-found-block a {margin-top: 1rem; display: inline-block; color: var(--brand-blue);}
.not-found-block a:hover { text-decoration: underline; }

/* =======================================================================
  17. BLOG (agregado en Etapa 7, /blog/index.php)
  -----------------------------------------------------------------------
  Migración de blog.index.tsx y blog.$slug.tsx.
  ======================================================================= */

.blog-grid {display: grid; gap: 1.5rem; /* gap-6 */ grid-template-columns: 1fr;}
@media (min-width: 768px) {
 .blog-grid {grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
 .blog-grid {grid-template-columns: repeat(3, 1fr); }
}

.blog-card {display: block; border-radius: 0.75rem; /* rounded-xl */ border: 1px solid var(--border); background-color: var(--card); overflow: hidden; transition: border-color 0.2s ease;}
.blog-card:hover {border-color: var(--brand-blue); }

.blog-card__media {aspect-ratio: 16 / 9; /* aspect-video */ background: var(--gradient-hero); /* hero-gradient */ position: relative;}
.blog-card__category {position: absolute; top: 0.75rem; left: 0.75rem; border-radius: 9999px; background-color: rgb(255 255 255 / 0.95); padding: 0.25rem 0.625rem; font-size: 0.75rem; font-weight: 600; color: var(--navy);}

.blog-card__body {padding: 1.25rem; } /* p-5 */
.blog-card__title {font-weight: 600; color: var(--navy); transition: color 0.15s ease;}
.blog-card:hover .blog-card__title {color: var(--brand-blue); }
.blog-card__excerpt {margin-top: 0.5rem; font-size: 0.875rem; color: var(--muted-foreground);}
.blog-card__date {margin-top: 1rem; display: block; font-size: 0.75rem; color: var(--muted-foreground);}

.blog-quote-wrap {margin-top: 4rem; /* mt-16 */}

.blog-article {max-width: 48rem; /* max-w-3xl */}
.blog-article__date {font-size: 0.875rem; color: var(--muted-foreground);}
.blog-article__body {margin-top: 1.5rem; /* mt-6 */ display: flex; flex-direction: column; gap: 1.25rem; /* space-y-5 */ color: var(--foreground-80); line-height: 1.7;}
.blog-article__back {margin-top: 2.5rem; /* mt-10 */}
.blog-article__back a {font-size: 0.875rem; font-weight: 600; color: var(--brand-blue);}
.blog-article__back a:hover { text-decoration: underline; }

/* =======================================================================
  18. SUCURSALES + MAPA (agregado en Etapa 8, /sucursales/index.php)
  -----------------------------------------------------------------------
  Migración de sucursales.tsx + MexicoMap.tsx.
  ======================================================================= */

.sucursales-map-card {border-radius: 1rem; /* rounded-2xl */ background-color: #fff; box-shadow: var(--shadow-card); padding: 1rem; /* p-4 */ margin-bottom: 3rem; /* mb-12 */}
@media (min-width: 768px) {
 .sucursales-map-card {padding: 2rem; } /* md:p-8 */
}

.mexico-map__heading {text-align: center; font-size: 1.5rem; /* text-2xl */ font-weight: 900; /* font-black */ text-transform: uppercase; letter-spacing: 0.15em; color: var(--navy); margin-bottom: 1.5rem; /* mb-6 */}
@media (min-width: 768px) { .mexico-map__heading {font-size: 1.875rem; } } /* md:text-3xl */
@media (min-width: 1024px) { .mexico-map__heading {font-size: 2.25rem; } } /* lg:text-4xl */

.mexico-map__grid {display: grid; gap: 1.5rem; /* gap-6 */ grid-template-columns: 1fr;}
@media (min-width: 1024px) {
 .mexico-map__grid {grid-template-columns: 1fr 320px; } /* lg:grid-cols-[1fr_320px] */
}

.mexico-map__canvas-wrap {position: relative; width: 100%; overflow: hidden; border-radius: 0.75rem; /* rounded-xl */ border: 1px solid var(--border); box-shadow: var(--shadow-card); aspect-ratio: 4 / 3; background-color: var(--muted);}
@media (min-width: 1024px) {
 .mexico-map__canvas-wrap { aspect-ratio: auto; min-height: 480px; }
}
.mexico-map__canvas {position: absolute; inset: 0; height: 100%; width: 100%;}
.mexico-map__loading {position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.875rem; color: var(--muted-foreground); background-color: var(--muted); pointer-events: none;}
.mexico-map__loading[hidden] {display: none; }

.mexico-map__sidebar {border-radius: 0.75rem; /* rounded-xl */ border: 1px solid var(--border); background-color: var(--card); padding: 1rem; /* p-4 */}
@media (min-width: 768px) {
 .mexico-map__sidebar {padding: 1.25rem; } /* md:p-5 */
}
.mexico-map__sidebar-label {font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); margin-bottom: 0.75rem; /* mb-3 */}
.mexico-map__list {display: flex; flex-direction: column; gap: 0.5rem; /* space-y-2 */}
.mexico-map__list-btn {width: 100%; text-align: left; border-radius: 0.5rem; /* rounded-lg */ padding: 0.5rem 0.75rem; font-size: 0.875rem; font-weight: 500; transition: background-color 0.15s ease, color 0.15s ease; color: var(--foreground);}
.mexico-map__list-btn:hover {background-color: var(--muted); }
.mexico-map__list-btn--all.is-active {background-color: var(--navy); color: #fff;}
.mexico-map__list-btn--all.is-active:hover {background-color: var(--navy); }

.mexico-map__list-item {display: flex; align-items: stretch; gap: 0.25rem; /* gap-1 */}
.mexico-map__list-item .mexico-map__list-btn {flex: 1 1 auto; display: flex; align-items: center; gap: 0.5rem; font-weight: 400;}
.mexico-map__list-item .mexico-map__list-btn svg {height: 1rem; width: 1rem; flex-shrink: 0; }
.mexico-map__list-item .mexico-map__list-btn.is-active {background-color: var(--brand-red); color: #fff;}
.mexico-map__list-item .mexico-map__list-btn.is-active:hover {background-color: var(--brand-red); }
.mexico-map__list-city {font-weight: 600; }
.mexico-map__list-code {margin-left: auto; font-family: monospace; font-size: 0.625rem; /* text-[10px] */ color: var(--muted-foreground);}
.mexico-map__list-btn.is-active .mexico-map__list-code {color: var(--white-80); }

.mexico-map__list-external {display: inline-flex; align-items: center; justify-content: center; border-radius: 0.5rem; border: 1px solid var(--border); padding-inline: 0.5rem; transition: background-color 0.15s ease;}
.mexico-map__list-external:hover {background-color: var(--muted); }
.mexico-map__list-external svg {height: 0.875rem; width: 0.875rem; }

.mexico-map__sidebar-hint {margin-top: 1rem; font-size: 0.75rem; color: var(--muted-foreground);}

/* Tarjetas de sucursal (usan .services-grid como wrapper — mismo patrón
  grid gap-6 md:2col lg:3col que ya existe, sin duplicar esa definición) */
.branch-card {border-radius: 0.75rem; /* rounded-xl */ border: 1px solid var(--border); background-color: var(--card); overflow: hidden;}
.branch-card__header {background: var(--gradient-hero); /* hero-gradient */ height: 8rem; /* h-32 */ display: flex; align-items: flex-end; padding: 1.25rem; /* p-5 */}
.branch-card__code {font-family: monospace; font-size: 0.75rem; color: var(--white-70);}
.branch-card__city {font-size: 1.5rem; /* text-2xl */ font-weight: 700; color: #fff;}
.branch-card__body {padding: 1.25rem; /* p-5 */ display: flex; flex-direction: column; gap: 0.75rem; /* space-y-3 */ font-size: 0.875rem;}
.branch-card__row {display: flex; align-items: flex-start; gap: 0.5rem; color: var(--foreground-80);}
.branch-card__row--inline { align-items: center; }
.branch-card__row svg {height: 1rem; width: 1rem; color: var(--brand-blue); margin-top: 0.125rem; flex-shrink: 0;}
.branch-card__row--inline svg {margin-top: 0; }
.branch-card__hours {font-size: 0.75rem; color: var(--muted-foreground);}
.branch-card__link {display: inline-flex; align-items: center; gap: 0.25rem; margin-top: 0.5rem; font-size: 0.875rem; font-weight: 600; color: var(--brand-blue);}
.branch-card__link:hover { text-decoration: underline; }
.branch-card__link svg {height: 0.75rem; width: 0.75rem; }

/* =======================================================================
  19. CONTACTO (agregado en Etapa 9, /contacto/index.php)
  ======================================================================= */

.contact-card {border-radius: 1rem; /* rounded-2xl */ background-color: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-card); padding: 1.5rem; /* p-6 */ margin-top: -6rem; /* -mt-24 */ position: relative; z-index: 10;}
@media (min-width: 768px) {
 .contact-card {padding: 2.5rem; } /* md:p-10 */
}
.contact-card__title {font-size: 1.5rem; /* text-2xl */ font-weight: 700; color: var(--navy);}
@media (min-width: 768px) {
 .contact-card__title {font-size: 1.875rem; } /* md:text-3xl */
}
.contact-card__subtitle {margin-top: 0.25rem; font-size: 0.875rem; color: var(--muted-foreground);}

.contact-form {margin-top: 1.5rem; /* mt-6 */ display: grid; gap: 1.25rem; /* gap-5 */ grid-template-columns: 1fr;}
@media (min-width: 768px) {
 .contact-form {grid-template-columns: repeat(3, 1fr); }
}

/* Campos tipo <Field> (nombre, empresa, whatsapp, guía): label+input con gap-1.5 */
.contact-field {display: flex; flex-direction: column; gap: 0.375rem; /* gap-1.5 */}
.contact-field > span {font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground);}
.contact-field > input {height: 2.75rem; /* h-11 */ border-radius: var(--radius-md); border: 1px solid var(--input); background-color: var(--background); padding-inline: 0.75rem; font-size: 0.875rem; outline: none; font-family: inherit; color: inherit;}

/* Campos tipo bloque (motivo, mensaje): label separado + input con mt-2 */
.contact-form__block-label {display: block; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground);}
.contact-form__select,
.contact-form__textarea {margin-top: 0.5rem; /* mt-2 */ width: 100%; border-radius: var(--radius-md); border: 1px solid var(--input); background-color: var(--background); font-size: 0.875rem; outline: none; font-family: inherit; color: inherit;}
.contact-form__select {height: 2.75rem; padding-inline: 0.75rem; }
.contact-form__textarea {padding: 0.75rem; resize: vertical; }

.contact-field > input:focus,
.contact-form__select:focus,
.contact-form__textarea:focus {border-color: var(--brand-blue); box-shadow: 0 0 0 2px var(--brand-blue-20);}

.contact-form__spacer {display: none; }
@media (min-width: 768px) { .contact-form__spacer {display: block; } }

.contact-form__footer {grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; padding-top: 0.5rem;}

.contact-form__block-full {grid-column: 1 / -1; }

.contact-form__hint {font-size: 0.75rem; color: var(--muted-foreground);}
.contact-form__submit {display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md); background-color: var(--brand-red); padding-inline: 2rem; /* px-8 */ height: 3rem; /* h-12 */ font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: #fff; transition: opacity 0.15s ease;}
.contact-form__submit:hover {opacity: 0.9; }
.contact-form__success {grid-column: 1 / -1; font-size: 0.875rem; color: var(--whatsapp); font-weight: 500;}
.contact-form__success[hidden] {display: none; }

.contact-info-grid {margin-top: 2.5rem; /* mt-10 */ display: grid; gap: 1rem; /* gap-4 */ grid-template-columns: 1fr;}
@media (min-width: 768px) {
 .contact-info-grid {grid-template-columns: repeat(4, 1fr); }
}
.contact-info-card {display: flex; align-items: flex-start; gap: 0.75rem; border-radius: 0.75rem; /* rounded-xl */ border: 1px solid var(--border); background-color: var(--card); padding: 1.25rem; /* p-5 */ transition: border-color 0.2s ease;}
.contact-info-card--link:hover {border-color: var(--brand-blue); }
.contact-info-card svg {height: 1.5rem; width: 1.5rem; flex-shrink: 0; color: var(--brand-blue); }
.contact-info-card--whatsapp svg {color: var(--whatsapp); }
.contact-info-card__label {font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground);}
.contact-info-card__value {font-weight: 600; color: var(--navy);}

/* =======================================================================
  20. RASTREO (agregado en Etapa 9, /rastreo/index.php)
  ======================================================================= */

.rastreo-grid {display: grid; gap: 1.5rem; /* gap-6 */ grid-template-columns: 1fr;}
@media (min-width: 768px) {
 .rastreo-grid {grid-template-columns: repeat(2, 1fr); }
}

.carrier-panel {border-radius: 1rem; /* rounded-2xl */ border: 1px solid var(--border); border-top-width: 4px; background-color: var(--card); padding: 1.5rem; /* p-6 */ box-shadow: var(--shadow-card);}
@media (min-width: 768px) {
 .carrier-panel {padding: 2rem; } /* md:p-8 */
}
.carrier-panel__head {display: flex; align-items: center; justify-content: space-between; gap: 1rem;}
.carrier-panel__label {font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: var(--muted-foreground);}
.carrier-panel__name {margin-top: 0.25rem; font-size: 1.5rem; /* text-2xl */ font-weight: 700; color: var(--navy);}
.carrier-panel__logo-wrap {height: 4rem; width: 7rem; /* h-16 w-28 */ display: flex; align-items: center; justify-content: flex-end; flex-shrink: 0;}
.carrier-panel__logo {max-height: 3.5rem; /* max-h-14 */ width: auto; object-fit: contain;}
.carrier-panel__form {margin-top: 1.5rem; }
.carrier-panel__form label {font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground);}
.carrier-panel__input-wrap {margin-top: 0.5rem; position: relative;}
.carrier-panel__input-icon {position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); height: 1.25rem; width: 1.25rem; color: var(--muted-foreground); pointer-events: none;}
.carrier-panel__input {width: 100%; height: 3rem; /* h-12 */ padding-left: 2.75rem; /* pl-11 */ padding-right: 0.75rem; border-radius: var(--radius-md); border: 1px solid var(--input); background-color: var(--background); font-size: 0.875rem; outline: none; font-family: inherit; color: inherit;}
.carrier-panel__input:focus {box-shadow: 0 0 0 2px var(--brand-blue-20);}
.carrier-panel__submit {margin-top: 1rem; /* mt-4 */ width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: var(--radius-md); padding-inline: 1.5rem; height: 3rem; /* h-12 */ font-size: 0.875rem; font-weight: 700; text-transform: uppercase; color: #fff; transition: opacity 0.15s ease;}
.carrier-panel__submit:hover {opacity: 0.9; }
.carrier-panel__wa-link {margin-top: 1rem; /* mt-4 */ display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 600; color: var(--whatsapp);}
.carrier-panel__wa-link:hover { text-decoration: underline; }
.carrier-panel__wa-link svg {height: 1rem; width: 1rem; }

.rastreo-how-it-works {margin-top: 3rem; /* mt-12 */ border-radius: 1rem; /* rounded-2xl */ background-color: var(--navy); color: #fff; padding: 1.5rem; /* p-6 */}
@media (min-width: 768px) {
 .rastreo-how-it-works {padding: 2.5rem; } /* md:p-10 */
}
.rastreo-how-it-works h3 {font-size: 1.25rem; /* text-xl */ font-weight: 700;}
@media (min-width: 768px) {
 .rastreo-how-it-works h3 {font-size: 1.5rem; } /* md:text-2xl */
}
.rastreo-steps {margin-top: 1.5rem; /* mt-6 */ display: grid; gap: 1.5rem; /* gap-6 */ grid-template-columns: 1fr;}
@media (min-width: 768px) {
 .rastreo-steps {grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
 .rastreo-steps {grid-template-columns: repeat(4, 1fr); }
}
.rastreo-step {position: relative; }
.rastreo-step__head {display: flex; align-items: center; gap: 0.75rem;}
.rastreo-step__icon-wrap {display: inline-flex; align-items: center; justify-content: center; height: 2.5rem; width: 2.5rem; /* h-10 w-10 */ border-radius: 9999px; background-color: var(--white-10); border: 1px solid var(--white-20);}
.rastreo-step__icon-wrap svg {height: 1.25rem; width: 1.25rem; }
.rastreo-step__badge {font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--brand-red);}
.rastreo-step__title {margin-top: 0.75rem; font-weight: 600;}
.rastreo-step__desc {margin-top: 0.25rem; font-size: 0.875rem; color: var(--white-70, rgb(255 255 255 / 0.75));}
.rastreo-footnote {margin-top: 2rem; /* mt-8 */ font-size: 0.75rem; color: var(--white-60, rgb(255 255 255 / 0.6));}

/* =======================================================================
  21. CONVENIOS (agregado en Etapa 10, /convenios/index.php)
  ======================================================================= */

.convenios-grid {display: grid; gap: 1.5rem; /* gap-6 */ grid-template-columns: 1fr; max-width: 48rem; /* max-w-3xl */ margin-inline: auto;}
@media (min-width: 640px) {
 .convenios-grid {grid-template-columns: repeat(2, 1fr); }
}
.convenios-card {display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 1rem; /* rounded-2xl */ border: 1px solid var(--border); background-color: #fff; padding: 2.5rem; /* p-10 */ box-shadow: var(--shadow-card); transition: border-color 0.2s ease;}
.convenios-card:hover {border-color: var(--brand-blue); }
.convenios-card img {height: 4rem; /* h-16 */ width: auto; object-fit: contain;}
.convenios-card p {margin-top: 1.5rem; /* mt-6 */ font-size: 0.875rem; text-align: center; color: var(--muted-foreground);}
.convenios-quote-wrap {margin-top: 4rem; /* mt-16 */ max-width: 64rem; /* max-w-5xl */ margin-inline: auto;}

/* =======================================================================
  22. FAQ (agregado en Etapa 10, /faq/index.php)
  -----------------------------------------------------------------------
  Acordeón nativo <details>/<summary>, igual que en Servicios (Etapa 6) —
  sin JavaScript. Estilo propio (toggle en rojo, no en azul) porque así
  está en faq.tsx, distinto del toggle de FAQ dentro de un servicio.
  ======================================================================= */

.faq-page-list {max-width: 48rem; /* max-w-3xl */}
.faq-item {padding-block: 1.25rem; /* py-5 */ border-top: 1px solid var(--border);}
.faq-item:first-child {border-top: none; }
.faq-item__summary {display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; cursor: pointer; list-style: none;}
.faq-item__summary::-webkit-details-marker {display: none; }
.faq-item__q {font-size: 1.125rem; /* text-lg */ font-weight: 600; color: var(--navy);}
.faq-item__toggle {margin-top: 0.25rem; height: 1.5rem; width: 1.5rem; flex-shrink: 0; border-radius: 9999px; background-color: var(--brand-red-10); color: var(--brand-red); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; transition: transform 0.2s ease;}
.faq-item[open] .faq-item__toggle { transform: rotate(45deg); }
.faq-item__a {margin-top: 0.75rem; font-size: 0.875rem; color: var(--foreground-80); line-height: 1.7;}

/* =======================================================================
  23. POLÍTICAS DE ENVÍOS (agregado en Etapa 10, /politicas-envios/index.php)
  -----------------------------------------------------------------------
  Reutiliza .policy-section (Etapa 6) para cada una de las 16 secciones —
  no se duplica ese CSS.
  ======================================================================= */

.policies-toc {position: sticky; top: 4rem; /* top-16, justo debajo del header sticky (h-16) */ z-index: 30; border-block: 1px solid var(--border); background-color: var(--background-95); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);}
.policies-toc__inner {padding-block: 0.75rem; }
.policies-toc__row {display: flex; align-items: center; gap: 0.75rem;}
.policies-toc__label {display: none; align-items: center; gap: 0.5rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; color: var(--brand-red); flex-shrink: 0;}
.policies-toc__label svg {height: 1rem; width: 1rem; }
@media (min-width: 768px) {
 .policies-toc__label {display: inline-flex; }
}
.policies-toc__pills {display: flex; gap: 0.5rem; overflow-x: auto; margin-inline: -0.25rem; padding-inline: 0.25rem; scrollbar-width: none; /* Firefox */}
.policies-toc__pills::-webkit-scrollbar {display: none; } /* Chrome/Safari */
.policies-toc__pill {flex-shrink: 0; border-radius: 9999px; border: 1px solid var(--border); background-color: var(--card); padding: 0.375rem 0.875rem; font-size: 0.75rem; font-weight: 600; color: var(--foreground-80); white-space: nowrap; transition: border-color 0.15s ease, color 0.15s ease;}
.policies-toc__pill:hover {border-color: var(--brand-red); color: var(--brand-red);}

.policies-section-list {padding-block: 3.5rem; /* py-14 */ display: flex; flex-direction: column; gap: 2rem; /* space-y-8 */ max-width: 56rem; /* max-w-4xl */ margin-inline: auto;}
.policies-updated {font-size: 0.75rem; color: var(--muted-foreground);}

/* =======================================================================
  24. PRIVACIDAD (agregado en Etapa 10, /privacidad/index.php)
  ======================================================================= */

.legal-doc {padding-block: 3rem; /* py-12 */ max-width: 48rem; /* max-w-3xl */ margin-inline: auto; display: flex; flex-direction: column; gap: 1.5rem; /* space-y-6 */ color: var(--foreground-80); line-height: 1.7; font-size: 0.875rem;}
.legal-doc__updated {font-size: 0.75rem; color: var(--muted-foreground);}
.legal-doc h2 {font-size: 1.125rem; /* text-lg */ font-weight: 700; color: var(--navy);}
.legal-doc p {margin-top: 0.5rem; }
.legal-doc ul {margin-top: 0.25rem; list-style: disc; padding-left: 1.5rem; display: flex; flex-direction: column; gap: 0.25rem;}
.legal-doc a {color: var(--brand-blue); text-decoration: underline; }

/* =======================================================================
  25. HOME (agregado en Etapa 12B, /index.php)
  -----------------------------------------------------------------------
  Migración de src/routes/index.tsx (HeroCarousel, TrackerCard,
  SectionHeading y todas las secciones de Home).
  ======================================================================= */

/* --- Utilidad line-clamp (Tailwind core, sin plugin) --- */
.line-clamp-2 {display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 {display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* --- Animación de entrada del texto del hero (equivalente a
  "animate-in fade-in slide-in-from-bottom-4" de tw-animate-css) --- */
@keyframes home-hero-fade-slide-in {
 from {opacity: 0; transform: translateY(1rem); }
 to  {opacity: 1; transform: translateY(0); }
}
.home-hero__animate-in {
 animation: home-hero-fade-slide-in 700ms ease-out;
}

/* --- Hero / carrusel --- */
.home-hero {position: relative; overflow: hidden; background-color: var(--navy); color: #fff;}
.home-hero__stage {position: relative; height: 560px;}
@media (min-width: 768px) { .home-hero__stage {height: 620px; } }

.home-hero__slide {position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 1000ms ease;}
.home-hero__slide.is-active { opacity: 1; pointer-events: auto;}
.home-hero__slide img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;}
.home-hero__slide-overlay {position: absolute; inset: 0; background: linear-gradient(to right, var(--navy-95) 0%, oklch(0.38 0.11 255 / 0.75) 50%, oklch(0.38 0.11 255 / 0.30) 100%);}

.home-hero__inner {position: relative; height: 100%; display: flex; align-items: center;}
.home-hero__content {max-width: 42rem; } /* max-w-2xl */

.home-hero__badge {display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 9999px; background-color: var(--brand-red); padding: 0.25rem 0.75rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;}
.home-hero__badge svg {height: 0.875rem; width: 0.875rem; }

.home-hero__title {margin-top: 1.25rem; font-size: 2.25rem; /* text-4xl */ font-weight: 700; line-height: 1.05;}
@media (min-width: 768px) { .home-hero__title {font-size: 3.75rem; } } /* md:text-6xl */

.home-hero__subtitle {margin-top: 1.25rem; font-size: 1.125rem; color: var(--white-80, rgb(255 255 255 / 0.85)); max-width: 36rem; /* max-w-xl */}

.home-hero__actions {margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: 0.75rem;}
.home-hero__btn-primary {display: inline-flex; align-items: center; gap: 0.5rem; border-radius: var(--radius-md); background-color: var(--brand-red); padding: 0.875rem 1.75rem; font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: #fff; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.2); transition: opacity 0.15s ease;}
.home-hero__btn-primary:hover {opacity: 0.9; }
.home-hero__btn-secondary {display: inline-flex; align-items: center; gap: 0.5rem; border-radius: var(--radius-md); border: 1px solid var(--white-20, rgb(255 255 255 / 0.4)); padding: 0.875rem 1.5rem; font-size: 0.875rem; font-weight: 600; color: #fff; transition: background-color 0.15s ease;}
.home-hero__btn-secondary:hover {background-color: var(--white-10); }

.home-hero__stats {margin-top: 2.5rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; max-width: 36rem;}
.home-hero__stats dt {font-size: 1.5rem; font-weight: 700; }
@media (min-width: 768px) { .home-hero__stats dt {font-size: 1.875rem; } }
.home-hero__stats dd {font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--white-70, rgb(255 255 255 / 0.7)); margin-top: 0.25rem;}

.home-hero__logo {display: none; position: absolute; right: 2rem; top: 50%; transform: translateY(-50%); height: 10rem; width: auto; opacity: 0.95; filter: drop-shadow(0 10px 20px rgb(0 0 0 / 0.3)); pointer-events: none;}
@media (min-width: 1024px) { .home-hero__logo {display: block; } }
@media (min-width: 1280px) { .home-hero__logo { right: 4rem; height: 14rem; } }

.home-hero__dots {position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); display: flex; gap: 0.5rem; z-index: 20; /* Etapa 12B: subido de 10 a 20 — ver informe, hallazgo de superposición con el QuoteForm */}
.home-hero__dot {height: 0.5rem; width: 0.5rem; border-radius: 9999px; background-color: var(--white-20, rgb(255 255 255 / 0.4)); transition: all 0.2s ease; border: none; cursor: pointer; padding: 0;}
.home-hero__dot:hover {background-color: var(--white-70, rgb(255 255 255 / 0.7)); }
.home-hero__dot.is-active {width: 2rem; background-color: var(--brand-red);}

/* --- QuoteForm superpuesto debajo del hero --- */
.home-quote-wrap {margin-top: -2.5rem; /* -mt-10 */ position: relative; z-index: 10;}

/* --- Encabezado de sección genérico (SectionHeading) --- */
.section-heading {max-width: 42rem; }
.section-heading__eyebrow {font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: var(--brand-red);}
.section-heading__title {margin-top: 0.5rem; font-size: 1.875rem; font-weight: 700; color: var(--navy);}
@media (min-width: 768px) { .section-heading__title {font-size: 2.25rem; } }
.section-heading__subtitle {margin-top: 0.75rem; color: var(--muted-foreground);}
.section-heading-row {display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 2.5rem;}

/* --- Servicios (Home) --- */
.home-services-grid {margin-top: 3rem; display: grid; gap: 1.25rem; grid-template-columns: 1fr;}
@media (min-width: 640px) { .home-services-grid {grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .home-services-grid {grid-template-columns: repeat(4, 1fr); } }

.home-service-card {display: block; border-radius: 0.75rem; border: 1px solid var(--border); background-color: var(--card); padding: 1.5rem; box-shadow: var(--shadow-card); transition: border-color 0.2s ease, transform 0.2s ease;}
.home-service-card:hover {border-color: var(--brand-red); transform: translateY(-0.25rem); }
.home-service-card__icon {display: inline-flex; align-items: center; justify-content: center; height: 2.75rem; width: 2.75rem; border-radius: 0.5rem; background-color: var(--brand-red-10); color: var(--brand-red);}
.home-service-card__icon svg {height: 1.25rem; width: 1.25rem; }
.home-service-card__title {margin-top: 1rem; font-size: 1rem; font-weight: 600; color: var(--navy);}
.home-service-card__desc {margin-top: 0.375rem; font-size: 0.875rem; color: var(--muted-foreground);}
.home-service-card__link {margin-top: 1rem; display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.875rem; font-weight: 500; color: var(--brand-red);}
.home-service-card__link svg {height: 0.875rem; width: 0.875rem; }

/* --- Mapa de cobertura (envoltorio propio de Home; el bloque interno
  .mexico-map es EXACTAMENTE el mismo que ya usa Sucursales) --- */
.home-map-wrap {margin-top: 2.5rem; border-radius: 1rem; background-color: #fff; box-shadow: var(--shadow-card); padding: 1rem;}
@media (min-width: 768px) { .home-map-wrap {padding: 2rem; } }

/* --- Estaciones y horarios --- */
.home-stations-grid {display: grid; gap: 1rem; grid-template-columns: 1fr;}
@media (min-width: 640px) { .home-stations-grid {grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .home-stations-grid {grid-template-columns: repeat(3, 1fr); } }

.home-station-card {border-radius: 0.75rem; border: 1px solid var(--border); background-color: var(--card); padding: 1.25rem; transition: border-color 0.2s ease;}
.home-station-card:hover {border-color: var(--brand-red); }
.home-station-card__top {display: flex; align-items: center; justify-content: space-between;}
.home-station-card__left {display: flex; align-items: center; gap: 0.75rem;}
.home-station-card__code {display: inline-flex; align-items: center; justify-content: center; height: 2.25rem; width: 3rem; border-radius: 0.25rem; background-color: var(--navy); font-size: 0.75rem; font-weight: 700; color: #fff;}
.home-station-card__city {font-weight: 700; color: var(--navy); }
.home-station-card__top svg {height: 1rem; width: 1rem; color: var(--brand-red); }
.home-station-card__addr {margin-top: 0.75rem; font-size: 0.75rem; color: var(--muted-foreground);}
.home-station-card__hours {margin-top: 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--navy); display: flex; align-items: center; gap: 0.375rem;}
.home-station-card__hours svg {height: 0.875rem; width: 0.875rem; }

/* --- ¿Por qué COECSA? --- */
.home-why-grid {margin-top: 3rem; display: grid; gap: 1.5rem; grid-template-columns: 1fr;}
@media (min-width: 768px) { .home-why-grid {grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .home-why-grid {grid-template-columns: repeat(5, 1fr); } }

.home-why-card {position: relative; border-radius: 1rem; border: 1px solid var(--border); background-color: var(--card); padding: 2rem; text-align: center; transition: border-color 0.2s ease, transform 0.2s ease;}
.home-why-card:hover {border-color: var(--brand-red); transform: translateY(-0.25rem); }
.home-why-card__icon {margin-inline: auto; display: inline-flex; align-items: center; justify-content: center; height: 5rem; width: 5rem; border-radius: 1rem; background: linear-gradient(to bottom right, var(--navy), var(--brand-blue)); color: #fff; box-shadow: var(--shadow-card); transition: transform 0.2s ease;}
.home-why-card:hover .home-why-card__icon { transform: scale(1.1); }
.home-why-card__icon svg {height: 2.25rem; width: 2.25rem; }
.home-why-card__title {margin-top: 1.25rem; font-weight: 700; color: var(--navy); }
.home-why-card__desc {margin-top: 0.5rem; font-size: 0.875rem; color: var(--muted-foreground); }

.home-stats-row {margin-top: 3rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; max-width: 56rem; margin-inline: auto;}
@media (min-width: 768px) { .home-stats-row {grid-template-columns: repeat(4, 1fr); } }
.home-stats-row__item {text-align: center; border-radius: 0.75rem; background-color: #fff; padding-block: 1.25rem;}
.home-stats-row__num {font-size: 1.5rem; font-weight: 700; color: var(--brand-red); }
@media (min-width: 768px) { .home-stats-row__num {font-size: 1.875rem; } }
.home-stats-row__label {font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); margin-top: 0.25rem;}

/* --- Rastreo dual (TrackerCard) --- */
.home-tracker-grid {margin-top: 2.5rem; display: grid; gap: 1.5rem; grid-template-columns: 1fr;}
@media (min-width: 768px) { .home-tracker-grid {grid-template-columns: repeat(2, 1fr); } }

.tracker-card {border-radius: 1rem; border-top-width: 4px; background-color: var(--card); box-shadow: var(--shadow-card); padding: 1.5rem;}
@media (min-width: 768px) { .tracker-card {padding: 2rem; } }
.tracker-card__head {display: flex; align-items: center; justify-content: space-between; gap: 1rem;}
.tracker-card__label {font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: var(--muted-foreground);}
.tracker-card__carrier {margin-top: 0.25rem; font-size: 1.25rem; font-weight: 700; color: var(--navy);}
@media (min-width: 768px) { .tracker-card__carrier {font-size: 1.5rem; } }
.tracker-card__prefix {margin-top: 0.25rem; font-size: 0.75rem; color: var(--muted-foreground);}
.tracker-card__prefix strong {font-weight: 700; color: var(--navy); }
.tracker-card__logo-wrap {height: 3.5rem; width: 6rem; display: flex; align-items: center; justify-content: flex-end; flex-shrink: 0;}
.tracker-card__logo {max-height: 3rem; width: auto; object-fit: contain; }
.tracker-card__form {margin-top: 1.25rem; }
.tracker-card__form label {font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground);}
.tracker-card__input {margin-top: 0.5rem; width: 100%; height: 3rem; padding-inline: 0.75rem; border-radius: var(--radius-md); border: 1px solid var(--input); background-color: var(--background); font-size: 0.875rem; outline: none; font-family: inherit; color: inherit;}
.tracker-card__input:focus {box-shadow: 0 0 0 2px var(--brand-blue-20); }
.tracker-card__error {margin-top: 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--brand-red);}
.tracker-card__error[hidden] {display: none; }
.tracker-card__submit {margin-top: 1rem; width: 100%; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md); height: 3rem; padding-inline: 1.5rem; font-size: 0.875rem; font-weight: 700; text-transform: uppercase; color: #fff; transition: opacity 0.15s ease;}
.tracker-card__submit:hover {opacity: 0.9; }

/* --- Banner Academia --- */
.home-academia-banner {margin-top: 2rem; border-radius: 0.75rem; border: 2px solid var(--brand-red); background-color: var(--card); padding: 1.5rem; display: flex; flex-direction: column; align-items: flex-start; gap: 1rem;}
@media (min-width: 768px) {
 .home-academia-banner {padding: 2rem; flex-direction: row; align-items: center; }
}
.home-academia-banner svg {height: 2.5rem; width: 2.5rem; color: var(--brand-red); flex-shrink: 0; }
.home-academia-banner__body {flex: 1 1 auto; }
.home-academia-banner__title {font-size: 1.125rem; font-weight: 700; color: var(--navy); }
.home-academia-banner__desc {margin-top: 0.25rem; font-size: 0.875rem; color: var(--muted-foreground); }
.home-academia-banner__cta {display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md); background-color: var(--brand-red); padding-inline: 1.25rem; height: 2.5rem; font-size: 0.875rem; font-weight: 700; text-transform: uppercase; color: #fff; flex-shrink: 0; transition: opacity 0.15s ease;}
.home-academia-banner__cta:hover {opacity: 0.9; }

/* --- Convenios y aliados (Partners) --- */
.home-partners-label {text-align: center; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: var(--muted-foreground);}
.home-partners-grid {margin-top: 2rem; display: grid; grid-template-columns: 1fr; gap: 1.5rem; max-width: 48rem; margin-inline: auto;}
@media (min-width: 640px) { .home-partners-grid {grid-template-columns: repeat(2, 1fr); } }
.home-partners-logo-box {display: flex; align-items: center; justify-content: center; height: 8rem; border-radius: 0.75rem; border: 1px solid var(--border); background-color: #fff; box-shadow: var(--shadow-card);}
.home-partners-logo-box img {height: 3.5rem; width: auto; object-fit: contain; }

/* --- Portal de Clientes (servicios en línea) --- */
.home-client-grid {display: grid; gap: 1.25rem; grid-template-columns: 1fr;}
@media (min-width: 640px) { .home-client-grid {grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .home-client-grid {grid-template-columns: repeat(4, 1fr); } }

.home-client-card {position: relative; display: block; border-radius: 0.75rem; border: 1px solid var(--border); background-color: var(--card); padding: 1.5rem; box-shadow: var(--shadow-card); transition: border-color 0.2s ease, transform 0.2s ease;}
.home-client-card:hover {border-color: var(--brand-red); transform: translateY(-0.25rem); }
.home-client-card__badge {position: absolute; top: -0.625rem; right: 1rem; border-radius: 9999px; background-color: var(--brand-red); color: #fff; font-size: 0.625rem; font-weight: 700; padding: 0.125rem 0.5rem;}
.home-client-card__icon {display: inline-flex; align-items: center; justify-content: center; height: 2.75rem; width: 2.75rem; border-radius: 0.5rem; background-color: var(--navy-5); color: var(--navy);}
.home-client-card__icon svg {height: 1.25rem; width: 1.25rem; }
.home-client-card__title {margin-top: 1rem; font-size: 1rem; font-weight: 600; color: var(--navy); line-height: 1.375;}
.home-client-card__desc {margin-top: 0.375rem; font-size: 0.875rem; color: var(--muted-foreground);}
.home-client-card__link {margin-top: 1rem; display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.875rem; font-weight: 500; color: var(--brand-red);}
.home-client-card__link svg {height: 0.875rem; width: 0.875rem; }

/* --- Instagram --- */
.instagram-feed-section {padding-block: 5rem; }
.instagram-feed__head {display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 2.5rem;}
.instagram-feed__eyebrow {font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: var(--brand-red);}
.instagram-feed__title {margin-top: 0.5rem; font-size: 1.875rem; font-weight: 700; color: var(--navy);}
@media (min-width: 768px) { .instagram-feed__title {font-size: 2.25rem; } }
.instagram-feed__desc {margin-top: 0.75rem; color: var(--muted-foreground); max-width: 42rem;}
.instagram-feed__cta {display: inline-flex; align-items: center; gap: 0.5rem; border-radius: var(--radius-md); background: linear-gradient(to right, #f09433, #dc2743, #bc1888); padding-inline: 1.25rem; height: 2.75rem; font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 0.05); transition: opacity 0.15s ease;}
.instagram-feed__cta:hover {opacity: 0.9; }
.instagram-feed__cta svg {height: 1rem; width: 1rem; }

.instagram-feed__frame {position: relative; border-radius: 1rem; border: 1px solid var(--border); background-color: var(--card); box-shadow: var(--shadow-card); overflow: hidden; min-height: 420px;}
.instagram-feed__loading {padding: 2rem; text-align: center; color: var(--muted-foreground); font-size: 0.875rem;}

.instagram-fallback {padding: 2rem; }
@media (min-width: 768px) { .instagram-fallback {padding: 3rem; } }
.instagram-fallback__grid {display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem;}
@media (min-width: 768px) {
 .instagram-fallback__grid {grid-template-columns: repeat(4, 1fr); gap: 1rem; }
}
.instagram-fallback__item {position: relative; aspect-ratio: 1 / 1; border-radius: 0.75rem; overflow: hidden; border: 1px solid var(--border); background: linear-gradient(to bottom right, var(--navy), var(--brand-blue), var(--brand-red)); display: flex; align-items: center; justify-content: center;}
.instagram-fallback__item svg {height: 2rem; width: 2rem; color: rgb(255 255 255 / 0.9); transition: transform 0.2s ease;}
.instagram-fallback__item:hover svg { transform: scale(1.1); }
.instagram-fallback__more {margin-top: 2rem; display: flex; align-items: center; justify-content: center;}
.instagram-fallback__link {display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 600; color: var(--brand-red);}
.instagram-fallback__link:hover { text-decoration: underline; }
.instagram-fallback__link svg {height: 1rem; width: 1rem; }

/* --- Blog (Home) — SÍ muestra imágenes reales, a diferencia de /blog --- */
.home-blog-grid {
 display: grid;
 gap: 1.5rem;
 grid-template-columns: 1fr;
}
@media (min-width: 768px) { .home-blog-grid {grid-template-columns: repeat(3, 1fr); } }

.home-blog-card {display: block; border-radius: 0.75rem; border: 1px solid var(--border); background-color: var(--card); overflow: hidden; transition: border-color 0.2s ease, transform 0.2s ease;}
.home-blog-card:hover {border-color: var(--brand-red); transform: translateY(-0.25rem); }
.home-blog-card__media {aspect-ratio: 16 / 9; position: relative; overflow: hidden;}
.home-blog-card__media img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease;}
.home-blog-card:hover .home-blog-card__media img { transform: scale(1.05); }
.home-blog-card__category {position: absolute; top: 0.75rem; left: 0.75rem; border-radius: 9999px; background-color: rgb(255 255 255 / 0.95); padding: 0.25rem 0.625rem; font-size: 0.75rem; font-weight: 600; color: var(--navy); box-shadow: 0 1px 2px rgb(0 0 0 / 0.1);}
.home-blog-card__body {padding: 1.25rem; }
.home-blog-card__title {
 font-weight: 600;
 color: var(--navy);
 transition: color 0.15s ease;
}
.home-blog-card:hover .home-blog-card__title {color: var(--brand-red); }
.home-blog-card__excerpt {
 margin-top: 0.5rem;
 font-size: 0.875rem;
 color: var(--muted-foreground);
}
.home-blog-card__footer {margin-top: 1rem; display: flex; align-items: center; justify-content: space-between; font-size: 0.75rem; color: var(--muted-foreground);}
.home-blog-card__more {font-weight: 600; color: var(--brand-red); }

/* =======================================================================
  26. ACADEMIA (agregado en Etapa 13B, /academia/index.php)
  ======================================================================= */

.academia-logo-wrap {padding-top: 3rem; /* pt-12 */ display: flex; justify-content: center;}
.academia-logo-wrap img {height: 6rem; /* h-24 */ width: auto;}
@media (min-width: 768px) {
 .academia-logo-wrap img {height: 8rem; } /* md:h-32 */
}

.academia-grid {
 display: grid;
 gap: 2.5rem; /* gap-10 */
 grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
 .academia-grid {grid-template-columns: repeat(3, 1fr); }
}

.academia-courses {display: flex; flex-direction: column; gap: 1.5rem; /* space-y-6 */}
@media (min-width: 1024px) {
 .academia-courses {grid-column: span 2 / span 2; } /* lg:col-span-2 */
}

.academia-courses-grid {display: grid; gap: 1rem; /* gap-4 */ grid-template-columns: 1fr;}
@media (min-width: 640px) {
 .academia-courses-grid {grid-template-columns: repeat(2, 1fr); }
}

.academia-course-card {border-radius: 0.75rem; /* rounded-xl */ border: 1px solid var(--border); background-color: var(--card); padding: 1.5rem; /* p-6 */}
.academia-course-card svg {height: 1.5rem; width: 1.5rem; /* h-6 w-6 */ color: var(--brand-red);}
.academia-course-card h3 {margin-top: 0.75rem; /* mt-3 */ font-weight: 700; color: var(--navy);}
.academia-course-card p {margin-top: 0.375rem; /* mt-1.5 */ font-size: 0.875rem; color: var(--muted-foreground);}

.academia-access-panel {border-radius: 1rem; /* rounded-2xl */ background-color: var(--navy); color: #fff; padding: 2rem; /* p-8 */}
@media (min-width: 1024px) {
 .academia-access-panel {
position: sticky;
top: 6rem; /* lg:top-24 */
 }
}
.academia-access-panel__logo {height: 4rem; /* h-16 */ width: auto; background-color: rgb(255 255 255 / 0.95); border-radius: 0.5rem; /* rounded-lg */ padding: 0.5rem; /* p-2 */}
.academia-access-panel h2 {margin-top: 1rem; /* mt-4 */ font-size: 1.5rem; /* text-2xl */ font-weight: 700;}
.academia-access-panel__desc {margin-top: 0.5rem; /* mt-2 */ font-size: 0.875rem; color: var(--white-80, rgb(255 255 255 / 0.8));}

.academia-form {margin-top: 1.5rem; /* mt-6 */ display: flex; flex-direction: column; gap: 0.75rem; /* space-y-3 */}
.academia-form input {width: 100%; height: 2.75rem; /* h-11 */ border-radius: var(--radius-md); background-color: rgb(255 255 255 / 0.1); border: 1px solid rgb(255 255 255 / 0.2); padding-inline: 0.75rem; font-size: 0.875rem; color: #fff; outline: none; font-family: inherit;}
.academia-form input::placeholder {color: rgb(255 255 255 / 0.5); }
.academia-form input:focus {border-color: #fff; }

.academia-form__submit {width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: var(--radius-md); background-color: var(--brand-red); padding-inline: 1.25rem; height: 2.75rem; /* h-11 */ font-size: 0.875rem; font-weight: 700; text-transform: uppercase; color: #fff; transition: opacity 0.15s ease;}
.academia-form__submit:hover {opacity: 0.9; }
.academia-form__submit svg {height: 1rem; width: 1rem; }

.academia-access-panel__hint {margin-top: 1rem; /* mt-4 */ font-size: 0.75rem; color: var(--white-60, rgb(255 255 255 / 0.6));}

.academia-quote-wrap {
 padding-bottom: 5rem; /* pb-20 */
}

/* =======================================================================
  27. CLIENTES (agregado en Etapa 14B, /clientes/index.php)
  ======================================================================= */

.clientes-services-grid {display: grid; gap: 1.5rem; /* gap-6 */ grid-template-columns: 1fr;}
@media (min-width: 768px) { .clientes-services-grid {grid-template-columns: repeat(2, 1fr); } }

.clientes-service-card {position: relative; border-radius: 1rem; /* rounded-2xl */ border: 1px solid var(--border); background-color: var(--card); padding: 2rem; /* p-8 */ box-shadow: var(--shadow-card); transition: border-color 0.2s ease, transform 0.2s ease;}
.clientes-service-card:hover {border-color: var(--brand-red); transform: translateY(-0.25rem); }
.clientes-service-card__badge {position: absolute; top: -0.75rem; left: 1.5rem; border-radius: 9999px; background-color: var(--brand-red); color: #fff; font-size: 0.75rem; font-weight: 700; padding: 0.25rem 0.625rem;}
.clientes-service-card__inner {display: flex; align-items: flex-start; gap: 1rem;}
.clientes-service-card__icon {display: inline-flex; align-items: center; justify-content: center; height: 3.5rem; width: 3.5rem; /* h-14 w-14 */ border-radius: 0.75rem; background: linear-gradient(to bottom right, var(--navy), var(--brand-blue)); color: #fff; flex-shrink: 0;}
.clientes-service-card__icon svg {height: 1.5rem; width: 1.5rem; }
.clientes-service-card__body {flex: 1 1 auto; }
.clientes-service-card__title {font-size: 1.125rem; font-weight: 700; color: var(--navy); }
.clientes-service-card__desc {margin-top: 0.5rem; font-size: 0.875rem; color: var(--muted-foreground); }
.clientes-service-card__actions {margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.clientes-service-card__link {display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; font-weight: 700; color: var(--brand-red); transition: gap 0.2s ease;}
.clientes-service-card__link:hover {gap: 0.625rem; }
.clientes-service-card__link svg {height: 0.875rem; width: 0.875rem; }

.clientes-security-banner {margin-top: 3rem; /* mt-12 */ border-radius: 1rem; background-color: var(--navy); color: #fff; padding: 2rem; /* p-8 */ display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; /* gap-6 */}
@media (min-width: 768px) {
 .clientes-security-banner {padding: 2.5rem; flex-direction: row; align-items: center; }
}
.clientes-security-banner svg {height: 3rem; width: 3rem; color: var(--brand-red); flex-shrink: 0; }
.clientes-security-banner__body {flex: 1 1 auto; }
.clientes-security-banner__title {font-size: 1.25rem; font-weight: 700; }
.clientes-security-banner__desc {margin-top: 0.5rem; font-size: 0.875rem; color: var(--white-80, rgb(255 255 255 / 0.8)); }
.clientes-security-banner__link {display: inline-flex; align-items: center; border-radius: var(--radius-md); border: 1px solid var(--white-20, rgb(255 255 255 / 0.4)); padding: 0.625rem 1.25rem; font-size: 0.875rem; font-weight: 600; color: #fff; flex-shrink: 0; transition: background-color 0.15s ease;}
.clientes-security-banner__link:hover {background-color: var(--white-10); }

.clientes-registro-grid {margin-top: 4rem; /* mt-16 */ display: grid; gap: 2rem; /* gap-8 */ grid-template-columns: 1fr; align-items: stretch;}
@media (min-width: 1024px) { .clientes-registro-grid {grid-template-columns: repeat(2, 1fr); } }

.clientes-registro-card {border-radius: 1rem; border: 1px solid var(--border); background-color: var(--card); padding: 2rem; /* p-8 */ box-shadow: var(--shadow-card);}
@media (min-width: 768px) { .clientes-registro-card {padding: 2.5rem; } }
.clientes-registro-card__eyebrow {font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: var(--brand-red);}
.clientes-registro-card__title {margin-top: 0.5rem; font-size: 1.5rem; font-weight: 700; color: var(--navy);}
@media (min-width: 768px) { .clientes-registro-card__title {font-size: 1.875rem; } }
.clientes-registro-card__desc {margin-top: 0.75rem; font-size: 0.875rem; color: var(--muted-foreground); }

.clientes-form {margin-top: 1.5rem; /* mt-6 */ display: flex; flex-direction: column; gap: 0.75rem; /* space-y-3 */}
.clientes-form__row {display: grid; gap: 0.75rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .clientes-form__row {grid-template-columns: repeat(2, 1fr); } }
.clientes-form input[type="text"],
.clientes-form input[type="tel"],
.clientes-form input[type="email"],
.clientes-form input[type="password"] {width: 100%; height: 2.75rem; /* h-11 */ border-radius: var(--radius-md); border: 1px solid var(--input); background-color: var(--background); padding-inline: 0.75rem; font-size: 0.875rem; outline: none; font-family: inherit; color: inherit;}
.clientes-form input:focus {border-color: var(--brand-blue); box-shadow: 0 0 0 2px var(--brand-blue-20);}
.clientes-form__checkbox-label {display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.75rem; color: var(--muted-foreground);}
.clientes-form__checkbox-label input {margin-top: 0.125rem; }
.clientes-form__checkbox-label a { text-decoration: underline; }
.clientes-form__submit {width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: var(--radius-md); background-color: var(--brand-red); padding-inline: 1.25rem; height: 2.75rem; font-size: 0.875rem; font-weight: 700; text-transform: uppercase; color: #fff; transition: opacity 0.15s ease;}
.clientes-form__submit:hover {opacity: 0.9; }

.clientes-divider {margin-block: 1.5rem; /* my-6 */ display: flex; align-items: center; gap: 0.75rem; font-size: 0.75rem; color: var(--muted-foreground);}
.clientes-divider__line {height: 1px; flex: 1 1 auto; background-color: var(--border); }

.clientes-google-btn {width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem; border-radius: var(--radius-md); border: 1px solid var(--input); background-color: var(--background); height: 2.75rem; padding-inline: 1.25rem; font-size: 0.875rem; font-weight: 600; color: var(--foreground); transition: background-color 0.15s ease;}
.clientes-google-btn:hover {background-color: var(--muted); }
.clientes-google-btn svg {height: 1.25rem; width: 1.25rem; }

.clientes-login-hint {margin-top: 1rem; font-size: 0.75rem; text-align: center; color: var(--muted-foreground);}
.clientes-login-hint a {font-weight: 600; color: var(--brand-blue); }
.clientes-login-hint a:hover { text-decoration: underline; }

.clientes-benefits-panel {border-radius: 1rem; background: linear-gradient(to bottom right, var(--navy), var(--brand-blue)); color: #fff; padding: 2rem; /* p-8 */ display: flex; flex-direction: column; justify-content: center;}
@media (min-width: 768px) { .clientes-benefits-panel {padding: 2.5rem; } }
.clientes-benefits-panel__eyebrow {font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: var(--white-70, rgb(255 255 255 / 0.7));}
.clientes-benefits-panel__title {margin-top: 0.5rem; font-size: 1.5rem; font-weight: 700;}
@media (min-width: 768px) { .clientes-benefits-panel__title {font-size: 1.875rem; } }
.clientes-benefits-list {margin-top: 1.5rem; /* mt-6 */ display: flex; flex-direction: column; gap: 0.75rem; /* space-y-3 */ font-size: 0.875rem; color: var(--white-80, rgb(255 255 255 / 0.9));}
.clientes-benefits-list li {display: flex; gap: 0.75rem; }
.clientes-benefits-list li span {color: var(--brand-red); font-weight: 700; }
.clientes-benefits-panel__submit {margin-top: 2rem; /* mt-8 */ width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: var(--radius-md); background-color: var(--brand-yellow); padding-inline: 1.25rem; height: 3rem; /* h-12 */ font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--brand-yellow-fg); transition: opacity 0.15s ease;}
.clientes-benefits-panel__submit:hover {opacity: 0.9; }
.clientes-benefits-panel__submit svg {height: 1rem; width: 1rem; }
.clientes-benefits-panel__hint {margin-top: 0.5rem; font-size: 0.75rem; color: var(--white-70, rgb(255 255 255 / 0.7)); text-align: center;}

/* =======================================================================
  28. 404 GLOBAL (agregado en Etapa 16B, /404.php)
  -----------------------------------------------------------------------
  Migración de NotFoundComponent en src/routes/__root.tsx. A diferencia
  de todas las demás páginas, este componente NO usa SiteLayout — no
  tiene Header, Footer ni WhatsAppFab en el React original. Se preserva
  así, sin agregarlos.
  ======================================================================= */

.not-found-page {min-height: 100vh; display: flex; align-items: center; justify-content: center; background-color: var(--background); padding-inline: 1rem;}
.not-found-page__inner {max-width: 28rem; /* max-w-md */ text-align: center;}
.not-found-page__code {font-size: 4.5rem; /* text-7xl */ font-weight: 700; color: var(--foreground);}
.not-found-page__title {margin-top: 1rem; font-size: 1.25rem; font-weight: 600; color: var(--foreground);}
.not-found-page__desc {margin-top: 0.5rem; font-size: 0.875rem; color: var(--muted-foreground);}
.not-found-page__cta {margin-top: 1.5rem; }
.not-found-page__btn {display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md); background-color: var(--primary); padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500; color: var(--primary-foreground); transition: background-color 0.15s ease;}
.not-found-page__btn:hover { background-color: oklch(0.38 0.11 255 / 0.9); /* hover:bg-primary/90 */}
label.error{ color: red;}
.loading-overlay{ z-index: 14 !important;}
.site-header__inner{padding-inline: 0;}
.site-header__login-panel.menucompacto{ border-radius: calc(8px * 1.5); padding: 0; min-width: 230px; width: max-content;}
.menucompacto a{ color: black !important;}
.ul_li_ag li{font-size: 13px; color: #536b87; list-style-type: disc;}
.card.tab_agb{ --bs-card-border-color: var(--blue_tables);}
.tab_agb .card-title{ color: var(--blue_marino);}
.tab_agb .card-subtitle{ color: var(--blue_text); font-size: 15px;}

.tab_agb hr {margin: 1rem 0;color: inherit;border: 0;border-top: 1px solid var(--blue_tables);opacity: 1;}
.tab_agb input,.tab_agb select{ border: 1px solid var(--blue_tables); color: var(--blue_text);}
.tab_agb .input-group-text{ background-color: transparent; border-top: 1px solid var(--blue_tables); border-bottom: 1px solid var(--blue_tables); border-left: 1px solid var(--blue_tables); border-right: 0px solid transparent; color: var(--blue_text);}

.tab_agb .input-group input,.tab_agb .input-group select{ background-color: transparent; border-top: 1px solid var(--blue_tables); border-bottom: 1px solid var(--blue_tables); border-right: 1px solid var(--blue_tables); border-left: 0px solid transparent;}

.tab_agb th, .tab_agb td{ font-size: 12px;}
.text-bg2-success{ background-color: #0080001c;color: #00ad57 !important;}
.text-bg2-danger{ background-color: #ff000026; color: red !important;}
.badge.bg2::before {content: "";display: inline-block;width: 7px;height: 7px;border-radius: 50%;background-color: currentColor;margin-right: 6px;/*vertical-align: middle; */}
.tab_agb thead tr{
 --bs-table-bg: #edf7ff;
}


/* Esquina superior izquierda (primer th) */
.tab_agb thead tr:first-child th:first-child { border-top-left-radius: 10px;}

/* Esquina superior derecha (último th) */
.tab_agb thead tr:first-child th:last-child { border-top-right-radius: 10px;}

/* Esquina inferior izquierda (primer td de la última fila) */
.tab_agb tbody tr:last-child td:first-child { border-bottom-left-radius: 10px;}

/* Esquina inferior derecha (último td de la última fila) */
.tab_agb tbody tr:last-child td:last-child { border-bottom-right-radius: 10px;}

.tab_agb tbody, .tab_agb td, .tab_agb tfoot, .tab_agb th, .tab_agb thead, .tab_agb tr {border-color: #d6e5f3;border-style: solid;border-width: 0;}
.container-page.ajustagb{ padding-top: 17px;}
@media (max-width: 639px) {
 .help-card .help-buttons{flex-direction: row; }
}
@media (max-width: 868px) {
 .jconfirm-box{width: 100% !important; }
}
.btn-back_ag { display: inline-flex; align-items: center; gap: 8px; color: #ffffff; background-color: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.3); padding: 6px 14px; border-radius: 20px; font-size: 14px; font-weight: 500; text-decoration: none; transition: all 0.2s ease-in-out;}

.btn-back_ag:hover { background-color: #ffffff; color: #0b2545; /* Azul oscuro primario */ border-color: #ffffff; text-decoration: none;}