/* Páginas por bloque (asesoria, despacho, equipo, negocio). Las piezas comunes (respiro, lámina, rótulo,
   data-entra, data-posa, escena fija) viven en estilo.css. Cada página lleva su tono mate (data-tono en <body>)
   y cada tramo puede cambiarlo (data-tono en la sección): así no hay dos pantallas seguidas iguales. */

[data-tono="arena"] { --tono: #f1e8db; }
[data-tono="papel"] { --tono: var(--papel-calido); }
[data-tono="azul"] { --tono: #e6e9ee; }
[data-tono="salvia"] { --tono: #e5e9e1; }
[data-tono="terracota"] { --tono: #f3e9e1; }
body[data-tono="asesoria"] { --tono-pagina: #f1e8db; --acento: var(--arena-hondo); }
body[data-tono="despacho"] { --tono-pagina: #f3e9e1; --acento: var(--terracota-hondo); }
/* Equipo era salvia (#e5e9e1, verdoso) y se veía de otro color al lado de las otras tres, todas cálidas: la cabecera
   va en un cálido de la misma familia y el salvia queda como acento y en sus secciones (la CTO, 10-oct) */
body[data-tono="equipo"] { --tono-pagina: #eee9e0; --acento: var(--salvia-hondo); }
body[data-tono="negocio"] { --tono-pagina: #ece7dc; --acento: var(--oliva); }

/* Cabecera propia de cada página: texto e imagen o clip, con un índice de lo que hay dentro. El hueco de la barra
   va DENTRO de la cabecera y no en <main>: la barra es translúcida y, con el hueco en <main>, detrás de ella se veía
   una franja blanca antes del color de la página */
/* Color liso, el de la página: con el degradado hasta el crema, la cabecera se confundía con la primera sección
   (la CTO la quiere distinta, 10-oct). La primera sección de estas páginas va siempre sin tono, en crema. */
.pag-cabecera { background: var(--tono-pagina); padding: calc(var(--nav-alto) + var(--nav-margen) + clamp(40px, 6vw, 80px)) 0 clamp(40px, 6vw, 72px); }
.cab-int { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 40px 64px; align-items: center; }
.cab-apilada { grid-template-columns: 1fr; }
.cab-texto .etiqueta { display: block; margin-bottom: 14px; color: var(--acento); }
/* Índice de la página: enlaces de texto finos, separados por una línea fina (sin píldoras) */
.cab-indice { display: flex; flex-wrap: wrap; align-items: center; margin-top: 30px; padding-top: 16px; border-top: 1px solid rgba(74, 79, 90, 0.14); }
.cab-indice a { position: relative; padding: 2px 18px 2px 0; margin-right: 18px; font-size: 14px; color: var(--gris); transition: color 200ms; }
.cab-indice a::after { content: ""; position: absolute; right: 0; top: 50%; width: 1px; height: 12px; margin-top: -6px; background: rgba(74, 79, 90, 0.2); }
.cab-indice a:last-child::after { display: none; }
.cab-indice a:hover { color: var(--amarillo); }
/* El índice se recorre solo: cada enlace se enciende en dorado y pasa el testigo al siguiente (js/paginas.js),
   para que se vea que es interactivo. La línea fina de debajo crece con él. Al pasar el ratón manda el ratón. */
.cab-indice a { transition: color 450ms var(--suave); }
.cab-indice a::before { content: ""; position: absolute; left: 0; right: 18px; bottom: -3px; height: 1px; background: var(--oro-mate); transform: scaleX(0); transform-origin: left; transition: transform 600ms var(--salida); }
.cab-indice a.luce { color: var(--oro-tinta); }
.cab-indice a.luce::before { transform: scaleX(1); }
.cab-indice:hover a.luce:not(:hover) { color: var(--gris); }
.cab-indice:hover a.luce:not(:hover)::before { transform: scaleX(0); }
.cab-apilada .cab-media { margin-top: 8px; }

/* Fotos de la app (cabeceras y modales), recortadas con gusto */
.foto { margin: 0; border-radius: var(--radio); overflow: hidden; box-shadow: 0 0 0 1px rgba(74, 79, 90, 0.08); }
.foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-alta { aspect-ratio: 4 / 5; max-height: 560px; }
.foto-alta img { object-position: center 40%; }
.foto-banda { aspect-ratio: 21 / 7; }
.foto-banda img { object-position: center 55%; }

/* Tramos: una sección por opción del desplegable; cuatro formas distintas */
.tramo { padding: clamp(64px, 8vw, 112px) 0; background: var(--tono, transparent); }
.tramo-int { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 36px 64px; align-items: center; }
.tramo-izq .tramo-int { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
.tramo-izq .tramo-texto { order: 2; }
.tramo-ancho .tramo-int { grid-template-columns: 1fr; gap: 28px; }
/* Compacto (Equipo): la pantalla al lado del texto y más pequeña que él; la CTO las veía demasiado grandes */
.tramo-der.tramo-compacto .tramo-int { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); }
.tramo-izq.tramo-compacto .tramo-int { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); }
.tramo-ancho .tramo-texto { max-width: 760px; }
.tramo-doble .tramo-int { grid-template-columns: 1fr; gap: 28px; }
/* Las dos láminas a partes iguales y las dos en 16:9, como se grabaron. Antes la segunda iba a 4:3 y más estrecha,
   y recortaba el lado derecho de la pantalla: en «AnIA frente a Hacienda» se cortaba el texto (la CTO, 12-oct). */
.tramo-doble .tramo-media { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: end; }
.tramo-cabecera { max-width: 760px; margin-bottom: 8px; }
/* Escena fija dentro de una página: la cabecera va DENTRO de lo fijo, sobre la rejilla, sin huecos */
.tramo-escena { padding: 0; }
.tramo-escena .escena { height: calc(var(--pasos, 2) * 90vh + 30vh); }
.tramo-escena .escena-fija { flex-direction: column; align-items: stretch; justify-content: center; gap: 28px; padding: calc(var(--nav-alto) + 16px) 0 24px; }
.tramo-escena .escena-fija > .contenedor { width: min(var(--ancho), 100% - 2 * var(--gutter)); }
.tramo-escena .tramo-cabecera { margin-bottom: 0; max-width: none; }
.tramo-escena .tramo-cabecera > * { max-width: 760px; }
.tramo-escena .escena-lamina { max-height: 56vh; aspect-ratio: 16 / 9; }

/* El dinero (Despacho): una rejilla con una lámina grande y dos pequeñas */
.dinero-rejilla { display: grid; grid-template-columns: 1.5fr 1fr; grid-template-rows: auto auto; gap: 20px; margin-top: 36px; }
.dinero-grande { grid-row: span 2; }
.dinero-grande .lamina { height: 100%; aspect-ratio: auto; min-height: 420px; }

/* Comisionando (Negocio): gráfico conceptual interactivo. Tu despacho (la «A») en el centro, la red alrededor; los
   hilos se dibujan al entrar en pantalla, el encargo viaja hacia el profesional y la comisión vuelve. Con el ratón o
   el dedo sobre un profesional se ilumina su hilo. Las posiciones van en % del contenedor (4:3) y en el viewBox
   400x300 del SVG, así casan a cualquier ancho. */
.red { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radio); background: #fff; box-shadow: inset 0 0 0 1px var(--linea); overflow: hidden; }
.red-hilos { position: absolute; inset: 0; width: 100%; height: 100%; }
/* En reposo el hilo es un trazo tenue; cuando sale el encargo (.sale) crece desde el despacho hasta el profesional,
   en amarillo, como una flecha que avanza delante del punto. Trazos finos a propósito: con 2,2 la CTO lo veía
   «muy robusto» (el viewBox se escala, y a 1440 cada unidad son ~1,5 px) */
.red-hilo { fill: none; stroke: var(--oro-mate); stroke-width: 0.8; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0.45; transition: stroke-dashoffset 1200ms var(--salida), stroke 300ms, stroke-width 300ms, opacity 400ms; }
.red.dibujado .red-hilo { stroke-dashoffset: 0; }
.red.dibujado .red-hilo.sale { stroke: var(--amarillo); stroke-width: 1.1; opacity: 1; animation: red-sale 800ms var(--salida) both; }
@keyframes red-sale { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
/* El hilo de vuelta (la comisión) se dibuja en verde salvia mientras la comisión viaja hacia el despacho */
.red-vuelta { fill: none; stroke: var(--salvia-hondo); stroke-width: 1.1; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset 800ms linear, opacity 200ms; }
.red-vuelta.viaja { stroke-dashoffset: 0; opacity: 1; }
.red-encargo, .red-comision { opacity: 0; transition: opacity 200ms; }
.red-encargo { fill: var(--oro-mate); }
.red-comision { fill: var(--salvia-hondo); }
.red-encargo.viaja, .red-comision.viaja { opacity: 1; }
.red-centro { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 16px 10px; border-radius: 16px; background: #fff; box-shadow: 0 10px 28px rgba(74, 79, 90, 0.1), inset 0 0 0 1px var(--linea); }
.red-centro img { width: 40px; height: auto; }
.red-centro span { font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gris); }
.red-nodo { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); padding: 8px 14px; border-radius: 999px; background: var(--humo); color: var(--tinta-2); font-size: 13.5px; font-weight: 500; white-space: nowrap; box-shadow: inset 0 0 0 1px transparent; opacity: 0; transition: opacity 500ms var(--suave) calc(var(--n, 0) * 90ms + 500ms), background-color 240ms, color 240ms, box-shadow 240ms; cursor: pointer; }
/* La CTO pidió que los profesionales se muevan y se enciendan solos: todos flotan un poco, cada uno a su ritmo (--n);
   al llegarle el encargo la insignia se enciende (crece, se ilumina en dorado y late) y, cuando la comisión ha
   vuelto al despacho, su borde pasa a verde salvia. Van en translate/scale sueltos para no pisar el transform que
   los centra en su punto. El ratón sólo destaca: la secuencia sigue. */
.red.dibujado .red-nodo { opacity: 1; animation: red-flota 4.2s ease-in-out calc(var(--n, 0) * -0.7s) infinite; }
.red-nodo { transition: opacity 500ms var(--suave) calc(var(--n, 0) * 90ms + 500ms), background-color 300ms, color 300ms, box-shadow 300ms, scale 480ms var(--salida); }
.red-nodo.encendido, .red-nodo:hover, .red-nodo:focus-visible { background: #fff; color: var(--oro-tinta); box-shadow: inset 0 0 0 1px var(--oro-mate), 0 8px 20px rgba(74, 79, 90, 0.1); outline: none; scale: 1.14; z-index: 2; }
.red.dibujado .red-nodo.encendido { animation: red-flota 4.2s ease-in-out calc(var(--n, 0) * -0.7s) infinite, red-late 900ms ease-out 1; }
.red-nodo.encendido.cobra { color: var(--tinta); box-shadow: inset 0 0 0 1.5px var(--salvia-hondo), 0 8px 20px rgba(74, 79, 90, 0.1); }
.red.dibujado .red-nodo.encendido.cobra { animation: red-flota 4.2s ease-in-out calc(var(--n, 0) * -0.7s) infinite, red-cobra 900ms ease-out 1; }
@keyframes red-flota { 0%, 100% { translate: 0 0; } 50% { translate: 0 var(--flota, -5px); } }
@keyframes red-late {
  0% { box-shadow: inset 0 0 0 1px var(--oro-mate), 0 0 0 0 rgba(201, 168, 74, 0.5), 0 8px 20px rgba(74, 79, 90, 0.1); }
  100% { box-shadow: inset 0 0 0 1px var(--oro-mate), 0 0 0 14px rgba(201, 168, 74, 0), 0 8px 20px rgba(74, 79, 90, 0.1); }
}
@keyframes red-cobra {
  0% { box-shadow: inset 0 0 0 1.5px var(--salvia-hondo), 0 0 0 0 rgba(122, 138, 114, 0.5), 0 8px 20px rgba(74, 79, 90, 0.1); }
  100% { box-shadow: inset 0 0 0 1.5px var(--salvia-hondo), 0 0 0 14px rgba(122, 138, 114, 0), 0 8px 20px rgba(74, 79, 90, 0.1); }
}
/* estilo.css deja todas las animaciones en 1 ms con «reducir movimiento»; Comisionando recupera sus tiempos a
   propósito (ver js/paginas.js): la CTO lo tiene activado y la pieza tiene que verse viva */
@media (prefers-reduced-motion: reduce) {
  .red .red-hilo, .red .red-vuelta { transition-duration: 1200ms, 300ms, 300ms, 400ms !important; }
  .red.dibujado .red-hilo.sale { animation-duration: 800ms !important; }
  .red .red-vuelta { transition-duration: 800ms, 200ms !important; }
  .red .red-encargo, .red .red-comision { transition-duration: 200ms !important; }
  .red .red-nodo { transition-duration: 500ms, 300ms, 300ms, 300ms, 480ms !important; }
  .red.dibujado .red-nodo { animation-duration: 4.2s !important; }
  .red.dibujado .red-nodo.encendido, .red.dibujado .red-nodo.encendido.cobra { animation-duration: 4.2s, 900ms !important; }
  .cab-indice a { transition-duration: 450ms !important; }
  .cab-indice a::before { transition-duration: 600ms !important; }
}
/* Leyenda en la esquina inferior derecha, en dos líneas: no pisa ningún profesional, tampoco en móvil */
.red-leyenda { position: absolute; right: 14px; bottom: 10px; margin: 0; display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 6px; row-gap: 3px; font-size: 12px; color: var(--gris); }
.red-leyenda i { width: 9px; height: 9px; border-radius: 50%; }
.red-l-encargo { background: var(--oro-mate); }
.red-l-comision { background: var(--salvia-hondo); }

/* Despacho, Firma y satisfacción: la encuesta es una tarjeta estrecha centrada en una grabación 16:9 llena de
   blanco a los lados. La lámina se recorta a lo que ocupa la tarjeta (9:16, centrada) y se pone a la altura de la
   firma, por eso las columnas van en esa proporción. */
#valoraciones .tramo-media { grid-template-columns: 3.15fr 1fr; align-items: center; }
.tramo-doble .tramo-media .lamina.lamina-encuesta { aspect-ratio: 9 / 16; }
.lamina-encuesta video { object-position: center top; }
/* Despacho, El dinero: en la grabación de morosos el kanban va abajo y el rótulo lo tapaba. Se acerca la parte
   de abajo (indicadores y columnas del kanban) y el rótulo sube arriba. */
.lamina-kanban video { object-position: center bottom; transform: scale(1.65); transform-origin: 50% 100%; }
.lamina-kanban .rotulo { bottom: auto; top: 12px; }

/* Despacho, El dinero con cuatro láminas iguales (12-oct: entra Suplidos): rejilla 2x2, sin la grande */
.dinero-rejilla.dinero-cuatro { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
/* Despacho, Facturación (13-oct): la historia se cuenta una vez, en tres pasos (se preparan, se envían, se cobran),
   cada uno con la misma etiqueta encima del titular; el primero lleva sus tres pantallas en una fila */
.dinero-rejilla.dinero-tres { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto; }
.tramo-texto .etiqueta, .tramo-cabecera .etiqueta { display: block; margin-bottom: 14px; }

/* Fichas de claves (12-oct): cuatro claves en rejilla con su punto de color. Las usan AnIA en la portada (las cuatro
   claves de la locución del anuncio) y las alertas de Despacho (qué vigilan, qué hacen, a quién, cada cuánto). */
.fichas-claves { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; margin-top: 28px; }
.fichas-claves li { position: relative; padding-left: 20px; font-size: 14.5px; line-height: 1.4; color: var(--gris); }
.fichas-claves li::before { content: ""; position: absolute; left: 0; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--oro-mate)); }
.fichas-claves li b { display: block; font-weight: 500; color: var(--tinta); }
.tramo .ania-proteccion, .ania .ania-proteccion { margin-top: 26px; }
/* Portada · AnIA: el vídeo a la vista y grande (la CTO, 12-oct: «que se vea el vídeo»): el texto y las cuatro claves
   en una fila arriba y, debajo, el tramo del anuncio con su voz a todo el ancho, en una caja de cine (estilo.css:
   .cine) con su póster y un botón de reproducir claro */
/* 12-oct, segunda vuelta: la CTO lo prefiere con el vídeo AL LADO del texto, no debajo y a todo el ancho. Texto y
   claves (de dos en dos) a la izquierda; el vídeo a la derecha, centrado en altura. En móvil, uno debajo del otro. */
.ania .ania-int { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px 64px; align-items: center; }
.ania .ania-texto .linea-seccion { max-width: 52ch; }
.ania .fichas-claves { grid-template-columns: 1fr 1fr; }
.ania .cine { width: 100%; }
.ania .cine-boton { height: 54px; font-size: 15.5px; }
.ania .cine-boton i { width: 40px; height: 40px; }
.ania .cine-boton { height: 64px; padding: 0 28px 0 10px; font-size: 17px; }
.ania .cine-boton i { width: 46px; height: 46px; }
.ania .cine-boton small { font-weight: 400; color: var(--gris); margin-left: 2px; }
.ania .cine video { background: #1b1d22; }
@media (max-width: 1024px) { .ania .ania-int { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .ania { padding: 64px 0; }
  .fichas-claves, .ania .fichas-claves { grid-template-columns: 1fr; gap: 14px; margin-top: 22px; }
  /* Al ir con left: 50%, el navegador sólo le deja la mitad del vídeo de ancho: en móvil el texto partía en dos
     líneas y el círculo del play, al encoger con él, salía ovalado. Una sola línea, letra algo menor y el círculo
     sin encoger (13-oct). */
  .ania .cine-boton { height: 46px; gap: 10px; font-size: 13.5px; padding: 0 16px 0 6px; white-space: nowrap; }
  .ania .cine-boton i { width: 34px; height: 34px; flex-shrink: 0; }
  .ania .cine-boton i svg { width: 12px; height: 12px; }
}

/* Tu día · Ponte al Día (12-oct): las dos láminas recortadas a la columna de Ponte al Día, una al lado de la otra:
   la tarjeta del Inicio y el «¿Qué cambia?» abierto */
.b-ponte-par { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.b-ponte-par .b-lamina.b-recorte-ponte { width: 100%; margin-inline: 0; }
@media (max-width: 520px) { .b-ponte-par { grid-template-columns: 1fr; gap: 16px; } .b-ponte-par .b-lamina.b-recorte-ponte { width: min(100%, 360px); margin-inline: auto; } }

/* Asesoría · Contabilidad (12-oct): la checklist del anuncio. La lista a un lado y las dos pantallas apiladas al
   otro. Cada fila entra desde la derecha y su check se rellena de dorado mientras el trazo se dibuja (sin rebotes);
   la primera, lo básico, en gris. Sin JS o con «reducir movimiento» se ve todo marcado desde el principio. */
.tramo-checklist .tramo-int { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); align-items: start; }
.tramo-checklist .tramo-media { display: grid; gap: 18px; }
.checklist-basico { margin-top: 24px; font-size: 15px; color: var(--gris); }
.checklist { margin-top: 14px; display: grid; gap: 10px; }
.checklist li { display: flex; align-items: center; gap: 12px; font-size: 16px; line-height: 1.3; color: var(--tinta); transition: opacity 450ms var(--suave), transform 550ms var(--salida), color 350ms var(--suave); transition-delay: calc(var(--k, 0) * 320ms + 300ms); }
.checklist li.gris { color: var(--gris); }
.js .checklist li:not(.marcado) { opacity: 0.45; transform: translateX(14px); color: var(--tinta-2); }
.chk { position: relative; flex: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px var(--linea-fuerte); transition: background-color 320ms var(--suave), box-shadow 320ms var(--suave); transition-delay: calc(var(--k, 0) * 320ms + 300ms); }
.chk svg { position: absolute; left: 5px; top: 6px; width: 16px; height: 13px; fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 32; stroke-dashoffset: 0; transition: stroke-dashoffset 380ms var(--suave); transition-delay: calc(var(--k, 0) * 320ms + 390ms); }
.js .checklist li:not(.marcado) .chk svg { stroke-dashoffset: 32; }
.checklist li.marcado .chk, .checklist li .chk { background: var(--amarillo); box-shadow: inset 0 0 0 1.5px var(--amarillo); }
.js .checklist li:not(.marcado) .chk { background: #fff; box-shadow: inset 0 0 0 1.5px var(--linea-fuerte); }
.checklist li.gris .chk { background: #aeb4bf; box-shadow: inset 0 0 0 1.5px #aeb4bf; }
.js .checklist li.gris:not(.marcado) .chk { background: #fff; box-shadow: inset 0 0 0 1.5px var(--linea-fuerte); }
@media (max-width: 900px) { .tramo-checklist .tramo-int { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .checklist li { font-size: 15px; } .checklist { gap: 8px; } }
@media (prefers-reduced-motion: reduce) { .js .checklist li:not(.marcado) { opacity: 1; transform: none; } .checklist li, .checklist .chk, .checklist .chk svg { transition-delay: 0s !important; } }

/* Asesoría · Laboral (12-oct): tres láminas, la ficha automatizada, el despido y, posada como hoja A4, la hoja de
   trabajo lista para imprimir (anuncio/assets/capturas/hoja_trabajo_lucia-1.png); en móvil, una debajo de otra */
.tramo-laboral .tramo-media { grid-template-columns: 1.1fr 1.1fr 0.72fr; align-items: start; }
.tramo-laboral .tramo-media .lamina:last-child { aspect-ratio: 993 / 1404; background: #fff; }
.tramo-laboral .lamina-folio img { object-fit: contain; object-position: top center; }
@media (max-width: 900px) {
  .tramo-laboral .tramo-media { grid-template-columns: 1fr; }
  .tramo-laboral .tramo-media .lamina:last-child { aspect-ratio: 993 / 1404; width: min(100%, 360px); justify-self: center; }
}

/* Pantallas fijas de la app en 16:10 (capturas) */
.lamina-1610 { aspect-ratio: 16 / 10; }
.lamina-1610 img { object-position: top center; }

/* Al final de cada página: el bloque siguiente, en el orden de la barra */
.siguiente { padding: clamp(56px, 7vw, 96px) 0; background: var(--tono-cierre, var(--fondo)); border-top: 1px solid var(--linea); }
/* La franja final (el mensaje antes del pie) va en el tono mate de su página, un punto más hondo que la cabecera,
   para que no se confunda con el pie, que se queda en su papel cálido en todas. En la portada no hace falta:
   la foto ya separa. */
body[data-tono="asesoria"] { --tono-cierre: #ebdcc5; }
body[data-tono="despacho"] { --tono-cierre: #eedcd0; }
body[data-tono="equipo"] { --tono-cierre: #e5dfd3; }
body[data-tono="negocio"] { --tono-cierre: #e2dccb; }
body.b-oficina { --tono-cierre: #ebe1cd; }
body.b-email { --tono-cierre: #e1e5ec; }
body.b-agenda { --tono-cierre: #dfe4dc; }
body.b-seguridad { --tono-cierre: #d9e0d3; }
body.b-pagina .b-cierre.b-papel { background: var(--tono-cierre, var(--papel-calido)); }
/* Negocio cierra con «Lo que vendes por la Oficina Digital», que hace de franja «Siguiente»: mismo tono de cierre,
   misma etiqueta y la misma flecha en círculo, ahora al lado de un enlace de texto */
.tramo-vender { background: var(--tono-cierre, var(--fondo)); border-top: 1px solid var(--linea); }
.tramo-vender .etiqueta { display: block; margin-bottom: 12px; }
.ir-siguiente { display: inline-flex; align-items: center; gap: 14px; margin-top: 26px; font-size: 16px; font-weight: 500; color: var(--tinta); transition: color 240ms; }
.ir-siguiente i { position: relative; width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--linea-fuerte); transition: transform 260ms var(--salida), box-shadow 240ms; }
.ir-siguiente i::before { content: ""; position: absolute; left: 14px; top: 21px; width: 16px; height: 1.5px; background: var(--amarillo); }
.ir-siguiente i::after { content: ""; position: absolute; right: 13px; top: 18px; width: 7px; height: 7px; border: 1.5px solid var(--amarillo); border-left: 0; border-bottom: 0; transform: rotate(45deg); }
.ir-siguiente:hover { color: var(--oro-tinta); }
.ir-siguiente:hover i { transform: translateX(6px); box-shadow: inset 0 0 0 1px var(--amarillo); }
.siguiente a { position: relative; display: block; padding-right: 64px; }
.siguiente .etiqueta { display: block; margin-bottom: 12px; }
.siguiente b { display: block; font-size: clamp(26px, 3.2vw, 46px); font-weight: 300; letter-spacing: -0.02em; line-height: 1.1; color: var(--tinta); transition: color 240ms; }
.siguiente a:hover b { color: var(--oro-tinta); }
.siguiente i { position: absolute; right: 0; top: 50%; width: 44px; height: 44px; margin-top: -10px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--linea-fuerte); transition: transform 260ms var(--salida), box-shadow 240ms; }
.siguiente i::before { content: ""; position: absolute; left: 14px; top: 21px; width: 16px; height: 1.5px; background: var(--amarillo); }
.siguiente i::after { content: ""; position: absolute; right: 13px; top: 18px; width: 7px; height: 7px; border: 1.5px solid var(--amarillo); border-left: 0; border-bottom: 0; transform: rotate(45deg); }
.siguiente a:hover i { transform: translateX(6px); box-shadow: inset 0 0 0 1px var(--amarillo); }

@media (max-width: 1040px) {
  .dinero-rejilla, .dinero-rejilla.dinero-cuatro, .dinero-rejilla.dinero-tres { grid-template-columns: 1fr; }
  .dinero-grande { grid-row: span 1; }
  .dinero-grande .lamina { min-height: 0; aspect-ratio: 16 / 9; }
}
@media (max-width: 900px) {
  .cab-int, .tramo-int, .tramo-izq .tramo-int, .tramo-compacto.tramo-der .tramo-int, .tramo-compacto.tramo-izq .tramo-int { grid-template-columns: 1fr; gap: 24px; }
  .tramo-izq .tramo-texto { order: 0; }
  .tramo-doble .tramo-media { grid-template-columns: 1fr; }
  #valoraciones .tramo-media { grid-template-columns: 1fr; }
  .tramo-doble .tramo-media .lamina.lamina-encuesta { aspect-ratio: 9 / 16; width: min(100%, 340px); justify-self: center; }
  .foto-alta { aspect-ratio: 16 / 10; max-height: none; }
  .foto-banda { aspect-ratio: 16 / 9; }
  .red-nodo { font-size: 12px; padding: 7px 11px; }
  .red-centro { padding: 10px 12px 8px; }
  .red-centro img { width: 32px; }
  .red-centro span { font-size: 10px; }
}

/* ---------- Móvil (10-oct): sólo anchos de 640 px o menos; el escritorio no cambia ---------- */
@media (max-width: 640px) {
  .pag-cabecera { padding: calc(var(--nav-alto) + var(--nav-margen) + 36px) 0 40px; }
  /* Índice de la cabecera: en dos columnas limpias, sin las rayitas separadoras, que en móvil quedaban colgando
     al final de cada línea */
  .cab-indice { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 18px; margin-top: 24px; }
  .cab-indice a { margin-right: 0; padding: 2px 0; font-size: 13.5px; line-height: 1.3; justify-self: start; }
  .cab-indice a::after { display: none; }
  .cab-indice a::before { right: 0; }

  .tramo { padding: 56px 0; }
  .tramo-int, .tramo-ancho .tramo-int, .tramo-doble .tramo-int { gap: 22px; }
  .tramo-doble .tramo-media { gap: 18px; }
  .dinero-rejilla, .dinero-rejilla.dinero-cuatro, .dinero-rejilla.dinero-tres { grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 26px; }
  /* Con el pie de foto debajo (margen inferior), el alto del 100 % incluía ese margen y la lámina 16:9 se ensanchaba */
  .dinero-grande .lamina { height: auto; }

  /* Bloque «Siguiente»: el titular a la medida y la flecha sin comerse media línea */
  .siguiente { padding: 48px 0; }
  .siguiente a { padding-right: 54px; }
  .siguiente b { font-size: clamp(22px, 6.6vw, 28px); }
}
/* Comisionando en pantallas estrechas: la red ocupa todo el ancho (gana un 20 %), los nombres largos se parten en
   dos líneas centradas en vez de salirse o pisarse, y la leyenda sube a la esquina libre de arriba a la izquierda,
   donde no hay ningún profesional (abajo se pisaba con «Prevención de riesgos») */
@media (max-width: 520px) {
  .red { margin-inline: calc(-1 * var(--gutter) + 8px); border-radius: 14px; }
  /* Insignias más pequeñas y quietas (11-oct, la CTO: «se ven muy grandes y se salen del recuadro»): Notaría y
     Prevención van pegadas al borde, y con el aumento al encenderse y el vaivén se cortaban contra él */
  .red { --flota: -2px; }
  .red-nodo { padding: 3px 8px; font-size: clamp(9.5px, 2.6vw, 11px); line-height: 1.15; white-space: normal; text-align: center; max-width: 30%; border-radius: 10px; }
  .red-nodo[data-nodo="0"], .red-nodo[data-nodo="3"] { max-width: 46%; }
  /* Un poco hacia dentro para que no rocen el borde; el final del hilo (6 % y 94 %) sigue quedando debajo */
  .red-nodo[data-nodo="0"] { top: 8.5%; }
  .red-nodo[data-nodo="3"] { top: 91.5%; }
  .red-nodo.encendido, .red-nodo:hover, .red-nodo:focus-visible { scale: 1.04; box-shadow: inset 0 0 0 1px var(--oro-mate), 0 4px 10px rgba(74, 79, 90, 0.08); }
  .red-nodo.encendido.cobra { box-shadow: inset 0 0 0 1.5px var(--salvia-hondo), 0 4px 10px rgba(74, 79, 90, 0.08); }
  .red-centro { padding: 7px 9px 6px; gap: 3px; border-radius: 12px; }
  .red-centro img { width: 24px; }
  .red-centro span { font-size: 8.5px; letter-spacing: 0.1em; }
  .red-leyenda { right: auto; left: 10px; bottom: auto; top: 8px; font-size: 10.5px; row-gap: 2px; }
  .red-leyenda i { width: 7px; height: 7px; }
}

/* Índice de la cabecera más apretado en escritorio (la CTO, 12-oct): en Asesoría «Mercantil» caía a una segunda
   línea debajo de «Consultas». Letra y separaciones algo menores para que las opciones quepan en una línea. */
@media (min-width: 1025px) {
  .cab-indice a { font-size: 13px; padding-right: 12px; margin-right: 12px; }
}

/* Revisor y redactor con la pluma de la app (la del redactor mercantil, Unsplash 1518674660708; la CTO, 13-oct):
   de fondo, arriba a la derecha, junto al titular, fundida hacia la izquierda y hacia abajo para que las láminas
   queden limpias encima. */
.tramo-pluma { position: relative; overflow: hidden; }
.tramo-pluma::before { content: ""; position: absolute; top: 0; right: 0; width: min(62%, 900px); height: 460px;
  background: url("../img/fotos/pluma.webp") 65% 50% / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 38%), linear-gradient(180deg, #000 45%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 38%), linear-gradient(180deg, #000 45%, transparent 100%);
  mask-composite: intersect; opacity: 0.9; pointer-events: none; }
.tramo-pluma > .contenedor { position: relative; z-index: 1; }
/* En móvil, desplazada a la derecha y cortada por el borde (la CTO, 13-oct): a todo el ancho la pluma cruzaba el
   subtítulo; así se ve la punta y poco del cuerpo. El fundido de la izquierda, más corto para no borrar la punta. */
@media (max-width: 640px) { .tramo-pluma::before { width: 100%; right: -36%; height: 300px; background-image: url("../img/fotos/pluma_movil.webp"); opacity: 0.55;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%), linear-gradient(180deg, #000 45%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 22%), linear-gradient(180deg, #000 45%, transparent 100%); } }