*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--red:#D42B2B;--red-dark:#A51E1E;--black:#111214;--dark:#1e2025;--dark2:#2a2d33;--white:#fff;--light:#f5f5f5;--light2:#ececec;--gray:#666;--gray2:#999;--border:#e0e0e0;--fo:'Oswald',sans-serif;--fb:'Open Sans',sans-serif}
html{scroll-behavior:smooth}
body{font-family:var(--fb);background-color:#fff;background-image:url("../img/textura-papel.jpg");background-repeat:repeat;background-size:640px auto;color:var(--black);font-size:15px;line-height:1.6;overflow-x:hidden}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:999;background-color:#fff;background-image:url("../img/textura-papel.jpg");background-repeat:repeat;background-size:640px auto;height:90px;display:flex;align-items:center;justify-content:space-between;padding:0 2rem;border-bottom:1px solid #e0e0e0;box-shadow:0 2px 8px rgba(0,0,0,0.06)}
.nav-logo{text-decoration:none}
.nav-logo-img{height:84px;width:auto;display:block}
.nav-links{display:flex;list-style:none}
.nav-links a{font-family:var(--fo);font-size:0.9rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:#111;text-decoration:none;padding:0 1.1rem;height:90px;display:flex;align-items:center;border-bottom:3px solid transparent;transition:all 0.2s}
.nav-links a.active,.nav-links a:hover{color:var(--red);border-bottom-color:var(--red)}
.nav-right{display:flex;align-items:center;gap:0.6rem}
.nav-icon-btn{width:34px;height:34px;border:1px solid #ccc;display:flex;align-items:center;justify-content:center;color:#333;text-decoration:none;transition:all 0.2s;font-size:13px}
.nav-icon-btn:hover{background:var(--red);border-color:var(--red);color:#fff}
/* .nav-flags y .nav-flag son el selector de idiomas del HTML original. Hoy no
   las emite ningún marcado y se conservan a propósito: la web arranca solo en
   castellano, y cuando entre Polylang su selector irá en .nav-right dentro de
   header.php, con estas mismas clases. No las retires por parecer código
   muerto; son lo único de aquel diseño que queda reservado para el multiidioma. */
.nav-flags{display:flex;gap:0.3rem;align-items:center}
.nav-flag{font-family:var(--fo);font-size:0.6rem;font-weight:500;letter-spacing:0.1em;color:#888;cursor:pointer;padding:0.15rem 0.3rem}
.nav-flag.active{color:#111}

/* HERO */
.hero{min-height:100vh;padding-top:90px;position:relative;display:flex;align-items:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;background-image:image-set(url("../img/hero-taller-pulido.webp") type("image/webp"),url("../img/hero-taller-pulido.jpg") type("image/jpeg"));background-size:cover;background-position:center center;background-repeat:no-repeat;z-index:0}
.hero-bg::before{content:'';position:absolute;inset:0;background:linear-gradient(105deg,rgba(17,18,20,0.92) 35%,rgba(17,18,20,0.5) 55%,rgba(17,18,20,0.1) 100%)}
.hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,transparent 60%,rgba(17,18,20,0.5) 100%)}
.hero-visual{display:none}
.hero-ring{width:360px;height:360px;border-radius:50%;border:1px solid rgba(255,255,255,0.05);display:flex;align-items:center;justify-content:center;position:relative}
.hero-ring::before{content:'';position:absolute;inset:22px;border-radius:50%;border:1px solid rgba(212,43,43,0.18)}
.hero-ring::after{content:'';position:absolute;inset:55px;border-radius:50%;border:2px solid rgba(255,255,255,0.035);background:radial-gradient(circle,rgba(212,43,43,0.04),transparent 70%)}
.hero-ring svg{width:160px;height:160px;opacity:0.08}
.hero-content{position:relative;z-index:2;padding:4rem 2rem 4rem 3rem;max-width:620px}
.hero-small{font-family:var(--fo);font-size:0.85rem;font-weight:400;letter-spacing:0.12em;text-transform:uppercase;color:#ccc;margin-bottom:1.2rem}
.hero-h1{font-family:var(--fo);font-weight:700;font-size:clamp(2.4rem,5.5vw,4.8rem);line-height:0.95;letter-spacing:0.02em;text-transform:uppercase;color:#fff;margin-bottom:0.3rem}
.hero-h1 .red{color:var(--red)}
.hero-sep{width:50px;height:3px;background:var(--red);margin:1.2rem 0}
.hero-sub{font-size:0.95rem;color:rgba(255,255,255,0.65);font-weight:300;max-width:420px;line-height:1.7;margin-bottom:2rem}
.hero-btns{display:flex;gap:0.8rem;flex-wrap:wrap}
.btn-wa{display:inline-flex;align-items:center;gap:0.55rem;font-family:var(--fo);font-weight:600;font-size:0.8rem;letter-spacing:0.08em;text-transform:uppercase;background:var(--red);color:#fff;padding:0.85rem 1.5rem;text-decoration:none;border:2px solid var(--red);transition:all 0.2s}
.btn-wa:hover{background:var(--red-dark);border-color:var(--red-dark)}
.btn-pres{display:inline-flex;align-items:center;gap:0.55rem;font-family:var(--fo);font-weight:600;font-size:0.8rem;letter-spacing:0.08em;text-transform:uppercase;background:transparent;color:#fff;padding:0.85rem 1.5rem;text-decoration:none;border:2px solid rgba(255,255,255,0.35);transition:all 0.2s}
.btn-pres:hover{border-color:#fff}

/* SERVICIOS */
.servicios{padding:5rem 2rem;background-color:#fff;background-image:url("../img/textura-papel.jpg");background-repeat:repeat;background-size:640px auto;}
.sec-title-wrap{text-align:center;margin-bottom:3rem}
.sec-title{font-family:var(--fo);font-weight:700;font-size:1.6rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--black);margin-bottom:0.6rem}
.sec-title-line{width:40px;height:3px;background:var(--red);margin:0 auto}
.srv-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem}
.srv-card{border:1px solid var(--border);text-align:center;overflow:hidden;background-color:#fff;background-image:url("../img/textura-papel.jpg");background-repeat:repeat;background-size:640px auto;transition:box-shadow 0.2s}
.srv-card:hover{box-shadow:0 4px 20px rgba(0,0,0,0.1)}
.srv-img-wrap{position:relative;aspect-ratio:4/3;overflow:hidden;display:flex;align-items:flex-end;justify-content:center}
.srv-img-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.ph3{background:linear-gradient(160deg,#1a1a1a 0%,#555 100%)}
.srv-img-ph svg{width:52px;height:52px;opacity:0.15;color:#fff}
.srv-icon-circle{position:absolute;bottom:-22px;left:50%;transform:translateX(-50%);width:48px;height:48px;border-radius:50%;background-color:#fff;background-image:url("../img/textura-papel.jpg");background-repeat:repeat;background-size:640px auto;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;z-index:2;box-shadow:0 2px 8px rgba(0,0,0,0.15)}
.srv-icon-circle svg{width:20px;height:20px;color:var(--black)}
.srv-body{padding:2rem 1.2rem 1.5rem;text-align:center}
.srv-name{font-family:var(--fo);font-size:0.95rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--black);margin-bottom:0.5rem;line-height:1.3}
.srv-desc{font-size:0.82rem;color:var(--gray);line-height:1.6;font-weight:300}

/* NOSOTROS */
.nosotros{padding:4.5rem 2rem;background:var(--dark);display:grid;grid-template-columns:1fr 1.4fr;gap:4rem;align-items:start;grid-template-rows:auto auto}
.nos-eyebrow{font-family:var(--fo);font-size:0.72rem;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;color:var(--red);display:flex;align-items:center;gap:0.7rem;margin-bottom:1rem}
.nos-eyebrow::before{content:'';width:22px;height:2px;background:var(--red)}
.nos-h2{font-family:var(--fo);font-weight:700;font-size:clamp(1.5rem,2.8vw,2.2rem);line-height:1;letter-spacing:0.03em;text-transform:uppercase;color:#fff;margin-bottom:1.2rem}
.nos-text{font-size:0.9rem;color:rgba(255,255,255,0.6);font-weight:300;line-height:1.8;margin-bottom:0.8rem}
.nos-text .red-txt{color:var(--red);font-weight:600}
.metales-row{display:flex;gap:1.5rem;justify-content:center;flex-wrap:wrap}
.metal-item{display:flex;flex-direction:column;align-items:center;gap:0.5rem}
.metal-circle{width:80px;height:80px;border-radius:50%;border:2px solid rgba(255,255,255,0.1)}
.mc1{background:radial-gradient(circle,#888 0%,#444 70%,#222 100%)}
.mc2{background:radial-gradient(circle,#ccc 0%,#aaa 50%,#888 100%)}
.mc3{background:radial-gradient(circle,#d4a800 0%,#b8860b 60%,#8B6914 100%)}
.mc4{background:radial-gradient(circle,#cd7f32 0%,#a0522d 60%,#7a3e1f 100%)}
.mc5{background:radial-gradient(circle,#bbb 0%,#999 50%,#666 100%)}
.mc6{background:radial-gradient(circle,#e0e0e0 0%,#c0c0c0 50%,#909090 100%)}
.metal-label{font-family:var(--fo);font-size:0.65rem;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;color:rgba(255,255,255,0.7);text-align:center}

/* VENTAJAS */
.ventajas{padding:3.5rem 2rem;background-color:#fff;background-image:url("../img/textura-papel.jpg");background-repeat:repeat;background-size:640px auto;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.vent-item{padding:2rem 1.5rem;border-right:1px solid var(--border);display:flex;gap:1rem;align-items:flex-start}
.vent-item:last-child{border-right:none}
.vent-icon svg{width:28px;height:28px;color:var(--red)}
.vent-title{font-family:var(--fo);font-size:0.78rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--black);margin-bottom:0.3rem;line-height:1.3}
.vent-desc{font-size:0.78rem;color:var(--gray);font-weight:300;line-height:1.5}

/* GALERÍA
   Las clases usan el prefijo ba- (before/after) y NO ad-: los bloqueadores de
   anuncios ocultan por regla cosmética cualquier elemento con clases ad-*, lo
   que hacía desaparecer la sección entera para quien lleva bloqueador. */
.galeria{padding:4.5rem 2rem;background-color:#fff;background-image:url("../img/textura-papel.jpg");background-repeat:repeat;background-size:640px auto;}
.ba-wrap{position:relative;margin-top:2.5rem}
.ba-carousel{position:relative;width:100%;height:420px;overflow:hidden;background:#111}
.ba-carousel img{object-fit:contain!important;background:#111}
.ba-slide{position:absolute;inset:0;opacity:0;transition:opacity 0.5s ease;pointer-events:none}
.ba-slide.active{opacity:1;pointer-events:auto}
.ba-caption{position:absolute;bottom:40px;left:0;right:0;text-align:center;font-family:var(--fo);font-size:0.85rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,0.6);padding:0.4rem 1rem}
.ba-tag{position:absolute;bottom:0;left:0;right:0;font-family:var(--fo);font-size:0.85rem;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;color:#fff;padding:0.55rem 1rem}
.ba-tag-a{background:rgba(0,0,0,0.75)}
.ba-tag-d{background:var(--red)}
.ba-dots{display:flex;justify-content:center;gap:0.5rem;padding:0.7rem 0;background-color:#f5f5f5;background-image:url("../img/textura-papel.jpg");background-repeat:repeat;background-size:640px auto;}
.ba-dot{width:10px;height:10px;border-radius:50%;background:#ccc;cursor:pointer;border:none;padding:0;transition:background 0.2s}
.ba-dot.active{background:var(--red)}
.ba-arrow{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;background:rgba(0,0,0,0.5);border:1px solid rgba(255,255,255,0.2);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:10;color:#fff;padding:0}
.ba-arrow:hover{background:var(--red);border-color:var(--red)}
.ba-arrow-l{left:10px}
.ba-arrow-r{right:10px}
.ba-arrow svg{width:18px;height:18px;pointer-events:none}
.gal-social{display:flex;align-items:center;justify-content:space-between;background-color:#f5f5f5;background-image:url("../img/textura-papel.jpg");background-repeat:repeat;background-size:640px auto;padding:1.5rem 2rem;margin-top:4px;flex-wrap:wrap;gap:1rem}
.gal-social-title{font-family:var(--fo);font-size:0.9rem;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;color:var(--black)}
.gal-social-sub{font-size:0.78rem;color:var(--gray);margin-top:0.1rem}
.gal-social-btns{display:flex;gap:0.6rem}
.btn-fb{display:inline-flex;align-items:center;gap:0.5rem;font-family:var(--fo);font-weight:600;font-size:0.75rem;letter-spacing:0.08em;text-transform:uppercase;background:#1877F2;color:#fff;padding:0.65rem 1.2rem;text-decoration:none}
.btn-ig{display:inline-flex;align-items:center;gap:0.5rem;font-family:var(--fo);font-weight:600;font-size:0.75rem;letter-spacing:0.08em;text-transform:uppercase;background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);color:#fff;padding:0.65rem 1.2rem;text-decoration:none}
.btn-fb svg,.btn-ig svg{width:13px;height:13px}

/* CONTACTO */
.contacto{display:grid;grid-template-columns:1fr 1fr;background-color:#fff;background-image:url("../img/textura-papel.jpg");background-repeat:repeat;background-size:640px auto;}
.ct-left{padding:4.5rem 2.5rem;border-right:1px solid var(--border)}
.ct-right{padding:4.5rem 2.5rem;background-color:#f5f5f5;background-image:url("../img/textura-papel.jpg");background-repeat:repeat;background-size:640px auto;}
.ct-eyebrow{font-family:var(--fo);font-size:0.7rem;font-weight:500;letter-spacing:0.2em;text-transform:uppercase;color:var(--red);margin-bottom:0.4rem}
.ct-h2{font-family:var(--fo);font-weight:700;font-size:1.6rem;letter-spacing:0.04em;text-transform:uppercase;color:var(--black);line-height:1;margin-bottom:0.2rem}
.ct-h2 .red{color:var(--red)}
.ct-sub{font-size:0.85rem;color:var(--gray);margin-bottom:2rem;font-weight:300}
.ci{display:flex;flex-direction:column}
.ci-row{display:flex;align-items:flex-start;gap:0.8rem;padding:0.9rem 0;border-bottom:1px solid var(--border)}
.ci-row:first-child{border-top:1px solid var(--border)}
.ci-ico svg{width:16px;height:16px;color:var(--red);margin-top:2px}
.ci-lbl{font-family:var(--fo);font-size:0.6rem;font-weight:600;letter-spacing:0.15em;text-transform:uppercase;color:var(--gray2);margin-bottom:0.1rem}
.ci-val{font-size:0.88rem;color:var(--black);line-height:1.4}
.ci-val a{color:var(--black);text-decoration:none}
.ci-val a:hover{color:var(--red)}
.ct-btns{display:flex;flex-direction:column;gap:0.5rem;margin-top:1.5rem}
.ct-btn{display:flex;align-items:center;gap:0.7rem;font-family:var(--fo);font-weight:600;font-size:0.82rem;letter-spacing:0.08em;text-transform:uppercase;padding:0.8rem 1.2rem;text-decoration:none;transition:all 0.2s;border:1px solid transparent}
.ct-btn svg{width:16px;height:16px;flex-shrink:0}
.ct-btn-wa{background:var(--red);color:#fff}
.ct-btn-wa:hover{background:var(--red-dark)}
.ct-btn-tel,.ct-btn-form{background:transparent;color:var(--black);border-color:var(--border)}
.ct-btn-tel:hover,.ct-btn-form:hover{border-color:var(--black)}
.mapa{width:100%;height:200px;background:var(--light2);border:1px solid var(--border);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;margin-top:1.5rem}
.mapa::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,0.04) 0,rgba(0,0,0,0.04) 1px,transparent 1px,transparent 28px),repeating-linear-gradient(90deg,rgba(0,0,0,0.04) 0,rgba(0,0,0,0.04) 1px,transparent 1px,transparent 28px)}
/* .mapa-pin era el marcador dibujado del mapa de relleno del HTML original.
   Ahora .mapa lleva el iframe real de Google Maps y no hay pin que estilar. */
.form-h3{font-family:var(--fo);font-weight:700;font-size:1.3rem;letter-spacing:0.04em;text-transform:uppercase;color:var(--black);margin-bottom:0.3rem}
.form-h3 .red{color:var(--red)}
.form-sub{font-size:0.83rem;color:var(--gray);margin-bottom:1.5rem}
/* Aquí estaban .frow .fg .fl .fi .fs .fta .fsub, el formulario escrito a mano
   del HTML original. Ese marcado ya no existe: el formulario lo pinta Fluent
   Forms desde un shortcode y se le da estilo en el bloque de añadidos, bajo
   .ct-right. Ningún marcado emitía ya estas clases. */

/* FOOTER */
footer{background:var(--black);padding:3.5rem 2rem 1.2rem;border-top:3px solid var(--red)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1.2fr 1.5fr;gap:2.5rem;margin-bottom:2.5rem}
.footer-desc{font-size:0.82rem;color:rgba(255,255,255,0.45);font-weight:300;line-height:1.7;margin:0.8rem 0 1rem}
.footer-soc{display:flex;gap:0.4rem}
.footer-soc a{width:30px;height:30px;border:1px solid rgba(255,255,255,0.12);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.5);text-decoration:none;transition:all 0.2s}
.footer-soc a:hover{background:var(--red);border-color:var(--red);color:#fff}
.footer-soc a svg{width:13px;height:13px}
.fc-h{font-family:var(--fo);font-size:0.7rem;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;color:#fff;margin-bottom:1rem;padding-bottom:0.5rem;border-bottom:2px solid var(--red);display:inline-block}
.fc-ul{list-style:none;display:flex;flex-direction:column;gap:0.4rem}
.fc-ul a{font-size:0.82rem;color:rgba(255,255,255,0.45);text-decoration:none;transition:color 0.2s;font-weight:300}
.fc-ul a:hover{color:#fff}
.fc-ci{display:flex;align-items:flex-start;gap:0.5rem;margin-bottom:0.6rem}
.fc-ci svg{width:13px;height:13px;color:var(--red);flex-shrink:0;margin-top:3px}
.fc-ci span,.fc-ci a{font-size:0.8rem;color:rgba(255,255,255,0.45);text-decoration:none;font-weight:300;line-height:1.5}
.fc-ci a:hover{color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.07);padding-top:1.2rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:0.8rem}
.footer-copy{font-size:0.72rem;color:rgba(255,255,255,0.22)}
.footer-legal{display:flex;gap:1.2rem}
.footer-legal a{font-size:0.72rem;color:rgba(255,255,255,0.22);text-decoration:none;transition:color 0.2s}
.footer-legal a:hover{color:#fff}

@media(max-width:1024px){.srv-grid{grid-template-columns:repeat(3,1fr)}.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:768px){nav{padding:0 1rem}.nav-links,.nav-flags{display:none}.hero-content{padding:3rem 1.2rem}.hero-visual{display:none}.servicios,.galeria{padding:3rem 1rem}.nosotros{grid-template-columns:1fr;gap:2rem;padding:3rem 1rem}.ventajas{grid-template-columns:1fr 1fr;padding:2.5rem 1rem}.contacto{grid-template-columns:1fr}.ct-left,.ct-right{padding:3rem 1.2rem}footer{padding:2.5rem 1rem 1rem}.footer-grid{grid-template-columns:1fr 1fr}.footer-bottom{flex-direction:column;text-align:center}}
@media(max-width:480px){.srv-grid{grid-template-columns:1fr}.ventajas{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}}

/* Fotos empresa */
.nos-fotos{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem}
.nos-foto-wrap{position:relative;overflow:hidden;border-radius:4px;aspect-ratio:7/5}
.nos-foto-wrap img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.4s}
.nos-foto-wrap:hover img{transform:scale(1.04)}
.nos-foto-wrap::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,transparent 50%,rgba(0,0,0,0.45) 100%)}

/* ==========================================================================
   AÑADIDOS DEL TEMA WORDPRESS
   Todo lo anterior procede del HTML original y no debe modificarse.
   Los estilos nuevos van a partir de aquí.
   ========================================================================== */

/* --- <picture> transparente para el layout ---
   pmp_imagen() envuelve cada <img> en un <picture> para servir WebP. Sin esto,
   <picture> es un elemento en línea y las reglas heredadas del HTML original
   (.ba-slide img, .srv-img-wrap img, .nos-foto-wrap img...) dejan de aplicarse:
   width:100% se calcula contra un contenedor de anchura indeterminada y la
   imagen colapsa a cero. display:contents saca al <picture> del árbol de
   maquetación y el <img> vuelve a ser hijo directo a efectos de CSS. */
picture{display:contents}

/* Respaldo por si display:contents no se aplicara. */
@supports not (display:contents){
  .ba-slide picture,.srv-img-wrap picture,.nos-foto-wrap picture{display:block;width:100%;height:100%}
}
/* La imagen del carrusel se posiciona contra .ba-slide sin depender del envoltorio. */
.ba-slide img{position:absolute;inset:0;width:100%;height:100%}

/* --- Accesibilidad --- */
.screen-reader-text{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100000;background:var(--red);color:#fff;padding:0.8rem 1.4rem;font-family:var(--fo);text-decoration:none}
.skip-link:focus{left:0}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* --- Submenú de servicios --- */
.nav-links li{position:relative}
.menu-item-has-children>a::after{content:'';display:inline-block;width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);margin-left:0.5rem}
.sub-menu{position:absolute;top:90px;left:0;min-width:270px;list-style:none;background:var(--dark);border-top:3px solid var(--red);box-shadow:0 8px 24px rgba(0,0,0,0.18);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s,transform .18s,visibility .18s;padding:0.4rem 0;z-index:1000}
.nav-links li:hover>.sub-menu,.nav-links li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.sub-menu a{height:auto;padding:0.75rem 1.3rem;font-size:0.78rem;font-weight:500;letter-spacing:0.06em;color:#e8e8e8;border-bottom:none;display:block;text-transform:none}
.sub-menu a:hover,.sub-menu .current-menu-item>a{color:#fff;background:var(--red);border-bottom-color:transparent}

/* --- Menú móvil (no existía en el HTML original) --- */
.nav-toggle{display:none;width:38px;height:38px;border:1px solid #ccc;background:transparent;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:4px;padding:0}
.nav-toggle span{display:block;width:18px;height:2px;background:#111;transition:transform .2s,opacity .2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media(max-width:1024px){
  .nav-toggle{display:flex}
  nav{flex-wrap:wrap}
  /* OJO: nav recibe un transform en línea desde main.js (ocultar al bajar).
     Un ancestro con transform crea un bloque contenedor, así que position:fixed
     aquí se resolvería contra la nav de 90px de alto y el menú quedaría
     comprimido en una franja diminuta. Con absolute lo posicionamos contra la
     propia nav de forma explícita, que es lo que queremos. */
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--dark);padding:1rem 0;max-height:calc(100vh - 90px);overflow-y:auto;overscroll-behavior:contain;z-index:998;box-shadow:0 12px 24px rgba(0,0,0,0.25)}
  .nav-links.is-open{display:flex}
  .nav-links>li{width:100%;border-bottom:1px solid rgba(255,255,255,0.08)}
  .nav-links a{height:auto;padding:1rem 1.5rem;color:#fff;border-bottom:none;width:100%}
  /* En escritorio el elemento activo va en rojo sobre la barra clara y se lee
     bien. Aquí el desplegable es oscuro (--dark) y ese mismo rojo baja a 3,2:1,
     por debajo del 4,5:1 que pide WCAG AA. Se invierte a blanco sobre rojo, que
     da 5:1 y es además el gesto que .sub-menu ya usa para lo mismo.

     No es solo legibilidad: sin el color:#fff, la regla de .sub-menu de más
     arriba dejaba su fondo rojo y esta le pisaba el color, así que un servicio
     activo salía en rojo sobre rojo. Invisible. */
  .nav-links a:hover,.nav-links .current-menu-item>a{color:#fff;background:var(--red);border-bottom-color:transparent}
  /* El contorno de foco global es rojo, que sobre el rojo del elemento activo
     no se vería. En el desplegable se pasa a blanco. */
  .nav-links a:focus-visible{outline-color:#fff}
  .sub-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border-top:none;background:rgba(0,0,0,0.25);min-width:0}
  .sub-menu a{padding-left:2.6rem;font-size:0.8rem}
  .menu-item-has-children>a::after{float:right;margin-top:0.5rem}
}

/* --- Enlaces de sección en la home --- */
.sec-link-wrap{text-align:center;margin-top:2.5rem}
.sec-link{display:inline-flex;align-items:center;gap:0.5rem;font-family:var(--fo);font-size:0.8rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--red);text-decoration:none;border-bottom:2px solid var(--red);padding-bottom:0.3rem;transition:gap .2s}
.sec-link:hover{gap:0.9rem}

/* --- Variante "nota de paso" del enlace de sección ---
   Solo en /contacto/, entre las migas y el bloque de contacto. Hereda .sec-link
   para no inventar un estilo nuevo, pero rebajado a propósito: justo debajo
   vienen el botón de WhatsApp y el de enviar, los dos en rojo sólido, y este
   enlace no debe pelear con ellos. Es un atajo, no una llamada a la acción.

   Qué se rebaja: se alinea a la izquierda con el mismo padding que las migas,
   para que se lea como continuación de esa banda de navegación; baja de 0.8 a
   0.72rem y de peso 600 a 500; y el subrayado pasa de 2px a 1px, que es lo que
   más lo alejaba de una nota y lo acercaba a un botón. */
.sec-nota{padding:1.1rem 2rem 0}
.sec-link-nota{font-size:0.72rem;font-weight:500;letter-spacing:0.08em;border-bottom-width:1px;padding-bottom:0.15rem;gap:0.45rem}

/* La flecha del tema apunta a la derecha; aquí el destino está más abajo. */
.sec-link-nota svg{transform:rotate(90deg);transition:transform .2s}
/* El gesto de .sec-link separa la flecha en horizontal, que con la flecha ya
   girada no diría nada. Se anula y se sustituye por un desplazamiento hacia
   abajo: tras el giro, el eje X de la flecha apunta al suelo. */
.sec-link-nota:hover{gap:0.45rem}
.sec-link-nota:hover svg{transform:rotate(90deg) translateX(3px)}

@media(max-width:768px){.sec-nota{padding:1rem 1rem 0}}
.srv-card-link{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit}

/* Aquí estaba .srv-more, el enlace de la parte inferior de la tarjeta. Repetía
   el nombre del servicio, que ya está en el h3 justo encima, y con tres columnas
   quedaba a un palmo del título en la misma tipografía: parecía un error.
   La tarjeta entera sigue siendo un enlace y el h3 con la palabra clave va
   dentro, así que la regla 5 se cumple igual.
   Como esa flecha era la señal de que la tarjeta se pulsa, se compensa aquí: el
   título pasa al rojo de marca al pasar por encima, que es el mismo gesto que
   ya usan el menú y las migas. */
.srv-card:hover .srv-name{color:var(--red)}
.srv-name{transition:color .2s}

/* --- Rejilla de servicios: tres columnas ---
   El heredado la deja en cinco columnas, y con seis servicios eso da una fila
   de cinco y una tarjeta suelta debajo. A tres columnas salen dos filas
   completas. Las reglas del bloque heredado (main.css:52, 178 y 180) no se
   tocan: se anulan desde aquí, que es lo que permite la regla 1.

   El orden importa. La consulta de 1024px va antes que la de 480px porque las
   dos casan en una pantalla estrecha y, con la misma especificidad, gana la
   última: si estuvieran al revés, en el móvil saldrían dos columnas. */
.srv-grid{grid-template-columns:repeat(3,1fr)}
@media(max-width:1024px){.srv-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.srv-grid{grid-template-columns:1fr}}

/* .srv-name pasa de div a h3 para que la portada tenga jerarquía de
   encabezados. El aspecto no cambia: el reinicio global de main.css:1 ya deja
   los márgenes a cero, y aquí se fijan tamaño y peso para no heredar los del
   navegador. Se declara explícitamente aunque coincida con lo heredado, porque
   lo que antes era el estilo de un div ahora tiene que ganarle a un encabezado. */
h3.srv-name{font-size:0.95rem;font-weight:700;line-height:1.3;margin:0 0 0.5rem}

/* Mismo motivo en los otros dos títulos de bloque que pasan a h3: los seis de
   "¿A quién servimos?" y el del bloque de redes de la galería. Cada uno rotula
   contenido propio dentro de una sección que ya tiene su h2.

   Ojo con line-height: ninguna de las dos clases lo declara, así que hoy heredan
   el 1.6 del body. Un h3 traería el "normal" del navegador, en torno a 1.2, y el
   texto se apretaría. Es la única propiedad que el reinicio global no cubre. */
h3.cliente-title{font-size:0.9rem;font-weight:700;line-height:1.6;margin:0 0 0.5rem}
h3.gal-social-title{font-size:0.9rem;font-weight:700;line-height:1.6;margin:0}

/* --- Páginas interiores --- */
.page-hero{margin-top:90px;background:var(--dark);background-image:linear-gradient(rgba(17,18,20,.72),rgba(17,18,20,.72));color:#fff;padding:3.5rem 2rem;text-align:center;background-size:cover;background-position:center}
.page-hero h1{font-family:var(--fo);font-size:2.3rem;font-weight:700;letter-spacing:0.02em;line-height:1.15;text-transform:uppercase}
.page-hero .page-hero-sub{font-size:0.95rem;font-weight:300;color:#ccc;max-width:640px;margin:1rem auto 0}
.breadcrumbs{margin-top:90px;padding:0.9rem 2rem;font-size:0.78rem;color:var(--gray);border-bottom:1px solid var(--border)}
.breadcrumbs a{color:var(--gray);text-decoration:none}
.breadcrumbs a:hover{color:var(--red)}
.page-hero+.breadcrumbs{margin-top:0}
.entry{max-width:820px;margin:0 auto;padding:3.5rem 2rem}
.entry h2{font-family:var(--fo);font-size:1.6rem;font-weight:600;text-transform:uppercase;letter-spacing:0.03em;margin:2.4rem 0 1rem}
.entry h3{font-family:var(--fo);font-size:1.15rem;font-weight:600;margin:1.8rem 0 0.7rem}
.entry p,.entry li{font-size:0.95rem;line-height:1.75;color:#333}
.entry p{margin-bottom:1.1rem}
.entry ul,.entry ol{margin:0 0 1.4rem 1.3rem}
.entry li{margin-bottom:0.45rem}
.entry a{color:var(--red)}
.entry img{max-width:100%;height:auto}
.entry strong{font-weight:600}

/* --- Rejilla de trabajos --- */
.trabajos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;max-width:1200px;margin:0 auto;padding:3.5rem 2rem}
.trabajo-card{border:1px solid var(--border);background:#fff;text-decoration:none;color:inherit;display:block;transition:box-shadow .2s}
.trabajo-card:hover{box-shadow:0 4px 20px rgba(0,0,0,0.08)}
.trabajo-card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.trabajo-card-body{padding:1.2rem}
.trabajo-card-title{font-family:var(--fo);font-size:0.95rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em}
.trabajo-card-meta{font-size:0.78rem;color:var(--gray);margin-top:0.35rem}
@media(max-width:900px){.trabajos-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.trabajos-grid{grid-template-columns:1fr}.page-hero h1{font-size:1.6rem}}

/* --- Enlace de la diapositiva a su ficha ---
   Envuelve el contenido de .ba-slide. Va en posición absoluta ocupando toda la
   diapositiva para que sea el bloque contenedor de la imagen y de los rótulos,
   que ya venían posicionados: así el enlace no altera nada de la maqueta. */
.ba-enlace{position:absolute;inset:0;display:block;color:inherit;text-decoration:none}

/* --- Comparativa "antes / después" de la ficha de trabajo ---
   Antes reutilizaba .trabajos-grid, la rejilla de tres columnas del listado, y
   con dos fotos quedaban descolocadas contra el borde izquierdo. Ancho máximo y
   padding lateral iguales a .entry, para que las fotos queden a ras del texto.
   auto-fit adapta el número de columnas al de estados presentes, sin ramificar
   la plantilla: tres fotos dan tres columnas, dos dan dos, y una sola se estira
   a todo el ancho en lugar de quedarse a media anchura contra el margen. */
.trabajo-comparativa{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem;max-width:820px;margin:0 auto;padding:3.5rem 2rem 0}
.trabajo-comparativa img{width:100%;height:auto;display:block}
@media(max-width:600px){.trabajo-comparativa{grid-template-columns:1fr}}

/* --- Visor de imagen ampliada ---
   El botón .trabajo-zoom lo crea assets/js/main.js al cargar: sin JavaScript no
   existe, y las fotos se quedan como imágenes normales. Se restablece el aspecto
   del botón para que no altere la rejilla. */
.trabajo-zoom{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.trabajo-zoom img{transition:opacity .2s}
.trabajo-zoom:hover img{opacity:0.9}

.visor{position:fixed;inset:0;z-index:9999;background:rgba(17,18,20,0.94);display:flex;align-items:center;justify-content:center;padding:4.5rem 5rem}
/* Necesario: display:flex ganaría al [hidden]{display:none} del navegador. */
.visor[hidden]{display:none}
.visor-figura{margin:0;display:flex;flex-direction:column;gap:1rem;max-width:100%;max-height:100%}
.visor-img{display:block;margin:0 auto;max-width:100%;max-height:78vh;width:auto;height:auto;object-fit:contain}
.visor-pie{font-family:var(--fo);font-size:0.8rem;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;color:var(--white);text-align:center}
.visor button{display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.1);color:var(--white);border:1px solid rgba(255,255,255,0.25);cursor:pointer;font-family:var(--fo);line-height:1;padding:0;transition:background .2s,border-color .2s}
.visor button:hover{background:var(--red);border-color:var(--red)}
.visor-cerrar{position:absolute;top:1.5rem;right:1.5rem;width:44px;height:44px;font-size:1.6rem}
.visor-flecha{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;font-size:2rem}
.visor-prev{left:1.5rem}
.visor-sig{right:1.5rem}
@media(max-width:600px){
  .visor{padding:4rem 0.75rem 5.5rem}
  .visor-img{max-height:65vh}
  /* En pantalla estrecha las flechas estorban sobre la foto: bajan al pie. */
  .visor-flecha{top:auto;bottom:1rem;transform:none}
  .visor-prev{left:50%;margin-left:-52px}
  .visor-sig{right:50%;margin-right:-52px}
}

/* --- Formulario del plugin dentro de la caja de contacto ---
   Fluent Forms pinta con su azul (#1a7efb) el botón de envío y el borde de foco
   de los campos, en ambos casos a través de su variable --fluentform-primary.
   El botón, además, con un estilo en línea cuyo selector
   (form.fluent_form_1 .ff-btn-submit:not(.ff_btn_no_style)) tiene más
   especificidad que el nuestro, así que subir la nuestra sería una carrera que
   se pierde en cuanto el plugin cambie algo.
   Redefinir su variable dentro de .ct-right desactiva el azul en los dos sitios
   a la vez, sin duplicar el color: sale de --red, que es la fuente única. */
.ct-right{--fluentform-primary:var(--red)}
.ct-right .ff-el-group{margin-bottom:1rem}
.ct-right .ff-el-input--label label{font-family:var(--fo);font-size:0.72rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--gray)}
.ct-right input[type=text],.ct-right input[type=email],.ct-right input[type=tel],.ct-right select,.ct-right textarea{width:100%;background:#fff;border:1px solid var(--border);padding:0.75rem 0.9rem;font-family:var(--fb);font-size:0.88rem;color:#111}
.ct-right textarea{min-height:110px;resize:vertical}
.ct-right button[type=submit],.ct-right input[type=submit]{width:100%;background:var(--red);color:#fff;border:none;padding:0.95rem;font-family:var(--fo);font-size:0.85rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;cursor:pointer;transition:background .2s}
/* El ancestro form no está de adorno: sin él esta regla empata en especificidad
   (0,3,1) con la que Fluent Forms inyecta en línea y pierde por orden de
   aparición, así que el botón no llegaba a oscurecerse. Con form sube a (0,3,2)
   y gana sin depender del orden. Se mantiene input[type=submit] por si el
   formulario lo sirve otro plugin. */
.ct-right form button[type=submit]:hover,.ct-right form input[type=submit]:hover{background:var(--red-dark)}
/* Nota de privacidad, justo debajo de la casilla del RGPD. La clase se pone en
   el campo HTML del formulario, en Fluent Forms; el tema solo aporta el estilo.
   Medido sobre el DOM real de /contacto/:
   - El sangrado alinea la nota con el TEXTO de la casilla, no con la casilla.
     La casilla mide 13px y la separa del texto un espacio de 3,91px, así que el
     texto arranca a 16,91px del borde. calc(13px + 0.25rem) da 17px: 0,09px de
     desvío, y deja a la vista de dónde sale cada sumando.
   - .ff-el-group ya aporta 20px de margen inferior y aquí no colapsan, se suman.
     Restarlos deja el hueco real en los 0,4rem que buscamos, para que la nota se
     lea como continuación de la casilla y no como un párrafo suelto. */
.ct-right .ff-privacidad-nota{margin-top:calc(0.4rem - 20px);padding-left:calc(13px + 0.25rem);font-family:var(--fb);font-size:0.68rem;line-height:1.6;color:var(--gray)}
.ct-right .ff-privacidad-nota a{color:var(--red);text-decoration:underline;text-underline-offset:2px}
.ct-right .ff-privacidad-nota a:hover{color:var(--red-dark)}

/* --- Gestor de consentimiento de cookies ---
   Va en position:fixed y se imprime ya en el marcado, oculto con [hidden]: al
   aparecer no desplaza nada, así que no penaliza el CLS.
   Los dos botones de decisión son deliberadamente equivalentes: mismo tamaño,
   misma tipografía, mismo peso y contraste comparable. Aceptar lleva el rojo de
   marca y rechazar va en blanco con borde, pero ninguno es más fácil de pulsar
   ni destaca más que el otro. Rechazar tiene que costar lo mismo que aceptar. */
.cc{position:fixed;bottom:0;left:0;right:0;z-index:9998;background:var(--dark);color:#ddd;box-shadow:0 -4px 24px rgba(0,0,0,0.3)}
.cc[hidden]{display:none}
.cc-caja{max-width:1200px;margin:0 auto;padding:1.2rem 1.5rem;display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.cc-texto{font-size:0.82rem;line-height:1.6;flex:1 1 320px;margin:0}
.cc-texto a{color:#fff;text-decoration:underline;text-underline-offset:2px}

.cc-acciones{display:flex;gap:0.6rem;flex:0 0 auto}
.cc-btn{font-family:var(--fo);font-size:0.78rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;padding:0.7rem 1.6rem;border:2px solid transparent;cursor:pointer;min-width:140px;transition:background .2s,color .2s,border-color .2s}
.cc-btn-si{background:var(--red);border-color:var(--red);color:#fff}
.cc-btn-si:hover{background:var(--red-dark);border-color:var(--red-dark)}
.cc-btn-no{background:#fff;border-color:#fff;color:var(--black)}
.cc-btn-no:hover{background:transparent;color:#fff}

/* "Preferencias" sí es secundario: no es una decisión, es un desvío. */
.cc-config{background:none;border:none;color:#bbb;font-family:var(--fb);font-size:0.78rem;text-decoration:underline;text-underline-offset:2px;cursor:pointer;padding:0.4rem;flex:0 0 auto}
.cc-config:hover{color:#fff}

.cc-detalle{flex:1 1 100%;border-top:1px solid rgba(255,255,255,0.15);padding-top:1rem;display:flex;flex-direction:column;gap:0.9rem}
.cc-detalle[hidden]{display:none}
.cc-cat{display:flex;gap:0.7rem;align-items:flex-start;font-size:0.8rem;line-height:1.55;cursor:pointer}
.cc-cat input{margin-top:0.2rem;flex:0 0 auto;accent-color:var(--red)}
.cc-cat strong{display:block;font-family:var(--fo);font-size:0.75rem;letter-spacing:0.08em;text-transform:uppercase;color:#fff;margin-bottom:0.15rem}
.cc-btn-guardar{background:transparent;border-color:#fff;color:#fff;align-self:flex-start;min-width:0}
.cc-btn-guardar:hover{background:#fff;color:var(--black)}

@media(max-width:700px){
  .cc-caja{padding:1rem}
  .cc-acciones{flex:1 1 100%}
  .cc-btn{flex:1 1 0;min-width:0;padding:0.7rem 0.6rem}
}

/* El enlace del pie que reabre el banner: es un <button>, así que hay que
   quitarle el aspecto de botón para que iguale a los enlaces legales. */
.footer-legal-btn{background:none;border:none;padding:0;font-family:inherit;font-size:inherit;color:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:2px}

/* --- Sección "¿A quién servimos?" (antes con estilos en línea) --- */
.clientes{padding:5rem 2rem;background-color:#fff;background-image:url("../img/textura-papel.jpg");background-repeat:repeat;background-size:640px auto}
.clientes-sub{text-align:center;color:var(--gray);font-size:0.9rem;margin:1rem auto 0;max-width:600px}
.clientes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3rem;max-width:1200px;margin-left:auto;margin-right:auto}
.cliente-card{border:1px solid var(--border);padding:2rem 1.5rem;text-align:center;background:#fff;transition:box-shadow 0.2s}
.cliente-card:hover{box-shadow:0 4px 20px rgba(0,0,0,0.08)}
.cliente-ico{width:56px;height:56px;background:rgba(212,43,43,0.08);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1.2rem;color:var(--red)}
.cliente-title{font-family:var(--fo);font-size:0.9rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:#111;margin-bottom:0.5rem}
.cliente-desc{font-size:0.82rem;color:var(--gray);line-height:1.6}
@media(max-width:900px){.clientes-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.clientes-grid{grid-template-columns:1fr}}

/* --- Contenedor del mapa --- */
.ct-mapa{width:100%;height:220px;margin-top:1.5rem;overflow:hidden;border:1px solid var(--border)}
.ct-mapa iframe{border:0;display:block;width:100%;height:220px}
/* Marcador de posición mientras no hay consentimiento para incrustados. Ocupa
   exactamente el alto del iframe para que cargar el mapa no mueva la página. */
.ct-mapa-aviso{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:0.5rem;padding:1rem;background-color:var(--light);background-image:url("../img/textura-papel.jpg");background-repeat:repeat;background-size:640px auto}
.ct-mapa-ico{color:var(--red);line-height:0}
.ct-mapa-txt{font-size:0.78rem;color:var(--gray);max-width:42ch;margin:0;line-height:1.5}
.ct-mapa-btn{font-family:var(--fo);font-size:0.75rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;background:var(--red);color:#fff;border:none;padding:0.55rem 1.3rem;cursor:pointer;transition:background .2s}
.ct-mapa-btn:hover{background:var(--red-dark)}
.ct-mapa-dir{font-size:0.76rem;color:var(--gray);line-height:1.5;margin:0}
.ct-mapa-dir a{color:var(--red)}