:root {
  --font-sans: "Manrope", sans-serif; --font-display: "Cormorant Garamond", serif;
  --background: oklch(0.975 0.006 85); --foreground: oklch(0.17 0.008 35); --card: oklch(1 0 0); --card-foreground: oklch(0.17 0.008 35);
  --primary: oklch(0.48 0.19 28); --primary-foreground: oklch(0.99 0 0); --secondary: oklch(0.25 0.01 35); --secondary-foreground: oklch(0.99 0 0);
  --muted: oklch(0.92 0.009 70); --muted-foreground: oklch(0.43 0.012 40); --accent: oklch(0.68 0.17 35); --accent-foreground: oklch(0.99 0 0);
  --border: oklch(0.84 0.014 55); --ring: oklch(0.48 0.19 28); --ink: oklch(0.14 0.008 30); --wine: oklch(0.36 0.15 25);
}
* { box-sizing: border-box; border-color: var(--border); }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--background); color: var(--foreground); font-family: var(--font-sans); overflow-x: hidden; }
body, button, a { letter-spacing: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }


.site-header { position: fixed; z-index: 50; top: 0; left: 0; width: 100%; height: 114px; padding: 10px clamp(20px,5vw,76px); display: grid; grid-template-columns: 170px minmax(0,1fr) auto; align-items: center; gap: 28px; background: color-mix(in oklab, var(--ink) 91%, transparent); backdrop-filter: blur(16px); border-bottom: 1px solid color-mix(in oklab, var(--primary-foreground) 16%, transparent); color: var(--primary-foreground); }


.brand img { width: 156px; height: 90px; object-fit: contain; }


.nav-links { display: flex; justify-content: center; gap: clamp(18px,2vw,34px); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.nav-links a { position: relative; padding: 12px 0; }
.nav-links a::after { content:""; position:absolute; left:0; bottom:5px; width:100%; height:2px; background:var(--primary); transform:scaleX(0); transition:transform .3s; }
.nav-links a:hover::after { transform:scaleX(1); }
.nav-cta, .button { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:48px; padding:0 22px; border:1px solid transparent; text-transform:uppercase; font-size:12px; font-weight:900; transition:transform .3s, background .3s; }
.nav-cta { background: var(--primary); color:var(--primary-foreground); }
.nav-cta:hover,.button:hover { transform:translateY(-3px); }
.menu-button { display:none; color:var(--primary-foreground); background:none; border:0; padding:8px; }
.hero { min-height: 900px; height: 100svh; position:relative; display:flex; align-items:center; overflow:hidden; color:var(--primary-foreground); }
.hero video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg, color-mix(in oklab,var(--ink) 90%,transparent) 0%,color-mix(in oklab,var(--ink) 62%,transparent) 48%,color-mix(in oklab,var(--ink) 20%,transparent) 100%); }
.hero-content { position:relative; z-index:2; max-width:810px; margin-left:clamp(24px,9vw,150px); padding:120px 24px 60px 0; }
.eyebrow,.section-number { display:inline-flex; align-items:center; gap:10px; color:var(--primary); text-transform:uppercase; font-size:12px; font-weight:900; }
.eyebrow::before,.section-number::before { content:""; width:42px; height:2px; background:currentColor; }
h1,h2,h3,p { margin-top:0; }
h1 { max-width:780px; font-family:var(--font-display); font-size:clamp(66px,8.5vw,130px); line-height:.76; font-weight:600; margin:25px 0 30px; }
h1 em,h2 em { display:block; color:var(--primary); font-weight:500; }
.hero h2 { max-width:650px; font-family:var(--font-display); font-size:clamp(25px,3vw,42px); line-height:1.05; }
.hero p { max-width:670px; line-height:1.75; color:color-mix(in oklab,var(--primary-foreground) 85%,transparent); font-size:15px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.button.primary { background:var(--primary); color:var(--primary-foreground); }
.button.glass { border-color:color-mix(in oklab,var(--primary-foreground) 52%,transparent); background:color-mix(in oklab,var(--primary-foreground) 8%,transparent); color:var(--primary-foreground); backdrop-filter:blur(8px); }
.scroll-cue { position:absolute; z-index:3; bottom:24px; left:50%; animation:bob 2s infinite; }
.section { padding:clamp(90px,10vw,150px) 24px; }
.section-inner { width:min(1180px,100%); margin:auto; }
.about-grid { display:grid; grid-template-columns: .9fr 1.1fr; gap:clamp(50px,8vw,110px); align-items:center; }
.about-copy h2,.section-heading h2,.faq-intro h2,.contact-card h2 { font-family:var(--font-display); font-size:clamp(45px,5vw,74px); line-height:.96; margin:22px 0 32px; }
.about-copy p,.section-heading p { color:var(--muted-foreground); line-height:1.85; }
.about-copy h3 { margin-top:34px; font-size:15px; text-transform:uppercase; }
.about-copy ul { list-style:none; padding:0; display:grid; gap:12px; }
.about-copy li { display:flex; gap:10px; align-items:center; font-weight:700; }
.about-copy li svg { color:var(--primary); }
.photo-collage { min-height:670px; position:relative; }
.photo-collage img { position:absolute; object-fit:cover; box-shadow:0 28px 60px color-mix(in oklab,var(--ink) 20%,transparent); }
.photo-main { width:72%; height:82%; right:0; top:0; }
.photo-small { width:43%; height:35%; left:0; border:8px solid var(--background); }
.photo-small.top { top:8%; }.photo-small.bottom { bottom:2%; }
.experience-stamp { position:absolute; right:8%; bottom:4%; width:155px; aspect-ratio:1; background:var(--primary); color:var(--primary-foreground); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; border-radius:50%; border:6px solid var(--background); }
.experience-stamp strong { font-family:var(--font-display); font-size:52px; line-height:.8; }.experience-stamp span{font-size:11px;text-transform:uppercase;max-width:100px;margin-top:9px;font-weight:800;}
.services { background:var(--ink); color:var(--primary-foreground); }
.section-heading { max-width:790px; margin-bottom:60px; }.section-heading em { display:inline; }.section-heading .light{color:var(--accent);}.section-heading p{color:color-mix(in oklab,var(--primary-foreground) 68%,transparent);max-width:620px;}
.service-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:color-mix(in oklab,var(--primary-foreground) 12%,transparent); }
.service-card { min-height:370px; position:relative; overflow:hidden; background:var(--secondary); transition:transform .35s,box-shadow .35s; }
.service-card.featured { grid-row:span 2; min-height:742px; }.service-card:last-child { grid-column:span 2; }
.service-card > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .7s; }
.service-card:hover { transform:translateY(-7px); z-index:2; box-shadow:0 24px 40px color-mix(in oklab,var(--ink) 50%,transparent); }.service-card:hover > img{transform:scale(1.05);}
.service-overlay { position:absolute; inset:0; padding:30px; display:flex; flex-direction:column; justify-content:flex-end; background:linear-gradient(0deg,color-mix(in oklab,var(--ink) 94%,transparent),transparent 75%); }
.service-overlay svg{color:var(--accent);margin-bottom:auto}.service-overlay>span{font-family:var(--font-display);font-size:15px;color:var(--accent)}.service-overlay h3{font-family:var(--font-display);font-size:34px;margin:8px 0}.service-overlay p{font-size:13px;line-height:1.6;color:color-mix(in oklab,var(--primary-foreground) 80%,transparent);max-width:320px;}
.visual-break { height:520px; position:relative; overflow:hidden; color:var(--primary-foreground); }.visual-break>img{width:100%;height:130%;object-fit:cover;position:absolute;top:-15%;}.visual-break::after{content:"";position:absolute;inset:0;background:color-mix(in oklab,var(--wine) 53%,transparent)}
.visual-break-copy{position:absolute;z-index:2;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.visual-break-copy span{text-transform:uppercase;font-size:12px;font-weight:900}.visual-break-copy strong{font-family:var(--font-display);font-size:clamp(55px,8vw,112px);font-weight:500;}
.process-layout { display:grid; grid-template-columns:1fr 1fr; gap:70px;align-items:start}.steps{border-top:1px solid var(--border)}.step{display:grid;grid-template-columns:70px 1fr;gap:22px;padding:27px 0;border-bottom:1px solid var(--border)}.step>span{font-family:var(--font-display);font-size:38px;color:var(--primary)}.step h3{font-family:var(--font-display);font-size:27px;margin:0 0 7px}.step p{color:var(--muted-foreground);line-height:1.6;font-size:14px}.process-gallery{display:grid;grid-template-columns:1fr 1fr;gap:12px}.process-gallery>img{height:330px;width:100%;object-fit:cover}.process-gallery>img:first-child{margin-top:60px}.tasting-note{grid-column:span 2;background:var(--wine);color:var(--primary-foreground);padding:26px;display:flex;gap:18px}.tasting-note svg{shrink:0}.tasting-note strong{font-family:var(--font-display);font-size:26px}.tasting-note p{font-size:13px;line-height:1.6;margin:6px 0 0}
.faq-section { position:relative;background:var(--ink);color:var(--primary-foreground);overflow:hidden}.faq-parallax{position:absolute;inset:0;opacity:.18}.faq-parallax img{width:100%;height:130%;object-fit:cover;position:absolute;top:-15%;filter:grayscale(1)}.faq-grid{position:relative;display:grid;grid-template-columns:.8fr 1.2fr;gap:90px;align-items:center}.faq-intro em{color:var(--accent)}.mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.mini-grid img{height:145px;width:100%;object-fit:cover}.accordion{border-top:1px solid color-mix(in oklab,var(--primary-foreground) 20%,transparent)}.faq-item{border-bottom:1px solid color-mix(in oklab,var(--primary-foreground) 20%,transparent)}.faq-item button{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center;padding:25px 0;background:none;border:0;color:var(--primary-foreground);text-align:left;font-weight:800}.faq-item button svg{transition:transform .3s}.faq-item.active button svg{transform:rotate(180deg);color:var(--accent)}.faq-item>div{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s}.faq-item>div p{overflow:hidden;margin:0;color:color-mix(in oklab,var(--primary-foreground) 70%,transparent);line-height:1.7}.faq-item.active>div{grid-template-rows:1fr}.faq-item.active>div p{padding-bottom:24px}
.contact{position:relative;min-height:870px;padding:0;display:grid;grid-template-columns:1.2fr .8fr;background:var(--primary)}.contact-images{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:3px}.contact-images img{width:100%;height:100%;object-fit:cover;min-height:0}.contact-images img:first-child{grid-row:span 2}.contact-card{align-self:center;margin-left:-70px;z-index:2;background:var(--background);padding:clamp(38px,5vw,74px);max-width:600px;box-shadow:0 34px 80px color-mix(in oklab,var(--ink) 30%,transparent)}.contact-card>img{width:180px;height:90px;object-fit:contain;margin-bottom:25px}.contact-card h2 em{display:inline}.contact-card p{line-height:1.7;color:var(--muted-foreground)}.contact-card>strong{display:block;margin:25px 0 15px}.contact-card>a:not(.button){display:flex;align-items:center;gap:12px;margin:13px 0;font-weight:700}.contact-card>a svg{color:var(--primary)}.contact-card .button{margin-top:25px;color:var(--primary-foreground)}
footer{background:var(--ink);color:var(--primary-foreground);display:flex;align-items:center;justify-content:space-between;gap:25px;padding:30px clamp(24px,6vw,90px);font-size:12px}footer img{width:130px}footer p{margin:0;text-transform:uppercase;font-weight:800}.whatsapp-float{position:fixed;z-index:45;right:22px;bottom:22px;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:oklch(.63 .19 145);color:oklch(1 0 0);box-shadow:0 8px 25px color-mix(in oklab,var(--ink) 30%,transparent)}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}.reveal.is-visible{opacity:1;transform:none}.reveal-media{opacity:0;transform:translateX(35px);transition:opacity .9s ease,transform .9s ease}.reveal-media.is-visible{opacity:1;transform:none}@keyframes bob{50%{transform:translateY(8px)}}
@media(max-width:900px){.site-header{height:72px;grid-template-columns:minmax(0,1fr) auto}.brand img{width:130px;height:50px}.nav-cta{display:none}.menu-button{display:block}.nav-links{position:fixed;top:72px;left:0;right:0;background:var(--ink);display:grid;gap:0;padding:12px 24px 24px;transform:translateY(-130%);transition:transform .35s}.nav-links.open{transform:none}.nav-links a{padding:16px;border-bottom:1px solid color-mix(in oklab,var(--primary-foreground) 12%,transparent)}.hero{min-height:760px}.hero-content{margin-left:24px}.about-grid,.process-layout,.faq-grid{grid-template-columns:1fr}.photo-collage{min-height:550px}.service-grid{grid-template-columns:1fr 1fr}.service-card.featured{grid-row:auto;min-height:370px}.service-card:last-child{grid-column:span 2}.faq-grid{gap:50px}.contact{grid-template-columns:1fr;min-height:auto}.contact-images{height:540px}.contact-card{margin:-80px 24px 60px;max-width:none}.contact-card>img{width:150px}.section{padding:90px 22px}}
@media(max-width:600px){h1{font-size:62px}.hero{min-height:780px}.hero h2{font-size:27px}.hero p{font-size:13px}.section{padding:76px 18px}.about-copy h2,.section-heading h2,.faq-intro h2,.contact-card h2{font-size:45px}.photo-collage{min-height:450px}.service-grid{grid-template-columns:1fr}.service-card,.service-card.featured{min-height:430px}.service-card:last-child{grid-column:auto}.visual-break{height:400px}.process-layout{gap:45px}.process-gallery>img{height:240px}.step{grid-template-columns:52px 1fr}.mini-grid img{height:100px}.contact-images{height:430px}.contact-card{margin:-45px 16px 45px;padding:35px 24px}.contact-card .button{width:100%;padding:0 12px}footer{flex-direction:column;text-align:center}.hero-actions .button{width:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal,.reveal-media{opacity:1;transform:none;transition:none}.scroll-cue{animation:none}.service-card,.service-card>img{transition:none}}



















/* FORMULARIO DE CONTACTO */

.contact-form {
    width: 100%;
    margin: 28px 0 24px;
}

.contact-form .form-group {
    width: 100%;
    margin-bottom: 16px;
}

.contact-form label {
    display: block;
    margin-bottom: 7px;
    font-size: 0.82rem;
    font-weight: 600;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background: #fff;
    color: #222;
    padding: 13px 14px;
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.92rem;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: #c62828;
    box-shadow: 0 0 0 2px rgba(198, 40, 40, 0.08);
}

.contact-form textarea {
    resize: vertical;
    min-height: 100px;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: #999;
}

.contact-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.contact-form .form-submit {
    width: 100%;
    border: none;
    cursor: pointer;
    padding: 14px 18px;
    border-radius: 6px;
    background: #c62828;
    color: #fff;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.contact-form .form-submit:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}


/* RESPONSIVE */

@media (max-width: 700px) {

    .contact-form .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .contact-form {
        margin-top: 24px;
    }

    .contact-form input,
    .contact-form textarea {
        font-size: 16px;
    }

}