/**
 * /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) */
}

/* =======================================================================
   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.875rem;
  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: var(--radius);
  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: 0.25rem;
  padding: 0.375rem 0.75rem;
  font-weight: 600;
  border-radius: var(--radius);
  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.5rem;
}

.site-header__cta-cotiza {
  display: none;
  align-items: center;
  border-radius: var(--radius);
  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: var(--radius);
  background-color: var(--whatsapp);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  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: 1280px) {
  .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; }
}

/* 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.75rem;
}
.site-footer__logo {
  height: 5rem; /* 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;
}
@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 {
  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;
}
@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 */
}