/* ============================================================
   MUROS Y EXCAVACIONES ROJAS — Sistema de diseño
   ============================================================ */

:root {
    /* Paleta del manual de marca (identidad v3, nov. 2026): Rojo ROJAS #C40107, Antracita #202224,
       Blanco piedra #F3F1EC y blanco. Proporción aproximada 60 % piedra/blanco, 30 % antracita, 10 % rojo. */
    --color-dark: #202224; /* antracita */
    --color-dark-2: #2C2E31;
    --color-dark-3: #3A3C40;
    --color-ink: #202224; /* texto que se lee (tinta = antracita): 14:1 sobre piedra */
    --color-stone: #5C5C5C; /* solo notas secundarias */
    --color-stone-light: #A9A9A9;
    --color-bg: #F3F1EC; /* blanco piedra */
    --color-bg-alt: #EAE7E0;
    --color-white: #FFFFFF;
    --color-accent: #C40107;
    --color-accent-dark: #8E0005; /* rojo hundido */
    /* Rojo más claro SOLO para texto e iconos sobre fondo oscuro (el rojo de marca no llega al contraste mínimo sobre negro) */
    --color-accent-on-dark: #FF6B6F;
    --color-exito: #1F6B41; /* verde oscurecido: 5,9:1 sobre el fondo #EAF7ED de la caja de éxito (antes 3,8:1) */
    --color-borde: #D9D6CF;
    /* Borde de campos de formulario (borde-control del manual): 4,6:1 sobre blanco (WCAG 1.4.11). */
    --color-borde-campo: #7A7772;

    /* Compatibilidad con nombres antiguos usados en algunos estilos */
    --color-primario: var(--color-accent);
    --color-secundario: var(--color-dark);
    --color-texto: var(--color-stone);
    --color-fondo: var(--color-bg);

    --font-titulos: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    --font-cuerpo: 'Inter', 'Helvetica Neue', Arial, sans-serif;

    --sombra-suave: 0 4px 20px rgba(32, 34, 36, 0.07);
    --sombra-hover: 0 15px 35px rgba(32, 34, 36, 0.16);
    --radio: 4px; /* radio-2: máximo del manual para tarjetas */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
    overflow-x: hidden;
}

body {
    background-color: var(--color-bg);
    color: var(--color-ink);
    line-height: 1.65;
    font-family: var(--font-cuerpo);
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}

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

a {
    color: inherit;
}

/* --- Tipografía Global --- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-titulos);
    font-weight: 600;
    color: var(--color-dark);
    line-height: 1.15;
    letter-spacing: 0.3px;
}
/* Manual de marca: títulos en Barlow Condensed Bold; SemiBold para subtítulos (h3 en adelante) */
h1, h2 { font-weight: 700; }

/* Manual de marca: menú y botones en Inter 600 */
.navbar .nav-links a,
.cta-button,
.cta-button-link {
    font-family: var(--font-cuerpo);
    font-weight: 600;
    letter-spacing: 0;
}

body, p, a, li, label, input, textarea, select {
    font-family: var(--font-cuerpo);
}

/* Sin color fijo: <p> hereda del contenedor, para que las secciones
   oscuras (pie, CTA final, bloque de contacto) no reciban gris de fondo claro.
   En fondo claro hereda --color-stone desde body. */

.container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
}

.section-title {
    font-size: clamp(1.9rem, 3.5vw, 2.6rem);
    color: var(--color-dark);
    margin-bottom: 16px;
    position: relative;
    display: block;
    width: 100%;
    text-align: center;
}
.section-title::after {
    content: '';
    display: block;
    margin: 18px auto 0 auto;
    width: 56px;
    height: 3px;
    background-color: var(--color-accent);
}
.section-eyebrow {
    display: block;
    text-align: center;
    color: var(--color-accent);
    font-family: var(--font-titulos);
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-size: 0.85rem;
    margin-bottom: 10px;
}
.section-intro {
    max-width: 640px;
    margin: 0 auto 50px auto;
    text-align: center;
    font-size: 1.05rem;
}

.page-content {
    padding-block: 80px; /* solo vertical: conserva el margen lateral de .container en móvil */
}

/* Saltar al contenido: fuera de pantalla hasta recibir el foco del teclado */
.skip-link {
    position: absolute;
    left: 16px;
    top: -100px;
    z-index: 2000;
    background-color: var(--color-dark);
    color: var(--color-white);
    border: 2px solid var(--color-accent-on-dark);
    border-radius: 2px;
    padding: 12px 18px;
    font-family: var(--font-titulos);
    text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* ============================================================
   NAVBAR
   ============================================================ */
/* Fija y superpuesta a la cabecera oscura (hero / page-header) de cada página */
.navbar {
    background-color: transparent;
    box-shadow: none;
    padding: 22px 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transition: background-color 0.35s ease, box-shadow 0.35s ease, padding 0.35s ease;
}
.navbar-scrolled {
    background-color: var(--color-dark);
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    padding: 7px 0;
}
/* Páginas sin cabecera oscura: barra con fondo sólido desde el principio */
.navbar.navbar-solid {
    background-color: var(--color-dark);
}
.navbar-solid ~ .page-content {
    padding-top: 150px;
}
.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    gap: 20px;
}
.navbar .logo {
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.navbar-right {
    display: flex;
    align-items: center;
    gap: 24px;
}
/* Logo oficial nuevo (marca/logos, 21-10-2026), versiones SIN la línea de servicios (a tamaño de barra no se
   leía): en ordenador el horizontal en negativo (excavadora + R + ROJAS), a 56px de alto ≈ 326px de ancho; en
   móvil (≤600px, ver <picture>) la firma, porque el horizontal no cabe junto al botón de llamar.
   Los archivos se usan tal cual: no redibujar ni recolorear. */
.navbar .logo picture { display: block; }
.navbar .logo-img {
    height: 56px; /* manual: 44-56 px de alto */
    width: auto;
    transform-origin: left center;
    transition: transform 0.35s ease;
}
.navbar-scrolled .logo-img {
    transform: scale(0.821);
}
.navbar .nav-links {
    list-style: none;
    display: flex;
    align-items: center;
}
.navbar .nav-links li {
    margin-left: 30px;
}
.navbar .nav-links a {
    text-decoration: none;
    color: var(--color-white);
    font-size: 0.92rem;
    padding-bottom: 6px;
    position: relative;
    transition: color 0.25s ease;
}
.navbar .nav-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.3s ease;
}
.navbar .nav-links a:hover::after,
.navbar .nav-links a.active::after {
    transform: scaleX(1);
}
.navbar .nav-links a.active,
.navbar .nav-links a:hover {
    color: var(--color-white);
}
.navbar .nav-cta {
    background-color: var(--color-accent);
    color: var(--color-white) !important;
    padding: 10px 20px;
    border-radius: 2px;
}
.navbar .nav-cta::after { display: none; }
.navbar .nav-cta:hover { background-color: var(--color-accent-dark); }
.navbar .nav-phone { white-space: nowrap; font-weight: 600; }
.navbar .nav-phone::after { display: none; }
.navbar .nav-phone i { color: var(--color-accent-on-dark); margin-right: 4px; }
/* Escritorio ancho: llamar es la vía preferida, así que el teléfono es el botón rojo
   y "Presupuesto" queda como botón secundario con borde (03-11-2026).
   En móvil y tablet (≤1080px) no cambia: ahí manda el botón .nav-call. */
@media (min-width: 1081px) {
    .navbar .nav-phone {
        background-color: var(--color-accent);
        color: var(--color-white) !important;
        padding: 10px 18px;
        border-radius: 2px;
        transition: background-color 0.25s ease;
    }
    .navbar .nav-phone i { color: var(--color-white); }
    .navbar .nav-phone:hover { background-color: var(--color-accent-dark); }
    .navbar .nav-cta {
        background-color: transparent;
        box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.6);
    }
    .navbar .nav-cta:hover {
        background-color: rgba(255, 255, 255, 0.1);
        box-shadow: inset 0 0 0 1.5px var(--color-white);
    }
}
/* Entre la hamburguesa (≤900px) y ~1080px el menú no cabe en una fila con el
   teléfono; ahí se oculta y lo sustituye el botón .nav-call. */
@media (min-width: 901px) and (max-width: 1080px) {
    .navbar .nav-links li:has(.nav-phone) { display: none; }
}

/* Botón de llamada fuera del menú: llamar es la vía de contacto preferida,
   así que no puede quedar escondida tras la hamburguesa. */
.nav-call { display: none; }
@media (max-width: 1080px) {
    .nav-call {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 44px;
        min-width: 44px;
        padding: 0 16px;
        background-color: var(--color-accent);
        color: var(--color-white);
        border-radius: 2px;
        text-decoration: none;
        font-family: var(--font-titulos);
        font-weight: 500;
        font-size: 0.95rem;
        letter-spacing: 0.5px;
        white-space: nowrap;
        flex-shrink: 0;
        transition: background-color 0.25s ease;
    }
    .nav-call:hover { background-color: var(--color-accent-dark); }
}
/* Con el logo nuevo (339px) el menú no cabía en portátiles pequeños: ahí el logo baja a 50px de alto
   (≈265px) y los enlaces no se parten en dos líneas */
@media (min-width: 901px) and (max-width: 1240px) {
    .navbar .logo-img { height: 46px; }
    .navbar .nav-links a { white-space: nowrap; }
}
@media (min-width: 901px) and (max-width: 1000px) {
    .navbar .logo-img { height: 38px; }
}
/* Justo antes de la hamburguesa el menú ya iba justo (se salía 8px con el logo anterior) */
@media (min-width: 901px) and (max-width: 960px) {
    .navbar .logo-img { height: 33px; }
}
/* Con el menú en fila (901-1080px) solo cabe el icono */
@media (min-width: 901px) and (max-width: 1080px) {
    .nav-call { padding: 0; }
    .nav-call-text { display: none; }
}

/* Botón hamburguesa (móvil) */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1200;
    flex-shrink: 0;
}
.nav-toggle span {
    display: block;
    width: 26px;
    height: 2px;
    background-color: var(--color-white);
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.navbar.nav-open .nav-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.navbar.nav-open .nav-toggle span:nth-child(2) {
    opacity: 0;
}
.navbar.nav-open .nav-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ============================================================
   BOTONES
   ============================================================ */
.cta-button {
    background-color: var(--color-accent);
    color: var(--color-white);
    padding: 15px 34px;
    text-decoration: none;
    border-radius: 2px;
    transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
    display: inline-block;
    text-align: center;
}
.cta-button:hover {
    background-color: var(--color-accent-dark);
    color: var(--color-white);
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.18);
}
.cta-button.secondary {
    background-color: transparent;
    color: var(--color-white);
    border: 1px solid rgba(255,255,255,0.5);
}
.cta-button.secondary:hover {
    background-color: var(--color-white);
    color: var(--color-dark);
    border-color: var(--color-white);
}
.cta-button.on-light.secondary {
    color: var(--color-dark);
    border-color: var(--color-dark);
}
.cta-button.on-light.secondary:hover {
    background-color: var(--color-dark);
    color: var(--color-white);
}
/* Botón de envío de formularios (antes verde; ahora en el rojo de marca) */
.cta-button.verde-form {
    background-color: var(--color-accent);
    color: var(--color-white);
    padding: 14px 30px;
    border-radius: 4px;
}
.cta-button.verde-form:hover {
    background-color: var(--color-accent-dark);
    color: var(--color-white);
}
.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
}
.cta-buttons--izq { justify-content: flex-start; }
.service-cta-nota {
    margin-top: 30px;
    margin-bottom: 16px;
    color: var(--color-dark);
    font-weight: 600;
}
.cta-button-link {
    color: var(--color-accent);
    font-weight: 600;
    font-family: var(--font-titulos);
    text-decoration: none;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}
.cta-button-link::after {
    content: ' →';
    transition: transform 0.3s ease;
    display: inline-block;
}
.service-card:hover .cta-button-link::after {
    transform: translateX(5px);
}

/* ============================================================
   CABECERA DE PÁGINA (páginas interiores)
   ============================================================ */
.page-header {
    background-color: var(--color-dark);
    background-size: cover;
    background-position: center;
    color: var(--color-white);
    padding: 8rem 0 4rem 0;
    text-align: center;
    position: relative;
}
.page-header.page-header--photo {
    --fondo-foto: var(--foto-movil, var(--foto));
}
@media (min-width: 801px) {
    .page-header.page-header--photo { --fondo-foto: var(--foto); }
}
.page-header.page-header--photo::before {
    content: '';
    position: absolute;
    inset: 0;
    /* Velo para que el título blanco se lea; la foto ya no se multiplica con el fondo grafito (quedaba casi negra) */
    background: linear-gradient(180deg, rgba(32,34,36,0.55) 0%, rgba(32,34,36,0.7) 100%);
}
.page-header .container {
    position: relative;
    z-index: 2;
}
.page-header h1 {
    font-size: clamp(2.2rem, 5vw, 3.2rem);
    color: var(--color-white);
}
.page-header p {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.85);
    margin-top: 10px;
    text-transform: none;
}

/* Contenido páginas legales */
.legal-content {
    background-color: var(--color-white);
    padding: 45px;
    border-radius: var(--radio);
    box-shadow: var(--sombra-suave);
    max-width: 900px;
    margin: 0 auto;
}
.legal-content h2 {
    color: var(--color-dark);
    margin-top: 30px;
    margin-bottom: 15px;
    border-bottom: 2px solid var(--color-accent);
    padding-bottom: 8px;
    font-size: 1.3rem;
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content p, .legal-content li {
    margin-bottom: 15px;
    line-height: 1.75;
}
.legal-content ul {
    padding-left: 20px;
}
/* ============================================================
   HERO (Home)
   ============================================================ */
.hero {
    background-color: var(--color-dark);
    min-height: min(76vh, 800px);
    background-image: linear-gradient(180deg, rgba(32,34,36,0.55) 0%, rgba(32,34,36,0) 25%), radial-gradient(ellipse 75% 60% at 50% 52%, rgba(32,34,36,0.62) 0%, rgba(32,34,36,0.28) 100%), url('IMG/escollera-lajas-800.jpg');
    background-size: cover;
    background-position: center 30%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-white);
    padding: 140px 20px 60px 20px;
    position: relative;
}
@media (min-width: 801px) {
    .hero {
        background-image: linear-gradient(180deg, rgba(32,34,36,0.55) 0%, rgba(32,34,36,0) 25%), radial-gradient(ellipse 75% 60% at 50% 52%, rgba(32,34,36,0.62) 0%, rgba(32,34,36,0.28) 100%), url('IMG/escollera-lajas.jpg');
    }
}
/* Fotos en WebP (más ligeras, misma calidad). Solo en navegadores que lo
   entienden; los demás siguen con la JPG de las reglas de arriba. */
@supports (background-image: image-set(url("IMG/escollera-lajas-800.webp") type("image/webp"))) {
    .hero { background-image: linear-gradient(180deg, rgba(32,34,36,0.55) 0%, rgba(32,34,36,0) 25%), radial-gradient(ellipse 75% 60% at 50% 52%, rgba(32,34,36,0.62) 0%, rgba(32,34,36,0.28) 100%), url('IMG/escollera-lajas-800.webp'); }
    .page-header.page-header--photo { --fondo-foto: var(--foto-movil-webp, var(--foto-webp, var(--foto-movil, var(--foto)))); }
    @media (min-width: 801px) {
        .hero { background-image: linear-gradient(180deg, rgba(32,34,36,0.55) 0%, rgba(32,34,36,0) 25%), radial-gradient(ellipse 75% 60% at 50% 52%, rgba(32,34,36,0.62) 0%, rgba(32,34,36,0.28) 100%), url('IMG/escollera-lajas-1447.webp'); }
        .page-header.page-header--photo { --fondo-foto: var(--foto-webp, var(--foto)); }
    }
}
.hero-content {
    max-width: 780px;
    text-shadow: 0 2px 14px rgba(0,0,0,0.55); /* el velo es más ligero: el texto se apoya en la sombra */
}
.hero-content .cta-button { text-shadow: none; }
.hero .cta-button.secondary {
    background-color: var(--color-white);
    color: var(--color-dark);
    border-color: var(--color-white);
    min-height: 48px;
}
.hero .cta-button.secondary:hover {
    background-color: var(--color-bg-alt);
    color: var(--color-dark);
    border-color: var(--color-bg-alt);
}
.hero-eyebrow {
    display: inline-block;
    font-family: var(--font-titulos);
    letter-spacing: 3px;
    text-transform: uppercase;
    font-size: 0.85rem;
    color: var(--color-white);
    background-color: var(--color-accent);
    padding: 6px 14px;
    border-radius: 2px;
    margin-bottom: 18px;
}

@keyframes slideInUp {
    from { transform: translateY(40px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.hero h1.titulo-animado {
    font-size: clamp(2.4rem, 6vw, 4.4rem);
    color: var(--color-white);
    margin-bottom: 1.2rem;
    animation: slideInUp 0.9s ease-out 0.2s backwards;
    line-height: 1.08;
}
.hero p.subtitulo-animado {
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    margin-bottom: 1.6rem;
    animation: slideInUp 0.9s ease-out 0.4s backwards;
    text-transform: none;
    color: rgba(255, 255, 255, 0.88);
    font-family: var(--font-cuerpo);
}
.hero .cta-buttons {
    animation: none;
}
.hero-contact-note {
    margin: 14px auto 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
}
.hero-contact-note a {
    color: var(--color-white);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.trust-strip {
    background-color: var(--color-dark);
    border-top: 1px solid rgba(255,255,255,0.08);
}
.trust-strip .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    padding: 26px 20px;
}
.trust-item {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--color-white);
    font-family: var(--font-titulos);
    font-size: 0.95rem;
    letter-spacing: 0.4px;
}
.trust-item i {
    color: var(--color-accent-on-dark);
    font-size: 1.3rem;
}

/* ============================================================
   SERVICIOS
   ============================================================ */
.services-wrapper {
    background-color: transparent;
    padding: 90px 0;
}
.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 32px;
}
.service-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}
.service-card {
    background-color: var(--color-white);
    border-radius: var(--radio);
    overflow: hidden;
    box-shadow: var(--sombra-suave);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
}
.service-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--sombra-hover);
}
.service-card-image {
    --fondo-foto: var(--foto-tarjeta);
    height: 210px;
    background-size: cover;
    background-position: center;
    position: relative;
    transition: transform 0.5s ease;
    overflow: hidden;
}
.service-card:hover .service-card-image {
    transform: scale(1.06);
}
.service-card-content {
    padding: 30px 28px;
    position: relative;
}
.service-card-icon {
    position: absolute;
    top: -28px;
    right: 28px;
    background-color: var(--color-dark);
    border-radius: 50%;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 14px rgba(0,0,0,0.2);
    transition: background-color 0.3s ease, transform 0.3s ease;
}
.service-card:hover .service-card-icon {
    background-color: var(--color-accent);
    transform: scale(1.08);
}
.service-card-icon i {
    font-size: 1.5rem;
    color: var(--color-white);
}
.service-card-icon img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
}
.service-card h3, .service-card h2 {
    font-size: 1.45rem;
    color: var(--color-dark);
    margin-bottom: 12px;
    max-width: calc(100% - 40px);
}
.service-card p {
    margin-bottom: 22px;
}
.service-card-tags {
    display: block;
    font-family: var(--font-titulos);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--color-stone);
    margin-top: -14px;
    margin-bottom: 22px;
}

/* Portada: menos apariencia de catálogo genérico y más lectura de oficio. */
.services-wrapper--editorial { padding-block: 72px; }
.services-wrapper--editorial .section-eyebrow,
.services-wrapper--editorial .section-title,
.services-wrapper--editorial .section-intro { text-align: left; }
.services-wrapper--editorial .section-title::after { margin-inline: 0; }
.services-wrapper--editorial .section-intro { margin-left: 0; }
.services-wrapper--editorial .service-grid {
    display: block;
    border-top: 1px solid var(--color-dark);
}
.services-wrapper--editorial .service-card-link {
    border-bottom: 1px solid var(--color-borde);
}
.services-wrapper--editorial .service-card {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
    align-items: center;
    gap: clamp(40px, 6vw, 88px);
    padding: 42px 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}
.services-wrapper--editorial .service-card:hover { transform: none; box-shadow: none; }
.services-wrapper--editorial .service-card-image {
    height: clamp(280px, 31vw, 390px);
    border-radius: var(--radio);
}
.services-wrapper--editorial .service-card-link:nth-child(even) .service-card-image { order: 2; }
.services-wrapper--editorial .service-card-link:nth-child(even) .service-card-content { order: 1; }
.services-wrapper--editorial .service-card:hover .service-card-image { transform: scale(1.015); }
.services-wrapper--editorial .service-card-content { padding: 0; }
.services-wrapper--editorial .service-number {
    display: block;
    color: var(--color-accent);
    font-family: var(--font-titulos);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .18em;
    margin-bottom: 14px;
}
.services-wrapper--editorial .service-card-content .cta-button-link { display: inline-block; }
.services-wrapper--editorial .service-card-icon { display: none; }
.services-wrapper--editorial .service-card h3 {
    max-width: none;
    font-size: clamp(1.7rem, 3vw, 2.45rem);
    margin-bottom: 18px;
}
.services-wrapper--editorial .service-card p {
    max-width: 48ch;
    font-size: 1rem;
    line-height: 1.75;
}
.services-wrapper--editorial .service-summary-list {
    list-style: none;
    margin: 2px 0 24px;
    padding: 0;
}
.services-wrapper--editorial .service-summary-list li {
    position: relative;
    padding: 9px 0 9px 24px;
    border-top: 1px solid var(--color-borde);
    color: var(--color-ink);
    font-size: 1rem;
}
.services-wrapper--editorial .service-summary-list li:last-child { border-bottom: 1px solid var(--color-borde); }
.services-wrapper--editorial .service-summary-list li::before {
    content: '✓';
    position: absolute;
    left: 2px;
    color: var(--color-accent);
    font-weight: 700;
}


/* ============================================================
   POR QUÉ ELEGIRNOS
   ============================================================ */
.why-choose {
    padding: 90px 0;
}
.why-layout {
    display: flex;
    gap: 60px;
    align-items: center;
}
.why-image {
    flex: 1;
}
.why-image img {
    width: 100%;
    height: 100%;
    max-height: 480px;
    object-fit: cover;
    border-radius: var(--radio);
    box-shadow: var(--sombra-hover);
}
.why-text {
    flex: 1.15;
}
.why-text .section-eyebrow,
.why-text .section-title {
    text-align: left;
}
.why-text .section-title::after {
    margin: 18px 0 0 0;
}
.why-list {
    list-style: none;
    margin-top: 30px;
}
.why-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 0;
    padding: 20px 0;
    border-top: 1px solid var(--color-borde);
    transition: transform 0.25s ease;
}
.why-item:last-child { border-bottom: 1px solid var(--color-borde); }
.why-item:hover { transform: translateX(6px); }
.why-item i {
    color: var(--color-accent);
    width: 30px;
    min-width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 3px;
    font-size: 1.25rem;
    transition: transform 0.25s ease;
}
.why-item:hover i {
    transform: scale(1.08);
}
.why-item h4, .why-item h3 {
    font-size: 1.25rem;
    margin-bottom: 4px;
    font-weight: 700;
}
.why-item p {
    font-size: 1rem;
    margin-bottom: 0;
}

/* ============================================================
   PROCESO DE TRABAJO
   ============================================================ */
.process-section {
    background-color: var(--color-dark);
    padding: 90px 0;
}
.process-section .section-eyebrow {
    color: var(--color-accent-on-dark);
}
.process-section .section-title {
    color: var(--color-white);
}
.process-section .section-intro {
    color: var(--color-stone-light);
}
.process-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 20px;
    position: relative;
}
.process-step {
    text-align: center;
    position: relative;
    padding: 0 10px;
    border-left: 1px solid rgba(255,255,255,.2);
}
.process-step-number {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background-color: var(--color-dark);
    color: var(--color-white);
    font-family: var(--font-titulos);
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto;
    letter-spacing: .08em;
    border: 2px solid var(--color-stone-light);
    transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.process-step:hover .process-step-number {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    transform: scale(1.08);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.35);
}
.process-step h4, .process-step h3 {
    color: var(--color-white);
    font-size: 1.25rem;
    margin-bottom: 10px;
    font-weight: 700;
}
.process-step p {
    color: var(--color-stone-light);
    font-size: 1rem;
}

/* ============================================================
   PROYECTOS
   ============================================================ */
.projects-overview {
    padding: 90px 0;
    text-align: center;
}
.project-gallery {
    display: flex;
    justify-content: space-between;
    gap: 30px;
}
/* Galería de trabajos: cuatro columnas, dos en pantallas estrechas. */
.project-gallery.project-gallery--obras {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.project-gallery--obras .project-image { height: auto; aspect-ratio: 4 / 3; }
@media (max-width: 1024px) {
    .project-gallery.project-gallery--obras { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    /* Móvil: dos columnas para no encadenar fotos a ancho completo (antes, 1 columna) */
    .project-gallery.project-gallery--obras { grid-template-columns: 1fr 1fr; gap: 12px; }
    .project-gallery--obras .project-info { padding: 12px 12px 14px; }
    .project-gallery--obras .project-info h3,
    .project-gallery--obras .project-info h2 { font-size: 1rem; margin-bottom: 4px; }
    .project-gallery--obras .project-info p { font-size: 0.875rem; }
}
/* Página de Proyectos: obras agrupadas por servicio */
.obras-grupo + .obras-grupo { margin-top: 70px; }
.obras-grupo-titulo {
    font-size: clamp(1.5rem, 3vw, 2rem);
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--color-borde);
}
/* Obras sin ficha propia: solo foto, no son enlaces, así que no reaccionan al cursor */
.project-card--foto:hover { transform: none; }
.project-card--foto:hover .project-image img { transform: none; }
@media (max-width: 560px) { .obras-grupo + .obras-grupo { margin-top: 48px; } }
/* A diferencia de las tarjetas de Servicios (una eleccion entre tres),
   estas son la prueba del trabajo hecho: planas, sin sombra ni esquina
   redondeada, mas cercanas a una galeria editorial que a una tarjeta de
   producto. El filete rojo bajo la foto sustituye a la sombra como la
   marca de que la pieza es una unidad, y usa el rojo de marca en vez de
   decoracion generica. */
.project-card {
    flex-basis: 31%;
    background-color: var(--color-white);
    overflow: hidden;
    text-decoration: none;
    color: var(--color-ink);
    transition: transform 0.3s ease;
}
.project-card:hover {
    transform: translateY(-6px);
}
.project-image {
    overflow: hidden;
    height: 230px;
    position: relative;
}
.project-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease-out;
}
.project-image--acera img {
    object-position: 70% center;
}
.project-card:hover .project-image img {
    transform: scale(1.08);
}
.project-info {
    padding: 22px 24px 24px 24px;
    text-align: left;
    border-top: 2px solid var(--color-accent);
}
.project-info h3, .project-info h2 {
    color: var(--color-dark);
    font-size: 1.2rem;
    margin-bottom: 6px;
}
.project-info p {
    font-size: 0.85rem;
    color: var(--color-accent-dark);
    font-weight: 700;
    font-family: var(--font-titulos);
}

/* ============================================================
   CTA FINAL
   ============================================================ */
.final-cta {
    background-color: var(--color-dark);
    color: var(--color-white);
    padding: 78px 20px;
    text-align: center;
}
.final-cta h2 {
    color: var(--color-white);
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    margin-bottom: 18px;
}
.final-cta p {
    font-size: 1.05rem;
    color: var(--color-stone-light);
    max-width: 650px;
    margin: 0 auto 32px auto;
}
.final-cta .cta-button.secondary {
    color: var(--color-white);
    border-color: var(--color-white);
}
.final-cta .cta-button.secondary:hover {
    background-color: var(--color-white);
    color: var(--color-dark);
    border-color: var(--color-white);
}

/* ============================================================
   TARJETAS DE SERVICIO — PÁGINA DETALLE
   ============================================================ */
.service-title {
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    color: var(--color-dark);
    margin-bottom: 15px;
}
.service-intro {
    font-size: 1.15rem;
    color: var(--color-ink);
    margin-bottom: 25px;
    text-transform: none;
}
.service-detail-text h3, .service-detail-text h2 {
    font-size: 1.3rem;
    color: var(--color-dark);
    margin-top: 30px;
    margin-bottom: 15px;
    border-bottom: 2px solid var(--color-accent);
    padding-bottom: 8px;
    display: inline-block;
}
.service-list {
    list-style: none;
    padding-left: 0;
    margin-top: 10px;
}
.service-list li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 12px;
}
.service-list li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-accent-dark);
    font-weight: bold;
}

/* Servicios (servicios.html): un bloque por servicio, la foto alterna de lado. */
.servicios-bloques {
    display: flex;
    flex-direction: column;
    gap: 90px;
    padding-bottom: 60px;
}
.service-jump-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 48px;
}
.service-jump-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 9px 16px;
    border: 1px solid var(--color-stone);
    border-radius: 2px;
    color: var(--color-dark);
    font-weight: 600;
    text-decoration: none;
}
.service-jump-links a:hover,
.service-jump-links a:focus-visible {
    background: var(--color-dark);
    color: var(--color-white);
}
.servicio-bloque { scroll-margin-top: 110px; }
.servicio-bloque {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 56px;
    align-items: center;
}
.servicio-bloque:nth-child(even) .servicio-bloque-fotos { order: 2; }
.servicio-bloque-fotos {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.servicio-bloque-fotos img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radio);
    object-fit: cover;
}
.servicio-bloque-principal { aspect-ratio: 4 / 3; }
.servicio-bloque-miniaturas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.servicio-bloque-miniaturas img { aspect-ratio: 4 / 3; }
.servicio-bloque-texto h2 {
    font-size: clamp(1.7rem, 3vw, 2.3rem);
    color: var(--color-dark);
    line-height: 1.15;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--color-accent);
    text-wrap: balance;
}
.servicio-bloque-texto p { margin-bottom: 18px; max-width: 58ch; }
.servicio-bloque-texto .service-list { margin-bottom: 28px; }

@media (max-width: 860px) {
    .servicios-bloques { gap: 64px; }
    .servicio-bloque { grid-template-columns: 1fr; gap: 20px; }
    .servicio-bloque-texto { display: contents; }
    .servicio-bloque-texto h2 { grid-row: 1; margin-bottom: 0; }
    .servicio-bloque-fotos { grid-row: 2; }
    .servicio-bloque-texto p, .servicio-bloque-texto .service-list { margin-bottom: 0; }
    .servicio-bloque-texto .cta-button { justify-self: start; }
    .servicio-bloque:nth-child(even) .servicio-bloque-fotos { order: 0; }
}

.service-detail-page {
    display: flex;
    gap: 50px;
}
.service-guidance { max-width: 800px; margin: 40px auto; }
/* Párrafos de unas 70 letras por línea como máximo: se leen mejor */
.service-detail-text p, .project-text p, .why-text p, .qs-text-col p { max-width: 36rem; }
.page-header p, .hero p.subtitulo-animado, .process-step p { max-width: 36rem; margin-left: auto; margin-right: auto; }
.service-guidance a { text-decoration: underline; text-underline-offset: 3px; }
.service-detail-page > .service-detail-text { flex: 1.3; }
.service-detail-page > .service-detail-gallery {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
/* Foto de las páginas de servicio en ordenador: entera y a su tamaño, sin estirarla
   a la altura del texto (se veía pixelada). Acompaña al texto al bajar. */
.service-detail-page > .service-detail-gallery--desktop { align-self: flex-start; position: sticky; top: 110px; }
.service-detail-gallery--desktop .gallery-image { height: auto; }
.service-detail-gallery--desktop .gallery-image img { height: auto; display: block; }
.service-detail-gallery .gallery-image {
    border-radius: var(--radio);
    overflow: hidden;
    box-shadow: var(--sombra-suave);
}
.service-detail-gallery .gallery-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================================================
   CARRUSELES
   ============================================================ */
.carousel-wrapper {
    position: relative;
    max-width: 1180px;
    margin: 40px auto 0 auto;
    padding: 0 45px;
}
.carousel-title {
    font-size: 1.8rem;
    color: var(--color-dark);
    text-align: center;
    margin-bottom: 30px;
}
.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    background-color: var(--color-white);
    border: 1px solid var(--color-borde);
    border-radius: 50%;
    width: 46px;
    height: 46px;
    font-size: 1.8rem;
    line-height: 42px;
    text-align: center;
    color: var(--color-dark);
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    box-shadow: var(--sombra-suave);
}
.carousel-arrow:hover {
    background-color: var(--color-accent);
    color: var(--color-white);
    border-color: var(--color-accent);
}
.carousel-arrow:disabled {
    opacity: 0.25;
    cursor: not-allowed;
}
.scroll-left { left: 0; }
.scroll-right { right: 0; }
.carousel-wrapper::before,
.carousel-wrapper::after { display: none; }
.carousel-swipe-hint { display: none; }
.horizontal-gallery {
    display: flex;
    overflow-x: auto;
    gap: 30px;
    padding: 10px 0 20px 0;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.horizontal-gallery::-webkit-scrollbar { display: none; }
.horizontal-gallery > * {
    scroll-snap-align: start;
    flex-shrink: 0;
}
.horizontal-gallery .project-card { flex-basis: 340px; }
/* Misma altura para todas y cada foto con su propio ancho: las panorámicas
   salen más anchas, sin bandas grises y sin recortar (el ancho sale de los
   atributos width/height de cada <img>, que tienen que ser los reales). */
.service-detail-gallery.horizontal-gallery .gallery-image {
    flex: 0 0 auto;
    height: 300px;
    margin-bottom: 0;
    overflow: hidden;
    border-radius: var(--radio);
    background-color: var(--color-bg-alt);
    box-shadow: none;
}
.service-detail-gallery.horizontal-gallery .gallery-image img {
    width: auto;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
@media (max-width: 768px) {
    /* En móvil, ninguna foto más ancha que la pantalla (las panorámicas se recortan un poco por los lados) */
    .service-detail-gallery.horizontal-gallery .gallery-image { height: 240px; max-width: 85vw; }
    .service-detail-gallery.horizontal-gallery .gallery-image img { max-width: 85vw; }
    .carousel-swipe-hint {
        display: block;
        margin: -18px 0 16px;
        color: var(--color-stone);
        font-size: .85rem;
        text-align: center;
    }

    /* En las páginas de servicio, los ejemplos aparecen antes del texto ampliado. */
    .service-page-gallery-first { display: flex; flex-direction: column; }
    .service-page-gallery-first > * { min-width: 0; width: 100%; }
    .service-page-gallery-first > .service-detail-page { order: 1; }
    .service-page-gallery-first > .service-gallery-carousel { order: 2; margin-top: 38px; }
    .service-page-gallery-first > .service-guidance { order: 3; }

}
.service-detail-gallery.horizontal-gallery .gallery-image:hover img {
    transform: scale(1.05);
}

/* ============================================================
   DETALLE DE PROYECTO — Fotos antes y después
   ============================================================ */
.project-comparison-intro {
    max-width: 70ch;
    margin-bottom: 32px;
}
.project-comparison {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}
.project-comparison-item { min-width: 0; }
.project-comparison-item figcaption {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 14px;
}
.project-comparison-item figcaption strong {
    font-family: var(--font-titulos);
    font-size: 1.35rem;
    line-height: 1.2;
    color: var(--color-dark);
}
.project-comparison-item figcaption span { font-size: 0.95rem; }
.project-comparison-photo {
    position: relative;
    display: block;
    color: var(--color-accent);
    background-color: var(--color-white);
    border-bottom: 2px solid var(--color-accent);
    text-decoration: none;
}
.project-comparison-photo img {
    width: 100%;
    height: auto;
}
.project-comparison-enlarge {
    display: block;
    min-height: 44px;
    padding: 10px 14px;
    font-size: 0.95rem;
    font-weight: 600;
    text-align: right;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.project-comparison-photo:hover { background-color: var(--color-bg-alt); }
.project-comparison-photo:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 4px;
}
@media (max-width: 768px) {
    .project-comparison { grid-template-columns: 1fr; gap: 32px; }
}

.project-photo-single {
    width: 100%;
    max-width: 850px;
    margin: 2.5rem auto;
    border-radius: var(--radio);
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
}
.project-photo-single img {
    width: 100%;
    height: auto;
    display: block;
}
.project-detail-content {
    display: flex;
    gap: 50px;
    margin-top: 50px;
}
.project-text { flex: 2; }
.project-text h2 {
    font-size: 1.5rem;
    color: var(--color-dark);
    margin-top: 22px;
    margin-bottom: 10px;
}
.project-text h2:first-child { margin-top: 0; }
.project-data {
    flex: 1;
    background-color: var(--color-white);
    padding: 30px;
    border-radius: var(--radio);
    box-shadow: var(--sombra-suave);
    height: fit-content;
}
.project-data h2 {
    font-size: 1.25rem;
    color: var(--color-dark);
    margin-bottom: 18px;
    border-bottom: 2px solid var(--color-accent);
    padding-bottom: 8px;
}
.project-data .service-list li { padding-left: 0; }
.project-data .service-list li::before { content: ''; }
.project-related-service { margin: 4px 0 18px; }
.project-related-service a {
    color: var(--color-accent-dark);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ============================================================
   CONTACTO Y FORMULARIOS
   ============================================================ */
.contact-layout {
    display: flex;
    gap: 50px;
}
.contact-info {
    flex: 1;
    background-color: var(--color-dark);
    color: var(--color-stone-light);
    padding: 40px;
    border-radius: var(--radio);
    height: fit-content;
}
.contact-info h2 { color: var(--color-white); }
.contact-form-container { flex: 1.5; }
.contact-info h2, .contact-form-container h2 {
    font-size: 1.7rem;
    margin-bottom: 18px;
}
.info-list {
    list-style: none;
    padding: 0;
    margin: 24px 0;
}
.info-list li {
    margin-bottom: 18px;
    font-size: 1rem;
    position: relative;
    padding-left: 36px;
    color: var(--color-stone-light);
    overflow-wrap: anywhere;
}
.info-list li strong {
    color: var(--color-white);
    margin-right: 5px;
}
.info-list li i {
    position: absolute;
    left: 0;
    top: 3px;
    font-size: 1.15rem;
    color: var(--color-accent-on-dark);
    width: 25px;
    text-align: center;
}
.contact-form .form-group { margin-bottom: 18px; }
.contact-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-family: var(--font-cuerpo);
    font-size: 1rem;
    letter-spacing: 0;
    color: var(--color-dark);
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea,
.contact-form select {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid var(--color-borde-campo);
    border-radius: 4px;
    font-size: 1rem;
    font-family: var(--font-cuerpo);
    background-color: var(--color-white);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(196,1,7,0.18);
    outline: none;
}
.contact-form input[type="file"] { display: none; }
.form-privacidad {
    overflow-wrap: anywhere; /* el email no desborda en móvil */
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--color-stone);
    margin: 4px 0 14px;
}
.form-privacidad a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; }
/* Rejilla: casilla a la izquierda y texto al lado; el error baja debajo del texto
   en vez de apretarlo en la misma fila (03-11-2026) */
.contact-form .form-check {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: start;
    column-gap: 10px;
    margin-bottom: 22px;
}
.contact-form .form-check input {
    width: 24px;
    height: 24px;
    margin-top: -1px;
    flex-shrink: 0;
    accent-color: var(--color-accent);
    cursor: pointer;
}
.contact-form .form-check label {
    margin: 0;
    font-family: var(--font-cuerpo);
    font-weight: 400;
    font-size: 0.9rem;
    letter-spacing: 0;
    cursor: pointer;
}
.contact-form .cta-button { width: 100%; }

.form-full-width {
    max-width: 820px;
    margin: 0 auto;
    background-color: var(--color-white);
    padding: 45px;
    border-radius: var(--radio);
    box-shadow: var(--sombra-suave);
}
.form-row { display: flex; gap: 20px; }
.form-row .form-group { flex: 1; }
.form-intro {
    margin-bottom: 28px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--color-borde);
    color: var(--color-dark);
}
.form-intro a { color: var(--color-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.form-required-note {
    margin: -8px 0 22px;
    color: var(--color-stone);
    font-size: 0.92rem;
}
.form-guidance {
    margin: -8px 0 28px;
    padding: 18px 20px;
    background-color: var(--color-bg-alt);
}
.form-guidance h2 { margin-bottom: 6px; font-size: 1.25rem; }
.form-guidance p { margin: 0; }
.consulta-obra {
    margin-bottom: 22px;
    padding: 12px 16px;
    background-color: var(--color-bg-alt);
    border: 1px solid var(--color-borde);
    border-radius: 4px;
    color: var(--color-dark);
    font-weight: 600;
}
.consulta-obra[hidden] { display: none; }
.campo-opcional {
    font-weight: 400;
    color: var(--color-stone);
    letter-spacing: 0;
}
.campo-ayuda {
    margin-top: 6px;
    font-size: 0.95rem;
    color: var(--color-stone);
}
.contact-form [aria-invalid="true"] {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(196,1,7,0.12);
}
.field-error {
    margin-top: 6px;
    color: var(--color-accent-dark);
    font-size: 0.88rem;
    font-weight: 600;
}
.form-check .field-error {
    grid-column: 2;
    margin: 6px 0 0;
}
.contact-info .cta-button { margin-top: 4px; }
.info-list a { text-decoration: underline; text-underline-offset: 3px; }
.form-error-message {
    display: none;
    margin-top: 20px;
    padding: 15px;
    background-color: #FDECEC;
    color: var(--color-accent-dark);
    border: 1px solid var(--color-accent);
    border-radius: 4px;
    text-align: center;
    font-weight: 600;
}
.form-error-message a { text-decoration: underline; white-space: nowrap; }
.form-success-message {
    display: none;
    margin-top: 20px;
    padding: 15px;
    background-color: #EAF7ED;
    color: var(--color-exito);
    border: 1px solid var(--color-exito);
    border-radius: 4px;
    text-align: center;
    font-weight: 600;
}

.subpage-links {
    display: flex;
    gap: 30px;
    margin-top: 70px;
}
.subpage-card {
    flex: 1;
    background-color: var(--color-bg-alt);
    padding: 34px;
    border-radius: var(--radio);
    text-align: center;
}
.subpage-card h3 {
    font-size: 1.25rem;
    margin-bottom: 10px;
}
.subpage-card p { margin-bottom: 20px; }

.qs-content-section {
    padding-bottom: 60px;
    margin-bottom: 60px;
    border-bottom: 1px solid var(--color-borde);
}
.qs-content-section:last-child { border-bottom: none; margin-bottom: 0; }
.qs-content-section .section-title { text-align: left; }
.qs-content-section .section-title::after { margin: 18px 0 0 0; }
.qs-body {
    display: block;
    margin-top: 30px;
}
.qs-text-col::after { content: ''; display: block; clear: both; }
.qs-company-name {
    font-size: clamp(1.6rem, 3vw, 1.9rem);
    color: var(--color-accent-dark);
    margin-bottom: 14px;
}
.qs-text-col p { margin-bottom: 16px; }
/* Foto integrada en el relato para que el texto continúe a su alrededor. */
.qs-image-col {
    float: right;
    width: 300px;
    margin: 0 0 24px 40px;
}
.qs-image-wrapper img {
    width: 100%;
    height: auto;
    max-height: 560px;
    object-fit: cover;
    border-radius: var(--radio);
    box-shadow: var(--sombra-hover);
}
.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 26px;
    margin-top: 30px;
}
.value-card {
    background-color: var(--color-white);
    padding: 30px 24px;
    border-radius: var(--radio);
    box-shadow: var(--sombra-suave);
}
.value-icon {
    font-size: 2rem;
    color: var(--color-accent-dark);
    margin-bottom: 14px;
    display: inline-block;
}
.value-card h4, .value-card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 8px; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
    background-color: var(--color-dark);
    color: var(--color-stone-light);
    padding: 70px 0 30px 0;
}
.footer-main {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 40px;
}
.footer-col { flex: 1; min-width: 200px; overflow-wrap: anywhere; }
@media (min-width: 769px) {
    .footer-col--contact { order: 4; }
}
.footer-col h3, .footer-col h2 {
    color: var(--color-white);
    margin-bottom: 20px;
    font-size: 1.25rem;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--color-accent);
    padding-bottom: 8px;
    display: inline-block;
}
.footer-col ul { list-style: none; padding-left: 0; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul li a {
    text-decoration: none;
    color: var(--color-stone-light);
    font-size: 0.92rem;
    display: inline-block;
    transition: color 0.3s ease, transform 0.3s ease;
}
.footer-col ul li a:hover {
    color: var(--color-white);
    transform: translateX(4px);
}
.footer-contact-list li {
    position: relative;
    padding-left: 30px;
    font-size: 0.92rem;
    line-height: 1.7;
}
.footer-contact-list li i {
    position: absolute;
    left: 0;
    top: 4px;
    color: var(--color-accent-on-dark);
    font-size: 0.95rem;
}
.footer-divider {
    border: 0;
    height: 1px;
    background-color: rgba(255,255,255,0.1);
    margin-bottom: 25px;
}
.footer-bottom {
    text-align: center;
    color: var(--color-stone-light);
    font-size: 0.85rem;
}
.footer-legal {
    text-align: center;
    padding-top: 20px;
    margin-top: 25px;
    border-top: 1px solid rgba(255,255,255,0.1);
}
.footer-legal ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap;
}
.footer-legal ul li a {
    color: var(--color-stone-light);
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 0.3s ease;
}
.footer-legal ul li a:hover { color: var(--color-white); }

/* ============================================================
   WHATSAPP FLOTANTE
   ============================================================ */
.whatsapp-float {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 60px;
    height: 60px;
    background-color: #087F5B;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
    z-index: 1200;
    text-decoration: none;
    transition: transform 0.3s ease, background-color 0.3s ease;
}
.whatsapp-float:hover {
    background-color: #066648;
    transform: scale(1.1);
}

/* ============================================================
   WIDGET UPLOADCARE
   ============================================================ */
.uploadcare--widget { margin-top: 8px; }
.uploadcare--widget__button {
    background-color: var(--color-dark) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 10px 15px !important;
    font-family: var(--font-titulos) !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    transition: background-color 0.3s ease !important;
}
.uploadcare--widget__button:hover { background-color: var(--color-dark) !important; }
.uploadcare--widget__file-name {
    color: var(--color-stone) !important;
    font-family: var(--font-cuerpo) !important;
    font-size: 1rem !important;
}
.uploadcare--progress { background-color: var(--color-accent) !important; }

/* ============================================================
   BANNER DE COOKIES
   ============================================================ */
:root {
    --cc-bg: var(--color-dark);
    --cc-btn-primary-bg: var(--color-accent);
    --cc-btn-primary-text: var(--color-white);
    --cc-btn-primary-hover-bg: var(--color-accent-dark);
    --cc-btn-secondary-bg: #3A3C40;
    --cc-btn-secondary-text: #fff;
    --cc-btn-secondary-hover-bg: #4A4C50;
    --cc-btn-border-radius: 4px;
    --cc-text: #fff;
}
.cc-link {
    color: var(--color-accent-on-dark) !important;
    text-decoration: underline !important;
}
.cc-link:hover { color: #fff !important; }

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 992px) {
    .why-layout { flex-direction: column; }
    .process-steps { grid-template-columns: repeat(2, 1fr); row-gap: 45px; }
    .service-detail-page { flex-direction: column; }
    .service-detail-gallery--desktop { display: none !important; }
}

@media (max-width: 900px) {
    .nav-toggle { display: flex; }
    .navbar .nav-links {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        height: 100dvh;
        width: min(320px, 80vw);
        background-color: var(--color-dark);
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 8px;
        padding: 40px;
        /* Con poca altura (móvil en horizontal) el menú se desplaza en vez
           de cortar enlaces; los márgenes auto lo centran cuando sí cabe. */
        overflow-y: auto;
        overscroll-behavior: contain;
        transform: translateX(100%);
        transition: transform 0.35s ease;
        box-shadow: -10px 0 30px rgba(0,0,0,0.3);
    }
    .navbar.nav-open .nav-links {
        transform: translateX(0);
    }
    .navbar .nav-links li {
        margin-left: 0;
        width: 100%;
    }
    .navbar .nav-links li:first-child { margin-top: auto; }
    .navbar .nav-links li:last-child { margin-bottom: auto; }
    .navbar .nav-links a {
        display: block;
        padding: 12px 0;
        font-size: 1.05rem;
    }
}

@media (max-width: 768px) {
    /* padding-bottom de sobra: deja hueco al botón flotante de WhatsApp
       (52px + 16px de margen) para que no tape la última línea de texto. */
    .page-content { padding-top: 50px; padding-bottom: 100px; }
    .services-wrapper, .why-choose, .process-section, .projects-overview { padding: 55px 0; }
    .service-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
    .services-wrapper--editorial { padding-block: 55px; }
    .services-wrapper--editorial .service-grid { display: block; }
    .services-wrapper--editorial .service-card {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 30px 0 34px;
    }
    .services-wrapper--editorial .service-card-image {
        order: 3 !important;
        height: auto;
        aspect-ratio: 16 / 10;
        margin: 16px 0 20px;
    }
    .services-wrapper--editorial .service-card-content { display: contents; }
    .services-wrapper--editorial .service-number { order: 1; margin-bottom: 8px; }
    .services-wrapper--editorial .service-card h3 { order: 2; font-size: 1.55rem; margin-bottom: 0; }
    .services-wrapper--editorial .service-card p { order: 4; font-size: 1rem; line-height: 1.65; margin-bottom: 16px; }
    .services-wrapper--editorial .service-summary-list { order: 5; margin: 0 0 18px; }
    .services-wrapper--editorial .service-card-content .cta-button-link { order: 6; align-self: flex-start; }

    .hero { padding-top: 120px; }
    .trust-strip .container { gap: 20px 30px; }

    /* Sobre ROJAS: título antes de la imagen; explicación y ventajas después. */
    .why-layout { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
    .why-text { display: contents; }
    .why-text > .section-eyebrow { order: 1; }
    .why-text > .section-title { order: 2; margin-bottom: 24px; }
    .why-image { order: 3; margin-bottom: 26px; }
    .why-text > p { order: 4; }
    .why-text > .why-list { order: 5; }
    .why-text > .cta-button { order: 6; align-self: flex-start; }

    .process-steps { grid-template-columns: 1fr; gap: 0; margin-top: 34px; }
    /* Móvil: número a la izquierda y texto al lado, para que los 4 pasos ocupen una pantalla */
    .process-step {
        display: grid;
        grid-template-columns: 44px 1fr;
        column-gap: 16px;
        align-items: start;
        text-align: left;
        padding: 16px 0;
        border-left: none;
        border-top: 1px solid rgba(255,255,255,.12);
    }
    .process-step-number {
        grid-row: span 2;
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
        margin: 0;
    }
    .process-step h3, .process-step h4 { margin-bottom: 4px; font-size: 1.15rem; }

    .project-gallery { flex-direction: column; gap: 20px; }
    .project-card { flex-basis: 100%; }

    .contact-layout { flex-direction: column; gap: 30px; }
    .form-row { flex-direction: column; gap: 0; }
    .form-full-width, .legal-content { padding: 28px 22px; }

    .qs-image-col {
        float: right;
        width: min(43%, 155px);
        margin: 2px 0 14px 18px;
    }
    .qs-image-wrapper img { max-height: 270px; object-position: center 40%; }
    .qs-puntos { clear: both; padding-top: 8px; }

    .subpage-links { flex-direction: column; }

    .carousel-wrapper { padding: 0 30px; }
    .project-detail-content { flex-direction: column; }

    .footer-main { flex-direction: column; text-align: center; }
    .footer-col h3, .footer-col h2 { display: block; }
    .footer-contact-list li { padding-left: 0; text-align: center; }
    .footer-contact-list li i {
        position: static;
        display: block;
        margin-bottom: 5px;
        font-size: 1.1rem;
    }
    .footer-legal ul { flex-direction: column; gap: 0; }
    /* Pie en móvil: cada enlace con 44 px de alto para el dedo (antes 24, y 16 los legales) */
    .footer-col ul li { margin-bottom: 0; }
    .footer-col ul li a,
    .footer-legal ul li a { display: inline-block; padding: 10px 4px; }
    /* Contacto: el margen negativo deja el área de toque en 44 px sin separar el texto de su icono */
    .footer-contact-list li { padding: 8px 0; }
    .footer-contact-list li a { display: inline-block; padding: 10px 4px; margin: -10px 0; }
    .footer-legal ul li a { padding: 14px 4px; }

    .whatsapp-float {
        width: 48px;
        height: 48px;
        font-size: 1.5rem;
        bottom: max(8px, env(safe-area-inset-bottom));
        right: max(4px, env(safe-area-inset-right));
    }
}

@media (max-width: 480px) {
    .navbar .container { gap: 12px; }
    /* Firma a 42px de alto ≈ 192px de ancho: sin reducir al hacer scroll */
    .navbar .logo-img,
    .navbar-scrolled .logo-img { height: 42px; transform: none; }
    .navbar-right { gap: 12px; }
}
@media (max-width: 400px) {
    .navbar-right { gap: 10px; }
    /* En 360-400 px la firma, el botón y la hamburguesa no caben con
       la palabra "Llamar". El icono conserva un objetivo táctil de 44 px
       y el aria-label mantiene el nombre accesible. */
    .nav-call { padding: 0; }
    .nav-call-text { display: none; }
}
@media (max-width: 374px) {
    .nav-call { padding: 0 10px; gap: 6px; font-size: 0.9rem; }
}
@media (max-width: 339px) {
    /* Pantallas muy estrechas: solo el icono (el nombre accesible sigue en aria-label) */
    .nav-call { padding: 0; }
    .nav-call-text { display: none; }
}

/* ==========================================================================
   MAPA DE ZONAS DE TRABAJO
   ========================================================================== */
.mapa-titulo {
    font-size: 1.7rem;
    margin-bottom: 10px;
}
.mapa-intro {
    color: var(--color-ink);
    margin-bottom: 18px;
    font-size: 0.98rem;
}
#mapa-zonas {
    height: 530px;
    width: 100%;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    background-color: var(--color-bg-alt);
    z-index: 1;
}
.mapa-nota {
    margin-top: 12px;
    font-size: 0.88rem;
    color: var(--color-stone);
}
/* Pueblos donde se ha trabajado: plegado bajo el mapa, se abre al pulsar */
.mapa-pueblos {
    margin-top: 12px;
    font-size: 0.88rem;
    color: var(--color-stone);
}
.mapa-pueblos summary {
    cursor: pointer;
    display: list-item;
    width: fit-content;
    padding: 10px 0;
    min-height: 44px;
    box-sizing: border-box;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.mapa-pueblos summary:hover { color: var(--color-ink); }
.mapa-pueblos p { margin: 6px 0 0; line-height: 1.6; }
.mapa-pueblos strong { color: var(--color-ink); font-weight: 600; }
/* La etiqueta del circulo, en el grafito de la marca */
.zona-etiqueta {
    background: var(--color-dark);
    border: none;
    color: var(--color-white);
    font-family: var(--font-titulos);
    font-size: 0.9rem;
    padding: 6px 10px;
    box-shadow: none;
}
.zona-etiqueta::before { border-top-color: var(--color-dark); }
.leaflet-container { font-family: var(--font-cuerpo); }

@media (max-width: 768px) {
    #mapa-zonas { height: 320px; }
}

.seccion-mapa {
    padding: 70px 0 90px 0;
    background-color: var(--color-bg);
}
.seccion-mapa .mapa-titulo { margin-bottom: 8px; }
.seccion-mapa .mapa-intro { max-width: 60ch; }

/* Campo trampa antispam: invisible para una persona, alcanzable
   para un robot que rellena todos los campos del formulario. */
.hp-campo {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Movimiento reducido: sin animaciones de entrada, transiciones ni desplazamiento suave */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0s !important;
        transition-duration: 0.01ms !important;
    }
}


/* Portada y galería: fotografías y acciones de contacto */
.project-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}
.project-filters a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid var(--color-stone);
    border-radius: 2px;
    color: var(--color-dark);
    font-size: 0.95rem;
    text-decoration: none;
}
.project-filters a:hover {
    color: var(--color-white);
    background-color: var(--color-dark);
}
@media (min-width: 1025px) {
    .projects-catalog .project-gallery--obras { grid-template-columns: repeat(3, 1fr); }
}
.projects-catalog .project-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.projects-catalog .project-card:hover,
.projects-catalog .project-card:hover .project-image img { transform: none; }
.projects-catalog .project-info {
    display: flex;
    flex: 1;
    flex-direction: column;
}
.projects-catalog .project-photo-link--ficha {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.project-photo-link--ficha:hover .project-detail-link { text-decoration: underline; }
.projects-catalog .project-card:has(.project-photo-link--ficha) {
    box-shadow: 0 10px 28px rgba(32,34,36,0.12);
}
.projects-catalog .project-card:has(.project-photo-link--ficha) .project-info {
    border-top-color: var(--color-accent);
}
.project-photo-link {
    display: block;
    color: var(--color-accent);
    text-decoration: none;
}
.project-photo-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 12px;
    background-color: var(--color-white);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.project-photo-link:hover .project-photo-label { background-color: var(--color-bg-alt); }
.project-detail-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    color: var(--color-accent-dark);
    font-size: 0.95rem;
    font-weight: 600;
    text-underline-offset: 3px;
}
.project-photo-link--ficha .project-detail-link { margin-top: auto; }
.project-detail-link [aria-hidden="true"],
.project-photo-label [aria-hidden="true"] { display: none; }
@media (max-width: 560px) {
    .project-photo-link--ficha .project-info h3 {
        display: -webkit-box;
        min-height: 6em;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 5;
        line-clamp: 5;
    }
    .project-photo-link--ficha .project-detail-link {
        gap: 4px;
        font-size: 0.875rem;
        white-space: nowrap;
    }
}
.form-next-step {
    margin-bottom: 16px;
    color: var(--color-dark);
}
.campo-ayuda a {
    color: var(--color-accent-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}
:where(a, button):focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 4px;
}
.navbar :where(a, button):focus-visible,
.hero a:focus-visible,
.footer a:focus-visible { outline-color: var(--color-accent-on-dark); }

@media (max-width: 768px) {
    /* Portada móvil: la foto sigue detrás del texto (decisión del usuario, 04-10-2026) */
    .hero h1.titulo-animado { font-size: clamp(2.1rem, 7vw, 2.8rem); }
    .hero p.subtitulo-animado { margin-bottom: 22px; }
    .hero .cta-buttons { gap: 12px; }
    .hero .cta-button { width: 100%; padding: 13px 20px; }
    .trust-strip .container { gap: 14px 24px; }
}

/* El foco de los enlaces de foto se dibuja dentro de los contenedores recortados. */
.project-photo-link:focus-visible { outline-offset: -3px; }

/* Proyectos: cada foto dice en texto qué abre ("Ver la obra →" o "Ampliar foto ↗"), en una etiqueta sobre la foto
   (antes era un circulito con solo la flecha y una leyenda arriba que lo explicaba) */
.project-photo-link { position: relative; }
.project-photo-link .project-photo-label {
    position: absolute;
    top: 8px;
    right: 8px;
    min-height: 0;
    gap: 6px;
    padding: 6px 11px;
    border-radius: 999px;
    background-color: rgba(32,34,36,0.78);
    color: var(--color-white);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
}
.project-photo-link .project-photo-label span { font-size: 0.9rem; }
@media (max-width: 560px) {
    .project-photo-link .project-photo-label { top: 6px; right: 6px; padding: 5px 9px; font-size: 0.8125rem; gap: 4px; }
}
.project-photo-link:hover .project-photo-label { background-color: var(--color-accent); }
@media (max-width: 560px) {
    /* Los tres grupos en una sola fila que se desliza, en vez de uno por línea */
    .project-filters {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    .project-filters a {
        justify-content: center;
        min-height: 44px;
        padding: 8px 12px;
        font-size: 0.88rem;
        line-height: 1.25;
        text-align: center;
    }
    .project-filters a:last-child { grid-column: 1 / -1; }
}

/* En pantallas táctiles se eliminan desplazamientos y ampliaciones pensados
   para el ratón, que pueden quedarse activos después de tocar una tarjeta. */
@media (hover: none) and (pointer: coarse) {
    .service-card:hover,
    .project-card:hover,
    .why-item:hover,
    .process-step:hover,
    .whatsapp-float:hover { transform: none; }

    .service-card:hover .service-card-image,
    .project-card:hover .project-image img { transform: none; }
}

/* Ajustes de lectura y toque en teléfonos estrechos. */
@media (max-width: 560px) {
    .page-header { padding: 7rem 0 3rem; }
    .page-header h1 {
        font-size: clamp(1.85rem, 9vw, 2.35rem);
        overflow-wrap: anywhere;
        text-wrap: balance;
    }
    .page-header p { font-size: 1rem; }

    .section-title,
    .final-cta h2,
    .project-text h2 { text-wrap: balance; }

    .contact-info > .cta-button,
    .subpage-card .cta-button,
    .final-cta .cta-button { width: 100%; }

    .form-intro a,
    .form-error-message a { white-space: normal; overflow-wrap: anywhere; }

    /* El teléfono cabe completo incluso en 320 px; mantener sus grupos unidos. */
    .form-intro a[href^="tel:"],
    .form-error-message a[href^="tel:"] { white-space: nowrap; overflow-wrap: normal; }
}

@media (max-width: 420px) {
    .obras-resumen-cabecera {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }
    .obras-resumen-cabecera a.ver-todas { width: 100%; justify-content: center; }
}

/* Inicio: obras realizadas agrupadas por servicio, 3 fotos pequeñas por grupo */
.obras-resumen { margin-top: 44px; text-align: left; }
.obras-resumen-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding-bottom: 10px;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--color-borde);
}
.obras-resumen-cabecera h3 { font-size: clamp(1.3rem, 2.5vw, 1.6rem); }
/* "Ver las N obras": botón con borde rojo (antes un enlace de texto que pasaba desapercibido, 22-10-2026) */
.obras-resumen-cabecera { align-items: center; }
.obras-resumen-cabecera a.ver-todas {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    border: 2px solid var(--color-accent);
    border-radius: 2px;
    color: var(--color-accent-dark);
    font-family: var(--font-titulos);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.3px;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color 0.25s ease, color 0.25s ease;
}
.obras-resumen-cabecera a.ver-todas:hover,
.obras-resumen-cabecera a.ver-todas:focus-visible { background-color: var(--color-accent); color: var(--color-white); }
.ver-todas-flecha { display: inline-block; transition: transform 0.25s ease; }
.obras-resumen-cabecera a.ver-todas:hover .ver-todas-flecha { transform: translateX(4px); }
@media (max-width: 480px) {
    .obras-resumen-cabecera a.ver-todas { padding: 0 12px; font-size: 0.92rem; gap: 6px; }
}
.obras-resumen-fotos {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
/* Móvil: 2 por fila y solo las 2 primeras de cada tipo (fotos 2,4 veces más grandes que con 3 por fila,
   y la sección apenas crece; el resto está en "Ver todas"). Decidido el 18-10-2026 midiendo las tres opciones. */
@media (max-width: 768px) {
    .obras-resumen-fotos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .obras-resumen-fotos .obra-mini:nth-child(n+3) { display: none; }
}
.obra-mini {
    display: block;
    text-decoration: none;
    color: var(--color-dark);
    background-color: var(--color-white);
    border-bottom: 2px solid var(--color-accent);
}
.obra-mini img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: opacity 0.25s ease;
}
.obra-mini:hover img { opacity: 0.88; }
.obra-mini--solo-movil { display: none; }
@media (max-width: 768px) {
    .obras-resumen--muros .obra-mini { display: none; }
    .obras-resumen--muros .obras-resumen-fotos .obra-mini--destacada-movil { display: block; }
}
.obra-mini span {
    display: block;
    padding: 10px 12px 12px;
    font-family: var(--font-titulos);
    font-size: 1.02rem;
    line-height: 1.3;
}
.sr-solo {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
@media (max-width: 560px) {
    .obras-resumen { margin-top: 32px; }
    .obras-resumen-fotos { gap: 8px; }
    .obra-mini span { padding: 8px 10px 10px; font-size: 0.95rem; }
    .obra-mini span::after { font-size: 0.875rem; }
}

/* Ficha de obra: varias fotos en el mismo recuadro, deslizables (antes/después) */
.foto-deslizable { position: relative; }
.foto-deslizable-pista {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.foto-deslizable-pista::-webkit-scrollbar { display: none; }
.foto-deslizable-pista > * {
    flex: 0 0 100%;
    scroll-snap-align: start;
}
.foto-deslizable-pista:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 4px; }
/* Recuadro con fotos verticales y horizontales mezcladas: todas en el mismo marco 4:3
   y enteras, para que una vertical no deje un hueco grande bajo las horizontales.
   El script añade la clase solo cuando hay mezcla (03-11-2026). */
.foto-deslizable--mixta .foto-deslizable-pista img {
    aspect-ratio: 4 / 3;
    height: auto;
    object-fit: contain;
    background-color: var(--color-bg-alt);
}
.foto-deslizable-flecha {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background-color: rgba(32,34,36,0.72);
    color: var(--color-white);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}
.foto-deslizable-flecha--ant { left: 10px; }
.foto-deslizable-flecha--sig { right: 10px; }
.foto-deslizable-flecha:hover { background-color: var(--color-accent); }
.foto-deslizable-flecha:disabled { opacity: 0; pointer-events: none; }
.foto-deslizable-contador {
    position: absolute;
    top: 10px;
    left: 10px;
    margin: 0;
    padding: 2px 10px;
    border-radius: 2px;
    background-color: rgba(32,34,36,0.72);
    color: var(--color-white);
    font-size: 0.85rem;
    font-weight: 600;
}
@media (prefers-reduced-motion: reduce) { .foto-deslizable-pista { scroll-behavior: auto; } }
/* Ficha con una sola vista principal pero varias fotos: fondo blanco bajo "Ampliar foto" */
.project-photo-single--varias { background-color: var(--color-white); }

/* Proyectos: grupos largos plegados (el script añade la clase; sin script se ven todas) */
.obras-grupo--plegado .project-gallery--obras > .project-card:nth-of-type(n+7) { display: none; }
.obras-ver-mas { margin: 24px auto 0; display: block; }

/* Quiénes Somos: una sola presentación con los tres puntos */
.qs-puntos { list-style: none; margin-top: 24px; }
.qs-puntos li { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 22px; }
.qs-puntos li:last-child { margin-bottom: 0; }
.qs-puntos i {
    flex: 0 0 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--color-dark);
    color: var(--color-white);
}
.qs-puntos h3 { font-size: 1.2rem; margin-bottom: 4px; }
.qs-puntos p { margin-bottom: 0; }
.qs-content-section:only-child { padding-bottom: 0; border-bottom: none; }

/* Visor de "Ampliar foto": la foto entera dentro de la pantalla, nunca más grande que su tamaño real */
.visor-foto {
    margin: auto;            /* centrada: el reset global "* { margin: 0 }" la pegaba arriba a la izquierda */
    padding: 0;
    border: 0;
    background: transparent;
    max-width: none;
    max-height: none;
    overflow: visible;
}
.visor-foto::backdrop { background-color: rgba(32,34,36,0.9); }
.visor-foto img {
    display: block;
    width: auto;
    height: auto;
    max-width: 92vw;
    max-height: 86vh;
    border-radius: var(--radio);
}
.visor-foto-cerrar {
    position: fixed;
    top: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background-color: var(--color-dark);
    color: var(--color-white);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}
.visor-foto-cerrar:hover { background-color: var(--color-accent); }
.visor-foto-cerrar:focus-visible { outline: 3px solid var(--color-accent-on-dark); outline-offset: 2px; }

/* Inicio, obras: cada foto dice qué abre, en texto ("/ ''" para que el lector de pantalla no lo lea dos veces) */
.obra-mini span::after {
    display: block;
    margin-top: 4px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-accent-dark);
}
.obra-mini--ficha span::after { content: "Ver obra →" / ""; }
.obra-mini--foto span::after { content: "Ampliar foto ↗" / ""; }
.obra-mini:hover span::after { text-decoration: underline; text-underline-offset: 3px; }

/* Inicio: invitación a llamar justo después de las obras */
.obras-cierre {
    margin-top: 36px;
    text-align: center;
}
.obras-cierre p {
    margin-bottom: 16px;
    font-family: var(--font-titulos);
    font-size: 1.3rem;
    color: var(--color-dark);
}
.obras-cierre-botones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}
@media (max-width: 560px) {
    .obras-cierre-botones .cta-button { width: 100%; }
}

/* Carruseles: se pueden enfocar con el tabulador y desplazar con las flechas del teclado */
.horizontal-gallery:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 4px; }

/* Visor con varias fotos (fichas de antes y después): flechas, contador y deslizar con el dedo */
.visor-foto-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background-color: rgba(32,34,36,0.78);
    color: var(--color-white);
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
}
.visor-foto-ant { left: 12px; }
.visor-foto-sig { right: 12px; }
.visor-foto-nav:hover:not(:disabled) { background-color: var(--color-accent); }
.visor-foto-nav:disabled { opacity: 0.3; cursor: default; }
.visor-foto-nav:focus-visible { outline: 3px solid var(--color-accent-on-dark); outline-offset: 2px; }
.visor-foto-contador {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    padding: 4px 12px;
    border-radius: 999px;
    background-color: rgba(32,34,36,0.78);
    color: var(--color-white);
    font-size: 0.9rem;
    font-weight: 600;
}
.visor-foto-etapa {
    position: fixed;
    bottom: 58px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    padding: 7px 14px;
    border-radius: 2px;
    background-color: var(--color-accent);
    color: var(--color-white);
    font-family: var(--font-titulos);
    font-size: 1rem;
    font-weight: 600;
    white-space: nowrap;
}
.visor-foto img { touch-action: pan-y; }
@media (max-width: 560px) {
    .visor-foto-nav { width: 44px; height: 44px; font-size: 1.5rem; }
    .visor-foto-ant { left: 6px; }
    .visor-foto-sig { right: 6px; }
}

/* Portada en móvil: la foto se desplaza a la izquierda para que se vea la excavadora además del muro
   (pedido del usuario, 19-10-2026). En ordenador se ve la foto completa a lo ancho y no hace falta. */
@media (max-width: 800px) {
    .hero { background-position: 25% 30%; }
}

/* Fotos de los carruseles de servicio: se abren en el visor al tocarlas */
.service-detail-gallery img[data-grande] { cursor: zoom-in; }
.service-detail-gallery img[data-grande]:focus-visible { outline: 3px solid var(--color-accent); outline-offset: -3px; }

/* Móviles muy estrechos (≤360px): la firma un poco más baja para que quepan el botón de llamar y el menú */
@media (max-width: 360px) {
    .navbar .logo-img,
    .navbar-scrolled .logo-img { height: 36px; }
}

/* Pie: logo compacto en negativo (a 230 px la línea de servicios no se lee; el manual pide 550 px) */
.footer-logo { display: inline-block; }
.footer-logo img { display: block; width: 230px; max-width: 100%; height: auto; }
.footer-col--marca { flex: 0 0 auto; }
.footer-marca { text-align: center; margin-bottom: 28px; }
.footer-marca .footer-logo img { margin: 0 auto; }
@media (max-width: 768px) {
    .footer { padding: 36px 0 88px; }
    .footer-main {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 24px 20px;
        text-align: left;
        margin-bottom: 24px;
    }
    .footer-col { min-width: 0; }
    .footer-col--marca, .footer-col--contact { grid-column: 1 / -1; }
    .footer-col--marca { text-align: left; }
    .footer-col--marca .footer-logo { display: inline-flex; align-items: center; min-height: 44px; }
    .footer-col--marca .footer-logo img { width: 210px; margin: 0; }
    .footer-col h2 { font-size: 1.1rem; margin-bottom: 10px; }
    .footer-col ul li a {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 8px 0;
        line-height: 1.5;
    }
    .footer-col--contact h2 { margin-bottom: 8px; }
    .footer-contact-list li { padding: 5px 0 5px 28px; text-align: left; }
    .footer-contact-list li i { position: absolute; top: 10px; margin: 0; font-size: 1rem; }
    .footer-contact-list li a { display: inline-flex; margin: -5px 0; }
    .footer-contact-list li:has(a[href^="tel:"]) { padding-top: 8px; padding-bottom: 8px; }
    .footer-contact-list li:has(a[href^="tel:"]) i { top: 16px; }
    .footer-contact-list a[href^="tel:"] { font-size: 1.35rem; font-weight: 700; color: var(--color-white); }
    .footer-contact-list a[href^="mailto:"] { display: inline-block; padding-top: 10px; padding-bottom: 10px; }
    .footer-divider { margin-bottom: 16px; }
    .footer-bottom { font-size: 0.8125rem; }
    .footer-legal { padding-top: 10px; margin-top: 12px; }
    .footer-legal ul { flex-direction: row; gap: 0 18px; }
    .footer-legal ul li a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 0; }
}

/* En horizontal, dejar libre el botón de cierre mientras se desplaza el menú. */
@media (max-width: 900px) and (max-height: 560px) {
    .navbar .nav-links { padding-top: 88px; }
}

/* El acceso flotante no debe tapar enlaces mientras está abierto el menú. */
body:has(.navbar.nav-open) .whatsapp-float { visibility: hidden; }

/* Aparición breve al entrar en pantalla. Solo se activa cuando JavaScript confirma soporte. */
.reveal-ready .reveal-item {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 420ms ease, transform 420ms ease;
}
.reveal-ready .reveal-item.reveal-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .reveal-ready .reveal-item,
    .reveal-ready .reveal-item.reveal-visible { opacity: 1; transform: none; transition: none; }
}

/* Portada en ordenador: titular compacto y subtítulo legible sobre la foto. */
@media (min-width: 901px) {
    .hero-content { max-width: 900px; }
    .hero h1.titulo-animado { font-size: clamp(3.2rem, 5vw, 4rem); text-wrap: balance; }
    .hero p.subtitulo-animado { max-width: 740px; margin-inline: auto; color: var(--color-white); }
}

/* ============================================================
   Identidad v3 (03-11-2026): Barlow Condensed solo en títulos;
   etiquetas, pies de foto y botones pequeños pasan a Inter, como
   pide el manual ("Inter para textos y datos"). Barlow a estos
   tamaños quedaba demasiado fina.
   ============================================================ */
.navbar .nav-links a { white-space: nowrap; }
@media (min-width: 901px) {
    .navbar .nav-links li { margin-left: 24px; }
}
.trust-item,
.service-card-tags,
.project-info p,
.zona-etiqueta,
.obra-mini span,
.cta-button-link,
.obras-resumen-cabecera a.ver-todas {
    font-family: var(--font-cuerpo);
    letter-spacing: 0;
}
.trust-item { font-size: 0.9rem; font-weight: 600; }
.obra-mini span { font-size: 0.9rem; }
.service-card-tags { font-size: 0.75rem; letter-spacing: 0.06em; }
.project-info p { font-size: 0.85rem; font-weight: 600; }
.obras-resumen-cabecera a.ver-todas { font-size: 0.92rem; }
/* Inter es más ancha que la letra anterior: justo antes de la hamburguesa el menú se salía */
@media (min-width: 901px) and (max-width: 1000px) {
    .navbar .nav-links li { margin-left: 16px; }
    .navbar .nav-links a { font-size: 0.88rem; }
}
.uploadcare--widget__button { font-family: var(--font-cuerpo) !important; font-weight: 600 !important; }
.nav-call { font-family: var(--font-cuerpo); font-weight: 600; }
.final-cta :where(a, button):focus-visible,
.contact-info :where(a, button):focus-visible { outline-color: var(--color-accent-on-dark); }
@media (max-width: 560px) {
    .service-jump-links { display: grid; grid-template-columns: 1fr; margin-bottom: 36px; }
    .service-jump-links a { justify-content: center; text-align: center; }
}

/* <picture> de las fotos WebP: no crea caja propia, la foto se maqueta igual que antes. */
.foto-webp { display: contents; }
/* Su <source> nunca debe ocupar sitio: con display: contents en <picture>, contaba
   como un elemento más en cuadrículas y filas (miniaturas de Servicios desplazadas). */
.foto-webp > source { display: none; }
/* Tarjetas de servicios: WebP si el navegador lo admite (va al final para ganar a la regla base). */
@supports (background-image: image-set(url("IMG/escollera-lajas-800.webp") type("image/webp"))) {
    .service-card-image { --fondo-foto: var(--foto-tarjeta-webp, var(--foto-tarjeta)); }
}

/* ============================================================
   ESTILO DE MARCA v3 — gramática del manual (05-11-2026)
   Manual, «Espacio y forma»: cantos vivos, bandas rectas, filete rojo
   corto SOBRE el título y un solo acento rojo por pieza. Este bloque va
   al final a propósito: así sus reglas mandan sobre las anteriores.
   ============================================================ */
:root {
    --radio: 0px;                                     /* radio-0: cantos vivos */
    --sombra-suave: 0 0 0 1px var(--color-borde);     /* las tarjetas se separan con un filete, no con sombra */
    --sombra-hover: 0 10px 24px rgba(32, 34, 36, 0.12);
}

/* Títulos de sección: a la izquierda, con el filete rojo corto encima */
.section-title,
.section-eyebrow,
.section-intro { text-align: left; }
.section-intro { margin-left: 0; margin-right: 0; }
.section-title::after { content: none; }
.section-title::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    margin: 0 0 16px 0;
    background-color: var(--color-accent);
}

/* Subtítulos que llevaban raya roja debajo: el rojo pasa al filete de encima */
.servicio-bloque-texto h2 {
    border-bottom: 0;
    padding-bottom: 0;
}
.servicio-bloque-texto h2::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    margin-bottom: 14px;
    background-color: var(--color-accent);
}
.service-detail-text h3, .service-detail-text h2,
.project-data h2,
.legal-content h2 { border-bottom-color: var(--color-borde); border-bottom-width: 1px; }
.footer-col h3, .footer-col h2 { border-bottom: 1px solid rgba(255, 255, 255, 0.18); }

/* Franja de confianza: texto en Barlow, sin iconos */
.trust-strip .container { gap: 0; padding: 22px 20px; }
.trust-item {
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 4px 28px;
}
.trust-item + .trust-item { border-left: 1px solid rgba(255, 255, 255, 0.22); }
@media (max-width: 700px) {
    .trust-strip .container { flex-direction: column; align-items: center; padding: 18px 20px; }
    .trust-item { font-size: 1rem; padding: 6px 0; }
    .trust-item + .trust-item { border-left: 0; }
}

/* Menos rojo: las fotos y tarjetas se separan con el borde neutro */
.obra-mini { border-bottom: 1px solid var(--color-borde); }
.project-info { border-top: 1px solid var(--color-borde); }
.project-comparison-photo { border-bottom: 0; }

/* "Ver todos los trabajos": enlace de texto, no botón con borde rojo */
.obras-resumen-cabecera a.ver-todas {
    border: 0;
    padding: 0;
    background: none;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}
.obras-resumen-cabecera a.ver-todas:hover,
.obras-resumen-cabecera a.ver-todas:focus-visible {
    background: none;
    color: var(--color-dark);
    text-decoration-thickness: 2px;
}

/* Banda con la huella de la oruga de la excavadora (elegida por el usuario el 05-11-2026;
   antes era la trama de piedra del manual, que sigue en marca/recursos/), sin texto:
   la base de cada página, justo encima del pie */
.banda-trama {
    height: 76px;
    background: var(--color-dark) url('marca/recursos/huella-oruga-banda.svg') repeat-x left center / auto 100%;
}
@media (max-width: 700px) {
    .banda-trama { height: 56px; }
}
@media (max-width: 420px) {
    .obras-resumen-cabecera { align-items: flex-start; }
    .obras-resumen-cabecera,
    .obras-resumen-cabecera h3 { text-align: left; }
    .obras-resumen-cabecera a.ver-todas { width: auto; justify-content: flex-start; }
}

/* El apellido marcado para no traducirse no debe crear una caja propia:
   dentro de enlaces maquetados con flex se separaba del texto («Sobre» / «ROJAS»). */
span[translate="no"] { display: contents; }

/* Menú del móvil: la sombra solo cuando está abierto; cerrado, asomaba por el borde derecho */
@media (max-width: 900px) {
    .navbar .nav-links { box-shadow: none; }
    .navbar.nav-open .nav-links { box-shadow: -10px 0 30px rgba(0, 0, 0, 0.3); }
}

/* ============================================================
   TIPOGRAFÍA — escala de títulos (paso 2, 05-11-2026)
   Barlow Condensed (títulos) e Inter (texto) del manual, sin cambiar de letra.
   Cada nivel es al menos 1,25 veces el siguiente:
   portada 64 · página 58 · sección 48 · subsección 32 · tarjeta 24-30 · menor 20 · texto 16 (px en ordenador)
   ============================================================ */
.page-header h1 { font-size: clamp(2.4rem, 5.5vw, 3.6rem); }
.service-title { font-size: clamp(2.1rem, 4.5vw, 3.2rem); line-height: 1.1; }
.section-title { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; }

/* Subsecciones dentro de una página */
.servicio-bloque-texto h2,
.service-detail-text h2,
.carousel-title,
.project-text h2 { font-size: clamp(1.6rem, 2.8vw, 2rem); line-height: 1.15; }
.service-detail-text h3 { font-size: 1.25rem; }

/* Tarjetas: por debajo del título de sección, por encima del texto */
.services-wrapper--editorial .service-card h3 { font-size: clamp(1.6rem, 2.6vw, 1.9rem); }
.project-info h3, .project-info h2 { font-size: 1.25rem; }
@media (max-width: 600px) {
    .project-gallery--obras .project-info h3,
    .project-gallery--obras .project-info h2,
    .project-info h3, .project-info h2 { font-size: 1.15rem; }
}

/* Sobre ROJAS: el título en antracita, como los demás (el rojo queda para acentos) */
.qs-company-name { color: var(--color-dark); font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; }

/* Pie: títulos de columna un paso por encima del texto */
.footer-col h3, .footer-col h2 { font-size: 1.5rem; }
@media (max-width: 600px) {
    .page-header h1 { font-size: clamp(1.9rem, 9vw, 2.5rem); }
}
/* Sobre ROJAS: su título lleva el mismo filete que los títulos de sección */
.qs-company-name::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    margin: 0 0 16px 0;
    background-color: var(--color-accent);
}
/* Foto única de ficha: sin la sombra grande, con el filete de las tarjetas */
.project-photo-single { box-shadow: var(--sombra-suave); }

/* ============================================================
   MÓVIL (paso 3, 05-11-2026)
   ============================================================ */
/* Portada en móvil: foto algo más grande y subida, para que se vean la
   excavadora y los bloques del muro en vez de la piscina y la maleza de abajo.
   Tamaño y posición por capa: los dos degradados siguen cubriendo la caja entera. */
@media (max-width: 1000px) {
    .hero {
        background-repeat: no-repeat;
        background-size: 100% 100%, 100% 100%, auto 135%;
        background-position: center, center, 42% 8%;
    }
}

/* Mapa: tiles en grises cálidos para que encaje con la piedra y el antracita;
   los círculos rojos (otra capa) siguen con su color. */
.leaflet-tile-pane { filter: saturate(0.45) sepia(0.1) contrast(0.97); } /* colores suaves (término medio elegido por el usuario) */

/* ============================================================
   REPASO FINAL (paso 4, 05-11-2026)
   ============================================================ */
/* Lista de pueblos bajo el mapa: líneas de lectura cómoda (salían de unos 160 caracteres) */
.mapa-pueblos p { max-width: 75ch; }
/* Tableta: la franja de confianza cabe en una línea (si no, quedaba un separador suelto) */
@media (min-width: 701px) and (max-width: 1000px) {
    .trust-item { font-size: 1rem; padding: 4px 16px; letter-spacing: 0.4px; }
}
/* Tabletas estrechas (701-820 px): en columna, como en el móvil */
@media (min-width: 701px) and (max-width: 820px) {
    .trust-strip .container { flex-direction: column; align-items: center; padding: 18px 20px; }
    .trust-item { padding: 6px 0; }
    .trust-item + .trust-item { border-left: 0; }
}

/* Inicio en móvil: "Ver todos →" en la misma línea que el título del grupo,
   sin raya debajo, para que las fotos suban (pedido por el usuario, 05-11-2026).
   "los trabajos" se oculta a la vista en pantallas estrechas, pero los lectores de pantalla lo siguen leyendo. */
@media (max-width: 600px) {
    .obras-resumen-cabecera,
    .obras-resumen-cabecera { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; }
    .obras-resumen-cabecera { border-bottom: 0; padding-bottom: 0; margin-bottom: 12px; }
    .obras-resumen-cabecera a.ver-todas { width: auto; min-height: 44px; flex-shrink: 0; }
    .ver-todas-largo {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
}

/* Franja de confianza en el móvil, más compacta para que se vea más la foto (05-11-2026) */
@media (max-width: 700px) {
    .trust-strip .container { padding: 12px 20px; }
    .trust-item { font-size: 0.82rem; padding: 3px 0; letter-spacing: 0.5px; }
}

/* Portada en móvil más despejada (05-11-2026): sin la línea de WhatsApp (el botón flotante
   ya está siempre visible), la foto termina tras los botones y menos hueco bajo la franja. */
@media (max-width: 600px) {
    .hero-contact-note { display: none; }
    .trust-strip + section { padding-top: 34px; }
    .obras-resumen { margin-top: 28px; }
}

/* Móvil: la foto llena la primera pantalla y la franja gris es baja, en dos líneas (pedido del usuario) */
@media (max-width: 600px) {
    .hero { min-height: calc(100svh - 64px); }
    .trust-strip .container { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 2px 0; padding: 10px 12px; }
    .trust-item { font-size: 0.78rem; padding: 2px 10px; }
    .trust-item + .trust-item { border-left: 1px solid rgba(255, 255, 255, 0.22); }
    .trust-item:last-child { border-left: 0; flex-basis: 100%; justify-content: center; }
}

/* ============================================================
   PORTADA MÓVIL LIMPIA (05-11-2026, referencia del usuario)
   Foto nítida (versión grande), sin velo general: solo oscurece abajo,
   donde va el texto, alineado a la izquierda. Etiqueta sin caja roja y
   el segundo botón transparente para que pese menos.
   ============================================================ */
@media (max-width: 600px) {
    .hero {
        min-height: calc(100svh - 64px);
        align-items: flex-end;
        text-align: left;
        padding: 120px 20px 32px;
        background-image:
            linear-gradient(180deg, rgba(32,34,36,0.45) 0%, rgba(32,34,36,0) 20%, rgba(32,34,36,0) 34%, rgba(32,34,36,0.82) 58%, rgba(32,34,36,0.95) 100%),
            url('IMG/escollera-lajas.jpg');
        background-size: 100% 100%, cover;
        background-position: center, 35% center;
    }
    .hero-content { text-align: left; max-width: none; }
    .hero-eyebrow {
        background: none;
        padding: 0;
        margin-bottom: 10px;
        letter-spacing: 2px;
        font-size: 0.78rem;
        color: rgba(255, 255, 255, 0.9);
    }
    .hero h1.titulo-animado { font-size: 2.2rem; line-height: 1.08; text-wrap: balance; }
    .hero p.subtitulo-animado { margin: 10px 0 22px; max-width: none; font-size: 1rem; }
    .hero .cta-buttons { justify-content: flex-start; gap: 10px; }
    .hero .cta-button.secondary {
        background: transparent;
        color: var(--color-white);
        box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.75);
    }
}
@supports (background-image: image-set(url("IMG/escollera-lajas-800.webp") type("image/webp"))) {
    @media (max-width: 600px) {
        .hero {
            background-image:
                linear-gradient(180deg, rgba(32,34,36,0.45) 0%, rgba(32,34,36,0) 20%, rgba(32,34,36,0) 34%, rgba(32,34,36,0.82) 58%, rgba(32,34,36,0.95) 100%),
                url('IMG/escollera-lajas-1447.webp');
        }
    }
}

/* Fichas de obra: llamar primero (orden de contacto llamada > WhatsApp > email), luego el formulario */
.project-data-ctas { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.project-data-ctas .cta-button { width: 100%; justify-content: center; text-align: center; margin: 0; }

/* Cambio de idioma: enlace nativo, también dentro del menú móvil. */
.navbar .nav-links .nav-language {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 8px;
    color: var(--color-white);
    font-family: var(--font-cuerpo);
}
@media (min-width: 901px) {
    .navbar .nav-links li:first-child { margin-left: 0; }
    .navbar .nav-links li { margin-left: 16px; }
}
@media (min-width: 901px) and (max-width: 1240px) {
    .navbar .nav-links li { margin-left: 12px; }
    .navbar .container, .navbar-right { gap: 12px; }
}

html:lang(ca) .obra-mini--ficha span::after { content: "Veure l’obra →" / ""; }
html:lang(ca) .obra-mini--foto span::after { content: "Ampliar la foto ↗" / ""; }