/* =====================================================
   SERVICES
   ===================================================== */

.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:justify;
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-text-idg p{
margin-bottom:18px;
line-height:1.6;
color:#cccccc;
}

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


/* =================================
SERVICIOS BORDE GRIS
================================= */


/* IMAGEN */

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

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

/* cards servicios */

.service{
background:#f4f4f4;
padding:35px;
border-radius:12px;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
transition:all .3s ease;
}

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

.service h3{
margin-bottom:10px;
}


/* =====================================================
   CTA SECTION
   ===================================================== */

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


/* ===== CTA STATS ===== */

.cta-stats{
display:flex;
justify-content:center;
gap:60px;
margin-top:45px;
flex-wrap:wrap;
}

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

.cta-stat strong{
display:block;
font-size:40px;
color:#f97316;
}

.cta-stat span{
font-size:14px;
color:#ccc;
}

.cta-trust{
margin-top:35px;
color:#ccc;
font-size:15px;
}

.cta-urgency{
margin-top:18px;
font-size:15px;
color:#f97316;
font-weight:600;
letter-spacing:0.2px;
}


/* =====================================================
   CONTACT SECTION
   ===================================================== */

.contact-section{
position:relative;
background:url('/img/backgrounds/contacto-logos-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;
pointer-events:none;
}

.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{
width:100%;
padding:14px;
border:none;
border-radius:8px;
font-size:16px;
background:white;
color:#222;
}

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


/* ================================
   FORMULARIO FULL WIDTH (PRECIO)
================================ */

.pricing-page .contact-container{
max-width:1100px;
text-align:left;
}

.pricing-page .contact-intro{
text-align:left;
max-width:800px;
margin-left:auto;
margin-right:auto;
}

.pricing-page .contact-form{
max-width:800px;
margin:0 auto;
}

.pricing-page .form-legal{
max-width:800px;
}

/* ===== INPUTS MÁS LIMPIOS ===== */

.pricing-page .contact-form input,
.pricing-page .contact-form textarea{
font-size:15px;
padding:16px;
}

/* ===== BOTÓN MÁS PREMIUM ===== */

.pricing-page .contact-form .btn{
width:100%;
text-align:center;
}

/* =====================================================
   FORM LEGAL
   ===================================================== */

.form-legal{
margin-top:18px;
font-size:13px;
color:#ccc;
text-align:left;
max-width:700px;
margin-left:auto;
margin-right:auto;
}

.legal-checkbox{
display:flex;
align-items:flex-start;
gap:10px;
margin-bottom:10px;
line-height:1.4;
}

.legal-checkbox input{
width:16px;
height:16px;
margin-top:3px;
cursor:pointer;
}

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

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

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


/* =====================================================
   FAQ
   ===================================================== */

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

.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
   ===================================================== */

.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: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 ===== */

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



/* =================================
TESTIMONIOS BORDE DESTACADO
================================= */

.testimonials-intro{
margin-top:20px;
margin-bottom:40px;
color:#ccc;
font-size:18px;
text-align:center;
max-width:900px;
margin-left:auto;
margin-right:auto;
}

.testimonial-item{
border:3px solid #f97316;
border-radius:14px;
padding:35px;
background:#fff;
}


/* =====================================================
   UTILIDADES
   ===================================================== */

.g-recaptcha{
margin-top:10px;
margin-bottom:10px;
}

.hero-trust{
margin-top:20px;
font-size:14px;
color:#ddd;
line-height:1.4;
}

.hero-slider .btn{
margin-top:30px;
}



/* ==========================================
   REDISEÑO LOGO FULL WIDTH
   ========================================== */

.logo-redesign-showcase{
position:relative;
width:100%;
overflow:hidden;
margin:80px 0;
}

.logo-redesign-showcase img{
width:100%;
height:auto;
display:block;
}

.redesign-overlay{
position:absolute;
bottom:0;
left:0;
width:100%;
max-width:900px;
padding:60px 40px;

background:linear-gradient(
to top,
rgba(0,0,0,0.75) 0%,
rgba(0,0,0,0.45) 50%,
rgba(0,0,0,0.0) 100%
);

color:white;
}

.redesign-overlay h2{
font-size:32px;
margin-bottom:15px;
}

.redesign-overlay p{
max-width:700px;
line-height:1.6;
color:#f2f2f2;
}


/* enlaces dentro del bloque rediseño logo */

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

.redesign-overlay a:visited{
color:#f97316;
}

.redesign-overlay a:hover{
text-decoration:underline;
}


/* ==========================================
   COOKIE BANNER
========================================== */

.cookie-banner{
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    background:#0f0f0f;
    color:#fff;
    padding:18px 20px;
    z-index:9999;
    display:none;
    box-shadow:0 -5px 20px rgba(0,0,0,0.3);
}

.cookie-content{
    max-width:1200px;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    font-size:14px;
    line-height:1.5;
}

.cookie-content a{
    color:#f97316;
    text-decoration:none;
    font-weight:500;
}

.cookie-content a:hover{
    text-decoration:underline;
}

.cookie-content button{
    background:#f97316;
    border:none;
    color:#fff;
    padding:10px 18px;
    border-radius:6px;
    cursor:pointer;
    font-weight:600;
    transition:all .2s ease;
}

.cookie-content button:hover{
    background:#ea580c;
}





/* ========================================
   PRECIOS - HERO (CORRECCIÓN HEADER + DISEÑO)
======================================== */

.pricing-hero h1{
font-size:42px;
margin-bottom:20px;
}

.pricing-hero p{
max-width:700px;
margin:0 auto;
color:#555;
font-size:18px;
line-height:1.6;
}

/* ========================================
   PRECIOS - GRID
======================================== */

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

/* ========================================
   PRECIOS - TARJETAS
======================================== */

.pricing-card{
background:#ffffff;
padding:40px 30px;
border-radius:16px;
box-shadow:0 15px 40px rgba(0,0,0,0.08);
text-align:center;
display:flex;
flex-direction:column;
justify-content:space-between;
transition:all .3s ease;
}

.pricing-card:hover{
transform:translateY(-8px);
box-shadow:0 25px 60px rgba(0,0,0,0.15);
}

.pricing-card h3{
font-size:22px;
margin-bottom:15px;
}

.price{
font-size:38px;
font-weight:700;
margin-bottom:15px;
}

.price span{
font-size:14px;
color:#888;
margin-left:5px;
}

.pricing-desc{
font-size:15px;
color:#555;
margin-bottom:20px;
min-height:60px;
}

.pricing-card ul{
list-style:none;
padding:0;
margin:20px 0;
}

.pricing-card ul li{
margin-bottom:10px;
font-size:14px;
color:#444;
}


/* ========================================
   PRECIOS - DESTACADO
======================================== */

.pricing-card.featured{
border:2px solid #f97316;
transform:scale(1.05);
}

.pricing-card.featured:hover{
transform:scale(1.05) translateY(-8px);
}

.badge{
background:#f97316;
color:white;
padding:6px 14px;
border-radius:20px;
font-size:12px;
display:inline-block;
margin-bottom:15px;
}


/* ========================================
   PRECIOS - SERVICIOS BÁSICOS
======================================== */

.pricing-basic{
max-width:900px;
margin:80px auto;
text-align:center;
margin-top:60px;
}

.basic-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:30px;
margin-top:30px;
}

.basic-card{
background:#f9f9f9;
padding:30px;
border-radius:12px;
}

.price-small{
font-size:26px;
font-weight:600;
margin:10px 0;
}

.price-small span{
font-size:12px;
color:#888;
}


/* ========================================
   PRECIOS - DECISIÓN
======================================== */

.decision-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
max-width:1000px;
margin:50px auto;
}

.decision-card{
background:#f5f5f5;
padding:30px;
border-radius:12px;
text-align:center;
min-height:130px;
display:flex;
flex-direction:column;
justify-content:center;
}

.decision-card h3{
margin-bottom:10px;
}


/* ========================================
   PRECIOS - CTA FINAL
======================================== */

.pricing-cta{
text-align:center;
padding:100px 8%;
background:#ffffff;
}

.pricing-cta h2{
font-size:32px;
margin-bottom:20px;
}

.pricing-cta p{
color:#555;
margin-bottom:30px;
}

.pricing-trust{
display:flex;
justify-content:center;
gap:30px;
flex-wrap:wrap;
margin-top:25px;
font-size:14px;
color:#666;
}

.pricing-trust p{
margin:0;
white-space:nowrap;
}


.pricing-section{
margin-top:40px;
}

.pricing-intro{
max-width:700px;
margin:0 auto;
text-align:center;
}


/* SOLO PARA PÁGINA DE PRECIOS */
.pricing-page .contact-container{
max-width:1100px;
}



.pricing-warning{
font-size:13px;
color:#999;
margin-top:10px;
}

.pricing-highlight{
font-size:14px;
color:#f97316;
font-weight:500;
margin-top:10px;
}



/* ========================================
   PRECIOS - RESPONSIVE
======================================== */

@media(max-width:900px){

.pricing-grid{
grid-template-columns:1fr;
}

.basic-grid{
grid-template-columns:1fr;
}

.decision-grid{
grid-template-columns:1fr;
}

.pricing-card.featured{
transform:none;
}

}

/* ========================================
   GRID SERVICIOS / TESTIMONIOS (CONTROLADO)
======================================== */

.services{
display:grid;
gap:30px;
margin-top:40px;
}

/* Desktop */
@media(min-width:1024px){
.services{
grid-template-columns:repeat(3,1fr);
}
}

/* Tablet */
@media(max-width:1023px){
.services{
grid-template-columns:repeat(2,1fr);
}
}

/* Mobile */
@media(max-width:768px){
.services{
grid-template-columns:1fr;
}
}

/* ========================================
   TESTIMONIOS CONTROL ANCHO
======================================== */

.testimonials .services{
max-width:1200px;
margin-left:auto;
margin-right:auto;
}



/* HERO ESTILO HOME SIN SLIDER */

.pricing-hero{
height:85vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;

background:url('/img/backgrounds/precio-diseno-logotipo-barcelona.webp') center center/cover no-repeat;
position:relative;
color:white;
}

/* overlay como en home */
.pricing-hero::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.6);
z-index:1;
}

/* contenido */
.pricing-hero h1,
.pricing-hero p,
.pricing-hero .hero-cta{
position:relative;
z-index:2;
max-width:800px;
}


/* TIPOGRAFÍA */
.pricing-hero h1{
font-size:28px;
line-height:1.3;
margin-bottom:15px;
}

.pricing-hero p{
font-size:16px;
line-height:1.5;
margin:0 auto;
}


@media(max-width:768px){

.pricing-hero{
height:75vh;
padding:60px 20px;
}

.pricing-hero h1{
font-size:28px;
}

}

/* ===== FIX DEFINITIVO SERVICE ===== */

body .service{
background:#ffffff;
border-radius:16px;
padding:35px;
box-shadow:0 15px 40px rgba(0,0,0,0.08);
border:1px solid rgba(0,0,0,0.04);
transition:all 0.25s ease;
}

body .service:hover{
transform:translateY(-4px);
box-shadow:0 20px 50px rgba(0,0,0,0.12);
}

/* HERO BASE (DESKTOP + GENERAL) */

.pricing-hero{
background:url('/img/backgrounds/precio-diseno-logotipo-barcelona.webp') center center/cover no-repeat;
position:relative;
color:white;
padding:140px 8%;
text-align:center;
}

.pricing-hero::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.65);
z-index:1;
}

.pricing-hero h1,
.pricing-hero p,
.pricing-hero .hero-cta{
position:relative;
z-index:2;
}


/* =================================
PRICING EN FONDO DARK (FIX LEGIBILIDAD)
================================= */

.section.dark .pricing-card{
background:rgba(20,20,20,0.6);
border:1px solid rgba(255,255,255,0.15);
color:#fff;
backdrop-filter:blur(6px);
}

/* TITULOS */
.section.dark .pricing-card h3{
color:#fff;
}

/* PRECIOS */
.section.dark .pricing-card .price{
color:#f97316;
}

/* TEXTO */
.section.dark .pricing-card p{
color:#e5e5e5;
}

/* LISTAS */
.section.dark .pricing-card li{
color:#dcdcdc;
}

/* BOTONES */
.section.dark .pricing-card .btn-secondary{
background:transparent;
border:2px solid #f97316;
color:#f97316;
}

.section.dark .pricing-card .btn-secondary:hover{
background:#f97316;
color:#fff;
}

/* BADGE */
.section.dark .pricing-card .badge{
background:#f97316;
color:#fff;
}


/* =========================
BLOQUE DECISIÓN
========================= */

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

.decision-card{
background:#fff;
border-radius:16px;
padding:30px;
box-shadow:0 10px 30px rgba(0,0,0,0.06);
border:1px solid rgba(0,0,0,0.05);
transition:all 0.25s ease;
}

.decision-card:hover{
transform:translateY(-5px);
box-shadow:0 20px 50px rgba(0,0,0,0.1);
}

.decision-card h3{
margin-bottom:15px;
}

.decision-card ul{
margin:15px 0;
padding-left:20px;
}

.decision-result{
margin-top:15px;
font-weight:500;
color:#f97316;
}

/* DESTACADO */
.decision-card.featured{
border:2px solid #f97316;
}


/* =========================
FIX CARDS DECISIÓN
========================= */

.decision-grid{
align-items:stretch;
}

.decision-card{
display:flex;
flex-direction:column;
height:100%;
}

/* CONTENIDO INTERNO ORDENADO */
.decision-card p{
margin-bottom:15px;
}

.decision-card ul{
margin:15px 0;
padding-left:20px;
flex-grow:1;
}

/* LISTAS LIMPIAS */
.decision-card ul li{
margin-bottom:8px;
line-height:1.4;
}

/* RESULTADO SIEMPRE ABAJO */
.decision-result{
margin-top:auto;
padding-top:15px;
font-weight:500;
color:#f97316;
}


/* =========================
MEJORA BLOQUE DECISIÓN PRO
========================= */

/* LISTAS ALINEADAS IZQUIERDA */
.decision-card ul{
text-align:left;
padding-left:20px;
margin:15px 0;
}

.decision-card ul li{
text-align:left;
margin-bottom:8px;
}

/* BLOQUE RECOMENDADO */
.decision-recommend{
margin-top:auto;
padding-top:20px;
display:flex;
flex-direction:column;
align-items:flex-start;
}

/* TEXTO PEQUEÑO */
.decision-label{
font-size:13px;
color:#999;
margin-bottom:5px;
}

/* TEXTO PRINCIPAL */
.decision-type{
font-size:16px;
font-weight:600;
color:#f97316;
}

/* PRECIO DESTACADO SOLO EN PÁGINA DE PRECIOS */

.pricing-page .price-value{
font-size:32px;
font-weight:700;
color:#f97316;
display:block;
margin-bottom:5px;
}

.pricing-page .price-iva{
font-size:14px;
color:#777;
margin-left:5px;
}

/* Ajuste mobile */
@media(max-width:768px){

.pricing-page .price-value{
font-size:34px;
}

}

/* FIX PRECIO DEFINITIVO */

body.pricing-page .pricing-card p{
margin-bottom:15px;
}

body.pricing-page .price-value{
font-size:36px;
font-weight:700;
color:#f97316;
display:block;
line-height:1;
}

body.pricing-page .price-iva{
font-size:14px;
color:#999;
}

.section.dark .pricing-card .price-value{
color:#f97316;
}

/* =========================
TRUST SOLO EN PÁGINA PRECIO
========================= */

body.pricing-page .trust-pricing{
background:#0f0f0f;
color:#fff;
}

body.pricing-page .trust-pricing h2,
body.pricing-page .trust-pricing p{
color:#fff;
}

body.pricing-page .trust-pricing .pricing-intro{
color:#ccc;
}

body.pricing-page .trust-pricing .trust-item{
background:rgba(255,255,255,0.05);
border:1px solid rgba(255,255,255,0.1);
color:#fff;
}

body.pricing-page .trust-pricing .trust-item p{
color:#ddd;
}

body.pricing-page .trust-pricing .trust-claim{
color:#fff;
}

/* hover */
body.pricing-page .trust-pricing .trust-item:hover{
transform:translateY(-6px);
box-shadow:0 20px 60px rgba(0,0,0,0.4);
border-color:#f97316;
}


/* =========================
FONDO BLOQUE DECISIÓN
========================= */

.decision-section{
background:#f5f5f5;
}

/* opcional: mejora contraste cards */
.decision-section .decision-card{
background:#ffffff;
}

.factors-section{
text-align:center;
}

.factors-intro{
max-width:700px;
margin:0 auto 40px;
color:#555;
}

.factors-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:40px;
margin-top:40px;
}

.factor-item{
text-align:left;
}

.factor-item h3{
margin-bottom:10px;
}

.factor-item p{
color:#555;
line-height:1.6;
}

.factor-highlight{
color:#f97316;
font-weight:500;
margin-top:10px;
}

.factors-footer{
margin-top:40px;
text-align:center;
}

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

.trust-grid{
max-width:1100px;
margin:50px auto;
display:flex;
flex-direction:column;
}

.trust-row{
display:grid;
grid-template-columns: 320px 1fr;
align-items:center;
border-bottom:1px solid rgba(255,255,255,0.08);
padding:25px 0;
}

.trust-title{
font-weight:600;
font-size:18px;
color:#fff;
}

.trust-text{
color:#ccc;
line-height:1.6;
}

/* última fila sin borde */
.trust-row:last-child{
border-bottom:none;
}

/* MOBILE */
@media(max-width:768px){

.trust-row{
grid-template-columns:1fr;
gap:10px;
text-align:left;
}

.trust-title{
font-size:16px;
}

}


.trust-simple{
max-width:800px;
margin:40px auto;
text-align:left;
}

.trust-simple h3{
margin-top:30px;
font-size:20px;
}

.trust-simple p{
color:#ccc;
line-height:1.6;
margin-top:8px;
}


.trust-simple-block{
background:#929292;
}

/* BOTÓN HEADER PRECIO LOGOS */
.btn-header{
background:#f97316;
color:#fff;
padding:10px 18px;
border-radius:6px;
font-weight:600;
margin-left:20px;
}


/* GRID SUPERIOR (3 BLOQUES) */
.proceso-top{
display:grid;
grid-template-columns: repeat(3, 1fr);
gap:30px;
}

/* BLOQUE INFERIOR */
.proceso-bottom{
display:grid;
grid-template-columns: repeat(3, 1fr);
gap:30px;
align-items:center;
margin-top:40px;
}

/* TEXTO */
.proceso-bottom .texto{
grid-column:1 / 2;
}

/* IMAGEN OCUPA 2 COLUMNAS */
.proceso-bottom .imagen{
grid-column:2 / 4;
}

.proceso-bottom img{
width:100%;
border-radius:12px;
display:block;
}

/* RESPONSIVE */
@media(max-width:768px){

.proceso-top{
grid-template-columns:1fr;
}

.proceso-bottom{
grid-template-columns:1fr;
}

.proceso-bottom .texto,
.proceso-bottom .imagen{
grid-column:auto;
}

}


.pricing-guide-page .pricing-hero{
background:url('/img/backgrounds/cuanto-cuesta-logotipo-barcelona.webp') center/cover no-repeat;
position:relative;
}

.pricing-guide-page .pricing-hero::before{
content:"";
position:absolute;
inset:0;
background:rgba(0,0,0,0.58);
z-index:1;
}

.pricing-guide-page .pricing-hero > *{
position:relative;
z-index:2;
}


/* =========================
CUÁNTO CUESTA DISEÑO LOGOTIPO
========================= */

/* ========================================
HERO ESPECÍFICO: CUÁNTO CUESTA LOGOTIPO
======================================== */

.hero-cuanto{
background:url('/img/backgrounds/cuanto-cuesta-logotipo-barcelona.webp') center center/cover no-repeat !important;
position:relative;
color:#fff;
padding:140px 8%;
text-align:center;
min-height:85vh;
display:flex;
align-items:center;
justify-content:center;
}

.hero-cuanto::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.62);
z-index:1;
}

.hero-cuanto-inner{
position:relative;
z-index:2;
max-width:900px;
margin:0 auto;
}

.hero-cuanto h1{
color:#ffffff !important;
font-size:42px;
line-height:1.2;
margin-bottom:20px;
text-shadow:0 2px 12px rgba(0,0,0,0.35);
}

.hero-cuanto p{
color:#f3f3f3 !important;
font-size:18px;
line-height:1.7;
max-width:800px;
margin:0 auto 18px auto;
text-shadow:0 2px 10px rgba(0,0,0,0.28);
}

.hero-cuanto a{
color:#ff7a1a !important;
text-decoration:none;
font-weight:600;
}

.hero-cuanto a:visited{
color:#ff7a1a !important;
}

.hero-cuanto a:hover{
text-decoration:underline;
}

@media(max-width:768px){

.hero-cuanto{
min-height:75vh;
padding:100px 20px 70px 20px;
background:url('/img/backgrounds/cuanto-cuesta-logotipo-barcelona.webp') center center/cover no-repeat !important;
}

.hero-cuanto h1{
font-size:30px;
line-height:1.25;
}

.hero-cuanto p{
font-size:17px;
line-height:1.6;
}

}

.hero-cuanto p{
color:#f3f3f3 !important;
}



/* =========================================
FIX HERO CUÁNTO CUESTA + PRECIO LOGOS
========================================= */

/* 1) HERO CUÁNTO CUESTA: evitar que los botones hereden el naranja de los enlaces de texto */
body.pricing-guide-page .hero-cuanto .btn,
body.pricing-guide-page .hero-cuanto .btn:visited{
color:#ffffff !important;
text-decoration:none !important;
}

body.pricing-guide-page .hero-cuanto .btn-secondary,
body.pricing-guide-page .hero-cuanto .btn-secondary:visited{
color:#f97316 !important;
text-decoration:none !important;
}

body.pricing-guide-page .hero-cuanto .btn-secondary:hover{
color:#ffffff !important;
text-decoration:none !important;
}

body.pricing-guide-page .hero-cuanto .btn:hover{
text-decoration:none !important;
}

/* 2) HERO PRECIO LOGOS: forzar legibilidad total del texto */
body.pricing-page .pricing-hero h1,
body.pricing-page .pricing-hero p,
body.pricing-page .pricing-hero p strong,
body.pricing-page .pricing-hero .hero-micro{
color:#ffffff !important;
text-shadow:0 2px 12px rgba(0,0,0,0.38);
}

body.pricing-page .pricing-hero .hero-micro{
color:#f3f3f3 !important;
}

body.pricing-page .pricing-hero .btn,
body.pricing-page .pricing-hero .btn:visited{
color:#ffffff !important;
text-decoration:none !important;
}

body.pricing-page .pricing-hero .btn-secondary,
body.pricing-page .pricing-hero .btn-secondary:visited{
color:#f97316 !important;
text-decoration:none !important;
}

body.pricing-page .pricing-hero .btn-secondary:hover{
color:#ffffff !important;
text-decoration:none !important;
}