/* Overrides propios. Nunca editar assets/vendor/css/style.css directamente
   (playbook §6) — todo cambio de marca/color o sección nueva va aquí, cargado
   despues del CSS del vendor. */

/* var(--primaryColor) sobre el fondo oscuro del footer (--darkblack,
   #0C0E2B): version mas clara del mismo azul, solo para este contexto
   oscuro (mismo patron que los 3 hermanos). Contraste real verificado con
   formula WCAG: #497AED da 4.75:1 sobre #0C0E2B. */
.footerarea__copyright__wrapper .footerarea__copyright__content p span {
    color: #497AED;
}

/* --secondaryColor: naranja del logo real, no unificado con --primaryColor
   (a diferencia de la paleta verde heredada de Giroservices que sustituye
   esta — ver nota completa en el bloque :root de mas abajo). */

/* Texto real pero oculto visualmente, para lectores de pantalla y para el
   audit "link-text" de Lighthouse SEO — que lee el texto del DOM
   (textContent), NO el aria-label (comprobado con Lighthouse local:
   aria-label no basta, hace falta texto real en el markup). */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

:root {
    /* Paleta real de Desatascos Rapidos, muestreada del logo real
       (assets/images/logo.png: azul #144AC9 y naranja #FF5A00 son, con
       diferencia, los dos colores dominantes del fichero — no inventados).
       Sustituye el verde bosque heredado sin cambios del codigo de
       Giroservices (#1D6E4C), que ademas quedaba mal con el logo real ya
       instalado (Task 1) y cuyo comentario original afirmaba ser "unico
       entre hermanos" sin comprobarlo — Giroservices SI usa ese mismo verde.
       Azul de primario (CTA/enlaces principales): contraste 7.36:1 sobre
       blanco, pasa AA sin tocarlo. Naranja de secundario (acentos): el tono
       crudo del logo (#FF5A00) solo da 3.13:1 sobre blanco — insuficiente
       para texto AA (4.5:1) en sitios donde se usa como color de texto
       (p.ej. .form-messege--error) — se oscurece a #CC4800 (mismo matiz,
       mas oscuro) hasta 4.67:1, mismo criterio de accesibilidad ya usado en
       las webs hermanas. Contraste verificado con formula WCAG real, no a
       ojo. */
    --primaryColor: #144AC9;
    --secondaryColor: #CC4800;
    /* version "r, g, b" de las mismas dos, para usarlas dentro de rgba()
       (p.ej. los iconos de servicio de abajo) sin duplicar el color a mano */
    --primaryColorRgb: 20, 74, 201;
    --secondaryColorRgb: 204, 72, 0;

    /* Redeclaradas aqui 2026-07-13: la purga de style.css (§4.6.2) elimino
       su bloque :root original completo, y estas 8 variables se seguian
       usando por todo el sitio (iconos de servicio, avatares de testimonios,
       texto legal del formulario) sin que PurgeCSS detectara que sus
       DECLARACIONES seguian haciendo falta (variables:true las purgo por
       error). Sintoma real: circulos de avatar blanco-sobre-blanco
       (invisibles) y contraste roto en varios textos — verificado con un
       barrido de contraste real (mismo metodo del playbook §5) tras un
       informe de Accesibilidad que bajo a 89. MISMOS valores que los
       .service__card__link de mas abajo (ya fijados en una ronda anterior,
       antes de que existiera esta purga) para --skycolor/--yellow1/
       --greencolor3, extendido ahora a --greencolor/--orange/--lightGrey3
       que no tenian precedente. El ratio de contraste es simetrico, asi que
       estos valores (>=4.5:1 sobre blanco) valen tanto para texto/icono
       sobre blanco como para texto blanco encima de estos como fondo. */
    --skycolor: #0277BD;
    --blue: #2864FF;
    --deepred: #DC164D;
    --greencolor: #1E7E34;
    --greencolor3: #1E7E34;
    --orange: #B65B0E;
    --yellow1: #8A6300;
    --lightGrey3: #5F6C76;
    --borderRadius3: 16px;
}

/* ---------------------------------------------------------------------
   icofont: el font-display:swap ya NO se redeclara aqui — la redeclaracion
   original la elimino PurgeCSS (fontFace:true) en la purga de 2026-07-13.
   Ahora vive directamente en el @font-face de icofont.min.css (fichero ya
   modificado por la excepcion de §6: purgado a los ~37 iconos usados y con
   src apuntando a icofont-subset.woff2, 6KB frente a los 526KB del
   original). Si se regenera icofont.min.css, conservar alli font-display y
   la url del subset.
--------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
   Hero: los dos botones son .default__button inline-block; el vendor solo
   separaba con margin-left (pensado para el texto original de la
   plantilla) y en movil, al envolver a una segunda linea, quedaban
   pegados. Los apilamos con gap explicito por debajo de 767px.
--------------------------------------------------------------------- */
@media (max-width: 767px) {
    .hreobannerarea__button__2 {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    .hreobannerarea__button__2 .default__button {
        width: 100%;
        max-width: 320px;
    }
}

/* ---------------------------------------------------------------------
   heading__underline: la barra de color usa z-index:-1 respecto al span.
   Sin un ancestro con su propio stacking context, esa barra queda pintada
   detras del fondo de color de la seccion (visible en vendor solo porque
   sus secciones no llevan background-color propio). Creamos aqui ese
   contexto en el wrapper para que la barra sí se vea sobre fondos tintados.
--------------------------------------------------------------------- */
.heading__underline {
    position: relative;
    z-index: 0;
}

/* ---------------------------------------------------------------------
   Hero: foto de fondo (fontanero trabajando) + degradado oscuro para que
   el texto blanco siga siendo legible. Imagen optimizada a 1920px/JPEG
   calidad 78 (playbook §4.1), unica peticion de imagen en el above-the-fold.
   <img> real (no background-image) para que Lighthouse/Chrome detecten
   fiablemente el elemento LCP — un background-image con degradado encima
   no siempre se detecta (playbook §4.1).
--------------------------------------------------------------------- */
.herobannerarea {
    position: relative;
    overflow: hidden;
}

.herobannerarea__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

/* <div> real DESPUES del <img> en el marcado, no ::before — un pseudo-elemento
   se pinta antes que los hijos reales aunque comparta z-index, así que el
   <img> acababa tapando el degradado en vez de al reves. Mismo patron que
   .service-hero__overlay, que sí pinta correctamente por ir despues del
   <img> en el DOM. */
.herobannerarea__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(rgba(10, 12, 40, 0.42), rgba(10, 12, 40, 0.55));
}

.herobannerarea .container {
    position: relative;
    z-index: 2;
}

/* El texto bajo los botones necesita algo de aire respecto al boton de arriba */
.hreobannerarea__button__2 + .herobannerarea__text {
    margin-top: 25px;
}

/* default__button--3 es "outline" con texto/borde var(--primaryColor) (azul),
   pensado para fondos claros. Sobre fondos oscuros (hero de home y de las
   paginas de servicio) se ve casi invisible, asi que aqui se sobreescribe a
   blanco solo en esos contextos. */
.herobannerarea .default__button--3,
.service-hero .default__button--3 {
    border-color: var(--whiteColor);
    color: var(--whiteColor);
}

.herobannerarea .default__button--3:hover,
.service-hero .default__button--3:hover {
    background-color: var(--whiteColor);
    color: var(--primaryColor);
}

/* ---------------------------------------------------------------------
   Topbar: telefono clicable + franja de urgencia 24h
--------------------------------------------------------------------- */
.topbar__left a {
    color: inherit;
    font-weight: 600;
}

.topbar__left .icofont-phone {
    color: var(--secondaryColor);
    margin-right: 4px;
}

/* ---------------------------------------------------------------------
   Nav: boton de llamada destacado junto al menu
--------------------------------------------------------------------- */
.headerarea__call__button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background-color: var(--secondaryColor);
    border: 1px solid var(--secondaryColor);
    border-radius: var(--borderRadius);
    color: var(--whiteColor) !important;
    font-weight: 600;
    white-space: nowrap;
}

.headerarea__call__button:hover {
    background-color: var(--whiteColor);
    color: var(--secondaryColor) !important;
}

/* ---------------------------------------------------------------------
   Logo: PNG del cliente con fondo transparente (helper site_logo() en
   functions.php), altura fija y ancho automatico para conservar la
   proporcion real del archivo.
--------------------------------------------------------------------- */
.site-logo {
    display: inline-flex;
    align-items: center;
}

.site-logo__image {
    /* max-width + height:auto (en vez de una altura fija) para que el
       navegador reescale conservando la proporcion real (via los atributos
       width/height del HTML) cuando la columna del header es mas estrecha
       que el ancho natural del logo — evita que "CastellonService" (mas
       largo que "BarnaService") desborde sobre el menu en breakpoints
       donde la columna del logo se reduce (p.ej. col-xl-3). */
    max-width: 100%;
    max-height: 42px;
    height: auto;
    width: auto;
    display: block;
}

@media (max-width: 400px) {
    .site-logo__image {
        max-height: 34px;
    }
}

/* ---------------------------------------------------------------------
   Hero: el template solo definia tamano/color para el <h2> de este bloque
   (herobannerarea__title__heading__2 h2); el h1 real (correcto para SEO,
   playbook §2.5) necesita las mismas reglas replicadas aqui.
--------------------------------------------------------------------- */
.herobannerarea__title .herobannerarea__title__heading__2 h1 {
    font-size: 60px;
    line-height: 72px;
    letter-spacing: 0.5px;
    color: var(--whiteColor);
    font-family: var(--headingFont);
    font-weight: 700;
}

@media (min-width: 992px) and (max-width: 1365px) {
    .herobannerarea__title .herobannerarea__title__heading__2 h1 {
        font-size: 50px;
        line-height: 62px;
    }
}

@media (max-width: 767px) {
    .herobannerarea__title .herobannerarea__title__heading__2 h1 {
        font-size: 30px;
        line-height: 40px;
    }
}

/* ---------------------------------------------------------------------
   Grid de servicios (sin equivalente en el template original, que es de
   cursos/LMS) — 8 tarjetas con icono icofont (SERVICE_PAGES), 4 por fila
--------------------------------------------------------------------- */
.services__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

@media (min-width: 992px) {
    .services__grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
    }
}

.service__card {
    background-color: var(--whiteColor);
    border: 1px solid var(--borderColor);
    border-radius: var(--borderRadius3);
    padding: 30px 18px;
    text-align: center;
    transition: var(--transition);
    box-shadow: 0 0 30px 6px rgba(95, 45, 237, 0.06);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.service__card:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    transform: translateY(-5px);
}

.service__card__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 26px;
}

/* Alternan --primaryColor/--secondaryColor de CADA sitio (antes eran 5
   colores arcoiris fijos en la plantilla, iguales en los 3 sitios hermanos
   pese a tener paletas de marca distintas — playbook, chat 2026-07-14). */
.service__card:nth-child(1) .service__card__icon { background-color: rgba(var(--primaryColorRgb), 0.12); color: var(--primaryColor); }
.service__card:nth-child(2) .service__card__icon { background-color: rgba(var(--secondaryColorRgb), 0.12); color: var(--secondaryColor); }
.service__card:nth-child(3) .service__card__icon { background-color: rgba(var(--primaryColorRgb), 0.12); color: var(--primaryColor); }
.service__card:nth-child(4) .service__card__icon { background-color: rgba(var(--secondaryColorRgb), 0.12); color: var(--secondaryColor); }
.service__card:nth-child(5) .service__card__icon { background-color: rgba(var(--primaryColorRgb), 0.12); color: var(--primaryColor); }

.service__card:nth-child(1):hover { border-color: var(--primaryColor); }
.service__card:nth-child(2):hover { border-color: var(--secondaryColor); }
.service__card:nth-child(3):hover { border-color: var(--primaryColor); }
.service__card:nth-child(4):hover { border-color: var(--secondaryColor); }
.service__card:nth-child(5):hover { border-color: var(--primaryColor); }

.service__card h3 {
    font-size: 18px;
    margin-bottom: 8px;
}

.service__card p {
    font-size: 14px;
    margin-bottom: 15px;
}

/* Unificado a var(--primaryColor) desde 2026-07-20 a peticion del usuario
   (antes: 5 colores arcoiris fijos de la plantilla, oscurecidos para
   contraste AA pero sin relacion con la paleta de marca — uno de ellos,
   #8A6300, era justo el tono "marron" que se pidio quitar). */
.service__card__link { color: var(--primaryColor); }

.service__card__link {
    font-weight: 600;
    margin-top: auto;
}

/* ---------------------------------------------------------------------
   "Por que elegirnos" — foto de fondo (tecnico trabajando bajo un
   fregadero) con degradado azul oscuro para que el titulo en blanco y las
   tarjetas (ya blancas, con su propia sombra) destaquen. Misma tecnica que
   el hero: imagen optimizada a 1920px/JPEG calidad 78 (playbook §4.1),
   referenciada solo desde CSS.
--------------------------------------------------------------------- */
.whyus-section {
    position: relative;
    /* why-us-2.* (2026-07-14): antes era la MISMA foto en los 3 sitios
       hermanos; renombrada (no solo sobrescrita) porque esta imagen se
       referencia desde CSS puro, sin el helper asset_url() de PHP que
       fuerza cache-busting con ?v= en el resto del sitio -- sin el cambio
       de nombre, Cloudflare seguiria sirviendo la version vieja durante su
       semana de cache aunque el fichero del origen ya fuera el nuevo. */
    background-image: linear-gradient(rgba(8, 20, 48, 0.42), rgba(8, 20, 48, 0.55)), url("../images/why-us-2.jpg");
    background-size: cover;
    background-position: center;
}

@supports (background-image: image-set(url("a.jpg") 1x)) {
    .whyus-section {
        background-image: linear-gradient(rgba(8, 20, 48, 0.42), rgba(8, 20, 48, 0.55)), image-set(url("../images/why-us-2.webp") type("image/webp"), url("../images/why-us-2.jpg") type("image/jpeg"));
    }
}

.whyus-section .section__title__heading h2 {
    color: var(--whiteColor);
}

/* mismas tarjetas que el grid de servicios (.service__card), en su propia
   rejilla de 4 columnas en PC / 2 en movil */
.trust__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

@media (min-width: 992px) {
    .trust__grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
    }
}

.trust__grid .service__card p {
    margin-bottom: 0;
}

/* ---------------------------------------------------------------------
   Zonas donde trabajamos — chips de localidades
--------------------------------------------------------------------- */
.coverage__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 25px;
}

.coverage__chip {
    padding: 8px 18px;
    border: 1px solid var(--borderColor2);
    border-radius: 30px;
    font-size: 14px;
    color: var(--contentColor);
}

.coverage__chip:hover {
    border-color: var(--primaryColor);
    color: var(--primaryColor);
}

.coverage__toggle__label {
    padding: 12px 28px;
    border: 1px solid var(--primaryColor);
    border-radius: var(--borderRadius);
    color: var(--primaryColor);
    font-weight: 600;
    justify-content: center;
}

.coverage__toggle__label::after {
    font-weight: 700;
}

.coverage__toggle__label:hover {
    background-color: var(--primaryColor);
    color: var(--whiteColor);
}

/* ---------------------------------------------------------------------
   Testimonios — carrusel con scroll-snap nativo (sin libreria JS de
   terceros: nada nuevo que descargar, funciona con swipe/trackpad aunque
   falle o tarde el JS diferido). assets/js/testimonial-carousel.js solo
   anade las flechas, progressive enhancement sobre el scroll nativo.
--------------------------------------------------------------------- */
.testimonial__carousel {
    display: flex;
    align-items: center;
    gap: 12px;
}

.testimonial__grid {
    display: flex;
    gap: 25px;
    overflow-x: auto;
    padding: 4px 4px 14px;
    margin: -4px -4px 0;
}

/* El snap se activa por JS (testimonial-carousel.js) DESPUES del load, no
   aqui: un scroll-snap-type "mandatory" presente en el primer layout obliga
   a Chrome a un ajuste de scroll antes del primer pintado, y Chrome deja de
   registrar candidatos de LCP en cuanto observa un scroll — resultado real:
   Lighthouse/PSI terminaba en NO_LCP ("Rendimiento: Error!") en toda pagina
   con este carrusel, con los 4 informes de PSI identicos aunque se
   optimizara todo lo demas. Verificado por biseccion A/B con Lighthouse
   local: misma pagina con snap = NO_LCP, sin snap = LCP normal. */
.testimonial__grid--snap {
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
}

.testimonial__card {
    background-color: var(--whiteColor);
    border: 1px solid var(--borderColor2);
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    flex: 0 0 82%;
    scroll-snap-align: start;
}

@media (min-width: 576px) {
    .testimonial__card {
        flex-basis: 47%;
    }
}

@media (min-width: 992px) {
    .testimonial__card {
        flex-basis: 31.5%;
    }
}

.testimonial__nav {
    display: none;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--borderColor2);
    background-color: var(--whiteColor);
    color: var(--primaryColor);
    cursor: pointer;
    transition: var(--transition);
}

.testimonial__nav:hover {
    background-color: var(--primaryColor);
    border-color: var(--primaryColor);
    color: var(--whiteColor);
}

.testimonial__nav:disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

@media (min-width: 768px) {
    .testimonial__nav {
        display: flex;
    }
}

.testimonial__card__header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.testimonial__card__avatar {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--whiteColor);
    font-weight: 600;
    font-size: 18px;
}

.testimonial__card:nth-child(1) .testimonial__card__avatar { background-color: var(--skycolor); }
.testimonial__card:nth-child(2) .testimonial__card__avatar { background-color: var(--blue); }
.testimonial__card:nth-child(3) .testimonial__card__avatar { background-color: var(--deepred); }
.testimonial__card:nth-child(4) .testimonial__card__avatar { background-color: var(--greencolor); }
.testimonial__card:nth-child(5) .testimonial__card__avatar { background-color: var(--orange); }

.testimonial__card__name {
    font-weight: 600;
    margin-bottom: 2px;
    font-size: 15px;
}

.testimonial__card__place {
    font-size: 13px;
    /* var(--lightGrey), #7B8696, da 3.69:1 sobre blanco — falla AA (4.5:1).
       var(--contentColor) es el mismo tono de texto secundario que ya usa
       el resto del sitio para parrafos, y pasa 5.4:1. */
    color: var(--contentColor);
    margin-bottom: 0;
}

.testimonial__card__stars {
    color: #FBBC04;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

/* Enlace dentro de un parrafo de texto corrido: solo el color no basta para
   distinguirlo (audit "link-in-text-block") — el resto de enlaces del sitio
   (menu, footer, chips de zonas) no llevan subrayado porque no estan
   incrustados en un bloque de texto, asi que el ajuste se limita a este
   caso en vez de subrayar todos los enlaces del sitio. */
.contact__form__legal a {
    text-decoration: underline;
}

/* ---------------------------------------------------------------------
   Footer: "Horario" no es un titulo de seccion, es una etiqueta corta -
   usa <p> en vez de <h6> para no saltar niveles de encabezado (h3 -> h6),
   replicando aqui el estilo que el vendor definia para .footer__bottom__content h6
--------------------------------------------------------------------- */
.footer__bottom__content__title {
    font-size: 18px;
    font-weight: 500;
    line-height: 29px;
    color: var(--whiteColor);
    text-transform: uppercase;
    margin-bottom: 0;
}

/* ---------------------------------------------------------------------
   Desplegable generico sin JS (checkbox + label): usado en "Legal" del
   footer y en "Zonas donde trabajamos" (playbook §7)
--------------------------------------------------------------------- */
.toggle__checkbox {
    display: none;
}

.toggle__label {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.toggle__label::after {
    content: "+";
    font-weight: 700;
}

.toggle__checkbox:checked ~ .toggle__label::after {
    content: "\2212";
}

.toggle__content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.toggle__checkbox:checked ~ .toggle__content {
    max-height: 700px;
}

/* Footer "Zonas": mismo patron checkbox+label, pero sobre fondo oscuro y
   con un desplegable de las localidades restantes en vez de un link a una
   pagina "ver todas" aparte. */
.footer__zones__toggle__label {
    color: var(--darkgray);
    font-size: 16px;
    margin-top: 4px;
}

.footer__zones__toggle__label:hover {
    color: var(--primaryColor);
}

/* ---------------------------------------------------------------------
   Contacto siempre a la vista (mismo patron que castellonservice.com):
   barra fija en movil, mitad llamada y mitad WhatsApp, y boton flotante de
   WhatsApp en escritorio. Nunca los dos a la vez.
   Verde WhatsApp oscuro #075E54: el verde de marca #25D366 con texto blanco
   no llega a 4,5:1.
--------------------------------------------------------------------- */
.mobile__contact__bar {
    display: none;
}

.whatsapp__float {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 999;
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #075E54;
    color: var(--whiteColor);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.whatsapp__float:hover,
.whatsapp__float:focus {
    background-color: #044A42;
    color: var(--whiteColor);
}

.whatsapp__float svg {
    width: 28px;
    height: 28px;
}

@media (max-width: 767px) {
    .whatsapp__float {
        display: none;
    }

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

    .mobile__contact__bar a,
    .mobile__contact__bar a:hover {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        padding: 14px 10px;
        color: var(--whiteColor);
        font-weight: 600;
        font-size: 16px;
        white-space: nowrap;
    }

    .mobile__contact__bar svg {
        flex-shrink: 0;
    }

    .mobile__contact__bar__call {
        background-color: var(--secondaryColor);
    }

    .mobile__contact__bar__whatsapp {
        background-color: #075E54;
    }

    body {
        padding-bottom: 58px;
    }
}

/* ---------------------------------------------------------------------
   Formulario de contacto (reutiliza .contact__input__wraper del vendor)
--------------------------------------------------------------------- */
.visually__hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.contact__form__honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.contact__form__card {
    background-color: var(--whiteColor);
    border: 1px solid rgba(126, 133, 139, 0.14);
    border-radius: var(--borderRadius);
    box-shadow: rgba(15, 23, 42, 0.06) 0px 10px 40px 0px;
    padding: 45px;
}

@media (max-width: 767px) {
    .contact__form__card {
        padding: 25px;
    }
}

.contact__form__card textarea#contact-message {
    min-height: 160px;
}

.contact__form__legal {
    font-size: 13px;
    color: var(--lightGrey3);
    margin-top: 10px;
}

.form-messege--ok {
    color: var(--greencolor3);
    font-weight: 600;
}

.form-messege--error {
    color: var(--secondaryColor);
    font-weight: 600;
}

.contact__form__success {
    text-align: center;
    padding: 30px 10px;
}

.contact__form__success__icon {
    font-size: 56px;
    line-height: 1;
    color: var(--greencolor3);
    margin-bottom: 20px;
}

.contact__form__success h3 {
    margin-bottom: 12px;
}

.contact__form__success p {
    color: var(--lightGrey3);
    max-width: 420px;
    margin: 0 auto;
}

/* ---------------------------------------------------------------------
   Paginas de servicio (/desatascos/, /fontaneria/...) — hero propio en
   degradado de marca (sin foto): evita repetir la misma imagen de fontanero
   en la pagina de electricistas/cerrajeria/persianas, y no suma peso de
   imagen en paginas que no son la home (playbook 4.1).
--------------------------------------------------------------------- */
.service-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--primaryColor) 0%, #0b1f4d 100%);
    padding-top: 60px;
    padding-bottom: 70px;
}

/* Variante con foto propia: <img> real (no background-image) para que
   Lighthouse/Chrome detecten fiablemente el elemento LCP — mismo motivo que
   el hero de home. El degradado de marca es un overlay aparte para no
   chocar con los pseudo-elementos decorativos de .service-hero (abajo). */
.service-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

.service-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.service-hero--photo .service-hero__overlay {
    background: linear-gradient(135deg, rgba(40, 100, 255, 0.78), rgba(11, 31, 77, 0.85));
}

.service-hero::before,
.service-hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.35;
    pointer-events: none;
}

.service-hero::before {
    width: 360px;
    height: 360px;
    background: var(--secondaryColor);
    top: -120px;
    right: -80px;
}

.service-hero::after {
    width: 300px;
    height: 300px;
    background: var(--skycolor);
    bottom: -140px;
    left: -60px;
}

.service-hero .container {
    position: relative;
    z-index: 1;
}

.service-breadcrumb {
    margin-bottom: 18px;
}

.service-breadcrumb ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 14px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.service-breadcrumb a {
    color: rgba(255, 255, 255, 0.75);
}

.service-breadcrumb a:hover {
    color: var(--whiteColor);
}

.service-breadcrumb li:not(:last-child)::after {
    content: "/";
    margin-left: 6px;
    color: rgba(255, 255, 255, 0.4);
}

.service-breadcrumb li[aria-current="page"] {
    color: var(--whiteColor);
    font-weight: 600;
}

.service-hero__title {
    color: var(--whiteColor);
    font-size: 46px;
    line-height: 1.2;
    font-weight: 700;
    margin-bottom: 18px;
}

@media (max-width: 767px) {
    .service-hero__title {
        font-size: 28px;
    }
}

.service-hero__subtitle {
    color: rgba(255, 255, 255, 0.85);
    font-size: 18px;
    max-width: 640px;
    margin: 0 auto 30px;
}

/* ---------------------------------------------------------------------
   "Cuando llamarnos" — lista de sintomas/situaciones, 2 columnas en PC
--------------------------------------------------------------------- */
.reasons__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px 30px;
    max-width: 900px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .reasons__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.reasons__grid li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 16px;
    color: var(--contentColor);
}

.reasons__grid li i {
    color: var(--greencolor3);
    font-size: 20px;
    margin-top: 3px;
    flex-shrink: 0;
}

/* ---------------------------------------------------------------------
   "Como trabajamos" — pasos numerados (mismo look que .service__card, con
   un numero en vez de icono)
--------------------------------------------------------------------- */
.process__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

@media (min-width: 992px) {
    .process__grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
    }
}

.process__step__number {
    width: 44px;
    height: 44px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--primaryColor);
    color: var(--whiteColor);
    font-weight: 700;
    font-size: 18px;
}

/* ---------------------------------------------------------------------
   FAQ — acordeon sin JS (mismo patron checkbox+label que Legal/Zonas)
--------------------------------------------------------------------- */
.faq__list {
    max-width: 820px;
    margin: 0 auto;
}

.faq__item {
    border-bottom: 1px solid var(--borderColor2);
}

.faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 20px 0;
    font-weight: 600;
    font-size: 17px;
    color: var(--headingColor);
}

.faq__question::after {
    content: "+";
    flex-shrink: 0;
    font-weight: 700;
    font-size: 20px;
    color: var(--primaryColor);
}

.faq__item .toggle__checkbox:checked ~ .faq__question::after {
    content: "\2212";
}

.faq__item .toggle__content .faq__answer {
    padding: 0 0 20px;
    color: var(--contentColor);
}

/* ---------------------------------------------------------------------
   Enlace de vuelta a "todos los servicios" / cruce entre paginas de
   servicio, y bloque de cobertura compacto (paginas de servicio, no
   repite el acordeon completo que ya esta en la home)
--------------------------------------------------------------------- */
.service-related__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

@media (min-width: 768px) {
    .service-related__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.service-related__grid a {
    display: block;
    padding: 14px 18px;
    text-align: center;
    border: 1px solid var(--borderColor2);
    border-radius: var(--borderRadius);
    color: var(--headingColor);
    font-weight: 600;
    transition: var(--transition);
}

.service-related__grid a:hover {
    border-color: var(--primaryColor);
    color: var(--primaryColor);
}

/* ---------------------------------------------------------------------
   mobile-aside-button/close eran <a> sin destino real (href="#" o sin
   href): semanticamente son botones, no enlaces (playbook §5). Al pasarlos
   a <button>, resetear los estilos por defecto del navegador para que se
   vean igual que antes.
--------------------------------------------------------------------- */
.mobile-aside-button,
.mobile-aside-close {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    cursor: pointer;
}

/* ---------------------------------------------------------------------
   Paginas legales (aviso, privacidad, cookies, accesibilidad): prosa
   simple, ancho de linea legible, sin componentes nuevos.
--------------------------------------------------------------------- */
.legal-content {
    max-width: 780px;
    margin: 0 auto;
}

.legal-content h2 {
    font-size: 24px;
    margin-top: 40px;
    margin-bottom: 14px;
}

.legal-content h2:first-child {
    margin-top: 0;
}

.legal-content p,
.legal-content li {
    color: var(--contentColor);
    line-height: 1.7;
    margin-bottom: 14px;
}

.legal-content ul,
.legal-content ol {
    padding-left: 20px;
}

.legal-content h3 {
    font-size: 19px;
    margin-top: 28px;
    margin-bottom: 10px;
    color: var(--headingColor);
}

/* Aviso de seguridad dentro de una entrada del blog (p.ej. productos quimicos) —
   mismo ancho que .legal-content, tratamiento visual distinto para que
   destaque del resto de la prosa sin ser un componente nuevo. */

.legal-content strong {
    color: var(--headingColor);
}


/* ---------------------------------------------------------------------
   Ritmo vertical compacto y listas en tarjetas (15-9-2026, a peticion del
   propietario: "los textos estan muy separados y hay mucho scroll").
   Medido antes en /desatascos-valls/: 7.480 px de alto a 1280 y 10.929 px
   a 375. El vendor daba 100/80 px por seccion y, bajo cada titulo, 50 px de
   padding MAS 40 px de margen del .section__title: 90 px entre un h2 y su
   contenido. Va al final del fichero para ganar a las reglas de arriba.
--------------------------------------------------------------------- */
.sp_top_100 { padding-top: 64px; }
.sp_bottom_100 { padding-bottom: 64px; }
.sp_top_80 { padding-top: 56px; }
.sp_bottom_80 { padding-bottom: 56px; }
.sp_bottom_60 { padding-bottom: 32px; }
.sp_bottom_50 { padding-bottom: 28px; }

.section__title.sp_bottom_50 { margin-bottom: 0; }
.section__title p { margin: 12px auto 0; max-width: 760px; }

.section__title .section__title__heading h2 {
    font-size: 32px;
    line-height: 1.25;
}

/* Parrafos largos de las paginas de localidad y tecnicas: iban centrados a
   18 px en una columna ancha; centrado se lee mal a partir de 3 lineas. */
.col-lg-9.text-center > p[style] {
    font-size: 16px !important;
    line-height: 1.7;
    text-align: left;
    margin-bottom: 0;
}

.service-hero {
    padding-top: 44px;
    padding-bottom: 48px;
}

.service-hero__title {
    font-size: 40px;
    margin-bottom: 12px;
}

.service-hero__subtitle {
    font-size: 17px;
    margin-bottom: 22px;
}

.service__card {
    padding: 24px 18px;
}

.service__card__icon {
    width: 56px;
    height: 56px;
    margin-bottom: 14px;
    font-size: 24px;
}

/* "Situaciones habituales", "Senales" y demas listas: tarjetas, con el mismo
   borde, radio y sombra que .service__card para que casen con el resto. */
.reasons__grid {
    max-width: none;
    gap: 16px;
    padding: 0;
    list-style: none;
}

@media (min-width: 992px) {
    .reasons__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.reasons__grid li {
    align-items: flex-start;
    gap: 14px;
    padding: 18px;
    font-size: 15px;
    line-height: 1.55;
    background-color: var(--whiteColor);
    border: 1px solid var(--borderColor);
    border-radius: var(--borderRadius3);
    box-shadow: 0 0 30px 6px rgba(95, 45, 237, 0.06);
}

.reasons__grid li i {
    width: 36px;
    height: 36px;
    margin-top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 18px;
    color: var(--primaryColor);
    background-color: rgba(var(--primaryColorRgb), 0.12);
}

.faq__question { padding: 16px 0; }

.contact__form__card { padding: 32px; }
.contact__form__card textarea#contact-message { min-height: 120px; }

@media (max-width: 767px) {
    .sp_top_100 { padding-top: 44px; }
    .sp_bottom_100 { padding-bottom: 44px; }
    .sp_top_80 { padding-top: 40px; }
    .sp_bottom_80 { padding-bottom: 40px; }
    .sp_bottom_60 { padding-bottom: 24px; }
    .sp_bottom_50 { padding-bottom: 18px; }

    .section__title .section__title__heading h2 {
        font-size: 26px;
        line-height: 1.25;
    }

    .service-hero {
        padding-top: 32px;
        padding-bottom: 36px;
    }

    .service-hero__title { font-size: 26px; }
    .service-hero__subtitle { font-size: 15px; }

    .contact__form__card { padding: 20px; }
}

/* Movil: las tarjetas con icono a una columna y el icono a la izquierda. A
   dos columnas en 375 px cada tarjeta quedaba estrecha y altisima ("Por que
   Valls es distinta" medía 1.361 px). Las de opiniones no llevan icono y no
   se tocan. */
@media (max-width: 575px) {
    .trust__grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .trust__grid .service__card:has(> .service__card__icon) {
        display: grid;
        grid-template-columns: 48px 1fr;
        column-gap: 14px;
        align-items: start;
        padding: 16px;
        text-align: left;
    }

    .trust__grid .service__card:has(> .service__card__icon) > .service__card__icon {
        grid-row: 1 / span 3;
        width: 48px;
        height: 48px;
        margin: 0;
        font-size: 20px;
    }

    .trust__grid .service__card:has(> .service__card__icon) > :not(.service__card__icon) {
        grid-column: 2;
    }

    .trust__grid .service__card h3 { margin-bottom: 4px; }
}

/* Iconos de tarjeta: las reglas de arriba solo coloreaban hasta la 5.a
   tarjeta; con los 8 servicios de la portada, de la 6.a a la 8.a salia el
   icono sin su circulo. Se alterna por par/impar, igual que antes. */
.service__card:nth-child(odd) .service__card__icon { background-color: rgba(var(--primaryColorRgb), 0.12); color: var(--primaryColor); }
.service__card:nth-child(even) .service__card__icon { background-color: rgba(var(--secondaryColorRgb), 0.12); color: var(--secondaryColor); }

/* Movil: enlaces a otros servicios y pie mas compactos. Medido en
   /desatascos-valls/ a 375 px: la rejilla de otros servicios media 457 px y
   el pie 1.436 px. */
@media (max-width: 767px) {
    .service-related__grid { gap: 10px; }

    .service-related__grid a {
        padding: 10px 8px;
        font-size: 14px;
        line-height: 1.3;
    }

    .footerarea .footerarea__wrapper {
        padding: 40px 0 16px;
    }

    .footerarea .footerarea__list ul {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 16px;
    }
}

/* ---------------------------------------------------------------------
   Reseñas de las paginas de localidad (15-9-2026): 4 tarjetas en vez de 2,
   que en PC dejaban media fila vacia. 4 por fila en PC y 2 en tableta; en
   movil, fila deslizable con la siguiente tarjeta asomando, para no alargar
   la pagina con 4 tarjetas apiladas. Mismo borde, radio y sombra que
   .service__card para que casen con el resto de tarjetas.
--------------------------------------------------------------------- */
.reviews__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

@media (min-width: 992px) {
    .reviews__grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
    }
}

.reviews__grid .testimonial__card {
    border: 1px solid var(--borderColor);
    border-radius: var(--borderRadius3);
    box-shadow: 0 0 30px 6px rgba(95, 45, 237, 0.06);
    padding: 20px;
}

.reviews__grid .testimonial__card p:last-child {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 0;
}

@media (max-width: 575px) {
    .reviews__grid {
        display: flex;
        gap: 14px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 8px;
        margin-right: -12px;
    }

    .reviews__grid .testimonial__card {
        flex: 0 0 85%;
        scroll-snap-align: start;
    }
}

/* Los .sr-only de cada reseña van en position:absolute. Sin un ancestro
   posicionado, su bloque contenedor quedaba fuera del overflow de la fila
   deslizable y los de las tarjetas 3.a y 4.a (x ~ 980 px) ensanchaban la
   pagina a 988 px en movil. Con la fila posicionada, quedan recortados en
   ella. */
.reviews__grid {
    position: relative;
}

/* Mismo fallo en el carrusel de la portada (medido: 965 px de ancho en movil):
   su pista tampoco esta posicionada. Se posiciona cada tarjeta y no la pista,
   para no cambiar el offsetParent de las tarjetas, que el carrusel usa. */
.testimonial__card {
    position: relative;
}