/**
 * Pradel Studio Dental
 * Estilos personalizados
 * Color principal: #f0e2d0 (beige cálido)
 * Fuente: Museo Sans (fallback: Montserrat)
 */

/* ========================================
   VARIABLES Y FUENTES
   ======================================== */

:root {
    --pradel-beige: #f0e2d0;
    --pradel-beige-dark: #d4c4b0;
    --pradel-beige-light: #f7f0e8;
    --pradel-brown: #8b7355;
    --pradel-brown-dark: #5c4a38;
    --pradel-gold: #c9a86c;
    --pradel-cream: #faf8f5;
    --pradel-text: #4a4a4a;
    --pradel-text-light: #7a7a7a;
}

/* ========================================
   PRELOADER - Personalización
   ======================================== */

.preloader {
    background: var(--pradel-beige-light) !important;
    transition: all 1s ease-out !important;
}

/* Cambiar fondo oscuro a beige claro */
.preloader .loader .loader-section .bg {
    background: var(--pradel-beige-light) !important;
}

/* Logotipo del preloader */
.preloader-logo {
    text-align: center;
    margin-bottom: 20px;
}

.preloader-logo img {
    max-width: 200px;
    height: auto;
    opacity: 0;
    animation: fadeInUp 0.8s ease-in-out forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Texto "Cargando" */
.preloader p {
    color: var(--pradel-brown) !important;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    letter-spacing: 2px;
}

/* Museo Sans fallback - usando Montserrat como alternativa elegante */
body {
    font-family: 'Montserrat', 'Museo Sans', sans-serif;
    font-weight: 300;
    color: var(--pradel-text);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Cormorant Garamond', 'Museo Sans', serif;
    font-weight: 500;
    color: var(--pradel-brown-dark);
}

/* ========================================
   COLORES PRINCIPALES - OVERRIDE PLANTILLA
   ======================================== */

/* Botones principales */
.theme-btn {
    background: var(--pradel-brown) !important;
    border-color: var(--pradel-brown) !important;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    letter-spacing: 1px;
}

.theme-btn:hover {
    background: var(--pradel-brown-dark) !important;
    border-color: var(--pradel-brown-dark) !important;
}

.theme-btn.style3 {
    background: var(--pradel-beige) !important;
    color: var(--pradel-brown-dark) !important;
}

.theme-btn.style3:hover {
    background: var(--pradel-brown) !important;
    color: #fff !important;
}

/* Links y colores de acento */
a {
    color: var(--pradel-brown);
}

a:hover {
    color: var(--pradel-brown-dark);
}

.text-theme-color {
    color: var(--pradel-gold) !important;
}

/* ========================================
   HEADER
   ======================================== */

.header-section-1 {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    position: sticky;
    top: 0;
    z-index: 9999;
    transition: box-shadow 0.3s ease;
}

.header-section-1.scrolled {
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    background: #fff;
}

.header-1 {
    padding: 5px 0;
    transition: all 0.3s ease;
}

#header-sticky {
    transition: all 0.3s ease;
}

#header-sticky.sticky {
    padding: 4px 0 !important;
    background: #fff !important;
}

.main-menu nav ul {
    display: flex;
    align-items: center;
    gap: 10px;
}

.main-menu nav ul li {
    margin: 0 8px;
}

.main-menu nav ul li a {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 13px;
    letter-spacing: 0.5px;
    color: var(--pradel-brown-dark) !important;
    text-transform: uppercase;
    padding: 10px 5px;
    position: relative;
    transition: all 0.3s ease;
}

.main-menu nav ul li a::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: var(--pradel-gold);
    transition: width 0.3s ease;
}

.main-menu nav ul li a:hover::after,
.main-menu nav ul li a.active::after {
    width: 80%;
}

.main-menu nav ul li a:hover,
.main-menu nav ul li a.active {
    color: var(--pradel-gold) !important;
}

.header-logo img {
    transition: all 0.3s ease;
}

/* Service cards igual altura */
.service-card.style1 {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.service-card.style1 p {
    flex: 1;
}

/* Equipo: spacing párrafos Celia */
.wcu-content.style1 p {
    margin-bottom: 1rem;
}

/* Equipo: spacing fichas equipo */
.team-member-card p {
    margin-bottom: 0.85rem;
}

.team-member-card p:last-child {
    margin-bottom: 0;
}

/* ========================================
   MENÚ MÓVIL / HAMBURGUESA
   ======================================== */

/* Hamburguesa visible en móvil */
.header__hamburger .sidebar__toggle {
    cursor: pointer;
    padding: 10px;
}

.header__hamburger .sidebar__toggle i {
    font-size: 24px;
    color: var(--pradel-brown-dark) !important;
    transition: all 0.3s ease;
}

.header__hamburger .sidebar__toggle:hover i {
    color: var(--pradel-gold) !important;
}

/* Offcanvas móvil con colores más suaves */
.offcanvas__info {
    background: linear-gradient(135deg, var(--pradel-beige-light) 0%, var(--pradel-cream) 100%) !important;
    box-shadow: -5px 0 30px rgba(92, 74, 56, 0.1);
}

.offcanvas__wrapper {
    background: transparent !important;
}

.offcanvas__content {
    background: transparent !important;
}

/* Menú móvil - FORZAR texto oscuro */
.mobile-menu li a,
.mobile-menu ul li a,
.mobile-menu nav ul li a,
.offcanvas__menu li a,
.offcanvas__menu ul li a,
.offcanvas__menu nav ul li a,
.mean-nav ul li a,
.mean-nav > ul > li > a,
body .mobile-menu a,
body .offcanvas__content .mobile-menu a {
    color: #5c4a38 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    transition: all 0.3s ease !important;
}

.mobile-menu li a:hover,
.mobile-menu ul li a:hover,
.offcanvas__menu li a:hover,
.offcanvas__menu ul li a:hover,
.mean-nav ul li a:hover,
body .mobile-menu a:hover {
    color: #c9a86c !important;
    background: rgba(201, 168, 108, 0.15) !important;
}

/* Botón cerrar - sin borde, limpio */
.offcanvas__close button {
    color: var(--pradel-brown-dark) !important;
    background: transparent !important;
    border: none !important;
    font-size: 28px !important;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.offcanvas__close button:hover {
    background: rgba(201, 168, 108, 0.2) !important;
    color: var(--pradel-gold) !important;
    transform: rotate(90deg);
}

.offcanvas__close button i {
    font-weight: 300 !important;
}

/* Overlay más suave */
.offcanvas__overlay {
    background: rgba(92, 74, 56, 0.7) !important;
}

/* Botón de cita en offcanvas */
.offcanvas__content .theme-btn {
    background: var(--pradel-brown) !important;
    color: #fff !important;
}

.offcanvas__content .theme-btn:hover {
    background: var(--pradel-gold) !important;
}
/* Info de contacto en offcanvas */
.offcanvas__contact h4 {
    color: var(--pradel-brown-dark) !important;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.4rem;
    margin-bottom: 20px;
}

.offcanvas__contact ul li a {
    color: var(--pradel-text) !important;
    transition: all 0.3s ease;
}

.offcanvas__contact ul li a:hover {
    color: var(--pradel-gold) !important;
}

.offcanvas__contact-icon i {
    color: var(--pradel-gold) !important;
    font-size: 18px;
}

/* Iconos sociales en offcanvas */
.offcanvas__content .social-icon a {
    background: var(--pradel-beige) !important;
    color: var(--pradel-brown) !important;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-right: 10px;
    transition: all 0.3s ease;
}

.offcanvas__content .social-icon a:hover {
    background: var(--pradel-gold) !important;
    color: #fff !important;
    transform: translateY(-3px);
}
/* ========================================
   PRELOADER - COLORES PERSONALIZADOS
   ======================================== */

.preloader {
    background: var(--pradel-beige-light);
}

.preloader .spinner {
    border-color: var(--pradel-beige);
    border-top-color: var(--pradel-brown);
}

.letters-loading {
    color: var(--pradel-brown);
}

.letters-loading::before {
    color: var(--pradel-gold);
}

.loader .bg {
    background: var(--pradel-beige);
}

/* ========================================
   HERO / INTRO SECTION
   ======================================== */

.intro-section {
    background: var(--pradel-cream);
}

.intro-wrapper.style1 {
    background: linear-gradient(135deg, var(--pradel-beige-light) 0%, var(--pradel-cream) 100%);
}

.intro-wrapper.hero-with-image {
    background: linear-gradient(135deg, #f7f0e8 0%, #faf8f5 100%);
    min-height: 90vh;
    display: flex;
    align-items: center;
}

.intro-content h1 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    color: var(--pradel-brown-dark);
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1.2;
}

.intro-content p {
    font-weight: 300;
    color: var(--pradel-text);
    font-size: 1.1rem;
    line-height: 1.8;
}

/* Hero image wrapper */
.hero-image-wrapper img {
    transition: all 0.5s ease;
}

.hero-image-wrapper:hover img {
    filter: sepia(15%) brightness(1.08) contrast(0.98) !important;
}

/* ========================================
   SECCIONES
   ======================================== */

.section-title .subtitle {
    color: var(--pradel-gold);
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    letter-spacing: 2px;
    font-size: 13px;
}

.section-title h2 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    color: var(--pradel-brown-dark);
}

/* Fondo alternativo */
.bg-theme2 {
    background: var(--pradel-beige-light) !important;
}

/* ========================================
   SERVICIOS / CARDS
   ======================================== */

/* Service navigation pills */
.service-nav-pill {
    display: inline-block;
    padding: 8px 18px;
    border: 1px solid var(--pradel-beige-dark);
    border-radius: 25px;
    color: var(--pradel-brown);
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
}

.service-nav-pill:hover {
    background: var(--pradel-gold);
    border-color: var(--pradel-gold);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(201, 168, 108, 0.3);
}

.service-card.style1 {
    background: #fff;
    border: 1px solid var(--pradel-beige);
    transition: all 0.4s ease;
}

.service-card.style1:hover {
    border-color: var(--pradel-gold);
    box-shadow: 0 20px 40px rgba(139, 115, 85, 0.1);
}

.service-card.style1 h6 {
    color: var(--pradel-beige-dark);
}

.service-card.style1 h4 a {
    font-family: 'Cormorant Garamond', serif;
    color: var(--pradel-brown-dark);
}

.service-card.style1 h4 a:hover {
    color: var(--pradel-gold);
}

.theme-btn-2 {
    color: var(--pradel-brown);
    border-color: var(--pradel-brown);
}

.theme-btn-2:hover {
    background: var(--pradel-brown);
    color: #fff;
}

/* ========================================
   WHY CHOOSE US / ABOUT
   ======================================== */

.wcu-section {
    background: var(--pradel-cream);
}

.wcu-content .box {
    background: var(--pradel-beige-light);
    border-left: 3px solid var(--pradel-gold);
}

/* ========================================
   BREADCRUMB
   ======================================== */

.breadcumb-section {
    background: linear-gradient(135deg, var(--pradel-beige) 0%, var(--pradel-beige-light) 100%);
}

.breadcumb-title {
    font-family: 'Cormorant Garamond', serif;
    color: var(--pradel-brown-dark);
}

.breadcumb-menu li,
.breadcumb-menu li a {
    color: var(--pradel-brown);
}

.breadcumb-menu li.active {
    color: var(--pradel-gold);
}

/* ========================================
   FORMULARIO DE CONTACTO
   ======================================== */

.contact-form .form-control {
    border: 1px solid var(--pradel-beige);
    background: var(--pradel-cream);
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
}

.contact-form .form-control:focus {
    border-color: var(--pradel-gold);
    box-shadow: 0 0 0 3px rgba(201, 168, 108, 0.1);
}

.contact-content.style1 {
    background: var(--pradel-beige-light);
}

/* ========================================
   FOOTER
   ======================================== */

.footer-section.bg-title {
    background: var(--pradel-brown-dark) !important;
}

.footer-bottom.bg-title {
    background: rgba(0,0,0,0.2) !important;
}

.single-footer-widget h3 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
}

.footer-section .list-area li a:hover {
    color: var(--pradel-gold);
}

.footer-section .social-icon a {
    background: var(--pradel-brown);
    border-color: var(--pradel-brown);
}

.footer-section .social-icon a:hover {
    background: var(--pradel-gold);
    border-color: var(--pradel-gold);
}

/* Newsletter en footer (fondo oscuro) */
.footer-section .form-control {
    background: rgba(255,255,255,0.1) !important;
    border-color: rgba(255,255,255,0.2) !important;
    color: #fff !important;
}

.footer-section .form-control::placeholder {
    color: rgba(255,255,255,0.5);
}

.footer-section .form-control:focus {
    border-color: var(--pradel-gold) !important;
    box-shadow: 0 0 0 2px rgba(201,168,108,0.2);
}

/* ========================================
   BLOG
   ======================================== */

.blog-card {
    background: #fff;
    border: 1px solid var(--pradel-beige);
}

.blog-card:hover {
    border-color: var(--pradel-gold);
}

.blog-card .blog-content h4 a {
    font-family: 'Cormorant Garamond', serif;
    color: var(--pradel-brown-dark);
}

.blog-card .blog-meta span {
    color: var(--pradel-gold);
}

/* ========================================
   EFECTOS ESPECIALES
   ======================================== */

/* Filtro sepia para imágenes - estilo chic */
.img-sepia {
    filter: sepia(20%) saturate(80%);
    transition: filter 0.4s ease;
}

.img-sepia:hover {
    filter: sepia(0%) saturate(100%);
}

/* Overlay elegante */
.overlay-chic {
    position: relative;
}

.overlay-chic::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(240, 226, 208, 0.3) 0%, rgba(139, 115, 85, 0.1) 100%);
    pointer-events: none;
}

/* Blog cards hover effect */
.blog-card {
    transition: all 0.4s ease;
}

.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(139, 115, 85, 0.15);
}

.blog-card:hover img {
    transform: scale(1.05);
}

.blog-card img {
    transition: transform 0.5s ease;
}

/* Featured blog card */
.blog-card-featured:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 50px rgba(139, 115, 85, 0.2);
}

/* Article content styling */
.article-content h3 {
    font-family: 'Cormorant Garamond', serif;
    color: var(--pradel-brown-dark);
    margin: 2rem 0 1rem;
    font-size: 1.5rem;
}

.article-content ul {
    padding-left: 1.5rem;
    margin: 1rem 0;
}

.article-content li {
    margin-bottom: 0.5rem;
    line-height: 1.7;
}

.article-content strong {
    color: var(--pradel-brown-dark);
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 991px) {
    .intro-content h1 {
        font-size: 2.2rem;
    }

    .section-title h2 {
        font-size: 2rem;
    }
}

/* ========================================
   RESPONSIVE / M\u00d3VIL
   ======================================== */

@media (max-width: 1199px) {
    .header-1 {
        padding: 6px 0;
    }

    #header-sticky.sticky {
        padding: 4px 0 !important;
    }

    .header-logo img {
        max-height: 80px !important;
    }
}

@media (max-width: 991px) {
    /* Hero en tablets */
    .intro-wrapper.hero-with-image {
        min-height: 70vh;
    }

    .intro-content h1 {
        font-size: 2.2rem;
    }
}

@media (max-width: 767px) {
    /* Textos principales */
    .intro-content h1 {
        font-size: 1.8rem;
        line-height: 1.3;
    }

    .intro-content p {
        font-size: 1rem;
    }

    .section-title h2 {
        font-size: 1.6rem;
    }

    /* Hero m\u00f3vil */
    .intro-wrapper.hero-with-image {
        min-height: auto;
        padding: 60px 0 !important;
    }

    .hero-with-image .hero-bg-image img {
        opacity: 0.2 !important;
    }

    /* Checklist en dos columnas */
    .checklist-wrapper {
        flex-direction: column !important;
    }

    .checklist-wrapper ul {
        width: 100%;
    }

    /* Botones m\u00f3vil */
    .btn-wrapper .theme-btn {
        padding: 12px 25px;
        font-size: 14px;
    }

    /* Footer */
    .footer-wrapper {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    .brand-logo {
        flex-wrap: wrap;
        justify-content: center;
    }

    /* Blog cards m\u00f3vil */
    .blog-card {
        margin-bottom: 30px;
    }

    /* Servicios m\u00f3vil */
    .service-card.style1 {
        margin-bottom: 25px;
    }

    /* Contacto m\u00f3vil */
    .contact-meta {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    /* Header m\u00f3vil */
    .header-1 {
        padding: 5px 0;
    }

    #header-sticky.sticky {
        padding: 3px 0 !important;
    }

    /* Logotipo en móvil */
    .header-logo img {
        max-height: 55px !important;
    }

    /* Logotipo en sticky móvil - mismo tamaño */
    #header-sticky.sticky .header-logo img {
        max-height: 55px !important;
    }

    /* Botón "Pedir Cita" oculto en móvil sticky */
    #header-sticky.sticky .header-button {
        display: none !important;
    }

    /* Offcanvas logotipo */
    .offcanvas__logo img {
        max-height: 70px !important;
    }
}

@media (max-width: 575px) {
    /* Ajustes para m\u00f3viles peque\u00f1os */
    .intro-content h1 {
        font-size: 1.6rem;
    }

    .section-padding {
        padding: 60px 0 !important;
    }

    /* Im\u00e1genes hero */
    .hero-image-wrapper > div {
        border-radius: 100px 100px 15px 15px !important;
    }

    .hero-image-wrapper > div > div {
        padding: 15px 20px !important;
        font-size: 14px !important;
    }
}

/* ========================================
   UTILIDADES
   ======================================== */

.bg-pradel-beige {
    background-color: var(--pradel-beige) !important;
}

.bg-pradel-cream {
    background-color: var(--pradel-cream) !important;
}

.text-pradel-brown {
    color: var(--pradel-brown) !important;
}

.text-pradel-gold {
    color: var(--pradel-gold) !important;
}

/* Espaciado elegante */
.section-padding-lg {
    padding: 120px 0;
}

/* Transiciones suaves */
* {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Scroll suave */
html {
    scroll-behavior: smooth;
}

/* ========================================
   CTA SECTION
   ======================================== */

.cta-section .cta-wrapper {
    background: linear-gradient(135deg, var(--pradel-beige) 0%, var(--pradel-beige-light) 100%);
}

.cta-content h2 {
    color: var(--pradel-brown-dark);
}

.cta-content h4 {
    color: var(--pradel-brown);
}

/* ========================================
   TEAM / DOCTOR SECTION
   ======================================== */

.team-card {
    background: #fff;
    border: 1px solid var(--pradel-beige);
}

.team-card:hover {
    box-shadow: 0 20px 40px rgba(139, 115, 85, 0.15);
}

.team-card .team-content h4 {
    font-family: 'Cormorant Garamond', serif;
    color: var(--pradel-brown-dark);
}

.team-card .team-content span {
    color: var(--pradel-gold);
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    letter-spacing: 1px;
}

/* Team member cards (equipo page) */
.team-member-card:hover {
    border-color: var(--pradel-gold) !important;
    box-shadow: 0 20px 50px rgba(139, 115, 85, 0.15) !important;
    transform: translateY(-3px);
}

.team-member-card img {
    transition: all 0.5s ease;
}

.team-member-card:hover img {
    filter: sepia(0%) brightness(1.08) !important;
}

/* ========================================
   INSTALACIONES / GALLERY
   ======================================== */

.gallery-item {
    overflow: hidden;
    border-radius: 8px;
}

.gallery-item img {
    transition: transform 0.5s ease, filter 0.5s ease;
    filter: sepia(15%);
}

.gallery-item:hover img {
    transform: scale(1.05);
    filter: sepia(0%);
}

/* ========================================
   BACK TO TOP
   ======================================== */

.back-to-top {
    background: var(--pradel-brown) !important;
}

.back-to-top:hover {
    background: var(--pradel-gold) !important;
}

/* ========================================
   TÍTULOS DE SERVICIOS - Más grandes
   ======================================== */

/* Títulos h3 en la página de servicios individuales */
.section-padding h3[style*="color: var(--pradel-brown-dark)"] {
    font-size: 1.8rem !important;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

/* ========================================
   HERO / BREADCRUMB - Fotos más completas
   ======================================== */

/* Reducir el padding del hero para que la imagen no se vea tan recortada */
.breadcumb-wrapper .breadcumb-content {
    padding: 100px 0 !important;
}

/* Las imágenes de fondo en los breadcrumb heros */
.breadcumb-wrapper > div:first-child img,
.breadcumb-section .breadcumb-wrapper > div[style*="position: absolute"] img {
    object-fit: cover;
    object-position: center center;
}

/* ========================================
   HEADER LOGO - Ajustes responsive
   ======================================== */

/* Logo más grande - ajustar padding header para acomodar */
.header-1 {
    padding: 5px 0;
}

/* ========================================
   PORTADA MÓVIL - Hero con logo grande
   ======================================== */

.mobile-hero-block {
    display: none;
}

@media (max-width: 991px) {
    .mobile-hero-block {
        display: block;
        background: linear-gradient(135deg, var(--pradel-beige-light) 0%, var(--pradel-cream) 100%);
        position: relative;
        overflow: hidden;
        padding: 50px 0 40px;
        text-align: center;
    }

    .mobile-hero-block .mobile-hero-bg {
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        z-index: 0;
    }

    .mobile-hero-block .mobile-hero-bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: sepia(15%) brightness(1.05) saturate(0.95);
        opacity: 0.15;
    }

    .mobile-hero-block .mobile-hero-content {
        position: relative;
        z-index: 1;
        padding: 0 20px;
    }

    .mobile-hero-block .mobile-hero-logo {
        max-width: 350px;
        height: auto;
        margin-bottom: 25px;
    }

    .mobile-hero-block .mobile-hero-subtitle {
        color: var(--pradel-gold);
        font-weight: 500;
        letter-spacing: 2px;
        font-size: 12px;
        text-transform: uppercase;
        margin-bottom: 10px;
    }

    .mobile-hero-block .mobile-hero-title {
        font-family: 'Cormorant Garamond', serif;
        font-size: 2rem;
        font-weight: 500;
        color: var(--pradel-brown-dark);
        line-height: 1.2;
        margin-bottom: 15px;
    }

    .mobile-hero-block .mobile-hero-text {
        font-size: 0.95rem;
        color: var(--pradel-text);
        line-height: 1.7;
        margin-bottom: 25px;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }

    .mobile-hero-block .mobile-hero-phone {
        display: block;
        font-size: 1.6rem;
        font-weight: 600;
        color: var(--pradel-brown-dark);
        text-decoration: none;
        margin-bottom: 20px;
    }

    .mobile-hero-block .mobile-hero-phone i {
        color: var(--pradel-gold);
        margin-right: 8px;
    }

    .mobile-hero-block .mobile-hero-cta {
        display: block;
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
        padding: 16px 30px;
        font-size: 1.1rem;
        font-weight: 600;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

    /* Ocultar el hero original de escritorio en móvil */
    .desktop-hero-section {
        display: none !important;
    }
}

@media (min-width: 992px) {
    .mobile-hero-block {
        display: none !important;
    }

    .desktop-hero-section {
        display: block !important;
    }
}

@media (max-width: 1199px) {
    .header-logo img {
        max-height: 80px !important;
    }
}

@media (max-width: 767px) {
    .header-logo img {
        max-height: 55px !important;
    }

    .mobile-hero-block .mobile-hero-logo {
        max-width: 275px;
    }

    .mobile-hero-block .mobile-hero-title {
        font-size: 1.7rem;
    }
}

/* ========================================
   HERO SECTIONS - Fotos de fondo
   ======================================== */

/* Breadcrumb/hero background images */
.breadcumb-wrapper {
    overflow: hidden;
}

.breadcumb-wrapper > div[style*="position: absolute"] img,
.breadcumb-wrapper > div:first-child img {
    object-fit: cover;
    object-position: center center;
}

/* Hero principal portada: zoom out */
.hero-image-wrapper img {
    object-fit: cover;
    object-position: center 20%;
}

/* Galería/instalaciones: zoom out suave en imágenes grandes */
.gallery-item img {
    object-position: center center;
}

/* ========================================
   PORTADA MÓVIL: Logo grande en cabecera
   ======================================== */

@media (max-width: 991px) {
    /* Header blanco con logo grande en portada (antes de scroll) */
    body.is-portada .header-section-1 {
        background: #fff;
        box-shadow: 0 2px 15px rgba(0,0,0,0.06);
    }

    body.is-portada .header-logo {
        transition: all 0.35s ease;
    }

    body.is-portada .header-logo img {
        max-height: 145px !important;
        transition: max-height 0.35s ease;
    }

    /* Cuando se hace scroll: logo pequeño (sticky) */
    body.is-portada.has-scrolled .header-logo img {
        max-height: 50px !important;
    }

    /* El bloque hero empieza por debajo del header grande */
    body.is-portada .mobile-hero-block {
        padding-top: 115px;
    }
}

@media (max-width: 767px) {
    body.is-portada .header-logo img {
        max-height: 120px !important;
    }

    body.is-portada .mobile-hero-block {
        padding-top: 95px;
    }
}

/* ========================================
   CAMBIO 3: Textos de cabecera HERO en oscuro
   ======================================== */

.breadcumb-wrapper .breadcumb-content .breadcumb-title {
    color: var(--pradel-brown-dark) !important;
    text-shadow: none;
}

.breadcumb-wrapper .breadcumb-content .breadcumb-menu li a {
    color: var(--pradel-brown-dark) !important;
    text-shadow: none;
}

.breadcumb-wrapper .breadcumb-content .breadcumb-menu li.active {
    color: var(--pradel-brown) !important;
    text-shadow: none;
}

.breadcumb-wrapper .breadcumb-content .breadcumb-menu li {
    color: var(--pradel-brown) !important;
    text-shadow: none;
}
