/* ========================================
   MISAJ COOKIE - ESTILOS PRINCIPALES
   ======================================== */
@import url('https://fonts.googleapis.com/css2?family=Corben:wght@400;700&family=Montserrat:wght@300;400;500;600&display=swap');

/* Variables CSS - NUEVOS COLORES */
:root {
    /* Colores principales actualizados */
    --color-primary: #3D2B1F;
    /* Misajo - marrón oscuro */
    --color-primary-dark: #2A1D15;
    /* Versión más oscura para gradientes */
    --color-accent: #E35336;
    /* Cookie - naranja/terracota */
    --color-cream: #F5F5DC;
    /* Fondo beige claro */
    --color-white: #FFFFFF;
    --color-text: #2C1810;
    --color-text-light: #4A3228;
    /* darkened for WCAG AA contrast */
    --font-display: 'Corben', cursive;
    --font-body: 'Montserrat', sans-serif;
}

/* Reset y Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    color: var(--color-text);
    background-color: var(--color-cream);
    overflow-x: hidden;
    line-height: 1.6;
    text-align: justify;
    /* Justify all text by default as requested */
    text-align-last: left;
    /* Ensure last line is left-aligned */
}

/* Ensure headings and specific elements are centered or left-aligned if needed, 
   but user asked for 'all text'. Usually headings are better centered or left.
   We will keep headers as they are (inheriting justify might look bad, 
   but we'll check specific classes like .section-header). 
   
   Actually, .section-header is text-align: center in line 381, so it overrides body.
   .hero-title is not explicitly aligned, so it might justify. 
   Let's force headings to not justify unless they are multi-line and it looks good.
   Standard practice: headings left or center.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
    text-align: center;
    /* Default for this design seems to be centered or left */
    text-align-last: center;
}

/* Override for hero title if it was left aligned */
.hero-title {
    text-align: left;
    text-align-last: left;
}

/* ========================================
   HEADER & NAVIGATION
   ======================================== */

header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to bottom, rgba(245, 245, 220, 0.98), rgba(245, 245, 220, 0.95));
    backdrop-filter: blur(10px);
    z-index: 1000;
    padding: 1rem 0;
    box-shadow: 0 2px 20px rgba(61, 43, 31, 0.08);
    transition: all 0.3s ease;
}

header.scrolled {
    padding: 0.5rem 0;
    box-shadow: 0 4px 30px rgba(61, 43, 31, 0.12);
}

nav {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.logo-img {
    height: 55px;
    width: auto;
    display: block;
    object-fit: contain;
}

.nav-links {
    display: flex;

    gap: 2.5rem;
    list-style: none;
    align-items: center;
}

.nav-links a {
    text-decoration: none;
    color: var(--color-text);
    font-weight: 500;
    font-size: 0.95rem;
    letter-spacing: 0.3px;
    transition: color 0.3s ease-out;
    position: relative;
    /* Ensure visibility on desktop */
    display: flex;

}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-accent);
    transition: width 0.3s ease-out;
}

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

.nav-links a:hover::after {
    width: 100%;
}

/* ========================================
   HERO SECTION
   ======================================== */

.hero {
    margin-top: 80px;
    min-height: 90vh;
    background: linear-gradient(135deg, #F5F5DC 0%, #EAE8D5 100%);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 4rem 2rem;
}

.hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(227, 83, 54, 0.12) 0%, transparent 70%);
    border-radius: 50%;
    animation: float 20s infinite ease-in-out;
}

.hero::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(61, 43, 31, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    animation: float 15s infinite ease-in-out reverse;
}

.hero-content {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

.hero-text {
    animation: fadeInUp 1s ease-out;
}

.hero-subtitle {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-accent);
    margin-bottom: 1rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.hero-title {
    font-family: var(--font-display);
    font-size: 4.5rem;
    font-weight: 400;
    color: var(--color-text);
    line-height: 1.1;
    margin-bottom: 1.5rem;
    letter-spacing: 0;
}

.hero-title .highlight {
    color: var(--color-accent);
    font-style: italic;
}

.hero-description {
    font-family: var(--font-body);
    font-size: 1.1rem;
    color: var(--color-text-light);
    line-height: 1.8;
    margin-bottom: 2.5rem;
    font-weight: 300;
}

.cta-buttons {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.btn {
    padding: 0.8rem 2rem;
    /* Reduced from 1rem 2.5rem */
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    /* Reduced from 1rem */
    text-decoration: none;
    transition: all 0.3s ease-out;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    letter-spacing: 0.5px;
    text-align: center;
    /* Ensure button text is centered */
    text-align-last: center;
}

.btn-small {
    padding: 0.5rem 1.2rem;
    font-size: 0.85rem;
}

.btn-primary {
    background: linear-gradient(135deg, var(--color-accent) 0%, #D14528 100%);
    color: var(--color-white);
    box-shadow: 0 4px 20px rgba(227, 83, 54, 0.3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 30px rgba(227, 83, 54, 0.4);
}

.btn-secondary {
    background: transparent;
    color: var(--color-accent);
    border: 2px solid var(--color-accent);
}

.btn-secondary:hover {
    background: var(--color-accent);
    color: var(--color-white);
    transform: translateY(-2px);
}

.hero-images {
    position: relative;
    height: 500px;
    animation: fadeInRight 1s ease-out;
}

.floating-cookie {
    position: absolute;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(61, 43, 31, 0.2);
    overflow: hidden;
    transition: transform 0.3s ease-out;
    background: var(--color-white);
    padding: 0.5rem;
}

.floating-cookie:hover {
    transform: scale(1.05) rotate(2deg);
    box-shadow: 0 25px 70px rgba(61, 43, 31, 0.3);
}

.floating-cookie img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
    transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
}

/* Base class for image transition state */
.img-changing {
    opacity: 0;
    transform: scale(0.9);
}

.cookie-1 {
    width: 280px;
    height: 280px;
    top: 0;
    right: 150px;
    animation: float 6s infinite ease-in-out;
    z-index: 3;
}

.cookie-2 {
    width: 250px;
    height: 250px;
    bottom: 50px;
    right: 0;
    animation: float 7s infinite ease-in-out 1s;
    z-index: 2;
}

.cookie-3 {
    width: 200px;
    height: 200px;
    top: 180px;
    left: 0;
    animation: float 8s infinite ease-in-out 2s;
    z-index: 1;
}

/* ========================================
   ANIMATIONS
   ======================================== */

@keyframes float {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(30px, -30px) scale(1.1);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ========================================
   SECTION STYLES
   ======================================== */

section {
    padding: 6rem 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.section-header {
    text-align: center;
    margin-bottom: 4rem;
}

.section-subtitle {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--color-accent);
    margin-bottom: 0.5rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 600;
}

.section-title {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 400;
    color: var(--color-text);
    letter-spacing: 0;
}

/* ========================================
   PRODUCTS GRID
   ======================================== */

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 350px));
    justify-content: center;
    gap: 2rem;
    margin-top: 3rem;
}

.product-card {
    background: var(--color-white);
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(61, 43, 31, 0.1);
    transition: transform 0.4s ease-out, box-shadow 0.4s ease-out;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    /* Initial state for scroll animation */
    opacity: 0;
    transform: translateY(30px);
}

.product-card.visible {
    opacity: 1;
    transform: translateY(0);
}

.product-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(227, 83, 54, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
    pointer-events: none;
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(227, 83, 54, 0.15);
}

.product-card:hover::before {
    opacity: 1;
}

.product-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.5s ease-out;
}

.product-card:hover .product-image {
    transform: scale(1.03);
}

.product-info {
    padding: 2rem;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.product-name {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 0.5rem;
}

.product-description {
    color: var(--color-text-light);
    line-height: 1.6;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.product-price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(61, 43, 31, 0.1);
}

.price-tag {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-accent);
}

.price-detail {
    font-size: 0.85rem;
    color: var(--color-text-light);
}

/* ========================================
   COMBOS SECTION
   ======================================== */

/* Combos Section - Ahora usa el mismo estilo que el resto */
.combos-section {
    position: relative;
}


.combos-section .products-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 400px));
    justify-content: center;
}

.combos-section .product-image {
    height: auto;
    aspect-ratio: 4/3;
    object-fit: cover;
}

/* Las tarjetas de combo ahora usarán .product-card, pero mantenemos estilos específicos para la lista */





.combo-features {
    list-style: none;
    margin-bottom: 1.5rem;
    text-align: left;
    background: var(--color-cream);
    padding: 1rem;
    border-radius: 10px;
}

.combo-features li {
    padding: 0.3rem 0;
    padding-left: 1.5rem;
    position: relative;
    font-size: 0.9rem;
    color: var(--color-text);
}

.combo-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-accent);
    font-weight: bold;
}

/* ========================================
   ABOUT SECTION
   ======================================== */

.about-section {
    background: var(--color-white);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.about-content h2 {
    font-family: var(--font-display);
    font-size: 2.6rem;
    font-weight: 400;
    color: var(--color-text);
    margin-bottom: 1.5rem;
}

.about-content p {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.9;
    color: var(--color-text-light);
    margin-bottom: 1.5rem;
}

.about-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
}

.feature {
    text-align: center;
    padding: 1.5rem;
    background: var(--color-cream);
    border-radius: 15px;
}

.feature-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.feature-text {
    font-weight: 600;
    color: var(--color-primary);
}

/* ========================================
   CONTACT SECTION
   ======================================== */

.contact-section {
    text-align: center;
    background: linear-gradient(135deg, #F5F5DC 0%, #EAE8D5 100%);
    margin: 0;
    max-width: 100%;
}

.contact-info {
    max-width: 800px;
    margin: 0 auto;
}

.contact-details {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin: 3rem 0;
    flex-wrap: wrap;
}

.contact-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.contact-icon {
    font-size: 2rem;
    color: var(--color-accent);
}

.contact-label {
    font-weight: 600;
    color: var(--color-text);
}

.contact-value {
    color: var(--color-text-light);
}

.social-links {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 3rem;
}

.social-btn {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--color-white);
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.social-btn.whatsapp {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
}

.social-btn.facebook {
    background: linear-gradient(135deg, #1877F2 0%, #0C63D4 100%);
}

.social-btn.instagram {
    background: linear-gradient(135deg, #E1306C 0%, #C13584 50%, #833AB4 100%);
}

.social-btn:hover {
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

/* ========================================
   FOOTER
   ======================================== */

footer {
    background: var(--color-primary);
    color: var(--color-white);
    text-align: center;
    text-align-last: center;
    padding: 2rem;
}

footer p {
    opacity: 0.8;
    font-size: 0.9rem;
    text-align: center;
    text-align-last: center;
}

/* ========================================
   DECORATIVE ELEMENTS
   ======================================== */

.decoration-circle {
    position: fixed;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(227, 83, 54, 0.08) 0%, transparent 70%);
    pointer-events: none;
    z-index: -1;
}

.decoration-1 {
    width: 500px;
    height: 500px;
    top: 20%;
    right: -100px;
    animation: float 15s infinite ease-in-out;
}

.decoration-2 {
    width: 400px;
    height: 400px;
    bottom: 10%;
    left: -100px;
    animation: float 20s infinite ease-in-out reverse;
}

/* ========================================
   MOBILE MENU & OVERLAY
   ======================================== */

.mobile-menu-btn {
    display: none;
    /* Hidden by default */
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1002;
    padding: 10px;
    width: 40px;
    height: 40px;
    position: relative;
    justify-content: center;
    align-items: center;
}

.hamburger-box {
    width: 24px;
    height: 24px;
    display: inline-block;
    position: relative;
}

.hamburger-inner {
    display: block;
    top: 50%;
    margin-top: -2px;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
    width: 24px;
    height: 2px;
    background-color: var(--color-primary);
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease;
}

.hamburger-inner::before,
.hamburger-inner::after {
    content: "";
    display: block;
}

.hamburger-inner::before {
    top: -8px;
}

.hamburger-inner::after {
    bottom: -8px;
}

/* Hamburger Animation (Spin) */
.mobile-menu-btn.active .hamburger-inner {
    transform: rotate(225deg);
    transition-delay: 0.12s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.mobile-menu-btn.active .hamburger-inner::before {
    top: 0;
    opacity: 0;
    transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out;
}

.mobile-menu-btn.active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(-90deg);
    transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* Overlay */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(245, 245, 220, 0.98);
    backdrop-filter: blur(15px);
    z-index: 1001;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

.mobile-menu-container {
    text-align: center;
    width: 100%;
    max-width: 400px;
    padding: 2rem;
}

.mobile-nav-links {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    list-style: none;
    margin-bottom: 3rem;
}

.mobile-nav-links a {
    font-family: var(--font-display);
    font-size: 2.5rem;
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 700;
    display: block;
    transition: color 0.3s ease, transform 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
}

.mobile-menu-overlay.active .mobile-nav-links a {
    animation: slideInUp 0.5s ease forwards;
    animation-delay: calc(0.1s * var(--i));
}

.mobile-nav-links a:hover {
    color: var(--color-accent);
    transform: translateX(10px);
}

.mobile-socials {
    display: flex;
    justify-content: center;
    gap: 2rem;
    opacity: 0;
    transform: translateY(20px);
}

.mobile-menu-overlay.active .mobile-socials {
    animation: slideInUp 0.5s ease forwards;
    animation-delay: 0.6s;
}

.mobile-socials a {
    color: var(--color-text-light);
    font-size: 1rem;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 2px;
    font-weight: 600;
    transition: color 0.3s ease;
}

.mobile-socials a:hover {
    color: var(--color-accent);
}

/* Prevent Scroll */
body.menu-open {
    overflow: hidden;
}

@keyframes slideInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 968px) {
    .desktop-nav {
        display: none;
    }

    .mobile-menu-btn {
        display: flex;
    }

    .hero-content {
        grid-template-columns: 1fr;
        gap: 3rem;
        text-align: center;
    }

    .hero-text {
        order: 2;
    }

    .hero-images {
        order: 1;
        height: 400px;
        margin: 0 auto;
        width: 100%;
        max-width: 500px;
    }

    .cta-buttons {
        justify-content: center;
    }

    .hero-title {
        font-size: 3rem;
    }

    .section-title {
        font-size: 2.5rem;
    }

    .about-section {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .about-features {
        max-width: 500px;
        margin: 2rem auto 0;
    }

    .contact-details {
        flex-direction: column;
        gap: 2rem;
        padding: 0.5rem;
    }

    .section-title {
        font-size: 2.5rem;
    }

    .about-features {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .hero-title {
        font-size: 2.5rem;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .hero-description {
        font-size: 1rem;
    }

    .btn {
        width: 100%;
        justify-content: center;
    }
}