/* ==========================================================================
   PROYECTOS Y REFORMAS A+B — Hoja de estilos
   --------------------------------------------------------------------------
   Estructura pensada para el trasvase posterior a Elementor: cada bloque
   comentado indica el widget o contenedor equivalente.

   Convenciones:
   - El espaciado entre elementos hermanos se resuelve siempre con `gap`
     dentro de flex o grid, nunca con márgenes.
   - Todo color vive en una variable con nombre de rol, no de valor.
   - Contraste mínimo AA (4.5:1) verificado en todas las combinaciones.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Color — nombrado por rol, no por valor.
     Los tonos "inversos" son los que se usan sobre fondo negro. */
  --color-texto:                     #0A0A0A;
  --color-texto-secundario:          #6B6B6B; /* 5.33:1 sobre blanco · 4.84:1 sobre alterno */
  --color-texto-legal:               #3A3A3A;
  --color-texto-inverso:             #FFFFFF;
  --color-texto-inverso-secundario:  #B5B5B5; /* 9.66:1 sobre oscuro */
  --color-texto-inverso-terciario:   #9E9E9E; /* 7.39:1 sobre oscuro */
  --color-texto-inverso-tenue:       #8A8A8A; /* 5.74:1 sobre oscuro */

  --color-fondo:                     #FFFFFF;
  --color-fondo-alterno:             #F4F4F4;
  --color-fondo-oscuro:              #0A0A0A;
  --color-superficie-oscura:         #171717;

  --color-linea:                     #DEDEDE;
  --color-linea-oscura:              #2E2E2E;
  /* Velo de legibilidad sobre foto. Va opaco bajo el texto y sólo se
     desvanece por encima: con un degradado que se aclara ya a la altura de las
     líneas, un pie de foto claro deja el rótulo por debajo del contraste AA. */
  --velo-sobre-foto: linear-gradient(to top,
                                     rgba(10, 10, 10, 0.88)   0%,
                                     rgba(10, 10, 10, 0.88)  50%,
                                     rgba(10, 10, 10, 0.62)  68%,
                                     rgba(10, 10, 10, 0.3)   84%,
                                     rgba(10, 10, 10, 0)    100%);

  /* Tipografía */
  --fuente-display: "Montserrat", "Segoe UI", Arial, sans-serif;
  --fuente-texto:   "Inter", "Segoe UI", Arial, sans-serif;
  --fuente-mono:    "IBM Plex Mono", "Consolas", monospace;

  /* Escala de espaciado */
  --espacio-1:  0.25rem;
  --espacio-2:  0.5rem;
  --espacio-3:  0.75rem;
  --espacio-4:  1rem;
  --espacio-5:  1.5rem;
  --espacio-6:  2rem;
  --espacio-7:  3rem;
  --espacio-8:  4rem;
  --espacio-9:  6rem;
  --espacio-10: 8rem;

  /* Medidas */
  --ancho-maximo:   1240px;
  --alto-cabecera:  72px;
  --curva:          cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* --------------------------------------------------------------------------
   2. BASE
   Sin márgenes por defecto: todo el ritmo vertical se construye con `gap`.
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--fuente-texto);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--fuente-display);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

p { margin: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* Enlace de salto al contenido, para navegación con teclado y lector de pantalla */
.salto-al-contenido {
  position: absolute;
  top: 0;
  left: -9999px;
  z-index: 200;
  padding: var(--espacio-3) var(--espacio-5);
  background: var(--color-fondo-oscuro);
  color: var(--color-texto-inverso);
  font-family: var(--fuente-mono);
  font-size: 0.75rem;
  text-decoration: none;
}
.salto-al-contenido:focus { left: 0; }

/* --------------------------------------------------------------------------
   3. UTILIDADES DE DISPOSICIÓN
   -------------------------------------------------------------------------- */

/* Limita el ancho del contenido y lo centra dentro de una franja completa */
.ancho-limitado {
  width: 100%;
  max-width: var(--ancho-maximo);
  margin-inline: auto;
  padding-inline: var(--espacio-5);
}

/* Apila elementos en vertical separándolos con `gap`.
   Es el sustituto de los márgenes entre hermanos en todo el proyecto. */
.pila            { display: flex; flex-direction: column; gap: var(--espacio-8); }
.pila--minima    { gap: var(--espacio-2); }
.pila--compacta  { gap: var(--espacio-4); }
.pila--media     { gap: var(--espacio-5); }
.pila--amplia    { gap: var(--espacio-7); }

/* --------------------------------------------------------------------------
   4. COTA — elemento firma
   Línea de acotación de plano: ├──── ETIQUETA ────┤
   Sustituye a los típicos "eyebrow" o numeraciones decorativas 01/02/03.
   En Elementor: widget Texto con clase CSS "cota".
   -------------------------------------------------------------------------- */
.cota {
  display: flex;
  align-items: center;
  gap: var(--espacio-4);
  font-family: var(--fuente-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-texto-secundario);
  white-space: nowrap;
}
.cota::before,
.cota::after {
  content: "";
  flex: 1 1 auto;
  height: 8px;
  border-bottom: 1px solid currentColor;
  transition: transform 0.8s var(--curva);
}
.cota::before { border-left: 1px solid currentColor;  transform-origin: left; }
.cota::after  { border-right: 1px solid currentColor; transform-origin: right; }

/* Arranca pegada al texto: el trazo sólo se extiende hacia la derecha */
.cota--inicio::before { flex: 0 0 28px; }

/* Sobre fondo oscuro */
.cota--inversa { color: var(--color-texto-inverso-tenue); }

/* --------------------------------------------------------------------------
   5. BOTONES Y ENLACES DE ACCIÓN
   En Elementor: widget Botón.
   -------------------------------------------------------------------------- */
.boton {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-3);
  padding: 1rem 1.75rem;
  border: 1px solid var(--color-texto);
  background: none;
  color: var(--color-texto);
  font-family: var(--fuente-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s var(--curva), color 0.3s var(--curva);
}
.boton:hover { background: var(--color-texto); color: var(--color-texto-inverso); }

/* Relleno negro sobre fondo claro */
.boton--solido { background: var(--color-texto); color: var(--color-texto-inverso); }
.boton--solido:hover { background: var(--color-fondo); color: var(--color-texto); }

/* Contorno blanco sobre fondo oscuro */
.boton--contorno-inverso { border-color: var(--color-texto-inverso); color: var(--color-texto-inverso); }
.boton--contorno-inverso:hover { background: var(--color-texto-inverso); color: var(--color-texto); }

/* Relleno blanco sobre fondo oscuro */
.boton--solido-inverso {
  background: var(--color-texto-inverso);
  border-color: var(--color-texto-inverso);
  color: var(--color-texto);
}
.boton--solido-inverso:hover { background: transparent; color: var(--color-texto-inverso); }

/* Enlace subrayado con flecha, para acciones secundarias */
.enlace-accion {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  align-self: flex-start;
  padding-bottom: 3px;
  border-bottom: 1px solid currentColor;
  font-family: var(--fuente-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.enlace-accion__flecha { transition: transform 0.3s var(--curva); }
.enlace-accion:hover .enlace-accion__flecha { transform: translateX(5px); }

/* Grupo de botones */
.grupo-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espacio-5); }

/* --------------------------------------------------------------------------
   6. CABECERA
   En Elementor: Theme Builder > Header.
   -------------------------------------------------------------------------- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-fondo);
  border-bottom: 1px solid var(--color-linea);
}
.cabecera__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-5);
  height: var(--alto-cabecera);
}
.cabecera__acciones { display: flex; align-items: center; gap: var(--espacio-5); }

/* Logotipo del cliente. La marca A+B va en PNG con transparencia, en dos
   versiones: negra para la cabecera clara y blanca para el pie oscuro. */
.marca {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  flex-shrink: 0;
  text-decoration: none;
}
.marca__logo {
  width: auto;
  height: 38px;
  flex-shrink: 0;
}
.marca__texto {
  display: flex;
  flex-direction: column;
  font-family: var(--fuente-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
}
.marca__lugar { color: var(--color-texto-secundario); }

/* Variante del pie, sobre fondo oscuro */
.marca--inversa .marca__logo { height: 44px; }
.marca--inversa .marca__lugar { color: var(--color-texto-inverso-tenue); }

/* Navegación */
.navegacion__lista { display: flex; align-items: center; gap: var(--espacio-6); }
.navegacion__enlace {
  padding: var(--espacio-2) 0;
  border-bottom: 1px solid transparent;
  font-family: var(--fuente-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color 0.3s var(--curva);
}
.navegacion__enlace:hover,
.navegacion__enlace[aria-current="page"] { border-bottom-color: var(--color-texto); }

/* Duplicado del botón principal que sólo aparece dentro del menú desplegable */
.navegacion__accion { display: none; }

/* Botón hamburguesa */
.boton-menu {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--color-linea);
  background: none;
  cursor: pointer;
}
.boton-menu__barra {
  display: block;
  width: 18px;
  height: 1px;
  margin: 4px auto;
  background: var(--color-texto);
  transition: transform 0.3s var(--curva), opacity 0.2s;
}
.boton-menu[aria-expanded="true"] .boton-menu__barra:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.boton-menu[aria-expanded="true"] .boton-menu__barra:nth-child(2) { opacity: 0; }
.boton-menu[aria-expanded="true"] .boton-menu__barra:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   7. PORTADA DE INICIO
   En Elementor: contenedor a 2 columnas.
   -------------------------------------------------------------------------- */
.portada-inicio {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  min-height: min(680px, calc(100vh - var(--alto-cabecera)));
  background: var(--color-fondo-oscuro);
  color: var(--color-texto-inverso);
}
.portada-inicio__texto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--espacio-7);
  width: 100%;
  max-width: 720px;
  margin-left: auto;
  padding: var(--espacio-9) clamp(var(--espacio-5), 5vw, var(--espacio-8));
}
.portada-inicio__titular { font-size: clamp(2.75rem, 6vw, 5rem); }
.portada-inicio__entrada {
  max-width: 46ch;
  font-size: 1.125rem;
  color: var(--color-texto-inverso-secundario);
}
.portada-inicio__imagen { overflow: hidden; background: var(--color-superficie-oscura); }
.portada-inicio__imagen img { width: 100%; height: 100%; object-fit: cover; }

/* Banda de cifras bajo la portada */
.cifras-clave {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--color-linea);
}
.cifras-clave__dato {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  padding: var(--espacio-6) clamp(var(--espacio-5), 3vw, var(--espacio-7));
  border-right: 1px solid var(--color-linea);
}
.cifras-clave__dato:last-child { border-right: 0; }
.cifras-clave__numero {
  font-family: var(--fuente-display);
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 2.75rem);
  letter-spacing: -0.04em;
  line-height: 1;
}
.cifras-clave__etiqueta {
  font-family: var(--fuente-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-texto-secundario);
}

/* --------------------------------------------------------------------------
   8. SECCIONES
   -------------------------------------------------------------------------- */
.seccion { padding-block: clamp(4.5rem, 9vw, var(--espacio-10)); }
.seccion--alterna { background: var(--color-fondo-alterno); }
.seccion--oscura  { background: var(--color-fondo-oscuro); color: var(--color-texto-inverso); }

.encabezado-seccion {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-5);
  max-width: 780px;
}
.encabezado-seccion__titulo { font-size: clamp(2rem, 4vw, 3.25rem); }
/* Para encabezados que acompañan a otro principal y no deben competir con él */
.encabezado-seccion--secundario .encabezado-seccion__titulo { font-size: clamp(1.5rem, 2.5vw, 2rem); }
.encabezado-seccion__texto {
  max-width: 60ch;
  font-size: 1.0625rem;
  color: var(--color-texto-secundario);
}
.seccion--oscura .encabezado-seccion__texto { color: var(--color-texto-inverso-terciario); }

/* Franja destacada — una sola fila para una idea que merece salirse del ritmo
   de las secciones. Usa la superficie oscura, que no gasta ninguna otra franja:
   así se distingue del negro de «Cómo trabajamos» y de la llamada a la acción,
   y en Inicio no quedan dos fondos idénticos seguidos. */
.franja-destacada {
  padding-block: clamp(var(--espacio-7), 6vw, var(--espacio-8));
  background: var(--color-superficie-oscura);
  color: var(--color-texto-inverso);
}
.franja-destacada__contenido {
  display: grid;
  /* El texto pide algo más de sitio que el titular, que va en dos líneas. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(var(--espacio-5), 5vw, var(--espacio-8));
  align-items: start;
}
.franja-destacada__titulo { font-size: clamp(1.5rem, 3vw, 2.25rem); }
.franja-destacada__texto {
  max-width: 56ch;
  font-size: 1.0625rem;
  color: var(--color-texto-inverso-terciario); /* 6,69:1 sobre la superficie oscura */
}

/* Cabecera de las páginas interiores */
.portada-interior {
  padding-block: clamp(var(--espacio-8), 8vw, var(--espacio-9));
  background: var(--color-fondo-oscuro);
  color: var(--color-texto-inverso);
}
.portada-interior__titulo { font-size: clamp(2.5rem, 5.5vw, 4.25rem); }
.portada-interior__texto {
  max-width: 58ch;
  font-size: 1.125rem;
  color: var(--color-texto-inverso-terciario);
}

/* --------------------------------------------------------------------------
   9. TARJETAS DE SERVICIO
   En Elementor: contenedor con widgets Icon Box o bucle de entradas.
   -------------------------------------------------------------------------- */
.rejilla-tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1px;
  background: var(--color-linea);
  border: 1px solid var(--color-linea);
}

/* Base compartida por la tarjeta enlazada y la meramente informativa */
.tarjeta {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-4);
  padding: var(--espacio-7) var(--espacio-6);
  background: var(--color-fondo);
  text-decoration: none;
}
.tarjeta__referencia {
  font-family: var(--fuente-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  color: var(--color-texto-secundario);
  transition: color 0.35s var(--curva);
}
.tarjeta__titulo { font-size: 1.375rem; letter-spacing: -0.02em; }
.tarjeta__texto {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-texto-secundario);
  transition: color 0.35s var(--curva);
}

/* Sólo las tarjetas que son enlace reaccionan al puntero */
.tarjeta--enlace { transition: background-color 0.35s var(--curva), color 0.35s var(--curva); }
.tarjeta--enlace:hover { background: var(--color-fondo-oscuro); color: var(--color-texto-inverso); }
.tarjeta--enlace:hover .tarjeta__texto,
.tarjeta--enlace:hover .tarjeta__referencia { color: var(--color-texto-inverso-terciario); }

/* Ficha ampliada de servicio (página Servicios) */
.ficha-servicio {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: clamp(var(--espacio-6), 5vw, var(--espacio-8));
  align-items: start;
  padding-block: var(--espacio-8);
  border-top: 1px solid var(--color-linea);
}
.ficha-servicio__imagen { background: var(--color-fondo-alterno); }
.ficha-servicio__titulo { font-size: clamp(1.5rem, 3vw, 2.125rem); }
.ficha-servicio__trabajos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--espacio-3) var(--espacio-5);
}
.ficha-servicio__trabajos li {
  display: flex;
  gap: var(--espacio-3);
  padding-top: var(--espacio-3);
  border-top: 1px solid var(--color-linea);
  font-size: 0.9375rem;
  color: var(--color-texto-secundario);
}
.ficha-servicio__trabajos li::before { content: "—"; color: var(--color-texto); }

/* --------------------------------------------------------------------------
   10. PROCESO DE TRABAJO
   La numeración aquí sí es información: el orden de las fases importa.
   -------------------------------------------------------------------------- */
.proceso {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--espacio-6);
}
.proceso__fase {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
  padding-top: var(--espacio-5);
  border-top: 1px solid var(--color-linea-oscura);
}
.proceso__orden {
  font-family: var(--fuente-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  color: var(--color-texto-inverso-tenue);
  padding-bottom: var(--espacio-2);
}
.proceso__titulo { font-size: 1.25rem; letter-spacing: -0.02em; }
.proceso__texto {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-texto-inverso-terciario);
}

/* --------------------------------------------------------------------------
   11. BLOQUE DE TEXTO E IMAGEN
   -------------------------------------------------------------------------- */
.texto-imagen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--espacio-6), 6vw, var(--espacio-9));
  align-items: center;
}
.texto-imagen--invertido .texto-imagen__imagen { order: -1; }
.texto-imagen__titulo { font-size: clamp(1.75rem, 3.5vw, 2.75rem); }
.texto-imagen__imagen { background: var(--color-fondo-alterno); }

/* Lista de argumentos con filete superior */
.argumentos { display: grid; gap: var(--espacio-5); }
.argumento {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  padding-top: var(--espacio-4);
  border-top: 1px solid var(--color-linea);
}
.argumento__titulo {
  font-family: var(--fuente-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.argumento__texto { font-size: 0.9375rem; color: var(--color-texto-secundario); }

/* Mapa del local — ocupa el hueco de la imagen en el bloque de texto e imagen.
   Los estilos de Leaflet vienen aparte, en assets/vendor; aquí sólo se le da
   el aspecto del sitio: sin esquinas redondeadas, tinta negra y la tipografía
   monoespaciada de los datos. */
.mapa-local {
  aspect-ratio: 4 / 3;
  width: 100%;
  background: var(--color-fondo-alterno);
  /* Leaflet apila teselas, controles y burbujas con z-index propios y altos.
     Aislarlo evita que se cuelen por encima de la cabecera fija. */
  isolation: isolate;
}
.mapa-local__marcador { color: var(--color-texto); }
.mapa-local__burbuja {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-1);
  font-family: var(--fuente-texto);
  font-size: 0.875rem;
  letter-spacing: normal;
  text-transform: none;
}

/* Leaflet trae esquinas redondeadas y sombras que no son de este diseño. */
.mapa-local .leaflet-container { font-family: var(--fuente-texto); }
.mapa-local .leaflet-bar,
.mapa-local .leaflet-popup-content-wrapper,
.mapa-local .leaflet-popup-tip {
  border-radius: 0;
  box-shadow: none;
}
.mapa-local .leaflet-bar a {
  border-bottom-color: var(--color-linea);
  color: var(--color-texto);
}
.mapa-local .leaflet-popup-content-wrapper { border: 1px solid var(--color-linea); }

/* --------------------------------------------------------------------------
   12. GALERÍA DE TRABAJOS
   En Elementor: widget Galería o Entradas con filtros por categoría.
   -------------------------------------------------------------------------- */
.filtros-galeria {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
  padding-bottom: var(--espacio-5);
  border-bottom: 1px solid var(--color-linea);
}
.filtros-galeria__boton {
  padding: var(--espacio-2) var(--espacio-4);
  border: 1px solid var(--color-linea);
  background: none;
  font-family: var(--fuente-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-texto-secundario);
  cursor: pointer;
  transition: background-color 0.25s var(--curva), color 0.25s var(--curva), border-color 0.25s var(--curva);
}
.filtros-galeria__boton:hover { border-color: var(--color-texto); color: var(--color-texto); }
.filtros-galeria__boton[aria-pressed="true"] {
  background: var(--color-texto);
  border-color: var(--color-texto);
  color: var(--color-texto-inverso);
}

.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--espacio-5);
}
.trabajo { position: relative; overflow: hidden; background: var(--color-fondo-alterno); }
.trabajo[hidden] { display: none; }
/* Retrato: casi todas las fotos de obra vienen en vertical desde el móvil,
   así que se recorta lo mínimo imprescindible. */
.trabajo img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform 0.6s var(--curva);
}
.trabajo:hover img { transform: scale(1.04); }
.trabajo__pie {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  /* El relleno superior es la carrerilla que necesita el velo para
     desvanecerse por encima del texto en lugar de hacerlo sobre él. */
  padding: var(--espacio-8) var(--espacio-4) var(--espacio-4);
  background: var(--velo-sobre-foto);
  color: var(--color-texto-inverso);
  font-family: var(--fuente-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.trabajo__lugar { color: var(--color-texto-inverso-secundario); letter-spacing: 0.1em; }

/* El avance de la galería en la home muestra tres trabajos por fila en lugar
   de rellenar el ancho: son una selección, no el catálogo. Se ancla a
   .seccion--alterna.seccion--trabajos, combinación que sólo usa la home (la
   página Galería usa .seccion--trabajos sin la variante --alterna).

   El pie es el mismo en las dos páginas, a propósito: el rótulo mono en
   versalitas es el que identifica una foto de obra en este diseño, y cambiarlo
   sólo en la portada hacía que la misma tarjeta se leyera de dos maneras. */
.seccion--alterna.seccion--trabajos .galeria {
  grid-template-columns: repeat(3, 1fr);
}

/* --------------------------------------------------------------------------
   13. LLAMADA A LA ACCIÓN
   -------------------------------------------------------------------------- */
.llamada { align-items: center; text-align: center; }
.llamada__intro { align-items: center; align-self: stretch; }
.llamada .cota { justify-content: center; align-self: stretch; }
.llamada__titulo { font-size: clamp(2rem, 4.5vw, 3.5rem); }
.llamada__texto { max-width: 52ch; color: var(--color-texto-inverso-terciario); }
.llamada__acciones { justify-content: center; }

/* --------------------------------------------------------------------------
   14. ICONOS
   Trazo de 1,5 px con remates rectos, sin curvas en las esquinas: el mismo
   lenguaje que un plano acotado. El único icono relleno es el de WhatsApp,
   porque es una marca y hay que reconocerla de un vistazo.
   -------------------------------------------------------------------------- */
.sprite-iconos { display: none; }

.icono {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.icono--relleno { fill: currentColor; stroke: none; }
.icono--pequeno { width: 15px; height: 15px; }

/* --------------------------------------------------------------------------
   15. ESTADO DE DISPONIBILIDAD
   Sin color de acento no se puede usar el verde/rojo de siempre, así que el
   estado se lee por la forma: cuadrado relleno abierto, hueco cerrado.
   -------------------------------------------------------------------------- */
.estado-disponibilidad {
  display: inline-flex;
  align-items: center;
  align-self: flex-start; /* se ciñe a su texto, no ocupa la columna entera */
  gap: var(--espacio-3);
  padding: var(--espacio-3) var(--espacio-4);
  border: 1px solid var(--color-linea-oscura);
  font-family: var(--fuente-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-texto-inverso-secundario);
}
.estado-disponibilidad__indicador {
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  border: 1px solid var(--color-texto-inverso);
}
.estado-disponibilidad--abierto { border-color: var(--color-texto-inverso); color: var(--color-texto-inverso); }
.estado-disponibilidad--abierto .estado-disponibilidad__indicador {
  background: var(--color-texto-inverso);
  animation: latido 2.4s ease-in-out infinite;
}

@keyframes latido {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}

/* Compromisos que se asumen al escribir. Van juntos y sólo una vez. */
.compromisos { display: flex; flex-wrap: wrap; gap: var(--espacio-3); }
.compromiso {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  padding: var(--espacio-2) var(--espacio-3);
  border: 1px solid var(--color-linea-oscura);
  font-family: var(--fuente-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-texto-inverso-secundario);
}

/* --------------------------------------------------------------------------
   16. CANALES DE CONTACTO
   Reutilizan la tarjeta de servicios: mismo relleno, mismo hover en negativo.
   En Elementor: contenedor con widgets Icon Box enlazados.
   -------------------------------------------------------------------------- */
.rejilla-tarjetas--canales { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.canal { gap: var(--espacio-3); padding: var(--espacio-6); }
.canal .icono { width: 28px; height: 28px; }
.canal__valor {
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: 1.1875rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.canal__valor--correo {
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  word-break: break-all;
}

/* --------------------------------------------------------------------------
   17. DATOS DE CONTACTO Y FORMULARIO
   En Elementor: widget Form (Pro) o Contact Form 7.
   -------------------------------------------------------------------------- */
.contacto {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(var(--espacio-6), 6vw, var(--espacio-9));
  align-items: start;
}

.datos-contacto { display: grid; gap: var(--espacio-5); }
.datos-contacto__bloque {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  padding-top: var(--espacio-4);
  border-top: 1px solid var(--color-linea);
}
.datos-contacto__etiqueta {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  font-family: var(--fuente-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-texto-secundario);
}
.datos-contacto__valor { font-size: 1.0625rem; text-decoration: none; }
a.datos-contacto__valor:hover { text-decoration: underline; text-underline-offset: 4px; }

.formulario { display: grid; gap: var(--espacio-6); }
.formulario__grupo {
  display: grid;
  gap: var(--espacio-5);
  padding: 0;
  border: 0;
  margin: 0;
}
.formulario__leyenda {
  display: flex;
  align-items: center;
  gap: var(--espacio-4);
  width: 100%;
  padding: 0 0 var(--espacio-2);
  font-family: var(--fuente-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-texto);
}
/* La leyenda arrastra la línea de cota, igual que los títulos de sección. */
.formulario__leyenda::after {
  content: "";
  flex: 1 1 auto;
  height: 8px;
  border-bottom: 1px solid var(--color-linea);
  border-right: 1px solid var(--color-linea);
}
.formulario__fila { display: grid; grid-template-columns: 1fr 1fr; gap: var(--espacio-5); }

.campo { display: grid; gap: var(--espacio-2); }
.campo__etiqueta {
  display: flex;
  align-items: baseline;
  gap: var(--espacio-2);
  font-family: var(--fuente-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-texto-secundario);
}
/* Se marca lo opcional, no lo obligatorio: hay menos que señalar. */
.campo__opcional { letter-spacing: 0.1em; text-transform: none; opacity: 0.75; }
.campo__control {
  width: 100%;
  padding: var(--espacio-3) var(--espacio-4);
  border: 1px solid var(--color-linea);
  border-radius: 0;
  background: var(--color-fondo);
  font-family: var(--fuente-texto);
  font-size: 1rem;
  color: var(--color-texto);
  transition: border-color 0.25s var(--curva), box-shadow 0.25s var(--curva);
}
.campo__control:hover { border-color: var(--color-texto-secundario); }
.campo__control:focus { border-color: var(--color-texto); outline: none; box-shadow: inset 0 0 0 1px var(--color-texto); }
select.campo__control { cursor: pointer; }
textarea.campo__control { min-height: 140px; resize: vertical; }

/* Error: sin color, se señala con una banda negra en el canto del campo. */
.campo__control[aria-invalid="true"] {
  border-color: var(--color-texto);
  box-shadow: inset 4px 0 0 var(--color-texto);
}
.campo__error {
  display: none;
  align-items: center;
  gap: var(--espacio-2);
  font-family: var(--fuente-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--color-texto);
}
.campo__error--visible { display: flex; }

.consentimiento {
  display: flex;
  align-items: flex-start;
  gap: var(--espacio-3);
  font-size: 0.875rem;
  color: var(--color-texto-secundario);
  cursor: pointer;
}
.consentimiento__casilla {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 5px;
  accent-color: var(--color-texto);
  cursor: pointer;
}
.consentimiento__casilla[aria-invalid="true"] {
  outline: 2px solid var(--color-texto);
  outline-offset: 2px;
}

/* El botón de envío del formulario ocupa el ancho del formulario y centra
   el texto, igual que una banda de acción final. */
.formulario button[type="submit"] {
  width: 100%;
  justify-content: center;
}

.aviso-formulario {
  display: none;
  gap: var(--espacio-3);
  padding: var(--espacio-4);
  border: 1px solid var(--color-texto);
  font-family: var(--fuente-mono);
  font-size: 0.75rem;
  line-height: 1.6;
}
.aviso-formulario--visible { display: flex; }

/* --------------------------------------------------------------------------
   18. PIE
   En Elementor: Theme Builder > Footer.
   -------------------------------------------------------------------------- */
.pie {
  padding-block: var(--espacio-8) var(--espacio-6);
  background: var(--color-fondo-oscuro);
  color: var(--color-texto-inverso);
}
.pie__rejilla {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--espacio-6);
  padding-bottom: var(--espacio-7);
  border-bottom: 1px solid var(--color-linea-oscura);
}
.pie__columna { display: flex; flex-direction: column; gap: var(--espacio-4); }
.pie__claim {
  max-width: 32ch;
  font-size: 0.9375rem;
  color: var(--color-texto-inverso-terciario);
}
.pie__titulo {
  font-family: var(--fuente-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-texto-inverso-tenue);
}
.pie__lista { display: grid; gap: var(--espacio-3); font-size: 0.9375rem; }
.pie__lista a { color: var(--color-texto-inverso-secundario); text-decoration: none; }
.pie__lista a:hover { color: var(--color-texto-inverso); }
.pie__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--espacio-4);
  padding-top: var(--espacio-5);
  font-family: var(--fuente-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-texto-inverso-tenue);
}

/* --------------------------------------------------------------------------
   19. BOTÓN FLOTANTE DE WHATSAPP
   -------------------------------------------------------------------------- */
.whatsapp-flotante {
  position: fixed;
  right: var(--espacio-5);
  bottom: var(--espacio-5);
  z-index: 90;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-fondo-oscuro);
  color: var(--color-texto-inverso);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
  transition: transform 0.3s var(--curva);
}
.whatsapp-flotante:hover { transform: scale(1.08); }

/* --------------------------------------------------------------------------
   20. AVISO DE COOKIES
   -------------------------------------------------------------------------- */
.aviso-cookies {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 120;
  display: none;
  padding-block: var(--espacio-5);
  background: var(--color-fondo-oscuro);
  color: var(--color-texto-inverso);
  border-top: 1px solid var(--color-linea-oscura);
}
.aviso-cookies--visible { display: block; }
.aviso-cookies__interior {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-5);
}
.aviso-cookies__texto {
  max-width: 60ch;
  font-size: 0.875rem;
  color: var(--color-texto-inverso-secundario);
}
.aviso-cookies__texto a { color: var(--color-texto-inverso); }

/* --------------------------------------------------------------------------
   21. PÁGINAS LEGALES
   -------------------------------------------------------------------------- */
.texto-legal { display: flex; flex-direction: column; gap: var(--espacio-7); max-width: 760px; }
.texto-legal__apartado { display: flex; flex-direction: column; gap: var(--espacio-4); }
.texto-legal__apartado h2 { font-size: 1.5rem; }
.texto-legal__apartado h3 { font-size: 1.125rem; }
.texto-legal p,
.texto-legal li { font-size: 1rem; color: var(--color-texto-legal); }
.texto-legal ul { display: grid; gap: var(--espacio-2); }
.texto-legal ul li { position: relative; padding-left: var(--espacio-5); }
.texto-legal ul li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--color-texto-secundario);
}
.texto-legal table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.texto-legal th,
.texto-legal td {
  padding: var(--espacio-3);
  border: 1px solid var(--color-linea);
  text-align: left;
  vertical-align: top;
}
.texto-legal th {
  font-family: var(--fuente-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Tablas anchas: se desplazan dentro de su propio contenedor */
.tabla-desplazable { overflow-x: auto; }

/* Marca un dato que el cliente aún no ha facilitado */
.dato-pendiente {
  padding: 1px 5px;
  background: var(--color-fondo-alterno);
  border-bottom: 1px solid var(--color-texto);
  font-family: var(--fuente-mono);
  font-size: 0.875em;
}

/* --------------------------------------------------------------------------
   22. ANIMACIÓN DE ENTRADA
   Sólo se aplica si el JS está activo, para que la web siga siendo legible
   sin él. Se desactiva por completo con `prefers-reduced-motion`.
   -------------------------------------------------------------------------- */
.js .con-entrada {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.8s var(--curva), transform 0.8s var(--curva);
}
.js .con-entrada--visible { opacity: 1; transform: none; }
.js .con-entrada .cota::before,
.js .con-entrada .cota::after { transform: scaleX(0); }
.js .con-entrada--visible .cota::before,
.js .con-entrada--visible .cota::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .con-entrada { opacity: 1; transform: none; transition: none; }
  .js .con-entrada .cota::before,
  .js .con-entrada .cota::after { transform: none; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   23. ADAPTACIÓN A PANTALLAS PEQUEÑAS
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .portada-inicio { grid-template-columns: 1fr; min-height: 0; }
  .portada-inicio__texto { max-width: none; padding-block: var(--espacio-8); }
  .portada-inicio__imagen { aspect-ratio: 16 / 10; }
  .texto-imagen, .contacto { grid-template-columns: 1fr; }
  /* La franja se apila: título arriba, explicación debajo. */
  .franja-destacada__contenido { grid-template-columns: 1fr; }
  .texto-imagen--invertido .texto-imagen__imagen { order: 0; }
  .ficha-servicio { grid-template-columns: 1fr; gap: var(--espacio-5); }
  .ficha-servicio__imagen { max-width: 320px; }
  .pie__rejilla { grid-template-columns: 1fr 1fr; gap: var(--espacio-7) var(--espacio-6); }
}

@media (max-width: 760px) {
  .boton-menu { display: block; }
  .cabecera__acciones .boton { display: none; }

  .navegacion {
    position: fixed;
    inset: var(--alto-cabecera) 0 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--espacio-6);
    padding: var(--espacio-7) var(--espacio-5);
    background: var(--color-fondo-oscuro);
    transform: translateX(100%);
    visibility: hidden;
    overflow-y: auto;
    transition: transform 0.4s var(--curva), visibility 0.4s;
  }
  .navegacion--abierta { transform: none; visibility: visible; }
  .navegacion__lista { flex-direction: column; align-items: stretch; gap: 0; }
  .navegacion__enlace {
    display: block;
    padding: var(--espacio-5) 0;
    border-bottom: 1px solid var(--color-linea-oscura);
    color: var(--color-texto-inverso);
    font-size: 0.875rem;
  }
  .navegacion__enlace:hover,
  .navegacion__enlace[aria-current="page"] { border-bottom-color: var(--color-texto-inverso); }
  .navegacion__accion { display: inline-flex; align-self: flex-start; }

  .cifras-clave { grid-template-columns: 1fr; }
  .cifras-clave__dato { border-right: 0; border-bottom: 1px solid var(--color-linea); }
  .cifras-clave__dato:last-child { border-bottom: 0; }

  /* Nombre y teléfono dejan de compartir línea para no quedar estrechos */
  .formulario__fila { grid-template-columns: 1fr; }
  .estado-disponibilidad { width: 100%; }

  .marca__texto { display: none; }
  .aviso-cookies__interior { flex-direction: column; align-items: stretch; }
  .whatsapp-flotante { right: var(--espacio-4); bottom: var(--espacio-4); }
}

@media (max-width: 520px) {
  .pie__rejilla { grid-template-columns: 1fr; }
  .grupo-acciones { flex-direction: column; align-items: stretch; }
  .grupo-acciones .boton { justify-content: center; }
  .grupo-acciones .enlace-accion { align-self: flex-start; }
}

/* --------------------------------------------------------------------------
   24. COMPATIBILIDAD CON ELEMENTOR
   La maqueta original era HTML plano. Al montarla sobre contenedores de
   Elementor aparecen envoltorios extra con sus propios márgenes y anchos.
   Este bloque los neutraliza para que el diseño se comporte igual que en la
   maqueta: el ritmo lo siguen dando `gap` y `.ancho-limitado`.
   -------------------------------------------------------------------------- */

/* Los contenedores de Elementor traen ancho y relleno propios. Aquí manda
   siempre `.ancho-limitado`, así que se anulan. */
.elementor-element.e-con,
.elementor-element.e-con > .e-con-inner {
  --container-default-padding-block-start: 0;
  --container-default-padding-block-end: 0;
  --container-default-padding-inline-start: 0;
  --container-default-padding-inline-end: 0;

  /* Elementor no lee las variables anteriores para el relleno efectivo: usa
     estas otras, que trae a 10px. Ese margen invisible encogía cada bloque
     20px y descolocaba los saltos de línea de los titulares. El relleno real
     lo declara cada clase del diseño (`.seccion`, `.tarjeta`, `.ancho-limitado`). */
  --padding-block-start: 0px;
  --padding-block-end: 0px;
  --padding-inline-start: 0px;
  --padding-inline-end: 0px;

  /* Y para el hueco entre hijos pasa lo mismo: Elementor no lee `--gap`, sino
     `--row-gap` y `--column-gap`, que trae a 20px. En la maqueta ningún
     contenedor tenía hueco salvo que su clase lo pidiera, así que se ponen a
     cero; las clases que sí lo necesitan (`.pila`, `.galeria`, `.tarjeta`)
     declaran el suyo y siguen mandando. */
  --gap: 0px;
  --row-gap: 0px;
  --column-gap: 0px;
}

/* Elementor envuelve cada widget en dos capas. Ninguna debe añadir espacio:
   el hueco entre hermanos lo pone la utilidad `.pila` del contenedor padre. */
.elementor-widget,
.elementor-widget:not(:last-child),
.elementor-widget-container {
  margin: 0;
  padding: 0;
}

/* El editor de texto de Elementor envuelve el contenido en un div propio.
   Los párrafos ya no llevan margen en esta hoja, así que se hereda todo. */
/* Sólo hereda el div interior, nunca el widget. Si el widget heredase también,
   se llevaría por delante el color que le da su clase de diseño: los textos
   secundarios (`.encabezado-seccion__texto`, `.tarjeta__texto`, `.llamada__texto`)
   son grises a propósito y acabarían del color del titular de su sección. */
.elementor-widget-text-editor .elementor-widget-container {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* Los encabezados de Elementor arrastran la tipografía y el color de su kit
   global mediante `.elementor-widget-heading .elementor-heading-title`. Hay que
   igualar esa especificidad, porque el kit fija el color de los titulares al
   negro de la paleta y sobre las secciones oscuras quedarían invisibles. Lo que
   manda es el contenedor: el titular hereda de la sección en la que vive. */
.elementor-element.elementor-widget-heading .elementor-heading-title,
.elementor-element.elementor-widget-heading .elementor-heading-title > a {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
}

/* Un contenedor con clase de sección debe ocupar todo el ancho de la ventana,
   porque el fondo (oscuro o alterno) sangra de lado a lado. */
.elementor-element.seccion,
.elementor-element.portada-inicio,
.elementor-element.portada-interior,
.elementor-element.cifras-clave {
  width: 100%;
  max-width: none;
}

/* Elementor da `display: flex` a los contenedores. Las utilidades que
   necesitan rejilla la recuperan explícitamente. */
.elementor-element.rejilla-tarjetas,
.elementor-element.galeria,
.elementor-element.proceso,
.elementor-element.cifras-clave,
.elementor-element.texto-imagen,
.elementor-element.contacto,
.elementor-element.ficha-servicio,
.elementor-element.argumentos,
.elementor-element.datos-contacto,
.elementor-element.franja-destacada__contenido,
.elementor-element.portada-inicio {
  display: grid;
}

/* Elementor apila en columna todo contenedor suyo. Los grupos que en el diseño
   van en fila —los pares de botones— tienen que recuperar la dirección
   horizontal con la misma especificidad con la que Elementor la impone. */
.elementor-element.grupo-acciones {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-5);
}
.elementor-element.llamada__acciones { justify-content: center; }

/* El bloque centrado de la llamada a la acción y sus hijos. */
.elementor-element.llamada { align-items: center; }
.elementor-element.llamada__intro { align-items: center; align-self: stretch; }

@media (max-width: 520px) {
  .elementor-element.grupo-acciones {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Las tarjetas y los trabajos son contenedores enlazados: Elementor pinta el
   enlace como una capa absoluta encima, que no debe tapar el contenido. */
.elementor-element.tarjeta > .elementor-element-overlay,
.elementor-element.trabajo > .elementor-element-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* La imagen del widget Imagen debe llenar su hueco en portada y galería. */
.portada-inicio__imagen .elementor-widget-image,
.portada-inicio__imagen .elementor-widget-container,
.trabajo .elementor-widget-image,
.trabajo .elementor-widget-container {
  height: 100%;
}
.portada-inicio__imagen img { width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------------------
   25. VISTA DEL EDITOR
   Dentro del editor, Elementor añade marcos y espacios de trabajo. Se ajusta
   lo mínimo para que lo que se ve al editar coincida con lo publicado.
   -------------------------------------------------------------------------- */
.elementor-editor-active .cabecera,
.elementor-editor-active .whatsapp-flotante,
.elementor-editor-active .aviso-cookies { display: none; }

/* Sin JavaScript de entrada en el editor: si no, las secciones quedan
   invisibles mientras se trabaja. */
.elementor-editor-active .con-entrada,
.elementor-editor-preview .con-entrada {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   26. EL WIDGET BOTÓN DE ELEMENTOR, CON EL ASPECTO DEL PROYECTO
   El cliente inserta un widget Botón normal y sale ya con el diseño de la
   web. Elementor pone sus clases en el enlace interior y la clase del
   proyecto en el envoltorio, así que se estiliza desde fuera hacia dentro.
   -------------------------------------------------------------------------- */
.accion-boton .elementor-button-wrapper { display: flex; }

.accion-boton .elementor-button {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-3);
  padding: 1rem 1.75rem;
  border: 1px solid var(--color-texto);
  border-radius: 0;
  background: none;
  color: var(--color-texto);
  font-family: var(--fuente-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.7; /* alto del boton */
  fill: currentColor;
  cursor: pointer;
  transition: background-color 0.3s var(--curva), color 0.3s var(--curva);
}
.accion-boton .elementor-button:hover,
.accion-boton .elementor-button:focus {
  background: var(--color-texto);
  color: var(--color-texto-inverso);
}

/* Relleno negro sobre fondo claro */
.accion-boton--solido .elementor-button {
  background: var(--color-texto);
  color: var(--color-texto-inverso);
}
.accion-boton--solido .elementor-button:hover,
.accion-boton--solido .elementor-button:focus {
  background: var(--color-fondo);
  color: var(--color-texto);
}

/* Contorno blanco sobre fondo oscuro */
.accion-boton--contorno-inverso .elementor-button {
  border-color: var(--color-texto-inverso);
  color: var(--color-texto-inverso);
}
.accion-boton--contorno-inverso .elementor-button:hover,
.accion-boton--contorno-inverso .elementor-button:focus {
  background: var(--color-texto-inverso);
  color: var(--color-texto);
}

/* Relleno blanco sobre fondo oscuro */
.accion-boton--solido-inverso .elementor-button {
  background: var(--color-texto-inverso);
  border-color: var(--color-texto-inverso);
  color: var(--color-texto);
}
.accion-boton--solido-inverso .elementor-button:hover,
.accion-boton--solido-inverso .elementor-button:focus {
  background: transparent;
  color: var(--color-texto-inverso);
}

/* Elementor envuelve el texto en dos spans más; ninguno debe alterar el ritmo. */
.accion-boton .elementor-button-content-wrapper,
.accion-boton .elementor-button-text { display: inline; }

/* --------------------------------------------------------------------------
   27. TARJETA ENLAZADA COMPLETA
   En la maqueta la tarjeta entera era un <a>. Aquí la tarjeta es un
   contenedor y el enlace vive en su título: se estira sobre toda la
   superficie para que se pueda pulsar en cualquier punto. El texto del
   enlace sigue siendo el título, que es justo lo que debe anunciar un lector
   de pantalla.
   -------------------------------------------------------------------------- */
.tarjeta { position: relative; }

.tarjeta--enlace .tarjeta__titulo a { text-decoration: none; color: inherit; }
.tarjeta--enlace .tarjeta__titulo a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* El foco de teclado debe verse sobre la tarjeta entera, no sobre el texto. */
.tarjeta--enlace:focus-within {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}
.tarjeta--enlace .tarjeta__titulo a:focus-visible { outline: none; }

/* El envoltorio del enlace de acción no debe estirarse a lo ancho: el
   subrayado tiene que ceñirse al texto.

   Se hace flex, además, para que su alto sea exactamente el del enlace. Como
   caja de texto corriente heredaba el interlineado del cuerpo y añadía 6px por
   debajo; en fila no se notaban, porque manda el botón, pero al apilarse en
   móvil desplazaban todo lo que venía después. */
.enlace-accion-envoltorio,
.enlace-accion-envoltorio .elementor-widget-container {
  display: flex;
  align-self: flex-start;
}

/* --------------------------------------------------------------------------
   28. ANCHOS DE LECTURA
   El diseño limita el ancho de titulares y párrafos para que no se lean
   líneas larguisimas. Elementor da ancho completo a sus contenedores y a sus
   widgets con mayor especificidad, así que hay que repetir los límites aquí.
   -------------------------------------------------------------------------- */
.elementor-element.encabezado-seccion { max-width: 780px; }
.elementor-element.encabezado-seccion__texto { max-width: 60ch; }
.elementor-element.portada-inicio__texto { max-width: 720px; }
.elementor-element.portada-inicio__entrada { max-width: 46ch; }
.elementor-element.portada-interior__texto { max-width: 58ch; }
.elementor-element.llamada__texto { max-width: 52ch; }
.elementor-element.texto-legal { max-width: 760px; }
.elementor-element.tarjeta__texto,
.elementor-element.proceso__texto,
.elementor-element.argumento__texto { max-width: 60ch; }
.elementor-element.franja-destacada__texto { max-width: 56ch; }

/* La ficha de servicio limita el ancho de su columna de imagen. */
.elementor-element.ficha-servicio__imagen { max-width: 300px; }

/* En la llamada a la acción el texto va centrado, así que el límite de ancho
   tiene que ir acompañado de un centrado propio. */
.elementor-element.llamada__texto { margin-inline: auto; }

/* --------------------------------------------------------------------------
   29. TIPOGRAFÍA DE LOS TITULARES DENTRO DE ELEMENTOR
   En la maqueta la clase iba en el propio <h1>, así que heredaba la regla
   base de encabezado. Con Elementor la clase queda en el div que envuelve al
   widget y el <h1> vive dentro, heredando del envoltorio. Por eso la
   tipografía de titular tiene que declararse aquí, sobre el envoltorio: el
   encabezado la hereda y recupera su cuerpo, su peso y su interlineado.
   -------------------------------------------------------------------------- */
.portada-inicio__titular,
.portada-interior__titulo,
.encabezado-seccion__titulo,
.llamada__titulo,
.franja-destacada__titulo,
.texto-imagen__titulo,
.ficha-servicio__titulo,
.tarjeta__titulo,
.proceso__titulo,
.cifras-clave__numero {
  font-family: var(--fuente-display);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

/* Los titulares pequeños aprietan menos el interletraje que los grandes. */
.tarjeta__titulo,
.proceso__titulo { letter-spacing: -0.02em; }

/* La cifra es un número suelto: sin interlineado sobrante y bien apretada. */
.cifras-clave__numero {
  line-height: 1;
  letter-spacing: -0.04em;
}

/* Rótulos que NO son titulares aunque los pinte el widget Encabezado.
   El pie de la galería y la etiqueta de las cifras heredaban su tipografía del
   contenedor, y eso basta mientras Elementor saque un párrafo. Cuando saca una
   etiqueta de titular, la regla base de h1-h4 le impone Montserrat 800 con
   interletraje negativo y el rótulo se dispara de tamaño. Se declara aquí de
   forma explícita, sobre el envoltorio y sobre el titular que lleva dentro,
   para que deje de depender de qué etiqueta emita el widget. */
.elementor-widget.trabajo__nombre .elementor-heading-title,
.elementor-widget.trabajo__lugar .elementor-heading-title,
.elementor-widget.cifras-clave__etiqueta .elementor-heading-title,
.elementor-widget.cota .elementor-heading-title,
.elementor-widget.proceso__orden .elementor-heading-title,
.elementor-widget.tarjeta__referencia .elementor-heading-title,
.elementor-widget.argumento__titulo .elementor-heading-title {
  font-family: var(--fuente-mono);
  font-weight: 500;
  font-size: inherit;
  line-height: 1.7;
  letter-spacing: inherit;
  text-transform: uppercase;
  text-wrap: wrap;
}

/* --------------------------------------------------------------------------
   30. ANCHOS DE LECTURA DE LOS WIDGETS
   Elementor da `max-width: 100%` a todo widget hijo de un contenedor con una
   especificidad que empata con la del bloque anterior. Se sube un peldaño
   añadiendo la clase que Elementor pone en todos sus widgets.
   -------------------------------------------------------------------------- */
.elementor-widget.encabezado-seccion__texto { max-width: 60ch; }
.elementor-widget.portada-inicio__entrada { max-width: 46ch; }
.elementor-widget.portada-interior__texto { max-width: 58ch; }
.elementor-widget.franja-destacada__texto { max-width: 56ch; }
.elementor-widget.llamada__texto { max-width: 52ch; margin-inline: auto; }

/* --------------------------------------------------------------------------
   31. LO QUE ELEMENTOR IMPONE CON CUATRO CLASES
   Elementor limita el ancho de todo widget hijo de un contenedor con el
   selector `.e-con.e-con > .e-con-inner > .elementor-widget`, que pesa cuatro
   clases. Para devolver los anchos de lectura del diseño hay que igualar ese
   peso; con dos clases la regla se ignora en silencio.
   -------------------------------------------------------------------------- */
.e-con.e-con .elementor-widget.encabezado-seccion__texto { max-width: 60ch; }
.e-con.e-con .elementor-widget.portada-inicio__entrada { max-width: 46ch; }
.e-con.e-con .elementor-widget.portada-interior__texto { max-width: 58ch; }
.e-con.e-con .elementor-widget.franja-destacada__texto { max-width: 56ch; }
.e-con.e-con .elementor-widget.llamada__texto { max-width: 52ch; margin-inline: auto; }

/* Los grupos de botones se ciñen a su contenido. Que queden alineados a la
   izquierda o centrados lo decide el `align-items` del contenedor padre,
   exactamente igual que en la maqueta. */
.elementor-element.grupo-acciones { width: auto; }

/* La portada conserva su reparto de columnas: el texto algo más ancho que la
   foto, para que el titular quepa en tres líneas. */
.elementor-element.portada-inicio { grid-template-columns: 1.15fr 1fr; }
.elementor-element.portada-inicio__texto { max-width: 720px; margin-left: auto; }

/* Y la portada vuelve a una sola columna en pantallas estrechas.
   Ojo: las dos reglas de arriba pesan dos clases y le ganarían a la media
   query del bloque 23, que sólo pesa una. Sin repetirlas aquí con el mismo
   peso, el hero se quedaba en dos columnas hasta en un móvil, con el texto
   metido en 198px. Cualquier regla de `.elementor-element.<clase>` que tenga
   variante responsive necesita este mismo acompañamiento. */
@media (max-width: 980px) {
  .elementor-element.portada-inicio { grid-template-columns: 1fr; }

  .elementor-element.portada-inicio__texto {
    max-width: none;
    margin-left: 0;
  }
}