/*
 * templates/front-area14/assets/css/area14.css · Web de Área 14 (DERPE v3.4 p168). Va después del tema de la web original (Porto, Bootstrap 4): recoge sus
 * estilos propios (custom.css y los que llevaba cada página) y los de los bloques que la web pinta sin los complementos de Porto (carrusel, pestañas de
 * clientes, logotipos, formulario de contacto…). Prefijo a14-.
 */
:root {
    --a14-rojo: #bc0000;
    --a14-rojo-vivo: #ea3939;
    --a14-oscuro: #212529;
    --a14-negro: #111316;
    --a14-gris: #777;
}

/* ── Base ─────────────────────────────────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }
body.a14 { font-family: 'Poppins', Arial, sans-serif; overflow-x: hidden; }
.a14 h1, .a14 h2, .a14 h3, .a14 h4, .a14 h5 { font-family: 'Poppins', Arial, sans-serif; }
.a14-saltar { position: absolute; left: 16px; top: -60px; z-index: 2000; padding: 10px 16px; border-radius: 6px; background: #fff; color: var(--a14-oscuro); font-weight: 600; }
.a14-saltar:focus { top: 12px; }
.a14 :focus-visible { outline: 3px solid #ff8a80; outline-offset: 2px; }
.a14 img { max-width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .a14 *, .a14 *::before, .a14 *::after { animation: none !important; transition: none !important; } }

/* Las animaciones de aparición las activa js/area14.js; sin JavaScript (o sin movimiento) todo se ve desde el principio */
html:not(.js) .appear-animation, .a14-sin-movimiento .appear-animation { opacity: 1 !important; }

/* Estilos propios de la web original (custom.css y los de sus páginas) */
.container2 { max-width: 75% !important; width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }
.responsive { width: 80%; height: auto; display: block; margin-left: auto; margin-right: auto; }
.sostenibilidad { font-size: 50px; color: #fff; font-weight: 700; }
.services__description { color: var(--a14-gris); }

/* ── Cabecera fija ────────────────────────────────────────────────────────────────────────────── */
.a14-cabecera { height: 120px; }
.a14-cabecera .header-body { position: fixed; top: 0; left: 0; right: 0; z-index: 1030; transition: box-shadow .2s ease; }
.a14-cabecera .header-container { height: 120px; min-height: 0; transition: height .25s ease; }
.a14-cabecera.a14-encogida .header-container { height: 80px; }
.a14-cabecera.a14-encogida .header-body { box-shadow: 0 4px 18px rgba(0, 0, 0, .35); }
.a14-cabecera .header-logo img { width: auto; height: 60px; }
.a14-cabecera.a14-encogida .header-logo img { height: 46px; }
.a14-cabecera .header-column-logo { flex: 0 0 auto; }
#header.a14-cabecera .header-nav-main nav > ul > li > a { padding-left: .55rem; padding-right: .55rem; white-space: nowrap; }
/* El menú en una sola línea en el escritorio: con el selector de idioma ya no cabía «Kit Digital» */
@media (min-width: 992px) { #header.a14-cabecera .header-nav-main nav > ul { flex-wrap: nowrap; } }
@media (min-width: 992px) and (max-width: 1199.98px) { #header.a14-cabecera .header-nav-main nav > ul > li > a { padding-left: .35rem; padding-right: .35rem; font-size: 11px; } .a14-idiomas { margin-right: 6px; } }
.a14-cabecera .header-social-icons { align-items: center; }
.a14-cabecera-contacto { margin-left: 12px; white-space: nowrap; }
.a14-idiomas { display: inline-flex; gap: 2px; margin-right: 12px; padding: 3px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, .25); }
.a14-idiomas a { padding: 2px 9px; border-radius: 16px; font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, .75); text-decoration: none; }
.a14-idiomas a.activo, .a14-idiomas a:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.a14-idiomas-pie { display: inline-flex; }
/* Páginas sin primera pantalla (legales): el contenido empieza bajo la cabecera */
.a14-legal-pagina .main, .a14-pagina-index .a14-no-encontrada, .a14 .a14-no-encontrada { padding-top: 120px; }
@media (max-width: 991.98px) {
    .a14-cabecera, .a14-cabecera .header-container { height: 80px; }
    .a14-cabecera .header-logo img { height: 44px; }
    #header.a14-cabecera .header-nav-main nav { max-height: calc(100vh - 80px); overflow-y: auto; }
    #header.a14-cabecera .header-nav-main nav > ul > li > a { padding-left: 1rem; }
    .a14-legal-pagina .main { padding-top: 80px; }
}

/* ── Primeras pantallas ───────────────────────────────────────────────────────────────────────── */
.a14-cabecera-servicio { background-size: cover; background-position: center; min-height: 655px; }
.a14-cabecera-servicio h1 { color: #fff; }
.a14-cabecera-servicio .sub-title { display: block; max-width: 560px; line-height: 1.6; }
.a14-cabecera-pagina { background-size: cover; background-position: center; min-height: 600px; position: relative; overflow: hidden; }
.a14-cabecera-pagina > .container { position: relative; z-index: 2; }
.a14-cabecera-pagina h1 { color: #fff; line-height: 1.15; }
.a14-cabecera-pagina .sub-title { color: rgba(255, 255, 255, .85); line-height: 1.6; }
.a14-cabecera-pagina .breadcrumb { padding-top: 120px; }
.a14-video-fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.a14-con-video::before { z-index: 1 !important; }
@media (max-width: 767.98px) {
    .a14-cabecera-servicio { min-height: 560px; }
    .a14-cabecera-servicio h1, .a14-cabecera-pagina h1 { font-size: 2rem !important; }
    .a14-cabecera-pagina { min-height: 520px; }
    .a14-cabecera-pagina .breadcrumb { padding-top: 70px; }
}

/* Los párrafos a 15px, como la regla global de bundle.css de la web original (sin especificidad: las clases del tema siguen mandando) */
:where(p) { font-size: 15px; }

/* Carrusel de la portada y de Empresa (en lugar del de Revolution de la web original) */
.a14-carrusel { position: relative; background: var(--a14-negro); }
.a14-carrusel .carousel-item { min-height: 100vh; background-size: cover; background-position: center; background-color: var(--a14-negro); }
.a14-carrusel .carousel-item::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .1) 70%); }
.a14-carrusel-texto { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-top: 140px; padding-bottom: 90px; color: #fff; }
.a14-carrusel-titulo { color: #fff; font-size: clamp(2.6rem, 6vw, 5rem); font-weight: 800; line-height: 1; margin-bottom: .2em; letter-spacing: -.01em; }
.a14-carrusel-linea { color: #fff; font-size: clamp(1.15rem, 2.2vw, 1.75rem); line-height: 1.2; max-width: 640px; margin-bottom: .8rem; }
.a14-carrusel-desc { max-width: 600px; color: rgba(255, 255, 255, .85); font-size: 1rem; line-height: 1.6; }
.a14-carrusel-desc p { color: inherit; }
.a14-carrusel-logo { width: min(420px, 80%); margin-bottom: 1.5rem; }
.a14-carrusel-boton { align-self: flex-start; margin-top: 1.5rem; border: 2px solid #fff; color: #fff; background: transparent; padding: .8rem 1.6rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.a14-carrusel-boton:hover { background: #fff; color: var(--a14-oscuro); }
.a14-pagina-empresa .a14-carrusel-texto { align-items: center; text-align: center; }
.a14-pagina-empresa .a14-carrusel-texto .a14-carrusel-linea { letter-spacing: .6em; text-transform: uppercase; font-size: 1rem; max-width: none; }
.a14-pagina-empresa .a14-carrusel-boton { align-self: center; }
.a14-carrusel .carousel-indicators li { width: 34px; height: 4px; }
@media (max-width: 767.98px) {
    .a14-carrusel-desc { font-size: .8rem; }
    .a14-carrusel-desc br, .a14-carrusel-linea br { display: none; }
    .a14-carrusel .carousel-control-prev, .a14-carrusel .carousel-control-next { display: none; }
}

/* Los títulos de tarjeta y de rasgo, como en la web original, sin mayúsculas forzadas */
.a14 .feature-box h3, .a14-tarjeta h3 { text-transform: none; letter-spacing: 0; }

/* ── Bloques ──────────────────────────────────────────────────────────────────────────────────── */
.a14 .feature-box .feature-box-icon.a14-icono { width: auto; height: auto; min-width: 80px; background: transparent; padding: 0; top: 0; }
.a14-icono-img { width: 80px; height: 80px; object-fit: contain; }
.a14-oscuro { position: relative; background-color: var(--a14-oscuro); background-size: cover; background-position: center; overflow: hidden; }
.a14-oscuro > .container { position: relative; z-index: 1; }
.a14-oscuro h2, .a14-oscuro h3, .a14-oscuro h4 { color: #fff; }
.a14-tarjetas-iconos.a14-oscuro::before, .a14-texto.a14-oscuro::before, .a14-texto-imagen.a14-oscuro::before { content: ""; position: absolute; inset: 0; background: rgba(17, 19, 22, .72); z-index: 0; }
.a14-tarjetas-iconos .feature-box-info h3 { font-weight: 700; }
.a14-tarjeta { padding: 1.6rem; border-radius: 6px; background: #fff; box-shadow: 0 6px 24px rgba(0, 0, 0, .07); }
.a14-botones .a14-boton-servicio { display: flex; align-items: center; min-height: 48px; height: 100%; padding: .55rem .8rem; background: var(--a14-oscuro); color: #fff; font-size: .8rem; font-weight: 600; line-height: 1.3; text-decoration: none; transition: background .2s; }
.a14-botones a.a14-boton-servicio:hover { background: var(--a14-rojo); color: #fff; }
.a14-banda { padding-bottom: 1rem; }
.a14-banda h3 { font-weight: 700; }
.a14-intro .scale-3 { max-width: 100%; }

/* Tarjetas centradas (los cuatro jinetes): el icono encima */
.a14 .feature-box.a14-centrada { flex-direction: column; align-items: center; }
.a14 .feature-box.a14-centrada .feature-box-info { margin: 1rem 0 0 !important; padding: 0; }
.a14-franja { background: var(--a14-oscuro); }

/* Acordeón («Todos nuestros servicios») */
.a14-acordeon .card-title { font-size: .85rem; text-transform: none; }
.a14-acordeon .card-default .card-header .accordion-toggle { font-size: .8rem; }

/* Tecnología emergente */
section.a14-tecnologia { background-size: cover !important; background-position: center !important; background-attachment: scroll !important; background-repeat: no-repeat; }
.a14-tecnologia .a14-velo { background: rgba(10, 10, 12, .62); padding-top: 2rem; padding-bottom: 2rem; }
.a14-tecnologia .nav-tabs { border: 0; justify-content: center; flex-wrap: nowrap; overflow-x: auto; }
.a14-tecnologia .nav-tabs .nav-item { flex: 0 0 auto; }
.a14-tecnologia .nav-tabs .nav-link { border: 0; background: transparent; color: #fff; padding: 1rem .8rem; border-bottom: 3px solid transparent; }
.a14-tecnologia .nav-tabs .nav-link.active { border-bottom-color: #fff; }
.a14-tecnologia .tab-content { background: transparent; border: 0; box-shadow: none; max-width: 900px; margin: 0 auto; }
.a14-tecnologia .icon-featured { color: #fff; }

/* Pestañas de tarjetas («Lo que ofrecemos») */
.a14-pestanas .nav-tabs { justify-content: center; }
.a14-pestanas .tab-content { border: 0; box-shadow: none; background: transparent; }

/* Llamada final */
section.a14-llamada { background: var(--a14-rojo-vivo); overflow: hidden; }
.a14-llamada-texto { padding-left: 6%; }
.a14-llamada h2 { line-height: 1.1; }
@media (max-width: 991.98px) { .a14-llamada-texto { padding-left: 15px; } .a14-llamada h2 { font-size: 2rem !important; } }

/* ¿Cómo contribuimos? */
.a14-contribuimos-caja { background: #111; display: flex; align-items: center; }
.a14-contribuimos-logo { width: 140px; }
.a14-contribuimos-imagen { min-height: 460px; background-size: cover; background-position: center; display: flex; align-items: flex-end; padding: 2.5rem; }
.a14-contribuimos-imagen .sostenibilidad { margin: 0; line-height: 1.05; font-size: clamp(1.8rem, 4vw, 3.1rem); text-shadow: 0 2px 18px rgba(0, 0, 0, .5); }

/* Clientes */
.a14-clientes-pestanas { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 1.5rem; }
.a14-clientes-pestanas .nav-link { display: block; height: 100%; padding: 18px 20px; border-top: 3px solid #f0f3f8; color: #363c45; opacity: .7; text-decoration: none; }
.a14-clientes-pestanas .nav-link strong { display: block; color: #0c1725; font-size: 1rem; margin-bottom: 4px; }
.a14-clientes-pestanas .nav-link span { display: block; font-size: .8rem; line-height: 1.4; }
.a14-clientes-pestanas .nav-link.active, .a14-clientes-pestanas .nav-link:hover { opacity: 1; background: #fff; box-shadow: 0 3px 20px rgba(12, 23, 37, .1); border-top-color: var(--a14-rojo); }
.a14-cliente { background: #f4f6f9; border-radius: 6px; overflow: hidden; }
.a14-cliente-imagen { min-height: 380px; background-size: cover; background-position: center; background-color: #e9edf2; }
.a14-enlace-cliente { font-weight: 700; color: var(--a14-rojo); }

/* Logotipos de colaboradores */
.a14-logos-lista { list-style: none; margin: 2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 22px 36px; }
.a14-logo { max-height: 38px; max-width: 120px; width: auto; filter: grayscale(1); opacity: .7; transition: filter .2s, opacity .2s; }
.a14-logos-lista a:hover .a14-logo, .a14-logo:hover { filter: none; opacity: 1; }

/* Galería */
.a14-galeria-fila { display: flex; }
.a14-galeria-foto { flex: 1 1 0; min-width: 0; }
.a14-galeria-foto img { display: block; width: 100%; height: 260px; object-fit: cover; }
@media (max-width: 767.98px) { .a14-galeria-fila { flex-wrap: wrap; } .a14-galeria-foto { flex: 1 1 50%; } .a14-galeria-foto img { height: 160px; } }

/* Sistemas de gestión de Empresa */
.a14-fotos { background: var(--a14-oscuro); }
.a14-palabras p { font-weight: 300; letter-spacing: .02em; }
.a14-fotos .image-box img { border-radius: 4px; }

/* Cierre de Empresa */
.a14-cierre { background-size: cover; background-position: center; min-height: 420px; }
.a14-cierre-logo { max-width: 260px; }

/* Formulario de contacto */
.a14-contacto { background-size: cover; background-position: center; position: relative; }
.a14-contacto::before { content: ""; position: absolute; inset: 0; background: rgba(240, 242, 245, .9); }
.a14-contacto > .container { position: relative; }
.a14-formulario { background: #fff; padding: 2.2rem; border-radius: 6px; box-shadow: 0 10px 40px rgba(0, 0, 0, .12); }
.a14-opciones { border: 0; padding: 0; }
.a14-opcion { display: inline-flex; align-items: center; gap: 6px; margin: 0 6px 8px 0; padding: 6px 14px; border-radius: 20px; background: #f4f4f4; font-size: .85rem; cursor: pointer; }
.a14-opcion input { accent-color: var(--a14-rojo); }
.a14-opcion:has(input:checked) { background: #fde8e8; color: var(--a14-rojo); font-weight: 600; }
.a14-formulario label { font-size: .85rem; font-weight: 600; color: #333; }
.a14-formulario .form-check-label { font-weight: 400; }
.a14-trampa { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.a14-aviso { margin-bottom: 1rem; padding: .8rem 1rem; border-radius: 6px; font-size: .9rem; }
.a14-aviso-ok { background: #e7f5ec; color: #15602f; }
.a14-aviso-error { background: #fdecec; color: #a11a1a; }
.a14-despues { border-radius: 6px; }
.a14-pasos { counter-reset: paso; list-style: none; padding: 0; margin: 0; }
.a14-pasos li { counter-increment: paso; position: relative; padding-left: 44px; margin-bottom: 1.2rem; font-size: .9rem; line-height: 1.5; }
.a14-pasos li::before { content: counter(paso); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; background: #fff; color: var(--a14-rojo); font-weight: 700; display: flex; align-items: center; justify-content: center; }

/* Textos legales */
.a14-legal-texto h3 { margin: 2rem 0 .8rem; font-size: 1.15rem; font-weight: 700; color: var(--a14-oscuro); }
.a14-legal-texto p, .a14-legal-texto li { line-height: 1.7; }

/* Pie */
.a14-pie-logo { height: 75px; width: auto; }
.a14-pie .text { color: rgba(255, 255, 255, .7); }
.a14-pie .text:hover { color: #fff; }
.a14-pie-servicios2 { padding-top: 3.1rem; }
@media (max-width: 991.98px) { .a14-pie-servicios2 { padding-top: 0; } }
.a14 .footer-copyright a { color: rgba(255, 255, 255, .7); }

/* Contraste (p168): los enlaces dentro del texto sobre fondos oscuros o rojos, en blanco y subrayados; la entradilla roja sobre fondo oscuro, en un rojo más claro */
.section-text-light p a:not(.btn), .a14-oscuro p a:not(.btn), .bg-color-primary p a:not(.btn), .a14-banda p a:not(.btn) { color: #fff; text-decoration: underline; }
.a14-oscuro .text-primary, .section-dark .text-primary { color: #ff6b5e !important; }
.a14-cabecera-banda { min-height: 0 !important; }
.a14-cabecera-banda .a14-cabecera-figura img { max-height: 340px; }
@media (max-width: 575.98px) { .a14-cabecera-banda .a14-cabecera-figura { display: none !important; } }
.a14-oscuro li, .section-dark li, .a14-oscuro .list li { color: rgba(255, 255, 255, .85); }