/* ==========================================================================
   FIREBLUE · Hoja de estilos
   --------------------------------------------------------------------------
   ÍNDICE
   1. VARIABLES  ← aquí se cambian colores, tipografías, tamaños y radios
   2. Fuentes
   3. Base
   4. Utilidades
   5. Botones
   6. Cabecera y menú
   7. Portada (hero)
   8. Quiénes somos
   9. Mapa de sistemas
   10. Servicios (preventivo / correctivo)
   11. Ciclo de vigilancia
   12. Calidad
   13. Preguntas frecuentes
   14. Contacto
   15. Pie de página
   16. Aviso de cookies
   17. Páginas legales y 404
   18. Movimiento (apariciones)
   19. Adaptación a pantallas
   20. Movimiento reducido
   ========================================================================== */


/* ==========================================================================
   1. VARIABLES
   Para cambiar el aspecto de toda la web basta con tocar este bloque.
   ========================================================================== */
:root {

    /* ---- 1.1 BOTONES Y ACENTOS (el color que da vidilla) ---------------- */
    --color-accion:          #FF6A2B;   /* fondo de los botones principales   */
    --color-accion-hover:    #FF8550;   /* fondo al pasar el ratón            */
    --color-accion-texto:    #0B1F3A;   /* texto sobre los botones (¡no blanco! no cumple contraste) */
    --color-accion-sombra:   rgba(255, 106, 43, .55); /* resplandor bajo el botón */

    /* ---- 1.2 AZULES DE MARCA --------------------------------------------- */
    --azul-marca:            #2C5080;   /* azul del logotipo de Fireblue      */
    --azul-marca-claro:      #8DB2E0;   /* resaltes y detalles sobre fondo oscuro */

    /* ---- 1.3 FONDOS OSCUROS (de más oscuro a menos) ---------------------- */
    --fondo-950:             #06101F;   /* pie de página, portada             */
    --fondo-900:             #0A1A31;   /* secciones oscuras                  */
    --fondo-800:             #10264A;   /* secciones oscuras alternas         */
    --fondo-700:             #17335F;   /* tarjetas y paneles sobre oscuro    */

    /* ---- 1.4 FONDOS CLAROS ----------------------------------------------- */
    --fondo-claro:           #EEF2F7;   /* secciones claras                   */
    --fondo-blanco:          #FFFFFF;   /* tarjetas sobre fondo claro         */

    /* ---- 1.5 TEXTOS ------------------------------------------------------ */
    --texto-oscuro-fuerte:   #F4F7FB;   /* títulos y texto sobre fondo oscuro */
    --texto-oscuro-suave:    #A9B7CC;   /* texto secundario sobre oscuro      */
    --texto-claro-fuerte:    #0A1A31;   /* títulos y texto sobre fondo claro  */
    --texto-claro-suave:     #46566E;   /* texto secundario sobre claro       */

    /* ---- 1.6 LÍNEAS Y BORDES --------------------------------------------- */
    --linea-sobre-oscuro:    rgba(169, 183, 204, .22);
    --linea-sobre-claro:     rgba(10, 26, 49, .14);

    /* ---- 1.7 TIPOGRAFÍA -------------------------------------------------- */
    --fuente-titulos:        "Sora", "Helvetica Neue", Arial, sans-serif;
    --fuente-texto:          "Public Sans", "Helvetica Neue", Arial, sans-serif;

    --tam-h1:                clamp(2rem, 1rem + 2.7vw, 3.3rem);
    --tam-h2:                clamp(1.7rem, 1rem + 2vw, 2.6rem);
    --tam-h3:                clamp(1.15rem, 1rem + .5vw, 1.4rem);
    --tam-texto:             1.0625rem;
    --tam-texto-grande:      clamp(1.1rem, 1rem + .4vw, 1.25rem);

    /* ---- 1.8 MEDIDAS Y RADIOS -------------------------------------------- */
    --ancho-max:             1240px;
    --margen-lateral:        clamp(20px, 4.5vw, 64px);
    --espacio-seccion:       clamp(4.5rem, 9vw, 8rem);
    --alto-menu:             76px;

    --radio-boton:           10px;
    --radio-imagen:          14px;
    --radio-tarjeta:         16px;

    /* ---- 1.9 MOVIMIENTO -------------------------------------------------- */
    --curva:                 cubic-bezier(.16, 1, .3, 1);
}


/* ==========================================================================
   2. FUENTES (alojadas en el propio sitio, sin Google Fonts)
   ========================================================================== */
@font-face {
    font-family: "Sora";
    src: url("../fonts/sora-latin-wght-normal.woff2") format("woff2");
    font-weight: 100 800; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Public Sans";
    src: url("../fonts/public-sans-latin-wght-normal.woff2") format("woff2");
    font-weight: 100 900; font-style: normal; font-display: swap;
}


/* ==========================================================================
   3. BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--alto-menu) + 12px);
    -webkit-text-size-adjust: 100%;
}
body {
    font-family: var(--fuente-texto);
    font-size: var(--tam-texto);
    line-height: 1.65;
    color: var(--texto-oscuro-fuerte);
    background: var(--fondo-950);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}
body.menu-abierto { overflow: hidden; }

img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3 { font-family: var(--fuente-titulos); line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; }
::selection { background: var(--color-accion); color: var(--color-accion-texto); }

:focus-visible {
    outline: 3px solid var(--color-accion);
    outline-offset: 3px;
    border-radius: 4px;
}

.skip-link {
    position: fixed; left: 1rem; top: -4rem; z-index: 400;
    background: var(--color-accion); color: var(--color-accion-texto);
    padding: .75rem 1.1rem; font-weight: 700; border-radius: var(--radio-boton);
    transition: top .3s var(--curva);
}
.skip-link:focus { top: 1rem; }

.sr-only {
    position: absolute !important; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}


/* ==========================================================================
   4. UTILIDADES
   ========================================================================== */
.contenedor {
    width: 100%; max-width: var(--ancho-max); margin-inline: auto;
    padding-inline: var(--margen-lateral);
}
.seccion { position: relative; padding-block: var(--espacio-seccion); }
.seccion--oscura   { background: var(--fondo-900); color: var(--texto-oscuro-fuerte); }
.seccion--oscura-2 { background: var(--fondo-800); color: var(--texto-oscuro-fuerte); }
.seccion--clara    { background: var(--fondo-claro); color: var(--texto-claro-fuerte); }
.seccion--clara p, .seccion--clara .suave { color: var(--texto-claro-suave); }
.seccion--oscura p, .seccion--oscura-2 p, .suave-oscuro { color: var(--texto-oscuro-suave); }

/* Etiqueta pequeña de cada sección: "01 · Quiénes somos" */
.etiqueta {
    display: inline-flex; align-items: center; gap: .8rem;
    font: 700 .78rem/1 var(--fuente-titulos);
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--azul-marca-claro);
    margin-bottom: 1.4rem;
}
.etiqueta::before { content: ""; width: 2.2rem; height: 2px; background: var(--color-accion); }
.seccion--clara .etiqueta { color: var(--azul-marca); }
.seccion--oscura .etiqueta, .seccion--oscura-2 .etiqueta, .contacto .etiqueta, .portada .etiqueta { color: var(--azul-marca-claro); }
.seccion--clara p.sello-grupo { color: #fff; margin: 0; }

.titulo-seccion { font-size: var(--tam-h2); font-weight: 700; max-width: 22ch; }
.cabecera-seccion { margin-bottom: clamp(2.2rem, 5vw, 3.8rem); }
.cabecera-seccion p:not(.etiqueta) { margin-top: 1.2rem; max-width: 60ch; font-size: var(--tam-texto-grande); }

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


/* ==========================================================================
   5. BOTONES
   ========================================================================== */
.btn {
    position: relative; isolation: isolate; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
    padding: 1.05rem 1.7rem;
    font: 700 .9rem/1 var(--fuente-titulos); letter-spacing: .01em; text-decoration: none;
    border: 1.5px solid transparent; border-radius: var(--radio-boton);
    transition: background-color .35s var(--curva), color .35s var(--curva), border-color .35s var(--curva), transform .35s var(--curva), box-shadow .35s var(--curva);
}
.btn:hover  { transform: translateY(-3px); }
.btn:active { transform: translateY(-1px); }

/* Botón principal: naranja */
.btn--accion {
    background: var(--color-accion);
    color: var(--color-accion-texto);
    box-shadow: 0 12px 28px -12px var(--color-accion-sombra);
}
.btn--accion::after {          /* brillo que cruza el botón al pasar el ratón */
    content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; z-index: -1;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
    transform: skewX(-20deg); transition: left .7s var(--curva);
}
.btn--accion:hover { background: var(--color-accion-hover); box-shadow: 0 18px 34px -12px var(--color-accion-sombra); }
.btn--accion:hover::after { left: 120%; }

/* Botón secundario sobre fondo oscuro */
.btn--fantasma { border-color: rgba(244, 247, 251, .5); color: var(--texto-oscuro-fuerte); }
.btn--fantasma:hover { background: var(--texto-oscuro-fuerte); border-color: var(--texto-oscuro-fuerte); color: var(--fondo-900); }

/* Botón secundario sobre fondo claro */
.btn--fantasma-claro { border-color: rgba(10, 26, 49, .35); color: var(--texto-claro-fuerte); }
.btn--fantasma-claro:hover { background: var(--fondo-900); border-color: var(--fondo-900); color: #fff; }

.btn--pequeno { padding: .8rem 1.15rem; font-size: .8rem; }

.enlace-flecha {
    display: inline-flex; align-items: center; gap: .55rem;
    font: 700 .88rem/1 var(--fuente-titulos); text-decoration: none; color: inherit;
}
.enlace-flecha .icono { transition: transform .4s var(--curva); }
.enlace-flecha:hover .icono { transform: translateX(5px); }


/* ==========================================================================
   6. CABECERA Y MENÚ
   ========================================================================== */
.cabecera {
    position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--alto-menu); isolation: isolate;
}
/* El fondo difuminado va en una capa aparte: si el desenfoque estuviera en la propia
   cabecera, el menú móvil (position: fixed) se quedaría sin altura. */
.cabecera::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: rgba(6, 16, 31, .88); border-bottom: 1px solid var(--linea-sobre-oscuro);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    opacity: 0; transition: opacity .4s var(--curva);
}
.cabecera.con-fondo::before, .cabecera.menu-abierto::before { opacity: 1; }
.cabecera__interior {
    height: 100%; max-width: var(--ancho-max); margin-inline: auto; padding-inline: var(--margen-lateral);
    display: flex; align-items: center; justify-content: space-between; gap: 2rem;
}
.cabecera__logo img { height: 38px; width: auto; }
.menu { display: flex; align-items: center; gap: clamp(1.1rem, 2.2vw, 2.1rem); }
.menu a:not(.btn) {
    position: relative; padding: .5rem 0;
    font: 600 .86rem/1 var(--fuente-titulos); letter-spacing: .01em; text-decoration: none; color: var(--texto-oscuro-fuerte);
}
.menu a:not(.btn)::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--color-accion);
    transform: scaleX(0); transform-origin: left; transition: transform .45s var(--curva);
}
.menu a:not(.btn):hover::after { transform: scaleX(1); }

.hamburguesa { display: none; width: 48px; height: 48px; position: relative; margin-right: -10px; }
.hamburguesa span {
    position: absolute; left: 12px; right: 12px; height: 2px; background: #fff;
    transition: transform .4s var(--curva), top .4s var(--curva);
}
.hamburguesa span:nth-child(1) { top: 19px; }
.hamburguesa span:nth-child(2) { top: 27px; }
.cabecera.menu-abierto .hamburguesa span:nth-child(1) { top: 23px; transform: rotate(45deg); }
.cabecera.menu-abierto .hamburguesa span:nth-child(2) { top: 23px; transform: rotate(-45deg); }


/* ==========================================================================
   7. PORTADA (hero con vídeo)
   ========================================================================== */
.portada {
    position: relative; isolation: isolate; overflow: hidden;
    min-height: 100vh; min-height: 100svh;
    display: flex; flex-direction: column; justify-content: flex-end;
    background: var(--fondo-950);
}
.portada__fondo { position: absolute; inset: 0; z-index: -2; }
.portada__poster, .portada__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.portada::before {            /* velo oscuro: más fuerte a la izquierda, donde va el texto */
    content: ""; position: absolute; inset: 0; z-index: -1;
    background:
        linear-gradient(90deg, rgba(6, 16, 31, .94) 0%, rgba(6, 16, 31, .76) 42%, rgba(6, 16, 31, .28) 100%),
        linear-gradient(0deg,  rgba(6, 16, 31, 1) 0%, rgba(6, 16, 31, 0) 38%),
        linear-gradient(180deg, rgba(6, 16, 31, .7) 0%, rgba(6, 16, 31, 0) 22%);
}
.portada__contenido { padding-top: calc(var(--alto-menu) + 4rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.portada__texto { max-width: 44rem; }
.portada h1 { font-size: var(--tam-h1); font-weight: 700; margin-bottom: 1.5rem; }
.portada h1 em { font-style: normal; color: var(--azul-marca-claro); }
.portada__intro { font-size: var(--tam-texto-grande); color: #D3DDEA; max-width: 40rem; margin-bottom: 2.2rem; }
.portada__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.2rem; }
.portada__acciones .enlace-flecha { margin-left: .6rem; }

/* Botón para pausar / reproducir el vídeo de fondo (accesibilidad y por si el
   navegador o el sistema no permiten el autoplay) */
.portada__control {
    position: absolute; z-index: 3; top: calc(var(--alto-menu) + 1rem);
    right: max(var(--margen-lateral), calc((100vw - var(--ancho-max)) / 2 + var(--margen-lateral)));
    display: inline-flex; align-items: center; gap: .6rem; padding: .65rem 1.05rem;
    font: 700 .78rem/1 var(--fuente-titulos); letter-spacing: .01em; color: #fff;
    background: rgba(6, 16, 31, .6); border: 1px solid rgba(244, 247, 251, .38); border-radius: 999px;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    transition: background-color .3s var(--curva), color .3s var(--curva), border-color .3s var(--curva);
}
.portada__control[hidden] { display: none; }
.portada__control:hover { background: #fff; border-color: #fff; color: var(--fondo-900); }
.portada__control .icono { width: .95em; height: .95em; fill: currentColor; stroke: none; }
.portada__control [data-icono="play"] { display: none; }
.portada__control[data-estado="pausado"] [data-icono="pausa"] { display: none; }
.portada__control[data-estado="pausado"] [data-icono="play"] { display: inline; }

.datos {                      /* franja de cifras */
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: clamp(2.5rem, 6vw, 4.5rem);
    border-top: 1px solid var(--linea-sobre-oscuro);
}
.dato { padding: 1.5rem 1.4rem 0 0; }
.dato + .dato { padding-left: 1.4rem; border-left: 1px solid var(--linea-sobre-oscuro); }
.dato__cifra { display: block; font: 700 clamp(1.6rem, 1rem + 1.8vw, 2.4rem)/1 var(--fuente-titulos); letter-spacing: -.02em; color: #fff; }
.dato__texto { display: block; margin-top: .55rem; font-size: .86rem; line-height: 1.4; color: var(--texto-oscuro-suave); }


/* ==========================================================================
   8. QUIÉNES SOMOS
   ========================================================================== */
.somos { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.somos__texto p:not(.etiqueta) { font-size: var(--tam-texto-grande); margin-top: 1.4rem; max-width: 56ch; }
.somos__texto .titulo-seccion { max-width: 18ch; }
.sedes { display: flex; flex-wrap: wrap; gap: .7rem 2rem; margin-top: 2.2rem; padding-top: 1.6rem; border-top: 1px solid var(--linea-sobre-claro); }
.sedes li { display: flex; align-items: center; gap: .6rem; font: 600 .9rem/1.2 var(--fuente-titulos); color: var(--texto-claro-fuerte); }
.sedes .icono { color: var(--azul-marca); }
.somos__imagenes { position: relative; padding-bottom: 3rem; }
.somos__principal { border-radius: var(--radio-imagen); overflow: hidden; aspect-ratio: 4 / 4.6; }
.somos__principal img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.somos__detalle {
    position: absolute; left: -2.2rem; bottom: 0; width: 46%;
    border-radius: var(--radio-imagen); overflow: hidden; aspect-ratio: 4 / 3;
    border: 6px solid var(--fondo-claro); box-shadow: 0 24px 50px -20px rgba(10, 26, 49, .5);
}
.somos__detalle img { width: 100%; height: 100%; object-fit: cover; }
.sello-grupo {
    position: absolute; right: 1.2rem; top: 1.2rem; max-width: 12rem;
    background: rgba(6, 16, 31, .82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    color: #fff; border-radius: 12px; padding: .8rem 1rem; font-size: .78rem; line-height: 1.35;
}
.sello-grupo strong { display: block; font: 700 .72rem/1 var(--fuente-titulos); letter-spacing: .12em; text-transform: uppercase; color: var(--azul-marca-claro); margin-bottom: .35rem; }


/* ==========================================================================
   9. MAPA DE SISTEMAS (puntos sobre la foto del vestíbulo)
   ========================================================================== */
.mapa { display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
.mapa__foto { position: relative; border-radius: var(--radio-imagen); overflow: hidden; aspect-ratio: 1376 / 768; background: var(--fondo-800); }
.mapa__foto > img { width: 100%; height: 100%; object-fit: cover; }
.mapa__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(6, 16, 31, .35), transparent 35%); pointer-events: none; }

.punto {
    position: absolute; z-index: 2;
    left: calc(var(--x) * 1%); top: calc(var(--y) * 1%);
    width: 2.25rem; height: 2.25rem; margin: -1.125rem 0 0 -1.125rem;
    display: grid; place-items: center; border-radius: 50%;
    font: 800 .82rem/1 var(--fuente-titulos);
    background: var(--color-accion); color: var(--color-accion-texto);
    border: 2px solid #fff; box-shadow: 0 8px 20px rgba(6, 16, 31, .5);
    transition: transform .35s var(--curva), background-color .3s, color .3s;
}
.punto::before {              /* anillo que late */
    content: ""; position: absolute; inset: -2px; border-radius: 50%;
    border: 2px solid var(--color-accion); opacity: 0; animation: latido 2.4s ease-out infinite;
}
.punto:hover, .punto.activo { transform: scale(1.18); background: #fff; color: var(--color-accion-texto); }
.punto.activo::before { animation: none; }
@keyframes latido { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(2.1); opacity: 0; } }

.mapa__lista { display: grid; gap: .45rem; }
.mapa__fila {
    width: 100%; text-align: left; padding: .9rem 1.05rem; border-radius: 12px;
    border: 1px solid transparent; background: transparent; color: var(--texto-oscuro-fuerte);
    transition: background-color .35s var(--curva), border-color .35s var(--curva);
}
.mapa__fila:hover { background: rgba(23, 51, 95, .55); }
.mapa__fila.activo { background: var(--fondo-700); border-color: var(--linea-sobre-oscuro); }
.mapa__cabecera { display: flex; align-items: center; gap: .9rem; font: 600 .95rem/1.25 var(--fuente-titulos); }
.mapa__numero {
    display: grid; place-items: center; width: 1.7rem; height: 1.7rem; flex: none; border-radius: 50%;
    font: 800 .72rem/1 var(--fuente-titulos); background: rgba(255, 106, 43, .16); color: var(--color-accion);
    transition: background-color .3s, color .3s;
}
.mapa__fila.activo .mapa__numero { background: var(--color-accion); color: var(--color-accion-texto); }
.mapa__detalle { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--curva); }
.mapa__fila.activo .mapa__detalle { grid-template-rows: 1fr; }
.mapa__detalle > span { overflow: hidden; display: block; }
.mapa__texto { display: block; padding: .7rem 0 .15rem 2.6rem; font-size: .92rem; line-height: 1.55; font-weight: 400; color: var(--texto-oscuro-suave); font-family: var(--fuente-texto); }

.sistemas-todos { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 2rem; border-top: 1px solid var(--linea-sobre-oscuro); }
.sistemas-todos h3 { font-size: var(--tam-h3); margin-bottom: 1.4rem; }
.sistemas-todos ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .15rem 2.5rem; }
.sistemas-todos li { display: flex; gap: .75rem; align-items: flex-start; padding: .65rem 0; border-bottom: 1px solid var(--linea-sobre-oscuro); font-size: .96rem; line-height: 1.4; color: var(--texto-oscuro-fuerte); }
.sistemas-todos .icono { color: var(--color-accion); margin-top: .12rem; }


/* ==========================================================================
   10. SERVICIOS (preventivo / correctivo)
   ========================================================================== */
.servicios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.2rem, 2.5vw, 2rem); }
.tarjeta {
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--fondo-blanco); border-radius: var(--radio-tarjeta);
    box-shadow: 0 30px 60px -40px rgba(10, 26, 49, .45);
}
.tarjeta__imagen { aspect-ratio: 3 / 2; overflow: hidden; }
.tarjeta__imagen img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--curva); }
.tarjeta:hover .tarjeta__imagen img { transform: scale(1.04); }
.tarjeta__cuerpo { display: flex; flex-direction: column; flex: 1; padding: clamp(1.5rem, 3vw, 2.3rem); }
.tarjeta h3 { font-size: var(--tam-h3); margin-bottom: .9rem; color: var(--texto-claro-fuerte); }
.tarjeta p { margin-bottom: 1rem; font-size: 1rem; }
.tarjeta .enlace-flecha { margin-top: auto; padding-top: .6rem; color: var(--azul-marca); }
.lista-marcas { margin-top: .6rem; }
.lista-marcas li { display: flex; gap: .75rem; align-items: flex-start; padding: .7rem 0; border-top: 1px solid var(--linea-sobre-claro); font-size: .96rem; line-height: 1.4; color: var(--texto-claro-fuerte); }
.lista-marcas .icono { color: var(--azul-marca); margin-top: .1rem; }

.banda-cta {
    margin-top: clamp(2rem, 4vw, 3rem);
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2rem;
    padding: clamp(1.5rem, 3vw, 2.2rem) clamp(1.5rem, 3.5vw, 2.8rem);
    background: var(--fondo-900); color: var(--texto-oscuro-fuerte); border-radius: var(--radio-tarjeta);
}
.banda-cta p { font: 600 clamp(1.05rem, 1rem + .5vw, 1.35rem)/1.3 var(--fuente-titulos); color: #fff; max-width: 30ch; }
.banda-cta__botones { display: flex; flex-wrap: wrap; gap: .9rem; }


/* ==========================================================================
   11. CICLO DE VIGILANCIA
   ========================================================================== */
.ciclo { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.ciclo__imagen { border-radius: var(--radio-imagen); overflow: hidden; aspect-ratio: 4 / 4.6; }
.ciclo__imagen img { width: 100%; height: 100%; object-fit: cover; }
.ciclo__pasos { counter-reset: paso; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.8rem 2.2rem; margin-top: 2.2rem; }
.ciclo__pasos li { counter-increment: paso; padding-top: 1.1rem; border-top: 1px solid var(--linea-sobre-oscuro); }
.ciclo__pasos li::before {
    content: counter(paso, decimal-leading-zero);
    display: block; margin-bottom: .6rem;
    font: 700 1.5rem/1 var(--fuente-titulos); color: var(--color-accion);
}
.ciclo__pasos h3 { font-size: 1rem; margin-bottom: .35rem; color: #fff; }
.ciclo__pasos p { font-size: .92rem; line-height: 1.5; }


/* ==========================================================================
   12. CALIDAD
   ========================================================================== */
.calidad { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.calidad__texto p:not(.etiqueta) { margin-top: 1.3rem; max-width: 56ch; font-size: var(--tam-texto-grande); }
.sello-iso {
    display: inline-flex; align-items: center; gap: 1.2rem; margin-top: 2rem;
    padding: .9rem 1.2rem; background: #fff; border-radius: 12px; color: var(--texto-claro-fuerte);
}
.sello-iso img { height: 64px; width: auto; border-radius: 4px; }
.sello-iso span { font: 600 .85rem/1.35 var(--fuente-titulos); max-width: 13rem; }
.compromisos { margin-top: 2rem; display: grid; gap: .1rem; }
.compromisos li { display: flex; gap: .8rem; padding: .8rem 0; border-top: 1px solid var(--linea-sobre-oscuro); font-size: .98rem; color: var(--texto-oscuro-fuerte); }
.compromisos .icono { color: var(--color-accion); margin-top: .15rem; }
.calidad__imagen { border-radius: var(--radio-imagen); overflow: hidden; aspect-ratio: 4 / 3.4; }
.calidad__imagen img { width: 100%; height: 100%; object-fit: cover; }


/* ==========================================================================
   13. PREGUNTAS FRECUENTES
   ========================================================================== */
.faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.faq__lista { border-top: 1px solid var(--linea-sobre-claro); }
.faq details { border-bottom: 1px solid var(--linea-sobre-claro); }
.faq summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
    padding: 1.35rem 0; font: 600 1.05rem/1.35 var(--fuente-titulos); color: var(--texto-claro-fuerte);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: ""; flex: none; width: 1.9rem; height: 1.9rem; border-radius: 50%;
    background:
        linear-gradient(var(--fondo-900), var(--fondo-900)) center / 11px 2px no-repeat,
        linear-gradient(var(--fondo-900), var(--fondo-900)) center / 2px 11px no-repeat,
        var(--fondo-blanco);
    box-shadow: inset 0 0 0 1px var(--linea-sobre-claro);
    transition: transform .4s var(--curva), background-color .3s;
}
.faq details[open] summary::after {
    transform: rotate(135deg);
    background:
        linear-gradient(var(--color-accion-texto), var(--color-accion-texto)) center / 11px 2px no-repeat,
        linear-gradient(var(--color-accion-texto), var(--color-accion-texto)) center / 2px 11px no-repeat,
        var(--color-accion);
    box-shadow: none;
}
.faq details > p { padding: 0 3.5rem 1.5rem 0; max-width: 62ch; font-size: 1rem; }


/* ==========================================================================
   14. CONTACTO
   ========================================================================== */
.contacto { position: relative; isolation: isolate; overflow: hidden; background: var(--fondo-950); }
.contacto__fondo { position: absolute; inset: 0; z-index: -2; }
.contacto__fondo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.contacto::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, rgba(6, 16, 31, .95) 0%, rgba(6, 16, 31, .82) 50%, rgba(6, 16, 31, .55) 100%),
                linear-gradient(0deg, rgba(6, 16, 31, .9), transparent 40%);
}
.contacto__rejilla { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2rem, 5vw, 5rem); align-items: end; }
.contacto h2 { font-size: var(--tam-h2); font-weight: 700; max-width: 18ch; margin-bottom: 1.2rem; }
.contacto__texto p:not(.etiqueta) { font-size: var(--tam-texto-grande); color: #D3DDEA; max-width: 46ch; }
.contacto__botones { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.contacto__enlaces { margin-top: 2rem; display: grid; gap: .3rem; }
.contacto__telefono { font: 700 clamp(1.6rem, 1rem + 2vw, 2.4rem)/1.1 var(--fuente-titulos); letter-spacing: -.02em; text-decoration: none; color: #fff; }
.contacto__telefono:hover { color: var(--color-accion); }
.sedes-tarjetas { display: grid; gap: 1rem; }
.sede {
    padding: 1.3rem 1.5rem; border-radius: var(--radio-tarjeta);
    background: rgba(10, 26, 49, .72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--linea-sobre-oscuro);
}
.sede h3 { font: 700 .74rem/1 var(--fuente-titulos); letter-spacing: .14em; text-transform: uppercase; color: var(--azul-marca-claro); margin-bottom: .7rem; }
.sede address { font-style: normal; font-size: .96rem; line-height: 1.55; color: var(--texto-oscuro-fuerte); }


/* ==========================================================================
   15. PIE DE PÁGINA
   ========================================================================== */
.pie { background: var(--fondo-950); color: var(--texto-oscuro-suave); padding-block: clamp(3rem, 6vw, 4.5rem) 1.8rem; border-top: 1px solid var(--linea-sobre-oscuro); }
.pie__rejilla { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 4rem); }
.pie__marca img { height: 42px; width: auto; margin-bottom: 1.2rem; }
.pie__marca p { max-width: 34ch; font-size: .95rem; }
.pie__marca a { color: #fff; text-underline-offset: 3px; }
.pie h2 { font: 700 .74rem/1 var(--fuente-titulos); letter-spacing: .14em; text-transform: uppercase; color: #fff; margin-bottom: 1.1rem; }
.pie li + li { margin-top: .2rem; }
.pie nav a, .pie__boton { display: inline-block; padding: .3rem 0; font-size: .95rem; text-decoration: none; color: var(--texto-oscuro-suave); transition: color .3s; }
.pie nav a:hover, .pie__boton:hover { color: #fff; }
.pie__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem 2rem; margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.5rem; border-top: 1px solid var(--linea-sobre-oscuro); font-size: .86rem; }


/* ==========================================================================
   16. AVISO DE COOKIES
   ========================================================================== */
.cookies {
    position: fixed; left: clamp(12px, 2vw, 28px); bottom: clamp(12px, 2vw, 28px); z-index: 300;
    width: min(440px, calc(100vw - 24px)); padding: 1.3rem 1.4rem;
    background: var(--fondo-800); color: var(--texto-oscuro-fuerte);
    border: 1px solid var(--linea-sobre-oscuro); border-top: 3px solid var(--color-accion);
    border-radius: var(--radio-tarjeta); box-shadow: 0 24px 50px -16px rgba(0, 0, 0, .7);
    transform: translateY(24px); opacity: 0; visibility: hidden;
    transition: transform .7s var(--curva), opacity .5s var(--curva), visibility 0s .7s;
}
.cookies.visible { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }
.cookies p { font-size: .9rem; line-height: 1.55; }
.cookies a { font-weight: 700; }
.cookies__acciones { display: flex; gap: .7rem; margin-top: 1rem; }
.cookies__acciones .btn { flex: 1; padding: .85rem 1rem; font-size: .8rem; }


/* ==========================================================================
   17. PÁGINAS LEGALES Y 404
   ========================================================================== */
.pagina-legal__cabecera { background: var(--fondo-900); padding: calc(var(--alto-menu) + clamp(3rem, 6vw, 5rem)) 0 clamp(2.5rem, 5vw, 4rem); position: relative; overflow: hidden; }
.pagina-legal__cabecera::after { content: ""; position: absolute; right: -10%; top: -40%; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(44, 80, 128, .5), transparent 65%); pointer-events: none; }
.pagina-legal__cabecera h1 { font-size: clamp(1.9rem, 1rem + 2.6vw, 3rem); font-weight: 700; }
.pagina-legal__cabecera p { margin-top: .9rem; color: var(--texto-oscuro-suave); max-width: 52ch; }
.pagina-legal__cuerpo { background: var(--fondo-claro); color: var(--texto-claro-fuerte); padding-block: clamp(3rem, 7vw, 5.5rem); }
.legal { max-width: 70ch; }
.legal h2 { font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); margin: 2.6rem 0 .9rem; padding-top: 1.4rem; border-top: 1px solid var(--linea-sobre-claro); }
.legal h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal p, .legal li { color: var(--texto-claro-suave); line-height: 1.75; }
.legal p { margin-bottom: 1rem; }
.legal ul { margin: .3rem 0 1.3rem 1.3rem; list-style: disc; }
.legal li { padding-left: .3rem; margin-bottom: .35rem; }
.legal li::marker { color: var(--azul-marca); }
.legal a { color: var(--azul-marca); font-weight: 600; }
.legal__fecha { margin-top: 3rem; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; }

.error-404 { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; background: var(--fondo-900); position: relative; overflow: hidden; padding-block: calc(var(--alto-menu) + 2rem) 3rem; }
.error-404::after { content: ""; position: absolute; left: -12%; bottom: -35%; width: 70vw; height: 70vw; border-radius: 50%; background: radial-gradient(circle, rgba(44, 80, 128, .55), transparent 62%); pointer-events: none; }
.error-404__codigo { font: 800 clamp(5rem, 3rem + 10vw, 11rem)/.9 var(--fuente-titulos); letter-spacing: -.04em; color: var(--color-accion); }
.error-404 h1 { font-size: clamp(1.6rem, 1rem + 2vw, 2.4rem); margin: 1rem 0; }
.error-404 p { color: var(--texto-oscuro-suave); max-width: 46ch; margin-bottom: 2rem; }
.error-404 p.error-404__codigo { color: var(--color-accion); margin: 0; max-width: none; }
.error-404 .contenedor, .pagina-legal__cabecera .contenedor { position: relative; z-index: 1; }


/* ==========================================================================
   18. MOVIMIENTO (apariciones al hacer scroll)
   ========================================================================== */
.js .aparece { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--curva), transform 1s var(--curva); transition-delay: var(--retraso, 0s); }
.js .aparece.visible { opacity: 1; transform: none; }
.r1 { --retraso: .1s; } .r2 { --retraso: .2s; } .r3 { --retraso: .3s; }


/* ==========================================================================
   19. ADAPTACIÓN A PANTALLAS
   ========================================================================== */
@media (max-width: 1100px) {
    .mapa { grid-template-columns: minmax(0, 1fr); }
    .sistemas-todos ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ciclo, .calidad, .somos { grid-template-columns: minmax(0, 1fr); }
    .ciclo__imagen { aspect-ratio: 16 / 10; }
    .calidad__imagen { order: -1; aspect-ratio: 16 / 10; }
    .somos__imagenes { max-width: 36rem; padding-bottom: 2.5rem; }
    .somos__detalle { left: -1rem; }
    .faq { grid-template-columns: minmax(0, 1fr); }
    .contacto__rejilla { grid-template-columns: minmax(0, 1fr); align-items: start; }
}

@media (max-width: 980px) {
    .hamburguesa { display: block; }
    .menu {
        position: fixed; inset: var(--alto-menu) 0 0 0; background: var(--fondo-950);
        flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0;
        padding: 1.2rem var(--margen-lateral) 3rem; overflow-y: auto;
        clip-path: inset(0 0 100% 0); visibility: hidden;
        transition: clip-path .7s var(--curva), visibility 0s .7s;
    }
    .menu.abierto { clip-path: inset(0 0 0 0); visibility: visible; transition-delay: 0s; }
    .menu li { border-bottom: 1px solid var(--linea-sobre-oscuro); }
    .menu a:not(.btn) { display: block; padding: 1.05rem 0; font-size: 1.35rem; font-weight: 700; }
    .menu a:not(.btn)::after { display: none; }
    .menu .menu__cta { border: 0; margin-top: 1.8rem; }
    .menu .btn { width: 100%; padding: 1.2rem; font-size: .95rem; }
}

@media (max-width: 820px) {
    .datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dato:nth-child(3) { border-left: 0; padding-left: 0; }
    .dato:nth-child(n+3) { margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid var(--linea-sobre-oscuro); }
    .servicios { grid-template-columns: minmax(0, 1fr); }
    .ciclo__pasos { grid-template-columns: minmax(0, 1fr); }
    .pie__rejilla { grid-template-columns: minmax(0, 1fr); }
    .somos__detalle { width: 52%; }
}

@media (max-width: 640px) {
    .portada__acciones .btn { flex: 1 1 100%; }
    .portada__acciones .enlace-flecha { margin: .4rem 0 0; }
    .sistemas-todos ul { grid-template-columns: minmax(0, 1fr); }
    .punto { width: 1.9rem; height: 1.9rem; margin: -.95rem 0 0 -.95rem; font-size: .72rem; }
    .banda-cta__botones, .banda-cta__botones .btn, .contacto__botones .btn { width: 100%; }
    .cookies__acciones { flex-direction: column; }
    .cabecera__logo img { height: 32px; }
    :root { --alto-menu: 68px; }
}


/* ==========================================================================
   20. MOVIMIENTO REDUCIDO
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
    .btn:hover, .btn:active { transform: none; }
    .js .aparece { opacity: 1 !important; transform: none !important; }
}