/*============================================
  D'CRÁNEO - ESTILOS PERSONALIZADOS
  Diseño basado en referencias de Photoshop
============================================*/

/* ========================
   VARIABLES CSS
======================== */
:root {
    /* Colores principales */
    --dc-beige-bg: #E2CBAB;
    --dc-beige-light: #F2EBE0;
    --dc-dark-brown: #3D3530;
    --dc-dark-brown-2: #2E2820;
    --dc-gold: #D4A533;
    --dc-gold-light: #F5A623;
    --dc-black: #1A1A1A;
    --dc-white: #FFFFFF;

    /* Border radius */
    --dc-radius-hero: 25px;
    --dc-radius-card: 20px;
    --dc-radius-btn: 6px;
    --dc-radius-input: 4px;

    /* Navbar */
    --dc-navbar-width: 120px;

    /* Transiciones */
    --dc-transition: 0.3s ease-out;
}

/* ========================
   ESTILOS BASE
======================== */
body {
    background-color: var(--dc-beige-bg);
}

/* Ocultar elementos cuando sticky está activo - SOLO DESKTOP */
@media (min-width: 992px) {

    .dc-navbar-vertical.hidden,
    .dc-navbar-logo.hidden {
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease-out;
    }
}

/* Padding izquierdo solo en DESKTOP para dejar espacio al navbar sticky */
@media (min-width: 992px) {

    body.sticky-active .dc-hero-section~section,
    body.sticky-active .dc-hero-section~div,
    body.sticky-active .dc-hero-section~main,
    body.sticky-active footer {
        padding-left: 80px;
        /* Ancho del navbar sticky + margen */
        transition: padding-left 0.3s ease-out;
    }
}

/* ========================
   NAVBAR VERTICAL (Hero Section)
======================== */
.dc-hero-section {
    display: grid;
    grid-template-columns: 150px 1fr;
    grid-template-rows: auto 1fr;
    min-height: 100vh;
    background-color: var(--dc-beige-bg);
    padding: 40px 60px 40px 40px;
    /* arriba, derecha, abajo, izquierda */
}

/* Logo arriba izquierda - fuera del slider */
.dc-navbar-logo {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    justify-content: center;
    /* Centrado */
    padding: 0 0 20px 0;
}

.dc-navbar-logo img {
    max-width: 120px;
    /* Logo más grande */
    height: auto;
}

/* Navbar lateral - altura igual al slider */
.dc-navbar-vertical {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Contenido centrado horizontalmente */
    justify-content: space-between;
    padding: 0;
    width: 150px;
    height: 83%;
    align-self: flex-start;
}

/* Contenedor central del navbar (hamburger) - al medio */
.dc-navbar-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    /* Toma espacio restante para centrar verticalmente */
}

/* Menú Hamburguesa - en línea horizontal */
.dc-hamburger-menu {
    display: flex;
    justify-content: center;
}

.dc-hamburger-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: var(--dc-transition);
    transform: rotate(90deg);
    /* Rotado 90 grados */
}

.dc-hamburger-btn.active {
    transform: rotate(0deg);
    /* Vuelve a normal al activarse */
}

.dc-hamburger-btn:hover span {
    background: var(--dc-gold);
}

.dc-hamburger-btn span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--dc-dark-brown);
    transition: var(--dc-transition);
}

/* Texto vertical "Let's go Decráneo madafakas." */
.dc-hero-text-vertical {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    font-weight: 400;
    font-style: italic;
    color: var(--dc-gold);
    letter-spacing: 2px;
    white-space: nowrap;
    opacity: 0.8;
}

/* Iconos de navegación - más juntos */
.dc-navbar-icons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
    /* Al fondo del navbar */
}

.dc-navbar-icons a,
.dc-navbar-icons button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--dc-black);
    background: transparent;
    border: none;
    font-size: 16px;
    cursor: pointer;
    transition: var(--dc-transition);
}

.dc-navbar-icons a:hover,
.dc-navbar-icons button:hover {
    transform: scale(1.1);
    color: var(--dc-gold);
}

/* Badge/contador en iconos */
.dc-navbar-icons .dc-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    background: var(--dc-gold);
    color: var(--dc-white);
    font-size: 9px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ========================
   HERO SLIDER
======================== */
.dc-hero-content {
    grid-column: 2;
    grid-row: 1 /3;
    /* Ocupa ambas filas */
    display: flex;
    justify-content: flex-end;
    /* Slider pegado a la derecha */
    align-items: flex-start;
    /* Slider pegado arriba */
    padding-left: 20px;
    height: 100%;
    /* Forzar altura para que funcione el % del hijo */
}

.dc-hero-slider-wrapper {
    position: relative;
    width: 95%;
    height: 85%;
    border-radius: var(--dc-radius-hero);
    overflow: hidden;
    position: relative;
    background: var(--dc-dark-brown);
}


/* Slide individual */
.dc-hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
}

.dc-hero-slide.active {
    opacity: 1;
}

/* Imagen dentro del slide */
.dc-hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Contenido sobre el slide */
.dc-hero-slide-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: var(--dc-white);
    z-index: 2;
}

.dc-hero-slide-content .dc-hero-tagline {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.dc-hero-slide-content .dc-hero-tagline strong {
    font-weight: 700;
}

/* Flechas de navegación - triangulares */
.dc-hero-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 28px;
    cursor: pointer;
    transition: var(--dc-transition);
    z-index: 10;
    padding: 10px;
}

.dc-hero-nav:hover {
    color: var(--dc-white);
}

.dc-hero-nav.prev {
    left: 25px;
}

.dc-hero-nav.next {
    right: 25px;
}

/* Ocultar puntos del slider original */
.dc-hero-slider .owl-dots,
.dc-hero-slider .slick-dots {
    display: none !important;
}

/* ========================
   RESPONSIVE - DESKTOP GRANDE
======================== */
@media (min-width: 1920px) {
    .dc-hero-slider {
        height: calc(100vh - 40px);
    }

    .dc-hero-slide {
        background-size: cover !important;
    }
}

/* Desktop estándar */
@media (min-width: 1200px) and (max-width: 1919px) {
    .dc-hero-slider {
        height: calc(100vh - 40px);
    }

    .dc-hero-slide {
        background-size: contain !important;
    }
}

/* Laptop */
@media (min-width: 992px) and (max-width: 1199px) {
    .dc-hero-slider {
        height: calc(100vh - 40px);
    }

    .dc-hero-slide {
        background-size: contain !important;
    }
}

/* ========================
   NAVBAR STICKY MOBILE
======================== */
.dc-navbar-sticky {
    display: none;
    /* Oculto en desktop */
    position: fixed;
    top: 0px;
    left: 50%;
    transform: translateX(-50%) translateY(-100px);
    /* Oculto arriba */
    z-index: 1000;
    background: var(--dc-beige-light);
    border-radius: 0 0 20px 20px;
    /* Solo esquinas inferiores */
    padding: 20px 15px 15px 15px;
    /* Más alto verticalmente */
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    /* Menos separación entre logo y hamburger */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-out;
    width: auto;
    min-width: 100px;
    /* Menos ancho */
}

.dc-navbar-sticky.visible {
    transform: translateX(-50%) translateY(0);
    /* Visible */
}

/* Logo en sticky navbar */
.dc-sticky-logo {
    display: flex;
    align-items: center;
}

.dc-sticky-logo img {
    width: 50px;
    height: auto;
}

/* Hamburger en sticky navbar - rotado 90° */
.dc-sticky-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 45px;
    height: 45px;
    background: transparent;
    border: none;
    cursor: pointer;
    transform: rotate(90deg);
    /* Rotado 90 grados */
    transition: var(--dc-transition);
}

.dc-sticky-hamburger span {
    display: block;
    width: 25px;
    height: 3px;
    background: var(--dc-dark-brown);
    transition: var(--dc-transition);
}

.dc-sticky-hamburger:hover span {
    background: var(--dc-gold);
}

/* Mostrar solo en mobile/tablet */
@media (max-width: 991px) {
    .dc-navbar-sticky {
        display: flex;
    }
}

/* ========================
   NAVBAR STICKY DESKTOP
======================== */
.dc-navbar-sticky-desktop {
    display: none;
    /* Oculto por defecto */
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%) translateX(-100%);
    /* Oculto a la izquierda */
    z-index: 1000;
    background: var(--dc-beige-light);
    border-radius: 0 20px 20px 0;
    /* Solo esquinas derechas redondeadas */
    padding: 30px 10px;
    /* Padding fijo para distribuir el contenido */
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-out;
    height: 90vh;
    /* Altura fija para que space-between funcione */
}

.dc-navbar-sticky-desktop.visible {
    transform: translateY(-50%) translateX(0);
    /* Visible */
}

/* Logo en sticky desktop */
.dc-sticky-desktop-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.dc-sticky-desktop-logo img {
    width: 50px;
    height: auto;
}

/* Center container para hamburger */
.dc-sticky-desktop-center {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Hamburger en sticky desktop - rotado 90° */
.dc-sticky-desktop-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    transform: rotate(90deg);
    transition: var(--dc-transition);
}

.dc-sticky-desktop-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--dc-dark-brown);
    transition: var(--dc-transition);
}

.dc-sticky-desktop-hamburger:hover span {
    background: var(--dc-gold);
}

/* Iconos en sticky desktop */
.dc-sticky-desktop-icons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.dc-sticky-desktop-icons a,
.dc-sticky-desktop-icons button {
    color: var(--dc-dark-brown);
    font-size: 18px;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: var(--dc-transition);
}

.dc-sticky-desktop-icons a:hover,
.dc-sticky-desktop-icons button:hover {
    color: var(--dc-gold);
}

/* Mostrar solo en desktop */
@media (min-width: 992px) {
    .dc-navbar-sticky-desktop {
        display: flex;
    }
}

/* ========================
   RESPONSIVE - TABLET
======================== */
@media (max-width: 991px) {
    .dc-hero-section {
        display: flex;
        flex-direction: column;
        padding: 15px;
        min-height: 100vh;
        gap: 10px;
    }

    /* Header mobile: logo izq + hamburger der */
    .dc-navbar-logo {
        order: 1;
        padding: 0;
        justify-content: flex-start;
    }

    .dc-navbar-logo img {
        max-width: 120px;
    }

    /* Navbar se convierte en header horizontal */
    .dc-navbar-vertical {
        order: 2;
        width: 100%;
        height: auto;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        padding: 0;
        position: absolute;
        top: 15px;
        right: 15px;
    }

    /* Ocultar iconos en mobile (van al menú offcanvas) */
    .dc-navbar-icons {
        display: none;
    }

    /* Hamburger visible y alineado a la derecha */
    .dc-navbar-center {
        flex: none;
    }

    .dc-hamburger-btn {
        transform: rotate(90deg);
        width: 90px;
        height: 90px;
        /* Sin rotación en mobile */
    }

    .dc-hamburger-btn span {
        width: 25px;
        height: 3px;
    }

    .dc-hamburger-btn.active {
        transform: rotate(90deg);
    }

    /* Slider ocupa casi toda la pantalla */
    .dc-hero-content {
        order: 3;
        padding: 0;
        flex: 1;
        width: 100%;
        min-height: 0;
        /* Fix para flex shrink */
    }

    .dc-hero-slider-wrapper {
        width: 100%;
        height: calc(100vh - 70px);
        /* Altura total menos header */
        border-radius: 50px;
    }

    .dc-hero-slide img {
        object-fit: cover;
    }

    .dc-hero-slide:nth-child(1) img {
        object-position: 70% 90%;
    }

    .dc-hero-slide:nth-child(2) img {
        object-position: 70% 90%;
    }

    .dc-hero-slide:nth-child(3) img {
        object-position: 68% 90%;
    }

    /* Ocultar flechas en mobile (usar swipe) */
    .dc-hero-nav {
        display: none;
    }
}

/* ========================
   RESPONSIVE - MOBILE
======================== */
@media (max-width: 576px) {
    .dc-hero-section {
        padding: 10px;
        gap: 8px;
    }

    .dc-navbar-logo img {
        max-width: 100px;
    }

    .dc-navbar-vertical {
        top: 10px;
        right: 10px;
    }

    .dc-hamburger-btn {
        width: 70px;
        height: 70px;
    }

    .dc-hamburger-btn span {
        width: 20px;
        height: 3px;
    }

    .dc-hero-slider-wrapper {
        border-radius: 40px;
    }
}

/* ==========================================================================
   OFFCANVAS MENU (HAMBURGER)
   ========================================================================== */

/* Fondo y contenedor principal */
.dc-offcanvas-wrapper {
    background-color: var(--dc-beige-bg);
    height: 100%;
    padding: 30px;
    display: flex;
    flex-direction: column;
}

.offcanvas__area .modal-dialog {
    margin: 0;
    margin-left: auto;
    /* Alinear a la derecha si es sidebar */
    height: 100%;
    max-width: 400px;
    /* Ancho máximo */
}

.offcanvas__area .modal-content {
    border: none;
    border-radius: 0;
    height: 100%;
}

/* Close Button */
.offcanvas__close-btn {
    font-size: 24px;
    color: var(--dc-dark-brown);
    background: none;
    border: none;
    transition: all 0.3s ease;
}

.offcanvas__close-btn:hover {
    color: var(--dc-gold);
    transform: rotate(90deg);
}

/* Mobile Menu Links */
.dc-mobile-menu nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dc-mobile-menu nav ul li {
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(59, 35, 20, 0.1);
    /* Separador sutil */
    padding-bottom: 10px;
}

.dc-mobile-menu nav ul li:last-child {
    border-bottom: none;
}

.dc-mobile-menu nav ul li a {
    font-family: 'Playfair Display', serif;
    /* Elegante */
    font-size: 24px;
    color: var(--dc-dark-brown);
    font-weight: 500;
    display: block;
    transition: color 0.3s ease;
}

.dc-mobile-menu nav ul li a:hover {
    color: var(--dc-gold);
    padding-left: 10px;
    /* Pequeño desplazamiento al hover */
}

/* Actions (Login, Cart, etc) */
.dc-mobile-actions {
    border-top: 1px solid var(--dc-dark-brown);
    padding-top: 30px;
}

.dc-mobile-action-item {
    margin-bottom: 15px;
}

.dc-mobile-action-item a {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: var(--dc-dark-brown);
    display: flex;
    align-items: center;
    gap: 10px;
}

.dc-mobile-action-item a i {
    font-size: 18px;
}

.dc-mobile-action-item a:hover {
    color: var(--dc-gold);
}

/* Social Icons */
.offcanvas__social ul li a {
    color: var(--dc-dark-brown);
    border-color: var(--dc-dark-brown);
}

.offcanvas__social ul li a:hover {
    background-color: var(--dc-dark-brown);
    color: var(--dc-beige-gold);
    border-color: var(--dc-dark-brown);
}