/* =========================================
   ATYC — SCROLL SNAP PREMIUM v2
   Desktop: snap mandatory elegante
   Tablet:  snap proximity + breathing room
   Mobile:  snap OFF, scroll nativo fluido
========================================= */

/* -----------------------------------------
   BASE
----------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    height: 100%;
}

body {
    height: 100%;
    margin: 0;
    /* overflow lo maneja el wrapper en desktop,
     en mobile el body scrollea naturalmente */
    overflow: hidden;
}

body.menu-open {
    overflow: hidden;
}

/* -----------------------------------------
   WRAPPER — Desktop (≥1024px)
   Scroll snap mandatory clásico, funciona bien
----------------------------------------- */
.atyc-snap-wrapper {
    height: 100dvh;
    /* dvh = dynamic viewport height, más correcto que vh */
    overflow-y: scroll;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;

    /* Mejora de rendimiento en GPU */
    will-change: scroll-position;
    -webkit-overflow-scrolling: touch;

    /* Scrollbar elegante en desktop */
    scrollbar-width: thin;
    scrollbar-color: rgba(193, 152, 105, 0.4) transparent;
}

.atyc-snap-wrapper::-webkit-scrollbar {
    width: 3px;    
}

.atyc-snap-wrapper::-webkit-scrollbar-track {
    background: transparent;
}

.atyc-snap-wrapper::-webkit-scrollbar-thumb {
    background: rgba(193, 152, 105, 0.4);
    border-radius: 2px;
}

/* -----------------------------------------
   SECCIONES — Base (Desktop)
----------------------------------------- */
.atyc-snap-section {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    /* Desktop: fuerza sección por sección */
    min-height: 75dvh;
    position: relative;

    /* Overflow visible para contenido que pueda necesitar scroll interno */
    overflow: hidden;

    /* Entrada animada */
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.atyc-snap-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Primera sección siempre visible sin animación */
.atyc-snap-section:first-of-type {
    opacity: 1;
    transform: translateY(0);
}

/* -----------------------------------------
   TABLET — (768px – 1023px)
   Proximity: más suave, más natural
----------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
    body {
        overflow: hidden;
    }

    .atyc-snap-wrapper {
        height: 100dvh;
        /* Proximity en tablet: no atrapa si la sección no encaja bien */
        scroll-snap-type: y proximity;
    }

    .atyc-snap-section {
        scroll-snap-align: start;
        scroll-snap-stop: normal;
        /* ← no mandatory, permite inercia */
        min-height: 100dvh;
    }
}

/* -----------------------------------------
   MOBILE — (≤767px)
   Snap OFF. Scroll nativo fluido.
   El JS también desactiva su lógica de snap.
----------------------------------------- */
@media (max-width: 767px) {

    /* Body y wrapper scrollean normalmente */
    body {
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        /* Momentum scroll nativo de iOS */
    }

    .atyc-snap-wrapper {
        height: auto;
        /* ← ya no es viewport-locked */
        overflow-y: visible;
        /* ← el body toma control */
        overflow-x: hidden;
        scroll-snap-type: none;
        /* ← snap completamente OFF */
    }

    .atyc-snap-section {
        scroll-snap-align: none;
        /* ← sin snap */ 
        scroll-snap-stop: normal;
        min-height: 99svh;
        /* svh = small viewport height, ignora barra del browser */
        overflow: visible;
        /* contenido largo puede respirar */
    }

    /* Animación más sutil en mobile (menos transform, menos jank) */
    .atyc-snap-section {
        opacity: 0;
        transform: translateY(16px);
        /* ← más suave que 24px */
        transition:
            opacity 0.5s ease-out,
            transform 0.5s ease-out;
    }

    .atyc-snap-section.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

    .atyc-snap-section:first-of-type {
        opacity: 1;
        transform: translateY(0);
    }
}

/* -----------------------------------------
   INDICADOR DE PUNTOS — Desktop/Tablet
----------------------------------------- */
.atyc-scroll-indicator {
    position: fixed;
    right: 28px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.atyc-scroll-indicator__dot {
    width: 2px;
    height: 24px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.25);
    border: none;
    padding: 0;
    cursor: pointer;
    pointer-events: auto;
    transition:
        height 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.4s ease;
}

.atyc-scroll-indicator__dot.is-active {
    height: 48px;
    background: rgba(193, 152, 105, 0.95);
}

.atyc-scroll-indicator__dot:hover {
    background: rgba(255, 255, 255, 0.5);
    height: 36px;
}

/* Fondo claro */
.atyc-scroll-indicator[data-theme="light"] .atyc-scroll-indicator__dot {
    background: rgba(0, 0, 0, 0.2);
}

.atyc-scroll-indicator[data-theme="light"] .atyc-scroll-indicator__dot.is-active {
    background: rgba(193, 152, 105, 0.95);
}

.atyc-scroll-indicator[data-theme="light"] .atyc-scroll-indicator__dot:hover {
    background: rgba(0, 0, 0, 0.4);
}

/* Tablet: indicador más pequeño */
@media (min-width: 768px) and (max-width: 1023px) {
    .atyc-scroll-indicator {
        right: 18px;
    }

    .atyc-scroll-indicator__dot {
        height: 20px;
    }

    .atyc-scroll-indicator__dot.is-active {
        height: 40px;
    }
}

/* Mobile: indicador oculto (scroll es libre, no tiene sentido) */
@media (max-width: 767px) {
    .atyc-scroll-indicator {
        display: none;
    }
}

/* -----------------------------------------
   REDUCIR MOVIMIENTO — Accesibilidad
----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .atyc-snap-section {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .atyc-snap-wrapper {
        scroll-behavior: auto;
    }
}