/* LA PORTADA DE SIMEDIME · 17/10/2026, pedida por María: «como la de naosfor.me,
   que es de la misma casa». Un pasillo horizontal de ocho pantallas, una idea
   cada una, alternando tinta y papel, con el índice abajo (más pequeño que el
   de NAOS: «a lo mejor no tan grande»). La estructura es la de NAOS; la piel es
   la de simedime: Archivo e IBM Plex Mono, el rojo de marca sobre papel y el
   acento claro #F0894E sobre tinta, que se lee mejor que el rojo (decidido en la
   presentación).

   No carga sime.css: aquí no hay panel ni recuadro, y sus .cabecera, .boton y
   h1/h2 se pegarían. Los tokens son los mismos, copiados. */

:root {
  --papel: #FAF7F2; --tinta: #111214; --tinta-2: #1C1D20; --acento: #E1442A; --acento-claro: #F0894E;
  --linea: #E4DFD6; --gris: #6E6E72; --gris2: #3A3B40; --apagado: #8A867E; --hueco: #C7C3BA;
  --blanco: #FFFFFF;
  --suave: rgba(255,255,255,0.74); --tenue: rgba(255,255,255,0.5); --raya: rgba(255,255,255,0.16);
  --sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --cabecera: 60px; --indice: 44px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body { background: var(--tinta); color: var(--blanco); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--acento-claro); outline-offset: 2px; }
.mono { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.claro .o { color: var(--acento); }
.oscuro .o, .cabecera .o { color: var(--acento-claro); }
.envoltura { width: 100%; max-width: 1120px; margin: auto; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }

/* Cabecera */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--tinta); }
.cabecera { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; z-index: 10; background: rgba(17,18,20,0.96); box-shadow: 0 1px 0 var(--raya); }
.cabecera .envoltura { display: flex; align-items: center; gap: 12px; height: var(--cabecera); margin: 0 auto; }
.logo { font-weight: 800; font-size: 20px; letter-spacing: -0.03em; color: #fff; margin-right: auto; }
.boton { display: inline-block; font: 500 14px var(--sans); padding: 11px 20px; border: 1.5px solid currentColor; cursor: pointer; background: none; color: inherit; transition: background .2s, color .2s, border-color .2s; }
.boton:hover { background: #fff; border-color: #fff; color: var(--tinta); }
.claro .boton:hover { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.boton.lleno { background: var(--acento); border-color: var(--acento); color: #fff; }
.boton.lleno:hover { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.oscuro .boton.lleno { background: var(--acento-claro); border-color: var(--acento-claro); color: var(--tinta); }
.oscuro .boton.lleno:hover { background: #fff; border-color: #fff; }
.boton:disabled { opacity: .6; cursor: wait; }
.cabecera .boton { padding: 7px 14px; font-size: 13px; }
.solo-movil { display: none; }

/* El conmutador de idioma, sobre tinta: blanco translúcido y el puesto en el acento claro. */
.sm-idiomas { display: flex; gap: 0; margin-left: 4px; }
.sm-idioma { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; padding: 2px 7px; line-height: 1.5; cursor: pointer; background: transparent; color: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.34); }
.sm-idioma + .sm-idioma { border-left: 0; }
.sm-idioma:hover { color: #fff; border-color: rgba(255,255,255,.7); }
.sm-idioma.sm-puesto { background: var(--acento-claro); border-color: var(--acento-claro); color: var(--tinta); font-weight: 600; }

/* El pasillo */
.pasillo { position: fixed; top: 0; left: 0; width: 100vw; height: 100%; display: flex; transition: transform .6s cubic-bezier(.65,0,.35,1); will-change: transform; }
.diapo { flex: 0 0 100vw; width: 100vw; height: 100%; overflow-y: auto; overscroll-behavior: contain; display: flex; padding-block: calc(var(--cabecera) + env(safe-area-inset-top, 0px) + 32px) calc(var(--indice) + env(safe-area-inset-bottom, 0px) + 32px); }
.claro { background: var(--papel); color: var(--tinta); }
.oscuro { background: var(--tinta); color: #fff; }
.diapo .etiqueta { display: block; margin-bottom: 18px; }
.claro .etiqueta { color: var(--gris); }
.oscuro .etiqueta { color: var(--tenue); }
h1, h2 { font-weight: 800; letter-spacing: -0.04em; text-wrap: balance; }
h2 { font-size: clamp(30px, 4.2vw, 54px); line-height: 1.02; max-width: 960px; }
h3 { font-weight: 700; font-size: 19px; letter-spacing: -0.01em; line-height: 1.25; }
p { font-size: 16px; line-height: 1.6; }
.claro p { color: var(--gris2); }
.oscuro p { color: var(--suave); }
.entrada { font-size: clamp(17px, 1.6vw, 21px); line-height: 1.5; margin-top: 20px; max-width: 680px; }
.fuente { font: 400 11px/1.6 var(--mono); margin-top: 22px; letter-spacing: .02em; max-width: 960px; }
.oscuro .fuente { color: var(--tenue); }
.claro .fuente { color: var(--gris); }

/* 1 · Hola: el titular y la contraseña */
.hola { position: relative; overflow-x: hidden; }
.hola::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse at 70% 40%, #000 0%, transparent 70%); pointer-events: none; }
.hola .envoltura { position: relative; }
.hola h1 { font-size: clamp(42px, 6.4vw, 88px); line-height: .96; max-width: 980px; }
.hola .lema { margin-top: 22px; max-width: 600px; font-size: clamp(16px, 1.4vw, 19px); color: #C9C5BD; }
.acciones { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }
/* La contraseña vive en «El piloto», debajo de las condiciones (17/10/2026). */
.puerta { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--raya); max-width: 520px; display: grid; gap: 8px; }
.puerta label { font-size: 13px; font-weight: 600; color: #C9C5BD; }
.puerta .linea { display: flex; gap: 10px; }
.puerta input { flex: 1 1 auto; min-width: 0; font: 400 16px var(--sans); color: #fff; background: var(--tinta-2); border: 1px solid var(--gris2); padding: 11px 13px; border-radius: 0; }
.puerta input::placeholder { color: var(--apagado); }
.puerta input:focus { outline: 2px solid var(--acento-claro); outline-offset: -1px; }
.puerta .boton { flex-shrink: 0; background: #fff; color: var(--tinta); border-color: #fff; }
.puerta .boton:hover { background: #F6F4EF; border-color: #F6F4EF; }
.puerta .error { min-height: 1.3em; font-size: 14px; color: var(--acento-claro); }
.puerta .ya { font-size: 16px; color: #C9C5BD; }
.pista { margin-top: 40px; font: 500 13px var(--mono); color: var(--tenue); letter-spacing: .04em; }
.pista .flecha { display: inline-block; animation: vaiven 1.4s ease-in-out infinite; color: var(--acento-claro); }
@keyframes vaiven { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(10px); } }

/* 2 · La pregunta */
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.dos > * { min-width: 0; }
.burbujas { display: grid; gap: 14px; }
.burbuja { background: #fff; border: 1px solid var(--linea); border-radius: 4px 18px 18px 18px; padding: 14px 18px; }
.burbuja.de-ia { border-radius: 18px 4px 18px 18px; margin-left: 12%; background: var(--tinta); color: #fff; border-color: var(--tinta); }
.burbuja .quien { font: 500 11px var(--mono); color: var(--gris); letter-spacing: .06em; text-transform: uppercase; display: block; margin-bottom: 6px; }
.burbuja.de-ia .quien { color: var(--tenue); }
.burbuja q { quotes: none; font-size: 17px; line-height: 1.45; font-weight: 500; display: block; }
.remate { font-weight: 800; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.15; letter-spacing: -0.03em; margin-top: 26px; text-wrap: balance; }

/* 3 · Las cifras */
.cifras { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 36px; border-top: 1px solid var(--raya); padding-top: 22px; }
.cifras li { font-size: 15px; line-height: 1.45; color: var(--suave); }
.cifra { display: block; font-weight: 800; font-size: clamp(40px, 5vw, 72px); letter-spacing: -0.05em; line-height: .95; color: #fff; margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.cifras li:last-child .cifra { color: var(--acento-claro); }

/* 4 · Lo que encontramos */
.casos { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 28px; margin-top: 34px; }
.casos li { border-top: 1.5px solid var(--tinta); padding: 12px 0 22px; }
.casos h3 { margin-bottom: 6px; }
.casos p { font-size: 15px; line-height: 1.5; }
.casos li.bien h3 { color: var(--acento); }

/* 5 · Cómo funciona */
.pasos { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 40px; border-top: 1.5px solid #fff; }
.pasos li { padding: 22px 24px 8px 0; min-width: 0; }
.pasos li + li { padding-left: 24px; border-left: 1px solid var(--raya); }
.paso { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 1.5px solid var(--acento-claro); border-radius: 50%; font: 500 13px var(--mono); color: var(--acento-claro); margin-bottom: 14px; }
.pasos h3 { margin-bottom: 8px; }
.pasos p { font-size: 15px; }

/* 6 · Lo que nos importa */
.contraste { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 36px; }
.contraste > div { padding: clamp(22px, 3vw, 34px); min-width: 0; }
.contraste .ellos { border: 1px solid var(--hueco); }
.contraste .yo { background: var(--tinta); color: #fff; }
.contraste .mono { display: block; margin-bottom: 12px; color: var(--gris); }
.contraste .yo .mono { color: var(--acento-claro); }
.contraste p.grande { font-weight: 800; font-size: clamp(20px, 2vw, 26px); line-height: 1.2; letter-spacing: -0.02em; color: inherit; }
.contraste .ellos p.grande { color: var(--gris); }
.limite { margin-top: 26px; max-width: 760px; font-size: 15px; border-left: 3px solid var(--acento); padding-left: 16px; }

/* 7 · El piloto */
.rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); margin-top: 28px; align-items: start; }
.rejilla > * { min-width: 0; }
.condiciones { list-style: none; display: grid; gap: 10px; margin-top: 22px; }
.condiciones li { font-size: 15px; line-height: 1.5; color: var(--suave); padding-left: 20px; position: relative; }
.condiciones li::before { content: ''; position: absolute; left: 0; top: .62em; width: 9px; height: 3px; background: var(--acento-claro); }
.condiciones strong { color: #fff; }

/* 8 · Quién está detrás y contacto */
.final { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); margin-top: 40px; align-items: start; }
.final > * { min-width: 0; }
.equipo { display: grid; gap: 26px; }
.persona { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: start; }
.inicial { width: 52px; height: 52px; border-radius: 26px 0 26px 0; background: var(--acento); color: #fff; display: grid; place-items: center; font: 800 22px var(--sans); }
.persona h3 span { color: var(--gris); font-weight: 400; }
.persona .mono { color: var(--gris); display: block; margin: 6px 0 8px; }
.persona p { font-size: 15px; line-height: 1.6; }
.persona a, .misma-casa a, .formulario a { text-decoration: underline; text-decoration-color: var(--acento); text-underline-offset: 3px; }
/* De la misma casa: el enlace cruzado con NAOS (y NAOS lleva el suyo aquí). */
.misma-casa { border-top: 1.5px solid var(--tinta); padding-top: 14px; }
.misma-casa .mono { color: var(--gris); display: block; margin-bottom: 8px; }
.misma-casa p { font-size: 15px; line-height: 1.6; }
.misma-casa .ir { display: inline-block; margin-top: 8px; font-weight: 600; text-decoration: none; }
.misma-casa .ir:hover { color: var(--acento); }

/* Los formularios */
.formulario { display: grid; gap: 12px; background: var(--blanco); color: var(--tinta); padding: clamp(20px, 2.6vw, 30px); color-scheme: light; }
.claro .formulario { border: 1.5px solid var(--tinta); }
.formulario h3 { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.formulario > p { font-size: 14px; color: var(--gris2); margin-top: -4px; }
.formulario label { display: grid; gap: 5px; font-size: 13px; font-weight: 500; }
.formulario .tenue-form { color: var(--gris); font-weight: 400; }
.formulario input:not([type=checkbox]), .formulario textarea, .formulario select { font: 400 15px var(--sans); color: var(--tinta); background: var(--papel); border: 1px solid var(--hueco); padding: 9px 11px; width: 100%; border-radius: 0; }
.formulario input:focus, .formulario textarea:focus, .formulario select:focus { outline: 2px solid var(--acento); outline-offset: -1px; }
.formulario textarea { height: 64px; resize: vertical; }
.fila { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.formulario .acepto { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 12px; line-height: 1.5; color: var(--gris); }
.formulario input[type=checkbox] { accent-color: var(--acento); width: 17px; height: 17px; flex: none; margin-top: 1px; }
.formulario .boton { justify-self: start; padding: 12px 24px; font-size: 15px; background: var(--acento); border-color: var(--acento); color: #fff; }
.formulario .boton:hover { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.aviso-form { font-size: 13px; min-height: 1.3em; }
.aviso-form.bien { color: #1F6B4A; font-weight: 500; }
.aviso-form.mal { color: #B33420; font-weight: 500; }

/* El índice: como el de NAOS, más bajo y con letra más pequeña. */
.indice { position: fixed; left: 0; right: 0; bottom: 0; z-index: 11; height: calc(var(--indice) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--tinta); box-shadow: 0 -1px 0 var(--raya); }
.indice ol { list-style: none; display: flex; justify-content: safe center; height: var(--indice); overflow-x: auto; scrollbar-width: none; padding: 0 max(12px, env(safe-area-inset-left, 0px)); max-width: 1440px; margin: 0 auto; }
.indice ol::-webkit-scrollbar { display: none; }
.indice li { flex: 0 0 auto; display: flex; }
.indice ol button { display: flex; align-items: center; background: none; border: 0; cursor: pointer; padding: 4px 8px 0; color: rgba(255,255,255,0.38); font: 500 11px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; position: relative; transition: color .2s; }
.indice ol button::before { content: ''; position: absolute; left: 8px; right: 8px; top: 0; height: 3px; background: transparent; transition: background .3s; }
.indice ol button.actual { color: #fff; }
.indice ol button.actual::before { background: var(--acento-claro); }
.indice ol button:hover { color: #fff; }
.indice-movil { display: none; }

@media (prefers-reduced-motion: reduce) {
  .pasillo, .indice ol button, .indice ol button::before { transition: none; }
  .pista .flecha { animation: none; }
}
@media (max-width: 900px) {
  .dos, .rejilla, .final, .contraste, .pasos { grid-template-columns: 1fr; }
  .pasos li, .pasos li + li { padding: 18px 0 6px; border-left: 0; border-top: 1px solid var(--raya); }
  .casos { grid-template-columns: 1fr 1fr; }
  .cifras { grid-template-columns: 1fr 1fr; }
  .burbuja.de-ia { margin-left: 0; }
}
@media (max-width: 600px) {
  .envoltura { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .cabecera .envoltura { gap: 8px; }
  .cabecera .boton { padding: 6px 9px; font-size: 12px; }
  .solo-ancho { display: none; }
  .solo-movil { display: inline; }
  .casos { grid-template-columns: 1fr; }
  .fila { grid-template-columns: 1fr; }
  .puerta .linea { flex-direction: column; }
  .puerta .boton { align-self: flex-start; }
  .indice-movil { display: flex; align-items: stretch; height: var(--indice); padding: 0 max(4px, env(safe-area-inset-left, 0px)); }
  .indice-movil button { background: none; border: 0; color: #fff; cursor: pointer; font: 500 11px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
  .indice-movil .paso-flecha { width: 52px; font-size: 20px; letter-spacing: 0; color: rgba(255,255,255,0.7); }
  .indice-movil .paso-flecha:disabled { opacity: 0.25; cursor: default; }
  .indice-movil .donde { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; }
  .indice-movil .donde-num { color: var(--acento-claro); }
  .indice ol { display: none; }
  .indice.abierto ol { display: flex; flex-direction: column; justify-content: flex-start; position: absolute; left: 0; right: 0; bottom: 100%; height: auto; max-height: 70vh; overflow-y: auto; padding: 8px 0; background: var(--tinta); box-shadow: 0 -1px 0 var(--raya); }
  .indice.abierto ol button { width: 100%; min-height: 46px; padding: 0 24px; font-size: 12px; }
  .indice.abierto ol button::before { left: 0; right: auto; top: 12px; bottom: 12px; width: 3px; height: auto; }
}