/* Bravo Advocats V4 · páginas de área con recursos visuales (2026-11-02).
   Penal, civil y laboral para particulares (ES/CA/EN). Lo aplica
   herramientas/areas_visual.py sobre el HTML; se carga después de v4-diseno.css.
   Colores solo con los tokens del tema (--v4-*), así vale en claro y en oscuro.

   ÍNDICE
   1  Base e iconos
   2  Áreas de trabajo en tarjetas
   3  Datos prácticos (dónde, herramienta, urgencia)
   4  Método en pasos numerados
   5  Carrusel de recursos
   6  Otros servicios
   7  Entrada al bajar
   8  Mosaico de cabecera (civil: sin foto) */

/* 1 · BASE E ICONOS ----------------------------------------------------- */
body.av-page {
  --av-ico-bg: color-mix(in srgb, var(--v4-link) 12%, transparent);
  --av-navy: #1F4468;
  --av-gap: clamp(14px, 2vw, 20px);
}
body.av-page .av-ico {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--av-ico-bg);
  color: var(--v4-link);
}
body.av-page .av-ico svg { width: 24px; height: 24px; }

/* 2 · ÁREAS DE TRABAJO -------------------------------------------------- */
body.av-page .av-areas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: var(--av-gap);
  margin: 1.75rem 0 0;
  padding: 0;
}
body.av-page .av-area {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  margin: 0;
  padding: var(--v4-card-pad, 24px);
  border-radius: var(--v4-radius-card, 10px);
  background: var(--v4-surface);
  transition: transform .35s var(--d-ease, ease), box-shadow .35s var(--d-ease, ease);
}
body.av-page .av-area:hover {
  transform: translateY(-3px);
  box-shadow: var(--v4-shadow-soft);
}
body.av-page .av-area h3 {
  margin: .35rem 0 0;
  color: var(--v4-text);
  font-family: var(--f-serif, Georgia, serif);
  font-size: 1.2rem;
  line-height: 1.25;
}
body.av-page .av-area__resumen {
  margin: 0;
  color: var(--d-gold-text, #7E5F33);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
html[data-tema="oscuro"] body.av-page .av-area__resumen { color: #D8BC8F; }
body.av-page .av-area p:not(.av-area__resumen) {
  margin: 0;
  color: var(--v4-muted);
  font-size: .95rem;
  line-height: 1.55;
}

/* 3 · DATOS PRÁCTICOS --------------------------------------------------- */
body.av-page .av-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--av-gap);
  margin: 2rem 0 0;
}
body.av-page .av-info__card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0;
  border-radius: var(--v4-radius-card, 10px);
  background: var(--v4-surface);
}
body.av-page .av-info__cuerpo {
  display: flex;
  flex: 1;
  gap: 16px;
  align-items: flex-start;
  padding: var(--v4-card-pad, 24px);
}
body.av-page .av-info__cuerpo p {
  margin: 0;
  color: var(--v4-muted);
  font-size: .98rem;
  font-style: normal;
  line-height: 1.6;
}
body.av-page .av-info__cuerpo b { color: var(--v4-text); }
body.av-page .av-info__cuerpo .av-info__etiqueta {
  display: block;
  margin-bottom: .3rem;
  color: var(--v4-text);
  font-size: 1.05rem;
}
body.av-page .av-info__card--urgente { background: var(--av-navy); }
body.av-page .av-info__card--urgente .av-ico { background: rgb(255 255 255 / 14%); color: #fff; }
body.av-page .av-info__card--urgente :is(p, b) { color: #fff; }
body.av-page .av-info__card--urgente a { color: #fff; }

/* 4 · MÉTODO ------------------------------------------------------------ */
body.av-page ol.pasos.av-pasos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--av-gap);
  max-width: none;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: avpaso;
}
body.av-page ol.pasos.av-pasos > li {
  position: relative;
  margin: 0;
  padding: 76px var(--v4-card-pad, 24px) var(--v4-card-pad, 24px) !important;
  border-radius: var(--v4-radius-card, 10px) !important;
  background: var(--v4-surface);
  color: var(--v4-muted);
  font-size: .98rem;
  line-height: 1.6;
  counter-increment: avpaso;
}
body.av-page ol.pasos.av-pasos > li::before {
  content: counter(avpaso, decimal-leading-zero);
  position: absolute;
  top: 18px;
  left: var(--v4-card-pad, 24px);
  width: auto;
  height: auto;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--d-gold, #A9824F);
  font: 700 2.6rem/1 var(--f-serif, Georgia, serif);
  letter-spacing: -.02em;
}
body.av-page ol.pasos.av-pasos > li b {
  display: block;
  margin-bottom: .35rem;
  color: var(--v4-text);
  font-family: var(--f-serif, Georgia, serif);
  font-size: 1.15rem;
}

/* 5 · CARRUSELES -------------------------------------------------------- */
body.av-page .av-carrusel__cabecera {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: flex-end;
  justify-content: space-between;
}
body.av-page .av-carrusel__cabecera h2 { margin: 0; }
body.av-page .av-carrusel__enlace {
  color: var(--v4-link);
  font-weight: 700;
  text-decoration: none;
}
body.av-page .av-carrusel__enlace:hover { text-decoration: underline; }
body.av-page .av-track {
  display: flex !important;
  gap: var(--av-gap) !important;
  margin: 1.5rem 0 0 !important;
  padding: 4px 2px 14px !important;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  grid-template-columns: none !important;
}
body.av-page .av-track::-webkit-scrollbar { display: none; }
body.av-page .av-track > * { scroll-snap-align: start; flex: 0 0 auto; }
body.av-page .av-controles {
  display: flex !important;
  gap: 10px;
  justify-content: flex-end;
  margin-top: .75rem;
}
body.av-page .av-controles button {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 999px;
  background: var(--v4-surface-strong);
  color: var(--v4-text);
  font-size: 1.15rem;
  cursor: pointer;
  transition: background-color .2s ease, opacity .2s ease;
}
body.av-page .av-controles button:hover { background: var(--v4-action); color: var(--v4-action-text, #111); }
body.av-page .av-controles button[disabled] { opacity: .35; cursor: default; }
body.av-page .av-controles button[disabled]:hover { background: var(--v4-surface-strong); color: var(--v4-text); }

/* Recursos: tarjetas con portada */
body.av-page .departamento__resource-grid.av-track > a {
  width: min(78vw, 300px);
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border: 0 !important;
  border-radius: var(--v4-radius-card, 10px) !important;
  background: var(--v4-surface) !important;
}
body.av-page .departamento__resource-grid.av-track > a:hover { box-shadow: var(--v4-shadow-soft); }
body.av-page .av-portada {
  display: grid !important;
  place-items: center;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--av-ico-bg);
  color: var(--v4-link) !important;
}
body.av-page .av-portada img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--d-ease, ease);
}
body.av-page a:hover > .av-portada img { transform: scale(1.04); }
body.av-page .av-portada svg { width: 56px; height: 56px; }
body.av-page .departamento__resource-grid.av-track > a > :is(strong, span:not(.av-portada), em) {
  margin-inline: var(--v4-card-pad, 22px);
}
body.av-page .departamento__resource-grid.av-track > a > strong { margin-top: 1rem; }
body.av-page .departamento__resource-grid.av-track > a > em { margin-bottom: 1.2rem; padding-top: .4rem; }
body.av-page .departamento__resource-grid.av-track > a.departamento__resource--featured {
  background: var(--av-navy) !important;
}
body.av-page a.departamento__resource--featured .av-portada {
  background: rgb(255 255 255 / 10%);
  color: #fff !important;
}

/* 6 · OTROS SERVICIOS --------------------------------------------------- */
body.av-page ul.enlaces.av-servicios {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: 12px;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}
body.av-page ul.av-servicios li { margin: 0; padding: 0; border: 0; }
body.av-page ul.av-servicios li::before { content: none; }
body.av-page ul.av-servicios a {
  display: flex;
  gap: 14px;
  align-items: center;
  height: 100%;
  padding: 14px 18px 14px 14px;
  border-radius: var(--v4-radius-card, 10px);
  background: var(--v4-surface);
  color: var(--v4-text);
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  transition: transform .3s var(--d-ease, ease), box-shadow .3s var(--d-ease, ease);
}
body.av-page ul.av-servicios a::after { content: none !important; }
body.av-page ul.av-servicios a:hover { transform: translateY(-2px); box-shadow: var(--v4-shadow-soft); }
body.av-page ul.av-servicios .av-ico { width: 42px; height: 42px; border-radius: 10px; }
body.av-page ul.av-servicios .av-ico svg { width: 21px; height: 21px; }

/* 7 · ENTRADA AL BAJAR -------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html.js body.av-page [data-av-entra] > * {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s var(--d-ease, ease), transform .6s var(--d-ease, ease);
  }
  html.js body.av-page [data-av-entra].av-visto > * { opacity: 1; transform: none; }
  html.js body.av-page [data-av-entra].av-visto > *:nth-child(2) { transition-delay: .06s; }
  html.js body.av-page [data-av-entra].av-visto > *:nth-child(3) { transition-delay: .12s; }
  html.js body.av-page [data-av-entra].av-visto > *:nth-child(4) { transition-delay: .18s; }
  html.js body.av-page [data-av-entra].av-visto > *:nth-child(5) { transition-delay: .24s; }
  html.js body.av-page [data-av-entra].av-visto > *:nth-child(n+6) { transition-delay: .3s; }
}

/* 8 · MOSAICO DE CABECERA ----------------------------------------------- */
html body.bravo-v3.av-page .av-mosaico {
  display: grid;
  grid-column: 2;
  grid-row: 1 / span 4;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-self: center;
}
body.av-page .av-mosaico__tesela {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  min-height: 150px;
  padding: 22px;
  border-radius: var(--v4-radius-card, 10px);
  background: var(--v4-surface);
  color: var(--v4-text);
  font-family: var(--f-serif, Georgia, serif);
  font-size: 1.15rem;
  line-height: 1.25;
}
body.av-page .av-mosaico__tesela:nth-child(1),
body.av-page .av-mosaico__tesela:nth-child(4) { background: var(--av-navy); color: #fff; }
body.av-page .av-mosaico__tesela:nth-child(1) .av-ico,
body.av-page .av-mosaico__tesela:nth-child(4) .av-ico { background: rgb(255 255 255 / 14%); color: #fff; }
html[data-tema="oscuro"] body.av-page .av-mosaico__tesela:nth-child(1),
html[data-tema="oscuro"] body.av-page .av-mosaico__tesela:nth-child(4) { background: var(--v4-surface-strong); }
@media (max-width: 760px) {
  html body.bravo-v3.av-page .av-mosaico { grid-column: 1; grid-row: auto; margin-top: 2rem; }
  body.av-page .av-mosaico__tesela { min-height: 120px; gap: 18px; padding: 18px; font-size: 1.02rem; }
}

/* La cabecera ya lleva foto o mosaico: fuera el emblema de trazo de fondo. */
html body.bravo-v3.av-page > .areas-v3-hero::after { content: none; }

/* 9 · PLANTILLA ANTIGUA (header.hero) ------------------------------------ */
html body.bravo-v3.av-page > header.hero.av-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);
  column-gap: clamp(28px, 5vw, 72px);
  align-items: center;
  text-align: left;
}
html body.bravo-v3.av-page > header.hero.av-hero::before,
html body.bravo-v3.av-page > header.hero.av-hero::after { content: none; }
html body.bravo-v3.av-page > header.hero.av-hero .av-mosaico { grid-column: 2; grid-row: 1; }
html body.bravo-v3.av-page > header.hero.av-hero .av-hero__texto > * { margin-left: 0; margin-right: 0; }
html body.bravo-v3.av-page > header.hero.av-hero .hero__botones { justify-content: flex-start; }
@media (max-width: 760px) {
  html body.bravo-v3.av-page > header.hero.av-hero { grid-template-columns: minmax(0, 1fr); }
  html body.bravo-v3.av-page > header.hero.av-hero .av-mosaico { grid-column: 1; grid-row: auto; }
}

/* Cabecera que ya trae foto (perfil de Javier, herramientas/legacy_visual.py cabecera_con_foto):
   la foto ocupa la columna del mosaico. El retrato es vertical (2:3), así que la columna es más estrecha. */
html body.bravo-v3.av-page > header.hero.av-hero:has(> .av-hero__foto) {
  grid-template-columns: minmax(0, 1.3fr) minmax(260px, .7fr);
  background: transparent;
}
html body.bravo-v3.av-page > header.hero.av-hero > .av-hero__foto {
  grid-column: 2; grid-row: 1; justify-self: end; align-self: center;
  width: 100%; max-width: 440px; margin: 0;
}
html body.bravo-v3.av-page > header.hero.av-hero > .av-hero__foto img {
  display: block; width: 100%; max-width: 100%; height: auto; max-height: none;
  aspect-ratio: 800 / 1199; object-fit: cover; border-radius: var(--v4-radius-card, 10px);
}
html body.bravo-v3.av-page > header.hero.av-hero:has(> .av-hero__foto) .av-hero__texto .tag { max-width: none; padding-top: 0; }
html body.bravo-v3.av-page > header.hero.av-hero:has(> .av-hero__foto) .av-hero__texto h1 { max-width: 18ch; }
html body.bravo-v3.av-page > header.hero.av-hero:has(> .av-hero__foto) .av-hero__texto .credenciales { padding-bottom: 0; }
@media (max-width: 760px) {
  html body.bravo-v3.av-page > header.hero.av-hero:has(> .av-hero__foto) { grid-template-columns: minmax(0, 1fr); }
  html body.bravo-v3.av-page > header.hero.av-hero > .av-hero__foto {
    grid-column: 1; grid-row: auto; order: 0; justify-self: start; max-width: 300px; margin-top: 28px;
  }
}

/* Materias con lista: cada punto con un check */
body.av-page .av-areas--lista { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
/* Perfil de Javier: cuatro materias, en dos por fila (en tres columnas la cuarta quedaba sola). */
@media (min-width: 761px) {
  body.av-page.ip-javier .av-areas--lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* El título de «páginas relacionadas» es un antetítulo de 11 px: sin el tope de 20ch de los h2 de impulso-paginas,
   que lo partía en dos líneas («Áreas y / páginas relacionadas»). */
html body.av-page main section.bv-rel > h2 { max-width: none; }
body.av-page .av-area ul {
  display: grid;
  gap: .45rem;
  margin: .2rem 0 0;
  padding: 0;
  list-style: none;
}
body.av-page .av-area li {
  position: relative;
  margin: 0;
  padding: 0 0 0 1.6rem;
  border: 0;
  color: var(--v4-muted);
  font-size: .95rem;
  line-height: 1.5;
}
body.av-page .av-area li::before {
  content: "";
  position: absolute;
  top: .3em;
  left: 0;
  width: 1rem;
  height: 1rem;
  border: 0;
  border-radius: 0;
  background: var(--v4-link);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%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 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* 10 · PÁGINAS DE SERVICIO ---------------------------------------------- */
body.av-page .av-info--tres { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); margin-top: 1.25rem; }
body.av-page ul.av-puntos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: var(--av-gap);
  margin: 1.5rem 0;
  padding: 0;
  list-style: none;
}
body.av-page ul.av-puntos > li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin: 0;
  padding: var(--v4-card-pad, 22px) !important;
  border: 0 !important;
  border-radius: var(--v4-radius-card, 10px) !important;
  background: var(--v4-surface);
}
body.av-page ul.av-puntos > li::before { content: none !important; }
body.av-page ul.av-puntos .av-ico { width: 36px; height: 36px; border-radius: 999px; }
body.av-page ul.av-puntos .av-ico svg { width: 18px; height: 18px; }
body.av-page ul.av-puntos p { margin: 0; color: var(--v4-muted); font-size: .96rem; line-height: 1.55; }
body.av-page ul.av-puntos p > b:first-child { display: block; margin-bottom: .25rem; color: var(--v4-text); font-family: var(--f-serif, Georgia, serif); font-size: 1.08rem; }

/* «Seguir leyendo» en carrusel */
body.av-page .av-rel .av-rel__item {
  display: flex;
  flex-direction: column;
  width: min(72vw, 270px);
  overflow: hidden;
  border-radius: var(--v4-radius-card, 10px);
  background: var(--v4-surface);
  color: var(--v4-text);
  text-decoration: none;
  transition: transform .35s var(--d-ease, ease), box-shadow .35s var(--d-ease, ease);
}
body.av-page .av-rel .av-rel__item:hover { transform: translateY(-3px); box-shadow: var(--v4-shadow-soft); }
body.av-page .av-rel .av-rel__item strong {
  padding: 1rem 1.15rem 1.25rem;
  font-family: var(--f-serif, Georgia, serif);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.3;
}
body.av-page .av-rel .av-rel__item::after { content: none !important; }

/* 11 · CAPÍTULOS DE PROSA (icono de tema + texto) ------------------------ */
body.av-page section.av-capitulo {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  column-gap: clamp(18px, 3vw, 32px);
  align-items: start;
}
body.av-page section.av-capitulo > * { grid-column: 2; }
body.av-page section.av-capitulo > .av-ico {
  grid-column: 1;
  grid-row: 1 / span 12;
  width: 64px;
  height: 64px;
  margin-top: .2rem;
  border-radius: 16px;
}
body.av-page section.av-capitulo > .av-ico svg { width: 30px; height: 30px; }
@media (max-width: 640px) {
  body.av-page section.av-capitulo { grid-template-columns: minmax(0, 1fr); }
  body.av-page section.av-capitulo > * { grid-column: 1; }
  body.av-page section.av-capitulo > .av-ico { grid-row: auto; width: 52px; height: 52px; margin-bottom: .9rem; }
}

/* 12 · EQUIPO: departamentos en tarjetas -------------------------------- */
body.av-page ol.av-equipo {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: var(--av-gap);
  padding: 0;
  list-style: none;
}
body.av-page ol.av-equipo > li {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin: 0;
  padding: var(--v4-card-pad, 24px) !important;
  border: 0 !important;
  border-radius: var(--v4-radius-card, 10px) !important;
  background: var(--v4-surface);
}
body.av-page ol.av-equipo > li::before { content: none !important; }
body.av-page ol.av-equipo > li > .av-ico { margin-bottom: .4rem; }
body.av-page ol.av-equipo > li > * { margin-top: 0; margin-bottom: 0; }
body.av-page ol.av-equipo .eq-links { margin-top: auto; padding-top: .5rem; }

/* 13 · REJILLAS SIN TARJETAS SUELTAS (js/v4-composicion.js) -------------------- */
/* El enlace de «Otras áreas» ocupa toda su celda: con la rejilla equilibrada las celdas son
   más anchas y el ajuste a su texto de .imp-sub (impulso.css) dejaba tarjetas de anchos distintos. */
body.av-page ul.av-servicios a.imp-sub { width: auto; place-self: stretch; justify-content: flex-start; }

/* Tarjeta de urgencia (azul noche): el texto iba en tinta oscura sobre el azul en las páginas de área
   (areas-v3.css pinta todos los p del #contenido y .av-info__etiqueta ganaba al blanco). */
html body.av-page:not(#av) .av-info__card--urgente :is(p, b, .av-info__etiqueta, strong) { color: #fff; }
html body.av-page:not(#av) .av-info__card--urgente a { color: #fff; text-decoration-color: rgb(255 255 255 / 60%); }

/* Recursos de área en tira (.av-track > .resource-card): las fichas tomaban el ancho de su texto en una
   línea. En escritorio salían de anchos distintos y sin llegar al canto; en el móvil, más anchas que la
   pantalla y con el texto cortado. Ahora se reparten el ancho, y en el móvil asoma la siguiente. */
body.av-page .av-track > .resource-card { flex: 1 0 min(85%, 320px); min-width: 0; }

/* Áreas de trabajo en el móvil: con seis o más materias, tira horizontal con la siguiente asomando
   (12 tarjetas apiladas eran más de 3.000 px de scroll). Desplazamiento nativo con el dedo y con el
   teclado; sin flechas ni movimiento propio. */
@media (max-width: 620px) {
  body.av-page .av-areas:has(> :nth-child(6)) {
    display: flex;
    gap: 12px;
    padding: 4px 0 16px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  body.av-page .av-areas:has(> :nth-child(6))::-webkit-scrollbar { display: none; }
  body.av-page .av-areas:has(> :nth-child(6)) > * { flex: 0 0 84%; min-width: 0; scroll-snap-align: start; }
}

/* 2026-11-07 · Tarjetas «Recursos para orientarse»: la ilustración del enlace repetía el
   icono de la tarjeta y, metida en un enlace alineado a la izquierda, medía según el texto
   del enlace (huecos y pies de alturas distintas en móvil). Fuera; el enlace va al pie. */
html body.av-page:not(#av) .resource-card > a > .av-portada:not(:has(img)) { display: none !important; }
html body.av-page:not(#av) .resource-card { display: flex; flex-direction: column; }
html body.av-page:not(#av) .resource-card > a:last-child { margin-top: auto; padding-top: .9rem; }