/* CSS común del vertical Rotulación de Vehículos Barcelona */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Segoe UI,sans-serif;color:#222;overflow-x:hidden}

/* ===== HEADER ===== */

header{
position:fixed;
top:0;
left:0;
width:100%;
padding:18px 6%;
display:flex;
justify-content:space-between;
align-items:center;
background:rgba(0,0,0,.85);
z-index:1000;
}

/* LOGO */

.logo img{
height:65px;
width:auto;
display:block;
}

/* MENÚ DESKTOP */

.desktop-menu{
display:flex;
align-items:center;
}

.desktop-menu a{
color:white;
text-decoration:none;
margin-left:25px;
font-weight:500;
font-size:15px;
}

/* MENÚ MÓVIL BOTÓN */

.mobile-toggle{
display:none;
color:white;
font-size:30px;
cursor:pointer;
}

/* ===== RESPONSIVE HEADER ===== */

@media(max-width:900px){

header{
padding:14px 20px;
}

.logo img{
height:48px;
}

.desktop-menu{
display:none;
}

.mobile-toggle{
display:block;
}

}



.section{padding:90px 8%;}


/* ===== SLIDER OPTIMIZADO ===== */

.hero-slider{
position:relative;
width:100%;
height:100vh;
overflow:hidden;
}

.slide{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:white;
opacity:0;
transition:opacity 1s ease-in-out;
overflow:hidden;
}

.slide.active{
opacity:1;
}

/* Imagen como fondo real optimizado */
.slide img{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
z-index:0;
}

/* Overlay oscuro para contraste */
.slide::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.55);
z-index:1;
}

/* Contenido por encima de imagen y overlay */
.slide-content{
position:relative;
z-index:2;
max-width:900px;
padding:0 20px;
}

/* Botones */
.btn{
background:#f97316;
color:white;
padding:14px 28px;
text-decoration:none;
border-radius:5px;
display:inline-block;
margin-top:35px;
}

/* Controles laterales */
.slider-controls{
position:absolute;
top:50%;
width:100%;
display:flex;
justify-content:space-between;
transform:translateY(-50%);
padding:0 25px;
z-index:3;
}

.slider-controls button{
background:rgba(0,0,0,0.6);
color:white;
border:none;
padding:14px 18px;
cursor:pointer;
}

/* Dots */
.slider-dots{
position:absolute;
bottom:30px;
width:100%;
text-align:center;
z-index:3;
}

.slider-dots span{
display:inline-block;
width:12px;
height:12px;
margin:0 6px;
background:white;
opacity:.5;
border-radius:50%;
cursor:pointer;
transition:opacity .3s ease, background .3s ease;
}

.slider-dots span.active{
opacity:1;
background:#f97316;
}


/* GALERÍA */

.gallery-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:20px;
}
.gallery-grid img{width:100%;display:block}


/* ===== GALERÍA PREMIUM SEO ===== */

.gallery-section{
background:#f4f4f4;
text-align:center;
}

.gallery-section h2{
text-align:center;
margin-bottom:20px;
}

@media(max-width:768px){
.gallery-section h2{
font-size:26px;
line-height:1.3;
}
}

.gallery-intro{
max-width:900px;
margin:20px auto 60px auto;
text-align:center;
color:#555;
line-height:1.7;
}

.projects-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
}

.project-item{
position:relative;
overflow:hidden;
border-radius:14px;
box-shadow:0 15px 40px rgba(0,0,0,0.15);
}

.project-item img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:transform 1.2s ease;
}

.project-overlay{
position:absolute;
bottom:0;
left:0;
width:100%;
padding:25px;
background:linear-gradient(
to top,
rgba(0,0,0,0.7),
rgba(0,0,0,0.2),
transparent
);
color:white;
opacity:0;
transition:opacity .4s ease;
}

.project-item:hover .project-overlay{
opacity:1;
}


@media(max-width:768px){

.project-overlay{
position:relative;
opacity:1;
background:white;
color:#222;
}

.project-overlay p{
color:#2f2f2f;
}

.project-overlay a{
color:#f97316;
}

.project-item{
display:flex;
flex-direction:column;
}

.project-item img{
height:auto;
}

.project-overlay{
padding:20px;
}

}

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

.project-overlay p{
font-size:14px;
line-height:1.6;
color:#ddd;
}

.project-overlay a{
display:inline-block;
margin-top:10px;
color:#f97316;
text-decoration:none;
font-weight:600;
font-size:14px;
}

.project-item:hover img{
transform:scale(1.08);
}

/* RESPONSIVE */

@media(max-width:1100px){
.projects-grid{
grid-template-columns:repeat(2,1fr);
}
}

@media(max-width:768px){
.projects-grid{
grid-template-columns:1fr;
}
}


/* FAQ */

.faq-item{margin-bottom:20px}

/* FOOTER */

footer{
background:#000;
color:white;
padding:80px 8%;
}
.footer-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:40px;
}

/* ===== MENÚ RESPONSIVE ===== */

.mobile-toggle{
display:none;
color:white;
font-size:28px;
cursor:pointer;
}

.mobile-menu{
position:fixed;
top:0;
left:0;
width:100%;
height:100vh;
background:#000;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
transform:translateY(-100%);
transition:transform .4s ease;
z-index:999;
}

.mobile-menu a{
color:white;
text-decoration:none;
font-size:28px;
margin:20px 0;
}

.mobile-menu.active{
transform:translateY(0);
}

/* RESPONSIVE */

@media(max-width: 900px){

.desktop-menu{
display:none;
}

.mobile-toggle{
display:block;
}

}

/* ===== SERVICIOS PREMIUM ===== */

.service-row{
display:grid;
grid-template-columns:1fr 1fr;
min-height:500px;
}

.service-text{
background:#000;
color:white;
display:flex;
flex-direction:column;
justify-content:center;
padding:80px;
}

.service-subtitle{
margin-bottom:25px;
font-weight:400;
color:#f97316;
}

.service-text p{
margin-bottom:18px;
line-height:1.6;
color:#ddd;
}

.service-highlight{
font-weight:600;
color:#fff;
margin-top:10px;
}

.service-cta{
margin-top:25px;
}

.service-cta a{
display:inline-block;
color:#f97316;
text-decoration:none;
font-weight:600;
border-bottom:1px solid rgba(249,115,22,0.5);
padding-bottom:3px;
transition:all .3s ease;
}

.service-cta a:hover{
color:white;
border-color:#f97316;
}

.service-image-wrapper{
position:relative;
overflow:hidden;
}

.service-image-wrapper img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:transform 1.2s ease;
}

/* Iluminación suave */

.service-image-wrapper::after{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:linear-gradient(
to right,
rgba(0,0,0,0.35),
rgba(0,0,0,0.1)
);
pointer-events:none;
}

/* Hover elegante escritorio */

@media(min-width:901px){
.service-row:hover .service-image-wrapper img{
transform:scale(1.05);
}
}

/* ===== RESPONSIVE ===== */

@media(max-width:900px){

.service-row{
grid-template-columns:1fr;
min-height:auto;
}

.service-text{
order:1;
padding:50px 25px;
}

.service-image-wrapper{
order:2;
height:280px;
}

.service-text h3{
font-size:22px;
margin-bottom:15px;
}

.service-text p{
font-size:15px;
line-height:1.7;
}

}


/* ===== ANIMACIÓN SUAVE AL APARECER ===== */

.reveal{
opacity:0;
transform:translateY(60px);
transition:all 1.2s ease;
}

.reveal.active{
opacity:1;
transform:translateY(0);
}

/* ===== RESPONSIVE ===== */

@media(max-width:900px){

.service-row{
grid-template-columns:1fr;
}

.service-text{
order:1;
padding:60px 30px;
}

.service-image-wrapper{
order:2;
height:300px;
}

}


/* ===== CTA PREMIUM ===== */

.cta-section{
background:linear-gradient(135deg,#000 0%,#111 100%);
color:white;
padding:120px 8%;
text-align:center;
position:relative;
overflow:hidden;
}

.cta-container{
max-width:900px;
margin:0 auto;
}

.cta-section h2{
font-size:36px;
margin-bottom:25px;
}

.cta-section p{
color:#ccc;
margin-bottom:35px;
line-height:1.7;
}

.cta-buttons{
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
}

.btn-secondary{
background:transparent;
border:2px solid #f97316;
color:#f97316;
}

.btn-secondary:hover{
background:#f97316;
color:white;
}

/* Responsive CTA */

@media(max-width:900px){

.cta-section{
padding:80px 30px;
}

.cta-section h2{
font-size:26px;
}

}

/* ===== CONTACTO PREMIUM ===== */

.contact-section{
position:relative;
background:url('../../img/backgrounds/contacto-rotulacion-vehiculos-barcelona.webp') center center/cover no-repeat;
padding:140px 8%;
color:white;
overflow:hidden;
}

.contact-overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:linear-gradient(
135deg,
rgba(0,0,0,0.75) 0%,
rgba(0,0,0,0.55) 40%,
rgba(0,0,0,0.35) 100%
);
z-index:1;
}

.contact-container{
position:relative;
z-index:2;
max-width:700px;
margin:0 auto;
text-align:center;
}

.contact-section h2{
font-size:36px;
margin-bottom:25px;
}

.contact-intro{
color:#ddd;
margin-bottom:40px;
line-height:1.7;
}

.contact-form{
display:flex;
flex-direction:column;
gap:18px;
}

.contact-form input,
.contact-form textarea{
padding:14px;
border:none;
border-radius:6px;
font-size:16px;
}

.contact-form input:focus,
.contact-form textarea:focus{
outline:none;
box-shadow:0 0 0 2px #f97316;
}

@media(max-width:900px){

.contact-section{
padding:100px 30px;
}

.contact-section h2{
font-size:26px;
}

}


.form-legal{
margin-top:15px;
font-size:13px;
color:#ccc;
text-align:left;
}

.legal-checkbox{
display:flex;
align-items:flex-start;
gap:8px;
margin-bottom:8px;
}

.legal-checkbox input{
margin-top:4px;
}

.form-legal a{
color:#f97316;
text-decoration:none;
}

.form-legal a:hover{
text-decoration:underline;
}

.legal-info{
font-size:12px;
line-height:1.5;
color:#aaa;
}

/* ===== SEPARADOR ENTRE SECCIONES ===== */

.section-divider{
height:3px;
width:100%;
background:#f97316;
box-shadow:0 0 15px rgba(249,115,22,0.7);
}


@media(min-width:901px){
.contact-section{
background-attachment:fixed;
}
}

.testimonials-intro{
margin-top:20px;
margin-bottom:40px;
color:#ccc;
font-size:18px;
text-align:center;
}


/* ===== TESTIMONIOS PREMIUM ===== */

.testimonials-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:35px;
margin-top:50px;
}

.testimonial{
background:white;
padding:30px;
border-radius:14px;
box-shadow:0 12px 35px rgba(0,0,0,0.15);
transition:all .35s ease;
position:relative;
}

.testimonial:hover{
transform:translateY(-6px);
box-shadow:0 18px 45px rgba(0,0,0,0.25);
}

.testimonial .stars{
color:#f97316;
font-size:18px;
letter-spacing:3px;
margin-bottom:15px;
}

.testimonial p{
color:#444;
line-height:1.7;
margin-bottom:18px;
}

.testimonial-author{
display:flex;
align-items:center;
gap:12px;
margin-top:10px;
}

.author-avatar{
width:42px;
height:42px;
border-radius:50%;
background:#f97316;
display:flex;
align-items:center;
justify-content:center;
color:white;
font-weight:600;
font-size:16px;
}

.author-info strong{
display:block;
color:#111;
}

.author-info span{
font-size:13px;
color:#666;
}

.verified{
margin-top:8px;
font-size:12px;
color:#888;
}


/* ===== FAQ PREMIUM V2 ===== */

#faq h2{
text-align:center;
margin-bottom:20px;
}

.faq-section{
background:#0e0e0e;
color:white;
padding-top:120px;
padding-bottom:120px;
}

.faq-wrapper{
max-width:1000px;
margin:0 auto;
}

.faq-intro{
text-align:center;
color:#aaa;
margin-bottom:50px;
}

.faq-item{
background:#151515;
border-radius:12px;
margin-bottom:20px;
overflow:hidden;
transition:all .3s ease;
border:1px solid rgba(255,255,255,0.05);
}

.faq-item:hover{
border-color:#f97316;
}

.faq-question{
width:100%;
background:none;
border:none;
color:white;
padding:22px 25px;
font-size:18px;
display:flex;
justify-content:space-between;
align-items:center;
cursor:pointer;
font-weight:500;
}

.faq-question i{
color:#f97316;
font-style:normal;
transition:transform .3s ease;
}

.faq-answer{
max-height:0;
overflow:hidden;
transition:max-height .4s ease;
padding:0 25px;
}

.faq-answer p{
color:#ccc;
padding-bottom:25px;
line-height:1.7;
}

.faq-item.active .faq-answer{
max-height:400px;
}

.faq-item.active .faq-question i{
transform:rotate(45deg);
}


/* ===== FOOTER PREMIUM ===== */

.footer-premium{
background:#0a0a0a;
color:#ccc;
padding:80px 8% 40px 8%;
}

.footer-container{
display:grid;
grid-template-columns:1.2fr 1fr 1.3fr;
gap:60px;
margin-bottom:50px;
align-items:flex-start;
}

.footer-logo{
max-width:210px;
margin-bottom:22px;
filter:brightness(1.05);
}

.footer-col h3{
color:white;
margin-bottom:20px;
font-size:18px;
}

.footer-col ul{
list-style:none;
padding:0;
}

.footer-col ul li{
margin-bottom:10px;
}

.footer-col a{
color:#ccc;
text-decoration:none;
transition:color .3s ease;
}

.footer-col a:hover{
color:#f97316;
}

.footer-claim{
line-height:1.6;
color:#aaa;
}

.footer-bottom{
border-top:1px solid rgba(255,255,255,0.08);
padding-top:30px;
text-align:center;
font-size:14px;
color:#777;
}

/* ===== FOOTER CONTACT PREMIUM ===== */

.footer-contact-item{
display:flex;
align-items:flex-start;
gap:12px;
margin-bottom:18px;
font-size:14px;
}

.footer-icon{
font-size:18px;
margin-top:2px;
}

.footer-phone{
font-size:18px;
color:#f97316;
font-weight:600;
text-decoration:none;
}

.footer-phone:hover{
opacity:.8;
}

/* Mini mapa visual */

.footer-map{
margin-top:20px;
height:90px;
max-width:260px;
background:linear-gradient(135deg,#1a1a1a,#111);
border-radius:10px;
position:relative;
overflow:hidden;
box-shadow:0 5px 20px rgba(0,0,0,0.3);
}

.footer-map::before{
content:"";
position:absolute;
width:200%;
height:200%;
background:radial-gradient(circle at center,
rgba(249,115,22,0.15),
transparent 60%);
top:-50%;
left:-50%;
animation:mapGlow 6s infinite linear;
}

@keyframes mapGlow{
0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
}

.map-dot{
position:absolute;
top:50%;
left:50%;
width:10px;
height:10px;
background:#f97316;
border-radius:50%;
transform:translate(-50%,-50%);
box-shadow:0 0 12px #f97316;
}

.footer-group{
margin-top:18px;
font-size:13px;
color:#888;
line-height:1.5;
}

.footer-services-info{
margin-top:25px;
font-size:14px;
color:#888;
line-height:1.6;
}

.footer-legal{
margin-top:25px;
}

.footer-legal h3{
color:white;
font-size:16px;
margin-bottom:12px;
}

.footer-legal ul{
list-style:none;
padding:0;
}

.footer-legal li{
margin-bottom:6px;
}

.footer-legal a{
color:#aaa;
text-decoration:none;
font-size:14px;
transition:color .3s ease;
}

.footer-legal a:hover{
color:#f97316;
}

/* ===== MAPA BARCELONA FOOTER ===== */

.footer-map-barcelona{
margin-top:20px;
padding:15px;
background:linear-gradient(135deg,#1a1a1a,#111);
border-radius:12px;
text-align:center;
box-shadow:0 5px 20px rgba(0,0,0,0.4);
}

.footer-map-barcelona svg{
width:100%;
height:120px;
display:block;
}

.map-label{
margin-top:8px;
font-size:12px;
color:#999;
}

.slide-title{
font-size:38px;
line-height:1.2;
font-weight:700;
margin-bottom:20px;
}


/* ===== DIVISORES FOOTER PREMIUM ===== */

.footer-container{
position:relative;
}

.footer-container .footer-col{
position:relative;
padding-right:30px;
}

.footer-container .footer-col:not(:last-child)::after{
content:"";
position:absolute;
top:0;
right:0;
width:1px;
height:100%;
background:linear-gradient(
to bottom,
transparent,
rgba(255,255,255,0.08),
transparent
);
}

.footer-seo-local{
margin-top:25px;
font-size:14px;
color:#888;
line-height:1.6;
}

.footer-seo-local strong{
color:#ccc;
}

/* ===== BLOQUE SEO INTRO PREMIUM ===== */

.seo-intro-container{
display:grid;
grid-template-columns:1.1fr 0.9fr;
gap:60px;
max-width:1200px;
margin:0 auto;
align-items:center;
}

.seo-intro-text h1{
font-size:38px;
line-height:1.2;
margin-bottom:22px;
}

.seo-intro-text h2{
margin-top:30px;
margin-bottom:15px;
font-size:26px;
}

.seo-intro-text p{
line-height:1.8;
margin-bottom:18px;
color:#333;
}

.seo-intro-image img{
width:100%;
height:auto;
border-radius:14px;
box-shadow:0 20px 40px rgba(0,0,0,0.15);
}

.intro-mini-cta{
margin-top:25px;
}

/* Responsive */

@media(max-width:900px){

.seo-intro-container{
grid-template-columns:1fr;
}

.seo-intro-image{
order:-1;
}

}


/* ===== COOKIE BAR ===== */

.cookie-banner{
position:fixed;
bottom:0;
left:0;
width:100%;
background:#1c1c1c; /* Gris antracita, no negro */
color:#f1f1f1;
padding:14px 20px;
font-size:14px;
z-index:9999;
display:none;
box-shadow:0 -5px 20px rgba(0,0,0,0.4); /* Separación visual */
border-top:1px solid rgba(249,115,22,0.4); /* Línea naranja sutil */
}

.cookie-content{
max-width:1200px;
margin:0 auto;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
flex-wrap:wrap;
}

.cookie-banner a{
color:#f97316;
text-decoration:none;
}

.cookie-banner button{
background:#f97316;
color:white;
border:none;
padding:8px 16px;
border-radius:4px;
cursor:pointer;
font-size:13px;
}

.cookie-banner button:hover{
opacity:.9;
}

@media(max-width:768px){
.cookie-content{
flex-direction:column;
text-align:center;
}
}


/* ===== CONTADOR AUTORIDAD ===== */

.stats-container{
display:flex;
justify-content:center;
gap:60px;
flex-wrap:wrap;
margin-top:40px;
margin-bottom:40px;
}

.stat-item{
text-align:center;
}

.stat-number{
font-size:42px;
font-weight:700;
color:#f97316;
}

.stat-label{
font-size:14px;
color:#bbb;
margin-top:5px;
}


/* ===== HERO TRUST BAR ===== */

.hero-trust{
margin-top:18px;
font-size:14px;
opacity:.9;
display:flex;
justify-content:center;
gap:18px;
flex-wrap:wrap;
}

.hero-trust span{
display:flex;
align-items:center;
gap:6px;
}

.hero-trust strong{
color:#f97316;
font-weight:600;
}


/* ===== CTA HERO ANIMATION ===== */

.hero-slider .btn{
animation:ctaPulse 3.5s infinite;
}

@keyframes ctaPulse{
0%{
transform:scale(1);
box-shadow:0 0 0 rgba(249,115,22,0.5);
}

50%{
transform:scale(1.04);
box-shadow:0 8px 25px rgba(249,115,22,0.5);
}

100%{
transform:scale(1);
box-shadow:0 0 0 rgba(249,115,22,0);
}
}


/* ===== SCROLL INDICATOR ===== */

.scroll-indicator{
position:absolute;
bottom:20px;
left:50%;
transform:translateX(-50%);
z-index:3;
opacity:.8;
}

.scroll-indicator span{
display:block;
width:24px;
height:40px;
border:2px solid white;
border-radius:20px;
position:relative;
}

.scroll-indicator span::after{
content:"";
position:absolute;
top:8px;
left:50%;
width:4px;
height:8px;
background:white;
border-radius:2px;
transform:translateX(-50%);
animation:scrollAnim 2s infinite;
}

@keyframes scrollAnim{
0%{opacity:0;top:6px;}
50%{opacity:1;}
100%{opacity:0;top:18px;}
}


/* ===== BLOQUE SEO LOCAL CON IMAGEN ===== */

.seo-local-section{
background:url('../../img/backgrounds/rotulacion-vehiculos-barcelona-bg.webp') center center / cover no-repeat;
color:#ddd;
padding:120px 8%;
position:relative;
overflow:hidden;
}

.seo-local-section p{
line-height:1.9;
margin-bottom:20px;
}

/* overlay oscuro para legibilidad */

.seo-local-section::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:linear-gradient(
135deg,
rgba(0,0,0,0.85) 0%,
rgba(0,0,0,0.75) 40%,
rgba(0,0,0,0.65) 100%
);
z-index:1;
}

/* contenido por encima del overlay */

.seo-local-container{
max-width:1000px;
margin:0 auto;
position:relative;
z-index:2;
}

.seo-local-section h2{
text-align:center;
margin-bottom:30px;
color:white;
}

.seo-local-section h3{
margin-top:40px;
margin-bottom:15px;
color:#f97316;
}

.seo-local-section p{
line-height:1.8;
margin-bottom:18px;
color:#ccc;
}


@media(max-width:768px){

header{
padding:14px 20px;
}

.logo img{
height:48px;
}

.slide-title{
font-size:28px;
line-height:1.2;
}

.hero-trust{
font-size:12px;
gap:10px;
}

}


html,body{
max-width:100%;
overflow-x:hidden;
}


.mobile-call{
display:none;
}

@media(max-width:768px){

.mobile-call{
position:fixed;
bottom:20px;
left:50%;
transform:translateX(-50%);
background:#f97316;
color:white;
padding:14px 26px;
border-radius:40px;
font-weight:600;
text-decoration:none;
box-shadow:0 10px 30px rgba(0,0,0,0.35);
z-index:999;
}

}

body{
font-family:Segoe UI,sans-serif;
}

@media(max-width:900px){

.footer-container{
grid-template-columns:1fr;
gap:40px;
}

.footer-container .footer-col{
padding-right:0;
}

.footer-container .footer-col::after{
display:none;
}

}

/* CSS complementario página Rotulación de Furgonetas */
*{margin:0;padding:0;box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}
body{font-family:Segoe UI,sans-serif;color:#222;background:#fff;line-height:1.6}
header{position:fixed;top:0;left:0;width:100%;padding:18px 6%;display:flex;justify-content:space-between;align-items:center;background:rgba(0,0,0,.85);z-index:1000}
.logo img{height:65px;width:auto;display:block}.desktop-menu{display:flex;align-items:center}.desktop-menu a{color:white;text-decoration:none;margin-left:25px;font-weight:500;font-size:15px}.mobile-toggle{display:none;color:white;font-size:30px;cursor:pointer}.mobile-menu{position:fixed;top:0;left:0;width:100%;height:100vh;background:#000;display:flex;flex-direction:column;justify-content:center;align-items:center;transform:translateY(-100%);transition:transform .4s ease;z-index:999}.mobile-menu a{color:white;text-decoration:none;font-size:28px;margin:20px 0}.mobile-menu.active{transform:translateY(0)}
.section{padding:120px 8%}.btn{background:#f97316;color:white;padding:14px 28px;text-decoration:none;border-radius:5px;display:inline-block;margin-top:35px;border:none;cursor:pointer;font-size:16px}.btn-secondary{background:transparent;border:2px solid #f97316;color:#f97316}.btn-secondary:hover{background:#f97316;color:white}
.hero-service{position:relative;min-height:92vh;display:flex;align-items:center;justify-content:center;text-align:center;color:white;overflow:hidden;background:#000}.hero-service img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:0}.hero-service::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,rgba(0,0,0,.78),rgba(0,0,0,.55));z-index:1}.hero-content{position:relative;z-index:2;max-width:980px;padding:120px 20px 70px}.hero-content h1{font-size:48px;line-height:1.15;margin-bottom:24px}.hero-content p{font-size:20px;color:#eee;max-width:860px;margin:0 auto}.hero-trust{margin-top:22px;font-size:14px;opacity:.95;display:flex;justify-content:center;gap:18px;flex-wrap:wrap}.hero-trust strong{color:#f97316}.breadcrumb{font-size:14px;margin-bottom:22px;color:#ddd}.breadcrumb a{color:#f97316;text-decoration:none}
.intro-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;max-width:1200px;margin:0 auto;align-items:center}.intro-text h2,.section-title{font-size:34px;margin-bottom:25px}.intro-text p{margin-bottom:18px;color:#333;text-align:justify}.intro-image img{width:100%;height:auto;border-radius:14px;box-shadow:0 20px 40px rgba(0,0,0,.16)}
.benefits-section{background:#0e0e0e;color:white}.benefits-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;max-width:1200px;margin:45px auto 0}.benefit-card{background:#151515;padding:32px;border-radius:14px;border:1px solid rgba(255,255,255,.06);box-shadow:0 12px 35px rgba(0,0,0,.25)}.benefit-card h3{color:#f97316;margin-bottom:14px;font-size:20px}.benefit-card p{color:#ccc;text-align:justify}
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;max-width:1200px;margin:45px auto 0}.process-step{padding:28px;border-radius:14px;background:#f5f5f5;border:1px solid #e8e8e8}.step-number{font-size:38px;font-weight:700;color:#f97316;margin-bottom:12px}.process-step h3{margin-bottom:10px;font-size:19px}.process-step p{color:#555}
.types-section{background:#f4f4f4}.types-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;max-width:1200px;margin:45px auto 0}.type-card{background:white;border-radius:14px;overflow:hidden;box-shadow:0 15px 40px rgba(0,0,0,.12)}.type-card img{width:100%;height:240px;object-fit:cover;display:block}.type-card-content{padding:28px}.type-card h3{margin-bottom:12px}.type-card p{color:#555;text-align:justify}
.cta-section{background:linear-gradient(135deg,#000 0%,#111 100%);color:white;padding:120px 8%;text-align:center}.cta-container{max-width:900px;margin:0 auto}.cta-section h2{font-size:36px;margin-bottom:25px}.cta-section p{color:#ccc;margin-bottom:18px;text-align:justify}.cta-buttons{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;margin-top:15px}
.gallery-section{background:#fff;text-align:center}.gallery-intro{max-width:900px;margin:20px auto 60px;color:#555;line-height:1.7}.projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}.project-item{position:relative;overflow:hidden;border-radius:14px;box-shadow:0 15px 40px rgba(0,0,0,.15)}.project-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s ease}.project-overlay{position:absolute;bottom:0;left:0;width:100%;padding:25px;background:linear-gradient(to top,rgba(0,0,0,.75),rgba(0,0,0,.25),transparent);color:white;opacity:0;transition:opacity .4s ease;text-align:left}.project-item:hover .project-overlay{opacity:1}.project-item:hover img{transform:scale(1.08)}.project-overlay h3{font-size:18px;margin-bottom:8px}.project-overlay p{font-size:14px;color:#ddd}.project-overlay a{display:inline-block;margin-top:10px;color:#f97316;text-decoration:none;font-weight:600;font-size:14px}
.local-section{background:url('../../img/backgrounds/rotulacion-vehiculos-barcelona-bg.webp') center center/cover no-repeat;color:#ddd;padding:120px 8%;position:relative;overflow:hidden}.local-section::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,rgba(0,0,0,.86),rgba(0,0,0,.72));z-index:1}.local-container{max-width:1000px;margin:0 auto;position:relative;z-index:2}.local-section h2{text-align:center;margin-bottom:30px;color:white;font-size:34px}.local-section h3{margin-top:35px;margin-bottom:15px;color:#f97316}.local-section p{line-height:1.8;margin-bottom:18px;color:#ccc;text-align:justify}
.faq-section{background:#0e0e0e;color:white;padding-top:120px;padding-bottom:120px}.faq-wrapper{max-width:1000px;margin:0 auto}.faq-section h2{text-align:center;margin-bottom:20px}.faq-intro{text-align:center;color:#aaa;margin-bottom:50px}.faq-item{background:#151515;border-radius:12px;margin-bottom:20px;overflow:hidden;transition:all .3s ease;border:1px solid rgba(255,255,255,.05)}.faq-item:hover{border-color:#f97316}.faq-question{width:100%;background:none;border:none;color:white;padding:22px 25px;font-size:18px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-weight:500;text-align:left}.faq-question i{color:#f97316;font-style:normal;transition:transform .3s ease}.faq-answer{max-height:0;overflow:hidden;transition:max-height .4s ease;padding:0 25px}.faq-answer p{color:#ccc;padding-bottom:25px;line-height:1.7}.faq-item.active .faq-answer{max-height:480px}.faq-item.active .faq-question i{transform:rotate(45deg)}
.contact-section{position:relative;background:url('../../img/backgrounds/contacto-rotulacion-vehiculos-barcelona.webp') center center/cover no-repeat;padding:140px 8%;color:white;overflow:hidden}.contact-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,rgba(0,0,0,.78),rgba(0,0,0,.42));z-index:1}.contact-container{position:relative;z-index:2;max-width:700px;margin:0 auto;text-align:center}.contact-section h2{font-size:36px;margin-bottom:25px}.contact-intro{color:#ddd;margin-bottom:40px;line-height:1.7}.contact-form{display:flex;flex-direction:column;gap:18px}.contact-form input,.contact-form textarea{padding:14px;border:none;border-radius:6px;font-size:16px}.contact-form input:focus,.contact-form textarea:focus{outline:none;box-shadow:0 0 0 2px #f97316}.form-legal{margin-top:15px;font-size:13px;color:#ccc;text-align:left}.legal-checkbox{display:flex;align-items:flex-start;gap:8px;margin-bottom:8px}.legal-checkbox input{margin-top:4px}.form-legal a{color:#f97316;text-decoration:none}.legal-info{font-size:12px;line-height:1.5;color:#aaa}
.footer-premium{background:#0a0a0a;color:#ccc;padding:80px 8% 40px}.footer-container{display:grid;grid-template-columns:1.2fr 1fr 1.3fr;gap:60px;margin-bottom:50px;align-items:flex-start;position:relative}.footer-logo{max-width:210px;margin-bottom:22px}.footer-col{position:relative;padding-right:30px}.footer-col:not(:last-child)::after{content:"";position:absolute;top:0;right:0;width:1px;height:100%;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.08),transparent)}.footer-col h3{color:white;margin-bottom:20px;font-size:18px}.footer-col ul{list-style:none;padding:0}.footer-col li{margin-bottom:10px}.footer-col a{color:#ccc;text-decoration:none;transition:color .3s ease}.footer-col a:hover{color:#f97316}.footer-claim,.footer-group,.footer-services-info,.footer-seo-local{line-height:1.6;color:#aaa;margin-top:18px;font-size:14px;text-align:justify}.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding-top:30px;text-align:center;font-size:14px;color:#777}.footer-contact-item{display:flex;align-items:flex-start;gap:12px;margin-bottom:18px;font-size:14px}.footer-phone{font-size:18px;color:#f97316;font-weight:600;text-decoration:none}.footer-map-barcelona{margin-top:20px;padding:15px;background:linear-gradient(135deg,#1a1a1a,#111);border-radius:12px;text-align:center;box-shadow:0 5px 20px rgba(0,0,0,.4)}.footer-map-barcelona svg{width:100%;height:120px;display:block}.map-label{margin-top:8px;font-size:12px;color:#999}
.cookie-banner{position:fixed;bottom:0;left:0;width:100%;background:#1c1c1c;color:#f1f1f1;padding:14px 20px;font-size:14px;z-index:9999;display:none;box-shadow:0 -5px 20px rgba(0,0,0,.4);border-top:1px solid rgba(249,115,22,.4)}.cookie-content{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}.cookie-banner a{color:#f97316;text-decoration:none}.cookie-banner button{background:#f97316;color:white;border:none;padding:8px 16px;border-radius:4px;cursor:pointer;font-size:13px}.mobile-call{display:none}.reveal{opacity:0;transform:translateY(60px);transition:all 1.2s ease}.reveal.active{opacity:1;transform:translateY(0)}
@media(min-width:901px){.contact-section{background-attachment:fixed}}
@media(max-width:1100px){.projects-grid,.benefits-grid,.types-grid{grid-template-columns:repeat(2,1fr)}.process-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){header{padding:14px 20px}.logo img{height:48px}.desktop-menu{display:none}.mobile-toggle{display:block}.hero-content h1{font-size:32px}.hero-content p{font-size:17px}.section{padding:80px 30px}.intro-grid,.benefits-grid,.types-grid,.projects-grid,.process-grid,.footer-container{grid-template-columns:1fr}.intro-image{order:-1}.cta-section{padding:80px 30px}.cta-section h2,.contact-section h2,.local-section h2{font-size:26px}.contact-section{padding:100px 30px}.footer-col{padding-right:0}.footer-col::after{display:none}.project-overlay{position:relative;opacity:1;background:white;color:#222}.project-overlay p{color:#333}.mobile-call{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#f97316;color:white;padding:14px 26px;border-radius:40px;font-weight:600;text-decoration:none;box-shadow:0 10px 30px rgba(0,0,0,.35);z-index:999;display:block}.cookie-content{flex-direction:column;text-align:center}}


/* ===== AJUSTES FINALES CLUSTER / CARGA MODULAR ===== */

/* Corrige el exceso de aire del primer bloque de la home aunque tenga padding inline */
section.section[style*="background:#f9f9f9"]{
padding-top:80px!important;
padding-bottom:70px!important;
}

/* Compacta el bloque introductorio de la home en escritorio */
.seo-intro-container{
gap:48px;
}

.seo-intro-text p{
line-height:1.72;
margin-bottom:15px;
}

/* Evita que el H1 de la home se vea desproporcionado en pantallas grandes */
.seo-intro-text h1{
font-size:clamp(34px,3vw,38px);
line-height:1.18;
}

/* Equilibra la imagen del bloque inicial de la home */
.seo-intro-image img{
max-height:620px;
object-fit:cover;
}

/* Equilibra el primer bloque de páginas de servicio como rotulación de furgonetas */
.intro-grid{
align-items:center;
gap:50px;
}

.intro-text{
display:flex;
flex-direction:column;
justify-content:center;
}

.intro-text p{
line-height:1.72;
margin-bottom:16px;
}

.intro-image img{
max-height:620px;
object-fit:cover;
}

/* CTA contextual si se añade en contenido */
.intro-mini-cta{
margin-top:20px;
}

/* Reduce ligeramente bloques muy largos sin perder presencia visual */
.seo-local-section,
.local-section{
padding-top:100px;
padding-bottom:100px;
}

/* Asegura carga correcta de backgrounds desde /assets/css/style.css */
.contact-section{
background-image:url('../../img/backgrounds/contacto-rotulacion-vehiculos-barcelona.webp');
}

.seo-local-section,
.local-section{
background-image:url('../../img/backgrounds/rotulacion-vehiculos-barcelona-bg.webp');
}

/* Ajustes responsive */
@media(max-width:900px){
section.section[style*="background:#f9f9f9"]{
padding-top:70px!important;
padding-bottom:60px!important;
}

.seo-intro-container,
.intro-grid{
gap:32px;
}

.seo-intro-text h1{
font-size:30px;
line-height:1.22;
}

.seo-intro-image img,
.intro-image img{
max-height:none;
}

.seo-local-section,
.local-section{
padding-top:80px;
padding-bottom:80px;
}
}