/* =========================================================================
   UX PATCH 2026 — pequeñas correcciones post-auditoría UX/UI.
   Carga DESPUÉS de style.min.css y mobile-hotfix.css.
   Documento de referencia: UX-AUDIT-2026.md (raíz del proyecto).
   ========================================================================= */

/* ---------- Skip link (WCAG 2.4.1) ---------- */
.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: 10000;
}
.skip-link:focus,
.skip-link:focus-visible {
    position: fixed;
    top: 10px;
    left: 10px;
    width: auto;
    height: auto;
    padding: 10px 18px;
    background: #F00E2B;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
    border-radius: 4px;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* ---------- Focus ring global (WCAG 2.4.7) ---------- */
:focus-visible {
    outline: 2px solid #F00E2B;
    outline-offset: 2px;
}
/* Inputs, selects y textareas: focus con anillo + sombra suave para mejor visibilidad en fondos claros */
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.form-control:focus-visible,
.pf-input:focus-visible {
    outline: 2px solid #F00E2B;
    outline-offset: 0;
    box-shadow: 0 0 0 4px rgba(240, 14, 43, 0.15);
    border-color: #F00E2B;
}
/* Botones: anillo rojo bien visible */
button:focus-visible,
.btn:focus-visible,
a.btn:focus-visible,
a.underline:focus-visible,
.pf-btn:focus-visible,
.navbar-toggler:focus-visible,
.subnav-toggle:focus-visible {
    outline: 3px solid #F00E2B;
    outline-offset: 3px;
    box-shadow: none;
}

/* ---------- body fix: evita texto invisible si una sección no pinta fondo ---------- */
/* El body tiene historicamente color:#444 y background:#444. Dejamos el texto negro por defecto */
/* y dejamos que las secciones con fondo oscuro sobreescriban color por su cuenta. */
body {
    color: #1C1C1A;
}

/* ---------- Targets táctiles (WCAG 2.5.5) ---------- */
.social a,
.lang a {
    display: inline-block;
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
    line-height: 1;
    text-align: center;
}

/* ---------- Reduced motion (WCAG 2.3.3) ---------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .swiper-logos .swiper-wrapper {
        transition-timing-function: linear !important;
    }
}

/* ---------- Diferenciar CTA primario del resto ---------- */
/* Botón rojo sólido para CTA primario de conversión (ej. "PEDIR PRESUPUESTO") */
.btn-primary-manifesto,
a.btn-primary-manifesto {
    display: inline-block;
    padding: 12px 26px;
    background: #F00E2B;
    color: #fff !important;
    border: 2px solid #F00E2B;
    border-radius: 2px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: background .18s ease, transform .18s ease;
}
.btn-primary-manifesto:hover,
.btn-primary-manifesto:focus {
    background: #1C1C1A;
    border-color: #1C1C1A;
    color: #fff !important;
    text-decoration: none;
    transform: translateY(-1px);
}

/* ---------- Nosotros: la cabecera no puede quedar fuera del flujo ---------- */
/* .intro es position:absolute (el video del home). En esta página el texto de abajo subía y tapaba el título. */
body.nosotros section.heading {
    position: relative;
    background: #1C1C1A url("../img/banner-blog.jpg") center center no-repeat;
    background-size: cover;
}

/* ---------- FAQ: la pregunta tiene que leerse más grande que la respuesta ---------- */
/* .h4 / .h6 de Bootstrap pierden contra h2/h3 del tema y dejan 10–15px con line-height de 3rem. */
.faq-servicio h2.h4,
.text-section-servicios:not(.faq-servicio) > .container > h2.h4 {
    font-size: 2.6rem;
    line-height: 1.2;
    font-weight: 300;
    margin-bottom: 2.4rem;
    color: #1C1C1A;
}
.faq-servicio h3.h6 {
    font-size: 1.7rem;
    line-height: 1.35;
    font-weight: 600;
    color: #A3101B;
    margin-top: 0;
    margin-bottom: 0.8rem;
}

/* Nombres del equipo (nosotros): mismo marcado h3.h6, pero no son preguntas */
.text-section-servicios:not(.faq-servicio) h3.h6 {
    font-size: 1.8rem;
    line-height: 1.3;
    font-weight: 600;
    color: #1C1C1A;
    margin-top: 0;
    margin-bottom: 0.4rem;
}

/* ---------- Hero de servicio: cita dentro del párrafo (SEO) ---------- */
.servicios-intro p a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}
.servicios-intro p a:hover,
.servicios-intro p a:focus {
    color: #fff;
    text-decoration: underline;
}

/* ---------- IA: el párrafo de apertura se reparte en tres columnas ---------- */
.servicios-intro .intro-columns {
    column-count: 3;
    column-gap: 3rem;
}
.servicios-intro .intro-columns p {
    margin-bottom: 0;
}
.servicios-intro .intro-columns + a.underline {
    margin-top: 2rem;
}
@media (max-width: 991.98px) {
    .servicios-intro .intro-columns {
        column-count: 1;
    }
    .servicios-intro .intro-columns p {
        margin-bottom: 1.5rem;
    }
}

/* ---------- Blog: títulos de tarjeta legibles y altura pareja ---------- */
.blog section.list .row > [class*="col-"] {
    display: flex;
}
.blog section.list article {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1 1 auto;
    height: auto;
}
.blog section.list article h2 {
    font-size: 2.4rem;
    line-height: 1.2;
    margin-bottom: 1.2rem;
}
.blog section.list article p {
    flex: 1 1 auto;
}
.blog section.list article a.underline {
    align-self: flex-start;
}
.blog section.list article a.arrow {
    position: absolute;
    right: 3rem;
    bottom: 3rem;
    float: none;
}

/* El menú se pinta después y tapa ES. El selector queda por encima. */
header .language {
    z-index: 20;
}