/* ==========================================================================
   SORIANO OLONA PROCURADORES — Hoja de estilos
   --------------------------------------------------------------------------
   Índice:
     1. Tipografías
     2. Colores y medidas
     3. Reinicio
     4. Base: texto, enlaces, foco
     5. Contenedores y espaciados
     6. Cabecera
     7. Pie
     8. Botones
     9. Antetítulos y títulos de sección
    10. Iconos
    11. Inicio: hero
    12. Inicio: barra de datos
    13. Inicio: quién soy
    14. Inicio: lo que ofrezco
    15. Inicio: ventajas
    16. Inicio: contacto y formulario
    17. Páginas legales
    18. Servicios: página /servicios-en-madrid
    19. Página 404 (dirección que no existe)
    20. Movimiento reducido

   Para cambiar un color en todo el sitio, cámbialo solo en la sección 2.
   ========================================================================== */


/* ==========================================================================
   1. TIPOGRAFÍAS
   Alojadas en /assets/fonts/ (no se cargan desde Google). Licencia SIL Open
   Font License 1.1: ver /assets/fonts/LICENCIAS.txt.
   Solo se incluyen los grosores que usa el sitio y el juego de caracteres
   latino (incluye tildes, ñ, ü, ¿, ¡, €).
   ========================================================================== */

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-600.woff2") format("woff2");
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-600-cursiva.woff2") format("woff2");
}

/* Jost es una tipografía "variable": un solo archivo con todos los grosores.
   Se limita a los que usa el sitio: 300 (texto) y 500 (resaltados). */
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("/assets/fonts/jost.woff2") format("woff2");
}


/* ==========================================================================
   2. COLORES Y MEDIDAS
   ========================================================================== */

:root {
  /* Paleta corporativa */
  --sage:       #6b8f71;  /* verde salvia principal */
  --sage-dark:  #4a6b50;  /* acentos, hover, fondos oscuros */
  --sage-light: #8aab90;
  --cream:      #f0ede6;  /* fondo corporativo */
  --cream-dark: #e4e0d8;
  --text:       #2c2c2c;
  --text-light: #6b6b6b;
  --white:      #ffffff;

  /* Línea fina usada en separadores */
  --linea: rgba(107, 143, 113, 0.25);

  /* Fondo de la barra de datos de la home: verde oscuro, con etiquetas
     al 85 % de blanco (4,9:1). El diseño original usaba --sage, pero las
     etiquetas no llegaban al contraste mínimo ni en blanco puro (3,6:1).
     Si con la página completa la barra pesara demasiado, la alternativa
     estudiada es #5a7d60 con etiquetas en blanco puro (4,6:1). */
  --barra-datos-fondo: var(--sage-dark);
  --barra-datos-etiqueta: var(--texto-claro-sobre-oscuro);

  /* Borde de los campos del formulario: gris cálido con contraste 3,7:1
     sobre blanco (el del diseño, #d8d4cc, no se distinguía: 1,5:1) */
  --borde-campo: #8a857b;

  /* Rojo para errores del formulario: 7,4:1 sobre blanco, 6,3:1 sobre crema */
  --error: #a3261b;

  /* Texto claro sobre fondo verde oscuro.
     85 % de opacidad: contraste 4,9:1 (mínimo de accesibilidad: 4,5:1). */
  --texto-claro-sobre-oscuro: rgba(255, 255, 255, 0.85);

  /* Tipografías, con alternativas por si no cargan */
  --fuente-titulos: "Cormorant Garamond", Garamond, Georgia, "Times New Roman", serif;
  --fuente-texto: "Jost", "Helvetica Neue", Arial, sans-serif;

  /* Logo de la cabecera (decisión de la sección 6 del briefing) */
  --logo-alto: 74px;
  --cabecera-padding-y: 16px;
  --cabecera-padding-x: 60px;
  /* Alto total de la cabecera: logo + relleno arriba y abajo + línea inferior */
  --cabecera-alto: calc(var(--logo-alto) + 2 * var(--cabecera-padding-y) + 1px);

  /* Espaciado de las secciones */
  --seccion-padding-y: 120px;
  --seccion-padding-x: 80px;
}

@media (max-width: 900px) {
  :root {
    --logo-alto: 56px;
    --cabecera-padding-y: 14px;
    --cabecera-padding-x: 20px;
    --seccion-padding-y: 80px;
    --seccion-padding-x: 28px;
  }
}

@media (max-width: 400px) {
  :root {
    --logo-alto: 50px;
    --cabecera-padding-y: 12px;
    --cabecera-padding-x: 16px;
  }
}


/* ==========================================================================
   3. REINICIO
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

img, svg {
  display: block;
  max-width: 100%;
}

ul[class], ol[class] {
  list-style: none;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}


/* ==========================================================================
   4. BASE: TEXTO, ENLACES, FOCO
   ========================================================================== */

html {
  scroll-behavior: smooth;
  /* Al saltar a un ancla (p. ej. /#contacto), deja sitio para la cabecera fija */
  scroll-padding-top: var(--cabecera-alto);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--fuente-texto);
  font-weight: 300;
  line-height: 1.6;
  color: var(--text);
  background: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Negritas con el grosor 500 de Jost (no hay 700: se vería "falsa") */
strong, b {
  font-weight: 500;
}

h1, h2, h3 {
  font-family: var(--fuente-titulos);
  font-weight: 600;
  color: var(--sage-dark);
  line-height: 1.2;
}

a {
  color: var(--sage-dark);
}

/* Contorno visible al navegar con teclado (tabulador) */
:focus-visible {
  outline: 2px solid var(--sage-dark);
  outline-offset: 3px;
}

/* Texto solo para lectores de pantalla (no se ve, pero se lee en voz alta) */
.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Enlace "Saltar al contenido": invisible hasta que se navega con teclado */
.saltar-contenido {
  position: absolute;
  top: 0;
  left: 16px;
  z-index: 200;
  padding: 10px 18px;
  background: var(--sage-dark);
  color: var(--white);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  transform: translateY(-120%);
  transition: transform 0.2s;
}
.saltar-contenido:focus {
  transform: translateY(0);
}
.saltar-contenido:focus-visible {
  outline-color: var(--white);
  outline-offset: -4px;
}


/* ==========================================================================
   5. CONTENEDORES Y ESPACIADOS
   ========================================================================== */

/* Bloque de contenido estándar con el relleno del diseño
   (120/80 px en escritorio, 80/28 px en móvil) */
.seccion {
  padding: var(--seccion-padding-y) var(--seccion-padding-x);
}

/* Fondos de sección */
.fondo-blanco { background: var(--white); }
.fondo-crema  { background: var(--cream); }
.fondo-verde  { background: var(--sage-dark); }

/* Páginas sin hero (servicios, legales, 404): el contenido empieza
   debajo de la cabecera fija. La home no lo usa porque su hero ya
   deja ese espacio. */
.pagina-interior {
  padding-top: calc(var(--cabecera-alto) + var(--seccion-padding-y) / 2);
}

/* Ancho de lectura cómodo para textos largos (páginas legales) */
.texto-legible {
  max-width: 760px;
}


/* ==========================================================================
   6. CABECERA
   Fija arriba. Logo a 74 px (escritorio), 56 px (móvil) y 50 px (< 400 px).
   ========================================================================== */

.cabecera {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: var(--cabecera-padding-y) var(--cabecera-padding-x);
  background: rgba(240, 237, 230, 0.97);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linea);
}

.cabecera-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.cabecera-logo img {
  height: var(--logo-alto);
  width: auto;
}

.cabecera-menu {
  display: flex;
  gap: 40px;
}
.cabecera-menu a {
  color: var(--sage-dark);
  text-decoration: none;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  /* Línea inferior que aparece al pasar el ratón y en la página actual.
     (El diseño aclaraba el color al pasar el ratón, pero ese verde no
     llegaba al contraste mínimo.) */
  background-image: linear-gradient(var(--sage), var(--sage));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  padding-bottom: 3px;
  transition: background-size 0.3s;
}
.cabecera-menu a:hover,
.cabecera-menu a[aria-current="page"] {
  background-size: 100% 1px;
}

@media (max-width: 900px) {
  .cabecera-menu {
    gap: 16px;
    margin-left: auto;
  }
  .cabecera-menu a {
    font-size: 0.68rem;
    letter-spacing: 0.07em;
  }
}

@media (max-width: 400px) {
  .cabecera-menu {
    gap: 12px;
  }
  .cabecera-menu a {
    font-size: 0.63rem;
    letter-spacing: 0.05em;
  }
}


/* ==========================================================================
   7. PIE
   ========================================================================== */

.pie {
  background: var(--sage-dark);
  padding: 36px var(--seccion-padding-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.pie-logo img {
  height: 56px;      /* a 40 px no se leía "PROCURADORES" */
  width: auto;
  opacity: 0.85;
}

.pie-legal {
  display: flex;
  align-items: center;
  gap: 32px;
}

.pie-enlaces {
  display: flex;
  gap: 32px;
}

.pie-enlaces a,
.pie-copyright {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--texto-claro-sobre-oscuro);
}

.pie-enlaces a {
  text-decoration: none;
  transition: color 0.3s;
}
.pie-enlaces a:hover {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pie :focus-visible {
  outline-color: var(--white);
}

@media (max-width: 900px) {
  .pie {
    flex-direction: column;
    gap: 20px;
    text-align: center;
    padding: 32px 24px;
  }
  .pie-legal {
    flex-direction: column;
    gap: 14px;
  }
  .pie-enlaces {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 32px;
  }
}


/* ==========================================================================
   8. BOTONES
   Fondo verde oscuro: el verde salvia del diseño no daba contraste
   suficiente con el texto blanco (3,6:1; ahora 6,0:1).
   ========================================================================== */

.boton {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  padding: 16px 36px;
  background: var(--sage-dark);
  color: var(--white);
  font-family: var(--fuente-texto);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.3s, transform 0.2s;
}
.boton:is(button) {
  border: none;
  cursor: pointer;
}
.boton::after {
  content: "→";
  content: "→" / "";  /* el lector de pantalla no lee la flecha */
  font-size: 1rem;
}
.boton:hover {
  background: #3d5a42;  /* un punto más oscuro que --sage-dark */
  transform: translateX(4px);
}

/* Botón secundario: solo borde; se rellena al pasar el ratón */
.boton--secundario {
  background: transparent;
  color: var(--sage-dark);
  box-shadow: inset 0 0 0 1px var(--sage-dark);
}
.boton--secundario:hover {
  background: var(--sage-dark);
  color: var(--white);
}


/* ==========================================================================
   9. ANTETÍTULOS Y TÍTULOS DE SECCIÓN
   Antetítulo en verde oscuro: el verde salvia del diseño no llegaba al
   contraste mínimo (3,6:1 sobre blanco; ahora 6,0:1).
   ========================================================================== */

.antetitulo {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  font-size: 0.86rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sage-dark);
}
.antetitulo::before {
  content: "";
  display: block;
  flex-shrink: 0;
  width: 40px;
  height: 1px;
  background: var(--sage);
}

.titulo-seccion {
  margin-bottom: 28px;
  font-size: clamp(2rem, 3vw, 2.8rem);
}

/* Variante sobre fondo verde oscuro */
.fondo-verde .antetitulo {
  color: var(--texto-claro-sobre-oscuro);
}
.fondo-verde .antetitulo::before {
  background: rgba(255, 255, 255, 0.4);
}
.fondo-verde .titulo-seccion {
  color: var(--white);
}


/* ==========================================================================
   10. ICONOS
   Dibujos de línea fina en SVG, propios del sitio (sin emojis ni
   bibliotecas externas). Toman el color del texto que los rodea.
   ========================================================================== */

.icono {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;  /* probado a tamaño real en pantalla normal: más fino se pierde */
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ==========================================================================
   11. INICIO: HERO
   Texto anclado arriba (no centrado). En móvil: primero el texto,
   después la foto, completa y sin recortar.
   ========================================================================== */

.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  background: var(--cream);
  overflow: hidden;
}

/* Halo verde muy suave detrás del texto */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 60%, rgba(107, 143, 113, 0.07) 0%, transparent 55%);
  pointer-events: none;
}

.hero-texto {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: clamp(150px, 19vh, 210px) 60px 80px 80px;
}

/* Antetítulo: "Procuradora de los Tribunales" (500) · "en Madrid" (300).
   Los dos en verde oscuro; la jerarquía se marca solo con el grosor. */
.hero-antetitulo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  font-size: 0.86rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sage-dark);
}
.hero-antetitulo::before {
  content: "";
  display: block;
  flex-shrink: 0;
  width: 40px;
  height: 1px;
  background: var(--sage);
}
.hero-antetitulo strong {
  font-weight: 500;
}
.hero-antetitulo span {
  font-weight: 300;
}

.hero h1 {
  margin-bottom: 28px;
  font-size: clamp(2.6rem, 4vw, 3.8rem);
  line-height: 1.15;
}
/* "que no falla": cursiva en verde salvia (texto grande: 3,1:1, mínimo 3:1) */
.hero h1 em {
  font-style: italic;
  color: var(--sage);
  white-space: nowrap;  /* "que no falla" nunca se parte entre líneas */
}

.hero-subtitulo {
  max-width: 420px;
  margin-bottom: 52px;
  font-size: 1rem;
  line-height: 1.85;
  color: #5a5a5a;
}

/* Foto de Lara: el fondo blanco se funde con el crema (multiply).
   Sin fondo propio: así el halo verde del hero pasa por detrás de la foto
   sin cortarse en mitad de la pantalla (en el diseño original se veía
   una línea vertical en ese punto). */
.hero-foto {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}
.hero-foto img {
  width: 88%;
  height: auto;
  padding-top: 80px;
  object-fit: contain;
  object-position: center bottom;
  mix-blend-mode: multiply;
}
/* Entrada suave del texto */
@keyframes aparecer {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-texto > * {
  animation: aparecer 0.8s ease both;
}
.hero-texto > :nth-child(1) { animation-delay: 0.1s; }
.hero-texto > :nth-child(2) { animation-delay: 0.25s; }
.hero-texto > :nth-child(3) { animation-delay: 0.4s; }
.hero-texto > :nth-child(4) { animation-delay: 0.55s; }

@media (max-width: 900px) {
  .hero {
    display: flex;
    flex-direction: column;
    min-height: auto;
  }
  .hero-texto {
    order: 1;
    padding: 120px 28px 32px;
  }
  /* La foto va después del texto, se ve entera y se apoya sobre la barra
     de datos, como en escritorio. El contenedor se adapta a la foto (no
     tiene altura fija), así que nunca se recorta la cabeza.
     Altura máxima de 440 px: en tableta (≈768 px) la foto salía de casi
     600 px y dejaba un hueco grande entre el botón y la foto. */
  .hero-foto {
    order: 2;
    height: auto;
  }
  .hero-foto img {
    width: auto;
    max-width: 72%;
    max-height: min(440px, 95vw);
    padding-top: 0;
  }
}


/* ==========================================================================
   12. INICIO: BARRA DE DATOS
   ========================================================================== */

.barra-datos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--barra-datos-fondo);
}

.dato {
  padding: 32px 40px;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  text-align: center;
}
.dato:last-child {
  border-right: none;
}

.dato-cifra {
  display: block;
  margin-bottom: 6px;
  font-family: var(--fuente-titulos);
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1;
  color: var(--white);
}

.dato-etiqueta {
  display: block;
  font-size: 0.72rem;
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--barra-datos-etiqueta);
}

/* Tableta: las tres cifras siguen en fila, con menos relleno */
@media (max-width: 900px) {
  .dato {
    padding: 28px 16px;
  }
}

/* Móvil: una cifra debajo de otra */
@media (max-width: 600px) {
  .barra-datos {
    grid-template-columns: 1fr;
  }
  .dato {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }
  .dato:last-child {
    border-bottom: none;
  }
}


/* ==========================================================================
   13. INICIO: QUIÉN SOY
   ========================================================================== */

.quien-soy {
  display: grid;
  grid-template-columns: 5fr 4fr;
  gap: 80px;
  align-items: center;
}

.quien-soy p {
  margin-bottom: 20px;
  font-size: 1rem;
  line-height: 1.9;
  color: var(--text-light);
}
.quien-soy .boton {
  margin-top: 20px;
}

/* Foto sobre un recuadro crema, con un marco fino desplazado detrás.
   El fondo blanco de la foto se funde con el crema del recuadro (multiply). */
.quien-soy-foto {
  position: relative;
  z-index: 0;  /* crea su propio plano, para que el marco quede detrás */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 480px;
  background: var(--cream);
}
.quien-soy-foto img {
  width: 90%;
  height: auto;
  mix-blend-mode: multiply;
}
.quien-soy-foto::after {
  content: "";
  position: absolute;
  top: 16px;
  left: 16px;
  right: -12px;
  bottom: -12px;
  z-index: -1;
  border: 1px solid var(--sage);
  opacity: 0.35;
}

@media (max-width: 900px) {
  .quien-soy {
    grid-template-columns: 1fr;
    gap: 56px;
  }
  .quien-soy-foto {
    min-height: 0;
    margin-right: 12px;  /* deja ver el marco desplazado */
  }
  /* Altura máxima sin recortar: la foto se reduce entera, nunca se corta */
  .quien-soy-foto img {
    width: auto;
    max-width: 90%;
    max-height: 420px;
  }
}


/* ==========================================================================
   14. INICIO: LO QUE OFREZCO
   Dos tarjetas a media anchura. Listados sin viñetas: cada elemento en
   su fila, separado por una línea fina.
   ========================================================================== */

.servicios-cabecera {
  margin-bottom: 80px;
  text-align: center;
}
.servicios-cabecera .antetitulo {
  justify-content: center;
}
.servicios-cabecera .titulo-seccion {
  margin-top: 16px;
  margin-bottom: 0;
}

.servicios-tarjetas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
}

.tarjeta {
  position: relative;
  padding: 56px 52px;
  background: var(--white);
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}
.tarjeta:hover {
  z-index: 2;
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(107, 143, 113, 0.12);
}
/* Línea verde que aparece abajo al pasar el ratón */
.tarjeta::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--sage);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s;
}
.tarjeta:hover::before {
  transform: scaleX(1);
}

/* Número decorativo (01, 02) */
.tarjeta-numero {
  margin-bottom: 20px;
  font-family: var(--fuente-titulos);
  font-size: 3.5rem;
  font-weight: 600;
  line-height: 1;
  color: rgba(107, 143, 113, 0.1);
}

.tarjeta h3 {
  margin-bottom: 14px;
  font-size: 1.6rem;
}

.tarjeta-descripcion {
  margin-bottom: 24px;
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--text-light);
}

.tarjeta-lista {
  border-top: 1px solid rgba(107, 143, 113, 0.18);
}
.tarjeta-lista li {
  padding: 13px 0;
  border-bottom: 1px solid rgba(107, 143, 113, 0.18);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text);
  transition: color 0.25s, padding-left 0.25s;
}
.tarjeta:hover .tarjeta-lista li {
  color: var(--sage-dark);
}
.tarjeta-lista li:hover {
  padding-left: 8px;
}

/* Enlace bajo las tarjetas hacia la página de servicios */
.servicios-enlace {
  margin-top: 48px;
  text-align: center;
}

.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--sage);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--sage-dark);
  transition: gap 0.25s;
}
.enlace-flecha::after {
  content: "→";
  content: "→" / "";
  font-size: 1rem;
}
.enlace-flecha:hover {
  gap: 16px;
}

@media (max-width: 900px) {
  .servicios-cabecera {
    margin-bottom: 48px;
  }
  .servicios-tarjetas {
    grid-template-columns: 1fr;
  }
  .tarjeta {
    padding: 44px 28px;
  }
}


/* ==========================================================================
   15. INICIO: VENTAJAS
   Textos al 85 % de blanco: los del diseño (55-60 %) no llegaban al
   contraste mínimo (3,0-3,3:1; ahora 4,9:1).
   ========================================================================== */

.ventajas {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 80px;
  align-items: start;
}

.ventajas-titulo .titulo-seccion {
  margin-top: 16px;
  margin-bottom: 0;
}

.ventaja {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 24px;
  align-items: start;
  padding: 36px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: padding-left 0.3s;
}
.ventaja:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.ventaja:hover {
  padding-left: 12px;
}

.ventaja-icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-top: 4px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.8);
}

.ventaja h3 {
  margin-bottom: 8px;
  font-size: 1.25rem;
  color: var(--white);
}

.ventaja p {
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--texto-claro-sobre-oscuro);
}

@media (max-width: 900px) {
  .ventajas {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .ventaja {
    grid-template-columns: 48px 1fr;
    gap: 20px;
  }
}


/* ==========================================================================
   16. INICIO: CONTACTO Y FORMULARIO
   El formulario se activa o desactiva en _data/formulario.yml.
   ========================================================================== */

.contacto {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.contacto-info .titulo-seccion {
  margin-top: 16px;
  font-size: clamp(2rem, 3vw, 2.6rem);
}

.contacto-info > p {
  margin-bottom: 40px;
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--text-light);
}

.contacto-datos {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.contacto-dato {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 0.9rem;
  color: var(--text);
}
.contacto-dato-icono {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--cream);
  color: var(--sage-dark);
}
.contacto-dato a {
  font-weight: 500;
  text-decoration: none;
  overflow-wrap: anywhere;
}
/* Al pasar el ratón: subrayado (el verde claro del diseño no llegaba
   al contraste mínimo) */
.contacto-dato a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Formulario */
.formulario {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.campo {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.campo label {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-light);
}
.campo-opcional {
  font-weight: 300;
  letter-spacing: 0.05em;
  text-transform: none;
}
.campo input,
.campo textarea {
  padding: 14px 18px;
  border: 1px solid var(--borde-campo);
  border-radius: 0;
  background: var(--cream);
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--text);
  transition: border-color 0.3s, background 0.3s;
}
.campo input::placeholder,
.campo textarea::placeholder {
  color: var(--text-light);
  opacity: 1;
}
.campo input:focus,
.campo textarea:focus {
  border-color: var(--sage-dark);
  background: var(--white);
}
.campo textarea {
  min-height: 120px;
  resize: vertical;
}

/* Campo con error */
.campo [aria-invalid="true"] {
  border-color: var(--error);
  box-shadow: inset 3px 0 0 var(--error);
}
.campo-error {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--error);
}
.campo-error:empty {
  display: none;
}

/* Casilla de consentimiento */
.campo-consentimiento {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 12px;
  align-items: start;
}
.campo-consentimiento input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--sage-dark);
  cursor: pointer;
}
.campo-consentimiento label {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text);
  cursor: pointer;
}
.campo-consentimiento .campo-error {
  grid-column: 2;
}
.campo-consentimiento [aria-invalid="true"] {
  outline: 2px solid var(--error);
  outline-offset: 2px;
}

/* Información básica de protección de datos (si está rellenada) */
.formulario-info-basica {
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--text-light);
}

/* Campo trampa antispam: fuera de la vista de las personas */
.campo-trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formulario {
  position: relative;
}

.boton:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Mensajes de resultado tras pulsar "Enviar" */
.formulario-estado {
  padding: 16px 20px;
  border-left: 3px solid;
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--text);
}
.formulario-estado--exito {
  border-color: var(--sage-dark);
  background: var(--cream);
}
.formulario-estado--error {
  border-color: var(--error);
  background: #fbefed;
}

/* Sin formulario (desactivado): textos a la izquierda y, a la derecha,
   un recuadro crema con los botones de llamar y escribir */
.contacto--sin-formulario {
  align-items: center;
}
.contacto--sin-formulario .contacto-info > p {
  margin-bottom: 20px;
}
.contacto--sin-formulario .contacto-info > p:last-child {
  margin-bottom: 0;
}
/* El número de teléfono nunca se parte entre líneas */
.sin-corte {
  white-space: nowrap;
}
.contacto-tarjeta {
  padding: 48px;
  background: var(--cream);
}
.contacto-acciones {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 36px;
}
.contacto-acciones .boton {
  width: 100%;
  justify-content: center;
}
/* Dentro del recuadro crema, el icono va sobre blanco */
.contacto-tarjeta .contacto-dato-icono {
  background: var(--white);
}
.contacto-datos--discretos .contacto-dato {
  font-size: 0.85rem;
}

@media (max-width: 900px) {
  .contacto-tarjeta {
    padding: 32px 24px;
  }
}
@media (max-width: 400px) {
  .contacto-acciones .boton {
    padding: 16px 18px;
    letter-spacing: 0.1em;
  }
}

@media (max-width: 900px) {
  .contacto {
    grid-template-columns: 1fr;
    gap: 56px;
  }
}


/* ==========================================================================
   17. PÁGINAS LEGALES
   Texto largo para leer: columna estrecha, letra en color de texto
   principal (más contraste que el gris de las secciones) y encabezados
   con la tipografía de títulos.
   ========================================================================== */

.texto-legal {
  max-width: calc(760px + 2 * var(--seccion-padding-x));
  padding-top: 0;
}

.texto-legal h1 {
  margin-bottom: 40px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--linea);
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  letter-spacing: 0.04em;
}

.texto-legal h2 {
  margin: 48px 0 14px;
  font-size: 1.55rem;
}
/* "POLÍTICA DE COOKIES": segundo gran apartado de la página */
.texto-legal h2.apartado-mayor {
  margin-top: 80px;
  padding-top: 40px;
  border-top: 1px solid var(--linea);
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  letter-spacing: 0.04em;
}
.texto-legal h3 {
  margin: 40px 0 12px;
  font-size: 1.3rem;
}
.texto-legal h4 {
  margin: 28px 0 10px;
  font-size: 1.12rem;
}

.texto-legal p,
.texto-legal li {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text);
}
.texto-legal p {
  margin-bottom: 16px;
}

.texto-legal ul,
.texto-legal ol {
  margin: 0 0 18px;
  padding-left: 1.4em;
}
.texto-legal li {
  margin-bottom: 8px;
  padding-left: 4px;
}
.texto-legal li::marker {
  color: var(--sage-dark);
}

.texto-legal a {
  overflow-wrap: anywhere;
}

/* Evita que un encabezado se quede solo al final de una página impresa */
@media print {
  .texto-legal h2,
  .texto-legal h3,
  .texto-legal h4 {
    break-after: avoid;
  }
}


/* ==========================================================================
   18. SERVICIOS: PÁGINA /servicios-en-madrid
   Fondos alternos: crema, blanco, crema, blanco, crema (y el pie verde).
   ========================================================================== */

/* Cabecera de página (sin foto): empieza bajo la cabecera fija */
.hero-interior {
  padding: calc(var(--cabecera-alto) + 100px) var(--seccion-padding-x) 100px;
  background: var(--cream);
}
.hero-interior h1 {
  max-width: 860px;
  margin-bottom: 28px;
  font-size: clamp(2.4rem, 3.6vw, 3.4rem);
  line-height: 1.15;
}
.hero-interior-subtitulo {
  max-width: 620px;
  margin-bottom: 48px;
  font-size: 1.05rem;
  line-height: 1.85;
  color: #5a5a5a;
}

/* Cabecera de sección centrada */
.cabecera-centrada {
  margin-bottom: 64px;
  text-align: center;
}
.cabecera-centrada .antetitulo {
  justify-content: center;
}
.cabecera-centrada .titulo-seccion {
  margin-top: 16px;
  margin-bottom: 0;
}

/* Para abogados y despachos / para particulares */
.publicos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
}
.publico {
  padding: 52px 52px 56px;
  background: var(--cream);
}
.publico h3 {
  margin-bottom: 16px;
  font-size: 1.6rem;
}
.publico p {
  font-size: 1rem;
  line-height: 1.9;
  color: var(--text-light);
}

/* Servicios: diez tarjetas.
   Escritorio: la primera ("Representación procesal", que engloba a las
   demás) destacada a todo el ancho y las otras nueve en una retícula
   exacta de 3 x 3. Tableta: 5 filas de 2. Móvil: índice sin recuadros
   (ver más abajo). */
.servicios-lista {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}
.servicio {
  position: relative;
  padding: 40px 36px 44px;
  background: var(--white);
  transition: box-shadow 0.3s;
}
/* Línea verde abajo al pasar el ratón, como en las tarjetas de la home */
.servicio::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--sage);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s;
}
.servicio:hover::after {
  transform: scaleX(1);
}
.servicio-numero {
  margin-bottom: 12px;
  font-family: var(--fuente-titulos);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--sage-dark);
}
.servicio h3 {
  margin-bottom: 12px;
  font-size: 1.35rem;
}
.servicio p:not(.servicio-numero) {
  font-size: 0.93rem;
  line-height: 1.75;
  color: var(--text-light);
}
/* Tarjeta destacada */
.servicio:first-child {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 2fr;
  column-gap: 56px;
  align-items: center;
  padding: 48px 52px;
}
.servicio:first-child h3 {
  margin-bottom: 0;
  font-size: 1.7rem;
}
.servicio:first-child .servicio-numero {
  grid-column: 1;
}
.servicio:first-child h3 {
  grid-column: 1;
}
.servicio:first-child p:not(.servicio-numero) {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-size: 1rem;
}

/* Tipos de procedimiento: cinco líneas en letra menor */
.tipos-procedimiento {
  max-width: 920px;
  margin: 72px auto 0;
}
.tipos-procedimiento h3 {
  margin-bottom: 16px;
  font-size: 1.3rem;
  text-align: center;
}
.tipos-procedimiento ul {
  list-style: none;  /* sin viñetas, como el resto de listados (sección 6) */
  border-top: 1px solid rgba(107, 143, 113, 0.18);
}
.tipos-procedimiento li {
  padding: 12px 0;
  border-bottom: 1px solid rgba(107, 143, 113, 0.18);
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--text-light);
}
.tipos-procedimiento strong {
  color: var(--text);
}

/* Partidos judiciales */
.partidos-intro {
  max-width: 620px;
  margin: -32px auto 48px;
  text-align: center;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text-light);
}
.partidos {
  columns: 4;
  column-gap: 48px;
  border-top: 1px solid rgba(107, 143, 113, 0.18);
}
.partidos li {
  break-inside: avoid;
  padding: 12px 0;
  border-bottom: 1px solid rgba(107, 143, 113, 0.18);
  font-size: 0.95rem;
  color: var(--text);
}

/* Llamada final a contactar */
.llamada {
  text-align: center;
}
.llamada .antetitulo {
  justify-content: center;
}
.llamada .titulo-seccion {
  margin-top: 16px;
  margin-bottom: 40px;
}

@media (max-width: 1100px) {
  /* Tableta: 2 columnas; la destacada pasa a ser una más (5 filas de 2) */
  .servicios-lista {
    grid-template-columns: repeat(2, 1fr);
  }
  .servicio:first-child {
    grid-column: auto;
    display: block;
    padding: 40px 36px 44px;
  }
  .servicio:first-child h3 {
    margin-bottom: 12px;
    font-size: 1.35rem;
  }
  .servicio:first-child p:not(.servicio-numero) {
    font-size: 0.93rem;
  }
  .partidos {
    columns: 3;
  }
}

@media (max-width: 900px) {
  .hero-interior {
    padding: calc(var(--cabecera-alto) + 56px) 28px 72px;
  }
  .publicos {
    grid-template-columns: 1fr;
  }
  .publico {
    padding: 40px 28px 44px;
  }
  .tipos-procedimiento {
    margin-top: 56px;
  }
  .cabecera-centrada {
    margin-bottom: 44px;
  }
  .partidos-intro {
    margin-top: -20px;
  }
}

/* Móvil: las tarjetas pasan a ser un índice sin recuadros, con líneas
   finas (más corto de recorrer que diez recuadros apilados) */
@media (max-width: 600px) {
  .servicios-lista {
    grid-template-columns: 1fr;
    gap: 0;
    border-top: 1px solid rgba(107, 143, 113, 0.18);
  }
  .servicio,
  .servicio:first-child {
    display: block;
    padding: 24px 0 26px;
    background: none;
    border-bottom: 1px solid rgba(107, 143, 113, 0.18);
  }
  .servicio::after {
    display: none;
  }
  .servicio-numero {
    display: inline;
    margin-right: 10px;
  }
  .servicio h3,
  .servicio:first-child h3 {
    display: inline;
    font-size: 1.25rem;
  }
  .servicio p:not(.servicio-numero),
  .servicio:first-child p:not(.servicio-numero) {
    display: block;
    margin-top: 8px;
    font-size: 0.9rem;
  }
  .partidos {
    columns: 2;
    column-gap: 24px;
  }
}


/* ==========================================================================
   19. PÁGINA 404 (dirección que no existe)
   Centrada y con aire, para que no parezca una página rota.
   ========================================================================== */

/* La página es corta: el pie se queda siempre al fondo de la pantalla
   (sin franja blanca debajo en pantallas altas). */
body:has(.pagina-404) {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body:has(.pagina-404) main {
  flex: 1;
}

.pagina-404 {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
}
.pagina-404 .antetitulo {
  justify-content: center;
}
.pagina-404 h1 {
  margin: 16px 0 24px;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  line-height: 1.15;
}
.pagina-404-texto {
  max-width: 480px;
  margin-bottom: 44px;
  line-height: 1.8;
  color: #5a5a5a;
}
.pagina-404-botones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}


/* ==========================================================================
   20. MOVIMIENTO REDUCIDO
   Para quien ha pedido a su dispositivo menos animaciones.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}