:root {
    --azul-claro: #4FC3F7;    /*[cite: 5] */
    --azul-medio: #2196F3;    /*[cite: 5] */
    --azul-acento: #00B0FF;   /*[cite: 5] */
    --azul-oscuro: #0D47A1;   /*[cite: 5] */
    --azul-profundo: #08306B; /*[cite: 5] */
    --gris-claro: #F2F6FA;    /*[cite: 5] */
    --gris-disabled: #dbdae9;    /*[cite: 5] */
}
/* Reset y estilos base del documento */
*, *::before, *::after { 
  box-sizing: border-box; 
}

html { 
  scroll-behavior: smooth; 
  scroll-padding-top: calc(90px + 36px); 
  overflow-x: hidden; 
}

body {
  margin: 0;
  overflow-x: hidden;
  color: #071a3a;
  background: #fff;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img, svg { 
  display: block; 
  max-width: 100%; 
}

a { 
  color: inherit; 
  text-decoration: none; 
}

button, input, textarea, select { 
  font: inherit; 
}

button { 
  color: inherit; 
}

address { 
  font-style: normal; 
}

::selection { 
  background: #8dd8ff; 
  color: #071a4b; 
}

/* Utilidades: contenedor centrado, texto solo para lectores de pantalla, enlace de salto y aviso sin JS */
.container-wide { 
  width: min(1400px, calc(100% - 48px)); 
  margin-inline: auto; 
  margin-top:0px;
}
.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; 
}
.skip-link { 
  position: fixed; 
  top: 10px; 
  left: 10px; 
  z-index: 9999; 
  padding: 12px 18px; 
  border-radius: 12px; 
  background: #fff; 
  color: #071a4b; 
  transform: translateY(-150%); 
  transition: transform .2s; 
}
.skip-link:focus { 
  transform: translateY(0); 
}
.noscript-message { 
  position: fixed; 
  inset: auto 16px 16px;
   z-index: 200; 
   background: #fff4cc; 
   border: 1px solid #e6bd2f; 
   padding: 12px 16px; 
   border-radius: 12px; 
  }

/* ==========================================================================
   1. COMPONENTES COMPARTIDOS
   Piezas reutilizadas por varias secciones del BODY y el FOOTER.
   ========================================================================== */
/* Etiqueta superior (eyebrow) y encabezado centrado de sección */
.eyebrow { 
  margin: 0 0 12px; 
  color: #2196f3; 
  font-size: .77rem; 
  font-weight: 800; 
  letter-spacing: .11em; 
  text-transform: uppercase; 
}
.eyebrow.light { 
  color: #8bdcff; 
}

.section-heading { 
  max-width: 760px; 
  margin: 60px auto 58px; 
  text-align: center; 
}

.section-heading h2 { 
  margin: 0; 
  font-size: clamp(2rem, 4vw, 3.6rem); 
  line-height: 1.08; 
  letter-spacing: -.04em; 
}

.section-heading p:last-child { 
  max-width: 660px; 
  margin: 18px auto 0; 
  color: #66758c; 
  font-size: 1.05rem; 
}

.section-dark .section-heading { 
  color: #fff; 
}

.section-dark .section-heading p:last-child { 
  color: rgba(255, 255, 255, .72); 
}
/* Botones (.button + variante primary / outline / light) y enlace con flecha */
.button { 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  gap: 12px; 
  min-height: 54px; 
  padding: 0 24px; 
  border: 0; 
  border-radius: 999px; 
  font-weight: 800; 
  cursor: pointer; 
  transition: transform .25s cubic-bezier(.2, .75, .2, 1), box-shadow .25s cubic-bezier(.2, .75, .2, 1), background .25s cubic-bezier(.2, .75, .2, 1); 
}

.button svg, 
.text-link svg, 
.package-detail svg { 
  width: 20px; 
  height: 20px; 
  fill: none; 
  stroke: currentColor; 
  stroke-width: 2; 
  transition: transform .25s cubic-bezier(.2, .75, .2, 1); 
}

.button:hover, 
.button:focus-visible { 
  transform: translateY(-3px); 
}

.button:hover svg, 
.text-link:hover svg, 
.package-detail:hover svg { 
  transform: translateX(5px); 
}

.button-primary { 
  position: relative; 
  overflow: hidden; 
  color: #fff; 
  background: linear-gradient(135deg, #2196f3, #1464f3); 
  box-shadow: 0 16px 32px rgba(33, 150, 243, .34); 
}

.button-primary::before { 
  content: ""; 
  position: absolute; 
  inset: -50% auto -50% -20%; 
  width: 25%; 
  transform: rotate(18deg); 
  background: rgba(255, 255, 255, .4); 
  filter: blur(2px); 
  transition: left .6s cubic-bezier(.2, .75, .2, 1); 
}

.button-primary:hover::before { 
  left: 120%; 
}

.button-outline { 
  border: 1.5px solid #2196f3; 
  color: #0d47a1; 
  background: #fff; 
}

.button-light { 
  color: #071a4b; 
  background: #fff; 
  box-shadow: 0 18px 40px rgba(0, 0, 0, .18); 
}

.text-link { 
  display: inline-flex; 
  align-items: center; 
  gap: 8px; 
  margin-top: 18px; 
  color: #00b0ff; 
  font-weight: 800; 
}
/* Espaciadores blancos entre bloques (<section class="white-space">) */
.white-space { 
  background: #fff; 
}

.white-space-lg { 
  height: clamp(84px, 10vw, 160px); 
}

.white-space-xl { 
  height: clamp(90px, 2vw, 220px); 
}

/* ==========================================================================
   2. HEADER  (HEADER-V1-APPROVED)
   Tarjeta blanca fija y flotante. .site-header no recibe clics (pointer-events: none)
   para no bloquear el hero; solo la tarjeta y el panel móvil los reciben.
   El alto se controla con --header-height (112 / 92 / 76 px según el ancho).
   Ajustes por tamaño: sección 7.2.
   ========================================================================== */
.site-header { 
  position: fixed; 
  inset: 0 0 auto; 
  z-index: 1000; 
  padding: 16px 30px 0; 
  pointer-events: none; 
  line-height: normal; 
  color: #08306b; 
}

.header-shell { 
  pointer-events: auto; 
  min-height: 90px; 
  max-width: 1480px; 
  margin: auto; 
  padding: 5px 38px; 
  display: flex; 
  align-items: center; 
  background: rgba(255, 255, 255, .96); 
  border: 1px solid rgba(255, 255, 255, .8); 
  border-radius: 18px; 
  box-shadow: 0 12px 35px rgba(8, 48, 107, .12); 
  backdrop-filter: blur(14px); 
}

/* Marca: logo + divisor + eslogan */
.brand { 
  display: flex; 
  align-items: center; 
  min-width: max-content; 
}

.brand__logo { 
  width: 215px; 
  height: 64px; 
  object-fit: contain; 
  object-position: left center; 
}

.brand__divider { 
  width: 1px; 
  height: 58px; 
  margin: 0 30px; 
  background: #cbd9ea; 
}

.brand__tagline { 
  font-size: 1rem; 
  font-weight: 500; 
  white-space: nowrap; 
}

.brand__tagline strong { 
  color: #2196f3; 
  font-weight: 700; 
}

/* Espacio central libre y contactos de escritorio/tablet (teléfono y WhatsApp) */
.header-space { 
  flex: 1; 
  min-width: 40px; 
}

.header-contacts { 
  display: flex; 
  align-items: center; 
}

.contact-item { 
  display: flex; 
  align-items: center; 
  gap: 14px; 
  padding: 8px 12px; 
  border-radius: 14px; 
}

.contact-item:hover, 
.contact-item:focus-visible { 
  background: #f5f9ff; 
  outline: 2px solid transparent; 
}

.contact-item strong { 
  display: block; 
  white-space: nowrap; 
  font-size: 1.1rem; 
  line-height: 1.3; 
}

.contact-item small { 
  display: block; 
  white-space: nowrap; 
  margin-top: 3px; 
  color: #496486; 
  font-size: .76rem; 
}

.contact-icon { 
  display: grid; 
  place-items: center; 
  width: 52px; 
  height: 52px; 
  border-radius: 50%; 
  font-size: 1.45rem; 
}

.contact-icon--phone { 
  background: #e6f2ff; 
  color: #0879e8; 
}

.contact-icon--whatsapp { 
  background: #e5f9f0; 
  color: #00ae55; 
}

.contact-divider { 
  width: 1px; 
  height: 56px; 
  margin: 0 10px; 
  background: #d9e3ef; 
}

/* Botones y panel de contacto de móvil: ocultos aquí, se activan en ≤767px (sección 7.2) */
.contact-toggle, 
.menu-toggle { 
  display: none; 
}

.mobile-contact-panel { 
  pointer-events: auto; 
}

/* ==========================================================================
   3. HERO  (HERO-STATIC-V1-APPROVED)
   Portada estática. El padding superior deja espacio para el header fijo.
   Capas: foto (.hero__media) → velo (.hero__veil) → contenido (.hero__inner).
   Ajustes por tamaño: sección 7.2.
   ========================================================================== */
.hero { 
  position: relative; 
  min-height: clamp(650px, 72vh, 850px); 
  overflow: hidden; 
  background: #cdd9e4; 
  padding-top: calc(90px + 38px); 
  line-height: normal; 
}

/* Fondo: fotografía a pantalla completa y velo degradado para legibilidad */
.hero__media, 
.hero__media img, 
.hero__veil { 
  position: absolute; 
  inset: 0; 
  width: 100%; 
  height: 100%; 
}

.hero__media img { 
  object-fit: cover; 
  object-position: center; 
}

.hero__veil { 
  background: linear-gradient(90deg, rgba(255, 255, 255, .88) 0%, rgba(255, 255, 255, .58) 31%, rgba(255, 255, 255, .08) 56%, rgba(8, 48, 107, .08) 100%); 
}

/* Contenido: título en dos colores, descripción y botón "Cotizar ahora" */
.hero__inner { 
  position: relative; 
  z-index: 2; 
  max-width: 1320px; 
  min-height: inherit; 
  margin: auto; 
  padding: 5px 54px 32px; 
  display: flex; 
  flex-direction: column; 
  justify-content: space-between; 
}

.hero__copy { 
  max-width: 650px; 
}

.hero h1 { 
  margin: 0; 
  color: #08306b; 
  font-size: clamp(3rem, 5vw, 5.8rem); 
  line-height: .98; 
  letter-spacing: -.055em; 
}

.hero h1 span { 
  display: block; 
  color: #2196f3; 
}

.hero__copy > p { 
  max-width: 620px; 
  margin: 26px 0 28px; 
  color: #173b67; 
  font-size: clamp(1rem, 1.35vw, 1.27rem); 
  line-height: 1.55; 
  font-weight: 500; 
}

.primary-cta { 
  display: inline-flex; 
  align-items: center; 
  gap: 36px; 
  min-height: 54px; 
  padding: 0 26px; 
  border-radius: 12px; 
  background: linear-gradient(135deg, #2196f3, #00b0ff); 
  color: #fff; 
  font-weight: 700; 
  box-shadow: 0 12px 28px rgba(0, 176, 255, .28); 
  transition: transform .2s, box-shadow .2s; 
}

.primary-cta:hover { 
  transform: translateY(-2px); 
  box-shadow: 0 16px 34px rgba(0, 176, 255, .35); 
}

.primary-cta:focus-visible { 
  outline: 3px solid #fff; 
  outline-offset: 3px; 
}
.primary-cta span{
  font-size: 25px;
}
/* Tarjetas de beneficios en la parte inferior del hero */
.hero-benefits { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 22px; 
  margin-top: 58px; 
  margin-bottom: 10px; 
}

.benefit-card { 
  display: flex; 
  align-items: center; 
  gap: 18px; 
  min-height: 106px; 
  padding: 22px 24px; 
  border: 1px solid rgba(255, 255, 255, .88); 
  border-radius: 16px; 
  background: rgba(255, 255, 255, .91); 
  box-shadow: 0 14px 30px rgba(8, 48, 107, .14); 
  backdrop-filter: blur(12px); 
  color: #08306b; 
}

.benefit-card__icon { 
  flex: 0 0 auto; 
  display: grid; 
  place-items: center; 
  width: 50px; 
  height: 50px; 
  border-radius: 50%; 
  background: #eaf4ff; 
  color: #2196f3; 
  font-size: 1.45rem; 
}

.benefit-card h2 { 
  margin: 0 0 6px; 
  font-size: 1rem; 
}

.benefit-card p { 
  margin: 0; 
  color: #49617e; 
  font-size: .86rem; 
  line-height: 1.45; 
}

/* ==========================================================================
   4. BODY
   Secciones de contenido dentro de <main>, después del hero. Ajustes por tamaño: sección 7.1.
   ========================================================================== */
/* 4.1 · Asesoría ("Te asesoramos para que tomes una mejor decisión")
   El brillo animado ::before también lo usa la sección 4.5. */
.advisory-section { 
  position: relative; 
  padding:  10px 0 125px; 
  background: radial-gradient(circle at 50% 0%, rgba(94, 72, 255, .62), transparent 38%), linear-gradient(145deg, #0d1f6c 0%, #2d2e9f 48%, #142d77 100%); 
  overflow: hidden; 
}

.advisory-section::before, 
.decision-section::before { 
  content: ""; 
  position: absolute; 
  inset: 0; 
  pointer-events: none; 
  background: linear-gradient(135deg, transparent 30%, rgba(75, 195, 247, .08) 50%, transparent 70%); 
  background-size: 220% 220%; 
  animation: ambientShift 14s ease-in-out infinite alternate; 
}

.advisory-grid { 
  position: relative; 
  display: grid; 
  grid-template-columns: .95fr 1.1fr .95fr; 
  gap: 26px; 
  align-items: stretch; 
}

.feature-card { 
  position: relative; 
  min-height: 610px; 
  padding: 38px; 
  border-radius: 28px; 
  overflow: hidden; 
  box-shadow: 0 26px 70px rgba(0, 8, 35, .34); 
  transition: transform .35s cubic-bezier(.2, .75, .2, 1), box-shadow .35s cubic-bezier(.2, .75, .2, 1); 
}

.feature-card:hover { 
  transform: translateY(-9px); 
  box-shadow: 0 34px 80px rgba(0, 8, 35, .42); 
}

.feature-card-light { 
  color: #071a4b; 
  background: linear-gradient(180deg, #fff 0%, #eef8ff 72%, #dcefff 100%); 
}

.feature-card-orbit { 
  color: #fff; 
  background: radial-gradient(circle at 50% 80%, rgba(123, 68, 255, .54), transparent 31%), linear-gradient(180deg, #102b75 0%, #12124c 100%); 
}

.feature-card h3 { 
  margin: 16px 0 14px; 
  font-size: 1.7rem; 
  line-height: 1.08; 
  letter-spacing: -.03em; 
}

.feature-card p { 
  margin: 0; 
  color: inherit; 
  opacity: .84; 
}

/* Íconos circulares y listas con palomita dentro de las cards */
.feature-icon { 
  width: 58px; 
  height: 58px; 
  display: grid; 
  place-items: center; 
  border-radius: 50%; 
}

.feature-icon i { 
  width: 28px; 
  height: 28px; 
  font-size: 23px;
  margin: 6 px 0 0 0;
}

.icon-blue { 
  color: #2196f3; 
  background: #e9f5ff; 
}

.icon-green { 
  color: #18b965; 
  background: #e8fff1; 
}

.icon-white { 
  color: #fff; 
  background: rgba(255, 255, 255, .14); 
  border: 1px solid rgba(255, 255, 255, .16); 
}

.check-list { 
  display: grid; 
  gap: 11px; 
  padding: 0; 
  margin: 26px 0 0; 
  list-style: none; 
  font-size: .92rem; 
  font-weight: 700; 
}

.check-list li { 
  display: flex; 
  align-items: center; 
  gap: 10px; 
}

.check-list svg { 
  width: 18px; 
  height: 18px; 
  padding: 3px; 
  border-radius: 50%; 
  fill: none; 
  stroke: #fff; 
  stroke-width: 3; 
  background: #2196f3; 
}

.check-list-green svg { 
  background: #18b965; 
}

.feature-image { 
  position: absolute; 
  inset: auto 0 0; 
  width: 100%; 
  height: 235px; 
  object-fit: cover; 
  transition: transform .6s cubic-bezier(.2, .75, .2, 1); 
}

.feature-card:hover .feature-image { 
  transform: scale(1.045); 
}

/* Carrusel 3D giratorio de aseguradoras ("Comparamos por ti") */
.insurer-orbit { 
  position: relative; 
  height: 270px; 
  margin: 34px -20px 0; 
  perspective: 850px; 
}

.orbit-glow { 
  position: absolute; 
  left: 12%; 
  right: 12%; 
  bottom: 34px; 
  height: 54px; 
  border: 4px solid #7a4dff; 
  border-radius: 50%; 
  box-shadow: 0 0 36px #8a58ff, inset 0 0 22px #8a58ff; 
  transform: rotateX(68deg); 
}

.orbit-track { 
  position: absolute; 
  inset: 15px 0 0; 
  transform-style: preserve-3d; 
  animation: orbitRotate 16s linear infinite; 
}

.insurer-card { 
  position: absolute; 
  top: 72px; 
  left: 50%; 
  width: 118px; 
  height: 100px; 
  margin-left: -59px; 
  display: grid; 
  place-items: center; 
  border-radius: 18px; 
  color: #08306b; 
  background: #fff; 
  box-shadow: 0 16px 35px rgba(0, 0, 0, .22); 
  font-weight: 900; 
  font-size: 1.14rem; 
  backface-visibility: hidden; 
}

.insurer-1 { 
  transform: rotateY(0deg) translateZ(190px); 
}

.insurer-2 { 
  transform: rotateY(60deg) translateZ(190px); 
  color: #71308d; 
}

.insurer-3 { 
  transform: rotateY(120deg) translateZ(190px); 
  color: #0e7a45; 
}

.insurer-4 { 
  transform: rotateY(180deg) translateZ(190px); 
  color: #122a8e; 
}

.insurer-5 { 
  transform: rotateY(240deg) translateZ(190px); 
  color: #17497b; 
}

.insurer-6 { 
  transform: rotateY(300deg) translateZ(190px); 
  color: #db293d; 
}

.orbit-caption { 
  display: block; 
  margin-top: 6px; 
  color: rgba(255, 255, 255, .78); 
  text-align: center; 
}

/* 4.2 · Paquetes y coberturas: panel oscuro, pestañas y tarjetas por paquete */
.packages-section { 
  background: #fff; 
}

.packages-panel { 
  display: grid; 
  grid-template-columns: 260px 1fr; 
  gap: 52px; 
  padding: 46px; 
  border-radius: 42px; 
  color: #fff; 
  background: linear-gradient(145deg, #0b1d63 0%, #252895 57%, #143787 100%); 
  box-shadow: 0 24px 70px rgba(8, 48, 107, .16); 
}

.packages-intro h2 { 
  margin: 0; 
  font-size: clamp(2rem, 3.2vw, 3rem); 
  line-height: 1.07; 
  letter-spacing: -.04em; 
}

.packages-intro p:not(.eyebrow) { 
  color: rgba(255, 255, 255, .72); 
}

.packages-intro .text-link { 
  color: #7bd8ff; 
}

.packages-content { 
  min-width: 0; 
}
/* Pestañas: la seleccionada lleva aria-selected="true" */
.package-tabs { 
  display: grid; 
  grid-template-columns: repeat(4, 1fr); 
  gap: 6px; 
  padding: 5px; 
  margin-bottom: 18px; 
  border: 1px solid rgba(255, 255, 255, .16); 
  border-radius: 999px; 
  background: rgba(3, 18, 63, .4); 
}

.package-tabs button { 
  min-height: 42px; 
  padding: 0 12px; 
  border: 0; 
  border-radius: 999px; 
  color: rgba(255, 255, 255, .75); 
  background: transparent; 
  font-weight: 800; 
  cursor: pointer; 
  transition: background .25s, color .25s, transform .25s; 
}

.package-tabs button[aria-selected="true"] { 
  color: #08306B; 
  background: #f2f6fA; 
  box-shadow: 0 10px 24px rgba(0, 176, 255, .25); 
}
/* Tarjetas de paquete: .is-selected resalta la elegida */
.package-grid { 
  display: grid; 
  grid-template-columns: repeat(4, minmax(0, 1fr)); 
  gap: 12px; 
}

.package-card { 
  position: relative; 
  min-width: 0; 
  padding: 18px 16px 17px; 
  border: 2px solid transparent; 
  border-radius: 20px; 
  color: #071a4b; 
  background: #f2f6fA; 
  box-shadow: 0 12px 25px rgba(0, 12, 52, .12); 
  transition: transform .32s cubic-bezier(.2, .75, .2, 1), border-color .32s, box-shadow .32s; 
}

.package-card:hover, 
.package-card.is-selected { 
  transform: translateY(-8px); 
  border-color: transparent; 
  box-shadow: 0 24px 48px rgba(0, 12, 52, .24); 
}

.package-title { 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  font-size: .86rem; 
  text-transform: uppercase; 
}

.package-title span { 
  display: inline-flex; 
  align-items: center; 
  gap: 7px; 
  font-weight: 900; 
}

.package-title svg { 
  width: 20px; 
  height: 20px; 
  fill: none; 
  stroke: #2196f3; 
  stroke-width: 2; 
}

.package-card > img { 
  width: 100%; 
  height: 154px; 
  margin: 10px 0 12px; 
  border-radius: 14px; 
  object-fit: cover; 
  object-position: center; 
  box-shadow: 0 12px 24px rgba(8, 48, 107, .12); 
  transition: transform .35s cubic-bezier(.2, .75, .2, 1), box-shadow .35s cubic-bezier(.2, .75, .2, 1); 
}

.package-card:hover > img { 
  transform: scale(1.035) translateY(-4px); 
  box-shadow: 0 18px 32px rgba(8, 48, 107, .18); 
}

.package-card ul { 
  display: grid; 
  gap: 10px; 
  padding: 0; 
  margin: 8px 0 18px; 
  list-style: none; 
}

.package-card li { 
  position: relative; 
  padding-left: 17px; 
  font-size: .72rem; 
  line-height: 1.35; 
}

.package-card li::before { 
  content: ""; 
  position: absolute; 
  left: 0; 
  top: .45em; 
  width: 7px; 
  height: 7px; 
  border-radius: 50%; 
  background: #0d47a1; 
  box-shadow: 0 0 0 3px rgba(33, 150, 243, .12); 
}

.package-card li strong { 
  display: block; 
  font-size: .74rem; 
}

.package-card li span { 
  display: none; 
  color: #66758c; 
  margin-top: 4px; 
}

.package-card.is-expanded li span { 
  display: block; 
}

.package-detail { 
  display: inline-flex; 
  align-items: center; 
  gap: 6px; 
  padding: 0; 
  border: 0; 
  color: #00b0ff; 
  background: none; 
  font-size: .78rem; 
  font-weight: 900; 
  cursor: pointer; 
}

.package-detail svg { 
  width: 16px; 
  height: 16px; 
}

.package-disclaimer { 
  display: flex; 
  align-items: flex-start; 
  gap: 8px; 
  margin: 15px 0 0; 
  color: rgba(255, 255, 255, .68); 
  font-size: .78rem; 
}

.package-disclaimer svg { 
  flex: 0 0 auto; 
  width: 18px; 
  height: 18px; 
  fill: none; 
  stroke: #fff; 
  stroke-width: 2; 
}

/* 4.3 · Información: coberturas adicionales (carrusel continuo) y guía para elegir */
.information-section { 
  padding: 0; 
}

.info-layout { 
  display: grid; 
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); 
  gap: 26px; 
}

.info-card { 
  min-width: 0; 
  padding: 38px; 
  border: 1px solid #e6edf4; 
  border-radius: 28px; 
  background: linear-gradient(145deg, #fff, #f1f7ff); 
  box-shadow: 0 12px 30px rgba(8, 48, 107, .10); 
}

.info-card h3 { 
  margin: 0; 
  font-size: 1.8rem; 
  letter-spacing: -.03em; 
}

.info-card > p, 
.guide-card p { 
  color: #66758c; 
}

.addons-viewport { 
  position: relative; 
  overflow: hidden; 
  margin-top: 26px; 
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); 
}

.addons-track { 
  display: flex; 
  gap: 12px; 
  width: max-content; 
  padding: 8px 26px 16px; 
  animation: addonScroll 22s linear infinite; 
}

.addons-viewport:hover .addons-track, 
.addons-track:focus-within { 
  animation-play-state: paused; 
}

.addon-item { 
  width: 154px; 
  min-height: 176px; 
  display: flex; 
  flex-direction: column; 
  align-items: stretch; 
  justify-content: flex-start; 
  gap: 10px; 
  padding: 9px; 
  border: 1px solid #dbe9f7; 
  border-radius: 20px; 
  color: #08306b; 
  background: #fff; 
  box-shadow: 0 10px 24px rgba(8, 48, 107, .08); 
  cursor: pointer; 
  overflow: hidden; 
  transition: transform .25s, border-color .25s, box-shadow .25s; 
}

.addon-item:hover, 
.addon-item:focus-visible, 
.addon-item.is-active { 
  transform: translateY(-6px) scale(1.02); 
  border-color: #4fc3f7; 
  box-shadow: 0 18px 36px rgba(8, 48, 107, .16); 
}

.addon-item svg { 
  width: 34px; 
  height: 34px; 
  fill: none; 
  stroke: #2196f3; 
  stroke-width: 1.6; 
}
/* Fotografías WebP premium de las coberturas adicionales. */
.addon-photo { 
  width: 100%; 
  height: 104px; 
  border-radius: 14px; 
  object-fit: cover; 
  object-position: center; 
  transition: transform .35s cubic-bezier(.2, .75, .2, 1), filter .35s cubic-bezier(.2, .75, .2, 1); 
}

.addon-item:hover .addon-photo, 
.addon-item:focus-visible .addon-photo, 
.addon-item.is-active .addon-photo { 
  transform: scale(1.055); 
  filter: saturate(1.08) contrast(1.04); 
}

.addon-item span { 
  display: grid; 
  min-height: 38px; 
  place-items: center; 
  padding: 2px 6px 6px; 
  text-align: center; 
  font-size: .83rem; 
  font-weight: 800; 
  line-height: 1.15; 
}

.addon-detail { 
  min-height: 84px; 
  display: grid; 
  align-content: center; 
  gap: 4px; 
  margin-top: 18px; 
  padding: 17px 20px; 
  border-radius: 18px; 
  background: linear-gradient(135deg, #eaf7ff, #f5f1ff); 
}

.addon-detail strong { 
  color: #08306b; 
}

.addon-detail span { 
  color: #66758c; 
  font-size: .9rem; 
}
/* Guía "¿Cómo elegir tu cobertura?" con lista numerada e ilustración flotante */
.guide-card { 
  display: grid; 
  grid-template-columns: 1fr 280px; 
  align-items: center; 
  gap: 24px; 
  overflow: hidden; 
}

.number-list { 
  display: grid; 
  gap: 16px; 
  padding: 0; 
  margin: 22px 0 26px; 
  list-style: none; 
}

.number-list li { 
  display: grid; 
  grid-template-columns: 34px 1fr; 
  gap: 12px; 
  align-items: flex-start; 
}

.number-list span { 
  width: 34px; 
  height: 34px; 
  display: grid; 
  place-items: center; 
  border-radius: 50%; 
  color: #fff; 
  background: #2196f3; 
  font-size: .82rem; 
  font-weight: 900; 
}

.number-list p { 
  margin: 2px 0 0; 
  font-size: .92rem; 
}

.floating-illustration { 
  width: 100%; 
  animation: floatY 4.2s ease-in-out infinite; 
}

/* 4.4 · Tipos de vehículo: texto, botones por tipo de uso y collage de vehículos */
.vehicle-panel { 
  position: relative; 
  min-height: 390px; 
  display: grid; 
  grid-template-columns: 1.1fr 2.2fr 0fr; 
  align-items: center; 
  gap: 30px; 
  padding: 44px; 
  border: 1px solid #dbe9f7; 
  border-radius: 42px; 
  overflow: hidden; 
  background: linear-gradient(135deg, #fff 0%, #f6fbff 54%, #e9f4ff 100%); 
  box-shadow: 0 12px 30px rgba(8, 48, 107, .10); 
}

.vehicle-panel::before { 
  content: ""; 
  position: absolute; 
  right: -80px; 
  top: -100px; 
  width: 360px; 
  height: 360px; 
  border-radius: 50%; 
  background: radial-gradient(circle, rgba(79, 195, 247, .22), transparent 67%); 
}

.vehicle-copy h2 { 
  margin: 0; 
  font-size: clamp(2rem, 3vw, 3rem); 
  line-height: 1.08; 
  letter-spacing: -.04em; 
}

.vehicle-copy p:last-child { 
  color: #66758c; 
}

.vehicle-types { 
  display: grid; 
  grid-template-columns: repeat(2, 1fr); 
  gap: 12px; 
}

.vehicle-types button { 
  min-height: 142px; 
  display: grid; 
  place-items: center; 
  align-content: center; 
  gap: 8px; 
  padding: 16px; 
  border: 1px solid #d9e8f7; 
  border-radius: 20px; 
  color: #08306b; 
  background: rgba(255, 255, 255, .9); 
  cursor: pointer; 
  transition: transform .25s, box-shadow .25s, border-color .25s; 
}

.vehicle-types button:hover, 
.vehicle-types button:focus-visible { 
  transform: translateY(-6px); 
  border-color: #4fc3f7; 
  box-shadow: 0 16px 32px rgba(8, 48, 107, .12); 
}

.vehicle-types svg { 
  width: 32px; 
  height: 32px; 
  fill: none; 
  stroke: #2196f3; 
  stroke-width: 1.7; 
}

.vehicle-types strong { 
  font-size: .88rem; 
}

.vehicle-types span { 
  color: #66758c; 
  font-size: .72rem; 
  text-align: center; 
}

.vehicle-collage { 
  position: relative; 
  min-height: 280px; 
}

.vehicle-collage img { 
  position: absolute; 
  width: 95%; 
  filter: drop-shadow(0 22px 22px rgba(8, 48, 107, .18)); 
  transition: transform .5s cubic-bezier(.2, .75, .2, 1); 
}

.vehicle-collage img:first-child { 
  right: -18%; 
  top: 14px; 
}

.vehicle-collage img:last-child { 
  right: 4%; 
  bottom: -22px; 
  width: 78%; 
}

.vehicle-panel:hover .vehicle-collage img:first-child { 
  transform: translateX(-10px) translateY(-4px); 
}

.vehicle-panel:hover .vehicle-collage img:last-child { 
  transform: translateX(8px) translateY(-8px); 
}

/* 4.5 · Cards de decisión: "Pago seguro", "¿Puedo asegurar mi vehículo?" y "Experiencias reales" */
.decision-section { 
  position: relative; 
  padding: 110px 0 125px; 
  overflow: hidden; 
  color: #fff; 
}

.decision-grid { 
  position: relative; 
  display: grid; 
  grid-template-columns: .78fr 1.18fr .82fr; 
  gap: 20px; 
}

.decision-card { 
  position: relative; 
  min-height: 430px; 
  padding: 32px; 
  border-radius: 28px; 
  overflow: hidden; 
  box-shadow: 0 26px 70px rgba(0, 8, 35, .34); 
  transition: transform .35s cubic-bezier(.2, .75, .2, 1); 
}

.decision-card:hover { 
  transform: translateY(-8px); 
}

.decision-card h3 { 
  margin: 0 0 12px; 
  font-size: 2rem; 
  line-height: 1.05; 
  letter-spacing: -.03em; 
}

.decision-card p { 
  color: rgba(255, 255, 255, .78); 
}
/* La tarjeta va debajo del texto (no encima) y sobresale a la derecha, recortada por la card */
.payment-card { 
  display: flex; 
  flex-direction: column; 
  background: linear-gradient(155deg, #071d68, #0f3da3 52%, #4a1b9e); 
}

.payment-card img { 
  position: relative; 
  align-self: flex-end; 
  width: 95%; 
  margin: auto -18% -22px 0; 
  padding-top: 18px; 
  animation: floatY 4.8s ease-in-out infinite; 
}
/* Card de requisitos: cada punto aparece en secuencia (.is-visible, desde js/main.js) */
.eligibility-card { 
  display: grid; 
  grid-template-columns: 1fr; 
  gap: 8px; 
  background: linear-gradient(145deg, #007f82, #0b6677 48%, #123f66); 
}

.eligibility-copy { 
  position: relative; 
  z-index: 2; 
}

.eligibility-list { 
  display: grid; 
  gap: 12px; 
  padding: 0; 
  margin: 24px 0 16px; 
  list-style: none; 
}

.eligibility-list li { 
  display: flex; 
  gap: 9px; 
  align-items: flex-start; 
  opacity: .45; 
  transform: translateY(8px); 
  transition: opacity .45s, transform .45s; 
}

.eligibility-list li.is-visible { 
  opacity: 1; 
  transform: translateY(0); 
}

.eligibility-list svg { 
  flex: 0 0 auto; 
  width: 19px; 
  height: 19px; 
  margin-top: 3px; 
  padding: 3px; 
  border-radius: 50%; 
  fill: none; 
  stroke: #063e21; 
  stroke-width: 3; 
  background: #5ff68d; 
}

.eligibility-card small { 
  color: rgba(255, 255, 255, .66); 
}
/* Card de testimonios: calificación, estrellas animadas y carrusel de testimonios */
.reviews-card { 
  color: #071a4b; 
  background: linear-gradient(180deg, #fff 0%, #eef8ff 72%, #dcefff 100%); 
}

.reviews-card p { 
  color: rgba(7, 26, 58, .72); 
}

.rating { 
  display: grid; 
  grid-template-columns: auto 1fr; 
  align-items: center; 
  column-gap: 14px; 
  margin: 22px 0; 
}

.rating > strong { 
  grid-row: 1 / span 2; 
  font-size: 3.4rem; 
  line-height: 1; 
}

.rating span { 
  color: rgba(7, 26, 58, .68); 
  font-size: .78rem; 
}

.stars { 
  display: flex; 
  gap: 3px; 
}

.stars svg { 
  width: 22px; 
  height: 22px; 
  fill: #ffb84d; 
  stroke: #e09a00; 
  stroke-width: 1; 
  opacity: 0; 
  transform: scale(.6); 
}

.stars.is-animated svg { 
  animation: starPop .45s cubic-bezier(.2, .75, .2, 1) forwards; 
}

.stars.is-animated svg:nth-child(2) { 
  animation-delay: .08s; 
}

.stars.is-animated svg:nth-child(3) { 
  animation-delay: .16s; 
}

.stars.is-animated svg:nth-child(4) { 
  animation-delay: .24s; 
}

.stars.is-animated svg:nth-child(5) { 
  animation-delay: .32s; 
}

.testimonial-carousel { 
  position: relative; 
  min-height: 155px; 
}

.testimonial { 
  position: absolute; 
  inset: 0; 
  margin: 0; 
  opacity: 0; 
  transform: translateX(18px); 
  transition: opacity .45s, transform .45s; 
}

.testimonial.is-active { 
  opacity: 1; 
  transform: translateX(0); 
}

.testimonial p { 
  margin: 0 0 18px; 
  color: #071a4b; 
  font-weight: 700; 
}

.testimonial footer { 
  display: grid; 
}

.testimonial footer span { 
  color: rgba(7, 26, 58, .66); 
  font-size: .8rem; 
}

.testimonial-dots button { 
  width: 9px; 
  height: 9px; 
  padding: 0; 
  border: 0; 
  border-radius: 50%; 
  background: rgba(255, 255, 255, .5); 
  cursor: pointer; 
  transition: width .25s, border-radius .25s, background .25s; 
}

.testimonial-dots button.is-active { 
  width: 28px; 
  border-radius: 999px; 
  background: #2196f3; 
}

.testimonial-dots { 
  display: flex; 
  gap: 7px; 
}

.testimonial-dots button { 
  background: rgba(7, 26, 75, .22); 
}

/* ==========================================================================
   5. FOOTER
   CTA final, columnas de enlaces/contacto y pie legal. Ajustes por tamaño: sección 7.1.
   ========================================================================== */
/* Fondo con onda animada y CTA final */
.site-footer { 
  position: relative; 
  overflow: hidden; 
  color: #fff; 
  background: radial-gradient(circle at 16% 0%, rgba(105, 67, 255, .58), transparent 30%), radial-gradient(circle at 86% 10%, rgba(0, 176, 255, .4), transparent 28%), linear-gradient(140deg, #06153e, #0b2c79 55%, #071945); 
}

.footer-wave { 
  position: absolute; 
  inset: 0; 
  opacity: .35; 
  background-image: radial-gradient(circle at 20% 120%, transparent 0 34%, rgba(79, 195, 247, .25) 34.5% 35%, transparent 35.5%), radial-gradient(circle at 90% -20%, transparent 0 34%, rgba(106, 67, 255, .25) 34.5% 35%, transparent 35.5%); 
  background-size: 760px 460px, 860px 560px; 
  animation: footerWave 18s ease-in-out infinite alternate; 
  pointer-events: none; 
}

.footer-cta { 
  position: relative; 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  gap: 38px; 
  padding: 50px 54px; 
  transform: translateY(-44px); 
  border: 1px solid rgba(255, 255, 255, .18); 
  border-radius: 42px; 
  background: linear-gradient(135deg, rgba(44, 87, 236, .92), rgba(0, 176, 255, .84)); 
  box-shadow: 0 28px 70px rgba(0, 0, 0, .32); 
  backdrop-filter: blur(12px); 
}

.footer-cta h2 { 
  max-width: 760px; 
  margin: 0; 
  font-size: clamp(2rem, 3.5vw, 3.4rem); 
  line-height: 1.07; 
  letter-spacing: -.04em; 
}

.footer-cta p:last-child { 
  margin-bottom: 0; 
  color: rgba(255, 255, 255, .78); 
}
/* Columnas: marca y redes | empresa | coberturas | contacto | legal */
.footer-grid { 
  position: relative; 
  display: grid; 
  grid-template-columns: 1.35fr repeat(3, 1fr);
  gap: 34px; 
  padding: 34px 0 56px; 
}

.footer-brand img { 
  width: 205px; 
  height: 68px; 
  object-fit: contain; 
  filter: drop-shadow(0 8px 18px rgba(79, 195, 247, .28)); 
}

.footer-brand p { 
  color: rgba(255, 255, 255, .7); 
  font-size: .9rem; 
}

.social-links { 
  display: flex; 
  gap: 10px; 
  margin-top: 20px; 
}

.social-links a { 
  width: 40px; 
  height: 40px; 
  display: grid; 
  place-items: center; 
  border: 1px solid rgba(255, 255, 255, .18); 
  border-radius: 50%; 
  transition: transform .25s, background .25s, border-color .25s; 
}

.social-links a:hover { 
  transform: translateY(-4px); 
  border-color: transparent; 
  background: #2196f3; 
}

.social-links svg { 
  width: 19px; 
  height: 19px; 
  fill: none; 
  stroke: currentColor; 
  stroke-width: 1.8; 
}

.footer-grid h3 { 
  margin: 0 0 18px; 
  font-size: 1rem; 
}

.footer-nav, 
.footer-contact { 
  display: flex; 
  flex-direction: column; 
  gap: 10px; 
}

.footer-nav a, 
.footer-contact a, 
.footer-contact span { 
  color: rgba(255, 255, 255, .68); 
  font-size: .88rem; 
  transition: color .2s, transform .2s; 
}

.footer-nav a:hover, 
.footer-contact a:hover { 
  color: #fff; 
  transform: translateX(3px); 
}

.footer-contact a, 
.footer-contact span { 
  display: flex; 
  gap: 8px; 
  align-items: flex-start; 
}

.footer-contact svg { 
  flex: 0 0 auto; 
  width: 18px; 
  height: 18px; 
  margin-top: 3px; 
  fill: none; 
  stroke: #6ee5ff; 
  stroke-width: 1.8; 
}

.footer-contact small { 
  color: rgba(255, 255, 255, .5); 
}
/* Pie: derechos reservados y aviso de intermediario */
.footer-bottom { 
  position: relative; 
  display: flex; 
  justify-content: space-between; 
  gap: 24px; 
  padding: 20px 0 28px; 
  border-top: 1px solid rgba(255, 255, 255, .1); 
  color: rgba(255, 255, 255, .5); 
  font-size: .78rem; 
}

.footer-bottom p { 
  margin: 0; 
}
/* ==========================================================================
   6. ELEMENTOS GLOBALES
   Elementos fuera del flujo normal y animaciones reutilizadas en toda la página.
   ========================================================================== */
/* WhatsApp flotante: pestaña vertical en escritorio/tablet (en móvil pasa a botón circular, sección 7.2) */
.whatsapp-float { 
  position: fixed; 
  z-index: 1100; 
  right: 0; 
  top: 50%; 
  transform: translateY(-50%); 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  gap: 10px; 
  padding: 12px 10px 16px; 
  border: 2px solid #fff; 
  border-radius: 20px 0 0 20px; 
  background: linear-gradient(#32d25b, #14a83c); 
  color: #fff; 
  box-shadow: 0 10px 26px rgba(0, 0, 0, .2); 
  line-height: normal; 
}

.whatsapp-float__icon { 
  font-size: 2rem; 
}

.whatsapp-float__text { 
  writing-mode: vertical-rl; 
  transform: rotate(180deg); 
  font-weight: 700; 
  letter-spacing: .02em; 
}
/* Diálogo de detalles de paquete (<dialog>) */
.package-dialog { 
  width: min(640px, calc(100% - 30px)); 
  padding: 0; 
  border: 0; 
  border-radius: 28px; 
  color: #071a3a; 
  box-shadow: 0 30px 100px rgba(0, 0, 0, .34); 
}

.package-dialog::backdrop { 
  background: rgba(3, 12, 38, .72); 
  backdrop-filter: blur(8px); 
}

.package-dialog [data-dialog-content] { 
  padding: 38px; 
}

.package-dialog h2 { 
  margin-top: 0; 
}

.package-dialog ul { 
  padding-left: 20px; 
}

.dialog-close { 
  position: absolute; 
  top: 14px; 
  right: 14px; 
  width: 42px; 
  height: 42px; 
  display: grid; 
  place-items: center; 
  border: 0; 
  border-radius: 50%; 
  background: #f2f6fa; 
  cursor: pointer; 
}

.dialog-close svg { 
  width: 22px; 
  height: 22px; 
  fill: none; 
  stroke: currentColor; 
  stroke-width: 2; 
}
/* Animación de aparición al hacer scroll: js/main.js agrega .is-visible a cada [data-reveal] */
.reveal { 
  opacity: 0; 
  transform: translateY(34px); 
  transition: opacity .75s cubic-bezier(.2, .75, .2, 1), transform .75s cubic-bezier(.2, .75, .2, 1); 
}

.reveal-left { 
  transform: translateX(-34px); 
}

.reveal-right { 
  transform: translateX(34px); 
}

.reveal-up { 
  transform: translateY(44px); 
}

.reveal.is-visible { 
  opacity: 1; 
  transform: translate(0, 0); 
}

.advisory-grid > :nth-child(2) { 
  transition-delay: .1s; 
}

.advisory-grid > :nth-child(3) { 
  transition-delay: .2s; 
}

/* Keyframes usados por las animaciones de la página */
@keyframes orbitRotate { 
  to { 
    transform: rotateY(360deg); 
  } 
}

@keyframes addonScroll { 
  from { 
    transform: translateX(0); 
  } 
  to { 
    transform: translateX(-44%); 
  } 
}

@keyframes floatY { 
  0%, 100% { 
    transform: translateY(0); 
  } 
  50% { 
    transform: translateY(-9px); 
  } 
}

@keyframes starPop { 
  to { 
    opacity: 1; 
    transform: scale(1); 
  } 
}

@keyframes ambientShift { 
  from { 
    background-position: 0% 50%; 
  } 
  to { 
    background-position: 100% 50%; 
  } 
}

@keyframes footerWave { 
  from { 
    background-position: 0 0, 100% 0; 
  } 
  to { 
    background-position: 90px 30px, calc(100% - 80px) 40px; 
  } 
}
/* ==========================================================================
   7. RESPONSIVE
   7.1 Body y footer: 1120 / 780 / 520 px.
   7.2 Header, hero y WhatsApp flotante: 1199 / 767 / 430 px (diseño aprobado) y ajustes.
   ========================================================================== */
/* =========================================================
   7.1 · BODY en escritorio (≥1121px): cards principales de Asesoría
   Las tres conservan el mismo ancho y alturas distintas,
   tal como en el boceto aprobado.
   ========================================================= */
@media (min-width: 1121px) {
  .advisory-grid { 
    grid-template-columns: repeat(3, minmax(0, 1fr)); 
    align-items: start; 
  }

  .advisory-grid > .feature-card:nth-child(1) { 
    min-height: 610px; 
  }

  .advisory-grid > .feature-card:nth-child(2) { 
    min-height: 690px; 
  }

  .advisory-grid > .feature-card:nth-child(3) { 
    min-height: 590px; 
  }
}

/* 7.1 · Tablet (781px–1120px): Asesoría y Comparamos lado a lado; "Siempre de tu lado" a todo el ancho debajo */
@media (min-width: 781px) and (max-width: 1120px) {
  .advisory-grid > .feature-card-orbit {
    grid-column: auto;
  }

  .advisory-grid > .feature-card:nth-child(3) {
    grid-column: 1 / -1;
  }
}

/* 7.1 · Tablet (≤1120px): BODY y FOOTER */
@media (max-width: 1120px) {
  /* BODY · 4.1 Asesoría */
  .advisory-grid { 
    grid-template-columns: repeat(2, 1fr); 
  }

  .feature-card-orbit { 
    grid-column: 1 / -1; 
    min-height: 540px; 
  }

  /* BODY · 4.2 Paquetes */
  .packages-panel { 
    grid-template-columns: 1fr; 
  }

  .packages-intro { 
    max-width: 720px; 
  }

  .package-grid { 
    grid-template-columns: repeat(2, 1fr); 
  }

  /* BODY · 4.3 Información */
  .info-layout { 
    grid-template-columns: 1fr; 
  }

  /* BODY · 4.4 Tipos de vehículo */
  .vehicle-panel { 
    grid-template-columns: 1fr 1fr; 
  }

  .vehicle-collage { 
    grid-column: 1 / -1; 
    min-height: 240px; 
  }

  .vehicle-collage img:first-child { 
    right: 8%; 
    width: 58%; 
  }

  .vehicle-collage img:last-child { 
    right: 35%; 
    width: 45%; 
  }

  /* BODY · 4.5 Cards de decisión */
  .decision-grid { 
    grid-template-columns: repeat(2, 1fr); 
  }

  .reviews-card { 
    grid-column: 1 / -1; 
    min-height: 360px; 
  }

  /* FOOTER */
  .footer-grid { 
    grid-template-columns: 1.3fr repeat(2, 1fr); 
  }
}

/* 7.1 · Móvil (≤780px): BODY y FOOTER */
@media (max-width: 780px) {
  /* BASE y componentes compartidos */
  .container-wide { 
    width: min(100% - 28px, 1400px); 
  }

  .white-space-lg { 
    height: 84px; 
  }

  .white-space-xl { 
    height: 120px; 
  }

  /* BODY · 4.1 Asesoría (y padding de 4.5) */
  .advisory-section, 
  .decision-section { 
    padding-block: 82px; 
  }

  .advisory-grid { 
    grid-template-columns: 1fr; 
  }

  .feature-card-orbit { 
    grid-column: auto; 
  }

  .feature-card { 
    min-height: 590px; 
    padding: 30px; 
  }

  /* BODY · 4.2 Paquetes: las tarjetas pasan a carrusel horizontal */
  .packages-panel { 
    padding: 24px 18px; 
    border-radius: 28px; 
  }

  .package-tabs { 
    overflow-x: auto; 
    grid-template-columns: repeat(4, minmax(105px, 1fr)); 
  }

  .package-grid { 
    display: flex; 
    overflow-x: auto; 
    scroll-snap-type: x mandatory; 
    padding: 8px 4px 16px; 
  }

  .package-card { 
    flex: 0 0 min(84vw, 350px); 
    scroll-snap-align: center; 
  }

  /* BODY · 4.3 Información */
  .info-card { 
    padding: 28px 22px; 
  }

  /* Escudo junto al título (en lugar de debajo) para acortar la tarjeta */
  .guide-card {
    grid-template-columns: 1fr auto;
    column-gap: 8px;
    row-gap: 0;
  }

  .guide-card > div {
    display: contents;
  }

  .guide-card > div > * {
    grid-column: 1 / -1;
  }

  .guide-card > div > h3 {
    grid-column: 1;
    grid-row: 1;
  }

  .guide-card .button {
    justify-self: start;
  }

  .floating-illustration {
    grid-column: 2;
    grid-row: 1;
    width: 104px;
    height: auto;
    margin: -18px -12px -18px 0;
  }

  /* BODY · 4.4 Tipos de vehículo */
  .vehicle-panel { 
    grid-template-columns: 1fr; 
    padding: 30px 22px; 
  }

  .vehicle-types { 
    grid-template-columns: repeat(2, 1fr); 
  }

  .vehicle-collage { 
    grid-column: auto; 
    min-height: 200px; 
  }

  .vehicle-collage img:first-child { 
    right: -8%; 
    width: 75%; 
  }

  .vehicle-collage img:last-child { 
    right: 33%; 
    width: 57%; 
  }

  /* BODY · 4.5 Cards de decisión */
  .decision-grid { 
    grid-template-columns: 1fr; 
  }

  .reviews-card { 
    grid-column: auto; 
  }

  .decision-card {
    min-height: 410px;
  }

  /* Tarjeta flotante con alto proporcional para acortar "Pago seguro" */
  .payment-card {
    min-height: 0;
  }

  .payment-card img {
    width: 78%;
    height: auto;
    margin: 0 -10% -12px 0;
    padding-top: 4px;
  }

  /* FOOTER */
  .footer-cta { 
    align-items: flex-start; 
    flex-direction: column; 
    padding: 36px 28px; 
  }

  .footer-grid { 
    grid-template-columns: repeat(2, 1fr); 
  }

  .footer-brand {
    grid-column: 1 / -1;
    text-align: center;
  }

  .footer-brand img {
    display: block;
    margin-inline: auto;
  }

  .social-links {
    justify-content: center;
  }

  .footer-bottom {
    flex-direction: column; 
  }
}

/* 7.1 · Móvil angosto (≤520px): BODY y FOOTER */
@media (max-width: 520px) {
  /* Componentes compartidos */
  .button { 
    width: 100%; 
  }

  .section-heading { 
    margin-bottom: 40px; 
  }

  /* BODY · 4.1 Asesoría */
  .feature-card { 
    min-height: 540px; 
    padding: 26px; 
  }

  .feature-image { 
    height: 205px; 
  }

  .insurer-orbit { 
    transform: scale(.88); 
    margin-inline: -48px; 
  }

  /* BODY · 4.2 Paquetes */
  .package-grid { 
    margin-inline: -8px; 
  }

  .package-card > img { 
    height: 170px; 
  }

  /* BODY · 4.3 Información */
  .addon-item { 
    width: 142px; 
    min-height: 166px; 
  }

  .addon-photo { 
    height: 96px; 
  }

  .info-card h3 { 
    font-size: 1.55rem; 
  }

  /* BODY · 4.4 Tipos de vehículo */
  .vehicle-types { 
    grid-template-columns: 1fr 1fr; 
  }

  .vehicle-types button { 
    min-height: 126px; 
    padding: 12px; 
  }

  /* FOOTER */
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-cta { 
    transform: translateY(-30px); 
  }
}

/* =========================================================
   7.2 · HEADER, HERO y WHATSAPP FLOTANTE
   Breakpoints del diseño aprobado de Landing_header_hero.
   ========================================================= */

/* 7.2 · Tablet (≤1199px) */
@media (max-width: 1199px) {
  .hero { padding-top: calc(92px + 38px); }
  /* HEADER */
.site-header { 
    padding: 12px 20px 0; 
  }

  .header-shell { 
    padding: 10px 24px; 
    border-radius: 16px; 
  }

  .brand__logo { 
    width: 180px; 
    height: 56px; 
  }

  .brand__divider { 
    height: 50px; 
    margin: 0 20px; 
  }

  .brand__tagline { 
    font-size: .85rem; 
  }

  .header-space { 
    min-width: 20px; 
  }

  .contact-icon { 
    width: 44px; 
    height: 44px; 
  }

  .contact-item { 
    gap: 10px; 
    padding: 6px; 
  }

  .contact-item strong { 
    font-size: .95rem; 
  }

  .contact-item small { 
    font-size: .68rem; 
  }

  .contact-divider { 
    height: 48px; 
    margin: 0 5px; 
  }

  /* HERO */
  .hero { 
    min-height: 690px; 
  }

  .hero__inner { 
    padding: 70px 38px 28px; 
  }

  .hero__media img { 
    object-position: 58% center; 
  }

  .hero h1 { 
    font-size: clamp(3rem, 6.7vw, 4.7rem); 
  }

  .hero-benefits { 
    gap: 12px; 
  }

  .benefit-card { 
    gap: 12px; 
    padding: 18px 15px; 
  }

  .benefit-card__icon { 
    width: 42px; 
    height: 42px; 
  }
}

/* 7.2 · Móvil (≤767px): el header cambia a botón "Contacto" + hamburguesa */
@media (max-width: 767px) {
  .hero { padding-top: calc(76px + 38px); }
  .mobile-contact-panel { top: calc(76px + 13px); }
  /* HEADER */
.site-header { padding: 8px 8px 0; }
  .header-shell { padding: 8px 14px; border-radius: 14px; }
  .brand__logo { width: 150px; height: 50px; }
  .brand__divider { height: 44px; margin: 0 12px; }
  .brand__tagline { font-size: .68rem; }
  .header-space, .header-contacts { display: none; }
  .contact-toggle, .menu-toggle { display: flex; border: 0; background: transparent; color: #08306b; cursor: pointer; }
  .contact-toggle { align-items: center; gap: 5px; margin-left: auto; padding: 10px 12px; border-radius: 11px; background: #e9f3ff; font-weight: 700; }
  .menu-toggle { width: 42px; height: 42px; margin-left: 8px; padding: 10px; flex-direction: column; justify-content: center; gap: 5px; }
  .menu-toggle span { width: 22px; height: 2px; border-radius: 2px; background: currentColor; }
  .mobile-contact-panel { position: absolute; top: calc(90px + 13px); left: 8px; right: 8px; padding: 8px; background: #fff; border-radius: 14px; box-shadow: 0 12px 35px rgba(8,48,107,.12); }
  .mobile-contact-panel a { display: flex; justify-content: space-between; gap: 15px; padding: 15px; border-radius: 10px; }
  .mobile-contact-panel a + a { border-top: 1px solid #e2eaf3; }
  .mobile-contact-panel span { color: #5a7291; font-size: .8rem; }
  /* HERO: una sola columna, beneficios apilados */
  .hero { min-height: 850px; padding-top: calc(90px + 12px); }
  .hero__media img { object-position: 64% center; }
  .hero__veil { background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.76) 36%, rgba(255,255,255,.18) 58%, rgba(8,48,107,.16) 100%); }
  .hero__inner { padding: 70px 20px 24px; justify-content: flex-start; }
  .hero__copy { max-width: 100%; }
  .hero h1 { font-size: clamp(2.5rem, 12vw, 4.2rem); }
  .hero__copy > p { max-width: 94%; margin: 18px 0 20px; font-size: .95rem; }
  .primary-cta { min-height: 50px; padding: 0 20px; gap: 24px; }
  .hero-benefits { grid-template-columns: 1fr; gap: 10px; margin-top: auto; }
  .benefit-card { min-height: 78px; padding: 14px 15px; border-radius: 14px; }
  .benefit-card h2 { font-size: .9rem; }
  .benefit-card p { font-size: .76rem; }
  /* WHATSAPP FLOTANTE: pasa a botón circular abajo a la derecha */
  .whatsapp-float { top: auto; right: 16px; bottom: 18px; transform: none; width: 58px; height: 58px; padding: 0; justify-content: center; border-width: 3px; border-radius: 50%; }
  .whatsapp-float__icon { font-size: 1.8rem; }
  .whatsapp-float__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
}

/* 7.2 · Móvil angosto (≤430px) */
@media (max-width: 430px) {
  /* HEADER: el botón "Contacto" muestra solo sus íconos */
  .brand__logo { width: 128px; }
  .brand__divider { margin: 0 8px; }
  .brand__tagline { font-size: .58rem; }
  .contact-toggle span:last-child { display: none; }
  /* HERO */
  .hero { min-height: 820px; }
  .hero__inner { padding-top: 64px; }
  .hero h1 { font-size: 2.65rem; }
}

/* 7.2 · HEADER en tablet angosta: compacta la marca para que los contactos quepan en una línea */
@media (min-width: 768px) and (max-width: 959px) {
  .brand__logo { width: 150px; height: 50px; }
  .brand__divider { margin: 0 14px; }
  .brand__tagline { font-size: .76rem; }
}

/* 7.2 · HEADER en pantallas muy angostas: evita que logo, eslogan y botones se encimen */
@media (max-width: 380px) {
  .header-shell { padding: 8px 10px; }
  .brand__logo { width: 104px; height: 44px; }
  .brand__divider { height: 38px; margin: 0 6px; }
  .brand__tagline { font-size: .54rem; }
  .contact-toggle { padding: 9px 8px; }
  .menu-toggle { margin-left: 2px; }
}

/* 7.2 · HEADER en ≤359px: oculta eslogan y divisor para que quepan los botones */
@media (max-width: 359px) {
  .brand__divider, .brand__tagline { display: none; }
}

/* ==========================================================================
   8. ACCESIBILIDAD
   Si el usuario pidió reducir el movimiento en su sistema, se desactivan animaciones y transiciones.
   ========================================================================== */

/* ==========================================================================
    SECCIONES PERSONALIZADAS DE LA LANDING PAGE
   ========================================================================== */

   #section-info1{
    padding-top: 0px !important; 
   }
#section-info1 .eyebrow{
  color: var(--azul-medio) !important; 
}

#section-info1  #decision-title{
  color: var(--azul-profundo) !important;
}
#section-info1 article .eyebrow.light {
  color: var(--gris-claro) !important;
}
#section-info1 .footer-cta .eyebrow{
  color: var(--gris-claro) !important;
}