/* ==========================================================================
   04 · COMPONENTS — piezas de UI reutilizables entre páginas
   ==========================================================================
   Corresponde a la tabla "Componentes del Design System" del handoff
   (PDF §19). Cada bloque de abajo está rotulado con el nombre exacto de
   esa tabla para que sea fácil ubicar qué falta y qué ya existe.

   Regla de oro: si un estilo se repite en más de una sección del Home,
   o si es razonable pensar que otra página futura lo va a necesitar,
   vive aquí — no dentro de 05-sections.css.

   Componentes de la tabla del PDF que TODAVÍA NO existen en este archivo
   porque ninguna pantalla aprobada los usa aún (se agregan en la fase
   correspondiente, con su propio HTML de referencia, no antes):
     - Coverage Indicator   → aparece en páginas de categoría (Fase 5)
     - Form Field           → aparece en el Quote Flow (Fase 4)
     - Progress Stepper     → aparece en el Quote Flow (Fase 4)
     - Testimonial Card     → bloqueado hasta tener contenido verificado
                               (ver auditoría Fase 1, punto C2)
   ========================================================================== */


/* --------------------------------------------------------------------
   BUTTON
   -------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .98rem;
  padding: 14px 22px;
  border-radius: 12px;
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .15s ease;
  white-space: nowrap;
}

.btn:active {
  transform: translateY(1px);
}

.btn[aria-disabled="true"] {
  cursor: default;
}

.btn .icon {
  width: 18px;
  height: 18px;
  flex: none;
}

.btn-block {
  width: 100%;
  /* Un botón de ancho completo puede terminar en una columna angosta;
     a diferencia de .btn suelto, este sí puede partir en dos líneas en
     vez de forzar overflow horizontal si el texto es largo. */
  white-space: normal;
}

/* Utilidad para CTA contextuales sueltos (no .btn-block) con texto más
   largo que el habitual "Cotizar ahora" — permite partir en dos líneas
   en vez de desbordar horizontalmente en pantallas angostas, sin
   forzar el botón a ancho completo. */
.btn-wrap {
  white-space: normal;
  max-width: 100%;
}

/* Variante primaria — CTA de máxima jerarquía ("Cotizar ahora"). */
.btn-primary {
  background: var(--color-green);
  color: var(--color-navy);
}
.btn-primary:hover {
  background: var(--color-green-dark);
  color: var(--color-white);
}

/* Variante secundaria — usa por defecto texto claro (para fondos navy,
   como el hero); .on-light la adapta a fondos blancos/cloud. */
.btn-secondary {
  background: transparent;
  border-color: rgba(255, 255, 255, .55);
  color: var(--color-white);
}
.btn-secondary:hover {
  background: rgba(255, 255, 255, .12);
}
.btn-secondary.on-light {
  border-color: var(--color-navy);
  color: var(--color-navy);
}
.btn-secondary.on-light:hover {
  background: var(--color-navy);
  color: var(--color-white);
}

/* Variante ghost — acciones de baja jerarquía ("Ver más preguntas"). */
.btn-ghost {
  background: transparent;
  color: var(--color-navy);
  border-color: var(--color-border);
}
.btn-ghost:hover {
  border-color: var(--color-navy);
}

/* Variante WhatsApp — canal conversacional, color de marca de terceros
   (no forma parte de la paleta SCE, es un identificador de canal). */
.btn-whatsapp {
  background: var(--color-whatsapp);
  color: var(--color-white);
}
.btn-whatsapp:hover {
  background: var(--color-whatsapp-dark);
}


/* --------------------------------------------------------------------
   SECTION HEADER — eyebrow + H2 + texto breve (PDF §19)
   -------------------------------------------------------------------- */
.section-head {
  max-width: 640px;
  margin: 0 auto 32px;
  text-align: left;
}

.section-head h2 {
  font-size: 1.6rem;
}

.section-head p {
  color: var(--color-graphite-soft);
}

.section-head.center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}


/* --------------------------------------------------------------------
   WARNING / INFO — avisos y disclaimers (PDF §19 "Warning / Info")
   Uso actual: nota de licenciamiento bajo el grid de Seguros.
   Uso futuro: disclaimers de underwriting en el Quote Flow (Fase 4).
   -------------------------------------------------------------------- */
.notice {
  font-size: .78rem;
  color: var(--color-graphite-soft);
  background: var(--color-white);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
}


/* --------------------------------------------------------------------
   SERVICE CARD (PDF §19) — ícono + nombre + descripción + CTA
   -------------------------------------------------------------------- */
.service-card {
  background: var(--color-cloud);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px 16px;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: box-shadow .15s ease, transform .15s ease;
}

.service-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.service-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  color: var(--color-navy);
}

/* Los íconos de producto (Auto, Hogar, Vida...) son el set oficial de
   iconografía de marca — ver assets/icons/README.md. Se muestran a su
   proporción original dentro de una caja de 24x24, sin forzar cuadrado. */
.service-icon img {
  max-width: 24px;
  max-height: 24px;
  width: auto;
  height: auto;
}

.service-card h3 {
  font-size: 1.02rem;
  margin-bottom: 4px;
}

.service-card p {
  font-size: .86rem;
  color: var(--color-graphite-soft);
  margin-bottom: 10px;
}

.service-card .link {
  font-size: .86rem;
  font-weight: 700;
  color: var(--color-green-dark);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}


/* --------------------------------------------------------------------
   PROCESS STEP — patrón "Entendemos → Analizamos → ... → Protegemos"
   -------------------------------------------------------------------- */
.process-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.process-num {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--color-navy);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  font-family: var(--font-head);
  font-weight: 700;
  /* position+z-index: la línea punteada del conector (.process-steps::before
     en 05-sections.css) es position:absolute, y en CSS un elemento
     posicionado siempre se pinta por encima de uno estático (sin position)
     sin importar el orden en el HTML. Sin esto, la línea atraviesa el
     círculo por encima en vez de quedar detrás. */
  position: relative;
  z-index: 1;
}

.process-step h4 {
  font-size: .98rem;
  margin-bottom: 2px;
}

.process-step p {
  font-size: .86rem;
  color: var(--color-graphite-soft);
  margin: 0;
}

@media (min-width: 768px) {
  .process-step {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
}


/* --------------------------------------------------------------------
   ASSET PLACEHOLDER — recuadro punteado para fotos/logos pendientes
   de aprobación (ver auditoría Fase 1, puntos C4/C5). Reutilizado por
   el retrato del hero y la foto de "Sobre Eduardo" — el tamaño de cada
   instancia se ajusta en 05-sections.css, el aspecto visual vive acá.
   -------------------------------------------------------------------- */
.asset-placeholder {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-cloud);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  color: var(--color-graphite-soft);
  gap: 6px;
}

.asset-placeholder strong {
  color: var(--color-navy);
  font-family: var(--font-head);
}

.asset-placeholder span {
  font-size: .82rem;
  max-width: 32ch;
}

/* Variante para fondos oscuros (hero navy) — mismo componente, texto e
   invitado en tonos claros en vez de los tonos navy/graphite por defecto. */
.asset-placeholder.on-dark {
  border-color: rgba(255, 255, 255, .35);
  background: rgba(255, 255, 255, .05);
  color: #B9C1DA;
}

.asset-placeholder.on-dark strong {
  color: var(--color-white);
}


/* --------------------------------------------------------------------
   QUOTE OPTION CARD (PDF §19) — Económica vs. Recomendada
   -------------------------------------------------------------------- */
.option-card {
  border-radius: var(--radius-md);
  padding: 22px;
  border: 1px solid var(--color-border);
  background: var(--color-white);
}

.option-card.recommended {
  border-color: var(--color-green);
  box-shadow: var(--shadow-md);
  position: relative;
}

.option-badge {
  position: absolute;
  top: -12px;
  right: 18px;
  background: var(--color-green);
  color: var(--color-navy);
  font-size: .72rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
}

.option-card h3 {
  font-size: 1.05rem;
  margin-bottom: 6px;
}

.option-card > p {
  font-size: .88rem;
  color: var(--color-graphite-soft);
}

.option-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.option-list li {
  display: flex;
  gap: 8px;
  font-size: .88rem;
  align-items: flex-start;
}

.option-list svg {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 3px;
  color: var(--color-green-dark);
}

/* En la opción económica el ícono va en gris — visualmente refuerza que
   son limitaciones/trade-offs, no beneficios. */
.option-card.economica .option-list svg {
  color: #9AA3B2;
}

/* Frase de cierre reutilizada bajo el comparador ("Tú decides..."). */
.closing-principle {
  text-align: center;
  margin-top: 30px;
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--color-navy);
  font-size: 1.1rem;
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
}


/* --------------------------------------------------------------------
   PULL QUOTE — cita destacada (usada en "Sobre Eduardo"; reutilizable
   en artículos de Aprende más adelante).
   -------------------------------------------------------------------- */
.pull-quote {
  margin: 18px 0;
  padding: 16px 18px;
  background: var(--color-cloud);
  border-left: 4px solid var(--color-green);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--color-navy);
  font-size: 1.02rem;
  font-style: normal;
}

.signature {
  font-weight: 700;
  color: var(--color-navy);
}

.signature small {
  display: block;
  font-weight: 600;
  color: var(--color-green-dark);
  font-size: .78rem;
}


/* --------------------------------------------------------------------
   CONTENT / LEARN CARD — usada en "Aprende con Eduardo"; pensada para
   reutilizarse en Recursos y en el listado general de artículos.
   -------------------------------------------------------------------- */
.learn-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
}

.learn-thumb {
  aspect-ratio: 16 / 10;
  background: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
}

.learn-thumb svg {
  width: 34px;
  height: 34px;
}

.learn-card .learn-body {
  padding: 14px 16px;
}

.learn-card h4 {
  font-size: .96rem;
  margin-bottom: 0;
}


/* --------------------------------------------------------------------
   RESERVED BLOCK — placeholder honesto para secciones sin contenido
   verificado todavía (hoy: reseñas/testimonios, ver auditoría C2).
   Reutilizable para cualquier futura sección "aún no disponible".
   -------------------------------------------------------------------- */
.reserved-block {
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-cloud);
  padding: 26px;
  text-align: center;
  color: var(--color-graphite-soft);
  font-size: .9rem;
}

.reserved-block strong {
  display: block;
  color: var(--color-navy);
  font-family: var(--font-head);
  margin-bottom: 6px;
}


/* --------------------------------------------------------------------
   FAQ ITEM (PDF §19) — acordeón accesible via <details>/<summary>
   nativo: no requiere JavaScript para abrir/cerrar ni para el estado
   accesible (aria-expanded lo maneja el navegador solo).
   -------------------------------------------------------------------- */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

details.faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  overflow: hidden;
}

details.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 18px;
  font-weight: 700;
  color: var(--color-navy);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: .96rem;
}

details.faq-item summary::-webkit-details-marker {
  display: none;
}

/* Ícono "+" dibujado en CSS puro (dos barras; la vertical desaparece
   cuando el <details> está abierto, quedando un "−"). */
.faq-plus {
  width: 22px;
  height: 22px;
  flex: none;
  position: relative;
}

.faq-plus::before,
.faq-plus::after {
  content: "";
  position: absolute;
  background: var(--color-green-dark);
  border-radius: 2px;
}

.faq-plus::before {
  width: 14px;
  height: 2px;
  top: 10px;
  left: 4px;
}

.faq-plus::after {
  width: 2px;
  height: 14px;
  left: 10px;
  top: 4px;
  transition: opacity .15s ease;
}

details[open] .faq-plus::after {
  opacity: 0;
}

.faq-answer {
  padding: 0 18px 16px;
  color: var(--color-graphite-soft);
  font-size: .9rem;
}


/* --------------------------------------------------------------------
   CTA BANNER (PDF §19) — "Navy + headline + acciones". Se usa como
   cierre del Home y está pensado para reutilizarse al final de otras
   páginas (categoría de seguro, artículo de Aprende, etc.).
   -------------------------------------------------------------------- */
.cta-banner {
  background: var(--color-navy);
  color: var(--color-white);
  text-align: center;
}

.cta-banner h2 {
  color: var(--color-white);
  font-size: 1.5rem;
}

.cta-banner__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 340px;
  margin: 26px auto 0;
}

@media (min-width: 768px) {
  .cta-banner__actions {
    flex-direction: row;
    max-width: none;
    justify-content: center;
  }
}

/* Disclaimer de "lenguaje de cotización" (PDF §21) — enviar una
   solicitud no garantiza cobertura. Texto pequeño y discreto, pensado
   para vivir debajo de los botones del CTA banner en páginas de
   producto (no se usó en el Home porque el Home no tiene un CTA de
   cotización tan directo). */
.cta-banner__disclaimer {
  font-size: .78rem;
  color: #B9C1DA;
  margin: 20px auto 0;
  max-width: 60ch;
}


/* ==========================================================================
   COMPONENTES DE PÁGINA DE PRODUCTO — agregados para /seguros/auto.html
   ==========================================================================
   Todo lo de acá abajo nace con la página de Auto pero está pensado para
   reutilizarse tal cual en las próximas 5 categorías (Hogar, Vida,
   Comercial, Motocicletas, SR-22) — por eso vive en 04-components.css
   (reusable) y no en el CSS específico de la página de Auto.
   ========================================================================== */

/* --------------------------------------------------------------------
   BREADCRUMB — Inicio / Seguros / Categoría
   -------------------------------------------------------------------- */
.breadcrumb {
  background: var(--color-cloud);
  border-bottom: 1px solid var(--color-border);
}

.breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 10px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: .82rem;
  color: var(--color-graphite-soft);
}

.breadcrumb a {
  color: var(--color-graphite-soft);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--color-navy);
  text-decoration: underline;
}

.breadcrumb li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.breadcrumb li:not(:first-child)::before {
  content: "/";
  color: var(--color-border);
}

.breadcrumb li[aria-current="page"] {
  color: var(--color-navy);
  font-weight: 600;
}


/* --------------------------------------------------------------------
   HERO ILLUSTRATION FRAME — reemplazo temporal de fotografía real en el
   hero de una página de producto (ver decisión D5, plan de Auto). Es el
   mismo rol que .asset-placeholder cumple para la foto de Eduardo, pero
   en vez de una caja vacía con texto, envuelve una ilustración SVG
   terminada (línea simple, navy/verde) — se nota que es un recurso
   gráfico deliberado, no una foto simulada. Se reemplaza por fotografía
   aprobada más adelante sin tocar el resto de la sección.
   -------------------------------------------------------------------- */
.hero-illustration {
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, 0) 60%), var(--color-navy-2);
  border: 1px solid rgba(255, 255, 255, .12);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  min-height: 260px;
}

.hero-illustration svg {
  width: 100%;
  max-width: 340px;
  height: auto;
}


/* --------------------------------------------------------------------
   COVERAGE CARD — cobertura individual (Bodily Injury, Comprehensive...).
   Distinto del Service Card (que es por categoría de producto): acá el
   encabezado es una etiqueta con la sigla, no un ícono de marca, porque
   son conceptos, no productos con iconografía oficial propia.
   -------------------------------------------------------------------- */
.coverage-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  padding: 18px;
}

.coverage-card__tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--color-navy);
  color: var(--color-white);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: .7rem;
  letter-spacing: .03em;
  margin-bottom: 10px;
}

.coverage-card h3 {
  font-size: 1rem;
  margin-bottom: 6px;
}

.coverage-card p {
  font-size: .87rem;
  color: var(--color-graphite-soft);
  margin-bottom: 8px;
}

.coverage-card .microcopy {
  font-size: .82rem;
  font-style: italic;
  color: var(--color-green-dark);
  margin: 0;
}


/* --------------------------------------------------------------------
   RISK LIST — versión de 3 estados de .option-list (que solo tiene un
   check). Se usa en comparadores donde hace falta distinguir "incluido"
   de "no incluido" de "sigue aplicando/depende de condiciones" — como
   Liability vs. "Full Cover" — sin recurrir a un color de alerta que no
   está en la paleta de marca (todo dentro de navy/verde/grafito).
   -------------------------------------------------------------------- */
.risk-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.risk-list li {
  display: flex;
  gap: 10px;
  font-size: .89rem;
  align-items: flex-start;
}

.risk-list .risk-icon {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
}

/* "Incorpora / incluye" — check verde, mismo lenguaje visual que el
   resto del sitio para "positivo/incluido". */
.risk-list li.included .risk-icon {
  color: var(--color-green-dark);
}

/* "No incluido por defecto / queda fuera" — gris neutro (el mismo tono
   ya usado en la opción económica de Home para señalar limitaciones),
   deliberadamente NO rojo: esto no es un error, es una estructura
   distinta de cobertura. */
.risk-list li.excluded .risk-icon {
  color: #9AA3B2;
}

/* "Sigue aplicando / depende de condiciones" — navy, para diferenciar
   de los dos estados anteriores sin introducir un tercer color fuera
   de la paleta aprobada. */
.risk-list li.conditional .risk-icon {
  color: var(--color-navy);
}


/* --------------------------------------------------------------------
   FLOW DIAGRAM — diagrama genérico de 3 pasos, puramente educativo.
   Nació en Auto para el ejemplo de deducible (Daño cubierto → Deducible
   → Restante bajo la cobertura) y se renombró de .deductible-* a
   .flow-* al construir Vida, donde el mismo diagrama explica un
   concepto distinto (cómo llega el beneficio al beneficiario) — ver
   README, sección "Segunda página", y el plan de Vida, decisión D5.
   Nombre genérico a propósito: cualquier futura categoría puede
   reutilizarlo para su propio flujo de 3 pasos sin arrastrar un
   nombre de concepto que ya no aplica.
   -------------------------------------------------------------------- */
.flow-diagram {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  margin: 26px 0 10px;
}

@media (min-width: 768px) {
  .flow-diagram {
    flex-direction: row;
    align-items: center;
  }
}

.flow-step {
  background: var(--color-cloud);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 18px;
  text-align: center;
  flex: 1;
}

.flow-step strong {
  display: block;
  font-family: var(--font-head);
  font-size: 1.3rem;
  color: var(--color-navy);
  margin-bottom: 2px;
}

.flow-step span {
  font-size: .8rem;
  color: var(--color-graphite-soft);
}

/* El paso destacado (el que la sección quiere resaltar — "lo que
   asumes", "lo que mantienes vigente", etc. según el contexto) se
   distingue con fondo navy. Modifier genérico: --highlight, no ligado
   a un concepto de una categoría en particular. */
.flow-step.flow-step--highlight {
  background: var(--color-navy);
  border-color: var(--color-navy);
}

.flow-step.flow-step--highlight strong,
.flow-step.flow-step--highlight span {
  color: var(--color-white);
}

.flow-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-green-dark);
  flex: none;
}

.flow-arrow svg {
  width: 22px;
  height: 22px;
  transform: rotate(90deg);
}

@media (min-width: 768px) {
  .flow-arrow svg {
    transform: none;
  }
}


/* --------------------------------------------------------------------
   CHIP GRID — generaliza el patrón de .hero-chips (que hoy solo vive
   dentro del hero de Home) en un componente aparte, reusable para listas
   cortas de factores/etiquetas fuera del hero.
   -------------------------------------------------------------------- */
.chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  /* Resets de lista — .chip-grid se usa como <ul>/<li> tanto como con
     <div>/<span> según la página, así que el componente asume ambos. */
  list-style: none;
  margin: 0;
  padding: 0;
}

.chip-grid .chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--color-cloud);
  border: 1px solid var(--color-border);
  font-size: .86rem;
  font-weight: 600;
  color: var(--color-navy);
}

.chip-grid .chip svg {
  width: 16px;
  height: 16px;
  color: var(--color-green-dark);
  flex: none;
}


/* --------------------------------------------------------------------
   PREP CHECKLIST — checklist independiente (no emparejado con una card
   de comparación), usado en "antes de cotizar" para listar qué
   información puede hacer falta.
   -------------------------------------------------------------------- */
.prep-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

@media (min-width: 768px) {
  .prep-checklist {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.prep-checklist li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: .92rem;
  color: var(--color-graphite);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}

.prep-checklist svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--color-green-dark);
  margin-top: 1px;
}


/* --------------------------------------------------------------------
   WARNING / INFO — variante prominente (.notice ya existe arriba y
   sigue siendo la variante discreta para disclaimers de underwriting).
   Esta variante es para avisos que el propio contenido pide que sean
   "visualmente muy visibles" (p.ej. delivery/rideshare) — mismo
   componente de la tabla PDF §19, tratamiento con más peso visual.
   -------------------------------------------------------------------- */
.notice--alert {
  background: var(--color-navy);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-md);
  padding: 22px;
  font-size: .92rem;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.notice--alert .notice__icon {
  flex: none;
  width: 26px;
  height: 26px;
  color: var(--color-green);
}

.notice--alert strong {
  display: block;
  font-family: var(--font-head);
  color: var(--color-white);
  margin-bottom: 4px;
  font-size: 1rem;
}

.notice--alert p {
  margin: 0;
  color: #D7DCEA;
}


/* --------------------------------------------------------------------
   MOBILE CTA BAR — fusiona el CTA principal de la página ("Cotizar mi
   auto") con una acción secundaria de WhatsApp en una sola barra fija
   inferior, solo en móvil/tablet (<1024px). Reemplaza al FAB flotante
   de WhatsApp SOLO en las páginas que la usan (ver clase
   body.has-mobile-cta-bar más abajo) — el FAB en sí (arriba, en este
   mismo archivo... ver 03-layout.css) no se modifica, así Home sigue
   exactamente igual.
   -------------------------------------------------------------------- */
.mobile-cta-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 95;
  gap: 10px;
  padding: 10px 14px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--color-white);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -6px 18px rgba(13, 27, 61, .1);
}

.mobile-cta-bar__primary {
  flex: 1;
}

.mobile-cta-bar__whatsapp {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--color-whatsapp);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-cta-bar__whatsapp svg {
  width: 22px;
  height: 22px;
}

@media (max-width: 1023.98px) {
  body.has-mobile-cta-bar .fab-whatsapp {
    display: none;
  }
  body.has-mobile-cta-bar {
    /* Espacio para que la barra fija no tape el último contenido/footer. */
    padding-bottom: 74px;
  }
  .mobile-cta-bar {
    display: flex;
  }
}