/* ============================================================
   Sistema de diseño del Manual (3 partes + calculadora + lista)
   ------------------------------------------------------------
   Reemplaza a styles.css para las paginas nuevas. La regla que
   ordena todo: UNA IDEA POR PANTALLA. La pagina vieja apilaba
   14 controles y 3.990 palabras de corrido; aqui cada bloque
   dice una sola cosa y trae UNA cifra que manda sobre las demas.

   Desde el 20/10/2026 copia la landing de venta de Alvaro:
   Playfair Display para titulos, Inter para todo lo demas
   (cifras incluidas, con tabular-nums) y su paleta negra,
   crema y champaña. Un solo tema.
   ============================================================ */

/* Diseño copiado de la landing de venta de Alvaro
   (inversionistaenflorida.lovable.app), pedido de Simon el 20/10/2026:
   mismas letras (Playfair Display + Inter), mismos colores y la misma
   forma de presentar: secciones que alternan blanco y crema, negro
   para portada y pie, champaña para los botones y lo que se resalta.
   Un solo tema, igual que la landing: ya no cambia con el modo oscuro
   del telefono. */
:root{
  color-scheme:light;

  /* Letras */
  --f-display:"Playfair Display",Georgia,"Times New Roman",serif;
  --f-sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;

  /* Negros */
  --ink-950:#0b0b0b;   /* pie */
  --ink-900:#121212;   /* cabecera, portada, secciones negras */
  --ink-800:#181818;
  --ink-600:#55524d;
  --ink-400:#9a958c;
  --ink-300:#b8b3aa;

  /* Champaña y dorado */
  --tan:#cba77e;        /* botones y resaltado sobre negro */
  --tan-hover:#b8925f;
  --tan-borde:#ad8046;
  --tan-deep:#7a5c34;   /* resaltado y rotulos sobre blanco o crema */
  --tan-soft:#cba77e;

  /* Fondos */
  --paper:#FFFFFF;
  --paper-2:#f7f3ec;    /* crema: una seccion si, otra no */
  --paper-3:#fbf6ec;    /* cajas suaves dentro de una seccion */
  --celda:#fbf8f2;

  /* Texto */
  --tx:#121212;         /* titulos */
  --tx-soft:#55524d;    /* parrafos */
  --tx-faint:#6b665f;   /* notas */

  /* Texto sobre negro */
  --dk-tx:#fff;
  --dk-soft:#d9d3c8;
  --dk-body:#b8b3aa;
  --dk-faint:#9a958c;

  /* Lineas */
  --line:#e7e0d5;
  --line-soft:#ece6dc;
  --line-strong:#d6ccbd;

  /* Semantica: verde = funciona, terracota = no hace falta */
  --ok:#2f7050;
  --ok-bg:#eaf4ee;
  --ok-line:#bcdcc9;
  --no:#9c5248;
  --no-bg:#f8efed;

  /* Foco: dorado oscuro sobre blanco; champaña sobre negro (contraste 3:1 o mas) */
  --focus:#7a5c34;
  --hl:var(--tan-deep);

  --radio:14px;
  --sombra:0 4px 14px rgba(18,18,18,.06);
  --sombra-alta:0 16px 40px rgba(18,18,18,.10);
  --sombra-boton:0 10px 24px rgba(122,92,52,.22);
}

*{box-sizing:border-box}

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

body{
  margin:0;
  background:var(--paper);
  color:var(--tx-soft);
  font-family:var(--f-sans);
  font-weight:400;
  /* 18px de piso, 20 en pantalla grande: igual que .prose-body de la landing */
  font-size:18px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

@media (min-width:1024px){body{font-size:20px}}

.wrap{max-width:720px;margin:0 auto;padding-inline:22px}
.wrap-ancho{max-width:1160px;margin:0 auto;padding-inline:22px}

/* ---------- Tipografia ----------
   Saltos grandes y pocos niveles. Un tamaño intermedio de mas
   y el lector deja de saber que es titulo y que es texto. */

h1,h2,h3,h4{font-family:var(--f-display);font-weight:600;letter-spacing:-.01em;text-wrap:balance;margin:0;color:var(--tx);font-variant-numeric:lining-nums}
h1{font-size:38px;line-height:1.12}
h2{font-size:30px;line-height:1.18}
h3{font-size:22px;line-height:1.25}
@media (min-width:1024px){h1{font-size:60px}h2{font-size:44px}h3{font-size:26px}}
h4{font-size:19px;font-weight:600;line-height:1.3}
/* Lo resaltado: Playfair en cursiva, dorado sobre blanco y champaña sobre negro (.hl de la landing) */
em{font-family:var(--f-display);font-style:italic;font-weight:600;color:var(--hl)}
p em,li em,dd em,td em{font-weight:500}

p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}

strong{font-weight:600;color:var(--tx)}

a{color:var(--tan-deep);text-underline-offset:3px}
a:hover{color:var(--tx)}

:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}

/* Etiqueta de seccion */
.rotulo{
  font-family:var(--f-sans);
  font-size:12px;font-weight:600;letter-spacing:.14em;line-height:1.4;text-transform:uppercase;
  color:var(--tan-deep);margin:0 0 14px;
}

/* Entradilla: el parrafo grande bajo un titulo */
.entrada{font-size:1.06em;color:var(--tx-soft);font-weight:400;line-height:1.6}

/* Cifras: siempre monoespaciadas y de ancho fijo, para que no
   bailen mientras el usuario mueve el control */
.cifra{font-family:var(--f-sans);font-variant-numeric:tabular-nums;font-weight:700}

/* ---------- Ritmo vertical ----------
   Cada seccion respira. Es lo que convierte "una pagina larga"
   en "una idea, y luego otra". */
.bloque{padding-block:64px}
@media (min-width:1024px){.bloque{padding-block:104px}}
.bloque-tono{background:var(--paper-2)}

/* ============================================================
   Cabecera
   ============================================================ */
.masthead{background:var(--ink-900);color:#fff;padding-block:16px;border-bottom:1px solid rgba(203,167,126,.18)}
.masthead .wrap-ancho{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.marca{font-family:var(--f-sans);font-weight:700;font-size:15px;letter-spacing:.02em;color:#fff}
.marca span{color:var(--tan-soft)}
.masthead .firma{font-family:var(--f-sans);font-size:11.5px;font-weight:600;color:var(--dk-faint);letter-spacing:.14em}

/* ============================================================
   Portada: la pregunta, y la respuesta de una vez
   ============================================================ */
.masthead,.pie{--focus:var(--tan)}
.portada{--hl:var(--tan);--focus:var(--tan);background:var(--ink-900);color:var(--dk-body);padding-block:clamp(52px,10vw,96px) clamp(56px,10vw,104px);position:relative;overflow:hidden}

.portada .wrap{position:relative}
/* La pregunta larga de la Parte 1 no va en mayusculas: se lee mal.
   Las cortas de las demas portadas si, como el rotulo de la landing. */
.portada:not(.portada-corta) .pregunta{
  text-transform:none;letter-spacing:0;font-size:clamp(17px,1.8vw,20px);font-weight:500;max-width:28ch;
}

/* En pantalla grande la portada va en dos columnas, como la landing:
   el texto a la izquierda y Angela a la derecha, en una foto grande con
   la firma encima. Es la misma .firma-card del telefono, solo cambia de
   forma. FREC: la firma (strong) sigue mas grande que su nombre (span). */
@media (min-width:1024px){
  .portada .wrap:has(> .firma-card){
    max-width:1160px;display:grid;grid-template-columns:minmax(0,1fr) 400px;
    grid-template-rows:1fr auto auto auto auto 1fr;
    column-gap:64px;align-items:start;
  }
  /* El texto queda centrado en alto frente a la foto */
  .portada .wrap:has(> .firma-card) > :nth-child(2){grid-row:2}
  .portada .wrap:has(> .firma-card) > :nth-child(3){grid-row:3}
  .portada .wrap:has(> .firma-card) > :nth-child(4){grid-row:4}
  .portada .wrap:has(> .firma-card) > :nth-child(5){grid-row:5}
  .portada .wrap:has(> .firma-card) > *{grid-column:1}
  .portada .wrap:has(> .firma-card) .bajada{max-width:30em}
  .portada .wrap:has(> .firma-card) .pregunta{max-width:40em}
  .portada .wrap > .firma-card{
    grid-column:2;grid-row:1 / 7;align-self:center;
    display:block;position:relative;margin:0;
    border-radius:18px;overflow:hidden;
    border:1px solid rgba(203,167,126,.28);box-shadow:0 24px 60px rgba(0,0,0,.55);
  }
  .portada .wrap > .firma-card .firma-foto{
    width:100%;aspect-ratio:4/5;border-radius:0;border:none;box-shadow:none;background:#e9e6e1;
  }
  .portada .wrap > .firma-card .firma-foto img{object-position:center 18%}
  .portada .wrap > .firma-card .firma-txt{
    position:absolute;left:14px;right:14px;bottom:14px;
    background:rgba(18,18,18,.9);border:1px solid rgba(255,255,255,.08);
    border-radius:12px;padding:14px 16px;
  }
}
.portada .pregunta{
  font-family:var(--f-sans);
  font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;line-height:1.55;
  color:var(--tan);margin:0 0 20px;max-width:60ch;
}
/* El "Sí." es el elemento mas grande de todo el sitio. Es la
   respuesta a la unica pregunta que trae al visitante. */
.sí,.si-grande{
  font-family:var(--f-display);font-weight:600;font-style:italic;
  font-size:clamp(88px,20vw,170px);line-height:.9;letter-spacing:-.02em;
  color:#fff;margin:0 0 22px;
}
.portada .bajada{font-size:clamp(18px,2vw,21px);line-height:1.6;color:var(--dk-body);font-weight:400;max-width:36ch;margin:0 0 30px}
.portada .bajada strong{color:#fff;font-weight:500}
.portada .minuto{
  font-family:var(--f-sans);font-size:12.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dk-faint);
  display:flex;align-items:center;gap:9px;
}
.portada .minuto::before{content:"";width:26px;height:1px;background:var(--tan);display:block}

/* ============================================================
   Lo que NO necesitas — el bloque que derriba la incredulidad
   ============================================================ */
.no-lista{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.no-item{
  display:flex;align-items:flex-start;gap:15px;
  background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--radio);
  padding:17px 19px;box-shadow:var(--sombra);
}
.no-item .marca-x{
  flex:none;width:30px;height:30px;border-radius:50%;
  background:var(--no-bg);color:var(--no);
  display:grid;place-items:center;font-size:15px;font-weight:700;
  font-family:var(--f-sans);line-height:1;
}
.no-item .txt{font-family:var(--f-sans);font-size:16.5px;font-weight:600;line-height:1.35;padding-top:4px;color:var(--tx)}
.no-item .txt small{display:block;font-weight:400;font-size:14.5px;color:var(--tx-faint);margin-top:3px;line-height:1.45}

/* ============================================================
   La balanza: por que te aprueban, en dos cifras de dinero
   ------------------------------------------------------------
   Regla del producto: se enseñan las DOS CIFRAS DE DINERO,
   nunca el indice. "1.20" no significa nada para quien nunca
   pidio un prestamo; "$2,144 contra $1,789" se entiende solo.
   ============================================================ */
.balanza{display:grid;gap:14px;margin:30px 0 0}
.plato{
  border:1px solid var(--line-soft);border-radius:var(--radio);box-shadow:var(--sombra);
  background:var(--paper);padding:22px 24px;position:relative;overflow:hidden;
}
.plato .et{
  font-family:var(--f-sans);font-size:12px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--tx-faint);margin-bottom:10px;
}
.plato .val{font-family:var(--f-sans);font-variant-numeric:tabular-nums;
  font-size:clamp(34px,7vw,46px);font-weight:700;line-height:1;letter-spacing:-.02em}
.plato .leyenda{font-size:15.5px;color:var(--tx-soft);margin-top:9px;font-family:var(--f-sans);line-height:1.45}
.plato-gasto .val{color:var(--tx)}
.plato-renta{border-color:var(--ok-line);background:var(--ok-bg)}
.plato-renta .val{color:var(--ok)}
/* La barra de proporcion hace visible de un golpe cual es mayor */
.barra{height:7px;border-radius:99px;background:var(--line);margin-top:15px;overflow:hidden}
.barra i{display:block;height:100%;border-radius:99px;background:var(--ink-900)}
.plato-renta .barra{background:var(--ok-line)}
.plato-renta .barra i{background:var(--ok)}

.veredicto{
  margin-top:16px;display:flex;align-items:center;gap:14px;
  background:var(--ok-bg);border:1px solid var(--ok-line);border-radius:var(--radio);
  padding:19px 22px;
}
.veredicto .tick{
  flex:none;width:34px;height:34px;border-radius:50%;background:var(--ok);color:#fff;
  display:grid;place-items:center;font-size:18px;font-weight:700;line-height:1;
}
.veredicto .txt{font-family:var(--f-sans);font-size:17px;font-weight:600;line-height:1.4;color:var(--ok)}
.veredicto .txt small{display:block;font-weight:400;color:var(--tx-soft);font-size:14.5px;margin-top:3px}

/* ============================================================
   Lo que SI necesitas — tarjetas con una cifra cada una
   ============================================================ */
.si-lista{display:grid;gap:13px;margin:0;padding:0;list-style:none}
@media (min-width:640px){.si-lista{grid-template-columns:1fr 1fr}}
.si-item{
  border:1px solid var(--line-soft);border-radius:var(--radio);background:var(--paper);
  padding:22px 24px;box-shadow:var(--sombra);
}
.si-item .n{
  font-family:var(--f-sans);font-variant-numeric:tabular-nums;
  font-size:32px;font-weight:700;color:var(--tan-deep);line-height:1;margin-bottom:10px;letter-spacing:-.02em;
}
.si-item h4{margin:0 0 5px}
.si-item p{font-size:15.5px;color:var(--tx-soft);margin:0;font-family:var(--f-sans);line-height:1.5}

/* ============================================================
   El efectivo de verdad — tabla legible en telefono
   ============================================================ */
.cuenta{width:100%;border-collapse:collapse;margin:26px 0 0;font-family:var(--f-sans);font-size:16px}
.cuenta td{padding:15px 2px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--tx)}
.cuenta td:last-child{
  text-align:right;white-space:nowrap;padding-left:14px;
  font-family:var(--f-sans);font-variant-numeric:tabular-nums;font-weight:600;
}
.cuenta tr.suma td{border-bottom:none;border-top:2px solid var(--ink-900);padding-top:17px;font-weight:700;font-size:17px}
.cuenta tr.suma td:last-child{color:var(--tan-deep);font-size:22px;font-weight:700}
@media (max-width:390px){
  .cuenta{font-size:15px}
  .cuenta td:last-child{white-space:normal;font-size:14.5px}
  .cuenta tr.suma td:last-child{font-size:18px}
}
.cuenta .opc{color:var(--tx-faint);font-weight:400;font-size:14px;display:block;margin-top:2px}

/* ============================================================
   ¿Te alcanza? — el UNICO control de esta pagina
   ------------------------------------------------------------
   La pagina vieja abria con 14 controles a la vez. Aqui hay uno
   solo, y la respuesta aparece sin apretar nada.
   ============================================================ */
.prueba{
  border:1px solid var(--line-soft);border-radius:18px;background:var(--paper);
  padding:clamp(24px,4vw,36px);box-shadow:var(--sombra-alta);
}
.prueba .pregunta-lbl{
  font-family:var(--f-sans);font-size:16px;font-weight:600;
  color:var(--tx-soft);margin:0 0 6px;
}
.prueba .monto{
  font-family:var(--f-sans);font-variant-numeric:tabular-nums;
  font-size:clamp(40px,9vw,58px);font-weight:700;line-height:1;color:var(--tx);
  letter-spacing:-.02em;margin-bottom:20px;
}

/* Barra: alto de toque real, no 4px de linea */
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;
  background:transparent;margin:0;padding-block:18px;cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:99px;background:var(--line-strong)}
input[type=range]::-moz-range-track{height:8px;border-radius:99px;background:var(--line-strong)}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:32px;height:32px;border-radius:50%;
  background:var(--ink-900);border:4px solid var(--tan);margin-top:-12px;
  box-shadow:0 4px 12px rgba(18,18,18,.25);
}
input[type=range]::-moz-range-thumb{
  width:32px;height:32px;border-radius:50%;background:var(--ink-900);
  border:4px solid var(--tan);box-shadow:0 4px 12px rgba(18,18,18,.25);
}
.topes{
  display:flex;justify-content:space-between;
  font-family:var(--f-sans);font-size:12.5px;color:var(--tx-faint);margin-top:2px;
}

.respuesta{
  margin-top:26px;padding-top:24px;border-top:1px solid var(--line);
}
.respuesta .lead{font-family:var(--f-sans);font-size:16px;color:var(--tx-soft);margin:0 0 8px;font-weight:500}
.respuesta .grande{
  font-family:var(--f-sans);font-variant-numeric:tabular-nums;
  font-size:clamp(38px,8.5vw,54px);font-weight:700;line-height:1.02;color:var(--ok);
  letter-spacing:-.02em;margin-bottom:10px;
}
.respuesta .nota{font-size:16px;color:var(--tx-soft);margin:0;font-family:var(--f-sans);line-height:1.5}

/* ============================================================
   Llamado a la accion
   ============================================================ */
.boton{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:60px;padding:12px 28px;border-radius:999px;
  border:1px solid var(--tan-borde);background:var(--tan);color:var(--ink-900);
  box-shadow:var(--sombra-boton);
  font-family:var(--f-sans);font-size:16px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  text-align:center;text-decoration:none;cursor:pointer;line-height:1.25;
  transition:background-color .15s ease, transform .12s ease;
}
.boton:hover{background:var(--tan-hover);color:var(--ink-900);transform:translateY(-1px)}
.boton:active{transform:translateY(0)}
.boton:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
@media (min-width:768px){.boton{min-width:min(420px,100%);max-width:560px}}
.boton-tan{background:var(--tan)}
.boton-tan:hover{background:var(--tan-hover)}
.boton .flecha{font-size:19px;line-height:1}

.cierre{text-align:center}
.cierre h2{margin-bottom:16px}
.cierre .entrada{margin-inline:auto;max-width:44ch;margin-bottom:30px}
.cierre .luego{font-family:var(--f-sans);font-size:14.5px;color:var(--tx-faint);margin-top:18px}

/* ============================================================
   Aviso suelto dentro del texto
   ============================================================ */
.aviso{
  border-left:3px solid var(--tan);background:var(--paper-3);
  padding:20px 22px;border-radius:0 var(--radio) var(--radio) 0;margin:26px 0;
  font-size:17px;line-height:1.6;color:var(--tx-soft);
}
.aviso > strong:first-child{display:block;margin-bottom:6px;font-family:var(--f-sans);font-size:15px}

/* ============================================================
   Equipo
   ============================================================ */
.equipo{display:grid;gap:0;border:1px solid var(--line-soft);border-radius:var(--radio);overflow:hidden;background:var(--paper);box-shadow:var(--sombra)}
@media (min-width:760px){.equipo{grid-template-columns:1fr 1fr}}
.persona{display:flex;gap:17px;padding:24px;min-width:0;align-items:flex-start;border-bottom:1px solid var(--line)}
@media (min-width:760px){
  .persona{border-bottom:none;border-right:1px solid var(--line)}
  .persona:last-child{border-right:none}
}
.persona:last-child{border-bottom:none}
@media (max-width:380px){.persona{padding:19px 15px;gap:13px}}
.retrato{flex:none;width:78px;aspect-ratio:3/4;border-radius:12px;overflow:hidden;background:var(--ink-800);position:relative}
.retrato img{width:100%;height:100%;object-fit:cover;display:block}
.persona-cuerpo{min-width:0}
.persona .papel{
  font-family:var(--f-sans);font-size:11.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tan-deep);margin-bottom:7px;
}
/* FREC 61J2-10.025: el nombre de la firma manda; el de la
   persona NUNCA puede verse mas grande. Por eso la firma es el
   h4 y la persona va en .quien, mas chica. No lo inviertas. */
.persona h4{margin:0 0 5px;font-size:18px;font-weight:600}
.persona .quien{font-family:var(--f-sans);font-size:14px;color:var(--tx-soft);margin:0 0 9px;line-height:1.5}
.persona .lic{font-family:var(--f-sans);font-size:12px;color:var(--tx-faint);display:block;margin-top:3px}
.persona p:last-child{font-size:15.5px;color:var(--tx-soft);margin:0;font-family:var(--f-sans);line-height:1.5}

/* ============================================================
   Pie legal
   ============================================================ */
.pie{background:var(--ink-950);color:var(--dk-faint);padding-block:44px 34px;font-family:var(--f-sans);font-size:13.5px;line-height:1.62}
.pie strong{color:var(--dk-soft)}
.pie a{color:var(--tan)}
.pie-firmas{display:grid;gap:20px;padding-bottom:26px;border-bottom:1px solid rgba(203,167,126,.18);margin-bottom:26px}
@media (min-width:700px){.pie-firmas{grid-template-columns:1fr 1fr}}
.pie-firma strong{display:block;font-size:15px;margin-bottom:4px}
.pie-firma span{display:block;font-size:12.5px;color:var(--dk-faint)}
.pie-legal p{margin:0 0 13px;font-size:13px;color:var(--dk-faint)}
.pie-abajo{display:flex;gap:15px;align-items:flex-start;padding-top:22px;border-top:1px solid rgba(203,167,126,.18);margin-top:22px}
.pie-abajo svg{flex:none;color:var(--dk-soft)}
.pie-nota{margin-top:16px;font-size:12.5px;color:#8f8a81}

/* ============================================================
   Accesibilidad y telefono
   ------------------------------------------------------------
   Nada por debajo de 11px. Zonas de toque de 44px (la vieja iba
   a 36 y ya costaba acertarle con el pulgar).
   ============================================================ */
.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;
}
.salta-al-contenido{
  position:absolute;left:-9999px;top:0;background:var(--ink-900);color:#fff;
  padding:12px 20px;z-index:99;border-radius:0 0 var(--radio) 0;
  font-family:var(--f-sans);font-size:15px;font-weight:600;
}
.salta-al-contenido:focus{left:0;color:#fff}

@media (max-width:560px){
  .wrap,.wrap-ancho{padding-inline:18px}
  .no-item{padding:15px 16px}
  .plato{padding:19px 18px}
  .si-item{padding:18px 18px}
  .boton{width:100%;padding-inline:20px}
}

/* ============================================================
   ENTREGABLE 2 — la calculadora
   ============================================================ */

.portada-corta{padding-block:clamp(40px,7vw,64px) clamp(44px,7vw,72px)}
.portada-corta h1{font-family:var(--f-display);font-weight:600}

/* Selector de zona: alto de toque real y flecha propia */
.selector{
  width:100%;min-height:56px;padding:14px 46px 14px 17px;
  border:1px solid var(--line-strong);border-radius:12px;
  background:var(--paper);color:var(--tx);
  font-family:var(--f-sans);font-size:17px;font-weight:600;
  -webkit-appearance:none;appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
}

.pista{
  font-family:var(--f-sans);font-size:14.5px;line-height:1.5;
  color:var(--tx-faint);margin:11px 0 0;
}
.sello{font-family:var(--f-sans);font-size:13px;color:var(--tx-faint);margin-top:22px;line-height:1.5}

/* ---------- El plan ---------- */
.plan{margin-top:30px}
.plan.apagado{opacity:.62}
.plan-titulo{
  font-family:var(--f-sans);font-size:15px;font-weight:600;
  color:var(--tx-faint);margin:0 0 8px;
}
.plan-casas{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(28px,5.6vw,42px);line-height:1.15;letter-spacing:-.01em;
  color:var(--tx);margin-bottom:9px;
}
.plan-sub{font-family:var(--f-sans);font-size:16px;color:var(--tx-soft);margin:0}

.aviso-alerta{border-left-color:var(--no);background:var(--no-bg)}
.aviso-alerta > strong:first-child{color:var(--no)}

/* Filas con peso distinto dentro de la cuenta */
.cuenta tr.fuerte td{font-weight:700;font-size:17px}
.cuenta tr.fuerte td:last-child{font-size:19px;font-weight:700}
.cuenta tr.desglose td{
  font-size:14.5px;color:var(--tx-faint);border-bottom:none;
  padding-top:5px;padding-bottom:5px;padding-left:22px;position:relative;
}
.cuenta tr.desglose td:first-child::before{content:"↳";position:absolute;left:2px;opacity:.55}
.cuenta tr.desglose td:last-child{font-size:14.5px}
.cuenta td.bien{color:var(--ok)}
.cuenta td.mal{color:var(--no)}

/* ---------- Botoneras: años y casas ---------- */
.anios,.opciones{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.op,.po{
  min-height:46px;padding:11px 17px;border-radius:99px;
  border:1px solid var(--line-strong);background:var(--paper);color:var(--tx);
  font-family:var(--f-sans);font-size:15px;font-weight:600;
  cursor:pointer;line-height:1.2;transition:background .12s ease,border-color .12s ease;
}
.op:hover,.po:hover{border-color:var(--tan)}
.op.on,.po.on{background:var(--ink-900);border-color:var(--ink-900);color:#fff}
/* En telefono los años se reparten el ancho y "La que mas rinda"
   —la opcion mas larga— se lleva una fila entera. */
@media (max-width:560px){
  .anios .op{flex:1;padding-inline:8px}
  .opciones{display:grid;grid-template-columns:1fr 1fr}
  .opciones .po:first-child{grid-column:1 / -1}
}

/* ---------- Cajones que se abren ---------- */
.cajon{
  border:1px solid var(--line-soft);border-radius:var(--radio);box-shadow:var(--sombra);
  background:var(--paper);margin-top:13px;overflow:hidden;
}
.cajon summary{
  padding:17px 20px;cursor:pointer;list-style:none;min-height:56px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-family:var(--f-sans);font-size:16px;font-weight:600;color:var(--tx);
}
.cajon summary::-webkit-details-marker{display:none}
.cajon summary::after{content:"+";font-size:22px;font-weight:400;color:var(--tan-deep);line-height:1}
.cajon[open] summary::after{content:"−"}
.cajon[open] summary{border-bottom:1px solid var(--line)}
.cajon-cuerpo{padding:20px}

/* ---------- La barra de inicial ---------- */
.down-fila{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:16px}
.down-val{
  font-family:var(--f-sans);font-variant-numeric:tabular-nums;
  font-size:30px;font-weight:700;color:var(--tx);line-height:1;
}
.down-et{
  font-family:var(--f-sans);font-size:13.5px;font-weight:600;
  color:var(--ok);background:var(--ok-bg);border:1px solid var(--ok-line);
  padding:4px 11px;border-radius:99px;
}
.down-et.no-va{color:var(--no);background:var(--no-bg);border-color:var(--no)}
/* El tramo verde: sin esto el usuario mueve la barra, el panel se
   apaga y parece que el control esta roto. */
.pista-riel{position:relative;height:5px;margin:15px 0 -13px;border-radius:99px;background:var(--line)}
.riel-ok{position:absolute;top:0;height:100%;border-radius:99px;background:var(--ok);display:block}

/* ---------- Campos avanzados ---------- */
.campos{display:grid;gap:12px;margin-top:16px}
@media (min-width:560px){.campos{grid-template-columns:1fr 1fr}}
.campos label{
  display:flex;flex-direction:column;gap:5px;
  font-family:var(--f-sans);font-size:14px;font-weight:600;color:var(--tx-soft);
}
.campos .ud{color:var(--tx-faint);font-weight:400}
.campos input{
  min-height:48px;padding:11px 13px;border:1px solid var(--line-strong);border-radius:10px;
  background:var(--paper);color:var(--tx);
  font-family:var(--f-sans);font-size:16px;font-variant-numeric:tabular-nums;
}

/* ---------- Tabla de zonas ---------- */
.tabla-desliza{overflow-x:auto;margin-top:26px;-webkit-overflow-scrolling:touch}
/* La tabla va en una tarjeta blanca, como la comparacion de la landing */
.tabla-desliza{background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--radio);box-shadow:var(--sombra);padding:6px 12px}
.zonas{border-collapse:collapse;font-family:var(--f-sans);font-size:15px;min-width:620px;width:100%}
.zonas th,.zonas td{padding:13px 14px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
.zonas th{
  font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--tx-faint);border-bottom:2px solid var(--line-strong);
}
.zonas td.n,.zonas th.n{
  text-align:right;
  font-family:var(--f-sans);font-variant-numeric:tabular-nums;
}
.zonas th.n{font-family:var(--f-sans)}
.zonas tr.esta td{background:var(--celda);font-weight:600}
.sello-si,.sello-justo,.sello-no{
  display:inline-block;padding:3px 11px;border-radius:99px;
  font-size:13px;font-weight:700;
}
.sello-si{color:var(--ok);background:var(--ok-bg);border:1px solid var(--ok-line)}
.sello-justo{color:var(--tan-deep);background:var(--paper-3);border:1px solid var(--line-strong)}
.sello-no{color:var(--no);background:var(--no-bg);border:1px solid var(--no)}

/* ---------- Angela, arriba de todo ----------
   Es su iman: la cara va antes que el argumento, no despues.
   FREC 61J2-10.025: el nombre de la firma manda y el de la
   persona nunca puede verse mas grande. Por eso la firma es
   <strong> a 17px y ella va en <span> a 14. No lo inviertas. */
.firma-card{
  display:flex;align-items:center;gap:18px;
  margin:0 0 34px;
}
.firma-foto{
  flex:none;width:88px;aspect-ratio:1;border-radius:50%;overflow:hidden;
  background:var(--ink-800);border:2px solid var(--tan);box-shadow:0 12px 30px rgba(0,0,0,.45);
}
.firma-foto img{width:100%;height:100%;object-fit:cover;object-position:center 20%;display:block}
.firma-txt{min-width:0;font-family:var(--f-sans);line-height:1.45}
.firma-txt strong{display:block;font-size:17px;font-weight:700;color:#fff;letter-spacing:-.01em}
.firma-txt span{display:block;font-size:14px;color:var(--dk-body)}
.firma-txt .firma-lic{font-family:var(--f-sans);font-size:12px;color:var(--dk-faint);margin-top:3px;font-variant-numeric:tabular-nums}
@media (min-width:760px){
  .firma-foto{width:112px}
  .firma-card{gap:22px;margin-bottom:42px}
  .firma-txt strong{font-size:19px}
  .firma-txt span{font-size:15px}
}
@media (max-width:380px){
  .firma-card{gap:13px;margin-bottom:26px}
  .firma-foto{width:70px}
  .firma-txt strong{font-size:15.5px}
  .firma-txt span{font-size:13px}
}

/* Divulgacion de los supuestos de un ejemplo.
   Fla. Stat. 494.00165: si se enseña un pago de prestamo hay que decir
   de que prestamo sale y que la tasa puede cambiar. Simon no puede
   publicar una cifra sin esto — y el lector tampoco entiende un numero
   si no sabe de que casa se habla. */
.nota-fuente{
  margin-top:20px;padding:16px 18px;border-radius:var(--radio);
  background:var(--paper-3);border:1px solid var(--line);
  font-family:var(--f-sans);font-size:13.5px;line-height:1.62;color:var(--tx-soft);
}
.nota-fuente strong{color:var(--tx)}
.nota-fuente a{color:var(--tan-deep)}

/* ============================================================
   ENTREGABLE 3 — de la oferta a las llaves
   ============================================================ */

/* ---------- Los pasos del proceso ---------- */
.pasos{list-style:none;margin:30px 0 0;padding:0;counter-reset:paso}
.pasos > li{display:flex;gap:17px;padding:22px 0;border-top:1px solid var(--line)}
.pasos > li:first-child{border-top:none;padding-top:0}
.paso-n{
  flex:none;width:38px;height:38px;border-radius:50%;
  background:var(--ink-900);color:#fff;display:grid;place-items:center;
  font-family:var(--f-sans);font-size:15px;font-weight:600;line-height:1;
}
.pasos h4{margin:0 0 7px;font-size:19px;font-weight:600;display:flex;flex-wrap:wrap;align-items:baseline;gap:10px}
.paso-t{
  font-family:var(--f-sans);font-size:12px;font-weight:600;letter-spacing:.02em;
  color:var(--tan-deep);background:var(--paper-3);border:1px solid var(--line);
  padding:3px 9px;border-radius:99px;white-space:nowrap;
}
.pasos p{font-size:16.5px;color:var(--tx-soft);margin:0 0 8px}
.pasos p:last-child{margin-bottom:0}
.pasos > li > div{min-width:0}
@media (max-width:380px){.pasos > li{gap:13px}.paso-n{width:32px;height:32px;font-size:14px}}

/* ---------- Los siete errores ---------- */
.errores{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.errores > li{
  display:flex;gap:15px;align-items:flex-start;
  background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--radio);
  padding:18px 20px;box-shadow:var(--sombra);
}
.err-n{
  flex:none;width:30px;height:30px;border-radius:50%;
  background:var(--no-bg);color:var(--no);display:grid;place-items:center;
  font-family:var(--f-sans);font-size:14px;font-weight:600;line-height:1;
}
.errores h4{margin:0 0 4px;font-size:17px;font-weight:600}
.errores p{font-family:var(--f-sans);font-size:15px;color:var(--tx-soft);margin:0;line-height:1.5}
.errores > li > div{min-width:0}

/* ---------- La lista de control ----------
   Se marca con una casa concreta enfrente. Toda la fila es
   zona de toque, no solo la casilla. */
.lista-control{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:9px}
.lista-control li{
  background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--radio);
  overflow:hidden;transition:border-color .12s ease;box-shadow:var(--sombra);
}
.lista-control label{
  display:flex;gap:14px;align-items:flex-start;
  padding:16px 18px;cursor:pointer;min-height:44px;
}
.lista-control input[type="checkbox"]{
  flex:none;width:24px;height:24px;margin:1px 0 0;cursor:pointer;
  accent-color:var(--ok);
}
.lista-control span{
  font-family:var(--f-sans);font-size:15.5px;line-height:1.52;color:var(--tx-soft);
}
.lista-control span strong{color:var(--tx)}
.lista-control li:has(input:checked){border-color:var(--ok-line);background:var(--ok-bg)}
.lista-control li:has(input:checked) span{color:var(--tx-soft)}

.marcador{
  font-family:var(--f-sans);font-size:15px;font-weight:600;
  margin:18px 0 0;padding:11px 16px;border-radius:99px;display:inline-block;
}
.marcador.bien{color:var(--ok);background:var(--ok-bg);border:1px solid var(--ok-line)}
.marcador.mal{color:var(--no);background:var(--no-bg);border:1px solid var(--no)}
.marcador{color:var(--tx-faint);background:var(--paper-3);border:1px solid var(--line)}

/* ---------- La ruta de tres partes ----------
   Va en las tres paginas. Sin esto el recorrido era de una sola
   direccion: se podia avanzar pero no volver al principio. */
.masthead .marca{text-decoration:none;display:inline-block}
.masthead .marca:hover{color:#fff}
.ruta{border-top:1px solid rgba(255,255,255,.12);margin-top:13px}
.ruta .wrap-ancho{display:flex;gap:0}
.ruta a{
  flex:1;min-height:48px;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 6px;text-decoration:none;
  font-family:var(--f-sans);font-size:14px;font-weight:600;
  color:#8b8681;border-bottom:2px solid transparent;
  transition:color .12s ease,border-color .12s ease;
}
.ruta a:hover{color:#cfc7bd}
.ruta a.aqui{color:#fff;border-bottom-color:var(--tan)}
.ruta-n{
  font-family:var(--f-sans);font-size:11.5px;
  width:20px;height:20px;border-radius:50%;flex:none;
  display:grid;place-items:center;
  background:rgba(255,255,255,.1);color:#a8a29c;
}
.ruta a.aqui .ruta-n{background:var(--tan);color:var(--ink-950)}
@media (max-width:400px){
  .ruta a{font-size:13px;gap:6px;padding-inline:2px}
  .ruta .wrap-ancho{padding-inline:8px}
}

/* El nombre del producto, donde se pasa de lo gratis a lo pagado.
   No va en la cabecera: ahi manda el dominio, que es lo que la gente
   teclea. Aqui manda el nombre de lo que se lleva. */
.producto{
  margin-top:34px;padding-top:26px;border-top:1px solid var(--line);
  font-family:var(--f-sans);
}
.producto strong{
  display:block;font-size:17px;font-weight:700;color:var(--tx);letter-spacing:-.01em;
}
.producto span{
  display:block;font-size:15px;color:var(--tx-faint);margin-top:5px;
}

/* Defensas contra recortes.
   La pagina no desbordaba en ninguna prueba (320 a 3000px, con y sin
   las fuentes de Google, con zoom de 100% a 250%), pero Simon la vio
   cortada en un visor que arma el diseño a un ancho y lo muestra a
   otro. Estas tres reglas hacen que, pase lo que pase, el contenido
   se encoja o parta en vez de salirse. */
.ruta a{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.firma-txt span,.firma-txt strong{overflow-wrap:anywhere}
.masthead .wrap-ancho{min-width:0}

/* El nombre completo del producto en la cabecera.
   "INVERSIONISTA EN FLORIDA" se queda como la parte grande porque es
   el dominio, que es lo que la gente teclea para volver. "El Manual
   del" va encima, mas chico, para que el nombre completo se lea de
   corrido sin robarle peso al que hay que recordar. */
.marca-eyebrow{
  display:block;
  font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tan);margin-bottom:2px;
}
.masthead .marca{line-height:1.15}
@media (max-width:400px){
  .marca-eyebrow{font-size:11px;letter-spacing:.1em}
  .marca{font-size:14px}
}

/* ---------- Fuente corta + desplegable ----------
   Simon, 21/09/2026: el recuadro "De donde sale cada numero" eran 195
   palabras de corrido a 13.5px. Ahora a la vista queda solo lo que
   exige la ley (es un ejemplo, la tasa puede cambiar) y el desglose va
   en un desplegable, como una cuenta con las cifras alineadas — igual
   que las tarjetas de arriba — en vez de un parrafo. */
.fuente-corta{
  margin-top:24px;font-family:var(--f-sans);
  font-size:16px;line-height:1.55;color:var(--tx-soft);
}
.fuente-corta > p{margin:0}
.fuente-corta > p strong{color:var(--tx)}
.desglose-fuente{
  margin-top:14px;border:1px solid var(--line-soft);border-radius:var(--radio);background:var(--paper);box-shadow:var(--sombra);
}
.desglose-fuente summary{
  min-height:52px;padding:14px 20px;cursor:pointer;list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-weight:600;font-size:16px;color:var(--tx);
}
.desglose-fuente summary::-webkit-details-marker{display:none}
.desglose-fuente summary::after{content:"+";font-size:22px;font-weight:400;color:var(--tan-deep);line-height:1}
.desglose-fuente[open] summary::after{content:"−"}
.desglose-fuente[open] summary{border-bottom:1px solid var(--line)}
.desglose-cuerpo{padding:4px 20px 22px}
.cuenta-fuente{margin-top:6px}
.desglose-notas{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:14px;font-size:15.5px;line-height:1.55}
.desglose-notas li{padding-left:14px;border-left:3px solid var(--line-strong)}
.desglose-notas strong{color:var(--tx)}
.desglose-notas a{color:var(--tan-deep)}
@media (max-width:390px){.desglose-cuerpo{padding:4px 14px 18px}.desglose-fuente summary{padding-inline:14px}}

/* ---------- Recuadro en filas ----------
   Para avisos con varias ideas: una fila por pregunta, en vez de un
   parrafo. Nacio con la caja de la reserva (21/09/2026), que eran 120
   palabras con cinco ideas distintas mezcladas. */
.aviso-lista{margin:16px 0 0;display:grid;gap:0}
.aviso-lista > div{
  display:grid;grid-template-columns:140px 1fr;gap:16px;align-items:baseline;
  padding:12px 0;border-top:1px solid var(--line);
}
.aviso-lista > div:first-child{border-top:none;padding-top:4px}
.aviso-lista > div:last-child{padding-bottom:0}
.aviso-lista dt{
  font-family:var(--f-sans);font-size:12px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--tan-deep);
}
.aviso-lista dd{margin:0;line-height:1.5}
@media (max-width:560px){
  .aviso-lista > div{grid-template-columns:1fr;gap:3px}
}

/* ---------- Glosario y ayudas de campo ----------
   Simon, 21/09/2026: los terminos que no se entienden en
   Latinoamerica (HOA, CDD, FIRPTA, compañia de titulo...) se
   explican la primera vez que aparecen en cada pagina, y ademas van
   todos juntos en el glosario de la parte 3. */
.glosario{margin:30px 0 0;display:grid;gap:0}
.glosario > div{
  display:grid;grid-template-columns:200px 1fr;gap:20px;align-items:baseline;
  padding:16px 0;border-top:1px solid var(--line);
}
.glosario > div:first-child{border-top:none}
.glosario dt{font-family:var(--f-display);font-size:18px;font-weight:600;color:var(--tx)}
.glosario dd{margin:0;font-family:var(--f-sans);font-size:16px;line-height:1.55;color:var(--tx-soft)}
@media (max-width:560px){.glosario > div{grid-template-columns:1fr;gap:4px}}

.campos .campo-ayuda{
  font-weight:400;font-size:13px;line-height:1.4;color:var(--tx-faint);margin-top:-2px;
}