/* ═══════════════════════════════════════════════════════════════════════════════
 * La Casa — homepage pública de PeopleEvo. STANDALONE.
 *
 * Método heredado de la homepage de Heimlich (la vara, SEMILLA §6), identidad propia:
 *   · Todo cuelga de `.casa` — no hereda ni fuga estilos hacia la app (Tailwind).
 *   · Fuentes self-hosteadas con `unicode-range`. Cero llamadas a Google Fonts.
 *   · Keyframes con prefijo `pe` para no colisionar.
 *   · Paleta por variables, con zonas oscuras y claras alternadas en la MISMA página.
 *
 * Lo que hace que Heimlich se vea mejor que una página de texto no es la paleta: es
 * que ENSEÑA el producto corriendo (su chat, su terminal). Aquí se hace lo mismo — la
 * pantalla del participante y el panel de resultados están dibujados en CSS, no
 * descritos en un párrafo.
 *
 * Paleta: negro, azul, rojo, blanco. Producto de tecnología para RH — preciso y con
 * señal, no cálido y editorial.
 * ═══════════════════════════════════════════════════════════════════════════════ */

/* ---------- fuentes (self-host) ---------- */
@font-face { font-family:'Instrument Serif'; font-style:normal; font-weight:400; font-display:swap; src:url("/estaticos/fuentes/InstrumentSerif-400-normal-latin.c008db4e8a97.woff2") format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; }
@font-face { font-family:'Instrument Serif'; font-style:italic; font-weight:400; font-display:swap; src:url("/estaticos/fuentes/InstrumentSerif-400-italic-latin.26082c73a711.woff2") format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url("/estaticos/fuentes/Inter-400-normal-latin.65850a373e25.woff2") format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url("/estaticos/fuentes/Inter-400-normal-latin-ext.01ba6c2a184b.woff2") format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+1E00-1E9F,U+2020,U+20A0-20AB,U+2113,U+A720-A7FF; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url("/estaticos/fuentes/Inter-500-normal-latin.65850a373e25.woff2") format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url("/estaticos/fuentes/Inter-600-normal-latin.65850a373e25.woff2") format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400; font-display:swap; src:url("/estaticos/fuentes/JetBrainsMono-400-normal-latin.570751c5f8b4.woff2") format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:600; font-display:swap; src:url("/estaticos/fuentes/JetBrainsMono-600-normal-latin.570751c5f8b4.woff2") format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; }

/* ---------- animaciones (prefijo pe) ---------- */
@keyframes peSube    { to { opacity:1; transform:none } }
@keyframes peBarra   { from { width:0 } }
@keyframes peLatido  { 0%,100% { opacity:.55 } 50% { opacity:1 } }
@keyframes peEscanea { to { transform:translateY(340px) } }

/* ---------- base ---------- */
html { scroll-behavior:smooth }

.casa {
  /* neutros */
  --negro:#07090d; --negro-2:#0e1218; --negro-3:#161b24;
  --blanco:#ffffff; --hueso:#f7f8fa; --hueso-2:#eef0f4;
  --gris:#64748b; --gris-claro:#94a3b8;

  /* señal */
  --azul:#2563eb; --azul-vivo:#3b82f6; --azul-neon:#60a5fa;
  --rojo:#e11d48; --rojo-vivo:#f43f5e;

  --linea:#e2e6ec;
  --linea-noche:rgba(148,163,184,.16);

  --f-display:"Instrument Serif",Georgia,serif;
  --f-cuerpo:"Inter",system-ui,-apple-system,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,monospace;

  font-family:var(--f-cuerpo);
  background:var(--blanco); color:var(--negro);
  line-height:1.65; overflow-x:clip; color-scheme:light;
  -webkit-font-smoothing:antialiased;
}
.casa *{ margin:0; padding:0; box-sizing:border-box }
.casa img{ max-width:100%; display:block }
.casa a{ color:inherit; text-decoration:none }

.casa .marco{ width:min(1140px,100% - 2.5rem); margin-inline:auto }
.casa .angosto{ width:min(760px,100% - 2.5rem); margin-inline:auto }

/* ---------- tipografía ---------- */
.casa h1,.casa h2,.casa h3{ font-weight:600; line-height:1.1; letter-spacing:-.025em }
.casa h1{ font-size:clamp(2.7rem,6.2vw,4.6rem); letter-spacing:-.035em }
.casa h2{ font-size:clamp(1.9rem,3.8vw,2.8rem); letter-spacing:-.03em }
.casa h3{ font-size:1.18rem; line-height:1.35 }
/* La serif entra SOLO en el acento: una nota humana dentro de un producto técnico. */
.casa .cursiva{ font-family:var(--f-display); font-style:italic; font-weight:400; letter-spacing:-.01em }

.casa .etiqueta{
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gris);
}
.casa .etiqueta b{ color:var(--azul); font-weight:400 }

/* ---------- navegación ---------- */
.casa .nav{
  position:sticky; top:0; z-index:50;
  background:rgba(7,9,13,.86); backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--linea-noche); color:var(--blanco);
}
.casa .nav .marco{ display:flex; align-items:center; justify-content:space-between; height:62px }
.casa .logo{ font-size:1.05rem; font-weight:600; letter-spacing:-.03em; display:flex; align-items:center; gap:.55rem }
.casa .logo .punto{
  width:9px; height:9px; border-radius:50%; background:var(--azul-vivo);
  box-shadow:0 0 0 3px rgba(59,130,246,.22); animation:peLatido 2.6s ease-in-out infinite;
}
.casa .logo b{ font-weight:400; color:var(--gris-claro) }
.casa .nav nav{ display:flex; gap:1.6rem; align-items:center; font-size:.9rem }
.casa .nav nav a{ color:var(--gris-claro); transition:color .18s }
.casa .nav nav a:hover{ color:var(--blanco) }
@media (max-width:760px){ .casa .nav nav a:not(.boton){ display:none } }

/* ---------- botones ---------- */
.casa .boton{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--azul); color:#fff; font-weight:500; font-size:.93rem;
  padding:.68rem 1.3rem; border-radius:6px; border:1px solid var(--azul);
  transition:background .18s,box-shadow .18s,transform .18s;
}
.casa .boton:hover{ background:var(--azul-vivo); box-shadow:0 6px 22px -6px rgba(37,99,235,.6); transform:translateY(-1px) }
.casa .boton.hueco{ background:transparent; color:var(--blanco); border-color:rgba(148,163,184,.35) }
.casa .boton.hueco:hover{ background:rgba(148,163,184,.1); box-shadow:none; border-color:var(--gris-claro) }
.casa .boton.tinta{ background:transparent; color:var(--negro); border-color:var(--linea) }
.casa .boton.tinta:hover{ background:var(--hueso); box-shadow:none; border-color:var(--gris) }

/* ---------- entrada animada ---------- */
.casa .sube{ opacity:0; transform:translateY(16px); animation:peSube .65s cubic-bezier(.2,.7,.3,1) forwards }
.casa .r1{ animation-delay:.04s } .casa .r2{ animation-delay:.12s }
.casa .r3{ animation-delay:.2s }  .casa .r4{ animation-delay:.3s }
@media (prefers-reduced-motion:reduce){ .casa .sube{ opacity:1; transform:none; animation:none } }

/* ══════════════ zona oscura ══════════════ */
.casa .noche{ background:var(--negro); color:#e6eaf1; color-scheme:dark; position:relative; overflow:hidden }
.casa .noche h2,.casa .noche h3{ color:#fff }
.casa .noche .etiqueta{ color:var(--gris-claro) }
.casa .noche p{ color:#9fabbd }

/* Rejilla técnica de fondo: da textura de producto sin meter una imagen. */
.casa .noche::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(var(--linea-noche) 1px,transparent 1px),
    linear-gradient(90deg,var(--linea-noche) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 65% at 50% 0%,#000 20%,transparent 78%);
}

/* ---------- hero ---------- */
.casa .hero{ padding:clamp(3rem,6vw,4.5rem) 0 clamp(3rem,6vw,4.5rem); position:relative }
.casa .hero .marco{ position:relative; z-index:1 }
.casa .hero .reparto{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,3.25rem); align-items:center }
@media (max-width:920px){ .casa .hero .reparto{ grid-template-columns:1fr } }

/* En dos columnas el titular vive en la mitad del ancho: con la escala general se
   partía en cuatro renglones y se encimaba con el teléfono. */
.casa .hero h1{ margin-top:1rem; color:#fff; font-size:clamp(2.15rem,3.9vw,3.35rem) }
.casa .hero h1 .azul{ color:var(--azul-neon) }
.casa .hero p.entrada{ font-size:clamp(1.02rem,1.7vw,1.16rem); color:#9fabbd; max-width:48ch; margin-top:1.4rem }
.casa .hero .acciones{ display:flex; gap:.75rem; flex-wrap:wrap; margin-top:2rem }

/* Dos por dos, y no `auto-fit`: con cuatro datos en media página, `auto-fit` metía
   tres arriba y dejaba el cuarto huérfano abajo. */
.casa .cinta{
  margin-top:clamp(2rem,4vw,2.75rem); padding-top:1.3rem;
  border-top:1px solid var(--linea-noche);
  display:grid; grid-template-columns:1fr 1fr; gap:1.1rem 1.5rem;
}
.casa .cinta b{ font-size:1.32rem; font-weight:600; display:block; line-height:1.15; color:#fff; letter-spacing:-.03em }
.casa .cinta span{ font-size:.78rem; color:var(--gris) }
@media (max-width:420px){ .casa .cinta{ grid-template-columns:1fr } }

/* ---------- el producto, dibujado ---------- */
.casa .escenario{ position:relative; display:flex; justify-content:center; align-items:flex-start; gap:1rem }

/* teléfono: la pantalla del participante */
.casa .telefono{
  width:270px; flex:none; border-radius:26px; padding:9px;
  background:linear-gradient(160deg,#232a36,#0d1117);
  border:1px solid rgba(148,163,184,.22);
  box-shadow:0 34px 70px -24px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.03) inset;
}
.casa .pantalla{ background:var(--blanco); border-radius:19px; overflow:hidden; color:var(--negro) }
.casa .pantalla .barra-sup{
  background:var(--negro); color:#fff; padding:.6rem .85rem;
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.1em; display:flex; justify-content:space-between;
}
.casa .pantalla .cuerpo{ padding:.95rem .95rem 1.15rem }
.casa .progreso{ height:3px; background:var(--hueso-2); border-radius:99px; overflow:hidden; margin-bottom:.9rem }
.casa .progreso i{ display:block; height:100%; width:62%; background:var(--azul); animation:peBarra 1.6s .3s cubic-bezier(.2,.7,.3,1) backwards }
.casa .pantalla .pregunta{ font-size:.83rem; font-weight:500; line-height:1.4; margin-bottom:.85rem }
.casa .pantalla .n{ font-family:var(--f-mono); font-size:.58rem; color:var(--gris); display:block; margin-bottom:.35rem; letter-spacing:.1em }
.casa .opcion{
  display:flex; align-items:center; gap:.55rem; font-size:.74rem;
  border:1px solid var(--linea); border-radius:7px; padding:.5rem .6rem; margin-bottom:.35rem;
}
.casa .opcion i{ width:13px; height:13px; border-radius:50%; border:1.5px solid var(--linea); flex:none }
.casa .opcion.elegida{ border-color:var(--azul); background:rgba(37,99,235,.06); font-weight:500 }
.casa .opcion.elegida i{ border-color:var(--azul); background:var(--azul); box-shadow:inset 0 0 0 2.5px #fff }

/* panel de resultados */
.casa .panel{
  flex:1; min-width:0; align-self:center;
  background:rgba(14,18,24,.9); border:1px solid var(--linea-noche); border-radius:12px;
  padding:1.1rem 1.15rem; backdrop-filter:blur(8px);
}
@media (max-width:1000px){ .casa .panel{ display:none } }
.casa .panel .titulo{
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gris); display:flex; justify-content:space-between; margin-bottom:.95rem;
}
.casa .panel .titulo em{ font-style:normal; color:var(--azul-neon) }
.casa .medida{ margin-bottom:.7rem }
.casa .medida span{ font-size:.72rem; color:#9fabbd; display:flex; justify-content:space-between; margin-bottom:.28rem }
.casa .medida span b{ color:#fff; font-weight:500; font-family:var(--f-mono); font-size:.7rem }
.casa .riel{ height:5px; background:rgba(148,163,184,.14); border-radius:99px; overflow:hidden }
.casa .riel i{ display:block; height:100%; border-radius:99px; background:var(--azul); animation:peBarra 1.3s cubic-bezier(.2,.7,.3,1) backwards }
.casa .riel i.baja{ background:var(--rojo) }
.casa .panel .pie{
  margin-top:1rem; padding-top:.8rem; border-top:1px solid var(--linea-noche);
  font-size:.7rem; color:var(--gris); display:flex; justify-content:space-between;
}
.casa .panel .pie b{ color:var(--rojo-vivo); font-weight:500 }

/* ---------- secciones claras ---------- */
.casa section{ padding:clamp(3.5rem,7.5vw,5.5rem) 0 }
.casa .cabecera-seccion{ max-width:58ch; margin-bottom:clamp(2rem,4vw,2.8rem) }
.casa .cabecera-seccion h2{ margin-top:.7rem }
.casa .cabecera-seccion p{ color:var(--gris); margin-top:.85rem; font-size:1.02rem }

.casa .rejilla{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr)) }
.casa .tarjeta{
  background:var(--blanco); border:1px solid var(--linea); border-radius:10px;
  padding:1.5rem; transition:border-color .2s,box-shadow .2s,transform .2s;
  position:relative; overflow:hidden;
}
.casa .tarjeta::after{
  content:""; position:absolute; left:0; top:0; width:100%; height:2px;
  background:var(--azul); transform:scaleX(0); transform-origin:left; transition:transform .3s;
}
.casa .tarjeta:hover{ border-color:#cdd5e0; box-shadow:0 12px 34px -18px rgba(7,9,13,.28); transform:translateY(-2px) }
.casa .tarjeta:hover::after{ transform:scaleX(1) }
.casa .tarjeta h3{ margin-bottom:.5rem }
.casa .tarjeta p{ color:var(--gris); font-size:.93rem }
.casa .tarjeta .num{
  font-family:var(--f-mono); font-size:.66rem; color:var(--azul); letter-spacing:.14em;
  display:block; margin-bottom:.9rem; text-transform:uppercase;
}

/* ---------- pasos ---------- */
.casa .pasos{ counter-reset:paso }
.casa .paso{
  display:grid; grid-template-columns:auto 1fr; gap:1.4rem;
  padding:1.5rem 0; border-top:1px solid var(--linea); align-items:start;
}
.casa .paso:last-child{ border-bottom:1px solid var(--linea) }
.casa .paso::before{
  counter-increment:paso; content:counter(paso,decimal-leading-zero);
  font-family:var(--f-mono); font-size:.72rem; color:var(--azul); padding-top:.4rem;
}
.casa .paso p{ color:var(--gris); margin-top:.3rem }

/* ---------- roadmap ---------- */
.casa .ruta{ position:relative; z-index:1 }
.casa .hito{
  display:grid; grid-template-columns:100px 1fr; gap:1.4rem;
  padding:1.35rem 0; border-top:1px solid var(--linea-noche); align-items:start;
}
.casa .hito:last-child{ border-bottom:1px solid var(--linea-noche) }
.casa .hito .fase{ font-family:var(--f-mono); font-size:.72rem; color:var(--azul-neon); padding-top:.35rem; letter-spacing:.1em }
.casa .hito h3{ font-size:1.08rem }
.casa .hito p{ font-size:.92rem; margin-top:.28rem }
.casa .estado{
  display:inline-block; font-family:var(--f-mono); font-size:.6rem;
  letter-spacing:.12em; text-transform:uppercase; padding:.18rem .5rem;
  border-radius:4px; margin-left:.55rem; vertical-align:middle; font-weight:400;
}
.casa .estado.vivo{ background:rgba(225,29,72,.14); color:var(--rojo-vivo); border:1px solid rgba(225,29,72,.4) }
.casa .estado.curso{ background:rgba(37,99,235,.16); color:var(--azul-neon); border:1px solid rgba(59,130,246,.4) }
.casa .estado.proximo{ background:transparent; color:var(--gris); border:1px solid var(--linea-noche) }

/* ---------- cierre ---------- */
.casa .cierre{ background:var(--hueso); text-align:center; border-top:1px solid var(--linea) }
.casa .cierre h2{ margin:.7rem 0 1rem }
.casa .cierre p{ color:var(--gris); max-width:50ch; margin:0 auto 1.9rem }

.casa footer{ background:var(--negro); color:var(--gris); padding:2.2rem 0; font-size:.85rem }
.casa footer .marco{ display:flex; justify-content:space-between; gap:1.5rem; flex-wrap:wrap }
.casa footer a:hover{ color:var(--azul-neon) }

/* ═══════════════════════════════════════════════════════════════════════════════
 * EL INTERRUPTOR — las dos caras de la moneda (B2B / B2C)
 *
 * Sin una línea de JavaScript: dos radios ocultos y el combinador `~`. Coherente con
 * D1 (cero Node en runtime) y, sobre todo, no hay nada que pueda fallar en vivo el 17
 * — funciona aunque el JS no cargue, y es navegable con teclado por ser radios de
 * verdad. El precio es que ambas caras viajan en el HTML; a este tamaño, nada.
 * ═══════════════════════════════════════════════════════════════════════════════ */

.casa .mando{ position:absolute; opacity:0; pointer-events:none; width:1px; height:1px }

.casa .conmutador{
  display:inline-flex; padding:3px; gap:2px; border-radius:8px;
  background:rgba(148,163,184,.12); border:1px solid var(--linea-noche);
}
.casa .conmutador label{
  font-size:.82rem; font-weight:500; padding:.38rem .95rem; border-radius:6px;
  color:var(--gris-claro); cursor:pointer; transition:background .18s,color .18s;
  user-select:none; white-space:nowrap;
}
.casa .conmutador label:hover{ color:#fff }
/* El foco del radio oculto se pinta sobre su etiqueta: sin esto, navegar con teclado
   deja al usuario sin saber dónde está parado. */
.casa .mando:focus-visible ~ .nav .conmutador label[for="es-empresa"],
.casa .mando:focus-visible ~ .nav .conmutador label[for="es-persona"]{ outline:2px solid var(--azul-neon); outline-offset:2px }

.casa #es-empresa:checked ~ .nav .conmutador label[for="es-empresa"],
.casa #es-persona:checked ~ .nav .conmutador label[for="es-persona"]{
  background:var(--azul); color:#fff; box-shadow:0 2px 10px -3px rgba(37,99,235,.7);
}

/* Qué cara se ve. Las secciones enteras (`.cara`) sí se pueden prender con `block`
   porque son divs; lo que va por `.solo-b2b`/`.solo-b2c` se resuelve al final del
   archivo, y ahí está explicado por qué se hace al revés. */
.casa .cara{ display:none }
.casa #es-empresa:checked ~ main .cara-b2b{ display:block }
.casa #es-persona:checked ~ main .cara-b2c{ display:block }

@media (max-width:560px){
  .casa .conmutador label{ padding:.34rem .7rem; font-size:.76rem }
}

/* ---------- marca de "esto todavía no existe" ---------- */
.casa .sello{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--rojo-vivo); border:1px solid rgba(225,29,72,.4);
  background:rgba(225,29,72,.1); padding:.22rem .6rem; border-radius:4px;
}
.casa .sello::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--rojo-vivo) }
.casa .sello.listo{ color:var(--azul-neon); border-color:rgba(59,130,246,.4); background:rgba(37,99,235,.12) }
.casa .sello.listo::before{ background:var(--azul-neon) }

/* Las pantallas en diseño se distinguen a la vista, no solo por la etiqueta. */
.casa .en-diseno{ position:relative }
.casa .en-diseno .telefono,.casa .en-diseno .panel{ border-style:dashed }

/* ---------- perfil de candidato (lado B2C) ---------- */
.casa .perfil{ padding:1rem .95rem 1.15rem }
.casa .perfil .quien{ display:flex; align-items:center; gap:.6rem; margin-bottom:.9rem }
.casa .perfil .foto{
  width:38px; height:38px; border-radius:50%; flex:none;
  background:linear-gradient(140deg,var(--azul),var(--rojo));
  display:grid; place-items:center; color:#fff; font-weight:600; font-size:.85rem;
}
.casa .perfil .quien b{ display:block; font-size:.85rem; font-weight:600; line-height:1.2 }
.casa .perfil .quien span{ font-size:.68rem; color:var(--gris) }

.casa .medallas{ display:flex; flex-wrap:wrap; gap:.3rem; margin-bottom:.9rem }
.casa .medalla{
  font-size:.62rem; font-weight:500; padding:.24rem .5rem; border-radius:99px;
  background:rgba(37,99,235,.1); color:var(--azul); border:1px solid rgba(37,99,235,.28);
  display:inline-flex; align-items:center; gap:.25rem;
}
.casa .medalla::before{ content:"✓"; font-size:.58rem }
.casa .medalla.falta{ background:var(--hueso); color:var(--gris); border-color:var(--linea) }
.casa .medalla.falta::before{ content:"+" }

/* El control de visibilidad: la función que hace vendible el lado B2C. */
.casa .visibilidad{ border-top:1px solid var(--linea); padding-top:.75rem }
.casa .visibilidad .rotulo{
  font-family:var(--f-mono); font-size:.56rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gris); display:block; margin-bottom:.45rem;
}
.casa .ojo{
  display:flex; align-items:center; gap:.5rem; font-size:.7rem;
  padding:.4rem .55rem; border:1px solid var(--linea); border-radius:6px; margin-bottom:.28rem;
}
.casa .ojo i{ width:11px; height:11px; border-radius:50%; border:1.5px solid var(--linea); flex:none }
.casa .ojo.activa{ border-color:var(--azul); background:rgba(37,99,235,.06); font-weight:500 }
.casa .ojo.activa i{ border-color:var(--azul); background:var(--azul); box-shadow:inset 0 0 0 2px #fff }
.casa .ojo em{ font-style:normal; color:var(--gris); font-size:.62rem; margin-left:auto }

/* ---------- diagrama del mercado de dos lados ---------- */
.casa .moneda{
  display:grid; grid-template-columns:1fr auto 1fr; gap:1.25rem; align-items:center;
  margin-top:2rem;
}
@media (max-width:760px){ .casa .moneda{ grid-template-columns:1fr; text-align:center } }
.casa .moneda .lado{
  border:1px solid var(--linea-noche); border-radius:10px; padding:1.2rem;
  background:rgba(14,18,24,.6);
}
.casa .moneda .lado h3{ font-size:1rem; margin-bottom:.4rem }
.casa .moneda .lado p{ font-size:.86rem }
.casa .moneda .lado .etiqueta{ margin-bottom:.55rem; display:block }
.casa .moneda .puente{
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--azul-neon); text-align:center; padding:.5rem .7rem;
  border:1px dashed rgba(59,130,246,.45); border-radius:8px; line-height:1.6;
}

/* ---------- el taller: por qué NoKo ---------- */
.casa .cifras{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr));
  gap:1.25rem; margin:2rem 0 2.5rem;
  padding:1.5rem 0; border-block:1px solid var(--linea-noche);
}
.casa .cifras div b{
  display:block; font-size:2.1rem; font-weight:600; line-height:1;
  letter-spacing:-.04em; color:#fff;
}
.casa .cifras div span{ font-size:.8rem; color:var(--gris); display:block; margin-top:.35rem }

.casa .obras{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)); gap:.6rem }
.casa .obra{
  border:1px solid var(--linea-noche); border-radius:8px; padding:.85rem 1rem;
  background:rgba(255,255,255,.02); transition:border-color .2s,background .2s;
}
.casa .obra:hover{ border-color:rgba(59,130,246,.4); background:rgba(37,99,235,.06) }
/* `> b` porque la descripción trae `<b>` que resaltan media frase: con el selector
   suelto, «nunca toca el dinero de nadie» se salía a su propio renglón. */
.casa .obra > b{ display:block; font-size:.92rem; font-weight:600; color:#fff; letter-spacing:-.01em }
.casa .obra span b{ color:#fff; font-weight:600 }
.casa .obra span{ display:block; font-size:.78rem; color:var(--gris); margin-top:.15rem; line-height:1.45 }
.casa .obra em{
  font-style:normal; font-family:var(--f-mono); font-size:.62rem;
  color:var(--azul-neon); letter-spacing:.08em; display:block; margin-top:.4rem;
}

.casa .doctrina{ display:grid; gap:0; margin-top:.5rem }
.casa .regla{
  display:grid; grid-template-columns:auto 1fr; gap:1.1rem; align-items:start;
  padding:1.1rem 0; border-top:1px solid var(--linea-noche);
}
.casa .regla:last-child{ border-bottom:1px solid var(--linea-noche) }
.casa .regla .marca{
  font-family:var(--f-mono); font-size:.66rem; color:var(--azul-neon);
  letter-spacing:.1em; padding-top:.25rem; white-space:nowrap;
}
/* `> div > b` y no `b` a secas: el título de la regla es un bloque, pero un `<b>` que
   resalta media frase dentro del párrafo no debe romper el renglón. */
.casa .regla > div > b{ display:block; font-size:.98rem; font-weight:600; color:#fff }
.casa .regla p{ font-size:.9rem; margin-top:.2rem }
.casa .regla p b{ color:#fff; font-weight:600 }

/* Salvavidas: si un hero llegara a quedar en zona clara, su h1 heredaba `color:#fff`
   —pensado para el hero oscuro— y salía blanco sobre blanco, invisible. Pagado en
   /plan el 2026-08-05. Esto lo hace imposible. */
.casa .hero:not(.noche) h1{ color:var(--negro) }
.casa .hero:not(.noche) p.entrada{ color:var(--gris) }
.casa .hero:not(.noche) .cinta{ border-color:var(--linea) }
.casa .hero:not(.noche) .cinta b{ color:var(--negro) }

/* La nota al pie del hero perdio su margen al rehacer la paleta: quedaba pegada al
   parrafo de entrada, como si fuera el mismo bloque. */
.casa .hero .nota{ margin-top:1.4rem; font-size:.88rem; color:var(--gris) }
.casa .hero:not(.noche) .nota{ color:var(--gris) }

/* ═══════════════════════════════════════════════════════════════════════════════
 * LAS PANTALLAS — el alcance dibujado
 *
 * Cada una es la captura que existiría si estuviera construida. Se dibujan en CSS y
 * no se fotografía una maqueta de Figma por una razón práctica: cuando se construyan
 * de verdad, estas quedan como la especificación visual, y no hay que rehacerlas.
 * ═══════════════════════════════════════════════════════════════════════════════ */

/* El `min(320px,100%)` no es adorno. `minmax(320px,1fr)` con `auto-fit` NO se encoge
   por debajo de su mínimo: en una pantalla de 320 px el contenedor mide ~288 (el
   `.marco` le quita 2.5rem) y la pista sigue midiendo 320, así que se sale 24 px y
   arrastra a la página entera. Envolver el mínimo en `min(…,100%)` le da permiso de
   ceder. Aplica a las siete rejillas `auto-fit` de este archivo. */
.casa .galeria{ display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr)) }
.casa .lienzo{
  border:1px solid var(--linea-noche); border-radius:12px; overflow:hidden;
  background:rgba(14,18,24,.75); display:flex; flex-direction:column;
}
.casa .lienzo.dise{ border-style:dashed }
.casa .lienzo > figcaption{
  padding:.85rem 1rem; border-top:1px solid var(--linea-noche);
  display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-top:auto;
}
.casa .lienzo figcaption b{ font-size:.9rem; color:#fff; font-weight:600; display:block }
.casa .lienzo figcaption span{ font-size:.78rem; color:var(--gris); display:block; margin-top:.1rem }

/* la ventana clara donde vive cada maqueta. `flex:1` para que en una fila de tres, las
   maquetas cortas estiren su ventana blanca en vez de dejar una franja oscura entre el
   contenido y el pie — se nota mucho cuando la tarjeta va sobre fondo claro. */
.casa .marquito{ background:var(--blanco); color:var(--negro); padding:.9rem; min-height:212px; flex:1 }
.casa .marquito .cabe{
  display:flex; align-items:center; justify-content:space-between;
  font-family:var(--f-mono); font-size:.58rem; letter-spacing:.1em;
  color:var(--gris); padding-bottom:.6rem; border-bottom:1px solid var(--linea); margin-bottom:.75rem;
}

/* --- wizard por pasos --- */
.casa .tramos{ display:flex; gap:.3rem; margin-bottom:.85rem }
.casa .tramo{ flex:1; height:3px; border-radius:99px; background:var(--hueso-2) }
.casa .tramo.hecho{ background:var(--azul) }
.casa .tramo.aqui{ background:var(--azul); box-shadow:0 0 0 2px rgba(37,99,235,.2) }
.casa .rotulo-paso{ font-size:.58rem; font-family:var(--f-mono); color:var(--azul); letter-spacing:.1em; text-transform:uppercase }
.casa .campo{
  border:1px solid var(--linea); border-radius:6px; padding:.45rem .6rem;
  font-size:.72rem; margin-top:.45rem; display:flex; justify-content:space-between; align-items:center;
}
.casa .campo.foco{ border-color:var(--azul); box-shadow:0 0 0 3px rgba(37,99,235,.1) }
.casa .campo em{ font-style:normal; color:var(--gris); font-size:.62rem }
.casa .agregar{ font-size:.68rem; color:var(--azul); margin-top:.5rem; font-weight:500 }

/* --- reporte --- */
.casa .fila-area{ display:grid; grid-template-columns:82px 1fr auto; gap:.5rem; align-items:center; margin-bottom:.42rem; font-size:.7rem }
.casa .fila-area .nom{ color:var(--gris); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.casa .fila-area .barra{ height:6px; background:var(--hueso-2); border-radius:99px; overflow:hidden }
.casa .fila-area .barra i{ display:block; height:100%; background:var(--azul); border-radius:99px }
.casa .fila-area .barra i.baja{ background:var(--rojo) }
.casa .fila-area .val{ font-family:var(--f-mono); font-size:.66rem; font-weight:600 }

/* --- copiloto --- */
.casa .dialogo{ display:flex; flex-direction:column; gap:.5rem }
.casa .burbuja{ font-size:.72rem; line-height:1.45; padding:.55rem .7rem; border-radius:9px; max-width:88% }
.casa .burbuja.mia{ background:var(--azul); color:#fff; align-self:flex-end; border-bottom-right-radius:3px }
.casa .burbuja.suya{ background:var(--hueso); border:1px solid var(--linea); border-bottom-left-radius:3px }
.casa .burbuja.suya b{ display:block; font-size:.62rem; color:var(--azul); margin-bottom:.2rem; font-family:var(--f-mono); letter-spacing:.08em }

/* --- medalla verificable --- */
.casa .credencial{
  border:1px solid var(--linea); border-radius:9px; padding:.85rem; text-align:center;
  background:linear-gradient(160deg,rgba(37,99,235,.06),transparent);
}
.casa .credencial .disco{
  width:44px; height:44px; border-radius:50%; margin:0 auto .55rem;
  background:linear-gradient(140deg,var(--azul),var(--rojo)); display:grid; place-items:center;
  color:#fff; font-size:1.1rem;
}
.casa .credencial b{ display:block; font-size:.85rem; font-weight:600 }
.casa .credencial span{ display:block; font-size:.66rem; color:var(--gris); margin-top:.15rem }
.casa .credencial .liga{
  margin-top:.6rem; padding-top:.55rem; border-top:1px dashed var(--linea);
  font-family:var(--f-mono); font-size:.56rem; color:var(--azul); word-break:break-all;
}

/* --- curso que otorga medalla --- */
.casa .curso{ border:1px solid var(--linea); border-radius:8px; padding:.7rem .8rem; font-size:.72rem }
.casa .curso .top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:.5rem }
.casa .curso .top b{ font-size:.8rem; font-weight:600 }
.casa .curso .top em{ font-style:normal; font-family:var(--f-mono); font-size:.6rem; color:var(--gris) }
.casa .curso .otorga{
  margin-top:.55rem; padding-top:.5rem; border-top:1px solid var(--linea);
  font-size:.66rem; color:var(--gris); display:flex; align-items:center; gap:.35rem;
}
.casa .curso .otorga .medalla{ margin:0 }

/* ═══════════════════════════════════════════════════════════════════════════════
 * MÓVIL
 *
 * La barra superior no cabía en 390 px: logo + interruptor + botón de entrar sumaban
 * más ancho que la pantalla, empujaban el `.marco` y desbordaban la página entera.
 * Con `overflow-x:clip` eso no se veía como scroll horizontal sino como texto cortado
 * a la derecha — peor, porque parece un error de maquetación y no un desborde.
 * Visto en una captura a 390 px, no leyendo el CSS.
 * ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width:760px){
  /* El interruptor baja a su propio renglón y ocupa el ancho: es el control más
     importante de la página, no puede quedar apretado. */
  .casa .nav .marco{
    flex-wrap:wrap; height:auto; padding-block:.7rem; gap:.6rem .75rem;
  }
  .casa .conmutador{ order:3; width:100%; justify-content:stretch }
  .casa .conmutador label{ flex:1; text-align:center; padding:.45rem .5rem }
  .casa .nav nav{ margin-left:auto; gap:.9rem }
  .casa .logo{ font-size:.98rem }

  /* Nada puede ser más ancho que la pantalla. */
  .casa .marco,.casa .angosto{ width:calc(100% - 2rem) }
  .casa .escenario{ flex-direction:column; align-items:center }
  .casa .telefono{ width:min(270px,100%) }
  .casa h1{ font-size:clamp(1.95rem,8.5vw,2.6rem) }
  .casa .hero h1{ font-size:clamp(1.95rem,8.5vw,2.6rem) }
  .casa .hero .reparto{ gap:2.5rem }

  .casa .hito,.casa .regla{ grid-template-columns:1fr; gap:.35rem }
  .casa .hito .fase,.casa .regla .marca{ padding-top:0 }
  .casa .paso{ grid-template-columns:auto 1fr; gap:.9rem }

  .casa .cifras{ grid-template-columns:1fr 1fr; gap:1.1rem }
  .casa .cifras div b{ font-size:1.7rem }
  .casa footer .marco{ flex-direction:column; gap:.6rem }
}

/* Red de seguridad: si algo se pasa de ancho, que no arrastre la página. */
.casa main,.casa section,.casa .marco,.casa .angosto{ max-width:100% }
.casa .galeria,.casa .obras,.casa .rejilla{ min-width:0 }
.casa .lienzo,.casa .obra,.casa .tarjeta{ min-width:0 }

/* --- seguimiento de respuestas --- */
.casa .avance{ display:flex; align-items:baseline; gap:.4rem; margin-bottom:.6rem }
.casa .avance b{ font-size:1.6rem; font-weight:600; letter-spacing:-.03em }
.casa .avance span{ font-size:.68rem; color:var(--gris) }
.casa .aro{ height:7px; background:var(--hueso-2); border-radius:99px; overflow:hidden; margin-bottom:.75rem }
.casa .aro i{ display:block; height:100%; background:var(--azul); border-radius:99px }
.casa .persona{
  display:flex; align-items:center; gap:.5rem; font-size:.7rem;
  padding:.35rem 0; border-top:1px solid var(--linea);
}
.casa .persona .ini{
  width:20px; height:20px; border-radius:50%; background:var(--hueso-2);
  display:grid; place-items:center; font-size:.55rem; font-weight:600; flex:none; color:var(--gris);
}
.casa .persona em{ font-style:normal; margin-left:auto; font-size:.62rem; font-family:var(--f-mono) }
.casa .persona.ok em{ color:var(--azul) }
.casa .persona.falta em{ color:var(--rojo) }
.casa .accion-masiva{
  margin-top:.7rem; background:var(--azul); color:#fff; text-align:center;
  font-size:.7rem; font-weight:500; padding:.45rem; border-radius:6px;
}

/* --- resumen de texto abierto --- */
.casa .cita{
  font-size:.66rem; color:var(--gris); font-style:italic; padding:.3rem 0 .3rem .5rem;
  border-left:2px solid var(--linea); margin-bottom:.3rem;
}
.casa .sintesis{
  background:rgba(37,99,235,.06); border:1px solid rgba(37,99,235,.25);
  border-radius:7px; padding:.6rem .7rem; font-size:.7rem; line-height:1.5; margin-top:.6rem;
}
/* Solo el PRIMER `<b>` es el rótulo; los de adentro resaltan media frase y no deben
   romper el renglón. La misma trampa que en `.regla b`. */
.casa .sintesis > b:first-child{ display:block; font-family:var(--f-mono); font-size:.58rem; color:var(--azul); letter-spacing:.08em; margin-bottom:.25rem }
.casa .sintesis b{ font-weight:600 }

/* --- comparativo entre años --- */
.casa .anios{ display:grid; grid-template-columns:74px 1fr 1fr; gap:.4rem; font-size:.66rem; align-items:center; margin-bottom:.35rem }
.casa .anios .et{ color:var(--gris); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.casa .anios .bar{ height:14px; border-radius:3px; background:var(--hueso-2); position:relative; overflow:hidden }
.casa .anios .bar i{ position:absolute; inset:0 auto 0 0; background:var(--gris-claro); opacity:.45 }
.casa .anios .bar.hoy i{ background:var(--azul); opacity:1 }
.casa .anios .bar.baja i{ background:var(--rojo) }
.casa .anios .bar span{ position:absolute; right:4px; top:0; line-height:14px; font-size:.58rem; font-family:var(--f-mono); font-weight:600 }
.casa .encabeza-anios{ display:grid; grid-template-columns:74px 1fr 1fr; gap:.4rem; font-family:var(--f-mono); font-size:.55rem; color:var(--gris); margin-bottom:.4rem; letter-spacing:.08em }

/* --- perfil público visto por la empresa --- */
.casa .ficha-pub{ display:flex; gap:.6rem; align-items:flex-start; margin-bottom:.7rem }
.casa .ficha-pub .foto{ width:34px; height:34px; border-radius:50%; flex:none; background:linear-gradient(140deg,var(--azul),var(--rojo)); display:grid; place-items:center; color:#fff; font-size:.75rem; font-weight:600 }
.casa .ficha-pub b{ display:block; font-size:.82rem; font-weight:600 }
.casa .ficha-pub span{ display:block; font-size:.65rem; color:var(--gris) }
.casa .encaje{
  margin-left:auto; text-align:right; font-family:var(--f-mono);
}
.casa .encaje b{ font-size:1.05rem; color:var(--azul) }
.casa .encaje span{ font-size:.55rem; letter-spacing:.08em }
.casa .privado{
  margin-top:.6rem; padding:.5rem .6rem; border:1px dashed var(--linea); border-radius:6px;
  font-size:.63rem; color:var(--gris);
}

/* --- pantallas de plataforma --- */
.casa .renglon{
  display:flex; align-items:center; gap:.5rem; font-size:.7rem;
  padding:.42rem 0; border-top:1px solid var(--linea);
}
.casa .renglon:first-of-type{ border-top:0 }
.casa .renglon .pastilla{
  font-family:var(--f-mono); font-size:.54rem; padding:.12rem .38rem; border-radius:3px;
  background:var(--hueso-2); color:var(--gris); letter-spacing:.06em;
}
.casa .renglon .pastilla.viva{ background:rgba(37,99,235,.12); color:var(--azul) }
.casa .renglon .pastilla.alto{ background:rgba(225,29,72,.1); color:var(--rojo) }
.casa .renglon em{ font-style:normal; margin-left:auto; color:var(--gris); font-size:.62rem; font-family:var(--f-mono) }

.casa .cadena{ font-family:var(--f-mono); font-size:.58rem; line-height:1.9 }
.casa .cadena .eslabon{ display:flex; gap:.45rem; align-items:baseline }
.casa .cadena .h{ color:var(--azul); flex:none }
.casa .cadena .q{ color:var(--negro) }
.casa .candado{
  margin-top:.6rem; padding:.45rem .6rem; border-radius:6px; font-size:.63rem;
  background:rgba(37,99,235,.07); border:1px solid rgba(37,99,235,.25); color:var(--negro);
}

.casa .ruteo{ display:grid; gap:.42rem }
.casa .via{ border:1px solid var(--linea); border-radius:7px; padding:.5rem .6rem; font-size:.68rem }
.casa .via .tarea{ font-weight:600; font-size:.72rem; display:flex; align-items:center; gap:.4rem }
.casa .via .flecha{ color:var(--gris); font-size:.62rem; margin-top:.25rem }
.casa .via .flecha b{ color:var(--azul); font-weight:600 }
.casa .via.pii{ border-color:rgba(225,29,72,.4); background:rgba(225,29,72,.04) }
.casa .via.pii .flecha b{ color:var(--rojo) }
.casa .via .marca-pii{
  font-family:var(--f-mono); font-size:.5rem; letter-spacing:.08em; padding:.1rem .3rem;
  border-radius:3px; background:rgba(225,29,72,.14); color:var(--rojo);
}

.casa .silos{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:.4rem; margin-bottom:.6rem }
.casa .silo{
  border:1px solid var(--linea); border-radius:6px; padding:.5rem .35rem; text-align:center;
  font-size:.58rem; color:var(--gris);
}
.casa .silo b{ display:block; font-size:.64rem; color:var(--negro); font-weight:600; margin-bottom:.2rem }
.casa .silo.propia{ border-color:var(--azul); background:rgba(37,99,235,.05) }
.casa .muro{
  text-align:center; font-family:var(--f-mono); font-size:.55rem; color:var(--rojo);
  letter-spacing:.08em; padding:.35rem 0;
}

/* ═══════════════════════════════════════════════════════════════════════════════
 * EL CATÁLOGO DE MÓDULOS — la tesis del Odoo de RH (SEMILLA §1.1)
 *
 * Se dibuja como rejilla de aplicaciones y no como lista con viñetas a propósito: la
 * forma comunica la tesis antes que el texto. Una lista dice «esto también lo hacemos»;
 * una rejilla de módulos dice «esto se enciende cuando lo necesites».
 * ═══════════════════════════════════════════════════════════════════════════════ */

.casa .catalogo{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(215px,100%),1fr)); gap:.7rem }
.casa .modulo{
  border:1px solid var(--linea-noche); border-radius:10px; padding:1rem;
  background:rgba(255,255,255,.02); position:relative; transition:border-color .2s,background .2s,transform .2s;
}
.casa .modulo:hover{ border-color:rgba(59,130,246,.45); background:rgba(37,99,235,.07); transform:translateY(-2px) }
.casa .modulo .icono{
  width:30px; height:30px; border-radius:7px; display:grid; place-items:center;
  background:rgba(59,130,246,.14); color:var(--azul-neon); font-size:.9rem; margin-bottom:.7rem;
}
.casa .modulo b{ display:block; font-size:.92rem; font-weight:600; color:#fff; letter-spacing:-.01em }
.casa .modulo span{ display:block; font-size:.78rem; color:var(--gris); margin-top:.22rem; line-height:1.45 }
.casa .modulo .marca{
  position:absolute; top:.85rem; right:.85rem;
  font-family:var(--f-mono); font-size:.52rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.14rem .4rem; border-radius:3px;
}
.casa .modulo .marca.nucleo{ background:rgba(59,130,246,.18); color:var(--azul-neon) }
.casa .modulo .marca.enciende{ background:rgba(148,163,184,.12); color:var(--gris-claro) }
.casa .modulo .marca.nom{ background:rgba(225,29,72,.16); color:var(--rojo-vivo) }

.casa .modulo.esNucleo{ border-color:rgba(59,130,246,.4); background:rgba(37,99,235,.08) }
.casa .modulo.esNorma{ border-color:rgba(225,29,72,.35) }
.casa .modulo.esNorma .icono{ background:rgba(225,29,72,.14); color:var(--rojo-vivo) }

.casa .interruptor-demo{
  margin-top:2rem; padding:1.1rem 1.25rem; border:1px dashed rgba(59,130,246,.4);
  border-radius:10px; background:rgba(37,99,235,.05); font-size:.9rem;
}
.casa .interruptor-demo b{ color:#fff }

/* ═══════════════════════════════════════════════════════════════════════════════
 * LAS PANTALLAS DEL CANDIDATO
 *
 * Nacieron porque la cara B2C enseñaba, en dos de seis pantallas, la vista de la
 * EMPRESA — «perfil como lo ve una empresa», «la bolsa, vista empresa». A quien busca
 * trabajo no le interesa cómo lo ve el reclutador ni si dos patrones se ven entre sí:
 * le interesa qué le falta, cómo conseguirlo y quién lo está mirando.
 * ═══════════════════════════════════════════════════════════════════════════════ */

/* `.medida` y `.riel` se escribieron para el panel oscuro; dentro de un `marquito`
   —que es blanco— el gris claro quedaba casi invisible. */
.casa .marquito .medida span{ color:var(--gris) }
.casa .marquito .medida span b{ color:var(--negro) }
.casa .riel.claro{ background:var(--hueso-2) }

/* --- el plan de carrera --- */
.casa .meta{
  display:flex; gap:.55rem; align-items:flex-start;
  padding:.42rem 0; border-top:1px solid var(--linea);
}
.casa .meta:first-of-type{ border-top:0 }
.casa .meta i{
  width:13px; height:13px; border-radius:50%; flex:none; margin-top:.22rem;
  border:1.5px solid var(--linea);
}
.casa .meta b{ display:block; font-size:.74rem; font-weight:600 }
.casa .meta span{ display:block; font-size:.63rem; color:var(--gris) }
.casa .meta.hecha i{ border-color:var(--azul); background:var(--azul); box-shadow:inset 0 0 0 2.5px #fff }
.casa .meta.ahora i{ border-color:var(--azul); box-shadow:0 0 0 3px rgba(37,99,235,.14) }
.casa .meta.ahora b{ color:var(--azul) }

/* --- lo que está bajo llave --- */
.casa .candadito{ font-style:normal; font-size:.62rem; opacity:.55 }
.casa .campo.cerrado{ opacity:.62; border-style:dashed }
/* `.tramite` solo tiene `border-top`; poner `border-style:dashed` a secas les da a los
   otros tres lados su ancho por omisión (`medium`, 3px) y dibuja una caja completa que
   además empuja el contenido fuera de la tarjeta. Solo el lado que existe. */
.casa .tramite.cerrado{ opacity:.62; border-top-style:dashed }
.casa .campo.apagado{ border-style:dashed }
.casa .campo.apagado span{ color:var(--gris) }
.casa .campo.apagado em{ color:var(--azul); font-weight:600 }

/* --- ofertas que llegan --- */
.casa .oferta{
  border:1px solid var(--linea); border-radius:8px; padding:.6rem .7rem; margin-bottom:.45rem;
}
.casa .oferta .top{ display:flex; justify-content:space-between; align-items:center; gap:.5rem }
.casa .oferta .top b{ font-size:.76rem; font-weight:600 }
.casa .oferta > span{ display:block; font-size:.64rem; color:var(--gris); margin-top:.1rem }
.casa .encaje-mini{
  font-family:var(--f-mono); font-size:.62rem; font-weight:600; flex:none;
  color:var(--azul); background:rgba(37,99,235,.1); padding:.1rem .35rem; border-radius:4px;
}
.casa .botones-mini{ display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.5rem }
.casa .mini{ font-size:.62rem; padding:.25rem .5rem; border-radius:5px; border:1px solid var(--linea) }
.casa .mini.si{ background:var(--azul); border-color:var(--azul); color:#fff; font-weight:500 }

/* --- trámites --- */
.casa .tramite{
  display:grid; grid-template-columns:1fr auto; gap:.1rem .5rem;
  padding:.45rem 0; border-top:1px solid var(--linea); font-size:.7rem;
}
.casa .tramite:first-of-type{ border-top:0 }
.casa .tramite b{ font-size:.74rem; font-weight:600 }
.casa .tramite span{ grid-column:1; font-size:.62rem; color:var(--gris) }
.casa .tramite em{
  grid-row:1/3; grid-column:2; align-self:center; font-style:normal;
  font-family:var(--f-mono); font-size:.6rem; color:var(--azul);
}

.casa .silos.dos{ grid-template-columns:1fr 1fr }

/* `.via` traía estructura `.tarea`/`.flecha`; estas pantallas la usan con b/span/em. */
.casa .via b{ display:block; font-size:.74rem; font-weight:600 }
.casa .via > span{ display:block; font-size:.62rem; color:var(--gris) }
.casa .via em{
  display:block; font-style:normal; font-family:var(--f-mono);
  font-size:.6rem; color:var(--azul); margin-top:.25rem;
}
.casa .via.segura{ border-color:rgba(225,29,72,.4); background:rgba(225,29,72,.04) }
.casa .via.segura em{ color:var(--rojo) }

/* comparativo antes/después sin barras */
.casa .anios .v{
  font-family:var(--f-mono); font-size:.62rem; color:var(--gris); text-align:center;
  background:var(--hueso-2); border-radius:4px; padding:.2rem .4rem;
}
.casa .anios .v.mejor{ color:var(--azul); background:rgba(37,99,235,.1); font-weight:600 }

/* ═══════════════════════════════════════════════════════════════════════════════
 * EL MOTOR COMERCIAL
 *
 * Se enseña la mecánica y jamás una cifra. Un número puesto en una página se vuelve
 * el ancla de toda negociación posterior, y esa negociación no se tiene aquí. Pero
 * una plataforma que no dice de qué vive se lee como incompleta, no como discreta.
 * ═══════════════════════════════════════════════════════════════════════════════ */

.casa .motores{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(258px,100%),1fr)); gap:1rem; margin-top:.5rem;
}
.casa .motor{ border:1px solid var(--linea); border-radius:12px; padding:1.35rem }
.casa .motor .num{ font-family:var(--f-mono); font-size:.66rem; color:var(--azul); letter-spacing:.1em }
.casa .motor h3{ font-size:1.05rem; font-weight:600; letter-spacing:-.015em; margin:.45rem 0 .5rem }
.casa .motor p{ font-size:.88rem; color:var(--gris) }
.casa .motor .nota{
  display:block; margin-top:.85rem; padding-top:.7rem; border-top:1px dashed var(--linea);
  font-size:.76rem; color:var(--azul);
}

/* tarjeta oscura sobre sección clara: da contraste sin volver oscura la sección */
.casa .lienzo.oscuro{ background:var(--negro-2); border-color:var(--negro-3) }

.casa .planes{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(278px,100%),1fr)); gap:1rem; margin-top:.5rem;
}
.casa .plan-c{ border:1px solid var(--linea); border-radius:12px; padding:1.5rem }
.casa .plan-c.destacado{ border-color:var(--azul); box-shadow:0 0 0 3px rgba(37,99,235,.07) }
.casa .plan-c .tira{
  display:inline-block; font-family:var(--f-mono); font-size:.6rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--azul); background:rgba(37,99,235,.1);
  padding:.2rem .5rem; border-radius:4px;
}
.casa .plan-c h3{ font-size:1.3rem; font-weight:600; letter-spacing:-.02em; margin:.7rem 0 .85rem }
.casa .plan-c ul{ list-style:none; display:grid; gap:.45rem }
.casa .plan-c li{ font-size:.86rem; padding-left:1.25rem; position:relative }
.casa .plan-c li::before{ content:"✓"; position:absolute; left:0; color:var(--azul); font-size:.78rem }
.casa .cierre-plan{
  margin-top:1.1rem; padding-top:.85rem; border-top:1px solid var(--linea);
  font-size:.82rem; color:var(--gris);
}
.casa .cierre-plan b{ color:var(--negro) }

/* `.interruptor-demo` se escribió para zona oscura y su `b` es blanco; en una sección
   clara eso es blanco sobre blanco. Mismo error que ya se pagó en el h1 de /plan. */
.casa section:not(.noche) .interruptor-demo b{ color:var(--negro) }

/* --- las reglas del taller (en /plan) --- */
.casa .regla .lema{
  font-family:var(--f-display); font-style:italic; font-size:1.05rem;
  color:var(--azul-neon); margin-top:.35rem; line-height:1.35;
}
.casa .regla.comercial .marca{ color:var(--rojo-vivo) }

/* ---------- la puerta (entrar) ---------- */

.casa.puerta{ background:var(--negro); color:#fff; min-height:100vh; min-height:100dvh }
.casa .caja-puerta{
  max-width:24rem; margin:0 auto; padding:clamp(2.5rem,10vh,6rem) 1.25rem 3rem;
  display:flex; flex-direction:column; gap:1.25rem;
}
.casa .caja-puerta .logo{ color:#fff; justify-content:center }

.casa .tarjeta-puerta{
  background:var(--negro-2); border:1px solid var(--linea-noche); border-radius:14px;
  padding:1.75rem 1.5rem;
}
.casa .tarjeta-puerta h1{
  font-family:var(--f-display); font-size:1.9rem; font-weight:400;
  letter-spacing:-.02em; line-height:1.1;
}
.casa .pie-puerta{ font-size:.85rem; color:var(--gris-claro); margin-top:.35rem }
.casa .pie-puerta:empty{ display:none }
.casa .caja-puerta > .pie-puerta{ text-align:center; padding:0 .5rem }
.casa .pie-puerta a{ color:var(--azul-neon); text-decoration:underline }
/* Un enlace de acceso no tiene espacios donde quebrar: sin esto desborda la tarjeta
   en móvil, que es justo el ancho donde más se usa. */
.casa .quiebra{ word-break:break-all; font-family:var(--f-mono); font-size:.72rem }

.casa .forma-puerta{ display:flex; flex-direction:column; gap:.35rem; margin-top:1.25rem }
.casa .forma-puerta label{
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gris-claro); margin-top:.75rem;
}
.casa .forma-puerta input{
  width:100%; padding:.7rem .8rem; border-radius:8px; color:#fff;
  border:1px solid var(--linea-noche); background:var(--negro-3);
  font-family:var(--f-cuerpo); font-size:1rem;  /* 16px: menos hace que iOS haga zoom */
}
.casa .forma-puerta input:focus{ outline:2px solid var(--azul-vivo); outline-offset:1px }
.casa .forma-puerta .boton{ margin-top:1.4rem; width:100%; justify-content:center }

.casa .aviso{
  margin-top:1.1rem; padding:.65rem .8rem; border-radius:8px; font-size:.86rem;
  border:1px solid rgba(59,130,246,.35); background:rgba(37,99,235,.12);
  color:var(--azul-neon);
}
.casa .aviso.malo{
  border-color:rgba(225,29,72,.4); background:rgba(225,29,72,.12); color:var(--rojo-vivo);
}

/* ═══════════════════════════════════════════════════════════════════════════════
 * EL INTERRUPTOR — se OCULTA lo que no toca, y no se revela lo que sí.
 *
 * La versión anterior hacía lo natural: `.solo-b2b{display:none}` y luego
 * `#es-empresa:checked ~ main .solo-b2b{display:revert}`. Se rompió dos veces y por la
 * misma causa: `revert` devuelve el display POR OMISIÓN del elemento —`block` en un
 * div, `inline` en un span— y por lo tanto PISA cualquier `display:grid` o
 * `display:flex` que la propia clase del elemento le hubiera puesto. Los 16 módulos del
 * catálogo se apilaron en una columna; después los planes hicieron lo mismo. Cada vez
 * se parchaba listando el contenedor nuevo, que es una lista que hay que acordarse de
 * actualizar — o sea, una trampa con cuenta abierta.
 *
 * Esta versión no toca el `display` del lado visible NUNCA: solo pone `display:none` en
 * el lado que no está elegido. Lo visible conserva el display que le den sus propias
 * reglas, sea grid, flex o lo que se invente después. Se acabó la lista.
 *
 * Va al final del archivo porque compite en especificidad (0,3,0) con reglas de
 * `display` escritas arriba, y ahí gana por orden — que es lo correcto: ocultar es más
 * fuerte que maquetar.
 *
 * Si ningún radio estuviera marcado se verían las dos caras. Es la degradación buena:
 * el HTML trae `checked` en `#es-empresa`, y ante una falla rara es mejor enseñar de
 * más que dejar la página en blanco.
 * ═══════════════════════════════════════════════════════════════════════════════ */

.casa #es-persona:checked ~ main .solo-b2b,
.casa #es-empresa:checked ~ main .solo-b2c{ display:none }