/* ===== GLOBAL | RESET Y BASE ===== */

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
font-family:Segoe UI,sans-serif;
color:#222;
overflow-x:hidden;
background:#fff;
line-height:1.65;
}
img{
max-width:100%;
display:block;
}
a{
text-decoration:none;
}
.section{
padding:120px 8%;
}
.container{
max-width:1200px;
margin:auto;
}
.section-title{
font-size:38px;
margin-bottom:20px;
text-align:center;
}
.section-intro{
max-width:900px;
margin:0 auto 45px auto;
text-align:center;
line-height:1.8;
color:#555;
}

/* ===== GLOBAL | BOTONES ===== */

.btn{
background:#f97316;
color:#fff;
padding:14px 28px;
text-decoration:none;
border-radius:6px;
display:inline-block;
transition:all .3s ease;
border:none;
cursor:pointer;
}
.btn:hover{
transform:translateY(-2px);
}
.btn-secondary{
background:transparent;
border:2px solid #f97316;
color:#f97316;
}
.btn-secondary:hover{
background:#f97316;
color:#fff;
}

/* ===== GLOBAL | HEADER Y NAVEGACIÓN ===== */

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

header nav a{
color:#fff;
text-decoration:none;
margin-left:25px;
font-weight:500;
}

header a{
color:#fff;
text-decoration:none;
margin-left:25px;
}

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

.mobile-toggle{
display:none;
color:#d1d5db;
font-size:34px;
line-height:1;
cursor:pointer;
font-weight:400;
background:none;
border:none;
box-shadow:none;
}

.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:#fff;
text-decoration:none;
font-size:28px;
margin:20px 0;
}

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

/* ===== GLOBAL | TRUST BAR ===== */

.trust-bar{
background:#111;
color:#fff;
padding:22px 8%;
}
.trust-container{
display:flex;
justify-content:center;
align-items:center;
gap:40px;
flex-wrap:wrap;
max-width:1200px;
margin:auto;
}
.trust-item{
display:flex;
align-items:center;
gap:10px;
font-size:16px;
color:#ddd;
}
.trust-icon{
color:#f97316;
font-size:18px;
}
.trust-item strong{
color:#fff;
}

/* ===== GLOBAL | BREADCRUMBS ===== */

.breadcrumbs{
padding:26px 8%;
background:#111;
border-top:1px solid rgba(255,255,255,.05);
border-bottom:1px solid rgba(255,255,255,.05);
}
.breadcrumbs .container{
font-size:14px;
color:#bbb;
}
.breadcrumbs a{
color:#f97316;
text-decoration:none;
}
.breadcrumbs span{
margin:0 8px;
color:#666;
}

/* ===== BLOG / ARTÍCULOS | ESTRUCTURA COMPARTIDA ===== */

.blog-shell{
padding:90px 8% 60px;
background:#fff;
}

.blog-shell-fullwidth{
padding-top:0;
}

.blog-layout{
display:grid;
grid-template-columns:minmax(0,1fr) 320px;
gap:48px;
align-items:start;
max-width:1200px;
margin:0 auto;
}

.blog-article{
min-width:0;
}

.blog-article article{
font-size:18px;
color:#2a2a2a;
}

.blog-article p{
margin-bottom:22px;
}

.blog-article h2{
font-size:34px;
line-height:1.2;
margin:56px 0 18px;
color:#111;
}

.blog-article h3{
font-size:25px;
line-height:1.25;
margin:36px 0 14px;
color:#111;
}

.blog-article ul{
padding-left:22px;
margin:18px 0 26px;
}

.blog-article li{
margin-bottom:10px;
}

.blog-article a{
color:#f97316;
text-decoration:none;
font-weight:600;
}

.blog-article a:hover{
text-decoration:underline;
}

.blog-lead{
font-size:22px;
line-height:1.65;
color:#111;
}

.article-card{
background:#fff;
border:1px solid #ececec;
border-radius:18px;
box-shadow:0 15px 40px rgba(0,0,0,.05);
padding:28px;
margin-bottom:28px;
}

.pull-quote{
background:#111;
color:#fff;
border-left:5px solid #f97316;
padding:28px;
border-radius:16px;
margin:36px 0;
font-size:22px;
line-height:1.6;
box-shadow:0 18px 40px rgba(0,0,0,.12);
}

.article-cta{
margin:52px 0 20px;
padding:38px;
border-radius:22px;
background:linear-gradient(135deg,#0d0d0d 0%,#1a1a1a 100%);
color:#fff;
box-shadow:0 20px 44px rgba(0,0,0,.18);
}

.article-cta h2{
margin-top:0;
color:#fff;
}

.article-cta p{
color:#d7d7d7;
}

.article-cta .btn{
color:#fff !important;
}

.article-cta .btn.btn-secondary{
color:#f97316 !important;
}

.article-fullwidth{
max-width:1200px;
margin:0 auto;
}

.article-fullwidth-inner{
max-width:860px;
}

.blog-sidebar{
display:flex;
flex-direction:column;
gap:22px;
}

/* ===== BLOG / ARTÍCULOS | SIDEBAR COMPARTIDA ===== */

.blog-layout aside{
display:flex;
flex-direction:column;
gap:22px;
}

.sidebar-box{
background:#0f0f0f;
color:#fff;
border-radius:18px;
padding:24px;
box-shadow:0 12px 28px rgba(0,0,0,.12);
}

.sidebar-box h3{
font-size:22px;
line-height:1.25;
margin:0 0 16px 0;
color:#fff;
}

.sidebar-box p{
color:#d8d8d8;
line-height:1.75;
margin:0 0 18px 0;
font-size:15px;
}

.sidebar-box ul{
list-style:none;
padding:0;
margin:0;
}

.sidebar-box ul li{
margin-bottom:12px;
padding-bottom:12px;
border-bottom:1px solid rgba(255,255,255,.08);
line-height:1.6;
}

.sidebar-box ul li:last-child{
margin-bottom:0;
padding-bottom:0;
border-bottom:none;
}

.sidebar-box a{
color:#fff;
text-decoration:none;
}

.sidebar-box ul li a{
color:#fff;
transition:color .3s ease;
}

.sidebar-box a:hover,
.sidebar-box ul li a:hover{
color:#f97316;
}

.sidebar-cta{
background:linear-gradient(135deg,#000 0%,#1b1b1b 100%);
border:1px solid rgba(249,115,22,.2);
}

.sidebar-cta .btn{
width:100%;
text-align:center;
}

.sidebar-benefits ul li{
color:#e6e6e6;
}

.sidebar-applications ul li,
.sidebar-mini-links ul li{
line-height:1.65;
}

.sidebar-mini-links a{
color:#fff;
transition:color .3s ease;
}

.sidebar-mini-links a:hover{
color:#f97316;
}

.sidebar-project img{
width:100%;
height:auto;
display:block;
border-radius:14px;
margin-bottom:18px;
}

.sidebar-project .btn{
margin-top:6px;
}

/* ===== BLOG / ARTÍCULOS | RELACIONADOS GENÉRICOS ===== */

.related-posts{
background:#f7f7f7;
padding:100px 8%;
}

.related-posts h2{
text-align:center;
font-size:36px;
margin-bottom:16px;
}

.related-posts-intro{
text-align:center;
max-width:800px;
margin:0 auto 46px;
color:#666;
}

.related-grid{
max-width:1200px;
margin:0 auto;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:26px;
}

.related-card{
background:#fff;
border-radius:18px;
overflow:hidden;
box-shadow:0 14px 34px rgba(0,0,0,.08);
border:1px solid #ececec;
display:flex;
flex-direction:column;
}

.related-card img{
width:100%;
display:block;
object-fit:cover;
}

.related-card-content{
padding:24px;
display:flex;
flex-direction:column;
height:100%;
}

.related-card h3{
font-size:22px;
margin-bottom:12px;
line-height:1.3;
}

.related-card p{
color:#666;
margin-bottom:16px;
line-height:1.7;
}

.related-card a{
color:#f97316;
font-weight:600;
}

/* ===== VINILOS | RELACIONADOS ===== */

.vinilos-related-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:28px;
max-width:1200px;
margin:0 auto;
align-items:start;
}

.vinilos-related-card{
background:#fff;
border-radius:18px;
overflow:hidden;
box-shadow:0 12px 28px rgba(0,0,0,.08);
display:flex;
flex-direction:column;
height:100%;
}

.vinilos-related-card img{
width:100%;
aspect-ratio:16/10;
object-fit:cover;
display:block;
}

.vinilos-related-card-content{
padding:20px 18px 18px 18px;
display:flex;
flex-direction:column;
gap:12px;
flex:1;
}

.vinilos-related-card-content h3{
font-size:28px;
line-height:1.2;
margin:0;
color:#111;
}

.vinilos-related-card-content p{
font-size:16px;
line-height:1.7;
margin:0;
color:#555;
}

.vinilos-related-card-content a{
display:inline-block;
margin-top:auto;
color:#f97316;
font-weight:600;
text-decoration:none;
}

.vinilos-related-card-content a:hover{
opacity:.85;
}

/* ===== VINILOS | ESTRUCTURA COMPLEMENTARIA ===== */

.key-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:18px;
margin:28px 0 10px;
}

.key-box{
background:#fafafa;
border:1px solid #eee;
border-radius:16px;
padding:24px 18px;
text-align:center;
box-shadow:0 10px 26px rgba(0,0,0,.04);
}

.key-box strong{
display:block;
font-size:18px;
line-height:1.3;
margin-bottom:10px;
color:#111;
}

.types-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:18px;
margin:24px 0 6px;
}

.type-box{
background:#fafafa;
border:1px solid #eee;
border-radius:18px;
padding:26px 22px;
box-shadow:0 10px 24px rgba(0,0,0,.04);
}

.type-box h3{
margin:0 0 12px 0 !important;
font-size:22px !important;
line-height:1.25 !important;
}

.type-box p{
margin-bottom:0 !important;
}

/* ===== GLOBAL | FAQ ===== */

.faq-section{
background:#0e0e0e;
color:#fff;
padding-top:100px;
padding-bottom:100px;
}
.faq-wrapper{
max-width:1000px;
margin:0 auto;
}
.faq-section h2{
text-align:center;
margin-bottom:20px;
font-size:36px;
}
.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:#fff;
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.8;
}
.faq-item.active .faq-answer{
max-height:420px;
}
.faq-item.active .faq-question i{
transform:rotate(45deg);
}

/* ===== GLOBAL | CONTACTO ===== */

.contact-section{
position:relative;
background:url('/img/backgrounds/contacto-rotulacion-barcelona.webp') center center/cover no-repeat;
padding:140px 8%;
color:#fff;
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,.4));
z-index:1;
}

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

.contact-section h2,
.contact-container h2{
font-size:38px;
margin-bottom:18px;
}

.contact-intro{
color:#ddd;
line-height:1.8;
margin-bottom:35px;
text-align:justify;
}

.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:10px;
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;
}

/* ===== GLOBAL | FOOTER ===== */

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

.footer-container{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:50px;
margin-bottom:50px;
}

.footer-logo{
max-width:160px;
margin-bottom:20px;
}

.footer-col h3{
color:#fff;
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;
text-align:justify;
}

.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;
}

.footer-group{
margin-top:18px;
font-size:13px;
color:#888;
line-height:1.5;
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;
}

/* ===== GLOBAL | DIVIDER ===== */

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

/* ===== GLOBAL | COOKIES ===== */

.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:#fff;
border:none;
padding:8px 16px;
border-radius:4px;
cursor:pointer;
font-size:13px;
}

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

/* ===== GLOBAL | FLOTANTES ===== */

.whatsapp-float{
position:fixed;
bottom:25px;
right:25px;
width:60px;
height:60px;
background:#25D366;
color:#fff;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:28px;
text-decoration:none;
box-shadow:0 10px 25px rgba(0,0,0,.3);
z-index:999;
}

.whatsapp-float:hover{
transform:scale(1.08);
}

.mobile-call{
position:fixed;
bottom:0;
left:0;
width:100%;
background:#f97316;
text-align:center;
padding:14px;
display:none;
z-index:999;
}

.mobile-call a{
color:#fff;
font-size:18px;
font-weight:600;
text-decoration:none;
}

/* ===== GLOBAL | PÁGINAS LEGALES ===== */

.legal-container{
max-width:900px;
margin:80px auto;
padding:0 20px;
}

.legal-container h1{
font-size:36px;
margin-bottom:25px;
color:#111;
}

.legal-container h2{
font-size:24px;
margin-top:35px;
margin-bottom:15px;
color:#111;
}

.legal-container p,
.legal-container li{
line-height:1.8;
color:#444;
margin-bottom:14px;
}

.legal-container ul{
padding-left:20px;
margin-bottom:20px;
}

/* ===== GLOBAL | ANCLAS MENÚ ===== */

:root{
--anchor-offset-desktop:10px;
}

@media(max-width:768px){
:root{
--anchor-offset-mobile:36px;
}
}

@media(min-width:769px){
html{
scroll-padding-top:var(--anchor-offset-desktop);
}

#servicios,
#galeria-rotulacion,
#testimonios,
#faq,
#contacto,
#rotulos-luminosos-led,
#letras-corporeas,
#vinilos-comerciales,
#senaletica-corporativa,
#lonas-gran-formato,
#decoracion-exterior-interior,
#stands-ferias{
scroll-margin-top:var(--anchor-offset-desktop);
}
}

@media(max-width:768px){
html{
scroll-padding-top:var(--anchor-offset-mobile);
}

#servicios,
#galeria-rotulacion,
#testimonios,
#faq,
#contacto,
#rotulos-luminosos-led,
#letras-corporeas,
#vinilos-comerciales,
#senaletica-corporativa,
#lonas-gran-formato,
#decoracion-exterior-interior,
#stands-ferias{
scroll-margin-top:var(--anchor-offset-mobile);
}
}

/* ===== RESPONSIVE | TABLET ===== */

@media(max-width:1100px){
.blog-layout{
grid-template-columns:1fr;
}
.related-grid{
grid-template-columns:repeat(2,1fr);
}
.vinilos-related-grid{
grid-template-columns:repeat(2,1fr);
}
.key-grid{
grid-template-columns:repeat(2,1fr);
}
}

/* ===== RESPONSIVE | MENÚ / CONTACTO ===== */

@media(max-width:900px){
.desktop-menu{
display:none;
}
.mobile-toggle{
display:block;
}
.contact-section{
padding:100px 30px;
}
.contact-section h2,
.contact-container h2{
font-size:30px;
}
}

/* ===== RESPONSIVE | MÓVIL GENERAL ===== */

@media(max-width:768px){
.section{
padding:90px 30px;
}
.section-title{
font-size:30px;
}
.trust-container{
flex-direction:column;
gap:12px;
}
.related-grid{
grid-template-columns:1fr;
}
.vinilos-related-grid{
grid-template-columns:1fr;
}
.cookie-content{
flex-direction:column;
text-align:center;
}
.mobile-call{
display:block;
}
.legal-container h1{
font-size:30px;
}
.legal-container h2{
font-size:22px;
}
.key-grid{
grid-template-columns:1fr;
}
.types-grid{
grid-template-columns:1fr;
}
}

/* ===== RESPONSIVE | AJUSTES MÓVIL DE CABECERA Y TITULARES ===== */

@media(max-width:768px){
header{
padding:18px 8%;
}

.logo img{
height:64px;
width:auto;
max-width:100%;
}

.mobile-toggle{
font-size:30px;
}

h1,
h2{
line-height:1.12;
letter-spacing:-0.01em;
}

.seo-intro-text h1,
.faq-wrapper h2,
.gallery-section h2,
.cta-section h2,
.contact-section h2,
#servicios > h2,
#testimonios h2,
#faq h2{
line-height:1.12;
margin-bottom:18px;
}

.seo-intro-text h1{
font-size:34px;
}

.seo-intro-text h2,
.gallery-section h2,
.cta-section h2,
.contact-section h2,
#servicios > h2,
#testimonios h2,
#faq h2{
font-size:26px;
}

.faq-intro,
.gallery-intro,
.contact-intro{
line-height:1.6;
}
}

/* ===== RESPONSIVE | SIDEBAR BLOG ===== */

@media(max-width:1024px){
.blog-layout aside{
margin-top:20px;
}
}