/* ═══════════════════════════════════════════════════════════════════
   MODIUM AEDIS · el sistema visual del sitio

   Sale tal cual de la página de lanzamiento, que es donde nació. Vive
   aparte para que las páginas nuevas no lo dupliquen y para que el
   navegador lo descargue UNA vez y lo reuse en todas — ir de la página
   de ventas a la de precios ya no vuelve a bajar 17 KB de estilos.

   Identidad de modium.com.co: Anton en versales, Jost, el azul #1D28F2
   y el verde ácido #CCFF00. El claro MANDA; el oscuro solo si el
   visitante lo pide con el botón, y su elección se recuerda.
   ═══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
     MODIUM AEDIS · página de lanzamiento
     Identidad de modium.com.co: Anton en versales, Jost, el azul
     #1D28F2, el verde ácido #CCFF00 y el cursor en cruz. (La web
     usa komu-new-d y futura-100-book de Typekit; Anton y Jost son
     la reserva que la propia web declara.)

     Lo que se le añade: una gramática para mostrar producto y cifras
     —que una página de software necesita y un sitio corporativo no— y
     un tema oscuro, que la web no tiene.

     El claro MANDA: es la identidad de Modium y así se ve la marca.
     El oscuro no se activa por la preferencia del sistema, solo si el
     visitante lo pide con el botón; su elección se recuerda.
     ───────────────────────────────────────────────────────────── */

  :root {
    --fondo:   #F4F4F5;
    --panel:   #FFFFFF;
    --tinta:   #0A0A0A;
    --tinta-2: #55565A;
    --tinta-3: #8A8B90;
    --azul:    #1D28F2;
    --lima:    #CCFF00;
    --linea:   #DDDDE0;
    --marco:   #E4E4E7;
    --sobre-azul: #F4F4F5;
    --sobre-lima: #0A0A0A;

    /* El resalte de la opcion recomendada: un azul lavado que marca la
       columna sin taparle el contraste a los «Si», que van en azul pleno. */
    --reco-fondo: #EDEEFE;
    --reco-linea: #C3C7FB;

    /* Las de la marca primero; Anton y Jost son la reserva que declara
       modium.com.co, no la eleccion. */
    --display: "komu-new-d", "Anton", "Arial Narrow", Impact, sans-serif;
    --texto: "futura-100-book", "Jost", "Futura", "Century Gothic", system-ui, sans-serif;

    /* Tonos de sección. La inversión en tema claro es negra; en oscuro no
       puede ser blanca —cegaría— así que es un panel elevado. */
    --fuerte-fondo: #0A0A0A;
    --fuerte-tinta: #F4F4F5;
    --fuerte-tinta-2: #A8A9AE;
    --fuerte-tinta-3: #7A7B82;
    --fuerte-linea: #2A2A32;
  }

  :root[data-tema="oscuro"] {
    --fondo:   #0A0A0A;
    --panel:   #131316;
    --tinta:   #F4F4F5;
    --tinta-2: #A3A4A9;
    --tinta-3: #6E6F76;
    --azul:    #5C66FF;
    --lima:    #CCFF00;
    --linea:   #26262C;
    --marco:   #1D1D22;
    --sobre-azul: #FFFFFF;
    --sobre-lima: #0A0A0A;
    --reco-fondo: #171A33;
    --reco-linea: #2F3468;
    --fuerte-fondo: #1C1C24;
    --fuerte-tinta: #F4F4F5;
    --fuerte-tinta-2: #A8A9AE;
    --fuerte-tinta-3: #7A7B82;
    --fuerte-linea: #33333D;
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }

  body {
    margin: 0;
    background: var(--fondo);
    color: var(--tinta);
    font-family: var(--texto);
    font-weight: 300;
    font-size: 17px;
    line-height: 1.55;
    cursor: crosshair;
    -webkit-font-smoothing: antialiased;
  }
  ::selection { background: var(--azul); color: var(--sobre-azul); }
  a { color: var(--azul); text-decoration: none; }
  a:hover { color: var(--tinta); }
  a:focus-visible, button:focus-visible { outline: 3px solid var(--lima); outline-offset: 3px; }
  img { max-width: 100%; display: block; }

  /* El `.marco` centra y limita el CONTENIDO; la sección queda a lo ancho de
     la pantalla para que su color llegue al borde. Antes iba al revés y los
     bloques de color quedaban flotando con blanco a los lados. */
  .marco { max-width: 1500px; margin: 0 auto; padding: 0 clamp(1.4rem, 6vw, 7rem); }

  /* ── tipografía ── */
  .titular {
    font-family: var(--display); text-transform: uppercase; font-weight: 400;
    letter-spacing: .02em; line-height: .94; margin: 0; text-wrap: balance;
  }
  /* La escala de modium.com.co, que no es una: son CUATRO niveles que se
     alternan. Un solo tamaño para todos los títulos hace que todo grite
     igual, y entonces nada lleva a nada.

     La INTERLÍNEA sí se midió aquí y no se copió: la web usa .84 con
     komu-new-d, pero la versal de Anton mide .87em, así que con .84 la tinta
     de una línea se mete en la de la siguiente. .94 conserva el aire cerrado
     y monumental sin que se toquen. */
  h1.titular { font-size: clamp(3.4rem, 11vw, 13rem); max-width: 22ch; }
  h2.titular { font-size: clamp(2.4rem, 5.4vw, 5.4rem); max-width: 24ch; }
  /* Los modificadores van cualificados con `.titular` a propósito: si fueran
     una sola clase, `h2.titular` —que lleva elemento MÁS clase— les ganaría,
     y el título quedaría del tamaño de siempre sin que nada avisara. */
  .titular.titular--mayor { font-size: clamp(2.6rem, 6vw, 6rem); }
  .titular.titular--menor { font-size: clamp(1.8rem, 3.4vw, 3.4rem); line-height: .98; max-width: 26ch; }
  h3 {
    font-family: var(--display); text-transform: uppercase; font-weight: 400;
    letter-spacing: .03em; line-height: 1; margin: 0;
    font-size: clamp(1.2rem, 1.8vw, 1.55rem);
  }
  .azul { color: var(--azul); }

  .rotulo {
    font-weight: 500; font-size: clamp(.72rem, 1.2vw, .85rem);
    letter-spacing: .18em; text-transform: uppercase; color: var(--tinta-3); margin: 0;
  }
  .capitulo { font-weight: 500; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3); }
  .capitulo b { color: var(--azul); font-weight: 500; }

  p { margin: 0; }
  .parrafo { font-size: clamp(1.05rem, 1.35vw, 1.3rem); line-height: 1.5; color: var(--tinta-2); max-width: 44ch; }
  .menudo { font-size: .85rem; color: var(--tinta-3); letter-spacing: .02em; }
  .cifras { font-variant-numeric: tabular-nums; }

  section { padding: clamp(4.5rem, 10vh, 8.5rem) 0; border-top: 1px solid var(--linea); }

  /* ── el ritmo de color ──
     La página no avanza en línea recta: respira en papel, se apoya en blanco
     y da dos golpes — negro en el pivote (el relevo) y azul en el cierre.
     Cada tono redefine los tokens, así que lo de dentro se adapta solo. */
  .tono-b { background: var(--panel); }
  /* Sobre blanco, las tarjetas pasan a papel para que se distingan. Se
     EXCLUYE el plan destacado: sin el `:not`, este selector —dos clases— le
     gana a `.plan--destacado` —una— y le arranca el azul, dejando su texto
     blanco sobre blanco. Es la misma colisión que ya mordió a los titulares. */
  .tono-b .casilla,
  .tono-b .plan:not(.plan--destacado),
  .tono-b .pregunta,
  .tono-b .prueba { background: var(--fondo); }

  .tono-fuerte {
    background: var(--fuerte-fondo);
    --tinta: var(--fuerte-tinta);
    --tinta-2: var(--fuerte-tinta-2);
    --tinta-3: var(--fuerte-tinta-3);
    --linea: var(--fuerte-linea);
    --panel: var(--fuerte-fondo);
    color: var(--tinta);
    border-top: none;
  }
  .tono-fuerte .capitulo b { color: var(--lima); }

  .tono-azul {
    background: var(--azul);
    --tinta: #FFFFFF;
    --tinta-2: rgba(255, 255, 255, .84);
    --tinta-3: rgba(255, 255, 255, .62);
    --linea: rgba(255, 255, 255, .26);
    --fondo: var(--azul);
    color: var(--tinta);
    border-top: none;
  }
  .tono-azul .capitulo b { color: var(--lima); }
  .tono-azul .boton--linea { color: #FFFFFF; border-color: rgba(255, 255, 255, .55); }
  .tono-azul .boton--linea:hover { background: #FFFFFF; color: var(--azul); }
  .cabecera { display: flex; flex-direction: column; gap: clamp(1rem, 2vh, 1.5rem); margin-bottom: clamp(2.4rem, 5vh, 4rem); }

  /* ── botones ── */
  .boton {
    display: inline-flex; align-items: center; gap: .7rem;
    font-weight: 500; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase;
    padding: 1.15rem 2rem; border: 1px solid transparent; border-radius: 0;
    text-decoration: none; cursor: crosshair;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
  }
  .boton--lima { background: var(--lima); color: var(--sobre-lima); }
  .boton--lima:hover { background: var(--azul); color: var(--sobre-azul); }
  .boton--linea { background: transparent; color: var(--tinta); border-color: var(--tinta); }
  .boton--linea:hover { background: var(--tinta); color: var(--fondo); }

  /* ── portada ── */
  .portada { border-top: none; padding-top: clamp(2.5rem, 6vh, 4.5rem); padding-bottom: 0; }
  .encabezado { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; padding: 1.6rem 0; }
  .firma { display: flex; align-items: center; gap: .8rem; }
  .firma svg { width: 30px; height: 30px; display: block; }
  .firma .nombre { font-family: var(--display); text-transform: uppercase; font-size: 1.5rem; letter-spacing: .04em; line-height: 1; }
  .firma .sobre { font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-3); font-weight: 500; }
  .encabezado-fin { display: flex; align-items: center; gap: .7rem; }
  .tema {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; flex: none;
    background: transparent; color: var(--tinta);
    border: 1px solid var(--tinta); border-radius: 0;
    cursor: crosshair; padding: 0;
    transition: background .18s ease, color .18s ease;
  }
  .tema:hover { background: var(--tinta); color: var(--fondo); }
  .tema svg { width: 18px; height: 18px; display: block; }
  .tema .luna { display: none; }
  :root[data-tema="oscuro"] .tema .sol { display: none; }
  :root[data-tema="oscuro"] .tema .luna { display: block; }
  .remate { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 2.4rem; margin-top: clamp(2rem, 4vh, 3rem); }
  .acciones { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }

  /* ── el producto: marco duro, sin esquinas redondas ── */
  .vitrina { margin-top: clamp(2.8rem, 6vh, 4.5rem); }
  .pantalla { border: 1px solid var(--linea); background: var(--marco); }
  .pantalla-barra {
    display: flex; align-items: center; gap: .55rem;
    padding: .7rem 1rem; border-bottom: 1px solid var(--linea);
  }
  .pantalla-barra i { width: 9px; height: 9px; border-radius: 50%; background: var(--tinta-3); opacity: .45; display: block; }
  .pantalla-barra span { margin-left: .5rem; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-3); font-weight: 500; }
  .pantalla img { width: 100%; }
  /* `height: auto` es obligatorio aquí: el <video> trae `width` Y `height`
     como atributos HTML (para que el navegador reserve el espacio antes de
     cargar nada), y en cuanto el CSS fija SOLO el ancho al 100%, el alto de
     1080 del atributo se queda fijo en píxeles y estira el video vertical. */
  .pantalla video { width: 100%; height: auto; display: block; }
  .epigrafe { margin-top: .9rem; font-size: .78rem; color: var(--tinta-3); letter-spacing: .04em; }

  /* ── el relevo: tres verbos que se turnan el trabajo ── */
  .relevo { display: flex; flex-direction: column; }
  .turno { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(1.2rem, 4vw, 4rem); align-items: baseline; padding: clamp(2rem, 4.5vh, 3.2rem) 0; border-top: 1px solid var(--linea); }
  .turno:first-child { border-top: none; padding-top: 0; }
  .turno-dice { display: flex; flex-direction: column; gap: .7rem; }
  .turno-dice p { font-size: clamp(1rem, 1.25vw, 1.2rem); color: var(--tinta-2); max-width: 40ch; }
  .turno-dice .antes { color: var(--tinta-3); font-size: .92rem; }
  @media (max-width: 700px) { .turno { grid-template-columns: 1fr; gap: .9rem; align-items: start; } }

  /* ── recorrido: texto y captura alternados ── */
  .paso { display: grid; gap: clamp(1.8rem, 4vw, 4rem); align-items: center; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
  .paso + .paso { margin-top: clamp(3.5rem, 8vh, 6rem); padding-top: clamp(3.5rem, 8vh, 6rem); border-top: 1px solid var(--linea); }
  .paso-texto { display: flex; flex-direction: column; gap: 1rem; }
  .paso--invertido .paso-arte { order: -1; }
  @media (max-width: 760px) { .paso--invertido .paso-arte { order: 0; } }

  /* ── rejillas bento ── */
  .rejilla { display: grid; gap: 1px; background: var(--linea); border: 1px solid var(--linea); }
  .g2 { grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); }
  .g3 { grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
  .casilla { background: var(--panel); padding: clamp(1.7rem, 3vw, 2.4rem); display: flex; flex-direction: column; gap: .8rem; }
  .casilla p { font-size: .95rem; color: var(--tinta-2); }
  .casilla .rotulo { color: var(--azul); font-size: .66rem; }

  /* ── la prueba: mora mes por mes ── */
  .prueba { background: var(--panel); border: 1px solid var(--linea); }
  .prueba-cabeza { padding: 1.5rem clamp(1.2rem, 3vw, 2.2rem); border-bottom: 1px solid var(--linea); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: baseline; }
  .tabla-envoltura { overflow-x: auto; }
  table { width: 100%; border-collapse: collapse; min-width: 520px; }
  th {
    font-weight: 500; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--tinta-3); text-align: left; padding: 1rem clamp(1.2rem, 3vw, 2.2rem);
    border-bottom: 1px solid var(--linea); white-space: nowrap;
  }
  td { padding: 1rem clamp(1.2rem, 3vw, 2.2rem); border-bottom: 1px solid var(--linea); font-size: .95rem; }
  th.der, td.der { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
  tr.suma td { background: var(--lima); color: var(--sobre-lima); font-weight: 500; border-bottom: none; }
  tr.suma td.grande { font-family: var(--display); font-size: 1.5rem; letter-spacing: .02em; }
  .prueba-pie { padding: 1.3rem clamp(1.2rem, 3vw, 2.2rem); border-top: 1px solid var(--linea); }

  /* ── la ley ── */
  .normas { display: grid; gap: clamp(1.8rem, 4vw, 3rem); grid-template-columns: repeat(auto-fit, minmax(275px, 1fr)); }
  .norma { display: flex; flex-direction: column; gap: .7rem; border-top: 3px solid var(--azul); padding-top: 1.2rem; }
  .norma .fuente { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); font-weight: 500; }
  .norma p { font-size: .93rem; color: var(--tinta-2); }

  /* ── precio ── */
  .planes { display: grid; gap: 1px; background: var(--linea); border: 1px solid var(--linea); grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
  .plan { background: var(--panel); padding: clamp(1.8rem, 3vw, 2.4rem); display: flex; flex-direction: column; gap: 1.3rem; }
  .plan--destacado { background: var(--azul); color: var(--sobre-azul); }
  .plan--destacado .rotulo, .plan--destacado li, .plan--destacado .valor small { color: rgba(255, 255, 255, .8); }
  .plan--destacado .tick { color: var(--lima); }
  .valor { font-family: var(--display); font-size: clamp(2.3rem, 3.6vw, 3.2rem); line-height: .9; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
  .valor small { font-family: var(--texto); font-size: .75rem; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); display: block; margin-top: .5rem; }
  .plan ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; font-size: .9rem; color: var(--tinta-2); }
  /* Sangría francesa y no `flex`: con flex, un <b> dentro de la viñeta se
     volvía su PROPIA columna («Marca / propia» a un lado y «: su logo…» al
     otro). Sacando la flecha del flujo, el renglón vuelve a ser un párrafo. */
  .plan li { position: relative; padding-left: 1.35rem; }
  .tick { position: absolute; left: 0; top: 0; color: var(--azul); font-weight: 600; }
  /* El NOMBRE del plan, encima del cupo. Desde que la escalera reparte
     funciones y no solo cupos, «Hasta 10 inmuebles» dejó de ser el nombre:
     lo que se compra es «Completo», y el cupo es una de sus caracteristicas. */
  .nombre-plan {
    font-family: var(--display); text-transform: uppercase; font-weight: 400;
    font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1; letter-spacing: .02em;
    margin: 0 0 .5rem;
  }
  .plan .anual { margin-top: -.4rem; margin-bottom: .2rem; opacity: .85; }
  .plan .boton { margin-top: auto; justify-content: center; }
  .sello { align-self: flex-start; background: var(--lima); color: var(--sobre-lima); font-size: .62rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; padding: .35rem .7rem; }
  /* La ficha recomendada se recorta del resto con un contorno lima. Contorno
     y no borde: `outline` no ocupa espacio, asi que la reja de un pixel que
     forman las fichas entre si no se descuadra. */
  .plan--destacado { outline: 3px solid var(--lima); outline-offset: -3px; z-index: 1; }

  /* ── LA COLUMNA RECOMENDADA DE LA COMPARATIVA ──
     Cuatro columnas iguales no orientan a nadie: quien llega a comparar se
     queda solo con la decision. Esta corre resaltada de arriba abajo, para
     que el ojo la siga mientras lee funcion por funcion. */
  .comparativa th.destacada,
  .comparativa td.destacada { background: var(--reco-fondo); }
  /* Los filetes laterales cierran la columna como una sola pieza vertical en
     vez de dejarla como celdas sueltas del mismo color. */
  .comparativa th.destacada { box-shadow: inset 1px 0 var(--reco-linea), inset -1px 0 var(--reco-linea), inset 0 3px var(--azul); }
  .comparativa td.destacada { box-shadow: inset 1px 0 var(--reco-linea), inset -1px 0 var(--reco-linea); }
  .comparativa tbody tr:last-child td.destacada { box-shadow: inset 1px 0 var(--reco-linea), inset -1px 0 var(--reco-linea), inset 0 -1px var(--reco-linea); }
  /* El chip del encabezado. Va encima del nombre del plan, no al lado: al
     lado obligaria a ensanchar la columna y desalinearia las otras tres. */
  /* La leyenda de la comparativa. En escritorio no se pinta: el chip del
     encabezado ya dice cual es el recomendado y repetirlo sobraria. Se
     esconde con la tecnica de recorte y no con `display: none`, para que
     siga siendo el nombre accesible de la tabla. */
  .comparativa caption {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .reco {
    display: block; margin: 0 auto .45rem; width: max-content;
    background: var(--azul); color: var(--sobre-azul);
    font-size: .54rem; font-weight: 500; letter-spacing: .14em;
    text-transform: uppercase; padding: .22rem .5rem;
  }

  /* ── preguntas ── */
  .preguntas { display: grid; gap: 1px; background: var(--linea); border: 1px solid var(--linea); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
  .pregunta { background: var(--panel); padding: clamp(1.6rem, 3vw, 2.2rem); display: flex; flex-direction: column; gap: .7rem; }
  .pregunta h3 { font-size: 1.05rem; }
  .pregunta p { font-size: .92rem; color: var(--tinta-2); }

  footer { border-top: 1px solid var(--linea); padding: 2.6rem 0 3.4rem; }
  .pie { display: flex; flex-wrap: wrap; gap: 1.6rem; justify-content: space-between; align-items: baseline; }
  footer p { font-size: .78rem; color: var(--tinta-3); letter-spacing: .02em; line-height: 1.7; }

  /* ── móvil ──
     Tres correcciones que solo se ven midiendo en un teléfono real:
     el botón del encabezado aplastaba al logo, los dos botones del hero
     tenían anchos distintos sin razón, y la tabla de la mora obligaba a
     desplazarse de lado justo en el argumento principal de la página. */
  @media (max-width: 620px) {
    /* El encabezado se queda con la firma: el llamado a acción está
       justo debajo, y repetirlo aquí solo robaba espacio. */
    .encabezado .boton--linea { display: none; }   /* el de tema se queda */
    .encabezado { padding: 1.2rem 0; }
    .portada { padding-top: .5rem; }

    /* Botones al mismo ancho: apilados, dos anchos distintos parecen
       un descuido, no una jerarquía. */
    .acciones { display: grid; grid-template-columns: 1fr; gap: .7rem; }
    .acciones .boton { justify-content: center; padding: 1.1rem 1.2rem; }
    .acciones .menudo { text-align: center; }

    /* La tabla deja de ser tabla y pasa a fichas apiladas: el dato
       importante es «este mes, este tope, esta mora», y eso se lee
       mejor en bloque que arrastrando de lado. */
    table { min-width: 0; }
    /* Se oculta del todo, no con la técnica de recorte: recortado seguía
       midiendo su ancho natural. Los encabezados no se pierden — pasan a
       cada celda como etiqueta visible (`data-r`). */
    thead { display: none; }
    tbody tr { display: grid; grid-template-columns: 1fr auto; gap: .15rem .8rem; padding: .9rem 1.2rem; border-bottom: 1px solid var(--linea); }
    tbody td { border: none; padding: 0; font-size: .93rem; }
    td[data-r]::before { content: attr(data-r) ": "; color: var(--tinta-3); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
    tbody td.der { text-align: right; }
    tr.suma { background: var(--lima); }
    tr.suma td { background: transparent; }
    tr.suma td.grande { font-size: 1.35rem; }

    /* ── LA COMPARATIVA DE PLANES ──
       Las reglas de arriba están hechas para la tabla de la mora, que tiene
       dos columnas. Esta tiene cinco —la función y los cuatro planes— y con
       `1fr auto` sus celdas caían de a dos por fila: ilegible.

       Aquí la fila se vuelve un bloque: la función arriba en su línea, y
       debajo los cuatro planes en una rejilla de cuatro, cada uno con su
       nombre encima. Se lee de un vistazo y nadie tiene que arrastrar. */
    /* El <table> tiene que dejar de ser tabla TAMBIEN: mientras siga en
       `display: table` se autodimensiona al contenido, y las celdas al 25 %
       resuelven contra ese ancho inflado. Medido: la tabla quedaba en 481 px
       dentro de una pantalla de 375. */
    .comparativa { display: block; width: 100%; min-width: 0; }
    /* Aqui la leyenda SI se pinta: sin encabezado, la celda resaltada de
       Completo no tendria quien la explique. */
    .comparativa caption {
      position: static; width: auto; height: auto;
      overflow: visible; clip-path: none; white-space: normal;
      display: block; text-align: left;
      /* Mismo margen lateral que las filas (`.9rem 1rem`): sin el, la
         leyenda quedaba pegada al filete del marco. */
      padding: .95rem 1rem; font-size: .82rem; line-height: 1.45;
      color: var(--tinta-2);
    }
    .comparativa caption b { color: var(--azul); font-weight: 500; }
    .comparativa tbody { display: block; width: 100%; }

    .comparativa tbody tr {
      display: block;
      width: 100%;
      box-sizing: border-box;
      padding: .9rem 1rem 1rem;
    }
    /* El nombre de la funcion es TEXTO, no un rotulo: hereda del `th` de
       arriba las versales, el interletrado y —lo grave— `white-space:
       nowrap`, que lo cortaba a la mitad («RECIBOS NUMERADOS Y PAZ Y SAL»).
       Se devuelve a texto normal, que ademas se lee mucho mejor. */
    .comparativa tbody tr > th[scope="row"] {
      display: block;
      text-align: left;
      font-weight: 500;
      font-size: .95rem;
      line-height: 1.35;
      letter-spacing: 0;
      text-transform: none;
      white-space: normal;
      color: var(--tinta);
      padding: 0 0 .6rem;
      border: none;
    }
    /* Los cuatro planes, en rejilla. `display: contents` no sirve aquí porque
       las celdas tienen que formar su PROPIA rejilla, no heredar la de la
       fila. Por eso la fila es `block` y las celdas se agrupan con flex. */
    .comparativa tbody tr > td {
      display: inline-block;
      width: calc(25% - .3rem);
      text-align: center;
      padding: .45rem .2rem;
      font-size: .9rem;
      border: none;
      vertical-align: top;
    }
    .comparativa tbody td[data-r]::before {
      content: attr(data-r);
      display: block;
      font-size: .58rem;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--tinta-3);
      margin-bottom: .25rem;
      /* Partir antes que truncar: «Profesio...» no identifica un plan. La
         rejilla se alinea arriba (`vertical-align: top`), asi que una
         etiqueta de dos lineas no descuadra a las vecinas. */
      white-space: normal;
      line-height: 1.15;
      min-height: 2.3em;
    }
    /* Las filas de grupo vuelven a ocupar el ancho: al pasar a `block` el
       colspan deja de tener efecto y sin esto quedaban como una celda suelta. */
    .comparativa tbody tr.grupo {
      display: block;
      padding: 1.1rem 1rem .5rem;
      background: var(--fondo);
    }
    .comparativa tbody tr.grupo th {
      display: block;
      font-size: .66rem;
      letter-spacing: .13em;
      text-transform: uppercase;
      color: var(--tinta-3);
      font-weight: 500;
      padding: 0;
      border: none;
      text-align: left;
    }
    /* El «—» de lo que no incluye el plan tiene que verse como ausencia, no
       como un dato más. */
    .comparativa tbody td.no { color: var(--tinta-3); opacity: .7; }
    .comparativa tbody td.si { color: var(--azul); font-weight: 500; }
    /* En el telefono no hay columna que seguir —cada fila es una ficha—, asi
       que el resalte tiene que repetirse en cada una: es la unica pista de
       cual es el plan recomendado, porque el encabezado esta oculto. */
    .comparativa tbody td.destacada {
      background: var(--reco-fondo);
      box-shadow: inset 0 0 0 1px var(--reco-linea);
      border-radius: 2px;
    }
    .comparativa tbody td.destacada::before { color: var(--azul); font-weight: 500; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
  }

/* ═══════════════════════════════════════════════════════════════════
   Accesibilidad y navegación del sitio
   ═══════════════════════════════════════════════════════════════════ */

/* Saltar al contenido. Quien navega con teclado o con lector de pantalla
   tiene que atravesar la cabecera entera en cada página antes de llegar a
   lo que vino a leer. Está oculto hasta que recibe el foco. */
.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--azul); color: #fff; padding: .7rem 1.2rem;
  text-decoration: none; font-weight: 500;
}
.saltar:focus { left: 0; }

/* El foco de teclado tiene que VERSE. Sin esto, quien navega con Tab no sabe
   dónde está — y el navegador lo pinta con un contorno que en fondos oscuros
   desaparece. */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--azul);
  outline-offset: 2px;
  border-radius: 2px;
}
:root[data-tema="oscuro"] a:focus-visible,
:root[data-tema="oscuro"] button:focus-visible {
  outline-color: var(--lima);
}

/* Quien pidió menos movimiento en su sistema lo pidió por una razón: el
   movimiento le provoca mareo o migraña. No es una preferencia estética. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* La barra de navegación del sitio, compartida por todas las páginas. */
.sitio-nav { display: flex; flex-wrap: wrap; gap: 1.1rem; align-items: center; }
.sitio-nav a {
  color: var(--tinta-2); text-decoration: none; font-size: .84rem;
  letter-spacing: .09em; text-transform: uppercase;
}
.sitio-nav a:hover, .sitio-nav a[aria-current="page"] { color: var(--azul); }
.sitio-nav a[aria-current="page"] { font-weight: 500; }

/* ══ MOVIMIENTO ═══════════════════════════════════════════════════════════════════════
   El mismo vocabulario de modium.com.co, con transiciones de CSS en vez de
   GSAP: los bloques suben, los titulares entran palabra por palabra y el
   relevo entra de lado. El motor está en `recursos/movimiento.js`.

   Todo cuelga de `.mv`, una clase que una línea del <head> pone en <html>
   solo si el visitante NO pidió menos movimiento. Sin esa clase —sin
   JavaScript, o con «reducir movimiento» activado— ninguna de estas reglas
   aplica y la página se ve entera y quieta desde el primer pintado. Esconder
   desde el CSS y no desde el script es lo que evita el parpadeo.

   ⚠ Por qué la lista va dentro de `:where()`. Esconder es fácil; lo difícil
   es garantizar que TODO lo escondido se vuelve a ver. Escrita a pelo,
   `.mv .cabecera > .capitulo` (tres clases) le gana en especificidad a
   `.mv .mv-dentro` (dos), y ese párrafo se queda invisible para siempre —
   no es un defecto estético, es contenido perdido. Pasó de verdad con la
   línea «De 1 a 60 inmuebles» de la portada. `:where()` deja la lista en
   especificidad cero, así que el revelado gana SIEMPRE, por complicado que
   sea el selector que se añada mañana. Y si un navegador no entendiera
   `:where()`, tiraría la regla entera: no se escondría nada y la página se
   vería completa. El fallo cae del lado bueno.

   La lista tiene que coincidir con la de `movimiento.js`: si cambia una,
   cambia la otra. Ninguno de estos selectores contiene a otro, a propósito
   —dos desvanecidos superpuestos se ven mal— y ninguno cae sobre un `<tr>`:
   `opacity` y `transform` sobre una fila descuadran la tabla.            */

.mv :where(
  .cabecera > .capitulo,
  .cabecera > .parrafo,
  .cabecera > .rotulo,
  .cabecera > .menudo,
  .remate > *,
  .acciones,
  .marco > .menudo,
  .casilla,
  .plan,
  .pregunta,
  .norma,
  .prueba,
  .vitrina,
  .escalon
) {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .95s cubic-bezier(.165, .84, .44, 1),
              transform .95s cubic-bezier(.165, .84, .44, 1);
}

/* El relevo —«Cobra. Liquida. Prueba.»— entra desde la izquierda, como las
   tres filas del método en la portada de la casa: son el mismo momento. */
.mv :where(.turno) {
  opacity: 0;
  transform: translateX(-34px);
  transition: opacity .85s cubic-bezier(.165, .84, .44, 1),
              transform .85s cubic-bezier(.165, .84, .44, 1);
}

/* Dos clases contra la cero de `:where()`: esto gana siempre. */
.mv .mv-dentro { opacity: 1; transform: none; }

/* ── el titular, palabra por palabra ──
   Cada palabra vive en una caja recortada y sube desde debajo. El relleno
   vertical con margen negativo compensa el recorte: sin él, `line-height:.94`
   le comería las tildes a un titular en versales. */
.mv :where(h1.titular, h2.titular) { opacity: 0; }
.mv .mv-listo { opacity: 1; }

.mv-pal {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding: .12em 0 .16em;
  margin: -.12em 0 -.16em;
}
.mv-pal > i {
  display: inline-block;
  font-style: normal;
  transform: translateY(115%);
  transition: transform 1.05s cubic-bezier(.16, 1, .3, 1);
}
.mv-dentro .mv-pal > i { transform: none; }


/* ══ LA CASA ════════════════════════════════════════════════════════════════════
   Lo que este sitio le toma prestado a modium.com.co, que es la fuente de
   verdad de la identidad. Tres cosas, ni una más:

     1. el TERCER registro tipográfico —la monoespaciada—, que es lo que
        más hace que una pieza se parezca al sitio de la casa;
     2. la sombra dura, `6px 6px 0 0`, NUNCA desenfocada;
     3. la cornisa de vidrio al bajar.

   La paleta ya coincidía (hueso, azul, acid, negro) y las tipografías de
   display y lectura también. Esto cierra la distancia que quedaba.        */

:root {
  /* El instrumento: coordenadas, estados, rótulos, versiones. Todo lo que
     es lectura de máquina y no prosa. Meterlo en Futura era justo lo que
     hacía que este sitio no se pareciera al de la casa. */
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", "Segoe UI Mono",
          Consolas, monospace;
  --vidrio: rgba(244, 244, 245, .88);
  --sombra-dura: 6px 6px 0 0 var(--tinta);
  --sombra-dura-corta: 3px 3px 0 0 var(--tinta);
}

/* En oscuro la sombra no puede ser negra —no se vería— ni blanca pura
   —deslumbra—: es un velo claro que insinúa el relieve. */
:root[data-tema="oscuro"] {
  --vidrio: rgba(10, 10, 10, .86);
  --sombra-dura: 6px 6px 0 0 rgba(244, 244, 245, .16);
  --sombra-dura-corta: 3px 3px 0 0 rgba(244, 244, 245, .16);
}

/* ── el registro instrumental ── */
.rotulo,
.capitulo,
.menudo,
.norma .fuente,
.sello,
.pantalla-barra span,
.sitio-nav a {
  font-family: var(--mono);
  font-weight: 400;
}
.capitulo b { font-weight: 500; }
.sitio-nav a { font-size: .72rem; letter-spacing: .12em; }
.sitio-nav a[aria-current="page"] { font-weight: 500; }

/* ── la sombra dura ──
   Solo donde hay una pieza que de verdad se levanta del papel: el botón
   principal, el plan recomendado y el marco de las capturas. Ponerla en todo
   convierte la página en un tablero de fichas. */
.boton--lima,
.plan--destacado,
.pantalla { box-shadow: var(--sombra-dura); }

/* El botón se hunde al pasar por encima, como en la casa: se mueve hacia la
   sombra y la sombra se acorta. No hay blur en ningún momento. */
.boton--lima {
  transition: background .18s ease, color .18s ease, border-color .18s ease,
              box-shadow .22s cubic-bezier(.16, 1, .3, 1),
              transform .22s cubic-bezier(.16, 1, .3, 1);
}
.boton--lima:hover,
.boton--lima:focus-visible {
  box-shadow: var(--sombra-dura-corta);
  transform: translate(3px, 3px);
}

/* ══ LA CORNISA ═══════════════════════════════════════════════════════════════
   La misma de modium.com.co, medida por medida: barra fija de lado a lado,
   marca a la izquierda, navegación a la derecha en monoespaciada versal con
   un subrayán que entra desde la izquierda, y vidrio al bajar.

   Se hace por CSS sobre el marcado que ya existía —`.encabezado` pasa a
   `display:contents` para que la marca y la navegación se conviertan en hijos
   directos de `.marco`— en vez de reescribir el <header> de las ocho páginas.
   Dos de esas ocho las escribe `generar_legal.mjs`: tocar el marcado obligaba
   a tocar también el generador y, con él, las páginas legales de la
   aplicación. El resultado en pantalla es el mismo y el riesgo, mucho menor.

   Dos diferencias con la casa, y las dos a propósito:
     · la marca es la de Aedis, no la de Modium —quien llega aquí tiene que
       saber en qué producto está—;
     · sobreviven el cambio de tema y el enlace de cupo fundador, que la casa
       no tiene. El cupo pasa de botón con borde a enlace destacado, que es
       exactamente lo que la casa hace con «Contacto».                      */

:root { --cornisa: 4.2rem; }

header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10000;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .35s, backdrop-filter .35s, border-color .35s;
}
header > .marco {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .9rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  transition: padding .25s ease;
}
/* Saca a `.firma` y a `.encabezado-fin` de su caja y los deja como hijos
   directos del marco: una sola fila, sin envolver. */
.encabezado { display: contents; }

/* Fija ocupa cero en el flujo, así que el contenido empieza más abajo. Y las
   anclas internas (#precio, #planes, #preguntas) tienen que parar por debajo
   de la barra o el titular queda tapado. */
main { padding-top: var(--cornisa); }
html { scroll-padding-top: calc(var(--cornisa) + 1.5rem); }

/* ── la marca ── */
header .firma { gap: .55rem; flex: 0 0 auto; }
header .firma svg { width: 26px; height: 26px; transition: width .25s ease, height .25s ease; }
header .firma .nombre { font-size: 1.15rem; }
header .firma .sobre { font-size: .55rem; letter-spacing: .18em; }

/* ── la navegación ── */
.encabezado-fin { display: flex; align-items: center; gap: clamp(.2rem, 1.4vw, 1.6rem); }
.sitio-nav { display: flex; align-items: center; gap: clamp(.2rem, 1.4vw, 1.6rem); flex-wrap: nowrap; }

.sitio-nav a,
header .boton--linea {
  font-family: var(--mono);
  font-size: clamp(.62rem, 1vw, .7rem);
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta);
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 12px 10px;
  gap: 0;
  text-decoration: none;
  position: relative;
  white-space: nowrap;
  transition: color .3s;
}
.sitio-nav a::after,
header .boton--linea::after {
  content: "";
  position: absolute;
  left: 10px; right: 10px; bottom: 7px;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}
.sitio-nav a:hover::after,
.sitio-nav a:focus-visible::after,
.sitio-nav a[aria-current="page"]::after,
header .boton--linea::after { transform: scaleX(1); }

/* La página en la que se está se marca con el subrayán, no con color: es lo
   que hace la casa, y evita que la cornisa tenga dos azules distintos. */
.sitio-nav a:hover,
.sitio-nav a[aria-current="page"] { color: var(--tinta); }
.sitio-nav a[aria-current="page"] { font-weight: 400; }
header .boton--linea:hover { background: transparent; color: var(--tinta); }

/* ── el cambio de tema ── sin la caja con borde, que era lo que pesaba */
header .tema {
  width: auto; height: auto;
  border: 0; padding: 12px 6px;
  color: var(--tinta);
  background: transparent;
}
header .tema:hover { background: transparent; color: var(--azul); }
header .tema svg { width: 16px; height: 16px; }

/* ── el vidrio ── */
header.compacta {
  background: var(--vidrio);
  -webkit-backdrop-filter: blur(9px) saturate(140%);
  backdrop-filter: blur(9px) saturate(140%);
  border-bottom-color: var(--linea);
}
header.compacta > .marco { padding-top: .55rem; padding-bottom: .55rem; }
header.compacta .firma svg { width: 22px; height: 22px; }
header.compacta .firma .sobre { display: none; }
header.compacta .firma .nombre { font-size: 1rem; }

/* Sobre sección oscura el cristal se invierte, y con él los tokens de tinta:
   el mismo recurso que ya usa `.tono-fuerte`. */
header.compacta.invertida {
  background: rgba(10, 10, 10, .82);
  border-bottom-color: rgba(244, 244, 245, .2);
  --tinta: #F4F4F5;
  --tinta-2: #A8A9AE;
  --tinta-3: #7A7B82;
  --azul: #8E97FF;
  color: var(--tinta);
}

/* Cuánto queda de página. Por encima de la cornisa —son 3 px— igual que en
   la casa. */
.progreso {
  position: fixed;
  top: 0; left: 0;
  height: 3px; width: 0;
  background: var(--azul);
  z-index: 10001;
  transition: width .1s linear;
  pointer-events: none;
}

/* En pantalla estrecha se suelta presión igual que en la casa: menos aire,
   tipografía algo menor, y se retira el cupo fundador —que la página repite
   más abajo— porque con cuatro enlaces y el tema no cabe en una línea. */
@media (max-width: 560px) {
  header > .marco { gap: .4rem; }
  .encabezado-fin { gap: 0; }
  .sitio-nav { gap: 0; flex: 0 1 auto; min-width: 0; }
  .sitio-nav a { padding: 12px 5px; font-size: .58rem; letter-spacing: .09em; }
  header .boton--linea { display: none; }
  header .firma .sobre { display: none; }
  header .firma .nombre { font-size: 1rem; }
  header .firma svg { width: 22px; height: 22px; }
  header .tema { padding: 12px 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .progreso { transition: none; }
}