/* Inicio y Recursos: composición editorial aislada, assets locales. */
html body.bravo-v3.portada-editorial {
  --ph-paper: #fff;
  --ph-panel: #eef3f6;
  --ph-ink: #172a39;
  --ph-muted: #505e68;
  --ph-line: #ced9e1;
  --ph-blue: #568cbe;
  --ph-link: #285a80;
  --ph-night: #172a39;
}
html:not([data-tema="claro"]) body.bravo-v3.portada-editorial {
  --ph-paper: #15232e;
  --ph-panel: #20323f;
  --ph-ink: #edf3f7;
  --ph-muted: #c4d0d9;
  --ph-line: #445764;
  --ph-link: #b1d3ed;
  --ph-night: #101b24;
}
html body.bravo-v3.portada-editorial main .portada-icon {
  display: block; width: 32px; height: 32px;
  flex: none; color: var(--ph-link);
}
html body.bravo-v3.portada-editorial main :is(a,button,input,summary):focus-visible {
  outline: var(--v4-ring, 3px solid var(--ph-link)); outline-offset: var(--v4-ring-offset, 3px);
}
html body.bravo-v3.portada-editorial main :is(a,button,input,summary) {
  scroll-margin-block: 120px calc(var(--v4-dock-clearance, 160px) + 20px);
}

/* HOME: retrato original, arco arquitectónico y ficha identificativa. */
html body.bravo-v3.portada-home main#contenido > .hero:has(.hero__grid) {
  padding-block: clamp(28px, 4vw, 58px) 56px;
  background: var(--ph-paper) !important;
  border-bottom: 1px solid var(--ph-line);
}
html body.bravo-v3.portada-home .hero__grid {
  grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr);
  align-items: center; gap: clamp(32px, 5vw, 72px);
}
html body.bravo-v3.portada-home .hero__copy h1 {
  font-size: clamp(2.65rem, 4.85vw, 4.3rem);
  font-weight: 500; line-height: 1.08; max-width: 18ch;
  text-wrap: balance; color: var(--ph-ink);
}
html body.bravo-v3.portada-home .hero__copy .eyebrow {
  border-left: 24px solid var(--ph-blue); padding-left: 12px;
  color: var(--ph-link); font-size: .75rem; letter-spacing: .13em;
}
html body.bravo-v3.portada-home .hero__copy .lead {
  color: var(--ph-muted); font-size: 1.0625rem;
  line-height: 1.7; max-width: 52ch; margin-top: 24px;
}
html body.bravo-v3.portada-home .hero__meta {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px; border-color: var(--ph-line); color: var(--ph-muted);
  font-size: .75rem; margin-top: 30px;
}
html body.bravo-v3.portada-home .hero__meta strong {
  color: var(--ph-ink); font-size: .88rem; margin-bottom: 4px;
}
html body.bravo-v3.portada-home .hero a.portrait {
  width: 100%; max-width: 460px;
  height: clamp(360px, calc(100svh - 340px), 520px);
  min-height: 0; aspect-ratio: 440 / 520; border: 0;
  background: var(--ph-panel) !important;
  margin: 0 0 0 auto; isolation: isolate;
}
html body.bravo-v3.portada-home .portrait__background {
  width: 100%; height: 100%; inset: 0; color: var(--ph-blue);
}
html body.bravo-v3.portada-home .portada-arch { fill: var(--ph-blue); }
html body.bravo-v3.portada-home .portada-orbit {
  fill: none; stroke: var(--ph-paper); stroke-width: 1;
}
html body.bravo-v3.portada-home .portada-measure {
  fill: none; stroke: var(--ph-link); stroke-width: 1; opacity: .4;
}
html body.bravo-v3.portada-home .portrait picture {
  inset: 22px 0 48px; z-index: 1;
}
html body.bravo-v3.portada-home .portrait__card {
  display: block; left: 18px; right: 18px; bottom: 18px;
  width: auto; padding: 16px 44px 16px 18px;
  background: var(--ph-paper); color: var(--ph-ink);
  border-left: 3px solid var(--ph-blue);
}
html body.bravo-v3.portada-home .portrait__card strong {
  font-size: clamp(1rem, 1.5vw, 1.4rem); font-weight: 500;
}
html body.bravo-v3.portada-home .portrait__card span {
  font-size: .73rem; color: var(--ph-muted); margin-top: 5px;
}
html body.bravo-v3.portada-home .portrait__card::after {
  content: "↗"; position: absolute; right: 16px; top: 20px;
  font: 400 1.35rem/1 var(--sans); color: var(--ph-link);
}
html body.bravo-v3.portada-home .section {
  padding-block: clamp(44px, 6vw, 80px);
  background: var(--ph-paper) !important; color: var(--ph-ink) !important;
}
html body.bravo-v3.portada-home main .section :is(h2,h3) { color: var(--ph-ink); }
html body.bravo-v3.portada-home main .section :is(.lead,.card p,.area-card p) { color: var(--ph-muted); }
html body.bravo-v3.portada-home main .section-head {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 14px 48px; max-width: none; align-items: end; margin-bottom: 32px;
}
html body.bravo-v3.portada-home main .section-head > .eyebrow { grid-column: 1 / -1; margin: 0; }
html body.bravo-v3.portada-home main .section-head h2 { margin: 0; max-width: 27ch; }
html body.bravo-v3.portada-home main .section-head > .lead { margin: 0; font-size: 1rem; }
/* La FAQ ya tiene retícula propia: evita volver a dividir su encabezado. */
html body.bravo-v3.portada-home main #faq .faq {
  grid-template-columns: minmax(300px, .78fr) minmax(0, 1.22fr);
  gap: clamp(28px, 5vw, 68px);
}
html body.bravo-v3.portada-home main #faq .section-head { display: block; max-width: none; margin: 0; }
html body.bravo-v3.portada-home main #faq .section-head h2 { max-width: 18ch; }
html body.bravo-v3.portada-home main #faq .section-head > .lead { margin-top: 16px; }
html body.bravo-v3.portada-home .portada-situaciones {
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
  border: 1px solid var(--ph-line);
}
html body.bravo-v3.portada-home .portada-situaciones .card {
  position: relative; padding: 26px 22px; gap: 0;
  background: var(--ph-paper); border: 0; border-radius: 0;
  border-right: 1px solid var(--ph-line);
}
html body.bravo-v3.portada-home .portada-situaciones .card:last-child { border-right: 0; }
html body.bravo-v3.portada-home .portada-situaciones .card .portada-icon { margin-bottom: 30px; }
html body.bravo-v3.portada-home .portada-situaciones .card__number {
  position: absolute; top: calc(var(--v4-card-pad, 24px) + 1px); right: var(--v4-card-pad, 24px); color: var(--ph-muted);
  font: 400 .95rem/1.3 var(--serif); margin: 0;
}
html body.bravo-v3.portada-home .portada-situaciones .card h3 { font-size: 1.25rem; }
html body.bravo-v3.portada-home .portada-situaciones .card a { color: var(--ph-link); }
html body.bravo-v3.portada-home .areas { gap: 20px; }
html body.bravo-v3.portada-home .area-card {
  background: var(--ph-paper); border: 1px solid var(--ph-line);
  border-radius: 0; box-shadow: none;
}
html body.bravo-v3.portada-home .area-card--primary {
  background: var(--ph-panel); border-top: 4px solid var(--ph-blue);
  display: flex; flex-direction: column; justify-content: center;
}
html body.bravo-v3.portada-home .area-card a { color: var(--ph-link); }
html body.bravo-v3.portada-home .section--wash { background: var(--ph-panel) !important; }
html body.bravo-v3.portada-home .portada-metodo { gap: 0; border-top: 1px solid var(--ph-line); }
/* 2026-10-23 · Método Bravo: el paso tiene SU relleno en reposo (el mismo que el resto de tarjetas,
   --v4-card-pad) con fondo transparente y sin borde (el trazo es un fondo, no un borde). Así al pasar el ratón solo cambian color y sombra:
   la caja no se mueve (CLS 0) y el texto nunca toca el borde de la sombra. El rombo se centra en el
   trazo dorado de 2 px (top = 1 px - 4 px) y se alinea con el inicio del texto (left = relleno). */
html body.bravo-v3.portada-home .portada-metodo .card {
  padding: var(--v4-card-pad, 24px); border: 0; border-radius: var(--v4-card-radius, 0);
  background: transparent; position: relative;
}
html body.bravo-v3.portada-home .portada-metodo .card::before {
  content: ""; position: absolute; top: -3px; left: var(--v4-card-pad, 24px);
  width: 9px; height: 9px; border-radius: 50%; background: var(--ph-blue);
}
html body.bravo-v3.portada-home .portada-metodo .card__number { color: var(--ph-link); margin-bottom: 18px; }
html body.bravo-v3.portada-home main :is(#firma,#firm) {
  background: var(--ph-night) !important; color: #edf3f7 !important;
}
html body.bravo-v3.portada-home main :is(#firma,#firm) :is(h2,h3) { color: #edf3f7 !important; }
html body.bravo-v3.portada-home main :is(#firma,#firm) .feature-grid__copy p { color: #cbd8e2 !important; }
html body.bravo-v3.portada-home main :is(#firma,#firm) .timeline__item {
  border-color: #415766; color: #edf3f7; padding-block: 16px 0;
}
html body.bravo-v3.portada-home main :is(#firma,#firm) .timeline__year {
  color: #aed0eb; font: 500 1.3rem/1.2 var(--serif);
}
html body.bravo-v3.portada-home .feature-grid__photo {
  padding: 12px; background: var(--ph-blue); border: 0;
}
html body.bravo-v3.portada-home .feature-grid__photo img { aspect-ratio: 1.05; object-fit: cover; }
html body.bravo-v3.portada-home #javier .feature-grid__photo { padding: 0; background: var(--ph-panel); }
html body.bravo-v3.portada-home #javier .feature-grid__photo img { aspect-ratio: 1.35; }
html body.bravo-v3.portada-home #javier .feature-grid__copy p { color: var(--ph-muted) !important; }
html body.bravo-v3.portada-home #javier .signature { color: var(--ph-link) !important; }
html body.bravo-v3.portada-home main :is(#reserva,#booking) {
  background: var(--ph-panel) !important; border-block: 1px solid var(--ph-line);
}
html body.bravo-v3.portada-home .booking p { color: var(--ph-muted); }
html body.bravo-v3.portada-home main :is(#recursos,#resources) { background: var(--ph-panel) !important; }
html body.bravo-v3.portada-home main :is(#recursos,#resources) .section-head :is(.eyebrow,h2) { color: var(--ph-ink); }
html body.bravo-v3.portada-home .resource {
  padding: 28px; border: 1px solid var(--ph-line);
  background: var(--ph-paper); position: relative;
}
html body.bravo-v3.portada-home .resource .portada-icon { margin-bottom: 24px; }
html body.bravo-v3.portada-home .resource p { color: var(--ph-muted); }
html body.bravo-v3.portada-home .resource a { color: var(--ph-link); }

/* RECURSOS: biblioteca ilustrada y catálogo legible por tipo. */
html body.bravo-v3.portada-recursos {
  --r-paper: var(--ph-paper); --r-panel: var(--ph-panel);
  --r-ink: var(--ph-ink); --r-muted: var(--ph-muted);
  --r-blue: var(--ph-blue); --r-blue-deep: var(--ph-link);
  background: var(--ph-paper); color: var(--ph-ink);
}
html body.bravo-v3.portada-recursos .recursos-hero {
  background: var(--ph-paper); padding: 40px 0 48px;
  border-bottom: 1px solid var(--ph-line);
}
html body.bravo-v3.portada-recursos :is(.recursos-hero__inner,.recursos-situaciones__inner,.recursos-catalogo) {
  width: min(1180px, calc(100% - 2 * var(--pad))); max-width: none; margin-inline: auto;
}
html body.bravo-v3.portada-recursos .recursos-hero__inner {
  grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr);
  align-items: center; gap: clamp(32px, 5vw, 72px);
}
html body.bravo-v3.portada-recursos .recursos-kicker { color: var(--ph-link); }
html body.bravo-v3.portada-recursos .recursos-hero .recursos-kicker {
  border-left: 24px solid var(--ph-blue); padding-left: 12px;
  font-size: .75rem; letter-spacing: .13em;
}
html body.bravo-v3.portada-recursos .recursos-hero h1 {
  font-size: clamp(2.85rem, 5.8vw, 5rem); line-height: 1.07;
  font-weight: 500; color: var(--ph-ink); max-width: 13ch;
  text-wrap: balance;
}
html body.bravo-v3.portada-recursos .recursos-hero__lead {
  font-size: clamp(1.35rem, 2.15vw, 1.95rem); line-height: 1.25;
  max-width: 27ch; margin-top: 24px; color: var(--ph-ink);
}
html body.bravo-v3.portada-recursos .recursos-hero__copy {
  font-size: 1.0625rem; line-height: 1.7; color: var(--ph-muted); max-width: 49ch;
}
html body.bravo-v3.portada-recursos .portada-library {
  background: var(--ph-panel); border-bottom: 3px solid var(--ph-blue);
  min-width: 0; position: relative;
}
html body.bravo-v3.portada-recursos .portada-library__art {
  width: 100%; height: auto; display: block; overflow: visible;
}
.portada-library__art .library-orbit { fill: none; stroke: var(--ph-line); }
.portada-library__art .library-route { fill: none; stroke: var(--ph-line); stroke-dasharray: 3 6; }
.portada-library__art .library-page { fill: var(--ph-paper); stroke: var(--ph-link); stroke-width: 1; }
.portada-library__art .library-page--back { fill: var(--ph-blue); stroke: none; }
.portada-library__art .library-page--back path { fill: none; stroke: #fff; stroke-width: 2; }
.portada-library__art .library-page--front path { fill: none; stroke: var(--ph-link); stroke-width: 1.5; }
.portada-library__art .library-heading { stroke-width: 5 !important; }
.portada-library__art .library-seal { fill: var(--ph-panel); }
.portada-library__art .library-tool { fill: var(--ph-night); }
.portada-library__art .library-display { fill: #a9cdea; }
.portada-library__art .library-keys { fill: #e2edf5; }
.portada-library__art .library-book { fill: var(--ph-paper); stroke: var(--ph-link); stroke-width: 1.5; }
.portada-library__art .library-book path + path { fill: none; }
.portada-library__art .library-point { fill: var(--ph-blue); }
html body.bravo-v3.portada-recursos .recursos-hero__aside {
  background: transparent; margin: 0; padding: 0 26px 24px;
  border: 0; color: var(--ph-ink); font-size: .92rem; line-height: 1.55;
}
html body.bravo-v3.portada-recursos .recursos-hero__aside small {
  margin-top: 10px; color: var(--ph-muted); font-size: .75rem;
}
html body.bravo-v3.portada-recursos .recursos-situaciones {
  padding: 48px 0; background: var(--ph-panel);
}
html body.bravo-v3.portada-recursos .recursos-section-intro {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 14px 48px; align-items: end; margin-bottom: 28px;
}
html body.bravo-v3.portada-recursos .recursos-section-intro .recursos-kicker { grid-column: 1 / -1; margin: 0; }
html body.bravo-v3.portada-recursos .recursos-section-intro h2 {
  font-size: clamp(1.8rem, 3.3vw, 2.65rem); line-height: 1.18;
  color: var(--ph-ink); max-width: 27ch;
}
html body.bravo-v3.portada-recursos .recursos-section-intro > p:last-child { margin: 0; color: var(--ph-muted); }
html body.bravo-v3.portada-recursos .recursos-situaciones__grid { gap: 12px; }
html body.bravo-v3.portada-recursos .recursos-situacion {
  display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 6px 14px;
  min-height: 120px; padding: 22px 20px;
  background: var(--ph-paper); color: var(--ph-ink);
  border: 1px solid var(--ph-line); box-shadow: none; border-radius: 4px;
}
html body.bravo-v3.portada-recursos .recursos-situacion .portada-icon { grid-row: 1 / 3; width: 28px; height: 28px; }
html body.bravo-v3.portada-recursos .recursos-situacion strong { font-size: .96rem; line-height: 1.4; }
html body.bravo-v3.portada-recursos .recursos-situacion span { margin: 0; font-size: .8rem; color: var(--ph-muted); }
html body.bravo-v3.portada-recursos .recursos-situacion:is(:hover,:focus-visible) {
  transform: none; border-color: var(--ph-link); background: var(--ph-paper);
}
html body.bravo-v3.portada-recursos .recursos-situacion[aria-pressed="true"] {
  background: var(--ph-night); color: #fff; border-color: var(--ph-night); box-shadow: none;
}
html body.bravo-v3.portada-recursos .recursos-situacion[aria-pressed="true"] :is(span,.portada-icon) { color: #c4e0f5; }
html body.bravo-v3.portada-recursos .recursos-status { color: var(--ph-muted); }
html body.bravo-v3.portada-recursos .recursos-catalogo { padding: 60px 0; scroll-margin-top: 110px; }
html body.bravo-v3.portada-recursos .recursos-catalogo__head {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 32px; align-items: end;
}
html body.bravo-v3.portada-recursos .recursos-catalogo__head h2 {
  font-size: clamp(1.9rem, 3.3vw, 2.8rem); line-height: 1.16; color: var(--ph-ink);
}
html body.bravo-v3.portada-recursos .recursos-tools {
  border-block: 1px solid var(--ph-line); padding: 24px 0;
  grid-template-columns: minmax(200px, .9fr) minmax(0, 1.8fr);
}
html body.bravo-v3.portada-recursos .recursos-search input {
  min-height: 52px; border: 1px solid var(--ph-line); border-radius: 4px;
  background: var(--ph-panel); color: var(--ph-ink);
}
html body.bravo-v3.portada-recursos :is(.recursos-search,.recursos-filter-label,.recursos-count) { color: var(--ph-ink); }
html body.bravo-v3.portada-recursos .recursos-filter-buttons button {
  min-height: 44px; border: 1px solid var(--ph-line); border-radius: 4px; /* QA 2026-10-09: objetivo táctil 44px */
  color: var(--ph-ink); background: var(--ph-paper);
}
html body.bravo-v3.portada-recursos .recursos-filter-buttons button:is([aria-pressed="true"],:hover) {
  background: var(--ph-night); color: #fff; border-color: var(--ph-night);
}
html body.bravo-v3.portada-recursos .recursos-grid { gap: 18px; }
html body.bravo-v3.portada-recursos .recurso-card {
  min-height: 284px; padding: 24px; background: var(--ph-paper);
  border: 1px solid var(--ph-line); border-top: 3px solid var(--ph-blue);
  box-shadow: none; position: relative;
}
html body.bravo-v3.portada-recursos .recurso-card[data-tipo="herramienta"] { background: var(--ph-panel); }
html body.bravo-v3.portada-recursos .recurso-card[data-tipo="actualidad"] { border-top-color: var(--ph-muted); }
html body.bravo-v3.portada-recursos .recurso-card .portada-icon { width: 28px; height: 28px; margin-bottom: 18px; }
html body.bravo-v3.portada-recursos .recurso-card h3 { font-size: clamp(1.2rem, 1.75vw, 1.5rem); line-height: 1.25; color: var(--ph-ink); }
html body.bravo-v3.portada-recursos .recurso-card p { color: var(--ph-muted); }
html body.bravo-v3.portada-recursos .recurso-card a { color: var(--ph-link); min-height: 44px; }
html body.bravo-v3.portada-recursos .recurso-card__eyebrow { color: var(--ph-link); }
html body.bravo-v3.portada-recursos .recurso-card:is(:hover,:focus-within) { border-color: var(--ph-link); }
html body.bravo-v3.portada-recursos .recursos-cta {
  width: min(1180px, calc(100% - 2 * var(--pad))); margin: 0 auto 60px;
  background: var(--ph-night); color: #edf3f7; padding: 40px;
  align-items: center; border-left: 4px solid var(--ph-blue);
}
html body.bravo-v3.portada-recursos .recursos-cta h2 {
  color: #edf3f7; font-size: clamp(1.65rem, 2.8vw, 2.4rem); line-height: 1.2;
}
html body.bravo-v3.portada-recursos .recursos-cta :is(.recursos-kicker,p) { color: #c4d6e4; }
html body.bravo-v3.portada-recursos .recursos-cta__button { background: #e2edf5; color: #172a39; min-height: 48px; }
html body.bravo-v3.portada-recursos .recursos-cta__button:is(:hover,:focus-visible) { background: #fff; color: #172a39; }

@media (max-width: 1000px) {
  html body.bravo-v3.portada-home .portada-situaciones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body.bravo-v3.portada-home .portada-situaciones .card:nth-child(2) { border-right: 0; }
  html body.bravo-v3.portada-home .portada-situaciones .card:nth-child(-n+2) { border-bottom: 1px solid var(--ph-line); }
  html body.bravo-v3.portada-recursos .recursos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body.bravo-v3.portada-recursos .recursos-situaciones__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body.bravo-v3.portada-recursos .recursos-tools { grid-template-columns: 1fr; }
  html body.bravo-v3.portada-recursos .recursos-search { grid-row: auto; }
}
@media (max-width: 820px) {
  html body.bravo-v3.portada-home main #faq .faq { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  html body.bravo-v3.portada-home main #faq .section-head h2 { max-width: 24ch; }
  html body.bravo-v3.portada-home .hero__grid { grid-template-columns: 1fr; gap: 28px; }
  html body.bravo-v3.portada-home .hero__copy h1 { font-size: clamp(2.25rem, 7.6vw, 3.6rem); max-width: 20ch; }
  html body.bravo-v3.portada-home .hero a.portrait { width: min(100%, 390px); margin-inline: auto; }
  html body.bravo-v3.portada-home .hero a.portrait { height: auto; max-height: none; }
  html body.bravo-v3.portada-recursos .portada-library { width: min(100%, 440px); margin-inline: auto; }
  html body.bravo-v3.portada-recursos .recursos-hero h1 { font-size: clamp(2.75rem, 9vw, 4.2rem); max-width: 17ch; }
  html body.bravo-v3.portada-home main .section-head,
  html body.bravo-v3.portada-recursos :is(.recursos-section-intro,.recursos-catalogo__head) { grid-template-columns: 1fr; gap: 14px; }
  html body.bravo-v3.portada-home main .section-head > .eyebrow,
  html body.bravo-v3.portada-recursos .recursos-section-intro .recursos-kicker { grid-column: auto; }
  html body.bravo-v3.portada-home main .section-head :is(h2,.lead) { max-width: 100%; }
  html body.bravo-v3.portada-recursos .recursos-catalogo__head > p { margin: 0; }
}
@media (min-width: 621px) and (max-width: 820px) {
  /* La composición editorial de Recursos cabe en dos columnas en tablet; la
     antigua ruptura a 820 px la convertía en una columna exageradamente alta. */
  html body.bravo-v3.portada-recursos .recursos-hero { padding-inline: 0; }
  html body.bravo-v3.portada-recursos .recursos-hero__inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: clamp(20px, 3vw, 32px);
  }
  html body.bravo-v3.portada-recursos .recursos-hero h1 { font-size: clamp(2.6rem, 6vw, 3.5rem); }
}
@media (max-width: 700px) {
  html body.bravo-v3.portada-recursos .recursos-hero__inner { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 620px) {
  html body.bravo-v3.portada-home main#contenido > .hero:has(.hero__grid) { padding-block: 28px 36px; }
  html body.bravo-v3.portada-home .hero__grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  html body.bravo-v3.portada-home .hero__copy { display: contents; }
  html body.bravo-v3.portada-home .hero__copy > .eyebrow { order: 0; }
  html body.bravo-v3.portada-home .hero__copy > h1 { order: 1; }
  html body.bravo-v3.portada-home .hero a.portrait {
    order: 2; width: 100%; max-width: none; height: clamp(170px, 48vw, 200px);
    aspect-ratio: auto; margin: 20px 0 0;
  }
  html body.bravo-v3.portada-home .portrait__background { width: 46%; }
  html body.bravo-v3.portada-home .portrait picture { inset: 8px 54% 0 0; }
  html body.bravo-v3.portada-home .portrait__card {
    left: 46%; right: 12px; top: 16px; bottom: 16px; padding: 14px 12px;
    display: flex; flex-direction: column; justify-content: center;
  }
  html body.bravo-v3.portada-home .portrait__card strong { font-size: 1rem; line-height: 1.3; }
  html body.bravo-v3.portada-home .portrait__card span { font-size: .7rem; }
  html body.bravo-v3.portada-home .portrait__card::after { position: static; margin-top: 10px; }
  html body.bravo-v3.portada-home .hero__copy > .lead { order: 4; }
  html body.bravo-v3.portada-home .hero__actions { order: 3; }
  html body.bravo-v3.portada-home .hero__meta { order: 5; }
  html body.bravo-v3.portada-home .hero__copy .eyebrow { font-size: .66rem; }
  html body.bravo-v3.portada-home .hero__copy .lead { font-size: .9375rem; line-height: 1.6; margin-top: 16px; }
  html body.bravo-v3.portada-home .hero__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 20px; gap: 10px; }
  html body.bravo-v3.portada-home .hero__actions .button { padding-inline: 10px; font-size: .84rem; }
  html body.bravo-v3.portada-home .hero__meta { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 20px; padding-top: 14px; font-size: .69rem; }
  html body.bravo-v3.portada-home .hero__meta strong { font-size: .75rem; }
  html body.bravo-v3.portada-home .hero__meta > :last-child { grid-column: auto; }
  html body.bravo-v3.portada-home .portada-situaciones { grid-template-columns: 1fr; }
  html body.bravo-v3.portada-home .portada-situaciones .card { border-right: 0; border-bottom: 1px solid var(--ph-line); padding: 22px; }
  html body.bravo-v3.portada-home .portada-situaciones .card:last-child { border-bottom: 0; }
  html body.bravo-v3.portada-home .portada-situaciones .card .portada-icon { margin-bottom: 18px; }
  /* En una columna, convierte los nodos sueltos en una cronología continua. */
  html body.bravo-v3.portada-home .portada-metodo {
    --metodo-node-surface: var(--ph-panel);
    position: relative; gap: 0; padding-left: 30px; border-top: 0;
  }
  html[data-tema="oscuro"] body.bravo-v3.portada-home .portada-metodo {
    --metodo-node-surface: var(--v4-paper, #181c20);
  }
  html body.bravo-v3.portada-home .portada-metodo .card {
    padding: var(--v4-card-pad, 20px); border-top: 0;
  }
  /* El nodo queda a la altura del trazo dorado (centro en y = 1 px) y la guía lo atraviesa. */
  html body.bravo-v3.portada-home .portada-metodo .card::before {
    top: -3px; left: -28px; width: 8px; height: 8px;
    z-index: 1; box-shadow: 0 0 0 4px var(--metodo-node-surface);
  }
  html body.bravo-v3.portada-home .portada-metodo .card::after {
    content: ""; position: absolute; top: 6px; bottom: -6px; left: -24.5px;
    z-index: 0; width: 2px;
    background: color-mix(in srgb, var(--ph-line) 65%, var(--ph-blue));
  }
  html body.bravo-v3.portada-home .portada-metodo .card:last-child::after { content: none; }
  html body.bravo-v3.portada-home .resource { padding: 24px; }
  html body.bravo-v3.portada-recursos .recursos-hero { padding-block: 24px 36px; }
  html body.bravo-v3.portada-recursos :is(.recursos-hero__inner,.recursos-situaciones__inner,.recursos-catalogo) { width: calc(100% - 36px); }
  html body.bravo-v3.portada-recursos .recursos-hero__inner { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  html body.bravo-v3.portada-recursos .recursos-hero__inner > div:first-child { display: contents; }
  html body.bravo-v3.portada-recursos .recursos-hero .recursos-kicker { order: 0; }
  html body.bravo-v3.portada-recursos .recursos-hero h1 { order: 1; }
  html body.bravo-v3.portada-recursos .portada-library {
    order: 2; display: grid; grid-template-columns: 88px minmax(0, 1fr);
    align-items: center; width: 100%; margin: 16px 0 0; padding: 10px;
  }
  html body.bravo-v3.portada-recursos .portada-library__art { width: 88px; }
  html body.bravo-v3.portada-recursos .recursos-hero__lead { order: 3; }
  html body.bravo-v3.portada-recursos .recursos-hero__copy { order: 4; }
  html body.bravo-v3.portada-recursos .recursos-hero .recursos-kicker { font-size: .66rem; }
  html body.bravo-v3.portada-recursos .recursos-hero__lead { font-size: 1.45rem; }
  html body.bravo-v3.portada-recursos .recursos-hero__copy { font-size: 1rem; }
  html body.bravo-v3.portada-recursos .recursos-hero__aside { padding: 8px 4px 8px 10px; font-size: .8rem; line-height: 1.45; }
  html body.bravo-v3.portada-recursos .recursos-hero__aside small { font-size: .66rem; }
  html body.bravo-v3.portada-recursos :is(.recursos-situaciones,.recursos-catalogo) { padding-block: 36px; }
  html body.bravo-v3.portada-recursos :is(.recursos-situaciones__grid,.recursos-grid) { grid-template-columns: 1fr; }
  html body.bravo-v3.portada-recursos .recursos-situacion { min-height: 108px; }
  html body.bravo-v3.portada-recursos .recurso-card { min-height: 0; }
  html body.bravo-v3.portada-recursos .recursos-cta { padding: 28px 22px; margin-bottom: 40px; }
  html body.bravo-v3.portada-recursos .recursos-cta__button { width: 100%; justify-content: center; }
}
@media (max-width: 380px) {
  html body.bravo-v3.portada-home .hero__copy h1 { font-size: 2rem; }
  html body.bravo-v3.portada-home .hero__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  html body.bravo-v3.portada-home .hero__actions .button { padding-inline: 10px; font-size: .78rem; }
  html body.bravo-v3.portada-recursos .recursos-hero h1 { font-size: 2.2rem; max-width: none; }
  html body.bravo-v3.portada-recursos .recursos-hero__lead { font-size: 1.25rem; margin-top: 16px; }
  html body.bravo-v3.portada-recursos .recursos-hero__copy { font-size: .9375rem; margin-top: 16px; }
  html body.bravo-v3.portada-recursos .recursos-hero .recursos-kicker { margin-bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html body.bravo-v3.portada-editorial main *,
  html body.bravo-v3.portada-editorial main *::before,
  html body.bravo-v3.portada-editorial main *::after {
    animation: none !important; transition: none !important; scroll-behavior: auto !important;
  }
}

/* FAQ portada: acordeón compacto y legible, sin marcadores nativos ni filetes decorativos. */
html body.bravo-v3.portada-home main#contenido #faq .faq {
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  column-gap: clamp(32px, 5vw, 64px);
  row-gap: 24px;
  align-items: start;
}
html body.bravo-v3.portada-home main#contenido #faq .faq__content {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 18px;
}
html body.bravo-v3.portada-home main#contenido #faq .faq-list {
  display: grid;
  gap: 8px;
}
html body.bravo-v3.portada-home main#contenido #faq .faq-list details {
  min-width: 0;
  margin: 0;
  padding: 0 18px;
  border: 0 !important;
  border-radius: 8px;
  background: var(--ph-paper);
  color: var(--ph-ink);
  box-shadow: none;
  transition: background-color .16s ease;
}
html body.bravo-v3.portada-home main#contenido #faq .faq-list details:hover {
  background: color-mix(in srgb, var(--ph-paper) 87%, var(--ph-blue));
}
html body.bravo-v3.portada-home main#contenido #faq .faq-list summary {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  padding: 15px 0;
  list-style: none;
  cursor: pointer;
  color: var(--ph-ink);
  font: 600 1.0625rem/1.4 var(--sans);
}
html body.bravo-v3.portada-home main#contenido #faq .faq-list summary::-webkit-details-marker { display: none; }
html body.bravo-v3.portada-home main#contenido #faq .faq-list summary::marker { content: ""; }
html body.bravo-v3.portada-home main#contenido #faq .faq-list summary::after {
  content: "+";
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--ph-panel);
  color: var(--ph-link);
  font: 500 1.3rem/1 var(--sans);
}
html body.bravo-v3.portada-home main#contenido #faq .faq-list details[open] summary::after { content: "−"; }
html body.bravo-v3.portada-home main#contenido #faq .faq-list details > p {
  max-width: 64ch;
  margin: 0 46px 18px 0;
  padding: 0;
  color: var(--ph-muted);
  font-size: 1rem;
  line-height: 1.65;
}
html body.bravo-v3.portada-home main#contenido #faq .faq__all {
  justify-self: start;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--ph-link);
  font-size: 1rem;
  font-weight: 650;
}
html body.bravo-v3.portada-home main#contenido :is(#firma, #firm) .feature-grid__photo {
  position: relative;
  align-self: center;
  justify-self: center;
  /* The box must match the SVG exactly: the logo layer is positioned in % of it. */
  width: min(100%, 480px);
  aspect-ratio: 3 / 2;
  padding: 0;
  background: transparent;
}
html body.bravo-v3.portada-home main#contenido :is(#firma, #firm) .feature-grid__photo > img:first-child {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
  object-fit: fill;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
/* 2026-11-07: imagen del paquete del despacho (trayectoria) en lugar del dibujo con logo: ocupa la caja 3:2 entera. */
html body.bravo-v3.portada-home main#contenido :is(#firma, #firm) .feature-grid__photo > picture { display: block; width: 100%; height: 100%; }
html body.bravo-v3.portada-home main#contenido :is(#firma, #firm) .feature-grid__photo > picture > img {
  display: block; width: 100%; height: 100%; max-height: none; aspect-ratio: auto; object-fit: cover;
  border: 0; border-radius: 0; box-shadow: none;
}
html body.bravo-v3.portada-home main#contenido :is(#firma, #firm) .firma-illustration__logo {
  position: absolute;
  top: 54.8%;
  left: 15.5%;
  width: 60.8%;
  box-sizing: border-box;
  padding: 13px 14px;
  background: #fff;
  height: auto;
  max-height: none;
  aspect-ratio: auto;
  transform: translateY(-50%);
  object-fit: contain;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
@media (max-width: 820px) {
  html body.bravo-v3.portada-home main#contenido #faq .faq { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 620px) {
  html body.bravo-v3.portada-home main#contenido #faq .faq { row-gap: 20px; }
  html body.bravo-v3.portada-home main#contenido #faq .faq__content { gap: 14px; }
  html body.bravo-v3.portada-home main#contenido #faq .faq-list details { padding-inline: 14px; }
  html body.bravo-v3.portada-home main#contenido #faq .faq-list summary { gap: 10px; padding-block: 14px; font-size: 1rem; }
  html body.bravo-v3.portada-home main#contenido #faq .faq-list details > p { margin-right: 40px; font-size: .9375rem; }
  html body.bravo-v3.portada-home main#contenido :is(#firma, #firm) .feature-grid { row-gap: 24px; }
  html body.bravo-v3.portada-home main#contenido :is(#firma, #firm) .feature-grid__photo { width: min(100%, 390px); }
}

/* V4 mobile: keep one outer gutter and give home cards more reading width. */
@media (max-width: 620px) {
  html.v4-legacy body.bravo-v3.portada-recursos.portada-editorial > main#contenido > section:is(.recursos-hero,.recursos-situaciones) {
    width: 100%;
    max-width: none;
  }
  html.v4-legacy body.bravo-v3.portada-home main#contenido :is(.portada-situaciones .card,.resource) {
    padding-inline: 14px;
  }
}

/* The shell hides the fixed contact dock while the footer is visible. Release
   its reserved body space too, otherwise the homepage ends in a blank band. */
html body.bravo-v3.portada-home:has(.bravo-contact.bravo-contact--near-footer) {
  padding-bottom: 0;
}

/* 20/10/2026 · Portada (correo de Javier del 19/10): antetítulo, H1 «Abogados en Barcelona y
   L’Hospitalet», lema debajo en oro y más pequeño, texto, dos botones; y la foto de la V1:
   retrato recortado delante de la lámina de marca (hoja desplazada, fases del procedimiento
   con la primera en oro y el sello del logotipo), sin arco ni ficha superpuesta. */
html body.bravo-v3.portada-home .hero__copy .eyebrow { border-left: 0; padding-left: 0; color: var(--v4-gold-text); }
html body.bravo-v3.portada-home .hero__copy h1 { max-width: 17ch; }
html body.bravo-v3.portada-home .hero__lema {
  margin: 16px 0 0; max-width: 40ch;
  font: italic 400 clamp(1.3rem, 2.2vw, 1.8rem)/1.3 var(--serif);
  color: var(--v4-gold-text); text-wrap: balance;
}
html body.bravo-v3.portada-home .hero__copy .lead { margin-top: 18px; }
html body.bravo-v3.portada-home .hero__meta strong,
html[data-tema="oscuro"] body.bravo-v3.portada-home .hero__meta strong { color: var(--v4-gold-text); }
html body.bravo-v3.portada-home .hero a.portrait.portrait--v1 { background: transparent !important; }
html body.bravo-v3.portada-home .portrait--v1 picture { inset: 0 2% 0 8%; }
html body.bravo-v3.portada-home .portrait--v1 img { filter: none; }
.portada-lamina .lamina-hoja { fill: var(--ph-panel); }
.portada-lamina .lamina-hoja-fondo { fill: none; stroke: var(--ph-line); stroke-width: 1; }
.portada-lamina .lamina-eje { fill: none; stroke: var(--ph-line); stroke-width: 1; }
.portada-lamina .lamina-fase { fill: none; stroke: var(--ph-line); stroke-width: 3; }
.portada-lamina .lamina-fase--oro { stroke: var(--v4-gold); }
.portada-lamina .lamina-punto { fill: var(--ph-panel); stroke: var(--ph-line); stroke-width: 2; }
.portada-lamina .lamina-punto--oro { fill: var(--v4-gold); stroke: none; }
.portada-lamina .lamina-sello { fill: none; stroke: var(--v4-gold); stroke-width: 2; }
@media (max-width: 620px) {
  html body.bravo-v3.portada-home .hero__copy > .hero__lema { order: 2; font-size: 1.2rem; margin-top: 12px; }
  html body.bravo-v3.portada-home .hero__copy > .lead { order: 3; }
  html body.bravo-v3.portada-home .hero__actions { order: 4; }
  html body.bravo-v3.portada-home .hero a.portrait.portrait--v1 {
    order: 5; width: min(100%, 340px); height: auto; aspect-ratio: 440 / 520; margin: 28px auto 0;
  }
  html body.bravo-v3.portada-home .portrait--v1 .portrait__background { width: 100%; }
  html body.bravo-v3.portada-home .portrait--v1 picture { inset: 0 2% 0 8%; }
  html body.bravo-v3.portada-home .hero__meta { order: 6; }
}

/* 20/10/2026 · Recursos Legales en seis apartados (correo de Javier del 19/10): bloque de
   apartados del hub y de cada página, migas, grupos de «Ver todos» y aviso de apartado vacío.
   Lista editorial: filete superior de 1 px entre elementos, sin cajas ni franjas laterales. */
html body.bravo-v3.portada-recursos .recursos-hero--apartado .recursos-hero__inner { grid-template-columns: minmax(0, 1fr); }
html body.bravo-v3.portada-recursos .recursos-hero--apartado h1 { max-width: 20ch; }
html body.bravo-v3.portada-recursos .recursos-hero--apartado .recursos-hero__lead { font-size: clamp(1.15rem, 2vw, 1.6rem); max-width: 42ch; }
.recursos-migas { margin: 0 0 22px; font-size: .85rem; color: var(--ph-muted); }
.recursos-migas a { color: var(--ph-link); }
.recursos-apartados { padding: clamp(40px, 6vw, 80px) 20px; background: var(--ph-paper); }
.recursos-apartados__inner { max-width: 1184px; margin: 0 auto; }
.recursos-apartados h2 { margin: 0 0 24px; font: 500 clamp(1.7rem, 3.2vw, 2.6rem)/1.1 var(--serif); color: var(--ph-ink); }
.recursos-apartados__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 40px); }
.recursos-apartados__lista li { border-top: 1px solid var(--ph-line); }
.recursos-apartados__lista a { display: grid; gap: 6px; padding: 18px 0 22px; min-height: 44px; text-decoration: none; color: var(--ph-ink); touch-action: manipulation; }
.recursos-apartados__lista strong { font: 600 1.15rem/1.3 var(--serif); }
.recursos-apartados__lista span { color: var(--ph-muted); font-size: .92rem; line-height: 1.5; }
.recursos-apartados__lista a:hover strong, .recursos-apartados__lista a:focus-visible strong { text-decoration: underline; text-underline-offset: 3px; }
.recursos-apartados__lista a[aria-current="page"] strong { color: var(--v4-gold-text); }
.recursos-grupo { display: flex; align-items: baseline; gap: 12px; margin: 44px 0 16px; font: 500 clamp(1.4rem, 2.4vw, 1.9rem)/1.2 var(--serif); color: var(--ph-ink); }
.recursos-grupo span { font: 600 .9rem/1 var(--sans); color: var(--v4-gold-text); }
.recursos-vacio { margin: 0; padding: 22px 0; border-top: 1px solid var(--ph-line); color: var(--ph-muted); }
@media (max-width: 900px) { .recursos-apartados__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .recursos-apartados__lista { grid-template-columns: minmax(0, 1fr); } }

/* 20/10/2026 · Segunda tanda (Word de Javier): acciones de la tarjeta (abrir + botón
   contextual hacia la reserva), salida «No encuentro mi situación» y aviso sin resultados. */
.recursos-page .recurso-card__acciones { margin-top: auto; padding-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.recursos-page .recurso-card__acciones a { margin: 0; padding: 0; min-height: 44px; display: inline-flex; align-items: center; touch-action: manipulation; }
.recursos-page .recurso-card .recurso-card__ctx { font-weight: 600; color: var(--v4-gold-text); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--v4-gold) 60%, transparent); text-underline-offset: 3px; }
.recursos-page .recurso-card .recurso-card__ctx:hover, .recursos-page .recurso-card .recurso-card__ctx:focus-visible { color: var(--ph-ink); }
.recursos-page .recursos-situacion { touch-action: manipulation; }
.recursos-salida { margin: 0; color: var(--ph-muted); }
.recursos-salida a { color: var(--ph-link); font-weight: 600; }
.recursos-page .recursos-empty { margin: 16px 0 0; padding: 22px 0; border: 0; border-top: 1px solid var(--ph-line); color: var(--ph-ink); }
.recursos-page .recursos-empty p { margin: 0 0 8px; }
.recursos-page .recursos-empty a { color: var(--ph-link); font-weight: 600; }
.recursos-page .recursos-catalogo:focus { outline: none; }

/* 20/10/2026 · Herramientas en prueba (/prueba-recursos-javier/, noindex). */
.prueba-herramientas .prueba-aviso { margin: 18px 0 0; max-width: 62ch; padding: 14px 0; border-top: 1px solid var(--ph-line); border-bottom: 1px solid var(--ph-line); color: var(--ph-ink); font-size: .95rem; line-height: 1.55; }
.prueba-herramientas .herramienta-cuerpo { max-width: 760px; margin: 0 auto; }
.prueba-lista { list-style: none; margin: 24px 0; padding: 0; }
.prueba-lista li { border-top: 1px solid var(--ph-line); }
.prueba-lista a { display: grid; gap: 6px; padding: 18px 0; text-decoration: none; color: var(--ph-ink); }
.prueba-lista strong { font: 600 1.15rem/1.3 var(--serif); }
.prueba-lista span { color: var(--ph-muted); }
.herramienta fieldset { border: 0; margin: 0 0 22px; padding: 0; }
.herramienta legend { font-weight: 650; margin-bottom: 10px; color: var(--ph-ink); }
.herramienta__opcion { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ph-ink); cursor: pointer; }
.herramienta__opcion input { width: 20px; height: 20px; accent-color: #315f87; }
.herramienta .campo { display: grid; gap: 6px; margin: 0 0 20px; }
.herramienta .campo label { font-weight: 650; color: var(--ph-ink); }
.herramienta .campo small { color: var(--ph-muted); }
.herramienta .campo__error, #alc-error { margin: 0; color: #9b2c2c; font-weight: 600; }
html[data-tema="oscuro"] .herramienta .campo__error, html[data-tema="oscuro"] #alc-error { color: #ffb4a8; }
.herramienta__resultado { margin: 28px 0; padding: 22px 0; border-top: 1px solid var(--ph-line); color: var(--ph-ink); }
.herramienta__resultado h2 { font: 500 1.5rem/1.2 var(--serif); margin: 0 0 12px; }
.herramienta__resultado li { margin: 6px 0; line-height: 1.5; }
.herramienta__cifra { font: 600 clamp(2rem, 6vw, 3rem)/1 var(--serif); color: var(--v4-gold-text); margin: 0 0 10px; }
.herramienta__avisos { margin-top: 28px; color: var(--ph-muted); font-size: .92rem; line-height: 1.55; }
.herramienta__comun { margin: 0 0 24px; color: var(--ph-ink); line-height: 1.55; }

/* Tarjetas de situación sin icono (bloque del Word de Javier): título arriba y apoyo debajo, a todo el ancho. */
html body.bravo-v3.portada-recursos .recursos-situacion:not(:has(.portada-icon)) {
  grid-template-columns: minmax(0, 1fr); align-content: start; gap: 6px; text-align: left;
}

/* Buscador y filtros del catálogo, compactos (2026-10-22): buscador a todo el ancho y cada filtro en una
   línea con su etiqueta; botones de tamaño de interfaz. En móvil, etiqueta encima y botones en una fila
   que se desliza en horizontal. */
html body.bravo-v3.portada-recursos .recursos-tools {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 20px 0;
}
html body.bravo-v3.portada-recursos .recursos-search {
  grid-row: auto; display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 12px;
  font-size: .82rem; font-weight: 700;
}
html body.bravo-v3.portada-recursos .recursos-search input { min-height: 46px; max-width: 640px; font-size: .95rem; padding: 10px 14px; }
html body.bravo-v3.portada-recursos .recursos-filter-group {
  display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 12px;
}
html body.bravo-v3.portada-recursos .recursos-filter-label { min-width: 0; padding: 0; font-size: .82rem; }
html body.bravo-v3.portada-recursos .recursos-filter-buttons { display: flex; flex-wrap: wrap; gap: 8px; width: auto; }
html body.bravo-v3.portada-recursos .recursos-filter-buttons button {
  min-height: 38px; padding: 7px 14px; font-size: .88rem; line-height: 1.2; white-space: nowrap; width: auto;
}
html body.bravo-v3.portada-recursos .recursos-filter-buttons button span { font-size: .8em; opacity: .8; }
@media (max-width: 760px) {
  html body.bravo-v3.portada-recursos :is(.recursos-search, .recursos-filter-group) { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  html body.bravo-v3.portada-recursos .recursos-search input { max-width: none; }
  html body.bravo-v3.portada-recursos .recursos-filter-buttons {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
    margin-inline: -20px; padding-inline: 20px; scroll-padding-inline: 20px;
  }
  html body.bravo-v3.portada-recursos .recursos-filter-buttons::-webkit-scrollbar { display: none; }
  html body.bravo-v3.portada-recursos .recursos-filter-buttons button { min-height: 44px; flex: 0 0 auto; }
}

/* 2026-11-07 · Portada en móvil: el recorte de Javier sobresale de la lámina como en escritorio.
   Con la imagen más estrecha la coronilla quedaba a ras del borde de la hoja y parecía cortada. */
@media (max-width: 620px) {
  html body.bravo-v3.portada-home .portrait--v1 picture { inset: 0 0 0 3%; }
  html body.bravo-v3.portada-home .hero a.portrait.portrait--v1 { margin-top: 0; }
}