/* La madre (/) · «ChatAnalytica», en blanco y negro (M3, 9-oct-2026): la A «La Rejilla, por dentro» con lo que pidió Alex al verla.
   Negro de la 06 y tinta blanca; el color solo entra con su Vault (Finance naranja, Design violeta). Todo Geist; Geist Mono, solo en números.
   Nada por debajo de 14 px. Con el scroll de siempre (iniciar({paradas:false})). */

:root {
  --fin: #ED8135; --fin-texto: #ED8135; --dis: #9879ED; --dis-texto: #A890F0;
  --c-celda: #0C0C0C; --c-marco: #1E1E1E; --c-pieza: #121212; --c-glifo: #2E2E2E;
  --c-marco-dormida: #262626; --sobre-tinta: #0B0B0C;
}
:root[data-tema="claro"] {
  --fin-texto: #A84B0C; --dis: #7860BB; --dis-texto: #6A51B0;
  --c-celda: #FFFFFF; --c-marco: #E2E2E2; --c-pieza: #F2F2F2; --c-glifo: #CACACA; --c-marco-dormida: #D9D9D9; --sobre-tinta: #F7F7F7;
}
body[data-pagina="madre"] main > section[id] { scroll-margin-top: calc(var(--barra-h) + 16px); }

/* ---------- comunes de la página ---------- */
.boton-tinta { background: var(--t1); color: var(--lienzo); }
.boton-contorno { color: var(--t1); border: 1px solid var(--filete-2); background: transparent; }
.boton-finance { background: var(--fin); color: #0B0B0C; }
@media (hover: hover) { .boton-contorno:hover { border-color: var(--t3); } .boton-tinta:hover, .boton-finance:hover { filter: brightness(1.06); } }
.m-h2 { font-size: clamp(2.25rem, 1.4rem + 3.2vw, 4rem); font-weight: 560; letter-spacing: -.035em; line-height: 1.02; text-wrap: balance; }
.m-cuerpo { font-size: 1.0625rem; line-height: 1.6; color: var(--t2); max-width: 34em; }
.m-cab { display: grid; gap: 18px; margin-bottom: clamp(32px, 4vw, 56px); }
.m-cab-fila { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.m-nota { margin-top: 24px; font-size: .9375rem; color: var(--t3); }
.m-ante { font-size: .875rem; color: var(--t3); letter-spacing: 0; margin-bottom: 14px; }
.rj-mini { width: 24px; height: 24px; flex: none; }
.rj-mini .apag { fill: #808080; fill-opacity: .3; }
.rj-mini .enc { fill: var(--t1); }
.rj-finance .enc { fill: var(--fin); }
.rj-design .enc { fill: var(--dis); }
.vl-enlace { display: inline-flex; align-items: center; gap: 8px; color: var(--t1); font-weight: 500; text-decoration: underline; text-decoration-color: var(--filete-2); text-underline-offset: 5px; }
.vl-enlace svg { fill: none; stroke: currentColor; stroke-width: 1.5; }
@media (hover: hover) { .vl-enlace:hover { text-decoration-color: var(--t1); } }

/* ---------- 1 · El héroe ---------- */
.m-heroe { position: relative; padding: calc(var(--barra-h) + clamp(28px, 5vh, 64px)) 0 clamp(40px, 6vh, 72px); min-height: min(100svh, 980px); display: flex; align-items: center; }
.m-heroe::before { /* la retícula del logo, muy al fondo: el módulo de la Rejilla (13 + 4) */
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(to right, rgba(237, 237, 237, .028) 1px, transparent 1px), linear-gradient(to bottom, rgba(237, 237, 237, .028) 1px, transparent 1px);
  background-size: 68px 68px; background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 45%, #000 30%, transparent 80%); mask-image: radial-gradient(ellipse 70% 60% at 70% 45%, #000 30%, transparent 80%);
}
:root[data-tema="claro"] .m-heroe::before { background-image: linear-gradient(to right, rgba(15, 15, 15, .05) 1px, transparent 1px), linear-gradient(to bottom, rgba(15, 15, 15, .05) 1px, transparent 1px); }
.m-heroe-in { position: relative; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.m-heroe-texto { display: grid; gap: 26px; max-width: 600px; }
.m-titular { font-size: clamp(3rem, 1.2rem + 6.2vw, 7rem); font-weight: 560; letter-spacing: -.048em; line-height: .93; }
.m-entradilla { font-size: clamp(1.0625rem, .98rem + .35vw, 1.25rem); line-height: 1.55; color: var(--t-apoyo); max-width: 30em; }
.m-segundas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 4px; }
.m-puerta { display: inline-flex; align-items: center; gap: 10px; font-size: .9375rem; color: var(--t2); }
.m-puerta b { color: var(--t1); font-weight: 600; }
.m-puerta .rj-mini { width: 22px; height: 22px; }
.m-puerta > svg:last-child { fill: none; stroke: var(--fin-texto); stroke-width: 1.5; transition: transform .3s var(--e-sal); }
@media (hover: hover) { .m-puerta:hover { color: var(--t1); } .m-puerta:hover > svg:last-child { transform: translateX(3px); } }

/* La caja «Pregunta lo que quieras»: el bocadillo del logo (esquina de abajo a la izquierda en pico, como la celda de la Rejilla) */
.pregunta { position: relative; }
.pq-caja { position: relative; background: var(--t1); color: var(--sobre-tinta); border-radius: 22px 22px 22px 0; padding: 18px 70px 18px 22px; min-height: 96px; display: flex; align-items: flex-start; transition: box-shadow .25s var(--e-sal); }
.pq-caja::after { content: ''; position: absolute; left: 0; top: 100%; width: 28px; height: 30px; background: var(--t1); clip-path: polygon(0 0, 100% 0, 0 100%); }
.pq-caja:focus-within { box-shadow: 0 0 0 3px var(--lienzo), 0 0 0 5px var(--t1); }
.pq-caja textarea { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; resize: none; color: inherit; font: 500 1.125rem/1.45 var(--sans); letter-spacing: -.01em; min-height: 56px; max-height: 9.5em; padding: 0; }
.pq-caja textarea::placeholder { color: #5F5F5F; opacity: 1; }
:root[data-tema="claro"] .pq-caja textarea::placeholder { color: #A8A8A8; }
.pq-enviar { position: absolute; right: 14px; bottom: 14px; width: 44px; height: 44px; border-radius: 50%; background: var(--lienzo); color: var(--t1); display: grid; place-items: center; transition: opacity .2s, transform .2s var(--e-sal); }
.pq-enviar svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pregunta.vacia .pq-enviar { opacity: .35; }
@media (hover: hover) { .pregunta:not(.vacia) .pq-enviar:hover { transform: translateY(-1px); } }
.pq-ideas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 44px; }
.pq-idea { font-size: .875rem; color: var(--t2); padding: 8px 14px; border-radius: 999px; border: 1px solid var(--filete-2); line-height: 1.3; text-align: left; transition: color .2s, border-color .2s; }
@media (hover: hover) { .pq-idea:hover { color: var(--t1); border-color: var(--t3); } }

/* La Rejilla, por dentro: el logo a ×10 con las nueve piezas de cada celda a la vista desde el principio */
.m-figura { position: relative; justify-self: end; width: 100%; max-width: 620px; display: grid; gap: 18px; container: figura / inline-size; }
.rejilla-dentro { position: relative; width: 100%; aspect-ratio: 490 / 575; }
.rejilla-dentro > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rejilla-dentro .rd-capa { position: absolute; inset: 0; pointer-events: none; }
.celda .marco { fill: var(--c-celda); stroke: var(--c-marco); stroke-width: 2; transition: stroke .5s var(--e-sal); }
.celda .fondo { fill: var(--c-pieza); transition: fill .45s var(--e-sal); }
.celda .g * { fill: none; stroke: var(--c-glifo); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; transition: stroke .45s var(--e-sal); }
.celda .g .r { fill: var(--c-glifo); stroke: none; }
.c-dormida .marco { stroke: var(--c-marco-dormida); }
.c-finance .marco { stroke: rgba(237, 129, 53, .75); }
.c-finance .fondo { fill: rgba(237, 129, 53, .09); }
.c-finance .g * { stroke: rgba(237, 129, 53, .62); }
.c-finance .g .r { fill: rgba(237, 129, 53, .62); }
.c-finance .en-camino .fondo { fill: var(--fin); }
.c-design .marco { stroke: rgba(152, 121, 237, .75); }
.c-design .fondo { fill: rgba(152, 121, 237, .09); }
.c-design .g * { stroke: rgba(168, 144, 240, .8); }
.c-design .g .r { fill: rgba(168, 144, 240, .8); }
:root[data-tema="claro"] .c-design .g * { stroke: rgba(120, 96, 187, .85); }
:root[data-tema="claro"] .c-design .g .r { fill: rgba(120, 96, 187, .85); }
.c-design .en-camino.on .fondo { fill: rgba(152, 121, 237, .42); }
.burbuja { fill: var(--t1); }
.camino { fill: none; stroke: var(--fin); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.hilo { fill: none; stroke: var(--t1); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .6s var(--e-sal); }
[data-vault="finance"] .h-finance, [data-vault="design"] .h-design { stroke-dashoffset: 0; }
/* lo de dentro, en HTML encima (14 px como mínimo en cualquier tamaño) */
.num { position: absolute; display: grid; place-items: center; font: 600 15px/1 var(--mono); color: #0B0B0C; transition: opacity .3s; }
.m-etq { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: baseline; gap: 7px; padding: 3px 10px; font-size: .875rem; line-height: 1.2; white-space: nowrap; background: var(--lienzo); border-radius: 999px; }
.m-etq b { font-weight: 600; color: var(--t1); }
.m-etq i { font-style: normal; font-weight: 500; }
.m-etq-finance i { color: var(--fin-texto); }
.m-etq-design i { color: var(--dis-texto); }
/* El bocadillo: la pregunta y, si el dibujo es ancho, su camino dentro (como en la maqueta A); si no, solo la pregunta y el camino debajo */
.bocadillo-txt { position: absolute; margin: 0; display: flex; flex-direction: column; gap: 7px; color: var(--sobre-tinta); font-size: clamp(.875rem, .7rem + .45vw, 1rem); line-height: 1.25; overflow: hidden; }
.b-q { margin: 0; flex: none; font-weight: 600; letter-spacing: -.01em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; overflow-wrap: anywhere; }
.b-pasos { display: none; list-style: none; margin: 0; padding: 0; font-size: 14px; line-height: 17px; flex: none; }
.b-pasos li, .l-pasos li { display: flex; align-items: baseline; gap: 7px; }
.b-pasos li { font-size: 14px; line-height: 17px; font-weight: 500; color: #2A2A2C; align-items: baseline; }
.b-pasos li span { font: 600 13px/17px var(--mono); color: #8A8A8E; min-width: .7em; }
[data-vault="finance"] .b-pasos li span { color: #A84B0C; }
[data-vault="design"] .b-pasos li span { color: #6A51B0; }
:root[data-tema="claro"] .b-pasos li { color: #E4E4E6; }
:root[data-tema="claro"] .b-pasos li span { color: #9A9AA0; }
:root[data-tema="claro"] [data-vault="finance"] .b-pasos li span { color: #ED8135; }
:root[data-tema="claro"] [data-vault="design"] .b-pasos li span { color: #A890F0; }
/* De 530 a 589 px de dibujo (portátiles de 1280), lo mismo un punto más apretado */
@container figura (min-width: 530px) and (max-width: 589.98px) {
  .bocadillo-txt { font-size: 14px; line-height: 17px; gap: 4px; }
  .b-q { -webkit-line-clamp: 2; }
  [data-vault="general"] .b-q { -webkit-line-clamp: 3; }
  .b-pasos { line-height: 16px; }
  .b-pasos li, .b-pasos li span { line-height: 16px; }
  .b-pasos:not([hidden]) { display: grid; gap: 0; }
  [data-vault="general"] .b-pasos:not([hidden]) { gap: 2px; }
  .m-figura figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@container figura (min-width: 590px) {
  .bocadillo-txt { font-size: 15px; gap: 6px; }
  .b-q { -webkit-line-clamp: 2; }
  [data-vault="general"] .b-q { -webkit-line-clamp: 3; }
  .b-pasos:not([hidden]) { display: grid; gap: 1px; }
  [data-vault="general"] .b-pasos:not([hidden]) { gap: 3px; }
  .m-figura figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.m-figura figcaption { font-size: .9375rem; color: var(--t2); line-height: 1.5; }
.leyenda-pasos { display: grid; gap: 8px; }
.leyenda-pasos[hidden] { display: none; }
.leyenda-pasos b { color: var(--t1); font-weight: 600; }
.l-pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.l-pasos li span { font: 600 .875rem/1 var(--mono); color: var(--t3); }
[data-leyenda="finance"] .l-pasos li span { color: var(--fin-texto); }
[data-leyenda="design"] .l-pasos li span { color: var(--dis-texto); }
/* los estados: Finance (por defecto), Design y el general */
[data-vault="design"] .c-finance .en-camino .fondo { fill: rgba(237, 129, 53, .22); }
[data-vault="design"] .num, [data-vault="general"] .num { opacity: .35; }
[data-vault="design"] .camino, [data-vault="general"] .camino { opacity: .25; }
[data-vault="general"] .celda .marco { stroke: var(--t3); }
[data-vault="general"] .c-finance .marco { stroke: rgba(237, 129, 53, .75); }
[data-vault="general"] .c-design .marco { stroke: rgba(152, 121, 237, .75); }
.anim .camino { animation: m-camino 4.8s var(--e-mov) infinite; }
@keyframes m-camino { 0% { stroke-dashoffset: 1; } 35%, 82% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }
.anim .c-finance .en-camino .fondo { animation: m-pieza 4.8s linear infinite; }
.anim .c-finance [data-paso="2"] .fondo { animation-delay: .25s; } .anim .c-finance [data-paso="3"] .fondo { animation-delay: .5s; }
.anim .c-finance [data-paso="4"] .fondo { animation-delay: .75s; } .anim .c-finance [data-paso="5"] .fondo { animation-delay: 1s; }
@keyframes m-pieza { 0%, 100% { fill: var(--fin); } 8% { fill: #FFB57E; } 16% { fill: var(--fin); } }
[data-vault="design"] .anim .c-finance .en-camino .fondo { animation: none; }

/* ---------- 2 · Los resultados, sobre una respuesta de ejemplo ---------- */
.m-resultados, .m-vaults, .m-conecta, .m-planes { padding: clamp(64px, 8vw, 120px) 0; }
.m-resultados { border-top: 1px solid var(--filete); }
.m-resultados .m-h2 { max-width: 15em; margin-bottom: clamp(36px, 5vw, 64px); }
.res-escena { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 500px) minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); align-items: center; }
.res-notas { list-style: none; display: grid; gap: clamp(32px, 6vh, 72px); }
.res-notas li { display: grid; gap: 6px; position: relative; padding-top: 16px; border-top: 1px solid var(--filete-2); transition: border-color .3s; }
.res-notas b { font-size: 1.125rem; font-weight: 600; letter-spacing: -.015em; }
.res-notas span { font-size: 1rem; color: var(--t2); line-height: 1.5; }
.res-notas li.on { border-top-color: var(--t1); }
.res-der { text-align: left; }
.res-tarjeta { background: var(--panel); border: 1px solid var(--filete); border-radius: 22px; padding: 20px; display: grid; gap: 16px; }
.rt-pregunta { justify-self: end; max-width: 85%; background: var(--sup2); border-radius: 16px 16px 4px 16px; padding: 10px 14px; font-size: .9375rem; }
.rt-respuesta { display: grid; gap: 12px; }
.rt-titular { font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
.rt-titular sup, .rt-fuentes sup { font: 600 .875rem/1 var(--mono); color: var(--t2); margin-left: 2px; }
.rt-cajas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rt-caja { border: 1px solid var(--filete-2); border-radius: 12px; padding: 10px 12px; display: grid; gap: 4px; min-width: 0; }
.rt-caja span { font-size: .875rem; color: var(--t2); }
.rt-caja b { font-size: .9375rem; font-weight: 600; line-height: 1.3; }
.rt-verde { border-color: rgba(69, 190, 128, .45); }
.rt-verde b { color: var(--sube); }
.rt-linea { font-size: .9375rem; color: var(--t-apoyo); line-height: 1.5; }
.rt-linea b { color: var(--t1); font-weight: 600; }
.rt-mas { justify-self: start; font-size: .875rem; color: var(--t2); border: 1px solid var(--filete-2); border-radius: 999px; padding: 6px 12px; }
.rt-fuentes { font-size: .875rem; color: var(--t3); border-top: 1px solid var(--filete); padding-top: 10px; }
.rt-uso { display: flex; align-items: center; justify-content: flex-end; gap: 8px; font-size: .875rem; color: var(--t2); border-top: 1px solid var(--filete); padding-top: 12px; }
.rt-uso b { font-weight: 500; color: var(--t2); font-variant-numeric: tabular-nums; }
.rt-circulo { flex: none; }
.rt-circulo circle { fill: none; stroke-width: 2; }
.rt-circulo .c-fondo { stroke: var(--sup3); }
.rt-circulo .c-arco { stroke: var(--t1); stroke-linecap: round; }
.res-tarjeta figcaption { font-size: .875rem; color: var(--t3); text-align: center; }
.res-tarjeta [data-marca] { transition: box-shadow .3s, background-color .3s; border-radius: 6px; }
.res-tarjeta [data-marca].on { box-shadow: 0 0 0 2px var(--t1); }
.res-tarjeta .rt-titular.on, .res-tarjeta .rt-cajas.on, .res-tarjeta .rt-respuesta.on { box-shadow: 0 0 0 2px var(--t1); border-radius: 10px; }

/* ---------- 3 · Las Vaults ---------- */
.m-vaults { border-top: 1px solid var(--filete); }
.vl-rejilla { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 20px; }
.vl { border: 1px solid var(--filete); border-radius: 22px; background: var(--panel); padding: clamp(24px, 3vw, 36px); display: grid; gap: 16px; align-content: start; }
.vl-finance { border-color: rgba(237, 129, 53, .32); }
.vl-design { border-color: rgba(152, 121, 237, .32); }
.vl-cab { display: flex; align-items: center; justify-content: space-between; }
.vl-cab .rj-mini { width: 40px; height: 40px; }
.vl-estado { font-size: .875rem; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--filete-2); color: var(--t2); }
.vl-finance .vl-estado { color: var(--fin-texto); border-color: rgba(237, 129, 53, .45); }
.vl-design .vl-estado { color: var(--dis-texto); border-color: rgba(152, 121, 237, .45); }
.vl h3 { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); font-weight: 560; letter-spacing: -.035em; line-height: 1.05; }
.vl-finance h3 span { color: var(--fin-texto); font-weight: 500; }
.vl-design h3 span { color: var(--dis-texto); font-weight: 500; }
.vl-linea { font-size: 1.0625rem; color: var(--t-apoyo); line-height: 1.5; max-width: 30em; }
.vl-areas { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.vl-areas li { font-size: .875rem; color: var(--t2); padding: 6px 12px; border-radius: 999px; background: var(--sup2); }
.vl-modos { font-size: .9375rem; color: var(--t2); }
.vl-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 6px; }
.vl-design { position: relative; overflow: hidden; }
.vl-lista { list-style: none; display: grid; gap: 0; max-width: min(24em, calc(100% - 160px)); }
@media (max-width: 1080px) { .vl-lista { max-width: 30em; } }
.vl-lista li { font-size: .9375rem; color: var(--t2); padding: 9px 0; border-top: 1px solid var(--filete); }
.vl-piezas { position: absolute; right: clamp(20px, 2.4vw, 32px); bottom: clamp(20px, 2.4vw, 32px); width: 128px; height: 128px; opacity: .9; pointer-events: none; }
.vl-piezas .fondo { fill: rgba(152, 121, 237, .09); }
.vl-piezas .g * { fill: none; stroke: rgba(168, 144, 240, .7); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.vl-piezas .g .r { fill: rgba(168, 144, 240, .7); stroke: none; }
.vl-design .vl-acciones { position: relative; z-index: 1; }
@media (max-width: 1080px) { .vl-piezas { display: none; } }

/* ---------- 4 · Dos formas de usarlo ---------- */
.m-conecta { border-top: 1px solid var(--filete); }
.m-conecta-in { display: grid; gap: clamp(32px, 4vw, 56px); }
.vias { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); align-items: center; }
.via { display: grid; gap: 14px; align-content: start; justify-items: start; }
.via h3 { font-size: 1.5rem; font-weight: 600; letter-spacing: -.025em; }
.via-estado { font-size: .875rem; color: var(--t3); }
.via-disp { color: var(--sube); }
.via-centro { display: flex; align-items: center; gap: 14px; }
.via-centro .rj-mini { width: 96px; height: 96px; }
.hilo-v { width: clamp(40px, 6vw, 96px); height: 0; border-top: 2px solid var(--t1); }
.hilo-mcp { border-top-style: dashed; border-top-color: var(--t3); }

/* ---------- 5 · Planes ---------- */
.m-planes { border-top: 1px solid var(--filete); }
.m-lema { font-size: 1.125rem; color: var(--t2); margin: 0; }
.tabla-planes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--filete); border-radius: 22px; overflow: hidden; }
.plan { padding: clamp(22px, 2.6vw, 32px); display: grid; gap: 10px; align-content: start; }
.plan + .plan { border-left: 1px solid var(--filete); }
.plan-pro { background: var(--panel); }
.plan h3 { font-size: 1.25rem; font-weight: 600; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.plan-pronto { font-size: .875rem; font-weight: 500; color: var(--t2); padding: 3px 9px; border-radius: 999px; border: 1px solid var(--filete-2); }
.precio { display: flex; align-items: baseline; gap: 8px; }
.pr-num { font-size: clamp(2.25rem, 1.8rem + 1.2vw, 3rem); font-weight: 560; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.pr-per, .pr-anual { font-size: .9375rem; color: var(--t2); }
.plan-para { font-size: 1rem; color: var(--t-apoyo); margin-top: 6px; }
.plan ul { list-style: none; display: grid; gap: 0; margin-top: 6px; }
.plan li { font-size: .9375rem; color: var(--t2); padding: 10px 0; border-top: 1px solid var(--filete); line-height: 1.45; }

/* ---------- 6 · Por dentro (el detalle) ---------- */
.m-dentro { padding: clamp(56px, 7vw, 96px) 0; border-top: 1px solid var(--filete); }
.m-dentro-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px clamp(32px, 5vw, 96px); align-items: end; }
.m-dentro .m-h2 { margin: 0; }
.m-dentro .m-cuerpo { max-width: 34em; font-size: 1.125rem; }
@media (max-width: 900px) { .m-dentro-in { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 7 · Cierre ---------- */
.m-cierre { padding: clamp(72px, 10vw, 140px) 0 clamp(64px, 8vw, 110px); border-top: 1px solid var(--filete); }
.m-cierre-in { display: grid; justify-items: center; text-align: center; gap: 26px; }
.m-cierre .rj-mini { width: 56px; height: 56px; }
.m-titular-cierre { font-size: clamp(2.5rem, 1.4rem + 4.4vw, 5.5rem); }
.m-cierre .pregunta { width: min(100%, 640px); text-align: left; margin-bottom: 34px; }

/* ---------- Tableta y móvil ---------- */
@media (max-width: 1080px) {
  .m-heroe-in { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); }
  .res-escena { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .res-escena .res-tarjeta { grid-column: 1 / -1; grid-row: 1; max-width: 560px; justify-self: center; width: 100%; }
}
@media (max-width: 900px) {
  .m-heroe { min-height: 0; }
  .m-heroe-in { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .m-heroe-texto { max-width: 640px; }
  .m-figura { justify-self: center; max-width: 520px; }
  .vl-rejilla { grid-template-columns: minmax(0, 1fr); }
  .tabla-planes { grid-template-columns: minmax(0, 1fr); }
  .plan + .plan { border-left: 0; border-top: 1px solid var(--filete); }
  .vias { grid-template-columns: minmax(0, 1fr); }
  .via-centro { display: none; }
  .via-mcp { padding-top: 28px; border-top: 1px solid var(--filete); }
  .m-cab-fila { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .m-heroe { padding-top: calc(var(--barra-h) + 20px); }
  .m-heroe-texto { gap: 20px; }
  .pq-caja { padding: 16px 62px 16px 18px; min-height: 88px; }
  .pq-caja textarea { font-size: 1.0625rem; }
  .pq-ideas { margin-top: 40px; }
  .res-escena { grid-template-columns: minmax(0, 1fr); }
  .res-notas { gap: 24px; }
  .rt-cajas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rt-cajas .rt-verde { grid-column: 1 / -1; }
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  .anim .camino, .anim .c-finance .en-camino .fondo { animation: none; }
  .hilo, .celda .marco, .celda .fondo, .celda .g * { transition: none; }
}

/* /planes (M3, 9-oct-2026): la tabla de la madre con su cabecera y tres preguntas */
.m-planes-pagina { border-top: 0; padding-top: calc(var(--barra-h) + clamp(40px, 7vh, 88px)); }
.m-planes-pagina .m-titular { font-size: clamp(2.6rem, 1.3rem + 5vw, 5.5rem); }
.pl-preguntas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); margin-top: clamp(40px, 5vw, 64px); }
.pl-faq { display: grid; gap: 8px; align-content: start; border-top: 1px solid var(--filete-2); padding-top: 16px; }
.pl-faq h2 { font-size: 1.125rem; font-weight: 600; letter-spacing: -.015em; }
.pl-faq p { font-size: 1rem; color: var(--t2); line-height: 1.55; }
.pl-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: clamp(32px, 4vw, 48px); }
.pl-acciones .boton svg { fill: none; stroke: currentColor; stroke-width: 1.5; }
@media (max-width: 900px) { .pl-preguntas { grid-template-columns: minmax(0, 1fr); } }