/* ==========================================================================
   RUMBO · Fletes Monterrey — hoja de estilos única
   Sin frameworks, sin compilación. Editas este archivo y ya.
   --------------------------------------------------------------------------
   ÍNDICE
   1. Variables de marca (colores, medidas)
   2. Reset y base
   3. Utilidades (contenedor, tipografía, foco)
   4. Botones
   5. Encabezado y navegación
   6. Hero
   7. Franja de confianza
   8. Secciones de contenido
   9. Qué movemos (tarjetas)
  10. Cómo cuidamos (pasos)
  11. Para negocios
  12. Cómo cotizar (lista numerada)
  13. Cobertura
  14. Preguntas frecuentes (acordeón)
  15. Pie de página
  16. Botón fijo móvil
  17. Accesibilidad / movimiento reducido
   ========================================================================== */


/* 1. VARIABLES DE MARCA ==================================================== */

:root {
  /* Colores oficiales de Rumbo */
  --navy:    #173B57;
  --orange:  #F46A2A;
  --mustard: #D9AA45;
  --bone:    #F7F3EB;
  --sky:     #DCEAF0;
  --ink:     #17232B;
  --white:   #FFFFFF;

  /* Versiones translúcidas (evitan tener que calcular opacidades a mano) */
  --navy-10: rgba(23, 59, 87, 0.10);
  --navy-15: rgba(23, 59, 87, 0.15);
  --navy-20: rgba(23, 59, 87, 0.20);
  --navy-70: rgba(23, 59, 87, 0.70);
  --navy-80: rgba(23, 59, 87, 0.80);
  --navy-85: rgba(23, 59, 87, 0.85);
  --ink-55:  rgba(23, 35, 43, 0.55);
  --ink-85:  rgba(23, 35, 43, 0.85);
  --ink-90:  rgba(23, 35, 43, 0.90);
  --ink-95:  rgba(23, 35, 43, 0.95);

  /* Tipografías */
  --font-display: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Medidas */
  --container: 90rem;   /* ancho máximo del sitio */
  --radius-lg: 1.5rem;
  --radius-xl: 1.75rem;
  --pad-x: 1rem;        /* respiro lateral, crece en pantallas grandes */
}

@media (min-width: 640px)  { :root { --pad-x: 1.5rem; } }
@media (min-width: 1024px) { :root { --pad-x: 2rem; } }


/* 2. RESET Y BASE ========================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.1875rem);
  line-height: 1.65;
  background-color: var(--bone);
  color: var(--ink);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Cuando el menú móvil está abierto, el fondo no debe hacer scroll */
body.menu-open { overflow: hidden; }

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }


/* 3. UTILIDADES ============================================================ */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.container--narrow { max-width: 48rem; }

.font-display { font-family: var(--font-display); letter-spacing: -0.03em; }
.font-body    { font-family: var(--font-body); }

/* Longitud de línea cómoda para leer */
.text-measure { max-width: 68ch; }

/* Anillo de foco visible para quien navega con teclado */
.focus-ring:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}

/* Texto solo para lectores de pantalla */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Subrayado tipo marcador mostaza */
.marker-underline {
  background-image: linear-gradient(
    transparent 68%,
    rgba(217, 170, 69, 0.7) 68%,
    rgba(217, 170, 69, 0.7) 88%,
    transparent 88%
  );
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* Ancla que no queda tapada por el encabezado fijo */
.scroll-anchor { scroll-margin-top: 6rem; }

/* Línea de ruta decorativa */
.route-line {
  stroke: rgba(23, 59, 87, 0.22);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
}

/* --------------------------------------------------------------------------
   ESPACIO PARA FOTO. Marco punteado que se ve mientras no hay foto real.
   Para poner tu foto: reemplaza el <div class="photo-slot"> por
   <img class="photo" src="assets/fotos/mi-foto.jpg" alt="Descripción">
   -------------------------------------------------------------------------- */
.photo-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 1.5rem;
  text-align: center;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #e3eef3, var(--bone));
  border: 1px dashed rgba(23, 59, 87, 0.28);
  color: var(--navy-70);
}

.photo-slot span { font-size: 0.875rem; font-weight: 500; letter-spacing: 0.02em; }
.photo-slot .photo-slot__hint { display: block; margin-top: 0.25rem; font-size: 0.75rem; opacity: 0.8; }

.photo { border-radius: var(--radius-lg); width: 100%; height: 100%; object-fit: cover; }

/* Proporciones de imagen */
.ratio-4-3 { aspect-ratio: 4 / 3; }
.ratio-5-4 { aspect-ratio: 5 / 4; }
@media (min-width: 1024px) { .ratio-5-4 { aspect-ratio: 4 / 3; } }

@media (min-width: 640px) {
  .photo-slot span { font-size: 1rem; }
}


/* 4. BOTONES =============================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 52px;
  padding-inline: 1.75rem;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: center;
  transition: transform 0.15s ease, background-color 0.15s ease;
}

.btn:active { transform: scale(0.98); }

.btn--orange { background-color: var(--orange); color: var(--ink); }
.btn--orange:hover { background-color: #e15d20; }

.btn--navy { background-color: var(--navy); color: var(--white); }
.btn--navy:hover { background-color: #102c42; }

/* En móvil los botones principales ocupan todo el ancho */
.btn--block { width: 100%; }
@media (min-width: 640px) { .btn--block { width: auto; } }

/* Enlace de texto secundario */
.btn-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding-inline: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy);
  text-underline-offset: 4px;
}
.btn-text:hover { text-decoration: underline; }
@media (min-width: 640px) { .btn-text { justify-content: flex-start; } }

.icon { width: 1rem; height: 1rem; flex-shrink: 0; }


/* 5. ENCABEZADO Y NAVEGACIÓN =============================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: rgba(247, 243, 235, 0.95);
  border-bottom: 1px solid var(--navy-10);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-block: 0.75rem;
}

.site-header__logo { flex-shrink: 0; border-radius: 0.5rem; }
.site-header__logo img { height: 2.5rem; width: auto; }
@media (min-width: 640px) { .site-header__logo img { height: 2.75rem; } }

.nav-desktop { display: none; align-items: center; gap: 0.25rem; }
@media (min-width: 1024px) { .nav-desktop { display: flex; } }

.nav-desktop a {
  padding: 0.5rem 0.75rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--navy);
  transition: background-color 0.15s ease;
}
.nav-desktop a:hover { background-color: var(--sky); }

.site-header__actions { display: flex; align-items: center; gap: 0.5rem; }

/* Botón de WhatsApp del encabezado: más compacto que los del cuerpo */
.btn--header { min-height: 48px; padding-inline: 1rem; font-size: 0.875rem; }
@media (min-width: 640px) { .btn--header { min-height: 52px; padding-inline: 1.25rem; } }

.btn--header .label-largo  { display: none; }
.btn--header .label-corto  { display: inline; }
@media (min-width: 640px) {
  .btn--header .label-largo { display: inline; }
  .btn--header .label-corto { display: none; }
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--navy-15);
  border-radius: 999px;
  color: var(--navy);
}
@media (min-width: 1024px) { .nav-toggle { display: none; } }

.nav-toggle .icon { width: 1.25rem; height: 1.25rem; }
.nav-toggle .icon-cerrar { display: none; }
.nav-toggle[aria-expanded="true"] .icon-abrir  { display: none; }
.nav-toggle[aria-expanded="true"] .icon-cerrar { display: block; }

.nav-mobile {
  display: none;
  padding-block: 1rem;
  background-color: var(--bone);
  border-top: 1px solid var(--navy-10);
}
.nav-mobile.is-open { display: block; }
@media (min-width: 1024px) { .nav-mobile.is-open { display: none; } }

.nav-mobile ul { display: flex; flex-direction: column; gap: 0.25rem; }
.nav-mobile a {
  display: block;
  padding: 0.75rem;
  border-radius: 0.75rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--navy);
}
.nav-mobile a:hover { background-color: var(--sky); }


/* 6. HERO ================================================================== */

.hero {
  display: grid;
  gap: 2.5rem;
  padding-block: 2.5rem 4rem;
}
@media (min-width: 1024px) {
  .hero {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 3rem;
    padding-block: 3.5rem 6rem;
  }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.875rem;
  border-radius: 999px;
  background-color: var(--sky);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--navy);
}

.eyebrow__dot {
  width: 0.5rem;
  height: 0.5rem;
  flex-shrink: 0;
  border-radius: 999px;
  background-color: var(--mustard);
}

.hero h1 {
  margin-top: 1.25rem;
  font-family: var(--font-display);
  font-size: clamp(2.375rem, 6vw, 4.5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--navy);
}

.hero h1 .acento { color: var(--orange); }

.hero__lead {
  margin-top: 1.25rem;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.1875rem);
  color: var(--ink-90);
}

.hero__acciones {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 2rem;
}
@media (min-width: 640px) {
  .hero__acciones { flex-direction: row; align-items: center; }
}

.hero__nota {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 1.25rem;
  font-size: 0.875rem;
  color: var(--navy-85);
}
.hero__nota .icon {
  width: 1.25rem; height: 1.25rem;
  margin-top: 0.125rem;
  color: var(--navy);
}
@media (min-width: 640px) { .hero__nota { font-size: 0.95rem; } }

/* Bloque de imagen con el rectángulo mostaza detrás */
.hero__media { position: relative; }

.hero__media::before {
  content: "";
  position: absolute;
  top: 1.5rem;
  right: -0.75rem;
  width: 92%;
  height: 85%;
  border-radius: var(--radius-xl);
  background-color: rgba(217, 170, 69, 0.8);
  transform: translate(0.5rem, 1rem);
  z-index: 0;
}
@media (min-width: 640px) { .hero__media::before { right: -1rem; } }

.hero__media-inner { position: relative; z-index: 1; }

.hero__media .photo-slot {
  box-shadow: 0 18px 40px -24px rgba(23, 59, 87, 0.35);
}

.hero__badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  padding: 0.375rem 0.75rem;
  border-radius: 999px;
  background-color: var(--navy);
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--bone);
}
@media (min-width: 640px) { .hero__badge { font-size: 0.75rem; } }


/* 7. FRANJA DE CONFIANZA =================================================== */

.trust {
  background-color: var(--navy);
  color: var(--bone);
}

.trust ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding-block: 1.5rem;
  text-align: center;
}
@media (min-width: 640px) {
  .trust ul { flex-direction: row; gap: 0; }
}

.trust li {
  display: flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
@media (min-width: 640px) { .trust li { font-size: 1.125rem; } }

/* Punto mostaza separador, solo en pantallas anchas */
.trust li + li::before {
  content: "";
  display: none;
  width: 0.25rem;
  height: 0.25rem;
  margin-inline: 2rem;
  border-radius: 999px;
  background-color: var(--mustard);
}
@media (min-width: 640px) { .trust li + li::before { display: block; } }


/* 8. SECCIONES DE CONTENIDO ================================================ */

.section { padding-block: 4rem; }
@media (min-width: 1024px) { .section { padding-block: 6rem; } }

.section--compacta { padding-block: 4rem; }
@media (min-width: 1024px) { .section--compacta { padding-block: 5rem; } }

.section--tinte-claro { background-color: rgba(255, 255, 255, 0.4); border-top: 1px solid var(--navy-10); }
.section--tinte-medio { background-color: rgba(255, 255, 255, 0.5); border-block: 1px solid var(--navy-10); }
.section--cielo       { background-color: var(--sky); }
.section--navy        { background-color: var(--navy); }

.section h2 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--navy);
}

.section h2.h2--menor { font-size: clamp(1.75rem, 3.5vw, 2.5rem); }

.section p + .route-dot { margin-top: 1.5rem; }

.lead { margin-top: 1.25rem; color: var(--ink-90); }
.lead--corto { margin-top: 1rem; }

/* Sección "Origen": texto 7 columnas, foto 5 columnas */
.origen {
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 1024px) {
  .origen { grid-template-columns: repeat(12, 1fr); gap: 3rem; }
  .origen__texto { grid-column: span 7; }
  .origen__media { grid-column: span 5; }
}

.frase-destacada {
  margin-top: 1.5rem;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--navy);
}


/* 9. QUÉ MOVEMOS (tarjetas) ================================================ */

.categorias {
  display: grid;
  gap: 2rem;
  margin-top: 3rem;
}
@media (min-width: 640px)  { .categorias { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .categorias { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } }

.categoria {
  padding-top: 1.25rem;
  border-top: 1px solid var(--navy-15);
}

.categoria .icon { width: 1.5rem; height: 1.5rem; color: var(--navy); }

.categoria h3 {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--navy);
}

.categoria p {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--ink-85);
}
@media (min-width: 640px) { .categoria p { font-size: 0.95rem; } }

/* Aviso azul claro sobre viabilidad */
.aviso {
  max-width: 48rem;
  margin-top: 2.5rem;
  padding: 1rem 1.25rem;
  border-radius: 1.25rem;
  background-color: rgba(220, 234, 240, 0.7);
  font-size: 0.875rem;
  color: var(--navy);
}

.bloque-cta { margin-top: 2rem; }


/* 10. CÓMO CUIDAMOS (pasos) ================================================ */

.pasos {
  position: relative;
  display: grid;
  gap: 2.5rem;
  margin-top: 3rem;
}
@media (min-width: 1024px) {
  .pasos { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  /* Línea horizontal que une los tres pasos */
  .pasos::before {
    content: "";
    position: absolute;
    top: 2rem;
    left: 8%;
    right: 8%;
    height: 1px;
    background-color: var(--navy-20);
    pointer-events: none;
  }
}

.paso { position: relative; }

.paso__cabecera { display: flex; align-items: center; gap: 0.75rem; }

.paso__numero {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  border-radius: 999px;
  background-color: var(--navy);
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--bone);
}

/* Conectores que solo aparecen en móvil */
.paso__linea { flex: 1; height: 1px; background-color: var(--navy-20); }
.paso__punto { width: 0.625rem; height: 0.625rem; border-radius: 999px; background-color: var(--mustard); }
@media (min-width: 1024px) {
  .paso__linea, .paso__punto { display: none; }
}

.paso h3 {
  margin-top: 1.25rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--navy);
}

.paso p { max-width: 24rem; margin-top: 0.5rem; color: var(--ink-90); }

.section--cielo .bloque-cta { margin-top: 3rem; }


/* 11. PARA NEGOCIOS ======================================================== */

.negocios {
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 1024px) {
  .negocios { grid-template-columns: 1fr 1fr; align-items: center; gap: 3.5rem; }
}

.eyebrow--sobre-navy {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  background: none;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--mustard);
}
.eyebrow--sobre-navy .eyebrow__dot { width: 0.375rem; height: 0.375rem; }

.section--navy h2 { margin-top: 1rem; color: var(--bone); }
.section--navy .lead { color: var(--white); }

/* Nota: el espacio de foto de esta sección va CLARO, igual que los demás,
   tal como se ve en el sitio publicado. No se oscurece sobre el fondo azul. */


/* 12. CÓMO COTIZAR (lista numerada) ======================================== */

.cotizar-pasos {
  max-width: 42rem;
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.cotizar-pasos li { display: flex; gap: 1rem; }

.cotizar-pasos__numero {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border-radius: 999px;
  background-color: var(--sky);
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--navy);
}

.cotizar-pasos p { padding-top: 0.5rem; color: var(--ink-95); }

.nota-secundaria {
  max-width: 42rem;
  margin-top: 2rem;
  font-size: 0.875rem;
  color: var(--navy-80);
}


/* 13. COBERTURA ============================================================ */

.cobertura__zona {
  max-width: 48rem;
  margin-top: 2rem;
  padding: 2.5rem 1.5rem;
  text-align: center;
}

.cobertura__zona p {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--navy-80);
}
@media (min-width: 640px) { .cobertura__zona p { font-size: 1rem; } }


/* 14. PREGUNTAS FRECUENTES (acordeón) ====================================== */

.faq { margin-top: 2rem; }

.faq details { border-bottom: 1px solid var(--navy-15); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.25rem;
  border-radius: 0.5rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--navy);
  cursor: pointer;
  list-style: none;
}
@media (min-width: 640px) { .faq summary { font-size: 1.125rem; } }

/* Oculta el triangulito nativo del navegador */
.faq summary::-webkit-details-marker { display: none; }
.faq summary::marker { content: ""; }

.faq summary:hover { color: var(--orange); }

.faq summary .icon {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.faq details[open] summary .icon { transform: rotate(180deg); }

.faq__respuesta {
  padding-bottom: 1.25rem;
  color: var(--ink-90);
}


/* 15. PIE DE PÁGINA ======================================================== */

.site-footer {
  padding-bottom: 6rem;   /* deja espacio para el botón fijo móvil */
  background-color: rgba(255, 255, 255, 0.6);
  border-top: 1px solid var(--navy-10);
}
@media (min-width: 768px) { .site-footer { padding-bottom: 2.5rem; } }

.site-footer__grid {
  display: grid;
  gap: 2rem;
  padding-block: 3rem;
}
@media (min-width: 1024px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }

.site-footer img { height: 3rem; width: auto; }

.site-footer__desc {
  max-width: 24rem;
  margin-top: 1rem;
  font-size: 0.875rem;
  color: var(--ink-85);
}

.site-footer__wa {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--navy);
  text-underline-offset: 4px;
}
.site-footer__wa:hover { text-decoration: underline; }

.site-footer__dominio {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--navy-70);
}

.site-footer__legal {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
@media (min-width: 1024px) {
  .site-footer__legal { align-items: flex-end; text-align: right; }
}

.site-footer__legal a {
  font-size: 0.875rem;
  color: var(--navy-80);
  text-underline-offset: 4px;
}
.site-footer__legal a:hover { text-decoration: underline; }

.site-footer__copy {
  margin-top: 1rem;
  font-size: 0.75rem;
  color: var(--ink-55);
}


/* 16. BOTÓN FIJO MÓVIL ===================================================== */

.cta-fija {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 50;
  padding: 0.75rem;
  background-color: rgba(247, 243, 235, 0.95);
  border-top: 1px solid var(--navy-10);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Se esconde al llegar al pie de página */
.cta-fija.is-hidden {
  transform: translateY(110%);
  opacity: 0;
  pointer-events: none;
}

@media (min-width: 768px) { .cta-fija { display: none; } }

.cta-fija .icon { width: 1.25rem; height: 1.25rem; }


/* 17. ACCESIBILIDAD / MOVIMIENTO REDUCIDO ================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}