@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,700;1,400&family=Dancing+Script:wght@400;600&family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400;1,500&display=swap');

:root {
    --bg-color: #F8F1C3;
    /* Warmer yellowish beige, removed pink tones */
    /* Warmer Beige-Yellowish background */
    --text-color: #3C3E42;
    /* Dark slate gray */
    --text-muted: #5A5D63;
    --accent-color: #be9882;
    /* Nuevo Tono Tierra cálido sugerido por el usuario */
    --accent-hover: #b48e58;
    --button-yellow: #e4cc9f;
    --white: #FFFFFF;
    --font-main: 'Montserrat', sans-serif;
    --font-heading: 'Playfair Display', serif;
    --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.05);
    --transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

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

body {
    font-family: var(--font-main);
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
}

/* NAVBAR GLASSMORPHISM COMPACTA (Sincronizada para todo el sitio) */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 5%;
    background-color: #3C3E42;
    /* Negro grafito unificado */
    backdrop-filter: blur(10px);
    transition: var(--transition);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.navbar-interna {
    background-color: #3C3E42 !important;
    backdrop-filter: blur(10px);
    position: fixed;
    width: 100%;
    top: 0;
    padding: 22px 5%;
    z-index: 10000;
}

.navbar .logo,
.navbar nav a,
.navbar-interna .logo,
.navbar-interna nav a {
    color: var(--white) !important;
    /* Siempre blanco */
}

.navbar nav a:hover,
.navbar-interna nav a:hover {
    color: var(--accent-color) !important;
}

.navbar .dropdown-content,
.navbar-interna .dropdown-content {
    background-color: #3C3E42 !important;
}

.navbar .dropdown-content a,
.navbar-interna .dropdown-content a {
    color: var(--white) !important;
}

.navbar.scrolled {
    padding: 22px 5%;
    background-color: #3C3E42;
}

.navbar .logo {
    font-size: 1.3rem;
    /* Smallest logo to save space */
    font-weight: 800;
    color: var(--white);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.navbar nav ul {
    list-style: none;
    display: flex;
    gap: 15px;
    /* Compact gap */
    align-items: center;
    white-space: nowrap;
    /* Forces one line */
}

.service-item-premium h3 {
    grid-column: 1 / -1;
    text-align: center;
    margin: 0 0 40px 0;
    font-size: 2.2rem;
    color: var(--accent-color);
    letter-spacing: 2.5px;
    font-family: var(--font-heading);
    text-transform: uppercase;
}

.navbar nav a {
    text-decoration: none;
    color: var(--white);
    font-weight: 500;
    font-size: 0.8rem;
    /* Discreet font size */
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: var(--transition);
}

.navbar nav a:hover {
    color: var(--accent-color);
}

/* --- BUSCADORES ATÓMICOS BLINDADOS (UNIFICADOS) --- */
#nameSearchHome,
#nameSearchPage {
    width: 100% !important;
    padding: 22px 30px 22px 75px !important;
    border-radius: 60px !important;
    border: 3px solid var(--accent-color) !important;
    font-family: var(--font-main) !important;
    outline: none !important;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.1) !important;
    background-color: #fffcf8 !important;
    font-size: 1.3rem !important;
    color: #3C3E42 !important;
    transition: 0.3s !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23be9882' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 25px center !important;
    background-size: 30px !important;
}

/* Ajuste compacto para el mini-buscador del menú */
.dropdown-content input[type="text"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23be9882' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 10px center !important;
    background-size: 18px !important;
    padding-left: 35px !important;
}

@media (max-width: 600px) {

    #nameSearchHome,
    #nameSearchPage {
        padding: 16px 20px 16px 55px !important;
        font-size: 1.1rem !important;
        background-position: 18px center !important;
        background-size: 24px !important;
        width: 90% !important;
        margin: 0 auto !important;
        display: block !important;
    }
}

/* BOTÓN HAMBURGUESA */
.menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
}

.menu-toggle span {
    width: 25px;
    height: 3px;
    background-color: var(--white);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    /* Transición estable para la hamburguesa */
}

/* Animación a X al abrir */
.menu-toggle.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* HERO BANNER - MEJORADO */
.hero-banner {
    width: 100%;
    padding-top: 60px;
    background-color: var(--bg-color);
}

.hero-scaler {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.hero-bg-img {
    width: 100%;
    height: auto;
    display: block;
    margin-top: -12%;
    margin-bottom: -12%;
    filter: brightness(0.95);
}

.hero-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hero-meta {
    position: absolute;
    top: 32%;
    left: 8%;
    font-family: var(--font-main);
    font-size: 1.4vw;
    font-weight: 700;
    color: var(--text-color);
    letter-spacing: 0.2vw;
}

.hero-title {
    position: absolute;
    top: 39.8%;
    left: 8%;
    font-family: var(--font-main);
    font-size: 6vw;
    font-weight: 800;
    line-height: 1;
    color: var(--text-color);
    letter-spacing: -2px;
}

.hero-slogan {
    position: absolute;
    top: 58.5%;
    left: 21vw;
    font-family: 'Dancing Script', cursive;
    color: var(--white);
    font-weight: 400;
    font-size: 3.2vw;
    white-space: nowrap;
    /* Brillo Neón Blanco Suavizado */
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.8), 0 0 10px rgba(255, 255, 255, 0.5), 0 0 15px rgba(255, 255, 255, 0.3);
    z-index: 10;
}

.name-card {
    scroll-margin-top: 100px;
    outline: none;
    text-decoration: none;
    /* Quitar subrayado violeta de los enlaces */
}

/* NAME CARD RENDERING (CSS SYSTEM FOR PERFECT CONSISTENCY) */
.name-box {
    width: 100%;
    height: 80px;
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: var(--transition);
    cursor: pointer;
    overflow: hidden;
    container-type: inline-size;
}

.name-box span {
    color: var(--text-color);
    font-size: clamp(0.5rem, 8cqw, 1.4rem);
    /* Reducido ligeramente para mayor margen en nombres largos */
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0px;
    /* Reducción a 0 para maximizar espacio horizontal */
    font-family: var(--font-main);
    padding: 0 10px;
    /* Más padding para asegurar que no toque bordes */
    text-align: center;
    white-space: nowrap;
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.name-box.style-beige {
    background-color: #EDE4C8;
}

.name-box.style-tierra {
    background-color: #BE9882;
}

.name-box.style-ocre {
    background-color: #D4B170;
}

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

/* Resaltado cuando volvemos a un nombre específico */
.name-card:target .name-box {
    border: 4px solid var(--text-color) !important;
    transform: scale(1.02);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

/* Banner unificado con texto integrado */
.hero-text-hide {
    display: none !important;
}

.hero-bg-img {
    width: 100%;
    height: auto;
    display: block;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    filter: brightness(0.95);
}

/* ESTILO BASE GALERÍA (PC) */
.search-library-title {
    font-size: 1.6rem;
    letter-spacing: -0.5px;
    font-weight: 700;
}

.search-library-container {
    max-width: 700px;
    margin: 0 auto 30px auto;
}

@media (max-width: 1024px) {
    /*--------------------------------------------------------------    # COMPACTAR ESPACIO BANNER -> SERVICIOS (SOLO CELU)    --------------------------------------------------------------*/
    @media (max-width: 768px) {
        .services {
            padding-top: 50px !important;
            /* Ajuste medio: ni pegado ni lejos */
        }

        .section-title {
            margin-top: 0 !important;
            margin-bottom: 25px !important;
        }

        .section-title span {
            font-size: 1.15rem !important;
            /* Estilo ultra-minimalista y fino */
            letter-spacing: 0 !important;
        }
    }

    /*--------------------------------------------------------------    # TODO LO QUE VIENE ABAJO PARA CELULAR Y TABLET (CON EL CELU YA PROLIJO)    --------------------------------------------------------------*/
    .about-text-container p,
    .service-content p,
    .service-page p,
    .blog-post p,
    .article-body p,
    .search-modal-content p,
    .name-detail-card p {
        font-size: 0.92rem !important;
        line-height: 1.8 !important;
        text-align: justify;
    }

    /* GALERÍA DE NOMBRES - SIMETRÍA Y AIRE */
    .search-library-title {
        font-size: 1.15rem !important;
        /* Achicado para que entre en una sola línea */
        white-space: nowrap !important;
        letter-spacing: 0px !important;
        margin-bottom: 20px !important;
    }

    .search-library-container {
        max-width: 420px !important;
        /* Muy compacto y centrado */
        padding: 0 10% !important;
        margin: 0 auto !important;
    }

    .search-library-footer {
        padding: 0 10% !important;
        /* ALEJAR FRASE INFERIOR DE BORDES */
        font-size: 0.95rem !important;
    }

    /* DETALLE DE NOMBRES MÓVIL */
    .name-detail-header {
        padding: 40px 20px !important;
        margin-bottom: 30px !important;
    }

    .name-detail-header h1 {
        font-size: 2.2rem !important;
    }

    .vibration-section {
        margin: 35px 0 !important;
    }

    .vibration-label {
        font-size: 1.3rem !important;
        margin-bottom: 12px !important;
    }

    .service-page h1 {
        font-size: 1.8rem !important;
        margin-top: 20px !important;
        /* Espacio justo y prolijo */
        margin-bottom: 20px !important;
        text-align: left !important;
        /* Vuelve a la izquierda original */
        color: var(--accent-color) !important;
    }

    .deepen-experience {
        padding: 0 6% !important;
        margin-top: 10px !important;
        text-align: center !important;
    }

    .deepen-experience h2 {
        font-size: 1.5rem !important;
        /* Título más fino y proporcionado */
        margin-bottom: 20px !important;
    }

    .deepen-cards {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        /* ¡A DOS BOTONES POR FILA! */
        gap: 12px !important;
        max-width: 500px !important;
        margin: 0 auto !important;
    }

    .deepen-card {
        padding: 12px 15px !important;
        /* Más compactos */
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        height: auto !important;
    }

    .deepen-card h3 {
        font-size: 0.85rem !important;
        /* Letra pequeña para que entren en una línea */
        margin: 0 !important;
        white-space: nowrap !important;
    }

    .navbar {
        padding: 15px 5%;
    }

    .navbar .logo {
        font-size: 1.1rem !important;
        letter-spacing: 1px !important;
    }

    .menu-toggle {
        display: flex;
        /* Mostrar hamburguesa */
    }

    .navbar nav {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #3C3E42;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        padding: 0 5%;
        /* Padding lateral fijo siempre */
    }

    .navbar nav.active {
        max-height: 100vh;
        /* Ocupa lo necesario sin saltos */
        padding-top: 10px;
        padding-bottom: 40px;
        overflow-y: auto;
    }

    .navbar nav ul {
        flex-direction: column;
        padding: 20px 0;
        /* Quitamos el padding lateral de aquÃ- ya que está en el padre */
        gap: 20px !important;
        align-items: flex-start !important;
        width: 100%;
    }

    .navbar nav a {
        font-size: 0.9rem !important;
        width: 100%;
        display: block;
    }

    .dropdown-content {
        position: static !important;
        background-color: rgba(0, 0, 0, 0.1) !important;
        box-shadow: none !important;
        padding-left: 15px !important;
        max-height: none !important;
        display: block !important;
        margin-top: 10px;
    }

    .hero-banner {
        padding-top: 50px;
    }

    .hero-content {
        top: 52%;
        left: 5%;
    }

    .hero-meta {
        font-size: 3vw;
    }

    .hero-title {
        font-size: 9vw;
    }

    .hero-slogan {
        font-size: 5.5vw;
        margin-left: 5vw;
        margin-top: 2vw;
        text-shadow: 0 0 5px #fff, 0 0 10px #fff;
    }

    /* FIX BOTONES MÓVIL (COMPACTOS Y CON AIRE) */
    @media (max-width: 768px) {
        .service-buttons {
            margin-top: 20px !important;
            /* Bajamos los botones para que no peguen al texto */
        }

        .btn-dark {
            font-size: 0.80rem !important;
            /* Letra más pequeña y fina */
            padding: 10px 18px !important;
            /* Menos bulto */
            white-space: nowrap !important;
            display: inline-block !important;
        }
    }

    /* TIPOGRAFÍA MÓVIL REFINADA - SOLO CELU (ESTILO COMPACTO - 0.82REM) */
    @media (max-width: 600px) {

        .about-text-container p,
        .service-content p,
        .service-page p,
        .blog-post p,
        .search-modal-content p,
        .name-detail-card p,
        .name-detail-container p,
        .article-body p,
        .vibration-section p,
        .intro p {
            font-size: 0.82rem !important;
            /* Más pequeña como pediste */
            color: var(--text-color) !important;
            /* Color gris grafito estándar para todos */
            line-height: 1.5 !important;
            /* Mejor legibilidad */
            margin-top: 15px !important;
            /* Más separación arriba */
            margin-bottom: 15px !important;
            /* Más separación abajo */
            word-spacing: normal !important;
            text-align: left !important;
        }

        /* RE-CENTRAR TEXTO EN CABECERAS DE NOMBRES (SOLO CELU) */
        .name-detail-header p {
            text-align: center !important;
            /* Volver a centrar frecuencia numerológica */
            margin-top: 5px !important;
            /* Espacio más fino bajo el nombre */
        }
    }

    /* TARJETAS DE SERVICIO MÁS PEQUEÑAS Y PROPORCIONADAS (SOLO CELU) */
    @media (max-width: 768px) {
        .service-row {
            padding: 20px 5% !important;
            /* Más compacto internamente */
            margin-bottom: 25px !important;
            width: 85% !important;
            /* Tarjeta mucho más estrecha */
            margin-left: auto !important;
            /* Centrado */
            margin-right: auto !important;
            /* Centrado */
            background-color: var(--white);
            border-radius: 12px;
            /* Un toque menos redondeo para compensar el tamaño */
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
        }

        .service-img img {
            max-width: 90% !important;
            /* Agrandado un poquito para que luzca mejor en la tarjeta estrecha */
            margin: 0 auto !important;
            display: block !important;
        }

        .service-content h3 {
            font-size: 1.15rem !important;
            margin-top: 5px !important;
            /* Más cerca de la imagen */
            margin-bottom: 10px !important;
        }

        .service-content p {
            font-size: 0.82rem !important;
            /* Ajuste fino a 0.82rem */
            line-height: 1.2 !important;
        }
    }

    /* AIRE PARA EL AVISO DE ENTREGA EN PDF (SOLO CELU) */
    @media (max-width: 600px) {
        p[style*="font-style: italic"] {
            margin-top: 15px !important;
            margin-bottom: 20px !important;
            font-size: 0.82rem !important;
            /* Consistente con el resto */
            display: block !important;
        }
    }

    .service-page {
        padding: 70px 20px 35px 20px !important;
        /* Restauramos diseño móvil */
        margin-top: 0 !important;
        padding: 50px 7% 0 7% !important;
        text-align: left !important;
    }

    .intro {
        padding: 60px 7% 10px !important;
        /* Compacta el inicio y el final de la invitación */
    }

    .service-row {
        flex-direction: column !important;
        padding: 30px !important;
        gap: 30px !important;
        max-width: 90% !important;
    }

    .service-img {
        width: 100% !important;
        height: 250px !important;
    }

    /* BLOG ARTICLES MÓVIL/TABLET */
    .blog-post {
        padding: 30px 25px !important;
        margin-top: 0 !important;
        /* El espacio lo maneja el 'main' ahora */
    }

    .blog-post h1 {
        font-size: 1.6rem !important;
        /* Título principal aún más sutil */
        margin-bottom: 10px !important;
        margin-top: 0 !important;
        /* Elimina espacio extra arriba del h1 */
    }

    .blog-post h2 {
        font-size: 1.3rem !important;
        margin-top: 30px !important;
    }

    .blog-post h3 {
        font-size: 1.25rem !important;
    }

    .blog-date {
        font-size: 0.8rem !important;
        margin-bottom: 25px !important;
    }

    /* REDUCCIÓN DE TÍTULOS MÓVIL/TABLET */
    /* TÍTULOS REFINADOS */
    .section-title span {
        font-size: 2.1rem !important;
    }

    .section-title span {
        font-size: 2.1rem !important;
        /* Títulos de sección (SERVICIOS, etc) refinados */
    }

    .service-content h3 {
        font-size: 1.6rem !important;
        /* Títulos de cada tarjeta */
    }

    .service-content-full h3 {
        font-size: 2rem !important;
        /* Título especial Tarot */
    }

    /* COMPACTACIÓN DE PRECIOS Y MEDIA MÓVIL (CORRECCIÓN) */
    .service-img-container,
    .service-media {
        height: 200px !important;
        width: 100% !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        margin-bottom: 5px !important;
    }

    .service-img-container img,
    .service-media img,
    .service-page img {
        width: 100% !important;
        height: 200px !important;
        object-fit: cover !important;
        border-radius: 12px !important;
        margin-bottom: 5px !important;
        /* Se pega más al texto de abajo */
    }

    .price-grid {
        display: flex !important;
        justify-content: center !important;
        gap: 10px !important;
        max-width: 82% !important;
        margin: -15px auto 10px auto !important;
        /* CENTRADO TOTAL */
    }

    .price-item {
        padding: 6px 8px !important;
        /* Bordes internos más finos */
    }

    .price-value {
        font-size: 1rem !important;
        /* Números más sutiles */
    }

    .currency-label {
        font-size: 0.7rem !important;
    }

    .audio-player-premium {
        max-width: 88% !important;
        /* Estirado para que entre todo cómodo */
        padding: 10px 15px !important;
        margin-top: -25px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        display: flex !important;
        flex-direction: row !important;
        /* En una sola línea horizontal */
        flex-wrap: nowrap !important;
        /* NO rompe la fila */
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 8px !important;
        /* Espacio más fino entre play y texto */
    }

    .audio-label {
        font-size: 0.72rem !important;
        /* Letra más delicada */
        white-space: nowrap !important;
        margin: 0 !important;
        letter-spacing: 0.5px;
    }

    .audio-btn {
        transform: scale(0.65) !important;
        /* Play miniatura para que encaje perfecto */
        margin: 0 !important;
    }

    /* UNIÓN EQUILIBRADA CUANDO HAY PRECIOS Y LUEGO AUDIO */
    .price-grid~.audio-player-premium {
        margin-top: -12px !important;
    }

    /* REDUCCIÓN DE BLOQUES GENÉRICOS DE SERVICIOS */
    .service-page div[style*="padding: 40px"],
    .service-page div[style*="padding: 30px"] {
        padding: 18px 20px !important;
    }

    .service-page img[style*="height: 350px"] {
        height: 200px !important;
    }

    /* UNIÓN DE PÁRRAFOS CON BLOQUES SIGUIENTES */
    .service-page p+div,
    .service-page p+section,
    .service-page p+h3 {
        margin-top: 10px !important;
        /* Une el párrafo con lo que sigue */
    }

    .service-page div[style*="margin-top"],
    .service-page section,
    .service-page h3 {
        margin-top: 10px !important;
        /* Bloques mucho más pegaditos entre sí */
        margin-bottom: 10px !important;
    }

    .service-item-premium {
        margin-top: 15px !important;
        padding: 15px !important;
    }

    /* SIMETRÍA EXCLUSIVA PARA TABLETS (700PX A 1024PX) */
    /* --- AJUSTE HÍBRIDO PARA TABLET Y VISTA DEL USUARIO (480px - 1024px) --- */
    @media (min-width: 480px) and (max-width: 1024px) {

        /* Ajuste de Títulos Principales - Simetría entre Galería de Nombres y Sobre Mí */
        .gallery-title,
        .sobre-mi-title {
            font-size: 2.2rem !important;
            /* Igualados al milímetro para armonía visual */
            margin-bottom: 25px !important;
            text-align: center !important;
        }

        /* Ajuste de Párrafos en Sobre Mí - Aire entre bloques de texto */
        .about-text-container p {
            line-height: 1.8 !important;
            /* Lectura fluida */
        }

        /* Buscador más pequeño y estilizado */
        .search-container {
            max-width: 340px !important;
            margin: 0 auto 30px !important;
        }

        #name-search {
            padding: 10px 18px !important;
            font-size: 0.95rem !important;
        }

        /* TÍTULOS NEGROS Y A LA IZQUIERDA - SOLO EL PRINCIPAL TIENE LÍNEA */
        .service-page h1 {
            text-align: left !important;
            /* ÚNICO A LA IZQUIERDA */
            color: #3C3E42 !important;
            /* NEGRO PURO #000 */
            position: relative;
            padding-bottom: 25px;
            font-size: 2.2rem !important;
        }

        .service-page h1::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100px;
            height: 5px;
            background: var(--accent-color);
            border-radius: 2px;
        }

        .service-item-premium h3 {
            text-align: center !important;
            /* CENTRADO TOTAL */
            color: #3C3E42 !important;
            /* NEGRO PURO #000 */
            font-size: 1.8rem !important;
            margin-bottom: 35px !important;
            padding-bottom: 12px;
            position: relative;
        }

        /* REFUERZO DE MÁXIMA FUERZA - MENÚ HAMBURGUESA (Solo Tablet y Celu) */
        nav .checkbtn:hover~ul,
        nav #check:hover~ul,
        nav ul:hover {
            left: 0 !important;
            /* Despliega el menú al pasar el puntero */
            opacity: 1 !important;
            visibility: visible !important;
            display: block !important;
            z-index: 9999 !important;
            transition: all .5s;
        }

        .checkbtn {
            padding: 5px 10px;
            /* Área de contacto más cómoda */
        }
    }

    /* --- ZONA EXCLUSIVA TABLET (700px - 1024px) --- */
    @media (min-width: 700px) and (max-width: 1024px) {

        /* Ajuste de Títulos Principales - Simetría para Tablet */
        .gallery-title,
        .sobre-mi-title {
            font-size: 2.2rem !important;
            /* Igualados al milímetro */
            margin-bottom: 25px !important;
            text-align: center !important;
        }

        /* Buscador más pequeño y estilizado - Tablet */
        .search-container {
            max-width: 340px !important;
            margin: 0 auto 30px !important;
        }

        #name-search {
            padding: 10px 18px !important;
            font-size: 0.95rem !important;
        }

        /* APERTURA DEL MENÚ HAMBURGUESA AL PASAR EL RATÓN - Tablet */
        nav .checkbtn:hover~ul,
        nav #check:hover~ul,
        nav ul:hover {
            left: 0 !important;
            opacity: 1 !important;
            visibility: visible !important;
            display: block !important;
            z-index: 9999 !important;
            transition: all .5s;
        }

        .checkbtn {
            padding: 5px 10px;
        }

        /* ESTABILIZACIÓN DEL MENÚ - EVITAR MOVIMIENTOS INDESEADOS */
        nav ul li {
            margin: 0 !important;
            /* Sin márgenes elásticos */
            padding: 18px 50px !important;
            /* Aire fijo y margen de seguridad izquierdo */
            width: 100% !important;
            text-align: left !important;
            /* Todo alineado a la izquierda */
        }

        nav ul li a {
            font-size: 1.1rem !important;
            /* Letra clara para Tablet */
            transition: none !important;
            /* Elimina el efecto de "baile" al mover el mouse */
        }

        /* Aire PROPIO para la sección de Vibración - Solo Tablet */
        .vibration-section {
            margin-top: 50px !important;
            /* Despegar del párrafo de ARRIBA */
        }

        /* Aire para el emoji de vibración - Solo Tablet */
        .vibration-label {
            display: block !important;
            /* Restauramos estructura original */
            font-size: 1.3rem !important;
            margin-bottom: 12px !important;
        }

        .vibration-label i,
        .vibration-label span {
            margin-right: 12px !important;
            /* Espacio a la derecha */
        }

        /* Ajuste de Párrafos en Sobre Mí - Espacio Normal Solo Tablet */
        .about-text-container p,
        .service-page p {
            margin-bottom: 30px !important;
            /* Espacio elegante para lectura */
            line-height: 1.8 !important;
        }

        .btn-dark {
            white-space: nowrap !important;
            font-size: 0.85rem !important;
            padding: 12px 20px !important;
        }

        /* Títulos de Páginas Internas - Sincronía Tablet */
        .service-page h1 {
            font-size: 2.2rem !important;
            text-align: center !important;
            margin-bottom: 40px !important;
            color: var(--accent-color) !important;
        }

        /* Aire Beige Tablet - Separar del Navbar Negro */
        .service-page {
            margin-top: 110px !important;
            background-color: white !important;
            border-radius: 20px !important;
            box-shadow: var(--shadow-soft) !important;
            /* Padding generoso para el contenido */
            padding: 60px 80px !important;
            margin-bottom: 80px !important;
            /* Expansión total similar a servicios */
            max-width: none !important;
            width: 100% !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
        }

        .service-item-premium h3 {
            font-size: 1.8rem !important;
            text-align: center !important;
            margin-bottom: 25px !important;
        }

        /* Reducir espacio entre Banner y Título de Servicios */
        .services {
            padding-top: 60px !important;
            display: grid !important;
            /* Definimos 2 columnas de tamaño fijo/pequeño para que quepan bien */
            grid-template-columns: repeat(2, 340px) !important;
            /* EL SECRETO PARA CENTRARLO EN LA PÁGINA: */
            justify-content: center !important;
            gap: 30px !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
        }

        /* El título de la sección ocupa las 2 columnas y se centra */
        .section-title {
            grid-column: span 2 !important;
            text-align: center !important;
        }

        /* Convertimos cada fila en una "tarjeta" vertical */
        .service-row {
            flex-direction: column !important;
            margin-bottom: 0 !important;
            padding: 20px !important;
            height: 100% !important;
            text-align: left !important;
            /* Alineado a la izquierda */
            align-items: flex-start !important;
            /* Empezar en el borde izquierdo de la tarjeta */
            gap: 12px !important;
            max-width: 340px !important;
            /* Ajustado al ancho de columna */
            width: 100% !important;
        }

        .service-img {
            width: 100% !important;
            height: 200px !important;
            margin-bottom: 10px !important;
            overflow: hidden !important;
            /* Asegurar que nada se salga del borde redondeado */
        }

        .service-img img {
            object-fit: contain !important;
            object-position: center 0% !important;
            /* Al techo absoluto del recuadro */
            padding-top: 0 !important;
            /* Sin aire arriba */
            padding-bottom: 25px !important;
            /* Empuje base */
            margin-top: -50px !important;
            /* ELEVACIÓN MÁXIMA PARA LA MAYORÍA */
        }

        /* AJUSTE INDIVIDUAL PARA CARTA NATAL (Ajuste milimétrico final) */
        #servicio-natal-adulto .service-img img {
            margin-top: -45px !important;
        }

        /* AJUSTE INDIVIDUAL PARA TAROT (Un pelín más arriba que el resto) */
        #servicio-tarot .service-img img {
            margin-top: -65px !important;
        }

        .service-content {
            display: flex !important;
            flex-direction: column !important;
            align-items: flex-start !important;
            /* Contenido pegado a la izquierda */
            justify-content: flex-start !important;
            /* Pegamos todo arriba para evitar huecos blancos */
            height: 100% !important;
        }

        .service-content h3 {
            font-size: 1.3rem !important;
            margin-bottom: 10px !important;
            text-align: left !important;
            /* CORREGIDO A LA IZQUIERDA - TABLET */
            width: 100% !important;
        }

        .service-content p {
            font-size: 0.88rem !important;
            margin-bottom: 20px !important;
            line-height: 1.5 !important;
            letter-spacing: 0px !important;
            /* De corrido */
            text-align: left !important;
            /* Lectura a la izquierda */
        }

        /* Centramos el último servicio (Canalización) que queda solo */
        #servicio-canalizacion {
            grid-column: 1 / -1 !important;
            max-width: 440px !important;
            margin-left: auto !important;
            margin-right: auto !important;
        }

        /* Separar botón del párrafo anterior y ALINEARLOS AL FONDO (Pedido Sole) */
        .service-buttons {
            margin-top: auto !important;
            /* EMPUJA EL BOTÓN HACIA ABAJO */
            padding-top: 25px !important;
            /* Respiro mínimo con el texto */
            width: 100% !important;
            display: flex !important;
            justify-content: center !important;
        }

        .btn-dark {
            font-size: 0.85rem !important;
            padding: 10px 20px !important;
        }

        .audio-player-premium {
            width: fit-content !important;
            min-width: 320px !important;
            /* Estirado solicitado */
            max-width: 65% !important;
            /* Un poco más largo para tablet */
            padding: 10px 22px !important;
            /* Más aire interno */
            margin-left: auto !important;
            margin-right: auto !important;
            margin-top: -15px !important;
        }

        .price-grid {
            margin-left: auto !important;
            margin-right: auto !important;
        }
    }
}

/* TÍTULOS DE SECCIÓN - Subrayado grueso estilo Mockup */
.section-title {
    text-align: center;
    margin-bottom: 70px;
}

.section-title span {
    font-family: var(--font-heading);
    font-size: 3.2rem;
    font-weight: 700;
    color: var(--accent-color);
    text-transform: uppercase;
    position: relative;
    padding-bottom: 20px;
}

.section-title span::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 5px;
    background: var(--accent-color);
    border-radius: 2px;
}

/* SECCIÓN SERVICIOS PREMIUM */
.services {
    padding: 140px 8%;
    background-color: var(--bg-color);
}

.service-row {
    display: flex;
    align-items: center;
    background: var(--white);
    padding: 40px;
    border-radius: 20px;
    box-shadow: var(--shadow-soft);
    justify-content: space-between;
    gap: 60px;
    margin-bottom: 80px;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    transition: var(--transition);
    scroll-margin-top: 120px;
}

.service-row:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

.service-img {
    width: 320px;
    height: 320px;
    flex-shrink: 0;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.service-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: var(--transition);
}

.service-img:hover img {
    transform: scale(1.05);
}

.service-content h3 {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--text-color);
}

.service-content p {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin-bottom: 40px;
    line-height: 1.8;
}

/* MODIFICACIÓN: SECCIÓN ESPECIAL TAROT (Cuadrícula 2x2) */
.service-row-column {
    background: var(--white);
    padding: 60px 45px;
    border-radius: 20px;
    box-shadow: var(--shadow-soft);
    margin-bottom: 80px;
    max-width: 1150px;
    margin-left: auto;
    margin-right: auto;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}

.service-content-full {
    text-align: center;
    max-width: 850px;
    margin: 0 auto 50px;
}

.service-content-full h3 {
    font-family: var(--font-heading);
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 25px;
    color: var(--text-color);
    text-transform: uppercase;
}

.service-content-full p {
    font-size: 1.2rem;
    color: var(--text-muted);
    line-height: 1.8;
}

.tarot-mini-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 35px;
    max-width: 1000px;
    margin: 0 auto;
}

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

    .service-row-column {
        padding: 40px 20px;
    }
}

.service-buttons {
    display: flex;
    gap: 20px;
}

/* BOTÓN BÁSICO (Para Servicios) */
.btn-primary {
    display: inline-block;
    padding: 12px 30px;
    background-color: var(--button-yellow);
    color: var(--text-color);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 40px;
    transition: all 0.3s ease;
    margin-top: auto;
}

.btn-primary:hover {
    background-color: var(--text-color);
    color: var(--white);
    transform: translateY(-3px);
}

/* BOTONES CON EFECTO WHATSAPP */
.btn-dark {
    background-color: var(--button-yellow);
    color: var(--text-color);
    padding: 16px 35px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 2px;
    border: 2px solid var(--button-yellow);
    transition: var(--transition);
    cursor: pointer;
    display: inline-block;
}

/* Aquí implementamos lo solicitado: Cambio a Negro con letras blancas al tocar */
.btn-dark:hover,
.btn-dark:active {
    background-color: var(--text-color);
    border-color: var(--text-color);
    color: var(--white);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.btn-yellow {
    background-color: var(--button-yellow);
    color: var(--text-color);
    padding: 16px 35px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 2px;
    border: none;
    transition: var(--transition);
    cursor: pointer;
    display: inline-block;
}

.btn-yellow:hover {
    background-color: var(--text-color);
    /* Negro */
    color: var(--white);
    /* Blanco */
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.quote-section {
    padding: 65px 8%;
    background: url('fondo-frase.png') no-repeat center center;
    background-size: cover;
    background-attachment: scroll;
    /* Ahora la imagen se mueve normalmente con la página */
    text-align: center;
    position: relative;
    overflow: hidden;
    scroll-margin-top: 100px;
}

/* Overlay suave para mejorar legibilidad si es necesario */
.quote-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    /* Un velo blanco muy sutil */
    z-index: 1;
}

.quote-text {
    position: relative;
    z-index: 2;
    max-width: 1000px;
    margin: 0 auto;
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.6rem;
    /* Un poco más grande al ser una fuente más estrecha */
    font-weight: 400;
    font-style: italic;
    color: var(--text-color);
    text-align: center;
    line-height: 1.4;
    letter-spacing: 0.2px;
}

.quote-author {
    position: relative;
    z-index: 2;
    margin-top: 50px;
    font-family: var(--font-main);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-color);
    /* Color oscuro para legibilidad */
    text-transform: uppercase;
    letter-spacing: 6px;
    display: block;
}

/* Línea decorativa sobre el autor */
.quote-author::before {
    content: '';
    display: block;
    width: 40px;
    height: 2px;
    background: var(--accent-color);
    margin: 0 auto 20px;
}

/* SOBRE MI - DISEÑO EDITORIAL */
.about {
    padding: 140px 8%;
    background-color: var(--bg-color);
}

.about-grid {
    display: grid;
    grid-template-columns: 1.2fr 1.4fr;
    /* Agrandada la columna de la foto */
    gap: 80px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: flex-start;
}

.about-img-container {
    position: sticky;
    top: 100px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    border: 1px solid rgba(0, 0, 0, 0.05);
    aspect-ratio: 1 / 1;
    /* Forzamos formato cuadrado */
}

.about-img-container img {
    width: 100%;
    height: 100%;
    /* Ocupa todo el contenedor cuadrado */
    object-fit: cover;
    /* Centra y recorta si es necesario */
    display: block;
    transition: var(--transition);
}

.about-text-container {
    font-size: 1.15rem;
    line-height: 1.9;
    color: var(--text-muted);
}

.about-text-container p {
    margin-bottom: 25px;
}

@media (max-width: 1024px) {
    .about-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .about-img-container {
        position: static;
        max-width: 600px;
        margin: 0 auto;
    }
}

/* ESPECÍFICO TABLET: Tamaños y separaciones de secciones */
@media (min-width: 601px) and (max-width: 1024px) {
    .about {
        padding: 50px 8% 0 !important;
        /* Subimos la sección mas cerca */
    }

    .about .section-title {
        margin-bottom: 70px !important;
        /* Corregido para tablet */
    }

    .about-img-container {
        max-width: 450px !important;
        aspect-ratio: 1 / 1 !important;
    }

    .about-img-container img {
        height: 100% !important;
        object-fit: cover !important;
    }

    .blog {
        padding: 80px 8% 40px !important;
        /* Subimos el aire arriba para que el título baje */
    }
}

/* SECCIÓN BLOG EDITORIAL */
.blog {
    padding: 120px 8%;
    background-color: var(--white);
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 35px;
    max-width: 1200px;
    margin: 0 auto;
}

.blog-card {
    background: var(--white);
    border-radius: 20px;
    overflow: hidden;
    transition: var(--transition);
    border: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
}

.blog-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.blog-card-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.blog-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.blog-card:hover .blog-card-img img {
    transform: scale(1.05);
}

.img-placeholder {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: linear-gradient(45deg, #E6E0CB, #ffffff);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(60, 62, 66, 0.3);
    font-weight: 600;
}

.card-body {
    padding: 5px 25px 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.blog-card h3 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 12px;
    line-height: 1.4;
    text-transform: none;
}

.blog-card p {
    font-size: 1rem;
    color: var(--text-muted);
    margin-bottom: 25px;
    line-height: 1.6;
}

/* PÁGINAS DE DETALLES DE SERVICIO - UNIFICADAS */
.service-page {
    max-width: 900px;
    margin: 140px auto 80px;
    padding: 60px 80px;
    background-color: var(--white);
    border-radius: 20px;
    box-shadow: var(--shadow-soft);
    position: relative;
}

/* Reducir espacio superior específico para biblioteca de nombres */
.library-main {
    margin-top: 80px !important;
    padding-top: 20px !important;
    background: transparent !important;
    box-shadow: none !important;
    padding-left: 130px !important;
    padding-right: 130px !important;
}

.service-page h1 {
    font-family: var(--font-heading);
    color: var(--accent-color) !important;
    /* CAFÉ GLOBAL - SOLO ESTO */
    margin-top: 0 !important;
    margin-bottom: 35px;
    font-size: 3rem;
    text-transform: uppercase;
    font-weight: 700;
    position: relative;
    display: block;
    padding-bottom: 12px;
    text-align: left;
    /* ÚNICO A LA IZQUIERDA */
}

.service-page h1::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 6px;
    background: var(--accent-color);
}

.service-page h2 {
    font-family: var(--font-heading);
    color: var(--accent-color);
    margin: 60px 0 25px;
    font-size: 1.8rem;
    font-weight: 700;
}

.service-page h3 {
    font-family: var(--font-heading);
    color: var(--text-color);
    margin: 40px 0 20px;
    font-size: 1.8rem;
    font-weight: 700;
}

.service-page p {
    margin-bottom: 30px;
    font-size: 1.2rem;
    color: var(--text-muted);
    line-height: 2;
    text-align: left;
}

/* PÁGINA DE DETALLE DE BLOG (ARTÍCULO) */
.blog-post {
    max-width: 900px;
    margin: 160px auto 80px;
    padding: 80px;
    background-color: var(--white);
    border-radius: 20px;
    box-shadow: var(--shadow-soft);
    position: relative;
}

.blog-post h1 {
    font-family: var(--font-heading);
    color: var(--text-color);
    margin-top: 30px;
    margin-bottom: 20px;
    font-size: 2.2rem;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1.2;
}

/* Unified layout for blog main container */
.blog-main {
    padding: 140px 5% 80px;
    max-width: 1200px;
    margin: 0 auto;
    min-height: 80vh;
}

.blog-date {
    color: #888;
    font-size: 0.9rem;
    margin-bottom: 40px;
    display: block;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
}

.blog-post h2 {
    font-family: var(--font-heading);
    color: var(--accent-color);
    margin: 60px 0 25px;
    font-size: 1.8rem;
    font-weight: 700;
    text-transform: uppercase;
}

.blog-post h3 {
    font-family: var(--font-heading);
    color: var(--accent-color);
    margin: 40px 0 20px;
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
}

.blog-post p {
    margin-bottom: 30px;
    font-size: 1.2rem;
    color: var(--text-muted);
    line-height: 2;
    text-align: justify;
}

.blog-post-img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    margin-bottom: 40px;
    box-shadow: var(--shadow-soft);
    display: block;
}

/* REDISEÑO DEL BOTÓN "VOLVER" */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    margin-top: 40px !important;
    margin-bottom: 20px !important;
    padding: 12px 25px;
    background-color: var(--accent-color);
    border-radius: 50px;
    color: var(--white) !important;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1.5px;
    transition: var(--transition);
    border: none;
    box-shadow: 0 5px 15px rgba(209, 172, 117, 0.3);
}

.back-link:hover {
    background-color: var(--text-color);
    color: var(--white) !important;
    transform: translateX(-8px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.btn-inline-whatsapp {
    display: inline-block;
    background-color: var(--accent-color);
    color: var(--text-color);
    padding: 12px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
    margin: 20px 0;
    transition: var(--transition);
    border: none;
    cursor: pointer;
}

.btn-inline-whatsapp:hover {
    transform: translateY(-3px);
    background-color: var(--text-color);
    color: var(--white);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.list-styles {
    font-size: 1.15rem;
    color: var(--text-muted);
    line-height: 1.9;
    padding-left: 40px;
    margin-bottom: 30px;
}

.list-styles li {
    margin-bottom: 15px;
}

.list-styles li::marker {
    color: var(--accent-color);
    font-size: 1.4rem;
}

.btn-readmore {
    font-family: var(--font-main);
    font-size: 0.85rem;
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: var(--transition);
}

.btn-readmore:hover {
    color: var(--text-color);
}

.social-links {
    margin: 30px 0;
    display: flex;
    justify-content: center;
    gap: 30px;
    padding: 0;
}

.social-links a {
    color: var(--bg-color);
    text-decoration: none;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
}

.social-links a:hover {
    color: var(--accent-color);
    transform: translateY(-5px);
    opacity: 1;
}

.social-links svg {
    width: 28px;
    height: 28px;
    stroke-width: 1.5px;
}

.btn-disabled {
    display: inline-block;
    background-color: #ccc;
    color: #888;
    padding: 12px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
    cursor: not-allowed;
    pointer-events: none;
}

/* FOOTER REFINADO */
footer,
.site-footer {
    background-color: #3C3E42;
    color: var(--bg-color);
    text-align: center;
    padding: 60px 8% 40px;
}

.copyright {
    color: var(--white) !important;
    opacity: 0.6;
    font-size: 0.8rem;
    margin-top: 40px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.footer-subtitle {
    font-family: var(--font-main);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 4px;
    color: var(--white);
    opacity: 0.8;
    margin-bottom: 5px;
    text-transform: uppercase;
    display: block;
}

.btn-whatsapp-footer {
    display: inline-block;
    background-color: var(--bg-color);
    color: var(--text-color);
    padding: 20px 50px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    transition: var(--transition);
}

.btn-whatsapp-footer:hover {
    background-color: var(--text-color);
    color: var(--white);
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

/* COMPACT FOOTER (MOBILE - Sincronizado para todo el sitio) */
@media (max-width: 600px) {
    .site-footer {
        padding: 20px 8% 15px !important;
    }

    .footer-subtitle {
        margin-bottom: 0 !important;
        font-size: 0.75rem !important;
        letter-spacing: 2px !important;
    }

    .site-footer div {
        margin: 15px 0 !important;
    }

    .btn-whatsapp-footer {
        padding: 10px 30px !important;
        font-size: 0.80rem !important;
        height: auto !important;
        width: fit-content !important;
        min-width: 0 !important;
        display: inline-block !important;
    }

    .social-links {
        margin: 15px 0 !important;
        gap: 20px !important;
    }

    .copyright {
        margin-top: 15px !important;
        font-size: 0.65rem !important;
    }
}

@media (max-width: 900px) {
    .service-row {
        flex-direction: column;
        padding: 30px;
        gap: 30px;
    }

    .service-img {
        width: 100%;
        height: 300px;
    }

    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .navbar {
        padding: 15px 5%;
    }

    .navbar nav ul {
        gap: 15px;
    }

    .section-title span {
        font-size: 2.22rem;
    }

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

    .hero-title {
        font-size: 12vw;
    }
}

/* SELLO ÉTICO TAROT */
.ethical-seal-container {
    margin-top: 80px;
}

.ethical-seal {
    max-width: 350px;
    height: auto;
    display: block;
    margin: 0 auto;
    mix-blend-mode: multiply;
    /* Elimina automáticamente el fondo blanco */
    filter: contrast(1.05);
    /* Un toque de nitidez extra */
    cursor: default;
}

/* Dropdown Styles */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: rgba(60, 62, 66, 0.98);
    /* Color igual a la navbar */
    min-width: 260px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    top: 100%;
    left: 0;
    border-top: 2px solid var(--accent-color);
    padding: 10px 0;
}

.dropdown-content a {
    color: #ffffff !important;
    padding: 12px 20px;
    text-decoration: none;
    display: block;
    font-size: 0.8rem;
    text-align: left;
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

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

.navbar nav .dropdown-content a:hover,
.navbar-interna nav .dropdown-content a:hover {
    background-color: var(--accent-color) !important;
    color: var(--white) !important;
    padding-left: 25px;
}

.dropdown:hover .dropdown-content {
    display: block;
}

/* Responsive adjustment for mobile */
@media (max-width: 768px) {
    .dropdown-content {
        position: static;
        display: none;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.2);
        box-shadow: none;
    }

    .dropdown:hover .dropdown-content {
        display: block;
    }
}

/* Biblioteca de Nombres Filters */
.filter-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.filter-btn {
    background: white;
    border: 3px solid var(--accent-color);
    color: var(--text-color);
    padding: 12px 28px;
    border-radius: 50px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.filter-btn:hover,
.filter-btn.active {
    background-color: var(--accent-color);
    color: white;
    box-shadow: 0 4px 10px rgba(190, 152, 130, 0.3);
}

.name-item {
    background: white;
    padding: 25px;
    border-radius: 20px;
    box-shadow: var(--shadow-soft);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(190, 152, 130, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: pointer;
    min-height: 120px;
}

.name-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    border-color: var(--accent-color);
}

.name-item strong {
    display: block;
    color: var(--accent-color);
    font-family: var(--font-heading);
    font-size: 1.5rem;
    margin-bottom: 8px;
    font-weight: 700;
}

.name-item span {
    font-size: 0.85rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.name-item span {
    font-size: 0.85rem;
    color: #777;
    display: block;
    margin-top: 5px;
}

/* SECCIÓN DE VIDEOS (CANALIZACIÓN) */
.video-section {
    margin: 80px 0;
    text-align: center;
}

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

.video-card {
    background: var(--white);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: var(--transition);
}

.video-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.iframe-container {
    position: relative;
    padding-bottom: 56.25%;
    /* Aspect Ratio 16:9 */
    height: 0;
    overflow: hidden;
    border-radius: 20px 20px 0 0;
}

.iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.video-info {
    padding: 10px 25px 30px;
    background: #fff;
    text-align: left;
}

.video-info h4 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--accent-color);
    margin-bottom: 12px;
    line-height: 1.4;
    text-transform: none;
}

.video-info p {
    font-size: 1rem;
    color: var(--text-muted);
    margin-bottom: 0;
    line-height: 1.6;
}

/* --- NUEVOS ESTILOS PARA FILAS INDIVIDUALES Y AUDIO --- */
.service-item-premium {
    display: grid;
    grid-template-columns: 280px 1fr;
    /* Image fixed at 280px (square), content takes rest */
    gap: 30px 40px;
    /* Narrower gap */
    background: var(--white);
    padding: 35px 50px;
    /* Reduced vertical padding (35px) */
    border-radius: 20px;
    box-shadow: var(--shadow-soft);
    margin-bottom: 80px;
    align-items: start;
    /* Align to top instead of stretch */
    text-align: left;
    max-width: 100%;
}

.service-item-premium h3 {
    grid-column: 1 / -1;
    /* SPAN BOTH COLUMNS */
    margin: 0 0 20px 0;
    /* Minimized margins */
    padding: 0;
    font-size: 1.8rem;
    color: #000;
    /* NEGRO PURO */
    text-align: left;
    /* IZQUIERDA */
}

.service-media {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.service-item-content {
    display: flex;
    flex-direction: column;
    gap: 25px;
    align-self: center;
    /* V-CENTER: Perfectly centers prices when there is no audio */
    width: 100%;
}

.service-item-premium:hover {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
}

.service-item-premium .service-img-container {
    width: 280px;
    height: 280px;
    /* Forced Square */
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.service-item-premium .service-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Back to cover but without min-height it will be shorter */
    display: block;
    transition: var(--transition);
}

.service-item-premium h3 {
    grid-column: 1 / -1;
    /* SPAN ALL COLUMNS */
    text-align: center;
    /* CENTRADO ORIGINAL */
    font-family: var(--font-heading);
    font-size: 2.5rem;
    color: #3C3E42;
    /* NEGRO GRAFITO */
    margin-bottom: 40px;
    text-transform: uppercase;
    line-height: 1.1;
    letter-spacing: -1px;
}

/* GRILLA DE PRECIOS MULTIMONEDA */
.price-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3 prices in a row as requested */
    gap: 12px;
    width: 100%;
}

.price-item {
    background: #fffcf8;
    border: 3px solid #be9882;
    padding: 12px 10px;
    border-radius: 12px;
    text-align: center;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    color: var(--text-color);
    min-width: 100px;
}

.price-item:hover {
    background: #fffcf8;
    border-color: #be9882;
}

.currency-label {
    display: block;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--text-color);
    opacity: 0.8;
    font-weight: 700;
}

.price-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 900;
    color: #be9882;
    white-space: nowrap;
    /* CRITICAL: keep "U$S 95" in one line */
}

.service-description-long {
    grid-column: 1 / -1;
    /* Ocupa todo el ancho */
    font-size: 1.15rem;
    line-height: 1.9;
    color: var(--text-muted);
    margin-top: 20px;
    margin-bottom: 10px;
}

.service-item-premium .btn-dark {
    grid-column: 1 / -1;
    /* Ocupa todo el ancho */
    justify-self: center;
    /* Centrado horizontalmente */
    margin-top: 10px;
    min-width: 300px;
    text-align: center;
}

/* REPRODUCTOR DE AUDIO - ELEGANTE */
.audio-player-premium {
    background: #fffcf8;
    padding: 15px 25px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 15px;
    border: 3px solid #be9882;
    margin-top: 10px;
    /* Reduced margin to keep it tight below prices */
    width: 100%;
    /* Ensure it spans the content column */
}

.play-pause-btn {
    background: var(--accent-color);
    /* Accent color button */
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    flex-shrink: 0;
}

.play-pause-btn:hover {
    background: black;
    transform: scale(1.05);
}

.audio-progress-container {
    flex-grow: 1;
}

.audio-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-color);
    margin-bottom: 8px;
}

.progress-track {
    height: 4px;
    background: rgba(190, 152, 130, 0.2);
    border-radius: 2px;
    position: relative;
    cursor: pointer;
}

.progress-fill {
    height: 100%;
    background: var(--accent-color);
    border-radius: 2px;
    width: 0%;
    transition: width 0.1s linear;
}

@media (max-width: 1024px) {
    .service-item-premium {
        grid-template-columns: 1fr;
        padding: 40px 30px;
        gap: 30px;
    }

    .service-item-premium .service-img-container {
        position: static;
        max-width: 400px;
        margin: 0 auto;
        aspect-ratio: 1/1;
    }

    .service-item-premium h3 {
        font-size: 2rem !important;
        text-align: center !important;
        color: #3C3E42 !important;
    }

    .service-item-premium .btn-dark {
        margin-top: -5px !important;
        /* SUBIMOS EL BOTÓN */
        margin-bottom: 40px !important;
        /* AIRE DESPUÉS DEL BOTÓN */
        min-width: 300px !important;
    }
}

/* ==========================================================================   MODAL DE BÚSQUEDA SIN RESULTADOS (POP-UPS)   ========================================================================== */
.search-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(60, 62, 66, 0.85);
    /* Slate gray dark overlay */
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 21000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.search-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.search-modal-content {
    background: #F8F1C3;
    /* Matching the site bg */
    width: 90%;
    max-width: 500px;
    padding: 60px 40px;
    border-radius: 30px;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.4);
    position: relative;
    text-align: center;
    transform: translateY(20px) scale(0.95);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(190, 152, 130, 0.3);
}

.search-modal-overlay.active .search-modal-content {
    transform: translateY(0) scale(1);
}

.search-modal-close {
    position: absolute;
    top: 25px;
    right: 25px;
    background: transparent;
    border: none;
    font-size: 2.2rem;
    color: var(--text-color);
    cursor: pointer;
    line-height: 1;
    opacity: 0.6;
    transition: 0.3s;
}

.search-modal-close:hover {
    opacity: 1;
    transform: rotate(90deg);
}

.search-modal-icon {
    width: 80px;
    height: 80px;
    background: transparent;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 20px;
    color: #be9882;
    border: 1px solid rgba(190, 152, 130, 0.4);
}

.modal-accent-line {
    width: 40px;
    height: 2px;
    background: #be9882;
    margin: 0 auto 25px;
    opacity: 0.6;
}

.search-modal-content h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2.2rem;
    color: var(--text-color);
    margin-bottom: 20px;
    letter-spacing: -1px;
    text-transform: capitalize;
    font-weight: 400;
    font-style: italic;
}

.search-modal-content p {
    font-size: 1.1rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 15px;
}

.modal-secondary-text {
    font-size: 0.95rem !important;
    opacity: 0.8;
    margin-top: 20px;
    margin-bottom: 40px !important;
}

.search-modal-buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
}

.btn-outline {
    background: transparent;
    border: 2px solid #be9882;
    color: #be9882;
    padding: 15px 30px;
    border-radius: 50px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
    cursor: pointer;
    transition: 0.3s;
    width: 100%;
    max-width: 320px;
}

.btn-outline:hover {
    background: #be9882;
    color: #FFF;
}

.btn-whatsapp-modal {
    background: #3C3E42;
    color: #FFF;
    padding: 16px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
    width: 100%;
    max-width: 320px;
    transition: 0.3s;
}

/* ==========================================================================   MÁXIMO REFUERZO DE DISEÑO - VISTA TABLET FINAL   ========================================================================== */
@media (max-width: 1024px) {

    /* Título Maestro de Arriba - Solo Izquierda y CAFÉ (Prueba) */
    .service-page h1 {
        text-align: left !important;
        color: var(--accent-color) !important;
        /* PRUEBA DE COLOR CAFÉ */
        position: relative;
        padding-bottom: 25px;
        font-size: 2.2rem !important;
        display: block !important;
    }

    .service-page h1::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100px;
        height: 5px;
        background: var(--accent-color);
        border-radius: 2px;
    }

    /* Títulos de Secciones Principales (Sobre Mí, Blogs, Servicios) - CAFÉ (Pedido Sole) */
    .section-title span {
        color: var(--accent-color) !important;
        text-align: center !important;
    }

    /* Galería de Nombres - ADN 30 DE MARZO PARTE 5 (Pedido Sole) */
    #galeria-nombres h2,
    .banner-content h2 {
        color: #FFF !important;
        font-size: 2.5rem !important;
        letter-spacing: 5px !important;
        margin-bottom: 40px !important;
        text-align: center !important;
        font-weight: 700 !important;
    }

    /* Unificación de Texto - ARTÍCULOS (Pedido Sole) - BLINDAJE MÁXIMO */
    .blog-card .card-body p,
    .blog-card p {
        font-size: 0.88rem !important;
        /* IGUAL QUE LOS SERVICIOS */
        line-height: 1.6 !important;
    }

    /* Separación de Párrafos en Artículos (Senderos y otros) - Pedido Sole */
    .blog-post p {
        margin-bottom: 32px !important;
        /* MÁS EQUILIBRADO Y ELEGANTE */
    }

    /* Unificación de Texto dentro de Artículos (Pedido Sole) - MÁS COMPACTO */
    .blog-post p,
    .list-styles li,
    .list-styles {
        font-size: 1rem !important;
        /* MÁS PEQUEÑO Y REFINADO */
        line-height: 1.8 !important;
    }

    /* Dar aire a la frase final de los artículos (Pedido Sole) */
    .blog-post p[style*="font-weight: bold"],
    .blog-post p[style*="font-weight:bold"] {
        margin-top: 70px !important;
        /* MÁS AIRE PARA QUE RESPIRE */
    }

    /* Títulos secundarios - Centrados y NEGRO GRAFITO */
    .service-item-premium h3,
    .service-content h3 {
        text-align: center !important;
        color: #3C3E42 !important;
        /* NEGRO GRAFITO MATE */
        font-size: 1.8rem !important;
        margin-bottom: 30px !important;
    }

    /* Blindamos el Título Maestro de Arriba para que siga CAFÉ */
    .service-page h1 {
        color: var(--accent-color) !important;
        text-align: left !important;
    }

    /* DESPLAZAMIENTO HACIA ARRIBA - CARTA NATAL ADULTO (Pedido Sole) */
    .service-item-premium:first-of-type .service-img-container img {
        object-fit: cover !important;
        /* Llenar cuadro */
        object-position: center 82% !important;
        /* REAJUSTADO UN PELÍN MÁS ABAJO */
        background-color: transparent !important;
        padding: 0 !important;
        /* Sin bordes */
    }

    /* DESPLAZAMIENTO HACIA ARRIBA - TRÁNSITO ENERGÉTICO (Pedido Sole) */
    .service-item-premium:nth-of-type(2) .service-img-container img {
        object-fit: cover !important;
        object-position: center 92% !important;
        /* SUBE LA IMAGEN UN POCO MÁS */
        background-color: transparent !important;
        padding: 0 !important;
    }

    /* DESPLAZAMIENTO HACIA ABAJO - COMBO NUMEROLÓGICO (Pedido Sole) */
    .service-item-premium:nth-of-type(3) .service-img-container img {
        object-fit: cover !important;
        object-position: center 16% !important;
        /* REAJUSTADO - UN PELÍN HACIA ABAJO */
        background-color: transparent !important;
        padding: 0 !important;
    }

    /* DESPLAZAMIENTO HACIA ARRIBA - PACK DOBLE (Pedido Sole) */
    .service-item-premium:nth-of-type(4) .service-img-container img {
        object-fit: cover !important;
        object-position: center 95% !important;
        /* SUBE LA IMAGEN UN POCO MÁS */
        background-color: transparent !important;
        padding: 0 !important;
    }

    /* DESPLAZAMIENTO HACIA ARRIBA - PACK MATERNAL (Pedido Sole) */
    .service-item-premium:nth-of-type(5) .service-img-container img {
        object-fit: cover !important;
        object-position: center 95% !important;
        /* SUBE LA IMAGEN UN POCO MÁS */
        background-color: transparent !important;
        padding: 0 !important;
    }
}

/* ==========================================================================   REFUERZO FINAL - VISTA PC (Zoom 85% & Armonía Superior)   ========================================================================== */
@media (min-width: 1025px) {

    /* ESCALADO MAESTRO 85% (Efecto Zoom Global PC) - A pedido Sole */
    body {
        zoom: 0.85;
        -moz-transform: scale(0.85);
        -moz-transform-origin: top center;
    }

    /* UNIFICACIÓN DE ANCHOS Y MÁRGENES (Base PC) */
    .services-container,
    .service-page,
    .name-detail-card {
        max-width: 900px !important;
        margin: 110px auto 80px !important;
        padding: 60px 80px !important;
    }

    /* COMPACTACIÓN EXCLUSIVA - BLOG POST PC (Pedido Sole) */
    .blog-post {
        max-width: 900px !important;
        margin: -15px auto 80px !important;
        /* Elevación extrema bajo demanda (PC) */
        padding: 60px 80px 60px !important;
        /* Manteniendo elegancia interna */
    }

    /* AMPLIACIÓN ESPECÍFICA - BLOG MAIN PC */
    .blog-main {
        max-width: 1200px !important;
        margin: 140px auto 80px !important;
        padding: 60px 5% !important;
    }

    /* AMPLIACIÓN ESPECÍFICA - SOBRE MÍ PC (Mantiene Proporción Ampliada) */
    .about-grid {
        max-width: 1100px !important;
        margin: 40px auto 80px !important;
        padding: 40px 60px !important;
    }

    .library-main #nameSearchPage {
        font-size: 1.0rem !important;
        padding: 12px 20px 12px 50px !important;
        max-width: 450px !important;
        margin: 0 auto !important;
    }

    .library-main {
        max-width: 900px !important;
        margin: 110px auto 80px !important;
        /* Espacio beige arriba igual que servicios */
        padding: 0 !important;
    }

    /* UNIFICACIÓN GLOBAL DE DESCRIPCIONES (Solo PC) - Pedido Sole */
    .about,
    .about-text-container p,
    .service-content p,
    .service-description-long p,
    .blog-card p,
    .card-body p,
    .service-page p,
    .blog-post p,
    .video-section p,
    .video-info p,
    .list-styles,
    .list-styles li,
    .intro,
    .intro p,
    .gallery-intro-text,
    .carta-natal-page .service-page p,
    .carta-natal-page .service-content p,
    .name-detail-card p,
    #detailMeaning,
    .detail-meaning {
        font-size: 0.95rem !important;
        color: #333 !important;
        /* Negro Grafito en PC */
        line-height: 1.8 !important;
    }

    .discount-text {
        font-size: 1.15rem !important;
    }

    .blog-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        /* Forzamos 3 artículos por fila en PC */
    }

    .footer-subtitle {
        margin-bottom: 30px !important;
        /* Equilibrio de separación en PC */
    }

    .search-library-title {
        color: #be9882 !important;
        /* Color Café vibrante en PC */
    }

    .blog-card h3 {
        margin-top: 0 !important;
        /* Achicamos espacio arriba del título */
    }

    .card-body {
        padding-top: 15px !important;
        /* Compactamos el aire interno de la tarjeta */
    }
}

/* COMPACTAR SERVICIOS (SOLO CELULAR) */
@media (max-width: 600px) {

    #premium-carta-natal-adulto,
    #combo-adulto,
    #combo-pag,
    #combo-infantil,
    #transito-pag,
    #premium-transito-natal,
    #pack-doble,
    #pack-maternal,
    #natal-infantil,
    #pack-maternal-inf {
        padding: 15px 12px !important;
        gap: 12px !important;
    }

    #premium-carta-natal-adulto h3,
    #combo-adulto h3,
    #combo-pag h3,
    #combo-infantil h3,
    #transito-pag h3,
    #premium-transito-natal h3,
    #pack-doble h3,
    #pack-maternal h3,
    #natal-infantil h3,
    #pack-maternal-inf h3 {
        margin-bottom: 12px !important;
        font-size: 1.55rem !important;
    }

    #premium-carta-natal-adulto .service-img-container,
    #combo-adulto .service-img-container,
    #combo-pag .service-img-container,
    #combo-infantil .service-img-container,
    #transito-pag .service-img-container,
    #premium-transito-natal .service-img-container,
    #pack-doble .service-img-container,
    #pack-maternal .service-img-container,
    #natal-infantil .service-img-container,
    #pack-maternal-inf .service-img-container {
        max-width: 250px !important;
        margin-bottom: 25px !important;
    }

    #premium-carta-natal-adulto .price-grid,
    #combo-adulto .price-grid,
    #combo-pag .price-grid,
    #combo-infantil .price-grid,
    #transito-pag .price-grid,
    #premium-transito-natal .price-grid,
    #pack-doble .price-grid,
    #pack-maternal .price-grid,
    #natal-infantil .price-grid,
    #pack-maternal-inf .price-grid {
        gap: 6px !important;
    }

    #premium-carta-natal-adulto .price-item,
    #combo-adulto .price-item,
    #combo-pag .price-item,
    #combo-infantil .price-item,
    #transito-pag .price-item,
    #premium-transito-natal .price-item,
    #pack-doble .price-item,
    #pack-maternal .price-item,
    #natal-infantil .price-item,
    #pack-maternal-inf .price-item {
        padding: 2px !important;
        min-height: auto !important;
    }

    #premium-carta-natal-adulto .currency-label,
    #combo-adulto .currency-label,
    #combo-pag .currency-label,
    #combo-infantil .currency-label,
    #transito-pag .currency-label,
    #premium-transito-natal .currency-label,
    #pack-doble .currency-label,
    #pack-maternal .currency-label,
    #natal-infantil .currency-label,
    #pack-maternal-inf .currency-label {
        font-size: 0.5rem !important;
        margin-bottom: 1px !important;
        line-height: 1 !important;
    }

    #premium-carta-natal-adulto .price-value,
    #combo-adulto .price-value,
    #combo-pag .price-value,
    #combo-infantil .price-value,
    #transito-pag .price-value,
    #premium-transito-natal .price-value,
    #pack-doble .price-value,
    #pack-maternal .price-value,
    #natal-infantil .price-value,
    #pack-maternal-inf .price-value {
        font-size: 1.15rem !important;
    }

    #premium-carta-natal-adulto .audio-player-premium,
    #combo-adulto .audio-player-premium,
    #combo-pag .audio-player-premium,
    #combo-infantil .audio-player-premium,
    #transito-pag .audio-player-premium,
    #premium-transito-natal .audio-player-premium,
    #pack-doble .audio-player-premium,
    #pack-maternal .audio-player-premium,
    #natal-infantil .audio-player-premium,
    #pack-maternal-inf .audio-player-premium {
        padding: 10px 15px !important;
    }

    /* ACHICAR TÃÍTULOS DE SERVICIOS PARA QUE ENTREN EN UNA LÃÍNEA */
    .service-page h1 {
        font-size: 1.65rem !important;
        white-space: nowrap !important;
    }

    /* AJUSTE ESPECIAL PARA TÃÍTULO LARGO EN BIBLIOTECA */
    .library-main .service-page h1 {
        font-size: 1.35rem !important;
    }

    /* COMPACTAR Y SINCRONIZAR SECCIONES DE BLOG (INICIO Y GALERÃ DA) */
    .blog,
    #blog,
    .blog-main {
        padding: 40px 8% !important;
        margin-top: 70px !important;
        margin-bottom: 0 !important;
        background-color: var(--bg-color) !important;
    }

    /* FONDO BLANCO SOBRE MI EN CELULAR */
    .about {
        background-color: #FFFFFF !important;
    }

    .blog-grid {
        gap: 20px !important;
        margin-top: 15px !important;
        width: 100% !important;
        display: block !important;
    }

    .blog-card {
        width: 70% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 25px !important;
        border-radius: 12px !important;
    }

    .blog-card-img {
        aspect-ratio: 1 / 1 !important;
    }

    .card-body {
        padding: 12px 15px !important;
    }

    .blog-card h3 {
        font-size: 0.95rem !important;
        margin-bottom: 5px !important;
    }

    /* REFUERZO MÁXIMO: DESCRIPCIONES DE BLOG EN CELULAR */
    .blog-card .card-body p,
    .blog-card p {
        font-size: 11.5px !important;
        color: #666 !important;
    }

    .blog-post p,
    .article-body p {
        font-size: 0.75rem !important;
        line-height: 1.5 !important;
        margin-bottom: 25px !important;
        color: var(--text-color) !important;
        text-align: left !important;
    }

    .blog-post {
        margin-top: 15px !important;
        /* Margen beige extra arriba del cuadro blanco */
        padding: 40px 25px !important;
        border-radius: 20px !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
    }

    /* TÃ TULOS DEL ARTÃ CULO (ADENTRO - SOLO CELU) */
    .blog-post h1 {
        font-size: 1.35rem !important;
        margin-bottom: 20px !important;
        line-height: 1.2 !important;
        text-align: center !important;
    }

    .blog-post h2 {
        font-size: 1.12rem !important;
        margin-top: 25px !important;
        margin-bottom: 12px !important;
        text-align: center !important;
    }

    .blog-post h3 {
        font-size: 1.02rem !important;
        margin-top: 20px !important;
        margin-bottom: 10px !important;
        text-align: center !important;
    }
}

/* ==========================================================================
   FIX FINAL: SOLO PARA CELULAR (RESETEO DE MÁRGENES Y CENTRADO PERFECTO)
   ========================================================================== */
@media (max-width: 600px) {

    /* Evitar que nada se escape por los lados */
    html,
    body {
        overflow-x: hidden !important;
        width: 100% !important;
        position: relative !important;
    }

    /* Centrado total del contenedor principal */
    .service-page {
        padding: 40px 5% 30px 5% !important;
        margin-top: 80px !important;
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .service-page h1 {
        text-align: left !important;
        align-self: flex-start !important;
        /* Mueve el título a la izquierda del bloque centrado */
        font-size: 1.65rem !important;
        white-space: normal !important;
        /* Permite que el título baje de línea si es largo */
        width: 100% !important;
        margin-bottom: 25px !important;
    }

    .service-page h1::after {
        left: 0 !important;
        transform: none !important;
        width: 60px !important;
    }

    .service-item-premium {
        padding: 25px 5% !important;
        margin: 0 auto 40px auto !important;
        /* Centrado con margen auto */
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        /* HIJO AL CENTRO */
        text-align: center !important;
        background-color: #FFFFFF !important;
        border-radius: 20px !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
        gap: 4px !important;
        /* SUBIMOS TODO - COMPACTADO AL EXTREMO */
    }

    .service-item-premium h3 {
        font-size: 1.45rem !important;
        margin-bottom: 20px !important;
        text-align: center !important;
        width: 100% !important;
        color: var(--text-color) !important;
        display: block !important;
    }

    /* Centrar párrafos directos (ofertas, avisos) en móvil */
    .service-item-premium>p {
        text-align: center !important;
        width: 100% !important;
        margin: 10px 0 !important;
    }

    .service-img-container {
        max-width: 220px !important;
        height: auto !important;
        margin: 0 auto 5px auto !important;
        /* IMAGEN CENTRADA Y PEGADA A PRECIOS */
        aspect-ratio: 1/1;
        width: 100% !important;
    }

    .service-img-container img {
        height: 100% !important;
        width: 100% !important;
        object-fit: cover !important;
        border-radius: 12px !important;
    }

    /* AJUSTE IMAGEN CARTA NATAL INFANTIL (BAJARLA INTERNAMENTE) */
    #natal-infantil .service-img-container img {
        object-position: center 8% !important; /* Desplaza el contenido hacia abajo */
        transform: scale(1.1) !important; /* Zoom para compensar el desplazamiento */
    }

    /* AJUSTE IMAGEN PACK MATERNAL (SUBIRLA INTERNAMENTE - PEDIDO SOLE) */
    #pack-maternal-inf .service-img-container img {
        object-position: center 98% !important; /* Desplaza el contenido hacia arriba */
        transform: scale(1.1) !important; /* Zoom para compensar el desplazamiento */
    }

    /* AJUSTE IMAGEN COMBO NUMEROLÓGICO (BAJARLA INTERNAMENTE - PEDIDO SOLE) */
    #combo-pag .service-img-container img {
        object-position: center 8% !important; /* Desplaza el contenido hacia abajo */
        transform: scale(1.1) !important; /* Zoom para compensar el desplazamiento */
    }

    /* PRECIOS: MÁS RECTANGULARES, PEQUEÑOS Y CENTRADOS */
    .price-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 320px !important;
        /* Limitamos ancho para que no se estire raro */
        margin: 2px auto 5px auto !important;
        /* SUBIMOS LOS PRECIOS EXTREMADAMENTE */
    }

    .price-item {
        padding: 4px 2px !important;
        /* Altura mínima para que sea rectangular horizontal */
        min-width: 0 !important;
        min-height: auto !important;
        border-width: 2px !important;
        border-radius: 8px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        /* CONTENIDO AL CENTRO */
    }

    .currency-label {
        font-size: 0.5rem !important;
        margin-bottom: 1px !important;
        line-height: 1 !important;
    }

    .price-value {
        font-size: 0.95rem !important;
        font-weight: 800 !important;
        line-height: 1.1 !important;
    }

    /* REPRODUCTOR DE AUDIO: CENTRADO Y COMPACTO */
    .audio-player-premium {
        padding: 10px 15px !important;
        margin: 2px auto 12px auto !important;
        /* SUBIMOS EL REPRODUCTOR TAMBIÉN */
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: center !important;
        width: 90% !important;
        max-width: 320px !important;
        gap: 12px !important;
    }

    .play-pause-btn {
        width: 36px !important;
        height: 36px !important;
        flex-shrink: 0 !important;
    }

    .audio-label {
        font-size: 0.65rem !important;
        white-space: nowrap !important;
        margin: 0 !important;
    }

    /* DESCRIPCIÓN Y BOTÓN */
    .service-description-long {
        margin-top: 0 !important;
        /* Elimina espacio entre media y descripción */
        width: 100% !important;
    }

    .service-description-long p {
        font-size: 0.82rem !important;
        line-height: 1.6 !important;
        text-align: center !important;
        /* Texto centrado para simetría total */
        margin-top: 0 !important;
        /* Pegado arriba */
        margin-bottom: 20px !important;
        width: 100% !important;
    }

    /* Neutralizar márgenes hardcoded del HTML solo en móvil */
    .service-description-long div[style*="margin-top"],
    .service-description-long p[style*="margin-top"] {
        margin-top: 10px !important;
    }

    .btn-dark {
        font-size: 0.8rem !important;
        padding: 12px 25px !important;
        min-width: 260px !important;
        width: fit-content !important;
        display: inline-block !important;
        margin: 0 auto !important;
        /* BOTÓN AL CENTRO */
    }
    /* SUBIR EL BOTÓN VOLVER (Neutralizar el hueco gigante de 80px) */
    .service-list-premium {
        margin-top: 15px !important;
        margin-bottom: 30px !important; /* Le damos un poco de aire (30px) */
    }

    .back-link {
        margin: 5px auto 20px auto !important;
        display: block !important;
        text-align: center !important;
        font-weight: 600 !important;
        font-size: 0.9rem !important;
    }

    /* AIRE EXTRA SOLO EN CANALIZACIÓN CELU */
    #canalizacion-page .back-link {
        margin-top: 40px !important;
    }

    /* SUBIR EXPERIENCIAS COMPARTIDAS - CANALIZACIÓN CELU */
    #canalizacion-page .video-section {
        margin-top: -35px !important;
        margin-bottom: 30px !important;
    }

    /* AIRE ANTES DE LOS VÍDEOS - CANALIZACIÓN CELU */
    #canalizacion-page .video-section p {
        margin-bottom: 45px !important;
    }

    /* LETRA PÁRRAFOS MÁS GRANDE - TODOS LOS SERVICIOS (SOLO CELU) */
    #infantil-page p,
    .carta-natal-page p,
    #transito-page p,
    #tarot-page p,
    #canalizacion-page p {
        font-size: 1.1rem !important;
        line-height: 1.6 !important;
    }

    /* SUBIR EL TEXTO DE ARRIBA (SOLO CELU) */
    .service-page p:first-of-type {
        margin-top: 15px !important;
    }
}