/* ══════════════════════════════════════════════════════════════════════════
   Bravo Advocats · V4 · Ritmo de página (2026-11-07)

   Petición de Nico: el fondo era siempre blanco y el scroll, monótono. Se le da
   ritmo por TIPO de sección, no página a página:
     · tinte   franja a sangre lisa, en un azul de marca muy suave. Sin retículas,
               puntos ni texturas (Nico: «típico de web hecha con IA»). Para
               bloques de tarjetas (áreas, recursos, otros).
     · oscuro  banda a sangre en marino de marca, con el isotipo en grande y casi
               transparente, y un corte en diagonal arriba. Para la llamada final.
     · divisor entre dos secciones blancas: filete con el isotipo en oro (sustituye
               al rombo).
   Cada tipo se puede pedir también a mano con las clases .r-tinte / .r-oscuro.
   Sin imágenes: degradados y un SVG de 300 bytes. Sin franjas laterales.
   Contraste: texto sobre tinte igual que sobre blanco (≥ 7:1); blanco sobre
   marino 12,6:1 en claro y 15:1 en oscuro.

   Ámbito: todas las páginas V4 salvo las fichas de Javier y las ocultas
   (calculadora de despido, APDCAT). Se enlaza justo después de v4-diseno.
   ══════════════════════════════════════════════════════════════════════════ */

html body.bravo-v3:not(.ip-javier) {
  --r-pagina: #FFFFFF;
  --r-tinte: #EEF3F8;
  --r-carta: #FFFFFF;
  --r-carta-linea: rgb(16 25 34 / 7%);
  --r-oscuro: #12324F;
  --r-oscuro-tinta: #FFFFFF;
  --r-marca: rgb(255 255 255 / 6%);
  --r-oro: #A9824F;
  --r-cuna: clamp(14px, 2vw, 28px);
  --r-iso: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 80'%3E%3Cpath fill-rule='evenodd' d='M0 0Q8 3 12 12V18H40Q50 18 50 28V80Q42 78 38 70V62H11Q0 62 0 51ZM13 30H38V50H13Z'/%3E%3C/svg%3E");
  --d-rombo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 80'%3E%3Cpath fill='%23A9824F' fill-rule='evenodd' d='M0 0Q8 3 12 12V18H40Q50 18 50 28V80Q42 78 38 70V62H11Q0 62 0 51ZM13 30H38V50H13Z'/%3E%3C/svg%3E");
}
html[data-tema="oscuro"] body.bravo-v3:not(.ip-javier) {
  --r-pagina: #181C20;
  --r-tinte: #1E252C;
  --r-carta: #262F38;
  --r-carta-linea: rgb(255 255 255 / 7%);
  --r-oscuro: #0D2135;
  --r-marca: rgb(143 192 232 / 7%);
  --r-oro: #C9A46E;
  --d-rombo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 80'%3E%3Cpath fill='%23C9A46E' fill-rule='evenodd' d='M0 0Q8 3 12 12V18H40Q50 18 50 28V80Q42 78 38 70V62H11Q0 62 0 51ZM13 30H38V50H13Z'/%3E%3C/svg%3E");
}

/* Las franjas a sangre salen de la columna de 1180 px: main recorta en horizontal
   (clip no crea contenedor de scroll, así que lo fijo y lo pegajoso siguen igual). */
html body.bravo-v3:not(.ip-javier) main#contenido { overflow-x: clip; }

/* ── Divisor entre secciones blancas: isotipo en oro sobre el filete ──────── */
html body.bravo-v3.areas-v3-page:not(.ip-javier) main#contenido:not(#r) > section + section:not(.cta, .r-oscuro, .r-tinte, :has(> .av-areas), .departamento__recursos)::before {
  width: 34px; height: 16px; top: -8px;
  background: var(--d-rombo) center / 12px 15px no-repeat, var(--r-pagina);
}

/* ── TINTE ────────────────────────────────────────────────────────────────── */
html body.bravo-v3.areas-v3-page:not(.ip-javier) main#contenido:not(#r) > section:is(.r-tinte, :has(> .av-areas), .departamento__recursos) {
  position: relative; isolation: isolate;
  padding-block: clamp(40px, 5vw, 64px);
  border-bottom-color: transparent;
}
html body.bravo-v3.areas-v3-page:not(.ip-javier) main#contenido:not(#r) > section:has(+ section:is(.r-tinte, :has(> .av-areas), .departamento__recursos, .r-oscuro, .cta)) {
  border-bottom-color: transparent;
}
html body.bravo-v3.areas-v3-page:not(.ip-javier) main#contenido:not(#r) > section:is(.r-tinte, :has(> .av-areas), .departamento__recursos)::before {
  content: ""; position: absolute; z-index: -2; pointer-events: none;
  inset: 0 calc(50% - 50vw); width: auto; height: auto; translate: none;
  background: var(--r-tinte);
}
html body.bravo-v3:not(.ip-javier) :is(.firma-v4-band--wash, main#contenido:not(#r) > section.related) { position: relative; isolation: isolate; }
html body.bravo-v3:not(.ip-javier) .art-hero { isolation: isolate; }
html body.bravo-v3:not(.ip-javier) :is(.firma-v4-band--wash, main#contenido:not(#r) > section.related) { background-color: var(--r-tinte); }

/* Tarjetas dentro de una franja tintada: se levantan en blanco (o en la carta oscura). */
html body.bravo-v3:not(.ip-javier) main#contenido:not(#r) > section:is(.r-tinte, :has(> .av-areas), .departamento__recursos) :is(.av-area, .resource-card, a.imp-sub, .av-info__card:not(.av-info__card--urgente)),
html body.bravo-v3:not(.ip-javier) .firma-v4-band--wash .firma-v4-areas > * {
  background-color: var(--r-carta);
  box-shadow: 0 0 0 1px var(--r-carta-linea);
}

/* ── OSCURO: la llamada final, a sangre, con corte en diagonal e isotipo ──── */
html body.bravo-v3:not(.ip-javier, .ip-herramientas) main#contenido:not(#r) > section:is(.r-oscuro, .cta, .recursos-cta, .blog-cta) {
  position: relative; isolation: isolate;
  margin-top: calc(var(--r-cuna) + 8px);
  padding-block: clamp(44px, 6vw, 76px);
  background: transparent;
  border: 0; border-radius: 0; box-shadow: none;
  color: var(--r-oscuro-tinta);
}
html body.bravo-v3:not(.ip-javier, .ip-herramientas) main#contenido:not(#r) > section:is(.r-oscuro, .cta, .recursos-cta, .blog-cta)::before {
  content: ""; display: block; position: absolute; z-index: -2; pointer-events: none; margin: 0;
  top: calc(-1 * var(--r-cuna)); bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw);
  width: auto; height: auto; translate: none;
  background: var(--r-oscuro);
  clip-path: polygon(0 var(--r-cuna), 100% 0, 100% 100%, 0 100%);
}
html body.bravo-v3:not(.ip-javier, .ip-herramientas) main#contenido:not(#r) > section:is(.r-oscuro, .cta, .recursos-cta, .blog-cta)::after,
html body.bravo-v3:not(.ip-javier) .firma-v4-band--blue::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: 0; bottom: 0; right: 0; aspect-ratio: 62 / 80;
  background: var(--r-marca);
  -webkit-mask: var(--r-iso) right center / contain no-repeat;
  mask: var(--r-iso) right center / contain no-repeat;
}
html body.bravo-v3:not(.ip-javier) .firma-v4-band--blue::after { right: max(24px, calc(50% - 590px)); top: 12%; bottom: 12%; }
html body.bravo-v3:not(.ip-javier, .ip-herramientas) main#contenido:not(#r) > section:is(.r-oscuro, .cta, .recursos-cta, .blog-cta)::after { right: calc(50% - 50vw - 24px); top: 8%; bottom: 8%; }
html body.bravo-v3:not(.ip-javier, .ip-herramientas) main#contenido:not(#r) > section:is(.r-oscuro, .cta, .recursos-cta, .blog-cta) :is(h2, p) { color: var(--r-oscuro-tinta); }
html body.bravo-v3:not(.ip-javier, .ip-herramientas) main#contenido:not(#r) > section:is(.r-oscuro, .cta, .recursos-cta, .blog-cta) p a { color: inherit; text-decoration-color: rgb(255 255 255 / 55%); }

@media (max-width: 700px) {
  /* En el móvil la llamada es alta (botones apilados): el isotipo, abajo y con tope. */
  html body.bravo-v3:not(.ip-javier, .ip-herramientas) main#contenido:not(#r) > section:is(.r-oscuro, .cta, .recursos-cta, .blog-cta)::after { opacity: .7; top: auto; bottom: 0; height: min(84%, 220px); }
}

/* ══════════════════════════════════════════════════════════════════════════
   Resto de plantillas (2026-11-07, rit3): mismo lenguaje que en las áreas.
     · servicio, equipo, administrativo (.av-page): se tiñe el bloque de
       tarjetas (rejilla, pasos, fases, relacionados). En una racha de bloques
       seguidos, el 1.º, 3.º y 5.º: nunca dos tintes juntos. Texto corrido y
       preguntas frecuentes, en blanco.
     · recursos legales: situaciones y el pie de apartados.
     · contacto: el bloque del formulario.
     · artículos y guías: solo los relacionados del final; el texto, en blanco.
     · la llamada final de todas (salvo herramientas, cuyo main mide 1180 px y
       no deja salir la banda) pasa a banda marina con corte e isotipo (arriba).
   Sin tinte: servicios y herramientas (su fondo ya es gris), la guía de
   detención (ya va por cajas), legales, portada y La firma (tienen el suyo).
   La franja se pinta con border-image de un color liso que sale 100vmax a cada
   lado, sin pseudo-elementos: en varias plantillas el ::before de la sección ya
   tiene uso (número de sección, filete). No ocupa sitio ni da scroll: main
   recorta en horizontal. Justo antes de la banda marina, la franja baja hasta el
   corte para que no quede una ranura blanca entre las dos.
   ══════════════════════════════════════════════════════════════════════════ */
html body.bravo-v3.av-page:not(.ip-javier, .areas-v3-page, .ip-servicios, .ip-herramientas, .dt-guide) main#contenido:not(#r) > :is(section:has(> :is(.av-info--tres, .av-areas, .av-puntos, .av-pasos, .bv-fases, .eq-lista, .av-track), > .av-info > :nth-child(2)), .bv-rel, .tarifas):not(:is(section:has(> :is(.av-info--tres, .av-areas, .av-puntos, .av-pasos, .bv-fases, .eq-lista, .av-track), > .av-info > :nth-child(2)), .bv-rel, .tarifas) + *),
html body.bravo-v3.av-page:not(.ip-javier, .areas-v3-page, .ip-servicios, .ip-herramientas, .dt-guide) main#contenido:not(#r) > :is(section:has(> :is(.av-info--tres, .av-areas, .av-puntos, .av-pasos, .bv-fases, .eq-lista, .av-track), > .av-info > :nth-child(2)), .bv-rel, .tarifas):not(:is(section:has(> :is(.av-info--tres, .av-areas, .av-puntos, .av-pasos, .bv-fases, .eq-lista, .av-track), > .av-info > :nth-child(2)), .bv-rel, .tarifas) + *) + :is(section:has(> :is(.av-info--tres, .av-areas, .av-puntos, .av-pasos, .bv-fases, .eq-lista, .av-track), > .av-info > :nth-child(2)), .bv-rel, .tarifas) + :is(section:has(> :is(.av-info--tres, .av-areas, .av-puntos, .av-pasos, .bv-fases, .eq-lista, .av-track), > .av-info > :nth-child(2)), .bv-rel, .tarifas),
html body.bravo-v3.av-page:not(.ip-javier, .areas-v3-page, .ip-servicios, .ip-herramientas, .dt-guide) main#contenido:not(#r) > :is(section:has(> :is(.av-info--tres, .av-areas, .av-puntos, .av-pasos, .bv-fases, .eq-lista, .av-track), > .av-info > :nth-child(2)), .bv-rel, .tarifas):not(:is(section:has(> :is(.av-info--tres, .av-areas, .av-puntos, .av-pasos, .bv-fases, .eq-lista, .av-track), > .av-info > :nth-child(2)), .bv-rel, .tarifas) + *) + :is(section:has(> :is(.av-info--tres, .av-areas, .av-puntos, .av-pasos, .bv-fases, .eq-lista, .av-track), > .av-info > :nth-child(2)), .bv-rel, .tarifas) + :is(section:has(> :is(.av-info--tres, .av-areas, .av-puntos, .av-pasos, .bv-fases, .eq-lista, .av-track), > .av-info > :nth-child(2)), .bv-rel, .tarifas) + :is(section:has(> :is(.av-info--tres, .av-areas, .av-puntos, .av-pasos, .bv-fases, .eq-lista, .av-track), > .av-info > :nth-child(2)), .bv-rel, .tarifas) + :is(section:has(> :is(.av-info--tres, .av-areas, .av-puntos, .av-pasos, .bv-fases, .eq-lista, .av-track), > .av-info > :nth-child(2)), .bv-rel, .tarifas),
html body.bravo-v3.portada-recursos:not(.ip-javier) main#contenido:not(#r) > section:is(.recursos-situaciones, .recursos-apartados--pie),
html body.bravo-v3.javier-contact-page:not(.ip-javier) main#contenido:not(#r) > section.cto-escribir,
html body.bravo-v3:not(.ip-javier, .av-page) main#contenido:not(#r) > section.related {
  border-image: linear-gradient(var(--r-tinte) 0 0) fill 0 / 0 / 0 100vmax !important; /* administrativo resetea el borde con !important */
  background-color: transparent;
  padding-block: clamp(40px, 5vw, 64px);
}
/* Administrativo: su main mide 1200 px y recortaba la franja; recorta el body. */
html body.bravo-v3.administrativo-visual:not(.ip-javier) main#contenido { overflow-x: visible; }
/* En contacto la sección no trae relleno: el aire, dentro de la franja. */
html body.bravo-v3.javier-contact-page:not(.ip-javier) main#contenido:not(#r) > section.cto-escribir { margin-block: clamp(32px, 4vw, 56px); }

/* Franja justo antes de la banda marina: baja hasta el corte. */
html body.bravo-v3.av-page:not(.ip-javier, .areas-v3-page, .ip-servicios, .ip-herramientas, .dt-guide) main#contenido:not(#r) > :is(section:has(> :is(.av-info--tres, .av-areas, .av-puntos, .av-pasos, .bv-fases, .eq-lista, .av-track), > .av-info > :nth-child(2)), .bv-rel, .tarifas):not(:is(section:has(> :is(.av-info--tres, .av-areas, .av-puntos, .av-pasos, .bv-fases, .eq-lista, .av-track), > .av-info > :nth-child(2)), .bv-rel, .tarifas) + *):has(+ section:is(.cta, .r-oscuro, .recursos-cta, .blog-cta)),
html body.bravo-v3.av-page:not(.ip-javier, .areas-v3-page, .ip-servicios, .ip-herramientas, .dt-guide) main#contenido:not(#r) > :is(section:has(> :is(.av-info--tres, .av-areas, .av-puntos, .av-pasos, .bv-fases, .eq-lista, .av-track), > .av-info > :nth-child(2)), .bv-rel, .tarifas):not(:is(section:has(> :is(.av-info--tres, .av-areas, .av-puntos, .av-pasos, .bv-fases, .eq-lista, .av-track), > .av-info > :nth-child(2)), .bv-rel, .tarifas) + *) + :is(section:has(> :is(.av-info--tres, .av-areas, .av-puntos, .av-pasos, .bv-fases, .eq-lista, .av-track), > .av-info > :nth-child(2)), .bv-rel, .tarifas) + :is(section:has(> :is(.av-info--tres, .av-areas, .av-puntos, .av-pasos, .bv-fases, .eq-lista, .av-track), > .av-info > :nth-child(2)), .bv-rel, .tarifas):has(+ section:is(.cta, .r-oscuro, .recursos-cta, .blog-cta)),
html body.bravo-v3.av-page:not(.ip-javier, .areas-v3-page, .ip-servicios, .ip-herramientas, .dt-guide) main#contenido:not(#r) > :is(section:has(> :is(.av-info--tres, .av-areas, .av-puntos, .av-pasos, .bv-fases, .eq-lista, .av-track), > .av-info > :nth-child(2)), .bv-rel, .tarifas):not(:is(section:has(> :is(.av-info--tres, .av-areas, .av-puntos, .av-pasos, .bv-fases, .eq-lista, .av-track), > .av-info > :nth-child(2)), .bv-rel, .tarifas) + *) + :is(section:has(> :is(.av-info--tres, .av-areas, .av-puntos, .av-pasos, .bv-fases, .eq-lista, .av-track), > .av-info > :nth-child(2)), .bv-rel, .tarifas) + :is(section:has(> :is(.av-info--tres, .av-areas, .av-puntos, .av-pasos, .bv-fases, .eq-lista, .av-track), > .av-info > :nth-child(2)), .bv-rel, .tarifas) + :is(section:has(> :is(.av-info--tres, .av-areas, .av-puntos, .av-pasos, .bv-fases, .eq-lista, .av-track), > .av-info > :nth-child(2)), .bv-rel, .tarifas) + :is(section:has(> :is(.av-info--tres, .av-areas, .av-puntos, .av-pasos, .bv-fases, .eq-lista, .av-track), > .av-info > :nth-child(2)), .bv-rel, .tarifas):has(+ section:is(.cta, .r-oscuro, .recursos-cta, .blog-cta)),
html body.bravo-v3.portada-recursos:not(.ip-javier) main#contenido:not(#r) > section:is(.recursos-situaciones, .recursos-apartados--pie):has(+ section:is(.cta, .r-oscuro, .recursos-cta, .blog-cta)),
html body.bravo-v3.javier-contact-page:not(.ip-javier) main#contenido:not(#r) > section.cto-escribir:has(+ section:is(.cta, .r-oscuro, .recursos-cta, .blog-cta)),
html body.bravo-v3:not(.ip-javier, .av-page) main#contenido:not(#r) > section.related:has(+ section:is(.cta, .r-oscuro, .recursos-cta, .blog-cta)) {
  border-image-outset: 0 100vmax calc(var(--r-cuna) + 8px) !important;
  margin-bottom: 0;
}

/* Tarjetas dentro de una franja: en blanco (o la carta oscura) con filete. */
html body.bravo-v3.av-page:not(.ip-javier, .areas-v3-page, .ip-servicios, .ip-herramientas, .dt-guide) main#contenido:not(#r) > :is(section:has(> :is(.av-info--tres, .av-areas, .av-puntos, .av-pasos, .bv-fases, .eq-lista, .av-track), > .av-info > :nth-child(2)), .bv-rel, .tarifas):not(:is(section:has(> :is(.av-info--tres, .av-areas, .av-puntos, .av-pasos, .bv-fases, .eq-lista, .av-track), > .av-info > :nth-child(2)), .bv-rel, .tarifas) + *) :is(.av-info__card:not(.av-info__card--urgente), .av-area, .av-puntos > li, .av-pasos > li, .eq-lista > li, .av-rel__item, a.imp-sub, .cto-form),
html body.bravo-v3.av-page:not(.ip-javier, .areas-v3-page, .ip-servicios, .ip-herramientas, .dt-guide) main#contenido:not(#r) > :is(section:has(> :is(.av-info--tres, .av-areas, .av-puntos, .av-pasos, .bv-fases, .eq-lista, .av-track), > .av-info > :nth-child(2)), .bv-rel, .tarifas):not(:is(section:has(> :is(.av-info--tres, .av-areas, .av-puntos, .av-pasos, .bv-fases, .eq-lista, .av-track), > .av-info > :nth-child(2)), .bv-rel, .tarifas) + *) + :is(section:has(> :is(.av-info--tres, .av-areas, .av-puntos, .av-pasos, .bv-fases, .eq-lista, .av-track), > .av-info > :nth-child(2)), .bv-rel, .tarifas) + :is(section:has(> :is(.av-info--tres, .av-areas, .av-puntos, .av-pasos, .bv-fases, .eq-lista, .av-track), > .av-info > :nth-child(2)), .bv-rel, .tarifas) :is(.av-info__card:not(.av-info__card--urgente), .av-area, .av-puntos > li, .av-pasos > li, .eq-lista > li, .av-rel__item, a.imp-sub, .cto-form),
html body.bravo-v3.av-page:not(.ip-javier, .areas-v3-page, .ip-servicios, .ip-herramientas, .dt-guide) main#contenido:not(#r) > :is(section:has(> :is(.av-info--tres, .av-areas, .av-puntos, .av-pasos, .bv-fases, .eq-lista, .av-track), > .av-info > :nth-child(2)), .bv-rel, .tarifas):not(:is(section:has(> :is(.av-info--tres, .av-areas, .av-puntos, .av-pasos, .bv-fases, .eq-lista, .av-track), > .av-info > :nth-child(2)), .bv-rel, .tarifas) + *) + :is(section:has(> :is(.av-info--tres, .av-areas, .av-puntos, .av-pasos, .bv-fases, .eq-lista, .av-track), > .av-info > :nth-child(2)), .bv-rel, .tarifas) + :is(section:has(> :is(.av-info--tres, .av-areas, .av-puntos, .av-pasos, .bv-fases, .eq-lista, .av-track), > .av-info > :nth-child(2)), .bv-rel, .tarifas) + :is(section:has(> :is(.av-info--tres, .av-areas, .av-puntos, .av-pasos, .bv-fases, .eq-lista, .av-track), > .av-info > :nth-child(2)), .bv-rel, .tarifas) + :is(section:has(> :is(.av-info--tres, .av-areas, .av-puntos, .av-pasos, .bv-fases, .eq-lista, .av-track), > .av-info > :nth-child(2)), .bv-rel, .tarifas) :is(.av-info__card:not(.av-info__card--urgente), .av-area, .av-puntos > li, .av-pasos > li, .eq-lista > li, .av-rel__item, a.imp-sub, .cto-form),
html body.bravo-v3.portada-recursos:not(.ip-javier) main#contenido:not(#r) > section:is(.recursos-situaciones, .recursos-apartados--pie) :is(.av-info__card:not(.av-info__card--urgente), .av-area, .av-puntos > li, .av-pasos > li, .eq-lista > li, .av-rel__item, a.imp-sub, .cto-form),
html body.bravo-v3.javier-contact-page:not(.ip-javier) main#contenido:not(#r) > section.cto-escribir :is(.av-info__card:not(.av-info__card--urgente), .av-area, .av-puntos > li, .av-pasos > li, .eq-lista > li, .av-rel__item, a.imp-sub, .cto-form),
html body.bravo-v3:not(.ip-javier, .av-page) main#contenido:not(#r) > section.related :is(.av-info__card:not(.av-info__card--urgente), .av-area, .av-puntos > li, .av-pasos > li, .eq-lista > li, .av-rel__item, a.imp-sub, .cto-form) {
  background-color: var(--r-carta);
  box-shadow: 0 0 0 1px var(--r-carta-linea);
}

/* Servicios en modo oscuro: su regla general pinta todos los enlaces en casi
   blanco (!important) y dejaba ilegible el botón blanco de la llamada final. */
html[data-tema="oscuro"] body.bravo-v3.ip-servicios main#contenido:not(#r) > section.cta .botones > a:is(.btn-primary, .btn-principal) { color: #17324d !important; }

/* 2026-11-07 · Imagen de apoyo en las páginas de servicio (solo <img>, sin pies de foto).
   Escritorio: a la derecha del primer bloque de texto. Móvil: a todo el ancho, tras la cabecera y su llamada a la acción. */
html body.bravo-v3 .bv-foto {
  margin: 0 0 1.5rem;
  max-width: 100%;
}
html body.bravo-v3 .bv-foto picture { display: block; }
html body.bravo-v3 .bv-foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 1px solid var(--line, rgb(11 31 51 / .14));
  border-radius: 8px;
  background: var(--paper, #fff);
}
html body.bravo-v3 .bv-foto--bloque { max-width: 760px; margin: 1.25rem 0 1.75rem; }
@media (min-width: 900px) {
  html body.bravo-v3 .bv-foto:not(.bv-foto--bloque) {
    float: right;
    width: min(40%, 420px);
    margin: .35rem 0 1.25rem clamp(24px, 3vw, 44px);
  }
  html body.bravo-v3 :is(section, .firma-v4-history):has(> .bv-foto:not(.bv-foto--bloque)) { display: flow-root; }
}
html body.bravo-v3 .firma-v4-history .bv-foto--bloque { margin: 1.5rem 0 0; }
/* La Firma (plantilla larga): la imagen de la trayectoria va en la columna del texto, antes de la cronología. */
html body.bravo-v3.ip-firma main > section:has(> .hitos) > .bv-foto { grid-column: 1; grid-row: auto; max-width: none; margin: 26px 0 0; }
@media (min-width: 861px) {
  /* La foto de Javier arranca a la altura de la imagen nueva y sigue junto a la cronología. */
  html body.bravo-v3.ip-firma main > section:has(> .hitos):has(> .bv-foto) > .firma-trayectoria { grid-column: 2; grid-row: 2 / span 2; margin-top: 26px; align-self: start; }
}