/* ---------------------------------------------------------------------------
   Marca de Abogados Dolores 70 sobre el sistema visual de la referencia.

   El fichero `style.css` NO se toca: se carga tal cual y aquí sólo se
   redefinen los tokens de color, que es lo único que cambia de identidad.
   Así se ve de un vistazo qué es suyo y qué es nuestro, y actualizar su hoja
   no obliga a rehacer nada.

   El acento de la referencia —su azul marino— NO pasa a un color: el cliente
   quitó el naranja el 2026-09-22 y el acento se resuelve según el fondo.
   Sobre claro, el negro de la marca; sobre oscuro, blanco.

   Su hoja ya separa esos dos papeles en variables distintas, así que el
   cambio cabe entero en los tokens:

     · `--dark-blue` y `--medium-blue` son el acento sobre fondo CLARO
       (epígrafes, filetes, viñetas, botones, el círculo de las flechas)
     · `--baby-blue` es el acento sobre fondo OSCURO (hover y elemento activo
       de submenús, menú móvil y pie, y la cabecera sobre el héroe)

   Consecuencia: donde el texto ya era negro sobre
   claro o blanco sobre oscuro, el hover deja de cambiar de color.
   --------------------------------------------------------------------------- */

html {
  --dark-blue: var(--main-dark);
  --medium-blue: var(--main-dark);
  --baby-blue: #fff;
  /* El negro de los fondos —submenú y menú móvil— va aparte de `--main-dark`.
     `--main-dark` es el color del TEXTO, y en modo oscuro se invierte; estos
     fondos no: siguen siendo negros con el texto en blanco encima. */
  --marca-negro: #070707;
}


/* ---------------------------------------------------------------------------
   La marca tipográfica, en el hueco que la referencia reservaba a su logotipo.

   Su `#logo` mide 200 px (275 ≥768) dentro de una cabecera de 112 px, y su
   `#animationLogo` centra la marca al 50 % del héroe, en blanco. Se respetan
   esas cajas: lo que cambia es que la nuestra es tipográfica, no un SVG.

   Ojo: la regla que oculta el logotipo en la portada hasta hacer scroll
   —`body:not(.scrolled) #header #logo { opacity: 0 }`— apunta a `#logo`, no a
   su `svg`, así que funciona igual con nuestra marca. No hay que replicarla.
   --------------------------------------------------------------------------- */

#logo a {
  display: block;
  text-decoration: none;
  color: inherit;
}
/* La marca es «ABOGADOS» encima de «Dolores 70», como el rótulo real del
   escaparate. Entra en la caja de 275x48 de su logotipo apretando el
   interlineado: el antetítulo pesa 11 px y el nombre 30, que suman lo que
   ocupaba su wordmark de una línea. */
#logo .marca-antetitulo {
  display: block;
  font: 500 11px/1 "DM Sans", Arial, sans-serif;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--main-dark);
}
#logo .marca-nombre {
  display: block;
  margin-top: 3px;
  font: 400 30px/1 "DM Serif Display", Georgia, serif;
  color: var(--main-dark);
  white-space: nowrap;
}
#logo .marca-filete { display: none; }
@media (min-width: 768px) {
  #logo .marca-antetitulo { font-size: 12px; letter-spacing: 0.38em; }
  #logo .marca-nombre { font-size: 38px; }
}

/* La marca grande sobre el héroe. Su SVG iba al 50 % con tope de 700 px; aquí
   la escala la marca la tipografía, con los mismos límites de tamaño. */
/* Sobre el héroe, la misma marca en grande y en blanco. Su logotipo iba al
   50 % del ancho con tope de 700 px; aquí la escala la marca la tipografía,
   con los mismos límites. */
#animationLogo {
  flex-direction: column;
}
#animationLogo .marca-antetitulo {
  font: 500 clamp(11px, 1.3vw, 19px) / 1 "DM Sans", Arial, sans-serif;
  letter-spacing: 0.44em;
  text-transform: uppercase;
  color: #fff;
}
#animationLogo .marca-nombre {
  margin-top: 0.12em;
  font: 400 clamp(42px, 6.4vw, 100px) / 1 "DM Serif Display", Georgia, serif;
  color: #fff;
  white-space: nowrap;
}
#animationLogo .marca-filete { display: none; }

/* Al abrir el menú móvil el fondo es oscuro: la marca va en claro, como hacía
   la suya (`body.mobileActive #logo svg path { fill:#fff }`). */
@media (max-width: 919px) {
  body.mobileActive #logo .marca-nombre { color: #fff; }
  body.mobileActive #logo .marca-antetitulo { color: var(--rules); }
}

/* ---------------------------------------------------------------------------
   El tinte de hover.

   La referencia pinta el fondo de la tarjeta destacada y de los encabezados
   desplegables con #d7e5ff, que es SU azul de acento aclarado al 92 % de
   luminosidad. Con el acento en negro, el mismo aclarado da un gris neutro:
   #ebebeb. Sobre él el epígrafe, ya en negro, da más de 16:1.
   --------------------------------------------------------------------------- */

.expandableHeading button:is(:hover, :focus),
#bottomContent :not(#lowerContent) .expandableHeading button:is(:hover, :focus),
#bottomSpotlights a:is(:hover, :focus) {
  background: #ebebeb !important;
}


/* ---------------------------------------------------------------------------
   El fondo de los submenús y del menú móvil.

   La referencia lo lleva fijo en #3b2b3a, un morado apagado que armoniza con
   su azul marino. Aquí va el negro de la marca, que es además el color del
   rótulo real del escaparate. Sobre él el texto en blanco da 18,9:1.
   --------------------------------------------------------------------------- */

@media (min-width: 1350px) {
  #mainNav > ul ul {
    background: var(--marca-negro);
  }
}

@media (max-width: 1349px) {
  #mainNav {
    background: var(--marca-negro);
  }
}

/* ---------------------------------------------------------------------------
   Marcador de retrato, mientras no haya fotos del equipo.

   Ocupa exactamente la caja que su diseño reserva a la fotografía
   —`.bioList .photo` con `aspect-ratio: 362/263`—, así que la rejilla no se
   mueve cuando lleguen las de verdad: se sustituye el marcador por un `img` y
   ya está.

   Va en el papel de la marca con las iniciales en la tipografía de titular,
   apagadas. Se lee como «aquí falta una foto», no como un elemento de diseño,
   que es justo lo que tiene que comunicar.
   --------------------------------------------------------------------------- */

.bioList .photo:has(.retrato-pendiente) {
  background: #efece9;
  border: 1px solid var(--rules);
  box-sizing: border-box;
}
.retrato-pendiente {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font: 400 clamp(38px, 4.6vw, 64px) / 1 "DM Serif Display", Georgia, serif;
  letter-spacing: 0.04em;
  color: #b9b0aa;
  user-select: none;
}

/* ---------------------------------------------------------------------------
   La lista de datos de los documentos legales.

   Su plantilla legal es prosa suelta y no contempla pares clave-valor, así que
   el `dl` con los datos del titular y del responsable necesita su propio
   estilo. Se compone con los mismos valores que ellos usan para el cuerpo, para
   que no cante dentro de la página.

   Los datos que el despacho todavía no ha dado salen con guiones y marcados en
   el color de error, no en gris: un hueco que no se ve es un hueco que nadie
   rellena, y aquí el NIF lo exige el artículo 10 de la LSSI.
   --------------------------------------------------------------------------- */

#mainContent dl.datos {
  display: grid;
  grid-template-columns: minmax(160px, auto) 1fr;
  gap: 8px 28px;
  margin: 24px 0 32px;
}
#mainContent dl.datos dt {
  font-weight: 500;
  color: var(--warm-gray);
}
#mainContent dl.datos dd {
  margin: 0;
}
#mainContent dl.datos dd.dato-pendiente {
  color: #a32014;
  letter-spacing: 0.12em;
}


/* ---------------------------------------------------------------------------
   Los iconos sociales del pie.

   La referencia los pinta como un círculo relleno de acento con el glifo en
   blanco, y al pasar el ratón los invierte. El pie es oscuro (#212121), así
   que aquí el acento es el blanco: círculo blanco y glifo en el color del
   pie. Al pasar el ratón se invierte igual que en la suya: el círculo se
   vacía, queda el aro, y el glifo pasa a blanco.
   --------------------------------------------------------------------------- */

#footerSocial .svgBackground,
#footerSocial .svgCircle {
  fill: #fff;
}
#footerSocial .svgInnards {
  fill: #212121;
}
#footerSocial a:is(:hover, :focus) .svgBackground {
  fill: #212121;
}
#footerSocial a:is(:hover, :focus) .svgInnards {
  fill: #fff;
}


/* ---------------------------------------------------------------------------
   El cambio de tema.

   Un solo botón, sin rótulo ni conmutador: la luna en modo claro —lo que
   pasará si se pulsa— y el sol en oscuro. Toma prestada la caja del buscador
   de la referencia: mismo tamaño, misma altura y el sitio exacto que su lupa
   ocupaba, para que los dos iconos se lean como pareja. La lupa y el menú se
   corren a la izquierda lo justo, conservando la separación de 19 px que hay
   entre ellos; es el único punto donde este sitio mueve algo de la
   referencia, y está declarado en `portado.mjs`.

   Por debajo de 1350 px no hay sitio —ahí están la lupa y el botón de menú—,
   así que `main.js` lo baja al menú desplegable y allí sale con su rótulo.
   --------------------------------------------------------------------------- */

#tema {
  display: flex;
  align-items: center;
  align-self: flex-start;
  gap: 16px;
  margin: 44px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
#tema svg {
  display: block;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  fill: currentColor;
  transition: opacity 0.2s ease;
}
#tema:is(:hover, :focus-visible) svg {
  opacity: 0.6;
}
#tema:focus-visible {
  outline: 1px dashed currentColor;
  outline-offset: 6px;
}
/* Cada tema enseña su icono y su rótulo; el otro no existe. */
#tema .sol,
#tema .temaTexto--oscuro,
html[data-tema="oscuro"] #tema .luna,
html[data-tema="oscuro"] #tema .temaTexto--claro {
  display: none;
}
html[data-tema="oscuro"] #tema .sol {
  display: block;
}

/* Dentro del menú desplegable, con rótulo y en claro: ese fondo es negro en
   los dos temas. */
body.mobileVersion #mainNav #tema {
  color: #fff;
}
.temaTexto {
  font-size: 19px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
#header > #tema .temaTexto {
  /* En la cabecera manda el icono solo; el texto queda para lectores. */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (min-width: 1350px) {
  #mainNav {
    right: 201px;
  }
  #searchJump {
    right: 145px;
  }
  #tema {
    position: absolute;
    z-index: 10000;
    top: 41px;
    right: 80px;
    width: 37px;
    height: 37px;
    margin: 0;
    justify-content: center;
  }
  #tema svg {
    /* Al tamaño de la lupa, que ocupa 30 px de los 37 de su caja. */
    width: 30px;
    height: 30px;
  }
}