/* --- PALETA DEL SITIO (negro de la marca + gris plata) --- */
:root {
    /* Paleta tomada del logo */
    --negro_logo: #141515;
    --rosa_oscuro: #a4677b;
    --rosa_medio: #c98ea2;
    --rosa_claro: #e3b5c4;
    --plata_logo: #e8e8e8;

    --tinta: var(--negro_logo);
    --tinta_suave: #4a4a4a;
    --plata: #a8a9ad;
    --plata_clara: #dcdddf;
    --papel: #f3f3f1;
    --margen_libreta: #c4473a;
}

/* --- GLOBAL STYLES --- */
html, body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    background-color: #ffffff;
    font-family: 'Helvetica', sans-serif; /* Fallback for rest of the page */
}

/* --- HEADER & FLOATING NAVIGATION --- */
header {
    width: 100%;
    position: fixed;          /* el menú acompaña al usuario al bajar */
    top: 0;
    left: 0;
    z-index: 100; /* Siempre por encima del contenido */
    display: flex;
    justify-content: center;
}

.nav_menu {
    width: 100%;
    background-color: rgba(30, 30, 30, 0.5);
    height: 80px;
    display: flex;
    align-items: center;
    position: relative;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.nav_links {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav_links li {
    text-align: center;
    padding: 0 25px; 
}

.nav_spacer {
    width: 150px; 
}

.nav_menu a {
    text-decoration: none;
    color: #e0e0e0;
    white-space: nowrap;
    font-family: 'Bebas Neue', sans-serif; /* NEW FONT */
    font-size: 21px; /* Slightly larger since Bebas is condensed */
    letter-spacing: 1px;
    transition: color 0.3s ease;
}

.nav_menu a:hover {
    color: #ffffff;
}

.logo_container {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 10px;
    width: 110px;
    height: 110px;
    background-color: #1a1a1a;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.6);
}

.logo_container a {
    display: flex;
}

.nav_logo {
    width: 90px;
    height: auto;
}

/* --- MAIN LAYOUT & BACKGROUND --- */
main {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* --- HERO CAROUSEL & MAIN BACKGROUND --- */
.main_background {
    width: 100%;
    min-height: 92vh; 
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5)), url('./imagenes/Imagenes_web/DJI_0542.webp') no-repeat center center;
    background-size: cover;
}

/* Container for images */
.carousel_container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Individual Slides (Fading Effect) */
.carousel_slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    opacity: 0;
    transition: opacity 1s ease-in-out; /* Smooth fade effect */
}

.carousel_slide.active {
    opacity: 1;
}

/* Navigation Arrows */
.carousel_btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.3);
    color: #ffffff;
    border: none;
    padding: 15px;
    cursor: pointer;
    z-index: 5; 
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.3s ease, transform 0.2s ease;
}

.carousel_btn svg {
    width: 30px;
    height: 30px;
}

.carousel_btn:hover {
    background: rgba(0, 0, 0, 0.7);
    transform: translateY(-50%) scale(1.1);
}

.prev_btn { left: 30px; }
.next_btn { right: 30px; }

/* Bottom Dots */
.carousel_dots {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
    z-index: 5;
}

.dot {
    width: 12px;
    height: 12px;
    background-color: transparent;
    border: 2px solid #ffffff;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.dot.active, .dot:hover {
    background-color: #ffffff;
    transform: scale(1.2);
}

/* Ensuring Text Stays on Top */
.main_content {
    text-align: center;
    padding: 0 20px;
    margin-top: -10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
}

.hero_intro {
    font-family: 'Tenor Sans', sans-serif; /* NEW FONT */
    font-size: clamp(1.5rem, 2.5vw, 2.2rem); 
    font-weight: normal;
    color: #ffffff;
    margin: 0 0 5px 0;
    text-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
    line-height: 1.2;
}

.company_name {
    font-family: 'Great Vibes', Georgia, serif; /* NEW FONT */
    font-size: clamp(4rem, 7vw, 6.5rem); /* Increased slightly for Great Vibes */
    font-weight: normal;
    color: #ffffff;
    margin: 0 0 10px 0;
    text-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
    line-height: 1.1;
}

.subtitle {
    font-family: 'Tenor Sans', sans-serif; /* NEW FONT */
    color: #ffffff;
    font-size: clamp(1.5rem, 2vw, 1.8rem); 
    font-weight: normal; /* Tenor Sans looks best normal, not bold */
    letter-spacing: 1px;
    margin: 0 0 40px 0;
    padding: 40px 0 0 0;
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.8); 
}

/* --- INFINITE MARQUEE GALLERY --- */
.photo_gallery {
    background-color: #ffffff;
    padding: 60px 5% 40px 5%; 
    width: 100%;
    box-sizing: border-box;
}

.gallery_container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px; /* Reduje esto de 60px a 20px para juntar más las filas */
}

.gallery_group {
    display: flex;
    flex-direction: column;
    width: 100%; 
}

.section_label {
    background-color: #222222; 
    color: #ffffff;
    padding: 10px 35px; 
    font-family: 'Tenor Sans', sans-serif;
    font-size: 1.25rem;
    font-weight: bold;
    text-transform: uppercase;
    width: max-content;
    margin: 0 0 15px 0; /* Cambiado para quitar el centrado automático */
    align-self: flex-start; /* Fuerza la etiqueta a pegarse a la izquierda */
    border-radius: 3px;
}

/* El contenedor que rompe los límites y va de punta a punta de la pantalla */
.marquee_wrapper {
    width: 100vw; 
    position: relative;
    left: 50%;
    transform: translateX(-50%); /* Este es el truco definitivo para romper el contenedor madre */
    overflow: hidden; 
    padding: 10px 0;
}

/* La "pista" por donde corren las imágenes */
.marquee_track {
    display: flex;
    gap: 20px;
    width: max-content; /* Crucial para que las imágenes no se aplasten */
}

/* Imágenes rectangulares */
.gallery_img {
    width: 350px; 
    aspect-ratio: 4 / 3; /* Proporción rectangular/apaisada */
    border-radius: 6px;
    flex-shrink: 0;
    background-color: #dddddd;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.img_placeholder {
    /* Mantengo la misma imagen de relleno por ahora */
    background: url('./imagenes/Imagenes_web/DJI_0542.webp') no-repeat center center;
    background-size: cover;
}

/* --- ANIMACIONES DE MOVIMIENTO --- */
/* Cambia los '35s' si quieres que vaya más rápido o más lento */
.track_left {
    animation: scrollLeft 35s linear infinite;
}

.track_right {
    animation: scrollRight 35s linear infinite;
}

/* Keyframes: Le dicen al navegador cómo mover la pista */
@keyframes scrollLeft {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-50% - 10px)); } /* Se mueve exactamente la mitad */
}

@keyframes scrollRight {
    0% { transform: translateX(calc(-50% - 10px)); } /* Empieza a la mitad */
    100% { transform: translateX(0); }
}

/* --- MAIN BUTTONS --- */
.button_group {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 50px; 
    margin-bottom: 20px; 
}

.main_button {
    display: inline-block;
    padding: 16px 45px; 
    background-color: #222222; 
    color: #ffffff;
    text-decoration: none;
    font-family: 'Tenor Sans', sans-serif; /* Applied to buttons for consistency */
    font-size: 1.05rem;
    font-weight: bold; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    border: 2px solid #222222; 
    border-radius: 6px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.main_button:hover {
    background-color: #ffffff;
    color: #222222;
}

/* --- INFO BANNER SECTION --- */
.info_banner {
    width: 100%;
    height: 60vh; 
    background-color: #222222; 
    display: flex;
    margin-top: 0; 
}

.banner_text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 5% 0 8%;
}

.banner_text h2 {
    font-size: 2.5rem;
    color: #ffffff; 
    margin: 0 0 20px 0;
    font-family: "Tenor Sans", sans-serif;
}

.banner_text p {
    font-size: 1.2rem;
    color: #cccccc; 
    line-height: 1.6;
    margin: 0;
}

.banner_image_container {
    flex: 1;
    display: flex;
    padding: 40px 8% 40px 0; 
}

.banner_image {
    width: 100%;
    height: 100%;
    border-radius: 6px; 
}

/* --- FOOTER --- */
footer {
    background-color: #ffffff;
    color: #000000;
    width: 100%;
    padding: 50px 0; 
    box-sizing: border-box;
}

.footer_line {
    width: 90%;
    height: 1px;
    background-color: #cccccc;
    margin: 0 auto 50px auto;
}

.footer_content {
    display: grid;
    grid-template-columns: 1fr auto 1fr; 
    gap: 20px;
    align-items: flex-start;
    padding: 0 5%;
}

.footer_left {
    display: flex;
    gap: 60px;
}

.footer_social {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.social_link {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #333333;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: bold;
    transition: color 0.2s ease;
}

.social_link svg {
    width: 22px;
    height: 22px;
    color: #000000;
}

.social_link:hover {
    color: #777777;
}

.footer_menu h3 {
    margin: 0 0 15px 0;
    font-size: 1rem;
    font-weight: bold;
}

.footer_menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer_menu a {
    color: #555555;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s ease;
}

.footer_menu a:hover {
    color: #000000;
    font-weight: bold;
}

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

.footer_center h2 {
    font-family: "Great Vibes", Georgia, serif;
    margin: 0 0 10px 0;
    font-size: 2.2rem;
}

.footer_center p {
    margin: 0;
    font-size: 0.85rem;
    color: #666;
}

.footer_lemma {
    font-family: 'Tenor Sans', sans-serif;
    margin-top: 15px !important;
    font-weight: normal;
    color: #333333 !important;
    font-size: 1rem !important;
}

.footer_right {
    display: flex;
    justify-content: flex-end;
    text-align: right;
}

.footer_contacto h3 {
    margin: 0 0 15px 0;
    font-size: 1rem;
    font-weight: bold;
}

.footer_contacto p {
    margin: 0 0 8px 0;
    font-size: 0.9rem;
    color: #555555;
}

/* --- DROPDOWN MENU STYLES --- */
.menu_toggle {
    position: absolute;
    right: 35px; /* Keeps it strictly on the right corner */
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu_toggle svg {
    width: 32px;
    height: 32px;
    transition: color 0.3s ease;
}

.menu_toggle:hover svg {
    color: #cccccc;
}

/* The White Box */
.dropdown_menu {
    display: none; /* Hidden until clicked */
    position: absolute;
    top: 20px;
    right: 25px;
    background-color: #ffffff;
    border-radius: 4px;
    padding: 40px 30px 25px 30px; /* Extra top padding makes room for the X */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
    z-index: 20;
    min-width: 160px;
}

/* Close 'X' Button */
.close_menu {
    position: absolute;
    top: 12px;
    right: 12px;
    cursor: pointer;
    color: #000000;
}

.close_menu svg {
    width: 22px;
    height: 22px;
    transition: color 0.3s ease;
}

.close_menu:hover svg {
    color: #777777;
}

/* Dropdown Links */
.dropdown_links {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.dropdown_links li {
    padding: 0 !important;
    text-align: left !important; 
}

.dropdown_links a {
    color: #000000 !important; /* Black text on the white background */
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: 22px !important; /* Slightly larger for emphasis */
    text-decoration: none;
    letter-spacing: 1px;
    transition: color 0.3s ease;
}

.dropdown_links a:hover {
    color: #777777 !important;
}

/* Opción "Inicio de sesión" separada del resto */
.dropdown_links .dropdown_login {
    padding-bottom: 15px !important;
    border-bottom: 1px solid #dddddd;
}

/* =========================================================
   --- RESPONSIVE (tablets y celulares) ---
   ========================================================= */

/* Pantallas medianas: se aprietan un poco los links del menú */
@media (max-width: 1150px) {
    .nav_links li {
        padding: 0 14px;
    }
    .nav_spacer {
        width: 130px;
    }
}

/* Tablets y celulares: el menú pasa al botón ☰ */
@media (max-width: 900px) {
    .nav_links {
        display: none;
    }

    .nav_menu {
        height: 70px;
    }

    .logo_container {
        width: 90px;
        height: 90px;
        top: 8px;
    }

    .nav_logo {
        width: 72px;
    }

    .menu_toggle {
        right: 20px;
    }

    .dropdown_menu {
        right: 15px;
        top: 15px;
    }

    /* Carrusel */
    .carousel_btn {
        padding: 10px;
    }
    .carousel_btn svg {
        width: 22px;
        height: 22px;
    }
    .prev_btn { left: 12px; }
    .next_btn { right: 12px; }

    .company_name {
        font-size: clamp(3rem, 12vw, 4.5rem);
    }

    .subtitle {
        font-size: 1.2rem;
        padding-top: 20px;
    }

    /* Galería */
    .gallery_img {
        width: 240px;
    }

    .button_group {
        flex-direction: column;
        align-items: center;
        gap: 18px;
    }

    .main_button {
        width: 100%;
        max-width: 320px;
        text-align: center;
        box-sizing: border-box;
        padding: 14px 20px;
    }

    /* Banner informativo: texto arriba, imagen abajo */
    .info_banner {
        height: auto;
        flex-direction: column;
    }

    .banner_text {
        padding: 50px 6% 30px 6%;
    }

    .banner_text h2 {
        font-size: 2rem;
    }

    .banner_image_container {
        padding: 0 6% 40px 6%;
    }

    .banner_image {
        aspect-ratio: 4 / 3;
        height: auto;
    }

    /* Footer en una sola columna */
    .footer_content {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    .footer_center {
        order: -1;
        margin-top: 0;
    }

    .footer_left {
        justify-content: center;
        gap: 50px;
        text-align: left;
    }

    .footer_right {
        justify-content: center;
        text-align: center;
    }
}

/* Celulares pequeños */
@media (max-width: 480px) {
    .dropdown_menu {
        left: 15px;
        right: 15px;
    }

    .gallery_img {
        width: 200px;
    }

    .section_label {
        font-size: 1rem;
        padding: 8px 22px;
    }

    .footer_left {
        flex-direction: column;
        align-items: center;
        gap: 30px;
        text-align: center;
    }

    .footer_social {
        align-items: center;
    }
}

/* =========================================================
   --- INICIO DE SESIÓN Y REGISTRO ---
   ========================================================= */
.auth_background {
    padding: 175px 20px 80px 20px;
    box-sizing: border-box;
}

.auth_card {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 440px;
    background-color: #ffffff;
    border-radius: 6px;
    padding: 45px 45px 35px 45px;
    box-sizing: border-box;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.45);
    text-align: center;
}

/* Etiqueta negra en la parte superior (igual a "SERVICIOS" / "EVENTOS") */
.auth_label {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    font-size: 1rem;
    padding: 10px 30px;
}

.auth_title {
    font-family: 'Great Vibes', Georgia, serif;
    font-weight: normal;
    font-size: 3.4rem;
    color: #222222;
    margin: 10px 0 0 0;
    line-height: 1.1;
}

.auth_subtitle {
    font-family: 'Tenor Sans', sans-serif;
    color: #666666;
    font-size: 0.95rem;
    margin: 6px 0 28px 0;
}

.auth_form {
    display: flex;
    flex-direction: column;
    gap: 18px;
    text-align: left;
}

.auth_field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.auth_field label {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.15rem;
    letter-spacing: 1px;
    color: #222222;
}

.auth_field input {
    font-family: 'Tenor Sans', sans-serif;
    font-size: 1rem;
    padding: 12px 14px;
    border: 1px solid #cccccc;
    border-radius: 4px;
    background-color: #fafafa;
    color: #222222;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.auth_field input:focus {
    outline: none;
    border-color: #222222;
    background-color: #ffffff;
}

.auth_check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Tenor Sans', sans-serif;
    font-size: 0.9rem;
    color: #555555;
    cursor: pointer;
    user-select: none;
}

.auth_check input {
    accent-color: #222222;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Reutiliza .main_button y lo estira al ancho del formulario */
.auth_button {
    width: 100%;
    margin-top: 8px;
    cursor: pointer;
    max-width: none;
    box-sizing: border-box;
}

.auth_switch {
    font-family: 'Tenor Sans', sans-serif;
    font-size: 0.95rem;
    color: #555555;
    margin: 26px 0 0 0;
    padding-top: 20px;
    border-top: 1px solid #e5e5e5;
}

.auth_switch a {
    color: #222222;
    font-weight: bold;
    text-decoration: none;
    border-bottom: 1px solid #222222;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.auth_switch a:hover {
    color: #777777;
    border-color: #777777;
}

/* Mensajes de error / éxito */
.auth_alert {
    font-family: 'Tenor Sans', sans-serif;
    font-size: 0.92rem;
    text-align: left;
    padding: 12px 15px;
    border-radius: 4px;
    margin-bottom: 20px;
    border-left: 4px solid;
}

.auth_alert_error {
    background-color: #fbeaea;
    border-color: #b3261e;
    color: #8a1c16;
}

.auth_alert_success {
    background-color: #eaf5ec;
    border-color: #2e7d32;
    color: #1f5a23;
}

/* =========================================================
   --- COLLAGE EN MOVIMIENTO (index) ---
   Cada foto tiene tamaño, proporción, altura e inclinación
   distintos, como fotos impresas pegadas en una pared.
   ========================================================= */
.collage_track {
    align-items: center;
    height: 360px;
    gap: 28px;
    padding: 0 14px;
}

.collage_item {
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    background-color: #dddddd;
    border: 7px solid #ffffff;
    border-radius: 3px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.collage_item:hover {
    transform: rotate(0deg) scale(1.04) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
    z-index: 2;
}

/* Siete "moldes" distintos que se van alternando */
.tile_a { width: 300px; aspect-ratio: 4 / 3;  align-self: flex-start; transform: rotate(-2deg); margin-top: 18px; }
.tile_b { width: 210px; aspect-ratio: 3 / 4;  align-self: center;     transform: rotate(1.5deg); }
.tile_c { width: 400px; aspect-ratio: 16 / 9; align-self: flex-end;   transform: rotate(-0.8deg); margin-bottom: 14px; }
.tile_d { width: 190px; aspect-ratio: 1 / 1;  align-self: flex-start; transform: rotate(2.5deg); margin-top: 6px; }
.tile_e { width: 250px; aspect-ratio: 4 / 5;  align-self: flex-end;   transform: rotate(-1.8deg); }
.tile_f { width: 330px; aspect-ratio: 3 / 2;  align-self: center;     transform: rotate(1deg); }
.tile_g { width: 230px; aspect-ratio: 1 / 1;  align-self: flex-end;   transform: rotate(-2.8deg); margin-bottom: 30px; }

/* Un poco más lento porque la fila es más larga */
.collage_track.track_left  { animation-duration: 55s; }
.collage_track.track_right { animation-duration: 60s; }

/* La animación usa la mitad del recorrido: con gap de 28px hay que restar 14px */
.collage_track.track_left  { animation-name: collageLeft; }
.collage_track.track_right { animation-name: collageRight; }

@keyframes collageLeft {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes collageRight {
    0%   { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

/* Pausa la fila al pasar el mouse para poder ver una foto */
.marquee_wrapper:hover .collage_track {
    animation-play-state: paused;
}

/* =========================================================
   --- USUARIO CON SESIÓN INICIADA (menú) ---
   ========================================================= */
.dropdown_user {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user_avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: #222222;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.user_avatar svg {
    width: 20px;
    height: 20px;
}

.user_name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 22px;
    letter-spacing: 1px;
    color: #000000;
    white-space: nowrap;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown_links .dropdown_logout {
    padding-top: 15px !important;
    border-top: 1px solid #dddddd;
}

.dropdown_links .dropdown_logout a {
    color: #b3261e !important;
}

.dropdown_links .dropdown_logout a:hover {
    color: #777777 !important;
}

/* Círculo con la inicial junto al botón ☰ */
.menu_toggle {
    gap: 12px;
}

.toggle_avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: #ffffff;
    color: #222222;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 2px;
    box-sizing: border-box;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* =========================================================
   --- PÁGINA DE HISTORIA ---
   Cada sección ocupa una pantalla. Paleta: negro de la marca,
   blanco, un gris "papel" y un gris plata como acento.
   ========================================================= */
.historia_page {
    background-color: #ffffff;
}


/* Cada sección mide una pantalla de alto */
.hist_screen {
    min-height: 100vh;
    box-sizing: border-box;
    padding: 70px 9%;
    display: flex;
    align-items: center;
    gap: 7%;
    position: relative;
    overflow: hidden;
}

.hist_paper_bg {
    background-color: var(--papel);
}

/* Títulos y textos de las secciones */
.hist_text {
    flex: 1;
    max-width: 560px;
}

.hist_text h2 {
    font-family: 'Tenor Sans', sans-serif;
    font-weight: normal;
    font-size: clamp(1.7rem, 2.4vw, 2.2rem);
    line-height: 1.25;
    color: var(--tinta);
    margin: 0 0 22px 0;
}

.hist_text p {
    font-family: 'Tenor Sans', sans-serif;
    font-size: 1.02rem;
    line-height: 1.75;
    color: var(--tinta_suave);
    margin: 0 0 14px 0;
}

/* Citas de la señora María Auxiliadora */
.hist_quote {
    margin: 26px 0 0 0;
    padding: 4px 0 4px 22px;
    border-left: 2px solid var(--plata);
}

.hist_quote p {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.45rem !important;
    line-height: 1.4 !important;
    color: var(--tinta) !important;
    margin: 0 0 8px 0 !important;
}

.hist_quote cite {
    font-style: normal;
    font-family: 'Tenor Sans', sans-serif;
    font-size: 0.9rem;
    color: #7a7b7f;
}

/* ---------- Fotos tipo impresas ---------- */
.hist_print {
    margin: 0;
    background-color: #ffffff;
    padding: 10px 10px 0 10px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
    flex-shrink: 0;
}

.hist_print_img {
    background-size: cover;
    background-position: center;
    background-color: #e9e9ea;
    width: 100%;
    height: var(--foto_alto, 300px);
}

.hist_print figcaption {
    font-family: 'Great Vibes', Georgia, serif;
    font-size: 1.5rem;
    color: var(--tinta);
    text-align: center;
    padding: 8px 6px 10px 6px;
}

/* Las que aún no tienen foto: marco vacío con la nota escrita */
.hist_print_empty .hist_print_img {
    background-image: repeating-linear-gradient(
        -45deg,
        #ececed 0px,
        #ececed 10px,
        #f4f4f5 10px,
        #f4f4f5 20px
    );
}

.hist_print_empty figcaption {
    color: #8b8c90;
}

.hist_print_tilt_left  { transform: rotate(-2.2deg); }
.hist_print_tilt_right { transform: rotate(1.8deg); }

/* Tamaños según la sección */
.hist_split > .hist_print {
    width: min(34vw, 50vh);
    --foto_alto: min(40vw, 62vh);
}

.hist_print_wide {
    width: min(34vw, 52vh);
    --foto_alto: min(22vw, 30vh);
}

/* ---------- 1. Introducción ---------- */
.hist_intro {
    background-color: var(--tinta);
    color: #ffffff;
    padding-top: 120px;
    padding-bottom: 50px;
    justify-content: space-between;
}

.hist_intro_text {
    max-width: 580px;
}

.hist_title {
    font-family: 'Great Vibes', Georgia, serif;
    font-weight: normal;
    font-size: clamp(3rem, 5vw, 4.6rem);
    line-height: 1.05;
    margin: 0 0 30px 0;
}

.hist_lead {
    font-family: 'Tenor Sans', sans-serif;
    font-size: 1.12rem;
    line-height: 1.8;
    color: #dedede;
    margin: 0 0 16px 0;
}

.hist_lead_soft {
    color: var(--plata);
    font-size: 1rem;
}

.hist_print_hero {
    width: min(32vw, 50vh);
    --foto_alto: min(36vw, 58vh);
    transform: rotate(2.5deg);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}

/* ---------- 3. Libreta de inventario ---------- */
.ledger {
    position: relative;
    flex-shrink: 0;
    width: min(30vw, 430px);
    background-color: #ffffff;
    /* Renglones de la libreta y línea roja del margen */
    background-image:
        linear-gradient(90deg, transparent 54px, var(--margen_libreta) 54px, var(--margen_libreta) 55px, transparent 55px),
        repeating-linear-gradient(to bottom, transparent 0px, transparent 37px, #d9e2ea 37px, #d9e2ea 38px);
    background-position: 0 0, 0 22px;
    padding: 38px 34px 34px 74px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);
    transform: rotate(-1.6deg);
}

.ledger_tape {
    position: absolute;
    top: -16px;
    left: 50%;
    width: 120px;
    height: 32px;
    background-color: rgba(220, 221, 223, 0.75);
    transform: translateX(-50%) rotate(3deg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.ledger_title {
    font-family: 'Great Vibes', Georgia, serif;
    font-size: 2.4rem;
    color: var(--tinta);
    margin: 0;
    line-height: 1.2;
}

.ledger_date {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.1rem;
    color: #6d6e72;
    margin: 0 0 22px 0;
}

.ledger_list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ledger_list li {
    display: flex;
    align-items: baseline;
    gap: 8px;
    height: 38px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.35rem;
    color: var(--tinta);
}

.ledger_list li span:last-child {
    font-family: 'Great Vibes', Georgia, serif;
    font-size: 1.7rem;
}

.ledger_dots {
    flex: 1;
    border-bottom: 2px dotted var(--plata);
    transform: translateY(-5px);
}

/* ---------- 4. Crecimiento + línea de tiempo ---------- */
.hist_growth {
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 6vh;
}

.hist_growth_top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7%;
}

.hist_growth .hist_text {
    max-width: 640px;
}

.hist_timeline {
    list-style: none;
    margin: 0;
    padding: 30px 0 0 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    border-top: 1px solid var(--plata_clara);
    position: relative;
}

.hist_timeline li {
    position: relative;
}

/* Marca de cada año sobre la línea */
.hist_timeline li::before {
    content: "";
    position: absolute;
    top: -36px;
    left: 0;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background-color: var(--tinta);
    box-shadow: 0 0 0 4px #ffffff;
}

.tl_year {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.1rem;
    letter-spacing: 1px;
    color: var(--tinta);
    display: block;
    line-height: 1;
    margin-bottom: 8px;
}

.hist_timeline p {
    font-family: 'Tenor Sans', sans-serif;
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--tinta_suave);
    max-width: 240px;
}

/* ---------- 5. Empresa familiar ---------- */
.hist_print_pair {
    display: flex;
    gap: 26px;
    align-items: flex-start;
    flex-shrink: 0;
}

.hist_print_pair .hist_print {
    width: min(17vw, 28vh);
    --foto_alto: min(22vw, 36vh);
}

.hist_print_low {
    margin-top: 12vh;
}

/* ---------- 6. Cierre ---------- */
.hist_closing {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 0;
    /* La foto la pone js/main.js (data-original del HTML o la elegida en el panel) */
    background: var(--negro_logo) no-repeat center center;
    background-size: cover;
    color: #ffffff;
}

.hist_closing_quote {
    margin: 0;
    max-width: 880px;
}

.hist_closing_quote p {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: clamp(2.2rem, 3.6vw, 3.3rem);
    line-height: 1.25;
    margin: 0 0 18px 0;
}

.hist_closing_quote cite {
    font-style: normal;
    font-family: 'Tenor Sans', sans-serif;
    font-size: 1rem;
    color: var(--plata_clara);
}

.hist_closing_text {
    font-family: 'Great Vibes', Georgia, serif;
    font-size: 2.2rem;
    margin: 60px 0 24px 0;
}

.hist_closing_buttons {
    display: flex;
    align-items: center;
    gap: 34px;
}

.hist_button_light {
    background-color: #ffffff;
    color: var(--tinta);
    border-color: #ffffff;
}

.hist_button_light:hover {
    background-color: transparent;
    color: #ffffff;
}

.hist_link_light {
    font-family: 'Tenor Sans', sans-serif;
    color: #ffffff;
    text-decoration: none;
    border-bottom: 1px solid var(--plata);
    padding-bottom: 3px;
    transition: border-color 0.2s ease;
}

.hist_link_light:hover {
    border-color: #ffffff;
}

/* Foco visible al navegar con teclado */
.historia_page a:focus-visible {
    outline: 2px solid var(--plata);
    outline-offset: 4px;
}

/* =========================================================
   --- RETOQUES GENERALES ---
   ========================================================= */
.footer_line {
    background-color: var(--plata_clara);
}

.footer_lemma {
    font-family: 'Cormorant Garamond', serif !important;
    font-style: italic;
    font-size: 1.2rem !important;
}

/* Adelanto de la historia en el inicio (reemplaza el bloque de relleno) */
.home_story {
    background-color: var(--tinta);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7%;
    padding: 90px 9%;
    min-height: 70vh;
    box-sizing: border-box;
}

.home_story_text {
    max-width: 560px;
}

.home_story_text h2 {
    font-family: 'Great Vibes', Georgia, serif;
    font-weight: normal;
    font-size: clamp(2.8rem, 4.2vw, 4rem);
    line-height: 1.1;
    margin: 0 0 24px 0;
}

.home_story_text p {
    font-family: 'Tenor Sans', sans-serif;
    font-size: 1.08rem;
    line-height: 1.8;
    color: #d6d6d6;
    margin: 0 0 16px 0;
}

.home_story_quote {
    margin: 26px 0 34px 0;
    padding: 4px 0 4px 22px;
    border-left: 2px solid var(--plata);
}

.home_story_quote p {
    font-family: 'Cormorant Garamond', serif !important;
    font-style: italic;
    font-size: 1.45rem !important;
    color: #ffffff !important;
    line-height: 1.4 !important;
    margin: 0 0 6px 0 !important;
}

.home_story_quote cite {
    font-style: normal;
    font-family: 'Tenor Sans', sans-serif;
    font-size: 0.9rem;
    color: var(--plata);
}

.home_story .hist_print {
    width: min(30vw, 46vh);
    --foto_alto: min(34vw, 50vh);
    transform: rotate(-2deg);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}

/* =========================================================
   --- HISTORIA: MISIÓN Y VISIÓN ---
   ========================================================= */
.hist_mv {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 50px;
}

.hist_mv_heading {
    font-family: 'Great Vibes', Georgia, serif;
    font-weight: normal;
    font-size: clamp(2.8rem, 4vw, 3.8rem);
    color: var(--tinta);
    margin: 0;
}

.hist_mv_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 1050px;
    width: 100%;
}

.hist_mv_item {
    padding: 10px 60px;
}

.hist_mv_item + .hist_mv_item {
    border-left: 1px solid var(--plata);
}

.hist_mv_item h3 {
    font-family: 'Tenor Sans', sans-serif;
    font-weight: normal;
    font-size: 1.6rem;
    color: var(--tinta);
    margin: 0 0 18px 0;
}

.hist_mv_item p {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.4rem;
    line-height: 1.55;
    color: var(--tinta_suave);
    margin: 0;
}

/* =========================================================
   --- PÁGINA DE CONTACTO ---
   ========================================================= */
.contact_intro {
    background-color: var(--tinta);
    color: #ffffff;
    padding-top: 110px;
    padding-bottom: 40px;
    justify-content: space-between;
    align-items: center;
}

.contact_info {
    max-width: 520px;
}

.contact_title {
    font-family: 'Great Vibes', Georgia, serif;
    font-weight: normal;
    font-size: clamp(2.6rem, 3.6vw, 3.4rem);
    line-height: 1.05;
    margin: 0 0 16px 0;
}

.contact_lead {
    font-family: 'Tenor Sans', sans-serif;
    font-size: 1.02rem;
    line-height: 1.7;
    color: #d6d6d6;
    margin: 0 0 24px 0;
}

.contact_list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contact_list li {
    display: flex;
    align-items: center;
    gap: 16px;
}

.contact_icon {
    width: 40px;
    height: 40px;
    border: 1px solid #555555;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    color: var(--plata_clara);
}

.contact_icon svg {
    width: 18px;
    height: 18px;
}

.contact_label {
    display: block;
    font-family: 'Tenor Sans', sans-serif;
    font-size: 0.82rem;
    color: var(--plata);
    margin-bottom: 2px;
}

.contact_value {
    font-family: 'Tenor Sans', sans-serif;
    font-size: 1.02rem;
    color: #ffffff;
    text-decoration: none;
}

a.contact_value {
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
}

a.contact_value:hover {
    border-color: var(--plata);
}

/* Formulario: hoja blanca, igual que el login */
.contact_form {
    background-color: #ffffff;
    color: var(--tinta);
    width: min(430px, 36vw);
    flex-shrink: 0;
    padding: 30px 34px 24px 34px;
    border-radius: 6px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-sizing: border-box;
}

.contact_form h2 {
    font-family: 'Great Vibes', Georgia, serif;
    font-weight: normal;
    font-size: 2.3rem;
    margin: 0 0 2px 0;
    line-height: 1.1;
}

.contact_form_row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.contact_form select,
.contact_form textarea {
    font-family: 'Tenor Sans', sans-serif;
    font-size: 1rem;
    padding: 11px 12px;
    border: 1px solid #cccccc;
    border-radius: 4px;
    background-color: #fafafa;
    color: var(--tinta);
    resize: vertical;
}

.contact_form input {
    padding: 10px 12px !important;
}

.contact_form select:focus,
.contact_form textarea:focus {
    outline: none;
    border-color: var(--tinta);
    background-color: #ffffff;
}

.contact_form .auth_button {
    margin-top: 4px;
}

.contact_form_note {
    font-family: 'Tenor Sans', sans-serif;
    font-size: 0.82rem;
    color: #777777;
    text-align: center;
    margin: 0;
}

/* Ubicación */
.contact_address {
    font-family: 'Cormorant Garamond', serif !important;
    font-style: italic;
    font-size: 1.45rem !important;
    line-height: 1.5 !important;
    color: var(--tinta) !important;
}

.contact_map_link {
    display: inline-block;
    margin-top: 10px;
    font-family: 'Tenor Sans', sans-serif;
    color: var(--tinta);
    text-decoration: none;
    border-bottom: 1px solid var(--tinta);
    padding-bottom: 3px;
}

.contact_map_link:hover {
    color: #777777;
    border-color: #777777;
}

.contact_map {
    flex-shrink: 0;
    width: min(46vw, 640px);
    height: min(62vh, 440px);
    background-color: #ffffff;
    padding: 10px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);
    box-sizing: border-box;
}

.contact_map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* =========================================================
   --- SERVICIOS: ALIADOS ---
   ========================================================= */
.allies {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 60px;
    background-color: var(--papel);
}

.allies_intro h2 {
    font-family: 'Great Vibes', Georgia, serif;
    font-weight: normal;
    font-size: clamp(2.8rem, 4vw, 3.8rem);
    color: var(--tinta);
    margin: 0 0 14px 0;
}

.allies_intro p {
    font-family: 'Tenor Sans', sans-serif;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--tinta_suave);
    max-width: 560px;
    margin: 0 auto;
}

.allies_list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    max-width: 1050px;
}

.allies_list li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 20px 30px;
}

.allies_list li + li {
    border-left: 1px solid var(--plata);
}

.allies_name {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 2.1rem;
    color: var(--tinta);
}

.allies_link {
    font-family: 'Tenor Sans', sans-serif;
    font-size: 0.95rem;
    color: var(--tinta_suave);
    text-decoration: none;
    border-bottom: 1px solid var(--plata);
    padding-bottom: 2px;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.allies_link:hover {
    color: var(--tinta);
    border-color: var(--tinta);
}

/* =========================================================
   --- TRANSICIÓN SUAVE AL FINAL DE LA PORTADA ---
   Un degradado blanco de abajo hacia arriba para que la imagen
   se funda con la sección siguiente en vez de cortarse.
   ========================================================= */
.main_background::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 55px;
    background: linear-gradient(to top, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
    z-index: 2;              /* encima de las fotos, debajo de flechas y puntos */
    pointer-events: none;    /* no bloquea clics */
}

/* Los puntos del carrusel suben para no quedar sobre la parte blanca */
.carousel_dots {
    bottom: 75px;
}

/* Las páginas con fondo oscuro arriba (Historia, Contacto) no usan .main_background */

/* =========================================================
   --- LOGIN Y REGISTRO SIN PIE DE PÁGINA ---
   La foto de fondo ocupa toda la pantalla y no lleva el
   degradado blanco, porque debajo ya no hay otra sección.
   ========================================================= */
.auth_background {
    min-height: 100vh;
}

.auth_background::after {
    display: none;
}

/* =========================================================
   --- MENÚ: TRANSPARENTE SOBRE LA PORTADA, SÓLIDO DESPUÉS ---
   js/main.js agrega la clase .nav_solid cuando la portada
   (la primera sección de la página) queda atrás.
   ========================================================= */
.nav_menu {
    background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0));
    box-shadow: none;
    z-index: 0;
    transition: box-shadow 0.35s ease;
}

/* Capa de color sólido que aparece con un fundido */
.nav_menu::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--tinta);
    opacity: 0;
    transition: opacity 0.35s ease;
    z-index: -1;
}

.nav_menu.nav_solid::before {
    opacity: 1;
}

.nav_menu.nav_solid {
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.28);
}

/* =========================================================
   --- GALERÍA ---
   ========================================================= */
.gallery_page {
    background-color: #ffffff;
}

.gal_item {
    position: relative;
    padding: 0;
    margin: 0;
    border: 0;
    overflow: hidden;
    cursor: zoom-in;
    background-color: #dddddd;
    display: block;
}

.gal_item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s ease;
}

.gal_item:focus-visible {
    outline: 3px solid var(--plata);
    outline-offset: -3px;
}

/* 1. Mosaico de portada: una foto grande y dos apiladas */
.gal_hero {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 6px;
    height: 100vh;
}

.gh_a { grid-row: 1 / 3; }

.gal_overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 0 8% 9% 8%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 55%);
    color: #ffffff;
    font-family: 'Great Vibes', Georgia, serif;
    font-size: clamp(3rem, 4.6vw, 4.6rem);
    line-height: 1.05;
    text-align: left;
    text-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
    pointer-events: none;
}

/* 2. Título de la segunda parte */
.gal_section {
    text-align: center;
    padding: 90px 9% 46px 9%;
}

.gal_heading {
    font-family: 'Great Vibes', Georgia, serif;
    font-weight: normal;
    font-size: clamp(2.8rem, 4vw, 3.8rem);
    color: var(--tinta);
    margin: 0 0 12px 0;
}

.gal_sub {
    font-family: 'Tenor Sans', sans-serif;
    font-size: 1.05rem;
    color: var(--tinta_suave);
    margin: 0;
}

/* Mosaico de 12 columnas: cada foto ocupa un bloque distinto */
.gal_grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 8vw;
    grid-auto-flow: dense;
    gap: 6px;
    padding-bottom: 6px;
}

.g_big  { grid-column: span 6; grid-row: span 4; }   /* grande horizontal */
.g_tall { grid-column: span 3; grid-row: span 4; }   /* vertical */
.g_sq   { grid-column: span 3; grid-row: span 3; }   /* cuadrada */
.g_wide { grid-column: span 6; grid-row: span 3; }   /* panorámica */

/* Visor a pantalla completa */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    background-color: rgba(18, 18, 18, 0.95);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

.lightbox[hidden] {
    display: none;
}

.lb_img {
    max-width: 86vw;
    max-height: 80vh;
    object-fit: contain;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}

.lb_caption {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.4rem;
    color: var(--plata_clara);
    margin: 0;
}

.lightbox button {
    position: absolute;
    background: none;
    border: none;
    color: #ffffff;
    cursor: pointer;
    font-size: 3.4rem;
    line-height: 1;
    padding: 10px 18px;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.lightbox button:hover,
.lightbox button:focus-visible {
    opacity: 1;
}

.lb_close { top: 18px; right: 24px; }
.lb_prev  { left: 20px; top: 50%; transform: translateY(-50%); }
.lb_next  { right: 20px; top: 50%; transform: translateY(-50%); }

/* =========================================================
   --- SERVICIOS ---
   ========================================================= */
.services_page {
    background-color: #ffffff;
}

/* 1. Introducción */
.srv_intro {
    background-color: var(--tinta);
    color: #ffffff;
    padding-top: 120px;
    padding-bottom: 50px;
    justify-content: space-between;
}

.srv_intro_text {
    max-width: 600px;
}

.srv_title {
    font-family: 'Great Vibes', Georgia, serif;
    font-weight: normal;
    font-size: clamp(3rem, 4.6vw, 4.4rem);
    line-height: 1.05;
    margin: 0 0 26px 0;
}

.srv_lead {
    font-family: 'Tenor Sans', sans-serif;
    font-size: 1.1rem;
    line-height: 1.8;
    color: #dedede;
    margin: 0 0 34px 0;
}

.srv_intro_actions {
    display: flex;
    align-items: center;
    gap: 32px;
}

/* 2. Pestañas de servicios */
.srv_tabs_section {
    align-items: center;
    gap: 6%;
}

.srv_tabs {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
    border-left: 1px solid var(--plata_clara);
}

.srv_tab {
    background: none;
    border: none;
    border-left: 3px solid transparent;
    margin-left: -2px;
    text-align: left;
    cursor: pointer;
    padding: 10px 0 10px 24px;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.9rem;
    color: #9a9b9f;
    transition: color 0.25s ease, border-color 0.25s ease;
}

.srv_tab:hover {
    color: var(--tinta_suave);
}

.srv_tab.is_active {
    color: var(--tinta);
    border-left-color: var(--tinta);
}

.srv_tab:focus-visible {
    outline: 2px solid var(--plata);
    outline-offset: 2px;
}

.srv_panels {
    flex: 1;
}

.srv_panel {
    display: flex;
    align-items: center;
    gap: 50px;
}

.srv_panel[hidden] {
    display: none;
}

.srv_panel .hist_print {
    width: min(24vw, 40vh);
    --foto_alto: min(28vw, 46vh);
}

.srv_panel_text h2 {
    font-family: 'Tenor Sans', sans-serif;
    font-weight: normal;
    font-size: 2rem;
    color: var(--tinta);
    margin: 0 0 18px 0;
}

.srv_panel_text p {
    font-family: 'Tenor Sans', sans-serif;
    font-size: 1.02rem;
    line-height: 1.75;
    color: var(--tinta_suave);
    margin: 0 0 18px 0;
    max-width: 440px;
}

.srv_points {
    list-style: none;
    margin: 0;
    padding: 0;
}

.srv_points li {
    font-family: 'Tenor Sans', sans-serif;
    font-size: 0.98rem;
    color: var(--tinta);
    padding: 9px 0;
    border-bottom: 1px solid var(--plata_clara);
}

/* 3. Catálogo */
.srv_catalog {
    padding: 90px 9% 100px 9%;
}

.srv_catalog_head h2 {
    font-family: 'Great Vibes', Georgia, serif;
    font-weight: normal;
    font-size: clamp(2.8rem, 4vw, 3.8rem);
    color: var(--tinta);
    margin: 0 0 8px 0;
}

.srv_catalog_head p {
    font-family: 'Tenor Sans', sans-serif;
    color: var(--tinta_suave);
    margin: 0 0 30px 0;
}

.srv_filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 36px;
}

.srv_filter {
    font-family: 'Tenor Sans', sans-serif;
    font-size: 0.95rem;
    padding: 9px 20px;
    border: 1px solid var(--plata);
    border-radius: 30px;
    background-color: transparent;
    color: var(--tinta);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.srv_filter:hover {
    border-color: var(--tinta);
}

.srv_filter.is_active {
    background-color: var(--tinta);
    border-color: var(--tinta);
    color: #ffffff;
}

.srv_items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 34px 26px;
}

.srv_items li[hidden] {
    display: none;
}

.srv_item_img {
    aspect-ratio: 1 / 1;
    background-color: #e9e9ea;
    background-image: repeating-linear-gradient(-45deg, #ececed 0px, #ececed 10px, #f4f4f5 10px, #f4f4f5 20px);
    background-size: cover;
    background-position: center;
    border: 8px solid #ffffff;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    margin-bottom: 14px;
}

.srv_items h3 {
    font-family: 'Tenor Sans', sans-serif;
    font-weight: normal;
    font-size: 1.08rem;
    color: var(--tinta);
    margin: 0 0 2px 0;
}

.srv_items p {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.05rem;
    color: #8b8c90;
    margin: 0 0 10px 0;
}

.srv_add {
    font-family: 'Tenor Sans', sans-serif;
    font-size: 0.88rem;
    background: none;
    border: none;
    padding: 0 0 2px 0;
    border-bottom: 1px solid var(--tinta);
    color: var(--tinta);
    cursor: pointer;
}

.srv_add:hover {
    color: #777777;
    border-color: #777777;
}

/* 4. Para cada ocasión: tres paneles de foto a lo alto de la pantalla */
.srv_occasions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    height: 100vh;
}

.srv_occasion {
    position: relative;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
}

.srv_occasion::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.05) 60%);
}

.srv_occasion_text {
    position: relative;
    color: #ffffff;
    padding: 0 10% 12% 10%;
}

.srv_occasion_text h3 {
    font-family: 'Great Vibes', Georgia, serif;
    font-weight: normal;
    font-size: clamp(2.6rem, 3.4vw, 3.4rem);
    margin: 0 0 10px 0;
    line-height: 1.1;
}

.srv_occasion_text p {
    font-family: 'Tenor Sans', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: #e4e4e4;
    margin: 0;
    max-width: 320px;
}

/* 5. Cómo trabajamos (los números sí indican un orden) */
.srv_process {
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 56px;
}

.srv_process_heading {
    font-family: 'Great Vibes', Georgia, serif;
    font-weight: normal;
    font-size: clamp(2.8rem, 4vw, 3.8rem);
    color: var(--tinta);
    text-align: center;
    margin: 0;
}

.srv_steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 28px;
    position: relative;
}

/* Línea que une los pasos */
.srv_steps::before {
    content: "";
    position: absolute;
    top: 21px;
    left: 22px;
    right: 22px;
    height: 1px;
    background-color: var(--plata_clara);
}

.srv_steps li {
    position: relative;
}

.srv_step_n {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #ffffff;
    border: 1px solid var(--tinta);
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    color: var(--tinta);
    margin-bottom: 18px;
    position: relative;
}

.srv_steps h3 {
    font-family: 'Tenor Sans', sans-serif;
    font-weight: normal;
    font-size: 1.15rem;
    color: var(--tinta);
    margin: 0 0 8px 0;
}

.srv_steps p {
    font-family: 'Tenor Sans', sans-serif;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--tinta_suave);
    margin: 0;
}

.srv_process_cta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 34px;
}

.srv_link_dark {
    font-family: 'Tenor Sans', sans-serif;
    color: var(--tinta);
    text-decoration: none;
    border-bottom: 1px solid var(--tinta);
    padding-bottom: 3px;
}

.srv_link_dark:hover {
    color: #777777;
    border-color: #777777;
}

/* =========================================================
   --- CATÁLOGO DINÁMICO (Servicios y Presupuesto) ---
   ========================================================= */
.catalog_demo_note {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.1rem;
    color: #8b8c90;
    margin: 0 0 18px 0;
}

.catalog_error {
    font-family: 'Tenor Sans', sans-serif;
    color: #8a1c16;
    background-color: #fbeaea;
    border-left: 4px solid #b3261e;
    padding: 12px 16px;
    border-radius: 4px;
}

.catalog_go {
    margin: 40px 0 0 0;
    text-align: right;
}

/* =========================================================
   --- PRESUPUESTO ---
   ========================================================= */
.quote_page {
    background-color: var(--papel);
}

.quote_intro {
    background-color: var(--tinta);
    color: #ffffff;
    padding: 150px 9% 60px 9%;
}

.quote_title {
    font-family: 'Great Vibes', Georgia, serif;
    font-weight: normal;
    font-size: clamp(3rem, 4.6vw, 4.4rem);
    line-height: 1.05;
    margin: 0 0 16px 0;
}

.quote_lead {
    font-family: 'Tenor Sans', sans-serif;
    font-size: 1.08rem;
    line-height: 1.75;
    color: #d6d6d6;
    max-width: 640px;
    margin: 0;
}

.quote_body {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 50px;
    align-items: start;
    padding: 60px 9% 100px 9%;
}

.quote_items {
    grid-template-columns: repeat(4, 1fr);
}

/* Carrito: se queda visible al bajar por el catálogo */
.cart {
    position: sticky;
    top: 135px;
    background-color: #ffffff;
    padding: 28px 26px 24px 26px;
    border-radius: 6px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1);
}

.cart_title {
    font-family: 'Great Vibes', Georgia, serif;
    font-weight: normal;
    font-size: 2.3rem;
    color: var(--tinta);
    margin: 0 0 12px 0;
    line-height: 1.1;
}

.cart_empty {
    font-family: 'Tenor Sans', sans-serif;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--tinta_suave);
    margin: 0;
}

.cart_items {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 42vh;
    overflow-y: auto;
}

.cart_item {
    padding: 12px 0;
    border-bottom: 1px solid var(--plata_clara);
}

.cart_item_name {
    display: block;
    font-family: 'Tenor Sans', sans-serif;
    font-size: 1rem;
    color: var(--tinta);
    margin-bottom: 8px;
}

.cart_controls {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cart_qty_btn {
    width: 30px;
    height: 30px;
    border: 1px solid var(--plata);
    border-radius: 50%;
    background: #ffffff;
    color: var(--tinta);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.cart_qty_btn:hover {
    border-color: var(--tinta);
}

.cart_qty {
    width: 56px;
    text-align: center;
    font-family: 'Tenor Sans', sans-serif;
    font-size: 0.95rem;
    padding: 5px 4px;
    border: 1px solid #cccccc;
    border-radius: 4px;
}

.cart_remove {
    margin-left: auto;
    background: none;
    border: none;
    font-family: 'Tenor Sans', sans-serif;
    font-size: 0.85rem;
    color: #8b8c90;
    cursor: pointer;
    border-bottom: 1px solid transparent;
}

.cart_remove:hover {
    color: #b3261e;
    border-color: #b3261e;
}

.cart_summary {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cart_summary[hidden] {
    display: none;
}

.cart_row {
    display: flex;
    justify-content: space-between;
    font-family: 'Tenor Sans', sans-serif;
    font-size: 1rem;
    color: var(--tinta);
}

.cart_total_row[hidden] {
    display: none;
}

.cart_date input {
    font-family: 'Tenor Sans', sans-serif;
    font-size: 1rem;
    padding: 10px 12px;
    border: 1px solid #cccccc;
    border-radius: 4px;
    background-color: #fafafa;
}

.cart_clear {
    background: none;
    border: none;
    font-family: 'Tenor Sans', sans-serif;
    font-size: 0.88rem;
    color: #8b8c90;
    cursor: pointer;
    align-self: center;
}

.cart_clear:hover {
    color: var(--tinta);
}

.cart_message {
    font-family: 'Tenor Sans', sans-serif;
    font-size: 0.92rem;
    line-height: 1.55;
    background-color: #eaf5ec;
    border-left: 4px solid #2e7d32;
    color: #1f5a23;
    padding: 10px 12px;
    border-radius: 4px;
    margin: 0;
}

/* =========================================================
   --- COLLAGE DEL INICIO: ENCABEZADOS Y FOTOS SUPERPUESTAS ---
   ========================================================= */
.collage_heading {
    display: flex;
    align-items: baseline;
    gap: 18px;
    margin: 0 0 6px 0;
}

.collage_heading h3 {
    font-family: 'Great Vibes', Georgia, serif;
    font-weight: normal;
    font-size: clamp(2.4rem, 3.4vw, 3.2rem);
    color: var(--tinta);
    margin: 0;
    line-height: 1.1;
    white-space: nowrap;
}

.collage_heading_sub {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.25rem;
    color: #7a7b7f;
    white-space: nowrap;
}

/* Línea plata que conecta el título con el enlace */
.collage_heading_line {
    flex: 1;
    height: 1px;
    background-color: var(--plata);
    transform: translateY(-6px);
    min-width: 40px;
}

.collage_heading_link {
    font-family: 'Tenor Sans', sans-serif;
    font-size: 0.95rem;
    color: var(--tinta);
    text-decoration: none;
    border-bottom: 1px solid var(--tinta);
    padding-bottom: 2px;
    white-space: nowrap;
}

.collage_heading_link:hover {
    color: #777777;
    border-color: #777777;
}

/* Las fotos se montan unas sobre otras */
.collage_track {
    gap: 0;
    padding: 0;
    height: 400px;
}

.collage_item {
    position: relative;
    margin-left: -64px;          /* cada foto pisa a la anterior */
}

/* Tres capas que se repiten: adelante, atrás y en medio */
.collage_item:nth-child(3n+1) { z-index: 3; }
.collage_item:nth-child(3n+2) { z-index: 1; filter: brightness(0.9); }
.collage_item:nth-child(3n)   { z-index: 2; }

.collage_item:hover {
    z-index: 5;
    filter: none;
}

/* Sin espacio entre fotos, la mitad del recorrido es exacta */
@keyframes collageLeft {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes collageRight {
    0%   { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

/* "Panel de control", "Perfil" y "Mis pedidos":
   la línea separadora va debajo de "Mis pedidos", que siempre es la última */
.dropdown_links .dropdown_mis_pedidos {
    padding-bottom: 15px !important;
    border-bottom: 1px solid #dddddd;
}

/* =========================================================
   --- SERVICIOS: ALIADOS EN TRES PANELES ---
   Igual que "Para cada ocasión": tres fotos a lo alto de la
   pantalla, con el nombre de cada aliado en el centro.
   ========================================================= */
.allies_panels {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    height: 100vh;
    background-color: #ffffff;
}

.allies_panels_title {
    position: absolute;
    top: 140px;
    left: 0;
    right: 0;
    z-index: 2;
    text-align: center;
    margin: 0;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: normal;
    font-size: 1.5rem;
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
    pointer-events: none;
}

.ally_panel {
    position: relative;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* Velo oscuro para que el nombre se lea sobre cualquier foto */
.ally_panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    transition: background-color 0.35s ease;
}

.ally_panel:hover::before {
    background-color: rgba(0, 0, 0, 0.32);
}

.ally_name {
    position: relative;
    font-family: 'Great Vibes', Georgia, serif;
    font-size: clamp(3rem, 4.4vw, 4.4rem);
    color: #ffffff;
    text-decoration: none;
    text-align: center;
    padding: 0 20px 6px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.55);
    text-shadow: 0 3px 12px rgba(0, 0, 0, 0.45);
    transition: border-color 0.3s ease;
}

.ally_name:hover {
    border-color: #ffffff;
}

.ally_name:focus-visible {
    outline: 2px solid var(--plata_clara);
    outline-offset: 6px;
}


/* =========================================================
   VERIFICACIÓN DEL CORREO (Sistema de usuarios/Verificar.php)
   ========================================================= */
.verify_email {
    color: #222222;
    font-weight: normal;
    letter-spacing: 0.02em;
}

.auth_field input.verify_code {
    font-family: 'Courier New', monospace;
    font-size: 1.8rem;
    font-weight: bold;
    letter-spacing: 0.5em;
    text-align: center;
    padding: 12px 0 12px 0.5em;   /* compensa el espacio de la última letra */
}

.auth_field input.verify_code::placeholder {
    color: #c4c4c4;
}

.verify_hint {
    font-family: 'Tenor Sans', sans-serif;
    font-size: 0.85rem;
    color: #777777;
    margin: 16px 0 0 0;
}

.verify_actions {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #e5e5e5;
}

.verify_actions form {
    margin: 0;
}

.verify_link {
    font-family: 'Tenor Sans', sans-serif;
    font-size: 0.95rem;
    font-weight: bold;
    color: #222222;
    background: none;
    border: none;
    border-bottom: 1px solid #222222;
    padding: 0;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.verify_link:hover:not(:disabled) {
    color: #777777;
    border-color: #777777;
}

.verify_link:disabled {
    color: #999999;
    border-color: transparent;
    cursor: default;
    font-weight: normal;
}

.verify_link_muted {
    font-weight: normal;
    color: #666666;
    border-color: #bbbbbb;
}

/* =========================================================
   PERFIL (Sistema de usuarios/Perfil.php)
   ========================================================= */
.auth_card.profile_card {
    max-width: 860px;
    text-align: left;
}

.profile_card .auth_title,
.profile_card .auth_subtitle {
    text-align: center;
}

.profile_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 6px;
}

.profile_block + .profile_block {
    border-left: 1px solid #e5e5e5;
    padding-left: 40px;
}

.profile_heading {
    font-family: 'Bebas Neue', sans-serif;
    font-weight: normal;
    font-size: 1.35rem;
    letter-spacing: 0.06em;
    color: #222222;
    margin: 0 0 16px 0;
}

.profile_data {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.profile_data dt {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.95rem;
    letter-spacing: 0.06em;
    color: #777777;
}

.profile_data dd {
    margin: 2px 0 0 0;
    font-family: 'Tenor Sans', sans-serif;
    font-size: 1rem;
    color: #222222;
    overflow-wrap: anywhere;
}

.profile_badge {
    display: inline-block;
    margin-left: 6px;
    font-size: 0.75rem;
    padding: 2px 9px;
    border-radius: 30px;
    background-color: #eeeeee;
    color: #666666;
    white-space: nowrap;
}

.profile_badge_ok {
    background-color: #eaf5ec;
    color: #1f5a23;
}

.profile_card .auth_form {
    gap: 14px;
}

/* =========================================================
   INICIO: LLAMADO A LA ACCIÓN (después de la portada)
   ========================================================= */
.home_cta {
    background-color: #ffffff;
    text-align: center;
    padding: 50px 8% 30px 8%;
}

.home_cta_kicker {
    display: inline-block;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.05rem;
    letter-spacing: 0.22em;
    color: var(--plata);
}

.home_cta_title {
    font-family: 'Great Vibes', Georgia, serif;
    font-weight: normal;
    font-size: clamp(3rem, 4.6vw, 4.4rem);
    color: var(--tinta);
    margin: 4px 0 0 0;
    line-height: 1.1;
}

.home_cta_text {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.35rem;
    color: var(--tinta_suave);
    margin: 8px auto 0 auto;
    max-width: 620px;
}

.home_cta_steps {
    list-style: none;
    margin: 44px auto 0 auto;
    padding: 0;
    max-width: 1000px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.home_cta_steps li {
    position: relative;
    padding: 0 28px;
}

/* Línea plateada entre un paso y el siguiente */
.home_cta_steps li + li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 1px;
    background-color: var(--plata_clara);
}

.home_cta_num {
    display: block;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.8rem;
    line-height: 1;
    color: var(--plata);
}

.home_cta_steps h3 {
    font-family: 'Tenor Sans', sans-serif;
    font-weight: normal;
    font-size: 1.15rem;
    color: var(--tinta);
    margin: 10px 0 6px 0;
}

.home_cta_steps p {
    font-family: 'Tenor Sans', sans-serif;
    font-size: 0.95rem;
    line-height: 1.55;
    color: #666666;
    margin: 0;
}

.home_cta_actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 46px;
}

/* Botón secundario: contorno, se rellena al pasar el ratón */
.main_button.home_cta_secondary {
    background-color: #ffffff;
    color: var(--tinta);
}

.main_button.home_cta_secondary:hover {
    background-color: var(--tinta);
    color: #ffffff;
}

/* Perfil compacto: todo cabe en una pantalla sin desplazarse */
.auth_background.profile_background {
    min-height: 100vh;
    padding: 148px 20px 16px 20px;
    align-items: flex-start;
}

.profile_actions .auth_check {
    white-space: nowrap;
}

/* Pantallas bajas: un poco más compacto todavía */
@media (max-height: 660px) {
    .auth_background.profile_background { padding-top: 138px; }
    .profile_card .auth_title { font-size: 2.3rem; }
    .profile_card .profile_data { gap: 8px; }
    .profile_card .auth_form { gap: 8px; }
    .profile_card .auth_field input { padding: 7px 12px; }
}

.auth_card.profile_card {
    padding: 30px 40px 26px 40px;
}

.profile_card .auth_title {
    font-size: 2.7rem;
    margin-top: 2px;
}

.profile_card .auth_subtitle {
    margin: 2px 0 16px 0;
}

.profile_card .auth_alert {
    margin-bottom: 14px;
    padding-top: 9px;
    padding-bottom: 9px;
}

.profile_card .profile_heading {
    margin-bottom: 12px;
}

.profile_card .profile_data {
    gap: 12px;
}

.profile_card .auth_form {
    gap: 10px;
}

.profile_card .auth_field {
    gap: 4px;
}

.profile_card .auth_field input {
    padding: 9px 12px;
}

.profile_actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 4px;
}

.profile_actions .auth_button {
    width: auto;
    margin: 0;
    padding: 11px 34px;
}

.profile_muted {
    color: #999999;
    font-style: italic;
}

/* =========================================================
   REGISTRO: teléfono con selector de código de país
   ========================================================= */
.phone_field {
    position: relative;
    display: flex;
    gap: 8px;
}

.phone_field input[type=tel] {
    flex: 1;
    min-width: 0;
}

.phone_country {
    position: relative;
    flex-shrink: 0;
}

.phone_country_btn {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 10px 0 12px;
    border: 1px solid #cccccc;
    border-radius: 4px;
    background-color: #fafafa;
    color: #222222;
    font-family: 'Tenor Sans', sans-serif;
    font-size: 1rem;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.phone_country_btn:hover,
.phone_country_btn[aria-expanded="true"] {
    border-color: #222222;
    background-color: #ffffff;
}

.phone_country_btn:focus-visible {
    outline: 2px solid #222222;
    outline-offset: 1px;
}

.phone_flag {
    width: 22px;
    height: 16.5px;
    border-radius: 2px;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
    flex-shrink: 0;
}

.phone_chevron {
    width: 14px;
    height: 14px;
    color: #777777;
}

.phone_menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 50;
    width: 300px;
    background-color: #ffffff;
    border: 1px solid #dddddd;
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    padding: 8px;
    box-sizing: border-box;
}

.phone_menu[hidden] {
    display: none;
}

.phone_search {
    width: 100%;
    box-sizing: border-box;
    font-family: 'Tenor Sans', sans-serif;
    font-size: 0.92rem;
    padding: 8px 10px;
    border: 1px solid #cccccc;
    border-radius: 4px;
    margin-bottom: 6px;
}

.phone_search:focus {
    outline: none;
    border-color: #222222;
}

.phone_list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 230px;
    overflow-y: auto;
}

.phone_option {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border: none;
    border-radius: 4px;
    background: none;
    font-family: 'Tenor Sans', sans-serif;
    font-size: 0.9rem;
    color: #222222;
    text-align: left;
    cursor: pointer;
}

.phone_option:hover,
.phone_option:focus {
    background-color: #f1f1f1;
    outline: none;
}

.phone_option[aria-selected="true"] {
    background-color: #ececec;
    font-weight: bold;
}

/* Línea bajo Venezuela, que va fija arriba */
.phone_list li:first-child {
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 4px;
    margin-bottom: 4px;
}

.phone_option_name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.phone_option_code {
    color: #777777;
    font-size: 0.85rem;
}

.phone_empty {
    margin: 10px 4px;
    font-family: 'Tenor Sans', sans-serif;
    font-size: 0.88rem;
    color: #777777;
}

/* =========================================================
   INICIO DE SESIÓN / REGISTRO SIN MENÚ
   La tarjeta queda centrada en una sola pantalla y arriba
   a la izquierda hay un enlace para volver al sitio.
   ========================================================= */
.auth_background.auth_sin_menu {
    min-height: 100vh;
    padding: 40px 20px 12px 20px;
    align-items: center;
}

.auth_back {
    position: fixed;
    top: 18px;
    left: 22px;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px 8px 12px;
    border-radius: 30px;
    background-color: rgba(20, 20, 20, 0.55);
    color: #ffffff;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.15rem;
    letter-spacing: 0.06em;
    text-decoration: none;
    backdrop-filter: blur(4px);
    transition: background-color 0.2s ease;
}

.auth_back:hover {
    background-color: rgba(20, 20, 20, 0.8);
}

.auth_back svg {
    width: 18px;
    height: 18px;
}

.auth_sin_menu .auth_card {
    padding: 38px 42px 28px 42px;
}

.auth_sin_menu .auth_subtitle {
    margin-bottom: 22px;
}

/* =========================================================
   REGISTRO COMPACTO (una columna, cabe en una pantalla)
   ========================================================= */
.auth_registro.auth_sin_menu {
    padding-top: 30px;
}

.auth_registro .auth_card {
    padding: 28px 42px 16px 42px;
}

.auth_registro .auth_title {
    font-size: 2.5rem;
    margin-top: 10px;
}

.auth_registro .auth_subtitle {
    margin: 0 0 12px 0;
    font-size: 0.9rem;
}

.auth_registro .auth_form {
    gap: 8px;
}

.auth_registro .auth_field {
    gap: 4px;
}

.auth_registro .auth_field label {
    font-size: 1.05rem;
}

.auth_registro .auth_field input {
    padding: 7px 12px;
}

.auth_registro .auth_alert {
    margin-bottom: 10px;
    padding: 7px 12px;
    font-size: 0.88rem;
}

.auth_registro .auth_switch {
    margin-top: 12px;
    padding-top: 10px;
}

/* "Mostrar contraseñas" y el botón en la misma línea */
.auth_actions_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 4px;
}

.auth_actions_row .auth_check {
    white-space: nowrap;
}

.auth_actions_row .auth_button {
    width: auto;
    margin: 0;
    padding: 11px 18px;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Menú desplegable: "Registro" debajo de "Inicio de sesión"
   (la línea separadora pasa a ir debajo de "Registro") */
.dropdown_links .dropdown_login.con_registro {
    padding-bottom: 0 !important;
    border-bottom: none;
}

.dropdown_links .dropdown_registro {
    padding-bottom: 15px !important;
    border-bottom: 1px solid #dddddd;
}

/* =========================================================
   AJUSTES PUNTUALES
   ========================================================= */

/* Menú: dos grupos de enlaces, uno a cada lado del logo, a la misma distancia */
.nav_links {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}

.nav_group {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav_group_left {
    justify-content: flex-end;
}

.nav_group_right {
    justify-content: flex-start;
}

.nav_spacer {
    display: block;
}

/* Puntos del carrusel: los no seleccionados, rellenos de gris claro translúcido */
.dot {
    background-color: rgba(215, 215, 215, 0.6);
    border-color: transparent;
}

.dot.active,
.dot:hover {
    border-color: #ffffff;
}

/* Aliados: los paneles caben justo debajo del menú (no se corta la foto)
   y el título va un poco más arriba */
.allies_panels {
    height: calc(100vh - 80px);
}

.allies_panels_title {
    top: 64px;
}

/* =========================================================
   TIPOGRAFÍA POPPINS (textos secundarios) Y COLORES DEL LOGO
   Por ahora: barra de menú, menú desplegable y subtítulos
   de la portada del inicio.
   ========================================================= */
.nav_menu a {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.dropdown_links a {
    font-family: 'Poppins', sans-serif !important;
    font-size: 15px !important;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--negro_logo) !important;
}

.dropdown_links a:hover {
    color: var(--rosa_oscuro) !important;
}

.user_name {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--negro_logo);
}

/* "Cerrar sesión" sigue en rojo */
.dropdown_links .dropdown_logout a {
    color: #b3261e !important;
}

.hero_intro {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    letter-spacing: 0.02em;
    margin-bottom: 15px;   /* 10 px más de separación con el título */
}

.subtitle {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    letter-spacing: 0.04em;
}

/* Galería: el título "Momentos que hemos acompañado" centrado en el espacio blanco */
.gal_section {
    padding: 68px 9% 68px 9%;
}

/* =========================================================
   PERFIL: cambiar el teléfono
   ========================================================= */
.visually_hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.profile_link {
    background: none;
    border: none;
    padding: 0;
    margin-left: 10px;
    font-family: 'Tenor Sans', sans-serif;
    font-size: 0.85rem;
    color: var(--rosa_oscuro);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.profile_link:hover {
    color: var(--negro_logo);
}

.profile_link:focus-visible {
    outline: 2px solid var(--rosa_medio);
    outline-offset: 2px;
    border-radius: 2px;
}

.profile_phone_edit {
    margin-top: 6px;
}

.profile_phone_form .phone_field input[type=tel] {
    padding: 9px 12px;
}

.profile_phone_actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}

.profile_phone_actions .profile_link {
    margin-left: 6px;
}

.main_button.profile_small_button {
    margin: 0;
    padding: 8px 24px;
    font-size: 0.85rem;
}

.profile_field_error {
    margin: 6px 0 0 0;
    font-size: 0.82rem;
    color: #a1281f;
}

/* =========================================================
   PRESUPUESTO: aviso después de enviar la solicitud
   ========================================================= */
.cart > .cart_message {
    margin-top: 16px;
}

.cart_message a {
    color: inherit;
    font-weight: bold;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cart_message.cart_message_error {
    background-color: #fdecea;
    border-left-color: #b3261e;
    color: #8c1d18;
}

.cart_submit:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* =========================================================
   PRESUPUESTO: disponibilidad para la fecha del evento
   (lo ya encargado para ese día no se puede volver a pedir)
   ========================================================= */
/* Artículo sin unidades libres ese día: en gris */
.srv_items li.srv_item_agotado .srv_item_img {
    filter: grayscale(1);
    opacity: 0.45;
}

.srv_items li.srv_item_agotado h3,
.srv_items li.srv_item_agotado p {
    color: #b3b4b8;
}

.srv_add:disabled {
    color: #9a9ba0;
    border-bottom-color: transparent;
    cursor: not-allowed;
}

.srv_quedan {
    font-family: 'Tenor Sans', sans-serif;
    font-style: normal;
    font-size: 0.82rem;
    color: #8c1d18;
}

/* En el carrito: el artículo que no alcanza, con su aviso en rojo */
.cart_item.cart_item_sin_fecha .cart_item_name {
    color: #8c1d18;
}

.cart_item_aviso {
    font-family: 'Tenor Sans', sans-serif;
    font-size: 0.84rem;
    line-height: 1.45;
    color: #b3261e;
    margin: 8px 0 0 0;
}

.cart_aviso_fecha {
    font-family: 'Tenor Sans', sans-serif;
    font-size: 0.9rem;
    line-height: 1.5;
    background-color: #fdecea;
    border-left: 4px solid #b3261e;
    color: #8c1d18;
    padding: 10px 12px;
    border-radius: 4px;
    margin: 4px 0 14px 0;
}

.cart_submit:disabled:not(:empty) {
    cursor: not-allowed;
}

/* =========================================================
   MIS PEDIDOS (Sistema de usuarios/MisPedidos.php)
   Mismo encabezado que Presupuesto; los pedidos en una tabla
   sencilla, parecida a la del panel de control.
   ========================================================= */
.orders_page {
    min-height: 100vh;
}

.orders_body {
    padding: 44px 9% 80px 9%;
}

.orders_filters {
    margin-bottom: 22px;
}

.orders_filters .srv_filter {
    text-decoration: none;
}

.orders_card {
    background-color: #ffffff;
    border: 1px solid #e3e3e3;
    border-radius: 8px;
    overflow-x: auto;
}

.orders_table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Tenor Sans', sans-serif;
    font-size: 0.97rem;
    color: var(--tinta);
}

.orders_table > thead th {
    font-family: 'Bebas Neue', sans-serif;
    font-weight: normal;
    font-size: 1rem;
    letter-spacing: 0.06em;
    color: #8b8c90;
    text-align: left;
    padding: 14px 18px;
    border-bottom: 1px solid #e3e3e3;
    background-color: #fafafa;
    white-space: nowrap;
}

.orders_row > td {
    padding: 15px 18px;
    border-bottom: 1px solid #eeeeee;
    vertical-align: middle;
}

.orders_row:hover > td,
.orders_row.is_open > td {
    background-color: #fcfafb;
}

.orders_table tbody tr:last-child > td {
    border-bottom: none;
}

.orders_code {
    font-weight: bold;
    white-space: nowrap;
}

.orders_num {
    text-align: right !important;
    white-space: nowrap;
}

.orders_muted {
    color: #8b8c90;
}

.orders_deleted {
    font-style: italic;
}

.orders_phone {
    display: block;
    font-size: 0.85rem;
    color: #8b8c90;
}

.orders_phone:hover {
    color: var(--rosa_oscuro);
}

.orders_toggle {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--rosa_oscuro);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    white-space: nowrap;
}

.orders_toggle:hover {
    color: var(--tinta);
}

/* Estado del pedido */
.order_status {
    display: inline-block;
    font-size: 0.82rem;
    padding: 4px 12px;
    border-radius: 30px;
    white-space: nowrap;
}

.order_status_presupuestado { background-color: #f6e9ee; color: #8a4d62; }
.order_status_encargado     { background-color: #fff1d6; color: #7a5200; }
.order_status_entregado     { background-color: #eaf5ec; color: #1f5a23; }
.order_status_cancelado     { background-color: #eeeeee; color: #666666; text-decoration: line-through; }

/* Detalle con los artículos */
.orders_detail > td {
    background-color: #fcfafb;
    padding: 4px 18px 20px 18px;
    border-bottom: 1px solid #eeeeee;
}

.orders_items {
    width: 100%;
    max-width: 720px;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.orders_items th {
    font-family: 'Bebas Neue', sans-serif;
    font-weight: normal;
    font-size: 0.92rem;
    letter-spacing: 0.06em;
    color: #8b8c90;
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid #e3e3e3;
}

.orders_items td {
    padding: 8px 10px;
    border-bottom: 1px solid #f0f0f0;
}

.orders_items tfoot td {
    border-bottom: none;
    font-weight: bold;
    padding-top: 12px;
}

.orders_empty {
    text-align: center;
    padding: 50px 20px;
    font-family: 'Tenor Sans', sans-serif;
    color: #666666;
}

.orders_empty .main_button {
    display: inline-block;
    margin-top: 8px;
    text-decoration: none;
}

.orders_hint {
    font-family: 'Tenor Sans', sans-serif;
    font-size: 0.9rem;
    color: #8b8c90;
    margin: 16px 0 0 0;
}

.orders_hint a {
    color: var(--rosa_oscuro);
}

@media (max-width: 760px) {
    .orders_body { padding: 30px 16px 60px 16px; }
    .orders_row > td, .orders_table > thead th { padding: 12px; }
}

/* =========================================================
   PRESUPUESTO SIN SESIÓN: aviso para entrar o crear cuenta
   ========================================================= */
.quote_body[hidden],
.quote_login[hidden] {
    display: none;
}

.quote_login {
    padding: 60px 9% 90px 9%;
}

.quote_login_card {
    max-width: 620px;
    margin: 0 auto;
    background-color: #ffffff;
    border: 1px solid #e3e3e3;
    border-radius: 8px;
    padding: 40px 44px;
    text-align: center;
}

.quote_login_title {
    font-family: 'Tenor Sans', sans-serif;
    font-weight: normal;
    font-size: 1.5rem;
    color: var(--tinta);
    margin: 0 0 12px 0;
}

.quote_login_text {
    font-family: 'Tenor Sans', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: #666666;
    margin: 0 0 26px 0;
}

.quote_login_actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.quote_login_actions .main_button {
    text-decoration: none;
}

.main_button.quote_login_secondary {
    background-color: transparent;
    color: var(--tinta);
    border: 2px solid var(--tinta);
}

.main_button.quote_login_secondary:hover {
    background-color: var(--tinta);
    color: #ffffff;
}

@media (max-width: 640px) {
    .quote_login { padding: 40px 16px 70px 16px; }
    .quote_login_card { padding: 30px 22px; }
}

/* Mis pedidos: descarga del PDF, desglose y nota */
.orders_pdf_cell {
    text-align: right;
    white-space: nowrap;
}

.orders_pdf {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.88rem;
    color: var(--tinta);
    text-decoration: none;
    border: 1px solid var(--plata);
    border-radius: 30px;
    padding: 5px 13px;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.orders_pdf svg {
    width: 15px;
    height: 15px;
}

.orders_pdf:hover {
    background-color: var(--tinta);
    border-color: var(--tinta);
    color: #ffffff;
}

.orders_items tfoot .orders_items_sub td {
    font-weight: normal;
    color: #666666;
    padding-top: 6px;
}

.orders_note {
    max-width: 720px;
    margin: 12px 0 0 0;
    font-size: 0.92rem;
    line-height: 1.6;
}

/* Presupuesto: desglose con IVA en el carrito */
.cart_row.cart_row_muted {
    font-size: 0.92rem;
    color: #8b8c90;
}

.cart_row[hidden],
.cart_hint[hidden] {
    display: none;
}

.cart_hint {
    margin: -6px 0 0 0;
    font-family: 'Tenor Sans', sans-serif;
    font-size: 0.82rem;
    color: #8b8c90;
}

.orders_pdf + .orders_pdf {
    margin-left: 6px;
}

/* =========================================================
   REGISTRO: nombre, apellido y cédula o RIF
   Los campos cortos van de dos en dos para que todo
   siga cabiendo en una pantalla.
   ========================================================= */
.auth_registro .auth_card {
    max-width: 600px;
}

.auth_row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.auth_row .auth_field input {
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
}

/* Cédula o RIF: letra + número */
.doc_field {
    display: flex;
    gap: 6px;
}

.doc_field input {
    flex: 1;
    min-width: 0;
}

.doc_tipo {
    flex-shrink: 0;
    font-family: 'Tenor Sans', sans-serif;
    font-size: 1rem;
    padding: 0 8px;
    border: 1px solid #cccccc;
    border-radius: 4px;
    background-color: #fafafa;
    color: #222222;
    cursor: pointer;
}

.doc_tipo:focus {
    outline: none;
    border-color: #222222;
    background-color: #ffffff;
}

@media (max-width: 560px) {
    .auth_row {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

/* Mi perfil: nombre, apellido y cédula o RIF */
.profile_pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.profile_pair[hidden],
.profile_names_view[hidden],
.profile_names_edit[hidden] {
    display: none;
}

.profile_names_form {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}

.profile_names_row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.profile_names_form input[type=text] {
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
    font-family: 'Tenor Sans', sans-serif;
    font-size: 0.95rem;
    padding: 8px 12px;
    border: 1px solid #cccccc;
    border-radius: 4px;
    background-color: #fafafa;
}

.profile_names_form input[type=text]:focus {
    outline: none;
    border-color: #222222;
    background-color: #ffffff;
}

.profile_names_label {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.95rem;
    letter-spacing: 0.06em;
    color: #777777;
    margin-top: 2px;
}

.profile_names_form .doc_tipo {
    font-size: 0.95rem;
}

.profile_names_form .profile_phone_actions {
    margin-top: 2px;
}

.profile_names_form a.profile_link {
    text-decoration: underline;
}

/* La segunda columna es más ancha para que "Miembro desde" quepa en una línea */
.profile_pair {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
}

/* =========================================================
   MENÚ: el nombre del usuario abre "Mi perfil"
   ========================================================= */
.dropdown_links a.dropdown_user {
    display: flex;
    align-items: center;
    gap: 12px;
    text-transform: none;   /* el nombre se ve tal como se escribió, no en mayúsculas */
}

.dropdown_links a.dropdown_user .user_name {
    transition: color 0.3s ease;
}

.dropdown_links a.dropdown_user:hover .user_name {
    color: var(--rosa_oscuro);
}

/* =========================================================
   MIS PEDIDOS: estado del pago (desde "Encargado")
   ========================================================= */
.order_pay_status {
    display: block;
    width: fit-content;
    margin-top: 5px;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 1px 9px;
    border-radius: 10px;
    border: 1px solid currentColor;
    background-color: transparent;
}

.order_pay_status_no_pagado { color: #8a4d62; }
.order_pay_status_abonado   { color: #1d4f91; }
.order_pay_status_pagado    { color: #1f5a23; }

.orders_items_pay td {
    color: #1d4f91;
}

.orders_items_due td {
    font-weight: 600;
}

.orders_paid {
    color: #1f5a23 !important;
    font-weight: 600;
}

/* =========================================================
   PRESUPUESTO: dirección del evento (debajo de la fecha)
   ========================================================= */
.cart_address textarea {
    font-family: 'Tenor Sans', sans-serif;
    font-size: 0.95rem;
    line-height: 1.4;
    padding: 10px 12px;
    border: 1px solid #cccccc;
    border-radius: 4px;
    background-color: #fafafa;
    resize: vertical;
    min-height: 64px;
}

/* =========================================================
   CELULARES (hasta 767 px): BARRA COMPACTA
   · Barra de 56 px: logo pequeño a la izquierda, ☰ a la derecha.
   · Se esconde al bajar y reaparece al subir (js/main.js agrega
     .nav_oculta al <header>).
   · El menú cuelga de la barra (se mueve con ella): tarjeta a la
     derecha, enlaces de 48 px de alto, sin ocupar toda la pantalla.
   ========================================================= */
@media (max-width: 767px) {
    header {
        transition: transform 0.3s ease;
    }

    header.nav_oculta {
        transform: translateY(-100%);
    }

    .nav_menu {
        height: 56px;
        justify-content: space-between;
        padding: 0 8px 0 12px;
        box-sizing: border-box;
    }

    /* Los enlaces de escritorio no caben: todo va en el menú ☰ */
    .nav_links {
        display: none !important;
    }

    /* El logo redondo no se lee a este tamaño: en su lugar va el nombre
       con la letra manuscrita de la marca (Great Vibes) */
    .logo_container {
        position: static;
        transform: none;
        width: auto;
        height: 44px;
        background: none;
        box-shadow: none;
        border-radius: 0;
    }

    .logo_container a {
        align-items: center;
        height: 44px;
        text-decoration: none;
    }

    .nav_logo {
        display: none;
    }

    .nav_marca {
        display: block !important;
        font-family: 'Great Vibes', Georgia, serif;
        font-size: 26px;
        line-height: 1;
        letter-spacing: 0;
        text-transform: none;
        color: #ffffff;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
        white-space: nowrap;
    }

    .menu_toggle {
        position: static;
        transform: none;
        min-width: 44px;
        height: 44px;
        gap: 8px;
        padding: 0 6px;
        border-radius: 22px;
        -webkit-tap-highlight-color: transparent;
    }

    .menu_toggle svg {
        width: 26px;
        height: 26px;
    }

    .toggle_avatar {
        width: 30px;
        height: 30px;
        font-size: 17px;
    }

    /* ☰ ↔ ✕ según esté abierto el menú */
    .menu_toggle .icono_cerrar {
        display: none;
    }

    .nav_menu.menu_abierto .menu_toggle .icono_menu {
        display: none;
    }

    .nav_menu.menu_abierto .menu_toggle .icono_cerrar {
        display: block;
    }

    /* El ✕ dentro de la tarjeta sobra: el botón de la barra la cierra */
    .close_menu {
        display: none;
    }

    .dropdown_menu {
        top: calc(100% + 6px);
        right: 8px;
        left: auto;
        width: min(280px, calc(100vw - 16px));
        min-width: 0;
        max-height: calc(100vh - 56px - 24px);
        max-height: calc(100dvh - 56px - 24px);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 6px 0;
        border-radius: 12px;
        box-sizing: border-box;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    }

    .dropdown_links {
        gap: 0;
    }

    .dropdown_links a {
        display: flex;
        align-items: center;
        min-height: 48px;
        padding: 0 20px;
        box-sizing: border-box;
    }

    .dropdown_links a:active {
        background-color: #f3f1f2;
    }

    /* Separadores: arriba la cuenta, abajo "Cerrar sesión" */
    .dropdown_links .dropdown_login,
    .dropdown_links .dropdown_login.con_registro {
        padding-bottom: 0 !important;
        border-bottom: none;
    }

    .dropdown_links .dropdown_registro,
    .dropdown_links .dropdown_mis_pedidos,
    .dropdown_links .dropdown_login:not(.con_registro):not(:has(+ .dropdown_panel)):not(:has(+ .dropdown_mis_pedidos)) {
        border-bottom: 1px solid #e6e3e5;
        margin-bottom: 4px !important;
        padding-bottom: 4px !important;
    }

    .dropdown_links .dropdown_logout {
        margin-top: 4px;
        padding-top: 4px !important;
        border-top: 1px solid #e6e3e5;
    }

    .dropdown_links a.dropdown_user {
        min-height: 56px;
    }

    /* Fondo atenuado detrás del menú abierto (toque fuera = cerrar) */
    .nav_fondo {
        position: fixed;
        inset: 0;
        z-index: 90;
        background-color: rgba(0, 0, 0, 0.25);
    }

    .nav_fondo[hidden] {
        display: none;
    }
}

/* El nombre manuscrito solo se usa en celulares */
.nav_marca {
    display: none;
}

/* En pantallas más grandes no se usa el fondo atenuado */
@media (min-width: 768px) {
    .nav_fondo {
        display: none !important;
    }
    .menu_toggle .icono_cerrar {
        display: none;
    }
}

/* =========================================================
   CELULARES (hasta 767 px): LAS PÁGINAS EN UNA COLUMNA
   Decisiones de Juan (25/10/2026):
   · Texto + foto: el texto arriba y la foto debajo, centrada.
   · Pasos (Inicio) y "Así trabajamos": uno debajo del otro.
   · Ocasiones y Aliados: carrusel de una foto a todo el ancho,
     con flechas y puntos (js/main.js arma el carrusel).
   · Línea de tiempo de Historia: vertical, línea a la izquierda.
   · Contacto: primero los datos, luego el formulario.
   · Pestañas de Servicios: fila que se desliza de lado.
   ========================================================= */
.mcar_btn,
.mcar_dots {
    display: none;
}

.mcar_track {
    display: contents;   /* en escritorio los paneles siguen en su cuadrícula de 3 */
}

@media (max-width: 767px) {
    /* ---------- Base: secciones en una sola columna ---------- */
    .hist_screen,
    .home_story {
        min-height: 0;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 34px;
        padding: 56px 20px;
    }

    .hist_intro,
    .srv_intro,
    .contact_intro {
        padding-top: 96px;   /* debajo de la barra de 56 px */
        padding-bottom: 50px;
    }

    .hist_text,
    .hist_intro_text,
    .srv_intro_text,
    .home_story_text,
    .contact_info {
        max-width: none;
        flex: 0 1 auto;
    }

    /* La foto siempre después del texto */
    .hist_screen > .hist_print,
    .hist_screen > .ledger,
    .hist_screen > .hist_print_pair,
    .home_story > .hist_print {
        order: 2;
        align-self: center;
    }

    /* Tamaño de las fotos impresas */
    .hist_print,
    .hist_split > .hist_print,
    .hist_print_hero,
    .home_story .hist_print,
    .srv_panel .hist_print {
        width: min(80vw, 320px);
        --foto_alto: min(68vw, 280px);
    }

    .hist_print_wide {
        width: min(86vw, 340px);
        --foto_alto: min(52vw, 210px);
    }

    .hist_print figcaption {
        font-size: 1.35rem;
    }

    /* Títulos y textos */
    .hist_title,
    .srv_title {
        font-size: 2.7rem;
        margin-bottom: 20px;
    }

    .hist_lead,
    .srv_lead {
        font-size: 1rem;
        line-height: 1.75;
    }

    .hist_text h2 {
        font-size: 1.6rem;
    }

    .hist_text p {
        font-size: 0.98rem;
    }

    .hist_quote p,
    .home_story_quote p {
        font-size: 1.3rem !important;
    }

    /* Grupos de botón + enlace: el enlace debajo del botón */
    .srv_intro_actions,
    .srv_process_cta,
    .hist_closing_buttons {
        flex-direction: column;
        align-items: center;
        gap: 22px;
    }

    .srv_intro_actions {
        align-items: flex-start;
    }

    /* ---------- INICIO ---------- */
    .home_cta {
        padding: 44px 20px 24px 20px;
    }

    .home_cta_title {
        font-size: 2.7rem;
    }

    .home_cta_text {
        font-size: 1.2rem;
    }

    .home_cta_steps {
        grid-template-columns: 1fr;
        margin-top: 30px;
        max-width: 340px;
    }

    .home_cta_steps li {
        padding: 22px 0;
    }

    /* La línea entre pasos pasa a ser horizontal */
    .home_cta_steps li + li::before {
        left: 25%;
        right: 25%;
        top: 0;
        bottom: auto;
        width: auto;
        height: 1px;
    }

    .home_cta_actions {
        margin-top: 26px;
    }

    .home_cta_actions .main_button {
        width: 100%;
        max-width: 320px;
        box-sizing: border-box;
        text-align: center;
    }

    /* Encabezados de las filas de fotos: título y enlace arriba, descripción debajo */
    .photo_gallery {
        padding: 40px 20px 30px 20px;
    }

    .collage_heading {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: baseline;
        gap: 2px 14px;
    }

    .collage_heading h3 {
        font-size: 2.1rem;
    }

    .collage_heading_link {
        grid-column: 2;
        grid-row: 1;
    }

    .collage_heading_sub {
        grid-column: 1 / -1;
        white-space: normal;
        font-size: 1.1rem;
    }

    .collage_heading_line {
        display: none;
    }

    /* Las fotos en movimiento, un poco más pequeñas */
    .collage_track {
        zoom: 0.72;
    }

    .home_story_text h2 {
        font-size: 2.6rem;
    }

    .home_story_text p {
        font-size: 1rem;
    }

    /* ---------- SERVICIOS ---------- */
    /* Pestañas: fila que se desliza de lado */
    .srv_tabs_section {
        gap: 26px;
        padding-left: 0;
        padding-right: 0;
    }

    .srv_tabs {
        flex-direction: row;
        gap: 8px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        border-left: none;
        padding: 2px 20px 6px 20px;
        scroll-padding: 0 20px;
    }

    .srv_tabs::-webkit-scrollbar {
        display: none;
    }

    .srv_tab {
        flex-shrink: 0;
        scroll-snap-align: start;
        margin-left: 0;
        border: 1px solid var(--plata_clara);
        border-radius: 999px;
        padding: 8px 16px;
        min-height: 44px;
        font-size: 1.3rem;
        white-space: nowrap;
    }

    .srv_tab.is_active {
        background-color: var(--tinta);
        border-color: var(--tinta);
        color: #ffffff;
    }

    .srv_panels {
        padding: 0 20px;
    }

    .srv_panel {
        flex-direction: column;
        align-items: stretch;
        gap: 34px;
    }

    .srv_panel > .hist_print {
        order: 2;
        align-self: center;
    }

    .srv_panel_text h2 {
        font-size: 1.6rem;
    }

    .srv_panel_text p {
        max-width: none;
    }

    /* Ocasiones y Aliados: carrusel de una foto a todo el ancho */
    .srv_occasions,
    .allies_panels {
        display: block;
        position: relative;
        height: auto;
    }

    .mcar_track {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scrollbar-width: none;
        height: min(78svh, 600px);
    }

    .mcar_track::-webkit-scrollbar {
        display: none;
    }

    .mcar_track > .srv_occasion,
    .mcar_track > .ally_panel {
        flex: 0 0 100%;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .srv_occasion_text {
        padding: 0 22px 64px 22px;
    }

    .srv_occasion_text h3 {
        font-size: 2.7rem;
    }

    .ally_name {
        font-size: 2.8rem;
        margin: 0 56px;   /* deja libres las flechas */
        padding: 0 8px 6px 8px;
    }

    .allies_panels_title {
        top: 28px;
        padding: 0 20px;
        font-size: 1.35rem;
    }

    /* Flechas y puntos (como la portada del Inicio) */
    .mcar_btn {
        display: flex;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 3;
        width: 44px;
        height: 44px;
        border: none;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.35);
        color: #ffffff;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        padding: 0;
    }

    .mcar_btn svg {
        width: 22px;
        height: 22px;
    }

    .mcar_btn[disabled] {
        opacity: 0.35;
        cursor: default;
    }

    .mcar_prev { left: 10px; }
    .mcar_next { right: 10px; }

    .mcar_dots {
        display: flex;
        position: absolute;
        left: 50%;
        bottom: 22px;
        transform: translateX(-50%);
        gap: 4px;
        z-index: 3;
    }

    /* Cada punto es un botón de 28 px para que sea fácil de tocar */
    .mcar_dot {
        width: 28px;
        height: 28px;
        padding: 0;
        border: none;
        background: none;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .mcar_dot::before {
        content: "";
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: rgba(215, 215, 215, 0.6);
        transition: background-color 0.3s ease;
    }

    .mcar_dot[aria-current="true"]::before {
        background-color: #ffffff;
    }

    /* Así trabajamos: un paso debajo del otro, con la línea a la izquierda */
    .srv_process {
        gap: 34px;
    }

    .srv_process_heading {
        font-size: 2.6rem;
    }

    .srv_steps {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .srv_steps::before {
        top: 22px;
        bottom: 22px;
        left: 21px;
        right: auto;
        width: 1px;
        height: auto;
    }

    .srv_steps li {
        display: grid;
        grid-template-columns: 44px 1fr;
        column-gap: 16px;
    }

    .srv_step_n {
        grid-row: 1 / 3;
        margin-bottom: 0;
    }

    .srv_steps h3 {
        align-self: center;
        margin: 10px 0 4px 0;
    }

    /* ---------- HISTORIA ---------- */
    .ledger {
        width: min(86vw, 340px);
        padding: 30px 22px 26px 64px;
        background-image:
            linear-gradient(90deg, transparent 46px, var(--margen_libreta) 46px, var(--margen_libreta) 47px, transparent 47px),
            repeating-linear-gradient(to bottom, transparent 0px, transparent 37px, #d9e2ea 37px, #d9e2ea 38px);
    }

    .hist_growth_top {
        flex-direction: column;
        align-items: stretch;
        gap: 34px;
    }

    .hist_growth_top > .hist_print {
        align-self: center;
    }

    /* Línea de tiempo vertical con la línea a la izquierda */
    .hist_timeline {
        grid-template-columns: 1fr;
        gap: 26px;
        padding: 0 0 0 30px;
        border-top: none;
        border-left: 1px solid var(--plata);
        margin-left: 6px;
    }

    .hist_timeline li::before {
        top: 11px;
        left: -36px;
    }

    .hist_timeline p {
        max-width: none;
    }

    .hist_print_pair {
        flex-direction: column;
        align-items: center;
        gap: 26px;
    }

    .hist_print_pair .hist_print {
        width: min(72vw, 280px);
        --foto_alto: min(60vw, 240px);
    }

    .hist_print_low {
        margin-top: 0;
    }

    /* Misión y visión: una debajo de la otra */
    .hist_mv {
        gap: 30px;
        align-items: stretch;
        text-align: left;
    }

    .hist_mv_heading {
        font-size: 2.6rem;
        text-align: center;
    }

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

    .hist_mv_item {
        padding: 0;
    }

    .hist_mv_item + .hist_mv_item {
        border-left: none;
        border-top: 1px solid var(--plata);
        margin-top: 28px;
        padding-top: 28px;
    }

    .hist_mv_item h3 {
        font-size: 1.4rem;
        margin-bottom: 12px;
    }

    .hist_mv_item p {
        font-size: 1.25rem;
    }

    .hist_closing {
        padding-top: 80px;
        padding-bottom: 80px;
        gap: 0;
        text-align: center;
        align-items: center;
    }

    .hist_closing_quote p {
        font-size: 2rem;
    }

    .hist_closing_text {
        font-size: 1.9rem;
        margin: 40px 0 22px 0;
    }

    /* ---------- CONTACTO ---------- */
    .contact_title {
        font-size: 2.6rem;
    }

    .contact_lead {
        font-size: 1rem;
    }

    .contact_value {
        overflow-wrap: anywhere;
    }

    .contact_form {
        width: 100%;
        padding: 26px 20px 22px 20px;
    }

    .contact_form_row {
        grid-template-columns: minmax(0, 1fr);
    }

    .contact_form input,
    .contact_form select,
    .contact_form textarea {
        width: 100%;
        box-sizing: border-box;
        min-width: 0;
    }

    .contact_address {
        font-size: 1.25rem !important;
    }

    .contact_map {
        width: 100%;
        height: 320px;
        order: 2;
    }

    /* ---------- MI PERFIL: los dos bloques uno debajo del otro ---------- */
    .auth_background.profile_background {
        padding: 80px 12px 30px 12px;
    }

    .auth_card.profile_card {
        padding: 26px 20px 22px 20px;
    }

    .profile_grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .profile_block + .profile_block {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid #e5e5e5;
        padding-top: 22px;
    }

    .profile_block input {
        width: 100%;
        box-sizing: border-box;
        min-width: 0;
    }

    .profile_actions {
        flex-wrap: wrap;
    }
}

/* =========================================================
   CELULARES (hasta 767 px): PRESUPUESTO Y MIS PEDIDOS
   Decisiones de Juan (25/10/2026):
   · Catálogo en 2 columnas; categorías en una fila deslizable.
   · El carrito se abre desde una barra fija abajo
     (js/main.js crea .cart_bar, .cart_fondo y .cart_close).
   · Mis pedidos: cada pedido es una tarjeta.
   ========================================================= */
.cart_bar,
.cart_close,
.cart_fondo {
    display: none;
}

@media (max-width: 767px) {
    /* ---------- Presupuesto ---------- */
    .quote_intro {
        padding: 96px 20px 40px 20px;
    }

    .quote_title {
        font-size: 2.7rem;
    }

    .quote_lead {
        font-size: 1rem;
    }

    .quote_body {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        padding: 26px 16px 100px 16px;   /* el espacio de abajo es para la barra fija */
    }

    /* Categorías: fila que se desliza de lado (igual que las pestañas de Servicios) */
    .quote_catalog .srv_filters,
    .orders_filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        margin: 0 -16px 24px -16px;
        padding: 2px 16px 6px 16px;
    }

    .quote_catalog .srv_filters::-webkit-scrollbar,
    .orders_filters::-webkit-scrollbar {
        display: none;
    }

    .quote_catalog .srv_filter,
    .orders_filters .srv_filter {
        flex-shrink: 0;
        white-space: nowrap;
        min-height: 40px;
        box-sizing: border-box;
    }

    .quote_items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 26px 16px;
    }

    .srv_item_img {
        border-width: 6px;
        margin-bottom: 10px;
    }

    .srv_items h3 {
        font-size: 1rem;
        overflow-wrap: anywhere;
    }

    .srv_add {
        padding-top: 10px;   /* área de toque más alta, la línea sigue igual */
    }

    /* Barra fija abajo */
    .cart_bar {
        display: flex;
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        z-index: 95;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        min-height: 54px;
        padding: 0 20px;
        border: none;
        border-radius: 30px;
        background-color: var(--tinta);
        color: #ffffff;
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);
        cursor: pointer;
        font-family: 'Tenor Sans', sans-serif;
        font-size: 1rem;
        text-align: left;
    }

    .cart_bar_detalle {
        color: var(--plata_clara);
        font-size: 0.92rem;
        white-space: nowrap;
    }

    /* El carrito como hoja que sube desde abajo */
    .cart {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 120;
        max-height: 86dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
        border-radius: 16px 16px 0 0;
        padding: 22px 20px calc(22px + env(safe-area-inset-bottom, 0px)) 20px;
        box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.25);
        transform: translateY(105%);
        visibility: hidden;
        transition: transform 0.3s ease, visibility 0s linear 0.3s;
    }

    body.cart_abierto .cart {
        transform: none;
        visibility: visible;
        transition: transform 0.3s ease;
    }

    .cart_items {
        max-height: none;   /* la hoja ya se desplaza completa */
    }

    .cart_close {
        display: flex;
        position: absolute;
        top: 12px;
        right: 12px;
        width: 44px;
        height: 44px;
        border: none;
        background: none;
        color: var(--tinta);
        justify-content: center;
        align-items: center;
        cursor: pointer;
        padding: 0;
    }

    .cart_close svg {
        width: 24px;
        height: 24px;
    }

    .cart_title {
        padding-right: 44px;
    }

    .cart_qty_btn {
        width: 38px;
        height: 38px;
    }

    .cart_fondo {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 110;
        background-color: rgba(0, 0, 0, 0.4);
    }

    .cart_fondo[hidden] {
        display: none;
    }

    /* Con la hoja abierta no se mueve la página de atrás */
    body.cart_abierto {
        overflow: hidden;
    }

    /* ---------- Mis pedidos: tarjetas ---------- */
    .orders_body {
        padding: 26px 16px 60px 16px;
    }

    .orders_card {
        background: none;
        border: none;
        overflow: visible;
    }

    .orders_table,
    .orders_table > tbody {
        display: block;
    }

    .orders_table > thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .orders_table > tbody > .orders_row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "codigo  estado"
            "fecha   solicitado"
            "items   total"
            "pdf     pdf";
        gap: 10px 12px;
        background-color: #ffffff;
        border: 1px solid #e3e3e3;
        border-radius: 8px;
        padding: 16px;
        margin-top: 12px;
    }

    .orders_row.is_open {
        border-radius: 8px 8px 0 0;
        border-bottom-color: #f0f0f0;
    }

    .orders_table > tbody > .orders_row > td {
        display: block;
        padding: 0;
        border: none;
        background: none !important;
    }

    .orders_code       { grid-area: codigo; align-self: center; font-size: 1.05rem; }
    .orders_estado     { grid-area: estado; text-align: right; }
    .orders_fecha      { grid-area: fecha; }
    .orders_solicitado { grid-area: solicitado; text-align: right; }
    .orders_articulos  { grid-area: items; align-self: end; }
    .orders_total      { grid-area: total; font-size: 1.1rem; font-weight: 600; }
    .orders_pdf_cell   { grid-area: pdf; text-align: left; }

    .orders_sin_pdf {
        display: none !important;   /* sin presupuesto en PDF todavía: la tarjeta no deja el hueco */
    }

    /* Nombre de cada dato encima del valor */
    .orders_row > td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-family: 'Bebas Neue', sans-serif;
        font-size: 0.9rem;
        letter-spacing: 0.06em;
        color: #8b8c90;
        margin-bottom: 1px;
    }

    .orders_estado .order_pay_status {
        margin-left: auto;
    }

    .orders_toggle {
        min-height: 40px;
    }

    .orders_pdf {
        min-height: 40px;
        box-sizing: border-box;
        padding: 6px 16px;
    }

    /* Detalle: pegado debajo de su tarjeta */
    .orders_table > tbody > .orders_detail {
        display: block;
    }

    .orders_table > tbody > .orders_detail[hidden] {
        display: none;
    }

    .orders_detail > td {
        display: block;
        border: 1px solid #e3e3e3;
        border-top: none;
        border-radius: 0 0 8px 8px;
        padding: 6px 12px 16px 12px;
    }

    .orders_items {
        font-size: 0.86rem;
    }

    .orders_items th,
    .orders_items td {
        padding: 7px 4px;
    }
}

/* =========================================================
   PORTADA DEL INICIO: la foto cubre toda la pantalla (solo queda
   el degradado blanco abajo), el subtítulo sube un poco y debajo
   va el botón "Cotizar mi evento", antes de los puntos del carrusel.
   ========================================================= */
.main_background:not(.auth_background) {
    min-height: 100vh;
    min-height: 100svh;
}

.main_background .subtitle {
    padding-top: 24px;
    margin-bottom: 32px;
}


@media (max-width: 900px) {
    .main_background .subtitle {
        padding-top: 14px;
        margin-bottom: 26px;
    }
}


/* Botón "Cotizar mi evento" de la portada: el mismo botón blanco y sobrio,
   con el texto en Cormorant Garamond cursiva (la letra de las citas) */
.hero_cta.main_button {
    position: relative;
    z-index: 10;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 1.55rem;
    text-transform: none;
    letter-spacing: 0.5px;
    line-height: 1;
    padding: 14px 42px 16px 42px;
}

@media (max-width: 767px) {
    .hero_cta.main_button {
        font-size: 1.4rem;
        padding: 12px 34px 14px 34px;
    }
}

/* =========================================================
   CATEGORÍAS DEL CATÁLOGO (Presupuesto): una sola fila oscura
   que ocupa el ancho del catálogo (no empuja al carrito).
   Si no caben, se desliza de lado: el lado con categorías
   escondidas se difumina poco a poco (js/main.js)
   y la categoría elegida queda en el centro.
   ========================================================= */
.quote_catalog {
    min-width: 0;   /* la columna del catálogo no crece con la fila de categorías */
}

.quote_catalog .srv_filters {
    --difumina: 56px;
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    max-width: 100%;
    box-sizing: border-box;
    padding: 6px;
    margin: 0 0 32px 0;
    border-radius: 999px;
    background-color: var(--negro_logo);
    overflow-x: auto;
    scrollbar-width: none;
    scroll-behavior: smooth;
}

.quote_catalog .srv_filters::-webkit-scrollbar {
    display: none;
}

/* Bordes difuminados: la barra se desvanece hacia el fondo de la página.
   js/main.js ajusta --fade_izq / --fade_der según lo que falta por deslizar,
   así el difuminado aparece y desaparece poco a poco. */
.quote_catalog .srv_filters {
    --fade_izq: 0px;
    --fade_der: 0px;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade_izq), #000 calc(100% - var(--fade_der)), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 var(--fade_izq), #000 calc(100% - var(--fade_der)), transparent 100%);
    cursor: grab;
    user-select: none;
}

.quote_catalog .srv_filters.arrastrando {
    cursor: grabbing;
    scroll-behavior: auto;   /* al arrastrar sigue al mouse sin retraso */
}

.quote_catalog .srv_filters.arrastrando .srv_filter {
    pointer-events: none;
}

/* Envoltura con las flechas de los lados (solo en computadora) */
.cat_barra {
    position: relative;
    margin: 0 0 32px 0;
}

.cat_barra .srv_filters {
    margin: 0;
}

.cat_flecha {
    display: none;
}

@media (hover: hover) and (pointer: fine) {
    .cat_flecha {
        display: flex;
        position: absolute;
        top: 50%;
        z-index: 2;
        width: 20px;
        height: 32px;
        padding: 0;
        border: none;
        background: none;
        color: var(--negro_logo);
        justify-content: center;
        align-items: center;
        cursor: pointer;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-50%) scale(0.8);
        transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.2s ease, color 0.2s ease;
    }

    .cat_flecha svg {
        width: 20px;
        height: 20px;
    }

    .cat_flecha.visible {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(-50%) scale(1);
    }

    .cat_flecha:hover {
        color: var(--rosa_oscuro);
    }

    .cat_flecha:focus-visible {
        outline: 2px solid var(--rosa_oscuro);
        outline-offset: 2px;
    }

    /* Un poco por fuera de la barra, sobre el fondo claro */
    .cat_flecha_izq { left: -26px; }
    .cat_flecha_der { right: -26px; }
}

@media (max-width: 767px) {
    .cat_barra {
        margin: 0 0 24px 0;
    }
}

.quote_catalog .srv_filter {
    flex-shrink: 0;
    white-space: nowrap;
    border: none;
    border-radius: 999px;
    padding: 9px 16px;
    min-height: 40px;
    font-size: 0.92rem;
    color: var(--plata_logo);
    background-color: transparent;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.quote_catalog .srv_filter:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.quote_catalog .srv_filter.is_active {
    background-color: var(--rosa_oscuro);
    color: #ffffff;
}

.quote_catalog .srv_filter:focus-visible {
    outline: 2px solid var(--rosa_claro);
    outline-offset: -2px;
}

@media (max-width: 767px) {
    .quote_catalog .srv_filters {
        --difumina: 40px;
        margin: 0 0 24px 0;
        padding: 5px;
    }
}

/* Carrusel de la portada: la foto nueva aparece ENCIMA de la que sale (que se
   queda visible debajo hasta terminar el cambio). Así nunca se asoma el fondo
   de la portada ni otra foto entre una y otra. */
.main_background:not(.auth_background) {
    background: var(--negro_logo);
}

.carousel_slide.active {
    z-index: 2;
}

.carousel_slide.saliendo {
    opacity: 1;
    z-index: 1;
    transition: none;
}

/* Presupuesto: franja negra más baja para que el inicio de sesión
   (o el catálogo) quede más arriba al entrar a la página */
@media (min-width: 768px) {
    main.quote_page:not(.orders_page) .quote_intro {
        padding-top: 128px;
        padding-bottom: 34px;
    }
    main.quote_page:not(.orders_page) .quote_title {
        margin-bottom: 10px;
    }
    .quote_login {
        padding-top: 40px;
    }
}

/* Barra de categorías: el lado que se difumina se corta recto */
.quote_catalog .srv_filters.corte_izq {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.quote_catalog .srv_filters.corte_der {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* En el teléfono la letra es más pequeña para que se lean más categorías */
@media (max-width: 767px) {
    .quote_catalog .srv_filter {
        font-size: 0.8rem;
        padding: 7px 11px;
        min-height: 34px;
    }
    .quote_catalog .srv_filters {
        gap: 2px;
        padding: 4px;
    }
}

/* =========================================================
   SERVICIOS: ALIADOS CON CARRUSEL Y DESCRIPCIÓN
   · En reposo se ven igual que antes: solo el nombre, centrado.
   · Al pasar el mouse el panel crece un poco por encima de los
     otros, aparece la descripción y el nombre sube un poco.
   · Si el mouse se queda 0,75 s, las fotos empiezan a cambiar
     (como la portada del Inicio). js/main.js lo maneja.
   ========================================================= */
.ally_fotos {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.ally_foto {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

/* La foto nueva entra encima; la que sale queda debajo hasta terminar */
.ally_foto.activa {
    opacity: 1;
    z-index: 2;
}

.ally_foto.saliendo {
    opacity: 1;
    z-index: 1;
    transition: none;
}

.ally_panel::before {
    z-index: 1;   /* el velo oscuro va encima de las fotos */
}

.ally_texto {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* La descripción está plegada (no ocupa lugar) hasta pasar el mouse */
.ally_desc {
    max-width: 300px;
    max-height: 0;
    margin: 0;
    overflow: hidden;
    opacity: 0;
    font-family: 'Tenor Sans', sans-serif;
    font-size: 0.95rem;
    line-height: 1.55;
    color: #f1f1f1;
    text-align: center;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    transition: max-height 0.5s ease, margin-top 0.5s ease, opacity 0.4s ease;
}

.allies_panels_title {
    z-index: 4;   /* sobre el panel que crece */
}

@media (hover: hover) {
    .ally_panel {
        transition: transform 0.45s ease, box-shadow 0.45s ease;
    }
    /* Los de las orillas crecen hacia adentro, así no se corta ni sale barra horizontal */
    .ally_panel:first-of-type {
        transform-origin: left center;
    }
    .ally_panel:last-of-type {
        transform-origin: right center;
    }
    .ally_panel:hover {
        transform: scale(1.04);
        z-index: 3;
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
    }
    .ally_panel:hover .ally_desc {
        max-height: 9em;
        margin-top: 16px;
        opacity: 1;
        transition: max-height 0.5s ease, margin-top 0.5s ease, opacity 0.4s ease 0.15s;
    }
}

/* Editor de imágenes: las fotos extra se ven como miniaturas abajo, cada una con su "+" */
body.ei_activo .ally_fotos {
    inset: auto 12px 12px 12px;
    z-index: 3;
    display: flex;
    gap: 8px;
}

body.ei_activo .ally_foto {
    position: relative;
    inset: auto;
    flex: 1;
    aspect-ratio: 4 / 3;
    opacity: 1;
    border: 2px dashed rgba(255, 255, 255, 0.7);
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.15);
}

/* =========================================================
   PRESUPUESTO: "EXPLORAR POR CATEGORÍAS"
   · Computadora: botón de contorno fino a la derecha de la franja negra.
   · Teléfono: "+" a la derecha de la barra de categorías.
   · categorias.html: una tarjeta por categoría con su icono.
   ========================================================= */
.quote_intro_con_boton {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.quote_explorar {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 13px 26px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 999px;
    color: #ffffff;
    text-decoration: none;
    font-family: 'Tenor Sans', sans-serif;
    font-size: 0.95rem;
    letter-spacing: 0.4px;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.quote_explorar svg {
    width: 18px;
    height: 18px;
}

.quote_explorar:hover {
    background-color: #ffffff;
    border-color: #ffffff;
    color: var(--negro_logo);
}

.quote_explorar:focus-visible {
    outline: 2px solid var(--rosa_claro);
    outline-offset: 3px;
}

.cat_mas {
    display: none;
}

@media (max-width: 767px) {
    .quote_explorar {
        display: none;   /* en el teléfono va el "+" junto a la barra */
    }

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

    .quote_catalog .cat_barra .srv_filters {
        flex: 1;
        min-width: 0;
        margin: 0;   /* el espacio de abajo lo pone .cat_barra */
    }

    .cat_mas {
        display: flex;
        flex-shrink: 0;
        justify-content: center;
        align-items: center;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background-color: var(--negro_logo);
        color: #ffffff;
    }

    .cat_mas svg {
        width: 20px;
        height: 20px;
    }

    .cat_mas:active {
        background-color: var(--rosa_oscuro);
    }
}

/* ---------- categorias.html ---------- */
.cats_body {
    padding: 44px 9% 90px 9%;
}

.cats_volver {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 28px;
    color: var(--negro_logo);
    text-decoration: none;
    font-family: 'Tenor Sans', sans-serif;
    font-size: 0.95rem;
}

.cats_volver svg {
    width: 20px;
    height: 20px;
}

.cats_volver:hover {
    color: var(--rosa_oscuro);
}

.cats_grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

.cats_card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    min-height: 210px;
    padding: 28px 18px;
    background-color: #ffffff;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
    color: var(--negro_logo);
    text-decoration: none;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cats_nombre {
    font-family: 'Tenor Sans', sans-serif;
    font-size: 1.15rem;
    line-height: 1.3;
}

.cats_icono {
    width: 64px;
    height: 64px;
    color: var(--rosa_oscuro);
    transition: color 0.3s ease;
}

.cats_card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.1);
}

.cats_card:hover .cats_icono {
    color: var(--rosa_medio);
}

.cats_card:focus-visible {
    outline: 2px solid var(--rosa_oscuro);
    outline-offset: 3px;
}

@media (max-width: 1023px) {
    .cats_grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .cats_body {
        padding: 26px 16px 60px 16px;
    }

    .cats_grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .cats_card {
        min-height: 150px;
        gap: 16px;
        padding: 22px 12px;
    }

    .cats_nombre {
        font-size: 1rem;
    }

    .cats_icono {
        width: 48px;
        height: 48px;
    }
}

@media (min-width: 768px) {
    main.cats_page .quote_intro {
        padding-top: 128px;
        padding-bottom: 34px;
    }
    main.cats_page .quote_title {
        margin-bottom: 10px;
    }
}


/* =========================================================
   CARGA SIN SALTOS
   Las fotos editables no traen foto en el HTML (va en data-original):
   js/main.js pone la correcta (la del panel, o la original) cuando ya
   está descargada, con un fundido. Mientras tanto no se ve nada roto.
   ========================================================= */
img[data-slot]:not([src]) {
    visibility: hidden;
}

/* =========================================================
   HISTORIA: MAPA DEL ESTADO TRUJILLO EN LA PORTADA
   Mapa satelital (fondo transparente) con un pin en Valera.
   La posición del pin está en el HTML (left/top en %).
   ========================================================= */
.hist_mapa {
    margin: 0;
    width: min(100%, 520px);
    justify-self: center;
    text-align: center;
}

.hist_mapa_lienzo {
    position: relative;
}

.hist_mapa_img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.55));
}

.hist_mapa_punto {
    position: absolute;
    width: 0;
    height: 0;
}

/* Pin: la punta toca el punto exacto de Valera */
.hist_mapa_pin {
    position: absolute;
    left: -14px;
    bottom: 0;
    width: 28px;
    height: 40px;
    fill: var(--rosa_oscuro);
    stroke: #ffffff;
    stroke-width: 1.4;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
    animation: hist_pin_cae 0.7s cubic-bezier(.3, 1.4, .5, 1) 0.4s both;
}

.hist_mapa_pin circle {
    fill: #ffffff;
    stroke: none;
}

/* Onda que late alrededor del punto */
.hist_mapa_onda {
    position: absolute;
    left: -16px;
    top: -16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--rosa_claro);
    animation: hist_pin_onda 2.4s ease-out 1.1s infinite;
    opacity: 0;
}

.hist_mapa_etiqueta {
    position: absolute;
    left: 20px;
    bottom: 22px;
    padding: 6px 12px 7px;
    background: #ffffff;
    border-radius: 4px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
    color: var(--negro_logo);
    font-family: 'Tenor Sans', sans-serif;
    font-size: 0.95rem;
    line-height: 1.1;
    white-space: nowrap;
    animation: hist_etiqueta_entra 0.5s ease 1s both;
}

.hist_mapa_etiqueta small {
    display: block;
    margin-top: 2px;
    color: var(--rosa_oscuro);
    font-size: 0.72rem;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.hist_mapa figcaption {
    margin-top: 14px;
    color: #d9d9d9;
    font-family: 'Great Vibes', Georgia, serif;
    font-size: 1.7rem;
}

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

@keyframes hist_pin_onda {
    0%   { transform: scale(0.3); opacity: 0.9; }
    100% { transform: scale(2.2); opacity: 0; }
}

@keyframes hist_etiqueta_entra {
    from { transform: translateX(-8px); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .hist_mapa_pin, .hist_mapa_etiqueta { animation: none; }
    .hist_mapa_onda { display: none; }
}

@media (max-width: 767px) {
    .hist_mapa {
        width: min(100%, 340px);
    }
    .hist_mapa figcaption {
        font-size: 1.45rem;
    }
}

/* Historia, "Una empresa de familia": una sola foto horizontal junto al texto */
.hist_split > .hist_print.hist_print_wide {
    width: min(40vw, 72vh);
    --foto_alto: min(25vw, 44vh);
}

@media (max-width: 767px) {
    .hist_split > .hist_print.hist_print_wide {
        width: min(86vw, 340px);
        --foto_alto: min(52vw, 210px);
    }
}