/* ==========================================================================
   Crisser Corporación — Componentes de Landing por Ramo
   Reutilizable. Depende de tokens.css y styles.css.
   ========================================================================== */

/* ---- Breadcrumb ---- */
.breadcrumb {
  font-size: var(--fs-sm);
  color: var(--color-grey);
  padding-block: var(--space-3) 0;
}
.breadcrumb a { color: var(--color-secondary); }
.breadcrumb span { color: var(--color-grey); }

/* ---- Hero de ramo ---- */
.ramo-hero {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: #fff;
  padding-block: var(--space-6);
}
.ramo-hero h1 { color: #fff; }
.ramo-hero p { color: var(--color-light-grey); max-width: 52ch; }

/* ---- Tabs de segmento (Individual / Flota) ---- */
.segment-tabs {
  display: inline-flex;
  gap: var(--space-1);
  background: rgba(255, 255, 255, 0.15);
  padding: 4px;
  border-radius: var(--radius-pill);
  margin-top: var(--space-4);
}
.segment-tabs button {
  border: 0;
  background: transparent;
  color: #fff;
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: var(--transition);
}
.segment-tabs button[aria-selected="true"] {
  background: #fff;
  color: var(--color-primary);
}

/* ---- Cards de producto (Casco / Pérdida Total / RCV) ---- */
.product-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.product-card {
  text-align: left;
  background: #fff;
  border: 2px solid var(--color-light-grey);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  cursor: pointer;
  transition: var(--transition);
  color: var(--color-dark);
}
.product-card:hover { border-color: var(--color-secondary); box-shadow: var(--shadow-md); }
.product-card[aria-pressed="true"] {
  border-color: var(--color-secondary);
  box-shadow: var(--shadow-md);
}
.product-card h3 { margin: 0 0 var(--space-1); font-size: var(--fs-md); }
.product-card p { font-size: var(--fs-sm); color: var(--color-grey); margin: 0 0 var(--space-3); }
.product-card .tag {
  display: inline-block;
  font-family: var(--font-data);
  font-size: var(--fs-xs);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
}
.tag--online { background: var(--color-secondary-soft); color: var(--color-secondary); }
.tag--lead { background: var(--color-primary-soft); color: var(--color-primary); }

/* ---- Selector visual de tipo de vehículo ---- */
.vehicle-selector { margin-top: var(--space-4); }
.vehicle-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
.vehicle-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  background: #fff;
  border: 2px solid var(--color-light-grey);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-2);
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: var(--fw-medium);
  color: var(--color-primary);
  transition: var(--transition);
}
.vehicle-chip .icon { font-size: var(--fs-xl); }
.vehicle-chip:hover { border-color: var(--color-secondary); }
.vehicle-chip[aria-pressed="true"] {
  border-color: var(--color-secondary);
  background: var(--color-secondary-soft);
}

/* ---- Paneles del funnel (se muestran según selección) ---- */
.funnel-panel { display: none; margin-top: var(--space-5); }
.funnel-panel.is-active { display: block; }
.funnel-hint {
  background: var(--color-secondary-soft);
  border-left: 4px solid var(--color-secondary);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  margin-bottom: var(--space-4);
}

/* ---- Formulario de captación de leads ---- */
.lead-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: #fff;
  border: 1px solid var(--color-light-grey);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.lead-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
.lead-form .field { display: flex; flex-direction: column; }
.lead-form .field.col-span-2 { grid-column: 1 / -1; }
.lead-form select {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-grey);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--fs-base);
}
.lead-form label {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  color: var(--color-primary);
  margin-bottom: var(--space-1);
}
.lead-form label .req { color: var(--color-accent-2); }
.lead-form label .opt { color: var(--color-grey); font-weight: var(--fw-regular); }
.lead-form input,
.lead-form select {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-grey);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--fs-base);
}
.lead-form .hint { font-size: var(--fs-xs); color: var(--color-grey); margin-top: 2px; }
.lead-form .file-drop {
  border: 2px dashed var(--color-light-grey);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--color-grey);
}

/* ---- Matriz comparativa de planes ---- */
.plans-matrix {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
.plan-col {
  background: #fff;
  border: 1px solid var(--color-light-grey);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.plan-col__head {
  background: var(--color-primary);
  color: #fff;
  padding: var(--space-3);
  text-align: center;
}
.plan-col--featured .plan-col__head { background: var(--color-secondary); }
.plan-col__head h3 { color: #fff; margin: 0; font-size: var(--fs-md); }
.plan-col ul { list-style: none; margin: 0; padding: var(--space-3); }
.plan-col li {
  display: flex;
  gap: var(--space-2);
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--color-light-grey);
  font-size: var(--fs-sm);
}
.plan-col li:last-child { border-bottom: 0; }
.plan-col li .check { color: var(--color-accent-1); font-weight: var(--fw-bold); }
.plan-col .btn { margin: var(--space-3); }

/* ---- Stepper del proceso de compra digital ---- */
.stepper {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  counter-reset: step;
}
.step {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}
.step__num {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-secondary);
  color: #fff;
  font-family: var(--font-data);
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-md);
}
.step h4 { font-family: var(--font-heading); margin: 0 0 var(--space-1); color: var(--color-primary); }
.step p { margin: 0; font-size: var(--fs-sm); color: var(--color-grey); }

/* ---- Tarjetas de propuesta de valor ---- */
.value-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
.value-item {
  background: #fff;
  border: 1px solid var(--color-light-grey);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.value-item .icon { font-size: var(--fs-lg); }
.value-item h4 { font-size: var(--fs-base); margin: var(--space-2) 0 var(--space-1); }
.value-item p { font-size: var(--fs-sm); color: var(--color-grey); margin: 0; }

.compliance-note {
  background: var(--color-primary-soft);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--color-primary);
  margin-top: var(--space-4);
}

/* ---- Títulos de paso ---- */
.step-title { font-size: var(--fs-lg); margin-bottom: var(--space-4); }

/* ==========================================================================
   COTIZADOR AP: planes base seleccionables + anexos + resumen
   ========================================================================== */
.quote-step-label {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  text-align: center;
  margin: var(--space-5) 0 var(--space-3);
}

/* Las 2 cajas de plan base, centradas como grupo (no a lo ancho) */
#step_2_plans .plans-matrix {
  max-width: 640px;
  margin-inline: auto;
}
@media (min-width: 768px) {
  #step_2_plans .plans-matrix {
    grid-template-columns: repeat(2, minmax(0, 300px));
    justify-content: center;
  }
}

/* Hogar: 4 planes compactos (2x2 en tablet, 4 en una fila en desktop) */
.hogar-plans { gap: var(--space-2); }
@media (min-width: 560px) {
  #planes-hogar .hogar-plans { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  #planes-hogar .hogar-plans { grid-template-columns: repeat(4, 1fr); }
}
/* Cajas más pequeñas para que quepan 4 en línea */
.hogar-plans .plan-col__head { padding: var(--space-2); }
.hogar-plans .plan-col__head h3 { font-size: var(--fs-base); }
.hogar-plans .plan-price { font-size: var(--fs-md); margin: var(--space-2) 0; }
.hogar-plans .plan-price small { font-size: var(--fs-xs); }
.hogar-plans .plan-coverage { margin: 0 var(--space-2) var(--space-2); }
.hogar-plans .plan-coverage li { font-size: var(--fs-xs); padding: 3px 0; }
.hogar-plans .ap-plan__pick { margin: var(--space-2); padding: var(--space-1) var(--space-2); font-size: var(--fs-xs); }
.plan-sub { color: var(--color-grey); font-size: var(--fs-sm); text-align: center; margin: 0 var(--space-3); }

/* Desglose de coberturas por plan (Hogar) */
.ap-plan .plan-coverage {
  display: block;
  width: auto;
  list-style: none;
  margin: 0 var(--space-3) var(--space-3);
  padding: 0;
  text-align: left;
}
.plan-coverage li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  font-size: var(--fs-sm);
  border-bottom: 1px solid var(--color-light-grey);
}
.plan-coverage li:last-child { border-bottom: 0; }
.plan-coverage .data { font-weight: bold; color: var(--color-primary); white-space: nowrap; }

/* Coberturas en 4 columnas */
@media (min-width: 600px) {
  .benefits--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
  .benefits--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Beneficios: flex centrado que envuelve de forma pareja (5, 9, 10... ítems) */
.benefits--5,
.benefits--wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
}
.benefits--5 .benefit,
.benefits--wrap .benefit { flex: 0 1 200px; }

/* Sección destacada de coberturas opcionales (Viajes) */
.anexos-viajes { background: var(--color-accent-1); color: #fff; }
.anexos-viajes h2 { color: #fff; }
.anexos-viajes .eyebrow { color: var(--color-neutral-light-grey, #99cccc); }
.anexos-viajes .section-sub { color: rgba(255, 255, 255, 0.85); }
.anexos-viajes .benefit h4 { color: #fff; }

/* Plan base como botón seleccionable (tipo radio) */
.ap-plan {
  cursor: pointer;
  text-align: center;
  background: #fff;
  border: 2px solid var(--color-light-grey);
  transition: var(--transition);
}
.ap-plan ul { display: inline-block; text-align: left; }
.ap-plan ul li { justify-content: flex-start; }
.ap-plan:hover { border-color: var(--color-secondary); }
.ap-plan[aria-pressed="true"] {
  border-color: var(--color-secondary);
  box-shadow: var(--shadow-md);
}
.ap-plan__pick {
  display: block;
  margin: var(--space-3);
  padding: var(--space-2);
  text-align: center;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-secondary);
  color: var(--color-secondary);
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
}
.ap-plan[aria-pressed="true"] .ap-plan__pick {
  background: var(--color-secondary);
  color: #fff;
}

/* Anexos opcionales (toggles) */
.anexos {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  max-width: 680px;
  margin-inline: auto;
}
.anexo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: #fff;
  border: 1px solid var(--color-light-grey);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  transition: var(--transition);
}
.anexo:hover { border-color: var(--color-secondary); }
.anexo:has(input:checked) {
  border-color: var(--color-secondary);
  background: var(--color-secondary-soft);
}
.anexo input { width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--color-secondary); }
.anexo__body { flex: 1; display: flex; flex-direction: column; }
.anexo__title { font-family: var(--font-heading); font-weight: var(--fw-semibold); color: var(--color-primary); }
.anexo__desc { font-size: var(--fs-sm); color: var(--color-grey); }
.anexo__sum { font-weight: bold; color: var(--color-accent-1); white-space: nowrap; }

/* Resumen de la cotización */
.quote-summary {
  max-width: 680px;
  margin: var(--space-5) auto 0;
  background: #fff;
  border: 1px solid var(--color-light-grey);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  text-align: center;
}
.quote-summary__label {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--fs-xs);
  color: var(--color-accent-1);
  margin: 0 0 var(--space-1);
}
.quote-summary__value {
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  color: var(--color-primary);
  margin: 0 0 var(--space-2);
}
.quote-breakdown {
  font-family: var(--font-data);
  font-size: var(--fs-sm);
  color: var(--color-grey);
  margin: 0 0 var(--space-2);
}
.quote-total {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  color: var(--color-dark);
  margin: 0 0 var(--space-3);
}
.quote-total__amount {
  font-size: var(--fs-xl);
  color: var(--color-accent-1);
}

/* ---- Hero centrado (landings minimalistas) ---- */
.ramo-hero--center { text-align: center; }
.ramo-hero--center p { margin-inline: auto; max-width: 72ch; }
.section--center { text-align: center; }
.section-sub { color: var(--color-grey); font-size: var(--fs-sm); margin: 0 auto var(--space-4); max-width: 50ch; }
.section--center h2 { margin-inline: auto; }

/* ---- Beneficios (icono + texto, centrados) ---- */
.benefits { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin-top: var(--space-4); }
.benefit { text-align: center; }
.benefit .icon { font-size: var(--fs-2xl); line-height: 1; }
.benefit h4 { font-family: var(--font-heading); color: var(--color-primary); font-size: var(--fs-md); margin: var(--space-2) 0 var(--space-1); }
.benefit p { font-size: var(--fs-sm); color: var(--color-grey); margin: 0; max-width: 40ch; margin-inline: auto; }

/* ---- Cajas de producto detalladas (CTA dentro, texto centrado) ---- */
.product-cards--detailed .product-card {
  display: flex;
  flex-direction: column;
  text-align: center;
}
.product-cards--detailed .product-card p { flex: 1 1 auto; color: var(--color-grey); }
.product-cards--detailed .product-card .btn { margin-top: var(--space-3); pointer-events: none; }

/* ---- Pilares informativos (3 de un vistazo) ---- */
.pillars { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
.pillar {
  background: #fff;
  border: 1px solid var(--color-light-grey);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  text-align: center;
}
.pillar .icon { font-size: var(--fs-2xl); line-height: 1; }
.pillar h3 { font-size: var(--fs-md); margin: var(--space-2) 0; color: var(--color-primary); }
.pillar ul { list-style: none; margin: 0; padding: 0; }
.pillar li {
  font-size: var(--fs-sm);
  color: var(--color-dark);
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--color-light-grey);
}
.pillar li:last-child { border-bottom: 0; }

/* ---- Selector de tarifa: dos botones grandes ---- */
.seg-choice {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
.seg-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  background: #fff;
  border: 2px solid var(--color-light-grey);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-4);
  cursor: pointer;
  transition: var(--transition);
  text-align: center;
}
.seg-btn:hover { border-color: var(--color-secondary); box-shadow: var(--shadow-md); }
.seg-btn[aria-pressed="true"] { border-color: var(--color-secondary); background: var(--color-secondary-soft); }
.seg-btn .icon { font-size: var(--fs-2xl); line-height: 1; }
.seg-btn__title { font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--fs-md); color: var(--color-primary); }
.seg-btn__desc { font-size: var(--fs-sm); color: var(--color-grey); }

.product-step { margin-top: var(--space-6); }

/* ---- Destacado comercial e instrucción del flujo RCV ---- */
.highlight-text {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  color: var(--color-accent-1);
}
.instruction { font-weight: var(--fw-semibold); color: var(--color-primary); margin-bottom: var(--space-3); }
.plans-wrap { margin-top: var(--space-5); }

/* ---- FAQs (acordeón nativo) ---- */
.faq details {
  border: 1px solid var(--color-light-grey);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
  background: #fff;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: var(--space-3);
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: var(--fs-lg); color: var(--color-secondary); }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 var(--space-3) var(--space-3); margin: 0; font-size: var(--fs-sm); color: var(--color-dark); }

/* ==========================================================================
   LANDING AUTOMÓVIL — Estilo The Zebra (centrado, baja densidad)
   ========================================================================== */

/* ---- Contenedor estrecho para contenido centrado ---- */
.container--narrow { max-width: 760px; }

/* ---- Hero centrado ---- */
.ramo-hero--centered { text-align: center; }
.ramo-hero--centered p { max-width: 70ch; margin-inline: auto; }

/* ---- Encabezado de sección centrado ---- */
.section-head { text-align: center; max-width: 60ch; margin-inline: auto; }
.section-head h2 { margin-bottom: var(--space-2); }
.section-head p { color: var(--color-grey); }

/* ---- Cuadrícula de cajas de producto (3 detonadores del embudo) ---- */
.auto-boxes {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-5);
}
.auto-box {
  display: flex;
  flex-direction: column;
  text-align: center;
  background: #fff;
  border: 1px solid var(--color-light-grey);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-4);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}
.auto-box:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.auto-box h3 { font-size: var(--fs-md); color: var(--color-primary); margin-bottom: var(--space-2); }
.auto-box p { font-size: var(--fs-sm); color: var(--color-grey); flex: 1 1 auto; margin-bottom: var(--space-4); }
.auto-box .tag { display: inline-block; margin-bottom: var(--space-3); }
.auto-box__cta { align-self: center; }

/* ---- Formularios centrados (paneles del embudo de leads) ---- */
.funnel-panel .section-head { margin-bottom: var(--space-4); }
.lead-form--centered { max-width: 760px; margin-inline: auto; }

/* ---- Cintillo de financiamiento ---- */
.financing-ribbon {
  background: var(--color-secondary);
  color: #fff;
  text-align: center;
  padding-block: var(--space-5);
}
.financing-ribbon p {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-md);
  max-width: 60ch;
  margin-inline: auto;
}

/* ==========================================================================
   MÓDULO RCV — Emisión inmediata Seguros Caracas (sub-landing, centrado)
   ========================================================================== */

/* ---- Badge de aseguradora suscriptora ---- */
.carrier-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: #fff;
  border: 1px solid var(--color-light-grey);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-sm);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}
.carrier-badge strong { font-family: var(--font-heading); }
/* Slot listo para el logotipo oficial autorizado de Seguros Caracas:
   <img src="../assets/img/seguros-caracas.svg" alt="Seguros Caracas" class="carrier-logo" /> */
.carrier-logo { height: 28px; width: auto; display: inline-block; }

/* ---- Flujo de pasos centrado ---- */
.rcv-flow { text-align: center; }
.rcv-flow .vehicle-selector,
.rcv-flow .vehicle-grid,
.rcv-flow .plans-matrix { text-align: left; }
.rcv-flow .vehicle-grid { margin-inline: auto; max-width: 760px; }

/* ---- Precio del plan (Arial, vía API) ---- */
.plan-price {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-lg);
  color: var(--color-primary);
  text-align: center;
  margin: var(--space-3) 0 0;
}
.plan-price small { display: block; font-size: var(--fs-xs); color: var(--color-grey); font-weight: var(--fw-regular); }

/* ---- Checkout exprés + pasarela ---- */
.checkout-panel { margin-top: var(--space-5); }
.checkout-card {
  max-width: 760px;
  margin-inline: auto;
  text-align: left;
}
.gateway-box {
  margin-top: var(--space-3);
  border: 1px dashed var(--color-secondary);
  border-radius: var(--radius-md);
  background: var(--color-secondary-soft);
  padding: var(--space-4);
  text-align: center;
}
.gateway-box .gateway-title {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  color: var(--color-secondary);
  margin-bottom: var(--space-1);
}
.gateway-box p { font-size: var(--fs-sm); color: var(--color-grey); margin: 0; }

/* ==========================================================================
   RESPONSIVE — Desktop
   ========================================================================== */
@media (min-width: 600px) {
  .seg-choice { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 768px) {
  .pillars { grid-template-columns: repeat(3, 1fr); }
  .benefits { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 768px) {
  .product-cards { grid-template-columns: repeat(3, 1fr); }
  .auto-boxes { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
  .vehicle-grid { grid-template-columns: repeat(4, 1fr); }
  .lead-fields { grid-template-columns: 1fr 1fr; }
  .plans-matrix { grid-template-columns: repeat(3, 1fr); align-items: start; }
  .stepper { grid-template-columns: repeat(4, 1fr); }
  .step { flex-direction: column; text-align: center; align-items: center; }
  .value-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .value-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================================
   CONDOMINIO: selector de tipo, planes preestablecidos y solicitud de emisión
   ========================================================================== */

/* Selector Residencial / Comercial */
.condo-selector {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin: var(--space-4) auto var(--space-2);
}
.condo-type-btn {
  flex: 1 1 260px;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  cursor: pointer;
  text-align: center;
  background: #fff;
  border: 2px solid var(--color-light-grey);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-3);
  transition: var(--transition);
}
.condo-type-btn:hover { border-color: var(--color-secondary); }
.condo-type-btn[aria-pressed="true"] {
  border-color: var(--color-secondary);
  box-shadow: var(--shadow-md);
}
.condo-type-btn__icon { font-size: var(--fs-xl); }
.condo-type-btn__label {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  font-size: var(--fs-md);
}
.condo-type-btn__desc { font-size: var(--fs-sm); color: var(--color-grey); }

/* Grupos de planes (se muestran al elegir el tipo) */
.condo-plans-group { display: none; margin-top: var(--space-3); }
.condo-plans-group.is-active { display: block; }
.condo-plans-group[hidden] { display: none; }
.condo-plans-group.is-active[hidden] { display: block; }

/* Insignia superior de la tarjeta de plan */
.plan-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: var(--space-3) auto 0;
  border-radius: var(--radius-md);
  background: var(--color-accent-1);
  font-size: var(--fs-lg);
}
.plan-col__head small { display: block; font-size: var(--fs-xs); opacity: 0.85; margin-top: 2px; }

/* Condominio: 4 planes compactos (2x2 en tablet, 4 en una fila en desktop) */
.condo-plans { gap: var(--space-2); }
@media (min-width: 560px) {
  #planes-condominio .condo-plans { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
  #planes-condominio .condo-plans { grid-template-columns: repeat(4, 1fr); }
}
.condo-plans .plan-col__head { padding: var(--space-2); }
.condo-plans .plan-col__head h3 { font-size: var(--fs-base); }
.condo-plans .plan-price { font-size: var(--fs-md); margin: var(--space-2) 0; }
.condo-plans .plan-price small { font-size: var(--fs-xs); }
.condo-plans .plan-coverage { margin: 0 var(--space-2) var(--space-2); }
.condo-plans .plan-coverage li { font-size: var(--fs-xs); padding: 3px 0; }
.condo-plans .ap-plan__pick { margin: var(--space-2); padding: var(--space-1) var(--space-2); font-size: var(--fs-xs); }

/* Formulario de solicitud de emisión */
.form-fieldset {
  border: 1px solid var(--color-light-grey);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  margin-top: var(--space-3);
  text-align: left;
}
.form-fieldset legend {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  font-size: var(--fs-sm);
  padding: 0 var(--space-1);
}
.form-fieldset[hidden] { display: none; }
.radio-row { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4); }
.radio-col { display: flex; flex-direction: column; gap: var(--space-2); }
.radio-opt {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--color-black);
  cursor: pointer;
}
.radio-opt input { width: auto; margin: 0; flex: 0 0 auto; }
.radio-note { color: var(--color-grey); }
.checkbox-opt { margin-bottom: var(--space-2); }
.field-hint { font-size: var(--fs-xs); color: var(--color-grey); margin: var(--space-1) 0 0; }
.terms-box {
  max-height: 120px;
  overflow-y: auto;
  border: 1px solid var(--color-light-grey);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-xs);
  color: var(--color-grey);
  background: #fff;
}
.terms-box p { margin: 0; }
.condo-form input[type="file"] {
  width: 100%;
  font-size: var(--fs-sm);
  padding: var(--space-2);
  border: 1px dashed var(--color-light-grey);
  border-radius: var(--radius-sm);
  background: #fff;
}

/* Cuadro de deducibles (FAQ) */
.table-scroll { overflow-x: auto; margin: 0 var(--space-3) var(--space-3); }
.deducibles {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  background: #fff;
}
.deducibles th,
.deducibles td {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-light-grey);
  vertical-align: top;
}
.deducibles thead th {
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
}
.deducibles tbody tr:nth-child(even) { background: var(--color-primary-soft); }
.deducibles td:first-child { font-weight: var(--fw-semibold); color: var(--color-primary); }
.deducibles .data { color: var(--color-black); white-space: nowrap; }

.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;
}

/* Lista de beneficios con viñetas de verificación */
.check-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 760px;
  text-align: left;
}
.check-list li {
  position: relative;
  padding: var(--space-2) 0 var(--space-2) var(--space-5);
  font-size: var(--fs-sm);
  color: var(--color-dark);
  border-bottom: 1px solid var(--color-light-grey);
}
.check-list li:last-child { border-bottom: 0; }
.check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: var(--space-2);
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-accent-1);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

/* ==========================================================================
   EMPRESAS: selector de índole, matriz de planes y bloques de información
   ========================================================================== */
.indole-label {
  display: block;
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  margin: var(--space-4) 0 var(--space-2);
}
.indole-picker { max-width: 480px; margin: 0 auto; }
.indole-select {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--color-black);
  border: 2px solid var(--color-light-grey);
  border-radius: var(--radius-sm);
  background: #fff;
}
.indole-select:focus { border-color: var(--color-secondary); outline: none; }
.indole-members {
  max-width: 720px;
  margin: var(--space-3) auto 0;
  font-size: var(--fs-sm);
  color: var(--color-grey);
  text-align: center;
}

/* Matriz comparativa de 18 planes (scroll horizontal) */
.empresa-matrix {
  border-collapse: collapse;
  width: 100%;
  min-width: 900px;
  font-size: var(--fs-xs);
  background: #fff;
  text-align: right;
}
.empresa-matrix th,
.empresa-matrix td {
  border: 1px solid var(--color-light-grey);
  padding: var(--space-1) var(--space-2);
  white-space: nowrap;
}
.empresa-matrix thead th {
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-heading);
  text-align: center;
  position: sticky;
  top: 0;
}
.empresa-matrix tbody th[scope="row"] {
  text-align: left;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-weight: var(--fw-semibold);
  position: sticky;
  left: 0;
  z-index: 1;
}
.empresa-matrix .empresa-matrix__prima th,
.empresa-matrix .empresa-matrix__prima td {
  background: var(--color-secondary-soft);
  color: var(--color-primary);
  font-weight: var(--fw-bold);
}
.empresa-matrix__cta td { text-align: center; }
.plan-help { font-size: var(--fs-xs); color: var(--color-grey); margin-top: var(--space-2); }

.btn--sm { padding: var(--space-1) var(--space-2); font-size: var(--fs-xs); }

/* Bloques de información (coberturas / sublímites) */
.info-duo {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  max-width: 860px;
  margin: var(--space-4) auto 0;
}
@media (min-width: 768px) {
  .info-duo { grid-template-columns: 1fr 1fr; align-items: start; }
}
.info-card {
  background: #fff;
  border: 1px solid var(--color-light-grey);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  text-align: left;
}
.info-card h4 {
  font-family: var(--font-heading);
  color: var(--color-primary);
  margin: 0 0 var(--space-2);
  font-size: var(--fs-base);
}
.mini-list { list-style: none; margin: 0; padding: 0; }
.mini-list li {
  position: relative;
  padding: var(--space-1) 0 var(--space-1) var(--space-4);
  font-size: var(--fs-sm);
  color: var(--color-dark);
}
.mini-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-accent-1);
  font-weight: var(--fw-bold);
}
@media (min-width: 560px) {
  .mini-list--2col { columns: 2; column-gap: var(--space-4); }
  .mini-list--2col li { break-inside: avoid; }
}

/* ==========================================================================
   RESPONSABILIDAD CIVIL / RIESGOS LABORALES
   ========================================================================== */
.rc-legal-note { font-size: var(--fs-xs); color: var(--color-grey); margin: var(--space-2) 0; }
.rc-toggle { max-width: 720px; margin: 0 auto var(--space-4); }
.rc-results { margin-top: var(--space-4); }

/* Tarjetas de alternativa (Alt.1/2/3) */
.rc-alt { text-align: center; }
.rc-alt .plan-price { font-size: var(--fs-lg); margin: var(--space-3) 0 var(--space-1); }
.rc-per-worker { font-size: var(--fs-sm); color: var(--color-secondary); margin: 0 0 var(--space-2); }
.rc-alt .plan-coverage { margin: 0 var(--space-3) var(--space-2); }
.rc-alt button.ap-plan__pick {
  cursor: pointer;
  background: #fff;
  width: calc(100% - 2 * var(--space-3));
}
.rc-alt button.ap-plan__pick:hover { background: var(--color-secondary); color: #fff; }

/* Bloque de empaquetado (cross-selling) */
.bundle-box {
  background: var(--color-accent-1);
  color: #fff;
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-4);
}
.bundle-box h2 { color: #fff; }
.bundle-box p { color: rgba(255, 255, 255, 0.9); }
.bundle-check {
  justify-content: center;
  max-width: 560px;
  margin: var(--space-3) auto;
  color: #fff;
  font-weight: var(--fw-semibold);
}
.bundle-check input { flex: 0 0 auto; }

/* ==========================================================================
   OTROS RAMOS: catálogo de productos con captación de leads
   ========================================================================== */
.otros-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 600px) {
  .otros-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
  .otros-grid { grid-template-columns: repeat(3, 1fr); }
}
.otros-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #fff;
  border: 1px solid var(--color-light-grey);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.otros-card__icon {
  font-size: var(--fs-2xl);
  line-height: 1;
  margin-bottom: var(--space-2);
}
.otros-card h4 {
  font-family: var(--font-heading);
  color: var(--color-primary);
  font-size: var(--fs-base);
  margin: 0 0 var(--space-2);
}
.otros-card p {
  font-size: var(--fs-sm);
  color: var(--color-grey);
  margin: 0 0 var(--space-3);
  flex: 1 1 auto;
}
.otros-card__cta { margin-top: auto; }

/* ==========================================================================
   SOBRE CRISSER: línea de tiempo (Nuestra Historia)
   ========================================================================== */
.timeline {
  list-style: none;
  margin: var(--space-5) auto 0;
  padding: 0;
  max-width: 760px;
  position: relative;
  text-align: left;
}
.timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 22px;
  width: 2px;
  background: var(--color-light-grey);
}
.timeline__item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
}
.timeline__item:last-child { padding-bottom: 0; }
.timeline__era {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  z-index: 1;
  box-shadow: 0 0 0 4px var(--color-bg, #fff);
}
.timeline__item:nth-child(even) .timeline__era { background: var(--color-secondary); }
.timeline__card {
  flex: 1 1 auto;
  background: #fff;
  border: 1px solid var(--color-light-grey);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}
.timeline__card h4 {
  font-family: var(--font-heading);
  color: var(--color-primary);
  margin: 0 0 var(--space-1);
  font-size: var(--fs-base);
}
.timeline__card p { margin: 0; font-size: var(--fs-sm); color: var(--color-grey); }

/* ==========================================================================
   RECURSOS Y DESCARGAS
   ========================================================================== */
.doc-toolbar {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
  margin-bottom: var(--space-5);
}
.doc-search {
  width: 100%;
  max-width: 480px;
  padding: var(--space-2) var(--space-3);
  border: 2px solid var(--color-light-grey);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--fs-base);
}
.doc-search:focus { border-color: var(--color-secondary); outline: none; }
.doc-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }
.chip {
  cursor: pointer;
  border: 1px solid var(--color-light-grey);
  background: #fff;
  color: var(--color-primary);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  transition: var(--transition);
}
.chip:hover { border-color: var(--color-secondary); }
.chip.is-active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

.doc-company { margin-bottom: var(--space-5); }
.doc-company h3 { color: var(--color-primary); margin-bottom: var(--space-1); }
.doc-cats { font-size: var(--fs-xs); color: var(--color-grey); margin: 0 0 var(--space-3); }
.doc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.doc-empty { font-size: var(--fs-sm); color: var(--color-grey); font-style: italic; }
.doc-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-light-grey);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--color-dark);
  transition: var(--transition);
}
.doc-item:hover { border-color: var(--color-secondary); box-shadow: var(--shadow-md); }
.doc-item__icon { font-size: var(--fs-xl); flex: 0 0 auto; }
.doc-item__text { display: flex; flex-direction: column; flex: 1 1 auto; }
.doc-item__text strong { color: var(--color-primary); }
.doc-item__text small { color: var(--color-grey); font-size: var(--fs-xs); }
.doc-item__dl {
  flex: 0 0 auto;
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  color: var(--color-secondary);
}
.doc-noresults { text-align: center; color: var(--color-grey); }

/* ==========================================================================
   EMERGENCIAS
   ========================================================================== */
.steps-num {
  max-width: 680px;
  margin: var(--space-4) auto 0;
  padding-left: var(--space-4);
  text-align: left;
}
.steps-num li { margin-bottom: var(--space-3); font-size: var(--fs-base); color: var(--color-dark); }
.emerg-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
@media (min-width: 600px) { .emerg-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .emerg-grid { grid-template-columns: repeat(3, 1fr); } }
.emerg-card {
  background: #fff;
  border: 1px solid var(--color-light-grey);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  text-align: left;
}
.emerg-card h3 { color: var(--color-primary); font-size: var(--fs-md); margin: 0 0 var(--space-2); }
.emerg-list { list-style: none; margin: 0; padding: 0; }
.emerg-row {
  display: flex;
  flex-direction: column;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-light-grey);
  font-size: var(--fs-sm);
}
.emerg-row:last-child { border-bottom: 0; }
.emerg-row__label { color: var(--color-grey); font-size: var(--fs-xs); }
.emerg-row__val { color: var(--color-primary); font-weight: var(--fw-semibold); }
.emerg-tbd { color: var(--color-grey); font-weight: var(--fw-regular, 400); font-style: italic; }

/* ==========================================================================
   PÁGINAS LEGALES
   ========================================================================== */
.legal-updated { color: var(--color-grey); font-size: var(--fs-sm); }
.legal-content {
  max-width: 760px;
  margin: 0 auto;
  text-align: left;
}
.legal-content h2 {
  font-size: var(--fs-md);
  color: var(--color-primary);
  margin: var(--space-5) 0 var(--space-2);
}
.legal-content p { margin: 0 0 var(--space-3); color: var(--color-dark); line-height: 1.7; }
.legal-content ul { margin: 0 0 var(--space-3) var(--space-4); }
.legal-content li { margin-bottom: var(--space-2); line-height: 1.6; }
.legal-content a { color: var(--color-secondary); }

/* Caja de aclaratoria (p. ej. medicina prepagada ≠ seguro) */
.disclaimer-box {
  background: var(--color-primary-soft);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  text-align: left;
}
.disclaimer-box h3 { color: var(--color-primary); margin: 0 0 var(--space-2); font-size: var(--fs-md); }
.disclaimer-box p { margin: 0; font-size: var(--fs-sm); color: var(--color-dark); line-height: 1.6; }

/* ==========================================================================
   REBRAND — Identidad por producto (Seguros Caracas) + look The Zebra
   Va al final: consolida colores de producto, tarjeta digital y tintes.
   Requiere en tokens.css: --brand (=secondary por defecto), --brand-dark, --brand-soft.
   Añadir al <body> de cada landing: class="landing-rcv" | "landing-ap" | "landing-hogar".
   ========================================================================== */
:root { --color-border: #e7edf3; }
body.landing-rcv   { --brand: #0070b7; --brand-dark: #005f99; --brand-soft: #e7f2fa; }
body.landing-ap    { --brand: #d11216; --brand-dark: #a10e12; --brand-soft: #fdecec; }
body.landing-hogar { --brand: #6c6f71; --brand-dark: #565859; --brand-soft: #eef0f1; }

/* --- Hero blanco y centrado SOLO en las landings de emisión (no afecta otras) --- */
body.landing-rcv .ramo-hero,
body.landing-ap .ramo-hero,
body.landing-hogar .ramo-hero {
  background: radial-gradient(120% 90% at 50% 0%, var(--color-secondary-soft) 0%, #fff 60%);
  color: var(--color-dark);
  text-align: center;
}
body.landing-rcv .ramo-hero h1,
body.landing-ap .ramo-hero h1,
body.landing-hogar .ramo-hero h1 { color: var(--color-dark); }
body.landing-rcv .ramo-hero p,
body.landing-ap .ramo-hero p,
body.landing-hogar .ramo-hero p { color: var(--color-grey); margin-inline: auto; }
/* Eyebrow: pastilla con el color del producto (vence el inline color light-grey) */
body.landing-rcv .ramo-hero .eyebrow,
body.landing-ap .ramo-hero .eyebrow,
body.landing-hogar .ramo-hero .eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--brand-dark) !important;
  background: var(--brand-soft);
  padding: 7px 15px; border-radius: var(--radius-pill);
}

/* --- Fondo de la sección de planes/cotizador con el tinte del producto --- */
body.landing-rcv #step_2_vehicle_selector,
body.landing-ap  #step_2_plans,
body.landing-hogar #planes-hogar { background: var(--brand-soft) !important; }

/* --- Tarjeta digital (ícono sutil) — markup nuevo, ver INSTALL --- */
.digital-card { position: relative; margin: 0 auto var(--space-4); max-width: 400px; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card-lg); overflow: hidden; text-align: left; }
.digital-card__strip { height: 5px; background: linear-gradient(90deg, var(--brand-dark), var(--brand)); }
.digital-card__body { padding: var(--space-4) 22px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.digital-card__eyebrow { margin: 0 0 6px; font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--color-grey); }
.digital-card__name { margin: 0; font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: 20px; color: var(--color-dark); line-height: 1.1; }
.digital-card__sub { margin: 4px 0 0; font-size: 12.5px; color: var(--brand-dark); font-weight: var(--fw-semibold); }
.digital-card__thumb { flex: none; width: 66px; height: 43px; border-radius: 7px; box-shadow: 0 4px 12px rgba(0,0,0,.18); }

/* --- Carrier badge (Producto suscrito por Seguros Caracas) --- */
.carrier-badge { border: 1px dashed #c3ccd6; background: #fafcfe; box-shadow: none; color: var(--color-body); }
.carrier-badge strong { color: var(--brand-dark); }

/* --- Chips de vehículo (RCV): ícono en color de producto, seleccionado con marca --- */
.vehicle-chip { border-color: var(--color-border); border-radius: var(--radius-card); }
.vehicle-chip .icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--brand-soft); color: var(--brand); }
.vehicle-chip:hover { border-color: var(--brand); }
.vehicle-chip[aria-pressed="true"] { border-color: var(--brand); background: #fff; box-shadow: 0 10px 26px rgba(0,0,0,.10); }

/* --- Cards de plan: borde neutro, cabecera/destacado con color de producto --- */
.plan-col { border-color: var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.plan-col__head { background: var(--color-primary); }
.plan-col--featured .plan-col__head { background: var(--brand); }
.plan-col--featured { border: 2px solid var(--brand); box-shadow: 0 16px 40px rgba(0,0,0,.12); }
.plan-price { color: var(--color-dark); }
.plan-coverage .data { color: var(--color-dark); }
.check, .plan-col li .check { color: var(--color-accent-1); }

/* --- Plan base seleccionable (AP/Hogar comparten .ap-plan) --- */
.ap-plan { border-color: var(--color-border); border-radius: var(--radius-lg); }
.ap-plan:hover { border-color: var(--brand); }
.ap-plan[aria-pressed="true"] { border-color: var(--brand); box-shadow: 0 16px 40px rgba(0,0,0,.14); }
.ap-plan__pick { border-color: var(--brand); color: var(--brand-dark); background: var(--brand-soft); }
.ap-plan[aria-pressed="true"] .ap-plan__pick { background: var(--brand); color: #fff; border-color: var(--brand); }

/* --- Anexos AP --- */
.anexo { border-color: var(--color-border); border-radius: var(--radius-card); }
.anexo:hover { border-color: var(--brand); }
.anexo:has(input:checked) { border-color: var(--brand); background: #fff; box-shadow: 0 8px 20px rgba(0,0,0,.08); }
.anexo input { accent-color: var(--brand); }
.anexo__title { color: var(--color-dark); }

/* --- Etiquetas de paso del cotizador --- */
.quote-step-label { color: var(--color-dark); }

/* --- Resumen y total --- */
.quote-summary { border-color: var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card-lg); }
.quote-summary__value { color: var(--color-dark); }
.quote-total__amount { color: var(--brand); }
#ap-continue, .quote-summary .btn--primary { background: var(--brand); box-shadow: 0 8px 22px rgba(0,0,0,.16); }
#ap-continue[disabled] { background: #d4dde6; box-shadow: none; }

/* --- Checkout + pasarela --- */
.checkout-card { border-radius: var(--radius-lg); }
.gateway-box { border-color: #d8ebe4; background: #f6fbf9; }
.gateway-box .gateway-title { color: var(--color-accent-1); }
.checkout-card .btn--primary,
.checkout-panel .btn--primary { background: var(--brand); box-shadow: 0 8px 22px rgba(0,0,0,.16); }

/* --- Coberturas / beneficios: chip de ícono con color de producto --- */
.benefit .icon { display: inline-grid; place-items: center; width: 58px; height: 58px; border-radius: 16px; background: var(--brand-soft); color: var(--brand-dark); }
.benefit h4 { color: var(--color-dark); }

/* --- Cintillo de financiamiento (Hogar usa .financing dentro del main) --- */
body.landing-hogar .financing { background: transparent; color: inherit; padding-block: var(--space-3); }
body.landing-hogar .financing > .container { background: var(--brand-soft); border-radius: var(--radius-card); padding: 22px 28px; }
body.landing-hogar .financing p { color: var(--color-dark); }

/* --- CTA del hero (Hogar) --- */
body.landing-hogar .ramo-hero .btn--primary { background: var(--brand); box-shadow: 0 8px 22px rgba(0,0,0,.18); }

/* --- FAQ estilo tarjeta limpia --- */
.faq details { border-color: var(--color-border); border-radius: var(--radius-card); }
.faq summary { color: var(--color-dark); }
.faq summary::after { color: var(--brand); }
.faq details p { color: var(--color-body); }

/* --- Cintillo financiamiento genérico (otras landings) --- */
.financing-ribbon { background: var(--brand); }

/* --- Instrucción / destacado --- */
.instruction { color: var(--color-dark); }
.highlight-text { color: var(--brand-dark); }

/* ==========================================================================
   SHELL MODERNO (v1) — estética moderna con marca Crisser
   Solo visual. Mantiene Poppins/Raleway/Arial + paleta oficial.
   No cambia textos, estructura ni lógica.
   ========================================================================== */

/* ---- Hero de ramo: claro, aireado y moderno ---- */
.ramo-hero {
  background: linear-gradient(180deg, var(--color-secondary-soft) 0%, #ffffff 92%);
  color: var(--color-body);
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-7);
}
.ramo-hero h1 { color: var(--color-dark); letter-spacing: -0.02em; }
.ramo-hero p { color: var(--color-body); }
/* legibilidad del eyebrow sobre fondo claro (neutraliza colores inline pálidos) */
.ramo-hero .eyebrow { color: var(--color-primary) !important; }

/* ---- Tarjetas contenedoras: redondeadas, con borde y sombra + elevación ---- */
.value-item,
.otros-card,
.info-card,
.emerg-card,
.auto-box,
.plan-col,
.timeline__card,
.doc-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: var(--transition);
}
.value-item:hover,
.otros-card:hover,
.info-card:hover,
.auto-box:hover,
.plan-col:hover,
.doc-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-lg);
  border-color: var(--color-border-2);
}

/* ---- Chip de ícono en beneficios (sin convertir el beneficio en card,
        para no romper secciones de fondo oscuro como Viajes) ---- */
.benefit .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-2);
  background: var(--color-primary-soft);
  border-radius: var(--radius-md);
  font-size: var(--fs-lg);
  line-height: 1;
}
/* En secciones de fondo oscuro (Viajes) el chip se aclara translúcido */
.anexos-viajes .benefit .icon { background: rgba(255, 255, 255, 0.14); }

/* ---- Cabeceras de plan más suaves ---- */
.plan-col { overflow: hidden; }
.plan-col__head { border-top-left-radius: var(--radius-card); border-top-right-radius: var(--radius-card); }