/* ============================================================
   Contacto Activo · los cuatro ejemplos (rediseño 2026-09)
   ------------------------------------------------------------
   OJO, DESDE EL 2026-09-26 ESTA HOJA TAMBIÉN ARMA LAS PÁGINAS DE LOS
   CLIENTES: sistema/motor/casas.py incrusta la base común y la casa que
   corresponde en cada página generada (propiedades, isapre/AFP, seguros).
   Cambiar una casa acá cambia las páginas que se generen desde ese día.
   Los títulos «CASA n · …» son los cortes que usa el generador: no
   cambiarles el formato. css/demo.css queda solo para automotoras y
   banca, que todavía no tienen casa propia.

   Cuatro casas que NO comparten composición, no solo color:
     .casa-cordillera  carta membretada: centrada, serif, filetes, libro de registro
     .casa-araucaria   consulta amable: la persona primero, foto grande, formas blandas
     .casa-meridional  ficha técnica: credencial, tabla de tarifas, datos alineados
     .casa-poniente    el horizonte: sello sobre una línea, franja de borde a borde, cifras grandes

   Reglas comunes, medidas y no opinadas:
   - El logo de cada casa va a color, en un área clara propia, nunca
     sobre el color corporativo (MARCAS.md).
   - Todo texto pasa 4,5:1 (3:1 si es grande). Todo lo tocable mide 44 px.
   - Hover solo con mouse; al presionar, el botón se hunde (:active).
   - Cada casa tiene su propia letra de cuerpo: si el cuerpo fuera el
     mismo en las tres, se leerían como una plantilla recoloreada.
   ============================================================ */

/* ---------- 1 · Base mínima común ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--fuera);
  color: var(--tinta);
  font-family: var(--cuerpo);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
img { max-width: 100%; height: auto; display: block; }
p, h1, h2, h3, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
button, summary { touch-action: manipulation; }
::selection { background: var(--seleccion); color: var(--tinta); }
:focus-visible { outline: 3px solid var(--anillo); outline-offset: 3px; }

.solo-lectores {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* La hoja: el ancho de un teléfono grande, centrada en escritorio. */
.hoja {
  width: 100%; max-width: 520px; margin-inline: auto;
  background: var(--hoja);
  min-height: 100dvh;
}
@media (min-width: 620px) {
  body { padding-block: 32px; }
  .hoja { min-height: 0; }
}

/* Aviso de ejemplo: siempre visible arriba, siempre legible. No es
   decoración: los datos son ficticios y así se declara. */
.aviso {
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 13px; line-height: 1.45;
  padding: 10px 18px;
  background: var(--aviso-fondo); color: var(--aviso-texto);
  text-align: center; text-wrap: pretty;
}
.aviso a {
  font-weight: 700;
  display: inline-flex; align-items: center; min-height: 44px;
  padding-inline: 4px;
}

/* Botones: un componente, los estados de siempre. */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 0 18px;
  font: inherit; font-weight: 600; text-decoration: none; text-align: center;
  cursor: pointer; color: var(--tinta);
  background: transparent; border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  transition: transform 140ms cubic-bezier(.23,1,.32,1),
              background-color 160ms cubic-bezier(.23,1,.32,1),
              border-color 160ms cubic-bezier(.23,1,.32,1);
}
.btn:active { transform: scale(.97); }
.btn svg { width: 22px; height: 22px; flex: 0 0 auto; }

.btn--wsp {
  min-height: 64px; justify-content: flex-start; text-align: left;
  background: var(--casa); border-color: var(--casa); color: #fff;
  font-weight: 700; font-size: 17px;
}
.btn--wsp svg { color: var(--casa-icono); width: 26px; height: 26px; }
.btn--wsp small {
  display: block; font-weight: 400; font-size: 13px; margin-top: 2px;
  color: var(--sobre-casa-mudo);
}
@media (hover: hover) {
  .btn:hover { border-color: var(--casa); }
  .btn--wsp:hover { background: var(--casa-hover); border-color: var(--casa-hover); }
}

.fila-btn { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Desplegables nativos: funcionan con teclado y sin JavaScript. */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }

/* Barra inferior con WhatsApp: aparece cuando el botón principal sale
   de pantalla. Respeta la zona segura del iPhone. */
.barra-fija {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--hoja);
  border-top: 1px solid var(--linea);
  transform: translateY(110%);
  transition: transform 240ms cubic-bezier(.23,1,.32,1);
}
.barra-fija.visible { transform: none; }
.barra-fija .btn--wsp { min-height: 54px; justify-content: center; }
@media (min-width: 620px) { .barra-fija { display: none; } }
@media (max-width: 619px) { .hoja { padding-bottom: 84px; } }

/* Aviso de ejemplo al tocar WhatsApp, Llamar o un correo (js/ejemplo.js).
   Los números de los ejemplos son inventados y pueden ser de alguien real:
   el botón no abre nada, dice qué haría en la página de verdad. Habla
   Contacto Activo, no la empresa del ejemplo: por eso va en Figtree, con
   los colores del aviso de arriba y el coral de la marca en «Quiero la mía». */
.nota-ejemplo {
  position: fixed; left: 12px; right: 12px; z-index: 30;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  max-width: 480px; margin-inline: auto; padding: 14px 16px 12px;
  border-radius: 12px; border: 1px solid rgb(0 0 0 / .08);
  background: var(--aviso-fondo); color: var(--aviso-texto);
  font-family: "Figtree", system-ui, sans-serif; font-size: 15px; line-height: 1.45;
  box-shadow: 0 14px 34px -14px rgb(0 0 0 / .5);
}
.nota-ejemplo:not([hidden]) { animation: nota-entra 220ms cubic-bezier(.23,1,.32,1); }
@keyframes nota-entra { from { opacity: 0; transform: translateY(10px); } }
.nota-ejemplo.sobre-barra { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
.nota-ejemplo:focus { outline: none; }
.nota-ejemplo:focus-visible { outline: 3px solid #FF4D6D; outline-offset: 2px; }
.nota-ejemplo__acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.nota-ejemplo__pedir, .nota-ejemplo__cerrar {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px;
  border-radius: 8px; font: 700 15px/1.2 "Figtree", system-ui, sans-serif; text-decoration: none; cursor: pointer;
}
.nota-ejemplo__pedir { background: #FF4D6D; color: #2A0710; border: 0; }
.nota-ejemplo__cerrar { background: transparent; color: inherit; border: 1px solid currentColor; }
.nota-ejemplo__pedir:focus-visible, .nota-ejemplo__cerrar:focus-visible { outline: 3px solid #FF4D6D; outline-offset: 2px; }
@media (hover: hover) {
  .nota-ejemplo__pedir:hover { background: #FF6680; }
}

/* Firma de Contacto Activo al pie: igual en las cuatro. */
.firma {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 4px 16px; margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--pie-linea);
  font-family: "Figtree", system-ui, sans-serif; font-size: 13px;
}
.firma a {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px;
  font-weight: 700; text-decoration: none;
}
.firma__simbolo {
  width: 15px; height: 16px; flex: 0 0 auto; background: #D31F42;
  -webkit-mask: url("../assets/simbolo.svg") center / contain no-repeat;
          mask: url("../assets/simbolo.svg") center / contain no-repeat;
}
/* Sello «Verificada» y «¿Algo raro? Avísanos» (27-sep-2026), bajo el aviso
   del pie. Solo en páginas de clientes reales, nunca en los ejemplos. */
.verif-fila { display: flex; flex-wrap: wrap; gap: 0 18px; }
.firma .verif { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; color: inherit; }
.firma .verif--avisar { font-weight: 400; }

/* Signo «más» dibujado con dos trazos, no con un carácter. */
.mas { position: relative; display: block; width: 14px; height: 14px; flex: 0 0 auto; }
.mas::before, .mas::after { content: ""; position: absolute; background: currentColor; transition: transform 200ms cubic-bezier(.23,1,.32,1); }
.mas::before { left: 0; right: 0; top: 6px; height: 2px; }
.mas::after { top: 0; bottom: 0; left: 6px; width: 2px; }
details > summary:focus-visible { outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .btn, .barra-fija, .mas::after, .mer-cotiza .ir, .ara-simula, .pon-cambio .ir, .pon-pregunta .ir { transition: none; }
  .nota-ejemplo:not([hidden]) { animation: none; }
  .btn:active, .ara-simula:active { transform: none; }
}

/* ============================================================
   CASA 1 · Propiedades Cordillera — carta membretada
   Todo centrado y en serif, como papelería grabada. Filetes dobles,
   esquina recta, nada de sombras. La cartera se lee como un libro de
   registro: precio al margen con línea de puntos, no tarjetas.
   ============================================================ */
.casa-cordillera {
  --fuera: #E9E4D8;
  --hoja: #FBF8F2;
  --tinta: #16232E;
  --mudo: #5A5F63;           /* 6,2:1 sobre la hoja */
  --linea: #D9D2C3;
  --linea-fuerte: #16232E;
  --laton: #8A6A1F;          /* latón oscurecido: 4,9:1 como texto */
  --casa: #16232E;
  --casa-hover: #22323F;
  --casa-icono: #D9B45A;
  --sobre-casa-mudo: #C9CFD4;
  --anillo: #8A6A1F;
  --seleccion: #EADFC2;
  --aviso-fondo: #16232E; --aviso-texto: #EDE7DA;
  --pie-linea: #D9D2C3;
  --radio: 0;
  --cuerpo: "Spectral", Georgia, "Times New Roman", serif;
  font-size: 17px;
}
.casa-cordillera .aviso a { color: #F3D98C; }

.cor-membrete {
  padding: 22px 22px 16px; text-align: center;
}
.cor-membrete img { width: 50px; height: auto; margin: 0 auto 10px; }
.cor-membrete__nom {
  display: block; font-weight: 600; font-size: 17px;
  letter-spacing: .32em; text-indent: .32em; text-transform: uppercase;
}
.cor-membrete__giro {
  display: block; margin-top: 6px; font-style: italic; font-size: 14px; color: var(--mudo);
}
/* Filete doble: la guarda de una hoja impresa. */
.cor-filete {
  height: 4px; margin: 0 22px;
  border-top: 1px solid var(--tinta); border-bottom: 1px solid var(--tinta);
}

.cor-quien { padding: 24px 22px 0; text-align: center; }
.cor-retrato {
  width: 92px; margin: 0 auto 16px; padding: 4px;
  border: 1px solid var(--tinta); background: var(--hoja);
}
.cor-retrato img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 15%; }
.cor-quien h1 {
  font-weight: 600; font-size: 32px; line-height: 1.08; letter-spacing: -.01em;
  text-wrap: balance;
}
.cor-quien__cargo { margin-top: 8px; font-style: italic; font-size: 18px; color: var(--mudo); }
/* Las credenciales van en una frase, no en cajas: así se escribe en una
   carta, y la cifra pesa por estar sola en su línea. */
.cor-creds {
  margin: 14px auto 0; max-width: 40ch;
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase; line-height: 1.9;
  color: var(--mudo);
}
.cor-creds b { color: var(--tinta); font-weight: 600; letter-spacing: .04em; }
.cor-lema {
  margin: 0 auto; padding: 0 22px 30px; max-width: 32ch; text-align: center; font-size: 18px; line-height: 1.5; text-wrap: pretty;
}

.cor-acciones { padding: 22px 22px 26px; display: grid; gap: 10px; }
.casa-cordillera .btn--wsp { box-shadow: inset 0 -3px 0 #B8912F; }

.cor-seccion { padding: 0 22px 34px; }
.cor-titulo {
  display: flex; align-items: center; gap: 14px;
  font-weight: 400; font-style: italic; font-size: 22px; margin-bottom: 8px;
}
.cor-titulo::before, .cor-titulo::after { content: ""; flex: 1; height: 1px; background: var(--linea); }

/* Libro de registro */
.cor-prop { padding: 18px 0; border-bottom: 1px solid var(--linea); }
.cor-prop__ref {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--mudo);
}
.cor-prop__estado--reservada { color: var(--laton); }
.cor-prop__linea {
  display: flex; align-items: baseline; gap: 8px; margin-top: 8px;
}
.cor-prop__linea h3 { font-weight: 600; font-size: 21px; flex: 0 0 auto; }
.cor-prop__linea::after { content: none; }
.cor-prop__puntos { flex: 1; border-bottom: 1px dotted var(--mudo); transform: translateY(-5px); min-width: 16px; }
.cor-prop__precio { font-weight: 600; font-size: 21px; white-space: nowrap; }
.cor-prop__lugar { margin-top: 4px; font-size: 15px; color: var(--mudo); }
.cor-prop__specs { margin-top: 6px; font-size: 15px; }
.cor-prop details { margin-top: 4px; }
.cor-prop summary {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-style: italic; font-size: 15px; color: var(--laton); text-decoration: underline;
  text-underline-offset: 3px;
}
.cor-prop dl { margin-top: 2px; font-size: 15px; }
.cor-prop dl div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-top: 1px dotted var(--linea); }
.cor-prop dt { color: var(--mudo); }

/* Servicios con numeración romana, sin íconos: es una carta. */
.cor-servicio { border-bottom: 1px solid var(--linea); }
.cor-servicio summary {
  display: grid; grid-template-columns: 34px 1fr auto; align-items: baseline; gap: 6px;
  padding: 14px 0; min-height: 56px;
}
.cor-servicio__n { font-style: italic; color: var(--laton); font-size: 18px; }
.cor-servicio h3 { font-weight: 600; font-size: 19px; }
.cor-servicio__que { grid-column: 2; font-size: 15px; color: var(--mudo); }
.cor-servicio__mas { grid-row: 1; grid-column: 3; color: var(--laton); }
.cor-servicio[open] .cor-servicio__mas::after { transform: rotate(90deg); }
.cor-servicio__cuerpo { padding: 0 0 18px 40px; font-size: 16px; }
.cor-servicio__cuerpo p + p { margin-top: 10px; }

.cor-datos { display: grid; gap: 0; font-size: 16px; }
.cor-datos div { padding: 10px 0; border-bottom: 1px solid var(--linea); }
.cor-datos dt { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--mudo); }
.cor-datos dd a { display: inline-flex; align-items: center; min-height: 44px; }

.cor-pie { padding: 30px 22px 30px; text-align: center; font-size: 14px; color: var(--mudo); }
.cor-pie img { width: 40px; margin: 0 auto 12px; }
.cor-pie__razon { color: var(--tinta); font-weight: 600; font-size: 16px; }
.cor-pie .firma { text-align: left; }

/* ============================================================
   CASA 2 · Isapre Araucaria — consulta amable
   La persona primero: la foto grande, redonda, y el nombre montado
   encima como una tarjeta. Formas blandas, verde bosque sobre blanco,
   menta como fondo de apoyo. Nada centrado a la fuerza.
   ============================================================ */
.casa-araucaria {
  --fuera: #DDEBE4;
  --hoja: #FFFFFF;
  --tinta: #10302A;
  --mudo: #4F625B;           /* 6,4:1 sobre blanco, 5,6:1 sobre menta */
  --menta: #EAF5EF;
  --linea: #D5E6DD;
  --linea-fuerte: #B7D3C5;
  --bosque: #0F4D3F;
  --casa: #0F4D3F;
  --casa-hover: #146050;
  --casa-icono: #9FE3C1;
  --sobre-casa-mudo: #CFE8DC;
  --anillo: #0F4D3F;
  --seleccion: #CDEBDD;
  --aviso-fondo: #EAF5EF; --aviso-texto: #10302A;
  --pie-linea: #D5E6DD;
  --radio: 999px;
  --cuerpo: "Manrope", "Figtree", system-ui, sans-serif;
}
.casa-araucaria .aviso a { color: var(--bosque); }

.ara-cab {
  display: flex; align-items: center; gap: 12px; padding: 18px 20px;
}
.ara-cab img { width: 34px; height: auto; }
.ara-cab__nom { display: block; font-weight: 800; font-size: 18px; color: var(--bosque); line-height: 1.1; }
.ara-cab__giro { display: block; font-size: 13px; color: var(--mudo); }

.ara-foto { position: relative; margin: 0 14px; }
/* La foto se encuadra con la cara en el tercio de arriba: la ficha del
   nombre se monta sobre los últimos 48 px, que tienen que ser hombros, no
   mentón (antes tapaba media cara). */
.ara-foto > img {
  width: 100%; height: 300px; object-fit: cover; object-position: 50% 30%;
  border-radius: 28px;
}
/* La ficha del nombre se monta sobre la foto: el primer vistazo es una
   persona, no un logo. */
.ara-nombre {
  position: relative; margin: -48px 14px 0; padding: 16px 20px 18px;
  background: var(--hoja); border-radius: 22px;
  box-shadow: 0 1px 0 var(--linea), 0 18px 34px -24px rgba(15,77,63,.55);
}
.ara-nombre h1 { font-weight: 800; font-size: 30px; line-height: 1.08; letter-spacing: -.02em; color: var(--bosque); }
.ara-nombre p { margin-top: 6px; font-weight: 600; color: var(--mudo); }

.ara-lema { padding: 22px 26px 0; font-size: 18px; line-height: 1.5; text-wrap: pretty; }

.ara-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 18px 20px 0; }
.ara-chips li {
  background: var(--menta); border-radius: 999px; padding: 7px 14px;
  font-size: 14px; color: var(--tinta);
}
.ara-chips b { font-weight: 800; color: var(--bosque); }

.ara-acciones { padding: 24px 20px 30px; display: grid; gap: 10px; }
.casa-araucaria .btn { border-color: var(--linea-fuerte); background: var(--menta); white-space: nowrap; padding-inline: 12px; }
.casa-araucaria .btn--wsp { white-space: normal; }
.casa-araucaria .btn--wsp { background: var(--casa); border-color: var(--casa); padding-inline: 22px; }
@media (hover: hover) {
  .casa-araucaria .btn:hover { border-color: var(--bosque); }
  .casa-araucaria .btn--wsp:hover { background: var(--casa-hover); }
}

.ara-seccion { padding: 8px 20px 30px; }
.ara-titulo { font-weight: 800; font-size: 22px; letter-spacing: -.01em; color: var(--bosque); margin-bottom: 14px; }
.ara-titulo small { display: block; font-weight: 400; font-size: 15px; color: var(--mudo); letter-spacing: 0; margin-top: 2px; }

.ara-planes { display: grid; gap: 12px; }
.ara-plan { background: var(--menta); border-radius: 22px; padding: 18px 18px 20px; }
.ara-plan--destacado { background: var(--hoja); box-shadow: inset 0 0 0 2px var(--bosque); }
.ara-plan__cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ara-plan h3 { font-weight: 800; font-size: 19px; color: var(--bosque); }
.ara-plan__sello {
  font-size: 12px; font-weight: 800; padding: 4px 11px; border-radius: 999px;
  background: var(--bosque); color: #fff; white-space: nowrap;
}
.ara-plan__precio { margin-top: 6px; font-size: 15px; color: var(--mudo); }
.ara-plan__precio b { font-size: 28px; font-weight: 800; color: var(--tinta); margin-right: 6px; }
.ara-cob { margin-top: 12px; display: grid; gap: 8px; }
.ara-cob div { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; font-size: 14px; }
.ara-cob b { font-weight: 800; }
.ara-cob i { grid-column: 1 / -1; height: 8px; border-radius: 999px; background: rgba(15,77,63,.14); overflow: hidden; }
.ara-cob i::after { content: ""; display: block; height: 100%; width: var(--p); background: var(--bosque); border-radius: inherit; }
.ara-plan ul { margin-top: 12px; display: grid; gap: 6px; font-size: 15px; }
.ara-plan li { display: flex; gap: 10px; }
.ara-plan li::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; margin-top: .6em; border-radius: 50%; background: var(--bosque); }

.ara-tramite { border-radius: 20px; background: var(--hoja); box-shadow: inset 0 0 0 1px var(--linea); }
.ara-tramite + .ara-tramite { margin-top: 10px; }
.ara-tramite summary { display: flex; align-items: center; gap: 14px; padding: 14px 16px; min-height: 64px; }
.ara-tramite__ic {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  background: var(--menta); color: var(--bosque); display: grid; place-items: center;
}
.ara-tramite__ic svg { width: 22px; height: 22px; }
.ara-tramite h3 { font-weight: 800; font-size: 17px; color: var(--bosque); }
.ara-tramite summary p { font-size: 14px; color: var(--mudo); }
.ara-tramite__mas { margin-left: auto; color: var(--bosque); }
.ara-tramite[open] .ara-tramite__mas::after { transform: rotate(90deg); }
.ara-tramite__cuerpo { padding: 0 18px 18px 74px; font-size: 15px; color: var(--mudo); }
.ara-tramite__cuerpo strong { color: var(--tinta); }
.ara-tramite__cuerpo p + p { margin-top: 8px; }

/* Simula tu plan: una tarjeta blanda, verde bosque, como los trámites. */
.ara-simula {
  display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 16px 16px 16px 16px;
  border-radius: 22px; background: var(--casa); color: #fff; text-decoration: none;
  transition: background-color 160ms cubic-bezier(.23,1,.32,1), transform 140ms cubic-bezier(.23,1,.32,1);
}
.ara-simula > span:nth-child(2) { flex: 1; min-width: 0; }
.ara-simula b { display: block; font-weight: 800; font-size: 17px; }
.ara-simula > span:nth-child(2) > span { display: block; font-size: 14px; color: var(--sobre-casa-mudo); margin-top: 2px; }
.ara-simula__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgb(255 255 255 / .14); color: var(--casa-icono); flex: 0 0 auto; }
.ara-simula__ic svg { width: 22px; height: 22px; }
.ara-simula .ir { width: 20px; height: 20px; flex: 0 0 auto; color: var(--casa-icono); }
.ara-simula:active { transform: scale(.98); }
@media (hover: hover) { .ara-simula:hover { background: var(--casa-hover); } }
.ara-nota { margin-top: 10px; padding: 0 6px; font-size: 14px; color: var(--mudo); }

.ara-datos { background: var(--menta); border-radius: 22px; padding: 8px 18px; }
.ara-datos div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; min-height: 44px; }
.ara-datos div + div { border-top: 1px solid var(--linea-fuerte); }
.ara-datos dt { font-size: 14px; color: var(--mudo); }
.ara-datos dd { text-align: right; font-weight: 600; font-size: 15px; }
.ara-datos dd a { display: inline-flex; align-items: center; min-height: 44px; }

.ara-pie { margin: 0 14px 14px; padding: 22px 20px 12px; background: var(--menta); border-radius: 26px; font-size: 14px; color: var(--mudo); }
.ara-pie__marca { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ara-pie__marca img { width: 26px; }
.ara-pie__razon { color: var(--tinta); font-weight: 800; }

/* ============================================================
   CASA 3 · Meridional Seguros — ficha técnica
   Oficina y datos: una credencial arriba con el registro de la CMF a la
   vista, tarifas en tabla con cifras alineadas, esquina media, filete
   ámbar corto. Es la más densa de las tres a propósito.
   ============================================================ */
.casa-meridional {
  --fuera: #D9E2EA;
  --hoja: #F3F6F9;
  --blanco: #FFFFFF;
  --tinta: #0E2233;
  --mudo: #4E5E6D;           /* 6,3:1 sobre la hoja */
  --linea: #D6DFE8;
  --linea-fuerte: #AFC0CF;
  --acero: #123A5C;
  --ambar: #E39A2B;
  --ambar-texto: #8A5A0E;    /* ámbar como texto: 5,5:1 */
  --casa: #123A5C;
  --casa-hover: #1A4C76;
  --casa-icono: #F2B75A;
  --sobre-casa-mudo: #C7D5E2;
  --anillo: #123A5C;
  --seleccion: #FCE6C2;
  --aviso-fondo: #0E2233; --aviso-texto: #E3EAF1;
  --pie-linea: #D6DFE8;
  --radio: 8px;
  --cuerpo: "Archivo", "Figtree", system-ui, sans-serif;
  font-size: 15px;
}
.casa-meridional .aviso a { color: #F2B75A; }

.mer-cab {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px; background: var(--blanco);
  border-bottom: 1px solid var(--linea);
}
.mer-cab img { width: 30px; height: auto; }
.mer-cab__nom { display: block; font-weight: 800; font-size: 16px; letter-spacing: .12em; text-transform: uppercase; color: var(--acero); line-height: 1.1; }
.mer-cab__giro { display: block; font-size: 12px; color: var(--mudo); }
.mer-cab { box-shadow: inset 0 -3px 0 var(--ambar); border-bottom: 0; }

/* La credencial: foto cuadrada a la izquierda, nombre a la derecha y el
   registro abajo, como el carné que muestra un corredor. */
.mer-credencial {
  margin: 16px 14px 0; padding: 16px;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: 12px;
}
.mer-credencial__fila { display: grid; grid-template-columns: 84px 1fr; gap: 14px; align-items: center; }
.mer-credencial img { width: 84px; height: 84px; object-fit: cover; object-position: 50% 12%; border-radius: 8px; }
.mer-credencial h1 { font-weight: 800; font-size: 25px; line-height: 1.1; letter-spacing: -.01em; color: var(--acero); }
.mer-credencial__cargo { margin-top: 4px; font-size: 14px; color: var(--mudo); }
.mer-registro {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding-top: 12px;
  border-top: 1px dashed var(--linea-fuerte); font-size: 13px; color: var(--mudo);
}
.mer-registro svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--acero); }
.mer-registro b { display: block; color: var(--tinta); font-size: 14px; }

.mer-ficha {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin: 10px 14px 0; background: var(--blanco); border: 1px solid var(--linea); border-radius: 12px;
}
.mer-ficha div { padding: 12px 10px; }
.mer-ficha div + div { border-left: 1px solid var(--linea); }
.mer-ficha b { display: block; font-weight: 800; font-size: 22px; color: var(--acero); line-height: 1.1; }
.mer-ficha span { display: block; font-size: 12px; color: var(--mudo); line-height: 1.3; margin-top: 3px; }

.mer-lema { padding: 18px 20px 0; font-size: 16px; line-height: 1.5; text-wrap: pretty; }
.mer-acciones { padding: 18px 14px 26px; display: grid; gap: 10px; }
.casa-meridional .btn { background: var(--blanco); }
.casa-meridional .btn--wsp { background: var(--casa); }
@media (hover: hover) { .casa-meridional .btn--wsp:hover { background: var(--casa-hover); } }

.mer-seccion { padding: 0 14px 26px; }
.mer-titulo {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-weight: 800; font-size: 19px; color: var(--acero); padding: 0 4px 10px;
}
.mer-titulo small { font-weight: 400; font-size: 13px; color: var(--mudo); }

/* Tabla de tarifas: la cifra a la derecha, alineada. */
.mer-tarifas { background: var(--blanco); border: 1px solid var(--linea); border-radius: 12px; overflow: hidden; }
.mer-tarifa + .mer-tarifa { border-top: 1px solid var(--linea); }
.mer-tarifa summary {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: baseline;
  padding: 13px 16px 13px 14px; min-height: 60px; position: relative;
}
.mer-tarifa summary::before {
  content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px;
  background: var(--ambar); border-radius: 0 2px 2px 0; opacity: 0;
}
.mer-tarifa[open] summary::before { opacity: 1; }
.mer-tarifa h3 { font-weight: 700; font-size: 16px; }
.mer-tarifa__desde { font-size: 12px; color: var(--mudo); text-align: right; }
.mer-tarifa__monto { grid-column: 2; grid-row: 1; font-weight: 800; font-size: 17px; color: var(--acero); text-align: right; }
.mer-tarifa__que { grid-column: 1; font-size: 13px; color: var(--mudo); }
.mer-tarifa__mes { grid-column: 2; font-size: 12px; color: var(--mudo); text-align: right; }
.mer-tarifa__cuerpo { padding: 0 16px 16px 14px; font-size: 14px; color: var(--mudo); }
.mer-tarifa__cuerpo strong { color: var(--tinta); }
.mer-tarifa__cuerpo p + p { margin-top: 8px; }

/* Cotiza en línea: filas de la misma ficha técnica, con flecha de acero. */
.mer-cotiza { background: var(--blanco); border: 1px solid var(--linea); border-radius: 12px; overflow: hidden; }
.mer-cotiza li + li { border-top: 1px solid var(--linea); }
.mer-cotiza a {
  display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 14px 12px 16px;
  text-decoration: none; color: var(--tinta); transition: background-color 160ms cubic-bezier(.23,1,.32,1);
}
.mer-cotiza a > span { flex: 1; min-width: 0; }
.mer-cotiza b { display: block; font-weight: 700; font-size: 16px; }
.mer-cotiza a > span > span { display: block; font-size: 13px; color: var(--mudo); }
.mer-cotiza .ir { width: 20px; height: 20px; color: var(--acero); flex: 0 0 auto; transition: transform 160ms cubic-bezier(.23,1,.32,1); }
.mer-cotiza a:active { background: var(--hoja); }
@media (hover: hover) {
  .mer-cotiza a:hover { background: var(--hoja); }
  .mer-cotiza a:hover .ir { transform: translateX(3px); }
}

.mer-companias { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mer-companias li { background: var(--blanco); border: 1px solid var(--linea); border-radius: 8px; padding: 10px; }
.mer-companias b { display: block; font-weight: 700; font-size: 14px; line-height: 1.2; color: var(--acero); }
.mer-companias span { display: block; font-size: 12px; color: var(--mudo); margin-top: 2px; }
.mer-nota { margin-top: 10px; padding: 0 4px; font-size: 13px; color: var(--mudo); }

.mer-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mer-datos div { background: var(--blanco); border: 1px solid var(--linea); border-radius: 8px; padding: 10px 12px; }
.mer-datos div.ancho { grid-column: 1 / -1; }
.mer-datos dt { font-size: 12px; color: var(--mudo); }
.mer-datos dd { font-weight: 700; font-size: 14px; }
.mer-datos dd a { display: inline-flex; align-items: center; min-height: 44px; }

.mer-pie { padding: 22px 18px 16px; background: var(--blanco); border-top: 3px solid var(--acero); font-size: 13px; color: var(--mudo); }
.mer-pie__marca { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.mer-pie__marca img { width: 24px; }
.mer-pie__razon { color: var(--tinta); font-weight: 700; font-size: 14px; }

@media (max-width: 360px) {
  .mer-ficha b { font-size: 19px; }
  .mer-companias { grid-template-columns: 1fr; }
}

/* ============================================================
   CASA 4 · AFP Poniente — el horizonte
   Lo previsional es largo plazo: la página se lee como un horizonte.
   La persona (su sello, porque no mandó foto) se apoya como un sol en
   una línea que cruza la hoja; el traspaso va en una franja burdeos de
   borde a borde, con el sol bajando en la esquina; las cifras son
   grandes y tabulares. Esquina casi recta (4 px): no es la carta de
   Cordillera (0), ni la ficha de Meridional (8), ni lo blando de
   Araucaria (redondo).
   ============================================================ */
.casa-poniente {
  --fuera: #EDE2D8;
  --hoja: #FFFBF7;
  --arena: #F6ECE3;
  --tinta: #2B1419;
  --mudo: #6A5552;           /* 6,7:1 sobre la hoja, 5,9:1 sobre arena */
  --linea: #EADBD0;
  --linea-fuerte: #94786A;   /* borde de campo: 4:1, pasa el 3:1 de controles */
  --burdeos: #6B1D33;
  --sol: #D2552A;            /* gráfico: 4:1 sobre la hoja */
  --sol-texto: #A8431D;      /* sol como texto: 5,9:1 sobre la hoja */
  --casa: #6B1D33;
  --casa-hover: #82263F;
  --casa-icono: #F6A27C;
  --sobre-casa-mudo: #EBCFD2;   /* 7,8:1 sobre burdeos */
  --anillo: #A8431D;
  --seleccion: #F9D9C6;
  --aviso-fondo: #2B1419; --aviso-texto: #F3E6DC;
  --pie-linea: #E3D2C6;
  --radio: 4px;
  --cuerpo: "Instrument Sans", "Figtree", system-ui, sans-serif;
  font-size: 16px;
}
.casa-poniente .aviso a { color: var(--casa-icono); }
.casa-poniente input::placeholder { color: var(--mudo); }
.casa-poniente input { caret-color: var(--sol); }

.pon-cab {
  display: flex; align-items: center; gap: 12px; padding: 18px 20px 16px;
  border-bottom: 1px solid var(--linea);
}
.pon-cab img { width: 38px; height: auto; }
.pon-cab__nom { display: block; font-weight: 700; font-size: 20px; letter-spacing: -.01em; color: var(--burdeos); line-height: 1.05; }
.pon-cab__giro { display: block; font-size: 13px; color: var(--mudo); }

/* El sello sobre el horizonte. El arco es el sol del logo; la línea de
   2 px que lo sostiene cruza la hoja entera. */
.pon-quien { padding: 26px 20px 0; }
.pon-quien__fila {
  display: grid; grid-template-columns: 84px 1fr; gap: 16px; align-items: end;
  margin-inline: -20px; padding-inline: 20px;
  box-shadow: inset 0 -2px 0 var(--burdeos);
}
.pon-sello {
  display: grid; place-items: center; width: 84px; height: 100px;
  border-radius: 42px 42px 0 0; background: var(--burdeos); color: #F7E3D6;
  font-weight: 600; font-size: 34px; letter-spacing: .02em; line-height: 1;
  padding-top: 8px;
}
.pon-quien h1 { font-weight: 700; font-size: 30px; line-height: 1.06; letter-spacing: -.02em; text-wrap: balance; }
.pon-quien__cargo { margin: 6px 0 12px; font-size: 15px; color: var(--mudo); }
.pon-codigo {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px;
  padding: 10px 0 0; font-size: 14px; color: var(--mudo);
}
.pon-codigo b { font-weight: 700; color: var(--sol-texto); letter-spacing: .04em; margin-left: 4px; }
.pon-lema { padding: 20px 0 0; font-size: 18px; line-height: 1.5; text-wrap: pretty; }

.pon-acciones { padding: 22px 16px 28px; display: grid; gap: 10px; }
.casa-poniente .btn { background: var(--hoja); }
.casa-poniente .btn--wsp { background: var(--casa); }
@media (hover: hover) {
  .casa-poniente .btn:hover { border-color: var(--burdeos); }
  .casa-poniente .btn--wsp:hover { background: var(--casa-hover); }
}

/* La franja del traspaso: de borde a borde, burdeos, y el sol que baja
   en la esquina. Es lo que le deja la comisión a la ejecutiva, así que
   es lo único de la página que corta la hoja completa. */
.pon-cambio {
  position: relative; overflow: hidden;
  margin-bottom: 34px; padding: 26px 20px 30px;
  background: var(--casa); color: #fff;
}
.pon-cambio::after {
  content: ""; position: absolute; right: -34px; bottom: -64px;
  width: 150px; height: 150px; border-radius: 50%; background: var(--sol);
  pointer-events: none;
}
.pon-cambio > * { position: relative; z-index: 1; }
.pon-cambio__titulo { font-weight: 700; font-size: 26px; line-height: 1.1; letter-spacing: -.015em; }
.pon-cambio__titulo small { display: block; margin-top: 4px; text-wrap: pretty; font-weight: 400; font-size: 15px; letter-spacing: 0; color: var(--sobre-casa-mudo); }
.pon-cambio__lista { margin-top: 16px; border-top: 1px solid rgb(255 255 255 / .22); }
.pon-cambio__lista li { border-bottom: 1px solid rgb(255 255 255 / .22); }
.pon-cambio__lista a {
  display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 12px 0;
  color: #fff; text-decoration: none;
}
.pon-cambio__lista a > span { flex: 1; min-width: 0; }
.pon-cambio__lista b { display: block; font-weight: 700; font-size: 18px; }
.pon-cambio__lista a > span > span { display: block; font-size: 14px; color: var(--sobre-casa-mudo); margin-top: 1px; }
.pon-cambio .ir { width: 22px; height: 22px; flex: 0 0 auto; color: var(--casa-icono); transition: transform 160ms cubic-bezier(.23,1,.32,1); }
.pon-cambio__lista a:active .ir { transform: translateX(3px); }
@media (hover: hover) { .pon-cambio__lista a:hover .ir { transform: translateX(3px); } }
.pon-cambio__nota { margin-top: 14px; max-width: 30ch; font-size: 14px; color: var(--sobre-casa-mudo); }
.pon-cambio :focus-visible { outline-color: var(--casa-icono); }

.pon-seccion { padding: 0 20px 36px; }
/* El título lleva el sol del logo bajando sobre la línea de base. */
.pon-titulo {
  display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: baseline; column-gap: 10px;
  font-weight: 700; font-size: 22px; line-height: 1.2; letter-spacing: -.01em; color: var(--burdeos);
  margin-bottom: 14px; text-wrap: balance;
}
.pon-titulo::before {
  content: ""; width: 18px; height: 9px;
  border-radius: 9px 9px 0 0; background: var(--sol);
}
.pon-titulo small { grid-column: 2; margin-top: 2px; font-weight: 400; font-size: 14px; letter-spacing: 0; color: var(--mudo); }

/* La comisión: la tasa en grande y la cuenta hecha con el sueldo real. */
.pon-tasa { font-size: 17px; line-height: 1.45; text-wrap: pretty; }
.pon-tasa b { display: block; font-weight: 600; font-size: 56px; line-height: 1; letter-spacing: -.03em; color: var(--tinta); margin-bottom: 6px; }
.pon-calc { margin-top: 18px; padding: 16px; background: var(--arena); border-radius: var(--radio); }
.pon-calc label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.pon-calc__campo {
  display: flex; align-items: center; gap: 6px; min-height: 52px; padding: 0 14px;
  background: var(--hoja); border: 1.5px solid var(--linea-fuerte); border-radius: var(--radio);
  font-size: 20px; font-weight: 600;
}
.pon-calc__campo:focus-within { border-color: var(--sol-texto); box-shadow: 0 0 0 3px rgb(210 85 42 / .22); }
.pon-calc__campo span { color: var(--mudo); }
.pon-calc input {
  flex: 1; min-width: 0; height: 48px; border: 0; background: transparent; padding: 0;
  font: inherit; color: var(--tinta);
}
.pon-calc input:focus-visible { outline: none; }
.pon-calc__res { margin-top: 12px; font-size: 17px; }
.pon-calc__res b { font-weight: 700; font-size: 24px; color: var(--sol-texto); }
.pon-nota { margin-top: 12px; font-size: 14px; color: var(--mudo); text-wrap: pretty; }

/* Aviso de claves: el traspaso y el APV se hacen con la Clave Única en el
   sitio oficial, así que justo debajo de esos enlaces va dicho que la
   ejecutiva nunca la pide. Es lo que usan los estafadores que se hacen
   pasar por ejecutivos. */
.pon-claves {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px;
  padding: 16px 16px 18px; background: var(--arena); border-radius: var(--radio);
}
.pon-claves svg { width: 26px; height: 26px; color: var(--burdeos); margin-top: 1px; }
.pon-claves h2 { font-weight: 700; font-size: 17px; line-height: 1.3; color: var(--tinta); }
.pon-claves p { margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--mudo); text-wrap: pretty; }

/* Los fondos generacionales (desde el 1 de abril de 2027). El sol que baja
   hacia el horizonte es el riesgo que baja con la edad: la curva es de
   forma, sin cifras, porque cada fondo tiene su cartera y cambia en el
   tiempo. Debajo, los tres grupos que fija la norma: 1 + 8 + 1. */
.pon-falta {
  display: inline-block; margin-bottom: 12px; padding: 4px 10px;
  border-radius: var(--radio); background: var(--arena);
  font-size: 13px; font-weight: 700; color: var(--sol-texto);
}
.pon-falta[hidden] { display: none; }
.pon-gen__bajada { font-size: 16px; line-height: 1.55; text-wrap: pretty; }
.pon-gen__grafico { margin: 18px 0 0; }
.pon-gen__grafico svg { display: block; width: 100%; height: auto; overflow: visible; }
.pon-gen__area { fill: var(--sol); fill-opacity: .12; }
.pon-gen__curva { fill: none; stroke: var(--sol); stroke-width: 2; }
.pon-gen__punto { fill: var(--sol); stroke: var(--hoja); stroke-width: 2.5; }
.pon-gen__horizonte, .pon-gen__peine { stroke: var(--burdeos); fill: none; }
.pon-gen__horizonte { stroke-width: 2; }
.pon-gen__peine { stroke-width: 1.5; }
.pon-gen__eje { font-size: 11px; font-weight: 600; fill: var(--mudo); }
.pon-gen__grupos {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px;
  margin-top: 6px; font-size: 13px; line-height: 1.35; color: var(--mudo);
}
.pon-gen__grupos li:nth-child(2) { text-align: center; }
.pon-gen__grupos li:last-child { text-align: right; }
.pon-gen__grupos b { display: block; font-size: 15px; font-weight: 700; color: var(--tinta); }
.pon-gen__grupos span { display: block; text-wrap: balance; }

/* Qué cambia para el afiliado: tres filas, y en cada una quién decide. */
.pon-elige { margin-top: 22px; border-top: 1px solid var(--linea); }
.pon-elige li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 12px;
  padding: 14px 0; border-bottom: 1px solid var(--linea);
}
.pon-elige b { font-weight: 700; font-size: 17px; }
.pon-elige p { grid-column: 1 / -1; font-size: 15px; color: var(--mudo); text-wrap: pretty; }
.pon-elige__quien {
  font-size: 12px; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
  padding: 3px 8px; border-radius: var(--radio);
  color: var(--sol-texto); background: var(--arena);
}
.pon-elige__quien--ley { color: var(--mudo); background: transparent; box-shadow: inset 0 0 0 1px var(--linea-fuerte); }
.pon-pregunta {
  display: flex; align-items: center; gap: 12px; min-height: 56px; margin-top: 6px;
  font-weight: 700; font-size: 16px; line-height: 1.35; color: var(--burdeos); text-decoration: none;
}
.pon-pregunta span { flex: 1; min-width: 0; }
.pon-pregunta .ir { width: 22px; height: 22px; flex: 0 0 auto; color: var(--sol-texto); transition: transform 160ms cubic-bezier(.23,1,.32,1); }
.pon-pregunta:active .ir { transform: translateX(3px); }
@media (hover: hover) { .pon-pregunta:hover .ir { transform: translateX(3px); } }

/* De tu primer sueldo a tu pensión: filas de estado de cuenta, con la
   edad al margen en cifras grandes. */
.pon-vida li {
  display: grid; grid-template-columns: 76px 1fr; gap: 14px;
  padding: 16px 0; border-top: 1px solid var(--linea);
}
.pon-vida li:last-child { border-bottom: 1px solid var(--linea); }
.pon-vida__cuando { font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--sol-texto); padding-top: 3px; }
.pon-vida__cuando b { display: block; font-weight: 600; font-size: 28px; line-height: 1; letter-spacing: -.02em; color: var(--sol-texto); font-variant-numeric: tabular-nums; }
.pon-vida__cuando b + b { margin-top: 2px; }
.pon-vida h3 { font-weight: 700; font-size: 17px; }
.pon-vida p { margin-top: 3px; font-size: 15px; color: var(--mudo); text-wrap: pretty; }

.pon-datos div { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 48px; padding: 4px 0; border-bottom: 1px solid var(--linea); }
.pon-datos dt { font-size: 14px; color: var(--mudo); }
.pon-datos dd { text-align: right; font-weight: 600; font-size: 15px; }
.pon-datos dd a { display: inline-flex; align-items: center; min-height: 44px; }

.pon-pie { padding: 24px 20px 16px; background: var(--arena); border-top: 2px solid var(--burdeos); font-size: 13px; color: var(--mudo); }
.pon-pie__marca { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pon-pie__marca img { width: 28px; }
.pon-pie__razon { color: var(--tinta); font-weight: 700; font-size: 14px; }

@media (max-width: 360px) {
  .pon-quien__fila { grid-template-columns: 70px 1fr; }
  .pon-sello { width: 70px; height: 84px; font-size: 28px; }
  .pon-quien h1 { font-size: 26px; }
  .pon-tasa b { font-size: 48px; }
}