:root {
            --verde-950: #102c20;
            --verde-900: #17402d;
            --verde-800: #23563c;
            --verde-600: #52885e;
            --verde-200: #dce9db;
            --crema: #f8f7f1;
            --arena: #ece8dc;
            --tinta: #1e2a23;
            --blanco: #fffefa;
            --sombra: 0 20px 55px rgba(16, 44, 32, .12);
        }

        * { box-sizing: border-box; margin: 0; padding: 0; }
        html { scroll-behavior: smooth; scroll-padding-top: 82px; }
        body {
            background: var(--crema);
            color: var(--tinta);
            font-family: "DM Sans", "Segoe UI", sans-serif;
            line-height: 1.65;
            overflow-x: hidden;
        }
        img { display: block; max-width: 100%; }
        a { color: inherit; }
        button { font: inherit; }

        .contenedor { margin: 0 auto; max-width: 1200px; padding: 0 32px; }
        .etiqueta {
            align-items: center;
            color: var(--verde-600);
            display: flex;
            font-size: .72rem;
            font-weight: 700;
            gap: 9px;
            letter-spacing: .16em;
            text-transform: uppercase;
        }
        .etiqueta::before { background: currentColor; border-radius: 50%; content: ""; height: 6px; width: 6px; }
        .titulo-seccion {
            color: var(--verde-950);
            font-family: "Playfair Display", Georgia, serif;
            font-size: clamp(2.15rem, 4vw, 3.55rem);
            letter-spacing: -.045em;
            line-height: 1.08;
            margin-top: 12px;
        }
        .intro-seccion { color: #526057; margin-top: 18px; max-width: 560px; }
        .seccion { padding: 110px 0; }

        .barra {
            backdrop-filter: blur(14px);
            background: rgba(16,44,32,.94);
            border-bottom: 1px solid rgba(255,255,255,.1);
            color: var(--blanco);
            left: 0;
            position: fixed;
            right: 0;
            top: 0;
            transition: background .25s ease, box-shadow .25s ease;
            z-index: 1000;
        }
        .barra.sombra { box-shadow: 0 5px 22px rgba(0,0,0,.2); }
        .navegacion { align-items: center; display: flex; height: 78px; justify-content: space-between; }
        .marca { align-items: center; display: inline-flex; gap: 11px; text-decoration: none; }
        .marca img { border: 1px solid rgba(255,255,255,.7); border-radius: 50%; height: 44px; object-fit: cover; width: 44px; }
        .marca span { font-family: "Playfair Display", Georgia, serif; font-size: 1.2rem; font-weight: 600; letter-spacing: -.02em; }
        .enlaces { align-items: center; display: flex; gap: 24px; list-style: none; }
        .enlaces a { color: rgba(255,255,255,.82); font-size: .84rem; font-weight: 600; text-decoration: none; transition: color .2s; }
        .enlaces a:hover, .enlaces a:focus-visible { color: #d7eecc; }
        .enlaces .nav-cta { border: 1px solid rgba(255,255,255,.6); border-radius: 100px; color: var(--blanco); padding: 8px 14px; }
        .menu-boton { background: transparent; border: 0; color: white; cursor: pointer; display: none; padding: 8px; }
        .menu-boton svg { height: 25px; width: 25px; }

        .portada {
            align-items: center;
            background: linear-gradient(90deg, rgba(11,35,24,.86) 0%, rgba(17,54,34,.63) 48%, rgba(15,39,26,.23) 100%), url('portadavivero.webp') center/cover no-repeat;
            color: var(--blanco);
            display: flex;
            min-height: min(810px, 100vh);
            padding: 142px 0 78px;
            position: relative;
        }
        .portada::after { background: linear-gradient(transparent, rgba(10,30,20,.48)); bottom: 0; content: ""; height: 32%; left: 0; position: absolute; right: 0; }
        .portada .contenedor { position: relative; width: 100%; z-index: 1; }
        .portada__texto { max-width: 740px; }
        .portada .etiqueta { color: #d3ebc5; }
        .portada h1 { font-family: "Playfair Display", Georgia, serif; font-size: clamp(3.35rem, 8vw, 6.9rem); letter-spacing: -.065em; line-height: .94; margin: 19px 0 23px; text-wrap: balance; }
        .portada p { color: rgba(255,255,255,.9); font-size: clamp(1rem, 1.7vw, 1.2rem); max-width: 585px; }
        .acciones { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 34px; }
        .boton { align-items: center; border: 1px solid transparent; border-radius: 100px; display: inline-flex; font-size: .88rem; font-weight: 700; gap: 8px; justify-content: center; min-height: 50px; padding: 12px 21px; text-decoration: none; transition: transform .25s ease, background .25s ease, border-color .25s ease; }
        .boton:hover { transform: translateY(-2px); }
        .boton-principal { background: #d9edcc; color: var(--verde-950); }
        .boton-principal:hover { background: #fff; }
        .boton-secundario { border-color: rgba(255,255,255,.68); color: var(--blanco); }
        .boton-secundario:hover { background: rgba(255,255,255,.12); }
        .desplazar { align-items: center; bottom: 30px; color: rgba(255,255,255,.75); display: flex; font-size: .69rem; font-weight: 700; gap: 8px; letter-spacing: .13em; position: absolute; right: max(32px, calc((100vw - 1136px) / 2)); text-decoration: none; text-transform: uppercase; z-index: 1; }
        .desplazar::after { border: solid currentColor; border-width: 0 1px 1px 0; content: ""; height: 7px; transform: rotate(45deg) translateY(-2px); width: 7px; }

        .presentacion { display: grid; gap: clamp(42px, 8vw, 110px); grid-template-columns: 1fr .92fr; align-items: center; }
        .presentacion__foto { min-height: 520px; position: relative; }
        .presentacion__foto img { border-radius: 3px; box-shadow: var(--sombra); height: 100%; object-fit: cover; position: absolute; width: 88%; }
        .presentacion__foto::after { background: linear-gradient(135deg, transparent 40%, rgba(9,26,17,.62) 100%); bottom: 0; content: ""; height: 60%; pointer-events: none; position: absolute; right: 12%; width: 60%; z-index: 1; }
        .presentacion__foto-accento {
    border: 6px solid var(--crema);
    bottom: -30px;
    box-shadow: var(--sombra);
    left: -9%;
    overflow: hidden;
    position: absolute;
    width: 44%;
    z-index: 2;
}

.presentacion__foto-accento::after {
    background: linear-gradient(90deg, rgba(11,35,24,.86) 0%, rgba(17,54,34,.63) 48%, rgba(15,39,26,.35) 100%);
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 1;
}
        .presentacion__foto-accento img { aspect-ratio: 4 / 5; height: auto; object-fit: cover; width: 100%; }
        .ficha-flotante { background: var(--verde-950); bottom: 0; color: white; left: 58%; padding: 26px 28px; position: absolute; width: min(260px, 60%); z-index: 2; }
        .ficha-flotante span { color: #b8d7a7; display: block; font-size: .68rem; font-weight: 700; letter-spacing: .14em; margin-bottom: 3px; text-transform: uppercase; }
        .ficha-flotante strong { font-family: "Playfair Display", Georgia, serif; font-size: 1.42rem; font-weight: 600; line-height: 1.15; }
        .pilares { display: grid; gap: 1px; grid-template-columns: 1fr 1fr; margin-top: 34px; }
        .pilar { border-top: 1px solid #ccd7cb; padding: 19px 15px 12px 0; }
        .pilar strong { color: var(--verde-900); display: block; font-family: "Playfair Display", Georgia, serif; font-size: 1.18rem; }
        .pilar span { color: #647269; display: block; font-size: .83rem; margin-top: 2px; }

        .franja { background: var(--verde-950); color: white; padding: 34px 0; }
        .beneficios { display: grid; grid-template-columns: repeat(3, 1fr); }
        .beneficio { align-items: center; display: flex; gap: 13px; padding: 5px 30px; }
        .beneficio + .beneficio { border-left: 1px solid rgba(255,255,255,.16); }
        .beneficio__icono { align-items: center; background: rgba(185,215,167,.14); border-radius: 50%; color: #c6e3b7; display: flex; flex: 0 0 38px; height: 38px; justify-content: center; width: 38px; }
        .beneficio strong { display: block; font-size: .9rem; }
        .beneficio span { color: rgba(255,255,255,.63); display: block; font-size: .76rem; line-height: 1.35; }

        .galeria-fondo { background: var(--arena); }
        .encabezado-seccion { align-items: end; display: flex; justify-content: space-between; gap: 25px; margin-bottom: 42px; }
        .encabezado-seccion .intro-seccion { max-width: 430px; }
        .galeria { display: grid; gap: 14px; grid-auto-rows: 190px; grid-template-columns: repeat(4, 1fr); }
        .foto-galeria { border-radius: 3px; overflow: hidden; position: relative; }
        .foto-galeria:nth-child(1), .foto-galeria:nth-child(6) { grid-row: span 2; }
        .foto-galeria:nth-child(4), .foto-galeria:nth-child(9) { grid-column: span 2; }
        .foto-galeria img { filter: saturate(.9); height: 100%; object-fit: cover; transition: transform .6s ease, filter .4s ease; width: 100%; }
        .foto-galeria::after { background: linear-gradient(transparent 50%, rgba(12,38,25,.6)); bottom: 0; content: ""; left: 0; opacity: .8; position: absolute; right: 0; top: 0; transition: opacity .3s; }
        .foto-galeria span { bottom: 14px; color: white; font-size: .74rem; font-weight: 700; left: 15px; letter-spacing: .07em; opacity: 0; position: absolute; text-transform: uppercase; transform: translateY(8px); transition: opacity .3s, transform .3s; z-index: 1; }
        .foto-galeria:hover img { filter: saturate(1.12); transform: scale(1.06); }
        .foto-galeria:hover::after { opacity: 1; }
        .foto-galeria:hover span { opacity: 1; transform: translateY(0); }

        .servicios { display: grid; gap: 15px; grid-template-columns: repeat(3, 1fr); margin-top: 46px; }
        .servicio { background: var(--blanco); border: 1px solid #e6e6dc; display: flex; flex-direction: column; overflow: hidden; position: relative; transition: box-shadow .3s, transform .3s; }
        .servicio:hover { box-shadow: 0 16px 35px rgba(16,44,32,.1); transform: translateY(-5px); }
        .servicio__foto { height: 172px; overflow: hidden; }
        .servicio__foto img { height: 100%; object-fit: cover; transition: transform .6s ease; width: 100%; }
        .servicio:hover .servicio__foto img { transform: scale(1.07); }
        .servicio__cuerpo { flex: 1; padding: 24px 28px 60px; }
        .servicio__numero { color: #b3c7af; font-family: "Playfair Display", Georgia, serif; font-size: 1.1rem; }
        .servicio h3 { color: var(--verde-900); font-family: "Playfair Display", Georgia, serif; font-size: 1.62rem; letter-spacing: -.035em; margin: 12px 0 8px; }
        .servicio p { color: #617066; font-size: .9rem; }
        .servicio svg { bottom: 25px; color: var(--verde-600); height: 24px; position: absolute; right: 28px; width: 24px; }

        /* ===== CATÁLOGO ===== */
        .catalogo-fondo { background: var(--arena); }
        .catalogo-grid { display: grid; gap: 26px; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); margin-top: 46px; }
        .producto-card { background: var(--blanco); border: 1px solid #e6e6dc; display: flex; flex-direction: column; overflow: hidden; transition: box-shadow .3s, transform .3s; }
        .producto-card:hover { box-shadow: 0 16px 35px rgba(16,44,32,.12); transform: translateY(-5px); }
        .producto-card__foto { height: 210px; overflow: hidden; position: relative; }
        .producto-card__foto img { height: 100%; object-fit: cover; transition: transform .6s ease; width: 100%; }
        .producto-card:hover .producto-card__foto img { transform: scale(1.07); }
        .producto-card__badge { background: rgba(16,44,32,.88); border-radius: 100px; color: white; font-size: .64rem; font-weight: 700; left: 14px; letter-spacing: .08em; padding: 6px 12px; position: absolute; text-transform: uppercase; top: 14px; }
        .producto-card__cuerpo { display: flex; flex: 1; flex-direction: column; padding: 22px 24px 26px; }
        .producto-card__categoria { color: var(--verde-600); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
        .producto-card__nombre { color: var(--verde-950); font-family: "Playfair Display", Georgia, serif; font-size: 1.3rem; letter-spacing: -.02em; margin: 6px 0 8px; }
        .producto-card__descripcion { color: #617066; flex: 1; font-size: .87rem; }
        .producto-card__caracteristicas { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 16px 0 0; }
        .producto-card__caracteristicas li { background: var(--verde-200); border-radius: 100px; color: var(--verde-900); font-size: .71rem; font-weight: 600; padding: 5px 11px; }
        .producto-card__precios { align-items: end; border-top: 1px solid #ece8dc; display: flex; gap: 18px; justify-content: space-between; margin-top: 18px; padding-top: 15px; }
        .producto-card__precios small { color: #8a9389; display: block; font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
        .producto-card__precios strong { color: var(--verde-950); font-family: "Playfair Display", Georgia, serif; font-size: 1.18rem; }
        .producto-card__cta { margin-top: 17px; text-align: center; width: 100%; }
        .catalogo-nota { color: #7c8880; font-size: .8rem; margin-top: 34px; }

        /* ===== BOTÓN FLOTANTE WHATSAPP ===== */
        .whatsapp-flotante { align-items: center; background: #25966b; border-radius: 50%; bottom: 26px; box-shadow: 0 10px 28px rgba(16,44,32,.35); color: white; display: flex; height: 58px; justify-content: center; position: fixed; right: 26px; transition: transform .25s ease, background .25s ease; width: 58px; z-index: 900; }
        .whatsapp-flotante:hover { background: #1d7d58; transform: scale(1.08); }
        .whatsapp-flotante svg { height: 27px; width: 27px; }

        /* Fondo de contacto con una textura discreta y sin depender de archivos externos. */
        .contacto-visual {
            background: linear-gradient(112deg, rgba(12,37,25,.97), rgba(25,72,48,.89)), radial-gradient(circle at 85% 24%, rgba(193,223,157,.34), transparent 30%), radial-gradient(circle at 77% 76%, rgba(255,255,255,.13), transparent 16%);
            color: white;
            overflow: hidden;
            padding: 0;
            position: relative;
        }
        .contacto-visual::before { border: 1px solid rgba(211,235,197,.2); border-radius: 50%; content: ""; height: 440px; position: absolute; right: -105px; top: -190px; width: 440px; }
        .contacto-visual .contenedor { display: grid; gap: 70px; grid-template-columns: .85fr 1.15fr; padding-bottom: 105px; padding-top: 105px; position: relative; }
        .contacto-visual .etiqueta { color: #c8e5b8; }
        .contacto-visual .titulo-seccion { color: var(--blanco); }
        .contacto-visual .intro-seccion { color: rgba(255,255,255,.74); }
        .contacto-foto { border-radius: 4px; box-shadow: 0 18px 40px rgba(0,0,0,.35); margin-top: 32px; max-width: 340px; overflow: hidden; }
        .contacto-foto img { display: block; height: 230px; object-fit: cover; width: 100%; }
        .contacto-foto figcaption { background: rgba(12,33,22,.92); color: rgba(255,255,255,.85); font-size: .72rem; font-weight: 600; letter-spacing: .04em; padding: 9px 13px; }
        .datos-contacto { align-content: center; display: grid; gap: 1px; grid-template-columns: 1fr 1fr; }
        .dato { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); min-height: 141px; padding: 23px; transition: background .25s; }
        .dato:hover { background: rgba(255,255,255,.14); }
        .dato__icono { color: #c6e4b4; font-size: 1.12rem; }
        .dato small { color: rgba(255,255,255,.54); display: block; font-size: .66rem; font-weight: 700; letter-spacing: .13em; margin-top: 18px; text-transform: uppercase; }
        .dato a, .dato address { color: white; display: block; font-size: .92rem; font-style: normal; font-weight: 600; line-height: 1.35; margin-top: 2px; text-decoration: none; }
        .dato a:hover { color: #d3edc3; }
        .dato--grande { grid-column: span 2; min-height: auto; }

        .ubicacion { display: grid; gap: 25px; grid-template-columns: .78fr 1.22fr; padding-bottom: 110px; padding-top: 110px; }
        .ubicacion__texto { padding-top: 16px; }
        .direccion { border-left: 2px solid var(--verde-600); color: var(--verde-900); font-family: "Playfair Display", Georgia, serif; font-size: 1.34rem; line-height: 1.25; margin: 28px 0; padding-left: 18px; }
        .boton-oscuro { background: var(--verde-900); color: white; }
        .boton-oscuro:hover { background: var(--verde-700, #2e6b49); }
        .mapa { background: #d9dfd2; box-shadow: var(--sombra); min-height: 390px; overflow: hidden; position: relative; }
        .mapa iframe { border: 0; display: block; filter: grayscale(.35) saturate(.7); height: 100%; inset: 0; position: absolute; width: 100%; }
        .mapa__leyenda { background: var(--blanco); bottom: 16px; box-shadow: 0 8px 25px rgba(0,0,0,.13); color: var(--verde-900); font-size: .73rem; font-weight: 700; left: 16px; padding: 10px 13px; position: absolute; }

        footer { background: #0c2118; color: rgba(255,255,255,.58); padding: 29px 0; }
        .pie { align-items: center; display: flex; font-size: .77rem; gap: 20px; justify-content: space-between; }
        .pie strong { color: white; font-family: "Playfair Display", Georgia, serif; font-size: 1rem; font-weight: 600; }
        .pie a { color: rgba(255,255,255,.7); text-decoration: none; }
        .pie a:hover { color: #d8efca; }

        .revelar { opacity: 1; transform: none; }

        @media (max-width: 900px) {
            .enlaces { gap: 14px; }
            .presentacion, .contacto-visual .contenedor, .ubicacion { grid-template-columns: 1fr; }
            .presentacion__foto { min-height: 430px; max-width: 600px; }
            .contacto-visual .contenedor { gap: 38px; }
            .ubicacion { gap: 35px; }
        }
        @media (max-width: 720px) {
            .contenedor { padding-left: 21px; padding-right: 21px; }
            .navegacion { height: 70px; }
            .marca img { height: 39px; width: 39px; }
            .marca span { font-size: 1.05rem; }
            .menu-boton { display: block; }
            .enlaces { background: var(--verde-950); border-top: 1px solid rgba(255,255,255,.12); display: none; flex-direction: column; gap: 0; left: 0; padding: 12px 21px 20px; position: absolute; right: 0; top: 70px; }
            .enlaces.abierto { display: flex; }
            .enlaces li, .enlaces a { display: block; width: 100%; }
            .enlaces a { padding: 10px 0; }
            .enlaces .nav-cta { margin-top: 5px; padding: 9px 13px; text-align: center; }
            .portada { min-height: 700px; padding-bottom: 100px; padding-top: 126px; }
            .desplazar { bottom: 25px; left: 21px; right: auto; }
            .seccion { padding: 78px 0; }
            .presentacion__foto { min-height: 380px; }
            .beneficios { grid-template-columns: 1fr; }
            .beneficio { padding: 11px 0; }
            .beneficio + .beneficio { border-left: 0; border-top: 1px solid rgba(255,255,255,.16); }
            .encabezado-seccion { align-items: start; flex-direction: column; margin-bottom: 30px; }
            .galeria { gap: 9px; grid-auto-rows: 145px; grid-template-columns: repeat(2, 1fr); }
            .foto-galeria:nth-child(4), .foto-galeria:nth-child(9) { grid-column: auto; }
            .foto-galeria:nth-child(1), .foto-galeria:nth-child(6) { grid-row: span 2; }
            .servicios { grid-template-columns: 1fr; margin-top: 32px; }
            .servicio__foto { height: 190px; }
            .presentacion__foto-accento { display: none; }
            .catalogo-grid { grid-template-columns: 1fr; margin-top: 30px; }
            .contacto-visual .contenedor { padding-bottom: 76px; padding-top: 76px; }
            .datos-contacto { grid-template-columns: 1fr; }
            .dato--grande { grid-column: auto; }
            .mapa { min-height: 330px; }
            .pie { align-items: flex-start; flex-direction: column; gap: 8px; }
            .whatsapp-flotante { bottom: 18px; height: 52px; right: 18px; width: 52px; }
            .whatsapp-flotante svg { height: 24px; width: 24px; }
        }
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after { animation-duration: .01ms !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
        }