/* ═══════════════════════════════════════════════════════════════════════════
   SWEET LITTLE TRAUMA — ETAPA 3 · ESTILOS DE LOS BLOQUES
   ───────────────────────────────────────────────────────────────────────────
   Complementa app.css. Acá viven las secciones de contenido: portadas con
   prompt, selector de modelos, bloques alternados, pasos, notas, preguntas,
   tarjetas y planes.
   ═══════════════════════════════════════════════════════════════════════════ */

.contenido > section { margin-bottom: clamp(48px, 7vw, 104px); }
.contenido > section:last-of-type { margin-bottom: 0; }

/* ── Migas ──────────────────────────────────────────────────────────────── */

.migas {
  display: flex; gap: 8px; align-items: center;
  font-size: 11.5px; color: var(--tinta-faint);
  padding: 4px 0 16px;
}
.migas a { transition: color var(--t) linear; }
.migas a:hover { color: var(--tinta); }
.migas .sep { opacity: .5; }
.migas .actual { color: var(--tinta-dim); }

/* ── Portada con prompt ─────────────────────────────────────────────────── */

.portada-prompt {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg);
  min-height: 420px;
  display: grid; place-items: center;
  text-align: center;
  padding: clamp(46px, 7vw, 96px) clamp(20px, 4vw, 60px);
}
.portada-prompt .fondo {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.portada-prompt::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(70% 60% at 50% 45%, transparent 0%, var(--papel-58) 70%, var(--papel-90) 100%),
    linear-gradient(to bottom, var(--papel-45), transparent 30%, var(--papel-84));
}
.portada-cuerpo { position: relative; z-index: 2; max-width: 720px; }
.portada-cuerpo .kicker {
  font-family: var(--mono); font-size: 10px; letter-spacing: .24em;
  color: var(--acento); margin: 0 0 14px;
}
.portada-cuerpo h1 { margin-bottom: 14px; text-shadow: 0 3px 40px rgba(0,0,0,.6); }
.portada-cuerpo .bajada {
  color: var(--tinta-dim); font-size: 14px; margin: 0 auto 30px; max-width: 58ch;
}

.campo-prompt {
  display: flex; gap: 8px; align-items: center;
  background: var(--papel-84);
  border: 1px solid var(--g7); border-radius: var(--r-pill);
  padding: 7px 7px 7px 20px;
  backdrop-filter: blur(12px);
  max-width: 620px; margin-inline: auto;
}
.campo-prompt input {
  flex: 1; min-width: 0;
  appearance: none; background: none; border: 0; outline: 0;
  color: var(--tinta); font-family: inherit; font-size: 13.5px;
}
.campo-prompt input::placeholder { color: var(--tinta-faint); }
.campo-prompt .boton-acento { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }

/* ── Cabeceras ──────────────────────────────────────────────────────────── */

.cabecera { margin-bottom: clamp(24px, 3vw, 42px); }
.cabecera.centrada { text-align: center; max-width: 760px; margin-inline: auto; }
.cabecera h2 { margin-bottom: 12px; }
.cabecera p { color: var(--tinta-dim); margin: 0; font-size: 14px; }

/* El selector de modelos se sacó junto con su CSS: .modelos-panel,
   .modelos-lista, .modelo-fila, .modelo-detalle y .detalle-cuerpo. */

.insignia-mini {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .1em;
  color: var(--acento); border: 1px solid var(--acento);
  padding: 1px 5px; border-radius: 3px;
}

/* .enlace-flecha también se fue: lo usaban el «Más sobre este modelo» del
   selector y el «Leer más» de las notas, y ninguno de los dos existe ya. */

/* ── Bloque alternado ───────────────────────────────────────────────────── */

.alterno {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(26px, 4vw, 68px); align-items: center;
}
.alterno.invertido .alterno-texto { order: 2; }
.alterno h2 { margin-bottom: 14px; }
.alterno p { color: var(--tinta-dim); margin: 0 0 22px; max-width: 46ch; font-size: 14px; }
.alterno-imagen img { width: 100%; border-radius: var(--r-lg); aspect-ratio: 4 / 3; object-fit: cover; }

.lista-puntos { list-style: none; padding: 0; margin: 0 0 24px; }
.lista-puntos li { display: flex; gap: 10px; padding: 6px 0; font-size: 13.5px; color: var(--tinta-dim); }
.vinneta { color: var(--acento); flex: 0 0 auto; }

/* ── Pasos ──────────────────────────────────────────────────────────────── */

.pasos-cabecera {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px; margin-bottom: 34px; flex-wrap: wrap;
}
.pasos-grilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 30px; }
.paso h3 { display: flex; gap: 9px; margin-bottom: 8px; font-size: 14.5px; }
.paso p { color: var(--tinta-dim); font-size: 13px; margin: 0; }

/* El carrusel de notas se sacó junto con su CSS: .notas-cabecera,
   .notas-controles, .flecha-redonda, .notas-pista, .nota y .nota-cuerpo. */

/* ── Preguntas ──────────────────────────────────────────────────────────── */

.preguntas h2 { margin-bottom: 26px; }
.preguntas-lista { border-top: 1px solid var(--g6); }
.pregunta { border-bottom: 1px solid var(--g6); }
.pregunta-boton {
  appearance: none; background: none; border: 0; cursor: pointer;
  width: 100%; text-align: left; color: var(--tinta);
  font-family: inherit; font-size: 14px; font-weight: 500;
  padding: 18px 40px 18px 0; position: relative;
  transition: color var(--t) linear;
}
.pregunta-boton:hover { color: var(--acento); }
.pregunta-boton::after {
  content: '⌄'; position: absolute; right: 8px; top: 50%;
  transform: translateY(-60%); font-size: 15px;
  transition: transform var(--t) var(--ease);
}
.pregunta.abierta .pregunta-boton::after { transform: translateY(-40%) rotate(180deg); }
.pregunta-cuerpo { height: 0; overflow: hidden; transition: height var(--t) var(--ease); }
.pregunta-cuerpo p { margin: 0 0 20px; color: var(--tinta-dim); font-size: 13.5px; max-width: 76ch; }
.preguntas-pie { margin: 26px 0 0; font-size: 12.5px; color: var(--tinta-faint); }

/* ── Tarjetas con icono ─────────────────────────────────────────────────── */

.tarjetas-grilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  /* Sin caja alrededor, 14 px de separación dejaban los filetes casi pegados y
     las cuatro leían como una sola columna rayada. */
  gap: 2px 26px;
}
/* ── SIN CAJA, COMO EL RESTO DEL SITIO ─────────────────────────────────────
   Estas cuatro tarjetas se quedaron afuera cuando se sacaron las cajas de todo
   el sitio: seguían siendo rectángulos con fondo, borde y un saltito al pasar
   el mouse, en medio de pantallas donde ya nada lo era.

   Mismo criterio que en Herramientas y en el Estudio: filete a la izquierda
   que se enciende al acercarse, y el icono como señal de qué es cada una. Lo
   que era clicable sigue siéndolo, y el área de toque no se achicó: el padding
   sigue puesto, sólo que no se ve. */
.tarjeta-icono {
  display: block;
  padding: 16px 0 16px 15px;
  border-left: 1px solid var(--g6);
  color: var(--tinta-dim);
  transition: color .18s ease, border-color .18s ease;
}

/* Sólo las que llevan a algún lado se encienden: un <div> sin destino que
   reacciona al mouse promete un clic que no existe. */
a.tarjeta-icono:hover { color: var(--tinta); border-left-color: var(--acento); }
a.tarjeta-icono:focus-visible { outline: none; color: var(--tinta); border-left-color: var(--acento); }
a.tarjeta-icono:hover .tarjeta-cabeza { color: var(--acento); }

.tarjeta-cabeza {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px; color: var(--tinta-faint);
  transition: color .18s ease;
}
.tarjeta-icono h3 { margin-bottom: 6px; font-size: 15px; }
.tarjeta-icono p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--tinta-dim); }

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .alterno { grid-template-columns: 1fr; }
  .alterno.invertido .alterno-texto { order: 0; }
}

/* ═══════════════════════════════════════════ PANTALLAS SIN BARRA LATERAL ══
   Las de generación, el hub y precios no llevan catálogo al costado. */

body.sin-lateral .lateral { display: none; }
body.sin-lateral .cuerpo { margin-left: 0; padding-bottom: 40px; }
body.sin-lateral .contenido { max-width: 1240px; margin-inline: auto; }

/* ── Banda alta (hub) ───────────────────────────────────────────────────── */

.banda.alta { min-height: 320px; }
.banda .kicker {
  font-family: var(--mono); font-size: 10px; letter-spacing: .24em;
  color: var(--acento); margin: 0 0 12px;
}

/* La «demostración en video» —una foto con un play encima— se sacó junto con
   su CSS: .demo-marco y .demo-play. */

/* La colección destacada se fue con Spotlight, y su CSS también:
   .coleccion-grande y .coleccion-sobre. */

/* ═══════════════════════════════════════════════════════════════ STUDIO ══
   Aplicación a pantalla completa: riel de iconos y una zona de trabajo. */

body.studio { overflow: hidden; }
body.studio .lateral { display: none; }
body.studio .cuerpo { margin-left: 0; padding-bottom: 0; height: 100vh; }

.studio-app {
  display: grid; grid-template-columns: 62px 1fr;
  height: calc(100vh - var(--barra));
}

.studio-riel {
  background: var(--g1); border-right: 1px solid var(--g6);
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; padding: 14px 0;
}
.riel-boton {
  position: relative;
  width: 40px; height: 40px; border-radius: var(--r-md);
  border: 0; background: none; color: var(--tinta-faint); cursor: pointer;
  display: grid; place-items: center;
  transition: background var(--t) linear, color var(--t) linear;
}
.riel-boton:hover { background: var(--g4); color: var(--tinta); }
.riel-boton.activo { background: var(--g5); color: var(--acento); }
/* Marca de sección activa, pegada al borde izquierdo. */
.riel-boton.activo::before {
  content: ''; position: absolute; left: -11px; top: 9px;
  width: 2px; height: 22px; background: var(--acento); border-radius: 0 2px 2px 0;
}
.riel-tooltip {
  position: absolute; left: 50px; white-space: nowrap;
  background: var(--g2); color: var(--tinta);
  font-size: 11.5px; padding: 5px 10px; border-radius: var(--r-sm);
  opacity: 0; pointer-events: none;
  transition: opacity var(--t) linear;
}
.riel-boton:hover .riel-tooltip { opacity: 1; }

.studio-lienzo { overflow-y: auto; padding: 24px clamp(18px, 2.4vw, 34px) 40px; }
.studio-cabecera {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 24px; margin-bottom: 26px; flex-wrap: wrap;
}
.studio-cabecera h2 { margin-bottom: 7px; }
.studio-cabecera p { color: var(--tinta-dim); margin: 0; font-size: 13.5px; max-width: 58ch; }

/* ── Los accesos del Estudio ───────────────────────────────────────────────
   Sin caja, como todo el sitio desde la pantalla 2. Lo que los separa es el
   filete de la izquierda, que aparece al acercarse, y el icono, que dice de
   qué se trata antes de leer. */

.studio-grupo { margin: 0 0 clamp(26px, 3.4vw, 42px); }

.studio-grupo-titulo {
  margin: 0 0 4px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--g6);
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tinta-faint);
}

.studio-accesos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2px 26px;
}

.studio-acceso {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px 0 15px 14px;
  border-left: 1px solid transparent;
  color: var(--tinta-dim);
  text-decoration: none;
  transition: color .18s ease, border-color .18s ease;
}

.studio-acceso:hover { color: var(--tinta); border-left-color: var(--g7); }
.studio-acceso:focus-visible { outline: none; color: var(--tinta); border-left-color: var(--acento); }
.studio-acceso svg { flex: none; margin-top: 2px; color: var(--tinta-faint); }
.studio-acceso:hover svg { color: var(--acento); }
.studio-acceso b { display: block; font-size: 15px; font-weight: 600; color: var(--tinta); }
.studio-acceso span { display: block; margin-top: 3px; font-size: 13px; line-height: 1.45; }

/* ── Personajes ───────────────────────────────────────────────────────────── */

.studio-formulario {
  display: grid;
  gap: 10px;
  max-width: 560px;
  margin: 0 0 32px;
  justify-items: start;
}

.studio-campo {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--g6);
  border-radius: var(--r-md);
  background: var(--g2);
  color: var(--tinta);
  font-family: inherit;
  font-size: 14px;
}

.studio-campo::placeholder { color: var(--tinta-faint); }
.studio-campo:focus { outline: none; border-color: var(--g9); }
.studio-campo-largo { resize: vertical; line-height: 1.5; }

.studio-aviso { margin: 0; font-size: 13px; color: var(--acento); }

.studio-personajes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(16px, 2vw, 26px);
}

.studio-personaje {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 0 0 4px 14px;
  border-left: 1px solid var(--g6);
}

.studio-personaje b { font-size: 15px; font-weight: 600; color: var(--tinta); }

.studio-personaje p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--tinta-dim);
}

@media (max-width: 900px) {
  .studio-app { grid-template-columns: 52px 1fr; }
}


/* ═══════════════════════════════════════════════════ QUIÉNES SOMOS ══════
   La tesis, la cita de Void y el cierre. Solo los usa /nosotros/, pero
   viven acá porque comparten el sistema del resto de los bloques. */

.tesis {
  border-top: 1px solid var(--g7);
  border-bottom: 1px solid var(--g7);
  padding: clamp(34px, 5vw, 62px) 0;
  max-width: 78ch;
}
.tesis h2 { font-size: clamp(22px, 2.6vw, 32px); margin: 0 0 18px; line-height: 1.15; }
.tesis-cuerpo { margin: 0; font-size: 15px; line-height: 1.7; color: var(--tinta-dim); }

/* La muletilla de Void. Va marcada como cita porque es una cita: la dijo él,
   no la marca. */
.cita-void {
  margin: 22px 0 0;
  padding: 16px 20px;
  border-left: 2px solid var(--acento);
  background: var(--g2);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.cita-void p {
  /* Recta desde el 15/10/2026: la voz baja de la casa, más grande, sin cursiva. */
  margin: 0 0 8px; font-family: var(--serif); font-size: 19px; line-height: 1.35; letter-spacing: -.01em; color: var(--tinta); max-width: none;
}
.cita-void cite {
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--tinta-faint);
}

.cierre-nosotros {
  text-align: center;
  max-width: 68ch; margin-inline: auto;
  padding: clamp(30px, 4vw, 54px) 0;
}
.cierre-nosotros h2 { font-size: clamp(22px, 2.8vw, 34px); margin: 0 0 18px; line-height: 1.18; }
.cierre-nosotros p { color: var(--tinta-dim); font-size: 14.5px; margin: 0 0 26px; }
.cierre-firma {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--tinta-faint);
  margin: 28px 0 0 !important;
}

/* ── Sección de catálogo todavía sin material ──────────────────────────────
   No es una página de error: la pantalla está terminada y lo que falta son las
   piezas. Por eso se ve como una portada tranquila y no como un 404. */
.catalogo-cerrado { padding: clamp(64px, 12vh, 160px) 0; max-width: 46ch; }
.catalogo-cerrado h1 { font-size: clamp(28px, 4vw, 44px); margin: 0 0 16px; font-weight: 500; }
.catalogo-cerrado-texto { color: var(--tinta-dim); line-height: 1.7; margin: 0 0 28px; }
.catalogo-cerrado-volver {
  display: inline-block; padding: 12px 22px; border: 1px solid currentColor;
  border-radius: 999px; text-decoration: none; color: inherit; font-size: 14px;
}
.catalogo-cerrado-volver:hover { background: var(--tinta); color: var(--g2); }

/* ── Enlaces dentro de una respuesta ─────────────────────────────────────────
   Van debajo del texto, no incrustados en él: la respuesta se sigue armando
   con textContent, y un párrafo con tres palabras subrayadas en el medio se
   lee peor que una respuesta corta con su enlace aparte.

   Se separan con una barra dibujada entre hermanos, así el marcado no necesita
   un separador de mentira que después lee el lector de pantalla. */
.pregunta-enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: -8px 0 20px;
}

.pregunta-enlaces a {
  position: relative;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color .18s ease;
}

.pregunta-enlaces a + a::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  width: 1px;
  height: 11px;
  transform: translateY(-50%);
  background: var(--linea);
}

.pregunta-enlaces a:hover { color: var(--acento); }

/* Las carpetas del Estudio usan la misma grilla de miniaturas que la pantalla
   de elegir qué editar: es el mismo gesto —mirar lo que hay y entrar a uno— y
   no había razón para inventar una segunda forma de mostrarlo. */
.studio-galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: clamp(14px, 2vw, 22px);
}