/* =========================================================
   Cotizador Emporio Agencia de Seguros — v2 "revista médica de lujo"
   Paleta oficial: navy #0D183F / #0C123E / #0D0F25, azul medio #626F8D,
   fondo #F2F2F3, blanco #FFFFFF
   Tipografía: Cormorant Garamond (títulos, 500-600) + Nunito Sans (cuerpo, 400-700)
   ========================================================= */

:root {
  --navy: #0D183F;
  --navy-secundario: #0C123E;
  --navy-profundo: #0D0F25;
  --azul-medio: #626F8D;
  --fondo: #F2F2F3;
  --blanco: #FFFFFF;
  --exito: #2E7D32;
  --alerta: #B45309;
  --sombra: 0 8px 24px rgba(13, 24, 63, 0.10);
  --sombra-hover: 0 14px 34px rgba(13, 24, 63, 0.16);
  --radio-tarjeta: 12px;
  --radio-boton: 8px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--fondo);
  color: var(--navy-profundo);
  font-family: 'Nunito Sans', sans-serif;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .titulo-marca {
  font-family: 'Cormorant Garamond', serif;
  color: var(--navy);
  font-weight: 600;
  margin: 0 0 8px;
}

#app {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 16px 64px;
}

/* ---------- Hero (navy full-bleed) ---------- */
.hero {
  background: var(--navy);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 22px 16px 44px;
  margin-bottom: 32px;
}

.hero-inner {
  max-width: 948px;
  margin: 0 auto;
}

.hero-marca {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}

.hero-marca img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
}

.hero-marca .hero-wordmark {
  color: rgba(255,255,255,0.92);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.hero-titulo {
  color: var(--blanco);
  font-size: 38px;
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 10px;
  max-width: 620px;
}

.hero-subtitulo {
  color: rgba(255,255,255,0.72);
  font-size: 15.5px;
  max-width: 560px;
  line-height: 1.5;
  margin: 0;
}

/* ---------- Barra de modo asesor ---------- */
.barra-asesor {
  background: var(--navy-secundario);
  color: var(--blanco);
  border-radius: var(--radio-tarjeta);
  padding: 14px 18px;
  margin-bottom: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
}

.barra-asesor label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.8;
  display: block;
  margin-bottom: 5px;
}

.barra-asesor input[type="text"] {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.25);
  color: var(--blanco);
  border-radius: var(--radio-boton);
  padding: 8px 10px;
  font-size: 14px;
  min-width: 220px;
}

.barra-asesor input[type="text"]::placeholder { color: rgba(255,255,255,0.55); }

.chip-modo {
  background: rgba(255,255,255,0.12);
  border-radius: var(--radio-boton);
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ---------- Steps indicator (líneas minimalistas) ---------- */
.steps-line {
  display: flex;
  gap: 10px;
  margin: 0 0 32px;
}

.steps-line .segmento {
  flex: 1;
}

.steps-line .segmento .barra {
  height: 2px;
  background: rgba(13, 24, 63, 0.15);
  border-radius: 2px;
  margin-bottom: 10px;
  transition: background 0.2s ease;
}

.steps-line .segmento.completado .barra,
.steps-line .segmento.activo .barra {
  background: var(--navy);
}

.steps-line .segmento .etiqueta {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 700;
  color: var(--azul-medio);
}

.steps-line .segmento.activo .etiqueta,
.steps-line .segmento.completado .etiqueta {
  color: var(--navy);
}

/* ---------- Tarjetas / paneles ---------- */
.panel {
  background: var(--blanco);
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--sombra);
  padding: 32px;
  margin-bottom: 20px;
}

.panel h2 {
  font-size: 26px;
  margin-bottom: 4px;
}

.subtitulo {
  color: var(--azul-medio);
  font-size: 14px;
  margin-bottom: 26px;
}

/* ---------- Formularios ---------- */
.campo {
  margin-bottom: 20px;
}

.campo label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.fila-campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px;
}

input[type="text"], input[type="tel"], input[type="number"], select {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radio-boton);
  border: 1.5px solid rgba(13,24,63,0.15);
  font-family: 'Nunito Sans', sans-serif;
  font-size: 14.5px;
  color: var(--navy-profundo);
  background: var(--blanco);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:focus, select:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(13,24,63,0.08);
}

.opciones-pill {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.pill {
  padding: 10px 18px;
  border-radius: var(--radio-boton);
  border: 1.5px solid rgba(13,24,63,0.15);
  background: var(--blanco);
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--azul-medio);
  transition: all 0.15s ease;
}

.pill.seleccionado {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--blanco);
}

/* ---------- Chips de estadística (paso 2) ---------- */
.stat-chips {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 4px 0 22px;
}

.stat-chip {
  background: var(--fondo);
  border-radius: var(--radio-boton);
  padding: 10px 16px;
  font-size: 12.5px;
  color: var(--navy-secundario);
}

.stat-chip strong {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  color: var(--navy);
  font-weight: 600;
}

/* ---------- Lista de asegurados ---------- */
.tarjeta-asegurado {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr auto;
  gap: 12px;
  align-items: end;
  padding: 16px;
  border: 1px solid rgba(13,24,63,0.08);
  border-radius: var(--radio-boton);
  margin-bottom: 10px;
  background: var(--fondo);
}

.btn-quitar {
  background: none;
  border: none;
  color: #B00020;
  font-weight: 700;
  cursor: pointer;
  font-size: 12.5px;
  padding: 10px 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: var(--radio-boton);
  border: none;
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-primario {
  background: var(--navy);
  color: var(--blanco);
}
.btn-primario:hover { background: var(--navy-secundario); }

.btn-secundario {
  background: var(--blanco);
  color: var(--navy);
  border: 1.5px solid var(--navy);
}
.btn-secundario:hover { background: rgba(13,24,63,0.05); }

.btn-agregar {
  background: rgba(13,24,63,0.06);
  color: var(--navy);
  border: 1.5px dashed var(--azul-medio);
}

.btn-whatsapp {
  background: #1F9C4A;
  color: var(--blanco);
}
.btn-whatsapp:hover { background: #178040; }

.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.acciones-paso {
  display: flex;
  justify-content: space-between;
  margin-top: 28px;
}

/* ---------- Planes (resultados) ---------- */
.resumen-perfil {
  background: rgba(13,24,63,0.04);
  border-radius: var(--radio-boton);
  padding: 16px 20px;
  margin-bottom: 24px;
  font-size: 14px;
  color: var(--navy-secundario);
  line-height: 1.7;
}

.grid-planes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 20px;
}

.tarjeta-plan {
  border: 1px solid rgba(13,24,63,0.08);
  border-left: 4px solid var(--azul-medio);
  border-radius: var(--radio-tarjeta);
  padding: 22px;
  background: var(--blanco);
  box-shadow: var(--sombra);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.tarjeta-plan.sugerido {
  box-shadow: var(--sombra-hover);
}

.tarjeta-plan:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra-hover);
}

.badges-plan {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: -2px;
}

.badge-destacado {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
  padding-bottom: 3px;
  border-bottom: 2px solid var(--navy);
}

.badge-especial {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--azul-medio);
  padding-bottom: 3px;
  border-bottom: 2px solid var(--azul-medio);
}

.tarjeta-plan .cabecera-plan {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tarjeta-plan .cabecera-plan img { height: 28px; width: auto; }

.tarjeta-plan .nombre-plan {
  font-family: 'Cormorant Garamond', serif;
  font-size: 21px;
  color: var(--navy);
  font-weight: 600;
}

.tarjeta-plan .tipo-plan {
  font-size: 11.5px;
  color: var(--azul-medio);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.tarjeta-plan .precio {
  font-family: 'Cormorant Garamond', serif;
  font-size: 30px;
  font-weight: 600;
  color: var(--navy-profundo);
}
.tarjeta-plan .precio span {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--azul-medio);
  text-transform: none;
  letter-spacing: 0;
}

.tarjeta-plan .precio-total {
  font-size: 13.5px;
  color: var(--navy-secundario);
  font-weight: 700;
}

.lista-coberturas {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 13.5px;
  color: var(--navy-secundario);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lista-coberturas li::before { content: "✓ "; color: var(--exito); font-weight: 700; }

.razon-recomendacion {
  font-size: 12.5px;
  color: var(--navy-secundario);
  background: rgba(13,24,63,0.045);
  border-left: 3px solid var(--navy);
  border-radius: 0 8px 8px 0;
  padding: 10px 12px;
  line-height: 1.5;
}
.razon-recomendacion strong { color: var(--navy); }

.observaciones-plan {
  font-size: 12.5px;
  color: var(--alerta);
  background: rgba(180, 83, 9, 0.08);
  border-radius: 8px;
  padding: 8px 10px;
}

.anexo-check {
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--navy-secundario);
}

.checkbox-tarjeta {
  position: absolute;
  top: 18px;
  left: 18px;
}

.btn-brochure {
  align-self: flex-start;
  font-size: 12px;
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1.5px solid var(--navy);
  padding-bottom: 1px;
}

.cta-tarifa-confirmar {
  background: rgba(255, 23, 33, 0.06);
  border-radius: 8px;
  padding: 12px;
  font-size: 13px;
  color: var(--navy-secundario);
  text-align: center;
}

/* ---------- Sección "¿No encuentras lo que buscas?" ---------- */
.seccion-no-encuentras {
  margin-top: 24px;
  padding: 22px;
  background: rgba(13,24,63,0.04);
  border-radius: var(--radio-tarjeta);
  text-align: center;
}
.seccion-no-encuentras p {
  color: var(--navy-secundario);
  margin: 0 0 14px;
  font-size: 14px;
}

/* ---------- Panel empresa (B2B) ---------- */
.panel-empresa {
  border: 1.5px solid var(--navy);
  border-radius: var(--radio-tarjeta);
  padding: 28px;
  text-align: center;
}
.panel-empresa p {
  color: var(--navy-secundario);
  font-size: 14.5px;
  line-height: 1.6;
  max-width: 560px;
  margin: 0 auto 18px;
}
.logos-empresa {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.logos-empresa img { height: 30px; }

/* ---------- Barra flotante de selección / PDF ---------- */
.barra-flotante {
  position: sticky;
  bottom: 0;
  background: var(--blanco);
  border-top: 1px solid rgba(13,24,63,0.10);
  padding: 16px 20px;
  border-radius: var(--radio-tarjeta) var(--radio-tarjeta) 0 0;
  box-shadow: 0 -6px 20px rgba(13,24,63,0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

/* ---------- Modo lectura (link compartido) ---------- */
.banner-solo-lectura {
  background: var(--navy);
  color: var(--blanco);
  border-radius: var(--radio-tarjeta);
  padding: 16px 20px;
  font-size: 13.5px;
  margin-bottom: 24px;
  text-align: center;
  line-height: 1.6;
}
.banner-solo-lectura strong { color: var(--blanco); }

.acciones-solo-lectura {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--navy-profundo);
  color: var(--blanco);
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 13px;
  box-shadow: var(--sombra);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.toast.mostrar { opacity: 1; }

/* ---------- Footer ---------- */
.pie-pagina {
  text-align: center;
  color: var(--azul-medio);
  font-size: 12.5px;
  margin-top: 40px;
}
.pie-pagina a { color: var(--navy); text-decoration: none; }

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .tarjeta-asegurado {
    grid-template-columns: 1fr 1fr;
  }
  .hero-titulo { font-size: 28px; }
  .hero { padding: 18px 16px 32px; }
  .panel { padding: 20px; }
}