/*
Theme Name: Theme Origin-Go V192
Theme URI: https://cerrajerosvalencia.com
Author: Alejandro Rumbero Fernández
Author URI: https://cerrajerosvalencia.com
Description: Theme profesional de alto rendimiento para Cerrajeros Valencia Origin-Go. Optimizado para SEO y conversión.
Version: 1.9.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cerrajeros-valencia
*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    /* overflow-x: hidden; REMOVED V174 to allow floating elements */
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: #1f2937;
    /* overflow-x: hidden; REMOVED V174 */
    /* max-width: 100vw; REMOVED V174 */
    position: relative; /* Ensure body is a reference for absolute positioning if needed */
}

img {
    max-width: 100%;
    height: auto;
}

iframe {
    max-width: 100%;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
}

h1, h2, h3, h4, h5, h6, p, span, div {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Logo Fixes */
.custom-logo-link img, .custom-logo {
    height: auto;
    max-height: 80px; /* Mobile default */
    width: auto;
    transition: all 0.3s ease;
}

@media (min-width: 1024px) {
    .custom-logo-link img, .custom-logo {
        max-height: 140px !important; /* Desktop forced large */
    }
}

/* Hero Section */
.hero {
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #2563eb 100%);
    color: white;
    padding: 80px 20px;
    position: relative;
    overflow: hidden;
}

.hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center; /* Changed from end to center for better alignment */
    max-width: 1200px;
    margin: 0 auto;
}

.hero-left h1 {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 20px;
    line-height: 1.1;
    color: white;
}

.hero-left .highlight {
    background: linear-gradient(to right, #fbbf24, #f59e0b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-left p {
    font-size: 1.25rem;
    margin-bottom: 30px;
    opacity: 0.95;
}

.hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 30px;
}

.badge {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stars {
    display: flex;
}

.star {
    width: 20px;
    height: 20px;
    fill: #fbbf24;
}

.cta-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    align-items: center; /* Ensure vertical alignment */
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center; /* Center content */
    gap: 10px;
    padding: 16px 32px;
    height: 56px; /* Force consistent height */
    box-sizing: border-box; /* Include padding/border in height */
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    position: relative;
    overflow: hidden;
}

.btn-primary {
    background: linear-gradient(to right, #f97316, #dc2626);
    color: white;
    box-shadow: 0 6px 16px rgba(220, 38, 38, 0.3);
}

.btn-primary:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 14px 28px rgba(220, 38, 38, 0.5);
    background: linear-gradient(to right, #dc2626, #b91c1c);
}

.btn-primary:active {
    transform: translateY(-2px) scale(1.02);
}

.btn-secondary {
    background: white;
    color: #1f2937;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    border: 2px solid #e5e7eb;
}

.btn-secondary:hover {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 14px 28px rgba(37, 211, 102, 0.3);
    border-color: #25d366;
}

.btn-secondary:active {
    transform: translateY(-2px) scale(1.02);
}

.urgency-card {
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 16px;
    padding: 40px;
    text-align: center;
}

.urgency-card h2 {
    font-size: 2rem;
    margin-bottom: 20px;
}

.urgency-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 30px 0;
}

.stat {
    text-align: center;
}

.stat-value {
    font-size: 2rem;
    font-weight: 800;
    display: block;
}

.stat-label {
    font-size: 0.875rem;
    opacity: 0.8;
}

/* Sections */
section {
    padding: 60px 20px;
}

/* Global paragraph spacing for content sections */
.seo-content-block p, 
.seo-hidden-content p {
    margin-bottom: 15px !important;
    line-height: 1.6;
}

.seo-content-block p:last-child, 
.seo-hidden-content p:last-child {
    margin-bottom: 0;
}

.faqs-section {
    padding-bottom: 40px !important;
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-header h2 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 15px;
}

.section-header p {
    font-size: 1.125rem;
    color: #4b5563;
}

/* Reviews Section */
.reviews-section {
    background: white;
}

/* Alta Seguridad */
.alta-seguridad {
    background: linear-gradient(135deg, #111827 0%, #1f2937 50%, #111827 100%);
    color: white;
}

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

.card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 30px;
    transition: all 0.3s;
}

.card:hover {
    border-color: #2563eb;
    transform: translateY(-5px);
}

.card-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 20px;
}

.card h3 {
    font-size: 1.5rem;
    color: #60a5fa;
    margin-bottom: 15px;
}

.card ul {
    list-style: none;
}

.card li {
    margin-bottom: 10px;
    padding-left: 25px;
    position: relative;
}

.card li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #10b981;
    font-weight: bold;
}

/* Por qué confían */
.confianza-section {
    background: #f9fafb;
}

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

.feature {
    text-align: center;
    padding: 30px;
}

.feature-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
    background: #2563eb;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
}

.feature h3 {
    font-size: 1.25rem;
    margin-bottom: 10px;
}

/* Servicios */
.servicios-section {
    background: white;
}

.servicios-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

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

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

.servicio {
    background: #f9fafb;
    padding: 30px 20px;
    border-radius: 12px;
    text-align: center;
    transition: all 0.3s;
}

.servicio:hover {
    background: #2563eb;
    color: white;
    transform: translateY(-5px);
}

.servicio-icon {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

/* CTA Final */
.cta-final {
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
    color: white;
    text-align: center;
}

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

.cta-stat-value {
    font-size: 3rem;
    font-weight: 800;
    display: block;
}

/* Mapa */
.mapa-section {
    background: #f9fafb;
}

.mapa-container {
    height: 500px;
    border-radius: 16px;
    overflow: hidden;
}

.mapa-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* FAQs */
.faqs-section {
    background: white;
}

.faq-item {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    margin-bottom: 8px;
    overflow: hidden;
}

.faq-question {
    padding: 12px 16px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.95rem;
}

.faq-question:hover {
    background: #f9fafb;
}

.faq-answer {
    padding: 0 16px 16px;
    color: #4b5563;
    display: none;
    font-size: 0.9rem;
}

.faq-item details[open] .faq-answer {
    display: block;
}

/* Footer */
footer {
    background: #1a1a1a;
    color: white;
    padding: 60px 20px 30px;
}

.footer-column h3 {
    margin-bottom: 20px;
    font-size: 1.125rem;
}

.footer-column ul {
    list-style: none;
}

.footer-column a {
    color: #d1d5db;
    text-decoration: none;
    display: block;
    margin-bottom: 10px;
    padding: 12px 0; /* Increased touch target for accessibility */
}

.footer-column a:hover {
    color: white;
    text-decoration: underline;
}

.footer-bottom {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid #374151;
    color: #d1d5db;
}

/* WhatsApp Float Button */
.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: #25d366;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5);
    z-index: 9999;
    transition: all 0.3s;
    text-decoration: none;
    border: 3px solid white;
}

.whatsapp-float:hover {
    transform: scale(1.15);
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.7);
}

.whatsapp-float svg,
.whatsapp-float img {
    width: 35px;
    height: 35px;
    filter: brightness(0) invert(1);
}

/* Responsive */
/* Responsive Mobile */
@media (max-width: 768px) {
    /* General */
    body {
        font-size: 14px;
    }
    
    .container {
        padding: 0 15px;
    }
    
    section {
        padding: 40px 15px !important;
    }
    
    .section-header h2 {
        font-size: 1.75rem !important;
    }
    
    .section-header p {
        font-size: 0.95rem !important;
    }
    
    /* Hero */
    .hero {
        padding: 30px 15px !important;
    }
    
    .hero-content {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    .hero-left h1 {
        font-size: 1.75rem !important;
        line-height: 1.2 !important;
    }
    
    .hero-left p {
        font-size: 0.95rem !important;
    }
    
    .hero-badges {
        flex-direction: column !important;
        gap: 10px !important;
        align-items: flex-start !important;
    }
    
    .badge {
        font-size: 0.875rem !important;
    }
    
    .cta-buttons {
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important;
    }
    
    .cta-buttons .btn {
        width: 100% !important;
        justify-content: center !important;
        padding: 14px 20px !important;
        font-size: 0.95rem !important;
    }
    
    /* Urgency Card */
    .urgency-card {
        padding: 20px 15px !important;
        margin: 20px 0 !important;
    }
    
    .urgency-card h2 {
        font-size: 1.5rem !important;
    }
    
    .urgency-card p {
        font-size: 0.95rem !important;
    }
    
    .urgency-stats {
        flex-direction: column !important;
        gap: 15px !important;
        align-items: center !important;
    }
    
    .urgency-stat {
        text-align: center !important;
    }
    
    /* Reviews */
    .reviews-section {
        padding: 30px 15px !important;
    }
    
    /* Products - Alta Seguridad */
    .cards-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    .card {
        padding: 20px !important;
    }
    
    .card h3 {
        font-size: 1.25rem !important;
    }
    
    .card p {
        font-size: 0.875rem !important;
    }
    
    .card li {
        font-size: 0.875rem !important;
    }
    
    .card-image {
        height: 180px !important;
    }
    
    /* Features Grid */
    .features-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    .feature {
        padding: 20px !important;
    }
    
    /* Servicios */
    .servicios-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    .servicio {
        padding: 20px 15px !important;
    }
    
    .servicio h3 {
        font-size: 1rem !important;
    }
    
    /* CTA Stats */
    .cta-stats {
        grid-template-columns: 1fr 1fr !important;
        gap: 15px !important;
    }
    
    .cta-stat-value {
        font-size: 1.75rem !important;
    }
    
    .cta-stat-label {
        font-size: 0.875rem !important;
    }
    
    /* Mapa */
    .mapa-container {
        height: 300px !important;
        border-radius: 8px !important;
    }
    
    /* FAQs */
    .faq-item {
        margin-bottom: 10px !important;
    }
    
    .faq-question {
        padding: 15px !important;
        font-size: 0.95rem !important;
    }
    
    .faq-answer {
        padding: 0 15px 15px !important;
        font-size: 0.875rem !important;
    }
    
    /* Footer */
    footer {
        padding: 30px 15px 20px !important;
    }
    
    footer .container > div:first-child {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
    }
    
    footer img {
        max-height: 80px !important;
        margin: 0 auto !important;
        display: block !important;
    }
    
    footer h3 {
        font-size: 1rem !important;
        margin-bottom: 12px !important;
        text-align: left !important; /* Alineación izquierda */
    }
    
    footer ul {
        text-align: left !important; /* Alineación izquierda */
        padding-left: 0 !important;
    }
    
    footer ul li {
        margin-bottom: 8px !important;
        font-size: 0.875rem !important;
    }
    
    footer > div > div:last-child {
        flex-direction: column !important;
        gap: 12px !important;
        text-align: left !important; /* Alineación izquierda */
        align-items: flex-start !important;
    }
    
    footer > div > div:last-child p {
        font-size: 0.75rem !important;
        line-height: 1.4 !important;
    }
    
    /* Buttons */
    .btn {
        font-size: 0.95rem !important;
        padding: 12px 20px !important;
    }
    
    /* WhatsApp Float */
    .whatsapp-float {
        bottom: 20px !important;
        right: 15px !important;
        width: 55px !important;
        height: 55px !important;
    }
}
}

/* ========================================
   HEADER MÓVIL RESPONSIVE
   ======================================== */

/* Ocultar CTA móvil y hamburguesa en desktop */
.mobile-cta,
.hamburger {
    display: none;
}

/* Móvil: Logo + CTA + Hamburguesa */
@media (max-width: 768px) {
    .header-container {
        height: 70px !important;
        padding: 0 15px !important;
        display: flex !important; /* Changed to flex for better control */
        justify-content: space-between !important;
        align-items: center !important;
        gap: 10px !important;
    }
    
    /* Ensure logo takes available space but doesn't shrink too much */
    .header-logo {
        flex: 0 1 auto !important;
        margin-right: auto !important;
    }
    
    /* CTA button next to hamburger */
    .mobile-cta {
        margin-right: 15px !important;
        flex-shrink: 0 !important;
    }
    
    /* Hamburger always on the right */
    .hamburger {
        flex-shrink: 0 !important;
        margin-left: 0 !important;
    }
    
    /* Redundant rules removed */
    
    .header-logo img {
        height: 90px !important;
    }
    
    /* CTA móvil centro */
    .mobile-cta {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: linear-gradient(135deg, #f97316, #dc2626) !important;
        color: white !important;
        padding: 8px 14px !important;
        border-radius: 8px !important;
        text-decoration: none !important;
        font-weight: 700 !important;
        font-size: 0.813rem !important;
        box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4) !important;
        transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
        position: relative !important;
        overflow: hidden !important;
    }
    
    .mobile-cta:hover {
        transform: translateY(-3px) scale(1.05) !important;
        box-shadow: 0 8px 20px rgba(220, 38, 38, 0.6) !important;
        background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    }
    
    .mobile-cta:active {
        transform: translateY(-1px) scale(1.02) !important;
        box-shadow: 0 4px 12px rgba(220, 38, 38, 0.5) !important;
        white-space: nowrap !important;
        text-align: center !important;
        box-shadow: 0 3px 12px rgba(220, 38, 38, 0.3) !important;
        justify-self: center !important;
        gap: 4px !important;
    }
    
    /* Ocultar nav desktop - REFORZADO */
    .desktop-nav,
    nav.desktop-nav {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
    }
    
    /* Hamburguesa derecha */
    .hamburger {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-around !important;
        width: 30px !important;
        height: 25px !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        padding: 0 !important;
        z-index: 10 !important;
    }
    
    .hamburger span {
        width: 30px !important;
        height: 3px !important;
        background: #1f2937 !important;
        border-radius: 10px !important;
        transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
        transform-origin: center !important;
    }
    
    /* Hamburguesa → X (Efecto 3D espectacular) */
    .hamburger.active span:nth-child(1) {
        transform: translateY(11px) rotate(135deg) scale(1.1) !important;
        background: #dc2626 !important;
    }
    
    .hamburger.active span:nth-child(2) {
        opacity: 0 !important;
        transform: scale(0) rotate(180deg) !important;
    }
    
    .hamburger.active span:nth-child(3) {
        transform: translateY(-11px) rotate(-135deg) scale(1.1) !important;
        background: #dc2626 !important;
    }
}

/* Desktop: Ocultar hamburguesa y CTA móvil */
@media (min-width: 769px) {
    .mobile-cta,
    .hamburger {
        display: none !important;
    }
}

/* Mobile Menu */
.mobile-menu {
    display: none;
    background: white;
    border-top: 1px solid #e5e7eb;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.mobile-menu.active {
    display: block;
}

.mobile-menu nav {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.mobile-menu a {
    padding: 12px;
    text-decoration: none;
    color: #1f2937;
    font-weight: 600;
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.3s;
}

.mobile-menu a:hover {
    background: #f9fafb;
}

.mobile-menu .btn {
    width: 100%;
    justify-content: center;
    margin-top: 10px;
}


/* ========================================
   DROPDOWNS DESKTOP
   ======================================== */

.desktop-nav {
    display: flex;
    gap: 0;
    align-items: center;
    height: 100%;
}

.nav-link {
    text-decoration: none;
    color: #1f2937;
    font-weight: 600;
    font-size: 0.938rem;
    transition: color 0.3s;
    display: flex; /* Changed to flex for full height alignment */
    align-items: center;
    height: 100%; /* Full height of parent */
    padding: 0 15px; /* Horizontal padding for click area */
}

.nav-link:hover {
    color: #2563eb;
}

.nav-dropdown {
    position: relative;
    display: flex; /* Changed to flex */
    align-items: center; /* Center content vertically */
    height: 100%; /* Full height of header */
}

.dropdown-trigger {
    cursor: pointer;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%; /* Starts exactly at the bottom of the header */
    left: 0;
    background: white;
    min-width: 200px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border-radius: 0 0 8px 8px; /* Rounded only at bottom */
    padding: 8px 0;
    margin-top: 0; /* NO MARGIN - Critical for hover stability */
    z-index: 1000;
    /* border-top: 2px solid #2563eb; REMOVED */
}

.nav-dropdown:hover .dropdown-menu {
    display: block;
}

/* Fix hover gap - Invisible bridge */
/* Fix hover gap - Robust Invisible bridge */
.nav-dropdown::after {
    content: '';
    position: absolute;
    top: 0; /* Start from top of parent */
    left: 0;
    width: 100%;
    height: 150%; /* Extend well below the parent to cover the gap to dropdown */
    background: transparent;
    z-index: 900; /* Below dropdown but above content */
    pointer-events: none; /* Let clicks pass through if needed, but keeps hover active */
}

.nav-dropdown:hover::after {
    pointer-events: auto; /* Capture hover when active */
}

.dropdown-item {
    display: block;
    padding: 10px 16px;
    color: #1f2937;
    text-decoration: none;
    font-size: 0.875rem;
    transition: background 0.2s;
}

.dropdown-item:hover {
    background: #f3f4f6;
    color: #2563eb;
}

/* ========================================
   DROPDOWNS MÓVIL
   ======================================== */

.mobile-dropdown {
    border-bottom: 1px solid #f3f4f6;
}

.mobile-dropdown-trigger {
    width: 100%;
    padding: 12px;
    background: transparent;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #1f2937;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.3s;
    text-align: left;
}

.mobile-dropdown-trigger:active {
    background: #f9fafb;
}

.dropdown-arrow {
    transition: transform 0.3s ease;
}

.dropdown-arrow.rotated {
    transform: rotate(180deg);
}

.mobile-dropdown-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, visibility 0.3s; /* Add visibility transition */
    background: #f9fafb;
    visibility: hidden; /* Hide completely when closed */
}

.mobile-dropdown-content.active {
    max-height: 60vh; /* Use viewport height for better responsiveness */
    overflow-y: auto; /* Allow scrolling if content exceeds height */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    visibility: visible; /* Show when active */
}

.mobile-dropdown-content a {
    display: block;
    padding: 12px 16px; /* Larger touch target */
    color: #4b5563;
    text-decoration: none;
    font-size: 0.95rem;
    border-bottom: 1px solid #e5e7eb;
    transition: background 0.2s;
}

/* MOBILE MEGA MENU GRID (Barrios & Pueblos) */
#dropdown-barrios,
#dropdown-pueblos {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 Columns */
    gap: 8px;
    padding: 12px;
}

#dropdown-barrios a,
#dropdown-pueblos a {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: white;
    text-align: center;
    padding: 10px 5px;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

#dropdown-barrios a:active,
#dropdown-pueblos a:active {
    background: #eff6ff;
    border-color: #2563eb;
    color: #2563eb;
}

.mobile-dropdown-content a:last-child {
    border-bottom: none;
}

.mobile-dropdown-content a:active {
    background: #e5e7eb;
}

/* ========================================
   EFECTOS ESPECTACULARES PARA BOTONES
   ======================================== */

/* Botones header desktop */
.desktop-nav a[href*="tel"],
.desktop-nav a[href*="wa.me"] {
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
    position: relative !important;
    overflow: hidden !important;
}

.desktop-nav a[href*="tel"]:hover {
    transform: translateY(-4px) scale(1.08) !important;
    box-shadow: 0 12px 24px rgba(220, 38, 38, 0.5) !important;
    background: linear-gradient(to right, #dc2626, #b91c1c) !important;
}

.desktop-nav a[href*="wa.me"]:hover {
    transform: translateY(-4px) scale(1.08) !important;
    box-shadow: 0 12px 24px rgba(37, 211, 102, 0.5) !important;
    background: #1ebe57 !important;
}

.desktop-nav a[href*="tel"]:active,
.desktop-nav a[href*="wa.me"]:active {
    transform: translateY(-2px) scale(1.04) !important;
}

/* Botones hero - Llamar */
.cta-llamar-hero:hover {
    transform: translateY(-6px) scale(1.05) !important;
    box-shadow: 0 16px 32px rgba(220, 38, 38, 0.6) !important;
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
}

.cta-llamar-hero:active {
    transform: translateY(-3px) scale(1.02) !important;
}

/* Botones hero - WhatsApp */
.cta-whatsapp-hero:hover {
    transform: translateY(-6px) scale(1.05) !important;
    box-shadow: 0 16px 32px rgba(37, 211, 102, 0.4) !important;
    background: linear-gradient(135deg, #f0fdf4, #dcfce7) !important;
    border-color: #25d366 !important;
}

.cta-whatsapp-hero:active {
    transform: translateY(-3px) scale(1.02) !important;
}

/* Botones toggle-features (Alta Seguridad) */
.toggle-features:hover {
    background: rgba(255,255,255,0.2) !important;
    transform: translateY(-3px) scale(1.03) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2) !important;
}

.toggle-features:active {
    transform: translateY(-1px) scale(1.01) !important;
}

/* Botón Ver más Área de Servicio */
#toggle-area-btn:hover {
    transform: translateY(-4px) scale(1.05) !important;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.5) !important;
    background: linear-gradient(135deg, #1d4ed8, #1e40af) !important;
}

#toggle-area-btn:active {
    transform: translateY(-2px) scale(1.02) !important;
}

/* Botón Ver más FAQs */
#faqToggleBtn:hover {
    transform: translateY(-4px) scale(1.05) !important;
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.5) !important;
    background: #2563eb !important;
}

#faqToggleBtn:active {
    transform: translateY(-2px) scale(1.02) !important;
}

/* Botón Ver más Aspectos de Valencia */
#toggle-aspectos-btn:hover {
    transform: translateY(-4px) scale(1.05) !important;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.5) !important;
    background: linear-gradient(135deg, #1d4ed8, #1e40af) !important;
}

#toggle-aspectos-btn:active {
    transform: translateY(-2px) scale(1.02) !important;
}

/* ========================================
   EFECTOS ESPECTACULARES PARA BOTONES
   ======================================== */

/* Botones LLAMAR (naranjas/rojos) - Efecto permanente */
.mobile-cta,
.cta-llamar-hero,
.btn-primary,
.desktop-nav a[href*="tel"] {
    position: relative !important;
    overflow: hidden !important;
    filter: brightness(1.05) saturate(1.1) !important;
    box-shadow: 0 0 20px rgba(220, 38, 38, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

/* Hover MUY pronunciado para botones LLAMAR */
.mobile-cta:hover,
.cta-llamar-hero:hover,
.btn-primary:hover,
.desktop-nav a[href*="tel"]:hover {
    transform: translateY(-4px) scale(1.05) !important;
    box-shadow: 0 12px 24px rgba(220, 38, 38, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
    filter: brightness(1.1) saturate(1.15) !important;
}

/* Botones WHATSAPP (verdes) - Efecto permanente */
.cta-whatsapp-hero,
.btn-secondary,
.desktop-nav a[href*="wa.me"],
.mobile-menu nav a[href*="wa.me"] {
    position: relative !important;
    overflow: hidden !important;
    filter: brightness(1.05) !important;
    box-shadow: 0 0 15px rgba(37, 211, 102, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

/* Hover MUY pronunciado para botones WHATSAPP */
.cta-whatsapp-hero:hover,
.btn-secondary:hover,
.desktop-nav a[href*="wa.me"]:hover {
    transform: translateY(-4px) scale(1.05) !important;
    box-shadow: 0 12px 24px rgba(37, 211, 102, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
    filter: brightness(1.15) !important;
    background: linear-gradient(135deg, #dcfce7, #bbf7d0) !important;
    color: #15803d !important;
}

/* Botones VER MÁS (azules) - Efecto permanente */
#toggle-area-btn,
#faqToggleBtn,
#toggle-aspectos-btn {
    position: relative !important;
    overflow: hidden !important;
    filter: brightness(1.05) saturate(1.1) !important;
    box-shadow: 0 0 20px rgba(37, 99, 235, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

/* Hover MUY pronunciado para botones VER MÁS */
#toggle-area-btn:hover,
#faqToggleBtn:hover,
#toggle-aspectos-btn:hover {
    transform: translateY(-8px) scale(1.12) !important;
    box-shadow: 0 20px 40px rgba(37, 99, 235, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
    filter: brightness(1.15) saturate(1.2) !important;
}

/* Botones toggle-features (Alta Seguridad) - Efecto permanente */
.toggle-features {
    filter: brightness(1.05) !important;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2) !important;
}

.toggle-features:hover {
    transform: translateY(-6px) scale(1.1) !important;
    filter: brightness(1.15) !important;
    box-shadow: 0 15px 30px rgba(255, 255, 255, 0.3) !important;
}

/* Z-index dinámico para botones hero - El hover siempre encima */
.cta-llamar-hero,
.cta-whatsapp-hero {
    z-index: 1 !important;
}

.cta-llamar-hero:hover,
.cta-whatsapp-hero:hover {
    z-index: 10 !important;
}

/* Premium Table of Contents */
.toc-section {
    background: #f8fafc;
    padding: 40px 0;
    position: relative;
    z-index: 10;
}

.toc-container {
    background: white;
    border-radius: 16px;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05), 0 5px 15px -5px rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(226, 232, 240, 0.8);
    overflow: hidden;
    transition: all 0.3s ease;
    max-width: 1000px;
    margin: 0 auto;
}

.toc-details summary {
    list-style: none;
}

.toc-details summary::-webkit-details-marker {
    display: none;
}

.toc-summary {
    padding: 20px 25px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(to right, #ffffff, #f8fafc);
    transition: background 0.3s;
    user-select: none;
}

.toc-summary:hover {
    background: #f1f5f9;
}

.toc-title {
    display: flex;
    align-items: center;
    gap: 15px;
    font-weight: 700;
    color: #1e293b;
    font-size: 1.1rem;
}

.toc-icon-box {
    background: linear-gradient(135deg, #2563eb, #2563eb);
    color: white;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 1.2rem;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.2);
}

.toc-chevron {
    color: #94a3b8;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 1.2rem;
}

details[open] .toc-chevron {
    transform: rotate(180deg);
}

.toc-content {
    padding: 0 25px 30px 25px;
    animation: slideDown 0.3s ease-out;
    border-top: 1px solid #f1f5f9;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.toc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    margin-top: 20px;
}

.toc-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    text-decoration: none;
    color: #475569;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.toc-link:hover {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -4px rgba(59, 130, 246, 0.15);
}

.toc-link::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 4px;
    background: #2563eb;
    opacity: 0;
    transition: opacity 0.2s;
}

.toc-link:hover::before {
    opacity: 1;
}

.toc-link-bullet {
    color: #cbd5e1;
    font-size: 0.6rem;
    transition: all 0.2s;
}

.toc-link:hover .toc-link-bullet {
    color: #2563eb;
    transform: scale(1.2);
}

/* Premium Buttons */
.toggle-features, #toggle-area-btn {
    background: linear-gradient(135deg, #2563eb 0%, #2563eb 100%) !important;
    color: white !important;
    padding: 12px 24px !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 20px !important;
    font-size: 0.95rem !important;
}

.toggle-features:hover, #toggle-area-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(37, 99, 235, 0.4) !important;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
}

/* Subtle Text Link for Read More */
.seo-read-more {
    background: transparent !important;
    color: #2563eb !important;
    padding: 8px 0 !important;
    border: none !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: 15px !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

.seo-read-more:hover {
    color: #1d4ed8 !important;
    transform: translateX(5px) !important;
    background: transparent !important;
    box-shadow: none !important;
    text-decoration: underline !important;
    text-underline-offset: 4px !important;
}

.seo-read-more:active, .toggle-features:active, #toggle-area-btn:active {
    transform: translateY(0) !important;
}

/* Ensure consistent spacing for the button when content is expanded */
.seo-hidden-content {
    margin-bottom: 20px; /* Add margin below the hidden content */
}

/* Scroll to Top Button */
#scroll-to-top {
    position: fixed;
    bottom: 30px;
    left: 30px;
    width: 50px;
    height: 50px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 9999;
    border: 1px solid #e2e8f0;
}

#scroll-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#scroll-to-top:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    border-color: #2563eb;
}

#scroll-to-top svg {
    width: 24px;
    height: 24px;
    fill: #2563eb;
    transition: transform 0.3s;
}

#scroll-to-top:hover svg {
    transform: translateY(-3px);
}

/* Mega Menu Styles Premium */
.mega-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: white;
    border: 1px solid rgba(229, 231, 235, 0.5);
    border-radius: 16px;
    box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.1), 0 10px 20px -5px rgba(0, 0, 0, 0.04);
    padding: 30px;
    width: 900px;
    max-width: 90vw;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    backdrop-filter: blur(10px);
}

.nav-dropdown:hover .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.mega-menu-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px 20px;
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 15px;
}

/* Scrollbar Premium */
.mega-menu-grid::-webkit-scrollbar {
    width: 5px;
}

.mega-menu-grid::-webkit-scrollbar-track {
    background: transparent;
}

.mega-menu-grid::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 10px;
}

.mega-menu-grid::-webkit-scrollbar-thumb:hover {
    background: #cbd5e1;
}

.mega-menu-item {
    display: flex;
    align-items: center;
    color: #475569;
    text-decoration: none;
    font-size: 0.9rem;
    padding: 10px 12px;
    border-radius: 8px;
    transition: all 0.2s ease;
    font-weight: 500;
    border: 1px solid transparent;
}

.mega-menu-item:hover {
    color: #2563eb;
    background: #eff6ff;
    border-color: #dbeafe;
    transform: translateX(3px);
}

/* Flechita superior sutil */
.mega-menu::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background: white;
    border-left: 1px solid rgba(229, 231, 235, 0.5);
    border-top: 1px solid rgba(229, 231, 235, 0.5);
}

/* Tarifas Dropdown Styling */
.tarifas-dropdown {
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    border: 1px solid #e2e8f0;
    overflow: hidden;
}

.tarifa-item {
    transition: background-color 0.2s ease;
}

.tarifa-item:hover {
    background-color: #f8fafc;
}

.tarifa-item:last-child {
    border-bottom: none !important;
}

/* Mobile Tarifas Styling */
#dropdown-tarifas .tarifa-item:last-child {
    border-bottom: none !important;
}

/* Premium Tarifas Dropdown */
.tarifas-dropdown {
    min-width: auto !important; /* Auto width to fit content */
    width: max-content !important; /* Shrink to fit content */
    max-width: 500px !important; /* Prevent it from getting too wide */
    padding: 0 !important;
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.15), 0 10px 20px -5px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(226, 232, 240, 0.8);
    overflow: hidden;
    transform-origin: top center;
    animation: dropdownFadeIn 0.2s ease-out;
}

@keyframes dropdownFadeIn {
    from { opacity: 0; transform: translateY(-10px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.tarifas-header {
    background: linear-gradient(to right, #f8fafc, #ffffff);
    padding: 16px 24px;
    border-bottom: 1px solid #e2e8f0;
    font-weight: 800;
    color: #1e293b;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.tarifas-icon {
    font-size: 1.2rem;
}

.tarifas-list {
    padding: 8px 0;
}

.tarifa-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px; /* Reduced padding */
    gap: 30px; /* Consistent gap between name and price */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: default;
    border-left: 3px solid transparent;
}

.tarifa-row:hover {
    background-color: #f1f5f9;
    border-left-color: #2563eb;
    padding-left: 28px; /* Efecto de desplazamiento suave */
}

.tarifa-name {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #334155;
    font-weight: 600;
    font-size: 0.95rem;
}

.tarifa-item-icon {
    font-size: 1.1rem;
    opacity: 0.8;
}

.tarifa-price-badge {
    background: #eff6ff;
    color: #2563eb;
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.9rem;
    white-space: nowrap;
    border: 1px solid #dbeafe;
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.05);
    transition: all 0.2s ease;
}

.tarifa-row:hover .tarifa-price-badge {
    background: #2563eb;
    color: white;
    border-color: #2563eb;
    box-shadow: 0 4px 6px rgba(37, 99, 235, 0.2);
    transform: scale(1.05);
}

/* Fix Mega Menu Alignment (Right Aligned) */
.nav-dropdown:nth-last-child(1) .mega-menu,
.nav-dropdown:nth-last-child(2) .mega-menu,
.nav-dropdown:nth-last-child(3) .mega-menu {
    left: auto !important;
    right: 0 !important;
    transform-origin: top right !important;
}

/* Ensure dropdowns don't overflow screen */
.mega-menu {
    max-width: 90vw; /* Prevent overflow on smaller desktop screens */
}

/* MEGA MENU FIX: Positioning relative to the main nav container */

/* 1. Make the parent container relative */
.desktop-nav {
    position: relative !important;
}

/* 2. Make individual dropdown items static so they don't trap the absolute child */
.nav-dropdown {
    position: static !important;
}

/* 3. Position the mega-menu relative to the full nav bar */
.mega-menu {
    left: auto !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 900px !important; /* Limit width for readability */
    margin-top: 0 !important; /* NO MARGIN - Must sit flush with header */
    top: 100% !important; /* Starts exactly at bottom of header */
}

/* 4. Keep standard dropdowns (Servicios ONLY) relative to their parent */
.nav-dropdown:nth-child(2) { /* Servicios */
    position: relative !important;
}

.nav-dropdown:nth-child(2) .dropdown-menu {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) translateY(10px) !important;
    width: auto !important;
    min-width: 260px !important;
}

/* 5. NUCLEAR FIX FOR TARIFAS MEGA MENU (Compact Width) */
/* Using ID selector for maximum specificity */
#tarifas-dropdown-container {
    position: relative !important;
}

#tarifas-dropdown-container .mega-menu {
    width: fit-content !important; /* Modern standard */
    width: -moz-fit-content !important; /* Firefox */
    min-width: 0 !important; /* Reset any min-width */
    max-width: 90vw !important; /* Safety cap */
    left: 50% !important; /* Center horizontally relative to parent */
    right: auto !important;
    transform: translateX(-50%) !important; /* Perfect centering */
    margin-top: 0 !important;
    padding: 0 !important; /* Remove extra padding from container */
    white-space: nowrap; /* Prevent wrapping unless necessary */
}

/* Ensure the grid inside also fits content */
#tarifas-dropdown-container .tarifas-mega-grid {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    display: block !important; /* Stack items vertically */
}

#tarifas-dropdown-container .tarifa-row {
    width: 100%;
    box-sizing: border-box;
}

/* Tarifas is now a Mega Menu, handled by .has-mega-menu rules */

/* Specific styling for Tarifas Mega Menu Grid */
.tarifas-mega-grid {
    display: grid;
    grid-template-columns: 1fr; 
    gap: 12px;
    max-width: 600px; /* Limit width for readability */
    margin: 0 auto; /* Center the grid */
}

.tarifas-mega-grid .tarifa-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-radius: 8px;
    transition: background 0.2s;
    border-bottom: 1px solid #f3f4f6;
}

.tarifas-mega-grid .tarifa-row:hover {
    background: #f9fafb;
}

.tarifas-mega-grid .tarifa-name {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    color: #1f2937;
    font-size: 1rem;
}

.tarifas-mega-grid .tarifa-item-icon {
    font-size: 1.2rem;
}

.tarifas-mega-grid .tarifa-price-badge {
    background: #eff6ff;
    color: #2563eb;
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.9rem;
    border: 1px solid #bfdbfe;
    white-space: nowrap;
}

/* Add triangle indicator for Mega Menu */
.nav-dropdown.has-mega-menu:hover::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    /* border-bottom: 8px solid #2563eb; REMOVED */
    z-index: 1001;
    pointer-events: none;
}

/* ROBUST MEGA MENU FIX (Class-based) */

/* 1. Default behavior: Relative positioning for standard dropdowns (Servicios, Tarifas) */
.nav-dropdown {
    position: relative !important;
}

/* 2. Special behavior for Mega Menus (Barrios, Pueblos): Static positioning */
.nav-dropdown.has-mega-menu {
    position: static !important;
}

/* 3. Mega Menu Container Positioning */
.nav-dropdown.has-mega-menu .mega-menu {
    left: auto !important;
    right: 0 !important;
    width: 900px !important; /* Fixed generous width */
    max-width: 95vw !important; /* Safety for smaller screens */
    margin-top: 20px !important;
    transform: translateX(0) !important; /* Reset any centering */
}

/* 4. Ensure the parent nav is the reference point */
.desktop-nav {
    position: relative !important;
}

/* FIX TARIFAS WIDTH (Single Line) */
.tarifas-dropdown {
    min-width: 600px !important; /* Increased from 450px */
    white-space: nowrap !important; /* Force single line */
}

.tarifa-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 30px !important; /* Ensure space between text and price */
}

.tarifa-name {
    flex: 1 !important;
    white-space: nowrap !important;
}

.tarifa-price-badge {
    flex-shrink: 0 !important; /* Prevent badge from shrinking */
    white-space: nowrap !important;
}

/* ========================================
   HOVER BRIDGE FIX (PADDING METHOD)
   ======================================== */
/* No extra pseudo-elements needed, padding-top handles the bridge naturally */

/* FIX HOVER GAP: Full height method */
.dropdown-menu, 
.mega-menu {
    margin-top: 0 !important; 
    padding-top: 0 !important; /* No padding needed with full height nav */
}

/* Ensure the content inside doesn't get messed up by the padding */
.mega-menu-grid,
.tarifas-dropdown,
.dropdown-menu > a {
    background: white; /* Restore background for content */
    position: relative;
    z-index: 1001;
}

/* Special handling for Tarifas to ensure shadow/border looks right */
.tarifas-dropdown {
    box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.15), 0 10px 20px -5px rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    overflow: hidden;
}

/* Specific fix for mega menus to ensure the bridge covers the full width if needed */
.nav-dropdown.has-mega-menu::after {
    width: 150%; /* Wider bridge for mega menus */
    left: -25%;
}

/* ========================================
   PRECIOS CLAROS SECTION
   ======================================== */
.precios-claros-section h2 {
    font-size: 2.2rem;
}

.precios-claros-section h3 {
    font-size: 1.4rem;
}

@media (max-width: 768px) {
    .precios-claros-section {
        padding: 40px 0 !important;
    }
    
    .precios-claros-section h2 {
        font-size: 1.8rem !important;
        flex-direction: column;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    
    .precios-claros-section h3 {
        font-size: 1.2rem !important;
    }
    
    .precios-claros-section p {
        font-size: 1rem !important;
    }
}

/* ========================================
   SEO CONTENT COMPACTING
   ======================================== */
.seo-content-block h2 {
    margin-bottom: 10px !important;
}

.seo-content-block p {
    margin-bottom: 10px !important;
}

@media (max-width: 768px) {
    .seo-content-block {
        padding: 15px 0 !important;
    }
    
    .seo-content-block h2 {
        font-size: 1.5rem !important;
        margin-bottom: 8px !important;
    }
    
    .seo-content-block p {
        margin-bottom: 8px !important;
    }
}

/* New Technical Content Sections */
.seo-content-block h3 {
    font-size: 1.5rem;
    color: #1e293b;
    margin-top: 25px;
    margin-bottom: 15px;
    font-weight: 700;
}

.seo-content-block ul {
    list-style: disc;
    padding-left: 20px;
    color: #475569;
    margin-bottom: 15px;
}

.seo-content-block li {
    margin-bottom: 10px;
    line-height: 1.6;
}

.seo-content-block strong {
    color: #1e293b;
    font-weight: 700;
}

/* Ensure alternating backgrounds work correctly */
section:nth-of-type(even) {
    background-color: #f8fafc;
}

section:nth-of-type(odd) {
    background-color: white;
}

/* Specific overrides for sections that need specific backgrounds */
.hero {
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #60a5fa 100%) !important;
}

.high-security-section {
    background: #111827 !important;
}

.cta-final {
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%) !important;
}

footer {
    background: #1a1a1a !important;
}

/* Mobile adjustments for new sections */
@media (max-width: 768px) {
    .seo-content-block h3 {
        font-size: 1.3rem;
        margin-top: 20px;
    }
    
    .seo-content-block ul {
        padding-left: 15px;
    }
}

/* SEO Read More Button Styles */
.seo-read-more {
    background: none;
    border: none;
    color: #2563eb;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    padding: 0;
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.seo-read-more:hover {
    text-decoration: underline;
}

/* --- V53 Improvements --- */

/* Hide Elfsight Widget Title */
.elfsight-app-8709aaa2-ccea-4473-bf06-7433400f74b5 h2,
.eapps-widget-header-title-text,
div[class*="eapps-widget-header-title-text"],
div[class*="WidgetTitle__WidgetTitleText"] {
    display: none !important;
}

/* Premium Location Badge Animation */
@keyframes pulse-glow {
    0% {
        box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.4);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(251, 191, 36, 0);
        transform: scale(1.02);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(251, 191, 36, 0);
        transform: scale(1);
    }
}

.location-badge-premium {
    animation: pulse-glow 3s infinite;
}

/* --- V54 Aggressive Fixes --- */

/* NUCLEAR OPTION: Hide Elfsight Title by Content */
/* This targets any h2 inside the widget that contains the specific text */
.elfsight-app-8709aaa2-ccea-4473-bf06-7433400f74b5 h2:not(:empty),
.eapps-google-reviews-header-title-text,
[class*="Header__TitleText"],
[class*="WidgetTitle__WidgetTitleText"],
.es-widget-title,
.es-header-title {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Specific fix for the text "Lo que dicen nuestros clientes" if it appears in a specific container */
.elfsight-app-8709aaa2-ccea-4473-bf06-7433400f74b5 div:contains("Lo que dicen nuestros clientes") {
    display: none !important;
}

/* --- V55 Improvements --- */

/* Shimmer Effect for Location Badge */
@keyframes shimmer-sweep {
    0% {
        background-position: -200% center;
    }
    100% {
        background-position: 200% center;
    }
}

.location-badge-premium {
    position: relative;
    overflow: hidden;
    /* Create the gradient for the shimmer */
    background: linear-gradient(
        120deg,
        #1a1a1a 30%,
        #3d3d3d 40%,
        #5a5a5a 50%,
        #3d3d3d 60%,
        #1a1a1a 70%
    );
    background-size: 200% auto;
    /* Combine pulse (from V53) with new shimmer */
    animation: pulse-glow 3s infinite, shimmer-sweep 4s linear infinite;
}

/* Reduce whitespace in Reviews Section */
.reviews-section .section-header {
    margin-bottom: 10px !important; /* Reduced from default */
}

.reviews-section .section-header p {
    margin-bottom: 5px !important;
}

/* Pull the widget up closer to the header */
.elfsight-app-8709aaa2-ccea-4473-bf06-7433400f74b5 {
    margin-top: -10px !important;
}

/* --- V56 Improvements --- */

/* High-Contrast Bidirectional Shimmer Effect */
@keyframes shimmer-sweep-intense {
    0% {
        background-position: -150% center;
    }
    50% {
        background-position: 250% center;
    }
    100% {
        background-position: -150% center;
    }
}

.location-badge-premium {
    position: relative;
    overflow: hidden;
    /* Darker base with a VERY bright, sharp highlight line */
    background: linear-gradient(
        110deg,
        #0f172a 35%,
        #fbbf24 48%,
        #ffffff 50%,
        #fbbf24 52%,
        #0f172a 65%
    ) !important;
    background-size: 250% auto !important;
    /* Faster, bidirectional animation */
    animation: pulse-glow 3s infinite, shimmer-sweep-intense 3s ease-in-out infinite !important;
    /* Ensure text remains readable on top */
    z-index: 1;
}

/* Ensure text shadow helps readability during the bright flash */
.location-badge-premium span,
.location-badge-premium {
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

/* --- V57 Improvements --- */

/* Aggressive whitespace removal between SEO blocks */
.servicios-section {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Ensure container inside doesn't add extra gap */
.servicios-section > .container {
    padding-top: 0 !important;
}

/* Remove bottom margin from the "Read More" button of the previous section */
.seo-read-more {
    margin-bottom: 5px !important;
}

/* --- Premium Table of Contents Styles --- */
.toc-container {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 25px;
    max-width: 800px;
    margin: 0 auto;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.toc-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 15px;
}

.toc-icon {
    font-size: 1.5rem;
}

.toc-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    columns: 2; /* Two columns layout for desktop */
    column-gap: 40px;
}

.toc-list li {
    margin-bottom: 12px;
    break-inside: avoid; /* Prevent items from splitting across columns */
}

.toc-list a {
    text-decoration: none;
    color: #2563eb;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.toc-list a:before {
    content: "•";
    color: #cbd5e1;
    font-size: 1.2em;
}

.toc-list a:hover {
    color: #1d4ed8;
    transform: translateX(5px);
}

/* Mobile responsiveness for TOC */
@media (max-width: 768px) {
    .toc-list {
        columns: 1; /* Single column on mobile */
    }
    
    .toc-container {
        padding: 20px;
    }
}

/* --- Smooth Scrolling & Anchor Offset --- */
html {
    scroll-behavior: smooth;
}

/* Ensure anchor links don't get hidden behind the fixed header */
h2[id], section[id] {
    scroll-margin-top: 120px; /* Adjust based on header height + some breathing room */
}

/* Specific adjustment for mobile where header might be smaller */
@media (max-width: 768px) {
    h2[id], section[id] {
        scroll-margin-top: 80px;
    }
}


/* ========================================
   FIX FINAL: EVITAR DESBORDAMIENTO MÓVIL
   ======================================== */
html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Asegurar que las imágenes no rompan el ancho */
img {
    max-width: 100% !important;
    height: auto !important;
}

/* Ajuste específico para contenedores en móvil */
@media (max-width: 768px) {
    .container {
        width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    
    /* Forzar que el grid del blog sea de 1 columna */
    .blog-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        width: 100% !important;
    }
    
    /* Asegurar que las tarjetas no se salgan */
    .blog-card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
}


/* ========================================
   FIX CRÍTICO: OCULTAR MENÚ DESKTOP EN MÓVIL
   ======================================== */

/* 1. Ocultar estrictamente la navegación de escritorio en pantallas pequeñas */
@media (max-width: 1024px) {
    .desktop-nav,
    nav.desktop-nav,
    .nav-dropdown,
    .mega-menu,
    .dropdown-menu {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        left: -9999px !important;
    }
}

/* 2. Asegurar que el header móvil se vea limpio */
@media (max-width: 768px) {
    .header-container {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        height: 70px !important;
        padding: 0 15px !important;
        overflow: hidden !important; /* Evita que nada se salga */
    }

    /* Logo ajustado */
    .header-logo img {
        height: 50px !important; /* Tamaño controlado */
        width: auto !important;
    }

    /* Botón CTA móvil visible */
    .mobile-cta {
        display: flex !important;
        white-space: nowrap !important;
        font-size: 0.85rem !important;
        padding: 8px 12px !important;
        margin-right: 10px !important;
    }

    /* Hamburguesa visible */
    .hamburger {
        display: flex !important;
        margin-left: 0 !important;
    }
}

/* 3. Prevenir cualquier desbordamiento horizontal global */
html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    position: relative !important;
}


/* ========================================
   FIX FINAL LOGO ESCRITORIO (CACHE BUSTER)
   ======================================== */
.header-logo img {
    height: 60px !important;
    max-height: 60px !important;
    width: auto !important;
}

@media (min-width: 1024px) {
    .header-logo img {
        height: 60px !important;
        max-height: 60px !important;
    }
}


/* ========================================
   FIX NUCLEAR LOGO (V99)
   ======================================== */
.header-logo {
    height: 60px !important;
    max-height: 60px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
}

.header-logo img {
    height: 60px !important;
    max-height: 60px !important;
    width: auto !important;
    object-fit: contain !important;
}


/* ========================================
   FIX FINAL V100: BOTÓN MÓVIL Y LOGO
   ======================================== */

/* Asegurar que el botón móvil se oculte en escritorio */
@media (min-width: 769px) {
    .mobile-cta {
        display: none !important;
    }
}

/* Asegurar que el botón móvil se vea en móvil */
@media (max-width: 768px) {
    .mobile-cta {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: linear-gradient(135deg, #f97316, #dc2626) !important;
        color: white !important;
        padding: 8px 14px !important;
        border-radius: 8px !important;
        text-decoration: none !important;
        font-weight: 700 !important;
        font-size: 0.85rem !important;
        margin-right: 10px !important;
    }
}

/* Refuerzo final para el logo */
.header-logo img {
    height: 60px !important;
    width: auto !important;
    max-width: 250px !important;
}

/* ========================================
   FIX V143: BOTÓN FIJO EN HEADER Y LOGO
   ======================================== */

/* Botón de llamada fijo en header (Móvil) */
@media (max-width: 1024px) {
    .mobile-cta {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        background: #dc2626 !important; /* Rojo urgente */
        color: white !important;
        padding: 8px 12px !important;
        border-radius: 8px !important;
        text-decoration: none !important;
        font-weight: 700 !important;
        font-size: 0.9rem !important;
        box-shadow: 0 2px 5px rgba(220, 38, 38, 0.3);
        margin-right: 10px;
        height: 40px;
    }
    
    .mobile-cta:hover {
        background: #b91c1c !important;
    }
    
    /* Ajuste del header para acomodar el botón */
    .header-container {
        padding: 0 15px !important;
        height: 80px !important; /* Un poco más alto para que respire */
    }
    
    /* Logo en móvil un poco más grande si cabe */
    .header-logo img {
        height: 60px !important;
        max-height: 60px !important;
    }
}

/* En escritorio ocultamos el botón móvil del header */
@media (min-width: 1025px) {
    .mobile-cta {
        display: none !important;
    }
}

/* ========================================
   FIX V144: VISIBILIDAD ROBUSTA (NO INLINE)
   ======================================== */

/* Clases de utilidad para visibilidad */
.mobile-only-call {
    display: none !important; /* Por defecto oculto en desktop */
}

.desktop-budget-btn {
    display: inline-flex !important; /* Por defecto visible en desktop */
}

/* Reglas para MÓVIL (max-width: 1024px) */
@media (max-width: 1024px) {
    /* Mostrar botón de llamada móvil */
    .mobile-only-call {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 100%;
        background: #dc2626;
        color: white;
        font-weight: 700;
        padding: 12px;
        border-radius: 8px;
        margin-bottom: 10px;
        text-decoration: none;
    }
    
    /* Mostrar botón de presupuesto también en móvil (restaurado) */
    .desktop-budget-btn {
        display: inline-flex !important;
        width: 100%;
        justify-content: center;
        margin-bottom: 10px;
    }
    
    /* Botón fijo del header */
    .mobile-cta {
        display: inline-flex !important;
        align-items: center;
        background: #dc2626;
        color: white;
        padding: 6px 12px;
        border-radius: 6px;
        text-decoration: none;
        font-weight: 700;
        margin-right: 10px;
    }
}

/* Reglas para ESCRITORIO (min-width: 1025px) */
@media (min-width: 1025px) {
    /* Ocultar botón de llamada móvil */
    .mobile-only-call {
        display: none !important;
    }
    
    /* Ocultar botón fijo del header */
    .mobile-cta {
        display: none !important;
    }
    
    /* Grid de servicios forzado a 4 columnas */
    .servicios-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* ========================================
   FIX V145: VISIBILIDAD ROBUSTA (NO INLINE)
   ======================================== */

/* Clases de utilidad para visibilidad */
.mobile-only-call {
    display: none !important; /* Por defecto oculto en desktop */
}

.desktop-budget-btn {
    display: inline-flex !important; /* Por defecto visible en desktop */
}

/* Reglas para MÓVIL (max-width: 1024px) */
@media (max-width: 1024px) {
    /* Mostrar botón de llamada móvil */
    .mobile-only-call {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 100%;
        background: #dc2626;
        color: white;
        font-weight: 700;
        padding: 12px;
        border-radius: 8px;
        margin-bottom: 10px;
        text-decoration: none;
    }
    
    /* Mostrar botón de presupuesto también en móvil (restaurado) */
    .desktop-budget-btn {
        display: inline-flex !important;
        width: 100%;
        justify-content: center;
        margin-bottom: 10px;
    }
    
    /* Botón fijo del header */
    .mobile-cta {
        display: inline-flex !important;
        align-items: center;
        background: #dc2626;
        color: white;
        padding: 6px 12px;
        border-radius: 6px;
        text-decoration: none;
        font-weight: 700;
        margin-right: 10px;
    }
}

/* Reglas para ESCRITORIO (min-width: 1025px) */
@media (min-width: 1025px) {
    /* Ocultar botón de llamada móvil */
    .mobile-only-call {
        display: none !important;
    }
    
    /* Ocultar botón fijo del header */
    .mobile-cta {
        display: none !important;
    }
    
    /* Grid de servicios forzado a 4 columnas */
    .servicios-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* ========================================
   FIX V146: NUCLEAR OPTION (SAFETY NET)
   ======================================== */

@media (max-width: 1024px) {
    /* Forzar visibilidad extrema */
    a.mobile-only-call[style],
    a.mobile-cta[style] {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* ========================================
   FIX V147: STRICT VISIBILITY SEPARATION
   ======================================== */

/* 1. MOBILE HEADER BUTTON (Fixed in menu) */
/* Default: Hidden on desktop */
.mobile-cta {
    display: none !important;
}

/* Mobile: Visible */
@media (max-width: 1024px) {
    .mobile-cta {
        display: inline-flex !important;
        align-items: center;
        background: #dc2626;
        color: white;
        padding: 6px 12px;
        border-radius: 6px;
        text-decoration: none;
        font-weight: 700;
        margin-right: 10px;
    }
}

/* 2. URGENCY CARD BUTTON (Inside blue box) */
/* Always visible, styled by container */
.urgency-call-btn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 3. DESKTOP BUDGET BUTTON */
/* Default: Visible */
.desktop-budget-btn {
    display: inline-flex !important;
}

/* Mobile: Visible (as requested) */
@media (max-width: 1024px) {
    .desktop-budget-btn {
        width: 100%;
        justify-content: center;
        margin-bottom: 10px;
    }
}

/* V152 CRITICAL FIX: Force Hero and Urgency Card to grow on mobile */
@media (max-width: 768px) {
    .hero {
        height: auto !important;
        min-height: 100vh !important; /* Ensure it covers screen but can grow */
        padding-bottom: 60px !important; /* Extra space at bottom */
        overflow: visible !important; /* Allow content to spill if needed */
    }
    
    .hero-content {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
    }
    
    .urgency-card {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        margin-bottom: 40px !important; /* Push content below down */
    }
}


/* ========================================
   V153: MOBILE HEADER CALL BUTTON
   ======================================== */

/* Default: Hidden on Desktop */
.mobile-header-call-btn {
    display: none !important;
}

/* Mobile: Visible and Styled */
@media (max-width: 1024px) {
    .mobile-header-call-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
        color: white !important;
        text-decoration: none !important;
        padding: 8px 16px !important;
        border-radius: 50px !important; /* Pill shape */
        font-weight: 800 !important;
        font-size: 1rem !important;
        box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4) !important;
        margin-right: 15px !important; /* Space between button and hamburger */
        white-space: nowrap !important;
        animation: pulse-red 2s infinite !important;
        z-index: 99999 !important;
    }

    .mobile-header-call-btn .icon {
        font-size: 1.1rem !important;
    }

    /* Adjust header layout to accommodate the button */
    .header-container {
        justify-content: space-between !important;
        padding-right: 15px !important;
    }
    
    /* Ensure logo doesn't push button too far */
    .header-logo {
        flex: 1 !important;
        margin-right: 10px !important;
    }
    
    .header-logo img {
        max-width: 180px !important; /* Prevent logo from taking too much space */
    }
}

@keyframes pulse-red {
    0% {
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(220, 38, 38, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0);
    }
}


/* ================================
   V156 FIXES (GPT) — Layout & CTA
   ================================ */

/* Desktop services grid: 4 columns (2 rows of 4 when 8 items) */
.precios-grid{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

/* Slightly reduce to 2 cols on medium screens */
@media (max-width: 1024px){
    .precios-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobile header call button between logo and hamburger */
@media (max-width: 768px){
    a.mobile-cta-v156{
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        background: #e11d48;
        color: #ffffff !important;
        text-decoration: none;
        padding: 10px 12px;
        border-radius: 12px;
        font-weight: 800;
        font-size: 0.92rem;
        line-height: 1;
        white-space: nowrap;
        margin-right: 10px;
        box-shadow: 0 8px 18px rgba(0,0,0,0.22);
    }
}

/* Hero mobile call button (red) */
.btn.btn-call{
    background: #e11d48;
    color: #ffffff !important;
    border: 2px solid rgba(255,255,255,0.25);
}
.btn.btn-call:hover{
    filter: brightness(1.05);
}

.hero-call-mobile{
    display: none;
}
@media (max-width: 768px){
    .hero-call-mobile{
        display: inline-flex;
    }
}

/* Footer phone readable on mobile */
@media (max-width: 768px){
    .footer-phone{
        color: #ffffff !important;
    }
}


/* V162: Call Float Button (Cloned from WhatsApp) */
.call-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: #dc2626; /* Red */
    width: 65px;
    height: 65px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.5);
    z-index: 9999;
    transition: all 0.3s;
    text-decoration: none;
    border: 3px solid white;
}

.call-float:hover {
    transform: scale(1.15);
    box-shadow: 0 8px 25px rgba(220, 38, 38, 0.7);
}

.call-float svg {
    width: 35px;
    height: 35px;
    fill: white;
}

/* Desktop: Hide Call Float */
@media (min-width: 1025px) {
    .call-float {
        display: none !important;
    }
}

/* Mobile: Ensure Visibility */
@media (max-width: 1024px) {
    .call-float {
        display: flex !important;
    }
}

/* V176: CRITICAL FIX FOR FIXED POSITIONING - FORCE RESET */
html, body {
    transform: none !important;
    filter: none !important;
    perspective: none !important;
    overflow-x: visible !important;
    height: auto !important;
    contain: none !important; /* Prevent containment context */
}

/* Ensure no other container traps fixed elements */
#page, .site, .site-wrapper, .wrapper, #content {
    transform: none !important;
    filter: none !important;
    perspective: none !important;
    contain: none !important;
}


/* === Mobile UX: call button + hamburger + hero call + floating call === */
@media (max-width: 1024px){
  /* Keep desktop nav hidden on mobile */
  .desktop-nav { display:none !important; }

  /* Header layout */
  .header-container{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
    padding: 0 12px !important;
    height: 72px !important;
  }
  .header-logo { height:72px !important; padding:0 !important; display:flex !important; align-items:center !important; }
  .header-logo img { height:46px !important; max-height:46px !important; width:auto !important; }

  /* Call button in header */
  .mobile-cta-v156{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:#dc2626 !important;
    color:#fff !important;
    padding:10px 12px !important;
    border-radius:10px !important;
    text-decoration:none !important;
    font-weight:800 !important;
    font-size:0.95rem !important;
    line-height:1 !important;
    white-space:nowrap !important;
    height:42px !important;
  }

  /* Hamburger */
  .hamburger{
    display:flex !important;
    width:44px !important;
    height:44px !important;
    align-items:center !important;
    justify-content:center !important;
    gap:6px !important;
    border-radius:12px !important;
    transition: background .2s ease, transform .2s ease;
    user-select:none;
  }
  .hamburger:hover{ background:#f3f4f6; }
  .hamburger:active{ transform: scale(0.98); }
  .hamburger span{
    display:block;
    width:26px;
    height:3px;
    background:#374151;
    border-radius:6px;
    transition: transform .25s ease, opacity .2s ease;
  }
  .hamburger.is-active span:nth-child(1){ transform: translateY(9px) rotate(45deg); }
  .hamburger.is-active span:nth-child(2){ opacity:0; }
  .hamburger.is-active span:nth-child(3){ transform: translateY(-9px) rotate(-45deg); }

  /* Mobile menu */
  .mobile-menu{ display:none !important; }
  .mobile-menu.active{ display:block !important; }

  /* Hero call button (URGENCIAS) */
  .hero-call-mobile{
    background:#dc2626 !important;
    color:#fff !important;
    border-radius:10px !important;
    text-decoration:none !important;
  }

  /* Footer phone in white */
  a.footer-phone{ color:#ffffff !important; }
  a.footer-phone:hover{ color:#ffffff !important; }

  /* Floating call button */
  .floating-call-btn{
    position:fixed;
    right:16px;
    bottom:16px;
    width:56px;
    height:56px;
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#dc2626;
    color:#fff !important;
    text-decoration:none;
    font-size:22px;
    font-weight:800;
    z-index:999999;
    box-shadow:0 10px 20px rgba(0,0,0,.2);
  }
}
@media (min-width: 1025px){
  .floating-call-btn{ display:none !important; }
}
@media (max-width: 1024px){

  /* Que el logo no se coma la barra */
  .header-logo img{
    height: 44px !important;
    max-height: 44px !important;
    max-width: 150px !important;  /* clave */
    width: auto !important;
  }

  /* Que los items no se aplasten */
  .mobile-cta-v156{
    flex: 0 0 auto !important;
  }

  .hamburger{
    flex: 0 0 auto !important;
  }

  /* Que el contenedor permita respirar */
  .header-container{
    height: 72px !important;
    padding: 0 12px !important;
  }
}
.floating-call-btn{
  z-index: 999999 !important;
}
@media (max-width: 1024px){
  .hero-call-mobile{
    display:flex !important;
    background:#dc2626 !important;
    color:#fff !important;
    text-decoration:none !important;
    border-radius:10px !important;
    padding:14px 16px !important;
    font-weight:800 !important;
    justify-content:center !important;
    align-items:center !important;
    gap:10px !important;
  }
}
/* Botón flotante de llamada - solo móvil */
.floating-call-btn{
  display: none;
}

@media (max-width: 1024px){
  .floating-call-btn{
    display: flex !important;
    position: fixed !important;
    right: 18px !important;
    bottom: 18px !important;
    width: 60px !important;
    height: 60px !important;
    border-radius: 999px !important;
    align-items: center !important;
    justify-content: center !important;
    background: #dc2626 !important;
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 900 !important;
    font-size: 22px !important;
    z-index: 2147483647 !important;
    box-shadow: 0 10px 25px rgba(220,38,38,.45) !important;
  }
}
@media (max-width: 1024px){
  a.footer-phone{
    color: #ffffff !important;
  }
}
.floating-call-btn{ display:none; }

@media (max-width: 1024px){
  .floating-call-btn{
    display:flex !important;
    position:fixed !important;
    right:18px !important;
    bottom:18px !important;
    width:60px !important;
    height:60px !important;
    border-radius:999px !important;
    align-items:center !important;
    justify-content:center !important;
    background:#dc2626 !important;
    color:#fff !important;
    text-decoration:none !important;
    font-weight:900 !important;
    font-size:22px !important;
    z-index:2147483647 !important;
    box-shadow:0 10px 25px rgba(220,38,38,.45) !important;
  }
}


/* ================================
   MOBILE CTA OVERRIDES (SAFE)
   - Does NOT affect desktop
   - Forces phone CTAs visible on real mobile devices
=================================== */
@media (max-width: 1024px){
  header .header-container a.mobile-cta-v156{
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 2147483647 !important;
    pointer-events: auto !important;
  }
  a.floating-call-btn{
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: fixed !important;
    right: 18px !important;
    bottom: 18px !important;
    z-index: 2147483647 !important;
  }
  a.footer-phone{
    color: #ffffff !important;
  }
}

/* Hamburger animation hook: JS uses .active */
@media (max-width: 1024px){
  .hamburger.active span:nth-child(1){ transform: translateY(8px) rotate(45deg) !important; }
  .hamburger.active span:nth-child(2){ opacity: 0 !important; }
  .hamburger.active span:nth-child(3){ transform: translateY(-8px) rotate(-45deg) !important; }
}
@media (max-width: 768px) {
  header{ margin-bottom: 0 !important; }

  .header-container{ height: 72px !important; }
  .header-logo img{ height: 56px !important; }

  .hero{ padding-top: 18px !important; padding-bottom: 34px !important; }
  .hero, .hero-section, .hero-wrapper{ margin-top: 0 !important; }

  .hero .rating-badge,
  .hero .reviews-badge,
  .rating-badge,
  .reviews-badge{ display: none !important; }

  body > header + *{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}


/* Fix mobile scroll for Pueblos menu */
@media (max-width: 768px) {
    .accordion-content {
        max-height: 300px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* FIX SCROLL MOVIL MEJORADO */
@media (max-width: 768px) {
    .accordion-content {
        max-height: 0;
        overflow-y: auto !important; /* Forzar scroll vertical */
        -webkit-overflow-scrolling: touch; /* Scroll suave en iOS */
        overscroll-behavior: contain; /* Evitar que el scroll se propague al body */
    }
    
    .accordion-header.active + .accordion-content {
        max-height: 60vh !important; /* Altura relativa a la pantalla (60%) */
    }
}

/* --- V1.8.3 Fixes: Accordion Scroll & Link Styling --- */

/* 1. Fix for "Quartell" or any other link appearing different */
.lugares-list li a {
    color: #334155 !important; /* Force neutral dark gray */
    text-decoration: none !important;
    font-weight: 400 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    display: block; /* Ensure full width clickable */
    padding: 5px 0;
}

.lugares-list li a:hover {
    color: #f97316 !important; /* Orange on hover */
    text-decoration: underline !important;
    background: none !important;
}

/* Reset any potential "current" or "active" classes WordPress might add */
.lugares-list li.current-menu-item a,
.lugares-list li.active a {
    color: #334155 !important;
    font-weight: 400 !important;
    background: none !important;
}

/* 2. Mobile Scroll Fixes */
@media (max-width: 768px) {
    .accordion-content {
        /* Ensure scroll works on mobile */
        overflow-y: auto !important; 
        -webkit-overflow-scrolling: touch !important; /* Smooth scroll iOS */
        overscroll-behavior: contain !important; /* Prevent body scroll when end reached */
        /* Max-height is handled by JS, but set a safe fallback */
        max-height: 0; 
        transition: max-height 0.3s ease-out;
    }
    
    /* Ensure the list itself doesn't block scroll */
    .lugares-list {
        padding-bottom: 40px !important; /* Extra space at bottom to ensure last items are visible */
    }
}