/* Wait feedback sits above the dock, outside layout, and never takes focus. */
html body.bravo-v3 .v4-navigation-wait {
  position: fixed; z-index: 1100;
  left: 50%; bottom: calc(var(--v4-dock-clearance, 144px) + 16px + env(safe-area-inset-bottom, 0px));
  width: min(300px, calc(100vw - 32px)); margin: 0; padding: 18px 20px 20px;
  background: #fff; color: #585958; border: 1px solid #DEDEDE; border-radius: 10px;
  box-shadow: 0 8px 32px #17202a14;
  display: grid; justify-items: center; gap: 10px;
  opacity: 0; visibility: hidden; transform: translate(-50%, 4px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
  pointer-events: none; overflow: hidden;
}
html body.bravo-v3 .v4-navigation-wait[hidden] { display: none; }
html body.bravo-v3 .v4-navigation-wait.is-visible {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
}
html body.bravo-v3 .v4-navigation-wait__brand { width: 144px; height: auto; margin: 0; }
html body.bravo-v3 .v4-navigation-wait__text {
  font: 500 13px/1.5 var(--sans); color: #585958; text-align: center;
}
html body.bravo-v3 .v4-navigation-wait__track {
  position: absolute; inset: auto 0 0; height: 2px; background: #568CBE1A;
}
html body.bravo-v3 .v4-navigation-wait__track::after {
  content: ''; display: block; width: 40%; height: 100%; background: #568CBE;
}
html body.bravo-v3 .v4-navigation-wait__live {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .v4-navigation-wait.is-visible .v4-navigation-wait__brand { animation: v4-brand-breathe 1800ms ease-in-out infinite; }
  .v4-navigation-wait.is-visible .v4-navigation-wait__track::after { animation: v4-wait-sweep 1400ms ease-in-out infinite; }
}
@keyframes v4-brand-breathe { 50% { transform: translateY(-1px); opacity: .78; } }
@keyframes v4-wait-sweep { from { transform: translateX(-100%); } to { transform: translateX(350%); } }
@media (prefers-reduced-motion: reduce) {
  html body.bravo-v3 .v4-navigation-wait { transition: none; transform: translateX(-50%); }
  html body.bravo-v3 .v4-navigation-wait.is-visible { transform: translateX(-50%); }
  html body.bravo-v3 .v4-navigation-wait__brand,
  html body.bravo-v3 .v4-navigation-wait__track::after { animation: none !important; }
}

/* Subtle entrance motion; avoid cross-document snapshots that fade the whole
   outgoing page while a slow response is still pending. Do not transform
   `main`: transformed ancestors become containing blocks for fixed descendants
   (including the article TOC), even when the transform is only a few pixels. */
html body.bravo-v3 main { animation: v4-page-enter 200ms ease-out both; }
@keyframes v4-page-enter {
  from { opacity: .82; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  html body.bravo-v3 main { animation: none; }
}

/* Bravo Advocats · shared V4 visual core.
   Javier's editorial hierarchy with the useful interaction patterns from V2. */
@font-face {
  font-family: "Public Sans";
  src: url("../fuentes/publicsans-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("../fuentes/publicsans-ital-latin.woff2") format("woff2");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Literata";
  src: url("../fuentes/literata-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
}
@font-face {
  font-family: "Literata";
  src: url("../fuentes/literata-ital-latin.woff2") format("woff2");
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
}
:root {
  --ink: #242424;
  --blue: #568CBE;
  --blue-wash: #F5F5F5;
  --paper: #FFFFFF;
  --text: #585958;
  --accent: #2F6F9F;
  --red: #8E2F2F;
  --white: #fff;
  --line: #DEDEDE;
  --muted: #585958;
  /* «… respaldo» (css/tipografias.css): fuentes del sistema ajustadas a la medida
     de las nuestras. Sin ellas el texto se recoloca al llegar la fuente buena
     (CLS 0,106 en escritorio en /abogado-violencia-genero-barcelona/, 2026-10-16). */
  --sans: "Public Sans", "Public Sans respaldo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Literata", "Literata respaldo", Georgia, serif;
  --max: 1180px;
  --pad: clamp(20px, 4vw, 64px);
  --radius: 0;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 86px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font: 400 16px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: .08em; text-underline-offset: .16em; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; font: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.skip-link {
  position: fixed; left: 12px; top: 8px; z-index: 1000; padding: 10px 14px;
  background: var(--blue); color: #111; transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.site-header {
  position: sticky; top: 0; z-index: 90; background: color-mix(in srgb, var(--paper) 94%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  backdrop-filter: blur(12px);
}
.site-header__inner { width: min(var(--max), calc(100% - 2 * var(--pad))); margin: auto; min-height: 74px; display: flex; align-items: center; gap: 22px; }
.brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.brand img { width: min(215px, 42vw); height: auto; }
.site-nav { display: flex; align-items: center; gap: clamp(12px, 2vw, 28px); margin-left: auto; }
.site-nav a { font-size: .86rem; text-decoration: none; white-space: nowrap; }
.site-nav a:hover { color: var(--blue); }
.site-nav__reserve { padding: 10px 14px; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); }
.site-nav__reserve:hover { background: var(--blue); color: var(--paper); }
.site-tools { display: flex; align-items: center; gap: 8px; }
.language { display: flex; gap: 6px; align-items: center; font-size: .78rem; }
.language a { padding: 4px 5px; text-decoration: none; }
.language a[aria-current="page"] { color: var(--accent); font-weight: 700; }
.theme-toggle, .menu-toggle { border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); background: transparent; cursor: pointer; }
.theme-toggle { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; }
.theme-toggle::before { content: "☼"; font-size: 1.05rem; }
html[data-tema="oscuro"] .theme-toggle::before { content: "☾"; }
.menu-toggle { display: none; padding: 8px 10px; }
.menu-toggle span, .menu-toggle::before, .menu-toggle::after { display: block; width: 20px; height: 2px; background: currentColor; content: ""; margin: 4px 0; }

.wrap { width: min(var(--max), calc(100% - 2 * var(--pad))); margin-inline: auto; }
.section { padding: clamp(68px, 9vw, 128px) 0; }
.section--wash { background: var(--blue-wash); }
.section--ink { background: var(--ink); color: var(--paper); }
.section-head { max-width: 690px; margin-bottom: 38px; }
.eyebrow { margin: 0 0 12px; color: var(--accent); font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 600; line-height: 1.13; }
h1 { max-width: 11ch; font-size: clamp(2.7rem, 7vw, 6.1rem); letter-spacing: -.055em; }
h2 { font-size: clamp(2rem, 4vw, 3.35rem); letter-spacing: -.035em; }
h3 { font-size: clamp(1.22rem, 2vw, 1.65rem); }
.lead { max-width: 62ch; margin: 20px 0 0; color: var(--muted); font-size: clamp(1.04rem, 1.5vw, 1.25rem); }
.section--ink .lead, .section--ink .muted { color: color-mix(in srgb, var(--paper) 76%, transparent); }
.rule { display: none; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 11px 17px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); font-weight: 700; text-decoration: none; cursor: pointer; }
.button:hover { background: var(--blue); border-color: var(--blue); }
.button--light { background: transparent; color: var(--ink); }
.button--light:hover { color: var(--paper); }
.section--ink .button--light { color: var(--paper); border-color: color-mix(in srgb, var(--paper) 60%, transparent); }
.button--gold { background: var(--blue); border-color: var(--blue); color: #111; }
.button--gold:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.text-link { color: var(--blue); font-weight: 700; }
.section--ink .text-link { color: var(--paper); }

.hero { padding: clamp(54px, 7vw, 96px) 0 clamp(68px, 9vw, 128px); background: var(--paper); }
.javier-contact-page > .hero { width: min(var(--max), calc(100% - 2 * var(--pad))); margin-inline: auto; padding: clamp(54px, 7vw, 96px) 0; background: var(--paper) !important; color: var(--text) !important; text-align: left; }
.javier-contact-page > .hero .tag { color: var(--accent); }
.javier-contact-page > .hero h1 { max-width: 12ch; color: var(--text); font-size: clamp(2.7rem, 7vw, 5.4rem); }
.javier-contact-page > .hero p { max-width: 58ch; color: var(--muted); font-size: clamp(1.04rem, 1.5vw, 1.25rem); }
.hero__grid { display: grid; grid-template-columns: minmax(0, .94fr) minmax(320px, .86fr); align-items: center; gap: clamp(40px, 8vw, 120px); }
.hero__copy { min-width: 0; }
.hero__copy .lead { max-width: 52ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero__meta { display: flex; flex-wrap: wrap; gap: 16px 24px; margin: 28px 0 0; padding-top: 20px; border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); color: var(--muted); font-size: .92rem; }
.hero__meta strong { display: block; color: var(--ink); font-size: 1rem; }
.portrait { position: relative; min-height: clamp(390px, 44vw, 600px); background: var(--blue); isolation: isolate; }
.portrait picture { position: absolute; inset: 0; overflow: hidden; }
.portrait img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 18px 18px color-mix(in srgb, var(--ink) 32%, transparent)); }
.portrait__card { position: absolute; right: clamp(14px, 3vw, 30px); bottom: clamp(14px, 3vw, 30px); z-index: 2; width: min(260px, 62%); padding: 16px 18px; background: var(--white); color: var(--ink); border: 0; }
.portrait__card strong { display: block; font: 600 1.25rem/1.2 var(--serif); }
.portrait__card span { display: block; margin-top: 7px; font-size: .8rem; line-height: 1.45; }

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cards--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { min-width: 0; padding: 24px; border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); background: var(--paper); }
.section--wash .card { background: var(--white); }
.card__number { display: block; margin-bottom: 40px; color: var(--accent); font-size: .78rem; font-weight: 700; letter-spacing: .14em; }
.card p { margin: 13px 0 0; color: var(--muted); }
.card a { display: inline-block; margin-top: 18px; color: var(--blue); font-weight: 700; }
.section--ink .card { background: color-mix(in srgb, var(--ink) 80%, var(--blue)); border-color: color-mix(in srgb, var(--paper) 30%, transparent); }
.section--ink .card p { color: color-mix(in srgb, var(--paper) 78%, transparent); }
.section--ink .card a { color: var(--paper); }

.feature-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 6vw, 80px); align-items: center; }
.feature-grid__photo { background: var(--blue-wash); }
.feature-grid__photo img { width: 100%; aspect-ratio: 1.1; object-fit: cover; }
.feature-grid__copy p { max-width: 58ch; color: var(--muted); }
.signature { margin-top: 24px; color: var(--accent); font-weight: 700; }
.timeline { display: grid; gap: 14px; margin-top: 28px; }
.timeline__item { display: grid; grid-template-columns: 74px 1fr; gap: 16px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--paper) 25%, transparent); }
.timeline__year { color: var(--accent); font-weight: 700; }

.areas { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 18px; }
.area-card { padding: clamp(24px, 4vw, 42px); border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); background: var(--white); }
.area-card--primary { background: var(--blue-wash); }
.area-card--primary h3 { font-size: clamp(1.65rem, 3vw, 2.3rem); }
.area-card p { margin: 13px 0 0; color: var(--muted); }
.area-card a { display: inline-block; margin-top: 18px; color: var(--blue); font-weight: 700; }
.area-side { display: grid; gap: 18px; }

.booking { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px; align-items: center; }
.booking p { max-width: 65ch; margin: 14px 0 0; color: color-mix(in srgb, var(--paper) 76%, transparent); }
.booking__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.faq { display: grid; grid-template-columns: minmax(220px, .65fr) minmax(0, 1.35fr); gap: 38px; align-items: start; }
.faq-list { display: grid; gap: 10px; }
.faq-list details { border-top: 1px solid color-mix(in srgb, var(--ink) 20%, transparent); padding: 18px 0; }
.faq-list summary { cursor: pointer; font-family: var(--serif); font-size: 1.15rem; font-weight: 600; }
.faq-list p { max-width: 64ch; margin: 12px 0 0; color: var(--muted); }

.resource-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.resource { display: flex; flex-direction: column; min-width: 0; padding: 26px; border: 1px solid color-mix(in srgb, var(--paper) 28%, transparent); }
.resource h3 { margin-top: 8px; }
.resource p { margin: 12px 0 0; color: color-mix(in srgb, var(--paper) 76%, transparent); }
.resource a { margin-top: auto; padding-top: 24px; color: var(--paper); font-weight: 700; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: 36px; }
.contact-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.contact-list li { display: grid; gap: 5px; padding: 17px 0; border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); }
.contact-list strong { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.contact-list a { width: fit-content; color: var(--blue); font-size: 1.12rem; font-weight: 700; }
.contact-note { margin: 24px 0 0; color: var(--muted); }
.contact-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.contact-panel { padding: clamp(24px, 4vw, 40px); background: var(--blue-wash); }
.contact-panel h3 { margin-bottom: 12px; }
.contact-panel p { margin: 0 0 18px; color: var(--muted); }

.site-footer { padding: 56px 0 90px; background: var(--ink); color: var(--paper); }
.site-footer__grid { display: grid; grid-template-columns: 1.2fr repeat(3, 1fr); gap: 28px; }
.site-footer__brand img { width: min(220px, 70%); }
.site-footer h2 { margin-bottom: 14px; color: var(--accent); font: 700 .78rem/1.2 var(--sans); letter-spacing: .13em; text-transform: uppercase; }
.site-footer ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.site-footer a { color: color-mix(in srgb, var(--paper) 82%, transparent); text-decoration: none; }
.site-footer a:hover { color: var(--paper); }
html[data-tema] footer .site-footer a { color: color-mix(in srgb, var(--paper) 86%, transparent); }
html[data-tema] footer .site-footer a:hover,
html[data-tema] footer .site-footer a:focus-visible { color: var(--paper); }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 42px; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--paper) 22%, transparent); font-size: .8rem; }
.site-footer__copy { margin: 16px 0 0; color: color-mix(in srgb, var(--paper) 62%, transparent); font-size: .8rem; }

.reservation-modal[hidden] { display: none; }
.reservation-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 18px; background: color-mix(in srgb, var(--ink) 66%, transparent); }
.reservation-modal__panel { position: relative; width: min(680px, 100%); max-height: min(720px, 92vh); overflow: auto; padding: clamp(24px, 5vw, 48px); background: var(--paper); color: var(--text); border: 0; }
.reservation-modal__close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); background: transparent; cursor: pointer; }
.reservation-modal__intro { margin: 18px 0 22px; color: var(--muted); }
.reservation-modal__areas { display: grid; gap: 10px; }
.reservation-modal__area { display: block; padding: 15px 16px; border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); background: var(--white); color: var(--ink); font-weight: 700; text-decoration: none; }
.reservation-modal__area:hover { border-color: var(--blue); background: var(--blue-wash); }
.reservation-modal__all { display: inline-block; margin-top: 24px; }

html[data-tema="oscuro"] body { background: var(--ink); color: var(--paper); }
html[data-tema="oscuro"] .site-header { background: color-mix(in srgb, var(--ink) 95%, transparent); border-color: color-mix(in srgb, var(--paper) 20%, transparent); }
html[data-tema="oscuro"] .brand img { filter: brightness(0) invert(1); }
html[data-tema="oscuro"] .site-nav__reserve, html[data-tema="oscuro"] .button { background: var(--paper); border-color: var(--paper); color: var(--ink); }
html[data-tema="oscuro"] .site-nav__reserve:hover, html[data-tema="oscuro"] .button:hover { background: var(--blue); border-color: var(--blue); color: var(--paper); }
html[data-tema="oscuro"] .button--light { background: transparent; color: var(--paper); border-color: color-mix(in srgb, var(--paper) 55%, transparent); }
html[data-tema="oscuro"] .hero, html[data-tema="oscuro"] .section:not(.section--wash):not(.section--ink) { background: var(--ink); }
html[data-tema="oscuro"] .section--wash { background: color-mix(in srgb, var(--blue-wash) 17%, var(--ink)); }
html[data-tema="oscuro"] .card, html[data-tema="oscuro"] .section--wash .card, html[data-tema="oscuro"] .area-card, html[data-tema="oscuro"] .contact-panel { background: color-mix(in srgb, var(--blue) 20%, var(--ink)); border-color: color-mix(in srgb, var(--paper) 25%, transparent); }
html[data-tema="oscuro"] .lead, html[data-tema="oscuro"] .card p, html[data-tema="oscuro"] .area-card p, html[data-tema="oscuro"] .contact-note, html[data-tema="oscuro"] .contact-panel p, html[data-tema="oscuro"] .faq-list p { color: color-mix(in srgb, var(--paper) 75%, transparent); }
html[data-tema="oscuro"] .hero__meta { border-color: color-mix(in srgb, var(--paper) 22%, transparent); }
html[data-tema="oscuro"] .hero__meta strong { color: var(--paper); }
html[data-tema="oscuro"] .portrait__card { background: var(--paper); color: var(--ink); }
html[data-tema="oscuro"] .reservation-modal__panel { background: var(--ink); color: var(--paper); }

@media (max-width: 1020px) {
  .site-header__inner { gap: 14px; }
  .site-nav { gap: 12px; }
  .site-nav a { font-size: .78rem; }
  .cards--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .menu-toggle { display: block; margin-left: auto; }
  .site-tools { order: 3; }
  .site-nav { position: absolute; inset: 74px 0 auto; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 10px var(--pad) 24px; background: var(--paper); border-bottom: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: 11px 0; font-size: .98rem; white-space: normal; }
  .site-nav__reserve { text-align: center; }
  html[data-tema="oscuro"] .site-nav { background: var(--ink); border-color: color-mix(in srgb, var(--paper) 20%, transparent); }
  .hero__grid, .feature-grid, .contact-grid, .faq, .booking { grid-template-columns: 1fr; }
  .portrait { min-height: 470px; max-width: 620px; }
  .booking__actions { justify-content: flex-start; }
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .site-header__inner { min-height: 66px; }
  .brand img { width: min(185px, 55vw); }
  .theme-toggle { display: none; }
  .site-nav { top: 66px; }
  h1 { max-width: 13ch; font-size: clamp(2.45rem, 13vw, 4.1rem); }
  .hero { padding-top: 42px; }
  .portrait { min-height: 390px; }
  .portrait__card { right: 12px; bottom: 12px; width: min(220px, 72%); padding: 13px; }
  .cards, .cards--four, .areas, .resource-grid { grid-template-columns: 1fr; }
  .section { padding: 62px 0; }
  .card__number { margin-bottom: 26px; }
  .timeline__item { grid-template-columns: 58px 1fr; gap: 10px; }
  .site-footer { padding-bottom: 56px; }
}
@media (max-width: 380px) {
  .site-header__inner { width: calc(100% - 28px); }
  .wrap { width: calc(100% - 28px); }
  .brand img { width: 42vw; min-width: 118px; }
  .language { gap: 0; font-size: .7rem; }
  .hero__actions .button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* SUD 2026-09-28: shared layout boundary. Legacy #header rules must never
   own this shell. Content stays visible without an animation controller. */
body.bravo-v3 {
  --brand-blue: #568CBE;
  --areas-paper: var(--paper); --areas-ink: var(--text);
  --areas-blue: var(--blue); --areas-gold: var(--blue);
  --areas-blue-soft: var(--blue-wash); --areas-muted: var(--muted);
  padding-top: 96px !important;
  background: var(--paper); color: var(--text);
}
html[data-tema] body.bravo-v3.areas-v3-page {
  --areas-paper: var(--paper); --areas-ink: var(--text);
  --areas-blue: var(--blue); --areas-gold: var(--blue);
  --areas-blue-soft: var(--blue-wash); --areas-muted: var(--muted);
  background: var(--paper); color: var(--text);
}
html body.bravo-v3.areas-v3-page > .areas-v3-hero {
  width: min(1180px, calc(100% - 2 * var(--pad)));
  padding: 28px 0 32px; background: var(--paper);
}
html body.bravo-v3.areas-v3-page .areas-v3-hero h1 {
  max-width: 26ch; font-size: clamp(2.2rem,4vw,3.6rem); line-height: 1.12;
}
html body.bravo-v3.areas-v3-page .areas-v3-hero__eyebrow {
  margin: 0 0 12px; font-size: .74rem; color: var(--blue);
}
html body.bravo-v3.areas-v3-page #contenido > section.cta {
  position: relative; inset: auto; width: 100%; max-width: 100%;
  margin: 0; padding: 24px; transform: none; border-radius: 0;
  display: block; min-height: 0;
}
body.bravo-v3 [data-javier-shell="header"] { display: contents; }
body.bravo-v3 #bravo-header {
  position: fixed; inset: 12px 20px auto; width: auto; max-width: 1320px;
  margin-inline: auto; height: auto; min-height: 0; padding: 0 22px;
  opacity: 1; visibility: visible; transform: none; z-index: 100;
  border: 0; border-radius: 0; color: var(--text);
  background: rgba(255,255,255,.96); box-shadow: 0 6px 26px #17202a12;
}
body.bravo-v3 .site-header__inner { width: 100%; min-height: 70px; gap: 18px; }
body.bravo-v3 .site-header .brand img { width: 190px; height: auto; filter: none; }
body.bravo-v3 .site-nav { gap: 18px; }
body.bravo-v3 .site-nav a { font-size: .82rem; }
body.bravo-v3 .site-nav__reserve,
body.bravo-v3 .button,
body.bravo-v3 .areas-v3-hero__cta { border: 1px solid var(--blue); border-radius: 0; background: var(--blue); color: #000; }
body.bravo-v3 .button { min-height: 54px; padding: 15px 23px; font-size: 14px; font-weight: 600; }
body.bravo-v3 .button--light { background: transparent; color: var(--ink); border-color: var(--line); }
body.bravo-v3 .button:hover,
body.bravo-v3 .site-nav__reserve:hover { background: #fff; color: #242424; box-shadow: inset 0 0 0 1px var(--blue); }
body.bravo-v3 .button,
body.bravo-v3 .site-nav a,
body.bravo-v3 .bravo-contact summary { transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease; }
body.bravo-v3 .button:hover { transform: none; }
body.bravo-v3 .section { padding-block: clamp(40px, 5vw, 72px); min-height: 0; }
body.bravo-v3 .section--ink { background: var(--blue-wash); color: var(--text); }
body.bravo-v3 .section--ink :is(p, .lead, .muted, .resource p) { color: var(--muted); }
body.bravo-v3 .section--ink :is(h2,h3,.text-link,.resource a) { color: var(--text); }
body.bravo-v3 .hero { padding-block: 24px 48px; min-height: 0; height: auto; }
body.bravo-v3 .hero__grid { grid-template-columns: 1.1fr .9fr; gap: clamp(24px,4vw,56px); }
body.bravo-v3 .hero h1 { max-width: 16ch; font-size: clamp(2.5rem,4.3vw,4.2rem); line-height: 1.09; text-wrap: balance; }
body.bravo-v3 .hero__meta { border: 0; margin-top: 22px; padding: 0; font-size: .82rem; }
body.bravo-v3 .portrait { min-height: 0; height: clamp(330px,36vw,480px); background: transparent !important; }
body.bravo-v3 .portrait img { filter: none; }
body.bravo-v3 .portrait__card { width: auto; max-width: 85%; right: 0; bottom: 4px; border: 0; border-radius: 0; padding: 12px 16px; box-shadow: 0 4px 20px #17202a0a; }
body.bravo-v3 .portrait__card strong { font-size: 1rem; }
body.bravo-v3 :is(.card,.area-card,.resource,.contact-panel) { border: 0; border-radius: var(--radius); background: #fff; box-shadow: none; }
body.bravo-v3 .card__number { margin-bottom: 18px; }
body.bravo-v3 :is(.timeline__item,.contact-list li,.faq-list details) { border: 0; }
/* Inicio original: contact-section 1.2fr/1fr; contact-right is not a card.
   Keep existing real contact data; HTML order migration belongs to integrator. */
body.bravo-v3 .contact-grid { grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: clamp(24px,4vw,70px); align-items: start; }
body.bravo-v3 .contact-panel { align-self: start; padding: 20px 0 0; background: transparent; }
body.bravo-v3 #contacto { padding-block: 40px; }
body.bravo-v3 #contacto .section-head { margin-bottom: 16px; }
body.bravo-v3 #contacto h2 { font-size: clamp(2rem,3vw,2.65rem); color: var(--ink); }
body.bravo-v3 #contacto .lead { font-size: 16px; line-height: 1.6; margin-top: 16px; }
body.bravo-v3 .contact-list li { padding-block: 10px; }
body.bravo-v3 .contact-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: stretch; gap: 12px; margin-top: 20px; }
body.bravo-v3 .contact-actions .button { padding-inline: 12px; line-height: 1.4; }
body.bravo-v3 .contact-actions .text-link { grid-column: 1 / -1; align-self: center; }
body.bravo-v3 .text-link, body.bravo-v3 .contact-list a { color: var(--ink); text-decoration-color: var(--blue); }
body.bravo-v3.menu-open .bravo-contact { visibility: hidden; pointer-events: none; }
body.bravo-v3 #firma { background: #f3f5f6; color: #17202a; padding-block: clamp(36px,4vw,56px); }
body.bravo-v3 #firma .feature-grid { grid-template-columns: 1.2fr .8fr; gap: clamp(24px,4vw,48px); align-items: start; }
body.bravo-v3 #firma h2 { color: #17202a; max-width: 25ch; font-size: clamp(1.8rem,2.8vw,2.6rem); }
body.bravo-v3 #firma .feature-grid__copy p { color: #585958; margin-top: 16px; }
body.bravo-v3 #firma .feature-grid__photo { background: transparent; align-self: center; }
body.bravo-v3 #firma .feature-grid__photo img { width: 100%; height: auto; max-height: 320px; aspect-ratio: 1.5; object-fit: contain; border-radius: 0; }
body.bravo-v3 #firma .timeline { gap: 10px; margin-top: 20px; }
body.bravo-v3 #firma .timeline__item { padding: 0; grid-template-columns: 52px 1fr; color: #17202a; }
body.bravo-v3 #firma .button { background: var(--blue); color: #000; }

/* Reset outer semantic elements inherited from page templates. Do not reset
   details, hidden panels or the booking steps: those have functional state. */
body.bravo-v3 > .areas-v3-hero,
body.bravo-v3 > header.hero {
  position: relative !important; inset: auto !important; transform: none !important;
  width: min(1180px, calc(100% - 2 * var(--pad))); height: auto !important;
  min-height: 0 !important; max-height: none !important; overflow: visible !important;
  opacity: 1 !important; visibility: visible !important; z-index: auto;
  margin: 0 auto; padding: 28px 0 32px; border: 0;
  background: var(--paper); color: var(--text);
}
body.bravo-v3 .areas-v3-hero h1 { font-size: clamp(2.3rem,4.5vw,4rem); line-height: 1.12; }
body.bravo-v3 > main#contenido { position: relative; height: auto; min-height: 0; max-height: none; overflow: visible; padding-bottom: 40px; }
body.bravo-v3.ip-firma #contenido > section { min-height: 0; height: auto; padding-block: 28px; margin-block: 0; }
body.bravo-v3.ip-firma .firma-arquitectura { display: none; }
body.bravo-v3.ip-firma .firma-trayectoria { width: 100%; max-width: 100%; margin-inline: 0; }
body.bravo-v3.ip-firma .firma-trayectoria img { width: 100%; max-width: 100%; height: auto; }
html body.bravo-v3.areas-v3-page .areas-v3-faq-list summary { padding: 16px 0; gap: 16px; }
html body.bravo-v3.areas-v3-page .areas-v3-faq-list summary::after { float: none; margin: 0; flex: 0 0 20px; text-align: center; }
body.bravo-v3 .menu-toggle .visually-hidden { width: 1px; height: 1px; margin: -1px; background: none; }
body.bravo-v3.ip-firma .hitos { padding: 0; margin: 20px 0; }
body.bravo-v3.ip-firma .hitos li { min-height: 0; margin: 0 0 20px; padding: 0; border: 0; background: transparent; }
body.bravo-v3.ip-firma .hitos::before,
body.bravo-v3.ip-firma .hitos li::before { display: none; }
body.bravo-v3.ip-firma #contenido h2 { border: 0; padding-bottom: 0; }
body.bravo-v3 > footer[data-javier-shell="footer"] {
  display: block !important; position: static; width: 100%; max-width: none;
  height: auto; min-height: 0; margin: 0 !important; padding: 0 !important;
  border: 0; border-radius: 0; background: var(--blue-wash); text-align: left;
}
body.bravo-v3 .site-footer { padding: 36px 0 88px; background: var(--blue-wash); color: var(--text); text-align: left; }
body.bravo-v3 .site-footer :is(a,p,li,h2),
html[data-tema] body.bravo-v3 footer .site-footer a { color: var(--text); }
body.bravo-v3 .site-footer__brand img { filter: none; }
body.bravo-v3 .site-footer__legal { border: 0; margin-top: 22px; padding-top: 0; }
body.bravo-v3 .site-footer__copy { color: var(--muted); }
body.bravo-v3 .site-footer li { margin: 0; padding: 0; font-size: .85rem; line-height: 1.5; }
body.bravo-v3 .reservation-modal__panel { border: 0; border-radius: 0; }
body.bravo-v3 .reservation-modal__close { border: 0; border-radius: 50%; }
body.bravo-v3 .bravo-contact { position: fixed; right: max(16px,env(safe-area-inset-right)); bottom: max(16px,env(safe-area-inset-bottom)); z-index: 95; max-width: calc(100vw - 32px); margin: 0; padding: 0; border: 0; background: transparent; }
body.bravo-v3 .bravo-contact summary { display: block; min-height: 48px; padding: 12px 22px; border-radius: 0; background: var(--blue); color: #000; cursor: pointer; font: 600 .9rem/1.5 var(--sans); list-style: none; box-shadow: 0 5px 20px #17202a20; }
body.bravo-v3 .bravo-contact summary::after { content: none; }
body.bravo-v3 .bravo-contact summary::-webkit-details-marker { display: none; }
body.bravo-v3 .bravo-contact__links { position: absolute; bottom: calc(100% + 10px); right: 0; width: 230px; max-width: calc(100vw - 32px); padding: 8px; border-radius: 0; background: #fff; box-shadow: 0 8px 30px #17202a20; }
body.bravo-v3 .bravo-contact__links a { display: block; padding: 12px; color: #17202a; font: 600 .9rem/1.5 var(--sans); text-decoration: none; border-radius: 0; }
body.bravo-v3 .bravo-contact__links a:hover { background: #f3f5f6; }
html[data-tema="oscuro"] body.bravo-v3 { background: #18222b; color: #f7f8fa; }
html[data-tema="oscuro"] body.bravo-v3 :is(.feature-grid__copy p,.lead) { color: #d4dae0; }
html[data-tema="oscuro"] body.bravo-v3 #firma .feature-grid__copy p { color: #585958; }
html[data-tema="oscuro"] body.bravo-v3 :is(.card,.area-card,.contact-panel) { background: #263541; color: #f7f8fa; }
html[data-tema="oscuro"] body.bravo-v3 :is(.card,.area-card,.contact-panel) :is(h3,p,a) { color: #f7f8fa; }
html[data-tema="oscuro"] body.bravo-v3 .section--ink .feature-grid__copy p { color: #585958; }
html body.bravo-v3.areas-v3-page .areas-v3-hero__cta { background: var(--blue); color: #000; border-radius: 0; }
@media (max-width:1100px) {
  body.bravo-v3 .menu-toggle { display: block; margin-left: auto; border: 0; width: 44px; height: 44px; border-radius: 50%; background: #edf0f2; }
  body.bravo-v3 .menu-toggle::before, body.bravo-v3 .menu-toggle::after { margin: 6px auto; transition: transform .2s ease; }
  body.bravo-v3 .menu-toggle[aria-expanded="true"]::before { transform: translateY(4px) rotate(45deg); }
  body.bravo-v3 .menu-toggle[aria-expanded="true"]::after { transform: translateY(-4px) rotate(-45deg); }
  body.bravo-v3 .site-tools { order: 3; }
  body.bravo-v3 .site-nav { position: absolute; inset: 80px 0 auto; display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 18px; margin: 0; border: 0; border-radius: 0; background: #fff; color: #17202a; box-shadow: 0 12px 30px #17202a18; max-height: calc(100dvh - 120px); overflow-y: auto; visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .2s ease,transform .2s ease,visibility .2s; }
  body.bravo-v3 .site-nav.is-open { visibility: visible; opacity: 1; transform: none; }
  body.bravo-v3 .site-nav a { padding: 12px 16px; white-space: normal; font-size: 1rem; border-radius: 0; }
}
@media (max-width:820px) {
  body.bravo-v3 .hero__grid, body.bravo-v3 #firma .feature-grid { grid-template-columns: 1fr; }
  body.bravo-v3 .portrait { height: 340px; width: min(100%,380px); margin-inline: auto; }
  body.bravo-v3 #firma .feature-grid__photo img { max-height: 240px; }
}
@media (max-width:620px) {
  body.bravo-v3 .contact-grid { grid-template-columns: minmax(0,1fr); gap: 24px; }
  body.bravo-v3 .contact-panel { padding-top: 0; }
  body.bravo-v3 { padding-top: 86px !important; }
  body.bravo-v3 #bravo-header { inset: 8px 10px auto; padding-inline: 12px; border-radius: 0; }
  body.bravo-v3 .site-header__inner { min-height: 64px; gap: 6px; }
  body.bravo-v3 .site-header .brand img { width: clamp(118px,35vw,155px); min-width: 0; }
  body.bravo-v3 .language { font-size: .7rem; gap: 0; }
  body.bravo-v3 .site-nav { top: 72px; }
  body.bravo-v3 .hero h1 { font-size: clamp(2.2rem,9vw,3rem); }
  body.bravo-v3 .hero__copy .lead { font-size: 1rem; line-height: 1.55; }
  body.bravo-v3 .hero__meta { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; font-size: .72rem; }
  body.bravo-v3 .hero__meta strong { font-size: .82rem; }
  body.bravo-v3 .portrait { height: 240px; width: 280px; }
  body.bravo-v3 .portrait__card { max-width: 100%; padding: 8px 12px; bottom: 0; }
  body.bravo-v3 .portrait__card span { font-size: .7rem; margin-top: 2px; }
  body.bravo-v3 .site-footer__grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
  body.bravo-v3 .site-footer__brand, body.bravo-v3 .site-footer__grid > div:last-child { grid-column: 1 / -1; }
}

/* Javier source alignment · 2026-09-28
   The literal demo sources use a white paper, one blue accent, 1px dividers,
   compact rectangular actions and dense editorial grids. These rules are the
   final shared layer for migrated pages; do not reintroduce pill UI here. */
body.bravo-v3 {
  --blue: #568CBE;
  --brand-blue: #568CBE;
  --blue-wash: #F1F6FA;
  --paper: #FFFFFF;
  --text: #242424;
  --muted: #585958;
  --line: #DEDEDE;
  --radius: 2px;
  background: var(--paper);
  padding-top: 98px !important;
}

body.bravo-v3 #bravo-header {
  inset: 0 0 auto;
  width: 100%;
  max-width: none;
  min-height: 98px;
  padding: 0 max(24px, calc((100% - 1240px) / 2));
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: rgba(255,255,255,.98);
  box-shadow: none;
}
body.bravo-v3 .site-header__inner { min-height: 98px; gap: 25px; }
body.bravo-v3 .site-header .brand img { width: 277px; }
body.bravo-v3 .site-nav { gap: 22px; }
body.bravo-v3 .site-nav a { font-size: 14px; border-radius: 0; }
body.bravo-v3 .site-nav__reserve,
body.bravo-v3 .button,
body.bravo-v3 .areas-v3-hero__cta {
  border: 1px solid var(--blue);
  border-radius: 2px;
  background: var(--blue);
  color: #000;
  box-shadow: none;
}
body.bravo-v3 .site-nav__reserve:hover,
body.bravo-v3 .button:hover,
body.bravo-v3 .areas-v3-hero__cta:hover {
  background: #fff;
  color: var(--text);
  transform: none;
  box-shadow: inset 0 0 0 1px var(--blue);
}
body.bravo-v3 .button--light { border-color: #B5B9BC; border-radius: 2px; background: #fff; color: var(--muted); }
body.bravo-v3 .section { padding-block: clamp(54px, 6.5vw, 98px); }
body.bravo-v3 .section--ink { background: var(--muted); color: #fff; }
body.bravo-v3 .hero { padding-block: 0 37px; }
body.bravo-v3 .hero__grid { gap: 45px; }
body.bravo-v3 .hero h1 { font-size: clamp(2.9rem, 4.65vw, 4.05rem); line-height: 1.12; }
body.bravo-v3 .hero__meta { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: 26px; }
body.bravo-v3 .portrait { height: clamp(360px, 43vw, 580px); background: transparent !important; border-radius: 0; }
body.bravo-v3 .portrait__card { border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; }
body.bravo-v3 :is(.card,.area-card,.resource,.contact-panel) {
  border: 1px solid var(--line);
  border-radius: 2px;
  background: #fff;
  box-shadow: none;
}
body.bravo-v3 :is(.card,.area-card,.resource,.contact-panel) :is(button,a) { border-radius: 2px; }
body.bravo-v3 .contact-grid { gap: clamp(48px, 7vw, 100px); }
body.bravo-v3 .contact-panel { padding: 37px 36px; background: var(--blue-wash); }
body.bravo-v3 #firma { background: #fff; padding-block: 78px; }
body.bravo-v3 #firma .feature-grid { gap: 82px; }
body.bravo-v3 #firma .feature-grid__photo img { border-radius: 0; }
body.bravo-v3 #firma .timeline { gap: 0; margin-top: 27px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
body.bravo-v3 #firma .timeline__item { padding: 19px 0; border-bottom: 1px solid var(--line); }
body.bravo-v3 #firma .timeline__item:last-child { border-bottom: 0; }
body.bravo-v3 > footer[data-javier-shell="footer"],
body.bravo-v3 .site-footer { border-radius: 0; background: #F6F6F6; }
body.bravo-v3 .site-footer { padding-block: 28px; }
body.bravo-v3 .site-footer__legal { border-top: 1px solid var(--line); margin-top: 20px; padding-top: 20px; }

/* Closed mobile navigation must not remain visually present underneath the
   page. The source demos use a clean block menu, not an opacity ghost. */
@media (max-width:1100px) {
  body.bravo-v3 .site-nav {
    display: none;
    pointer-events: none;
    border-radius: 0;
    box-shadow: 0 12px 30px #17202a18;
  }
  body.bravo-v3 .site-nav.is-open {
    display: flex;
    pointer-events: auto;
  }
  body.bravo-v3 .site-nav a { border-radius: 0; }
  body.bravo-v3 .menu-toggle { border-radius: 2px; background: #fff; border: 1px solid var(--line); }
}
@media (max-width:620px) {
  body.bravo-v3 { padding-top: 74px !important; }
  body.bravo-v3 #bravo-header { min-height: 74px; padding-inline: 16px; }
  body.bravo-v3 .site-header__inner { min-height: 74px; }
  body.bravo-v3 .site-header .brand img { width: min(215px, 58vw); }
  body.bravo-v3 .site-nav { top: 74px; border-top: 1px solid var(--line); padding: 12px 16px 18px; }
  body.bravo-v3 .hero h1 { font-size: clamp(2.25rem, 10vw, 3.3rem); }
  body.bravo-v3 .section { padding-block: 50px; }
  body.bravo-v3 .contact-panel { padding: 28px 22px; }
  body.bravo-v3 .bravo-contact { right: 12px; bottom: 12px; }
  body.bravo-v3 .bravo-contact summary { min-height: 44px; padding: 10px 16px; border-radius: 2px; }
  body.bravo-v3 .bravo-contact__links { border-radius: 2px; }
}

/* Contact block copied from Javier's Inicio demo · 2026-09-28
   Keep the editorial two-column structure and compact rectangular actions. */
body.bravo-v3 .contact-section {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(48px, 7vw, 100px);
  align-items: start;
  padding-block: clamp(54px, 6vw, 82px);
}
body.bravo-v3 .contact-section .eyebrow { margin-bottom: 22px; }
body.bravo-v3 .contact-section h2 {
  max-width: 15ch;
  margin: 0;
  color: var(--text);
  font-family: var(--serif);
  font-size: clamp(2.45rem, 4vw, 4rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.04em;
}
body.bravo-v3 .contact-section h2 em { color: var(--blue); font-style: italic; }
body.bravo-v3 .contact-address { margin: 25px 0 12px; font-size: 16px; line-height: 1.65; }
body.bravo-v3 .contact-note { max-width: 360px; margin-top: 26px; color: var(--muted); font-size: 13px; line-height: 1.6; }
body.javier-contact-page .contact-office { margin: 30px 0 0; overflow: hidden; background: #173f61; }
body.javier-contact-page .contact-office img {
  display: block; width: 100%; height: clamp(190px, 22vw, 270px);
  object-fit: cover; object-position: 28% 52%;
}
body.javier-contact-page .contact-office figcaption {
  display: grid; grid-template-columns: 48px minmax(0,1fr) auto; align-items: center;
  gap: 14px; min-height: 82px; padding: 14px 18px; background: #173f61; color: #fff;
}
body.javier-contact-page .contact-office__mark {
  display: grid; width: 46px; height: 46px; place-items: center;
  background: #d3a261; color: #17202a; font: 800 14px/1 var(--sans); letter-spacing: .03em;
}
body.javier-contact-page .contact-office__details { display: grid; gap: 3px; min-width: 0; }
body.javier-contact-page .contact-office__details strong { color: #fff; font: 700 15px/1.25 var(--sans); }
body.javier-contact-page .contact-office__details > span { color: #e1eaf2; font: 500 12px/1.4 var(--sans); }
body.javier-contact-page .contact-office figcaption a {
  color: #fff; font: 700 13px/1.4 var(--sans); text-decoration-thickness: 2px; text-underline-offset: 3px;
}
body.bravo-v3 .contact-right { padding-top: 20px; }
body.bravo-v3 .contact-right > a:not(.button) {
  display: grid;
  grid-template-columns: 1fr 25px;
  gap: 8px;
  align-items: center;
  padding: 20px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  text-decoration: none;
}
body.bravo-v3 .contact-right > a > span:first-child {
  grid-column: 1 / -1;
  color: var(--muted);
  font: 700 11px/1.2 var(--sans);
  letter-spacing: .13em;
}
body.bravo-v3 .contact-right strong {
  color: var(--text);
  font-family: var(--serif);
  font-size: clamp(1.85rem, 3vw, 2.3rem);
  font-weight: 400;
  letter-spacing: -.02em;
}
body.bravo-v3 .contact-right > a:not(.button) > span:last-child { color: var(--blue); font-size: 24px; line-height: 1; }
body.bravo-v3 .contact-right > .button {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
  padding: 15px 18px;
  color: #fff;
  text-decoration: none;
}
body.bravo-v3 .contact-right > .button span { font-size: 20px; line-height: 1; }
body.bravo-v3 .contact-right > a:hover strong { color: var(--blue); }
body.bravo-v3 .contact-right > .button:hover { color: var(--text); }
body.bravo-v3 html[data-tema="oscuro"] .contact-section h2,
html[data-tema="oscuro"] body.bravo-v3 .contact-section h2,
html[data-tema="oscuro"] body.bravo-v3 .contact-right strong { color: var(--text); }

@media (max-width: 820px) {
  body.bravo-v3 .contact-section { grid-template-columns: 1fr; gap: 34px; }
  body.bravo-v3 .contact-section h2 { max-width: 18ch; font-size: clamp(2.25rem, 10vw, 3.4rem); }
  body.bravo-v3 .contact-right { padding-top: 0; }
}
@media (max-width: 620px) {
  body.bravo-v3 .contact-section { gap: 26px; padding-block: 48px; }
  body.bravo-v3 .contact-section .eyebrow { margin-bottom: 16px; }
  body.bravo-v3 .contact-address { margin-top: 18px; font-size: 15px; }
  body.bravo-v3 .contact-note { margin-top: 20px; }
  body.javier-contact-page .contact-office { margin-top: 24px; }
  body.javier-contact-page .contact-office img { height: clamp(160px, 42vw, 190px); }
  body.javier-contact-page .contact-office figcaption { grid-template-columns: 42px minmax(0,1fr); gap: 10px; padding: 13px; }
  body.javier-contact-page .contact-office__mark { width: 40px; height: 40px; }
  body.javier-contact-page .contact-office figcaption a { grid-column: 2; }
  body.bravo-v3 .contact-right > a:not(.button) { padding: 16px 0; }
  body.bravo-v3 .contact-right strong { font-size: 2rem; }
  body.bravo-v3 .contact-right > .button { margin-top: 20px; }
}

/* V4 contract · 2026-09-28
   One final layer owns the shared shell and removes ornamental filets left by
   earlier iterations. Borders remain only on real form controls and focus or
   validation states supplied by their component stylesheets. */
body.bravo-v3 {
  --v4-paper: #FFFFFF;
  --v4-surface: #F3F5F7;
  --v4-surface-strong: #E8EEF3;
  --v4-text: #242424;
  --v4-muted: #585958;
  --v4-link: #2F6F9F;
  --v4-action: #568CBE;
  --v4-action-text: #111111;
  --v4-focus: #2F6F9F;
  --v4-shadow-soft: 0 8px 28px rgb(22 35 46 / 10%);
  --v4-shadow-float: 0 14px 42px rgb(22 35 46 / 16%);
  --v4-radius-control: 6px;
  --v4-radius-card: 10px;
  --v4-radius-float: 14px;
  --paper: var(--v4-paper);
  --white: var(--v4-paper);
  --ink: var(--v4-text);
  --text: var(--v4-text);
  --muted: var(--v4-muted);
  --blue: var(--v4-action);
  --accent: var(--v4-link);
  --blue-wash: var(--v4-surface);
  --line: transparent;
  --radius: var(--v4-radius-card);
  color: var(--v4-text);
  background: var(--v4-paper);
  padding-top: 102px !important;
}

html[data-tema="oscuro"] body.bravo-v3 {
  --v4-paper: #181C20;
  --v4-surface: #232A31;
  --v4-surface-strong: #2E3842;
  --v4-text: #F5F5F5;
  --v4-muted: #C3CBD3;
  --v4-link: #9CC9ED;
  --v4-action: #568CBE;
  --v4-action-text: #111111;
  --v4-focus: #9CC9ED;
  --v4-shadow-soft: 0 8px 28px rgb(0 0 0 / 28%);
  --v4-shadow-float: 0 18px 48px rgb(0 0 0 / 42%);
  color-scheme: dark;
  background: var(--v4-paper);
  color: var(--v4-text);
}

body.bravo-v3,
body.bravo-v3 :is(button, input, select, textarea) {
  font-family: var(--sans);
}
body.bravo-v3 :is(h1, h2, h3, h4, .contact-right strong) {
  overflow-wrap: anywhere;
  text-wrap: balance;
}
body.bravo-v3 :is(.wrap, .hero__grid, .feature-grid, .contact-grid, .cards, .areas, .resource-grid) > * {
  min-width: 0;
}
body.bravo-v3 a:not(.button):not(.site-nav__reserve) {
  text-decoration-color: color-mix(in srgb, var(--v4-link) 70%, transparent);
}
body.bravo-v3 :focus-visible {
  outline: 3px solid var(--v4-focus);
  outline-offset: 3px;
}

/* No decorative rules, side filets, timeline rails or outlined cards. */
body.bravo-v3 :is(
  .hero__meta,
  .portrait__card,
  .card,
  .area-card,
  .resource,
  .resource-card,
  .contact-panel,
  .contact-list li,
  .timeline,
  .timeline__item,
  .faq-list details,
  .areas-v3-faq-list details,
  .site-footer__legal,
  .reservation-modal__panel,
  .reservation-modal__area
) {
  border: 0 !important;
}
body.bravo-v3 :is(
  .eyebrow,
  .section-head,
  .timeline,
  .timeline__item,
  .area-card,
  .resource,
  .resource-card,
  .contact-panel,
  .portrait__card,
  .site-footer__legal
)::before,
body.bravo-v3 :is(
  .eyebrow,
  .section-head,
  .timeline,
  .timeline__item,
  .area-card,
  .resource,
  .resource-card,
  .contact-panel,
  .portrait__card,
  .site-footer__legal
)::after {
  content: none !important;
  display: none !important;
}
body.bravo-v3 :is(hr, .rule, .decorative-rule, .section-rule) {
  display: none !important;
}
body.bravo-v3 :is(.card, .area-card, .resource, .resource-card, .contact-panel) {
  border-radius: var(--v4-radius-card) !important;
  background: var(--v4-surface);
  box-shadow: none;
}
body.bravo-v3 :is(.card, .area-card, .resource, .resource-card):hover {
  background: var(--v4-surface-strong);
}
body.bravo-v3 .timeline { gap: 12px; }
body.bravo-v3 .timeline__item {
  padding: 16px 18px !important;
  border-radius: var(--v4-radius-card);
  background: var(--v4-surface);
}
body.bravo-v3 .faq-list { gap: 12px; }
body.bravo-v3 .faq-list details,
body.bravo-v3 .areas-v3-faq-list details {
  padding: 17px 18px;
  border-radius: var(--v4-radius-card);
  background: var(--v4-surface);
}
body.bravo-v3 .contact-list { gap: 10px; }
body.bravo-v3 .contact-list li {
  padding: 14px 16px;
  border-radius: var(--v4-radius-card);
  background: var(--v4-surface);
}
body.bravo-v3 .hero__meta { gap: 10px; padding: 0 !important; }
body.bravo-v3 .hero__meta > * {
  padding: 12px 14px;
  border-radius: var(--v4-radius-card);
  background: var(--v4-surface);
}
body.bravo-v3 .portrait__card {
  border-radius: var(--v4-radius-card) !important;
  background: var(--v4-paper);
  color: var(--v4-text);
  box-shadow: var(--v4-shadow-soft);
}

/* Shared floating shell. */
body.bravo-v3 #bravo-header {
  position: fixed;
  inset: 12px max(16px, env(safe-area-inset-right)) auto max(16px, env(safe-area-inset-left));
  width: min(1320px, calc(100% - 32px));
  max-width: 1320px;
  min-height: 76px;
  margin-inline: auto;
  padding: 0 clamp(16px, 2.2vw, 28px);
  border: 0 !important;
  border-radius: var(--v4-radius-float);
  background: color-mix(in srgb, var(--v4-paper) 94%, transparent);
  color: var(--v4-text);
  box-shadow: var(--v4-shadow-float);
  backdrop-filter: blur(16px) saturate(125%);
  -webkit-backdrop-filter: blur(16px) saturate(125%);
}
body.bravo-v3 .site-header__inner { min-height: 76px; }
body.bravo-v3 .site-header .brand img { width: clamp(190px, 18vw, 246px); }
html[data-tema="oscuro"] body.bravo-v3 .site-header .brand img,
html[data-tema="oscuro"] body.bravo-v3 .site-footer__brand img {
  filter: brightness(0) invert(1);
}
body.bravo-v3 .site-nav a {
  border-radius: var(--v4-radius-control);
  color: var(--v4-text);
}
body.bravo-v3 .site-nav a:not(.site-nav__reserve):hover,
body.bravo-v3 .site-nav a:not(.site-nav__reserve):focus-visible {
  color: var(--v4-link);
  background: var(--v4-surface);
}
body.bravo-v3 .site-nav__reserve,
body.bravo-v3 .button,
body.bravo-v3 .areas-v3-hero__cta,
body.bravo-v3 .button--gold {
  border: 0 !important;
  border-radius: var(--v4-radius-control) !important;
  background: var(--v4-action);
  color: var(--v4-action-text);
  box-shadow: none;
}
body.bravo-v3 .site-nav__reserve:hover,
body.bravo-v3 .button:hover,
body.bravo-v3 .areas-v3-hero__cta:hover,
body.bravo-v3 .button--gold:hover {
  background: color-mix(in srgb, var(--v4-action) 82%, white);
  color: var(--v4-action-text);
  box-shadow: var(--v4-shadow-soft);
  transform: translateY(-2px);
}
body.bravo-v3 .button--light {
  border: 0 !important;
  background: var(--v4-surface);
  color: var(--v4-text);
}
body.bravo-v3 .language a[aria-current="page"] {
  color: var(--v4-link);
  background: var(--v4-surface);
  border-radius: var(--v4-radius-control);
}
body.bravo-v3 :is(.theme-toggle, .menu-toggle, .reservation-modal__close) {
  border: 0 !important;
  border-radius: var(--v4-radius-control);
  background: var(--v4-surface);
  color: var(--v4-text);
}

/* Modal and floating contact are compact, readable and never outlined. */
body.bravo-v3 .reservation-modal__panel {
  border-radius: var(--v4-radius-float);
  background: var(--v4-paper);
  color: var(--v4-text);
  box-shadow: var(--v4-shadow-float);
}
body.bravo-v3 .reservation-modal__area {
  border-radius: var(--v4-radius-control);
  background: var(--v4-surface);
  color: var(--v4-text);
}
body.bravo-v3 .reservation-modal__area:hover { background: var(--v4-surface-strong); }
body.bravo-v3 .bravo-contact {
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 110;
}
body.bravo-v3 .bravo-contact summary {
  display: grid;
  grid-template-columns: 22px auto;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 12px 16px;
  border: 0;
  border-radius: var(--v4-radius-float);
  background: var(--v4-action);
  color: #fff;
  box-shadow: var(--v4-shadow-float);
}
body.bravo-v3 .bravo-contact__icon { font-size: 1.15rem; line-height: 1; }
body.bravo-v3 .bravo-contact__links {
  width: min(250px, calc(100vw - 32px));
  padding: 8px;
  border: 0;
  border-radius: var(--v4-radius-float);
  background: var(--v4-paper);
  box-shadow: var(--v4-shadow-float);
}
body.bravo-v3 .bravo-contact__links a {
  margin: 0;
  border: 0;
  border-radius: var(--v4-radius-control);
  color: var(--v4-text);
}
body.bravo-v3 .bravo-contact__links a:hover { background: var(--v4-surface); }

/* Contact and footer use blocks and spacing instead of repeated hairlines. */
body.bravo-v3 .contact-right { display: grid; gap: 10px; }
body.bravo-v3 .contact-right > a:not(.button) {
  padding: 16px 18px;
  border: 0 !important;
  border-radius: var(--v4-radius-card);
  background: var(--v4-surface);
}
body.bravo-v3 .contact-right > a:not(.button):hover { background: var(--v4-surface-strong); }
body.bravo-v3 > footer[data-javier-shell="footer"],
body.bravo-v3 .site-footer {
  border: 0;
  background: var(--v4-surface);
  color: var(--v4-text);
}
body.bravo-v3 .site-footer :is(a, p, li, h2),
html[data-tema] body.bravo-v3 footer .site-footer a { color: var(--v4-text); }
body.bravo-v3 .site-footer h2 { color: var(--v4-link); }
body.bravo-v3 .site-footer__copy { color: var(--v4-muted); }
body.bravo-v3 .section--ink {
  background: var(--v4-surface-strong);
  color: var(--v4-text);
}
body.bravo-v3 .section--ink :is(p, .lead, .muted, .resource p) { color: var(--v4-muted); }
body.bravo-v3 .section--ink :is(h2, h3, .text-link, .resource a) { color: var(--v4-text); }
html[data-tema="oscuro"] body.bravo-v3 :is(.hero, .section, .section--wash, #firma),
html[data-tema="oscuro"] body.bravo-v3 > :is(.areas-v3-hero, header.hero) {
  background: var(--v4-paper) !important;
  color: var(--v4-text) !important;
}
html[data-tema="oscuro"] body.bravo-v3 :is(.lead, .muted, .feature-grid__copy p, #firma .feature-grid__copy p) {
  color: var(--v4-muted) !important;
}
html[data-tema="oscuro"] body.bravo-v3 :is(h1, h2, h3, h4, .hero__meta strong, #firma h2) {
  color: var(--v4-text) !important;
}
html[data-tema="oscuro"] body.bravo-v3 :is(.card, .area-card, .resource, .resource-card, .contact-panel) {
  background: var(--v4-surface);
  color: var(--v4-text);
}

/* V4 navigation: clear the reading area while advancing and return on reverse scroll. */
body.bravo-v3 .site-header {
  transition: transform .28s ease, opacity .2s ease;
  will-change: transform;
}
body.bravo-v3 .site-header.header-is-hidden {
  transform: translateY(calc(-100% - 24px));
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  body.bravo-v3 .site-header { transition: none; }
}

/* A generous final chapter rather than a compressed utility strip. */
body.bravo-v3 .site-footer {
  min-height: min(88vh, 920px);
  padding-block: clamp(64px, 9vw, 136px) 42px;
}
body.bravo-v3 .site-footer__grid {
  grid-template-columns: minmax(260px, 1.35fr) repeat(3, minmax(150px, .75fr));
  gap: clamp(34px, 5vw, 88px);
}
body.bravo-v3 .site-footer__social {
  display: grid;
  grid-template-columns: minmax(240px, .7fr) minmax(0, 1.3fr);
  gap: clamp(28px, 6vw, 100px);
  align-items: start;
  margin-top: clamp(64px, 10vw, 150px);
}
body.bravo-v3 .site-footer__social h2 {
  max-width: 18ch;
  margin: 12px 0 0;
  color: var(--v4-text);
  font-size: clamp(1.8rem, 3.3vw, 4.2rem);
  line-height: .98;
  letter-spacing: -.035em;
  text-transform: none;
}
body.bravo-v3 .site-footer__social-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
body.bravo-v3 .site-footer__red {
  display: grid;
  align-content: start;
  gap: 18px;
  min-height: 160px;
  padding: 24px;
  border-radius: var(--v4-radius-card);
  background: var(--v4-paper);
}
body.bravo-v3 .site-footer__red-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
}
body.bravo-v3 .site-footer__red:not(.site-footer__red--con-posts) .site-footer__red-cabecera {
  display: grid;
  gap: 30px;
  height: 100%;
}
body.bravo-v3 .site-footer__red:not(.site-footer__red--con-posts) { transition: transform .2s ease, background-color .2s ease; }
body.bravo-v3 .site-footer__red:not(.site-footer__red--con-posts):hover {
  transform: translateY(-5px);
  background: var(--v4-surface-strong);
}
body.bravo-v3 .site-footer__red-cabecera strong { font-size: 1.4rem; }
body.bravo-v3 .site-footer__red-cabecera span { align-self: end; color: var(--v4-muted); }
body.bravo-v3 .site-footer__red-cabecera:hover span,
body.bravo-v3 .site-footer__red-cabecera:focus-visible span { color: var(--v4-text); }
body.bravo-v3 .site-footer__posts {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
body.bravo-v3 .site-footer__posts a {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin-inline: -10px;
  padding: 8px 10px;
  border-radius: 14px;
  transition: background-color .2s ease;
}
body.bravo-v3 .site-footer__posts a:hover,
body.bravo-v3 .site-footer__posts a:focus-visible { background: var(--v4-surface-strong); }
body.bravo-v3 .site-footer__posts img,
body.bravo-v3 .site-footer__post-sin-img {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--v4-surface-strong);
}
body.bravo-v3 .site-footer__post-texto { display: grid; gap: 4px; min-width: 0; }
body.bravo-v3 .site-footer__post-texto time {
  color: var(--v4-muted);
  font-size: .82rem;
  letter-spacing: .02em;
  text-transform: uppercase;
}
body.bravo-v3 .site-footer__post-texto span {
  display: -webkit-box;
  overflow: hidden;
  color: var(--v4-text);
  font-size: .98rem;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
@media (max-width: 820px) {
  body.bravo-v3 .site-footer { min-height: 0; padding-block: 60px 100px; }
  body.bravo-v3 .site-footer__grid,
  body.bravo-v3 .site-footer__social { grid-template-columns: 1fr; }
  body.bravo-v3 .site-footer__social { margin-top: 70px; }
  body.bravo-v3 .site-footer__social-links { grid-template-columns: 1fr; }
  body.bravo-v3 .site-footer__red { min-height: 125px; }
}
html[data-tema="oscuro"] body.bravo-v3 :is(.card, .area-card, .resource, .resource-card, .contact-panel) :is(p, a, h3) {
  color: var(--v4-text);
}
html[data-tema="oscuro"] body.bravo-v3 :is(.card, .area-card, .resource, .resource-card, .contact-panel):hover {
  background: var(--v4-surface-strong);
}
html[data-tema="oscuro"] body.bravo-v3 :is(.text-link, .contact-list a, .eyebrow, .card__number, .timeline__year, .signature) {
  color: var(--v4-link);
}

body.bravo-v3 :is(
  .button,
  .site-nav a,
  .theme-toggle,
  .menu-toggle,
  .bravo-contact summary,
  .bravo-contact__links a,
  .reservation-modal__area,
  .card,
  .area-card,
  .resource,
  .resource-card
) {
  transition: color 160ms ease, background-color 160ms ease, box-shadow 220ms cubic-bezier(.2,.8,.2,1), transform 220ms cubic-bezier(.2,.8,.2,1);
}

@media (max-width: 1100px) {
  body.bravo-v3 .site-nav {
    position: fixed;
    inset: 100px 16px auto;
    width: auto;
    max-height: calc(100dvh - 120px);
    padding: 12px;
    border: 0 !important;
    border-radius: var(--v4-radius-float);
    background: var(--v4-paper);
    color: var(--v4-text);
    box-shadow: var(--v4-shadow-float);
  }
  body.bravo-v3 .site-nav a { padding: 13px 15px; }
  body.bravo-v3 .menu-toggle { width: 44px; height: 44px; }
}
@media (max-width: 620px) {
  body.bravo-v3 { padding-top: 86px !important; }
  body.bravo-v3 #bravo-header {
    inset: 8px 10px auto;
    width: calc(100% - 20px);
    min-height: 68px;
    padding-inline: 12px;
  }
  body.bravo-v3 .site-header__inner { min-height: 68px; }
  body.bravo-v3 .site-header .brand img { width: clamp(132px, 39vw, 172px); }
  body.bravo-v3 .site-nav { inset: 86px 10px auto; }
  body.bravo-v3 .site-tools { gap: 3px; }
  body.bravo-v3 .language a { padding: 6px 4px; }
  body.bravo-v3 .bravo-contact { right: 10px; bottom: 10px; }
  body.bravo-v3 .bravo-contact summary {
    grid-template-columns: 22px;
    width: 48px;
    min-height: 48px;
    padding: 0;
    place-items: center;
    border-radius: var(--v4-radius-float);
  }
  body.bravo-v3 .bravo-contact__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  body.bravo-v3 *,
  body.bravo-v3 *::before,
  body.bravo-v3 *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* P0 geometry/contact repair · 2026-09-28
   Legacy templates may keep their own max-width on #contenido/main. The
   viewport is the page boundary; only direct content blocks are containers. */
html,
body,
body.bravo-v3,
html.v4-legacy body {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
body.bravo-v3,
html.v4-legacy body {
  max-width: 100vw;
  overflow-x: clip;
  padding-bottom: 88px;
}
body.bravo-v3 > main,
body.bravo-v3 > #contenido,
html.v4-legacy main,
html.v4-legacy .v4-legacy-page,
html.v4-legacy .page-shell,
html.v4-legacy .site-main {
  width: 100%;
  max-width: none;
  min-width: 0;
  box-sizing: border-box;
}
html.v4-legacy main#contenido,
body.bravo-v3 > main#contenido {
  padding-inline: 0;
}
html.v4-legacy main#contenido > :where(section, article, figure, nav, .bloque, .panel, .card),
body.bravo-v3 > main#contenido > :where(section, article, figure, nav, .bloque, .panel, .card) {
  width: min(1040px, calc(100% - 40px));
  max-width: calc(100% - 40px);
  min-width: 0;
  margin-inline: auto;
}
body.bravo-v3 :where(.wrap, .container, .page-inner, .content-inner, .main-inner) {
  width: min(var(--max), calc(100% - 2 * var(--pad)));
  max-width: 100%;
  min-width: 0;
  margin-inline: auto;
}
body.bravo-v3 [data-v4-retired="shell-replaced"],
html.v4-legacy [data-v4-retired="shell-replaced"] {
  display: none !important;
}
body.bravo-v3 .bravo-contact {
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  max-width: calc(100vw - 24px);
}
body.bravo-v3 .bravo-contact summary {
  display: grid;
  grid-template-columns: 22px;
  place-items: center;
  width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 0;
  border-radius: 50%;
  background: var(--v4-action);
  color: var(--v4-action-text);
}
body.bravo-v3 .bravo-contact__icon,
body.bravo-v3 .bravo-contact__link-icon {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  line-height: 0;
}
body.bravo-v3 .bravo-contact__svg {
  display: block;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body.bravo-v3 .bravo-contact__links {
  display: grid;
  gap: 2px;
  width: min(230px, calc(100vw - 24px));
  padding: 6px;
  bottom: calc(100% + 8px);
  border-radius: 12px;
}
body.bravo-v3 .bravo-contact__links a {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 9px 10px;
}
body.bravo-v3 .bravo-contact__links a .bravo-contact__svg { width: 19px; height: 19px; }
@media (max-width: 620px) {
  body.bravo-v3,
  html.v4-legacy body { padding-bottom: 78px; }
  html.v4-legacy main#contenido > :where(section, article, figure, nav, .bloque, .panel, .card),
  body.bravo-v3 > main#contenido > :where(section, article, figure, nav, .bloque, .panel, .card) {
    width: calc(100% - 32px);
    max-width: calc(100% - 32px);
  }
  body.bravo-v3 .bravo-contact { right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); }
}

/* La Firma · canonical V4 editorial page. */
.firma-v4-page { width: 100%; background: var(--paper); color: var(--text); }
.firma-v4-page > * { min-width: 0; }
.firma-v4-hero { padding: clamp(42px, 7vw, 88px) 0 clamp(34px, 5vw, 64px); }
.firma-v4-hero__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: end; gap: clamp(28px, 6vw, 84px); }
.firma-v4-hero h1 { max-width: 10ch; font-size: clamp(3rem, 7vw, 6.4rem); color: var(--ink); }
.firma-v4-hero h1 em { color: var(--blue); font-style: normal; }
.firma-v4-hero__copy .lead { max-width: 48ch; }
.firma-v4-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.firma-v4-hero__media { position: relative; margin: 0; overflow: hidden; background: var(--blue-wash); }
.firma-v4-hero__media img { width: 100%; height: clamp(280px, 42vw, 540px); aspect-ratio: 1.45; object-fit: cover; object-position: center 42%; }
.firma-v4-hero__media figcaption { position: absolute; right: 16px; bottom: 16px; max-width: min(280px, 75%); padding: 12px 14px; background: var(--paper); color: var(--ink); box-shadow: var(--v4-shadow-soft); }
.firma-v4-hero__media figcaption strong,
.firma-v4-hero__media figcaption span { display: block; }
.firma-v4-hero__media figcaption span { margin-top: 4px; color: var(--muted); font-size: .82rem; }
.firma-v4-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 14px 0 34px; }
.firma-v4-facts strong, .firma-v4-facts span { display: block; }
.firma-v4-facts strong { color: var(--blue); font-size: 1.05rem; }
.firma-v4-facts span { margin-top: 3px; color: var(--muted); font-size: .86rem; }
.firma-v4-band { padding: clamp(42px, 6vw, 78px) 0; }
.firma-v4-band--wash { background: var(--blue-wash); }
.firma-v4-band--blue { background: var(--blue); color: #fff; }
.firma-v4-band--blue :is(h2, h3, p, a) { color: inherit; }
.firma-v4-band--blue .eyebrow { color: rgba(255,255,255,.86); }
.firma-v4-split { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 7vw, 96px); align-items: start; }
.firma-v4-split h2, .firma-v4-team h2, .firma-v4-method h2 { max-width: 15ch; color: var(--ink); }
.firma-v4-band--blue h2 { color: #fff; }
.firma-v4-copy { max-width: 62ch; }
.firma-v4-copy p + p { margin-top: 16px; }
.firma-v4-team { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 6vw, 80px); align-items: center; }
.firma-v4-team figure { margin: 0; background: var(--blue-wash); }
.firma-v4-team figure img { width: 100%; height: clamp(300px, 42vw, 560px); aspect-ratio: .84; object-fit: cover; object-position: center 24%; }
.firma-v4-team figcaption { padding: 12px 14px; color: var(--muted); font-size: .86rem; }
.firma-v4-method { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: clamp(28px, 7vw, 96px); }
.firma-v4-steps { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
.firma-v4-steps li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 14px; align-items: start; }
.firma-v4-steps .number { color: var(--blue); font-weight: 700; letter-spacing: .08em; }
.firma-v4-steps h3 { font-size: clamp(1.2rem, 2vw, 1.6rem); color: var(--ink); }
.firma-v4-steps p { margin-top: 6px; color: var(--muted); }
.firma-v4-history { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 7vw, 96px); }
.firma-v4-history-list { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.firma-v4-history-list li { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 14px; }
.firma-v4-history-list .year { color: var(--blue); font-weight: 700; }
.firma-v4-history-list h3 { font-size: 1.18rem; color: var(--ink); }
.firma-v4-history-list p { margin-top: 4px; color: var(--muted); }
.firma-v4-areas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.firma-v4-area { padding: 22px; background: var(--v4-surface); }
.firma-v4-area h3 { color: var(--ink); }
.firma-v4-area p { margin-top: 10px; color: var(--muted); }
.firma-v4-location { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 6vw, 80px); align-items: center; }
.firma-v4-location figure { margin: 0; }
.firma-v4-location img { width: 100%; height: clamp(240px, 30vw, 420px); aspect-ratio: 1.5; object-fit: cover; }
.firma-v4-location address { margin-top: 18px; font-style: normal; color: var(--muted); }
.firma-v4-cta { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.firma-v4-cta h2 { max-width: 14ch; color: #fff; }
.firma-v4-cta p { max-width: 48ch; margin-top: 10px; color: rgba(255,255,255,.86); }
/* En Áreas el titular necesita más ancho y menos separación del texto guía. */
body.bravo-v3 .firma-v4-page #areas .firma-v4-split {
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
  gap: clamp(24px, 4vw, 64px);
}
body.bravo-v3 .firma-v4-page #areas .firma-v4-split h2 { max-width: 21ch; }
@media (max-width: 820px) {
  .firma-v4-hero__grid, .firma-v4-split, .firma-v4-team, .firma-v4-method, .firma-v4-history, .firma-v4-location { grid-template-columns: 1fr; }
  body.bravo-v3 .firma-v4-page #areas .firma-v4-split { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .firma-v4-hero h1 { max-width: 14ch; }
  .firma-v4-hero__media img { height: clamp(260px, 64vw, 420px); }
  .firma-v4-team figure img { height: clamp(280px, 74vw, 440px); }
  .firma-v4-areas { grid-template-columns: 1fr; }
  .firma-v4-cta { align-items: start; flex-direction: column; }
}
@media (max-width: 620px) {
  .firma-v4-hero { padding-top: 28px; }
  .firma-v4-hero__media img { height: clamp(240px, 72vw, 320px); object-position: center 34%; }
  .firma-v4-facts { grid-template-columns: 1fr; gap: 10px; }
  .firma-v4-band { padding-block: 42px; }
  .firma-v4-team figure img { height: 330px; object-position: center 24%; }
  .firma-v4-location img { height: 250px; }
}

html[data-tema="oscuro"] body.bravo-v3 .firma-v4-page {
  --paper: var(--v4-paper);
  --ink: var(--v4-text);
  --text: var(--v4-text);
  --muted: var(--v4-muted);
  --blue-wash: var(--v4-surface);
  background: var(--v4-paper);
  color: var(--v4-text);
}
html[data-tema="oscuro"] body.bravo-v3 .firma-v4-page :is(h1, h2, h3, strong) { color: var(--v4-text); }
html[data-tema="oscuro"] body.bravo-v3 .firma-v4-page :is(p, address, figcaption, .firma-v4-facts span) { color: var(--v4-muted); }
html[data-tema="oscuro"] body.bravo-v3 .firma-v4-page .firma-v4-band--blue :is(h2, h3, p, a, .eyebrow) { color: #fff; }
html[data-tema="oscuro"] body.bravo-v3 .firma-v4-area { background: var(--v4-surface-strong); }

/* V4.1 visual correction · 2026-09-28 */
body.bravo-v3 { --max: 1180px; --pad: clamp(18px, 4vw, 40px); padding-bottom: 0; }
body.bravo-v3 #bravo-header { width: min(1180px, calc(100% - 32px)); max-width: 1180px; }
body.bravo-v3 :where(.wrap, .container, .page-inner, .content-inner, .main-inner),
body.bravo-v3 > main#contenido > :where(section, article, figure, nav, .bloque, .panel, .card) { width: min(1180px, calc(100% - 2 * var(--pad))); max-width: 1180px; }
body.bravo-v3 .section { padding-block: clamp(56px, 7vw, 92px); }
body.bravo-v3 .hero { padding-block: clamp(120px, 13vw, 170px) clamp(62px, 8vw, 100px); }
body.bravo-v3 .hero__grid { grid-template-columns: minmax(0, .92fr) minmax(400px, 1.08fr); gap: clamp(42px, 7vw, 90px); }
body.bravo-v3 .hero h1 { max-width: 11ch; font-size: clamp(3.1rem, 5.4vw, 5.2rem); line-height: .98; }
body.bravo-v3 .portrait { height: clamp(430px, 47vw, 620px); min-height: 0; overflow: hidden; background: #10283a !important; }
body.bravo-v3 .portrait picture { inset: 0; }
body.bravo-v3 .portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
body.bravo-v3 .portrait__card { right: 18px; bottom: 18px; border-radius: 0 !important; }
body.bravo-v3 :is(.card, .area-card, .resource, .resource-card, .contact-panel),
body.bravo-v3 .hero__meta > *, body.bravo-v3 .timeline__item,
body.bravo-v3 .faq-list details, body.bravo-v3 .areas-v3-faq-list details,
body.bravo-v3 .contact-list li, body.bravo-v3 .contact-right > a:not(.button) { border-radius: 0 !important; background: transparent; box-shadow: none; }
body.bravo-v3 .hero__meta { gap: 24px; }
body.bravo-v3 .hero__meta > * { padding: 0; }
body.bravo-v3 .timeline { gap: 0; }
body.bravo-v3 .timeline__item { padding: 11px 0 !important; }
body.bravo-v3 :is(.card, .area-card, .resource, .resource-card) { padding: clamp(22px, 3vw, 34px); }
body.bravo-v3 :is(.card, .area-card, .resource, .resource-card):hover { background: color-mix(in srgb, var(--v4-link) 7%, transparent); }
body.bravo-v3 .section--ink { background: var(--v4-paper); color: var(--v4-text); }
body.bravo-v3.ip-servicios > .hero { width: min(1180px, calc(100% - 2 * var(--pad))); min-height: 0; margin-inline: auto; padding: clamp(105px, 10vw, 132px) 0 clamp(44px, 5vw, 64px); background: transparent !important; }
body.bravo-v3.ip-servicios > .hero::after { display: none !important; content: none !important; }
body.bravo-v3.ip-servicios > .hero h1 { max-width: 13ch; font-size: clamp(3rem, 5vw, 4.7rem); }
body.bravo-v3.ip-servicios > .hero p { max-width: 720px; }
body.bravo-v3.ip-servicios > .miga, body.bravo-v3.ip-servicios #contenido { width: min(1180px, calc(100% - 2 * var(--pad))); margin-inline: auto; }
body.bravo-v3.ip-servicios #contenido > :where(section, article, figure, nav, .bloque, .panel, .card) { width: 100%; max-width: none; }
body.bravo-v3 .bravo-contact { position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 110; display: flex; overflow: hidden; border: 0; border-radius: 12px; background: var(--v4-paper); box-shadow: var(--v4-shadow-float); }
body.bravo-v3 .bravo-contact > a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 16px; color: var(--v4-text); text-decoration: none; font-weight: 650; }
body.bravo-v3 .bravo-contact > a:hover { background: var(--v4-surface); }
body.bravo-v3 .bravo-contact__link-icon { display: grid; width: 21px; height: 21px; }
body.bravo-v3 .bravo-contact__svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.bravo-v3 .bravo-contact__book { background: var(--v4-action); color: #fff !important; }
body.bravo-v3 .bravo-contact__book:hover { background: color-mix(in srgb, var(--v4-action) 86%, white) !important; }
.firma-v4-hero { padding-block: clamp(118px, 12vw, 156px) clamp(56px, 7vw, 86px); }
.firma-v4-hero__title { max-width: 10ch; font-size: clamp(3.2rem, 5.4vw, 5.2rem); line-height: .98; }
.firma-v4-hero__media img { max-height: 580px; object-fit: cover; object-position: center 28%; }
@media (max-width: 820px) {
  body.bravo-v3 .hero__grid { grid-template-columns: 1fr; }
  body.bravo-v3 .hero h1 { max-width: 13ch; }
  body.bravo-v3 .portrait { width: 100%; height: min(115vw, 540px); }
  body.bravo-v3 .bravo-contact { left: 10px; right: 10px; bottom: max(8px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.bravo-v3 .bravo-contact > a { min-width: 0; min-height: 54px; padding: 6px 8px; font-size: .78rem; }
}
@media (max-width: 480px) {
  body.bravo-v3 { padding-bottom: 72px; }
  body.bravo-v3 .hero { padding-top: 42px; }
  body.bravo-v3 .hero h1 { font-size: clamp(2.6rem, 13vw, 4rem); }
  body.bravo-v3 .portrait { height: 112vw; max-height: 480px; }
  body.bravo-v3 .portrait__card { left: 12px; right: 12px; width: auto; max-width: none; }
  body.bravo-v3 .bravo-contact > a { flex-direction: column; gap: 2px; }
  body.bravo-v3 .bravo-contact__link-icon { width: 19px; height: 19px; }
}

/* Shared headings and legacy actions: respect the available column. */
body.bravo-v3 main > .hero { padding-top: 48px; }
body.bravo-v3 :is(.btn, .button, .btn-primary):is(:hover, :focus, :active),
body.bravo-v3 :is(.btn, .button, .btn-primary) { box-shadow: none !important; }
body.bravo-v3:has(#barra) header.hero { width: min(960px, calc(100% - 40px)); padding: 130px 0 30px; margin-inline: auto; text-align: left; }
body.bravo-v3:has(#barra) header.hero h1 { max-width: none; font-size: clamp(2.1rem, 4vw, 3.4rem); line-height: 1.12; margin: 14px 0; }
body.bravo-v3:has(#barra) header.hero p { max-width: none; margin: 0; }
body.bravo-v3:has(#barra) main#contenido { width: min(960px, calc(100% - 40px)); padding: 10px 0 70px; margin-inline: auto; }
body.bravo-v3:has(#barra) .pasos { max-width: none; margin: 0 0 26px; }
body.bravo-v3:has(#barra) .pasos li { border: 0 !important; border-radius: 6px; box-shadow: none; padding: 12px; }
body.bravo-v3:has(#barra) .tarjeta { width: 100%; max-width: none; padding: 24px 0; }
body.bravo-v3:has(#barra) #servicios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
body.bravo-v3:has(#barra) .agenda-fallback { grid-column: 1 / -1; }
body.bravo-v3:has(#barra) .agenda-fallback p { flex: 1; min-width: 0; }
@media(max-width:640px) {
  body.bravo-v3:has(#barra) header.hero { padding-top: 36px; }
  body.bravo-v3:has(#barra) #servicios { grid-template-columns: 1fr; }
}
body.bravo-v3 .section-head { max-width: none; }
body.bravo-v3 #metodo h2 { max-width: none; width: auto; text-wrap: wrap; }
body.bravo-v3 a.btn.btn-primary { color: #fff !important; background: #315f87 !important; text-decoration: none; }
body.bravo-v3 .penal-panel { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px; }
body.bravo-v3 .penal-panel > * { min-width: 0; }
body.bravo-v3 .penal-panel h2 { font-size: clamp(1.8rem, 3vw, 2.8rem); max-width: none; }
body.bravo-v3 .penal-fases { align-items: stretch; gap: 20px; }
body.bravo-v3 .penal-fase { border: 0 !important; background: transparent; padding: 20px 12px; display: flex; flex-direction: column; }
body.bravo-v3 .penal-fase__num { background: none !important; color: var(--v4-link) !important; font-size: .85rem; padding: 0; }
body.bravo-v3 .penal-fase:is(.is-active,:hover,:focus-within) { flex-grow: 1; }
@media (max-width:900px) {
  body.bravo-v3 .penal-fase:is(.is-active,:hover,:focus-within) { flex-grow: 0; }
}
body.bravo-v3 .departamento__actions { align-items: stretch; }
body.bravo-v3 .departamento__actions .btn {
  display: flex; align-items: center; justify-content: center;
  white-space: normal; max-width: 100%; text-align: center; line-height: 1.4;
}
@media (max-width:760px) {
  body.bravo-v3 .departamento__actions .btn { flex: 1 1 220px; }
}
body.bravo-v3 .penal-fase h3 { font-size: clamp(1.15rem, 1.8vw, 1.5rem); margin-block: 12px; }
body.bravo-v3 .penal-fase p { font-size: 1rem; line-height: 1.55; }
body.bravo-v3 .penal-fase a { margin-top: auto; padding-top: 24px; font-size: .9rem; }
body.bravo-v3 .cta .botones { justify-content: flex-start; gap: 12px; }
body.bravo-v3 .cta { padding: 28px !important; margin-block: 32px; }
body.bravo-v3 .recurso-card[hidden], body.bravo-v3 [data-recursos-empty][hidden], body.bravo-v3 [data-recursos-reserva][hidden] { display: none !important; }
body.bravo-v3 .recursos-catalogo { scroll-margin-top: 120px; }
body.bravo-v3 .bravo-contact { display: flex; flex-direction: column; left: auto; right: 20px; bottom: 20px; gap: 10px; background: none; box-shadow: none; overflow: visible; border-radius: 0; }
body.bravo-v3 .bravo-contact > a { width: 48px; height: 48px; min-height: 48px; padding: 0; border-radius: 50%; background: var(--v4-paper); color: var(--v4-text); box-shadow: 0 4px 18px #17202a1a; }
body.bravo-v3 .bravo-contact > a > span:not(.bravo-contact__link-icon) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
body.bravo-v3 .bravo-contact { align-items: flex-end; }
body.bravo-v3 .bravo-contact .bravo-contact__book {
  display: flex; width: auto; max-width: min(220px, calc(100vw - 40px));
  height: auto; min-height: 48px; padding: 12px 18px;
  border-radius: 6px; background: #315f87; color: #fff !important;
  text-align: center; line-height: 1.3;
}
body.bravo-v3 .bravo-contact .bravo-contact__book > span {
  position: static; width: auto; height: auto; overflow: visible; clip-path: none;
}
body.bravo-v3 .bravo-contact .bravo-contact__book:is(:hover,:focus-visible) { background: #173a57 !important; }
body.bravo-v3 .bravo-contact > a:focus-visible { outline: 3px solid var(--v4-focus); outline-offset: 3px; }
@media (max-width: 820px) {
  body.bravo-v3 .penal-panel { grid-template-columns: minmax(0, 1fr); }
  body.bravo-v3 .bravo-contact { right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); }
}
/* Original cutout and graphic sheets, confirmed by Nico's reference. */
body.bravo-v3 .portrait {
  --portrait-sheet: #fff; --portrait-point: #20496b;
  background: #edf0f3 !important; height: auto; aspect-ratio: 300 / 340;
  width: 100%; max-width: 560px; margin-inline: auto;
}
body.bravo-v3 .portrait__background {
  position: absolute; inset: 0; width: 100%; height: 100%;
  color: #bdc8d3; z-index: 0;
}
body.bravo-v3 .portrait__back-sheet { fill: none; stroke: #bdc8d3; stroke-width: .5; }
body.bravo-v3 .portrait__front-sheet { fill: var(--portrait-sheet); stroke: #bdc8d3; stroke-width: .6; }
body.bravo-v3 .portrait picture { inset: 12px 0 0; z-index: 1; }
body.bravo-v3 .portrait img { object-fit: contain; object-position: center bottom; filter: drop-shadow(0 0 12px #17202a18); }
body.bravo-v3 .portrait__card { display: none; }
html[data-tema="oscuro"] body.bravo-v3 .portrait { --portrait-sheet: #29343e; --portrait-point: #8bb9dd; background: #202830 !important; }
html[data-tema="oscuro"] body.bravo-v3 .portrait__background { color: #8395a6; }
@media (max-width: 820px) {
  body.bravo-v3 .portrait { width: min(100%, 340px); height: auto; max-height: none; }
}

/* V4.2 · 2026-09-29: navigation, hierarchy and footer reconstruction. */
body.bravo-v3 .site-nav__resources { position: relative; display: flex; align-items: center; }
body.bravo-v3 .site-nav__resources-toggle {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0;
  border: 0; background: transparent; color: var(--v4-text); font: inherit; cursor: pointer;
}
body.bravo-v3 .site-nav__resources-toggle span { color: var(--v4-link); font-size: 1.05rem; transition: transform .18s ease; }
body.bravo-v3 .site-nav__resources.is-open .site-nav__resources-toggle span { transform: rotate(180deg); }
body.bravo-v3 .site-nav__resources-menu {
  position: absolute; z-index: 30; top: calc(100% + 14px); left: 50%; width: 250px;
  display: grid; padding: 10px; background: var(--v4-paper); box-shadow: 0 18px 48px #17202a24;
  opacity: 0; visibility: hidden; transform: translate(-50%, -8px); transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
body.bravo-v3 .site-nav__resources-menu a { display: block; padding: 12px 14px; }
body.bravo-v3 .site-nav__resources-menu a:hover,
body.bravo-v3 .site-nav__resources-menu a:focus-visible { background: var(--v4-surface-strong); }
body.bravo-v3 .site-nav__resources:is(:hover, :focus-within, .is-open) .site-nav__resources-menu {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
}

/* Large colour chapters replace the undifferentiated white text canvas. */
body.bravo-v3 #faq,
body.bravo-v3 #recursos { width: 100%; max-width: none; }
body.bravo-v3 #faq { padding-inline: max(var(--pad), calc((100vw - 1180px) / 2)); background: #e8f0f6; }
body.bravo-v3 #faq .faq-list details {
  padding: 20px 24px; background: var(--v4-paper); box-shadow: none;
}
body.bravo-v3 #faq .faq-list { gap: 18px; }
body.bravo-v3 #recursos {
  padding-inline: max(var(--pad), calc((100vw - 1180px) / 2)); background: #173a57; color: #fff;
}
body.bravo-v3 #recursos :is(h2,h3,p,.eyebrow,a) { color: #fff; }
body.bravo-v3 #recursos .resource {
  min-height: 210px; padding: 30px; background: #fff; color: #17202a;
}
body.bravo-v3 #recursos .resource :is(h3,p,a) { color: #17202a; }
body.bravo-v3 #recursos .resource:nth-child(2) { background: #dbe9f4; }
body.bravo-v3 #recursos .resource:nth-child(3) { background: #86b5d8; }

/* Footer assets keep their real proportions; the footer reads as one composed chapter. */
body.bravo-v3 .site-footer__brand img {
  display: block; width: min(320px, 100%); height: auto; aspect-ratio: 320 / 84; object-fit: contain; object-position: left center;
}
body.bravo-v3 .site-footer__brand p { max-width: 34ch; margin-top: 28px; }
body.bravo-v3 .site-footer__social { padding: clamp(32px, 5vw, 70px); background: #173a57; }
body.bravo-v3 .site-footer__social :is(.eyebrow,h2) { color: #fff; }
body.bravo-v3 .site-footer__red { background: #fff; color: #17202a; }
body.bravo-v3 .site-footer__red-cabecera :is(strong,span) { color: #17202a; }
html[data-tema="oscuro"] body.bravo-v3 .site-footer { background: #202830; color: #f4f7fa; }
html[data-tema="oscuro"] body.bravo-v3 .site-footer :is(p,li,a) { color: #dfe8ef; }
html[data-tema="oscuro"] body.bravo-v3 .site-footer h2 { color: #99c8eb; }
html[data-tema="oscuro"] body.bravo-v3 .site-footer__social { background: #101c26; }
html[data-tema="oscuro"] body.bravo-v3 .site-footer__social :is(.eyebrow,h2) { color: #fff !important; }
html[data-tema="oscuro"] body.bravo-v3 .site-footer__red { background: #f7f8f9; }
html[data-tema="oscuro"] body.bravo-v3 .site-footer__red-cabecera :is(strong,span) { color: #17202a; }

body.bravo-v3 .site-footer__newsletter {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .8fr); gap: clamp(28px, 6vw, 90px);
  align-items: end; padding: clamp(42px, 7vw, 90px) 0; border-top: 1px solid #315f8740;
}
body.bravo-v3 .site-footer__newsletter h2 { max-width: 15ch; font-size: clamp(2.2rem, 5vw, 4.7rem); line-height: 1; }
body.bravo-v3 .newsletter-form { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
body.bravo-v3 .newsletter-form input { min-width: 0; min-height: 54px; padding: 0 16px; border: 1px solid #315f8766; background: var(--v4-paper); color: var(--v4-text); font: inherit; }
body.bravo-v3 .newsletter-form button { min-height: 54px; padding: 0 22px; border: 0; background: #315f87; color: #fff; font: 700 1rem var(--v4-sans); cursor: pointer; }
body.bravo-v3 .newsletter-form small { grid-column: 1 / -1; color: var(--v4-muted); line-height: 1.45; }

body.bravo-v3 .contact-form-section { background: #e8f0f6; padding: clamp(30px, 6vw, 72px); }
body.bravo-v3 .contact-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 30px; }
body.bravo-v3 .contact-form label { display: grid; gap: 7px; font-weight: 650; }
body.bravo-v3 .contact-form label.is-wide, body.bravo-v3 .contact-form .contact-form__actions { grid-column: 1 / -1; }
body.bravo-v3 .contact-form :is(input,select,textarea) { width: 100%; min-height: 52px; padding: 12px 14px; border: 1px solid #74889a; background: #fff; color: #17202a; font: inherit; }
body.bravo-v3 .contact-form textarea { min-height: 170px; resize: vertical; }
body.bravo-v3 .contact-form .contact-form__consent { display: flex; grid-column: 1 / -1; align-items: flex-start; gap: 10px; font-weight: 400; }
body.bravo-v3 .contact-form .contact-form__consent input { width: 20px; min-height: 20px; margin-top: 3px; }
body.bravo-v3 .contact-form__actions { display: flex; align-items: center; gap: 18px; }
body.bravo-v3 .contact-form__status { margin: 0; font-weight: 650; }

/* The legacy consultation CTA becomes a single, deliberate component. */
body.bravo-v3 .cta {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 32px;
  padding: clamp(34px, 5vw, 60px) !important; background: #214b70 !important; color: #fff;
}
body.bravo-v3 .cta :is(h2,p,a:not(.btn):not(.button)) { color: #fff !important; }
body.bravo-v3 .cta .botones { display: grid; grid-template-columns: repeat(2, minmax(180px, auto)); align-items: stretch; }
body.bravo-v3 .cta .botones :is(.btn,.button) { display: flex; align-items: center; justify-content: center; min-height: 54px; margin: 0; }
body.bravo-v3 .cta .botones > a[href^="tel:"] { grid-column: 1 / -1; padding: 13px 18px; background: #fff; color: #173a57 !important; text-align: center; }

@media (max-width: 1100px) {
  body.bravo-v3 .site-nav__resources { display: block; width: 100%; }
  body.bravo-v3 .site-nav__resources-toggle { width: 100%; justify-content: space-between; padding: 13px 15px; }
  body.bravo-v3 .site-nav__resources-menu { position: static; width: 100%; display: none; padding: 0 0 8px 14px; box-shadow: none; opacity: 1; visibility: visible; transform: none; }
  body.bravo-v3 .site-nav__resources.is-open .site-nav__resources-menu { display: grid; }
}
@media (max-width: 820px) {
  body.bravo-v3 .cta { grid-template-columns: 1fr; }
  body.bravo-v3 .cta .botones { grid-template-columns: 1fr; width: 100%; }
  body.bravo-v3 .cta .botones > a[href^="tel:"] { grid-column: auto; }
  body.bravo-v3 .site-footer__social { padding: 28px 20px; }
  body.bravo-v3 .site-footer__newsletter, body.bravo-v3 .contact-form { grid-template-columns: 1fr; }
  body.bravo-v3 .newsletter-form { grid-template-columns: 1fr; }
  body.bravo-v3 .newsletter-form small, body.bravo-v3 .contact-form label.is-wide, body.bravo-v3 .contact-form .contact-form__actions, body.bravo-v3 .contact-form .contact-form__consent { grid-column: auto; }
}

/* Visual QA fixes · 2026-09-29. Keep the existing V3 components and artwork. */
html.v4-legacy body.bravo-v3 > main#contenido {
  width: 100%; max-width: none; margin-inline: auto;
}
html.v4-legacy body.bravo-v3 > main#contenido > section:has(> .wrap) {
  width: 100%; max-width: none; margin-inline: 0;
}
body.bravo-v3 .hero__grid {
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(28px, 4vw, 60px);
}
body.bravo-v3 .hero h1 {
  max-width: 22ch; font-size: clamp(2.65rem, 4.35vw, 4.2rem); line-height: 1.08;
}
body.bravo-v3 .hero__actions .button { color: #fff !important; }
body.bravo-v3 .hero__actions .button--light { color: #173a57 !important; }
body.bravo-v3 .contact-section :is(h1,h2) {
  max-width: 22ch; font-size: clamp(2.2rem, 4vw, 3.7rem); line-height: 1.14;
}
body.bravo-v3 .contact-right > .button:not(.button--light) > span:first-child {
  color: #fff !important; font-size: 1rem; letter-spacing: normal; text-transform: none;
}
body.bravo-v3 .site-footer__newsletter {
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 28px; align-items: center;
  padding: 32px clamp(20px,3vw,40px); border-top: 1px solid #17202a24;
}
body.bravo-v3 .site-footer__newsletter h2 {
  max-width: 25ch; font-size: clamp(1.8rem,3vw,2.8rem); line-height: 1.15;
  text-transform: none; letter-spacing: -.025em;
}
body.bravo-v3 .site-footer__brand img { width: min(260px,100%); height: auto; object-fit: contain; }
@media (max-width: 820px) {
  body.bravo-v3 .hero__grid { grid-template-columns: minmax(0,1fr); }
  body.bravo-v3 .hero h1 { max-width: 20ch; font-size: clamp(2.25rem,9vw,3.25rem); }
  body.bravo-v3 .site-footer__newsletter { grid-template-columns: minmax(0,1fr); }
  body.bravo-v3 .site-footer__newsletter h2 { max-width: 25ch; }
}
@media (min-width: 821px) {
  body.bravo-v3 .site-header__inner { gap: 10px; }
  body.bravo-v3 .site-header .brand { flex-basis: 180px; min-width: 150px; }
  body.bravo-v3 .site-header .brand img { width: min(100%,180px); }
  body.bravo-v3 .site-nav { flex-wrap: nowrap !important; gap: clamp(6px,.7vw,10px); }
  body.bravo-v3 .site-nav > a,
  body.bravo-v3 .site-nav .site-nav__resources-toggle { display: inline-flex; flex: 0 0 auto; flex-wrap: nowrap !important; white-space: nowrap !important; }
  body.bravo-v3 .site-nav__resources-toggle > * { white-space: nowrap !important; }
}

body.bravo-v3 .site-nav a.site-nav__reserve { color: #fff; background: #2f6f9f; }

/* Focused La Firma and newsletter QA · 2026-09-29. */
body.bravo-v3 .firma-v4-hero h1 {
  max-width: 20ch; font-size: clamp(2.65rem, 4.35vw, 4.2rem); line-height: 1.08;
}
@media (min-width: 821px) {
  body.bravo-v3 .firma-v4-hero__grid {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    gap: clamp(28px, 4vw, 60px);
  }
}
body.bravo-v3 #metodo.firma-v4-band--blue { background: #315f87; }
html body.bravo-v3 .firma-v4-page #metodo.firma-v4-band--blue :is(h2,h3,p,.eyebrow,.number) { color: #fff; }
html body.bravo-v3 .site-footer .site-footer__newsletter a.button {
  background: #315f87; color: #fff;
}
html body.bravo-v3 .site-footer .site-footer__newsletter a.button:is(:hover,:focus-visible) {
  background: #173a57; color: #fff;
}
@media (max-width: 820px) {
  body.bravo-v3 .firma-v4-hero h1 { font-size: clamp(2.25rem, 9vw, 3.25rem); }
}

/* Shared layout contract: content measures belong to the page, not its ancestors.
   Full-width chapters keep their own .wrap; legacy sections get the same measure. */
/* Legal tools page: constrain the main container itself; its child rows cannot
   center against the viewport when legacy CSS stretches #contenido to 100%. */
html.v4-legacy body.bravo-v3.ip-herramientas > main#contenido {
  width: min(1180px, calc(100% - 2 * var(--pad)));
  max-width: 1180px;
  margin-inline: auto;
}
html.v4-legacy body.bravo-v3.ip-herramientas > .hero {
  width: min(1180px, calc(100% - 2 * var(--pad)));
  max-width: 1180px;
  min-height: 0;
  height: auto;
  margin-inline: auto;
  padding: clamp(32px, 5vw, 56px) 0 28px;
  background: transparent;
  border: 0;
  text-align: left;
}
html.v4-legacy body.bravo-v3 > main#contenido > :is(section,article,nav,.servicios,.areas-v3-contextual):not(:has(> .wrap)):not(.wrap) {
  width: min(1180px, calc(100% - 40px)); max-width: 1180px; margin-inline: auto;
}
html.v4-legacy body.bravo-v3 > header.hero:not(:has(.hero__grid)) {
  width: min(1180px, calc(100% - 40px)); min-height: 0; height: auto;
  margin-inline: auto; padding: 52px 0 36px; text-align: left;
}
html.v4-legacy body.bravo-v3 > header.hero:not(:has(.hero__grid)) :is(h1,p,.tag) {
  margin-left: 0; padding-left: 0; max-width: 26ch; width: auto; text-align: left;
}
html.v4-legacy body.bravo-v3 > header.hero:not(:has(.hero__grid)) p { max-width: 65ch !important; width: min(100%, 65ch); }
html.v4-legacy body.bravo-v3 > header.hero:not(:has(.hero__grid)) h1 {
  font-size: clamp(2.25rem,4.1vw,3.8rem); line-height: 1.12; margin-block: 18px;
}
/* Migas de pan: el enlace se distingue por subrayado y no solo por color (WCAG 1.4.1). */
html body.bravo-v3 :is(.miga, .art-migas, .recursos-migas, .blog-migas) a:not(.blog-migas__aqui) {
  text-decoration: underline !important; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
/* Cabeceras de herramienta con botones (p. ej. calculadora de alcoholemia): los botones y la miga de pan
   van en la misma columna que el titular y el resto de secciones (1180 px), no centrados en 1040. */
html.v4-legacy body.bravo-v3 > header.hero:not(:has(.hero__grid)) > .hero__botones {
  max-width: none; margin-inline: 0; padding-inline: 0; justify-content: flex-start;
}
html.v4-legacy body.bravo-v3 > nav.miga {
  width: min(1180px, calc(100% - 40px)); max-width: none; margin-inline: auto; padding-inline: 0;
}
body.bravo-v3 .site-header__inner { min-height: 68px; }
body.bravo-v3 #bravo-header { box-shadow: 0 8px 24px #17202a12; }
body.bravo-v3 #bravo-header.header-is-hidden { transform: translateY(calc(-100% - 24px)); opacity: 0; pointer-events: none; }
body.bravo-v3 .site-nav > a,
body.bravo-v3 .site-nav__resources-toggle {
  margin: 0; align-self: center; min-height: 44px; align-items: center;
  font-size: .86rem; line-height: 1.25; white-space: nowrap;
}
body.bravo-v3 .site-nav__resources-menu { border-radius: 8px; padding: 8px; top: 100%; }
body.bravo-v3 .site-nav__resources-menu a { white-space: normal; line-height: 1.4; border-radius: 4px; }
body.bravo-v3 .button:not(.button--light),
body.bravo-v3 .areas-v3-hero__cta { background: #315f87 !important; color: #fff !important; border-color: #315f87; }
body.bravo-v3 .button:not(.button--light):is(:hover,:focus-visible),
body.bravo-v3 .areas-v3-hero__cta:is(:hover,:focus-visible) { background: #173a57 !important; color: #fff; }
body.bravo-v3 .contact-right > .button--light,
body.bravo-v3 .contact-right > .button--light span { background: var(--v4-surface); color: var(--v4-text) !important; }
body.bravo-v3 .contact-right > .button--light span:first-child { font-size: 1rem; letter-spacing: normal; text-transform: none; }
body.bravo-v3 .servicios { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 40px; padding: 24px 0; }
body.bravo-v3 .servicios__grupo { padding: 24px; background: var(--v4-paper); }
body.bravo-v3 .servicios__grupo :is(a,h2,h3) { max-width: none; }
body.bravo-v3 .servicios__grupo .servicio-fila { display: block; padding: 22px 0; }
body.bravo-v3 .servicios__grupo .servicio-fila h3 { width: auto; max-width: none; font-size: 1.55rem; line-height: 1.3; }
body.bravo-v3 .servicios__grupo .servicio-fila p { margin-top: 10px; font-size: 1rem; }
body.bravo-v3 .servicios__rotulo { font: 700 .85rem var(--sans); letter-spacing: .1em; text-transform: uppercase; padding-bottom: 16px; }
body.bravo-v3 .servicios__grupo > a { display: block; font-size: 1.35rem; line-height: 1.35; padding-block: 16px; }
body.bravo-v3 .cta .botones > a[href^="tel:"] { background: transparent; color: #fff !important; padding: 10px 0; }
body.bravo-v3 .site-footer { min-height: 0; padding-block: 64px 88px; }
body.bravo-v3 .site-footer__grid { gap: 32px; }
body.bravo-v3 .site-footer__brand img { aspect-ratio: auto; }
body.bravo-v3 .site-footer__social { margin-top: 48px; padding: 32px; align-items: center; gap: 32px; }
body.bravo-v3 .site-footer__social h2 { font-size: clamp(1.65rem,2.6vw,2.6rem); line-height: 1.15; max-width: 25ch; }
body.bravo-v3 .site-footer__red { min-height: 128px; gap: 20px; }
body.bravo-v3 .site-footer__newsletter { padding-inline: 0; }
html body.bravo-v3 .site-footer .site-footer__newsletter { background: transparent; border: 0; border-radius: 0; }
html body.bravo-v3 .site-footer .site-footer__newsletter :is(h2,.eyebrow) { color: var(--v4-text); }
body.bravo-v3 .site-footer__newsletter h2 { font-family: var(--serif); font-weight: 600; }
html[data-tema="oscuro"] body.bravo-v3 #faq,
html[data-tema="oscuro"] body.bravo-v3 .contact-form-section { background: #232e38; color: #f4f7fa; }
html[data-tema="oscuro"] body.bravo-v3 #faq :is(h2,summary,p),
html[data-tema="oscuro"] body.bravo-v3 .contact-form-section :is(h2,p,label) { color: #f4f7fa; }
html[data-tema="oscuro"] body.bravo-v3 #faq .faq-list details { background: #17202a; }
html[data-tema="oscuro"] body.bravo-v3 .site-footer__red,
html[data-tema="oscuro"] body.bravo-v3 .site-footer__red-cabecera :is(strong,span) { color: var(--v4-text); }
html[data-tema="oscuro"] body.bravo-v3 .site-nav > a:not(.site-nav__reserve) { color: #f4f7fa; }
html[data-tema="oscuro"] body.bravo-v3 .contact-right > .button--light { background: #29343e; color: #f4f7fa !important; }
html[data-tema="oscuro"] body.bravo-v3 .contact-right > .button--light span { background: transparent; color: #f4f7fa !important; }
@media (min-width:1101px) {
  body.bravo-v3 .site-nav { align-items: center; }
  body.bravo-v3 .site-nav__resources { width: auto; align-self: center; }
}
@media (max-width:1100px) {
  body.bravo-v3 .site-nav > a, body.bravo-v3 .site-nav__resources-toggle { align-self: stretch; }
  body.bravo-v3 .site-nav__resources-menu { transform: none !important; }
}
@media (max-width:820px) {
  body.bravo-v3 .servicios { grid-template-columns: 1fr; gap: 20px; }
  body.bravo-v3 .site-footer__social { padding: 24px; grid-template-columns: 1fr; }
  body.bravo-v3 .site-footer__social-links { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  body.bravo-v3 .site-footer__red { padding: 16px; min-height: 124px; overflow-wrap: anywhere; }
  body.bravo-v3 .site-footer__red-cabecera strong { font-size: 1.1rem; }
  body.bravo-v3 .site-footer__red-cabecera span { font-size: .8rem; }
  body.bravo-v3 .site-footer__newsletter .button { width: 100%; }
}

/* 2026-09-30 · Navigation owns its palette and geometry, independently of
   legacy page tokens. Compact index on touch; editorial resources on desktop. */
body.bravo-v3 #bravo-header {
  --nav-paper: #fff; --nav-ink: #242424; --nav-muted: #585958;
  --nav-wash: #edf3f8; --nav-blue: #315f87; --nav-focus: #315f87;
  background: var(--nav-paper); color: var(--nav-ink);
  min-height: 68px; padding-inline: 20px; border-radius: 8px;
}
html[data-tema="oscuro"] body.bravo-v3 #bravo-header {
  --nav-paper: #18222b; --nav-ink: #f4f7fa; --nav-muted: #c3cbd3;
  --nav-wash: #293b49; --nav-blue: #a9cdea; --nav-focus: #a9cdea;
  background: var(--nav-paper); color: var(--nav-ink);
}
body.bravo-v3 { --v4-brand-logo-width: 176px; }
/* The header already owns its gutter; legacy inner padding duplicates it
   and squeezes the desktop links immediately above the 1100px breakpoint. */
body.bravo-v3 #bravo-header .site-header__inner { width: 100%; gap: 16px; min-height: 68px; padding-inline: 0; }
body.bravo-v3 #bravo-header .brand { min-width: 0; flex: 0 0 var(--v4-brand-logo-width); }
body.bravo-v3 #bravo-header .brand img { width: 100%; height: auto; object-fit: contain; filter: none; }
html[data-tema="oscuro"] body.bravo-v3 #bravo-header .brand img { filter: brightness(0) invert(1); }
body.bravo-v3 #bravo-header .site-nav { gap: 14px; }
body.bravo-v3 #bravo-header :is(a,button) { color: var(--nav-ink); text-decoration: none; }
body.bravo-v3 #bravo-header :is(a,button):focus-visible { outline: 3px solid var(--nav-focus); outline-offset: 3px; }
body.bravo-v3 #bravo-header .site-nav > a,
body.bravo-v3 #bravo-header .site-nav__resources-toggle {
  min-height: 44px; display: flex; align-items: center; font-size: 13px;
  font-weight: 600; line-height: 1.3; white-space: nowrap; padding: 0;
}
body.bravo-v3 #bravo-header .site-nav__resources-toggle span { color: var(--nav-blue); }
body.bravo-v3 #bravo-header .site-nav a:hover,
body.bravo-v3 #bravo-header .site-nav__resources-toggle:hover { color: var(--nav-blue); background: var(--nav-wash); }
body.bravo-v3 #bravo-header .site-nav a.site-nav__reserve {
  padding: 12px 14px; background: #315f87; color: #fff; border-radius: 4px !important;
}
body.bravo-v3 #bravo-header .site-nav a.site-nav__reserve:hover { background: #173a57; color: #fff; }
body.bravo-v3 #bravo-header .site-tools { gap: 8px; flex-shrink: 0; }
body.bravo-v3 #bravo-header .language { gap: 0; }
body.bravo-v3 #bravo-header .language a { display: grid; place-items: center; min-width: 28px; min-height: 44px; padding: 0; font-size: 11px; }
body.bravo-v3 #bravo-header .language a[aria-current] { color: var(--nav-blue); text-decoration: underline; text-underline-offset: 5px; }
body.bravo-v3 #bravo-header :is(.theme-toggle,.menu-toggle) { width: 44px; height: 44px; flex-shrink: 0; border: 0; border-radius: 4px; background: var(--nav-wash); color: var(--nav-ink); }
body.bravo-v3 #bravo-header .site-nav__resources-menu {
  display: none; position: absolute; inset: 100% auto auto 0; width: 230px;
  padding: 12px; margin: 0; border: 0; border-radius: 0 0 6px 6px;
  background: var(--nav-paper); color: var(--nav-ink); box-shadow: 0 16px 24px #0002;
  transform: none; opacity: 1; visibility: visible; transition: none;
}
body.bravo-v3 #bravo-header .site-nav__resources.is-open > .site-nav__resources-menu { display: grid; }
body.bravo-v3 #bravo-header .site-nav__resources-menu a { padding: 12px; min-height: 44px; font-size: 14px; white-space: normal; }
body.bravo-v3 #bravo-header .site-nav__resources:has(.site-nav__mega) { position: static; }
body.bravo-v3 #bravo-header .site-nav__mega {
  inset: calc(100% - 1px) 0 auto auto; width: min(800px,100%);
  grid-template-columns: 1.1fr 1fr 1fr; gap: 24px; padding: 28px;
}
body.bravo-v3 #bravo-header .nav-editorial p { margin: 0 0 16px; color: var(--nav-muted); font: 500 20px/1.4 var(--serif); }
body.bravo-v3 #bravo-header .nav-editorial a { padding: 0; font-weight: 600; color: var(--nav-blue); }
body.bravo-v3 #bravo-header .nav-destinations { display: grid; align-content: start; }
body.bravo-v3 #bravo-header .nav-destinations a { display: flex; gap: 12px; align-items: center; padding: 14px 8px; }
body.bravo-v3 #bravo-header .nav-destinations a span:first-child { font-size: 11px; color: var(--nav-muted); }
body.bravo-v3 #bravo-header .nav-destinations a span:last-child { margin-left: auto; }
body.bravo-v3 #bravo-header a.nav-feature { display: flex; flex-direction: column; gap: 12px; align-items: start; padding: 20px; background: #315f87; color: #fff; border-radius: 3px; }
body.bravo-v3 #bravo-header a.nav-feature:hover { background: #173a57; color: #fff; }
body.bravo-v3 #bravo-header .nav-feature > span:first-child { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
body.bravo-v3 #bravo-header .nav-feature strong { font: 500 21px/1.3 var(--serif); }
@media (max-width: 1100px) {
  body.bravo-v3 { --v4-brand-logo-width: 190px; }
  body.bravo-v3 #bravo-header { padding-inline: 12px; }
  body.bravo-v3 #bravo-header .site-header__inner { gap: 8px; }
  body.bravo-v3 #bravo-header .brand { flex: 0 1 var(--v4-brand-logo-width); margin-right: auto; }
  body.bravo-v3 #bravo-header .site-tools { order: 2; }
  body.bravo-v3 #bravo-header .menu-toggle { order: 3; margin: 0; display: block; }
  body.bravo-v3 #bravo-header .site-nav {
    position: absolute; inset: calc(100% + 8px) 0 auto auto;
    width: min(420px,100%); height: auto; min-height: 0; max-height: calc(100dvh - 110px);
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    margin: 0; padding: 12px 20px; border-radius: 6px; border: 0;
    background: var(--nav-paper); color: var(--nav-ink); overflow-y: auto;
    overscroll-behavior: contain; box-shadow: 0 16px 32px #0003;
    visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(-6px);
  }
  body.bravo-v3 #bravo-header .site-nav.is-open { visibility: visible; opacity: 1; pointer-events: auto; transform: none; }
  body.bravo-v3 #bravo-header .site-nav > a,
  body.bravo-v3 #bravo-header .site-nav__resources-toggle { width: 100%; font-size: 16px; padding: 10px 0; justify-content: space-between; }
  body.bravo-v3 #bravo-header .site-nav > a:first-child { font-family: var(--serif); font-size: 21px; color: var(--nav-blue); }
  body.bravo-v3 #bravo-header .site-nav__resources { display: block; width: 100%; }
  body.bravo-v3 #bravo-header .site-nav__resources-menu { position: static; width: 100%; padding: 4px 12px; background: var(--nav-wash); box-shadow: none; border-radius: 3px; }
  body.bravo-v3 #bravo-header .site-nav__mega { grid-template-columns: 1fr; gap: 8px; padding: 14px; }
  body.bravo-v3 #bravo-header .nav-editorial p { display: none; }
  body.bravo-v3 #bravo-header .nav-editorial a { display: flex; align-items: center; min-height: 44px; }
  body.bravo-v3 #bravo-header .nav-destinations a { padding: 10px 0; }
  body.bravo-v3 #bravo-header a.nav-feature { gap: 8px; padding: 14px; }
  body.bravo-v3 #bravo-header .nav-feature strong { font-size: 19px; }
  body.bravo-v3 #bravo-header .nav-feature > span:last-child { display: none; }
  body.bravo-v3 #bravo-header .site-nav a.site-nav__reserve { margin-top: 10px; justify-content: center; font-size: 15px; }
  body.bravo-v3 #bravo-header .language { display: flex; gap: 8px; margin-top: 8px; }
  body.bravo-v3 #bravo-header .language a { min-width: 44px; font-size: 12px; }
}
@media (max-width: 360px) {
  body.bravo-v3 { --v4-brand-logo-width: 156px; }
  body.bravo-v3 #bravo-header .brand { flex-basis: var(--v4-brand-logo-width); }
  body.bravo-v3 #bravo-header .site-header__inner { gap: 6px; }
  body.bravo-v3 #bravo-header .site-nav { padding-inline: 16px; }
}

/* Shared editorial rhythm and intermediate widths · 2026-09-30. */
body.bravo-v3 .site-footer__grid > *,
body.bravo-v3 .site-footer__newsletter > *,
body.bravo-v3 .booking > * { min-width: 0; }
body.bravo-v3 .site-footer__red { min-height: 96px; gap: 12px; border-radius: 3px; box-shadow: none; }
body.bravo-v3 .site-footer__red:is(:hover,:focus-within) { transform: none; }
body.bravo-v3 .site-footer__newsletter .button { white-space: normal; text-align: center; }
body.bravo-v3 .site-footer__legal { flex-wrap: wrap; row-gap: 12px; }
@media (min-width: 821px) and (max-width: 1100px) {
  body.bravo-v3 .site-footer__grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body.bravo-v3 .site-footer__newsletter { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  body.bravo-v3 .cta { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 540px) {
  body.bravo-v3 .site-footer__social { padding-inline: 0; }
  body.bravo-v3 .site-footer__social-links { grid-template-columns: minmax(0,1fr); }
  body.bravo-v3 .site-footer__red { min-height: 76px; }
}

/* 2026-09-30 · Javier reference: quieter type, measured columns and compact
   supporting sections. Keep this shared composition after legacy adapters. */
html body.bravo-v3 :is(.hero,.section,.areas-v3-hero) :is(h1,h2,h3) {
  font-weight: 450;
  letter-spacing: -.035em;
}
html body.bravo-v3 main#contenido > .hero:has(.hero__grid) {
  padding-block: 36px 48px;
  border-bottom: 1px solid var(--line);
}
html body.bravo-v3 .hero__grid {
  grid-template-columns: minmax(0,1.3fr) minmax(0,.85fr);
  gap: clamp(32px,5vw,72px);
  align-items: center;
}
html body.bravo-v3 .hero__copy h1 {
  width: 100%; max-width: 24ch;
  font-size: clamp(2.5rem,4.2vw,3.85rem); line-height: 1.12;
  text-wrap: pretty;
}
html body.bravo-v3 .hero__copy .lead { font-size: 1.125rem; line-height: 1.65; max-width: 52ch; }
html[data-tema] body.bravo-v3 .hero__actions .button--light {
  background: #edf3f7 !important; color: #173a57 !important; border-color: #cbd5de;
}
html[data-tema] body.bravo-v3 .hero__actions .button--light:is(:hover,:focus-visible) {
  background: #d9e6ef !important; color: #173a57 !important;
}
html body.bravo-v3 .portrait {
  min-height: 0; height: clamp(380px,35vw,480px);
  border-top: 2px solid #568cbe; background: var(--v4-surface);
}
html body.bravo-v3 .portrait img { object-fit: contain; filter: none; }
html body.bravo-v3 .hero__meta { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); gap: 20px; }
html body.bravo-v3 .section { padding-block: clamp(44px,5vw,72px); }
html body.bravo-v3 .section-head { max-width: 800px; margin-bottom: 30px; }
html body.bravo-v3 .section-head h2 { max-width: 28ch; font-size: clamp(1.9rem,3vw,2.75rem); line-height: 1.17; }
html body.bravo-v3 .card { padding: 24px; border: 1px solid var(--line); box-shadow: none; border-radius: 3px; }
html body.bravo-v3 .card__number { margin-bottom: 22px; background: transparent; }
html body.bravo-v3 .card h3 { font-size: clamp(1.2rem,1.6vw,1.5rem); line-height: 1.3; }
html body.bravo-v3 .card a { margin-top: auto; padding-top: 20px; }
html body.bravo-v3 .card { display: flex; flex-direction: column; }
html body.bravo-v3 #faq .faq-list details { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; background: transparent; }
html body.bravo-v3 #faq .faq-list summary { padding: 22px 0; font: 600 1.05rem/1.45 var(--sans); }
html body.bravo-v3 #faq .faq-list details > p { padding-inline: 0; }
html body.bravo-v3 #bravo-header .site-nav { align-items: center; }
html body.bravo-v3 #bravo-header .site-nav > :is(a,div) { margin-block: 0; align-self: center; }
html body.bravo-v3 #bravo-header .site-nav__resources-toggle { margin: 0; }
html body.bravo-v3 #bravo-header .brand img,
html body.bravo-v3 .site-footer__brand img { height: auto; aspect-ratio: auto; object-fit: contain; }
html body.bravo-v3 .site-footer__brand img { width: 230px; max-width: 100%; }
html body.bravo-v3 .site-footer { padding-block: 48px 88px; min-height: 0; }
html body.bravo-v3 .site-footer .site-footer__social {
  min-height: 0; margin-top: 36px; padding: 28px;
  grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); gap: 28px;
}
html body.bravo-v3 .site-footer .site-footer__social h2 {
  font: 450 clamp(1.45rem,2vw,2rem)/1.25 var(--serif); max-width: 30ch;
  text-transform: none; letter-spacing: -.02em;
}
html body.bravo-v3 .site-footer .site-footer__red { min-height: 90px; padding: 18px; gap: 10px; }
html[data-tema] body.bravo-v3 .site-footer .site-footer__red,
html[data-tema] body.bravo-v3 .site-footer .site-footer__red-cabecera :is(strong,span) { color: #17202a; }
html[data-tema] body.bravo-v3 .site-footer .site-footer__red { background: #f7f8f9; }
html body.bravo-v3 .site-footer .site-footer__newsletter {
  min-height: 0; margin-block: 0; padding-block: 32px;
  grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 24px;
  border-bottom: 1px solid var(--line);
}
html body.bravo-v3 .site-footer .site-footer__newsletter h2 {
  max-width: 30ch; font: 450 clamp(1.5rem,2.3vw,2.1rem)/1.2 var(--serif);
  letter-spacing: -.025em; text-transform: none;
  white-space: normal; overflow-wrap: anywhere;
}
html body.bravo-v3 .site-footer .site-footer__newsletter > * { min-width: 0; }
html body.bravo-v3 .site-footer .site-footer__newsletter .button { white-space: normal; max-width: 100%; }
html body.bravo-v3 .site-footer .site-footer__newsletter p { margin: 0; }
html body.bravo-v3 .site-footer .site-footer__newsletter .eyebrow { margin-bottom: 10px; }
html body.bravo-v3.areas-v3-page > .areas-v3-hero { padding-block: 36px; border-bottom: 1px solid var(--line); }
html body.bravo-v3.areas-v3-page .areas-v3-hero h1 { max-width: 25ch; font-size: clamp(2.1rem,3.6vw,3.4rem); }
html body.bravo-v3.areas-v3-page #contenido > section:not(.cta) {
  padding: clamp(24px,3vw,40px); margin-block: 24px; border-radius: 3px;
  border: 1px solid var(--line); box-shadow: none;
}
html body.bravo-v3.areas-v3-page .areas-v3-contextual { padding-block: 24px; min-height: 0; }
html body.bravo-v3 .cta a[href^="tel:"] { color: #fff !important; background: transparent; }
html body.bravo-v3 .cta a[href^="tel:"] :is(span,strong,svg) { color: inherit !important; }
html body.bravo-v3 .bravo-contact {
  display: flex; flex-direction: row; align-items: stretch; gap: 0;
  background: var(--v4-paper); border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 4px 16px #17202a12; overflow: hidden;
}
html body.bravo-v3 .bravo-contact > a {
  display: inline-flex; flex-direction: row; gap: 8px;
  width: auto; height: auto; min-height: 46px; padding: 10px 14px;
  border-radius: 0; box-shadow: none; font-size: .8rem;
}
html body.bravo-v3 .bravo-contact > a > span:not(.bravo-contact__link-icon) {
  position: static; width: auto; height: auto; clip-path: none; overflow: visible;
}
html body.bravo-v3 .bravo-contact > .bravo-contact__book { background: #315f87; color: #fff !important; }
/* Align the department templates with the same editorial measure as HOME.
   The :has scope includes the older company templates, but not legal/articles. */
html body.bravo-v3:is(.areas-v3-page,:has(> header.hero):has(main .areas)) {
  --department-line: #cbd5de;
  --department-surface: #edf3f7;
  --department-ink: #17202a;
  --department-link: #315f87;
}
html[data-tema="oscuro"] body.bravo-v3:is(.areas-v3-page,:has(> header.hero):has(main .areas)) {
  --department-line: #445360;
  --department-surface: #243440;
  --department-ink: #f4f7fa;
  --department-link: #b5d7f1;
}
html.v4-legacy body.bravo-v3:has(main .areas) > header.hero {
  padding-block: 32px; border-bottom: 1px solid var(--department-line);
}
html.v4-legacy body.bravo-v3:has(main .areas) > header.hero :is(.tag,h1,p) {
  padding: 0; margin-left: 0; transform: none;
}
html.v4-legacy body.bravo-v3:has(main .areas) > header.hero h1 {
  max-width: 28ch; font-size: clamp(2.1rem,3.6vw,3.4rem); font-weight: 450;
}
html body.bravo-v3:has(main .areas) > header.hero .hero__botones {
  display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 12px;
  margin: 24px 0 0; padding: 0;
}
html body.bravo-v3:is(.areas-v3-page,:has(> header.hero):has(main .areas)) > :is(.miga,.areas-v3-index) {
  width: min(1180px,calc(100% - 2 * var(--pad))); max-width: none;
  margin: 0 auto; padding: 16px 0; height: auto;
}
html body.bravo-v3.areas-v3-page > .areas-v3-index { gap: 8px 20px; border-bottom: 1px solid var(--department-line); }
html body.bravo-v3:is(.areas-v3-page,:has(> header.hero):has(main .areas)) > .miga { color: var(--department-ink); }
html body.bravo-v3:is(.areas-v3-page,:has(> header.hero):has(main .areas)) > .miga a { color: var(--department-link); }
html body.bravo-v3.areas-v3-page > .areas-v3-index a { min-height: 44px; align-items: center; display: inline-flex; }
html body.bravo-v3:is(.areas-v3-page,:has(> header.hero):has(main .areas)) > main#contenido { padding-top: 16px; }
html body.bravo-v3:is(.areas-v3-page,:has(> header.hero):has(main .areas)) > main#contenido > section:not(.cta) {
  width: min(1180px,calc(100% - 2 * var(--pad))); max-width: none;
  margin: 0 auto; padding: 36px 0; border: 0;
  border-bottom: 1px solid var(--department-line); border-radius: 0; box-shadow: none;
  background: transparent;
}
html body.bravo-v3:is(.areas-v3-page,:has(> header.hero):has(main .areas)) #contenido > section:not(.cta) > :is(h2,p) {
  max-width: 72ch; color: var(--department-ink);
}
html body.bravo-v3:is(.areas-v3-page,:has(> header.hero):has(main .areas)) #contenido > section > h2 {
  font: 450 clamp(1.65rem,2.5vw,2.3rem)/1.2 var(--serif); margin-bottom: 22px;
}
html body.bravo-v3:is(.areas-v3-page,:has(> header.hero):has(main .areas)) #contenido .areas {
  display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px;
  align-items: start;
}
html body.bravo-v3:is(.areas-v3-page,:has(> header.hero):has(main .areas)) #contenido .area {
  padding: 22px; margin: 0; min-width: 0; background: var(--department-surface);
  border: 0; border-radius: 3px; box-shadow: none; color: var(--department-ink);
}
html body.bravo-v3:is(.areas-v3-page,:has(> header.hero):has(main .areas)) #contenido .area :is(h3,p,li,.area__title,.area__summary) { color: var(--department-ink); }
html body.bravo-v3:is(.areas-v3-page,:has(> header.hero):has(main .areas)) #contenido .area a { color: var(--department-link); }
html body.bravo-v3:is(.areas-v3-page,:has(> header.hero):has(main .areas)) #contenido > section:not(.cta) a:not(.btn),
html body.bravo-v3.areas-v3-page .areas-v3-hero__eyebrow { color: var(--department-link); }
html body.bravo-v3.areas-v3-page #contenido .area summary { min-height: 44px; padding: 0; }
html body.bravo-v3.areas-v3-page .areas-v3-contextual { width: min(1180px,calc(100% - 2 * var(--pad))); }
html body.bravo-v3 .penal-fase { border-top: 2px solid var(--department-line) !important; padding-inline: 16px; }
html body.bravo-v3 .penal-fase.is-active { border-top-color: var(--department-link) !important; background: var(--department-surface); }
html body.bravo-v3 #bravo-header .site-tools .language a { min-width: 32px; }
/* Mega menus use spacing and surface changes, without decorative top rules. */
html body.bravo-v3 #bravo-header .site-nav__mega { width: min(900px,100%); border-top: 0; }
html body.bravo-v3 #bravo-header .site-nav__resources-toggle { gap: 8px; }
html body.bravo-v3 #bravo-header .site-nav__resources-toggle > span { flex: 0 0 auto; }
html body.bravo-v3 .bravo-contact > a:focus-visible { outline-offset: -4px; }

/* Area closing CTA: copy and actions share the available desktop width. */
html body.bravo-v3.areas-v3-page #contenido > #reserva.cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr);
  grid-template-rows: auto auto;
  column-gap: clamp(24px, 4vw, 48px);
  row-gap: 12px;
  align-items: center;
  padding: 28px 32px !important;
  text-align: left;
}
html body.bravo-v3.areas-v3-page #reserva.cta > h2 {
  grid-column: 1;
  margin: 0;
  padding: 0;
  border: 0;
  align-self: end;
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  line-height: 1.2;
}
html body.bravo-v3.areas-v3-page #reserva.cta > p {
  grid-column: 1;
  margin: 0;
  align-self: start;
  font-size: .95rem;
  line-height: 1.55;
}
html body.bravo-v3.areas-v3-page #reserva.cta > .botones {
  grid-column: 2;
  grid-row: 1 / 3;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
}
html body.bravo-v3.areas-v3-page #reserva.cta .botones > a {
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  white-space: normal;
  font-size: .85rem;
  line-height: 1.4;
}
html body.bravo-v3.areas-v3-page #reserva.cta .botones > a[href^="tel:"] {
  grid-column: auto;
  padding: 8px 0;
  border: 0;
}
@media (max-width: 820px) {
  html body.bravo-v3.areas-v3-page #contenido > #reserva.cta {
    grid-template-columns: minmax(0, 1fr);
    padding: 24px 20px !important;
    gap: 12px;
  }
  html body.bravo-v3.areas-v3-page #reserva.cta > .botones {
    grid-column: 1;
    grid-row: auto;
    margin-top: 8px;
  }
}
/* 2026-10-01 · One footer contract across every V4 page.
   Some legacy routes load v4-legacy.css after this shared sheet; its older
   footer rules must not change the shell's spacing or colour by route. */
html:root body.bravo-v3 footer[data-javier-shell="footer"] {
  display: block;
  position: static;
  width: 100%;
  max-width: none;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0;
  border: 0;
  background: var(--v4-surface);
  text-align: left;
}
html:root body.bravo-v3 footer[data-javier-shell="footer"] .site-footer {
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 40px 0 calc(88px + env(safe-area-inset-bottom));
  background: var(--v4-surface);
  color: var(--v4-text);
}
html:root body.bravo-v3 footer[data-javier-shell="footer"] .site-footer__grid {
  grid-template-columns: minmax(220px, 1.2fr) repeat(3, minmax(0, 1fr));
  gap: 28px;
  align-items: start;
}
html:root body.bravo-v3 footer[data-javier-shell="footer"] .site-footer__brand p {
  max-width: 32ch;
  margin: 20px 0 0;
  font-size: .9rem;
  line-height: 1.6;
}
html:root body.bravo-v3 footer[data-javier-shell="footer"] .site-footer__brand img {
  display: block;
  width: min(var(--v4-brand-logo-width), 100%);
  max-width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: left center;
}
html:root body.bravo-v3 footer[data-javier-shell="footer"] .site-footer__grid h2 {
  color: var(--v4-link);
}
html:root body.bravo-v3 footer[data-javier-shell="footer"] .site-footer__grid :is(p, li, a) {
  color: var(--v4-text);
}
html:root body.bravo-v3 footer[data-javier-shell="footer"] .site-footer__social {
  min-height: 0;
  margin: 32px 0 0;
  padding: 24px;
  background: #173a57;
}
html:root body.bravo-v3 footer[data-javier-shell="footer"] .site-footer__social :is(.eyebrow, h2) {
  color: #fff;
}
html:root body.bravo-v3 footer[data-javier-shell="footer"] .site-footer__red {
  background: #f7f8f9;
  color: #17202a;
}
html:root body.bravo-v3 footer[data-javier-shell="footer"] .site-footer__red :is(strong, span) {
  color: #17202a;
}
html:root body.bravo-v3 footer[data-javier-shell="footer"] .site-footer__newsletter {
  min-height: 0;
  margin: 0;
  padding-block: 24px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}
html:root body.bravo-v3 footer[data-javier-shell="footer"] .site-footer__newsletter h2 {
  max-width: 30ch;
  font: 450 clamp(1.5rem, 2.3vw, 2.1rem)/1.2 var(--serif);
  letter-spacing: -.025em;
  text-transform: none;
}
html:root body.bravo-v3 footer[data-javier-shell="footer"] .site-footer__newsletter .button {
  color: #fff;
  background: #315f87;
}
html[data-tema="oscuro"]:root body.bravo-v3 footer[data-javier-shell="footer"] .site-footer {
  background: #202830;
  color: #f4f7fa;
}
html[data-tema="oscuro"]:root body.bravo-v3 footer[data-javier-shell="footer"] .site-footer__grid :is(p, li, a) {
  color: #e3ebf2;
}
html[data-tema="oscuro"]:root body.bravo-v3 footer[data-javier-shell="footer"] .site-footer__grid h2 {
  color: #b8daf4;
}
html[data-tema="oscuro"]:root body.bravo-v3 footer[data-javier-shell="footer"] .site-footer__copy {
  color: #d0d9e1;
}
@media (max-width: 1100px) {
  html:root body.bravo-v3 footer[data-javier-shell="footer"] .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
  html:root body.bravo-v3 footer[data-javier-shell="footer"] .site-footer__social,
  html:root body.bravo-v3 footer[data-javier-shell="footer"] .site-footer__newsletter {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
}
@media (max-width: 520px) {
  html:root body.bravo-v3 footer[data-javier-shell="footer"] .site-footer__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* A fixed-size chevron avoids the baseline shift of the rotating text glyph. */
html body.bravo-v3 #bravo-header .site-nav__resources-toggle > span {
  display: inline-block;
  width: 7px;
  height: 7px;
  font-size: 0;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  margin-inline: 4px;
}
html body.bravo-v3 #bravo-header .site-nav__resources.is-open .site-nav__resources-toggle > span {
  transform: translateY(2px) rotate(225deg);
}
html body.bravo-v3 #bravo-header .site-nav__resources-toggle:is(:hover, [aria-expanded="true"]) {
  background: transparent;
  color: var(--nav-blue);
}
html body.bravo-v3 .bravo-contact__clara-mark rect { stroke: none; }
html body.bravo-v3 .bravo-contact__clara-mark rect:nth-child(odd) { fill: #a9824f; }
html body.bravo-v3 .bravo-contact__clara-mark rect:nth-child(2) { fill: #5b84b1; }
html body.bravo-v3 .bravo-contact > a[href^="tel:"] .bravo-contact__svg { fill: none; stroke: currentColor; }
html body.bravo-v3 .bravo-contact > a[href^="https://api.whatsapp.com"] .bravo-contact__svg { fill: currentColor; stroke: none; }
html body.bravo-v3 .bravo-contact__link-icon { display: grid; flex: 0 0 22px; width: 22px; height: 22px; place-items: center; }
html body.bravo-v3 .bravo-contact__link-icon .bravo-contact__svg { width: 22px; height: 22px; stroke-width: 1.9; }
@media (max-width: 1100px) {
  html body.bravo-v3 #bravo-header .site-nav { align-items: stretch; }
  html body.bravo-v3 #bravo-header .site-nav > :is(a,div) { align-self: stretch; }
}
@media (max-width: 820px) {
  html body.bravo-v3:is(.areas-v3-page,:has(> header.hero):has(main .areas)) #contenido .areas { grid-template-columns: minmax(0,1fr); }
  html body.bravo-v3:is(.areas-v3-page,:has(> header.hero):has(main .areas)) > main#contenido > section:not(.cta) { padding-block: 28px; }
  html body.bravo-v3 .bravo-contact { left: 12px; right: 12px; bottom: max(8px,env(safe-area-inset-bottom)); }
  html body.bravo-v3 .bravo-contact > a { flex: 1; min-width: 0; justify-content: center; padding: 10px 6px; gap: 5px; }
  html body.bravo-v3 .bravo-contact { grid-template-columns: repeat(4, minmax(0,1fr)); }
  html body.bravo-v3 .bravo-contact > a > .bravo-contact__link-icon { display: grid; width: 19px; height: 19px; }
  html body.bravo-v3 .bravo-contact > a > .bravo-contact__link-icon .bravo-contact__svg { width: 19px; height: 19px; stroke-width: 2; }
  html body.bravo-v3 .bravo-contact > a > span:not(.bravo-contact__link-icon) { font-size: clamp(.65rem, 3vw, .76rem); white-space: nowrap; }
  html body.bravo-v3 .hero__grid { grid-template-columns: minmax(0,1fr); gap: 28px; }
  html body.bravo-v3 .hero__copy h1 { font-size: clamp(2.2rem,7.8vw,3.2rem); }
  html body.bravo-v3 .portrait { height: 380px; width: min(100%,460px); margin-inline: auto; }
  html body.bravo-v3 .site-footer .site-footer__social,
  html body.bravo-v3 .site-footer .site-footer__newsletter { grid-template-columns: minmax(0,1fr); gap: 20px; }
  html body.bravo-v3 .site-footer .site-footer__social { padding: 22px; }
  html body.bravo-v3 main#contenido > .hero:has(.hero__grid) { padding-top: 24px; }
}
/* Keep the fixed contact actions from covering the footer links and newsletter. */
html body.bravo-v3 .bravo-contact {
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
html body.bravo-v3 .bravo-contact.bravo-contact--near-footer {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(calc(100% + 24px));
}
@media (prefers-reduced-motion: reduce) {
  html body.bravo-v3 .bravo-contact { transition: none; }
}

/* Newsletter: non-modal floating card, above the shared fixed contact dock. */
html body.bravo-v3 .site-footer__newsletter > p { margin: 0; }
html body.bravo-v3 .site-footer__newsletter > p > [data-newsletter-open] {
  min-height: 48px; max-width: 100%; padding: 12px 18px;
  border: 0; border-radius: 4px; background: #315f87; color: #fff;
  font: 650 .95rem/1.3 var(--v4-sans); cursor: pointer;
}
html body.bravo-v3 .site-footer__newsletter > p > [data-newsletter-open]:is(:hover,:focus-visible) { background: #173a57; }
html body.bravo-v3 .site-footer__newsletter-panel[hidden] { display: none !important; }
html body.bravo-v3 .site-footer__newsletter-panel {
  position: fixed; z-index: 120;
  right: max(18px, env(safe-area-inset-right));
  bottom: calc(88px + env(safe-area-inset-bottom));
  width: min(440px, calc(100% - 36px)); min-width: 0;
  max-height: calc(100dvh - 188px); overflow-y: auto; overscroll-behavior: contain;
  padding: 24px;
  border: 1px solid var(--line); border-radius: var(--v4-radius-card);
  background: var(--v4-paper); box-shadow: var(--v4-shadow-float);
}
html body.bravo-v3 .site-footer .newsletter-form__title {
  margin: 0 0 20px; color: var(--v4-text);
  font: 500 1.35rem/1.3 var(--serif); letter-spacing: -.02em;
}
html body.bravo-v3 .site-footer__newsletter-panel .newsletter-form {
  display: grid; grid-template-columns: minmax(0,1fr);
  align-items: start; gap: 18px;
}
html body.bravo-v3 .newsletter-form__email { display: grid; gap: 8px; min-width: 0; color: var(--v4-text); font-size: .9rem; font-weight: 650; }
html body.bravo-v3 .newsletter-form__email input {
  width: 100%; min-width: 0; min-height: 46px; padding: 10px 12px;
  border: 1px solid #8b9aaa; border-radius: 3px; background: var(--v4-surface);
  color: var(--v4-text); font: 400 1rem/1.4 var(--v4-sans);
}
html body.bravo-v3 .newsletter-form__consent { display: flex; align-items: flex-start; gap: 10px; min-width: 0; color: var(--v4-text); font-size: .9rem; line-height: 1.5; }
html body.bravo-v3 .newsletter-form__consent input {
  width: 20px; height: 20px; min-height: 20px; flex: 0 0 20px;
  padding: 0; margin: 1px 0 0; accent-color: #315f87;
}
html body.bravo-v3 .newsletter-form__consent span { min-width: 0; }
html body.bravo-v3 .newsletter-form__consent a { color: var(--v4-link); text-underline-offset: 3px; }
html body.bravo-v3 .newsletter-form__actions {
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px;
  align-items: stretch; padding-top: 2px;
}
html body.bravo-v3 .site-footer .newsletter-form__actions > button {
  min-height: 46px; width: auto; padding: 10px 16px;
  font: 650 .95rem/1.3 var(--v4-sans);
}
html body.bravo-v3 .newsletter-form__status { grid-column: 1 / -1; margin: 0; color: var(--v4-text); font-size: .9rem; line-height: 1.5; }
html body.bravo-v3 .newsletter-form__status:empty { display: none; }
html body.bravo-v3 .site-footer .newsletter-form__actions .newsletter-form__close {
  border: 1px solid var(--line); border-radius: 3px;
  background: transparent; color: var(--v4-text); font: 600 .9rem var(--v4-sans); cursor: pointer;
}
html[data-tema="oscuro"] body.bravo-v3 .site-footer__newsletter-panel { background: #202830; }
@media (max-width: 520px) {
  html body.bravo-v3 .site-footer__newsletter-panel {
    right: max(12px, env(safe-area-inset-right)); width: calc(100% - 24px);
    padding: 20px; bottom: calc(80px + env(safe-area-inset-bottom));
    max-height: calc(100dvh - 176px);
  }
  html body.bravo-v3 .newsletter-form__actions { gap: 10px; }
}

/* Contact only: readable fields, compact desktop rows and clearance for the fixed dock.
   Short/mobile viewports use document scrolling; never constrain the form's height. */
html body.bravo-v3.javier-contact-page .contact-form-section {
  min-width: 0; height: auto; min-height: 0; overflow: visible;
  padding: clamp(20px, 2.4vw, 32px);
  scroll-margin-block: 110px 160px;
}
html body.bravo-v3.javier-contact-page .contact-form-section .eyebrow { margin-bottom: 8px; }
html body.bravo-v3.javier-contact-page .contact-form-section h2 {
  font-size: clamp(1.8rem, 2.4vw, 2.25rem); line-height: 1.2; margin-bottom: 12px;
}
html body.bravo-v3.javier-contact-page .contact-form-section .lead { margin-bottom: 12px; }
html body.bravo-v3.javier-contact-page .contact-funnel { margin-top: 12px; }
html body.bravo-v3.javier-contact-page .contact-form {
  grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px 24px; margin-top: 20px;
}
html body.bravo-v3.javier-contact-page .contact-form label { min-width: 0; }
html body.bravo-v3.javier-contact-page .contact-form :is(input,select,textarea) {
  min-width: 0; max-width: 100%; scroll-margin-block: 120px 160px;
}
html body.bravo-v3.javier-contact-page .contact-form :is(.is-wide,.contact-form__consent,.contact-form__actions) { grid-column: 1 / -1; }
html body.bravo-v3.javier-contact-page .contact-form .contact-form__consent {
  max-width: 64ch; gap: 12px; scroll-margin-block: 120px 160px;
}
html body.bravo-v3.javier-contact-page .contact-form .contact-form__consent input { flex-shrink: 0; }
html body.bravo-v3.javier-contact-page .contact-form__actions {
  min-width: 0; flex-wrap: wrap; gap: 12px;
  padding-bottom: calc(88px + env(safe-area-inset-bottom)); scroll-margin-block: 120px 160px;
}
@media (min-width: 1101px) {
  html body.bravo-v3.javier-contact-page .contact-form { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 699px) {
  html body.bravo-v3.javier-contact-page .contact-form { grid-template-columns: minmax(0,1fr); gap: 16px; }
  html body.bravo-v3.javier-contact-page .contact-form__actions .button { width: 100%; white-space: normal; }
}

/* Reservation entry card only: non-modal dialog; existing booking form remains the destination. */
html body.bravo-v3 .reservation-card {
  position: fixed; inset: auto max(18px, env(safe-area-inset-right)) calc(88px + env(safe-area-inset-bottom)) auto;
  z-index: 120; margin: 0; width: min(460px, calc(100% - 36px)); max-width: none;
  max-height: calc(100dvh - 188px); overflow-y: auto; overscroll-behavior: contain;
  padding: 24px; border: 1px solid var(--line); border-radius: var(--v4-radius-card);
  background: var(--v4-paper); color: var(--v4-text); box-shadow: var(--v4-shadow-float);
}
html body.bravo-v3 .reservation-card:not([open]) { display: none; }
html body.bravo-v3 .reservation-card__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
html body.bravo-v3 .reservation-card h2 { margin: 0; font: 500 1.5rem/1.25 var(--serif); color: var(--v4-text); }
html body.bravo-v3 .reservation-card > p { margin: 16px 0 20px; font-size: 1rem; line-height: 1.55; }
html body.bravo-v3 .reservation-card__actions { display: grid; gap: 12px; }
html body.bravo-v3 .reservation-card__actions > * { min-height: 46px; white-space: normal; text-align: center; }
html body.bravo-v3 .reservation-card :is(.reservation-card__close,.reservation-card__clara) {
  min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--v4-radius-control);
  background: var(--v4-surface); color: var(--v4-text); font: 600 .95rem/1.3 var(--v4-sans); cursor: pointer;
}
html body.bravo-v3 .reservation-card__close { flex-shrink: 0; }
@media (max-width: 520px) {
  html body.bravo-v3 .reservation-card {
    right: max(12px, env(safe-area-inset-right)); bottom: calc(80px + env(safe-area-inset-bottom));
    width: calc(100% - 24px); max-height: calc(100dvh - 176px); padding: 20px;
  }
}
/* V4 firm and civil/employment menus reuse the Resources editorial system. */
html body.bravo-v3 .directions-card__maps { display: grid; gap: 8px; margin-bottom: 20px; }
html body.bravo-v3 .directions-card__maps a {
  display: flex; align-items: center; min-height: 44px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--v4-radius-control); color: var(--v4-link);
}
html body.bravo-v3 #bravo-header .site-nav__firm-menu { grid-template-columns: 1fr 1fr; width: min(900px,100%); }
html body.bravo-v3 #bravo-header .nav-service { align-items: flex-start; }
html body.bravo-v3 #bravo-header .nav-service > div { min-width: 0; }
html body.bravo-v3 #bravo-header .nav-service strong { display: block; font-size: 1rem; line-height: 1.35; }
html body.bravo-v3 #bravo-header .nav-service small {
  display: block; margin-top: 6px; color: var(--nav-muted); font-size: .85rem; line-height: 1.5;
}
html body.bravo-v3 #bravo-header .nav-feature small { font-size: .9rem; line-height: 1.5; }
@media (max-width: 1100px) {
  html body.bravo-v3 #bravo-header .site-nav__firm-menu { grid-template-columns: minmax(0,1fr); width: 100%; }
  html body.bravo-v3 #bravo-header :is(.site-nav__civil,.site-nav__firm) .nav-editorial p {
    display: block; margin-bottom: 8px; font: 400 .95rem/1.5 var(--sans);
  }
}

/* V4 dock: four independent targets, labels visible; measured clearance also protects cards/forms. */
html body.bravo-v3 .bravo-contact {
  display: grid; grid-template-columns: repeat(4, max-content); align-items: stretch;
  width: max-content; max-width: calc(100% - 36px); gap: 0;
}
html body.bravo-v3 .bravo-contact > a {
  position: static; display: inline-flex; width: auto; max-width: none; height: auto;
  min-width: 0; min-height: 46px; padding: 10px 14px; gap: 8px; justify-content: center;
  border-radius: 0; box-shadow: none;
}
html body.bravo-v3 .bravo-contact > a > span:not(.bravo-contact__link-icon) {
  position: static; display: block; width: auto; height: auto; margin: 0; padding: 0;
  overflow: visible; clip-path: none; font-size: .85rem; white-space: nowrap;
}
html body.bravo-v3 .bravo-clara-teaser {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border-bottom: 1px solid var(--line); background: var(--v4-surface); color: var(--v4-text);
}
html body.bravo-v3 .bravo-clara-teaser[hidden] { display: none; }
html body.bravo-v3 .bravo-clara-teaser button { background: transparent; color: inherit; border: 0; cursor: pointer; }
html body.bravo-v3 .bravo-clara-teaser__open { flex: 1; min-width: 0; min-height: 44px; padding: 0; text-align: left; }
html body.bravo-v3 .bravo-clara-teaser__open :is(strong,span) { display: block; }
html body.bravo-v3 .bravo-clara-teaser__open strong { font-size: 1rem; line-height: 1.35; }
html body.bravo-v3 .bravo-clara-teaser__open span { font-size: .85rem; line-height: 1.4; color: var(--v4-muted); }
html body.bravo-v3 .bravo-clara-teaser__dismiss { flex: 0 0 44px; min-height: 44px; font-size: 1.5rem; }
html body.bravo-v3 .bravo-contact--form-visible .bravo-clara-teaser,
html body.bravo-v3:has([data-contact-form]:focus-within) .bravo-clara-teaser,
html body.bravo-v3:has(.reservation-card[open],.site-footer__newsletter-panel:not([hidden])) .bravo-clara-teaser,
html body.bravo-v3.menu-open .bravo-clara-teaser { display: none; }
html body.bravo-v3 .bravo-contact--near-footer .bravo-clara-teaser { display: none; }
html.bchat-abierto body.bravo-v3 .bravo-contact { display: none; }
html:has(body.bravo-v3 .bravo-contact) { scroll-padding-bottom: calc(var(--v4-dock-clearance, 88px) + 24px); }
html body.bravo-v3 { padding-bottom: var(--v4-dock-clearance, 88px); }
/* The shell hides the dock near the footer; release its reserved space too,
   otherwise every page ends in a blank band below the footer. */
html body.bravo-v3:has(.bravo-contact.bravo-contact--near-footer) { padding-bottom: 0; }
html body.bravo-v3 :is(.reservation-card,.site-footer__newsletter-panel) {
  bottom: var(--v4-dock-clearance, 88px);
  max-height: calc(100dvh - var(--v4-dock-clearance, 88px) - 110px);
}
@media (min-width: 521px) and (max-height: 520px) {
  html body.bravo-v3 .reservation-card {
    top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom)); width: min(460px, calc(100% - 24px));
    max-height: calc(100dvh - 24px); padding: 16px 20px;
  }
  html body.bravo-v3 .reservation-card > p { margin: 10px 0 12px; }
  html body.bravo-v3 .reservation-card__actions { gap: 8px; }
}
@media (max-width: 820px) {
  html body.bravo-v3.javier-contact-page .contact-form__actions {
    padding-bottom: calc(var(--v4-dock-clearance, 68px) + 8px);
  }
}
@media (max-width: 820px) {
  html body.bravo-v3 .bravo-contact {
    left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom)); width: auto; max-width: none;
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  html body.bravo-v3 .bravo-contact > a { min-height: 46px; padding: 10px 8px; gap: 8px; }
  html body.bravo-v3 .bravo-contact > a > span:not(.bravo-contact__link-icon) { font-size: .85rem; }
  html body.bravo-v3 .bravo-contact > a > .bravo-contact__link-icon { flex: 0 0 20px; width: 20px; height: 20px; }
  html body.bravo-v3 .bravo-contact > a > .bravo-contact__link-icon .bravo-contact__svg { width: 20px; height: 20px; }
}
@media (max-height: 520px) {
  html body.bravo-v3 .bravo-contact .bravo-clara-teaser { display: none; }
}
/* Compact mobile dock: keep all four actions in one calm toolbar. The desktop
   Clara invitation duplicates the Clara action and consumes a whole extra row
   on phones, so the mobile dock keeps Clara as a first-class button instead. */
@media (max-width: 520px) {
  html body.bravo-v3 .bravo-contact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px; padding: 4px; border-radius: 12px;
  }
  html body.bravo-v3 .bravo-contact .bravo-clara-teaser { display: none; }
  html body.bravo-v3 .bravo-contact > a {
    min-width: 0; min-height: 58px; padding: 5px 2px;
    flex-direction: column; gap: 3px; line-height: 1.1;
  }
  html body.bravo-v3 .bravo-contact > a > .bravo-contact__link-icon,
  html body.bravo-v3 .bravo-contact > a > .bravo-contact__link-icon .bravo-contact__svg {
    flex-basis: 18px; width: 18px; height: 18px;
  }
  html body.bravo-v3 .bravo-contact > a > span:not(.bravo-contact__link-icon) {
    width: 100%; max-width: 100%; text-align: center;
    font-size: clamp(.58rem, 2.7vw, .68rem); line-height: 1.1;
  }
  html body.bravo-v3 .bravo-contact > .bravo-contact__book {
    min-width: 0; padding: 5px 2px; border-radius: 8px;
  }
}
@media (max-width: 820px) {
  /* During the booking dialog its own actions take priority; don't leave the
     fixed dock underneath the modal or let its buttons sit behind the dialog. */
  html.reservation-open body.bravo-v3 .bravo-contact { display: none; }
}

/* Reservation entry only: native modal in the top layer; Directions keeps its own placement. */
html.reservation-open, html.reservation-open body.bravo-v3 { overflow: hidden; }
html body.bravo-v3 .reservation-card--centered {
  --reservation-blue: #568CBE;
  position: fixed; inset: 0; margin: auto;
  width: min(860px, calc(100% - 32px)); height: fit-content;
  max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
  padding: 0; border: 0; border-radius: 20px;
  overflow: auto; overscroll-behavior: contain;
  box-shadow: 0 24px 90px rgb(8 27 43 / .28);
}
html body.bravo-v3 .reservation-card--centered::backdrop {
  background: rgb(8 27 43 / .68); backdrop-filter: blur(5px);
}
html body.bravo-v3 .reservation-card__masthead {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px clamp(20px, 4vw, 40px); background: #173852; color: #fff;
  border-bottom: 0;
}
html body.bravo-v3 .reservation-card__brand {
  flex: 1 1 0; min-width: 0;
}
html body.bravo-v3 .reservation-card__brand img {
  display: block; width: min(var(--v4-brand-logo-width), 100%); height: auto;
  object-fit: contain; object-position: left center;
  /* Same monochrome treatment as the site header on a dark surface. */
  filter: brightness(0) invert(1);
}
html body.bravo-v3 .reservation-card--centered .reservation-card__close {
  display: inline-flex; align-items: center; gap: 12px; padding: 8px 12px;
  background: transparent; border-color: rgb(255 255 255 / .35); color: #fff;
}
html body.bravo-v3 .reservation-card__close > span { font-size: 1.5rem; font-weight: 400; }
html body.bravo-v3 .reservation-card__body {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: center; gap: clamp(24px, 4vw, 48px); padding: clamp(24px, 4vw, 44px);
}
html body.bravo-v3 .reservation-card__intro { min-width: 0; }
html body.bravo-v3 .reservation-card__symbol {
  width: 48px; height: 48px; margin-bottom: 20px; color: var(--v4-link);
  stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
html body.bravo-v3 .reservation-card--centered h2 {
  font: 500 clamp(1.9rem, 3vw, 2.65rem)/1.15 var(--serif); overflow-wrap: normal;
}
html body.bravo-v3 .reservation-card__intro p {
  margin: 18px 0 0; color: var(--v4-muted); font: 400 1rem/1.65 var(--v4-sans);
}
html body.bravo-v3 .reservation-card--centered .reservation-card__actions {
  gap: 14px; padding: 24px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--v4-surface);
}
html body.bravo-v3 .reservation-card--centered .reservation-card__actions > * {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 56px; padding: 14px 16px; font: 600 1rem/1.4 var(--v4-sans);
  text-decoration: none; border-radius: var(--v4-radius-control);
}
html body.bravo-v3 .reservation-card--centered [data-reserva-continue] {
  background: var(--reservation-blue); border: 1px solid var(--reservation-blue); color: #111;
}
html body.bravo-v3 .reservation-card--centered [data-reserva-continue]:hover { background: #73A1CC; }
html body.bravo-v3 .reservation-card--centered .reservation-card__clara {
  background: var(--v4-paper); color: var(--v4-text);
}
html body.bravo-v3 .reservation-card--centered :focus-visible {
  outline: 3px solid var(--v4-link); outline-offset: 4px;
}
html body.bravo-v3 .reservation-card__masthead :focus-visible { outline-color: #fff; }
@media (max-width: 600px) {
  html body.bravo-v3 .reservation-card--centered {
    width: calc(100% - 24px); border-radius: 16px;
    max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
  html body.bravo-v3 .reservation-card__body { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 24px; }
  html body.bravo-v3 .reservation-card__symbol { width: 36px; height: 36px; margin-bottom: 16px; }
  html body.bravo-v3 .reservation-card--centered .reservation-card__actions { padding: 16px; }
}
@media (max-height: 520px) {
  html body.bravo-v3 .reservation-card--centered { max-height: calc(100dvh - 24px); }
  html body.bravo-v3 .reservation-card__masthead { padding: 8px 20px; }
  html body.bravo-v3 .reservation-card__body { padding: 20px; gap: 20px; }
  html body.bravo-v3 .reservation-card__symbol { display: none; }
  html body.bravo-v3 .reservation-card--centered h2 { font-size: 1.7rem; }
  html body.bravo-v3 .reservation-card__intro p { margin-top: 12px; line-height: 1.5; }
  html body.bravo-v3 .reservation-card--centered .reservation-card__actions { padding: 14px; gap: 10px; }
  html body.bravo-v3 .reservation-card--centered .reservation-card__actions > * { min-height: 48px; padding: 10px 12px; }
}
@media (prefers-reduced-motion: no-preference) {
  html body.bravo-v3 .reservation-card--centered[open] { animation: reservation-enter .18s ease-out; }
  @keyframes reservation-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
}
@media (prefers-reduced-motion: reduce) {
  html body.bravo-v3 .reservation-card--centered,
  html body.bravo-v3 .reservation-card--centered * { animation: none; transition: none; scroll-behavior: auto; }
}
/* Dark mode contrast completion · 2026-10-06.
   Common V4 stylesheet loaded by every page. Repair legacy literal light-theme
   colours only where the page is on a dark reading surface. */
html[data-tema="oscuro"] body.bravo-v3 main#contenido > section > p:not([class]) {
  color: #dce3e9 !important;
}
html[data-tema="oscuro"] body.bravo-v3 main#contenido > section > p:not([class]) :is(b, strong) {
  color: #f5f7f9 !important;
}
html[data-tema="oscuro"] body.bravo-v3.ip-javier .metodo b,
html[data-tema="oscuro"] body.bravo-v3.ip-javier .credenciales,
html[data-tema="oscuro"] body.bravo-v3 .tag {
  color: #b7dbf5 !important;
}
html[data-tema="oscuro"] body.bravo-v3 main#contenido .bv-ice :is(b, strong) {
  color: #b7dbf5 !important;
}
html[data-tema="oscuro"] body.bravo-v3 main#contenido .miga a,
html[data-tema="oscuro"] body.bravo-v3 main#contenido .art-migas a {
  color: #b7dbf5 !important;
}
html[data-tema="oscuro"] body.bravo-v3.ip-herramientas .miga a {
  color: #b7dbf5 !important;
}
html[data-tema="oscuro"] body.bravo-v3 main#contenido .checklist label b {
  color: #f5f7f9 !important;
}
html[data-tema="oscuro"] body.bravo-v3.areas-v3-page .departamento__resource--featured em {
  color: #b7dbf5 !important;
}
html[data-tema="oscuro"] body.bravo-v3 main#contenido .art-body {
  color: #f5f7f9 !important;
}
html[data-tema="oscuro"] body.bravo-v3 main#contenido .art-body :is(p, b, strong, li) {
  color: #e0e6ec !important;
}
html[data-tema="oscuro"] body.bravo-v3 main#contenido .art-body .cta-box a {
  background: #315f87 !important;
  border: 1px solid #315f87 !important;
  color: #fff !important;
}
html[data-tema="oscuro"] body.bravo-v3.ip-firma main#contenido .firma-v4-band--blue {
  background: #173a57 !important;
  color: #f5f7f9 !important;
}
html[data-tema="oscuro"] body.bravo-v3.ip-firma main#contenido .firma-v4-band--blue :is(p, h2, h3, a, span, .eyebrow) {
  color: #f5f7f9 !important;
}
html[data-tema="oscuro"] body.bravo-v3.ip-firma main#contenido .firma-v4-band--blue .number {
  color: #b7dbf5 !important;
}
html[data-tema="oscuro"] body.bravo-v3.portada-home main#contenido .resource {
  background: #232a31 !important;
  border-color: #657789 !important;
  color: #f5f7f9 !important;
}
html[data-tema="oscuro"] body.bravo-v3.portada-home main#contenido .resource :is(h3, p, a) {
  color: #f5f7f9 !important;
}
html[data-tema="oscuro"] body.bravo-v3.portada-home main#contenido .resource a {
  color: #b7dbf5 !important;
}
html[data-tema="oscuro"] body.bravo-v3 main#contenido .recursos-reset {
  color: #b7dbf5 !important;
}
html[data-tema="oscuro"] body.bravo-v3:has(#barra) .hero .tag {
  color: #b7dbf5 !important;
}

/* V4 mobile audit: keep one outer content measure and a compact action dock. */
@media (max-width: 699px) {
  html.v4-legacy body.bravo-v3.javier-contact-page .contact-form-section {
    padding-inline: 12px;
  }
}
@media (max-width: 820px) {
  html.v4-legacy body.bravo-v3.ip-servicios .servicios__grupo {
    padding-inline: 12px;
  }
  html.v4-legacy body.bravo-v3.ip-herramientas > main#contenido > section,
  html.v4-legacy body.bravo-v3.ip-herramientas > main#contenido > section:not(:has(> .wrap)):not(.wrap),
  html.v4-legacy body.bravo-v3:has(> nav.legalnav) > main#contenido > .box {
    width: 100%;
    max-width: none;
  }
}
@media (min-width: 521px) and (max-width: 820px) {
  html.v4-legacy body.bravo-v3 .bravo-contact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px;
    padding: 4px;
  }
  html.v4-legacy body.bravo-v3 .bravo-contact .bravo-clara-teaser {
    display: none;
  }
  html.v4-legacy body.bravo-v3 .bravo-contact > a {
    min-width: 44px;
    min-height: 44px;
    padding: 5px 2px;
    flex-direction: column;
    gap: 3px;
    line-height: 1.1;
  }
  html.v4-legacy body.bravo-v3 .bravo-contact > a > span:not(.bravo-contact__link-icon) {
    max-width: 100%;
    text-align: center;
    font-size: .75rem;
    line-height: 1.1;
  }
}

/* The shared action dock must read as a single surface, without a pale keyline. */
html.v4-legacy body.bravo-v3 .bravo-contact {
  border: 0 !important;
  outline: 0 !important;
}

/* QA 2026-10-09 · contraste AA (4,5:1) en modo claro, sólo páginas medidas.
   #568CBE como fondo con texto blanco da 3,57:1 y como texto sobre blanco
   3,57:1. Se usa el azul del botón «Reservar consulta» de la cabecera
   (#315F87, 6,7:1 con blanco) y el --v4-link (#2F6F9F, 5,4:1 sobre blanco). */
html:not([data-tema="oscuro"]) body.bravo-v3:is(.ip-javier, .ip-servicios) .btn-principal,
html:not([data-tema="oscuro"]) body.bravo-v3:is(.ip-javier, .ip-servicios) section.cta .botones > a.btn-principal {
  background: #315f87 !important;
  color: #fff !important;
}
html:not([data-tema="oscuro"]) body.bravo-v3:is(.ip-javier, .ip-servicios) .btn-principal:hover,
html:not([data-tema="oscuro"]) body.bravo-v3:is(.ip-javier, .ip-servicios) section.cta .botones > a.btn-principal:hover {
  background: #284e70 !important;
}
html:not([data-tema="oscuro"]) body.bravo-v3.ip-javier .box :is(b, strong) { color: #2f6f9f; }
html:not([data-tema="oscuro"]) body.bravo-v3.ip-firma .firma-v4-band--blue { background: #315f87; }
html:not([data-tema="oscuro"]) body.bravo-v3.ip-firma .firma-v4-band--blue :is(h2, h3, p, .eyebrow, .number) { color: #fff; }
html:not([data-tema="oscuro"]) body.bravo-v3.ip-firma :is(.firma-v4-facts strong, .firma-v4-history-list .year) { color: #2f6f9f; }

/* Pulido 2026-10-09 · enlaces del pie con 44 px de área táctil en móvil y
   pantallas táctiles. Medían 16 px (columnas) y 21 px (legales). Para que el
   pie no crezca, en móvil «Áreas» y «Despacho» van en dos columnas y las
   listas pierden el hueco entre filas: el alto lo pone el propio enlace. */
@media (max-width: 820px), (pointer: coarse) {
  html:root body.bravo-v3 footer[data-javier-shell="footer"] .site-footer__grid ul { gap: 0; }
  html:root body.bravo-v3 footer[data-javier-shell="footer"] .site-footer__grid li { line-height: 1.35; }
  html:root body.bravo-v3 footer[data-javier-shell="footer"] .site-footer__grid li > a,
  html:root body.bravo-v3 footer[data-javier-shell="footer"] .site-footer__legal > a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 4px;
  }
  html:root body.bravo-v3 footer[data-javier-shell="footer"] .site-footer__grid h2 { margin-bottom: 4px; }
  html:root body.bravo-v3 footer[data-javier-shell="footer"] .site-footer__legal { row-gap: 0; align-items: center; }
}
@media (max-width: 520px) {
  html:root body.bravo-v3 footer[data-javier-shell="footer"] .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
    row-gap: 20px;
  }
  html:root body.bravo-v3 footer[data-javier-shell="footer"] .site-footer__grid > :is(.site-footer__brand, :last-child) { grid-column: 1 / -1; }
}

/* Espaciado 2026-10-12 · Banda de cierre «Consultar con un abogado».
   Nico: «se ve fatal». Las dos cajas de teléfono no casaban entre sí (una
   empezaba 6-8 px más arriba y medía 44 frente a 50 px), eran cajas casi
   negras de esquina recta con el número pegado al borde, y debajo de dos
   botones redondeados. Ahora es UNA rejilla de dos columnas: misma altura,
   mismo cuerpo de letra, mismo radio. Las acciones principales van rellenas;
   los teléfonos y las secundarias (`.btn-linea`), en contorno. Si el número
   de acciones es impar, la última ocupa la fila entera. En móvil, una columna.
   Va con !important porque la banda la pintan seis hojas y estilos en línea
   (alguno con id) que se pisan entre sí; esto es el contrato final. */
html:root body.bravo-v3 section.cta .botones {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(52px, auto);
  gap: 12px !important;
  align-items: stretch !important;
  align-content: start;
  width: 100%;
  min-width: 0;
  max-width: 560px;
  margin-top: 0;
}
html:root body.bravo-v3 section.cta .botones > a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px;
  box-sizing: border-box;
  min-width: 0;
  min-height: 52px !important;
  height: auto;
  margin: 0 !important;
  padding: 12px 20px !important;
  border: 1px solid transparent !important;
  border-radius: var(--radius-boton, 10px) !important;
  font-family: var(--sans, inherit);
  font-size: .9375rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  white-space: normal;
  grid-column: auto !important;
  box-shadow: none !important;
}
html:root body.bravo-v3 section.cta .botones > a:last-child:nth-child(odd) { grid-column: 1 / -1 !important; }
/* Rellenas: las acciones principales, en claro sobre la banda azul (azul sobre
   azul daba 1,35:1 y el botón se leía como texto suelto). */
html:root body.bravo-v3 section.cta .botones > a:is(.btn-primary, .btn-principal) {
  background: #fff !important;
  border: 1px solid #fff !important;
  color: #17324d !important;
}
html:root body.bravo-v3 section.cta .botones > a:is(.btn-primary, .btn-principal):is(:hover, :focus-visible) {
  background: #e8f0f6 !important;
  border-color: #e8f0f6 !important;
  color: #17324d !important;
}
/* Contorno: teléfonos y acciones secundarias. */
html:root body.bravo-v3 section.cta .botones > a:not(.btn-primary):not(.btn-principal) {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, .5) !important;
  color: #fff !important;
}
html:root body.bravo-v3 section.cta .botones > a:not(.btn-primary):not(.btn-principal):is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, .1) !important;
  border-color: rgba(255, 255, 255, .8) !important;
}
html:root body.bravo-v3 section.cta .botones > a :is(span, strong, svg) { color: inherit !important; }
html:root body.bravo-v3 section.cta .botones > a[href^="tel:"]::before { flex: none; width: 15px; height: 15px; }
@media (max-width: 560px) {
  html:root body.bravo-v3 section.cta { padding: 28px 20px !important; }
  html:root body.bravo-v3 section.cta .botones {
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: none;
  }
}

/* Espaciado 2026-10-12 · aire interior de cajas, tarjetas y bandas.
   Detector: cualquier elemento con fondo propio, borde o sombra cuyo texto
   quede a menos de 12 px (móvil) o 16 px (escritorio) de su borde. Escala:
   20-24 px en móvil, 28-40 px en escritorio; piezas pequeñas, 16-20 px. */

/* Servicios penales (servicio.css pinta el cuerpo crema y el héroe se quedaba
   como una caja blanca con el titular pegado a su borde izquierdo). El héroe
   pasa a ser parte del lienzo: mismo fondo, mismo margen que el resto. */
html:root[data-tema="claro"] body.bravo-v3:has(main .bv-acciones) > header.hero { background: transparent !important; }

/* Accesos rápidos (Llamar, Urgencias, WhatsApp…): 14 px → 18 px. */
@media (min-width: 821px) {
  html:root body.bravo-v3 main .bv-acciones > a.bv-accion { padding: 18px 18px 16px; }
}

/* Índice de los textos legales en oscuro: tiene fondo, no tenía aire lateral. */
@media (max-width: 820px) {
  html:root[data-tema="oscuro"] body.bravo-v3 main#contenido .legal-cuerpo > .toc { padding-inline: 20px !important; }
}

/* Tarifas en oscuro: v4-legacy les ponía un fondo de caja a unas columnas
   editoriales sin relleno. Se quedan como en claro: columnas sobre el lienzo. */
html:root[data-tema="oscuro"] body.bravo-v3 .imp-editorial > .tarifa { background: transparent !important; }

/* Recursos penales en CA/EN: la versión ES llevaba el relleno en línea. */
html:root body.bravo-v3 main#contenido > section.penal-recursos-editorial {
  padding: clamp(20px, 3vw, 36px) !important;
  border-radius: 14px;
}

/* Piezas pequeñas que se quedaban en 10-14 px. */
html:root body.bravo-v3 .firma-v4-hero__media figcaption { padding: 16px 20px; }
html:root body.bravo-v3 .firma-v4-team figure > figcaption { padding: 14px 20px; }
html:root body.bravo-v3.portada-home .portrait__card { padding-block: 20px; }
html:root body.bravo-v3 .art-podcast--ficha .art-podcast__card { padding: 14px 18px; }
html:root body.dt-guide #contenido .checklist li { padding: 16px 18px; }
@media (min-width: 821px) {
  html:root body.bravo-v3 .calc .opciones label { padding: 16px 18px; }
  html:root body.bravo-v3 .bravo-clara-teaser { padding: 14px 16px; }
}

/* Espaciado 2026-10-12 · desplegables. Nico, en Contacto: la flecha nativa
   del <select> quedaba pegada al borde derecho de la caja (4-6 px). Todos los
   desplegables de la web dibujan ahora su propio chevron, a 16 px del borde,
   con el color del texto en cada tema, y reservan 44 px a la derecha para que
   el texto nunca lo pise. Alto, radio y borde siguen siendo los del campo de
   texto de cada formulario: aquí no se tocan. */
html:root body.bravo-v3 select:not([multiple]):not([size]) {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  /* Chevron con dos degradados en currentColor: toma el color del texto del
     propio campo, sea cual sea el tema o el fondo del formulario. */
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%) !important;
  background-repeat: no-repeat !important;
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50% !important;
  background-size: 6px 6px, 6px 6px !important;
  padding-right: 44px !important;
  line-height: 1.3;
  text-overflow: ellipsis;
  cursor: pointer;
}
html:root body.bravo-v3 select:not([multiple]):not([size]):focus-visible {
  outline: 3px solid #2f6f9f;
  outline-offset: 2px;
}
html:root[data-tema="oscuro"] body.bravo-v3 select:not([multiple]):not([size]):focus-visible { outline-color: #a9cdea; }
html:root body.bravo-v3 select::-ms-expand { display: none; }

/* Cabecera 2026-10-19 · Nico: «al hacer scroll la barra de menú ya no se esconde». Vuelve el
   comportamiento de antes en escritorio: se esconde al bajar y reaparece al subir (javier-shell.js,
   `header-is-hidden`). El 12/10 se había dejado fija. Las anclas paran 16 px por debajo de la cabecera. */
@media (min-width: 821px) {
  html:root:has(body.bravo-v3 #bravo-header) { scroll-padding-top: 108px; }
}

/* Botones 2026-10-12 · un botón tiene que verse como botón. Detector: todo
   a.button, .btn* o button visible cuyo fondo contraste < 1,5:1 con el de su
   contenedor y que no tenga borde visible. */
/* La firma, banda «Hablemos de tu asunto»: el botón tenía el mismo azul que la
   banda (rgb 49 95 135 sobre rgb 49 95 135, 1:1). Botón claro, como «Empezar
   reserva» de la página penal. */
html:root body.bravo-v3 .firma-v4-band--blue a.button {
  background: #fff !important;
  border: 1px solid #fff !important;
  color: #17324d !important;
}
html:root body.bravo-v3 .firma-v4-band--blue a.button:is(:hover, :focus-visible) {
  background: #e8f0f6 !important;
  border-color: #e8f0f6 !important;
  color: #17324d !important;
}
html:root body.bravo-v3 :is(.firma-v4-band--blue a.button, section.cta .botones > a):focus-visible {
  outline: 3px solid #fff !important;
  outline-offset: 3px;
}
/* Secundarios con un tinte casi blanco sobre blanco (1,02-1,23:1): llevan un
   filete para que se lean como botón. */
html:root:not([data-tema="oscuro"]) body.bravo-v3 a.button.button--light,
html:root:not([data-tema="oscuro"]) body.bravo-v3 .hero__botones > a.btn-linea {
  border: 1px solid rgba(23, 50, 77, .26) !important;
}
html:root[data-tema="oscuro"] body.bravo-v3 a.button.button--light {
  border: 1px solid rgba(245, 247, 249, .34) !important;
}
/* Recursos en oscuro: el filtro activo era casi negro sobre casi negro. */
html:root[data-tema="oscuro"] body.bravo-v3 .recursos-filter-buttons button[aria-pressed="true"] {
  background: #a9cdea !important;
  border-color: #a9cdea !important;
  color: #10202c !important;
}
/* Héroes de Javier Bravo y Administrativo en oscuro: el secundario perdía el
   borde (border:0 !important en línea) y quedaba gris sobre gris. */
html:root[data-tema="oscuro"] body.bravo-v3 .hero__botones > a.btn-linea {
  border: 1px solid rgba(143, 192, 232, .55) !important;
}
/* «Qué hacer si me detienen», banda roja de urgencia: el botón azul sobre
   rojo daba 1,2:1 (en EN, sin borde). Botón claro en los tres idiomas. */
html:root body.bravo-v3 section.urgente-top .botones > a.btn-primary {
  background: #fff !important;
  border: 1px solid #fff !important;
  color: #7a2630 !important;
}
html:root body.bravo-v3 section.urgente-top .botones > a.btn-primary:is(:hover, :focus-visible) {
  background: #f6e9ea !important;
  border-color: #f6e9ea !important;
}

/* 16/10/2026 · Barra de desplazamiento propia (Nico: «no quiero la genérica del navegador»).
   Respeta las páginas que la esconden para usar el indicador de lectura (`html.js-scrub`). */
:root { --v4-scroll-track: #EEF2F6; --v4-scroll-thumb: #8FB2D3; --v4-scroll-thumb-hover: #315F87; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) { --v4-scroll-track: #101C27; --v4-scroll-thumb: #3E6A93; --v4-scroll-thumb-hover: #8FC0E8; }
}
:root[data-tema="oscuro"] { --v4-scroll-track: #101C27; --v4-scroll-thumb: #3E6A93; --v4-scroll-thumb-hover: #8FC0E8; }
html:not(.js-scrub) ::-webkit-scrollbar { width: 12px; height: 12px; }
html:not(.js-scrub) ::-webkit-scrollbar-track { background: var(--v4-scroll-track); }
html:not(.js-scrub) ::-webkit-scrollbar-thumb {
  background: var(--v4-scroll-thumb);
  border: 3px solid var(--v4-scroll-track);
  border-radius: 999px;
  min-height: 48px;
}
html:not(.js-scrub) ::-webkit-scrollbar-thumb:hover,
html:not(.js-scrub) ::-webkit-scrollbar-thumb:active { background: var(--v4-scroll-thumb-hover); }
html:not(.js-scrub) ::-webkit-scrollbar-corner { background: var(--v4-scroll-track); }
@supports not selector(::-webkit-scrollbar) {
  html:not(.js-scrub) { scrollbar-color: var(--v4-scroll-thumb) var(--v4-scroll-track); scrollbar-width: thin; }
}

/* 16/10/2026 · Publicaciones de LinkedIn e Instagram dentro de las tarjetas de redes. Las tarjetas
   son claras en los dos temas, así que el texto va fijo en oscuro. */
html body.bravo-v3 .site-footer .site-footer__red { background: #fff; }
html body.bravo-v3 .site-footer .site-footer__red :is(strong, .site-footer__red-cabecera span, .site-footer__post-texto span) { color: #17202a; }
html body.bravo-v3 .site-footer .site-footer__red .site-footer__post-texto time { color: #55616d; }
html body.bravo-v3 .site-footer .site-footer__posts a:is(:hover, :focus-visible) { background: #eef2f6; }
html body.bravo-v3 .site-footer .site-footer__posts :is(img, .site-footer__post-sin-img) { background: #e3e9f0; }
body.bravo-v3 .site-footer__red--con-posts { min-height: 0; }
html body.bravo-v3 .site-footer .site-footer__social--con-posts { grid-template-columns: 1fr; align-items: start; gap: 28px; }
html body.bravo-v3 .site-footer .site-footer__social--con-posts h2 { max-width: none; }
body.bravo-v3 .site-footer__social--con-posts .site-footer__social-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
body.bravo-v3 .site-footer__social--con-posts .site-footer__posts a { grid-template-columns: 88px minmax(0, 1fr); gap: 16px; }
body.bravo-v3 .site-footer__social--con-posts .site-footer__posts :is(img, .site-footer__post-sin-img) { width: 88px; height: 88px; object-position: top center; }
@media (max-width: 900px) {
  body.bravo-v3 .site-footer__social--con-posts .site-footer__social-links { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  body.bravo-v3 .site-footer__social--con-posts .site-footer__posts a { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; }
  body.bravo-v3 .site-footer__social--con-posts .site-footer__posts :is(img, .site-footer__post-sin-img) { width: 64px; height: 64px; }
  body.bravo-v3 .site-footer__social--con-posts .site-footer__red { padding: 18px; }
  body.bravo-v3 .site-footer__post-texto span { font-size: .9rem; -webkit-line-clamp: 3; line-clamp: 3; }
}

/* 19/10/2026 · Pie: bloque «Sigue al despacho» y barra legal (encargo de Nico, lote 19/10).
   1) Redes: el bloque es una pieza fija en azul noche en los dos temas, y las tarjetas van un nivel
      por encima del bloque (no blancas). tema.css y v4-legacy.css pintaban en oscuro, con
      !important, TODOS los <a> de .site-footer__social-links (regla escrita para la versión de
      enlaces sueltos): la cabecera de cada red y las filas salían como bandas negras dentro de una
      caja blanca y la fecha quedaba gris sobre negro. Aquí se anulan con más especificidad.
      Contraste medido: blanco/#1e4566 10,0:1; fecha #c8d7e5/#1e4566 6,8:1 (5,8:1 en hover).
   2) Barra legal: una línea en escritorio (copyright a la izquierda, enlaces a la derecha) con un
      separador fino encima; en móvil, enlaces en dos columnas y el copyright debajo. */
html[data-tema]:root body.bravo-v3 footer[data-javier-shell="footer"] .site-footer__social {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: #173a57 !important;
  color: #fff !important;
}
html[data-tema]:root body.bravo-v3 footer[data-javier-shell="footer"] .site-footer__social :is(.eyebrow, h2) { color: #fff !important; }
html[data-tema]:root body.bravo-v3 footer[data-javier-shell="footer"] .site-footer__social .site-footer__red {
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 0 !important;
  outline: 0;
  border-radius: 6px;
  background: #1e4566 !important;
  color: #fff !important;
  box-shadow: none;
  transform: none;
}
html[data-tema]:root body.bravo-v3 footer[data-javier-shell="footer"] .site-footer__social .site-footer__red a.site-footer__red-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  height: auto;
  min-height: 56px;
  padding: 16px 18px 12px;
  border-radius: 0;
  background: transparent !important;
  color: #fff !important;
  text-decoration: none;
}
html[data-tema]:root body.bravo-v3 footer[data-javier-shell="footer"] .site-footer__social .site-footer__red--con-posts a.site-footer__red-cabecera {
  border-bottom: 1px solid #2a587c;
}
html[data-tema]:root body.bravo-v3 footer[data-javier-shell="footer"] .site-footer__social .site-footer__red a.site-footer__red-cabecera strong {
  color: #fff !important;
  font-size: 1.15rem;
  font-weight: 600;
}
html[data-tema]:root body.bravo-v3 footer[data-javier-shell="footer"] .site-footer__social .site-footer__red a.site-footer__red-cabecera span {
  align-self: baseline;
  color: #c8d7e5 !important;
  font-size: .9rem;
}
html[data-tema]:root body.bravo-v3 footer[data-javier-shell="footer"] .site-footer__social .site-footer__red a.site-footer__red-cabecera:is(:hover, :focus-visible) span { color: #fff !important; text-decoration: underline; text-underline-offset: 3px; }
html[data-tema]:root body.bravo-v3 footer[data-javier-shell="footer"] .site-footer__social .site-footer__posts {
  gap: 0;
  padding: 6px 8px 8px;
}
html[data-tema]:root body.bravo-v3 footer[data-javier-shell="footer"] .site-footer__social .site-footer__posts a {
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 14px;
  margin: 0;
  padding: 10px;
  border-radius: 4px;
  background: transparent !important;
  color: #fff !important;
  text-decoration: none;
  transition: background-color .2s ease;
}
html[data-tema]:root body.bravo-v3 footer[data-javier-shell="footer"] .site-footer__social .site-footer__posts a:is(:hover, :focus-visible) { background: #24506f !important; }
html[data-tema]:root body.bravo-v3 footer[data-javier-shell="footer"] .site-footer__social .site-footer__posts a:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
html[data-tema]:root body.bravo-v3 footer[data-javier-shell="footer"] .site-footer__social .site-footer__posts :is(img, .site-footer__post-sin-img) {
  width: 64px;
  height: 64px;
  border-radius: 6px;
  background: #24506f;
  object-fit: cover;
}
html[data-tema]:root body.bravo-v3 footer[data-javier-shell="footer"] .site-footer__social .site-footer__post-texto time {
  color: #c8d7e5 !important;
  font-size: .78rem;
  letter-spacing: .04em;
}
html[data-tema]:root body.bravo-v3 footer[data-javier-shell="footer"] .site-footer__social .site-footer__post-texto > span { color: #fff !important; font-size: .95rem; }
/* Barra legal */
html[data-tema]:root body.bravo-v3 footer[data-javier-shell="footer"] .site-footer__newsletter { border-bottom: 0; }
html[data-tema]:root body.bravo-v3 footer[data-javier-shell="footer"] .site-footer__base {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 32px;
  margin-top: 8px;
  padding-top: 20px;
  border-top: 1px solid rgba(23, 32, 42, .14);
}
html[data-tema="oscuro"]:root body.bravo-v3 footer[data-javier-shell="footer"] .site-footer__base { border-top-color: #36414c; }
html[data-tema]:root body.bravo-v3 footer[data-javier-shell="footer"] .site-footer__base .site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px 24px;
  margin: 0;
  padding: 0;
  font-size: .82rem;
}
html[data-tema]:root body.bravo-v3 footer[data-javier-shell="footer"] .site-footer__base .site-footer__copy {
  margin: 0;
  font-size: .82rem;
}
html[data-tema="claro"]:root body.bravo-v3 footer[data-javier-shell="footer"] .site-footer__base :is(.site-footer__copy, .site-footer__legal a) { color: #4b5968; }
html[data-tema="oscuro"]:root body.bravo-v3 footer[data-javier-shell="footer"] .site-footer__base :is(.site-footer__copy, .site-footer__legal a) { color: #d0d9e1; }
html[data-tema]:root body.bravo-v3 footer[data-javier-shell="footer"] .site-footer__base .site-footer__legal a:hover { text-decoration: underline; text-underline-offset: 3px; }
html[data-tema="claro"]:root body.bravo-v3 footer[data-javier-shell="footer"] .site-footer__base .site-footer__legal a:hover { color: #17202a; }
html[data-tema="oscuro"]:root body.bravo-v3 footer[data-javier-shell="footer"] .site-footer__base .site-footer__legal a:hover { color: #fff; }
@media (min-width: 821px) and (pointer: fine) {
  html[data-tema]:root body.bravo-v3 footer[data-javier-shell="footer"] .site-footer__base .site-footer__legal a { min-height: 0; padding-block: 6px; }
}
@media (max-width: 820px) {
  html[data-tema]:root body.bravo-v3 footer[data-javier-shell="footer"] .site-footer__base {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding-top: 12px;
  }
  html[data-tema]:root body.bravo-v3 footer[data-javier-shell="footer"] .site-footer__base .site-footer__legal {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 16px;
  }
  html[data-tema]:root body.bravo-v3 footer[data-javier-shell="footer"] .site-footer__social .site-footer__posts a { grid-template-columns: 56px minmax(0, 1fr); gap: 12px; }
  html[data-tema]:root body.bravo-v3 footer[data-javier-shell="footer"] .site-footer__social .site-footer__posts :is(img, .site-footer__post-sin-img) { width: 56px; height: 56px; }
}
@media (max-width: 820px) {
  html[data-tema]:root body.bravo-v3 footer[data-javier-shell="footer"] .site-footer__base .site-footer__legal { align-items: start; }
  html[data-tema]:root body.bravo-v3 footer[data-javier-shell="footer"] .site-footer__base .site-footer__legal a { align-items: flex-start; padding-block: 12px 8px; line-height: 1.35; }
}

/* 19/10/2026 · «Reservar consulta» abre el paso 1 del embudo (javier-shell.js, wireReservationCtas):
   la misma pregunta y las seis respuestas de /reservas.html; cada una sigue en el paso 2. */
html body.bravo-v3 .reservation-card--embudo { width: min(760px, calc(100% - 32px)); }
html body.bravo-v3 .reservation-card--embudo .reservation-card__body {
  grid-template-columns: minmax(0, 1fr); align-items: start; gap: 24px;
  padding: clamp(22px, 4vw, 40px);
}
html body.bravo-v3 .reservation-card--embudo .reservation-card__step {
  display: flex; justify-content: space-between; gap: 12px; margin: 0;
  color: var(--v4-muted); font: 600 .78rem/1.3 var(--v4-sans); letter-spacing: .08em; text-transform: uppercase;
}
html body.bravo-v3 .reservation-card--embudo .reservation-card__progress {
  height: 4px; margin-top: 10px; border-radius: 2px; background: rgba(86, 140, 190, .22); overflow: hidden;
}
html body.bravo-v3 .reservation-card--embudo .reservation-card__progress i { display: block; width: calc(100% / 7); height: 100%; background: #568cbe; }
html body.bravo-v3 .reservation-card--embudo h2 { margin-top: 22px; font-size: clamp(1.6rem, 2.8vw, 2.25rem); }
html body.bravo-v3 .reservation-card--embudo .reservation-card__intro p#reservation-card-description { margin-top: 10px; }
html body.bravo-v3 .reservation-card__ramas {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
  margin: 0; padding: 0; list-style: none;
}
html body.bravo-v3 .reservation-card__ramas li { margin: 0; padding: 0; }
html body.bravo-v3 .reservation-card__ramas li::before { content: none; }
html body.bravo-v3 a.reservation-card__rama {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: 100%; min-height: 58px; padding: 14px 16px;
  border: 1px solid #b9c5d0; border-radius: 8px;
  background: #fff; color: #17202a; font: 600 1rem/1.35 var(--v4-sans); text-decoration: none;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: border-color .15s ease, background-color .15s ease;
}
html body.bravo-v3 a.reservation-card__rama > span { flex: none; color: #315f87; transition: transform .15s ease; }
html body.bravo-v3 a.reservation-card__rama:is(:hover, :focus-visible) { border-color: #315f87; background: #eaf2f8; }
html body.bravo-v3 a.reservation-card__rama:is(:hover, :focus-visible) > span { transform: translateX(3px); }
html body.bravo-v3 a.reservation-card__rama:active { background: #dce9f4; }
html[data-tema="oscuro"] body.bravo-v3 a.reservation-card__rama { border-color: #4a5866; background: #232b33; color: #f4f7fa; }
html[data-tema="oscuro"] body.bravo-v3 a.reservation-card__rama > span { color: #8fb6da; }
html[data-tema="oscuro"] body.bravo-v3 a.reservation-card__rama:is(:hover, :focus-visible) { border-color: #8fb6da; background: #2a3640; }
html[data-tema="oscuro"] body.bravo-v3 a.reservation-card__rama:active { background: #30404d; }
@media (max-width: 600px) {
  html body.bravo-v3 .reservation-card__ramas { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  html body.bravo-v3 a.reservation-card__rama { min-height: 52px; padding: 12px 14px; }
  html body.bravo-v3 .reservation-card--embudo .reservation-card__body { gap: 18px; padding: 20px; }
  html body.bravo-v3 .reservation-card--embudo h2 { margin-top: 16px; font-size: 1.55rem; }
}
@media (prefers-reduced-motion: reduce) {
  html body.bravo-v3 a.reservation-card__rama > span { transition: none; }
}
@media (max-width: 600px) {
  html body.bravo-v3 .reservation-card--embudo .reservation-card__step > span:first-child { display: none; }
}

/* 19/10/2026 · Cabecera de escritorio: el fondo del hover y del foco tocaba el texto por los lados
   (enlaces y desplegables con padding 0). Relleno horizontal de 11 px y hueco entre elementos
   reducido para que el ancho total apenas cambie (desde 1101 px, donde aparece este menú, hasta 1440 sin partirse; por debajo va el menú móvil). */
@media (min-width: 1101px) {
  html body.bravo-v3 #bravo-header .site-nav { gap: 2px; }
  html body.bravo-v3 #bravo-header .site-nav > a:not(.site-nav__reserve),
  html body.bravo-v3 #bravo-header .site-nav__resources-toggle {
    padding-inline: 11px;
    border-radius: 4px;
  }
  html body.bravo-v3 #bravo-header .site-nav > a.site-nav__reserve { margin-left: 10px; }
  html body.bravo-v3 #bravo-header .site-nav > a:not(.site-nav__reserve):is(:hover, :focus-visible),
  html body.bravo-v3 #bravo-header .site-nav__resources-toggle:is(:hover, :focus-visible, [aria-expanded="true"]) {
    background: var(--nav-wash);
    color: var(--nav-blue);
  }
}

/* 19/10/2026 · Campos de formulario V4, iguales en toda la web: Contacto (.form-v4), newsletter
   del pie (.newsletter-form) y reservas (main.form-v4). Mismo radio (8 px) que las respuestas del
   embudo, borde de 3:1 contra su fondo, foco azul con halo, nada de cajas blancas en oscuro.
   Borde claro #768594/#fff 3,8:1 · oscuro #6f8193/#1d252d 3,9:1. Texto oscuro 14,4:1. */
html body.bravo-v3 {
  --campo-fondo: #fff; --campo-borde: #768594; --campo-texto: #17202a; --campo-tenue: #5d6b79;
  --campo-foco: #315f87; --campo-halo: rgba(49, 95, 135, .22); --campo-error: #b3261e;
  --campo-marca: #315f87; --campo-marca-tinta: #fff;
}
html[data-tema="oscuro"] body.bravo-v3 {
  --campo-fondo: #1d252d; --campo-borde: #6f8193; --campo-texto: #f4f7fa; --campo-tenue: #9fadba;
  --campo-foco: #8fb6da; --campo-halo: rgba(143, 182, 218, .26); --campo-error: #ff9b8f;
  --campo-marca: #8fb6da; --campo-marca-tinta: #0b1f33;
}
html body.bravo-v3 :is(.form-v4, .newsletter-form) :is(input:not([type]), input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="number"], textarea, select, .sel-v4__btn) {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--campo-borde);
  border-radius: 8px;
  background-color: var(--campo-fondo);
  color: var(--campo-texto);
  font: 400 16px/1.4 var(--v4-sans, "Public Sans", system-ui, sans-serif);
  box-shadow: none;
  outline: 0;
  transition: border-color .15s ease, box-shadow .15s ease;
}
html body.bravo-v3 :is(.form-v4, .newsletter-form) :is(textarea, textarea[name]) { min-height: 132px; resize: vertical; }
html body.bravo-v3 :is(.form-v4, .newsletter-form) :is(input, textarea)::placeholder { color: var(--campo-tenue); opacity: 1; }
html body.bravo-v3 :is(.form-v4, .newsletter-form) :is(input:not([type]), input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="number"], textarea, select, .sel-v4__btn):is(:hover) { border-color: var(--campo-foco); }
html body.bravo-v3 :is(.form-v4, .newsletter-form) :is(input:not([type]), input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="number"], textarea, select, .sel-v4__btn):focus-visible,
html body.bravo-v3 :is(.form-v4, .newsletter-form) :is(input, textarea, select):focus,
html body.bravo-v3 .form-v4 .sel-v4:is(.is-abierta, :has(.sel-v4__nativo:focus)) .sel-v4__btn {
  border-color: var(--campo-foco);
  box-shadow: 0 0 0 3px var(--campo-halo);
  outline: 0;
}
html body.bravo-v3 :is(.form-v4, .newsletter-form) :is(input, textarea, select)[aria-invalid="true"],
html body.bravo-v3 :is(.form-v4, .newsletter-form) :is(input, textarea, select):user-invalid,
html body.bravo-v3 .form-v4 .sel-v4.is-invalida .sel-v4__btn { border-color: var(--campo-error); }
/* Desplegable: flecha de la V4 (la de los <select> de reservas), a 16 px del borde. */
html body.bravo-v3 :is(.form-v4, .newsletter-form) select,
html body.bravo-v3 .form-v4 .sel-v4__btn {
  -webkit-appearance: none; appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23315f87' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
  cursor: pointer;
}
html[data-tema="oscuro"] body.bravo-v3 :is(.form-v4, .newsletter-form) select,
html[data-tema="oscuro"] body.bravo-v3 .form-v4 .sel-v4__btn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238fb6da' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
html body.bravo-v3 .form-v4 .sel-v4 { position: relative; display: block; min-width: 0; }
html body.bravo-v3 .form-v4 .sel-v4__btn { display: flex; align-items: center; text-align: left; }
html body.bravo-v3 .form-v4 .sel-v4__btn--vacio .sel-v4__texto { color: var(--campo-tenue); }
html body.bravo-v3 .form-v4 .sel-v4__texto { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
html body.bravo-v3 .form-v4 .sel-v4.is-abierta .sel-v4__btn { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 6.5l5-5 5 5' fill='none' stroke='%23315f87' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
html[data-tema="oscuro"] body.bravo-v3 .form-v4 .sel-v4.is-abierta .sel-v4__btn { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 6.5l5-5 5 5' fill='none' stroke='%238fb6da' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
html body.bravo-v3 .form-v4 .sel-v4__nativo {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; min-height: 0;
  opacity: 0; pointer-events: none;
}
html body.bravo-v3 .form-v4 .sel-v4__btn { position: relative; z-index: 1; }
html body.bravo-v3 .form-v4 .sel-v4__lista {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0;
  max-height: 280px; overflow-y: auto; overscroll-behavior: contain;
  margin: 0; padding: 6px; list-style: none;
  border: 1px solid var(--campo-borde); border-radius: 8px;
  background: var(--campo-fondo); color: var(--campo-texto);
  box-shadow: 0 14px 34px rgba(11, 31, 51, .18);
  outline: 0;
}
html body.bravo-v3 .form-v4 .sel-v4.is-arriba .sel-v4__lista { top: auto; bottom: calc(100% + 6px); }
html body.bravo-v3 .form-v4 .sel-v4__lista:focus-visible { box-shadow: 0 0 0 3px var(--campo-halo), 0 14px 34px rgba(11, 31, 51, .18); }
html body.bravo-v3 .form-v4 .sel-v4__lista [role="option"] {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 44px; margin: 0; padding: 10px 12px; border-radius: 6px;
  font: 400 15px/1.35 var(--v4-sans, "Public Sans", system-ui, sans-serif); cursor: pointer;
}
html body.bravo-v3 .form-v4 .sel-v4__lista [role="option"]::before { content: none; }
html body.bravo-v3 .form-v4 .sel-v4__lista .sel-v4__vacia { color: var(--campo-tenue); }
html body.bravo-v3 .form-v4 .sel-v4__lista [role="option"].is-activa { background: var(--campo-halo); }
html body.bravo-v3 .form-v4 .sel-v4__lista [role="option"][aria-selected="true"] { font-weight: 600; color: var(--campo-foco); }
html body.bravo-v3 .form-v4 .sel-v4__lista [role="option"][aria-selected="true"]::after {
  content: ""; flex: none; width: 14px; height: 10px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M1 5l4 4 8-8' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M1 5l4 4 8-8' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Casillas: 22 px, radio 5 px, marca de la casa al marcar; el foco es el mismo halo. */
html body.bravo-v3 :is(.form-v4, .newsletter-form) input[type="checkbox"] {
  -webkit-appearance: none; appearance: none;
  flex: 0 0 22px; width: 22px; height: 22px; min-height: 22px; margin: 1px 0 0; padding: 0;
  border: 1.5px solid var(--campo-borde); border-radius: 5px;
  background: var(--campo-fondo) center / 14px 10px no-repeat;
  cursor: pointer; transition: background-color .15s ease, border-color .15s ease;
  accent-color: auto;
}
html body.bravo-v3 :is(.form-v4, .newsletter-form) input[type="checkbox"]:hover { border-color: var(--campo-foco); }
html body.bravo-v3 :is(.form-v4, .newsletter-form) input[type="checkbox"]:checked {
  border-color: var(--campo-marca);
  background-color: var(--campo-marca);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M1 5l4 4 8-8' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
html[data-tema="oscuro"] body.bravo-v3 :is(.form-v4, .newsletter-form) input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M1 5l4 4 8-8' fill='none' stroke='%230b1f33' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
html body.bravo-v3 :is(.form-v4, .newsletter-form) input[type="checkbox"]:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--campo-halo); border-color: var(--campo-foco); }
html body.bravo-v3 :is(.form-v4, .newsletter-form) input[type="checkbox"]:user-invalid { border-color: var(--campo-error); }
@media (prefers-reduced-motion: reduce) {
  html body.bravo-v3 :is(.form-v4, .newsletter-form) :is(input, textarea, select, .sel-v4__btn) { transition: none; }
}

/* 20/10/2026 · Menú principal (correo de Javier del 19/10): La Firma, Derecho Penal, Derecho Civil,
   Derecho Laboral y Recursos Legales. El desplegable de Recursos lista sus seis apartados. */
html body.bravo-v3 #bravo-header .site-nav__recursos-menu { grid-template-columns: minmax(0, .8fr) minmax(0, 2fr); width: min(900px, 100%); }
html body.bravo-v3 #bravo-header .nav-destinations--recursos { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
@media (max-width: 1100px) {
  html body.bravo-v3 #bravo-header .site-nav__recursos-menu { grid-template-columns: minmax(0, 1fr); width: 100%; }
  html body.bravo-v3 #bravo-header .nav-destinations--recursos { grid-template-columns: minmax(0, 1fr); }
  html body.bravo-v3 #bravo-header .site-nav__recursos .nav-editorial p { display: none; }
}

/* 20/10/2026 · Oro de marca (correo de Javier del 19/10: «recuperar algunos textos en dorado»
   de la V1). Dos tonos por tema: --v4-gold para filetes y puntos (decoración) y --v4-gold-text
   para texto, comprobado contra el fondo real: claro #7E5F33 = 5,9:1 sobre #FFF, 5,4:1 sobre
   #F3F5F7, 5,0:1 sobre #E8EEF3; oscuro #D2AE78 = 8,2:1 sobre #181C20, 7,0:1 sobre #232A31,
   8,0:1 sobre #0B1F33. Nunca sobre el azul de acción (#315F87/#568CBE): ahí no llega a 3:1. */
body.bravo-v3 { --v4-gold: #A9824F; --v4-gold-text: #7E5F33; }
html[data-tema="oscuro"] body.bravo-v3 { --v4-gold: #C9A46E; --v4-gold-text: #D2AE78; }

/* 20/10/2026 · Oro en antetítulos, numerales y años (lo que llevaba la V1), solo sobre papel
   o superficie clara/oscura del tema; en bandas azules y paneles de marca siguen en blanco. */
html body.bravo-v3 main :is(.eyebrow, .recursos-kicker, .card__number, .timeline__year, .signature),
html[data-tema="oscuro"] body.bravo-v3 main :is(.eyebrow, .recursos-kicker, .card__number, .timeline__year, .signature) {
  color: var(--v4-gold-text);
}
html body.bravo-v3 main :is(.section--ink, .firma-v4-band--blue, #recursos, .recursos-cta, .nav-feature, .penal-recursos-editorial__booking) :is(.eyebrow, .recursos-kicker, .card__number, .timeline__year, .signature) {
  color: inherit;
}
/* La cursiva del titular de contacto de la portada («Preparados para escuchar.»), en oro como en la V1. */
html body.bravo-v3 main .contact-section h2 em,
html[data-tema="oscuro"] body.bravo-v3 main .contact-section h2 em { color: var(--v4-gold-text); }

/* 2026-10-23 · Menús V5: tarjetas por situación (Recursos), grupos con etiqueta y fila de
   contacto (áreas), tarjeta destacada y cabecera translúcida. Sin franjas laterales de acento. */
html body.bravo-v3 #bravo-header {
  --nav-card: #f3f5f7; --nav-card-hover: #e8eef3; --nav-line: #d3dbe2;
}
html[data-tema="oscuro"] body.bravo-v3 #bravo-header { --nav-card: #212d38; --nav-card-hover: #2b3b49; --nav-line: #3b4b59; }
/* Cinco desplegables caben en la barra: chevrón más cerca del texto y separación repartida en relleno. */
@media (min-width: 1101px) {
  html body.bravo-v3 #bravo-header .site-nav { gap: 2px; }
  html body.bravo-v3 #bravo-header .site-nav > a:not(.site-nav__reserve), html body.bravo-v3 #bravo-header .site-nav__resources-toggle { padding: 0 6px; border-radius: 6px; gap: 3px; }
  html body.bravo-v3 #bravo-header .site-nav a.site-nav__reserve { margin-left: 10px; }
}
@media (min-width: 1101px) and (max-width: 1299px) {
  html body.bravo-v3 { --v4-brand-logo-width: 132px; }
  html body.bravo-v3 #bravo-header .site-header__inner { gap: 8px; }
  html body.bravo-v3 #bravo-header .site-nav > a:not(.site-nav__reserve), html body.bravo-v3 #bravo-header .site-nav__resources-toggle { padding: 0 4px; font-size: 12.5px; }
  html body.bravo-v3 #bravo-header .site-nav a.site-nav__reserve { margin-left: 6px; padding-inline: 11px; font-size: 12.5px; }
}
html body.bravo-v3 #bravo-header .site-nav__resources-toggle > span { margin-inline: 2px 0; }
html body.bravo-v3 #bravo-header .nv-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
html body.bravo-v3 #bravo-header.is-scrolled { box-shadow: 0 12px 32px #17202a2e; }
/* Compacta sin tocar la geometría (CLS 0): sube unos píxeles y reduce el logo con propiedades de composición. */
html body.bravo-v3 #bravo-header { translate: 0 0; transition: transform .28s ease, opacity .2s ease, background-color .25s ease, box-shadow .25s ease, translate .25s ease; }
html body.bravo-v3 #bravo-header .brand img { transform-origin: left center; transition: scale .25s ease; }
html body.bravo-v3 #bravo-header.is-scrolled { translate: 0 -5px; }
html body.bravo-v3 #bravo-header.is-scrolled .brand img { scale: .88; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html body.bravo-v3 #bravo-header:not(.is-scrolled):not(:has(.site-nav__resources.is-open)):not(:has(.site-nav.is-open)) {
    background: color-mix(in srgb, var(--nav-paper) 80%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6);
  }
}

/* 2026-10-23 (2) · Menús compactos: el panel mide como la barra (mismos bordes izquierdo y derecho), lista tipográfica
   sin cajas de icono, una sola regla de descripciones (ninguna), tarjeta «Reservar consulta» con área, frase de su meta,
   botón y enlace. Sin franjas laterales de acento; la raya fina entre columnas es neutra. */
@media (min-width: 1101px) {
  html body.bravo-v3 #bravo-header :is(.nv-mega, .site-nav__firm-menu) {
    inset: calc(100% + 6px) 0 auto 0; width: auto; padding: 16px 20px; gap: 0 24px; align-items: start;
    grid-template-columns: minmax(0, 1fr) 280px; border: 0; border-radius: 10px;
    box-shadow: 0 0 0 1px var(--nav-line), 0 18px 40px #17202a33; max-height: calc(100dvh - 120px); overflow-y: auto; overscroll-behavior: contain;
  }
  html body.bravo-v3 #bravo-header .site-nav__firm-menu { grid-template-columns: minmax(0, 1fr) 320px; align-items: center; }
  html body.bravo-v3 #bravo-header .site-nav__resources:has(.nv-solo) { position: relative; }
  html body.bravo-v3 #bravo-header .nv-solo { inset: calc(100% + 6px) auto auto 0; width: 320px; grid-template-columns: minmax(0, 1fr); padding: 12px; }
  html body.bravo-v3 #bravo-header .nv-solo .nv-feat { margin: 0; }
  html body.bravo-v3 #bravo-header .nav-editorial p { margin: 0 0 8px; font: 500 20px/1.35 var(--serif); color: var(--nav-ink); }
  html body.bravo-v3 #bravo-header .nav-editorial a { display: inline-flex; align-items: center; min-height: 40px; font-size: 14px; }
}
html body.bravo-v3 #bravo-header .nv-cols { min-width: 0; }
html body.bravo-v3 #bravo-header .nv-group { min-width: 0; }
html body.bravo-v3 #bravo-header .nv-group + .nv-group { margin-top: 12px; }
html body.bravo-v3 #bravo-header .nv-label {
  margin: 0 0 4px; padding: 0 10px; color: var(--v4-gold-text); font-size: .72rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; line-height: 1.6;
}
html body.bravo-v3 #bravo-header .nv-rows.nv-2 { column-count: 2; column-gap: 32px; column-rule: 1px solid var(--nav-line); }
html body.bravo-v3 #bravo-header .site-nav__mega a.nv-item {
  display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 7px 10px; border-radius: 6px;
  font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--nav-ink); white-space: normal; break-inside: avoid;
}
html body.bravo-v3 #bravo-header .site-nav__mega a.nv-item::after {
  content: "→" / ""; margin-left: auto; padding-left: 8px; color: var(--nav-blue); opacity: 0; transform: translateX(-4px);
  transition: opacity .15s ease, transform .15s ease;
}
html body.bravo-v3 #bravo-header .site-nav__mega a.nv-item:is(:hover, :focus-visible) { background: var(--nav-card); color: var(--nav-ink); }
html body.bravo-v3 #bravo-header .site-nav__mega a.nv-item:is(:hover, :focus-visible)::after { opacity: 1; transform: none; }
html body.bravo-v3 #bravo-header .site-nav__mega :is(a.nv-item, a.nv-more, a.nv-btn):focus-visible { outline-offset: -3px; }
html body.bravo-v3 #bravo-header .nv-i { flex: 0 0 auto; width: 17px; height: 17px; color: var(--nav-blue); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
html body.bravo-v3 #bravo-header .nv-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
html body.bravo-v3 #bravo-header .nv-two .nv-group + .nv-group { position: relative; margin-top: 0; }
html body.bravo-v3 #bravo-header .nv-two .nv-group + .nv-group::before { content: ""; position: absolute; left: -24px; top: 0; bottom: 0; width: 1px; background: var(--nav-line); }
html body.bravo-v3 #bravo-header .nv-feat { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 16px; border-radius: 8px; background: var(--nav-card); min-width: 0; }
html body.bravo-v3 #bravo-header .nv-feat strong { font: 500 20px/1.25 var(--serif); color: var(--nav-ink); }
html body.bravo-v3 #bravo-header .nv-feat p { margin: 6px 0 14px; color: var(--nav-muted); font-size: 13px; line-height: 1.5; }
html body.bravo-v3 #bravo-header .site-nav__mega a.nv-btn {
  display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px; border-radius: 4px;
  background: #315f87; color: #fff; font-size: 14px; font-weight: 600;
}
html body.bravo-v3 #bravo-header .site-nav__mega a.nv-btn:hover, html body.bravo-v3 #bravo-header .site-nav__mega a.nv-btn:focus-visible { background: #173a57; color: #fff; }
html body.bravo-v3 #bravo-header .site-nav__mega a.nv-more { display: flex; align-items: center; justify-content: center; min-height: 40px; margin-top: 2px; padding: 0 10px; border-radius: 4px; font-size: 13.5px; font-weight: 600; color: var(--nav-blue); }
html body.bravo-v3 #bravo-header .site-nav__mega a.nv-more:hover, html body.bravo-v3 #bravo-header .site-nav__mega a.nv-more:focus-visible { background: var(--nav-card-hover); color: var(--nav-blue); }
html body.bravo-v3 #bravo-header a.nav-feature { background: var(--nav-card); color: var(--nav-ink); padding: 14px 16px; gap: 2px; border-radius: 8px; }
html body.bravo-v3 #bravo-header a.nav-feature:hover, html body.bravo-v3 #bravo-header a.nav-feature:focus-visible { background: var(--nav-card-hover); color: var(--nav-ink); }
html body.bravo-v3 #bravo-header .nav-feature > span:first-child { color: var(--v4-gold-text); font-size: .72rem; font-weight: 700; letter-spacing: .16em; }
html body.bravo-v3 #bravo-header .nav-feature strong { font: 500 20px/1.25 var(--serif); }
html body.bravo-v3 #bravo-header .nav-feature small { color: var(--nav-muted); font-size: 13px; }
html body.bravo-v3 #bravo-header .nav-feature > span:last-child { margin-top: 6px; color: var(--nav-blue); font-size: 13.5px; font-weight: 600; letter-spacing: 0; text-transform: none; }

@media (max-width: 1100px) {
  html body.bravo-v3 #bravo-header :is(.nv-mega, .nv-solo) { width: 100%; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 4px; max-height: none; overflow: visible; }
  html body.bravo-v3 #bravo-header .nv-two { display: block; }
  html body.bravo-v3 #bravo-header .nv-rows.nv-2 { column-count: 1; }
  html body.bravo-v3 #bravo-header .nv-group + .nv-group { margin-top: 0; }
  html body.bravo-v3 #bravo-header .nv-two .nv-group + .nv-group::before { display: none; }
  html body.bravo-v3 #bravo-header .nv-label { padding: 8px 10px 2px; }
  html body.bravo-v3 #bravo-header .site-nav__mega a.nv-item { min-height: 44px; padding: 6px 10px; }
  html body.bravo-v3 #bravo-header .site-nav__mega a.nv-item::after { display: none; }
  html body.bravo-v3 #bravo-header .nv-feat { order: -1; padding: 0; background: none; }
  html body.bravo-v3 #bravo-header .site-nav__mega .nv-feat > :not(a.nv-more) { display: none; }
  html body.bravo-v3 #bravo-header .site-nav__mega a.nv-more { justify-content: flex-start; min-height: 44px; padding: 6px 10px; font-size: 14px; }
  html body.bravo-v3 #bravo-header .site-nav__firm-menu { grid-template-columns: minmax(0, 1fr); width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html body.bravo-v3 #bravo-header, html body.bravo-v3 #bravo-header .brand img, html body.bravo-v3 #bravo-header .site-nav__mega a.nv-item::after { transition: none; }
}
/* 07/11/2026 · Autor de la web: línea propia bajo la barra legal (aprobado por el despacho el 06/11). */
html[data-tema]:root body.bravo-v3 footer[data-javier-shell="footer"] .site-footer__autor {
  display: flex; justify-content: center;
  margin-top: 14px; padding: 14px 0 4px;
  border-top: 1px solid rgba(23, 32, 42, .10);
}
html[data-tema="oscuro"]:root body.bravo-v3 footer[data-javier-shell="footer"] .site-footer__autor { border-top-color: #36414c; }
html[data-tema]:root body.bravo-v3 footer[data-javier-shell="footer"] .site-footer__autor a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  color: #6b7785; font-size: .76rem; text-decoration: none;
}
html[data-tema="oscuro"]:root body.bravo-v3 footer[data-javier-shell="footer"] .site-footer__autor a { color: #9aa6b2; }
html[data-tema]:root body.bravo-v3 footer[data-javier-shell="footer"] .site-footer__autor-marca {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px 4px 7px; border-radius: 4px;
  background: #0a0a0a; color: #f5f4f0;
  font-family: "Arial Black", "Public Sans", sans-serif; font-weight: 800; font-size: .62rem; letter-spacing: .16em; line-height: 1;
  transition: transform .2s ease;
}
html[data-tema="oscuro"]:root body.bravo-v3 footer[data-javier-shell="footer"] .site-footer__autor-marca { box-shadow: 0 0 0 1px #3a4652; }
html[data-tema]:root body.bravo-v3 footer[data-javier-shell="footer"] .site-footer__autor-marca i { width: 5px; height: 5px; border-radius: 50%; background: #c8f04a; }
html[data-tema]:root body.bravo-v3 footer[data-javier-shell="footer"] .site-footer__autor a:hover .site-footer__autor-marca { transform: translateY(-1px); }
@media (max-width: 820px) {
  html[data-tema]:root body.bravo-v3 footer[data-javier-shell="footer"] .site-footer__autor a { gap: 8px; }
}