/* ============================================
   ÓLEO - Modern CSS Stylesheet
   Using @layer, logical properties, clamp()
   ============================================ */

@layer reset, base, layout, components, utilities;

/* === RESET === */
@layer reset {
    *, *::before, *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    img {
        display: block;
        max-width: 100%;
        height: auto;
        background: oklch(95% 0 0);
    }

    ul, ol { list-style: none; }
    a { text-decoration: none; color: inherit; }
}

/* === BASE === */
@layer base {
    :root {
        /* Colors */
        --clr-primary: #142e06;
        --clr-primary-dark: #0d1e04;
        --clr-accent: #dfdf0b;
        --clr-sand-beige: #E8E6DC;
        --clr-text: oklch(20% 0 0);
        --clr-text-muted: oklch(45% 0 0);
        --clr-surface: oklch(98% 0 0);
        --clr-white: oklch(100% 0 0);

        /* Spacing scale */
        --space-xs: 0.5rem;
        --space-sm: 1rem;
        --space-md: 2rem;
        --space-lg: 4rem;
        --space-xl: 6rem;

        /* Typography */
        --font-body: 'Playfair Display', system-ui, sans-serif;
        --font-heading: 'Playfair Display', serif;

        /* Misc */
        --radius: 1.25rem;
        --shadow: 0 4px 20px oklch(0% 0 0 / 0.1);
        --shadow-lg: 0 10px 40px oklch(0% 0 0 / 0.12);
    }

    html { scroll-behavior: smooth; }

    body {
        font-family: var(--font-body);
        font-weight: 300;
        line-height: 1.7;
        color: var(--clr-text);
        letter-spacing: 0.02em;
    }

    /* Respect reduced motion */
    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            animation-duration: 0.01ms !important;
            transition-duration: 0.01ms !important;
        }
    }
}

/* === LAYOUT === */
@layer layout {
    .container {
        width: min(90%, 75rem);
        margin-inline: auto;
        padding-inline: var(--space-sm);
    }
}

/* === COMPONENTS === */
@layer components {

    /* --- Header --- */
    .site-header {
        position: fixed;
        top: 0;
        inset-inline-end: 0;
        z-index: 1000;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding: var(--space-sm) var(--space-md);
        background: transparent;
    }

    /* --- Logo (fixed left) --- */
    .site-logo {
        position: fixed;
        top: var(--space-sm);
        inset-inline-start: var(--space-sm);
        z-index: 1001;
        display: block;
    }

    .site-logo img {
        height: 1.8rem;
        width: auto;
        background: transparent;
        transition: opacity 0.3s ease;
    }

    .site-logo:hover img { opacity: 0.8; }

    /* --- Navigation --- */
    .site-nav {
        display: flex;
        align-items: center;
    }

    .nav-menu {
        display: flex;
        gap: var(--space-md);
    }

    .nav-menu a {
        font-weight: 500;
        font-size: 0.95rem;
        letter-spacing: 0.03em;
        color: var(--clr-white);
        position: relative;
        transition: color 0.3s ease;
    }

    .nav-menu a::after {
        content: '';
        position: absolute;
        inset-inline: 0;
        bottom: -4px;
        height: 1px;
        background: var(--clr-white);
        transform: scaleX(0);
        transform-origin: right;
        transition: transform 0.3s ease;
    }

    .nav-menu a:hover,
    .nav-menu a.active {
        color: var(--clr-white);
        opacity: 0.8;
    }

    .nav-menu a:hover::after,
    .nav-menu a.active::after {
        transform: scaleX(1);
        transform-origin: left;
    }

    /* --- Mobile Toggle --- */
    .nav-toggle { display: none; }

    .nav-hamburger {
        display: none;
        flex-direction: column;
        gap: 5px;
        cursor: pointer;
        padding: var(--space-xs);
    }

    .nav-hamburger span {
        width: 1.5rem;
        height: 2px;
        background: var(--clr-text);
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    .nav-toggle:checked + .nav-hamburger span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }
    .nav-toggle:checked + .nav-hamburger span:nth-child(2) { opacity: 0; }
    .nav-toggle:checked + .nav-hamburger span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }

    /* --- Hero Section (Standard) --- */
    .hero-main {
        min-height: 60vh;
        display: grid;
        place-items: center;
        padding-block: 7rem var(--space-lg);
        padding-inline: var(--space-sm);
        position: relative;
        overflow: hidden;
        background: 
            linear-gradient(oklch(35% 0.1 130 / 0.8), oklch(35% 0.1 130 / 0.6)),
            url('../images/botellas/botellas_freepik__retouch__98683.png') center/cover;
    }

    /* --- Hero Video Variant --- */
    .hero-video {
        background: oklch(15% 0 0);
    }

    .hero-video-bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.7;
    }

    .hero-content {
        text-align: center;
        position: relative;
        z-index: 2;
        max-width: 50rem;
        margin-inline: auto;
        animation: fadeInUp 0.8s ease-out;
    }

    .hero-title {
        font-family: var(--font-heading);
        font-size: clamp(2rem, 5vw + 1rem, 4rem);
        font-weight: 700;
        color: var(--clr-white);
        margin-block-end: var(--space-sm);
        letter-spacing: 0.1em;
        text-shadow: 2px 2px 8px oklch(0% 0 0 / 0.4);
    }

    .hero-title span {
        display: inline;
    }

    @media (max-width: 480px) {
        .hero-title span {
            display: block;
        }
    }

    .hero-subtitle {
        font-size: clamp(1rem, 2vw + 0.5rem, 1.5rem);
        color: var(--clr-white);
        font-weight: 300;
        line-height: 1.5;
        text-shadow: 1px 1px 4px oklch(0% 0 0 / 0.3);
    }

    /* --- Product Sections (Index) --- */
    .product-sections {
        display: flex;
        flex-direction: column;
    }

    .product-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: var(--space-lg) var(--space-md);
        min-height: 18rem;
        cursor: pointer;
    }

    .product-item h2 {
        font-family: var(--font-heading);
        font-size: clamp(1.75rem, 4vw + 0.5rem, 2.5rem);
        color: var(--clr-text);
        margin-block-end: var(--space-sm);
    }

    .product-item p {
        font-size: 1.1rem;
        color: var(--clr-text);
        line-height: 1.7;
        max-width: 38rem;
    }

    /* Background variants */
    .product-item[data-bg="restaurantes"] {
        background: 
            linear-gradient(135deg, oklch(100% 0 0 / 0.4), oklch(98% 0.02 140 / 0.4)),
            url('../images/creaciones/fondo_encuentros_suaves.webp') center/cover no-repeat;
    }

    .product-item[data-bg="eventos"] {
        background: 
            linear-gradient(135deg, oklch(100% 0 0 / 0.4), oklch(98% 0.02 140 / 0.4)),
            url('../images/creaciones/fondo_eventos.webp') center/cover no-repeat;
    }

    .product-item[data-bg="arte"] {
        background: 
            linear-gradient(135deg, oklch(100% 0 0 / 0.4), oklch(98% 0.02 140 / 0.4)),
            url('../images/creaciones/fondo_aceitunas.webp') center/cover no-repeat;
    }

    .product-item[data-bg="nosotros"] {
        background: 
            linear-gradient(135deg, oklch(100% 0 0 / 0.4), oklch(100% 0 0 / 0.4)),
            url('../images/creaciones/fondo_silencio_verde.webp') center/cover no-repeat;
    }

    /* --- Art Grid (Arte Page) --- */
    .art-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .art-item {
        position: relative;
        aspect-ratio: 1;
        overflow: hidden;
    }

    .art-card {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .art-front {
        position: absolute;
        inset: 0;
    }

    .art-front img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .art-back { display: none; }

    .art-title {
        position: absolute;
        inset-block-end: 0;
        inset-inline: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        text-align: center;
        padding: var(--space-lg) var(--space-md);
        background: linear-gradient(to top, oklch(0% 0 0 / 0.6), transparent);
        animation: art-title-reveal linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 60%;
    }

    @keyframes art-title-reveal {
        from {
            opacity: 0;
            transform: translateY(2rem);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .art-title h4 {
        font-family: var(--font-heading);
        font-size: clamp(1.25rem, 3vw, 2rem);
        color: var(--clr-white);
        text-shadow: 0 2px 8px oklch(0% 0 0 / 0.5);
        margin-block-end: 0.25rem;
        letter-spacing: 0.1em;
    }

    .art-title p {
        font-size: clamp(0.85rem, 1.5vw, 1rem);
        color: var(--clr-white);
        text-shadow: 0 1px 4px oklch(0% 0 0 / 0.5);
        opacity: 0.9;
    }

    @media (max-width: 48rem) {
        .art-grid {
            grid-template-columns: 1fr;
        }
    }

    /* --- Product Cards (Nosotros Page) --- */
    .products { 
        padding-block: var(--space-xl);
        background: var(--clr-sand-beige);
    }

    .product-card {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
        gap: var(--space-lg);
        align-items: center;
        margin-block-end: var(--space-lg);
    }

    .product-card:first-child { padding-block-start: var(--space-md); }

    .product-card.reverse { direction: rtl; }
    .product-card.reverse > * { direction: ltr; }

    .section-title-elegant {
        font-family: var(--font-heading);
        font-size: clamp(1.75rem, 4vw + 0.5rem, 2.5rem);
        color: var(--clr-text);
        margin-block-end: var(--space-sm);
        font-weight: 700;
        line-height: 1.2;
        text-align: center;
    }

    .elegant-text {
        font-size: 1.1rem;
        color: var(--clr-text);
        line-height: 1.8;
    }

    /* --- Partners Section --- */
    .partners-section {
        padding-block: var(--space-lg);
        background: var(--clr-surface);
    }

    .partners-content .section-title-elegant {
        text-align: center;
        margin-block-end: var(--space-lg);
    }

    .partners-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
        gap: var(--space-lg);
        align-items: center;
        justify-items: center;
    }

    .partner-logo {
        max-width: 15rem;
    }

    .partner-logo a { display: block; }

    /* --- Restaurantes Page --- */
    .challenge-section,
    .solution-section,
    .bottle-options {
        padding-block: var(--space-lg);
        background: var(--clr-sand-beige);
    }

    .success-case-section {
        padding-block: var(--space-lg);
        background: var(--clr-primary);
        color: var(--clr-sand-beige);
    }

    .success-case-section .section-title-elegant,
    .success-case-section .case-detail strong,
    .success-case-section .case-detail p,
    .success-case-section .case-quote {
        color: var(--clr-sand-beige);
    }

    .success-case-section .case-title {
        color: var(--clr-accent);
    }

    .challenge-compact {
        max-width: 50rem;
        margin-inline: auto;
    }

    .case-study-featured {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-lg);
        align-items: center;
    }

    .case-study-featured .case-content {
        display: contents;
    }

    .case-study-featured .bottle-image {
        order: 2;
    }

    .case-study-featured .case-details {
        order: 1;
    }

    @media (max-width: 768px) {
        .case-study-featured {
            grid-template-columns: 1fr;
        }

        .case-study-featured .bottle-image {
            order: 1;
        }

        .case-study-featured .case-details {
            order: 2;
        }
    }

    .challenge-intro {
        font-size: 1.1rem;
        color: var(--clr-text);
        line-height: 1.8;
        text-align: center;
    }

    .section-intro {
        font-size: 1.1rem;
        color: var(--clr-text-muted);
        text-align: center;
        margin-block-end: var(--space-lg);
        max-width: 44rem;
        margin-inline: auto;
    }

    .solutions-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
        gap: var(--space-md);
        margin-block-start: var(--space-lg);
    }

    .solution-card {
        text-align: center;
        padding: var(--space-md);
    }

    .solution-icon {
        width: 3.75rem;
        height: 3.75rem;
        margin-inline: auto;
        margin-block-end: var(--space-sm);
        display: grid;
        place-items: center;
    }

    .solution-card h3 {
        font-family: var(--font-heading);
        font-size: 1.4rem;
        margin-block-end: var(--space-sm);
    }

    .solution-card p {
        font-size: 1rem;
        color: var(--clr-text-muted);
        line-height: 1.6;
    }

    /* Case Study */
    .case-study-featured .bottle-image {
        text-align: center;
    }

    .case-study-featured .bottle-image img {
        max-width: 100%;
        border-radius: var(--radius);
    }

    .case-study-featured .case-details {
        text-align: left;
    }

    .case-study-featured .case-title {
        font-family: var(--font-heading);
        font-size: clamp(1.5rem, 4vw, 2.5rem);
        margin-block-end: var(--space-md);
    }

    .case-study-featured .case-detail {
        margin-block-end: var(--space-sm);
    }

    .case-study-featured .case-detail strong {
        display: block;
        font-size: 0.9rem;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        margin-block-end: 0.25rem;
    }

    .case-study-featured .case-detail p {
        color: var(--clr-white);
        line-height: 1.6;
    }

    .case-study-featured .case-quote {
        font-style: italic;
        font-size: 1.1rem;
    }

    .case-study-featured .case-attribution {
        font-size: 0.9rem;
        opacity: 0.8;
    }

    /* Bottle Sequence Animation */
    .bottle-sequence {
        position: relative;
        aspect-ratio: 3/4;
    }

    .bottle-sequence img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: 8px;
    }

    .bottle-sequence .bottle-1 {
        animation: bottleFade 4s ease-in-out infinite;
    }

    .bottle-sequence .bottle-2 {
        animation: bottleFade 4s ease-in-out infinite 2s;
    }

    @keyframes bottleFade {
        0%, 45% { opacity: 1; }
        50%, 95% { opacity: 0; }
        100% { opacity: 1; }
    }

    .case-title {
        font-family: var(--font-heading);
        font-size: clamp(1.5rem, 3vw + 0.5rem, 2rem);
        margin-block-end: var(--space-md);
        text-align: center;
    }

    .case-details {
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);
        text-align: center;
    }

    .case-detail strong {
        display: block;
        font-size: 1.1rem;
        margin-block-end: 0.5rem;
    }

    .case-detail p {
        color: var(--clr-text-muted);
        line-height: 1.6;
    }

    .case-quote {
        font-style: italic;
        font-size: 1.1rem;
        margin-block: var(--space-sm);
    }

    .case-attribution { text-align: center; }

    /* Bottles Grid */
    .bottles-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
        gap: var(--space-md);
        margin-block-start: var(--space-lg);
    }

    .bottles-grid.single-bottle {
        max-width: 31rem;
        margin-inline: auto;
    }

    .bottle-card {
        text-align: center;
    }

    .bottle-info h3 {
        font-family: var(--font-heading);
        font-size: 1.75rem;
        margin-block-end: 0.5rem;
    }

    .bottle-size {
        display: block;
        font-size: 1.2rem;
        color: var(--clr-primary);
        font-weight: 600;
        margin-block-end: var(--space-sm);
    }

    .bottle-features {
        margin-block: var(--space-md);
    }

    .bottle-features li {
        padding-block: 0.5rem;
        padding-inline-start: 1.5rem;
        position: relative;
        text-align: start;
    }

    .bottle-features li::before {
        content: '✓';
        position: absolute;
        inset-inline-start: 0;
        color: var(--clr-primary);
    }

    /* --- Footer --- */
    footer {
        background: var(--clr-text);
        color: var(--clr-white);
        padding-block: var(--space-lg) var(--space-sm);
    }

    .footer-content {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
        gap: var(--space-md);
        margin-block-end: var(--space-md);
    }

    .footer-logo h3 {
        font-family: var(--font-heading);
        font-size: 2rem;
        margin-block-end: 0.5rem;
        color: var(--clr-white);
    }

    .footer-links a {
        color: var(--clr-white);
        transition: color 0.3s ease;
    }

    .footer-links a:hover { color: var(--clr-accent); }

    .footer-bottom {
        text-align: center;
        padding-block-start: var(--space-md);
        border-block-start: 1px solid oklch(100% 0 0 / 0.1);
    }

    /* --- WhatsApp Float --- */
    .whatsapp-float {
        position: fixed;
        inset-block-end: 1.875rem;
        inset-inline-end: 1.875rem;
        z-index: 999;
        display: grid;
        place-items: center;
        width: 3.5rem;
        height: 3.5rem;
        background: oklch(60% 0.18 145);
        color: var(--clr-white);
        border-radius: 50%;
        box-shadow: 0 4px 12px oklch(60% 0.18 145 / 0.4);
    }

    .whatsapp-icon {
        width: 1.75rem;
        height: 1.75rem;
    }

} /* End @layer components */

/* === UTILITIES === */
@layer utilities {
    .reveal-section { opacity: 1; }
}

/* === ANIMATIONS === */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(1.5rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === RESPONSIVE (Mobile-first adjustments) === */
@media (max-width: 48rem) {
    /* Header */
    .site-header {
        padding-inline: var(--space-sm);
    }

    /* Navigation - slide from right */
    .nav-menu {
        position: fixed;
        top: 0;
        inset-inline-end: 0;
        bottom: 0;
        width: 70%;
        max-width: 18rem;
        flex-direction: column;
        justify-content: center;
        gap: var(--space-md);
        background: var(--clr-primary);
        padding: var(--space-lg);
        transform: translateX(100%);
        transition: transform 0.3s ease;
        z-index: 999;
    }

    .nav-menu li { 
        padding-block: var(--space-xs);
        text-align: center;
    }

    .nav-menu a {
        color: var(--clr-accent);
        font-size: 1.2rem;
    }

    .nav-menu a:hover,
    .nav-menu a.active {
        color: var(--clr-accent);
        opacity: 0.8;
    }

    .nav-menu a::after {
        background: var(--clr-accent);
    }

    .nav-toggle:checked ~ .nav-menu { transform: translateX(0); }
    .nav-hamburger { display: flex; }

    /* Overlay to close menu when clicking outside */
    .nav-overlay {
        position: fixed;
        inset: 0;
        z-index: 998;
        display: none;
    }

    .nav-toggle:checked ~ .nav-overlay {
        display: block;
    }

    /* Hamburger white on dark backgrounds */
    .nav-hamburger span {
        background: var(--clr-white);
    }

    /* Reverse cards stack naturally */
    .product-card.reverse { direction: ltr; }

    /* Footer center on mobile */
    .footer-content { text-align: center; }
}