/* ============================================================
   cortex.css — la bifurcación del hero y el tramo del Córtex.

   Se apoya en el vocabulario que ya trae stratum.css (.section, .wrap,
   .sec-head, .lede, .rise, .btn…) y sólo agrega lo propio. Nada de acá
   redefine una clase compartida: el tramo nuevo tiene que sentirse la misma
   página, no un injerto.
   ============================================================ */

 /* ── Ocultar de verdad ────────────────────────────────────
   `.dotnav { display: flex }` de stratum.css le gana al `[hidden]` del navegador
   —un selector de clase pesa más que la regla de agente de usuario—, así que las
   DOS navegaciones se dibujaban una encima de la otra en la misma posición fija.
   Lo mismo pasaría con cualquier clase futura que declare display. */
.dotnav[hidden], .track[hidden], [hidden] { display: none !important; }

/* ── La bifurcación del hero ─────────────────────────────── */
.elige {
  display: flex; gap: 14px; flex-wrap: wrap; justify-content: center;
  margin-top: 26px;
}
.elige-op {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 236px; padding: 20px 18px 16px;
  cursor: pointer; text-align: center;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(42, 42, 42, 0.14);
  border-radius: 3px;
  font-family: inherit; color: inherit;
  backdrop-filter: blur(6px);
  transition: transform 260ms cubic-bezier(.2,.7,.3,1), border-color 260ms, box-shadow 260ms;
}
.elige-op:hover, .elige-op:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(42, 42, 42, 0.4);
  box-shadow: 0 10px 26px rgba(42, 42, 42, 0.1);
  outline: none;
}
.elige-op--on { border-color: rgba(42,42,42,.55); box-shadow: 0 8px 20px rgba(42,42,42,.12); }
.elige-fig { display: block; height: 56px; line-height: 0; margin-bottom: 6px; }
.elige-n { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.elige-d { font-size: 12px; line-height: 1.4; color: var(--muted, #6b6b66); }
.elige-e {
  margin-top: 8px; padding: 2px 9px;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  border: 1px solid rgba(42,42,42,.28); border-radius: 2px;
}
.elige-e--soon { opacity: 0.55; }

@media (max-width: 560px) {
  .elige-op { width: 100%; max-width: 320px; }
}

/* ── C01 · Qué es ────────────────────────────────────────── */
.cx-intro {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 44px; align-items: start;
  margin-top: 30px;
}
.cx-cifras { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.cx-cifras li { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid rgba(42,42,42,.12); padding-top: 10px; }
.cx-cifras b { font-size: 30px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.cx-cifras span { font-size: 11.5px; color: var(--muted, #6b6b66); }

/* ── C02 · El grafo ──────────────────────────────────────── */
.cx-stage {
  position: relative; margin-top: 28px;
  border: 1px solid rgba(42,42,42,.12);
  background: #f7f6f3;
  overflow: hidden;
}
.cx-stage canvas { display: block; width: 100%; touch-action: pan-y; }
.cx-stage .stage-note {
  position: absolute; left: 14px; bottom: 10px; margin: 0;
  font-size: 10.5px; color: var(--muted, #6b6b66); pointer-events: none;
}
.cx-lex { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 30px; }
.cx-lex-i { font-size: 12.5px; line-height: 1.6; color: var(--muted, #6b6b66); }
.cx-lex-i b { display: block; margin: 8px 0 4px; font-size: 13.5px; color: var(--ink, #2a2a2a); }
.cx-dot { display: block; width: 13px; height: 13px; border-radius: 50%; background: var(--c); }
.cx-dot--hueco { background: none; border: 2px solid var(--c); }
.cx-line { display: block; width: 34px; height: 0; border-top: 2px dashed rgba(42,42,42,.5); margin-top: 6px; }

/* ── C03 · Las familias ──────────────────────────────────── */
.cx-fams { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 30px; }
.cx-fam {
  padding: 20px 18px; border: 1px solid rgba(42,42,42,.12);
  border-top: 3px solid var(--c); background: rgba(255,255,255,.5);
  display: flex; flex-direction: column; gap: 8px;
}
.cx-fam-n { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; color: var(--c); }
.cx-fam h3 { margin: 0; font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; }
.cx-fam p { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--muted, #6b6b66); }
.cx-fam-q {
  margin-top: auto; padding-top: 10px; border-top: 1px dotted rgba(42,42,42,.2);
  font-size: 11px; font-style: italic; color: var(--c);
}

/* ── C04 · La cita ───────────────────────────────────────── */
.cx-cita {
  margin-top: 28px; border: 1px solid rgba(42,42,42,.14);
  background: rgba(255,255,255,.55);
  display: grid; grid-template-columns: 1fr auto; align-items: stretch;
}
.cx-cita-doc { padding: 20px 22px; min-height: 108px; }
.cx-cita-tag {
  display: block; margin-bottom: 8px;
  font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted, #6b6b66);
}
.cx-cita-txt {
  margin: 0; font-size: 14px; line-height: 1.6; font-style: italic;
  border-left: 2px solid rgba(42,42,42,.2); padding-left: 12px;
  transition: border-color 300ms;
}
.cx-cita-txt mark { background: rgba(158,58,38,.18); color: #9e3a26; font-style: normal; font-weight: 600; }
.cx-cita-check {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-end;
  gap: 5px; padding: 20px 22px; min-width: 210px;
  border-left: 1px solid rgba(42,42,42,.12);
  background: rgba(42,42,42,.03);
}
.cx-cita-estado { font-size: 11.5px; font-weight: 600; text-align: right; }
.cx-cita-pct { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.cx-cita[data-fase="ok"] .cx-cita-txt { border-left-color: #4e6b58; }
.cx-cita[data-fase="ok"] .cx-cita-estado,
.cx-cita[data-fase="ok"] .cx-cita-pct { color: #4e6b58; }
.cx-cita[data-fase="mal"] .cx-cita-txt { border-left-color: #9e3a26; }
.cx-cita[data-fase="mal"] .cx-cita-estado,
.cx-cita[data-fase="mal"] .cx-cita-pct { color: #9e3a26; }

/* ── C05 · La disputa ────────────────────────────────────── */
.cx-disputa { margin-top: 28px; }
.cx-disputa-q {
  margin: 0 0 20px; font-size: 17px; font-weight: 700; line-height: 1.45;
  padding-left: 14px; border-left: 3px solid #9e3a26;
}
.cx-disputa-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cx-pos {
  position: relative; padding: 22px 20px 20px;
  border: 1px solid rgba(42,42,42,.12); background: rgba(255,255,255,.5);
}
.cx-pos-n {
  position: absolute; top: -12px; left: 18px;
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: #9e3a26; color: #f7f6f3; font-size: 12px; font-weight: 700;
}
.cx-pos b { display: block; margin-bottom: 6px; font-size: 14.5px; }
.cx-pos p { margin: 0 0 12px; font-size: 12.5px; line-height: 1.6; color: var(--muted, #6b6b66); }
.cx-pos blockquote {
  margin: 0; padding-left: 12px; border-left: 2px solid rgba(158,58,38,.35);
  font-size: 12px; line-height: 1.55; font-style: italic;
}
.cx-pos cite { display: block; margin-top: 6px; padding-left: 12px; font-size: 10.5px; font-style: normal; color: var(--muted, #6b6b66); }
.cx-disputa-pie { margin: 20px 0 0; font-size: 12.5px; font-style: italic; color: var(--muted, #6b6b66); text-align: center; }

/* ── C06 · El tutor ──────────────────────────────────────── */
.cx-tutor {
  margin-top: 28px; padding: 26px 28px 20px;
  border: 1px solid rgba(42,42,42,.14); background: rgba(255,255,255,.5);
  min-height: 190px; display: flex; flex-direction: column;
}
.cx-tutor-q { margin: 0 0 18px; font-size: 15px; font-weight: 700; }
.cx-tutor-q::before { content: '— '; color: #9e3a26; }
.cx-tutor-paso { flex: 1; }
.cx-tutor-donde {
  display: block; margin-bottom: 6px;
  font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: #3d566b; transition: color 240ms;
}
.cx-tutor[data-disputa="true"] .cx-tutor-donde { color: #9e3a26; }
.cx-tutor-txt { margin: 0; font-size: 14.5px; line-height: 1.65; min-height: 3em; }
.cx-tutor-barra { height: 2px; background: rgba(42,42,42,.1); margin-top: 16px; }
.cx-tutor-barra span { display: block; height: 100%; width: 0; background: #9e3a26; transition: width 500ms ease; }

/* ── C07 · Entrar ────────────────────────────────────────── */
.cx-entrar-fig { display: block; line-height: 0; margin: 0 auto 18px; height: 72px; }

/* ── Adaptación ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .cx-intro { grid-template-columns: 1fr; gap: 28px; }
  .cx-cifras { grid-template-columns: 1fr 1fr; }
  .cx-lex { grid-template-columns: 1fr; gap: 20px; }
  .cx-fams { grid-template-columns: 1fr 1fr; }
  .cx-disputa-cols { grid-template-columns: 1fr; gap: 26px; }
  .cx-cita { grid-template-columns: 1fr; }
  .cx-cita-check { border-left: none; border-top: 1px solid rgba(42,42,42,.12); align-items: flex-start; }
}
@media (max-width: 560px) {
  .cx-fams, .cx-cifras { grid-template-columns: 1fr; }
}
/* Aviso del botón que copia la dirección. */
.cx-copiado {
  margin: 10px 0 0; font-size: 11.5px; color: var(--muted, #6b6b66); text-align: center;
}

/* ── Solicitud de acceso ──────────────────────────────────── */
.sol { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; }
.sol-fondo { position: absolute; inset: 0; background: rgba(42,42,42,.42); backdrop-filter: blur(3px); }
.sol-caja {
  position: relative; width: min(540px, 100%); max-height: 90vh; overflow-y: auto;
  padding: 30px 32px 26px;
  background: #f7f6f3; border: 1px solid rgba(42,42,42,.2);
  box-shadow: 6px 6px 0 rgba(42,42,42,.1);
  animation: sol-entra 320ms cubic-bezier(.2,.7,.3,1);
}
@keyframes sol-entra { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
.sol-x {
  position: absolute; top: 12px; right: 14px; width: 30px; height: 30px;
  background: none; border: none; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--muted, #6b6b66);
}
.sol-x:hover { color: var(--ink, #2a2a2a); }
.sol-caja h2 { margin: 0 0 8px; font-size: 20px; font-weight: 700; letter-spacing: -.015em; }
.sol-sub { margin: 0 0 22px; font-size: 12.5px; line-height: 1.6; color: var(--muted, #6b6b66); }

.sol-form { display: grid; gap: 14px; }
.sol-form label { display: grid; gap: 5px; }
.sol-form label > span { font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.sol-form input, .sol-form textarea {
  width: 100%; box-sizing: border-box; padding: 8px 10px;
  font-family: inherit; font-size: 13px; color: var(--ink, #2a2a2a);
  background: rgba(255,255,255,.7); border: 1px solid rgba(42,42,42,.28);
  border-radius: 2px; resize: vertical;
}
.sol-form input:focus, .sol-form textarea:focus { outline: 2px solid #9e3a26; outline-offset: 1px; }
.sol-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* La trampa se saca del flujo sin `display:none`: hay robots que ignoran lo oculto
   por display, y ninguno que ignore un campo que igual existe y es enfocable. */
.sol-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.sol-msg { margin: 0; font-size: 12px; line-height: 1.5; }
.sol-msg[data-tipo="mal"] { color: #9e3a26; font-weight: 600; }
.sol-msg[data-tipo="bien"] { color: #4e6b58; font-weight: 600; }

.sol-acciones { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 4px; }
.sol-cancelar {
  background: none; border: none; cursor: pointer; padding: 8px 4px;
  font-family: inherit; font-size: 12px; color: var(--muted, #6b6b66);
}
.sol-cancelar:hover { color: var(--ink, #2a2a2a); text-decoration: underline; }

@media (max-width: 520px) {
  .sol-caja { padding: 26px 20px 22px; }
  .sol-fila { grid-template-columns: 1fr; }
}

/* ── Las dos puertas del cierre del Córtex ────────────────── */
.cx-puertas { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; align-items: center; }
/* Secundario: mismo peso tipográfico, sin el relleno. Que las dos se vean igual de
   importantes obligaría a leerlas para elegir, y una de las dos es claramente la de
   quien vuelve. */
.btn--linea {
  background: none !important;
  border: 1px solid rgba(42,42,42,.4) !important;
  color: var(--ink, #2a2a2a) !important;
}
.btn--linea:hover { border-color: rgba(42,42,42,.75) !important; }