/*
 * Portada, debajo del hero: la captura panorámica, los capítulos (los cuatro pasos de la animación del hero) y las
 * piezas de interfaz de la sesión UX (capturas/elementos/), incrustadas con php pieza() y movidas por js/piezas.js.
 */

/* ---------- Pieza incrustada ---------- */
.pieza { position: relative; width: 100%; max-width: 640px; margin-inline: auto; min-height: var(--h); }
.pieza .sim { position: relative; z-index: 1; display: block; width: 100%; border: 0; background: transparent; color-scheme: light; filter: drop-shadow(0 30px 45px rgba(0, 0, 0, 0.5)) drop-shadow(0 6px 12px rgba(0, 0, 0, 0.3)); } /* el mismo esquema que el documento incrustado: si no, Chrome le pinta un fondo blanco opaco */
.pieza-poster { position: absolute; inset: 0 0 auto 0; width: 100%; height: auto; z-index: 0; pointer-events: none; transition: opacity .3s var(--ease); }
.pieza.is-ready .pieza-poster { opacity: 0; }

/* ---------- Capítulos ---------- */
.chapter-head { max-width: 780px; margin-bottom: clamp(28px, 4vw, 52px); }
.chapter-step { display: inline-flex; align-items: center; gap: 10px; margin-bottom: var(--s-4); padding: 5px 16px 5px 5px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.09); color: var(--c-ink); font-size: var(--t-sm); font-weight: 600; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
/* El número, como en los pasos de la animación del hero: círculo ámbar con el número en tinta. */
.chapter-step b { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #FFBF00; color: #081B21; font-size: var(--t-xs); font-weight: 800; font-variant-numeric: tabular-nums; }
.chapter-head .lead { margin-top: var(--s-4); }
.chapter-kicker { display: inline-block; margin-bottom: var(--s-4); padding: 5px 14px; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--tone-a), var(--tone-b)); color: #081B21; font-size: var(--t-xs); font-weight: 700; }

/* Dos tarjetas lado a lado */
.duo { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.duo-card { display: flex; flex-direction: column; gap: var(--s-6); }
.duo-card .pieza { flex: 1; }
.duo-card > div:last-child { max-width: 560px; margin-inline: auto; width: 100%; padding-left: 18px; border-left: 2px solid var(--tone-a, var(--c-celeste)); }
.duo-card h3 { font-size: var(--t-lg); margin-bottom: var(--s-2); }
.duo-card p { color: var(--c-muted); font-size: var(--t-sm); line-height: 1.6; max-width: 52ch; }

/* Pasos con escenario: la lista a la izquierda (se pulsa o avanza sola) y la pieza del paso activo a la derecha. */
.steps-stage { display: grid; gap: var(--s-6); grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 960px) { .steps-stage { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 4vw, 64px); } }
.steps-list { list-style: none; display: grid; gap: var(--s-2); }
.step-btn {
	position: relative; display: grid; grid-template-columns: 30px 1fr; gap: 4px 14px; width: 100%; padding: 16px 18px; overflow: hidden;
	border: 1px solid transparent; border-radius: var(--r-md); background: transparent; color: var(--c-ink);
	font: inherit; text-align: left; cursor: pointer; transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.step-btn:hover { background: rgba(255, 255, 255, 0.03); }
.step-btn[aria-selected="true"] { background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)) padding-box, linear-gradient(var(--tone-base, #07161B), var(--tone-base, #07161B)) padding-box, linear-gradient(135deg, var(--tone-a, var(--c-celeste)), rgba(255, 255, 255, 0.08) 50%, var(--tone-b, #7C5CFF)) border-box; border-color: transparent; box-shadow: 0 24px 50px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.step-btn .n { grid-row: span 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: var(--c-muted); font-size: var(--t-xs); font-weight: 700; font-variant-numeric: tabular-nums; transition: background-color .2s var(--ease), color .2s var(--ease); }
.step-btn[aria-selected="true"] .n { background: linear-gradient(135deg, var(--tone-a, var(--c-celeste)), var(--tone-b, #7C5CFF)); color: #081B21; }
.step-btn strong { font-family: var(--f-head); font-weight: 600; font-size: var(--t-lg); line-height: 1.3; }
.step-btn span.d { color: var(--c-muted); font-size: var(--t-sm); line-height: 1.55; }
.step-btn:not([aria-selected="true"]) span.d { display: none; }
/* Barra de avance del paso activo mientras avanza solo. */
.step-btn::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: linear-gradient(90deg, var(--tone-a, var(--c-celeste)), var(--tone-b, #7C5CFF)); transform: scaleX(0); transform-origin: left; }
.steps-stage.is-auto .step-btn[aria-selected="true"]::after { animation: step-progress var(--dur, 12s) linear forwards; }
@keyframes step-progress { to { transform: scaleX(1); } }
.stage { position: relative; display: grid; align-items: center; min-height: var(--stage-h, 480px); }
.stage > [role="tabpanel"] { grid-area: 1 / 1; }
.stage > [role="tabpanel"][hidden] { display: none; }
.steps-stage .more { display: inline-block; margin-top: var(--s-4); margin-left: 18px; font-weight: 600; }

/* Pieza ancha con beneficios al lado (Entrega) */
.wide { display: grid; gap: var(--s-6); grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 960px) { .wide { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 4vw, 64px); } }
.wide .stage { min-height: 0; }
.benefits { list-style: none; display: grid; gap: var(--s-3); }
.benefits li { display: grid; grid-template-columns: 40px 1fr; gap: 16px; align-items: start; padding: 18px 20px; border-radius: 20px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.benefits .ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, var(--tone-a), var(--tone-b)); color: #081B21; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); }
.benefits .ico .icon { width: 18px; height: 18px; }
.benefits h3 { font-size: var(--t-md); font-family: var(--f-body); font-weight: 700; margin-bottom: 2px; }
.benefits p { color: var(--c-muted); font-size: var(--t-sm); line-height: 1.55; }

@media (prefers-reduced-motion: reduce) {
	.steps-stage.is-auto .step-btn[aria-selected="true"]::after { animation: none; }
	.pieza-poster { transition: none; }
}

/* ---------- Fondos por sección ----------
   Cada sección con su tono: una base que se funde con las vecinas arriba y abajo y dos capas de luz de colores
   (--tone-a, --tone-b, --tone-c) que derivan despacio. Solo transform: barato de animar. Quietas con reducir movimiento. */
.tone { position: relative; isolation: isolate; overflow: clip; --tone-base: #07161B; --tone-from: var(--c-bg); --tone-to: var(--c-bg);
	background: linear-gradient(180deg, var(--tone-from) 0%, var(--tone-base) 22%, var(--tone-base) 78%, var(--tone-to) 100%); }
.tone > .wrap { position: relative; z-index: 1; }
.tone::before, .tone::after {
	content: ''; position: absolute; z-index: 0; inset: 0 -20%; pointer-events: none; will-change: transform;
	-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
	mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
}
.tone::before {
	background:
		radial-gradient(32% 42% at 18% 32%, var(--tone-a-glow), transparent 70%),
		radial-gradient(30% 40% at 82% 68%, var(--tone-b-glow), transparent 70%);
	animation: tone-drift-a 26s ease-in-out infinite alternate;
}
.tone::after {
	background:
		radial-gradient(26% 34% at 62% 22%, var(--tone-c-glow), transparent 70%),
		radial-gradient(24% 30% at 30% 82%, var(--tone-b-glow), transparent 70%);
	opacity: 0.8;
	animation: tone-drift-b 34s ease-in-out infinite alternate;
}
@keyframes tone-drift-a { from { transform: translate3d(-4%, -2%, 0) scale(1); } to { transform: translate3d(5%, 3%, 0) scale(1.08); } }
@keyframes tone-drift-b { from { transform: translate3d(5%, 2%, 0) scale(1.05); } to { transform: translate3d(-6%, -3%, 0) scale(0.97); } }
@media (prefers-reduced-motion: reduce) { .tone::before, .tone::after { animation: none; } }

/* 1. Boceta y planifica: papel y lápiz. Ámbar y coral sobre azul tinta. */
[data-tone="sketch"]  { --tone-from: #0C2A33; --tone-base: #0A1C22; --tone-a: #FFBF00; --tone-b: #FF7A59; --tone-c: #56CCE6;
	--tone-a-glow: rgba(255, 191, 0, 0.16); --tone-b-glow: rgba(255, 122, 89, 0.14); --tone-c-glow: rgba(86, 204, 230, 0.10); }
/* 2. Crea, revisa y mejora: el trabajo de la IA. Celeste y violeta sobre un azul noche. */
[data-tone="create"]  { --tone-base: #080F22; --tone-a: #56CCE6; --tone-b: #8B6BFF; --tone-c: #3D7BFF;
	--tone-a-glow: rgba(86, 204, 230, 0.20); --tone-b-glow: rgba(124, 92, 255, 0.24); --tone-c-glow: rgba(61, 123, 255, 0.16); }
/* 3. Un sistema coherente: orden y verde lima de la marca. */
[data-tone="system"]  { --tone-base: #061A1C; --tone-a: #BFE492; --tone-b: #1FB5A8; --tone-c: #56CCE6;
	--tone-a-glow: rgba(191, 228, 146, 0.13); --tone-b-glow: rgba(31, 181, 168, 0.18); --tone-c-glow: rgba(86, 204, 230, 0.10); }
/* 4. Entrega: el verde del cliente, como en la animación del hero, y un azul eléctrico. */
[data-tone="deliver"] { --tone-base: #061526; --tone-a: #46C98C; --tone-b: #3D7BFF; --tone-c: #56CCE6;
	--tone-a-glow: rgba(70, 201, 140, 0.18); --tone-b-glow: rgba(61, 123, 255, 0.20); --tone-c-glow: rgba(86, 204, 230, 0.10); }
/* Tus clientes: magenta y violeta, cálido y distinto del trabajo de diseño. */
/* OX: el azul noche del escenario, con el rojo de los telones y el oro de los atriles. */
[data-tone="ox"]      { --tone-base: #071621; --tone-a: #56CCE6; --tone-b: #EE3124; --tone-c: #FFC23A;
	--tone-a-glow: rgba(86, 204, 230, 0.14); --tone-b-glow: rgba(238, 49, 36, 0.10); --tone-c-glow: rgba(255, 194, 58, 0.08); }
/* Planes: celeste y lima sobre un azul tinta. */
[data-tone="plans"]   { --tone-base: #061820; --tone-a: #56CCE6; --tone-b: #BFE492; --tone-c: #3D7BFF;
	--tone-a-glow: rgba(86, 204, 230, 0.12); --tone-b-glow: rgba(191, 228, 146, 0.07); --tone-c-glow: rgba(61, 123, 255, 0.08); }
[data-tone="clients"] { --tone-base: #0E0D20; --tone-a: #F07AB8; --tone-b: #8B6BFF; --tone-c: #56CCE6;
	--tone-a-glow: rgba(210, 85, 155, 0.18); --tone-b-glow: rgba(107, 75, 255, 0.22); --tone-c-glow: rgba(86, 204, 230, 0.08); }
/* En equipo: el rojo de quien diseña en la animación, templado con ámbar. */
[data-tone="team"]    { --tone-base: #12121A; --tone-a: #FF7A59; --tone-b: #FFBF00; --tone-c: #E94B3F;
	--tone-a-glow: rgba(233, 75, 63, 0.14); --tone-b-glow: rgba(255, 191, 0, 0.10); --tone-c-glow: rgba(255, 122, 89, 0.10); }
/* Lo que cambia: azul profundo y sobrio para leer. */
[data-tone="shift"]   { --tone-base: #071624; --tone-a: #3D7BFF; --tone-b: #56CCE6; --tone-c: #8B6BFF;
	--tone-a-glow: rgba(61, 123, 255, 0.12); --tone-b-glow: rgba(86, 204, 230, 0.10); --tone-c-glow: rgba(124, 92, 255, 0.08); }
/* Cierre: todos los colores de la marca a la vez. */
[data-tone="close"]   { --tone-base: #0A1530; --tone-a: #56CCE6; --tone-b: #8B6BFF; --tone-c: #BFE492;
	--tone-a-glow: rgba(86, 204, 230, 0.22); --tone-b-glow: rgba(124, 92, 255, 0.22); --tone-c-glow: rgba(191, 228, 146, 0.12); }

/* Preguntas: un azul petróleo tranquilo. */
[data-tone="faq"]     { --tone-base: #0A1A22; --tone-a: #56CCE6; --tone-b: #1FB5A8; --tone-c: #3D7BFF;
	--tone-a-glow: rgba(86, 204, 230, 0.08); --tone-b-glow: rgba(31, 181, 168, 0.08); --tone-c-glow: rgba(61, 123, 255, 0.06); }
/* Las secciones oscuras con tono también se funden con sus vecinas (si no, la base plana deja un corte). */
.section.dark.tone { background: linear-gradient(180deg, var(--tone-from) 0%, var(--tone-base) 22%, var(--tone-base) 78%, var(--tone-to) 100%); }

/* Los títulos de cada capítulo toman un toque de su tono. */
.tone .chapter-head h2 { background: linear-gradient(90deg, #fff 55%, color-mix(in srgb, var(--tone-a) 70%, #fff)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* La miniatura de equipo y la tabla de Lo que cambia, sin caja plana: cristal con sombra. */
[data-tone="team"] .ui { background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)); border-color: rgba(255, 255, 255, 0.09); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45); }
[data-tone="team"] .team li { background: rgba(255, 255, 255, 0.05); }
[data-tone="shift"] .shift { border-top-color: rgba(255, 255, 255, 0.1); }
[data-tone="shift"] .shift .after { color: #fff; }


/* ---------- Borde líquido entre el hero y la primera sección (part/liquido.php) ---------- */
.tone.first { --tone-from: #06131A; padding-top: calc(var(--section) + clamp(70px, 8vw, 130px)); }
.liquid { position: absolute; z-index: 2; left: 0; top: 0; width: 100%; height: clamp(150px, 15vw, 260px); pointer-events: none; overflow: visible;
	fill: #0C2A33; filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.35)); }
.liquid .lq-wave { animation: lq-wave 26s linear infinite; }
@keyframes lq-wave { to { transform: translateX(-1920px); } }
.liquid .lq-neck { transform-box: fill-box; transform-origin: 50% 0; animation: lq-neck var(--d) ease-in-out var(--delay) infinite; }
.liquid .lq-drop { transform-box: fill-box; transform-origin: 50% 50%; animation: lq-drop var(--d) cubic-bezier(0.55, 0, 0.9, 0.6) var(--delay) infinite; }
/* El cuello se estira, la gota engorda en la punta, se suelta y cae encogiéndose; el cuello vuelve a recogerse. */
@keyframes lq-neck {
	0%   { transform: scaleY(0.25); }
	45%  { transform: scaleY(1); }
	55%  { transform: scaleY(0.85); }
	70%, 100% { transform: scaleY(0.25); }
}
@keyframes lq-drop {
	0%   { transform: translateY(calc(var(--l) * -0.75)) scale(0.2); }
	45%  { transform: translateY(0) scale(1); }
	55%  { transform: translateY(14px) scale(1); }
	88%  { transform: translateY(170px) scale(0.5); }
	89%, 100% { transform: translateY(170px) scale(0); }
}
.liquid.is-paused * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
	.liquid * { animation: none !important; }
	.liquid .lq-neck { transform: scaleY(0.7); }
}

/* Cabecera centrada (primera sección). */
.chapter-head.center { margin-inline: auto; text-align: center; max-width: 980px; }
.chapter-head.center .lead { margin-inline: auto; }

/* ---------- Bandas curvas entre la primera y la segunda sección (part/bandas.php, js/bandas.js) ---------- */
.ribbons { position: relative; z-index: 3; height: clamp(170px, 17vw, 330px); margin-block: calc(var(--section) * -0.55); pointer-events: none; }
.ribbons svg { display: block; width: 100%; height: 100%; overflow: visible; }
.rb-band { fill: none; stroke-width: 76; stroke-linecap: butt; }
.rb-text { font-family: var(--f-head); font-weight: 700; font-size: 30px; letter-spacing: 0.06em; fill: #081B21; dominant-baseline: central; }
/* Atrás: lima, un poco apagada, como si estuviera más lejos. */
.rb-back .rb-band { stroke: #BFE492; }
.rb-back { filter: brightness(0.82) drop-shadow(0 14px 18px rgba(0, 0, 0, 0.35)); }
/* Delante: celeste, con sombra que la despega de la de atrás. */
.rb-front .rb-band { stroke: #56CCE6; }
.rb-front { filter: drop-shadow(0 20px 26px rgba(0, 0, 0, 0.45)); }

/* Pasos con la pieza a la izquierda y los pasos a la derecha. */
@media (min-width: 960px) {
	.steps-stage.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
	.steps-stage.flip > .stage { order: -1; }
}

/* ---------- Tarjeta que gira: el dictado por delante, las tareas aplicándose por detrás (js/flip.js) ---------- */
.flipper { perspective: 1800px; max-width: 680px; margin: 0 auto; }
.flip-inner { display: grid; transform-style: preserve-3d; transition: transform 1.1s cubic-bezier(0.65, 0, 0.25, 1); }
.flipper.is-back .flip-inner { transform: rotateY(-180deg); }
.flipper.no-anim .flip-inner { transition: none; }
.flip-face { grid-area: 1 / 1; display: grid; align-items: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip-face.back { transform: rotateY(180deg); }
.flip-face .sim.is-off { display: none; }
.flip-switch { display: flex; justify-content: center; gap: var(--s-2); margin-top: var(--s-6); }
.flip-switch button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px 0 6px; border-radius: var(--r-pill);
	border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.04); color: var(--c-muted); font: inherit; font-size: var(--t-sm); font-weight: 600; cursor: pointer;
	transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.flip-switch button .n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); font-size: var(--t-xs); }
.flip-switch button[aria-pressed="true"] { color: var(--c-ink); border-color: transparent;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)) padding-box, linear-gradient(var(--tone-base), var(--tone-base)) padding-box, linear-gradient(135deg, var(--tone-a), var(--tone-b)) border-box; }
.flip-switch button[aria-pressed="true"] .n { background: linear-gradient(135deg, var(--tone-a), var(--tone-b)); color: #081B21; }
.chapter-body { max-width: 68ch; margin: clamp(32px, 4vw, 56px) auto 0; text-align: center; color: var(--c-muted); font-size: var(--t-md); line-height: 1.7; }
.chapter-body p + p { margin-top: 1em; }
.chapter-body .more { display: inline-block; margin-top: var(--s-5); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .flip-inner { transition: none; } }

/* Texto debajo de la tarjeta que gira: dos columnas alineadas a la izquierda, cada una con su título. */
.chapter-body.cols { max-width: 1040px; display: grid; gap: var(--s-6) clamp(32px, 5vw, 72px); grid-template-columns: minmax(0, 1fr); text-align: left; }
@media (min-width: 760px) { .chapter-body.cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.chapter-body.cols h3 { margin-bottom: var(--s-3); color: var(--c-ink); font-size: var(--t-lg); line-height: 1.3; }
.chapter-body.cols p { font-size: var(--t-md); }
.chapter-body.cols > div { padding-left: 18px; border-left: 2px solid var(--tone-a); }
.chapter-body.cols > div:last-child { border-left-color: var(--tone-b); }

/* Resaltado de las palabras de las bandas (js/bandas.js pone .is-lit): la palabra se vuelve blanca con un contorno
   fino de tinta para que se lea sobre el celeste y la lima. Elegido por Adiel entre diez estilos (2026-10-09). */
.ribbons tspan.w { paint-order: stroke fill; stroke-linejoin: round; stroke: transparent; stroke-width: 0;
	transition: fill .25s ease, stroke .25s ease, stroke-width .25s ease; }
.ribbons tspan.w.is-lit { fill: #fff; stroke: rgba(8, 27, 33, 0.55); stroke-width: 2.5px; }
@media (prefers-reduced-motion: reduce) { .ribbons tspan.w { transition: none; } }

/* El lienzo y el responsive, justo debajo del texto del dictado, en la misma sección. */
.canvas-duo { margin-top: clamp(56px, 7vw, 104px); }
/* Las dos piezas no miden lo mismo: las tarjetas comparten filas (subgrid) y el texto empieza a la misma altura. */
@media (min-width: 960px) {
	.canvas-duo { grid-template-rows: auto auto; row-gap: var(--s-6); }
	.canvas-duo .duo-card { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
	.canvas-duo .duo-card .pieza { align-self: start; }
}
/* El texto empieza donde empieza el recuadro de la pieza: la línea de la cita, en su borde izquierdo. */
.canvas-duo .duo-card > div:last-child { max-width: 640px; }

/* Bocetos y flujo, centrados como pareja. Lo visible de cada pieza no ocupa todo su recuadro de 640: la pizarra mide
   395 (centrada) y el flujo 628 (6 de margen). Cada tarjeta mide lo visible de su pieza y el iframe se desplaza para
   que coincidan; así la línea del texto cae en el borde izquierdo de la pieza y el texto de bocetos acaba donde acaba
   la pizarra. Por debajo de 1180 px, la rejilla normal. */
@media (min-width: 1180px) {
	.sketch-duo { display: flex; justify-content: center; align-items: flex-start; gap: clamp(72px, 10vw, 170px); }
	.sketch-duo .duo-card { flex: none; }
	.sketch-duo .duo-card .pieza { width: 640px; max-width: none; min-height: 476px; }
	.sketch-duo .duo-card:first-child { width: 395px; }
	.sketch-duo .duo-card:first-child .pieza { margin-left: -122.5px; }
	.sketch-duo .duo-card:last-child { width: 628px; }
	.sketch-duo .duo-card:last-child .pieza { margin-left: -6px; }
	.sketch-duo .duo-card > div:last-child { max-width: none; margin: 0; }
}

/* Entrega: los dos beneficios que no tienen pieza, en una fila debajo del recorrido. */
.benefits.pair { margin-top: clamp(40px, 5vw, 72px); }
@media (min-width: 760px) { .benefits.pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); } }

/* Entrega: las cuatro piezas a la vista, en dos filas y dos columnas, cada una con su texto debajo. Las tarjetas de una
   misma fila comparten filas (subgrid): las piezas empiezan arriba y los textos a la misma altura. */
.quad { row-gap: clamp(56px, 6vw, 96px); }
@media (min-width: 960px) {
	.quad { grid-auto-rows: auto; column-gap: clamp(32px, 4vw, 64px); }
	.quad .duo-card { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: var(--s-6); }
	.quad .duo-card .pieza { align-self: start; }
}
.quad .duo-card > div:last-child { max-width: 640px; }
.quad h3 { display: flex; align-items: center; gap: 10px; }
.quad h3 .n { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%;
	background: linear-gradient(135deg, var(--tone-a), var(--tone-b)); color: #081B21; font: 800 var(--t-xs) var(--f-body); }

/* Entrega: las cuatro piezas en una fila desde 1600 px. El modo Dev se queda en 437 px (su tamaño idóneo, el que tenía
   en Full HD) y las otras tres, más compactas, se reparten el resto; la fila se sale del contenedor para que ninguna
   baje de 320 px. Entre 960 y 1600 px, dos filas de dos. El texto de cada una ocupa el ancho de su pieza. */
.quad.four-row .duo-card > div:last-child { max-width: none; width: 100%; margin: 0; }
@media (min-width: 1600px) {
	.quad.four-row { --W: min(1840px, calc(100vw - 2 * var(--gutter))); width: var(--W); margin-left: calc((100% - var(--W)) / 2);
		grid-template-columns: repeat(3, minmax(320px, 1fr)) 437px; column-gap: clamp(24px, 2vw, 40px); }
}

/* ---------- Detrás de la comparación: patrón de iconos y flechas a mano (part/entrega-deco.php) ---------- */
/* El adorno va detrás de «Quién lo vio», que queda en su centro. */
.solo-deco { position: absolute; z-index: 0; left: 50%; top: -120px; bottom: -110px; width: min(1360px, 100vw); transform: translateX(-50%); pointer-events: none; }
.sd-pattern { position: absolute; inset: 0;
	/* Un anillo: limpio en el centro, donde está «Quién lo vio», visible alrededor y desvanecido hacia los bordes. */
	-webkit-mask-image: radial-gradient(ellipse 52% 54% at 50% 50%, transparent 30%, #000 52%, #000 66%, transparent 100%); mask-image: radial-gradient(ellipse 52% 54% at 50% 50%, transparent 30%, #000 52%, #000 66%, transparent 100%); }
.sd-i { position: absolute; width: 24px; height: 24px; margin: -12px 0 0 -12px; transform: rotate(var(--r)); }
.sd-i .icon { width: 100%; height: 100%; }
.sd-g { color: rgba(70, 201, 140, 0.58); }
.sd-c { color: rgba(86, 204, 230, 0.48); }
.sd-l { color: rgba(191, 228, 146, 0.42); }
.sd-l0 { animation: sd-float-a 9s ease-in-out infinite alternate; }
.sd-l1 { animation: sd-float-b 12s ease-in-out infinite alternate; }
.sd-l2 { animation: sd-float-c 15s ease-in-out infinite alternate; }
@keyframes sd-float-a { from { transform: translate(0, 0) rotate(var(--r)); } to { transform: translate(6px, -10px) rotate(calc(var(--r) + 8deg)); } }
@keyframes sd-float-b { from { transform: translate(0, 0) rotate(var(--r)); } to { transform: translate(-8px, 8px) rotate(calc(var(--r) - 6deg)); } }
@keyframes sd-float-c { from { transform: translate(0, 0) rotate(var(--r)); } to { transform: translate(5px, 12px) rotate(calc(var(--r) + 5deg)); } }

/* Flechas dibujadas a mano que apuntan a la pieza y se balancean hacia ella. */
.sd-arrow { position: absolute; width: clamp(96px, 9vw, 150px); height: auto; color: rgba(255, 255, 255, 0.82); filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));
	animation: sd-nudge 3.6s ease-in-out infinite; transform-origin: 70% 50%; }
.sd-a1 { left: 12%; top: 6%; --rot: 28deg; animation-delay: 0s; }
.sd-a2 { left: 9%; top: 62%; --rot: -18deg; animation-delay: -1.2s; }
.sd-a3 { right: 10%; top: 18%; --rot: 155deg; width: clamp(120px, 11vw, 180px); animation-delay: -0.6s; }
.sd-a4 { right: 13%; top: 70%; --rot: 205deg; animation-delay: -2s; }
@keyframes sd-nudge {
	0%, 100% { transform: rotate(var(--rot)) translateX(0); }
	50% { transform: rotate(calc(var(--rot) + 4deg)) translateX(10px); }
}
@media (max-width: 1100px) { .sd-arrow { display: none; } }
@media (prefers-reduced-motion: reduce) { .sd-i, .sd-arrow { animation: none; } }

/* ---------- Quién lo vio: el texto (el recuadro, más abajo en «Quién lo vio» de part/quien-lo-vio.php) ---------- */
.seen { position: relative; display: grid; gap: var(--s-6); max-width: 640px; margin: clamp(160px, 14vw, 230px) auto clamp(60px, 6vw, 100px); text-align: center; }
.seen > .seen-copy, .seen > .qv { position: relative; z-index: 1; }
.seen-copy p { max-width: 58ch; margin-inline: auto; }
.seen-copy h3 { display: flex; justify-content: center; align-items: center; gap: 12px; font-size: var(--t-xl); margin-bottom: var(--s-3); }
.seen-copy p { color: var(--c-muted); line-height: 1.7; }
@keyframes seen-live { 50% { opacity: 0.3; transform: scale(0.7); } }

/* ---------- MCP & API: slime con pegatinas (part/slime.php) ---------- */
[data-tone="connect"] { --tone-base: #071A2A; --tone-a: #56CCE6; --tone-b: #3D7BFF; --tone-c: #8B6BFF;
	--tone-a-glow: rgba(86, 204, 230, 0.16); --tone-b-glow: rgba(61, 123, 255, 0.18); --tone-c-glow: rgba(124, 92, 255, 0.10); }
.slime { position: relative; width: min(900px, 100%); margin: 0 auto; aspect-ratio: 900 / 460; }
.slime svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* Destellos en estrella ámbar, como en la animación del hero: laten a destiempo. */
.sl-stars path { transform-box: fill-box; transform-origin: 50% 50%; animation: sl-twinkle 2.4s ease-in-out infinite; }
.sl-stars .st2 { animation-delay: -0.8s; }
.sl-stars .st3 { animation-delay: -1.6s; }
@keyframes sl-twinkle { 0%, 100% { transform: scale(0.75) rotate(0deg); } 50% { transform: scale(1.1) rotate(12deg); } }
.sl-body { animation: sl-breathe 7s ease-in-out infinite alternate; transform-origin: 450px 230px; }
@keyframes sl-breathe { from { transform: scale(1, 1); } to { transform: scale(1.02, 0.97); } }
.sl-spike { transform-box: fill-box; transform-origin: 0% 50%; animation: sl-spike var(--d) ease-in-out var(--delay) infinite alternate; }
@keyframes sl-spike { from { transform: scaleX(0.45) scaleY(0.9); } to { transform: scaleX(1.25) scaleY(1.05); } }
.sl-drop { transform-box: fill-box; transform-origin: 50% 50%; animation: sl-drop var(--d) cubic-bezier(0.5, 0, 0.75, 0.6) var(--delay) infinite; }
@keyframes sl-drop {
	0%, 20% { transform: translate(0, 0) scale(1); }
	85% { transform: translate(var(--dx), var(--dy)) scale(0.45); }
	86%, 100% { transform: translate(var(--dx), var(--dy)) scale(0); }
}
/* Las palabras como pegatinas en blanco con tinta gruesa, flotando cada una a su ritmo. */
.sl-words { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: clamp(6px, 2vw, 26px); }
.sl-w { font-family: 'Tanker', var(--f-head); font-size: clamp(34px, 10.5vw, 150px); line-height: 1; letter-spacing: 0.02em;
	paint-order: stroke fill; animation: sl-float 5s ease-in-out infinite alternate;
	/* Blanco con contorno de tinta grueso y sombra plana desplazada, como en el cómic (versión elegida por Adiel). */
	color: #fff; -webkit-text-stroke: 0.07em #081B21; text-shadow: 0.06em 0.08em 0 #081B21; }
.sl-w.w1 { --r: -5deg; animation-delay: 0s; }
.sl-w.w2 { --r: 6deg; font-family: var(--f-head); font-weight: 700; font-size: clamp(28px, 7.6vw, 110px); animation-delay: -1.6s; }
.sl-w.w3 { --r: -3deg; animation-delay: -3s; }
@keyframes sl-float { from { transform: translateY(0) rotate(var(--r)); } to { transform: translateY(-10px) rotate(calc(var(--r) + 3deg)); } }
.slime.is-paused * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .slime * { animation: none !important; } }

.connect-copy { max-width: 820px; margin: clamp(32px, 4vw, 56px) auto 0; text-align: center; }
.connect-copy .lead { margin-inline: auto; max-width: 66ch; }
.connect-ways { list-style: none; display: grid; gap: var(--s-3); margin-top: var(--s-6); text-align: left; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .connect-ways { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.connect-ways li { padding: 16px 18px; border-radius: 18px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)); border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.connect-ways b { display: block; margin-bottom: 4px; color: var(--c-ink); }
.connect-ways span { color: var(--c-muted); font-size: var(--t-sm); line-height: 1.55; }

/* En pantallas estrechas, el patrón de iconos a la mitad de densidad (si no, se amontonan). */
@media (max-width: 760px) {
	.sd-i:nth-child(odd) { display: none; }
	.sd-i { width: 20px; height: 20px; margin: -10px 0 0 -10px; }
}

/* ---------- Herramientas compatibles (part/compatibles.php): una fila que pasa sola a lo ancho ---------- */
.compat { margin-top: clamp(48px, 6vw, 88px); text-align: center; }
.compat-title { font-family: var(--f-head); font-weight: 600; font-size: clamp(18px, 1.6vw, 22px); color: var(--c-ink); margin: 0 var(--gutter) var(--s-5); }
.compat-row { display: flex; overflow: hidden; padding-block: 8px;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.compat-track { list-style: none; display: flex; flex: none; align-items: center; gap: clamp(32px, 4vw, 68px); padding-right: clamp(32px, 4vw, 68px); margin: 0;
	animation: compat-slide 60s linear infinite; }
.compat-row + .compat-row { margin-top: clamp(10px, 1.4vw, 20px); }
/* La segunda fila va en sentido contrario y algo más despacio, para que no marchen al compás. */
.compat-row.is-reverse .compat-track { animation-direction: reverse; animation-duration: 66s; }
.compat-row:hover .compat-track { animation-play-state: paused; }
@keyframes compat-slide { to { transform: translateX(-100%); } }
.compat-track li { display: flex; align-items: center; gap: 12px; flex: none; color: rgba(234, 242, 244, 0.62); font-weight: 600; font-size: clamp(17px, 1.45vw, 23px); white-space: nowrap; transition: color 0.2s ease; }
.compat-track li:hover { color: var(--c-ink); }
.compat-track svg { width: clamp(28px, 2.3vw, 36px); height: clamp(28px, 2.3vw, 36px); flex: none; }
.compat-note { margin: var(--s-5) var(--gutter) 0; color: var(--c-muted); font-size: var(--t-sm); }
.compat.is-paused .compat-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
	.compat-row { -webkit-mask-image: none; mask-image: none; justify-content: center; padding-inline: var(--gutter); }
	.compat-track { animation: none; flex-wrap: wrap; justify-content: center; flex: 0 1 auto; padding-right: 0; row-gap: 16px; }
	.compat-track[aria-hidden="true"] { display: none; }
}

/* Fuera de pantalla no se anima nada (js/piezas.js pone .is-offscreen): fondos de sección, adornos y el hero. */
.is-offscreen, .is-offscreen *, .is-offscreen::before, .is-offscreen::after, .is-offscreen *::before, .is-offscreen *::after { animation-play-state: paused !important; }

/* ---------- Para quien programa (part/para-devs.php): texto a la izquierda, consola de ejemplo a la derecha ---------- */
.devs { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 3vw, 44px); align-items: center; max-width: 1080px;
	margin: clamp(48px, 6vw, 80px) auto 0; padding: clamp(22px, 3vw, 40px); border-radius: 26px; text-align: left;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)); border: 1px solid rgba(255, 255, 255, 0.09);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
@media (min-width: 900px) { .devs { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); } }
.devs-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--s-4); }
.devs-tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--r-pill); font-size: var(--t-xs); font-weight: 700; }
.devs-tag { background: var(--c-deep); color: var(--c-on-accent); }
.devs-tag .icon { width: 15px; height: 15px; }
.devs h3 { font-family: var(--f-head); font-size: clamp(22px, 2.2vw, 30px); line-height: 1.15; margin: 0 0 var(--s-3); color: var(--c-ink); text-wrap: balance; }
.devs-copy > p:not(.devs-tags) { color: var(--c-muted); line-height: 1.6; margin: 0; max-width: 60ch; }
.devs-steps { list-style: none; display: grid; gap: 10px; margin: var(--s-5) 0 0; padding: 0; }
.devs-steps li { display: flex; align-items: center; gap: 12px; color: var(--c-ink); font-size: var(--t-sm); }
.devs-steps b { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: rgba(86, 204, 230, 0.14); color: var(--c-deep); font-size: 13px; }
/* La consola: oscura, con la letra monoespaciada del sistema. */
.devs-term { border-radius: 16px; overflow: hidden; background: #03090C; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 20px 44px rgba(0, 0, 0, 0.45); }
.dt-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: rgba(255, 255, 255, 0.04); border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.dt-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); }
.dt-bar span { margin-left: 8px; color: var(--c-muted); font-size: 12px; }
.dt-body { padding: 16px 18px 18px; font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: clamp(12.5px, 1vw, 14px); line-height: 1.75; color: #C9D8DC; }
.dt-body p { display: flex; align-items: center; gap: 8px; margin: 0; }
.dt-body .icon { width: 15px; height: 15px; color: #BFE492; flex: none; }
.dt-in { color: var(--c-ink); }
.dt-in span { color: var(--c-deep); font-weight: 700; }
.dt-in + .dt-ok { margin-top: 6px; }
.dt-ok { color: var(--c-deep); }
.dt-body p:last-child { margin-top: 10px; }
.dt-caret { display: inline-block; width: 8px; height: 1.1em; margin-left: 2px; background: var(--c-deep); animation: dt-blink 1.1s steps(1) infinite; }
@keyframes dt-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .dt-caret { animation: none; } }

/* ---------- Lo que cambia (part/cambia.php): el recorrido del proyecto en tres tramos ---------- */
.cambia { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin: clamp(28px, 3.5vw, 48px) 0 0; padding: 0; }
@media (min-width: 900px) { .cambia { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } }
.cambia ul { list-style: none; margin: 0; padding: 0; }
.cambia h3 { font-family: var(--f-head); font-size: clamp(17px, 1.3vw, 20px); color: var(--c-ink); margin: 0 0 var(--s-3); }
.cambia ul li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; font-size: var(--t-sm); line-height: 1.45; }
.cambia ul .icon { width: 18px; height: 18px; color: #BFE492; margin-top: 2px; flex: none; }
.cambia ul li > span { display: flex; flex-direction: column; }
.cambia .cb-a { color: #fff; font-weight: 500; }
.cambia small { color: var(--c-muted); font-size: var(--t-xs); }

/* ---------- OX, orquestador de experiencia: la animación del orquestador centrada y el texto debajo ---------- */
.ox-anim { width: min(1000px, 100%); margin: 0 auto; aspect-ratio: 8 / 3; filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.45)); }
.ox-anim .anim-orquesta2 { width: 100%; }
.ox-copy { margin-top: clamp(32px, 4vw, 56px); }
.ox-copy .lead { margin-inline: auto; }
.ox-copy p:not(.lead) { max-width: 62ch; margin: var(--s-4) auto 0; color: var(--c-muted); line-height: 1.6; }
/* El manifiesto OX (versión 4, elegida por Adiel): en blanco y algo más grueso que el resto. */
.ox-copy p.ox-more { color: var(--c-ink); font-weight: 500; }

/* ---------- Planes en la portada (part/planes-portada.php): la escalera de precios y las tres cifras ---------- */
.pp { --pp-line: rgba(255, 255, 255, 0.1); --pp-glass: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
	display: grid; gap: clamp(32px, 4vw, 56px); margin-top: clamp(32px, 4vw, 48px); }
.pp ul, .pp ol { list-style: none; margin: 0; padding: 0; }
.pp h3 { font-family: var(--f-head); color: var(--c-ink); margin: 0; }
.pp p { margin: 0; }
.pp .pick { display: inline-block; padding: 2px 10px; border-radius: var(--r-pill); background: rgba(86, 204, 230, 0.16); color: var(--c-deep); font: 600 var(--t-xs) var(--f-body); white-space: nowrap; }
.pp-price { display: flex; align-items: baseline; gap: 6px; }
.pp-price b { font-family: var(--f-head); font-size: clamp(28px, 2.4vw, 36px); font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.pp-price small { color: var(--c-muted); font-size: var(--t-xs); }
/* La escalera: cada plan es un peldaño más alto que el anterior. */
.pp-steps { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); align-items: end; }
.pp-steps li { display: flex; flex-direction: column; gap: 10px; }
.pp-steps h3 { font-size: clamp(22px, 1.9vw, 28px); }
.pp-step-top { display: flex; flex-direction: column; gap: 4px; }
.pp-step-top .pick { margin-top: 4px; align-self: flex-start; }
/* Los colores de cada plan, los mismos de app.bitacora.live/plans (app/public/css/plans.css, estilo «Aurora»): una luz
   de sus dos colores que asoma por arriba del peldaño, su borde y su acento (la franja de arriba y la etiqueta).
   Variables --pl-* para no pisar los tokens del sitio (--c-ink, --c-bg, --c-line). */
.pp-steps [data-plan="free"] { --pl-bg: #12151b; --pl-line: rgba(255, 255, 255, 0.08); --pl-accent: rgba(255, 255, 255, 0.18); --pl-icon: #b8c2d0; }
.pp-steps [data-plan="essential"] { --pl-bg: radial-gradient(120% 60% at 20% 0%, rgba(160, 180, 255, 0.35), transparent 60%), radial-gradient(90% 55% at 90% 0%, rgba(120, 255, 220, 0.18), transparent 60%), #111319;
	--pl-line: rgba(255, 255, 255, 0.08); --pl-accent: #eef1f5; --pl-icon: #eef1f5; }
.pp-steps [data-plan="pro"] { --pl-bg: radial-gradient(120% 60% at 15% 0%, rgba(86, 204, 230, 0.55), transparent 62%), radial-gradient(90% 55% at 95% 5%, rgba(170, 255, 120, 0.3), transparent 60%), #0d1418;
	--pl-line: rgba(86, 204, 230, 0.4); --pl-accent: linear-gradient(90deg, #56cce6, #a8f06b); --pl-icon: #7fe0d0; --pl-ink: #04232c; }
.pp-steps [data-plan="studio"] { --pl-bg: radial-gradient(120% 60% at 15% 0%, rgba(160, 90, 255, 0.5), transparent 62%), radial-gradient(90% 55% at 95% 5%, rgba(255, 80, 170, 0.4), transparent 60%), #140f1a;
	--pl-line: rgba(255, 79, 184, 0.3); --pl-accent: linear-gradient(90deg, #a35cff, #ff4fae); --pl-icon: #d38bff; }
.pp-steps [data-plan="agency"] { --pl-bg: radial-gradient(80% 90% at 0% 0%, rgba(255, 170, 60, 0.4), transparent 60%), radial-gradient(60% 90% at 60% 0%, rgba(255, 90, 120, 0.25), transparent 60%), #16110f;
	--pl-line: rgba(246, 196, 83, 0.28); --pl-accent: linear-gradient(90deg, #ffb347, #ff6f91); --pl-icon: #ffb347; }
.pp-step { position: relative; overflow: hidden; min-height: calc(110px + var(--k) * 46px); padding: 18px 16px 16px; border-radius: 16px 16px 6px 6px; background: var(--pl-bg); border: 1px solid var(--pl-line); border-bottom: 0; box-shadow: 0 24px 50px rgba(0, 0, 0, 0.35); }
.pp-step::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--pl-accent); }
.pp-steps .pp-price b { color: #fff; }
.pp-steps .pick { background: var(--pl-accent); color: var(--pl-ink, #04232c); }
.pp-step p { color: var(--c-ink); font-size: var(--t-sm); line-height: 1.5; }
/* Las tres tarjetas de debajo de la escalera. */
.pp-facts { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.pp-facts li { padding: 24px; border-radius: 22px; background: var(--pp-glass); border: 1px solid var(--pp-line); }
.pp-facts b { display: block; font-family: var(--f-head); font-size: clamp(30px, 2.6vw, 40px); line-height: 1.05; color: var(--c-deep); }
.pp-facts span { display: block; margin: 4px 0 14px; color: var(--c-ink); font-weight: 600; }
.pp-facts h3 { font-size: 17px; margin-bottom: 6px; }
.pp-facts p { color: var(--c-muted); font-size: var(--t-sm); line-height: 1.5; }

/* ---------- Planes en pantallas estrechas (≤ 955 px): la escalera no cabe y los precios pasan a una tabla de filas
   (versión 4 de diez, elegida por Adiel el 2026-10-10): una fila por plan con la barra de su color, nombre y etiqueta a
   la izquierda, precio a la derecha y el texto debajo, sin recuadros. ---------- */
@media (max-width: 955px) {
	.pp-steps { display: grid; grid-template-columns: 1fr; gap: 0; align-items: stretch; border-top: 1px solid rgba(255, 255, 255, 0.1); }
	.pp-steps li { position: relative; gap: 8px; min-width: 0; padding: 16px 0 16px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
	.pp-steps li::before { content: ''; position: absolute; left: 0; top: 18px; bottom: 18px; width: 4px; border-radius: 2px; background: var(--pl-accent); }
	.pp-steps h3 { font-size: 22px; }
	.pp-steps .pp-price b { font-size: 28px; }
	.pp-step-top { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; }
	.pp-step-top .pick { grid-row: 2; justify-self: start; }
	.pp-step-top .pp-price { grid-column: 2; grid-row: 1 / span 2; }
	.pp-step { min-height: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
	.pp-step::before { display: none; }
	.pp-step p { color: var(--c-muted); }
}

/* ---------- Lo que suelen preguntar: centrado, en un recuadro de cristal, con la nube de iconos detrás ---------- */
.faq-wrap { position: relative; }
.faq-wrap > .section-head { position: relative; z-index: 1; text-align: center; margin-inline: auto; }
.faq-wrap > .faq { position: relative; z-index: 1; margin-inline: auto; max-width: 820px; padding: 6px clamp(18px, 3vw, 34px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 26px;
	background: linear-gradient(180deg, rgba(10, 26, 34, 0.82), rgba(10, 26, 34, 0.66)); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06);
	backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.faq-wrap > .faq li:last-child details { border-bottom: 0; }
.faq-deco { position: absolute; z-index: 0; left: 50%; top: -60px; bottom: -60px; width: min(1440px, 100vw); transform: translateX(-50%); pointer-events: none; }
/* Visible alrededor del recuadro y desvanecida hacia los bordes de la sección. */
.fq-pattern { position: absolute; inset: 0;
	-webkit-mask-image: radial-gradient(ellipse 50% 56% at 50% 52%, rgba(0, 0, 0, 0.25) 34%, #000 58%, #000 70%, transparent 100%); mask-image: radial-gradient(ellipse 50% 56% at 50% 52%, rgba(0, 0, 0, 0.25) 34%, #000 58%, #000 70%, transparent 100%); }
.fq-i { position: absolute; width: 24px; height: 24px; margin: -12px 0 0 -12px; transform: rotate(var(--r)); }
.fq-i svg { display: block; width: 100%; height: 100%; }
.fq-c { color: rgba(86, 204, 230, 0.5); }
.fq-t { color: rgba(31, 181, 168, 0.55); }
.fq-b { color: rgba(110, 150, 255, 0.5); }
@media (max-width: 760px) { .fq-i:nth-child(odd) { display: none; } .fq-i { width: 20px; height: 20px; margin: -10px 0 0 -10px; } }
@media (prefers-reduced-motion: reduce) { .fq-i { animation: none; } }

/* ---------- «Quién lo vio» (part/quien-lo-vio.php): tres indicadores y una tarjeta por persona con su mapa de pantallas ---------- */
.qv { --qv-line: rgba(255, 255, 255, 0.09); position: relative; display: grid; gap: 10px; text-align: left; margin-top: 8px; }
.qv p { margin: 0; }
.qv b { color: var(--l-text); font-weight: 600; }
.qv small { display: block; color: var(--l-muted); font-size: 12px; }
.qv-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; padding: 0 4px; color: var(--l-muted); font-size: 12px; }
.qv-head b { font-size: 14px; }
.qv-sum, .qv-people { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.qv-sum p, .qv-people > li { border-radius: 18px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)); border: 1px solid var(--qv-line);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.qv-sum p { padding: 14px 16px; color: var(--l-muted); font-size: 12px; }
.qv-sum b { display: block; font-family: var(--f-head); font-size: 30px; line-height: 1; margin-bottom: 6px; }
.qv-sum .ok b { color: #46C98C; } .qv-sum .warm b { color: #FFBF00; } .qv-sum .none b { color: #56CCE6; }
.qv-people > li { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 20px 14px; text-align: center; }
.qv-av { width: 52px; height: 52px; margin-bottom: 8px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; font-weight: 700; color: #081B21; background: #46C98C; }
.qv-av.b { background: #FFBF00; }
.qv-av.c { background: #56CCE6; }
.qv-big { margin-top: 10px !important; font-family: var(--f-head); font-size: 34px; color: #fff; line-height: 1; }
.qv-big span { font-size: 16px; color: var(--l-muted); }
/* El mapa: una casilla por pantalla, 7 por fila; las vistas en verde, en orden de lectura. Al verse, se encienden una
   tras otra (.is-in la pone js/piezas.js). */
.qv-map { display: grid; grid-template-columns: repeat(7, 12px); gap: 4px; margin: 12px 0 14px; }
.qv-map i { width: 12px; height: 12px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); }
.qv-map i.on { background: #46C98C; box-shadow: 0 0 8px rgba(70, 201, 140, 0.35); }
.qv.is-in .qv-map i.on { animation: qv-light .35s ease-out both; animation-delay: calc(var(--k) * 70ms); }
@keyframes qv-light { from { background: rgba(255, 255, 255, 0.08); box-shadow: none; transform: scale(0.6); } to { background: #46C98C; box-shadow: 0 0 8px rgba(70, 201, 140, 0.35); transform: none; } }
.qv-tag { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; background: rgba(255, 255, 255, 0.06); color: var(--l-muted); }
.qv-tag.ok { color: #46C98C; background: rgba(70, 201, 140, 0.12); }
.qv-tag.warm { color: #FFBF00; background: rgba(255, 191, 0, 0.12); }
.qv-tag.btn { color: #081B21; background: var(--c-celeste); padding: 6px 24px; font-size: 12px; }
.qv .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; animation: seen-live 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .qv .dot, .qv.is-in .qv-map i.on { animation: none; } }
@media (max-width: 560px) { .qv-people { grid-template-columns: 1fr; } .qv-sum b { font-size: 24px; } .qv-sum p { padding: 12px; } }

/* ---------- «Quién lo vio»: la demostración (js/quien.js) ---------- */
/* El botón «Recordar» pasa a ser un chip de enviado. */
.qv-remind { position: relative; display: inline-flex; max-width: 100%; transition: background .3s var(--ease), color .3s var(--ease), transform .15s var(--ease); }
.qv-remind > span { display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: opacity .25s var(--ease); }
/* Mientras no se envía, el texto del chip no ocupa sitio: el botón mide lo que su palabra. */
.qv-remind .r-b { position: absolute; left: 0; top: 0; opacity: 0; white-space: nowrap; pointer-events: none; }
.qv-remind.is-press { transform: scale(0.94); }
.qv-remind.is-sent { background: rgba(70, 201, 140, 0.14); color: #46C98C; padding: 7px 14px; border-radius: 14px; }
.qv-remind.is-sent .r-a { position: absolute; left: 0; top: 0; opacity: 0; }
.qv-remind.is-sent .r-b { position: static; opacity: 1; white-space: normal; text-align: left; line-height: 1.3; }
.qv-plane { width: 14px; height: 14px; flex: none; }
/* La casilla bajo el cursor. */
.qv-map i.is-hover { outline: 2px solid #fff; outline-offset: 1px; }
/* El cursor. */
.qv-cursor { position: absolute; left: 0; top: 0; z-index: 4; width: 26px; height: 26px; pointer-events: none; opacity: 0; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5));
	transform: translate(var(--x, 0px), var(--y, 0px)); transition: transform var(--move, 700ms) cubic-bezier(0.45, 0, 0.2, 1), opacity .3s var(--ease); }
.qv-cursor.is-on { opacity: 1; }
.qv-cursor.is-press path { transform: scale(0.86); transform-origin: 4px 3px; }
/* La tarjeta que asoma con la pantalla vista. */
.qv-peek { position: absolute; left: 0; top: 0; z-index: 3; width: 168px; padding: 8px; border-radius: 22px; pointer-events: none;
	background: rgba(14, 30, 38, 0.92); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
	transform: translate(var(--px, 0px), var(--py, 0px)) scale(0.94); transform-origin: 50% 100%; opacity: 0; transition: opacity .2s var(--ease), transform .2s var(--ease); }
.qv-peek.is-on { opacity: 1; transform: translate(var(--px, 0px), var(--py, 0px)); }
.qv-peek::after { content: ''; position: absolute; left: calc(var(--arrow, 50%) - 7px); bottom: -7px; width: 14px; height: 14px; transform: rotate(45deg); background: rgba(14, 30, 38, 0.92); border-right: 1px solid rgba(255, 255, 255, 0.12); border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.qv-scr { display: none; }
.qv-scr.is-on { display: block; }
.qv-scr-t { margin: 2px 4px 8px !important; display: flex; justify-content: space-between; align-items: baseline; color: #fff; font-size: 12px; font-weight: 600; }
.qv-scr-t span { color: var(--l-muted); font-weight: 400; font-size: 11px; }
/* Pantallas de La Terraza en pequeño: diseñadas a 390 × 844 (como en las piezas del portal) y escaladas a 150 de ancho. */
.ltm { position: relative; width: 150px; height: 325px; border-radius: 16px; overflow: hidden; background: #FBF8F3; }
.ltm-in { position: absolute; left: 0; top: 0; width: 390px; height: 844px; transform: scale(0.3846); transform-origin: 0 0; color: #1E2A2E; font-size: 16px; line-height: 1.35; font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; }
.ltm .lt-status { display: flex; justify-content: space-between; align-items: center; height: 46px; padding: 0 28px; font-size: 15px; font-weight: 700; }
.ltm .lt-status i { display: inline-block; width: 46px; height: 12px; border-radius: 4px; background: linear-gradient(90deg, #1E2A2E 0 18px, transparent 18px 22px, #1E2A2E 22px 46px); opacity: .85; }
.ltm .lt-bar { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 22px 12px; }
.ltm .lt-bar b { font-size: 23px; letter-spacing: -.02em; color: #1E2A2E; }
.ltm .lt-bar small { font-size: 15px; color: #6B7A7F; }
.ltm .lt-hero { position: relative; height: 168px; margin: 0 18px; border-radius: 22px; overflow: hidden; background: linear-gradient(180deg, #F2C58C 0%, #E59A62 46%, #C8643B 47%, #9C5434 70%, #5E6B3A 71%, #4C5A2E 100%); }
.ltm .lt-hero::before { content: ''; position: absolute; left: 62%; top: 30px; width: 58px; height: 58px; border-radius: 50%; background: #FFE2B0; box-shadow: 0 0 40px rgba(255, 226, 176, .7); }
.ltm .lt-chip { position: absolute; left: 14px; top: 14px; z-index: 1; padding: 6px 12px; border-radius: 999px; background: rgba(251, 248, 243, .92); font-size: 13px; font-weight: 700; color: #2F5B3A; }
.ltm .lt-h { padding: 18px 22px 2px; font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.ltm .lt-sub { padding: 0 22px 14px; color: #6B7A7F; font-size: 15px; }
.ltm .lt-card { display: flex; justify-content: space-between; align-items: center; margin: 0 18px; padding: 16px 18px; border-radius: 18px; background: #EFE7DA; }
.ltm .lt-card b, .ltm .lt-dish b, .ltm .lt-table b { display: block; font-size: 17px; color: #1E2A2E; }
.ltm .lt-card span, .ltm .lt-dish span, .ltm .lt-table span { color: #6B7A7F; font-size: 14px; }
.ltm .lt-card em { font-style: normal; padding: 7px 14px; border-radius: 999px; background: #1E2A2E; color: #fff; font-size: 13px; font-weight: 700; }
.ltm .lt-cta { position: absolute; left: 18px; right: 18px; bottom: 104px; height: 56px; display: grid; place-items: center; border-radius: 16px; background: #2F7A5A; color: #fff; font-size: 17px; font-weight: 700; }
.ltm .lt-cta.g { bottom: 30px; }
.ltm .lt-tabs { position: absolute; left: 0; right: 0; bottom: 0; height: 86px; display: flex; justify-content: space-around; padding-top: 14px; border-top: 1px solid rgba(30, 42, 46, .08); background: #fff; font-size: 12px; color: #8A979B; }
.ltm .lt-tabs span { display: grid; justify-items: center; gap: 6px; }
.ltm .lt-tabs span::before { content: ''; width: 22px; height: 22px; border-radius: 7px; background: currentColor; opacity: .35; }
.ltm .lt-tabs span.on { color: #2F7A5A; font-weight: 700; }
.ltm .lt-tabs span.on::before { opacity: 1; }
.ltm .lt-chips { display: flex; gap: 8px; margin: 4px 18px 16px; }
.ltm .lt-chips i { font-style: normal; padding: 9px 15px; border-radius: 999px; border: 1px solid rgba(30, 42, 46, .18); font-size: 14px; }
.ltm .lt-chips i.on { background: #1E2A2E; color: #fff; border-color: #1E2A2E; }
.ltm .lt-dish { display: flex; align-items: center; gap: 14px; margin: 0 18px 12px; padding: 12px; border-radius: 18px; background: #EFE7DA; }
.ltm .lt-dish > i { width: 64px; height: 64px; flex: none; border-radius: 14px; background: linear-gradient(135deg, #E59A62, #C8643B); }
.ltm .lt-dish > i.b { background: linear-gradient(135deg, #9C5434, #5E6B3A); }
.ltm .lt-dish > i.c { background: linear-gradient(135deg, #8FBF6A, #E2574C); }
.ltm .lt-dish > div { flex: 1; }
.ltm .lt-dish em { font-style: normal; font-weight: 700; font-size: 16px; }
.ltm .lt-table { margin: 0 18px 4px; border-radius: 18px; overflow: hidden; background: #EFE7DA; }
.ltm .lt-table > i { display: block; height: 120px; background: linear-gradient(180deg, #F2C58C 0%, #E59A62 50%, #C8643B 51%, #9C5434 72%, #5E6B3A 73%, #4C5A2E 100%); }
.ltm .lt-table > div { padding: 12px 16px 14px; }
.ltm .lt-row { display: flex; justify-content: space-between; margin: 0 18px 10px; padding: 16px 18px; border-radius: 16px; background: #EFE7DA; font-size: 16px; }
.ltm .lt-row span { color: #6B7A7F; }
.ltm .lt-row b { color: #1E2A2E; }
@media (prefers-reduced-motion: reduce) { .qv-cursor, .qv-peek { display: none; } }