/* Seguridad Llorca · «ficha técnica / sala de control» (rediseño del 2026-11-06, prompt_claude_9)
   Carbón, papel gris frío, tinta y ámbar de señal; Overpass para el texto y Overpass Mono para los datos.
   Radio máximo de 4 px; sin sombras, degradados, píldoras ni animaciones. Los enlaces no se subrayan (preferencia
   del usuario): se distinguen por la seminegrita. Sin dependencias: la CSP solo permite 'self'. */

@font-face {
  font-family: 'Overpass';
  src: url('../fonts/overpass-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Overpass';
  src: url('../fonts/overpass-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Overpass';
  src: url('../fonts/overpass-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Overpass Mono';
  src: url('../fonts/overpass-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Overpass Mono';
  src: url('../fonts/overpass-mono-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --carbon: #121417;
  --carbon-2: #1d2025;      /* paneles sobre carbón */
  --linea-oscura: #363a41;  /* líneas sobre carbón */
  --papel: #eceeed;         /* gris frío: ni el crema de Os Galegos ni el papel cálido de INSERTEC o Reformas */
  --blanco: #ffffff;        /* solo el formulario */
  --tinta: #1b1e24;
  --gris: #555b64;          /* texto secundario sobre papel: 5,9:1 */
  --zinc: #8a9099;          /* solo líneas y marcos sobre papel (como texto no llega a AA) */
  --linea: #c3c8cd;         /* separadores suaves sobre papel */
  --claro: #c3c8ce;         /* texto secundario sobre carbón: 11:1 */
  --ambar: #d9891d;         /* señal: botones y foco; con texto carbón, 6,6:1; nunca como texto sobre claro */
  --ambar-vivo: #e89b34;
  --error: #b3261e;

  --sans: 'Overpass', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'Overpass Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --ancho: 1200px;
  --margen: clamp(16px, 4vw, 40px);
  --seccion: clamp(56px, 8vw, 104px);
  --radio: 3px;
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  font: 400 1.0625rem/1.6 var(--sans);
  color: var(--tinta);
  background: var(--papel);
}

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

h1,
h2,
h3 {
  margin: 0 0 0.5em;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* Mínimo de 30 px: a 320 px, «Telecomunicaciones» no cabía a 34 */
h1 {
  font-size: clamp(1.875rem, 1.3rem + 2.8vw, 3.5rem);
  line-height: 1.04;
  overflow-wrap: break-word;
}

h2 {
  font-size: clamp(1.625rem, 1.25rem + 1.5vw, 2.375rem);
}

h3 {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
}

p {
  margin: 0 0 1em;
}

a {
  color: inherit;
  text-decoration: none;
}

main p a,
main li a,
main dd a {
  font-weight: 600;
}

strong {
  font-weight: 600;
}

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

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

.cabecera :focus-visible,
.barra-datos :focus-visible,
.portada :focus-visible,
.seccion--oscura :focus-visible,
.cierre :focus-visible,
.pie :focus-visible,
.barra-movil :focus-visible {
  outline-color: var(--ambar);
}

.ico {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.saltar {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 100;
  padding: 12px 16px;
  font-weight: 600;
  color: var(--carbon);
  background: var(--ambar);
}

.saltar:focus {
  top: 16px;
}

.contenedor {
  width: 100%;
  max-width: calc(var(--ancho) + 2 * var(--margen));
  margin-inline: auto;
  padding-inline: var(--margen);
}

/* Rótulo de sección: etiqueta en mono seguida de una línea, como en una ficha técnica */
.rotulo {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 1.25rem;
  font: 600 0.875rem/1.2 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gris);
}

.rotulo::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--zinc);
}

/* ---------- Botones ---------- */

.botones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 52px;
  padding: 0.25rem 1.375rem 0;
  border: 1px solid transparent;
  border-radius: var(--radio);
  font: 600 1.0625rem/1.2 var(--sans);
  text-align: center;
  cursor: pointer;
}

.boton--ambar {
  color: var(--carbon);
  background: var(--ambar);
}

.boton--ambar:hover {
  background: var(--ambar-vivo);
}

.boton--linea {
  color: var(--tinta);
  border-color: var(--tinta);
}

.boton--linea:hover {
  color: var(--papel);
  background: var(--tinta);
}

.boton--linea-clara {
  color: var(--papel);
  border-color: #6d737c;
}

.boton--linea-clara:hover {
  border-color: var(--papel);
}

.boton--tel {
  font-family: var(--mono);
  letter-spacing: 0.02em;
}

.boton .ico {
  margin-top: -0.2rem;
}

/* ---------- Franja de datos y cabecera ---------- */

.barra-datos {
  display: none;
  color: var(--claro);
  background: var(--carbon);
  border-bottom: 1px solid var(--linea-oscura);
  font: 400 0.875rem/1.2 var(--mono);
}

.barra-datos__fila {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
}

.barra-datos__fila > * {
  padding: 0.6rem 0 0.5rem;
}

.barra-datos a:hover {
  color: var(--papel);
}

.cabecera {
  position: relative;
  z-index: 20;
  color: var(--papel);
  background: var(--carbon);
  border-bottom: 1px solid var(--linea-oscura);
}

.cabecera__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 68px;
}

.marca {
  display: block;
  flex: none;
  padding: 10px 0;
}

.marca img {
  width: 110px;
}

.cabecera__acciones {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cabecera__tel,
.cabecera__cta {
  display: none;
}

.cabecera__llamar {
  min-height: 44px;
  padding-inline: 1rem;
  font-size: 1rem;
}

/* A 320 px no cabe: «Llamar» ya está en la barra fija de abajo */
@media (max-width: 359px) {
  .cabecera__llamar {
    display: none;
  }
}

.cabecera__menu {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.2rem 0.75rem 0;
  color: var(--papel);
  background: none;
  border: 1px solid #6d737c;
  border-radius: var(--radio);
  font: 600 1rem/1 var(--sans);
  cursor: pointer;
}

.cabecera__menu .ico {
  margin-top: -0.2rem;
}

.ico--cerrar,
.menu-abierto .ico--abrir {
  display: none;
}

.menu-abierto .ico--cerrar {
  display: block;
}

/* Menú: en el móvil, panel a pantalla completa bajo la cabecera */
.nav {
  display: none;
}

.menu-abierto .nav {
  position: fixed;
  inset: 69px 0 0;
  z-index: 30;
  display: block;
  overflow-y: auto;
  padding: 0.5rem var(--margen) 6rem;
  background: var(--carbon);
}

.menu-abierto {
  overflow: hidden;
}

.nav__lista > li {
  border-bottom: 1px solid var(--linea-oscura);
}

.nav__lista a {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 0.25rem 0 0;
  font-weight: 600;
  font-size: 1.125rem;
}

.nav__lista a[aria-current='page'] {
  color: var(--ambar);
}

.nav__desplegar {
  display: none;
}

.nav__etiqueta {
  margin: 1.25rem 0 0.25rem;
  font: 600 0.875rem/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--claro);
}

.nav__sub a {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.125rem;
  padding: 0.6rem 0 0.5rem;
  border-top: 1px solid var(--linea-oscura);
}

.nav__sub a strong {
  font-weight: 600;
}

.nav__sub a span {
  font: 400 0.875rem/1.3 var(--mono);
  color: var(--claro);
}

.nav__contacto {
  display: grid;
  gap: 0.25rem;
  margin-top: 1.5rem;
  font-family: var(--mono);
}

.nav__contacto a {
  display: flex;
  align-items: center;
  min-height: 48px;
}

.nav__contacto a:first-child {
  font-size: 1.375rem;
  font-weight: 600;
}

@media (min-width: 900px) {
  .barra-datos {
    display: block;
  }

  .cabecera {
    position: sticky;
    top: 0;
  }

  .marca img {
    width: 140px;
  }

  .cabecera__fila {
    min-height: 80px;
  }

  .menu-abierto .nav {
    inset: 81px 0 0;
  }
}

@media (min-width: 1060px) {
  .cabecera__llamar,
  .cabecera__menu,
  .nav__etiqueta,
  .nav__contacto {
    display: none;
  }

  .cabecera__tel,
  .cabecera__cta {
    display: inline-flex;
  }

  .cabecera__tel {
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    margin-right: 0.75rem;
    font: 600 1.0625rem/1 var(--mono);
  }

  .cabecera__tel .ico {
    margin-top: -0.15rem;
    color: var(--ambar);
  }

  .cabecera__tel:hover {
    color: var(--blanco);
  }

  .nav,
  .menu-abierto .nav {
    position: static;
    display: block;
    flex: 1;
    overflow: visible;
    padding: 0;
    background: none;
  }

  .menu-abierto {
    overflow: visible;
  }

  .nav__lista {
    display: flex;
    gap: 0.25rem;
    margin-left: 1.5rem;
  }

  .nav__lista > li {
    position: relative;
    border: 0;
  }

  .nav__lista > li > a,
  .nav__desplegar {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 80px;
    padding: 0.2rem 0.875rem 0;
    color: var(--papel);
    background: none;
    border: 0;
    font: 600 1.0625rem/1 var(--sans);
    cursor: pointer;
  }

  .nav__lista > li > a:hover,
  .nav__desplegar:hover {
    color: var(--blanco);
  }

  .nav__desplegar .ico {
    width: 1em;
    height: 1em;
    margin-top: -0.2rem;
  }

  .nav__desplegar[aria-expanded='true'] .ico {
    transform: rotate(180deg);
  }

  .nav__sub {
    position: absolute;
    top: 100%;
    left: 0;
    display: none;
    width: 360px;
    padding: 0.5rem 0;
    background: var(--carbon-2);
    border: 1px solid var(--linea-oscura);
    border-radius: 0 0 var(--radio) var(--radio);
  }

  .nav__desplegar[aria-expanded='true'] ~ .nav__sub {
    display: block;
  }

  .nav__sub a {
    min-height: 0;
    padding: 0.75rem 1.25rem 0.625rem;
    border: 0;
    font-size: 1.0625rem;
  }

  .nav__sub a:hover {
    background: var(--carbon);
  }

  .nav__sub li + li a {
    border-top: 1px solid var(--linea-oscura);
  }
}

/* ---------- Portada (inicio): texto sobre carbón y foto a sangre a la derecha ---------- */

.portada {
  position: relative;
  color: var(--papel);
  background: var(--carbon);
}

.portada__texto {
  padding: clamp(40px, 7vw, 96px) 0 clamp(40px, 6vw, 88px);
}

.portada__dato {
  margin-bottom: 1.25rem;
  font: 600 0.875rem/1.4 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ambar);
}

.portada h1 {
  margin-bottom: 1.25rem;
  font-size: clamp(2.125rem, 1.5rem + 2.1vw, 3.25rem);
}

.portada__entradilla {
  max-width: 34em;
  margin-bottom: 2rem;
  font-size: 1.1875rem;
  color: var(--claro);
}

.portada__foto img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* En el móvil, los dos botones de la portada en una misma línea (lo pidió el usuario el 2026-11-06): dos columnas, letra
   un punto más pequeña y sin el icono del teléfono, para que quepan a 360 y 390 px */
@media (max-width: 599px) {
  .portada .botones {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 0.625rem;
  }

  .portada .boton {
    padding-inline: 0.625rem;
    font-size: 0.9375rem;
  }

  .portada .boton--tel .ico {
    display: none;
  }
}

/* En el móvil, los botones que van solos ocupan todo el ancho (lo pidió el usuario para «Hablar con un experto» y
   «Pedir asesoramiento»; se aplica igual a los demás botones sueltos) */
@media (max-width: 599px) {
  .empresa__texto .boton,
  .cierre__acciones .boton,
  .cierre__tel,
  .app__texto .boton,
  .contacto__datos .boton {
    width: 100%;
  }
}

@media (min-width: 900px) {
  .portada__texto {
    max-width: calc(50% - 3rem);
    padding-block: clamp(64px, 8vw, 120px);
  }

  .portada__foto {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 50%;
  }

  .portada__foto img {
    height: 100%;
    aspect-ratio: auto;
    object-position: 62% 50%;
  }
}

/* ---------- Secciones ---------- */

.seccion {
  padding-block: var(--seccion);
}

.seccion--compacta {
  padding-block: clamp(40px, 6vw, 72px);
}

.seccion--linea {
  border-top: 1px solid var(--zinc);
}

.seccion--sin-arriba {
  padding-top: 0;
}

.seccion--oscura {
  color: var(--papel);
  background: var(--carbon);
}

.seccion--oscura .rotulo {
  color: var(--claro);
}

.seccion--oscura .rotulo::after {
  background: var(--linea-oscura);
}

.seccion--oscura p {
  color: var(--claro);
}

.cabeza {
  max-width: 46rem;
  margin-bottom: clamp(28px, 4vw, 44px);
}

.cabeza p {
  color: var(--gris);
}

.seccion--oscura .cabeza p {
  color: var(--claro);
}

/* Columnas de texto separadas por líneas finas (compromisos, espacios...) */
.columnas {
  display: grid;
}

.columna {
  padding-block: 1.25rem;
  border-top: 1px solid var(--zinc);
}

.columna p {
  margin: 0;
  color: var(--gris);
}

.columna p + p,
.columna ul + p {
  margin-top: 1rem;
}

.seccion--oscura .columna {
  border-color: var(--linea-oscura);
}

.seccion--oscura .columna p {
  color: var(--claro);
}

@media (min-width: 900px) {
  .columnas {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .columnas--dos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .columna {
    padding: 0.25rem 2rem 0;
    border-top: 0;
    border-left: 1px solid var(--zinc);
  }

  .columna:first-child {
    padding-left: 0;
    border-left: 0;
  }
}

/* Lista seca: una fila por elemento, en mono */
.lista-seca {
  margin-top: 1.25rem;
  font: 400 1rem/1.3 var(--mono);
}

.lista-seca li {
  padding: 0.6rem 0 0.5rem;
  border-top: 1px solid var(--linea);
}

.seccion--oscura .lista-seca li {
  border-color: var(--linea-oscura);
}

.enlace-ver {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  color: var(--tinta);
}

.seccion--oscura .enlace-ver {
  color: var(--ambar);
}

/* ---------- Catálogo de servicios (inicio): filas técnicas ---------- */

.catalogo {
  border-top: 2px solid var(--tinta);
}

.catalogo__fila {
  position: relative;
  display: grid;
  gap: 0.375rem;
  padding: 1.25rem 0 1.125rem;
  border-bottom: 1px solid var(--zinc);
}

.catalogo__fila:hover {
  background: rgb(255 255 255 / 0.5);
  box-shadow: inset 3px 0 0 var(--ambar);
}

.catalogo__nombre {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* Toda la fila es el enlace (el nombre lleva el texto del enlace) */
.catalogo__nombre a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.catalogo__texto {
  margin: 0;
  color: var(--gris);
}

.catalogo__datos {
  margin: 0.25rem 0 0;
  font: 600 0.875rem/1.4 var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.catalogo__ver {
  font-weight: 600;
}

@media (min-width: 900px) {
  .catalogo__fila {
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) minmax(0, 16rem) 4rem;
    align-items: baseline;
    gap: 2rem;
    padding: 1.5rem 0.75rem 1.375rem;
  }

  .catalogo__datos {
    margin: 0;
  }

  .catalogo__ver {
    text-align: right;
  }
}

/* ---------- Empresa (inicio) ---------- */

.empresa {
  display: grid;
  gap: 2.5rem;
}

.empresa__foto {
  margin: 0;
}

.empresa__foto img {
  width: 100%;
  border: 1px solid var(--zinc);
}

.empresa__foto figcaption {
  padding-top: 0.75rem;
  font: 600 0.875rem/1.4 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gris);
}

.empresa__texto h3 {
  margin-top: 2.25rem;
}

@media (min-width: 900px) {
  .empresa {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(40px, 6vw, 88px);
    align-items: start;
  }

  .empresa__foto {
    position: sticky;
    top: 132px;
  }
}

/* Tabla de datos: término a la izquierda, explicación a la derecha */
.tabla-datos {
  margin: 1.5rem 0 2rem;
  border-top: 1px solid var(--zinc);
}

.tabla-datos > div {
  display: grid;
  gap: 0.125rem;
  padding: 0.875rem 0 0.75rem;
  border-bottom: 1px solid var(--linea);
}

.tabla-datos dt {
  font-weight: 600;
}

.tabla-datos dd {
  margin: 0;
  color: var(--gris);
}

@media (min-width: 640px) {
  .tabla-datos > div {
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: 1.5rem;
  }
}

/* Cómo trabajamos: cuatro párrafos con entrada en negrita */
.metodo {
  display: grid;
  gap: 0 3rem;
}

.metodo p {
  margin: 0;
  padding: 1.125rem 0 1rem;
  border-top: 1px solid var(--zinc);
  color: var(--gris);
}

.metodo strong {
  color: var(--tinta);
}

@media (min-width: 760px) {
  .metodo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- Cierre: franja carbón con el teléfono ---------- */

.cierre {
  padding-block: clamp(48px, 7vw, 88px);
  color: var(--papel);
  background: var(--carbon);
}

.cierre__rejilla {
  display: grid;
  gap: 2rem;
}

.cierre h2 {
  margin-bottom: 0.75rem;
}

.cierre p {
  max-width: 38em;
  margin: 0;
  color: var(--claro);
}

.cierre__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
}

.cierre__tel {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  font: 600 clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem)/1 var(--mono);
  letter-spacing: 0.02em;
  color: var(--papel);
}

.cierre__tel:hover {
  color: var(--ambar);
}

@media (min-width: 900px) {
  .cierre__rejilla {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
    gap: 4rem;
  }

  .cierre__acciones {
    justify-content: flex-end;
  }
}

/* ---------- Otros servicios ---------- */

.otros {
  padding-block: clamp(36px, 5vw, 56px);
}

.otros__lista {
  display: grid;
}

.otros__lista a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  padding-top: 0.2rem;
  border-bottom: 1px solid var(--linea);
  font-weight: 600;
}

.otros__lista a::after {
  content: '→';
  color: var(--gris);
}

.otros__lista a:hover::after {
  color: var(--tinta);
}

@media (min-width: 900px) {
  .otros__lista {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 2.5rem;
  }
}

/* ---------- Cabecera de las páginas interiores ---------- */

.pagina-cabecera {
  padding-block: clamp(32px, 5vw, 64px) clamp(36px, 5vw, 64px);
}

.migas {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
  font: 400 0.875rem/1.2 var(--mono);
  color: var(--gris);
}

.migas li + li::before {
  content: '/';
  margin: 0 0.625rem;
  color: var(--zinc);
}

.migas a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-block: -14px;
  font-weight: 600;
  color: var(--tinta);
}

.pagina-cabecera h1 {
  max-width: 20ch;
  margin-bottom: 1rem;
}

.entradilla {
  max-width: 36em;
  font-size: 1.25rem;
  line-height: 1.5;
}

.pagina-cabecera__rejilla {
  display: grid;
  gap: 2.5rem;
}

.pagina-cabecera__texto .subtitulo {
  margin-top: 2.25rem;
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.25;
}

.pagina-cabecera__texto p:not(.entradilla) {
  max-width: 38em;
  color: var(--gris);
}

@media (min-width: 960px) {
  .pagina-cabecera__rejilla {
    grid-template-columns: minmax(0, 1fr) 22rem;
    gap: clamp(40px, 6vw, 88px);
    align-items: start;
  }
}

/* Ficha «En resumen»: marco de 1 px y viñetas en mono */
.ficha {
  border: 1px solid var(--zinc);
  border-radius: var(--radio);
}

.ficha__titulo {
  margin: 0;
  padding: 0.875rem 1.25rem 0.75rem;
  border-bottom: 1px solid var(--zinc);
  font: 600 0.875rem/1.2 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ficha__lista {
  padding: 0.5rem 1.25rem;
  font: 400 1rem/1.35 var(--mono);
}

.ficha__lista li {
  position: relative;
  padding: 0.625rem 0 0.5rem 1.5rem;
}

.ficha__lista li + li {
  border-top: 1px solid var(--linea);
}

.ficha__lista li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--zinc);
}

.ficha__boton {
  display: flex;
  margin: 0.5rem 1.25rem 1.25rem;
}

@media (min-width: 960px) {
  .ficha {
    position: sticky;
    top: 132px;
  }
}

/* Foto a todo el ancho, sin velos */
.banda-foto {
  margin: 0;
}

.banda-foto img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

@media (min-width: 900px) {
  .banda-foto img {
    aspect-ratio: 21 / 9;
    max-height: 560px;
  }
}

/* ---------- Bloques foto/texto de las páginas de servicio ---------- */

.bloques {
  display: grid;
  gap: clamp(48px, 7vw, 88px);
}

.bloque {
  display: grid;
  gap: 1.5rem;
}

.bloque__imagen img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 1px solid var(--zinc);
}

.bloque__marca {
  margin-bottom: 0.75rem;
  font: 600 0.875rem/1.3 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gris);
}

.bloque__texto h3 {
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.bloque__texto p {
  color: var(--gris);
}

@media (min-width: 900px) {
  .bloque {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(40px, 5vw, 72px);
    align-items: center;
  }

  .bloque:nth-child(even) .bloque__imagen {
    order: 2;
  }
}

/* Lista en mono con raya (características) */
.lista-mono {
  margin: 1.25rem 0 0;
  font: 400 1rem/1.35 var(--mono);
}

.lista-mono li {
  position: relative;
  padding: 0.625rem 0 0.5rem 1.5rem;
  border-top: 1px solid var(--linea);
}

.lista-mono li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--zinc);
}

/* Comparativa de marcas (Alarmas) y datos técnicos (Instalaciones especiales): filas, sin fotos */
.comparativa {
  border-top: 2px solid var(--tinta);
}

.comparativa__fila {
  display: grid;
  gap: 0.75rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--zinc);
}

.comparativa__marca {
  margin: 0;
  font: 600 1rem/1.3 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.comparativa__texto h3 {
  margin-bottom: 0.5rem;
}

.comparativa__texto p {
  margin: 0;
  color: var(--gris);
}

.comparativa .lista-mono {
  margin: 0;
}

.comparativa .lista-mono li:first-child {
  border-top: 0;
  padding-top: 0;
}

@media (min-width: 900px) {
  .comparativa__fila {
    grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) minmax(0, 20rem);
    gap: 2.5rem;
    padding: 2rem 0;
  }
}

/* App del cliente (Videovigilancia): icono de la ficha de Google Play y texto */
.app {
  display: grid;
  gap: 1.5rem;
}

.app__icono {
  width: 96px;
  height: 96px;
  border: 1px solid var(--zinc);
  border-radius: var(--radio);
}

.app__texto h2 {
  margin-bottom: 0.75rem;
}

.app__texto p {
  max-width: 38em;
  color: var(--gris);
}

.app__texto .lista-mono {
  margin-bottom: 1.75rem;
}

@media (min-width: 760px) {
  .app {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
  }
}

/* Lema (Videovigilancia) */
.cita {
  max-width: 46rem;
  margin: 0;
  padding-left: 1.5rem;
  border-left: 3px solid var(--ambar);
}

.cita p:first-child {
  margin-bottom: 0.75rem;
  font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.875rem);
  font-weight: 600;
  line-height: 1.3;
}

.cita p:last-child {
  margin: 0;
  color: var(--gris);
}

/* ---------- Contacto ---------- */

.contacto {
  display: grid;
  gap: 3rem;
}

.datos {
  margin: 0 0 1.75rem;
}

.datos__fila {
  display: grid;
  gap: 0.25rem;
  padding: 0.875rem 0 0.75rem;
  border-bottom: 1px solid var(--linea);
}

.datos dt {
  font: 600 0.875rem/1.2 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gris);
}

.datos dd {
  margin: 0;
  font-size: 1.125rem;
}

.datos dd a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-block: -6px;
}

.datos__tel {
  font: 600 1.625rem/1 var(--mono);
  letter-spacing: 0.02em;
}

.formulario {
  padding: clamp(20px, 3vw, 36px);
  background: var(--blanco);
  border: 1px solid var(--zinc);
  border-radius: var(--radio);
}

.formulario > p {
  color: var(--gris);
}

.campos {
  display: grid;
  gap: 1.125rem;
  margin: 1.5rem 0;
}

.campo label:not(.casilla) {
  display: block;
  margin-bottom: 0.375rem;
  font-weight: 600;
}

.campo input:not([type='checkbox']),
.campo select,
.campo textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.625rem 0.75rem 0.5rem;
  font: inherit;
  font-size: 1rem;
  color: var(--tinta);
  background: var(--blanco);
  border: 1px solid #757b84;
  border-radius: 2px;
}

.campo textarea {
  min-height: 150px;
  resize: vertical;
}

.campo input:focus-visible,
.campo select:focus-visible,
.campo textarea:focus-visible {
  border-color: var(--carbon);
  outline-offset: 0;
}

.req {
  color: var(--error);
}

.campo__error {
  display: block;
  margin-top: 0.375rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--error);
}

.campo__error:empty {
  display: none;
}

.campo--error input,
.campo--error textarea,
.campo--error select {
  border-color: var(--error);
}

.casilla {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-height: 44px;
  padding: 0.5rem 0;
  cursor: pointer;
}

.casilla input {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0.05rem 0 0;
  accent-color: var(--carbon);
}

.formulario__nota {
  margin: 1rem 0 0;
  font-size: 1rem;
}

.aviso-ok {
  display: none;
  margin: 1rem 0 0;
  padding: 0.875rem 1rem 0.75rem;
  border: 1px solid var(--zinc);
  font-weight: 600;
}

.aviso-ok.visible {
  display: block;
}

.sin-js {
  padding: 1rem 1.25rem 0.875rem;
  border: 1px solid var(--zinc);
}

@media (min-width: 640px) {
  .campos--dos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .campo--ancho {
    grid-column: 1 / -1;
  }
}

@media (min-width: 960px) {
  .contacto {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(40px, 6vw, 88px);
    align-items: start;
  }
}

/* ---------- Textos legales ---------- */

.legal {
  max-width: 46rem;
}

.legal h2 {
  margin-top: 2.25rem;
  font-size: 1.375rem;
}

.legal p,
.legal li {
  color: var(--gris);
}

.legal ul {
  margin-bottom: 1em;
}

.legal li {
  position: relative;
  padding: 0.25rem 0 0.25rem 1.5rem;
}

.legal li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--zinc);
}

.nota-borrador {
  padding: 0.875rem 1rem 0.75rem;
  border: 1px solid var(--zinc);
  font: 400 1rem/1.45 var(--mono);
}

/* ---------- Pie ---------- */

.pie {
  padding: clamp(48px, 6vw, 72px) 0 calc(56px + 2rem);
  color: var(--claro);
  background: var(--carbon);
  border-top: 1px solid var(--linea-oscura);
}

.pie__rejilla {
  display: grid;
  gap: 2.25rem;
}

.pie__marca img {
  width: 180px;
  margin-bottom: 1.25rem;
}

.pie__marca p {
  max-width: 28em;
  margin-bottom: 0.75rem;
}

.pie__dgsp {
  font: 600 0.875rem/1.4 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--papel);
}

.pie__titulo {
  margin-bottom: 0.5rem;
  font: 600 0.875rem/1.2 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--papel);
}

.pie__lista a,
.pie__lista span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.pie__lista a {
  color: var(--papel);
}

.pie__lista a:hover,
.pie__legal a:hover {
  color: var(--ambar);
}

.pie__mono {
  font-family: var(--mono);
}

.pie__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--linea-oscura);
  font-size: 1rem;
}

.pie__legal p {
  margin: 0;
  padding-top: 0.75rem;
}

.pie__legal ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
}

.pie__legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--papel);
}

@media (min-width: 900px) {
  .pie {
    padding-bottom: clamp(32px, 4vw, 48px);
  }

  .pie__rejilla {
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
    gap: 2.5rem;
  }
}

/* ---------- Barra fija del móvil ---------- */

.barra-movil {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 15;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.barra-movil a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 56px;
  padding-top: 0.2rem;
  font-weight: 600;
  color: var(--papel);
  background: var(--carbon-2);
  border-top: 1px solid var(--linea-oscura);
}

.barra-movil a .ico {
  margin-top: -0.2rem;
}

.barra-movil .barra-movil__ambar {
  color: var(--carbon);
  background: var(--ambar);
  border-color: var(--ambar);
}

@media (min-width: 900px) {
  .barra-movil {
    display: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}