/* Tangerine · estilos del sitio. Tokens de DESIGN.md como variables CSS: nada de valores sueltos fuera de la escala. */
/* Respaldos con las medidas de EB Garamond e Instrument Sans (medidas en Chromium el 2026-10-01):
   mientras llegan las fuentes de Google, el texto ocupa casi lo mismo y nada se mueve al cambiar. */
@font-face { font-family: "Garamond respaldo"; src: local("Georgia"); font-weight: 100 499; size-adjust: 85.9%; ascent-override: 117.6%; descent-override: 34.9%; line-gap-override: 0%; }
@font-face { font-family: "Garamond respaldo"; src: local("Georgia Bold"), local("Georgia-Bold"); font-weight: 500 900; size-adjust: 78.2%; ascent-override: 129.2%; descent-override: 38.4%; line-gap-override: 0%; }
@font-face { font-family: "Instrument respaldo"; src: local("Arial"), local("Helvetica"), local("Roboto"); size-adjust: 101.4%; ascent-override: 95.7%; descent-override: 24.7%; line-gap-override: 0%; }
:root {
  /* Color (MM §12 y derivados aprobados) */
  --crema: #F6EEDF; --tinta: #1A0B09; --naranja: #F57A0C; --rojo: #E8350F; --amarillo: #FBBE0A; --bordo: #8E1409;
  --papel: #FFF8EC; --muted: #5E4B44; --apagada: #CDBFAE; --naranja-hover: #F78A2A;
  /* Tipografía */
  --serif: "EB Garamond", "Garamond respaldo", Georgia, serif; --sans: "Instrument Sans", "Instrument respaldo", system-ui, sans-serif;
  --t-display: clamp(52px, 7.6vw, 112px); --t-h1: clamp(44px, 6vw, 88px); --t-h2: clamp(40px, 5vw, 72px);
  --t-h3: clamp(36px, 3.4vw, 52px); --t-h4: clamp(24px, 2vw, 28px); --t-sub: clamp(22px, 2vw, 28px); --t-lead: clamp(18px, 1.5vw, 21px);
  /* Espacio */
  --margen: clamp(20px, 5vw, 64px); --seccion: clamp(64px, 9vw, 120px); --contenido: 1280px; --hueco: clamp(32px, 5vw, 96px);
  /* Movimiento */
  --rapida: 150ms; --base: 300ms; --aparicion: 600ms; --lento: 1400ms; --curva: cubic-bezier(.22, .8, .24, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { background: var(--crema); color: var(--tinta); -webkit-text-size-adjust: 100%; }
body { font-family: var(--sans); font-size: 18px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
ul, ol { padding: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }
::selection { background: var(--amarillo); color: var(--tinta); }
input, textarea { caret-color: var(--naranja); }
.sobre-oscuro :focus-visible, .pie :focus-visible { outline-color: var(--crema); }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; }
.saltar { position: absolute; left: -9999px; top: 16px; z-index: 20; padding: 8px 14px; background: var(--tinta); color: var(--crema); font: 500 15px/1.2 var(--sans); }
.saltar:focus { left: 16px; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Estructura ---------- */
.contenedor { max-width: var(--contenido); margin: 0 auto; padding-inline: var(--margen); }
.seccion { padding-block: var(--seccion); }
.seccion + .seccion { padding-top: 0; }
/* Última sección antes del pie: menos aire bajo los botones del cierre (dueño, 2026-10-01) */
main > section.seccion:last-child, main > section:last-child > .seccion:last-child { padding-bottom: clamp(48px, 6vw, 80px); }
/* Fondos alternos de la paleta (dueño, 2026-10-01): la sección de color recupera su aire arriba, y la siguiente también */
.seccion.fondo, .fondo + .seccion { padding-top: var(--seccion); }
.fondo--amarillo { background: var(--amarillo); }
.fondo--tinta { background: var(--tinta); color: var(--crema); }
/* Sobre color, nada de texto apagado: tinta plena sobre amarillo; crema apagada (10,6:1) sobre tinta */
.fondo--amarillo :is(.lead, .lista-sol p, .pasos p, .trio p, .pasos .etiqueta) { color: var(--tinta); }
.fondo--tinta :is(.lead, .lista-sol p, .pasos p, .trio p, .pasos .etiqueta, .etiqueta) { color: var(--apagada); }
.fondo--tinta .pasos li { border-color: var(--muted); }
.fondo--tinta .lineas p { color: var(--apagada); }
.fondo--tinta .canal { border-color: var(--muted); }
/* El formulario sigue en papel con texto tinta, también sobre fondo oscuro */
.fondo--tinta .panel { color: var(--tinta); }
.fondo--tinta .panel :focus-visible { outline-color: var(--tinta); }
.seccion.seccion--indice.fondo { padding-top: clamp(56px, 7vw, 96px); }
.fondo--tinta .trazo { stroke: var(--crema); }
.fondo--tinta .boton--secundario { border-color: var(--crema); color: var(--crema); }
.fondo--tinta .boton--secundario:hover { background: var(--crema); color: var(--tinta); }
.dos { display: grid; grid-template-columns: 5fr 7fr; gap: var(--hueco); align-items: center; }
.dos--visual-primero > :first-child { order: 2; }
.dos--arriba, .dos--arriba-siempre { align-items: start; }
.pegado { position: sticky; top: 48px; }

/* ---------- Tipografía ---------- */
.t-display, .t-h1, .t-h2, .t-h3 { text-wrap: balance; }
.t-display { font-size: var(--t-display); line-height: .98; letter-spacing: -0.02em; }
.t-h1 { font-size: var(--t-h1); line-height: 1; letter-spacing: -0.02em; max-width: 16ch; }
.t-h2 { font-size: var(--t-h2); line-height: 1.02; letter-spacing: -0.015em; max-width: 16ch; }
.t-h3 { font-size: var(--t-h3); line-height: 1.02; letter-spacing: -0.01em; }
.t-h4 { font-size: var(--t-h4); line-height: 1.15; }
.t-display em, .t-h1 em, .t-h2 em { font-style: italic; color: var(--bordo); }
.lead { margin-top: 24px; font-size: var(--t-lead); color: var(--muted); max-width: 34ch; }
.lead--ancho { max-width: 52ch; }
.lead { text-wrap: pretty; }
.lead--sigue { margin-top: 8px; }
.t-h2--largo { font-size: var(--t-h3); line-height: 1.04; max-width: 20ch; }
.titulo-grande { max-width: 20ch; }
.t-slogan { font-style: italic; font-weight: 400; max-width: 18ch; }
.texto { margin-top: 24px; max-width: 60ch; }
.texto + .texto { margin-top: 16px; }
.etiqueta { font: 500 14px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.dos > div > p.etiqueta { margin-bottom: 8px; }
.enlace-flecha { display: inline-block; margin-top: 32px; font: 500 16px/1.2 var(--sans); }

/* ---------- Botones ---------- */
.acciones { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }
.boton { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 26px; border-radius: 999px; border: 1px solid transparent; font: 500 16px/1.2 var(--sans); text-decoration: none; cursor: pointer; transition: background-color var(--rapida) ease-out, color var(--rapida) ease-out, transform var(--rapida) ease-out; }
.boton--principal { background: var(--naranja); color: var(--tinta); }
.boton--principal:hover { background: var(--naranja-hover); transform: translateY(-1px); }
.boton--secundario { background: transparent; border-color: var(--tinta); color: var(--tinta); }
.boton--secundario:hover { background: var(--tinta); color: var(--crema); }
.boton--chico { min-height: 40px; padding: 8px 18px; font-size: 15px; }
.dos .acciones { display: grid; grid-template-columns: max-content; justify-content: start; }
.dos .acciones .boton { width: 100%; }
.boton[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

/* ---------- Cabecera ---------- */
.cabecera { view-transition-name: cabecera; position: relative; z-index: 10; }
.cabecera__fila { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 20px; }
.cabecera__logo img { width: 220px; height: auto; }
.menu { display: flex; align-items: center; gap: 32px; list-style: none; font: 500 15px/1.2 var(--sans); }
.menu a { text-decoration: none; }
/* Menú y enlaces del pie en EB Garamond (dueño, 2026-10-01); los botones siguen en Instrument Sans */
.menu a:not(.boton) { font: 400 19px/1.2 var(--serif); letter-spacing: 0; }
/* Subrayado animado: crece desde la izquierda; la página actual queda subrayada */
.menu a:not(.boton) { position: relative; padding-block: 6px; }
.menu a:not(.boton)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--base) var(--curva); }
.menu a:not(.boton):hover::after, .menu a[aria-current="page"]::after { transform: scaleX(1); }
/* Botón «Quiero Tangerine.»: al pasar el mouse, el fondo naranja se desvanece y queda el contorno */
.boton--wa { position: relative; isolation: isolate; gap: 8px; color: var(--tinta); border-color: transparent; transition: border-color var(--base) var(--curva); }
.boton--wa::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; background: var(--naranja); transition: opacity var(--base) var(--curva), transform var(--base) var(--curva); }
.boton--wa:hover { border-color: var(--tinta); }
.boton--wa:hover::before { opacity: 0; transform: scale(.94); }
.glifo-wa { width: 20px; height: 20px; flex: none; }
.boton-menu { display: none; min-height: 40px; padding: 8px 18px; border: 1px solid var(--tinta); border-radius: 999px; background: none; color: var(--tinta); font: 500 15px/1.2 var(--sans); cursor: pointer; }

/* ---------- Pie ---------- */
/* Rediseño del dueño (2026-10-01): igual en todas las páginas, más bajo, columnas alineadas arriba y logo con más presencia */
.pie { background: var(--tinta); color: var(--crema); padding-block: 56px 28px; }
.pie__fila { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.1fr); gap: 32px 64px; align-items: start; }
.pie__logo { display: inline-block; }
.pie__logo img { width: 280px; height: auto; }
.pie__slogan { margin-top: 12px; font: italic 400 var(--t-sub)/1.3 var(--serif); }
.pie .etiqueta { color: var(--apagada); }
.pie ul { list-style: none; margin-top: 16px; display: grid; gap: 8px; }
.pie a { text-decoration: none; }
.pie a:hover { text-decoration: underline; }
.pie ul a, .pie__legal a { font-family: var(--serif); }
.pie ul a { font-size: 19px; line-height: 1.3; }
.pie__wa { display: inline-flex; align-items: center; gap: 10px; vertical-align: top; }
.pie__wa .glifo-wa { width: 18px; height: 18px; }
.pie ul li { line-height: 1.3; }
.pie__legal { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--muted); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; font-size: 14px; color: var(--apagada); }
.pie__legal a { font-size: 16px; }

/* ---------- Hero de Inicio ---------- */
.hero { min-height: calc(100svh - 104px); display: grid; grid-template-rows: auto 1fr; overflow: hidden; text-align: center; }
.hero__texto { padding-top: clamp(12px, 3vh, 40px); max-width: 980px; margin: 0 auto; position: relative; z-index: 2; }
.hero .t-display { max-width: none; }
.hero .lead { margin-inline: auto; max-width: 46ch; text-wrap: balance; }
.hero .acciones { justify-content: center; }
.hero + .seccion { padding-top: clamp(40px, 5vw, 64px); }
.hero__sol { align-self: end; position: relative; height: clamp(220px, 36vh, 420px); margin-top: 24px; }
.hero__sol picture { position: absolute; left: 50%; bottom: 0; width: min(560px, 90vw, 52vh); transform: translate(-50%, 14%); }
.hero__sol img { width: 100%; height: auto; }

/* ---------- Portada de páginas interiores ---------- */
.portada { position: relative; padding-top: clamp(32px, 6vw, 96px); }
.portada .rincon { position: absolute; top: 0; right: 0; width: clamp(96px, 11vw, 160px); height: auto; }
.horizonte { display: block; width: 100%; height: 12px; margin-block: 40px; }
.portada .rincon + .dos { margin-top: clamp(48px, 8vw, 128px); }
/* Cómo trabajamos: el rincón de sol va centrado sobre la portada (dueño, 2026-10-01) */
.portada--rincon-centro .rincon { position: static; display: block; margin: 0 auto; width: clamp(80px, 8vw, 120px); }
.portada--rincon-centro .rincon + .dos { margin-top: clamp(24px, 3vw, 48px); }
.portada--rincon-centro .dos { align-items: start; }
.portada--rincon-centro .dos > :first-child { padding-top: clamp(32px, 6vw, 96px); }
.portada--centro { text-align: center; }
.portada--centro .t-h1, .portada--centro .lead { margin-inline: auto; }
.portada--centro .acciones { justify-content: center; }

/* ---------- Listas con viñeta sol ---------- */
.lista-sol { list-style: none; display: grid; gap: 24px; margin-top: 40px; }
.lista-sol li { display: grid; grid-template-columns: 20px 1fr; gap: 16px; }
.lista-sol > li > svg { width: 20px; height: 14px; margin-top: 8px; }
.lista-sol h3, .lista-sol h4 { font: 500 18px/1.35 var(--sans); }
.lista-sol p { margin-top: 4px; color: var(--muted); }
.lista-sol--dos { grid-template-columns: 1fr 1fr; column-gap: 48px; }

/* ---------- Inicio · Qué cambia (1d · Bloques) ---------- */
.bloques { list-style: none; margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.4vw, 18px); }
.bloque { border-radius: 8px; padding: clamp(24px, 2.6vw, 36px); min-height: clamp(400px, 36vw, 500px); display: flex; flex-direction: column; gap: 32px; }
.bloque h3 { margin-top: 14px; font-size: var(--t-h3); line-height: 1.02; letter-spacing: -0.01em; }
.bloque p { margin-top: 10px; max-width: 30ch; }
.bloque figure { flex: 1; display: grid; place-items: center; }
.bloque--amarillo { background: var(--amarillo); }
.bloque--naranja { background: var(--naranja); }
.bloque--tinta { background: var(--tinta); color: var(--crema); }
.bloque--tinta .etiqueta { color: var(--apagada); }
.bloque--ancho { grid-column: 1 / -1; flex-direction: row; min-height: clamp(340px, 30vw, 420px); gap: clamp(24px, 4vw, 64px); }
.bloque--ancho > div:first-child { flex: 0 0 min(40%, 420px); align-self: center; }
/* El horizonte de Crecer va solo bajo el sol, sin cruzar el bloque */
.crecer__sol { flex: 1; position: relative; display: grid; place-items: center; min-height: 240px; }
.crecer__sol .sol { position: relative; width: min(420px, 100%); }
.crecer__sol img { position: relative; z-index: 1; width: 100%; height: auto; }
.crecer__sol .sol__horizonte { position: absolute; left: -12%; right: -12%; top: 67.6%; height: 1.5px; background: var(--crema); }

/* ---------- Inicio · Servicios ---------- */
.seccion .titulo-grande { margin-top: clamp(64px, 8vw, 112px); }
.seccion.seccion--indice { padding-top: clamp(24px, 4vw, 56px); }
.seccion--indice .titulo-grande { margin: 0 0 48px; }
.lineas { list-style: none; margin-top: 48px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 48px; }
.lineas a { display: grid; grid-template-columns: 72px 1fr; gap: 20px; align-items: center; text-decoration: none; }
.lineas a:hover h4 { text-decoration: underline; text-underline-offset: 4px; }
.lineas h4 { font-size: var(--t-h4); line-height: 1.15; }
.lineas p { margin-top: 4px; color: var(--muted); font-size: 16px; }
.icono { width: 96px; height: 96px; }
.lineas .icono { width: 72px; height: 72px; }
.trazo { fill: none; stroke: var(--tinta); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.trazo * { vector-effect: non-scaling-stroke; }

/* ---------- Montaje de interfaces sobre fotos ---------- */
.montaje .marco { position: relative; overflow: hidden; width: 100%; border-radius: 8px; }
.lienzo { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.lienzo img { width: 100%; height: auto; }
.capa { position: absolute; top: 0; left: 0; transform-origin: 0 0; mix-blend-mode: multiply; }
.pantalla { background: var(--papel); overflow: hidden; color: var(--tinta); font-family: var(--sans); text-align: left; }
.pantalla--movil { width: 330px; height: 714px; border-radius: 22px; }
.pantalla--d08 { height: 695px; }
.pantalla--movil-g { width: 280px; height: 606px; }
.pantalla--movil-g .ui-opciones { gap: 6px; flex-wrap: nowrap; }
.pantalla--movil-g .ui-chip { padding: 4px 8px; }
.pantalla--laptop { width: 560px; height: 350px; border-radius: 4px; }
.pantalla--d06 .pl-barra { padding: 14px 16px 12px 30px; }
.pantalla--d06 .pl-asistente__cuerpo { padding: 18px 20px 18px 30px; }
.pantalla--d06 .ui-respuesta-doc { width: 70%; }
.fragmento { display: grid; place-items: center; }
.solo-movil { display: none; }
.foto img, .foto picture { width: 100%; height: auto; border-radius: 8px; }
.bodegon-frag { position: relative; }
.bodegon-frag img { width: 100%; height: auto; border-radius: 8px; }
.bodegon-frag .flota { position: absolute; }
.bodegon-frag--sup-izq .flota { left: 5%; top: 7%; }
.bodegon-frag--inf-der { margin-bottom: 120px; }
.bodegon-frag--inf-der .flota { right: 4%; top: 62%; }

/* ---------- Método (Inicio y Cómo trabajamos) ---------- */
.pasos { list-style: none; margin-top: 40px; display: grid; gap: 0; counter-reset: paso; }
.pasos li { display: grid; grid-template-columns: 48px 1fr; gap: 16px; padding-block: 16px; border-top: 1px solid var(--apagada); }
.pasos li:last-child { border-bottom: 1px solid var(--apagada); }
.pasos .etiqueta { padding-top: 6px; color: var(--muted); }
.pasos h3 { font: 500 18px/1.35 var(--sans); }
.pasos p { color: var(--muted); }
.metodo { margin-top: 48px; }
.metodo__ilustracion { width: 100%; height: auto; }
.metodo__pasos { list-style: none; margin-top: 24px; display: grid; grid-template-columns: repeat(6, 1fr); column-gap: 1.333%; row-gap: 24px; }
.metodo__pasos h3 { margin: 6px 0 4px; font-size: 22px; line-height: 1.15; }
.metodo__pasos p { font-size: 16px; line-height: 1.5; }
.metodo__mini { display: none; }

/* ---------- Índice de Servicios ---------- */
.indice { list-style: none; padding-bottom: 32px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 24px; }
.indice a { display: grid; gap: 12px; justify-items: start; font: 500 16px/1.3 var(--sans); text-decoration: none; }
.indice a:hover span { text-decoration: underline; text-underline-offset: 4px; }
.dos--texto-ancho { grid-template-columns: 7fr 5fr; }
.dos--texto-ancho.dos--visual-primero { grid-template-columns: 5fr 7fr; }

/* ---------- Modalidades y canales ---------- */
.trio { list-style: none; margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.trio li { display: grid; gap: 16px; align-content: start; }
.trio h3 { font-size: var(--t-h4); line-height: 1.15; }
.trio p { color: var(--muted); }

/* ---------- Tabla de alternativas ---------- */
.alternativas { width: 100%; margin-top: 40px; border-collapse: collapse; font-size: 16px; }
.alternativas th, .alternativas td { padding: 16px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--apagada); }
.alternativas thead th { font: 500 14px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); border-bottom-color: var(--tinta); }
.alternativas tbody th { font: 600 22px/1.15 var(--serif); }
.alternativas td:last-child { font-weight: 500; }

/* ---------- Capa tecnológica (dueño, 2026-10-01) ---------- */
/* Bandas a sangre en lo alto de la sección, cuando la sección ya tiene su visual protagonista */
.seccion.con-banda { padding-top: 0; }
.banda--tec { height: clamp(140px, 16vw, 240px); }
.con-banda > .banda + .contenedor { margin-top: clamp(48px, 6vw, 80px); }
/* Inicio · Un solo socio: el bodegón con los módulos como inserto, recortado sobre el color de la sección */
.collage { position: relative; padding-bottom: 22%; }
.collage > .bodegon-frag { width: 84%; }
.collage__inserto { position: absolute; right: 0; bottom: 0; width: 40%; border-radius: 8px; overflow: hidden; outline: 8px solid var(--amarillo); }
.collage__inserto img { display: block; width: 100%; height: auto; }
/* Inicio · Cierre: el reloj de sol junto al slogan */
.cierre .cierre__dos { text-align: left; align-items: center; }
.cierre .cierre__dos .t-h2, .cierre .cierre__dos .lead { margin-inline: 0; }
.cierre .cierre__dos .acciones { justify-content: flex-start; }
.cierre__foto { max-width: 420px; justify-self: end; width: 100%; }
/* Insertos sueltos: prisma (Primero lo simple) y gajos de vidrio (Canales) */
.foto--inserto { margin-top: 40px; max-width: 320px; }
/* Cómo trabajamos · Primero lo simple: interfaz y prisma a la misma altura, sin huecos (dueño, 2026-10-01) */
.par-visual { display: flex; gap: clamp(16px, 2vw, 24px); margin-top: clamp(40px, 5vw, 64px); }
.par-visual__a { flex: 1.647 1 0; min-width: 0; }
.par-visual__b { flex: 0.8 1 0; min-width: 0; }
.par-visual__b img { width: 100%; height: 100%; object-fit: cover; }
.canal__foto { margin-top: 32px; }
/* Grano fino sobre fondos oscuros */
.grano { position: relative; isolation: isolate; }
.grano::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .08; background: url("/assets/marca/grano.png") repeat; }
/* Líneas generativas (Servicios · índice): un horizonte que respira, detrás del titular, sin tocar el texto */
.generativo { position: relative; isolation: isolate; overflow: hidden; }
.lineas-gen { position: absolute; z-index: -1; overflow: hidden; pointer-events: none; contain: strict;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); }
.lineas-gen canvas { display: block; will-change: transform; }
.lineas-gen.en-movimiento canvas { animation: fluye 22s linear infinite; }
@keyframes fluye { to { transform: translateX(calc(-1 * var(--p))); } }

/* ---------- Banda de textura (cierre de Inicio) ---------- */
.banda { height: clamp(160px, 20vw, 300px); overflow: hidden; }
.banda img, .banda picture { width: 100%; height: 100%; object-fit: cover; }
.cierre { text-align: center; }
.cierre .t-h2, .cierre .lead, .cierre .texto { margin-inline: auto; }
.cierre .acciones { justify-content: center; }
.cierre .franjas { width: 240px; height: auto; margin: 0 auto 40px; }

/* ---------- Manifiesto ---------- */
.arco { width: clamp(220px, 26vw, 380px); height: auto; margin: 0 auto 16px; }
.paisaje { margin-top: 56px; }
.paisaje img { width: 100%; height: auto; }
.slogan { font: italic 400 var(--t-h2)/1.1 var(--serif); letter-spacing: -0.01em; max-width: 18ch; }

/* ---------- Contacto ---------- */
.canales { display: grid; grid-template-columns: 5fr 7fr; gap: var(--hueco); align-items: start; }
.canal { padding-block: 32px; border-top: 1px solid var(--tinta); display: grid; grid-template-columns: 72px 1fr; gap: 20px; }
.canal:first-child { border-top: 0; padding-top: 0; }
.canal .icono { width: 72px; height: 72px; }
.canal h2 { font-size: var(--t-h4); line-height: 1.15; }
.canal p { margin-top: 8px; }
.canal .acciones { margin-top: 20px; }
.dato { font: 500 18px/1.4 var(--sans); }
.enlace-destacado { display: inline-block; margin-top: 16px; font: 500 18px/1.3 var(--sans); }

.panel { background: var(--papel); border: 1px solid var(--tinta); border-radius: 8px; padding: clamp(24px, 3vw, 40px); }
.panel h2 { font-size: var(--t-h3); line-height: 1.02; }
.formulario { margin-top: 32px; display: grid; gap: 24px; }
.campo label, .campo legend { display: block; margin-bottom: 8px; font: 500 15px/1.3 var(--sans); }
.campo input[type="text"], .campo input[type="email"], .campo input[type="tel"], .campo textarea { width: 100%; min-height: 48px; padding: 12px 16px; border: 1px solid var(--tinta); border-radius: 8px; background: var(--papel); color: var(--tinta); font: 400 18px/1.4 var(--sans); }
.campo textarea { min-height: 140px; resize: vertical; }
.campo input:not([type=radio]):not([type=checkbox]):focus, .campo textarea:focus { outline: none; border-width: 2px; padding: 11px 15px; }
/* Radios y casilla: anillo de foco visible (auditoría final, WCAG 2.4.7) */
.opcion input:focus-visible, .casilla input:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.opcional { font: italic 400 17px/1 var(--serif); color: var(--muted); }
.campo .ayuda { margin-top: 6px; font-size: 14px; color: var(--muted); }
.campo .error { margin-top: 6px; font-size: 14px; color: var(--bordo); }
.campo .error:empty { display: none; }
.campo [aria-invalid="true"] { border-color: var(--bordo); border-width: 2px; padding: 11px 15px; }
fieldset.campo { border: 0; padding: 0; }
.campo legend { padding: 0; }
.opciones { display: flex; gap: 24px; flex-wrap: wrap; }
.opcion, .casilla { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; line-height: 1.45; cursor: pointer; }
.opcion input, .casilla input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--tinta); flex: none; }
.opcion { align-items: center; }
.opcion input { margin-top: 0; }
.trampa { position: absolute; left: -9999px; }
.estado { padding: 16px; border-radius: 8px; border: 1px solid var(--tinta); display: flex; gap: 12px; align-items: center; }
.estado svg { width: 28px; height: 20px; flex: none; }
.estado--error { border-color: var(--bordo); color: var(--bordo); }
.estado[hidden] { display: none; }


/* ---------- Privacidad y 404 ---------- */
.legal .t-h1 { max-width: none; }
.legal h2 { margin-top: 48px; font-size: var(--t-h4); line-height: 1.15; }
.legal p { margin-top: 12px; max-width: 68ch; }

/* ---------- Movimiento ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: var(--base) var(--curva) both desvanece; animation-duration: 200ms; }
::view-transition-new(root) { animation: var(--base) var(--curva) both aparece-pagina; }
@keyframes desvanece { to { opacity: 0; } }
@keyframes aparece-pagina { from { opacity: 0; } }
/* El sol arranca en 30 % de opacidad, no en 0: así cuenta como pintado desde el inicio (carga principal ≤ 2,5 s) */
.hero__sol picture { opacity: .3; transform: translate(-50%, 55%); animation: amanece var(--lento) var(--curva) 200ms forwards; }
@keyframes amanece { to { transform: translate(-50%, 14%); opacity: 1; } }
.js .aparece { opacity: 0; transform: translateY(20px); transition: opacity var(--aparicion) var(--curva), transform var(--aparicion) var(--curva); transition-delay: calc(var(--i, 0) * 90ms); }
.js .aparece.visible { opacity: 1; transform: none; }

/* Titulares por líneas (dueño, 2026-10-01): cada línea sube y aparece, 120 ms después de la anterior */
.js .titulo-lineas.aparece { opacity: 1; transform: none; transition: none; }
.titulo-lineas .l-p { display: inline-block; opacity: 0; transform: translateY(.4em); transition: opacity 700ms var(--curva), transform 700ms var(--curva); transition-delay: calc(var(--l, 0) * 120ms); }
.titulo-lineas.visible .l-p { opacity: 1; transform: none; }

/* Interfaces vivas al entrar en pantalla: el chat escribe, las barras crecen, las notificaciones entran deslizándose */
.anima .ui-paso { opacity: 0; transform: translateY(8px); transition: opacity 400ms var(--curva), transform 400ms var(--curva); }
.anima .ui-paso.ya { opacity: 1; transform: none; }
.anima .msj.escribe { opacity: 1; transform: none; position: relative; color: transparent; }
.anima .msj.escribe > :not(.escribiendo) { visibility: hidden; }
.escribiendo { position: absolute; left: 16px; top: 50%; display: flex; gap: 6px; transform: translateY(-50%); }
.escribiendo i { width: 6px; height: 6px; border-radius: 999px; background: var(--apagada); animation: punto 500ms var(--curva) 2 alternate both; }
.escribiendo i:nth-child(2) { animation-delay: 120ms; }
.escribiendo i:nth-child(3) { animation-delay: 240ms; }
.msj--cliente .escribiendo i { background: var(--muted); }
@keyframes punto { from { opacity: .25; } to { opacity: 1; } }
.anima .msj { transition: opacity 400ms var(--curva), transform 400ms var(--curva), color 300ms var(--curva); }
.anima .ui-barras i { transform: scaleY(0); transform-origin: bottom; transition: transform 800ms var(--curva); transition-delay: calc(var(--k, 0) * 90ms + 200ms); }
.anima.en-vivo .ui-barras i { transform: none; }
.anima .ui-notif { opacity: 0; transform: translateX(32px); transition: opacity 600ms var(--curva), transform 600ms var(--curva); transition-delay: calc(var(--k, 0) * 260ms + 200ms); }
.anima.en-vivo .ui-notif { opacity: 1; transform: none; }

/* Leve desplazamiento de las fotos al hacer scroll (sin JavaScript; los navegadores sin soporte las dejan quietas) */
.foto, .bodegon-frag picture, .paisaje { display: block; overflow: hidden; }
.foto, .bodegon-frag picture { border-radius: 8px; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .foto img, .bodegon-frag img, .paisaje img, .banda img { animation: desliza linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  }
}
@keyframes desliza { from { transform: translateY(-3%) scale(1.07); } to { transform: translateY(3%) scale(1.07); } }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .hero__sol picture { animation: none; opacity: 1; transform: translate(-50%, 14%); }
  .js .aparece { opacity: 1; transform: none; transition: none; }
  .titulo-lineas .l-p { opacity: 1; transform: none; transition: none; }
  .boton, .boton--wa::before, .menu a::after { transition: none; }
  .lineas-gen.en-movimiento canvas { animation: none; }
  .boton--principal:hover { transform: none; }
}

/* ---------- Móvil y tablet ---------- */
@media (max-width: 860px) {
  .menu { display: none; }
  .menu.abierto { display: flex; position: absolute; top: 84px; left: var(--margen); right: var(--margen); flex-direction: column; align-items: flex-start; gap: 18px; padding: 24px; background: var(--papel); border: 1px solid var(--tinta); border-radius: 8px; font-size: 18px; }
  .menu.abierto a:not(.boton) { font-size: 22px; }
  .boton-menu { display: inline-flex; align-items: center; min-height: 48px; padding-inline: 20px; }
  /* Áreas táctiles de 44 px como mínimo (atelier-movil, 2026-10-01); los enlaces dentro de una frase quedan exentos */
  .saltar { min-height: 44px; display: inline-flex; align-items: center; }
  .enlace-flecha, .enlace-destacado { display: inline-flex; align-items: center; min-height: 44px; }
  .pie__legal a { display: inline-flex; align-items: center; min-height: 44px; }
  .opcion { min-height: 44px; }
  .opciones { column-gap: 32px; row-gap: 0; }
  /* Formulario: etiquetas a 16 px y ayudas a 15 px en pantallas chicas */
  .campo label, .campo legend, .casilla { font-size: 16px; }
  .campo .ayuda, .campo .error { font-size: 15px; }
  .cabecera__logo img { width: 200px; }
  .dos, .dos--texto-ancho, .dos--texto-ancho.dos--visual-primero, .canales { grid-template-columns: 1fr; }
  .indice { grid-template-columns: repeat(2, 1fr); }
  .dos--visual-primero > :first-child { order: 0; }
  .pegado { position: static; }
  .bloques { grid-template-columns: 1fr; }
  .bloque { min-height: 0; }
  .bloque--ancho { flex-direction: column; }
  .bloque--ancho > div:first-child { flex: none; }
  .lineas { grid-template-columns: 1fr; }
  .lista-sol--dos { grid-template-columns: 1fr; }
  .trio { grid-template-columns: 1fr; gap: 32px; }
  .trio li { grid-template-columns: 72px 1fr; align-items: center; }
  .trio .icono { width: 72px; height: 72px; grid-row: span 2; }
  .icono { width: 72px; height: 72px; }
  .metodo__ilustracion { display: none; }
  .metodo__pasos { grid-template-columns: 1fr; row-gap: 16px; }
  .metodo__pasos li { display: grid; grid-template-columns: 88px 1fr; gap: 16px; align-items: center; }
  .metodo__mini { display: block; width: 88px; height: auto; }
  .solo-escritorio { display: none; }
  .solo-movil { display: block; }
  .bodegon-frag .flota { position: relative; left: auto; top: auto; right: auto; bottom: auto; margin: -32px 12px 0; }
  .bodegon-frag--inf-der { margin-bottom: 0; }
  .pie__fila { grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr); gap: 24px 20px; }
  .pie__marca { grid-column: 1 / -1; }
  .pie__logo img { width: 240px; }
  .alternativas thead { display: none; }
  .alternativas tr { display: grid; padding-block: 16px; border-bottom: 1px solid var(--apagada); }
  .alternativas th, .alternativas td { padding: 4px 0; border: 0; }
  .alternativas td::before { content: attr(data-etiqueta); display: block; font: 500 14px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
  .hero__sol { height: clamp(220px, 34vh, 320px); }
  .crecer__sol .sol { width: min(320px, 78%); }
  .portada .rincon { position: static; display: block; width: 72px; margin: 0 0 16px auto; }
  .portada .rincon + .dos { margin-top: 0; }
  .portada--rincon-centro .rincon { margin: 0 auto 16px; }
  .collage { padding-bottom: 0; padding-top: 16%; }
  .collage > .bodegon-frag { width: 100%; }
  .collage__inserto { top: 0; bottom: auto; width: 38%; outline-width: 6px; }
  .pie ul { gap: 0; }
  .pie ul a { display: inline-block; padding-block: 10px; }
  .pie ul a.pie__wa { display: inline-flex; }
  .pie__fila { column-gap: 28px; }
  .generativo { padding-bottom: clamp(120px, 30vw, 160px); }
  .cierre__foto { max-width: 360px; }
  .foto--inserto { max-width: 64%; margin-top: 32px; }
  .par-visual { flex-direction: column; }
  .par-visual__a, .par-visual__b { flex: none; }
  .canal__foto { max-width: none; }
}

/* Pie en teléfonos angostos: Páginas en dos columnas y Contacto debajo, a todo el ancho; enlaces con área táctil de 44 px */
@media (max-width: 420px) {
  .pie__fila { grid-template-columns: 1fr; }
  .pie__col:first-of-type ul { grid-template-columns: 1fr 1fr; column-gap: 20px; }
}

/* Interfaces ilustrativas (capa matriz). Copiadas de qa/visuales.html, aprobadas por el dueño. Pantallas sin brillo. */
  /* ---------- Componentes de interfaz ---------- */
  .ui-card { background: var(--papel); border: 1px solid var(--tinta); border-radius: 8px; overflow: hidden; color: var(--tinta); text-align: left; }
  .ui-ancho-s { width: min(360px, 100%); }
  .ui-ancho-m { width: min(440px, 100%); }
  .ui-ancho-chat { width: min(400px, 100%); }
  .ui-cab { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--tinta); }
  .ui-avatar { width: 36px; height: 36px; flex: none; border-radius: 999px; background: var(--crema); border: 1px solid var(--tinta); display: grid; place-items: center; }
  .ui-avatar .ui-sol { width: 22px; height: 16px; }
  .ui-sol { width: 20px; height: 14px; flex: none; }
  .ui-titulo { font: 500 16px/1.25 var(--sans); }
  .ui-sub { font: 400 14px/1.3 var(--sans); color: var(--muted); }
  .ui-enlinea { display: flex; align-items: center; gap: 8px; }
  .ui-enlinea::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 999px; background: var(--naranja); }
  .ui-etq { display: flex; align-items: center; gap: 6px; font: 500 14px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
  .ui-lista { list-style: none; padding: 4px 18px 8px; }
  .ui-lista li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; font: 400 16px/1.35 var(--sans); }
  .ui-lista li + li { border-top: 1px solid var(--apagada); }
  .ui-par { display: inline-flex; align-items: center; gap: 10px; }
  .ui-n { margin-right: 12px; font: 500 14px/1 var(--sans); letter-spacing: .12em; color: var(--muted); }
  .ui-toggle { position: relative; width: 40px; height: 24px; flex: none; border-radius: 999px; background: var(--naranja); border: 1px solid var(--tinta); }
  .ui-toggle::after { content: ""; position: absolute; top: 3px; right: 3px; width: 16px; height: 16px; border-radius: 999px; background: var(--tinta); }
  .ui-chip { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 4px; border: 1px solid var(--tinta); background: var(--papel); font: 500 14px/1.2 var(--sans); white-space: nowrap; color: var(--tinta); }
  .ui-chip--n { background: var(--naranja); }
  .ui-chip--a { background: var(--amarillo); }
  .ui-chip--t { background: var(--tinta); color: var(--crema); }
  .ui-chip--o { border-color: var(--apagada); color: var(--muted); }
  .ui-opciones { display: flex; flex-wrap: wrap; gap: 8px; }
  .ui-btn { display: inline-flex; justify-content: center; align-items: center; min-height: 40px; padding: 8px 18px; border-radius: 999px; background: var(--naranja); color: var(--tinta); font: 500 15px/1.2 var(--sans); }
  .ui-btn--ancho { display: flex; width: 100%; min-height: 44px; margin-top: 6px; }
  .ui-centro { text-align: center; }
  .ui-doc-titulo { font: 600 22px/1.15 var(--serif); letter-spacing: -0.01em; }
  .ui-doc-titulo--g { font-size: 28px; }
  .ui-cuerpo { padding: 16px 18px 18px; display: grid; gap: 12px; }
  .ui-campo { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 44px; padding: 6px 6px 6px 16px; border: 1px solid var(--tinta); border-radius: 999px; background: var(--papel); font: 400 16px/1.3 var(--sans); }
  .ui-enviar { width: 32px; height: 32px; flex: none; border-radius: 999px; background: var(--naranja); display: grid; place-items: center; }
  .ui-respuesta { padding: 12px 14px; border-radius: 8px; background: var(--tinta); color: var(--crema); font: 400 16px/1.4 var(--sans); }

  /* Minigráficos: sin ejes ni valores */
  .ui-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 16px 18px 18px; }
  .ui-barras { display: flex; align-items: flex-end; gap: 6px; height: 96px; margin-top: 12px; border-bottom: 1.5px solid var(--tinta); }
  .ui-barras i { display: block; flex: 1; background: var(--amarillo); border-radius: 2px 2px 0 0; }
  .ui-barras i.is-n { background: var(--naranja); }
  .ui-barras--b i { background: var(--apagada); }
  .ui-barras--b i.is-b { background: var(--bordo); }
  .ui-barras--h { height: 120px; margin: 4px 0 28px; }
  .ui-barras--h i { position: relative; background: var(--apagada); }
  .ui-barras--h i.is-n { background: var(--naranja); }
  .ui-barras--h b { position: absolute; left: 0; right: 0; bottom: -24px; text-align: center; font: 500 14px/1 var(--sans); }

  /* Notificación */
  .ui-notif { display: flex; align-items: flex-start; gap: 12px; width: min(340px, 100%); padding: 14px 16px; background: var(--papel); border: 1px solid var(--tinta); border-radius: 8px; font: 400 16px/1.35 var(--sans); color: var(--tinta); }
  .ui-notif__app { margin-bottom: 4px; font: 500 14px/1.2 var(--sans); }
  .ui-notif--pm { width: 100%; }

  /* Web que cotiza */
  .ui-web__barra { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--tinta); background: var(--crema); }
  .ui-web__barra i { width: 8px; height: 8px; border-radius: 999px; border: 1px solid var(--tinta); }
  .ui-web__barra span { margin-left: 8px; font: 500 14px/1 var(--sans); }
  .ui-web__tabs { display: flex; border-bottom: 1px solid var(--tinta); }
  .ui-web__tabs span { flex: 1; padding: 10px; text-align: center; font: 500 15px/1.2 var(--sans); color: var(--muted); border-bottom: 2px solid transparent; }
  .ui-web__tabs .is-activa { color: var(--tinta); border-bottom-color: var(--naranja); }
  .ui-web__cuerpo { padding: 18px; display: grid; gap: 10px; }

  /* Documento */
  .ui-documento { padding: 22px 24px; }
  .ui-documento dl { margin-top: 12px; display: grid; gap: 6px; }
  .ui-documento dt { margin-top: 10px; }
  .ui-documento dd { margin: 0; font: 400 16px/1.4 var(--sans); }

  .ui-mini-pieza { position: relative; width: 32px; height: 32px; flex: none; border-radius: 4px; border: 1px solid var(--tinta); overflow: hidden; }
  .ui-mini-pieza i { position: absolute; left: 6px; bottom: 8px; width: 12px; height: 12px; border-radius: 999px; }
  .ui-mini-pieza b { position: absolute; left: 0; bottom: 0; width: 100%; height: 6px; }

  /* Conversación (interfaz aprobada I-07) */
  .chat { background: var(--papel); border: 1px solid var(--tinta); border-radius: 8px; overflow: hidden; text-align: left; }
  .chat__cabecera { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--tinta); }
  .chat__hilo { padding: 20px; display: flex; flex-direction: column; gap: 12px; background: var(--crema); }
  .chat__dia { align-self: center; font: 500 14px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
  .msj { max-width: 82%; padding: 12px 16px; border-radius: 8px; font: 400 16px/1.45 var(--sans); }
  .msj--cliente { align-self: flex-start; background: var(--papel); border: 1px solid var(--tinta); border-bottom-left-radius: 4px; }
  .msj--agente { align-self: flex-end; background: var(--tinta); color: var(--crema); border-bottom-right-radius: 4px; }
  .msj--der { align-self: flex-end; border-bottom-left-radius: 8px; border-bottom-right-radius: 4px; }
  .msj--izq { align-self: flex-start; border-bottom-right-radius: 8px; border-bottom-left-radius: 4px; }
  .msj__autor { display: block; margin-bottom: 4px; font: 500 14px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--apagada); }
  .confirmacion { align-self: flex-end; display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--papel); border: 1px solid var(--tinta); border-radius: 8px; }
  .confirmacion .ui-sol { width: 28px; height: 20px; }
  .confirmacion strong { display: block; font: 500 16px/1.2 var(--sans); }
  .confirmacion span { display: block; margin-top: 4px; font: 400 14px/1.2 var(--sans); color: var(--muted); }
  .chat__redactar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--tinta); }
  .chat__campo { flex: 1; min-height: 40px; display: flex; align-items: center; padding: 0 16px; border: 1px solid var(--tinta); border-radius: 999px; font: 400 16px/1 var(--sans); color: var(--muted); }
  .chat__enviar { width: 40px; height: 40px; flex: none; border-radius: 999px; background: var(--naranja); display: grid; place-items: center; }

  /* ---------- Montaje sobre foto ---------- */
  .montaje .marco { position: relative; overflow: hidden; width: 100%; }
  .lienzo { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
  .lienzo img { width: 100%; height: auto; }
  .capa { position: absolute; top: 0; left: 0; transform-origin: 0 0; mix-blend-mode: multiply; }
  .pantalla { background: var(--papel); overflow: hidden; color: var(--tinta); font-family: var(--sans); text-align: left; }
  .pantalla--movil { width: 330px; height: 714px; border-radius: 22px; }
  .pantalla--d08 { height: 695px; }
  .pantalla--movil-g { width: 280px; height: 606px; }
  .pantalla--movil-g .ui-opciones { gap: 6px; flex-wrap: nowrap; }
  .pantalla--movil-g .ui-chip { padding: 4px 8px; }
  .pantalla--d06 .pl-barra { padding: 14px 16px 12px 30px; }
  .pantalla--d06 .pl-asistente__cuerpo { padding: 18px 20px 18px 30px; }
  .pantalla--d06 .ui-respuesta-doc { width: 70%; }
  .pantalla--laptop { width: 560px; height: 350px; border-radius: 4px; }

  /* Pantallas de celular */
  .pm { display: flex; flex-direction: column; height: 100%; }
  .pm-cab { display: flex; align-items: center; gap: 12px; padding: 34px 18px 14px; border-bottom: 1px solid var(--tinta); }
  .pm-cuerpo { flex: 1; padding: 18px; display: flex; flex-direction: column; gap: 12px; background: var(--crema); }
  .pm-cuerpo--agenda { gap: 10px; }
  .pm-cuerpo--agenda .ui-etq { margin-top: 8px; }
  .pm--bloqueo { padding: 40px 16px; gap: 12px; background: var(--crema); }
  .pm-dia { align-self: center; margin-bottom: 8px; font: 500 14px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
  .ui-resultado { padding: 14px 16px; display: grid; gap: 4px; justify-items: start; }
  .ui-resultado .ui-btn { margin-top: 8px; }
  .pm-area { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; }
  .pm-area p:last-child { margin-top: 4px; font: 400 16px/1.3 var(--sans); }

  /* Pantallas de laptop */
  .pl-barra { display: flex; align-items: baseline; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--tinta); background: var(--crema); }
  .pl-bandeja, .pl-asistente, .pl-propuesta { display: flex; flex-direction: column; height: 100%; }
  .pl-cols { flex: 1; min-height: 0; display: grid; grid-template-columns: 250px 1fr; }
  .pl-conv { list-style: none; border-right: 1px solid var(--tinta); overflow: hidden; }
  .pl-conv li { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px 8px; padding: 10px 12px; border-bottom: 1px solid var(--apagada); }
  .pl-conv li p { grid-column: 1 / -1; font: 400 15px/1.3 var(--sans); }
  .pl-conv li .ui-chip:last-child { justify-self: end; grid-row: 1; grid-column: 2; }
  .pl-conv li.is-activa { background: var(--crema); }
  .pl-hilo { padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--crema); }
  .pl-hilo .msj { max-width: 92%; font-size: 15px; }
  .pl-asistente__cuerpo { flex: 1; padding: 18px 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; background: var(--crema); }
  .pl-asistente__cuerpo .msj { align-self: flex-start; }
  .ui-respuesta-doc { width: 78%; padding: 12px 16px; }
  .ui-respuesta-doc ol { margin-top: 8px; padding-left: 20px; font: 400 15px/1.5 var(--sans); }
  .pl-opciones { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 18px; background: var(--crema); }
  .pl-op { padding: 14px 16px; display: grid; gap: 8px; align-content: start; justify-items: start; }
  .pl-op p:last-child { font: 400 15px/1.4 var(--sans); }
  .pl-op.is-atenuada { border-color: var(--apagada); color: var(--muted); }
  .pl-lineas { display: grid; grid-template-columns: 200px 1fr; height: 100%; }
  .pl-lineas aside { padding: 14px 10px; background: var(--crema); border-right: 1px solid var(--tinta); }
  .pl-lineas aside ul { list-style: none; margin-top: 8px; display: grid; gap: 2px; }
  .pl-lineas aside li { padding: 6px 8px; border-radius: 4px; font: 400 14px/1.25 var(--sans); }
  .pl-lineas aside li.is-activa { background: var(--amarillo); font-weight: 500; }
  .pl-lineas__main { padding: 18px 22px; display: flex; flex-direction: column; gap: 8px; }
  .pl-lineas__main ul { list-style: none; margin-top: 6px; display: grid; gap: 8px; }
  .pl-lineas__main li { display: flex; align-items: center; gap: 8px; font: 400 15px/1.3 var(--sans); }

  /* Texto simulado: líneas sin letras donde contenido.md no tiene frase */
  .ui-linea { display: block; height: 8px; margin: 7px 0; border-radius: 4px; background: var(--apagada); }
  .ui-linea--clara { background: var(--muted); }
  .msj--esqueleto { width: 72%; }
  .msj--esqueleto .msj__autor { margin-bottom: 8px; }
  .ui-fuerte { display: block; font-weight: 500; }
  .ui-resultado .ui-chip { margin-bottom: 6px; }
  .pl-conv li .ui-linea { grid-column: 1 / -1; margin: 4px 0; }
  .pl-conv li .ui-chip + .ui-chip { justify-self: end; }
  .pl-pie, .ui-pie { padding: 10px 16px; border-top: 1px solid var(--tinta); font: 400 14px/1.3 var(--sans); color: var(--muted); background: var(--papel); }
  .pm .chat__redactar { background: var(--papel); }

  .ui-respuesta-doc li { padding: 4px 0; }
  .ui-respuesta-doc li .ui-linea { display: inline-block; vertical-align: middle; margin: 0; }

  .escenario { border-radius: 8px; padding: clamp(24px, 4vw, 56px) clamp(16px, 4vw, 48px); display: grid; place-items: center; }
  .escenario--amarillo { background: var(--amarillo); }
  .escenario--naranja { background: var(--naranja); }
  .escenario--tinta { background: var(--tinta); }
  @media (max-width: 860px) { .ui-dos { grid-template-columns: 1fr; } }