/* ==========================================================================
   Vilas Abogados · hoja de estilos
   Port del tema VuePress de notariavilas.es: theme/Layout.vue (estilos
   globales) y components/*.vue (estilos «scoped»), sin los hashes de Vue.
   Se conservan los nombres de clase y los valores originales; cada cambio
   respecto al original lleva un comentario «Cambio:».

   Índice
   1. Tokens
   2. Base
   3. Utilidades y maquetación
   4. Cabecera (Navbar.vue) y <site-menu>
   5. Banner (Banner.vue)
   6. Bloque de título (Title.vue)
   7. Lista «about» (AboutList.vue) y servicios
   8. Galería (Gallery.vue) e <image-carousel>
   9. Dirección (Address.vue)
   10. Contacto (ContactForm.vue: datos de contacto y formulario)
   11. Pie (Footer.vue)
   12. Plantilla de texto (páginas legales y 404)
   ========================================================================== */


/* 1. Tokens (Layout.vue :root)
   ========================================================================== */

:root {
  --color-black: #4A4A4A;
  --color-blue: #1B0A47;
  --color-grey-light: #9B9B9B;
  --color-grey-lighter: #F5F5F5;
  --color-white: #FFFFFF;
  /* Nuevos: borde de los campos del formulario y color de error. El gris
     claro de la marca no llega al contraste 3:1 que pide la WCAG (1.4.11)
     para el contorno de un control, así que el borde usa un gris más oscuro. */
  --color-field-border: #767676;
  --color-error: #B3261E;
  --color-dot: rgba(0, 0, 0, 0.2);
  --color-highlight: rgba(249, 233, 172, 0.99);
  --headings-font-family: 'EB Garamond', serif;
  --body-font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', 'Ubuntu', 'Droid Sans', 'Helvetica Neue', sans-serif;
  --max-wrapper-width: 1366px;
  /* Altura de la cabecera fija: barra de 25px + botón de 48px (móvil);
     101px desde 768 (Layout.vue: .wrapper padding-top). */
  --header-height: 73px;
}

@media (min-width: 768px) {
  :root {
    --header-height: 101px;
  }
}


/* 2. Base
   ========================================================================== */

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

::selection {
  background: var(--color-highlight);
  color: var(--color-black);
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  /* Hace el papel de .wrapper { padding-top } del original. */
  padding-top: var(--header-height);
  font-family: var(--body-font-family);
  font-size: 16px;
  color: var(--color-black);
  background-color: var(--color-grey-lighter);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Cambio: las anclas y el elemento con foco quedan por debajo de la cabecera
   fija (sustituye a los márgenes negativos de Address.vue e index.md).
   scroll-padding en el contenedor, y no scroll-margin en los destinos, para
   que el navegador tampoco deje un control enfocado con Tab tapado por la
   cabecera (WCAG 2.2, 2.4.11). */
html {
  scroll-padding-top: var(--header-height);
}

img {
  width: 100%;
  max-width: 100%;
  /* Cambio: las imágenes llevan width/height en el HTML (evita saltos). */
  height: auto;
  line-height: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  width: 100%;
  margin: 0 auto 1rem;
  color: var(--color-blue);
  font-weight: 400;
}

/* Declarado a 400 como en el original: solo existe la cara 700 de
   EB Garamond, así que se pinta en 700. */
h1 {
  margin-top: 20px;
  font-family: var(--headings-font-family);
  font-size: 30px;
  line-height: 1.15;
}

h1::before {
  content: '';
  display: block;
  width: 30px;
  height: 2px;
  margin-bottom: 20px;
  background-color: var(--color-blue);
}

/* «bolder» calcula 700; sin Roboto 700 se pinta con la 900, como antes. */
h2 {
  font-size: 16px;
  font-weight: bolder;
}

h3 {
  font-size: 1rem;
}

p {
  margin: 0 auto 1rem;
  font-size: 1rem;
  line-height: 1.5;
}

/* Cambio: «ol» recibe la misma sangría que «ul» (el original solo definía «ul»). */
ul,
ol {
  margin-bottom: 40px;
  padding-left: 20px;
}

/* Tablas y h4-h6: sin uso por ahora; se conservan del Layout.vue original
   por si los textos legales llegan a necesitarlas. */
table {
  border-collapse: collapse;
}

td,
th {
  padding: 8px 16px;
  border-bottom: 1px solid var(--color-blue);
  text-align: center;
}

td:first-child,
th:first-child {
  padding-left: 0;
  text-align: left;
}

/* Cambio: los enlaces de texto usan el azul de la marca
   (antes salían con el azul por defecto del navegador). */
a {
  color: var(--color-blue);
}

/* Base común de los botones: menú, puntos de la galería y envío del formulario.
   El estilo .btn del original se porta aparte, en .contact-form__submit. */
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 2px;
}


/* 3. Utilidades y maquetación
   ========================================================================== */

.wrapper__inner {
  max-width: var(--max-wrapper-width);
  margin: auto;
}

.container {
  max-width: 1300px;
  margin: auto;
  padding: 0 16px;
}

.subtitle,
.subtitle-strong {
  font-size: 16px;
  letter-spacing: 0.18px;
  line-height: 19px;
}

.subtitle-strong {
  font-weight: 900;
}

.hidden-mobile {
  display: none;
}

/* Datos que faltan: se ven a propósito para poder localizarlos. */
.pendiente {
  padding: 0 0.2em;
  background: var(--color-highlight);
  font-weight: 500;
}

/* Enlace para saltar al contenido: fuera de pantalla hasta recibir foco. */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  padding: 0 17px;
  line-height: 36px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-white);
  background-color: var(--color-blue);
  transform: translateY(-120%);
}

.skip-link:focus {
  transform: none;
}

/* Texto solo para lectores de pantalla. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (min-width: 768px) {
  .container {
    padding: 0 28px;
  }

  .hidden-mobile {
    display: initial;
  }

  .hidden-desktop {
    display: none;
  }
}


/* 4. Cabecera (Navbar.vue) y <site-menu>
   ========================================================================== */

.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  background-color: var(--color-grey-lighter);
}

/* :where() deja la especificidad a cero, como el «a» scoped del original. */
:where(.header) a {
  color: inherit;
  text-decoration: none;
}

.header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Cambio: reserva el alto del botón aunque aún no se haya cargado el JS. */
  min-height: 3rem;
  max-width: var(--max-wrapper-width);
  margin: auto;
  padding: 0 5px;
}

/* Barra superior */

.top-bar {
  width: 100%;
  height: 25px;
  color: var(--color-white);
  background: var(--color-blue);
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
}

.top-bar__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 25px;
  max-width: var(--max-wrapper-width);
  margin: auto;
}

.top-bar__item {
  padding: 0 10px;
}

.top-bar__link {
  color: var(--color-white);
}

/* Idioma actual: mismo gris que el enlace activo del menú original. */
.top-bar__link[aria-current="page"] {
  color: var(--color-grey-light);
}

.top-bar :focus-visible {
  outline-color: var(--color-white);
  outline-offset: 1px;
}

/* Logo de texto */

.site-name {
  padding: 0 10px;
  font-family: var(--headings-font-family);
  font-size: 32px;
  font-weight: 700;
  line-height: 0.95;
  color: var(--color-blue);
}

/* Menú de escritorio */

.nav-list {
  margin: 0;
}

/* Cambio: flex en lugar de inline-block para no depender de los espacios
   del HTML; la línea base del texto queda a la misma altura. */
.desktop-nav .nav-list {
  display: flex;
}

.nav__item {
  display: inline-block;
  padding: 0 10px;
  border-bottom: 1px solid transparent;
  font-size: 15px;
  color: var(--color-blue);
  list-style: none;
  text-transform: uppercase;
  user-select: none;
  cursor: pointer;
}

.nav__item-link:hover {
  color: var(--color-grey-light);
}

.desktop-nav {
  display: none;
}

/* Menú móvil. Sin JS el botón no se muestra (no habría nada que abrir)
   y queda visible el enlace «Contactar» de la barra superior. */

site-menu {
  display: block;
}

site-menu:not(:defined) .mobile-nav-toggle {
  display: none;
}

.mobile-nav-toggle,
.mobile-nav-close {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 3rem;
  height: 3rem;
  transition: opacity 0.15s;
}

.mobile-nav-toggle img,
.mobile-nav-close img {
  width: 1.5rem;
}

.mobile-nav-toggle:hover,
.mobile-nav-close:hover {
  opacity: 0.6;
}

.mobile-nav {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  padding: 2rem;
  line-height: 50px;
  text-align: center;
  background: var(--color-white);
  transform: translateY(-100%);
  /* Cambio: oculto también para el teclado y los lectores de pantalla;
     la visibilidad cambia al terminar la animación de cierre. */
  visibility: hidden;
  transition: transform 0.35s ease-in-out, visibility 0s linear 0.35s;
}

.mobile-nav--active {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.35s ease-in-out;
}

/* Original: 3rem + padding 3rem con border-box = caja de 6rem. */
.mobile-nav-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 6rem;
  height: 6rem;
}

.mobile-nav-close:focus-visible {
  outline-offset: -1.5rem;
}

.mobile-nav__item {
  list-style: none;
  cursor: pointer;
  transition: opacity 0.15s;
}

.mobile-nav__item:hover {
  opacity: 0.6;
}

.mobile-nav__link {
  font-family: var(--headings-font-family);
  font-size: 32px;
  font-weight: 700;
  color: var(--color-blue);
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav,
  .mobile-nav--active {
    transition: none;
  }
}

@media (min-width: 768px) {
  .header__inner {
    align-items: flex-end;
    padding: 23px 29px 14px;
  }

  .top-bar__inner {
    padding: 0 20px;
  }

  .site-name {
    font-size: 42px;
  }

  .desktop-nav {
    display: block;
  }

  site-menu {
    display: none;
  }
}

/* Cambio: «Vilas Abogados» y «Quiénes somos» son más anchos que
   «Notaría Vilas» y «La Notaría»; entre 768 y 991 el menú no cabría
   en una línea con los márgenes originales. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .desktop-nav .nav-list {
    padding-left: 0;
  }

  .nav__item {
    padding: 0 5px;
  }
}


/* 5. Banner (Banner.vue)
   ========================================================================== */

.banner {
  position: relative;
  line-height: 0;
}

/* Cambio: aspect-ratio en lugar de height: 0 + padding-bottom (80% y 40%). */
.banner__inner {
  overflow: hidden;
  aspect-ratio: 5 / 4;
}

.banner__link {
  display: block;
  line-height: 0;
}

.banner__link:focus-visible {
  outline-offset: -2px;
}

@media (min-width: 992px) {
  .banner__inner {
    aspect-ratio: 5 / 2;
  }
}


/* 6. Bloque de título (Title.vue)
   ========================================================================== */

.title-block {
  max-width: 774px;
  margin: 0 auto 60px;
  padding: 40px 16px 0;
  text-align: center;
}

/* El antetítulo era un h1: se fija su margen superior de 20px para que
   se vea igual aunque sea otro elemento (h2 en Servicios). */
.title-block__pretitle {
  margin: 20px auto 23px;
  font-family: var(--body-font-family);
  font-size: 16px;
  font-weight: 400;
}

.title-block__pretitle::before {
  content: none;
}

.title-block__title {
  font-family: var(--headings-font-family);
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-blue);
}

@media (min-width: 992px) {
  .title-block__title {
    font-size: 42px;
  }
}


/* 7. Lista «about» (AboutList.vue) y servicios
   ========================================================================== */

/* En el original era un <ul> y heredaba la regla global de «ul»
   (padding-left: 20px; margin-bottom: 40px); aquí es un <div>. */
.about__list {
  margin-bottom: 40px;
  padding-left: 20px;
  list-style: none;
}

.about__item {
  margin-bottom: 60px;
}

.about__title {
  margin-bottom: 30px;
  text-align: center;
}

.about__text {
  line-height: 23px;
  letter-spacing: 0.19px;
}

/* Servicios: cada área es una fila «about»; los encargos, una lista numerada
   con números discretos en azul y separación de párrafo. */
.services-list {
  margin-bottom: 0;
  padding-left: 1.5em;
}

.services-list__item {
  margin-bottom: 1rem;
  padding-left: 0.25em;
}

.services-list__item:last-child {
  margin-bottom: 0;
}

.services-list__item::marker {
  font-weight: 500;
  color: var(--color-blue);
}

@media (min-width: 768px) {
  .about {
    max-width: 900px;
    margin: auto;
  }

  .about__item {
    display: flex;
    margin-bottom: 30px;
  }

  .about__title {
    width: 164px;
    min-width: 164px;
    margin-bottom: 20px;
    padding-right: 20px;
    text-align: left;
  }
}


/* 8. Galería (Gallery.vue) e <image-carousel>
   Sustituye a vue-carousel por scroll-snap: 1 foto por página, 2 desde 768
   y 3 desde 992. Sin JS la tira se desplaza igual (táctil, trackpad,
   teclado o barra de desplazamiento).
   ========================================================================== */

.gallery {
  overflow: hidden;
}

/* Cambio: sin margin-bottom de 80px; solo compensaba el margin-top: -80px
   de la dirección, que ya no existe. */
.gallery__inner {
  display: block;
  margin-right: -10px;
  margin-left: -10px;
}

.gallery__track {
  position: relative;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
}

/* Arrastre con ratón (como vue-carousel): el JS añade la clase mientras dura;
   sin «snap» para que la tira siga al puntero. */
image-carousel:defined .gallery__track {
  cursor: grab;
}

.gallery__track--dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  -webkit-user-select: none;
  user-select: none;
}

.gallery__slide img {
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}

/* .gallery recorta 10px por cada lado: el contorno de foco va hacia dentro. */
.gallery__track:focus-visible {
  outline-offset: -12px;
}

/* Con JS hay puntos, así que se oculta la barra de desplazamiento. */
image-carousel:defined .gallery__track {
  scrollbar-width: none;
}

image-carousel:defined .gallery__track::-webkit-scrollbar {
  display: none;
}

.gallery__slides {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gallery__slide {
  flex: 0 0 100%;
  padding: 10px;
  scroll-snap-align: start;
}

/* Puntos: mismo aspecto que VueCarousel-dot (10px, padding 10px). */
.gallery__dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.gallery__dots[hidden] {
  display: none;
}

.gallery__dot {
  box-sizing: content-box;
  width: 10px;
  height: 10px;
  padding: 10px;
  border-radius: 100%;
  background-color: var(--color-dot);
  background-clip: content-box;
  line-height: 0;
}

.gallery__dot[aria-current="true"] {
  background-color: var(--color-blue);
}

.gallery__dot:focus-visible {
  outline-offset: -2px;
}

@media (min-width: 768px) {
  .gallery__slide {
    flex-basis: 50%;
  }
}

@media (min-width: 992px) {
  .gallery__slide {
    flex-basis: 33.333%;
  }
}


/* 9. Dirección (Address.vue)
   ========================================================================== */

/* Cambio: sin margin-top: -80px ni z-index (ahora scroll-padding-top en html). */
.address {
  position: relative;
  padding: 50px 20px;
  text-align: center;
}

.address__title {
  margin-bottom: 31px;
  font-family: var(--headings-font-family);
  font-size: 23px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.27px;
}

.address__block {
  margin-bottom: 21px;
  padding: 0;
  list-style: none;
}

.address__item {
  margin-bottom: 1px;
  font-weight: 300;
}


/* 10. Contacto (ContactForm.vue: datos de contacto y formulario)
   ========================================================================== */

/* Cambio: padding-top 70px, que es la distancia que se veía (80px menos
   los 10px que solapaba .contact-form__wrapper). */
.contact-form {
  position: relative;
  padding-top: 70px;
  padding-bottom: 40px;
  background-color: var(--color-grey-lighter);
}

.contact-form__title {
  /* Cambio: 16px; el margen original (34px / 50px) pasa a la entradilla. */
  margin-bottom: 16px;
  font-family: var(--headings-font-family);
  font-size: 23px;
  font-weight: 700;
  line-height: 25px;
  color: var(--color-blue);
  text-align: center;
}

.contact-form__intro {
  margin-bottom: 34px;
  text-align: center;
}

.contact-form__subtitle {
  display: none;
}

.contact-form__address {
  font-style: normal;
}

/* Ya hay formulario debajo: se recuperan el padding-bottom de 40px del
   original y el margin-bottom de 40px que «ul» da a la lista. */
.contact-form__contacts {
  margin-top: -15px;
  margin-bottom: 40px;
  padding-bottom: 40px;
  list-style: none;
  text-align: center;
}

.contact-form__contact {
  margin-bottom: 0;
  font-size: 14px;
}

.contact-form__contact-link,
.contact-form__contact-label {
  display: inline-block;
  padding: 15px 0;
  color: var(--color-black);
}

/* Formulario (ContactForm.vue)
   Cambio: el original flotaba la etiqueta sobre el «placeholder»
   (.has-float-label); aquí cada campo lleva su etiqueta siempre visible
   encima, y no se usa el «placeholder» como etiqueta. */

/* Separación entre las filas del formulario. Solo se aplica dentro de <form>:
   la fila de datos de contacto no tiene ninguna fila delante. */
.contact-form__row + .contact-form__row {
  margin-top: 30px;
}

/* Cambio: a diferencia de «Datos de contacto», este título se ve también en
   móvil; es el único encabezado del formulario y ocultarlo lo sacaría del
   árbol de accesibilidad. */
.contact-form__form-title {
  /* margin: 0 auto de h1-h6: en una fila flex los márgenes automáticos se
     comen el espacio libre y descolocan las dos columnas. */
  margin: 0 0 20px;
  font-family: var(--body-font-family);
  font-size: 16px;
  font-weight: bolder;
  line-height: 19px;
  color: var(--color-blue);
  text-align: center;
}

.contact-form__hint {
  margin-bottom: 20px;
  font-size: 14px;
}

/* Original: .has-float-label margin-bottom 10px. */
.contact-form__group {
  margin-bottom: 10px;
}

.contact-form__label {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-blue);
}

/* «(obligatorio)» / «(opcional)»: parte de la etiqueta, sin destacar. */
.contact-form__required {
  font-weight: 400;
  color: var(--color-black);
}

/* Cambio: los controles no heredan la tipografía del documento y el original
   los dejaba en Arial; aquí llevan la del cuerpo. El tamaño sube de 14px a
   16px para que iOS no haga zoom al enfocar el campo. */
.contact-form__field {
  display: block;
  width: 100%;
  max-width: 554px;
  height: 40px;
  padding: 0 18px;
  font-family: var(--body-font-family);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-black);
  background-color: var(--color-white);
  /* Cambio: el original no tenía borde; un recuadro blanco sobre el gris
     claro del fondo no se distingue lo suficiente. */
  border: 1px solid var(--color-field-border);
  border-radius: 0;
}

/* Original: .has-float-label textarea, alto fijo de 156px. Aquí lo marca el
   atributo «rows» y se puede agrandar arrastrando. */
.contact-form__field--textarea {
  height: auto;
  padding-top: 12px;
  padding-bottom: 12px;
  resize: vertical;
}

/* Validación nativa: el navegador marca el campo cuando ya se ha interactuado
   con él, no nada más cargar la página. */
.contact-form__field:user-invalid {
  border-color: var(--color-error);
}

.contact-form__privacy-note p {
  margin-bottom: 10px;
  font-size: 14px;
}

.contact-form__privacy-note p:last-child {
  margin-bottom: 0;
}

/* Campo trampa antispam: oculto a la vista sin depender de otra clase. */
.contact-form__honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.contact-form__consent {
  display: flex;
  align-items: flex-start;
  margin-top: 20px;
}

.contact-form__checkbox {
  flex: none;
  width: 18px;
  height: 18px;
  /* Centra la casilla con la primera línea de la etiqueta. */
  margin-top: 2px;
  accent-color: var(--color-blue);
}

/* Original: [type="checkbox"] + label { font-size: 13px; padding-left: 10px }.
   Cambio: 14px, porque aquí la etiqueta es más larga y lleva un enlace. */
.contact-form__consent-label {
  padding-left: 10px;
  font-size: 14px;
  line-height: 1.4;
}

.contact-form__actions {
  margin-top: 20px;
}

/* Original: .btn de Layout.vue. */
.contact-form__submit {
  display: inline-block;
  height: 36px;
  padding: 0 17px;
  font-family: var(--body-font-family);
  font-size: 14px;
  font-weight: bolder;
  line-height: 36px;
  color: var(--color-white);
  text-align: center;
  background-color: var(--color-blue);
  border: 0;
}

/* Cambio: en móvil la dirección no cabe junto a la etiqueta (el original solo
   tenía Email, Teléfono y Fax); etiqueta y dirección se apilan, sin la barra. */
@media (max-width: 767.98px) {
  .contact-form__contact--address .contact-form__contact-label {
    display: block;
    padding-bottom: 0;
  }

  .contact-form__contact--address .hidden-desktop {
    display: none;
  }

  .contact-form__contact--address .contact-form__contact-link {
    display: block;
    padding-top: 4px;
  }
}

@media (min-width: 768px) {
  .contact-form__row {
    display: flex;
    justify-content: center;
  }

  .contact-form__intro {
    margin-bottom: 50px;
  }

  .contact-form__col-left {
    order: 1;
    /* Cambio: flex none para que las tres filas alineen su columna derecha
       entre 768 y 789px (si no, la fila de campos se encoge). */
    flex: none;
    width: 180px;
    padding-right: 20px;
  }

  .contact-form__col-right {
    order: 2;
    flex-grow: 1;
    max-width: 554px;
  }

  .contact-form__subtitle {
    display: block;
    margin: 0;
    font-weight: bolder;
    line-height: 19px;
    color: var(--color-blue);
  }

  .contact-form__contacts {
    text-align: left;
  }

  .contact-form__contact {
    display: flex;
  }

  /* Cambio: 132px en vez de 78px para que quepa «Correo electrónico:». */
  .contact-form__contact-label {
    min-width: 132px;
  }

  /* Pasa a la columna de la izquierda, como «Datos de contacto». */
  .contact-form__form-title {
    margin-bottom: 0;
    text-align: left;
  }
}


/* 11. Pie (Footer.vue)
   ========================================================================== */

.footer {
  padding: 44px 18px 30px;
  text-align: center;
  background-color: var(--color-white);
}

.footer_nav {
  margin-bottom: 21px;
}

.footer_nav ul {
  list-style: none;
}

.footer_nav__item-link {
  display: inline-block;
  padding: 15px 10px;
  color: var(--color-black);
  text-decoration: none;
}

.footer_nav__item-link:hover {
  text-decoration: underline;
}

/* Nuevo: línea profesional (datos de colegiación). */
.footer__professional {
  max-width: 554px;
  font-size: 14px;
}


/* 12. Plantilla de texto (páginas legales y 404)
   ========================================================================== */

.template-text {
  margin: auto;
  padding: 0 16px;
}

.content__default {
  min-height: calc(100vh - 355px);
}

.template-text .content__default li {
  line-height: 1.5;
}

@media (min-width: 768px) {
  .template-text {
    max-width: var(--max-wrapper-width);
    padding-right: 42px;
    padding-left: 42px;
  }

  .template-text .template__inner {
    max-width: 800px;
  }
}

/* Página 404: separación entre la versión española y la inglesa. */
.not-found__alt {
  margin-top: 40px;
}