/*
Theme Name: Origin-Go
Theme URI: https://cerrajerosvalencia.com
Author: GlobalJobs Ltd
Author URI: https://cerrajerosvalencia.com
Description: Theme profesional de alto rendimiento para Cerrajeros Valencia Origin-Go. Optimizado para SEO y conversión.
Version: 10.1.12
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-top: 8px !important; /* CV-SEO 2026-05-20: gap mínimo entre .marca-galeria y h3 — !important blinda contra UA + reglas posteriores */
    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;
}

/* CV-SEO 2026-05-19 (revisión): tarjetas del equipo en "Cerrajeros Valencia de confianza"
   muestran la foto completa, sin recorte. Para ello:
   - `object-fit: contain` + fondo `#f8f8f8` por defensa si algún padre forzara dimensiones.
   - `height: auto` deja a la proporción natural del <img> (600×800 / 675×900 = ratio 3:4)
     decidir el alto, sin letterbox.
   - `max-width: 420px` y centrado en la celda del grid reducen el tamaño visual.
   - !important + prefijo `body` para vencer al `style=""` inline del <img> y al
     `<style>` inline al final de la sección sin tocar `front-page.php`. */
body .confianza-section .confianza-grid figure {
    max-width: 420px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
body .confianza-section .confianza-grid figure img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    background: #f8f8f8 !important;
    display: block !important;
}

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

    /* CV-SEO 2026-05-19 (revisión): móvil ≤768px — foto completa al 100% del ancho
       de la columna, altura auto. Vence al <style> inline del front-page.php
       (`figure img { height: 280px !important; }`) mediante mayor especificidad
       con el prefijo `body`. */
    body .confianza-section .confianza-grid figure {
        max-width: none !important;
    }
    body .confianza-section .confianza-grid figure img {
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        background: #f8f8f8 !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;
        margin-top: 8px !important; /* CV-SEO 2026-05-20: mismo gap mínimo en móvil */
    }
    
    .card p {
        font-size: 0.875rem !important;
    }
    
    .card li {
        font-size: 0.875rem !important;
    }
    
    .card-image {
        height: 180px !important;
    }

    /* CV-SEO 2026-05-20: galería 2 fotos en móvil = columna. El contenedor
       cambia a height:auto (la altura la fijan los <picture> a 200px). */
    
    /* 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 */
    
    /* 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 */
    
    
    /* 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-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.5;
    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;
}

/* CV-SEO 2026-06-14: Dropdown desktop premium — glass + stagger + spring */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    min-width: 240px;
    box-shadow:
        0 20px 50px -10px rgba(0, 0, 0, 0.18),
        0 4px 12px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(229, 231, 235, 0.6);
    border-radius: 0 0 16px 16px;
    padding: 12px 0 10px;
    margin-top: 0;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px) scale(0.98);
    transform-origin: top center;
    transition:
        opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
        visibility 0.28s;
    overflow: hidden;
}
/* Stroke superior acento azul→naranja al abrirse */
.dropdown-menu::before {
    content: '';
    position: absolute;
    top: 0;
    left: 16px;
    right: 16px;
    height: 2px;
    background: linear-gradient(to right, rgba(37,99,235,0.7), rgba(249,115,22,0.7));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.08s;
}

.nav-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}
.nav-dropdown:hover .dropdown-menu::before {
    transform: scaleX(1);
}

/* 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 20px;
    color: #1f2937;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    position: relative;
    opacity: 0;
    transform: translateX(-8px);
    transition:
        opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
        background 0.2s,
        color 0.2s,
        padding-left 0.2s;
}

/* Stagger entrance — items aparecen en cascada al abrir */
.nav-dropdown:hover .dropdown-item {
    opacity: 1;
    transform: translateX(0);
}
.nav-dropdown:hover .dropdown-item:nth-child(1)  { transition-delay: 100ms, 100ms, 0s, 0s, 0s; }
.nav-dropdown:hover .dropdown-item:nth-child(2)  { transition-delay: 140ms, 140ms, 0s, 0s, 0s; }
.nav-dropdown:hover .dropdown-item:nth-child(3)  { transition-delay: 180ms, 180ms, 0s, 0s, 0s; }
.nav-dropdown:hover .dropdown-item:nth-child(4)  { transition-delay: 220ms, 220ms, 0s, 0s, 0s; }
.nav-dropdown:hover .dropdown-item:nth-child(5)  { transition-delay: 260ms, 260ms, 0s, 0s, 0s; }
.nav-dropdown:hover .dropdown-item:nth-child(6)  { transition-delay: 300ms, 300ms, 0s, 0s, 0s; }
.nav-dropdown:hover .dropdown-item:nth-child(7)  { transition-delay: 340ms, 340ms, 0s, 0s, 0s; }
.nav-dropdown:hover .dropdown-item:nth-child(n+8) { transition-delay: 380ms, 380ms, 0s, 0s, 0s; }

.dropdown-item:hover {
    background: linear-gradient(to right, rgba(37,99,235,0.06), rgba(249,115,22,0.04));
    color: #2563eb;
    padding-left: 24px;
}

/* Chevron de los triggers — spring rotation al abrir el dropdown */
.dropdown-trigger svg {
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: transform;
}
.nav-dropdown:hover .dropdown-trigger svg {
    transform: rotate(180deg);
}

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

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

.mobile-dropdown-trigger,
.mobile-dropdown-trigger > span {
    /* Forzar Inter — los <button> NO heredan font-family del body por defecto */
    font-family: inherit;
}
.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;
    letter-spacing: 0;
    line-height: 1.5;
    cursor: pointer;
    transition: background 0.3s;
    text-align: left;
}

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

/* CV-SEO 2026-06-14: trigger activo con tint cálido de marca */
.mobile-dropdown.is-open .mobile-dropdown-trigger {
    background: linear-gradient(to right, rgba(249, 115, 22, 0.07), rgba(249, 115, 22, 0));
    color: #0f172a;
}

/* Chevron con spring physics (bouncy elegante) */
.dropdown-arrow {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

/* Contenedor del dropdown — expansión natural + stroke acento como
   background-image en lugar de ::before (queda fijo aunque el contenido
   scrollee internamente, evitando que la línea desaparezca en Pueblos). */
.mobile-dropdown-content {
    max-height: 0;
    overflow: hidden;
    background:
        linear-gradient(to bottom, #f97316, #dc2626) left top / 3px 0% no-repeat,
        linear-gradient(to bottom, #f9fafb, #ffffff);
    transition:
        max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0.45s,
        background-size 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    visibility: hidden;
    position: relative;
}

.mobile-dropdown-content.active {
    max-height: 60vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    visibility: visible;
    /* Línea naranja→rojo a altura completa del padding box; no scrollea */
    background-size: 3px 100%, auto;
}

/* Items del dropdown */
.mobile-dropdown-content a {
    display: block;
    padding: 12px 16px;
    color: #4b5563;
    text-decoration: none;
    font-size: 0.95rem;
    border-bottom: 1px solid #e5e7eb;
    /* Estado inicial: oculto y desplazado */
    opacity: 0;
    transform: translateY(-8px);
    transition:
        opacity 0.35s ease,
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        background 0.2s,
        color 0.2s;
}

.mobile-dropdown-content.active a {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger 50ms por item — apple-style cascade */
.mobile-dropdown-content.active a:nth-child(1)  { transition-delay: 80ms,  80ms,  0s, 0s; }
.mobile-dropdown-content.active a:nth-child(2)  { transition-delay: 130ms, 130ms, 0s, 0s; }
.mobile-dropdown-content.active a:nth-child(3)  { transition-delay: 180ms, 180ms, 0s, 0s; }
.mobile-dropdown-content.active a:nth-child(4)  { transition-delay: 230ms, 230ms, 0s, 0s; }
.mobile-dropdown-content.active a:nth-child(5)  { transition-delay: 280ms, 280ms, 0s, 0s; }
.mobile-dropdown-content.active a:nth-child(6)  { transition-delay: 330ms, 330ms, 0s, 0s; }
.mobile-dropdown-content.active a:nth-child(7)  { transition-delay: 380ms, 380ms, 0s, 0s; }
.mobile-dropdown-content.active a:nth-child(8)  { transition-delay: 430ms, 430ms, 0s, 0s; }
.mobile-dropdown-content.active a:nth-child(9)  { transition-delay: 480ms, 480ms, 0s, 0s; }
.mobile-dropdown-content.active a:nth-child(10) { transition-delay: 530ms, 530ms, 0s, 0s; }
.mobile-dropdown-content.active a:nth-child(n+11) { transition-delay: 580ms, 580ms, 0s, 0s; }

/* 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);
    /* Override del estado base: micro-scale entrance en grid */
    transform: translateY(-8px) scale(0.96);
}

#dropdown-barrios.active a,
#dropdown-pueblos.active a {
    transform: translateY(0) scale(1);
}

#dropdown-barrios a:active,
#dropdown-pueblos a:active {
    background: #eff6ff;
    border-color: #2563eb;
    color: #2563eb;
    transform: translateY(0) scale(0.98);
}

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

/* Tap feedback premium en items de lista (no-grid) */
.mobile-dropdown-content a:active {
    background: linear-gradient(to right, rgba(249, 115, 22, 0.10), rgba(220, 38, 38, 0.04));
    color: #0f172a;
    transform: translateX(2px);
}

/* Reduced motion: fallback simple sin transforms ni stagger */
@media (prefers-reduced-motion: reduce) {
    .mobile-dropdown-content,
    .mobile-dropdown-content a,
    .dropdown-arrow,
    .mobile-dropdown-content::before,
    #dropdown-barrios a,
    #dropdown-pueblos a {
        transition: opacity 0.2s ease, visibility 0.2s ease, background 0.2s ease !important;
        transform: none !important;
        transition-delay: 0s !important;
    }
}

/* ========================================
   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(-12px) scale(0.98);
    transform-origin: top center;
    background: rgba(255, 255, 255, 0.93);
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid rgba(229, 231, 235, 0.6);
    border-radius: 18px;
    box-shadow:
        0 28px 60px -10px rgba(0, 0, 0, 0.18),
        0 8px 18px -4px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    padding: 30px;
    width: 900px;
    max-width: 90vw;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1),
        visibility 0.3s;
    z-index: 1000;
    overflow: hidden;
}
/* Stroke superior acento azul→naranja */
.mega-menu::after {
    content: '';
    position: absolute;
    top: 0;
    left: 30px;
    right: 30px;
    height: 2px;
    background: linear-gradient(to right, rgba(37,99,235,0.7), rgba(249,115,22,0.7));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}

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

.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:
        color 0.2s,
        background 0.25s,
        border-color 0.25s,
        transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    font-weight: 500;
    border: 1px solid transparent;
    /* Estado inicial: oculto y desplazado para stagger */
    opacity: 0;
    transform: translateY(-6px);
}

/* Stagger entrance — cada item con +35ms de delay (cascada premium) */
.nav-dropdown:hover .mega-menu-item {
    opacity: 1;
    transform: translateY(0);
}
.nav-dropdown:hover .mega-menu-item:nth-child(1)   { transition-delay: 130ms, 130ms, 130ms, 130ms, 130ms; }
.nav-dropdown:hover .mega-menu-item:nth-child(2)   { transition-delay: 150ms, 150ms, 150ms, 150ms, 150ms; }
.nav-dropdown:hover .mega-menu-item:nth-child(3)   { transition-delay: 170ms, 170ms, 170ms, 170ms, 170ms; }
.nav-dropdown:hover .mega-menu-item:nth-child(4)   { transition-delay: 190ms, 190ms, 190ms, 190ms, 190ms; }
.nav-dropdown:hover .mega-menu-item:nth-child(5)   { transition-delay: 210ms, 210ms, 210ms, 210ms, 210ms; }
.nav-dropdown:hover .mega-menu-item:nth-child(6)   { transition-delay: 230ms, 230ms, 230ms, 230ms, 230ms; }
.nav-dropdown:hover .mega-menu-item:nth-child(7)   { transition-delay: 250ms, 250ms, 250ms, 250ms, 250ms; }
.nav-dropdown:hover .mega-menu-item:nth-child(8)   { transition-delay: 270ms, 270ms, 270ms, 270ms, 270ms; }
.nav-dropdown:hover .mega-menu-item:nth-child(n+9) { transition-delay: 290ms, 290ms, 290ms, 290ms, 290ms; }

.mega-menu-item:hover {
    color: #2563eb;
    background: linear-gradient(to right, rgba(37,99,235,0.08), rgba(249,115,22,0.04));
    border-color: rgba(37, 99, 235, 0.15);
    transform: translateY(0) translateX(4px);
}

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

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

@media (min-width: 1024px) {
}


/* ========================================
   FIX NUCLEAR LOGO (V99)
   ======================================== */



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

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

/* 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 */
    
}

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



/* 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;
  }

  /* 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; }

  /* CV-SEO 2026-05-20: .floating-call-btn eliminado — sustituido por .cv-sticky-cta */
}
@media (max-width: 1024px){

  /* Que el logo no se coma la barra */

  /* 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;
  }
}
@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;
  }
}
/* CV-SEO 2026-05-20: .floating-call-btn eliminado (sustituido por .cv-sticky-cta) */

@media (max-width: 1024px){
  a.footer-phone{
    color: #ffffff !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.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; }

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

/* === MEJORAS UX 2026-05-19 === */

/* ============================================================
   CV-SEO 2026-06-13: Sticky CTA móvil rediseñada — glass pill flotante.
   Pill centrada al pie con backdrop-filter blur + colores de marca,
   pulse sutil en icono de llamar (urgencia), divider hairline central.
   Visible solo ≤768px tras 200px scroll (clase .visible vía JS).
   ============================================================ */
.cv-sticky-cta {
    display: none;
}

@media (max-width: 768px) {
    .cv-sticky-cta {
        position: fixed;
        left: 50%;
        bottom: calc(16px + env(safe-area-inset-bottom));
        width: calc(100% - 24px);
        max-width: 420px;
        height: 56px;
        display: flex;
        z-index: 9999;
        border-radius: 32px;
        background: rgba(15, 23, 42, 0.72);
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        border: 1px solid rgba(255, 255, 255, 0.14);
        box-shadow:
            0 20px 50px rgba(0, 0, 0, 0.45),
            0 4px 12px rgba(0, 0, 0, 0.20),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
        overflow: hidden;
        opacity: 0;
        transform: translate(-50%, calc(100% + 32px));
        transition:
            transform 450ms cubic-bezier(0.16, 1, 0.3, 1),
            opacity 280ms ease;
        box-sizing: border-box;
    }
    .cv-sticky-cta.visible {
        transform: translate(-50%, 0);
        opacity: 1;
    }
    .cv-sticky-cta a {
        flex: 1;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        color: #fff;
        font-weight: 700;
        font-size: 14.5px;
        letter-spacing: 0.01em;
        line-height: 1;
        text-decoration: none;
        white-space: nowrap;
        min-height: 44px;
        transition: transform 180ms ease, filter 220ms ease;
        overflow: hidden;
    }
    /* Touch feedback premium */
    .cv-sticky-cta a:active {
        transform: scale(0.96);
        filter: brightness(1.1);
    }
    /* Llamar — gradiente rojo corporativo */
    .cv-sticky-cta__call {
        background: linear-gradient(135deg, rgba(220, 38, 38, 0.92) 0%, rgba(185, 28, 28, 0.92) 100%);
    }
    .cv-sticky-cta__call::after {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse at 30% 30%, rgba(252, 165, 165, 0.18), transparent 60%);
        pointer-events: none;
    }
    /* WhatsApp — gradiente verde oficial */
    .cv-sticky-cta__wa {
        background: linear-gradient(135deg, rgba(37, 211, 102, 0.92) 0%, rgba(18, 168, 76, 0.92) 100%);
    }
    .cv-sticky-cta__wa::after {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse at 30% 30%, rgba(187, 247, 208, 0.18), transparent 60%);
        pointer-events: none;
    }
    /* Divider hairline central (solo si hay 2 hijos) */
    .cv-sticky-cta a:first-child::before {
        content: '';
        position: absolute;
        right: -1px;
        top: 14px;
        bottom: 14px;
        width: 1px;
        background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.22), transparent);
        z-index: 2;
    }
    .cv-sticky-cta__icon {
        flex-shrink: 0;
        position: relative;
        z-index: 1;
        filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
    }
    /* Pulse sutil en icono de llamar — sugiere urgencia sin chillar */
    .cv-sticky-cta__call .cv-sticky-cta__icon {
        animation: cv-sticky-pulse 2.4s ease-in-out infinite;
    }
    @keyframes cv-sticky-pulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.14); }
    }
    .cv-sticky-cta a > span {
        position: relative;
        z-index: 1;
    }
    /* Compensar contenido tapado por la pill flotante */
    body {
        padding-bottom: calc(88px + env(safe-area-inset-bottom));
    }
}

/* Respeta reduced-motion: sin pulse ni transform sospechoso */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    .cv-sticky-cta__call .cv-sticky-cta__icon {
        animation: none;
    }
    .cv-sticky-cta {
        transition: opacity 280ms ease;
    }
}

/* Subir el botón "Volver arriba" por encima de la pill flotante en móvil */
@media (max-width: 768px) {
    #scrollToTop {
        bottom: calc(120px + env(safe-area-inset-bottom)) !important;
    }
}

/* ============================================================
   CV-FX-PACK-START 2026-06-15 — Sprint 1
   1. Counters animados (tabular-nums, sin saltos de layout)
   2. Tilt 3D + Shine en cards hover
   3. Custom cursor desktop (candado que se "abre" en interactivos)
   REVERSIBLE: borrar todo el bloque entre CV-FX-PACK-START y CV-FX-PACK-END.
   ============================================================ */

/* ----- COUNTERS ----- */
.cv-counter {
    display: inline-block;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

/* ----- TILT 3D + SHINE — solo desktop con cursor fino ----- */
@media (min-width: 1025px) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .cv-tilt {
        position: relative;
        transform-style: preserve-3d;
        transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        will-change: transform;
        overflow: hidden; /* clip shine al borde de la card */
    }
    .cv-tilt-shine {
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: radial-gradient(
            circle 320px at var(--cv-shine-x, 50%) var(--cv-shine-y, 50%),
            rgba(255, 255, 255, 0.18) 0%,
            rgba(255, 255, 255, 0.06) 30%,
            transparent 60%
        );
        opacity: var(--cv-shine-opacity, 0);
        transition: opacity 0.35s ease;
        mix-blend-mode: overlay;
        z-index: 10;
        border-radius: inherit;
    }
}

/* ----- CUSTOM CURSOR — desktop only ----- */
#cv-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    pointer-events: none;
    z-index: 99998;
    opacity: 0;
    transition: opacity 0.25s ease, width 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
                height 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
    color: #f97316;
    mix-blend-mode: difference;
    display: none; /* hidden por defecto, se activa por JS solo en desktop */
}
#cv-cursor.cv-cursor-active {
    display: block;
}
#cv-cursor svg {
    width: 100%;
    height: 100%;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    filter: drop-shadow(0 0 4px rgba(249, 115, 22, 0.5));
}
/* CV-SEO 2026-06-17: cursor círculo Origin-Go — anillo ámbar + punto central
   de precisión. Sustituye al candado (se leía como "bloqueado"). */
#cv-cursor .cv-cursor-ring {
    transition: fill-opacity 0.3s ease, stroke-width 0.3s ease;
}
#cv-cursor .cv-cursor-dot {
    transition: opacity 0.25s ease, r 0.25s ease;
}
/* Cuando está sobre interactivo: el anillo se rellena + crece */
#cv-cursor.cv-cursor-hover {
    width: 38px;
    height: 38px;
    color: #fbbf24;
}
#cv-cursor.cv-cursor-hover .cv-cursor-ring {
    fill: currentColor;
    fill-opacity: 0.22;
    stroke-width: 1.5;
}
#cv-cursor.cv-cursor-hover .cv-cursor-dot {
    opacity: 0;
}

/* Ocultar cursor nativo solo cuando el custom está activo (sin perder accesibilidad) */
.cv-has-custom-cursor,
.cv-has-custom-cursor * {
    cursor: none !important;
}
/* Pero mantener visible en inputs de texto y áreas (no entorpecer escritura) */
.cv-has-custom-cursor input[type="text"],
.cv-has-custom-cursor input[type="email"],
.cv-has-custom-cursor input[type="password"],
.cv-has-custom-cursor input[type="number"],
.cv-has-custom-cursor input[type="tel"],
.cv-has-custom-cursor input[type="search"],
.cv-has-custom-cursor input[type="url"],
.cv-has-custom-cursor textarea,
.cv-has-custom-cursor [contenteditable] {
    cursor: text !important;
}

/* Touch devices: nunca activar custom cursor */
@media (pointer: coarse), (hover: none), (max-width: 1024px) {
    #cv-cursor {
        display: none !important;
    }
    .cv-has-custom-cursor,
    .cv-has-custom-cursor * {
        cursor: auto !important;
    }
}

/* CV-FX-PACK-END */

/* ============================================================
   CV-COVERAGE-MAP-START 2026-06-15 — Sprint 3 #2
   Mapa interactivo de cobertura — visualización orbital de
   24 barrios + 35 pueblos alrededor de Valencia Origin-Go.
   Vibe: control center dark, pulsos vivos, hover premium.
   REVERSIBLE: borrar bloque entre CV-COVERAGE-MAP-START y END.
   ============================================================ */

.cv-coverage-map {
    position: relative;
    background: radial-gradient(ellipse at 50% 50%, #0f172a 0%, #06070e 100%);
    padding: 80px 20px 100px;
    overflow: hidden;
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

/* Subtle starfield background */
.cv-coverage-map::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 15% 25%, rgba(249, 115, 22, 0.04) 0%, transparent 50%),
        radial-gradient(circle at 85% 75%, rgba(37, 99, 235, 0.04) 0%, transparent 50%);
    pointer-events: none;
}

.cv-coverage-map__container {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* Header */
.cv-coverage-map__header {
    text-align: center;
    margin-bottom: 40px;
}
.cv-coverage-map__pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.25);
    color: #4ade80;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 16px;
}
.cv-coverage-map__pill-dot {
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
    animation: cv-cov-pill-pulse 1.8s ease-in-out infinite;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
}
@keyframes cv-cov-pill-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.5; transform: scale(1.3); }
}
.cv-coverage-map__title {
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    font-weight: 700;
    color: #f8fafc;
    margin: 0 0 14px 0;
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.cv-coverage-map__subtitle {
    font-size: 1rem;
    color: #cbd5e1;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.5;
}
.cv-coverage-map__subtitle strong {
    color: #fbbf24;
    font-weight: 700;
}

/* Viewport — el SVG cuadrado responsive */
.cv-coverage-map__viewport {
    position: relative;
    max-width: 880px;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
}
.cv-coverage-map__svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

/* Decorative rings */
.cv-ring {
    fill: none;
    stroke: rgba(255, 255, 255, 0.04);
    stroke-width: 1;
    stroke-dasharray: 4 6;
}
.cv-ring-inner { stroke: rgba(249, 115, 22, 0.12); stroke-dasharray: 6 4; }
.cv-ring-outer { stroke: rgba(255, 255, 255, 0.02); }

/* Lines center → points */
.cv-link {
    stroke: rgba(255, 255, 255, 0.06);
    stroke-width: 1;
    transition: stroke 0.3s ease, stroke-width 0.3s ease;
}
.cv-link-pueblo { stroke: rgba(255, 255, 255, 0.04); }

/* Onda expansiva — anillos que pulsan desde el centro (señal "estamos saliendo") */
.cv-wave {
    fill: none;
    stroke: rgba(249, 115, 22, 0.45);
    stroke-width: 1.5;
    opacity: 0;
    transform-origin: 500px 500px;
    animation: cv-wave-expand 4.2s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
.cv-wave-1 { animation-delay: 0s; }
.cv-wave-2 { animation-delay: 1.4s; }
.cv-wave-3 { animation-delay: 2.8s; }
@keyframes cv-wave-expand {
    0%   { transform: scale(0.15); opacity: 0; stroke-width: 2; }
    15%  { opacity: 0.7; }
    100% { transform: scale(1.6); opacity: 0; stroke-width: 0.5; }
}

/* Radar sweep — pala giratoria con gradiente naranja */
.cv-radar {
    transform-origin: 500px 500px;
    animation: cv-radar-spin 6s linear infinite;
    mix-blend-mode: screen;
    opacity: 0.7;
}
@keyframes cv-radar-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Center node "Origin-Go" */
.cv-center {
    fill: url(#cv-center-gradient);
    fill: #f97316;
    filter: drop-shadow(0 0 12px rgba(249, 115, 22, 0.5));
}
.cv-center-glow {
    fill: rgba(249, 115, 22, 0.15);
    animation: cv-center-pulse 2.5s ease-in-out infinite;
}
@keyframes cv-center-pulse {
    0%, 100% { r: 56; opacity: 0.6; }
    50%      { r: 72; opacity: 0.25; }
}
.cv-center-label {
    fill: #fff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.05em;
    pointer-events: none;
}
.cv-center-label-sub {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    fill: rgba(255, 255, 255, 0.85);
}

/* Points (barrios + pueblos) */
.cv-locality-point {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.cv-point {
    fill: #fbbf24;
    transition: fill 0.25s ease, r 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.4));
}
.cv-locality-pueblo .cv-point {
    fill: #60a5fa;
    filter: drop-shadow(0 0 4px rgba(96, 165, 250, 0.4));
}
.cv-point-pulse {
    fill: rgba(251, 191, 36, 0.18);
    animation: cv-point-pulse 2.6s ease-in-out infinite;
    transform-origin: center;
}
.cv-locality-pueblo .cv-point-pulse {
    fill: rgba(96, 165, 250, 0.16);
}
@keyframes cv-point-pulse {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 0.85; }
}

/* Labels hidden by default, shown on hover/focus */
.cv-point-label {
    fill: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    font-weight: 700;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}
.cv-point-label-pueblo {
    font-size: 11px;
    fill: rgba(229, 231, 235, 0.85);
}
.cv-locality-point:hover .cv-point-label,
.cv-locality-point:focus .cv-point-label {
    opacity: 1;
}

/* Hover on point: expand + glow */
.cv-locality-point:hover .cv-point,
.cv-locality-point:focus .cv-point {
    r: 14;
}
.cv-locality-pueblo:hover .cv-point,
.cv-locality-pueblo:focus .cv-point {
    r: 11;
}
.cv-locality-point:hover .cv-point-pulse,
.cv-locality-point:focus .cv-point-pulse {
    animation: none;
    opacity: 1;
    fill: rgba(251, 191, 36, 0.35);
}
.cv-locality-pueblo:hover .cv-point-pulse,
.cv-locality-pueblo:focus .cv-point-pulse {
    fill: rgba(96, 165, 250, 0.32);
}

/* Hover on line to/from point — destacar el camino */
.cv-locality-point:hover ~ * .cv-link,
.cv-locality-point:focus ~ * .cv-link {
    /* CSS sibling tricks limitados; usamos JS para esto */
}

/* Tooltip (controlado por JS) */
.cv-coverage-map__tooltip {
    position: absolute;
    pointer-events: none;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(249, 115, 22, 0.35);
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    padding: 12px 16px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    color: #f8fafc;
    font-size: 13px;
    opacity: 0;
    transform: translate(-50%, -120%) scale(0.95);
    transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 10;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: center;
    min-width: 140px;
}
.cv-coverage-map__tooltip.visible {
    opacity: 1;
    transform: translate(-50%, -120%) scale(1);
}
.cv-tooltip-name {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}
.cv-tooltip-tiempo {
    font-size: 12px;
    color: #fbbf24;
    font-weight: 600;
}
.cv-tooltip-cta {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 2px;
    letter-spacing: 0.04em;
}

/* Legend */
.cv-coverage-map__legend {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 32px;
    color: #cbd5e1;
    font-size: 13px;
}
.cv-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.cv-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.cv-legend-capital { background: #f97316; box-shadow: 0 0 6px rgba(249,115,22,0.6); }
.cv-legend-barrio  { background: #fbbf24; box-shadow: 0 0 6px rgba(251,191,36,0.5); }
.cv-legend-pueblo  { background: #60a5fa; box-shadow: 0 0 6px rgba(96,165,250,0.5); }

/* AVISO: atendemos toda la provincia (no solo localidades del mapa) */
.cv-coverage-map__notice {
    margin: 40px auto 0;
    max-width: 880px;
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.08) 0%, rgba(37, 99, 235, 0.06) 100%);
    border: 1px solid rgba(249, 115, 22, 0.25);
    border-radius: 14px;
    padding: 24px 28px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 20px;
    align-items: center;
    color: #e5e7eb;
}
.cv-coverage-map__notice-icon {
    flex-shrink: 0;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(249, 115, 22, 0.18);
    color: #fbbf24;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.35));
}
.cv-coverage-map__notice-text {
    font-size: 0.95rem;
    line-height: 1.55;
    color: #cbd5e1;
}
.cv-coverage-map__notice-text strong {
    color: #f8fafc;
    font-weight: 700;
}
.cv-coverage-map__notice-text strong:first-child {
    display: block;
    color: #fbbf24;
    font-size: 1.05rem;
    margin-bottom: 4px;
}
.cv-coverage-map__notice-cta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    background: linear-gradient(90deg, #f97316, #dc2626);
    color: #fff;
    text-decoration: none;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.95rem;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(220, 38, 38, 0.35);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}
.cv-coverage-map__notice-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(220, 38, 38, 0.5);
}
@media (max-width: 768px) {
    .cv-coverage-map__notice {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 22px;
    }
    .cv-coverage-map__notice-icon { margin: 0 auto; }
    .cv-coverage-map__notice-cta { justify-self: center; }
}

/* Mobile: optimizar y reducir labels */
@media (max-width: 768px) {
    .cv-coverage-map { padding: 50px 0 60px; }
    .cv-coverage-map__container { padding: 0 16px; }
    .cv-coverage-map__title { font-size: 1.4rem; }
    .cv-coverage-map__subtitle { font-size: 0.92rem; }
    .cv-point-label { display: none; }      /* Labels solo via tooltip en móvil */
    .cv-coverage-map__legend {
        gap: 16px;
        font-size: 11px;
        flex-direction: column;
        align-items: center;
    }
    .cv-coverage-map__viewport { max-width: 95vw; }
}

@media (prefers-reduced-motion: reduce) {
    .cv-coverage-map__pill-dot,
    .cv-center-glow,
    .cv-point-pulse { animation: none !important; }
}

/* CV-COVERAGE-MAP-END */

/* ============================================================
   CV-SOBRE-NOSOTROS-START 2026-06-15
   Página /sobre-nosotros/ — storytelling cinematográfico
   con scroll reveals, manifiesto, equipo, stats, comparación.
   Estructurado por secciones, mobile-first.
   REVERSIBLE: borrar bloque entre CV-SOBRE-NOSOTROS-START y END.
   ============================================================ */

.cv-sn-section {
    max-width: 1100px;
    margin: 0 auto;
    padding: 100px 24px;
}
.cv-sn-section__eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #f97316;
    margin: 0 0 24px 0;
    border-left: 3px solid #f97316;
    padding-left: 12px;
}
.cv-sn-section__eyebrow--center {
    border-left: none;
    border-top: none;
    padding-left: 0;
    text-align: center;
    display: block;
    margin-bottom: 50px;
}
.cv-sn-section__intro {
    font-size: 1.15rem;
    color: #475569;
    max-width: 760px;
    margin: 0 0 50px;
    line-height: 1.65;
}
/* CV-SEO 2026-06-23: el intro del equipo va centrado (el título lleva --center,
   el intro estaba alineado a la izquierda y se veía descentrado). */
.cv-sn-equipo .cv-sn-section__intro {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* ----- MANIFESTO ----- */
.cv-sn-manifesto {
    background: linear-gradient(180deg, #fff 0%, #fafbfc 100%);
}
.cv-sn-manifesto__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.cv-sn-manifesto__item {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 24px;
    align-items: baseline;
    padding: 28px 0;
    border-top: 1px solid #e5e7eb;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}
.cv-sn-manifesto__item.cv-revealed {
    opacity: 1;
    transform: translateY(0);
}
.cv-sn-manifesto__num {
    font-size: 2.4rem;
    font-weight: 800;
    color: #f97316;
    letter-spacing: -0.02em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.cv-sn-manifesto__text {
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    font-weight: 600;
    color: #0f172a;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

/* ----- HISTORIA ----- */
.cv-sn-historia {
    background: #0f172a;
    color: #f8fafc;
    border-radius: 0;
    max-width: 100%;
    padding: 100px 24px;
    position: relative;
    overflow: hidden;
}
.cv-sn-historia::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 15% 25%, rgba(249, 115, 22, 0.06) 0%, transparent 50%),
        radial-gradient(circle at 85% 75%, rgba(37, 99, 235, 0.05) 0%, transparent 50%);
    pointer-events: none;
}
.cv-sn-historia > * {
    position: relative;
    z-index: 1;
}
.cv-sn-historia .cv-sn-section__intro {
    color: #cbd5e1;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}
.cv-sn-historia__intro-card {
    max-width: 760px;
    margin: 0 auto 50px;
    padding: 26px 32px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-left: 4px solid #fbbf24;
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}
.cv-sn-historia__intro-text {
    margin: 0;
    color: #1f2937;
    font-size: 1.08rem;
    line-height: 1.7;
    font-weight: 400;
}
.cv-sn-historia__intro-text strong {
    color: #0f172a;
    font-weight: 700;
}
.cv-sn-historia__list {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 50px;
}
.cv-sn-historia__item {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    padding: 34px 36px 32px 96px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-left: 4px solid #f97316;
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}
.cv-sn-historia__item.cv-revealed {
    opacity: 1;
    transform: translateY(0);
}
.cv-sn-historia__head {
    margin-bottom: 14px;
}
.cv-sn-historia__num {
    position: absolute;
    top: 28px; left: 28px;
    font-size: 2.6rem;
    font-weight: 900;
    color: #f97316;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.cv-sn-historia__title {
    font-size: clamp(1.35rem, 2.3vw, 1.8rem);
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 14px;
    letter-spacing: -0.01em;
    line-height: 1.25;
}
.cv-sn-historia__text {
    font-size: 1.08rem;
    color: #1f2937;
    line-height: 1.75;
    margin: 0;
    font-weight: 400;
    letter-spacing: 0.002em;
}
/* CV-SEO 2026-06-23: separación entre los 2 párrafos de cada capítulo (rompe el
   "muro de texto" en móvil) + frase clave en negrita como ancla visual. */
.cv-sn-historia__text + .cv-sn-historia__text {
    margin-top: 0.9em;
}
.cv-sn-historia__text strong {
    font-weight: 700;
    color: #0f172a;
}

/* ----- STATS ----- */
.cv-sn-stats {
    background: linear-gradient(180deg, #fafbfc 0%, #fff 100%);
    text-align: center;
}
.cv-sn-stats__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 40px;
}
.cv-sn-stats__item {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}
.cv-sn-stats__item.cv-revealed {
    opacity: 1;
    transform: translateY(0);
}
.cv-sn-stats__num {
    /* CV-SEO 2026-06-15: clamp más compacto para que "100.000+" nunca se corte */
    font-size: clamp(1.9rem, 4vw, 3.4rem);
    font-weight: 800;
    color: transparent;
    background: linear-gradient(135deg, #fbbf24 0%, #f97316 100%);
    -webkit-background-clip: text;
    background-clip: text;
    letter-spacing: -0.03em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    margin-bottom: 12px;
    white-space: nowrap;       /* nunca rompe a línea nueva */
    overflow: visible;
}
.cv-sn-stats__label {
    font-size: 0.95rem;
    color: #475569;
    font-weight: 500;
    line-height: 1.45;
}

/* ----- LO QUE NO SOMOS — DIFF TABLE ----- */
.cv-sn-diff {
    background: #fff;
}
.cv-sn-diff__table {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
}
.cv-sn-diff__header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #f1f5f9;
    padding: 18px 24px;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    color: #0f172a;
}
.cv-sn-diff__header > div:first-child { color: #dc2626; }
.cv-sn-diff__header > div:last-child  { color: #16a34a; }
.cv-sn-diff__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid #e5e7eb;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.cv-sn-diff__row.cv-revealed {
    opacity: 1;
    transform: translateY(0);
}
.cv-sn-diff__cell {
    padding: 22px 24px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    line-height: 1.55;
    font-size: 0.97rem;
}
.cv-sn-diff__cell--no {
    background: linear-gradient(to right, rgba(220, 38, 38, 0.04), transparent);
    color: #475569;
    border-right: 1px solid #e5e7eb;
}
.cv-sn-diff__cell--si {
    background: linear-gradient(to left, rgba(34, 197, 94, 0.06), transparent);
    color: #0f172a;
    font-weight: 500;
}
.cv-sn-diff__icon {
    flex-shrink: 0;
    font-size: 1.1rem;
    line-height: 1.4;
}

/* ----- EQUIPO ----- */
.cv-sn-equipo {
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
}
/* CV-SEO 2026-06-17: equipo en carrusel. Escritorio = 2 cards grandes por
   vista con flechas + scroll-snap. Móvil = pin-scroll (ver bloque @media). */
.cv-eq-carousel {
    position: relative;
    max-width: 1080px;
    margin: 0 auto 40px;
}
.cv-eq-pin-wrap { position: relative; }
.cv-eq-pin-sticky { position: relative; }
.cv-eq-progress { display: none; }

.cv-sn-equipo__grid {
    display: flex;
    gap: 28px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 10px 4px 18px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.cv-sn-equipo__grid::-webkit-scrollbar { display: none; }

.cv-sn-equipo__card {
    flex: 0 0 calc(50% - 14px);
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    border-radius: 20px;
    padding: 36px 32px;
    text-align: center;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
    border: 1px solid #e5e7eb;
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}
.cv-sn-equipo__card.cv-revealed {
    opacity: 1;
    transform: translateY(0);
}
.cv-sn-equipo__card:hover {
    box-shadow: 0 14px 38px rgba(249, 115, 22, 0.12);
    border-color: rgba(249, 115, 22, 0.25);
}
.cv-sn-equipo__avatar {
    width: 100%;
    max-width: 360px;            /* círculo grande */
    aspect-ratio: 1 / 1;
    margin: 0 auto 26px;
    /* CV-SEO 2026-06-22: CUADRADO de esquinas suaves. Es la ÚNICA forma de mostrar
       el rótulo "Origin-Go" COMPLETO + la cara — un círculo recorta las esquinas
       donde caen las letras del nombre. Recorte = plano general (nombre + persona). */
    border-radius: 24px;
    overflow: hidden;
    background-color: #e5e7eb;
    background-size: cover;       /* la propia foto, de fondo (se desenfoca en ::before) */
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 4.5rem;
    font-weight: 800;
    box-shadow: 0 14px 34px rgba(249, 115, 22, 0.26), 0 0 0 4px #fff, 0 0 0 5px rgba(249, 115, 22, 0.22);
    flex-shrink: 0;
    position: relative;
    box-sizing: border-box;
}
/* Fondo borroso de la propia foto: rellena el círculo sin huecos */
.cv-sn-equipo__avatar::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: inherit;
    background-size: cover;
    background-position: center;
    filter: blur(14px) brightness(0.78) saturate(1.1);
    transform: scale(1.2);
    z-index: 0;
}
/* Foto nítida COMPLETA (alejada, no primer plano) → se lee el "Origin-Go" entero */
.cv-sn-equipo__avatar img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.cv-sn-equipo__initial {
    position: relative;
    z-index: 1;
}

/* Flechas de navegación (escritorio) */
.cv-eq-nav {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 4px;
}
.cv-eq-arrow {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #f97316;
    font-size: 1.8rem;
    line-height: 1;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.cv-eq-arrow:hover {
    background: linear-gradient(135deg, #fbbf24, #f97316);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(249, 115, 22, 0.28);
}
.cv-eq-arrow[disabled] {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}
.cv-sn-equipo__nombre {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 6px;
}
.cv-sn-equipo__rol {
    font-size: 0.95rem;
    color: #f97316;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0 0 16px;
}
.cv-sn-equipo__detalle {
    font-size: 1.02rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}
.cv-sn-equipo__extras {
    text-align: center;
    color: #94a3b8;
    font-size: 0.95rem;
    margin-top: 30px;
    font-style: italic;
}

/* ----- CTA FINAL ÉPICO ----- */
.cv-sn-cta {
    background: linear-gradient(135deg, #06070e 0%, #0f172a 50%, #06070e 100%);
    color: #fff;
    text-align: center;
    padding: 120px 24px;
    max-width: 100%;
    position: relative;
    overflow: hidden;
}
.cv-sn-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 30% 40%, rgba(249, 115, 22, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 70% 60%, rgba(220, 38, 38, 0.10) 0%, transparent 50%);
    pointer-events: none;
}
.cv-sn-cta__inner {
    max-width: 720px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.cv-sn-cta__title {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #f8fafc;
    margin: 0 0 40px;
}
.cv-sn-cta__title em {
    font-style: normal;
    background: linear-gradient(90deg, #fbbf24, #f97316);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.cv-sn-cta__phone {
    display: inline-block;
    padding: 22px 50px;
    background: linear-gradient(90deg, #f97316, #dc2626);
    color: #fff;
    text-decoration: none;
    border-radius: 18px;
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    font-weight: 800;
    letter-spacing: 0.02em;
    box-shadow: 0 20px 50px rgba(220, 38, 38, 0.45);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}
.cv-sn-cta__phone:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 28px 60px rgba(220, 38, 38, 0.6);
}
.cv-sn-cta__sub {
    margin-top: 24px;
    color: #cbd5e1;
    font-size: 1rem;
    letter-spacing: 0.04em;
}

/* CV-SEO 2026-06-17: equipo móvil/tablet — pin-scroll cinematográfico tipo
   Apple (1 compañero a la vez, desliza al hacer scroll vertical). */
@media (max-width: 1024px) {
    .cv-eq-nav { display: none; }

    .cv-eq-pin-wrap {
        height: 480vh;                /* 4.8× viewport — velocidad del desliz */
        position: relative;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        width: 100vw;
        max-width: 100vw;
    }
    .cv-eq-pin-sticky {
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .cv-eq-pin-sticky.is-pinned { position: fixed; top: 0; }
    .cv-eq-pin-sticky.is-pinned-end { position: absolute; top: auto; bottom: 0; }

    #cvEqGrid {
        display: flex !important;
        flex-direction: row !important;
        /* CV-SEO 2026-06-23: stretch → todas las cards igualan altura (la de
           Alejandro era más alta por tener más texto). */
        align-items: stretch;
        gap: 16px;
        width: max-content;
        padding: 0 10vw;
        overflow: visible;
        scroll-snap-type: none;
        will-change: transform;
        margin: 0;
    }
    #cvEqGrid .cv-sn-equipo__card {
        flex: 0 0 84vw;
        width: 84vw;
        max-width: 380px;
        opacity: 1;                   /* el pin controla opacity vía JS */
        transform: none;
        padding: 36px 26px;
        will-change: transform, opacity;
        transform-origin: center center;
        backface-visibility: hidden;
        /* CV-SEO 2026-06-23: contenido centrado en la card (ahora todas misma
           altura por stretch) → el espacio sobrante se reparte arriba/abajo. */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    #cvEqGrid .cv-sn-equipo__avatar {
        width: 100%;
        max-width: 320px;             /* círculo grande aprovechando el ancho */
        aspect-ratio: 1 / 1;
        min-width: 0;
        min-height: 0;
        max-height: none;
    }
    #cvEqGrid .cv-sn-equipo__avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .cv-eq-progress {
        display: block;
        position: absolute;
        top: 0; left: 0;
        height: 3px; width: 0%;
        background: linear-gradient(to right, #f97316, #dc2626);
        z-index: 10;
        will-change: width;
    }
    /* Acortar el blanco entre el carrusel y el texto final en móvil:
       el texto sube hacia el vacío inferior del sticky (no toca el centrado del pin) */
    /* CV-SEO 2026-06-21: margin-top negativo sube el carrusel hacia el
       encabezado "El equipo visible" + intro, comiéndose el blanco superior
       que dejaba el centrado del sticky (sin tocar el centrado durante el pin) */
    /* CV-SEO 2026-06-23: margin-bottom negativo PEQUEÑO (-40px) → acerca el texto
       inferior a la card sin invadir su zona (el solapamiento pasaba con -140px,
       que superaba el vacío del sticky). 40px queda dentro del vacío en cualquier
       viewport móvil razonable, así que no se montan. */
    .cv-eq-carousel { margin-top: -120px; margin-bottom: -40px; }
    .cv-sn-equipo { padding-bottom: 30px; }
    .cv-sn-equipo__extras { margin-top: 8px; }
}

/* Reduced-motion: scroll-snap horizontal nativo (sin pin) */
@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
    .cv-eq-pin-wrap { height: auto; }
    .cv-eq-pin-sticky {
        position: static;
        height: auto;
        overflow-x: auto;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .cv-eq-pin-sticky::-webkit-scrollbar { display: none; }
    #cvEqGrid { transform: none !important; }
    #cvEqGrid .cv-sn-equipo__card { scroll-snap-align: center; }
    .cv-eq-progress { display: none; }
}

/* ----- Mobile responsive ----- */
@media (max-width: 768px) {
    .cv-sn-section { padding: 60px 18px; }
    .cv-sn-historia { padding: 60px 18px; }
    .cv-sn-cta { padding: 80px 18px; }
    .cv-sn-manifesto__item { grid-template-columns: 50px 1fr; gap: 14px; padding: 20px 0; }
    .cv-sn-manifesto__num { font-size: 1.6rem; }
    .cv-sn-historia__item { padding: 28px 22px 26px 70px; }
    .cv-sn-historia__num { font-size: 2rem; top: 24px; left: 22px; }
    .cv-sn-diff__header,
    .cv-sn-diff__row { grid-template-columns: 1fr; }
    .cv-sn-diff__cell--no { border-right: none; border-bottom: 1px solid #e5e7eb; }
}

@media (prefers-reduced-motion: reduce) {
    .cv-sn-manifesto__item,
    .cv-sn-historia__item,
    .cv-sn-stats__item,
    .cv-sn-diff__row,
    .cv-sn-equipo__card { opacity: 1; transform: none; transition: none; }
    .cv-sn-loader { animation-duration: 0.1s; }
    .cv-sn-loader__wordmark span { animation: none; opacity: 1; transform: none; }
    .cv-sn-loader__underline { animation: none; width: 240px; }
}

/* CV-SOBRE-NOSOTROS-END */

/* ============================================================
   CV-SEO 2026-06-14: Trust signals belt — autoridad reforzada
   debajo del hero. 6 chips horizontales con scroll suave en móvil.
   Diseño premium: glass + hover lift + acento naranja en iconos.
   ============================================================ */
.cv-trust-belt {
    background: linear-gradient(180deg, #0f172a 0%, #111827 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 14px 0;  /* Desktop: respiro adecuado, ni apretado ni gigante */
    position: relative;
    overflow: hidden;
}
.cv-trust-belt::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 800px 200px at 50% 50%, rgba(249, 115, 22, 0.08), transparent 70%);
    pointer-events: none;
}
.cv-trust-belt__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.cv-trust-belt__track {
    display: flex;
    align-items: center;
    gap: 28px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Desktop: ocultar el segundo pase (que solo existe para el marquee móvil) */
@media (min-width: 769px) {
    .cv-trust-belt__item[aria-hidden="true"] {
        display: none;
    }
}
.cv-trust-belt__item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #e5e7eb;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.cv-trust-belt__item:hover {
    transform: translateY(-2px);
}
.cv-trust-belt__icon {
    font-size: 1.15rem;
    filter: drop-shadow(0 2px 6px rgba(249, 115, 22, 0.25));
    line-height: 1;
}
.cv-trust-belt__text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}
.cv-trust-belt__text strong {
    font-size: 0.85rem;
    font-weight: 700;
    color: #f8fafc;
    letter-spacing: -0.005em;
}
.cv-trust-belt__text span {
    font-size: 0.68rem;
    color: #94a3b8;
    margin-top: 1px;
    font-weight: 400;
}

/* Mobile: auto-scroll marquee dinámico (NO requiere swipe del usuario).
   Pausa al tocar el track. Edge fades para suavizar entrada/salida. */
@media (max-width: 768px) {
    .cv-trust-belt {
        padding: 0;  /* Móvil: cero padding outer; las pastillas dictan la altura */
    }
    .cv-trust-belt__inner {
        padding: 0;
        position: relative;
        mask-image: linear-gradient(to right,
            transparent 0,
            #000 30px,
            #000 calc(100% - 30px),
            transparent 100%);
        -webkit-mask-image: linear-gradient(to right,
            transparent 0,
            #000 30px,
            #000 calc(100% - 30px),
            transparent 100%);
    }
    .cv-trust-belt__track {
        flex-wrap: nowrap;
        justify-content: flex-start;
        width: max-content;
        gap: 10px;
        /* Velocidad: 22s — antes 35s. Más rápido = el usuario ve los 5 chips antes
           de aburrirse o irse. Aún legible al pasar (chips claros + cortos). */
        animation: cv-trust-marquee 22s linear infinite;
        will-change: transform;
    }
    .cv-trust-belt__track:active {
        animation-play-state: paused;
    }
    .cv-trust-belt__item {
        flex-shrink: 0;
        background: rgba(255, 255, 255, 0.04);
        padding: 5px 12px;            /* +2px vertical para que tipografía respire */
        border-radius: 999px;          /* pill */
        border: 1px solid rgba(255, 255, 255, 0.07);
        gap: 7px;
    }
    .cv-trust-belt__icon { font-size: 1rem; }    /* antes 0.9rem */
    .cv-trust-belt__text {
        flex-direction: row;            /* strong + span en LINEA, no apilados */
        align-items: baseline;
        gap: 6px;
        line-height: 1.1;
    }
    .cv-trust-belt__text strong { font-size: 0.8rem; }   /* antes 0.7rem */
    .cv-trust-belt__text span   {
        font-size: 0.68rem;                              /* antes 0.6rem */
        margin-top: 0;
        color: #94a3b8;
        /* Ocultamos descriptivo en pantallas muy estrechas para mantenerla compacta */
    }
    @media (max-width: 480px) {
        .cv-trust-belt__text span { display: none; }
        .cv-trust-belt__text strong { font-size: 0.78rem; }
    }
    @keyframes cv-trust-marquee {
        from { transform: translateX(0); }
        to   { transform: translateX(-50%); }
    }
}

/* Respeta reduced-motion: marquee parado */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    .cv-trust-belt__track {
        animation: none;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
    }
}

/* ============================================================
   CV-SEO 2026-06-14: Shimmer "Origin-Go®" — funciona en TODOS los
   dispositivos (desktop + tablet + móvil). El gradient dorado infinito
   refuerza branding y memorability sin afectar a la accesibilidad.
   ============================================================ */
.hero .hero-left h1 .cv-highlight-brand {
    background: linear-gradient(
        90deg,
        #fbbf24 0%,
        #f97316 25%,
        #fef3c7 50%,
        #f97316 75%,
        #fbbf24 100%
    );
    background-size: 200% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent !important;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    /* Shimmer infinito desde el primer frame en móvil; en desktop espera al
       cv-hero-active (que ya añade su propia animation) */
    animation: cv-shimmer 4.8s linear infinite;
}

@keyframes cv-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* En desktop la animación combinada (reveal + shimmer) la añade
   .hero.cv-hero-active más abajo, lo que sobrescribe esta */
@media (prefers-reduced-motion: reduce) {
    .hero .hero-left h1 .cv-highlight-brand {
        animation: none;
    }
}

/* ============================================================
   CV-STORYBOARD-START 2026-06-14
   Sistema "Storyboard Reveal" — efectos premium desktop.
   1) Scroll progress bar arriba (naranja→rojo)
   2) Reveal on scroll (fade + scale + stagger)
   3) Magnetic CTAs (transition + GPU)
   Solo en ≥1025px y prefers-reduced-motion: no-preference.
   REVERSIBLE: borrar todo el bloque entre CV-STORYBOARD-START y CV-STORYBOARD-END.
   ============================================================ */

/* 1. Progress bar global */
#cv-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(to right, #f97316, #dc2626);
    z-index: 99999;
    pointer-events: none;
    will-change: width;
    box-shadow: 0 0 8px rgba(249, 115, 22, 0.45);
}

/* CV-SEO 2026-06-15: Reveal on scroll — AHORA TAMBIÉN EN MÓVIL.
   Funciona en todos los tamaños (90% del tráfico es móvil). Respeta
   prefers-reduced-motion. En móvil los valores son un pelín más suaves
   (lift 50px vs 70px, sin blur) para no marearse en scroll rápido. */
@media (prefers-reduced-motion: no-preference) {
    .cv-reveal {
        opacity: 0;
        transform: translate3d(0, 50px, 0) scale(0.97);
        transition:
            opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
            transform 1s cubic-bezier(0.16, 1, 0.3, 1);
        will-change: opacity, transform;
    }
    .cv-reveal.cv-revealed {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

/* Desktop: reveal más pronunciado + blur cinematográfico + magnetic CTAs */
@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
    .cv-reveal {
        transform: translate3d(0, 70px, 0) scale(0.96);
        filter: blur(4px);
        transition:
            opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
            transform 1.05s cubic-bezier(0.16, 1, 0.3, 1),
            filter 0.7s ease-out;
        will-change: opacity, transform, filter;
    }
    .cv-reveal.cv-revealed {
        filter: blur(0);
    }

    /* Magnetic CTAs — solo desktop, no hay cursor en móvil */
    .cv-magnetic {
        transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        will-change: transform;
    }
    .cv-magnetic:hover {
        filter: brightness(1.08);
    }
}

/* ----- CHIP DE PORCENTAJE — pegado al extremo derecho de la barra ----- */
#cv-scroll-progress-chip {
    position: fixed;
    top: 12px;
    left: 0;
    background: rgba(17, 24, 39, 0.88);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    color: #fff;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 14px rgba(249, 115, 22, 0.30);
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    z-index: 99999;
    white-space: nowrap;
    will-change: left, opacity;
    transform: translateY(-4px);
}
#cv-scroll-progress-chip.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ----- HERO IMPACT — staggered reveal + shimmer + spotlight ----- */
/* IMPORTANTE: las animaciones se disparan cuando JS añade .cv-hero-active al
   .hero al entrar en viewport (IntersectionObserver), NO en page load.
   Estado inicial: todo oculto. Estado activo: coreografía completa. */
@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
    /* Estado inicial — todo oculto hasta que el hero entre en viewport */
    .hero .hero-left h1 .cv-hero-word,
    .hero .hero-left h1 .cv-highlight-brand {
        display: inline-block;
        opacity: 0;
        transform: translateY(28px);
        filter: blur(8px);
    }
    .hero .hero-left > div:first-child,
    .hero .hero-left > p,
    .hero .hero-left > .hero-badges,
    .hero .hero-left > .cta-buttons {
        opacity: 0;
        transform: translateY(20px);
    }
    .hero .urgency-card {
        opacity: 0;
        transform: translateX(40px) scale(0.96);
    }

    /* Activación — solo cuando JS marca .cv-hero-active */
    .hero.cv-hero-active .hero-left h1 .cv-hero-word {
        animation: cv-hero-word-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    @keyframes cv-hero-word-in {
        to {
            opacity: 1;
            transform: translateY(0);
            filter: blur(0);
        }
    }

    /* Origin-Go® DESKTOP — reveal (la animación reveal es desktop-only;
       el shimmer puro está extraído fuera de esta media query para que
       también funcione en móvil/tablet) */
    .hero.cv-hero-active .hero-left h1 .cv-highlight-brand {
        animation:
            cv-hero-word-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.55s forwards,
            cv-shimmer 4.8s linear 1.6s infinite;
    }

    /* Resto de bloques del hero — fade up secuencial */
    .hero.cv-hero-active .hero-left > div:first-child,
    .hero.cv-hero-active .hero-left > p,
    .hero.cv-hero-active .hero-left > .hero-badges,
    .hero.cv-hero-active .hero-left > .cta-buttons {
        animation: cv-hero-block-in 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    .hero.cv-hero-active .hero-left > div:first-child { animation-delay: 0.1s; }
    .hero.cv-hero-active .hero-left > p                { animation-delay: 0.95s; }
    .hero.cv-hero-active .hero-left > .hero-badges     { animation-delay: 1.10s; }
    .hero.cv-hero-active .hero-left > .cta-buttons     { animation-delay: 1.25s; }
    @keyframes cv-hero-block-in {
        to { opacity: 1; transform: translateY(0); }
    }

    /* Urgency card a la derecha — slide-in cinematográfico */
    .hero.cv-hero-active .urgency-card {
        animation: cv-hero-urgency-in 1.05s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
    }
    @keyframes cv-hero-urgency-in {
        to { opacity: 1; transform: translateX(0) scale(1); }
    }

    /* Spotlight cursor follower sobre el hero (sólo desktop, sólo con cursor) */
    .hero {
        position: relative;
        --cv-spot-x: 50%;
        --cv-spot-y: 50%;
        --cv-spot-opacity: 0;
        overflow: hidden;
    }
    .hero::after {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(
            circle 420px at var(--cv-spot-x) var(--cv-spot-y),
            rgba(249, 115, 22, 0.22) 0%,
            rgba(249, 115, 22, 0.06) 35%,
            rgba(249, 115, 22, 0) 70%
        );
        opacity: var(--cv-spot-opacity);
        transition: opacity 0.4s ease;
        pointer-events: none;
        z-index: 1;
        mix-blend-mode: screen;
    }
    .hero > * {
        position: relative;
        z-index: 2;
    }
}

/* Tablet y móvil: progress bar + chip ocultados (ya tienen su propio pin Disec) */
@media (max-width: 1024px) {
    #cv-scroll-progress,
    #cv-scroll-progress-chip {
        display: none;
    }
}
/* CV-STORYBOARD-END */

@media (min-width: 769px) {
    .cv-sticky-cta {
        display: none !important;
    }
}

/* CV-SEO 2026-05-20: chat (#cv-chatbot-launcher) y flecha scroll-top (#scrollToTop
   o #scroll-to-top) por encima de la sticky bar (56 px + safe-area) en móvil.
   Ambos llevan inline styles, así que !important vence al style="" inline. */
@media (max-width: 768px) {
  #cv-chatbot-launcher {
    bottom: calc(66px + env(safe-area-inset-bottom)) !important;
    left: 16px !important;
    right: auto !important;
  }
  #scrollToTop, #scroll-to-top {
    bottom: calc(66px + env(safe-area-inset-bottom)) !important;
    right: 18px !important;
    left: auto !important;
  }
}

/* === Mejoras UX cards de servicio y pulso urgencia — 2026-05-19 === */

/* Hover desktop: refuerzo del existente (translateY -5px) a -6px + shadow.
   El .servicio:hover original cambia el background a azul; mantenemos ese
   comportamiento y solo añadimos elevación y sombra. */
@media (min-width: 769px) {
    .servicio {
        cursor: pointer;
    }
    .servicio:hover {
        transform: translateY(-6px) !important;
        box-shadow: 0 12px 28px -10px rgba(37, 99, 235, 0.35);
    }
}

/* Tap feedback móvil: scale al pulsar. */
@media (max-width: 768px) {
    .servicio {
        transition: transform 150ms ease, background 0.3s, color 0.3s;
    }
    .servicio:active {
        transform: scale(0.97);
    }
    /* Grid de servicios: 2 columnas en móvil (refuerza la regla de 1024px
       y evita que otra regla genérica móvil lo pase a 1fr). */
    .precios-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }
}

/* ≤480px: mantener 2 columnas, reducir padding interno y tamaños. */
@media (max-width: 480px) {
    .precios-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }
    .servicio {
        padding: 14px 10px !important;
    }
    .servicio-icon {
        font-size: 1.8rem !important;
        margin-bottom: 8px !important;
    }
    .servicio h3 {
        font-size: 0.9rem !important;
        line-height: 1.2 !important;
        margin-bottom: 4px !important;
    }
    .servicio p {
        font-size: 0.78rem !important;
        line-height: 1.3 !important;
    }
}

/* === Efectos visuales hero — 2026-05-19 ===
   Solo CSS. El texto real ("Origin-Go®", "20 minutos") permanece intacto
   en el DOM como texto plano y es 100 % legible por crawlers/screen readers.
   El shimmer es un pseudoelemento ::after; el pulso es transform + text-shadow.
   Ninguna imagen, ningún canvas, ningún SVG, ningún JS. */

/* EFECTO 1 — "Origin-Go®" pulso unificado con "20 minutos".
   CV-SEO 2026-05-20: el shimmer (::after con gradiente) se ha retirado por
   completo. La marca reutiliza la misma animación cv-urgency-pulse que el
   pulso de urgencia, para coherencia visual entre ambos elementos del hero. */
.cv-highlight-brand {
    display: inline-block;
    animation: cv-urgency-pulse 2.5s ease-in-out infinite;
    transform-origin: center;
}

/* EFECTO 2 — Pulso de urgencia "20 minutos" (y "<20 min" de urgency-stats).
   Escala suave + doble glow ámbar coherente con el color #fbbf24 del texto. */
.cv-highlight-urgency {
    display: inline-block !important;
    /* CV-SEO 2026-05-19 fix: !important defensivo en animation para vencer
       cualquier regla externa (plugins, CSS minificado de WP Rocket cuando
       comprime estilos, hojas de estilo de tema padre) que pudiera resetearla.
       En auditoría sobre style.css solo aparecen mis reglas, pero algunos
       entornos (caché crítica de CSS) pueden inyectar resets globales. */
    animation: cv-urgency-pulse 2.5s ease-in-out infinite !important;
    transform-origin: center;
    will-change: transform, text-shadow;
}

@keyframes cv-urgency-pulse {
    0% {
        transform: scale(1);
        text-shadow: 0 0 0px rgba(251, 191, 36, 0);
    }
    50% {
        transform: scale(1.04);
        text-shadow: 0 0 18px rgba(251, 191, 36, 0.6),
                     0 0 32px rgba(251, 191, 36, 0.2);
    }
    100% {
        transform: scale(1);
        text-shadow: 0 0 0px rgba(251, 191, 36, 0);
    }
}

/* Accesibilidad: respetar la preferencia de reducción de movimiento. */
@media (prefers-reduced-motion: reduce) {
    .cv-highlight-brand {
        animation: none;
    }
    .cv-highlight-urgency {
        animation: none;
    }
}

/* === CV-SEO 2026-05-19 — CTA tel/WhatsApp en blog posts (BLOQUE A5) === */
.cta-blog-tel {
    background: #f0f9ff;
    border-left: 4px solid #2563eb;
    padding: 1.25rem 1.5rem;
    margin: 2rem 0;
    border-radius: 0 8px 8px 0;
}
.cta-blog-tel p {
    margin: 0 0 0.5rem 0;
    color: #1e293b;
    font-size: 1rem;
    line-height: 1.55;
}
.cta-blog-tel a:not(.btn-cta-tel) {
    color: #2563eb;
    text-decoration: underline;
}
.btn-cta-tel {
    display: inline-block;
    background: #dc2626;
    color: #fff !important;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none !important;
    margin-top: 0.75rem;
    transition: background 200ms ease, transform 150ms ease;
}
.btn-cta-tel:hover { background: #b91c1c; }
.btn-cta-tel:active { transform: scale(0.97); }

/* === CV-SEO 2026-05-19 — fecha de última actualización en posts (BLOQUE B7) === */
.cv-updated {
    display: inline-block;
    font-size: 0.85rem;
    color: #cbd5e1;
    font-style: italic;
    margin-left: 4px;
}

/* === CV-SEO 2026-05-20 — Barra de cabecera compactada a 70px ===
   Antes: 90 px (desktop) en .header-container y .header-logo, img 180×70.
   Ahora: 70 px uniforme — la barra del nav queda más fina y el logo
   se reduce proporcionalmente (max-height 50 px, width auto).
   El <img> trae width:150px inline → lo sobreescribimos con !important
   a width:auto para que el aspect ratio se mantenga sólo con max-height. */

/* === Logo header — regla única CV-SEO 2026-05-20 ===
   Logo INDEPENDIENTE del contenedor: width + min-width fijos en px,
   max-height limita altura. No se achica aunque el nav baje de 70 px. */
.header-logo {
    display: flex;
    align-items: center;
    padding: 0 20px;
    flex-shrink: 0;
}

.header-logo a {
    display: flex;
    align-items: center;
    line-height: 0;
}

.header-logo img {
    width: 200px !important;
    height: auto !important;
    max-height: 70px !important;
    min-width: 200px !important;
    display: block !important;
    object-fit: contain !important;
}

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

/* === MARCA GALERIA FINAL === */
.marca-galeria{display:flex;gap:8px;width:100%;margin:0 0 16px 0;padding:0}
.marca-galeria picture{width:50%;flex-shrink:0;margin:0;padding:0}
.marca-galeria picture img{width:100%;height:240px;object-fit:cover;object-position:center;border-radius:8px;display:block;margin:0}
@media(max-width:768px){.marca-galeria{flex-direction:column}.marca-galeria picture{width:100%}.marca-galeria picture img{height:220px}}

/* LOGO FINAL - especificidad máxima CV-2026-05-20 */
div.header-logo a img,
div.header-logo img {
  width: 200px !important;
  min-width: 200px !important;
  max-width: 200px !important;
  height: auto !important;
  max-height: none !important;
  display: block !important;
  object-fit: contain !important;
}
@media (max-width: 768px) {
  div.header-logo a img,
  div.header-logo img {
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
  }
}

/* ============================================================
   CV-SEO 2026-06-03: TOC global (cv-toc-wrap)
   Estilos compartidos por la TOC de la home (front-page.php
   V65) y la TOC automática de posts individuales (cv_auto_toc
   en functions.php). Toggle por clase .cv-toc-closed.
   ============================================================ */
.cv-toc-wrap {
    max-width: 680px;
    margin: 0 auto 32px;
    background: #0a0c1a;
    border: 0.5px solid rgba(249, 115, 22, .25);
    border-radius: 14px;
    padding: 20px 24px;
    color: #f1f5f9;
}
.cv-toc-wrap .cv-toc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding-bottom: 14px;
    border-bottom: 0.5px solid rgba(255, 255, 255, .08);
    transition: padding-bottom .3s ease, border-color .3s ease;
}
.cv-toc-wrap.cv-toc-closed .cv-toc-header {
    padding-bottom: 0;
    border-bottom-color: transparent;
}
.cv-toc-wrap .cv-toc-title {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: #f1f5f9;
}
.cv-toc-wrap .cv-toc-toggle {
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: #f97316;
    line-height: 0;
}
.cv-toc-wrap .cv-toc-chevron {
    transition: transform .3s ease;
    transform: rotate(180deg);
}
.cv-toc-wrap.cv-toc-closed .cv-toc-chevron {
    transform: rotate(0deg);
}
.cv-toc-wrap .cv-toc-list {
    column-count: 2;
    column-gap: 20px;
    list-style: none;
    padding: 16px 0 0;
    margin: 0;
}
.cv-toc-wrap.cv-toc-closed .cv-toc-list {
    display: none;
}
.cv-toc-wrap .cv-toc-list li {
    break-inside: avoid;
    margin: 0;
}
.cv-toc-wrap .cv-toc-list a {
    display: flex;
    align-items: baseline;
    padding: 8px 12px;
    border-radius: 8px;
    color: #9ca3af;
    font-size: 13px;
    line-height: 1.4;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}
.cv-toc-wrap .cv-toc-list a:hover,
.cv-toc-wrap .cv-toc-list a:focus-visible {
    background: rgba(249, 115, 22, .08);
    color: #f97316;
    outline: none;
}
@media (max-width: 640px) {
    .cv-toc-wrap       { margin: 0 16px 32px; padding: 18px; }
    .cv-toc-wrap .cv-toc-list  { column-count: 1; }
    .cv-toc-wrap .cv-toc-title { font-size: 13px; }
}

/* ============================================================
   CV-SEO 2026-06-12: Disec cards igualadas a KABA/KESO/SAG.
   Flex column + margin-top:auto fuerza botón "Ver más" al fondo,
   garantizando alineación con 10 cards de párrafos variables.
   Scoped a #disecGrid: KABA/KESO/SAG no se ven afectados.
   ============================================================ */
#disecGrid .card {
    display: flex;
    flex-direction: column;
}
#disecGrid .toggle-features {
    margin-top: auto !important;
}

/* CV-SEO 2026-06-14: misma técnica para KABA/KESO/SAG.
   Garantiza alineación de "Ver más" cuando los párrafos
   tienen distinta longitud (SAG es 3 líneas, KABA/KESO 2). */
.alta-seguridad .cards-grid > .card {
    display: flex;
    flex-direction: column;
}
.alta-seguridad .cards-grid > .card .toggle-features {
    margin-top: auto !important;
}

/* ============================================================
   CV-SEO 2026-06-13: Disec pinned horizontal scroll (móvil/tablet).
   Patrón Apple: la sección se ancla mientras el scroll vertical
   se traduce en desplazamiento horizontal de las cards. Velocidad
   media (5× viewport). Barra de progreso fina arriba + botón
   "Saltar" discreto. Desktop (≥1025px) mantiene el slider de
   paginación de 3 cards intacto.
   ============================================================ */

/* Desktop default: el wrapper es invisible (no añade altura) */
#escudos-disec .disec-pin-wrap {
    position: relative;
}
#escudos-disec .disec-pin-sticky {
    position: relative;
}
#escudos-disec .disec-progress,
#escudos-disec .disec-skip,
#escudos-disec #disec-end {
    display: none;
}

/* Mobile + tablet: pin horizontal scroll (JS controlled fixed positioning) */
@media (max-width: 1024px) {
    /* Escapar el .container para usar todo el viewport (evita corte de 1ª card) */
    #escudos-disec .disec-pin-wrap {
        height: 500vh; /* 5× viewport — velocidad media */
        position: relative;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        width: 100vw;
        max-width: 100vw;
    }
    #escudos-disec .disec-pin-sticky {
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        /* CV-SEO 2026-06-22: pin a 90vh (no 100vh) + card centrada, sin el
           "espacio gigante" que daba flex-end. El resto descubierto muestra el mismo
           gradiente de la sección .alta-seguridad (sin costura). */
        height: 97vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background: linear-gradient(135deg, #111827 0%, #1f2937 50%, #111827 100%);
    }
    /* JS aplica estas clases según scroll position */
    #escudos-disec .disec-pin-sticky.is-pinned {
        position: fixed;
        top: 0;
    }
    #escudos-disec .disec-pin-sticky.is-pinned-end {
        position: absolute;
        top: auto;
        bottom: 0;
    }

    /* Track: flex horizontal con peek lateral */
    #escudos-disec #disecGrid {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch;
        gap: 16px;
        width: max-content;
        padding: 0 7.5vw;
        will-change: transform;
        margin: 0;
    }

    /* Forzar visibles todas las cards en móvil (override del render() JS desktop) */
    #escudos-disec #disecGrid .card {
        display: flex !important;
        flex-direction: column;
        width: 85vw;
        max-width: 380px;
        flex-shrink: 0;
        padding: 20px;
        /* CV-SEO 2026-06-21: SIN scroll interno. Antes la card tenía
           overflow-y:auto y capturaba el gesto táctil → el carrusel (pin-scroll)
           no avanzaba al deslizar sobre la card. Como el copy ya se compactó para
           que la card expandida (8 features) quepa entera en el pin, el overflow
           sobra: el gesto pasa al documento y el carrusel desplaza en toda la card. */
        max-height: none;
        overflow: visible;
    }

    /* CV-SEO 2026-06-21: imagen más contenida en móvil para que la card
       expandida (hasta 8 features + "Ver menos") quepa entera sin scroll
       interno dentro del pin — el scroll interno chocaba con el pin táctil */
    #escudos-disec #disecGrid .card picture img,
    #escudos-disec #disecGrid .card > img {
        /* CV-SEO 2026-06-22: imagen CUADRADA que ocupa el ANCHO de la card.
           La foto vertical se encuadra al cuadrado central (cover) → se ve el
           escudo, marco cuadrado (4 lados iguales) llenando el ancho. */
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        object-fit: cover !important;
        object-position: center !important;
        margin: 0 auto 6px !important;
        display: block !important;
    }

    /* CV-SEO 2026-06-22: título pegado a la imagen (sin margen superior) */
    #escudos-disec #disecGrid .card h3 {
        margin-top: 0 !important;
    }

    /* CV-SEO 2026-06-22: botón "Ver más" al fondo de la card → alineado a la misma
       altura en todas (las cards ya igualan altura por align-items:stretch),
       independientemente de cuántas líneas tenga el texto de cada una. */
    #escudos-disec #disecGrid .card .toggle-features {
        margin-top: auto !important;
    }

    /* CV-SEO 2026-06-16: sin min-height fijo en móvil — el bloque de features
       se adapta y no empuja el botón fuera de vista */
    /* CV-SEO 2026-06-22: flex:1 → el bloque de features absorbe el espacio
       sobrante de la card, dejando el botón "Ver más" al fondo (alineado en
       todas las cards, que ya tienen igual altura por stretch). */
    #escudos-disec #disecGrid .card .product-features {
        min-height: 0 !important;
        flex: 1 1 auto !important;
    }

    /* CV-SEO 2026-06-21: compactar copy de la card en móvil para ganar los
       ~40px que recortaban el texto inferior de las cards de 8 features */
    #escudos-disec #disecGrid .card > p {
        margin-bottom: 8px !important;
    }
    #escudos-disec #disecGrid .card .product-features li {
        line-height: 1.28;
        margin-bottom: 3px;
    }
    #escudos-disec #disecGrid .card .toggle-features {
        margin-top: 10px !important;
    }

    /* Ocultar prev/next del slider desktop */
    #escudos-disec .disec-nav {
        display: none;
    }

    /* Barra de progreso fina (naranja Disec) */
    #escudos-disec .disec-progress {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        height: 3px;
        width: 0%;
        background: linear-gradient(to right, #f97316, #dc2626);
        z-index: 10;
        will-change: width;
    }

    /* Botón "Saltar sección" — fixed por debajo del menú del teléfono */
    /* Por defecto oculto; se muestra solo cuando JS añade .is-pinned al sticky */
    #escudos-disec .disec-skip {
        display: none;
        position: fixed;
        top: 90px;
        right: 14px;
        background: rgba(17, 24, 39, 0.85);
        border: 1px solid rgba(255, 255, 255, 0.25);
        color: #fff;
        padding: 8px 14px;
        border-radius: 18px;
        font-size: 0.78rem;
        text-decoration: none;
        font-weight: 600;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        z-index: 9999;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
        transition: background 0.2s, transform 0.2s, opacity 0.25s;
        opacity: 0;
        pointer-events: none;
    }
    /* Visible durante el pin */
    #escudos-disec .disec-pin-sticky.is-pinned ~ .disec-skip,
    #escudos-disec .disec-pin-sticky.is-pinned .disec-skip,
    body.disec-pinned #escudos-disec .disec-skip {
        display: inline-block;
        opacity: 1;
        pointer-events: auto;
    }
    #escudos-disec .disec-skip:hover,
    #escudos-disec .disec-skip:active {
        background: rgba(249, 115, 22, 0.95);
        transform: translateY(-1px);
    }

    /* Cards: preparar GPU para scale/opacity dinámicos */
    #escudos-disec #disecGrid .card {
        will-change: transform, opacity;
        transform-origin: center center;
        backface-visibility: hidden;
    }
}

/* Reduced-motion: fallback a scroll-snap horizontal nativo (sin pin) */
@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
    #escudos-disec .disec-pin-wrap {
        height: auto;
    }
    #escudos-disec .disec-pin-sticky {
        position: static;
        height: auto;
        overflow-x: auto;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    #escudos-disec .disec-pin-sticky::-webkit-scrollbar {
        display: none;
    }
    #escudos-disec #disecGrid {
        transform: none !important;
    }
    #escudos-disec #disecGrid .card {
        scroll-snap-align: center;
    }
    #escudos-disec .disec-progress {
        display: none;
    }
}