/* Infinity Cargo Freight · correcciones finales de interfaz v124.8 */

/* === Arreglo modo oscuro del sistema (Windows/macOS) ===
   La web pública es de tema claro. Con el SO en modo oscuro, el navegador
   pintaba los campos de formulario con texto blanco (invisibles sobre fondo
   blanco). Forzamos esquema CLARO en la web pública. El panel ICF usa otro
   CSS (dashboard.css), así que su modo oscuro propio no se ve afectado. */
:root { color-scheme: light; }
input, select, textarea, button, optgroup, option { color-scheme: light; }
/* Red de seguridad: texto oscuro legible en los campos del sitio. */
input:not([type=checkbox]):not([type=radio]):not([type=range]),
select, textarea { color: #16212c; }
input::placeholder, textarea::placeholder { color: #8a96a2; opacity: 1; }

@media (max-width: 980px) {
  body .site-header .nav-shell .nav-links {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body .site-header .nav-shell .nav-links .nav-dropdown {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body .site-header .nav-shell .nav-links .nav-dropdown::after {
    display: none !important;
  }

  body .site-header .nav-shell .nav-links .nav-dropdown > .nav-dropdown__panel,
  body .site-header .nav-shell .nav-links .nav-dropdown:hover > .nav-dropdown__panel,
  body .site-header .nav-shell .nav-links .nav-dropdown:focus-within > .nav-dropdown__panel,
  body .site-header .nav-shell .nav-links .nav-dropdown.is-open > .nav-dropdown__panel {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 8px 0 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
  }
}

/* =========================================================================
   ICF v125 · Validación visual, estados de envío y diseño de formularios
   ========================================================================= */

/* Mensaje de error bajo cada campo */
.icf-field-error {
  margin: 3px 0 0;
  color: #c0341f;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.35;
  display: flex;
  gap: 0.4em;
  align-items: flex-start;
}
.icf-field-error::before {
  content: "!";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.05em;
  height: 1.05em;
  margin-top: 0.05em;
  border-radius: 50%;
  background: #c0341f;
  color: #fff;
  font-size: 0.72em;
  font-weight: 900;
}

/* Campo inválido */
input.icf-invalid,
select.icf-invalid,
textarea.icf-invalid,
.form-field input.icf-invalid,
.form-field select.icf-invalid,
.form-field textarea.icf-invalid {
  border-color: #c0341f !important;
  background: #fff7f6 !important;
}
input.icf-invalid:focus,
select.icf-invalid:focus,
textarea.icf-invalid:focus {
  box-shadow: 0 0 0 4px rgba(192, 52, 31, 0.15) !important;
}
/* Casilla obligatoria sin marcar */
.checkbox-row input.icf-invalid {
  outline: 2px solid #c0341f;
  outline-offset: 3px;
}

/* Resumen de errores arriba del formulario */
.icf-error-summary {
  margin: 0 0 18px;
  padding: 12px 16px;
  border-radius: 6px;
  background: #fff3f1;
  border: 1px solid #f0c4bc;
  color: #9e2b16;
  font-weight: 800;
  font-size: 0.92rem;
}

/* Botón en estado "Enviando…" + bloqueo de doble envío */
.button.is-sending {
  opacity: 0.8;
  cursor: progress;
}
.button.is-sending::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 9px;
  vertical-align: -2px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: icfSpin 0.7s linear infinite;
}
@keyframes icfSpin {
  to { transform: rotate(360deg); }
}
button:disabled,
.button:disabled {
  cursor: not-allowed;
}

/* Más aire entre bloques de campos dentro de un paso */
.quote-panel .form-section .address-block {
  margin-top: 6px;
}
.quote-panel .form-section .form-grid + .form-grid {
  margin-top: 4px;
}

/* Panel de "resumen en vivo" acompaña al usuario al hacer scroll (escritorio) */
@media (min-width: 1024px) {
  .quote-live-card {
    position: sticky;
    top: 96px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .button.is-sending::after { animation: none; }
}

/* =========================================================================
   ICF v147 · Saneado visual de las tarjetas de servicio (01-06)
   ========================================================================= */
.service-grid { align-items: stretch !important; }
.service-card { height: 100% !important; display: flex !important; flex-direction: column !important; }
.service-card > span:first-child {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-weight: 900;
  font-size: .9rem;
  letter-spacing: 0;
  margin-bottom: 12px;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  flex: 0 0 auto;
}
.section-light .service-card > span:first-child,
.service-card:not([class*="on-dark"]) > span:first-child {
  background: #111820;
  color: #fff;
}
.service-card h3 { margin: 0 0 8px; line-height: 1.25; }
.service-card p { margin: 0; }
.service-card { transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.service-card:hover { transform: translateY(-3px); border-color: rgba(17, 24, 32, .35); }

/* Banda de confianza */
.trust-band {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  justify-content: center;
  align-items: center;
  margin: 26px auto 0;
  padding: 16px 20px;
  border: 1px solid var(--line-light, #dfe5eb);
  border-radius: 12px;
  background: var(--soft, #f7f9fb);
}
.trust-band span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .9rem;
  font-weight: 800;
  color: var(--ink, #111820);
}
.trust-band span::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #2f6e8f;
}

/* =========================================================================
   ICF v170 · Pulido profesional: badges, botones, menú y selector de idioma
   ========================================================================= */

/* --- Badges de tarjeta: pill que se adapta al texto (no recorta palabras) --- */
.service-card > span:first-child {
  width: auto !important;
  min-width: 38px;
  height: auto !important;
  min-height: 30px;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  overflow: visible !important;
  line-height: 1 !important;
  font-size: .8rem !important;
  letter-spacing: .045em !important;
  text-transform: uppercase;
  align-self: flex-start;
}

/* --- Tarjetas: radio y altura consistentes --- */
.service-card,
.route-card { border-radius: 16px !important; }
.route-grid { align-items: stretch; }
.route-card { height: 100%; display: flex; flex-direction: column; }

/* =========================================================================
   ICF v220 · Nitidez de texto (Windows) + subrayado del menú + cuadrar cajas
   ========================================================================= */

/* 'geometricPrecision' deja la fuente sin hinting: nítida en Mac, BORROSA en
   Windows. Forzamos 'optimizeLegibility' en todo el texto (nítido en ambos). */
* { text-rendering: optimizeLegibility !important; }

/* MENÚ/TEXTO NÍTIDO EN WINDOWS · backdrop-filter:blur (+ transform 3D) compone
   el elemento en una capa GPU; en Windows eso quita el suavizado sub-píxel y el
   texto se ve borroso. Estos elementos llevan texto legible y su fondo ya es
   casi opaco, así que quitar el blur no cambia el aspecto pero da nitidez. */
html body .site-header,
html body .site-header .nav-shell .nav-links,
html body .hero-operation,
html body .hero-brand-mark,
html body .page-brand-signal,
html body .mobile-actionbar {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html body .site-header { background: #141e27 !important; transform: none !important; }
html body .hero-operation { background: rgba(13, 20, 27, .92) !important; }

/* Desplegable de Servicios: quitar blur y la capa 3D (translate3d), manteniendo
   el centrado con un translate 2D (no fuerza capa GPU → texto nítido). */
html body .site-header .nav-shell .nav-links .nav-dropdown > .nav-dropdown__panel {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: #141e27 !important;
  transform: translate(-50%, 8px) !important;
}
html body .site-header .nav-shell .nav-links .nav-dropdown:hover > .nav-dropdown__panel,
html body .site-header .nav-shell .nav-links .nav-dropdown:focus-within > .nav-dropdown__panel,
html body .site-header .nav-shell .nav-links .nav-dropdown.is-open > .nav-dropdown__panel {
  transform: translate(-50%, 0) !important;
}

/* Texto del menú con opacidad plena = más nítido. */
.site-header .nav-shell .nav-links > a:not(.nav-cta):not(.lang-link),
.site-header .nav-shell .nav-dropdown__trigger {
  color: rgba(255, 255, 255, .92) !important;
}

/* El subrayado activo/hover del menú heredaba el ancho pequeño del caret base
   (se veía un trocito de ~7px). Con width:auto se estira a toda la palabra. */
.site-header .nav-shell .nav-links > a:not(.nav-cta):not(.lang-link)::after,
.site-header .nav-shell .nav-dropdown__trigger::after {
  width: auto !important;
}

/* Cuadrar contenedores: misma altura aunque el texto cambie según el idioma. */
.service-grid, .global-service-grid, .service-intel-grid, .route-grid,
.fleet-grid, .calculator-grid, .service-detail-grid, .footer-grid { align-items: stretch; }
.global-service-card, .service-intel-card, .route-card, .fleet-card,
.detail-card, .calculator { height: 100%; }
.global-service-menu { align-items: stretch; }
.global-service-menu a { height: 100%; }

/* Conmutador de servicios (01-06): 6 tarjetas en 3+3, no 4+2 descentrado. */
.service-switchboard { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
@media (max-width: 880px) { .service-switchboard { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 560px) { .service-switchboard { grid-template-columns: 1fr !important; } }

/* Banderas SVG (los emoji de bandera no se ven en Windows). */
.flagimg {
  width: 20px;
  height: 14px;
  border-radius: 2px;
  display: inline-block;
  vertical-align: middle;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .14);
  flex: 0 0 auto;
}
.lang-flag { display: inline-flex; align-items: center; }
.lang-switch__btn .flagimg, .lang-switch__opt .flagimg { margin-right: 2px; }

/* --- Pasos 1-2-3-4: rejilla equilibrada y sin línea conectora que sobresale --- */
.process-step::after { display: none !important; }
.process-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: stretch;
}
.process-step {
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 14px !important;
}
@media (max-width: 560px) {
  .process-grid { grid-template-columns: 1fr !important; }
}

/* --- Botones: el texto nunca se recorta ni se parte --- */
.button {
  white-space: nowrap;
  line-height: 1.15 !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  letter-spacing: .005em;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.button:hover { transform: translateY(-1px); }
.action-row { gap: 12px; flex-wrap: wrap; }

/* --- Navegación más moderna: subrayado animado en los enlaces principales --- */
.site-header .nav-shell .nav-links > a:not(.nav-cta):not(.lang-link),
.site-header .nav-shell .nav-dropdown__trigger {
  position: relative;
  transition: color .15s ease;
}
.site-header .nav-shell .nav-links > a:not(.nav-cta):not(.lang-link)::after,
.site-header .nav-shell .nav-dropdown__trigger::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #8eb6ca, #2f6e8f);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
  transition: transform .22s ease, opacity .22s ease;
}
.site-header .nav-shell .nav-links > a:not(.nav-cta):not(.lang-link):hover::after,
.site-header .nav-shell .nav-links > a.is-active:not(.nav-cta)::after,
.site-header .nav-shell .nav-dropdown__trigger:hover::after,
.site-header .nav-shell .nav-dropdown__trigger.is-active::after,
.site-header .nav-shell .nav-dropdown.is-active .nav-dropdown__trigger::after {
  transform: scaleX(1);
  opacity: 1;
}

/* --- CTA del menú: pill con color, distinto del blanco --- */
.site-header .nav-shell .nav-cta {
  background: linear-gradient(90deg, #2f6e8f, #3f86ab) !important;
  color: #fff !important;
  border-color: transparent !important;
  border-radius: 999px !important;
  padding: 11px 20px !important;
  box-shadow: 0 12px 26px rgba(47, 110, 143, .38) !important;
}
.site-header .nav-shell .nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 32px rgba(47, 110, 143, .5) !important;
}

/* --- Panel desplegable de Servicios: tarjeta redondeada y nítida --- */
.site-header .nav-shell .nav-dropdown__panel {
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  box-shadow: 0 26px 60px rgba(0, 0, 0, .5) !important;
  padding: 10px !important;
  background: #17212b !important;
}
.site-header .nav-shell .nav-dropdown__panel a { border-radius: 10px; transition: background .14s ease; }
.site-header .nav-shell .nav-dropdown__panel a:hover { background: rgba(255, 255, 255, .08); }

/* --- Selector de idioma desplegable (construido por script.js) --- */
.lang-switch { position: relative; display: inline-flex; margin-left: 10px; }
.lang-switch__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-weight: 900;
  font-size: .9rem;
  border-radius: 999px;
  padding: 9px 13px;
  min-height: 44px;
  transition: background .15s ease, border-color .15s ease;
}
.lang-switch__btn:hover { background: rgba(255, 255, 255, .15); border-color: rgba(255, 255, 255, .34); }
.lang-switch__btn .lang-flag { font-size: 1.05rem; line-height: 1; }
.lang-switch__chev { width: 11px; height: 11px; opacity: .85; transition: transform .2s ease; }
.lang-switch.is-open .lang-switch__chev { transform: rotate(180deg); }
.lang-switch__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 196px;
  display: grid;
  gap: 2px;
  padding: 8px;
  background: #17212b;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  box-shadow: 0 26px 60px rgba(0, 0, 0, .5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  z-index: 90;
}
.lang-switch.is-open .lang-switch__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.lang-switch__opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  color: #dfe5eb;
  font-weight: 800;
  font-size: .92rem;
  text-decoration: none;
  white-space: nowrap;
}
.lang-switch__opt:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.lang-switch__opt .lang-flag { font-size: 1.2rem; line-height: 1; }
.lang-switch__opt.is-current { background: rgba(142, 182, 202, .16); color: #fff; }
.lang-switch__opt.is-current::after { content: "\2713"; margin-left: auto; color: #8eb6ca; font-weight: 900; }

/* --- Banda de sugerencia de idioma (encima de la cabecera) --- */
.lang-suggest {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 10px 18px;
  background: #2f6e8f;
  color: #fff;
  font-size: .92rem;
  font-weight: 700;
  text-align: center;
}
.lang-suggest__msg { opacity: .95; }
.lang-suggest__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  color: #14323f;
  font-weight: 900;
  text-decoration: none;
  padding: 7px 14px;
  border-radius: 999px;
  transition: transform .15s ease;
}
.lang-suggest__cta:hover { transform: translateY(-1px); }
.lang-suggest__close {
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  opacity: .85;
}
.lang-suggest__close:hover { opacity: 1; }

/* Selector de idioma en móvil: integrado en el menú en columna */
@media (max-width: 980px) {
  .lang-switch { width: 100%; margin: 4px 0 0; }
  .lang-switch__btn { width: 100%; justify-content: center; }
  .lang-switch__menu {
    position: static;
    width: 100%;
    margin-top: 8px;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    box-shadow: none;
    background: rgba(255, 255, 255, .04);
  }
  .lang-switch__chev { display: none; }
}

/* ============================================================
   v223 — Legibilidad / acabado profesional (Auditoría jun-2026)
   Punto 1: cuerpo de texto 14px -> 15px e interlínea más cómoda.
   Se sube la RAÍZ rem (mismo mecanismo responsive que ya usa la
   web), por lo que toda la escala crece en proporción y nada se
   descuadra. Carga después de styles.min.css y lo sobrescribe.
   ============================================================ */
html { font-size: 15px !important; }
@media (max-width: 760px) { html { font-size: 13.3px !important; } }

/* Interlínea de lectura más holgada en párrafos de contenido */
html body p { line-height: 1.6; }

/* ============================================================
   v224 — Punto 2 Auditoría: señales de confianza visibles.
   La banda de garantías pasa de texto plano a "sellos" tipo
   pastilla con check de verificado. Aplica a ES/EN/FR.
   ============================================================ */
.trust-band {
  gap: 10px 12px !important;
  padding: 18px 16px !important;
  border: 0 !important;
  background: transparent !important;
}
.trust-band span {
  background: #ffffff !important;
  border: 1px solid var(--line-light, #dfe5eb) !important;
  border-radius: 999px !important;
  padding: 8px 14px 8px 12px !important;
  font-size: .86rem !important;
  font-weight: 700 !important;
  color: var(--ink, #111820) !important;
  box-shadow: 0 1px 2px rgba(17,24,32,.05) !important;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.trust-band span:hover {
  border-color: rgba(47,110,143,.45) !important;
  box-shadow: 0 4px 12px rgba(17,24,32,.08) !important;
  transform: translateY(-1px);
}
.trust-band span::before {
  content: "✓" !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: #2f6e8f !important;
  color: #fff !important;
  font-size: .72rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
}
@media (max-width: 760px) {
  .trust-band { gap: 8px !important; }
  .trust-band span { font-size: .8rem !important; padding: 7px 12px 7px 10px !important; }
}

/* ============================================================
   v225 — Punto 3 Auditoría: título del hero cómodo en móvil.
   SOLO afecta a pantallas ≤600px; el escritorio queda intacto.
   Evita que el titular "se coma" la pantalla en el teléfono.
   ============================================================ */
@media (max-width: 600px) {
  .hero-copy h1 {
    font-size: clamp(1.85rem, 7.4vw, 2.55rem) !important;
    line-height: 1.07 !important;
  }
  .hero-copy h1 strong { text-shadow: 0 10px 26px rgba(0,0,0,.55) !important; }
  /* subtítulo/lede del hero un punto más contenido en móvil */
  .hero-copy .hero-lede, .hero-copy p { font-size: 1rem !important; line-height: 1.5 !important; }
}

/* ============================================================
   v226 — Punto 4 Auditoría: una sola acción primaria clara.
   En el bloque CTA final (fondo oscuro) el botón blanco
   "Solicitar cotización / Demander un devis / Request quote" es
   el primario. El segundo botón (WhatsApp) era oscuro sobre
   oscuro y casi no se veía: pasa a secundario con contorno.
   ============================================================ */
.cta-band .button-primary {
  background: transparent !important;
  border: 1.5px solid rgba(255,255,255,.55) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}
.cta-band .button-primary:hover {
  background: rgba(255,255,255,.12) !important;
  border-color: #ffffff !important;
  transform: translateY(-1px);
}

/* ============================================================
   v227 — Punto 5 Auditoría: ritmo/aire entre secciones.
   El espaciado ya era uniforme (todas las .section iguales);
   se sube el tope para dar un respiro más premium en escritorio,
   manteniendo escala fluida y compacta en móvil. Misma regla
   para todas las páginas e idiomas.
   ============================================================ */
.section { padding-block: clamp(42px, 5vw, 72px) !important; }
@media (max-width: 760px) { .section { padding-block: 34px !important; } }

/* ============================================================
   v228 — Punto 7 Auditoría: foco de teclado, hover y micro-
   transiciones consistentes. (Punto 6: logo ya nítido/ligero y
   fotos reales ya presentes, no requiere cambios.)
   ============================================================ */

/* Anillo de foco visible y accesible (solo teclado, no ratón).
   Funciona sobre fondos claros y oscuros. */
a:focus-visible,
button:focus-visible,
.button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.nav-dropdown__trigger:focus-visible,
.lang-switch__btn:focus-visible {
  outline: 2px solid #4a93bf !important;
  outline-offset: 2px !important;
  border-radius: 8px;
}

/* Microtransiciones suaves y discretas en elementos interactivos */
a, .button, button, .service-card, .nav-cta,
.trust-band span, .nav-dropdown__trigger, .lang-switch__btn {
  transition: color .16s ease, background-color .16s ease,
              border-color .16s ease, box-shadow .16s ease,
              transform .16s ease;
}

/* Botones: leve elevación al pasar el cursor (coherente en todos) */
.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(0); }

/* Enlaces de texto en contenido: subrayado animado al hover */
.section a:not(.button):not(.nav-cta):not([class*="card"]):hover {
  text-decoration-color: currentColor;
}

/* Respeta a quien prefiere menos movimiento (accesibilidad) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ============================================================
   v229 — Pulido formularios: evita el zoom automático de iOS.
   En iPhone, un campo con texto <16px hace que Safari haga zoom
   al tocarlo (molesto). Se fija 16px en móvil en todos los
   campos (cotización, contacto, altas). En escritorio se
   mantiene el tamaño compacto del diseño.
   ============================================================ */
@media (max-width: 760px) {
  input:not([type=checkbox]):not([type=radio]),
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* v1299 — Bloque "Solicitante" en formularios: texto guía y ayudas */
.form-section__lead { margin: -2px 0 12px; color: var(--muted, #6d7a88); font-size: .95rem; line-height: 1.5; }
.field-hint { display: block; margin-top: 4px; color: var(--muted, #6d7a88); font-size: .82rem; line-height: 1.4; }

/* ============================================================
   v1300 — Bloque "Solicitante" destacado + botones de paso con
   color de marca (más visibles). Acento azul corporativo #2f6e8f.
   ============================================================ */
.solicitante-block {
  grid-column: 1 / -1;
  background: #eef5f9;
  border: 1px solid #cfe0ea;
  border-left: 4px solid #2f6e8f;
  border-radius: 14px;
  padding: 16px 18px 4px;
  margin: 0 0 20px;
}
.solicitante-block > h3 { margin-top: 0; color: #1f5670; }
.solicitante-block .form-section__lead { margin-top: -4px; color: #4a6675; }

/* Cuadrar campos: empresa a todo el ancho, el resto en 2 columnas iguales */
.form-grid--solicitante { gap: 14px 16px; }
.form-grid--solicitante .form-field--full { grid-column: 1 / -1; }

/* Botones de paso (Siguiente / Atrás) con color visible y de marca */
.form-step-nav [data-step-next] {
  background: #2f6e8f !important;
  border: 1px solid #2f6e8f !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  box-shadow: 0 6px 16px rgba(47, 110, 143, .26) !important;
}
.form-step-nav [data-step-next]:hover {
  background: #255a74 !important;
  border-color: #255a74 !important;
  transform: translateY(-1px);
}
.form-step-nav [data-step-prev] {
  background: #ffffff !important;
  border: 1.5px solid #cdd8df !important;
  color: #2b3743 !important;
  font-weight: 700 !important;
}
.form-step-nav [data-step-prev]:hover { border-color: #2f6e8f !important; color: #1f5670 !important; }

/* ============================================================
   v1301 — CC alineado + teléfono con bandera y selector de país
   ============================================================ */
/* Las celdas del bloque no se estiran: inputs alineados arriba */
.form-grid--solicitante { align-items: start; }
.form-grid--solicitante .form-field { align-self: start; }

/* Grupo de teléfono: [bandera] [país] [número] en una sola caja */
.phone-group {
  display: flex; align-items: stretch; gap: 0;
  border: 1px solid #cdd8df; border-radius: 12px; overflow: hidden; background: #fff;
}
.phone-group:focus-within { border-color: #2f6e8f; box-shadow: 0 0 0 3px rgba(47, 110, 143, .15); }
.phone-group .phone-flag {
  display: inline-flex; align-items: center; padding: 0 6px 0 12px;
  font-size: 1.05rem; flex: 0 0 auto;
}
.phone-group .phone-flag.fi { width: auto; }
.phone-group .phone-country {
  border: 0 !important; background: transparent !important; box-shadow: none !important;
  border-radius: 0 !important; min-height: 0 !important; height: auto !important;
  width: 104px; max-width: 104px; padding: 0 6px !important; color: #2b3743;
  appearance: auto;
}
.phone-group input[type="tel"] {
  border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
  flex: 1 1 auto; min-width: 0; background: transparent !important;
}
.phone-group .phone-country:focus, .phone-group input[type="tel"]:focus { outline: none !important; box-shadow: none !important; }

/* v1302 — Bandera del teléfono: algo más pequeña y separada del borde */
.phone-group .phone-flag { padding: 0 6px 0 14px; }
.phone-group .phone-flag.fi { font-size: .92rem; border-radius: 2px; box-shadow: 0 0 0 1px rgba(16,24,32,.06); }
.phone-group .phone-country { width: 116px; max-width: 116px; }