/* =========================================================

   LECURUTCHET

   EL CAFÉ DE LA EQUITACIÓN

========================================================= */





:root {



    --dark: #15130f;

    --dark-soft: #201d17;



    --brown: #432818;

    --brown-light: #6f4e37;



    --gold: #bb9457;

    --gold-light: #d6b477;



    --cream: #f7f1e7;

    --cream-dark: #ebe0d0;



    --green: #26382b;



    --white: #ffffff;



    --text: #2a2926;

    --muted: #77736b;



    --shadow:

        0 20px 50px rgba(0, 0, 0, 0.12);



    --transition:

        all 0.35s ease;



}





/* =========================================================

   GENERAL

========================================================= */



* {



    margin: 0;

    padding: 0;

    box-sizing: border-box;



}





html {



    scroll-behavior: smooth;



}





body {



    font-family:

        "Segoe UI",

        Arial,

        sans-serif;



    color: var(--text);



    background:

        var(--cream);



    overflow-x: hidden;



}





body.no-scroll {



    overflow: hidden;



}





img {



    width: 100%;

    display: block;



}





a {



    text-decoration: none;

    color: inherit;



}





button {



    font-family: inherit;



}





.container {



    width: min(1180px, 90%);

    margin: auto;



}





.section {



    padding: 75px 0;



}





/* =========================================================

   HEADER

========================================================= */



.header {



    width: 100%;



    position: fixed;



    left: 0;

    top: 0;



    z-index: 1000;



    transition: var(--transition);



}





.header.scrolled {



    background:

        rgba(20, 18, 14, 0.96);



    backdrop-filter:

        blur(15px);



    box-shadow:

        0 5px 25px rgba(0, 0, 0, 0.15);



}





.navbar {



    height: 90px;



    display: flex;

    align-items: center;

    justify-content: space-between;



}





/* BRAND */



.brand {



    color: white;



    display: flex;

    align-items: center;



    gap: 12px;



}





.brand-mark {

    width: 52px;

    height: 52px;



    display: flex;

    align-items: center;

    justify-content: center;



    flex-shrink: 0;

}



.brand-mark img {

    width: 100%;

    height: 100%;



    object-fit: contain;

    display: block;

}





.brand-text {



    display: flex;

    flex-direction: column;



}





.brand-text strong {



    font-family: Georgia, serif;



    letter-spacing: 3px;



    font-size: 15px;



}





.brand-text span {



    font-size: 10px;



    letter-spacing: 2px;



    color: var(--gold-light);



    margin-top: 3px;



}





/* NAV */



.nav {



    display: flex;

    gap: 35px;



}





.nav-link {



    color: white;



    font-size: 13px;



    letter-spacing: 1px;



    position: relative;



    padding: 15px 0;



}





.nav-link::after {



    content: "";



    position: absolute;



    height: 1px;

    width: 0;



    left: 0;

    bottom: 7px;



    background: var(--gold);



    transition: var(--transition);



}





.nav-link:hover::after {



    width: 100%;



}





.navbar-actions {



    display: flex;

    align-items: center;



    gap: 12px;



}





/* CARRITO BOTÓN */



.cart-button {



    width: 45px;

    height: 45px;



    border-radius: 50%;



    background:

        rgba(255, 255, 255, 0.1);



    border:

        1px solid rgba(255, 255, 255, 0.2);



    color: white;



    cursor: pointer;



    position: relative;



}





.cart-button span {



    position: absolute;



    width: 19px;

    height: 19px;



    top: -4px;

    right: -4px;



    background: var(--gold);



    color: white;



    font-size: 10px;



    border-radius: 50%;



    display: flex;

    justify-content: center;

    align-items: center;



}





/* MENÚ MOBILE */



.menu-button {



    width: 45px;

    height: 45px;



    border: 0;



    background: transparent;



    cursor: pointer;



    display: none;



}





.menu-button span {



    width: 25px;

    height: 2px;



    display: block;



    margin: 5px auto;



    background: white;



}





/* =========================================================

   HERO

========================================================= */



.hero {



    height: 90vh;



    min-height: 620px;



    position: relative;



    display: flex;

    align-items: center;



    overflow: hidden;



    background:

        linear-gradient(

            135deg,

            #201a13,

            #342719

        );



}





.hero-video {



    position: absolute;



    width: 100%;

    height: 100%;



    left: 0;

    top: 0;



    object-fit: cover;



}





.hero-overlay {



    position: absolute;



    inset: 0;



    background:



        linear-gradient(

            90deg,

            rgba(10,10,8,.86) 0%,

            rgba(15,13,10,.60) 47%,

            rgba(10,10,8,.32) 100%

        );



}





.hero-content {



    position: relative;



    z-index: 2;



    color: white;



    padding-top: 70px;



}





.hero-label {



    display: inline-block;



    color: var(--gold-light);



    border:

        1px solid rgba(187,148,87,.55);



    padding:

        10px 17px;



    font-size: 10px;



    letter-spacing: 3px;



    margin-bottom: 26px;



}





.hero-pretitle {



    text-transform: uppercase;



    letter-spacing: 5px;



    font-size: 12px;



    color: #ddd;



    margin-bottom: 12px;



}

.hero h1 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(42px, 6vw, 78px);
    letter-spacing: 4px;
    line-height: .95;
}



.hero h2 {



    font-family:

        Georgia,

        serif;



    font-weight: 400;



    color: var(--gold-light);



    font-size:

        clamp(25px, 3vw, 43px);



    margin:

        15px 0 25px;



}





.hero-description {



    width: min(620px, 100%);



    font-size: 17px;



    color: #e0ded8;



    line-height: 1.8;



}





.hero-buttons {



    margin-top: 35px;



    display: flex;



    gap: 15px;



    flex-wrap: wrap;



}



/* BOTONES */



.button {



    min-height: 54px;



    padding: 0 28px;



    border: none;



    display: inline-flex;



    align-items: center;

    justify-content: center;



    cursor: pointer;



    font-size: 12px;



    text-transform: uppercase;



    letter-spacing: 1.5px;



    transition: var(--transition);



}





.button-primary {



    background: var(--gold);



    color: white;



}





.button-primary:hover {



    background: var(--gold-light);



    transform:

        translateY(-3px);



}





.button-outline {



    border:

        1px solid rgba(255,255,255,.55);



    color: white;



    background:

        rgba(255,255,255,.03);



}





.button-outline:hover {



    background: white;



    color: var(--dark);



}





.full {



    width: 100%;



}





.hero-info {



    display: flex;



    margin-top: 75px;



    gap: 50px;



}





.hero-info div {



    display: flex;

    flex-direction: column;



    border-left:

        1px solid var(--gold);



    padding-left: 17px;



}





.hero-info strong {



    font-size: 13px;



    letter-spacing: 1px;



}





.hero-info span {



    color: #aaa;



    font-size: 11px;



    margin-top: 5px;



}





.scroll-down {



    position: absolute;



    z-index: 3;



    bottom: 30px;

    left: 50%;



    transform:

        translateX(-50%);



    width: 40px;

    height: 40px;



    border:

        1px solid rgba(255,255,255,.35);



    color: white;



    border-radius: 50%;



    display: flex;



    align-items: center;

    justify-content: center;



    animation:

        scrollAnimation 2s infinite;



}





@keyframes scrollAnimation {



    0%, 100% {



        transform:

            translate(-50%, 0);



    }



    50% {



        transform:

            translate(-50%, 8px);



    }



}





/* =========================================================

   TITULOS

========================================================= */



.section-heading {



    max-width: 720px;



    margin:

        0 auto 65px;



    text-align: center;



}





.section-label {



    color: var(--gold);



    font-weight: 600;



    font-size: 11px;



    letter-spacing: 4px;



}





.section-heading h2,

.contact-content h2 {



    font-family:

        Georgia,

        serif;



    font-weight: 400;



    font-size:

        clamp(32px, 4vw, 48px);



    color: var(--brown);



    margin:

        10px 0 15px;



}





.section-heading p {



    line-height: 1.8;



    color: var(--muted);



}





.gold-line {



    width: 55px;



    height: 2px;



    background: var(--gold);



    margin:

        20px auto;



}





.gold-line.left {



    margin:

        20px 0;



}





/* =========================================================

   NOSOTROS

========================================================= */



.intro {



    background:

        #f7f1e7;



}





.about-grid {



    display: grid;



    grid-template-columns:

        1fr 1fr;



    gap: 80px;



    align-items: center;



}





.about-image {



    position: relative;



}





.about-image img {



    min-height: 600px;



    object-fit: cover;



    box-shadow: var(--shadow);



}





.about-badge {



    position: absolute;



    right: -30px;

    bottom: 35px;



    width: 260px;



    background: var(--brown);



    color: white;



    padding: 30px;



}





.about-badge strong {



    display: block;



    color: var(--gold);



    font-family:

        Georgia,

        serif;



    letter-spacing: 3px;



    margin-bottom: 8px;



}





.about-badge span {



    font-size: 11px;



    letter-spacing: 1px;



}





.mini-title {



    color: var(--gold);



    font-size: 11px;



    letter-spacing: 3px;



}





.about-content h3 {



    color: var(--brown);



    font-family:

        Georgia,

        serif;



    font-weight: 400;



    font-size:

        clamp(35px, 4vw, 50px);



    margin:

        15px 0 25px;



}





.about-content > p {



    line-height: 1.9;



    color: var(--muted);



    margin-bottom: 15px;



}





.about-features {



    margin-top: 35px;



}





.feature {



    padding:

        18px 0;



    display: flex;



    gap: 20px;



    border-bottom:

        1px solid #ddd1be;



}





.feature-icon {



    width: 48px;

    height: 48px;



    flex: 0 0 48px;



    border:

        1px solid var(--gold);



    display: flex;



    justify-content: center;

    align-items: center;



}





.feature strong,

.feature span {



    display: block;



}





.feature strong {



    color: var(--brown);



    margin-bottom: 5px;



}





.feature span {



    color: var(--muted);



    font-size: 13px;



}





/* =========================================================

   CARTA / PRODUCTOS

========================================================= */



.menu-section {



    background:

        #fffdf8;



}





.category-buttons {



    display: flex;



    align-items: center;

    justify-content: center;



    flex-wrap: wrap;



    gap: 10px;



    margin-bottom: 40px;



}





.category {



    border:

        1px solid #ddd4c8;



    padding:

        12px 24px;



    background:

        transparent;



    color: var(--brown);



    cursor: pointer;



    transition:

        var(--transition);



}





.category.active,

.category:hover {



    background:

        var(--brown);



    border-color:

        var(--brown);



    color: white;



}





.products-grid {



    display: grid;



    grid-template-columns:

        repeat(3, 1fr);



    gap: 28px;



}





.product-card {



    background: white;



    border:

        1px solid #ebe4db;



    transition: var(--transition);



    overflow: hidden;



}





.product-card:hover {



    transform:

        translateY(-8px);



    box-shadow:

        var(--shadow);



}





.product-card.hidden {



    display: none;



}





.product-image {



    height: 270px;



    overflow: hidden;



    position: relative;



}





.product-image img {



    width: 100%;

    height: 100%;



    object-fit: cover;



    transition:

        transform .7s ease;



}





.product-card:hover .product-image img {



    transform:

        scale(1.07);



}





.product-badge {



    position: absolute;



    top: 15px;

    left: 15px;



    background: var(--brown);



    color: white;



    padding:

        7px 12px;



    font-size: 10px;



    text-transform: uppercase;



    letter-spacing: 1px;



}





.product-placeholder {



    height: 270px;



    background:

        linear-gradient(

            135deg,

            #2c2118,

            #76563b

        );



    display: flex;



    align-items: center;

    justify-content: center;



    font-size: 75px;



}





.product-content {



    padding: 25px;



}





.product-top {



    display: flex;



    justify-content: space-between;



    gap: 15px;



    align-items: start;



}





.product-content h3 {



    color: var(--brown);



    font-family:

        Georgia,

        serif;



    font-size: 22px;



}





.price {



    color: var(--gold);



    font-weight: 700;



    white-space: nowrap;



}





.product-content p {



    color: var(--muted);



    font-size: 13px;



    line-height: 1.7;



    margin:

        15px 0 22px;



}





.add-cart {



    width: 100%;



    height: 45px;



    background: transparent;



    border:

        1px solid var(--brown);



    color: var(--brown);



    cursor: pointer;



    text-transform: uppercase;



    font-size: 10px;



    letter-spacing: 1.5px;



    transition:

        var(--transition);



}





.add-cart:hover {



    background:

        var(--brown);



    color:

        white;



}





/* =========================================================

   EXPERIENCIA

========================================================= */



.experience {



    position: relative;



    min-height: 520px;



    display: flex;



    align-items: center;

    justify-content: center;



    text-align: center;



    background:



        linear-gradient(

            rgba(20,15,10,.45),

            rgba(20,15,10,.45)

        ),



        url("../Imagenes/nosotros.jpg")

        center / cover

        fixed;



}





.experience-overlay {



    position: absolute;



    inset: 0;



    background:

        rgba(20,16,11,.6);



}





.experience-content {



    position: relative;



    z-index: 2;



    color: white;



    max-width: 760px;



}





.experience-content span {



    color: var(--gold);



    letter-spacing: 5px;



    font-size: 11px;



}





.experience-content h2 {



    font-family:

        Georgia,

        serif;



    font-size:

        clamp(28px, 4vw, 42px);



    font-weight: 400;



    margin:

        15px 0;



}





.experience-content p {



    max-width: 570px;



    margin:

        0 auto 30px;



    line-height: 1.2;



    color: #ddd;



}





/* =========================================================

   CONTACTO

========================================================= */



.contact {



    background: var(--cream);



}





.contact-grid {



    display: grid;



    grid-template-columns:

        .9fr 1.1fr;



    gap: 100px;



}





.contact-content > p {



    line-height: 1.8;



    color: var(--muted);



}





.contact-info {



    margin-top: 40px;



}





.contact-info div {



    padding:

        20px 0;



    border-bottom:

        1px solid #ddd2c2;



}





.contact-info strong,

.contact-info span {



    display: block;



}





.contact-info strong {



    color: var(--brown);



    font-size: 13px;



    margin-bottom: 7px;



}





.contact-info span {



    color: var(--muted);



    font-size: 14px;



}





/* FORM */



.contact-form {



    background: white;



    padding: 45px;



    box-shadow:

        var(--shadow);



}





.form-group {



    margin-bottom: 23px;



}





.form-group label {



    display: block;



    margin-bottom: 8px;



    font-size: 11px;



    letter-spacing: 1px;



    text-transform: uppercase;



    color: var(--brown);



}





.form-group input,

.form-group textarea {



    width: 100%;



    border:

        1px solid #ddd6cc;



    background:

        #faf8f4;



    padding: 15px;



    outline: none;



    font: inherit;



    transition:

        var(--transition);



}





.form-group input:focus,

.form-group textarea:focus {



    border-color:

        var(--gold);



}





/* =========================================================

   FOOTER

========================================================= */



.footer {



    background:

        var(--dark);



    color: white;



    padding:

        60px 0;



}





.footer-content {



    display: flex;



    justify-content: space-between;



    align-items: center;



    gap: 30px;



}





.footer-logo {



    color: var(--gold);



    font-family:

        Georgia,

        serif;



    letter-spacing: 4px;



}





.footer p {



    color: #999;



    font-size: 12px;



    margin-top: 8px;



}





.footer-copy {



    color: #777;



    font-size: 11px;



}





/* =========================================================

   CARRITO

========================================================= */



.cart-overlay {



    position: fixed;



    inset: 0;



    z-index: 1998;



    background:

        rgba(0,0,0,.55);



    opacity: 0;



    visibility: hidden;



    transition:

        var(--transition);



}





.cart-overlay.active {



    opacity: 1;



    visibility: visible;



}





.cart {



    position: fixed;



    width:

        min(430px, 100%);



    height: 100vh;



    top: 0;

    right: -450px;



    background: white;



    z-index: 1999;



    display: flex;



    flex-direction: column;



    transition:

        right .4s ease;



}





.cart.active {



    right: 0;



}





.cart-header {



    padding: 25px;



    display: flex;



    justify-content: space-between;



    align-items: center;



    border-bottom:

        1px solid #eee;



}





.cart-header span {



    color: var(--gold);



    font-size: 10px;



    letter-spacing: 3px;



}





.cart-header h2 {



    color: var(--brown);



    font-family:

        Georgia,

        serif;



}





.close-cart {



    width: 40px;

    height: 40px;



    border: 0;



    background: transparent;



    cursor: pointer;



    font-size: 30px;



}





.cart-items {



    flex: 1;



    overflow-y: auto;



    padding: 20px;



}





.empty-cart {



    height: 100%;



    display: flex;



    flex-direction: column;



    align-items: center;

    justify-content: center;



    color: #999;



}





.empty-cart div {



    font-size: 50px;



    margin-bottom: 10px;



}





.cart-item {



    display: grid;



    grid-template-columns:

        1fr auto;



    gap: 10px;



    padding:

        18px 0;



    border-bottom:

        1px solid #eee;



}





.cart-item h4 {



    color: var(--brown);



    margin-bottom: 7px;



}





.cart-item-price {



    color: var(--gold);



    font-weight: 700;



}





.quantity-controls {



    display: flex;



    align-items: center;



    gap: 8px;



    margin-top: 10px;



}





.quantity-controls button {



    width: 28px;

    height: 28px;



    border:

        1px solid #ddd;



    background: white;



    cursor: pointer;



}





.remove-item {



    border: 0;



    background: transparent;



    color: #a34141;



    cursor: pointer;



    font-size: 11px;



}





.cart-footer {



    border-top:

        1px solid #eee;



    padding: 25px;



}





.cart-total {



    display: flex;



    justify-content: space-between;



    margin-bottom: 20px;



}





.cart-total strong {



    color: var(--brown);



    font-size: 25px;



}





/* =========================================================

   RESPONSIVE

========================================================= */



@media (max-width: 950px) {



    .menu-button {



        display: block;



    }





    .nav {



        position: fixed;



        width: 100%;



        height:

            calc(100vh - 80px);



        left: 100%;



        top: 80px;



        background:

            rgba(20,18,14,.99);



        display: flex;



        flex-direction: column;



        justify-content: center;

        align-items: center;



        gap: 20px;



        transition:

            left .4s ease;



    }





    .nav.active {



        left: 0;



    }





    .nav-link {



        font-size: 18px;



    }





    .about-grid,

    .contact-grid {



        grid-template-columns:

            1fr;



    }





    .about-grid {



        gap: 55px;



    }





    .contact-grid {



        gap: 55px;



    }





    .products-grid {



        grid-template-columns:

            repeat(2, 1fr);



    }





    .about-badge {



        right: 20px;



    }



}





@media (max-width: 650px) {



    .section {



        padding:

            80px 0;



    }





    .navbar {



        height: 75px;



    }





    .brand-text span {



        display: none;



    }





    .brand-text strong {



        font-size: 12px;



    }





    .hero {



        min-height: 700px;



    }





    .hero-content {



        text-align: center;



    }





    .hero-description {



        margin: auto;



    }





    .hero-buttons {



        justify-content: center;



    }





    .hero-info {



        display: none;



    }





    .products-grid {



        grid-template-columns:

            1fr;



    }





    .product-image {



        height: 240px;



    }





    .about-image img {



        min-height: 420px;



    }





    .about-badge {



        width:

            calc(100% - 30px);



        right: -10px;

        bottom: 20px;



    }





    .contact-form {



        padding: 28px 20px;



    }





    .footer-content {



        flex-direction: column;



        text-align: center;



    }





    .experience {



        background-attachment: scroll;



    }



}



/* =========================================

   BOTÓN WHATSAPP FLOTANTE

========================================= */



a.whatsapp-float {

    position: fixed !important;

    right: 25px !important;

    bottom: 25px !important;



    width: auto !important;

    height: auto !important;



    display: flex !important;

    align-items: center !important;

    gap: 10px;



    z-index: 999999 !important;



    text-decoration: none !important;

    background: transparent !important;

}



a.whatsapp-float img {

    width: 60px !important;

    height: 60px !important;

    max-width: 60px !important;

    min-width: 60px !important;



    object-fit: contain !important;

    display: block !important;



    margin: 0 !important;

    padding: 0 !important;



    filter: drop-shadow(0 5px 10px rgba(0,0,0,.30));



    transition: transform .3s ease;

}



a.whatsapp-float:hover img {

    transform: scale(1.12);

}



a.whatsapp-float span {

    background: #ffffff;

    color: #222222;



    padding: 9px 14px;



    border-radius: 20px;



    font-size: 13px;

    font-weight: 600;

    white-space: nowrap;



    box-shadow: 0 4px 15px rgba(0,0,0,.20);

}





/* CELULAR */



@media (max-width: 600px) {



    a.whatsapp-float {

        right: 15px !important;

        bottom: 15px !important;

    }



    a.whatsapp-float img {

        width: 55px !important;

        height: 55px !important;

        max-width: 55px !important;

        min-width: 55px !important;

    }



    a.whatsapp-float span {

        display: none !important;

    }

}





/* BOTÓN VISÍTANOS */



.btn-visitanos {

    display: inline-block;

    margin-top: 25px;

    padding: 15px 35px;



    background: rgba(187, 148, 87, 0.95);

    color: white;

    text-decoration: none;



    font-size: 14px;

    font-weight: 600;

    letter-spacing: 2px;

    text-transform: uppercase;



    border: 1px solid rgba(255, 255, 255, 0.4);

    border-radius: 6px;



    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);

    transition: all 0.3s ease;

}



/* EFECTO AL PASAR EL MOUSE */



.btn-visitanos:hover {

    background: white;

    color: #432818;



    transform: translateY(-3px);

    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);

}



/* IMAGEN DEBAJO DE DESCUBRE LECURUTCHET */



.imagen-experiencia {

    margin-top: 60px;

    width: 80%;

    display: flex;

    justify-content: center;

}



.imagen-experiencia img {

    width: 65%;

    max-width: 650px;

    height: 320px;



    object-fit: cover;

    object-position: center;



    border-radius: 16px;



    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.20);

}





/* ============================= */

/* EXPERIENCIA - VIDEO DE FONDO */

/* ============================= */



.experience {

    position: relative;

    min-height: 600px;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

}



/* VIDEO DE FONDO */



.experience-video {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    z-index: 0;

}



/* CAPA OSCURA */



.experience-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.45);

    z-index: 1;

}



/* CONTENIDO ENCIMA DEL VIDEO */



.experience-content {

    position: relative;

    z-index: 2;

    text-align: center;

    color: white;

    padding: 80px 20px;

}