/* ==========================================================================
   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;
  --color-velo:                      rgba(10, 10, 10, 0.85);

  /* 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); }

/* 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); }

/* --------------------------------------------------------------------------
   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;
  padding: var(--espacio-5) var(--espacio-4) var(--espacio-4);
  background: linear-gradient(to top, var(--color-velo), transparent);
  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; }

/* --------------------------------------------------------------------------
   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;
}

.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; }
  .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; }
}