:root { --background: oklch(0.965 0.018 92); --foreground: oklch(0.22 0.055 145); --primary: oklch(0.32 0.09 150); --primary-foreground: oklch(0.98 0.01 95); --secondary: oklch(0.62 0.105 78); --muted: oklch(0.91 0.024 93); --muted-foreground: oklch(0.47 0.035 115); --accent: oklch(0.73 0.13 85); --border: oklch(0.83 0.034 105); --card: oklch(0.99 0.008 92); --forest: oklch(0.25 0.075 151); --forest-deep: oklch(0.17 0.05 150); --gold: oklch(0.72 0.13 82); --cream: oklch(0.965 0.018 92); --coffee: oklch(0.37 0.08 62); }

* { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin:0; background:var(--background); color:var(--foreground); font-family:Arial,sans-serif; } a { color:inherit; text-decoration:none; } button,input,textarea { font:inherit; } img { display:block; width:100%; } ::selection { background:var(--gold); color:var(--forest-deep); }

.site-nav { position:fixed; z-index:50; top:0; left:0; width:100%; height:114px; padding:0 clamp(20px,5vw,76px); display:grid; grid-template-columns:auto 1fr auto; align-items:center; color:var(--primary-foreground); transition:.35s ease; border-bottom:1px solid color-mix(in oklab,var(--primary-foreground) 20%,transparent); }

.site-nav-scrolled { height:110px; background:color-mix(in oklab,var(--forest-deep) 94%,transparent); backdrop-filter:blur(14px); box-shadow:0 8px 30px oklch(0 0 0/.16); }

.brand { display:flex; align-items:center; gap:11px; font-size:13px; font-weight:800; letter-spacing:.08em; }
.brand img { width:98px; height:98px; object-fit:cover; border-radius:50%; }

.desktop-nav { display:flex; justify-content:center; gap:clamp(18px,2.2vw,38px); font-size:12px; font-weight:700; text-transform:uppercase; }
.desktop-nav a { position:relative; padding:27px 0; }
.desktop-nav a::after { content:""; position:absolute; left:0; right:100%; bottom:18px; height:2px; background:var(--gold); transition:.25s; }
.desktop-nav a:hover::after { right:0; }

.nav-cta,.button { display:inline-flex; align-items:center; justify-content:center; gap:9px; border:0; cursor:pointer; text-transform:uppercase; font-size:12px; font-weight:800; letter-spacing:.06em; transition:.25s; } .nav-cta { padding:12px 18px; border:1px solid color-mix(in oklab,var(--primary-foreground) 45%,transparent); } .nav-cta:hover { background:var(--gold); color:var(--forest-deep); border-color:var(--gold); } .menu-button { display:none; background:none; border:0; color:inherit; }
.hero { position:relative; min-height:94vh; display:flex; align-items:flex-end; color:var(--primary-foreground); } .hero-video,.hero-shade { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .hero-video { animation:heroFade 1.1s ease; } .hero-shade { background:linear-gradient(90deg,oklch(0.12 0.04 150/.82) 0%,oklch(0.12 0.04 150/.45) 48%,oklch(0.12 0.04 150/.15) 100%),linear-gradient(0deg,oklch(0.1 0.03 150/.65),transparent 58%); }
.hero-content { position:relative; z-index:2; width:min(760px,88vw); margin:0 0 clamp(110px,14vh,160px) clamp(24px,8vw,132px); animation:slideHero .9s .15s both ease-out; } .eyebrow { display:flex; align-items:center; gap:10px; text-transform:uppercase; font-size:11px; font-weight:800; letter-spacing:.18em; margin:0 0 20px; } .eyebrow span { width:36px; height:2px; background:var(--gold); } .eyebrow.dark { color:var(--primary); } .eyebrow.light { color:var(--gold); }
h1,h2,h3 { font-family:Georgia,serif; margin:0; letter-spacing:0; } h1 { font-size:clamp(44px,6.6vw,98px); line-height:.96; font-weight:400; } h1 em,h2 em { color:var(--gold); font-weight:400; } .hero-copy { max-width:570px; font-size:clamp(17px,1.5vw,22px); line-height:1.5; margin:28px 0 34px; } .hero-actions { display:flex; flex-wrap:wrap; gap:12px; } .button { min-height:50px; padding:0 23px; } .button-gold { background:var(--gold); color:var(--forest-deep); } .button-gold:hover { transform:translateY(-3px); box-shadow:0 12px 28px oklch(0 0 0/.25); } .button-outline { border:1px solid color-mix(in oklab,var(--primary-foreground) 65%,transparent); color:var(--primary-foreground); } .button-outline:hover { background:var(--primary-foreground); color:var(--forest); } .scroll-cue { position:absolute; z-index:3; right:5vw; bottom:34px; display:flex; align-items:center; gap:12px; font-size:11px; text-transform:uppercase; letter-spacing:.12em; }
.section { padding:clamp(80px,10vw,145px) clamp(22px,7vw,110px); } .section-grid { max-width:1240px; margin:auto; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(55px,8vw,120px); align-items:center; } .story-collage { position:relative; padding:0 48px 58px 0; } .story-main { height:600px; object-fit:cover; } .story-float { position:absolute; right:0; bottom:0; width:45%; height:250px; object-fit:cover; border:8px solid var(--background); } .story-seal { position:absolute; left:-25px; bottom:65px; width:130px; height:130px; border-radius:50%; background:var(--forest); color:var(--primary-foreground); display:grid; place-content:center; text-align:center; gap:5px; box-shadow:0 15px 40px oklch(0 0 0/.18); }
h2 { color:var(--forest); font-size:clamp(40px,5vw,72px); line-height:1.02; font-weight:400; } .lead { font-size:20px; line-height:1.6; color:var(--coffee); margin:30px 0 18px; } .story-copy>p:not(.eyebrow) { line-height:1.8; color:var(--muted-foreground); } .values { display:grid; gap:18px; margin-top:32px; } .values>div { display:flex; gap:15px; align-items:center; } .values svg { color:var(--gold); width:25px; flex:none; } .values span { display:flex; flex-direction:column; font-size:13px; color:var(--muted-foreground); } .values strong { color:var(--forest); font-size:14px; margin-bottom:4px; }
.photo-strip { max-width:1240px; margin:100px auto 0; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; } .photo-strip figure { position:relative; margin:0; height:260px; overflow:hidden; } .photo-strip figure:nth-child(even) { margin-top:35px; } .photo-strip img,.mosaic img,.dist-card>img { height:100%; object-fit:cover; transition:transform .7s ease; } .photo-strip figure:hover img,.mosaic figure:hover img,.dist-card:hover>img { transform:scale(1.07); } .photo-strip span { position:absolute; bottom:12px; left:14px; color:var(--primary-foreground); font-family:Georgia,serif; }
.product-section { position:relative; background:var(--forest-deep); color:var(--primary-foreground); } .product-bg { position:absolute; inset:0; opacity:.11; background:url('/media/beans-close.jpg') center/cover fixed; } .product-section>*:not(.product-bg) { position:relative; z-index:1; } .section-heading { max-width:1240px; margin:auto; } .section-heading h2,.contact-form-wrap h2 { color:var(--primary-foreground); } .product-feature { max-width:1120px; margin:70px auto 0; display:grid; grid-template-columns:1fr 1fr; background:var(--cream); color:var(--forest); box-shadow:0 30px 90px oklch(0 0 0/.3); } .product-visual { position:relative; min-height:570px; overflow:hidden; background:var(--forest); } .product-visual>img { height:100%; object-fit:cover; } .weight { position:absolute; right:22px; bottom:22px; width:120px; height:120px; display:flex; flex-direction:column; justify-content:center; text-align:center; border-radius:50%; background:var(--gold); color:var(--forest-deep); } .weight strong { font:36px Georgia,serif; } .weight span { font-size:10px; text-transform:uppercase; } .product-details { padding:clamp(40px,6vw,80px); align-self:center; } .product-tag { font-size:11px; letter-spacing:.18em; font-weight:800; color:var(--coffee); } .product-details h3 { margin:12px 0 22px; font-size:54px; font-weight:400; } .product-details p { color:var(--muted-foreground); line-height:1.7; } .product-details ul { list-style:none; padding:0; margin:28px 0 36px; display:grid; gap:15px; } .product-details li { display:flex; gap:11px; align-items:center; font-size:14px; } .product-details li svg { width:18px; color:var(--gold); }
.mosaic { max-width:1240px; height:430px; margin:90px auto 0; display:grid; grid-template-columns:1.2fr .8fr .8fr; grid-template-rows:1fr 1fr; gap:10px; } .mosaic figure { margin:0; overflow:hidden; } .mosaic-1 { grid-row:span 2; } .mosaic-4 { grid-column:span 2; }
.distribution-section { background:var(--cream); } .dist-heading { max-width:1240px; margin:auto; display:grid; grid-template-columns:1.2fr .8fr; gap:70px; align-items:end; } .dist-heading>p { color:var(--muted-foreground); line-height:1.8; padding-bottom:10px; } .dist-cards { max-width:1240px; margin:70px auto 0; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .dist-card { position:relative; height:500px; overflow:hidden; color:var(--primary-foreground); transition:transform .3s,box-shadow .3s; } .dist-card:hover { transform:translateY(-10px); box-shadow:0 22px 50px oklch(0 0 0/.2); } .dist-card-shade { position:absolute; inset:0; background:linear-gradient(0deg,var(--forest-deep),transparent 75%); } .dist-card-content { position:absolute; inset:0; padding:30px; display:flex; flex-direction:column; justify-content:flex-end; } .dist-card-content>svg { width:34px; height:34px; color:var(--gold); margin-bottom:auto; } .dist-card-content>span { font:14px Georgia,serif; color:var(--gold); } .dist-card-content h3 { font-size:31px; margin:9px 0 10px; } .dist-card-content p { font-size:13px; line-height:1.6; margin:0; color:color-mix(in oklab,var(--primary-foreground) 82%,transparent); } .dist-card-content a { position:absolute; right:25px; bottom:25px; width:44px; height:44px; display:grid; place-content:center; border:1px solid color-mix(in oklab,var(--primary-foreground) 45%,transparent); }
.market-band { max-width:1240px; margin:25px auto 0; padding:25px 28px; background:var(--forest); color:var(--primary-foreground); display:grid; grid-template-columns:auto repeat(3,1fr) auto; align-items:center; gap:25px; } .market-band>svg { color:var(--gold); width:35px; height:35px; } .market-band>div { display:flex; flex-direction:column; } .market-band strong { font:18px Georgia,serif; } .market-band span { font-size:11px; opacity:.7; margin-top:4px; } .button-light { background:var(--cream); color:var(--forest); }
.faq-section { padding-bottom:0; } .faq-layout { max-width:1240px; margin:auto; display:grid; grid-template-columns:.8fr 1.2fr; gap:100px; } .faq-images { position:relative; height:330px; margin-top:55px; } .faq-images img:first-child { width:72%; height:100%; object-fit:cover; } .faq-images img:last-child { position:absolute; width:38%; height:57%; object-fit:cover; right:0; bottom:-25px; border:7px solid var(--background); } .faq-item { border-top:1px solid var(--border); } .faq-item:last-child { border-bottom:1px solid var(--border); } .faq-item button { width:100%; min-height:82px; background:none; border:0; color:var(--forest); display:grid; grid-template-columns:45px 1fr auto; align-items:center; text-align:left; cursor:pointer; font:20px Georgia,serif; } .faq-item button span { font:11px Arial,sans-serif; color:var(--gold); } .faq-item button svg { width:18px; transition:.3s; } .faq-item.active button svg { transform:rotate(180deg); } .faq-answer { max-height:0; overflow:hidden; transition:.35s ease; } .faq-answer p { margin:0 40px 25px 45px; color:var(--muted-foreground); line-height:1.7; } .faq-item.active .faq-answer { max-height:180px; }
.wide-photo { max-width:1240px; height:360px; margin:120px auto 0; background-size:cover; background-position:center; background-attachment:fixed; display:grid; place-content:center; text-align:center; color:var(--primary-foreground); position:relative; } .wide-photo::before { content:""; position:absolute; inset:0; background:oklch(0.16 0.06 150/.6); } .wide-photo>div { position:relative; } .wide-photo svg { color:var(--gold); width:34px; height:34px; margin:auto; } .wide-photo p { font:clamp(25px,3vw,40px)/1.3 Georgia,serif; }
.contact-section { display:grid; grid-template-columns:.9fr 1.1fr; background:var(--forest-deep); color:var(--primary-foreground); } .contact-image { position:relative; min-height:760px; } .contact-image>img { height:100%; object-fit:cover; } .contact-image::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,var(--forest-deep),transparent 55%); } .contact-overlay { position:absolute; z-index:2; left:45px; right:45px; bottom:45px; } .contact-overlay img { width:105px; height:105px; border-radius:50%; object-fit:cover; } .contact-overlay p { max-width:330px; font:25px/1.35 Georgia,serif; }
.contact-form-wrap { padding:clamp(65px,8vw,120px); } .contact-form-wrap>p:not(.eyebrow) { line-height:1.7; color:color-mix(in oklab,var(--primary-foreground) 70%,transparent); max-width:620px; } form { margin-top:45px; } .form-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; } label { display:grid; gap:8px; margin-bottom:20px; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--gold); } input,textarea { width:100%; border:0; border-bottom:1px solid color-mix(in oklab,var(--primary-foreground) 25%,transparent); background:transparent; color:var(--primary-foreground); padding:12px 0; outline:none; border-radius:0; text-transform:none; } input:focus,textarea:focus { border-color:var(--gold); } input::placeholder,textarea::placeholder { color:color-mix(in oklab,var(--primary-foreground) 35%,transparent); } .submit-button { margin-top:10px; } .contact-meta { margin-top:40px; padding-top:25px; border-top:1px solid color-mix(in oklab,var(--primary-foreground) 15%,transparent); display:flex; flex-wrap:wrap; gap:22px; font-size:12px; } .contact-meta a,.contact-meta span { display:flex; align-items:center; gap:7px; } .contact-meta svg { color:var(--gold); width:16px; }
footer { min-height:105px; padding:25px 6vw; display:flex; align-items:center; justify-content:space-between; gap:25px; background:var(--forest-deep); color:color-mix(in oklab,var(--primary-foreground) 70%,transparent); border-top:1px solid color-mix(in oklab,var(--primary-foreground) 12%,transparent); font-size:11px; } footer>div { display:flex; gap:24px; } .footer-brand img { width:43px; height:43px; } .whatsapp-float { position:fixed; z-index:45; right:22px; bottom:22px; width:58px; height:58px; display:grid; place-content:center; border-radius:50%; background:oklch(0.7 0.19 145); color:oklch(1 0 0); box-shadow:0 10px 30px oklch(0 0 0/.25); transition:.25s; } .whatsapp-float:hover { transform:translateY(-5px) scale(1.04); }
.reveal { opacity:0; transform:translateY(34px); transition:opacity .8s ease,transform .8s ease; } .reveal.slide-left { transform:translateX(-45px); } .reveal.is-visible { opacity:1; transform:none; }
@keyframes slideHero { from { opacity:0; transform:translateX(-45px); } to { opacity:1; transform:none; } } @keyframes heroFade { from { opacity:0; transform:scale(1.04); } to { opacity:1; transform:scale(1); } }
@media(max-width:900px){ .desktop-nav,.nav-cta { display:none; } .site-nav { grid-template-columns:1fr auto; height:70px; } .menu-button { display:block; }

.mobile-nav { position:absolute; top:70px; left:0; right:0; padding:22px; display:grid; background:var(--forest-deep); border-top:1px solid color-mix(in oklab,var(--primary-foreground) 15%,transparent); } 
.mobile-nav[hidden] {
    display: none !important;
}

.mobile-nav a { padding:14px 8px; font-size:13px; text-transform:uppercase; font-weight:700; } .section-grid,.product-feature,.dist-heading,.faq-layout,.contact-section { grid-template-columns:1fr; } .story-main { height:470px; } .story-copy { margin-top:25px; } .product-feature { max-width:650px; } .product-visual { min-height:500px; } .dist-heading { gap:25px; } .dist-cards { grid-template-columns:1fr; } .dist-card { height:410px; } .market-band { grid-template-columns:auto 1fr; } .market-band .button { grid-column:span 2; } .faq-layout { gap:70px; } .faq-images { max-width:550px; } .contact-image { min-height:600px; } .contact-form-wrap { padding:80px 8vw; } }
@media(max-width:600px){ .brand span { display:none; } .hero { min-height:92svh; } .hero-content { margin-left:22px; margin-bottom:110px; } h1 { font-size:46px; } .scroll-cue span { display:none; } .section { padding:75px 20px; } .story-collage { padding-right:30px; } .story-main { height:390px; } .story-float { height:170px; } .story-seal { left:-5px; width:105px; height:105px; font-size:12px; } .photo-strip { grid-template-columns:1fr 1fr; margin-top:70px; } .photo-strip figure { height:190px; } .photo-strip figure:nth-child(even) { margin-top:18px; } .product-feature { margin-top:45px; } .product-visual { min-height:390px; } .product-details { padding:40px 25px; } .product-details h3 { font-size:43px; } .mosaic { grid-template-columns:1fr 1fr; height:500px; } .mosaic-1 { grid-row:auto; } .mosaic-4 { grid-column:auto; } .mosaic-5 { grid-column:span 2; } .market-band { padding:25px 20px; } .market-band>svg { display:none; } .market-band { grid-template-columns:1fr; } .market-band .button { grid-column:auto; } .faq-item button { font-size:17px; grid-template-columns:35px 1fr auto; } .wide-photo { margin-top:80px; height:310px; background-attachment:scroll; } .form-row { grid-template-columns:1fr; gap:0; } .contact-image { min-height:480px; } .contact-overlay { left:25px; bottom:25px; } footer { flex-direction:column; text-align:center; padding:35px 20px; } }
@media(prefers-reduced-motion:reduce){ * { scroll-behavior:auto!important; animation:none!important; transition:none!important; } .reveal { opacity:1; transform:none; } .product-bg,.wide-photo { background-attachment:scroll; } }




.whatsapp-float {
    position: fixed;
    right: 25px;
    bottom: 25px;
    z-index: 9999;

    width: 76px;
    height: 76px;
    border-radius: 50%;

    background: #25D366;
    color: #fff;

    display: flex;
    align-items: center;
    justify-content: center;

    text-decoration: none;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.25),
        0 0 0 0 rgba(37, 211, 102, 0.7);

    transition: all 0.3s ease;

    animation: whatsappPulse 2s infinite;
}

.whatsapp-float svg {
    width: 40px;
    height: 40px;
    fill: #fff;
}

.whatsapp-float span {
    position: absolute;
    right: 88px;
    white-space: nowrap;

    background: #183967;
    color: #fff;

    padding: 11px 17px;
    border-radius: 25px;

    font-size: 14px;
    font-weight: 700;

    opacity: 0;
    transform: translateX(10px);
    pointer-events: none;

    transition: all 0.3s ease;

    box-shadow: 0 5px 15px rgba(0,0,0,.2);
}

.whatsapp-float:hover {
    transform: scale(1.1);
    background: #20bd5a;
    animation: none;
}

.whatsapp-float:hover span {
    opacity: 1;
    transform: translateX(0);
}

@keyframes whatsappPulse {
    0% {
        box-shadow:
            0 8px 25px rgba(0,0,0,.25),
            0 0 0 0 rgba(37,211,102,.7);
    }

    70% {
        box-shadow:
            0 8px 25px rgba(0,0,0,.25),
            0 0 0 18px rgba(37,211,102,0);
    }

    100% {
        box-shadow:
            0 8px 25px rgba(0,0,0,.25),
            0 0 0 0 rgba(37,211,102,0);
    }
}

/* Móvil */
@media (max-width: 600px) {
    .whatsapp-float {
        right: 18px;
        bottom: 18px;
        width: 68px;
        height: 68px;
    }

    .whatsapp-float svg {
        width: 36px;
        height: 36px;
    }

    .whatsapp-float span {
        display: none;
    }
}