/* Estilos generales */
html, body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}
*, *::before, *::after {
    box-sizing: inherit;
}

/* Cabecera */
header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 120px;
    /*background-image: url('/static/img/franja.jpg');*/
    background-color: rgba(17, 32, 18, 0.511);
    display: flex;
    align-items: center;
    padding: 0 20px;
    z-index: 1000;
    overflow: visible;   /* permite que el dropdown salga del header */
}

.logo-content {
    width: 8%;
    min-width: 100px;
}
.logo-image {
    height: 110px;
    width: auto;
    max-width: 100%;
    /*Aqui es insertado este estilo desde js, dependiendo de la condición emp_logmov*/
    /*animation: girar 15s linear infinite;*/
}

@keyframes girar {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.empresa-info {
    width: 25%;
    min-width: 280px;
    color: white;
    text-align: center;
    margin: 5px 5px 5px 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.empresa-nombre {
    font-size: 160%;
    padding-bottom: 10px;
}
.empresa-slogan {
    font-size: 18px;
}
.convert {
    flex-grow: 2;
    display: flex;
    flex-direction: row;
    /*
    justify-content: center;
    align-items: center; 
*/
}
/*----------------------------------------------------------*/
/*              Menu de opciones de la web                  */
/*              Estilos generales del menú                  */
/*----------------------------------------------------------*/
.menu-banner {    /* Aqui otorga el espacio "flex-grow-1 para los botones y 2 para login & up */
    flex-grow: 2;
    display: flex;
    justify-content: center;
    align-items: center; 
}
.menu {
    flex-grow: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 30px 25px;
}

.menu-link {
    display: flex;
    align-items: center;
    padding: 10px 17px;
    margin: 0 4px;
    background-color: rgb(123, 122, 122, 0.2);
    border-radius: 1px;
    border-bottom: solid 0.05em rgba(244,234,254,0.3);
    border-right: solid 0.05em rgba(244,234,254,0.3);
    text-decoration: none;
    color: white;
    transition: background-color 0.3s;
    text-wrap: nowrap;
}

.menu-link:hover {
    background-image: url('/static/img/button.jpg');
    background-size:contain;
    border-top: solid 0.05em rgba(19, 19, 20, 0.6);
    border-left: solid 0.05em rgba(19,19,20,0.6);
    border-bottom: none;
    border-right: none;

    color: rgba(119, 120, 121, 0.1); /* El porcentaje bajo 0.1, hace que desaparezca el texto en el botón */
    background-size: 100%;
    padding-left: 0px;
    padding-right: 30px;
    margin: 0 5px;
}

/*----------------------------------------------------------*/
/*         Sub-menú desplegable (dropdown)                  */
/*----------------------------------------------------------*/
.menu-item-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.submenu-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: rgba(81, 81, 116, 0.5);
    border: 1px solid rgba(244, 234, 254, 0.2);
    border-radius: 4px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
    min-width: 160px;
    z-index: 1005;
    padding: 4px 0;
    animation: fadeDropdown 0.18s ease;
}

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

.menu-item-wrapper:hover .submenu-dropdown,
.menu-item-wrapper.open .submenu-dropdown {
    display: block;
}

.submenu-link {
    display: block;
    padding: 10px 18px;
    color: white;
    text-decoration: none;
    font-size: 13px;
    white-space: nowrap;
    transition: background-color 0.2s;
}

.submenu-link:hover {
    background-image: url('/static/img/button.jpg');
    background-size: 100%;
    color: rgba(119, 120, 121, 0.1);
}

.submenu-arrow {
    margin-left: 4px;
    font-size: 10px;
    opacity: 0.7;
    pointer-events: none;
}

/* Mobile: dropdown oculto por defecto, se abre con clase .open (JS click) */
@media screen and (max-width: 768px) {
    /* El wrapper replica exactamente los márgenes de un .menu-link directo */
    .menu-item-wrapper {
        display: flex;
        flex-direction: column;
        width: 80%;            /* igual que .menu-link en mobile */
        margin: 5px 4px 0 4px; /* top=5px, laterales=4px como el base de .menu-link */
    }
    /* El link interior llena el wrapper sin márgenes extra (el wrapper ya los tiene) */
    .menu-item-wrapper > .menu-link {
        width: 100%;
        margin: 0;
        min-height: 40px;
    }
    .submenu-dropdown {
        /* display: none heredado — NO se muestra hasta clase .open */
        position: static;
        box-shadow: none;
        border: none;
        border-left: 2px solid rgba(244, 234, 254, 0.3);
        background-color: rgba(10, 10, 20, 0.5);
        padding: 0;
        animation: none;
        min-width: unset;
        width: 100%;
    }
    .submenu-link {
        padding: 8px 20px;
    }
}

/*----------------------------------*/
/*             User Action          */
/*----------------------------------*/
.user-actions {
    position: fixed;
    display: flex;
    gap: 10px;
    padding: 10px;
    top: 8px;
    width: 98px;
    right: 30px;

}
.user-login, img {
    width: 35px;
    height: 45px;
}
.user-up, img{
    width: 35px;
    height: 45px;
    /*margin-left: 0px;*/
}

/* Menú desplegable para usuario autenticado */
.user-dropdown {
    position: relative;
    display: inline-block;
}

.user-dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: #333;
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.user-dropdown-toggle:hover {
    background-color: rgba(156, 59, 143, 0.1);
}

.user-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background-color: white;
    min-width: 200px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    margin-top: 5px;
    z-index: 1001;
    overflow: hidden;
}

.user-dropdown-menu.show {
    display: block;
}

.user-dropdown-item {
    display: block;
    padding: 12px 16px;
    color: #333;
    text-decoration: none;
    transition: background-color 0.2s;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-size: 14px;
}

.user-dropdown-item:hover {
    background-color: #f5f5f5;
}

.user-dropdown-item.logout {
    color: #dc3545;
    border-top: 1px solid #eee;
}

.user-dropdown-item.logout:hover {
    background-color: #fff5f5;
}

.dropdown-arrow {
    font-size: 15px;
    margin-left: 2px;
    transition: transform 0.3s;
    color: #28f61a;
}

.user-dropdown.active .dropdown-arrow {
    transform: rotate(180deg);
}
/*--------------------------------------------------*/
/* Botón de menú-tipo-sandwich (oculto por defecto) */
/*--------------------------------------------------*/

.menu-toggle {
    background-color: khaki;
    background: none;
    border: none;
    cursor: pointer;
    display: none;
    font-size: 20px;
    max-width: 40px;
    padding: 3px 5px;
    position: fixed;
    top: 85px;
    right: 10px;
    z-index: 1000;
}
/*-------------------------------------------------------------------------------------------*/
/* Estilos del logo, empresa, menu y user, para pantallas Medianas (1080), efecto responsive */
/*-------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1080px) {
    .convert {
        flex-grow: 2;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;    
    }
    .empresa-info {
        width: 90%;
        height: 40px;
        padding: 0 0 15px 0;
    }

    .empresa-nombre {
        font-size: 140%;
        padding: 0 10px;
    }
    .empresa-slogan {
        font-size: 14px;
    }
    .menu {
        margin: 0 10px;
    }
}
/*-------------------------------------------------------------------------------------------*/
/* Estilos del logo, empresa, menu y user, para pantallas Pequeñas (768),  efecto responsive */
/*-------------------------------------------------------------------------------------------*/
@media screen and (max-width: 768px) {

    .empresa-info {
        width: 80%;
        margin: 0 15px;
        padding: 10px;
    }
    .menu-toggle {
        display: block; /* Muestra el botón de menú */
    }

    .vmenu-container {
        position: fixed;
        top: 120px;
        left: -100%; /* Oculta el menú fuera de la pantalla */
        width: 70%;
        height: 100%;
        background-color: rgba(22, 44, 22, 0.8);
        transition: left 0.3s ease;
        overflow-y: auto;
        z-index: 999;
    }
    .vmenu-container.active {
        left: 0; /* Muestra el menú */
    }

    .menu {
        flex-grow: 5;
        display: flex;
        justify-content:start;
        align-items:start;
        margin: 0 1px;
        flex-direction: column;
        margin-top: 5px; /* Espacio vertical para el botón de menú */
        /*background-color: brown;*/
        width: 220px;
        font-size: 18px;
    }

    .menu-link {
        margin-top: 5px 0 0 5% ;
        width: 80%;
        min-height: 40px;
    }
    .user-actions {
        position: relative;
        top: 180px;
        left: -75%;
        display: flex;
        gap: 10px;
        padding: 20px 30px;
        border-inline-start-width: 120px;
        margin-right: 15px;
    }
    
}

@media (min-width: 768px) {
    .articles-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
/*----------------------------------*/
/*             Slideshow            */
/*----------------------------------*/
/* Hero imágenes */
.slideshow {
    position: relative;
    width: 100%;
    margin-top: 0;           /* la sección padre ya es sticky, sin margin extra */
    aspect-ratio: 16/9;
    background-color: rgba(131, 88, 88, 0.25);
    overflow: hidden;
}

.slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.slide.active {
    opacity: 1;
}

.slide-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.slide-overlay {
    position: absolute;
    inset: 0;
    padding: 10px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    background: rgba(0, 0, 0, 0.4);
    color: white;
}

.slide-title {
    display: inline-block;
    background-color: rgba(79, 79, 96, 0.1);
    padding: 4px 8px;
    margin-bottom: 8px;
}

.slide-text {
    display: inline-block;
    background-color: rgba(102, 39, 74, 0.2);
    padding: 4px 8px;
    margin: 0;
}
/*
 * Layouts alternativos para slides (wim_ubicad):
 *   F = Full-Screen  (comportamiento original, sticky)
 *   S = Centrado     (imagen arriba, título y texto debajo)
 *   D = Img Derecha  (texto 45% izq | imagen 55% der)
 *   I = Img Izquierda(imagen 55% izq | texto 45% der)
 *
 * Cuando el slide activo es S/D/I, el JS agrega .mode-alt a .slideshow-section
 * → la sección deja de ser sticky y el slide crece con su contenido.
 */

/* ── mode-alt: sección scrollable cuando el layout es S, D o I ── */
.slideshow-section.mode-alt {
    position: relative;   /* ya no sticky */
    top: auto;
    margin-top: 120px;    /* videos-section se oculta; hay que despejar el header fijo */
}
.slideshow-section.mode-alt .slideshow {
    aspect-ratio: unset;
    height: auto;
    overflow: visible;
}
/* El slide activo alt fluye con su contenido */
.slideshow-section.mode-alt .slide.active.slide-layout-S,
.slideshow-section.mode-alt .slide.active.slide-layout-D,
.slideshow-section.mode-alt .slide.active.slide-layout-I {
    position: relative;
    height: auto;
    opacity: 1;
}

/* ── Imagen dentro de cualquier layout alternativo ── */
.slide-img-wrap {
    overflow: hidden;
}
.slide-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Layout S: imagen arriba + texto debajo ───────────────────── */
.slide-layout-S {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #edf2f0;  /* mismo fondo pastel que contacto */
    padding: 32px 24px;
    box-sizing: border-box;
    gap: 24px;
}
.slide-layout-S .slide-img-wrap {
    width: 100%;
    max-height: 60vh;
    flex: 0 0 auto;
    border-radius: 8px;
    overflow: hidden;
}
.slide-layout-S .slide-img-wrap img {
    width: 100%;
    height: 60vh;
    object-fit: cover;
    display: block;
}
.slide-layout-S .slide-text-wrap {
    width: 100%;
    max-width: 860px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 28px 32px;
    background: linear-gradient(145deg, rgba(8,26,50,0.97) 0%, rgba(20,50,90,0.97) 100%);
    color: #f0f4ff;
    border-radius: 8px;
}

/* ── Layout D: texto izquierda | imagen derecha ───────────────── */
.slide-layout-D {
    display: flex;
    flex-direction: row;
    min-height: 420px;
    background-color: #edf2f0;
    padding: 32px 24px;
    box-sizing: border-box;
    gap: 24px;
}
.slide-layout-D .slide-text-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 36px 44px;
    background: linear-gradient(145deg, rgba(8,26,50,0.97) 0%, rgba(20,50,90,0.97) 100%);
    color: #f0f4ff;
    border-radius: 8px;
}
.slide-layout-D .slide-img-wrap {
    flex: 1;
    min-height: 380px;
    border-radius: 8px;
    overflow: hidden;
}

/* ── Layout I: imagen izquierda | texto derecha ───────────────── */
.slide-layout-I {
    display: flex;
    flex-direction: row;
    min-height: 420px;
    background-color: #edf2f0;
    padding: 32px 24px;
    box-sizing: border-box;
    gap: 24px;
}
.slide-layout-I .slide-img-wrap {
    flex: 1;
    min-height: 380px;
    border-radius: 8px;
    overflow: hidden;
}
.slide-layout-I .slide-text-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 36px 44px;
    background: linear-gradient(145deg, rgba(8,26,50,0.97) 0%, rgba(20,50,90,0.97) 100%);
    color: #f0f4ff;
    border-radius: 8px;
}

/* ── Título y texto en layouts S, D, I ───────────────────────── */
.slide-layout-S .slide-title,
.slide-layout-D .slide-title,
.slide-layout-I .slide-title {
    display: block;
    background-color: transparent;
    font-size: clamp(20px, 2.5vw, 38px);
    margin-bottom: 16px;
    padding: 0;
    border-bottom: 2px solid goldenrod;
}
.slide-layout-S .slide-text,
.slide-layout-D .slide-text,
.slide-layout-I .slide-text {
    display: block;
    background-color: transparent;
    font-size: clamp(14px, 1.6vw, 18px);
    line-height: 1.7;
    padding: 0;
}

/* ── Mobile (≤ 768px): S, D, I apilan verticalmente ─────────── */
@media screen and (max-width: 768px) {
    .slide-layout-S,
    .slide-layout-D,
    .slide-layout-I {
        padding: 20px 16px;
        gap: 16px;
    }
    .slide-layout-D,
    .slide-layout-I {
        flex-direction: column;
        min-height: unset;
    }
    .slide-layout-D .slide-img-wrap,
    .slide-layout-I .slide-img-wrap {
        flex: none;
        width: 100%;
        min-height: unset;
        height: auto;
        order: 1;
    }
    .slide-layout-D .slide-img-wrap img,
    .slide-layout-I .slide-img-wrap img {
        height: 52vw;
    }
    .slide-layout-D .slide-text-wrap,
    .slide-layout-I .slide-text-wrap {
        flex: none;
        width: 100%;
        order: 2;
        padding: 20px 18px 24px;
    }
    .slide-layout-S .slide-img-wrap {
        width: 100%;
        max-height: unset;
    }
    .slide-layout-S .slide-img-wrap img {
        height: 52vw;
    }
    .slide-layout-S .slide-text-wrap {
        width: 100%;
        padding: 18px 20px 24px;
    }
    .slide-layout-S .slide-title,
    .slide-layout-D .slide-title,
    .slide-layout-I .slide-title {
        font-size: clamp(18px, 5vw, 26px);
    }
    .slide-layout-S .slide-text,
    .slide-layout-D .slide-text,
    .slide-layout-I .slide-text {
        font-size: clamp(13px, 3.8vw, 16px);
    }
}

/* ═══════════════════════════════════════════════════════════════ */
/*                    SECCIÓN DE CONTACTO                          */
/* ═══════════════════════════════════════════════════════════════ */

.contact-section {
    display: none;            /* oculta por defecto; JS agrega .active */
    width: 100%;
    min-height: 520px;
    margin-top: 120px;        /* igual que hero sections */
    background-color: #edf2f0;  /* fondo pastel profesional */
    padding: 32px 24px;
    box-sizing: border-box;
}
.contact-section.active {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 24px;
}

/* ── Mapa (izquierda) ────────────────────────────────────────── */
.map-container {
    flex: 1;
    display: flex;
    align-items: stretch;
}
.contact-map {
    width: 100%;
    min-height: 460px;
    background: #e8eaf0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}
.contact-map iframe {
    width: 100%;
    height: 100%;
    min-height: 460px;
    border: none;
    display: block;
}
.contact-no-map {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    padding: 40px 24px;
}
.contact-no-map p {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
    color: #5a6678;
}
.contact-no-map span {
    font-size: 0.78rem;
    color: #9ba8bb;
    font-family: monospace;
    background: #dde3ea;
    padding: 4px 10px;
    border-radius: 4px;
}

/* ── Panel del formulario (derecha) ──────────────────────────── */
.contact-container {
    flex: 1;
    display: flex;
}
.contact-form-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 32px 52px;
    background: linear-gradient(145deg, rgba(8,26,50,0.97) 0%, rgba(20,50,90,0.97) 100%);
    color: #f0f4ff;
    border-radius: 8px;
}

.contact-header {
    margin-bottom: 16px;
}
.contact-header h2 {
    font-size: clamp(22px, 2.8vw, 36px);
    font-weight: 700;
    margin: 0 0 8px;
    color: #ffffff;
    border-bottom: 2px solid goldenrod;
    padding-bottom: 10px;
}
.contact-header p {
    font-size: clamp(13px, 1.4vw, 16px);
    color: rgba(240,244,255,0.75);
    margin: 0;
    line-height: 1.6;
}

/* ── Campos del formulario ───────────────────────────────────── */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.contact-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.contact-field label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(240,244,255,0.70);
    margin-bottom: 0;
    line-height: 1.1;
}
.contact-field .req {
    color: goldenrod;
}
.contact-field input,
.contact-field textarea {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 6px;
    color: #f0f4ff;
    font-size: 0.96rem;
    padding: 7px 12px;
    outline: none;
    transition: border-color 0.25s, background 0.25s;
    resize: vertical;
    margin: -6px 0 2px 0;


}
.contact-field input::placeholder,
.contact-field textarea::placeholder {
    color: rgba(240,244,255,0.35);
}
.contact-field input:focus,
.contact-field textarea:focus {
    border-color: goldenrod;
    background: rgba(255,255,255,0.11);
}

/* ── Honeypot anti-bot (nunca visible para humanos) ─────────── */
.hp-trap {
    position: absolute;
    left: -9999px;
    height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* ── Botón enviar ────────────────────────────────────────────── */
.contact-submit {
    margin-top: 6px;
    padding: 13px 28px;
    background: goldenrod;
    color: #081a32;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: background 0.25s, transform 0.15s;
    align-self: flex-start;
}
.contact-submit:hover  { background: #e6b800; transform: translateY(-1px); }
.contact-submit:active { transform: translateY(0); }
.contact-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* ── Mensaje de respuesta ────────────────────────────────────── */
.contact-feedback {
    min-height: 20px;
    font-size: 0.9rem;
    border-radius: 4px;
    padding: 0;
    transition: all 0.3s;
}
.contact-feedback.success {
    color: #6ee7b7;
    padding: 10px 14px;
    background: rgba(110,231,183,0.12);
    border: 1px solid rgba(110,231,183,0.3);
}
.contact-feedback.error {
    color: #fca5a5;
    padding: 10px 14px;
    background: rgba(252,165,165,0.10);
    border: 1px solid rgba(252,165,165,0.25);
}

/* ── Mobile (≤ 768px): contacto apila vertical ───────────────── */
@media screen and (max-width: 768px) {
    .contact-section {
        padding: 20px 16px;
    }
    .contact-section.active {
        flex-direction: column;
        gap: 16px;
    }
    .map-container {
        width: 100%;
    }
    .contact-map {
        width: 100%;
        min-height: 260px;
    }
    .contact-map iframe {
        min-height: 260px;
    }
    .contact-container {
        width: 100%;
    }
    .contact-form-panel {
        padding: 28px 20px 36px;
    }
}

/* --------------------------------- */
/*              Hero videos          */
/* --------------------------------- */
.videos-section {
    position: sticky;          /* queda fija durante el scroll */
    top: 120px;                /* se pega justo debajo del header fijo */
    z-index: 2;                /* por debajo del contenido que desliza encima */
    width: 100%;
    margin-top: 120px;         /* espacio inicial para el header fijo */
    overflow: hidden;
}

.slideshow-section {
    position: sticky;          /* queda fija durante el scroll */
    top: 120px;                /* se pega en la misma posición que videos */
    z-index: 3;                /* encima de videos-section, debajo del contenido */
}

.hero-section .hero-inner {
    width: 100%;
    aspect-ratio: 16/9;   /* altura automática en función del ancho */
    position: relative;
}

.videos-carousel {
    position: relative;
    width: 100%;
    height: 100%;
}

.video-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateX(100%);
    transition: transform 0.6s ease, opacity 0.6s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-slide.active {
    opacity: 1;
    transform: translateX(0);
}

.video-slide-video {
    width: 100%;
    height: 100%;
    object-fit: cover;   /* llena todo el 16:9 */
    display: block;
    background: #000;
}

.video-slide-overlay {

    position: absolute;
    inset: 0;
    padding: 10px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    background: rgba(0, 0, 0, 0.4);
    color: white;

}
.video-slide-title {
    display: inline-block;
    background-color: rgba(79, 79, 96, 0.1);
    padding: 10px 8px;
    margin-bottom: 8px;
    font-size:xx-large;
}
.slide-text {
    display: inline-block;
    background-color: rgba(39, 39, 102, 0.3);
    padding: 4px 8px;
    margin: 0;
}
/* Posicionar los botones sobre el video */
.videos-prev-btn,
.videos-next-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: transparent;
    color: #fff;
    border: none;
    width: 40px;
    height: 40px;
    cursor: pointer;
    border-radius: 3px;
    border-bottom: solid 0.05em rgba(244,234,254,0.3);
    border-right: solid 0.05em rgba(244,234,254,0.3);

}

.videos-prev-btn { left: 20px; }
.videos-next-btn { right: 20px; }

/*-------------------*/
/* Articles */
/*-------------------*/
.articles-container {
    background-color: rgba(22, 17, 48, 0.97);  /* fondo sólido para cubrir el sticky */
    position: relative;
    z-index: 10;               /* encima de las secciones sticky de medios */
    max-width: 100%;
    min-height: auto;
    margin: 0 auto;
    overflow: hidden;
    padding: 20px 20px 50px 20px;
  }
.articles-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 20px;
}

.article-card {
    display: flex;
    flex-direction: column;
    background-color: beige;
    border-radius: 5px;
    overflow: hidden;
}

.article-image {
    border-radius: 2px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    width: 98%;
    height: 240px;
    margin: auto;
    margin-top: 5px;
    object-fit: cover;
}

.article-title {
    font-size: 18px;
    padding: 5px;
    text-align: center;
    color: rgb(91, 50, 214);
}

.article-text {
    font-size: 14px;
    text-align: justify;
    padding: 0 20px 5px;
}

@media (min-width: 768px) {
    .articles-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
/*----------------------------------------*/
/*              Testimonios               */
/*----------------------------------------*/
.testimonials-container {
    background-color: #BEAB98;
    /*ckground-color: rgb(255, 165, 0, 0.97);  /* fondo sólido para cubrir el sticky */
    position: relative;
    z-index: 10;               /* encima de las secciones sticky de medios */
    max-width: 100%;
    min-height: 180px;
    margin: 0 auto;
    margin-bottom: 1px;
    overflow: hidden;
    padding: 20px 20px 50px 20px;
  }
  
  .testimonials-grid {
    display: flex;
    transition: transform 0.3s ease;
  }
  
  .testimonial-card {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 14px 14px 12px;
    min-height: 200px;
    background-color: beige;
    border-radius: 10px;
    margin-right: 20px;
    /* Flex column: mensaje crece, footer siempre abajo */
    display: flex;
    flex-direction: column;
  }

  .testimonial-text {
    flex: 1;            /* ocupa el espacio disponible */
    margin-bottom: 12px;
    overflow: hidden;   /* no desborda si el texto es muy largo */
  }

   .testimonial-image {
    width: 64px;
    height: 74px;
    border-radius: 50%;
    border: 2px solid cornsilk;
    object-fit: cover;
    position:absolute;
    bottom: -40px;
    margin-left: 25px;
    /*flex-shrink: 80px;     /* no se comprime */
 }
 
  /* Footer fijo al fondo: estrellas + fila persona */
  .testimonial-footer {
    margin-top: auto;
    display: block;
    background-color: #dc3545;
    max-width: 60%;
    position: relative;
  }

/* Fila: foto a la izquierda, nombre/actividad al lado */
  .testimonial-person {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .testimonial-info {
    display: flex;
    position:absolute;
    flex-direction: column;
    justify-content: center;
    width: 60%;
    left: 35%;
  }

  .testimonial-stars {
    font-size: 1.3rem;
    color: #2719e6;
    letter-spacing: 2px;
    margin: 0 0 0 10px;
  }
  .testimonial-name {
    margin: 0 0 3px;
    font-size: 0.95rem;
    font-weight: 600;
  }

  .testimonial-activity {
    margin: 0;
    font-size: 0.82rem;
    color: #ffffff;
  }

 
/* Posicionar los botones para testimonios */
  .prev-btn,
  .next-btn {
    position: absolute;
    top: 95%;
    margin: 0 10px 0 10px;
    transform: translateY(-50%);
    z-index: 10;
    background-color: rgba(205, 144, 31, 0.1);
    font-size: 20px;
    width: 40px;
    height: 35px;
    cursor: pointer;
    border-style: groove;
}

  .prev-btn { left: 10px; }
  .next-btn { right: 10px; }
  
  @media (min-width: 768px) {
    .testimonial-card {
      flex: 0 0 calc(50% - 10px);
      max-width: calc(50% - 10px);
    }
  }
  
  @media (min-width: 1024px) {
    .testimonial-card {
      flex: 0 0 calc(33.333% - 13.333px);
      max-width: calc(33.333% - 13.333px);
    }
  }

@media (min-width: 768px) {
    .testimonials-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
/*-------------------------------*/
/*   Botones flotantes sociales  */
/*-------------------------------*/
/* Barra fija lateral derecha */
.floating-actions {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 1100;
}

.fa-btn {
    width: 38px;
    height: 38px;
    border-radius: 4px 0 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    cursor: pointer;
    border: none;
}

/* Colores por botón */
.fa-fb   { background: #1877f2; }
.fa-tt   { background: #000000; }
.fa-ig   { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.fa-mail { background: #aaab9d; }
.fa-appt { background: #28a745; }
.fa-test { background: #ff9800; }

/* ---- Contador de visitas (solo staff) ---- */
.staff-visit-counter {
    position: fixed;
    bottom: 8px;
    left: 8px;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    font-size: 0.78rem;
    padding: 4px 10px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 6px;
    pointer-events: none;
    backdrop-filter: blur(4px);
}
.svc-sep { opacity: 0.4; }

/* ---- Modal de Testimonios ---- */
#testimonial-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 1200;
    align-items: center;
    justify-content: center;
}
#testimonial-modal .modal-content {
    background: #fff;
    width: 100%;
    max-width: 440px;
    margin: 0 16px;
    padding: 24px;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}
#testimonial-modal h2 {
    margin: 0 0 16px;
    font-size: 1.2rem;
}
#testimonial-modal .close {
    float: right;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    color: #888;
}
#testimonial-form input[type="text"],
#testimonial-form textarea,
#testimonial-form input[type="file"] {
    display: block;
    width: 100%;
    margin-bottom: 12px;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.95rem;
    box-sizing: border-box;
}
#testimonial-form button[type="submit"] {
    width: 100%;
    padding: 10px;
    background: #ff9800;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    margin-top: 4px;
}
#testimonial-form button[type="submit"]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.testimonial-form-msg {
    margin-top: 10px;
    font-size: 0.9rem;
    text-align: center;
}

/* ---- Selector de estrellas (radio → estrellas) ---- */
.star-rating-input {
    margin-bottom: 14px;
}
.star-rating-label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.9rem;
    color: #555;
}
.stars-input {
    display: flex;
    flex-direction: row-reverse;   /* 5→1 para que el truco CSS funcione */
    justify-content: flex-end;
    gap: 4px;
}
.stars-input input[type="radio"] {
    display: none;
}
.stars-input label {
    font-size: 2rem;
    color: #ccc;
    cursor: pointer;
    transition: color 0.15s;
}
/* Estrella seleccionada y sus anteriores (visualmente siguientes por row-reverse) */
.stars-input input[type="radio"]:checked ~ label,
.stars-input label:hover,
.stars-input label:hover ~ label {
    color: #ff9800;
}
/*Esto me sugirio AI, Para lo de Appointment en home.html*/

.modal {
  display: none; /* Oculto por defecto */
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: 10% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 400px;
}

.close {
  color: #aaa;
  float: right;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
}

.slot-btn {
  display: block;
  width: 100%;
  margin-bottom: 5px;
  padding: 6px;
}
/*--------------------------------------------------*/
/* Panel superior de filtros en calendario de citas */
/*--------------------------------------------------*/
.appointments-calendar-section {
  margin-top: 130px;        /* despegar del header fijo */
  padding: 20px;
}

.appointments-calendar-container {
  max-width: 1100px;
  margin: 0 auto;
}

/* Bloque: tipo de cliente + búsqueda */
#clienteTipoWrapper {
  margin: 5px 5px 10px;
  padding: 1px 2px;
  background: rgba(126, 130, 151, 0.05);
  border-radius: 6px;
  border: 1px solid #ddd;
  display: inline-block;
}

#clienteTipoWrapper labelssssss {
  font-size: 14px;
}

#clienteExistenteTop {
  margin-top: 6px;
}

#telefono_existente_top {
  padding: 4px 8px;
  font-size: 14px;
  width: 150px;
}

#btnBuscarCliente {
  padding: 4px 10px;
  font-size: 13px;
  margin-left: 4px;
  cursor: pointer;
}

#clienteDatosResumen {
  margin-top: 4px;
  font-size: 13px;
  color: #333;
}
.form_row
    {
    display: flex;
    width: 99%;
    /*margin: 2px auto;*/
    }
.clienteTitle {
    display: flex; /* Activa el modelo Flexbox */
    justify-content: space-between; /* Separa los elementos al extremo */
    width: 100%; /* Asegura que ocupe todo el ancho */    
    font-size: 18px;
    font-weight: bold;
    margin: 10px 0 5px 5px;
}

/* Modal para nuevo cliente (reutiliza .modal y .modal-content) */
#clienteNuevoModal .modal-content {
  width: 420px;
  max-width: 95%;
}

#clienteNuevoForm label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
}
/*
#clienteNuevoForm input,
#appointmentMemo textarea {
*/
#appointmentMemo textarea {
  width: 100%;
  padding: 4px 6px;
  font-size: 14px;
  box-sizing: border-box;
  line-height: 1.5em; /* Altura de cada línea */
  height: calc(3 * 1.5em + 10px); /* 3 filas + algo de padding */
  resize: vertical; /* Permite cambiar el tamaño solo verticalmente */
}


#btnConfirmarClienteNuevo {
  margin-top: 8px;
  padding: 6px 12px;
  font-size: 14px;
  cursor: pointer;
}


/*-----------------------------------*/
/*          Pie de página            */
/*-----------------------------------*/

.footers-container {
    background-color: rgba(14, 14, 15, 0.98);  /* fondo sólido para cubrir el sticky */
    position: relative;
    z-index: 10;               /* encima de las secciones sticky de medios */
    max-width: 100%;
    min-height: auto;
    margin: 0 auto;
    margin-bottom: 1px;
    overflow: hidden;
    padding: 5px 20px 10px 20px;
    box-sizing: border-box;
  }
  
  .footers-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    padding-top: 20px;
}
  
  .footer-card {
    display: flex;
    flex-direction: column;
    background-color: rgba(14, 15, 1, 0.3);
    border-radius: 5px;
    overflow: hidden;
}
/*
.footer-image {

}
*/
 .footer-title {
    font-size: 22px;
    padding-top: 3px;
    text-align: center;
    color: rgb(255, 252, 255);

} 
.footer-icon {
    font-size: 18px;
    background-color: inherit;
    text-decoration: none;
    box-sizing: border-box;

    border-radius: 3px;
    border-bottom: solid 0.05em rgba(244,234,254,0.3);
    border-right: solid 0.05em rgba(244,234,254,0.3);
}
a.footer-icon:visited {
    color: inherit;
}


.footer-text {
    font-size: 14px;
    text-align: justify;
    padding: 0 20px 5px;
    color:#fbfbfa;
    list-style-type: none;
}
@media (min-width: 768px) {
    .footers-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ═══════════════════════════════════════════════════════════════ */
/*                   PÁGINA DE GALERÍA (/fotos/)                  */
/* ═══════════════════════════════════════════════════════════════ */

.galeria-main {
    margin-top: 120px;          /* clearance del header fijo */
    min-height: calc(100vh - 120px);
    background-color: #16251f;
    padding: 32px 24px 60px;
    box-sizing: border-box;
}

/* ── Encabezado de la página ──────────────────────────────────── */
.galeria-header {
    text-align: center;
    margin-bottom: 32px;
}
.galeria-header h1 {
    font-size: clamp(24px, 3vw, 42px);
    font-weight: 700;
    color: #f4f282;
    margin: 0 0 8px;
    border-bottom: 3px solid goldenrod;
    display: inline-block;
    padding-bottom: 8px;
}
.galeria-header p {
    font-size: clamp(13px, 1.4vw, 16px);
    color: #fefdf3;
    margin: 0;
}

/* ── Botón "Subir foto" en el header de galería ───────────────── */
.galeria-btn-open-upload {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 150px;
    margin-top: 5px;
    padding: 10px 24px;
    background: goldenrod;
    color: #081a32;
    border: none;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.25s, transform 0.15s;
}
.galeria-btn-open-upload:hover { background: #e6b800; transform: translateY(-1px); }

/* ── Modal overlay de subida ──────────────────────────────────── */
.galeria-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    z-index: 1100;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.galeria-modal-overlay.open { display: flex; }

.galeria-modal-box {
    position: relative;
    background: linear-gradient(145deg, rgba(8,26,50,0.98) 0%, rgba(20,50,90,0.98) 100%);
    color: #f0f4ff;
    border-radius: 10px;
    padding: 32px 36px;
    width: 100%;
    max-width: 580px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 8px 40px rgba(0,0,0,0.5);
    animation: modalSlideIn 0.25s ease;
}
@keyframes modalSlideIn {
    from { opacity: 0; transform: translateY(-20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.galeria-modal-box h2 {
    font-size: 1.2rem;
    margin: 0 0 20px;
    border-bottom: 2px solid goldenrod;
    padding-bottom: 8px;
    color: #fff;
}
.galeria-modal-close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: transparent;
    border: none;
    color: rgba(240,244,255,0.6);
    font-size: 1.2rem;
    cursor: pointer;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 4px;
    transition: color 0.2s, background 0.2s;
    width: auto;
}
.galeria-modal-close:hover { color: #fff; background: rgba(255,255,255,0.1); }
.galeria-upload-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.upload-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.upload-field label {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(240,244,255,0.75);
}
.upload-field input[type="text"],
.upload-field input[type="file"],
.upload-field textarea {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 6px;
    color: #f0f4ff;
    font-size: 0.95rem;
    padding: 9px 12px;
    outline: none;
    transition: border-color 0.25s;
}
.upload-field input[type="file"] { padding: 6px 10px; cursor: pointer; }
.upload-field input:focus,
.upload-field textarea:focus    { border-color: goldenrod; }
.upload-field small             { font-size: 0.75rem; color: rgba(240,244,255,0.45); }
.upload-checks                  { flex-direction: row; flex-wrap: wrap; gap: 16px; }
.upload-checks label            { text-transform: none; font-size: 0.88rem; display: flex; align-items: center; gap: 6px; cursor: pointer; }
.upload-actions                 { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.req                            { color: goldenrod; }

.galeria-btn-upload {
    padding: 11px 26px;
    background: goldenrod;
    color: #081a32;
    border: none;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.25s, transform 0.15s;
}
.galeria-btn-upload:hover    { background: #e6b800; transform: translateY(-1px); }
.galeria-btn-upload:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.upload-feedback              { font-size: 0.88rem; border-radius: 4px; }
.upload-feedback.success      { color: #6ee7b7; }
.upload-feedback.error        { color: #fca5a5; }

/* ── Grid de fotos ────────────────────────────────────────────── */
.galeria-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 20px;
}

.galeria-card {
    position: relative;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.12);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}
.galeria-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
.galeria-img-wrap {
    position: relative;
    overflow: hidden;
    height: 300px;
    flex-shrink: 0;
}
.galeria-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.galeria-watermark {
    position: absolute !important;
    bottom: 2%;
    right: 2%;
    width: 10% !important;
    height: auto !important;
    object-fit: contain;
    opacity: 0.30;
    pointer-events: none;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5));
    z-index: 1;
}
.galeria-card-caption {
    padding: 10px 12px;
    background: #fff;
}
.galeria-card-caption strong { display: block; font-size: 0.9rem; color: #1a2e1a; margin-bottom: 4px; }
.galeria-card-caption p      { font-size: 0.8rem; color: #5a6a5a; margin: 0; }

.galeria-btn-edit {
    position: absolute;
    top: 8px;
    right: 44px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(0,80,200,0.85);
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 2;
}
.galeria-card:hover .galeria-btn-edit  { opacity: 1; }
.galeria-btn-edit:hover { background: rgba(0,100,230,1); }

.galeria-btn-delete {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(220,50,50,0.85);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 2;
}
.galeria-card:hover .galeria-btn-delete { opacity: 1; }

.galeria-loading,
.galeria-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: #7a8a7a;
    font-size: 1.05rem;
}

/* ── Lightbox ─────────────────────────────────────────────────── */
.galeria-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.92);
    z-index: 2000;
    align-items: center;
    justify-content: center;
}
.galeria-lightbox.open { display: flex; }

.lightbox-content {
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.lightbox-content img {
    width: auto;
    height: auto;
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 6px;
    display: block;
}
.lightbox-caption {
    color: rgba(255,255,255,0.8);
    font-size: 0.9rem;
    text-align: center;
    max-width: 600px;
}
.lightbox-close,
.lightbox-prev,
.lightbox-next {
    position: absolute;
    background: rgba(255,255,255,0.12);
    border: none;
    color: #fff;
    font-size: 28px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover { background: rgba(255,255,255,0.28); }
.lightbox-close { top: 16px; right: 16px; }
.lightbox-prev  { left: 16px;  top: 50%; transform: translateY(-50%); }
.lightbox-next  { right: 16px; top: 50%; transform: translateY(-50%); }

/* ── Responsive galería ───────────────────────────────────────── */
@media (max-width: 768px) {
    .galeria-main           { padding: 20px 16px 40px; }
    .galeria-modal-box      { padding: 24px 20px; }
    .galeria-grid           { grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); gap: 12px; }
    .galeria-img-wrap       { height: 210px; }
    .lightbox-prev          { left: 8px; }
    .lightbox-next          { right: 8px; }
}

/* ═══════════════════════════════════════════════════════════════ */
/*                   PÁGINA DE VIDEOTECA (/videos/)               */
/* ═══════════════════════════════════════════════════════════════ */

.vpage-main {
    margin-top: 120px;
    min-height: calc(100vh - 120px);
    background: #0d1b2a;
    padding: 32px 24px 60px;
    box-sizing: border-box;
}

/* ── Encabezado ───────────────────────────────────────────────── */
.vpage-header {
    text-align: center;
    margin-bottom: 36px;
}
.vpage-header h1 {
    font-size: clamp(24px, 3vw, 42px);
    font-weight: 700;
    color: #f4f282;
    margin: 0 0 8px;
    border-bottom: 3px solid goldenrod;
    display: inline-block;
    padding-bottom: 8px;
}
.vpage-header p {
    font-size: clamp(13px, 1.4vw, 16px);
    color: rgba(255, 255, 45, 0.55);
    margin: 0;
}

/* ── Botón abrir modal ────────────────────────────────────────── */
.vpage-btn-open-upload {
    position: relative;
    width: 180px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
    padding: 11px 26px;
    background: goldenrod;
    color: #081a32;
    border: none;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.25s, transform 0.15s;
}
.vpage-btn-open-upload:hover { background: #e6b800; transform: translateY(-1px); }

/* ── Modal overlay (subida) ───────────────────────────────────── */
.vpage-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 1100;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.vpage-modal-overlay.open { display: flex; }

.vpage-modal-box {
    position: relative;
    background: linear-gradient(145deg, rgba(8,26,50,0.98) 0%, rgba(20,50,90,0.98) 100%);
    color: #f0f4ff;
    border-radius: 10px;
    padding: 32px 36px;
    width: 100%;
    max-width: 580px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 8px 40px rgba(0,0,0,0.6);
    animation: modalSlideIn 0.25s ease;
}
.vpage-modal-box h2 {
    font-size: 1.2rem;
    margin: 0 0 20px;
    border-bottom: 2px solid goldenrod;
    padding-bottom: 8px;
    color: #fff;
}
.vpage-modal-close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: transparent;
    border: none;
    color: rgba(240,244,255,0.6);
    font-size: 1.2rem;
    cursor: pointer;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 4px;
    transition: color 0.2s, background 0.2s;
    width: auto;
}
.vpage-modal-close:hover { color: #fff; background: rgba(255,255,255,0.1); }

/* ── Grid de videos ───────────────────────────────────────────── */
.vpage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: 24px;
}

/* ── Card de video ────────────────────────────────────────────── */
.vpage-card {
    position: relative;
    background: rgba(255,255,255,0.04);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}
.vpage-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 36px rgba(0,0,0,0.55);
}

/* Thumbnail 16:9 */
.vpage-card-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #111;
    overflow: hidden;
}
.vpage-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s;
}
.vpage-card:hover .vpage-card-thumb img { transform: scale(1.04); }

.vpage-no-poster {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1a2e4a 0%, #0d1b2a 100%);
    font-size: 3.5rem;
    color: rgba(255,255,255,0.18);
}

/* Botón play */
.vpage-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(0,0,0,0.55);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.2s;
    pointer-events: none;
}
.vpage-card:hover .vpage-play-btn {
    background: goldenrod;
    transform: translate(-50%, -50%) scale(1.12);
}
/* Triángulo play */
.vpage-play-btn::after {
    content: '';
    border-style: solid;
    border-width: 11px 0 11px 20px;
    border-color: transparent transparent transparent #fff;
    margin-left: 5px;
}
.vpage-card:hover .vpage-play-btn::after {
    border-color: transparent transparent transparent #081a32;
}

/* Caption */
.vpage-card-caption {
    padding: 12px 16px 14px;
    background: rgba(0,0,0,0.35);
}
.vpage-card-caption strong {
    display: block;
    font-size: 0.9rem;
    color: #f0f4ff;
    margin-bottom: 3px;
}
.vpage-card-caption p {
    font-size: 0.78rem;
    color: rgba(240,244,255,0.55);
    margin: 0;
}

/* Botones de acción (staff) */
.vpage-btn-edit {
    position: absolute;
    top: 8px;
    right: 44px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(0,80,200,0.85);
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 2;
}
.vpage-card:hover .vpage-btn-edit  { opacity: 1; }
.vpage-btn-edit:hover { background: rgba(0,100,230,1); }

.vpage-btn-delete {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(180,0,0,0.85);
    color: #fff;
    font-size: 0.8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 2;
}
.vpage-card:hover .vpage-btn-delete { opacity: 1; }

/* Loading / empty */
.vpage-loading,
.vpage-empty {
    text-align: center;
    color: rgba(240,244,255,0.4);
    padding: 60px 20px;
    font-size: 1.1rem;
    grid-column: 1 / -1;
}

/* ── Player modal ─────────────────────────────────────────────── */
.vpage-player-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.92);
    z-index: 1200;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.vpage-player-overlay.open { display: flex; }

.vpage-player-box {
    position: relative;
    width: 100%;
    max-width: 960px;
}
.vpage-player-box video {
    width: 100%;
    border-radius: 8px;
    display: block;
    background: #000;
    max-height: 80vh;
}
.vpage-player-caption {
    color: rgba(240,244,255,0.65);
    text-align: center;
    margin-top: 12px;
    font-size: 0.95rem;
}
.vpage-player-close {
    position: absolute;
    top: -38px;
    right: 0;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.65);
    font-size: 1.6rem;
    cursor: pointer;
    line-height: 1;
    padding: 4px 8px;
    width: auto;
    border-radius: 4px;
    transition: color 0.2s;
}
.vpage-player-close:hover { color: #fff; }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 768px) {
    .vpage-main   { padding: 20px 16px 40px; }
    .vpage-grid   { grid-template-columns: 1fr; gap: 16px; }
    .vpage-modal-box { padding: 24px 20px; }
    .vpage-player-box video { max-height: 60vh; }
}