/* ==========================================================================
   VISUALIZA MADRID · hoja de estilos
   Dirección "grotesca deforme": negro carbón alternado con bandas de papel,
   titulares Syne extrabold, bordes duros de 2 px con sombra maciza y un único
   acento, el rojo del propio logotipo.

   Índice
     01 · Variables y base
     02 · Utilidades y tipografía
     03 · Botones y enlaces
     04 · Animaciones al hacer scroll
     05 · Cabecera y menú
     06 · Portada (hero)
     07 · Cabecera de subpágina
     08 · Intro y destacado
     09 · Servicio a media página
     10 · Tarjetas
     11 · Mosaico
     12 · Cifras y ficha técnica
     13 · Marcas
     14 · Catálogo de alquiler
     15 · Llamada a la acción
     16 · Contacto: formulario, datos y mapa
     17 · Gracias y avisos
     18 · Pie
     19 · Adaptación a pantallas pequeñas
     20 · Movimiento reducido e impresión
   ========================================================================== */

/* 01 · Variables y base ---------------------------------------------------- */

:root {
  --negro:        #0b0b0c;
  --superficie:   #131316;
  --superficie-2: #101012;
  --linea:        #1c1c1f;
  --linea-2:      #232326;
  --gris-3:       #3a3a3e;
  --texto:        #f2f0ee;
  --texto-2:      #c6c3bf;
  --texto-3:      #a5a29e;
  --gris:         #8b8884;
  --gris-apagado: #6b6864;
  --acento:       #f24643;
  --acento-claro: #ff7a77;
  --acento-hondo: #c02f2c;

  /* Blanco roto de las bandas claras y de todos los bordes duros. */
  --papel:        #f2efe9;
  --papel-texto:  #46433f;
  --papel-fuerte: #2b2926;

  --display: Syne, "Arial Black", Impact, sans-serif;
  --cuerpo:  Archivo, "Segoe UI", system-ui, sans-serif;

  --margen-lateral: clamp(20px, 8.33vw, 120px);
  --ancho-maximo: 1440px;

  --curva: cubic-bezier(0.16, 1, 0.3, 1);
  --duracion: 0.7s;
}

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

html {
  scroll-behavior: smooth;
  /* La cabecera es fija: se reserva su altura al saltar a un ancla. */
  scroll-padding-top: 90px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--negro);
  color: var(--texto);
  font-family: var(--cuerpo);
  font-size: 17px;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

img { height: auto; }

a { color: var(--acento); text-decoration: none; }
a:hover { color: var(--acento-claro); }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.035em;
  line-height: 0.9;
  margin: 0;
  text-wrap: balance;
  /* Syne en caja alta es muy ancha: sin esto, palabras como AUDIOVISUALES
     o STREAMING se salen de su columna y se montan sobre el texto de al lado. */
  overflow-wrap: break-word;
}

/* Palabras del titular marcadas desde el gestor (ajuste "acento"). */
.acento { color: var(--acento); }

/* Un hijo de flex o de grid no baja de su `min-content` por defecto: con Syne,
   una palabra como AUDIOVISUALES ensancha la columna en vez de partirse, y la
   franja entera se desborda. Estas cajas sí pueden encogerse. */
.hero__contenido,
.cabecera-seccion__contenido,
.intro__etiqueta,
.intro__cuerpo,
.destacado__titular,
.destacado__cuerpo,
.servicio__texto-interior,
.seccion__titular,
.tarjeta,
.tarjeta__cuerpo,
.mosaico__pie,
.cifra,
.cifra__cuerpo,
.especificaciones__titular,
.especificaciones__rejilla,
.especificacion,
.catalogo__texto,
.catalogo__media,
.cta__texto,
.cta__acciones,
.formulario,
.formulario__columna,
.datos-contacto,
.datos-contacto__interior,
.servicio__texto,
.catalogo__panel,
.gracias__interior,
.pie__columna { min-width: 0; }

p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
}

::selection { background: var(--acento); color: #fff; }

.salto-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--acento);
  color: var(--negro);
  padding: 14px 22px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.salto-contenido:focus { left: 0; color: var(--negro); }

/* 02 · Utilidades y tipografía --------------------------------------------- */

.contenedor {
  width: 100%;
  max-width: var(--ancho-maximo);
  margin-inline: auto;
  padding-inline: var(--margen-lateral);
}

/* Etiqueta de sección: en esta dirección es un rótulo macizo, no un texto suelto. */
.antetitulo {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  padding: 8px 16px;
  background: var(--papel);
  color: var(--negro);
  font-family: var(--cuerpo);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.raya {
  display: inline-block;
  width: 34px;
  height: 2px;
  background: var(--acento);
}

.seccion__cabeza {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 44px;
}

.seccion__titular {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Sólo dentro de la fila de cabecera: reclama 300 px de ANCHO para que el
   apunte baje de línea en vez de estrujar el titular. Fuera de esa fila
   (formulario, datos de contacto) el eje principal es vertical y ese mismo
   `flex` se convertiría en 300 px de alto vacío bajo el titular. */
.seccion__cabeza > .seccion__titular { flex: 1 1 300px; }

.seccion__cabeza > .seccion__apunte { flex: 0 1 340px; }

.seccion__titular h2 { font-size: clamp(26px, 3.2vw, 46px); }

.seccion__apunte {
  max-width: 340px;
  font-size: 15px;
  color: var(--gris);
}

.lista-barras {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lista-barras li {
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-size: 16px;
  font-weight: 400;
  color: var(--texto-2);
}
.lista-barras__marca { color: var(--acento); }

.migas { margin-bottom: 6px; }
.migas ol {
  display: flex;
  gap: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gris);
}
.migas li + li::before { content: "/"; color: var(--gris-3); margin-right: 10px; }
.migas a { color: var(--gris); }
.migas a:hover { color: var(--texto); }
.migas [aria-current] { color: var(--acento); }

/* 03 · Botones y enlaces --------------------------------------------------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 15px 28px;
  font-family: var(--cuerpo);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease,
              border-color 0.25s ease, box-shadow 0.25s var(--curva),
              transform 0.25s var(--curva);
}
.boton--grande { min-height: 56px; padding: 19px 36px; }

/* La sombra es maciza y sin desenfoque; al pasar por encima el botón la ocupa. */
.boton--primario {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--negro);
  box-shadow: 6px 6px 0 var(--papel);
}
.boton--primario:hover {
  background: var(--acento-claro);
  border-color: var(--acento-claro);
  color: var(--negro);
  box-shadow: 2px 2px 0 var(--papel);
  transform: translate(4px, 4px);
}

.boton--contorno {
  background: transparent;
  border-color: var(--papel);
  color: var(--papel);
}
.boton--contorno:hover {
  background: var(--papel);
  border-color: var(--papel);
  color: var(--negro);
}

.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  align-self: flex-start;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--acento);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acento);
}
.enlace-flecha svg { transition: transform 0.3s var(--curva); }
.enlace-flecha:hover svg { transform: translateX(6px); }

/* 04 · Animaciones al hacer scroll ----------------------------------------- */
/* El JavaScript añade .es-visible cuando la franja entra en pantalla. Sin
   JavaScript no se aplica ninguna de estas reglas y todo se ve directamente. */

.js [data-anim] {
  opacity: 0;
  transform: translateY(38px);
  transition: opacity var(--duracion) var(--curva),
              transform var(--duracion) var(--curva);
}
.js [data-anim].es-visible {
  opacity: 1;
  transform: none;
}

/* La máscara de cada línea se agranda por arriba y se recoloca con un margen
   negativo: sin ese hueco, un interlineado tan cerrado corta las tildes de
   las mayúsculas (PRODUCCIÓN, GRABACIÓN, LOCUCIÓN). */
.js .titular-lineas .linea {
  display: block;
  overflow: hidden;
  padding-top: 0.16em;
  margin-top: -0.16em;
}
.js .titular-lineas .linea > span {
  display: block;
  transform: translateY(115%);
  transition: transform 0.8s var(--curva);
}
.js .titular-lineas.es-visible .linea > span { transform: none; }

.js [data-parallax] { will-change: transform; }

/* 05 · Cabecera y menú ----------------------------------------------------- */

.cabecera {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s ease, border-color 0.3s ease,
              backdrop-filter 0.3s ease;
}
.cabecera.es-compacta {
  background: rgba(11, 11, 12, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 2px solid var(--papel);
}

.cabecera__interior {
  max-width: var(--ancho-maximo);
  margin-inline: auto;
  padding: 26px var(--margen-lateral);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  transition: padding 0.3s ease;
}
.cabecera.es-compacta .cabecera__interior { padding-block: 13px; }

.cabecera__logo img { height: 24px; width: auto; }

.menu__lista {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Cada entrada es una caja de borde duro; la activa lo lleva a plena opacidad. */
.menu__enlace {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 20px;
  border: 2px solid rgba(242, 239, 233, 0.28);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-3);
  transition: border-color 0.25s ease, color 0.25s ease, background-color 0.25s ease;
}
.menu__enlace:hover {
  border-color: var(--papel);
  color: var(--papel);
}
.menu__enlace.es-activo {
  border-color: var(--papel);
  color: var(--papel);
}

.menu__accion { margin-left: 14px; }
.menu__accion .boton { min-height: 46px; padding: 13px 24px; }

.hamburguesa {
  display: none;
  width: 46px;
  height: 46px;
  padding: 0;
  background: transparent;
  border: 2px solid var(--papel);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.hamburguesa__barra {
  display: block;
  width: 20px;
  height: 1.6px;
  background: var(--texto);
  transition: transform 0.3s var(--curva), opacity 0.2s ease;
}
.hamburguesa[aria-expanded="true"] .hamburguesa__barra:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] .hamburguesa__barra:nth-child(2) { opacity: 0; }
.hamburguesa[aria-expanded="true"] .hamburguesa__barra:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }

/* 06 · Portada (hero) ------------------------------------------------------ */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 140px 90px;
  overflow: hidden;
  border-bottom: 2px solid var(--papel);
}


.hero__fondo { position: absolute; inset: 0; }
.hero__imagen,
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
}
.hero__video { opacity: 0; transition: opacity 1.2s ease; }
.hero__video.es-visible { opacity: 1; }

/* Velo plano, sin degradado: la separación con la franja siguiente la hace el borde. */
.hero__velo {
  position: absolute;
  inset: 0;
  background: rgba(11, 11, 12, 0.74);
}

.hero__contenido {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.hero__titulo {
  font-size: clamp(28px, 4.6vw, 68px);
  line-height: 0.9;
  max-width: 1140px;
}

.hero__texto {
  max-width: 560px;
  font-size: clamp(15px, 1.25vw, 18px);
  color: var(--texto-2);
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 10px;
}

.hero__scroll {
  position: absolute;
  left: var(--margen-lateral);
  bottom: 34px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--texto-3);
}
.hero__scroll-linea {
  width: 2px;
  height: 28px;
  background: var(--acento);
  animation: caer 2.2s ease-in-out infinite;
}

@keyframes caer {
  0%, 100% { transform: scaleY(0.4); transform-origin: top; opacity: 0.4; }
  50%      { transform: scaleY(1);   transform-origin: top; opacity: 1; }
}

/* 07 · Cabecera de subpágina ----------------------------------------------- */

.cabecera-seccion {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 560px;
  padding-block: 160px 70px;
  overflow: hidden;
  border-bottom: 2px solid var(--papel);
}
.cabecera-seccion--compacta {
  min-height: 0;
  padding-block: 170px 76px;
}

.cabecera-seccion__fondo { position: absolute; inset: 0; }
.cabecera-seccion__fondo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  filter: grayscale(0.85) contrast(1.15);
}
.cabecera-seccion__velo {
  position: absolute;
  inset: 0;
  background: rgba(11, 11, 12, 0.76);
}

.cabecera-seccion__contenido {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* El mínimo era 26 px: con él, AUDIOVISUALES se salía del ancho útil por debajo
   de 400 px y se partía por la mitad. 24 px la deja entera. */
.cabecera-seccion__titulo {
  font-size: clamp(24px, 5vw, 74px);
  line-height: 0.9;
  max-width: 1000px;
}

.cabecera-seccion__texto {
  max-width: 620px;
  font-size: clamp(15px, 1.25vw, 18px);
  color: var(--texto-2);
}

/* 08 · Intro y destacado --------------------------------------------------- */

.intro {
  padding-block: clamp(60px, 7.5vw, 108px);
  border-bottom: 2px solid var(--papel);
}

.intro__interior {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 32px;
}

.intro__etiqueta {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.intro__cuerpo {
  grid-column: span 8;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.intro__parrafo {
  font-size: clamp(20px, 2.1vw, 30px);
  line-height: 1.42;
  color: var(--texto);
}
.intro__parrafo strong { font-weight: 800; }

.intro__parrafo--secundario {
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.75;
  color: var(--gris);
  max-width: 700px;
}

.destacado {
  padding-block: clamp(56px, 6.5vw, 90px);
  background: var(--superficie-2);
  border-bottom: 2px solid var(--papel);
}

.destacado__interior {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 44px;
}

.destacado__titular {
  grid-column: span 5;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.destacado__titular h2 { font-size: clamp(24px, 2.6vw, 39px); line-height: 1.02; }

.destacado__cuerpo {
  grid-column: span 7;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.destacado__principal { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.65; color: var(--texto); }
.destacado__secundario { font-size: 16px; color: var(--gris); }

/* 09 · Servicio a media página --------------------------------------------- */

.servicio {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 2px solid var(--papel);
}

.servicio__media {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  border-right: 3px solid var(--papel);
}
.servicio__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
}
/* El velo sólo rebaja la foto: el contraste con el texto lo da la banda. */
.servicio__velo {
  position: absolute;
  inset: 0;
  background: rgba(11, 11, 12, 0.24);
}

.servicio__texto {
  display: flex;
  align-items: center;
  padding: clamp(48px, 6vw, 96px) var(--margen-lateral) clamp(48px, 6vw, 96px) clamp(28px, 5vw, 76px);
}
.servicio__texto-interior {
  display: flex;
  flex-direction: column;
  gap: 26px;
  max-width: 520px;
}

/* La variante invertida además cambia de fondo: las franjas alternan negro y papel. */
.servicio--invertido {
  background: var(--papel);
  color: var(--negro);
}
.servicio--invertido .servicio__media {
  order: 2;
  border-right: 0;
  border-left: 3px solid var(--negro);
}
.servicio--invertido .servicio__texto {
  order: 1;
  padding: clamp(48px, 6vw, 96px) clamp(28px, 5vw, 76px) clamp(48px, 6vw, 96px) var(--margen-lateral);
  justify-content: flex-end;
}
.servicio--invertido .antetitulo { background: var(--negro); color: var(--papel); }
.servicio--invertido .servicio__descripcion { color: var(--papel-texto); }
.servicio--invertido .lista-barras li { color: var(--papel-fuerte); }
.servicio--invertido .enlace-flecha { color: var(--acento-hondo); }

.servicio__titulo { font-size: clamp(28px, 3.5vw, 50px); }
.servicio__descripcion { font-size: 17px; color: var(--texto-3); }

/* 10 · Tarjetas ------------------------------------------------------------ */

.tarjetas {
  padding-block: clamp(56px, 7vw, 96px);
  border-bottom: 2px solid var(--papel);
}

.tarjetas__rejilla {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.tarjeta {
  display: flex;
  flex-direction: column;
  background: transparent;
  border: 2px solid var(--papel);
  transition: box-shadow 0.35s var(--curva), transform 0.35s var(--curva);
}
.tarjeta:hover {
  box-shadow: 8px 8px 0 var(--acento);
  transform: translate(-4px, -4px);
}

.tarjeta__media { height: 220px; overflow: hidden; }
.tarjeta__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--curva);
}
.tarjeta:hover .tarjeta__media img { transform: scale(1.05); }

.tarjeta__cuerpo {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px 30px 36px;
}
.tarjeta__numero {
  display: inline-flex;
  align-self: flex-start;
  padding: 6px 12px;
  background: var(--acento);
  color: var(--negro);
  font-family: var(--cuerpo);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
}
.tarjeta__titulo { font-size: clamp(16px, 1.5vw, 22px); line-height: 1.08; }
.tarjeta__texto { font-size: 15px; color: var(--gris); }

/* 11 · Mosaico ------------------------------------------------------------- */

.mosaico {
  padding-top: clamp(56px, 7vw, 96px);
  border-bottom: 2px solid var(--papel);
}
.mosaico .seccion__titular { margin-bottom: 44px; }

.mosaico__rejilla {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  background: var(--linea);
}

.mosaico__pieza {
  position: relative;
  height: 420px;
  overflow: hidden;
  background: var(--negro);
}
.mosaico__pieza img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  filter: grayscale(1) contrast(1.2);
  transition: transform 0.8s var(--curva), filter 0.4s ease;
}
.mosaico__pieza:hover img { transform: scale(1.06); filter: grayscale(0.5) contrast(1.1); }

.mosaico__velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 11, 12, 0.15) 40%, rgba(11, 11, 12, 0.92) 100%);
}

.mosaico__pie {
  position: absolute;
  left: 34px;
  right: 34px;
  bottom: 34px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mosaico__pie h3 { font-size: clamp(19px, 1.9vw, 30px); line-height: 1.08; }

/* 12 · Cifras y ficha técnica ---------------------------------------------- */

.cifras {
  padding-block: clamp(56px, 7vw, 96px);
  border-bottom: 2px solid var(--papel);
}

.cifras__rejilla {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

/* Cada cifra es una caja de borde duro; la primera va en rojo macizo. */
.cifra {
  display: flex;
  padding: 28px 24px 32px;
  border: 2px solid var(--papel);
}
/* La barra vertical del diseño anterior ya no pinta nada dentro de la caja. */
.cifra__barra { display: none; }
.cifra--acento {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--negro);
}

.cifra__cuerpo { display: flex; flex-direction: column; gap: 12px; }
.cifra__valor { font-family: var(--display); font-size: clamp(38px, 4.2vw, 60px); line-height: 0.9; letter-spacing: -0.04em; }
.cifra__texto { font-size: 14px; line-height: 1.55; color: var(--gris); }
.cifra--acento .cifra__texto { color: var(--negro); font-weight: 500; }

.especificaciones {
  padding-block: clamp(56px, 7vw, 96px);
  border-bottom: 2px solid var(--papel);
}
.especificaciones__interior {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 32px;
}
.especificaciones__titular {
  grid-column: span 5;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.especificaciones__titular h2 { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.06; }

.especificaciones__rejilla {
  grid-column: span 7;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px 40px;
}
.especificacion {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 2px solid var(--papel);
  padding-top: 18px;
}
.especificacion__valor { font-family: var(--display); font-size: clamp(26px, 2.5vw, 34px); line-height: 0.95; letter-spacing: -0.035em; }
.especificacion__texto { font-size: 14px; line-height: 1.65; color: var(--gris); margin: 0; }

/* 13 · Marcas -------------------------------------------------------------- */

/* Banda roja de lado a lado: es el único descanso de color de la página. */
.marcas {
  padding-block: 24px;
  background: var(--acento);
  border-bottom: 2px solid var(--papel);
}
.marcas__interior {
  display: flex;
  align-items: center;
  gap: 34px;
  flex-wrap: wrap;
}
.marcas__etiqueta {
  white-space: nowrap;
  padding: 0;
  background: transparent;
  color: var(--negro);
  letter-spacing: 0.2em;
}
.marcas__lista {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(14px, 1.6vw, 22px);
  font-family: var(--display);
  font-size: clamp(19px, 2vw, 27px);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--negro);
}
.marcas__lista li + li::before { content: "/ "; color: rgba(11, 11, 12, 0.45); }

/* 14 · Catálogo de alquiler ------------------------------------------------ */

.catalogo { padding-block: clamp(56px, 7vw, 84px); border-bottom: 2px solid var(--papel); }

.catalogo__pestanas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  border-bottom: 2px solid var(--papel);
  padding-bottom: 26px;
  margin-bottom: 56px;
}

.pestana {
  min-height: 46px;
  padding: 14px 24px;
  font-family: var(--cuerpo);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-3);
  background: transparent;
  border: 2px solid rgba(242, 239, 233, 0.28);
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}
.pestana:hover { color: var(--papel); border-color: var(--papel); }
.pestana.es-activa {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--negro);
}

.catalogo__panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 44px;
  animation: aparecer 0.5s var(--curva);
}
.catalogo__panel[hidden] { display: none; }

@keyframes aparecer {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* El titular ocupa media rejilla, pero su cuerpo se calculaba con el viewport:
   a partir de 1100 px la columna crecía menos que la letra y palabras como
   OPERADORES no cabían, así que `overflow-wrap` las partía y dejaba la S
   suelta en la línea siguiente. Con `cqi` el cuerpo lo marca el ancho real de
   la columna, de modo que la palabra más larga siempre entra entera. */
.catalogo__texto {
  display: flex;
  flex-direction: column;
  gap: 24px;
  container-type: inline-size;
}

.catalogo__titulo { font-size: clamp(22px, 7.6cqi, 46px); }
.catalogo__descripcion { font-size: 17px; color: var(--texto-3); }

.catalogo__articulos { display: flex; flex-direction: column; padding-top: 10px; }
.catalogo__articulos li {
  display: flex;
  gap: 16px;
  align-items: baseline;
  font-size: 16px;
  font-weight: 400;
  color: var(--texto-2);
  border-top: 1px solid var(--linea);
  padding-block: 16px;
}
/* Viñeta discreta en rojo: sustituye a la antigua numeración 01, 02... */
.catalogo__articulo-punto {
  width: 7px;
  height: 7px;
  background: var(--acento);
  flex-shrink: 0;
  transform: translateY(-3px);
}

.catalogo__media { display: flex; flex-direction: column; gap: 14px; }
.catalogo__imagen {
  height: 440px;
  overflow: hidden;
  background: var(--superficie);
  border: 2px solid var(--papel);
}
.catalogo__imagen img { width: 100%; height: 100%; object-fit: cover; }

.catalogo__miniaturas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.catalogo__miniaturas li {
  height: 130px;
  overflow: hidden;
  background: var(--superficie);
  border: 2px solid var(--papel);
}
.catalogo__miniaturas img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.82;
  transition: opacity 0.3s ease;
}
.catalogo__miniaturas li:hover img { opacity: 1; }

/* 15 · Llamada a la acción ------------------------------------------------- */

.cta { position: relative; overflow: hidden; }

.cta__fondo { position: absolute; inset: 0; }
.cta__fondo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  filter: grayscale(1) contrast(1.15);
}
/* En la portada la franja de cierre va a color, como el resto de sus fotos. */
.pagina-inicio .cta__fondo img { filter: none; }
.cta__velo {
  position: absolute;
  inset: 0;
  background: rgba(11, 11, 12, 0.66);
}

.cta__interior {
  position: relative;
  padding-block: clamp(64px, 8vw, 118px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 60px;
  flex-wrap: wrap;
}

.cta__texto { display: flex; flex-direction: column; gap: 22px; }
.cta__titulo { font-size: clamp(25px, 4vw, 56px); max-width: 760px; }
.cta__descripcion { max-width: 520px; font-size: clamp(15px, 1.25vw, 18px); color: var(--texto-3); }

.cta__acciones { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.cta__telefono {
  font-family: var(--display);
  font-size: clamp(22px, 2.1vw, 30px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--papel);
}
.cta__telefono:hover { color: var(--acento); }

/* 16 · Contacto: formulario, datos y mapa ---------------------------------- */

.banda-doble {
  display: grid;
  grid-template-columns: 7fr 5fr;
  border-bottom: 2px solid var(--papel);
}

.formulario {
  padding: clamp(48px, 6vw, 80px) clamp(28px, 5vw, 76px) clamp(56px, 7vw, 90px) var(--margen-lateral);
  border-right: 2px solid var(--papel);
}
.formulario__interior { padding: 0; max-width: none; }
.formulario__columna { display: flex; flex-direction: column; gap: 32px; }

.form { display: flex; flex-direction: column; gap: 26px; }
.form__fila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }

.form__trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.campo { display: flex; flex-direction: column; gap: 10px; }

.campo__etiqueta {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gris);
  padding: 0;
}
.campo--error .campo__etiqueta { color: var(--acento); }

.campo__control {
  width: 100%;
  min-height: 54px;
  padding: 15px 18px;
  background: var(--superficie);
  border: 2px solid var(--linea-2);
  color: var(--texto);
  font-family: var(--cuerpo);
  font-size: 15px;
  font-weight: 400;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.campo__control::placeholder { color: var(--gris-apagado); font-weight: 400; }
.campo__control:focus {
  outline: none;
  border-color: var(--acento);
  background: #17171b;
}
.campo__control--area { min-height: 150px; resize: vertical; line-height: 1.6; }
.campo--error .campo__control { border-color: var(--acento); }

.campo__error { font-size: 13px; color: var(--acento-claro); font-weight: 400; }

.campo--opciones { border: 0; margin: 0; padding: 0; }
.opciones { display: flex; flex-wrap: wrap; gap: 10px; }

.opcion { position: relative; display: inline-flex; }
.opcion input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.opcion__texto {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 11px 20px;
  border: 2px solid var(--linea-2);
  color: var(--gris);
  font-size: 13px;
  font-weight: 700;
  transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}
.opcion input:checked + .opcion__texto {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--negro);
}
.opcion input:focus-visible + .opcion__texto { outline: 2px solid var(--acento); outline-offset: 3px; }

.consentimiento {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: 13px;
  color: var(--gris);
  cursor: pointer;
}
.consentimiento input {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin: 2px 0 0;
  border: 2px solid var(--gris-3);
  background: transparent;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.consentimiento input:checked {
  background: var(--acento);
  border-color: var(--acento);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230b0b0c' stroke-width='2.4'%3E%3Cpath d='m3 8 3.4 3.4L13 5'/%3E%3C/svg%3E");
  background-size: 14px;
  background-position: center;
  background-repeat: no-repeat;
}

.form__envio { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding-top: 6px; }
.form__nota { font-size: 12px; color: var(--gris-apagado); }

.datos-contacto {
  padding: clamp(48px, 6vw, 80px) var(--margen-lateral) clamp(56px, 7vw, 90px) clamp(28px, 5vw, 76px);
}
.datos-contacto__interior { display: flex; flex-direction: column; gap: 40px; }

.datos { display: flex; flex-direction: column; gap: 26px; }
.dato {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  border-top: 1px solid var(--linea);
  padding-top: 22px;
  color: var(--acento);
}
.dato > div { display: flex; flex-direction: column; gap: 4px; }
.dato svg { flex-shrink: 0; margin-top: 3px; }

.dato__etiqueta {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gris);
}
.dato__valor { font-size: 17px; font-weight: 400; color: var(--texto); }
.dato__valor a { color: var(--texto); }
.dato__valor a:hover { color: var(--acento); }
.dato__valor--grande {
  font-family: var(--display);
  font-size: clamp(24px, 2.2vw, 30px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.datos-contacto__redes {
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-top: 1px solid var(--linea);
  padding-top: 26px;
}
.redes-texto { display: flex; flex-wrap: wrap; gap: 12px; }
.red-texto {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 12px 18px;
  border: 2px solid var(--linea-2);
  color: var(--texto-2);
  font-size: 14px;
  font-weight: 600;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.red-texto:hover { border-color: var(--papel); color: var(--papel); }

.mapa {
  position: relative;
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--superficie);
  border-bottom: 2px solid var(--papel);
  overflow: hidden;
}
.mapa__cuadricula {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--linea) 1px, transparent 1px),
    linear-gradient(90deg, var(--linea) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: 0.7;
}
.mapa__aviso {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  padding: 40px 20px;
  color: var(--acento);
}
.mapa__direccion { font-size: 15px; color: var(--texto-2); font-weight: 400; }
.mapa__nota { font-size: 13px; color: var(--gris-apagado); }
.mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* 17 · Gracias y avisos ---------------------------------------------------- */

.gracias {
  min-height: 70svh;
  display: flex;
  align-items: center;
  padding-block: 180px 110px;
  border-bottom: 2px solid var(--papel);
}
.gracias__interior { display: flex; flex-direction: column; gap: 24px; }
.gracias__titulo { font-size: clamp(36px, 5.4vw, 76px); max-width: 900px; }
.gracias__texto { max-width: 540px; font-size: 17px; color: var(--texto-3); }
.gracias__referencia { font-size: 15px; color: var(--gris); }
.gracias__referencia strong { color: var(--acento); font-weight: 800; letter-spacing: 0.06em; }
.gracias__acciones { display: flex; flex-wrap: wrap; gap: 14px; padding-top: 10px; }

.aviso {
  border: 2px solid var(--papel);
  border-left: 6px solid var(--acento);
  background: var(--superficie);
  padding: 22px 26px;
  font-size: 15px;
}
.aviso--pagina { margin-block: 140px 0; }
.aviso__titulo { font-weight: 800; color: var(--texto); margin-bottom: 10px; }
.aviso ul { display: flex; flex-direction: column; gap: 6px; }
.aviso a { color: var(--acento-claro); text-decoration: underline; }

/* 18 · Pie ----------------------------------------------------------------- */

.pie { border-top: 2px solid var(--papel); }

.pie__interior {
  max-width: var(--ancho-maximo);
  margin-inline: auto;
  padding: clamp(44px, 5vw, 66px) var(--margen-lateral) 30px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 32px;
}

.pie__columna { display: flex; flex-direction: column; gap: 14px; }
.pie__columna--marca { grid-column: span 4; gap: 20px; }
.pie__columna:not(.pie__columna--marca):not(.pie__columna--sello) { grid-column: span 3; }
.pie__columna--sello { grid-column: span 2; }

.pie__logo { height: 22px; width: auto; align-self: flex-start; }
.pie__descripcion { max-width: 260px; font-size: 14px; color: var(--gris); }

.pie__redes { display: flex; gap: 12px; padding-top: 4px; }
.red {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 2px solid var(--papel);
  color: var(--papel);
  transition: border-color 0.25s ease, color 0.25s ease, background-color 0.25s ease;
}
.red:hover { background: var(--acento); border-color: var(--acento); color: var(--negro); }

.pie__titulo {
  font-family: var(--cuerpo);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--acento);
}

.pie__lista { display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: var(--gris); font-style: normal; }
.pie__lista a { color: var(--gris); }
.pie__lista a:hover { color: var(--acento); }

.sello-ue {
  background: var(--papel);
  padding: 12px 14px;
  align-self: flex-start;
  display: flex;
}
.sello-ue img { width: 150px; height: auto; }

.pie__legal { border-top: 2px solid var(--papel); }
.pie__legal-interior {
  max-width: var(--ancho-maximo);
  margin-inline: auto;
  padding: 22px var(--margen-lateral) 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--gris-apagado);
}
.pie__legal-lista { display: flex; flex-wrap: wrap; gap: 26px; }
.pie__legal-lista a { color: var(--gris-apagado); }
.pie__legal-lista a:hover { color: var(--texto-2); }

/* Acceso al panel: discreto, un peldaño por debajo de los enlaces legales. */
.pie__acceso {
  color: var(--gris-apagado);
  opacity: .6;
  font-size: 11px;
  letter-spacing: .04em;
  line-height: 1;
  padding: 6px 2px;
  text-decoration: none;
  transition: opacity .2s ease, color .2s ease;
}
.pie__acceso:hover,
.pie__acceso:focus-visible { opacity: 1; color: var(--acento); }

/* 19 · Adaptación a pantallas pequeñas ------------------------------------- */

@media (max-width: 1080px) {
  .intro__etiqueta,
  .intro__cuerpo,
  .destacado__titular,
  .destacado__cuerpo,
  .especificaciones__titular,
  .especificaciones__rejilla { grid-column: 1 / -1; }

  .cifras__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tarjetas__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* A tres columnas las piezas quedan tan estrechas que no cabe su pie. */
  .mosaico__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .banda-doble { grid-template-columns: 1fr; }
  .formulario { border-right: 0; border-bottom: 2px solid var(--papel); padding-inline: var(--margen-lateral); }
  .datos-contacto { padding-inline: var(--margen-lateral); }

  .pie__columna--marca { grid-column: span 12; }
  .pie__columna:not(.pie__columna--marca):not(.pie__columna--sello) { grid-column: span 6; }
  .pie__columna--sello { grid-column: span 12; }
}

@media (max-width: 900px) {
  html { scroll-padding-top: 76px; }

  .hamburguesa { display: flex; }

  .menu {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(88vw, 380px);
    background: var(--superficie-2);
    border-left: 1px solid var(--linea-2);
    transform: translateX(100%);
    transition: transform 0.4s var(--curva);
    padding: 100px 32px 40px;
    overflow-y: auto;
  }
  .menu.es-abierto { transform: none; }

  .menu__lista {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  /* En el panel lateral la caja estorba: vuelve a ser una fila con su raya. */
  .menu__enlace {
    display: block;
    min-height: 0;
    padding: 18px 0;
    font-size: 15px;
    letter-spacing: 0.1em;
    border: 0;
    border-bottom: 2px solid var(--linea-2);
  }
  .menu__enlace.es-activo { color: var(--acento); border-bottom-color: var(--acento); }
  .menu__accion { margin-top: 22px; margin-left: 0; }
  .menu__accion .boton { width: 100%; min-height: 52px; }

  .menu-fondo {
    position: fixed;
    inset: 0;
    background: rgba(11, 11, 12, 0.6);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 50;
  }
  .menu-fondo.es-visible { opacity: 1; pointer-events: auto; }

  body.menu-abierto { overflow: hidden; }

  .servicio { grid-template-columns: 1fr; }
  .servicio__media,
  .servicio--invertido .servicio__media {
    min-height: 0;
    height: 300px;
    order: 1 !important;
    border: 0;
    border-bottom: 3px solid var(--papel);
  }
  .servicio--invertido .servicio__media { border-bottom-color: var(--negro); }
  .servicio__texto,
  .servicio--invertido .servicio__texto {
    order: 2 !important;
    padding: 40px var(--margen-lateral) 52px;
  }
  .servicio__velo,
  .servicio--invertido .servicio__velo { background: rgba(11, 11, 12, 0.24); }

  .tarjetas__rejilla { grid-template-columns: 1fr; }
  .mosaico__rejilla { grid-template-columns: 1fr; }
  .mosaico__pieza { height: 260px; }
  .mosaico__pie { left: 20px; right: 20px; bottom: 24px; }

  .catalogo__panel { grid-template-columns: 1fr; gap: 26px; }
  .catalogo__media { order: -1; }
  .catalogo__imagen { height: 240px; }
  .catalogo__miniaturas li { height: 92px; }
  .catalogo__pestanas { margin-bottom: 30px; }
  .pestana { padding: 13px 18px; font-size: 12px; }

  /* En columna, `wrap` hace que la línea tome el ancho mínimo del hijo y la
     franja se desborde: aquí no hay nada que envolver. */
  .cta__interior { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
  .cta__acciones { align-items: stretch; }
  .cta__acciones .boton { width: 100%; }
  .cta__telefono {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    border: 2px solid var(--papel);
  }

  .form__fila { grid-template-columns: 1fr; }
  .form__envio .boton { width: 100%; }

  .marcas__interior { gap: 22px; }
  /* La etiqueta es larga: en móvil debe poder partirse en dos líneas. */
  .marcas__etiqueta { white-space: normal; }

  .hero { padding-block: 120px 80px; }
  .hero__scroll { display: none; }

  .cabecera-seccion { min-height: 420px; padding-block: 120px 50px; }
  .cabecera-seccion--compacta { padding-block: 120px 56px; }

  .pie__columna:not(.pie__columna--marca):not(.pie__columna--sello) { grid-column: span 12; }
  .pie__legal-interior { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* Por debajo de 430 px el margen de 8.33vw deja tan poca caja que palabras
   como AUDIOVISUALES o PRESUPUESTO ya no entran enteras. Se estrecha. */
@media (max-width: 430px) {
  :root { --margen-lateral: 18px; }
}

/* Dos escalones para móvil. Las palabras largas de Syne (AUDIOVISUALES,
   PRESUPUESTO, PRODUCCIÓN) no entran enteras ni con el margen reducido, así
   que los titulares bajan sólo aquí, no en toda la gama de móviles. */
@media (max-width: 430px) {
  .hero__titulo { font-size: 26px; }
  .seccion__titular h2 { font-size: 24px; }
  .cta__titulo { font-size: 23px; }
}

@media (max-width: 360px) {
  .hero__titulo { font-size: 22px; }
  .cabecera-seccion__titulo { font-size: 20px; }
  .seccion__titular h2 { font-size: 21px; }
  .servicio__titulo { font-size: 26px; }
  .destacado__titular h2 { font-size: 22px; }
  .cta__titulo { font-size: 20px; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }

  /* Con 12 pistas, los 11 huecos suman 352 px: más que el ancho útil de un
     móvil. Se estrechan; el alto entre filas se mantiene. */
  .intro__interior,
  .destacado__interior,
  .especificaciones__interior,
  .pie__interior { column-gap: 10px; }

  .tarjeta__cuerpo { padding: 24px 20px 28px; }
  .cifras__rejilla { grid-template-columns: 1fr; gap: 26px; }
  .especificaciones__rejilla { grid-template-columns: 1fr; }
  .seccion__cabeza { gap: 22px; margin-bottom: 30px; }
  .hero__acciones .boton,
  .gracias__acciones .boton { width: 100%; }
}

/* 20 · Movimiento reducido e impresión ------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .js [data-anim],
  .js .titular-lineas .linea > span {
    opacity: 1 !important;
    transform: none !important;
  }
  .js .cifra .cifra__barra { transform: scaleY(1) !important; }
}

@media print {
  .cabecera, .hamburguesa, .hero__scroll, .mapa, .pie__redes { display: none !important; }
  body { background: #fff; color: #000; }
  .hero__velo, .cta__velo, .servicio__velo, .mosaico__velo { display: none; }
}

/* 21 · Páginas legales ----------------------------------------------------- */

.legal { padding-block: clamp(48px, 6vw, 84px) clamp(60px, 8vw, 110px); }

.legal__interior { max-width: 860px; }

.legal__interior h2 {
  font-size: clamp(24px, 2.4vw, 32px);
  margin-block: 46px 18px;
  line-height: 1.1;
}
.legal__interior h2:first-child { margin-top: 0; }

.legal__interior h3 {
  font-family: var(--cuerpo);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--acento);
  margin-block: 40px 14px;
}

.legal__interior p,
.legal__interior li {
  font-size: 16px;
  line-height: 1.8;
  color: var(--texto-3);
  margin-bottom: 16px;
}

.legal__interior ul { list-style: none; padding-left: 0; }
.legal__interior li { position: relative; padding-left: 24px; }
.legal__interior li::before {
  content: "/";
  position: absolute;
  left: 0;
  color: var(--acento);
}

.legal__interior strong { color: var(--texto); font-weight: 800; }
.legal__interior a { text-decoration: underline; }

/* La sección 21 va detrás de los media queries, así que su escalón de móvil
   tiene que estar aquí para no quedar tapado. */
@media (max-width: 360px) {
  .legal__interior h2 { font-size: 22px; }
}