/* =========================================================
   VILLA FLOR DEL PERÚ
   STYLE.CSS LIMPIO
   PARTE 1 — BASE + MENÚ + HERO
   ========================================================= */


/* =========================================================
   FUENTES Y VARIABLES
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap');

:root {
    --verde-oscuro: #032617;
    --verde-principal: #063b23;
    --verde-texto: #0a3821;

    --dorado: #c9a24a;
    --dorado-claro: #dfbd68;

    --crema: #f1ecdc;
    --crema-claro: #f5f1e7;

    --texto-suave: #687064;
}


/* =========================================================
   RESET
   ========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    margin: 0;

    background: var(--crema);
    color: var(--verde-texto);

    font-family: "DM Sans", sans-serif;

    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
}

button {
    font-family: inherit;
}


/* =========================================================
   BARRA SUPERIOR
   ========================================================= */

.top-header {
    width: 100%;
    height: 82px;

    background: var(--verde-oscuro);

    border-bottom: 1px solid rgba(201, 162, 74, 0.45);

    position: relative;
    z-index: 100;
}


.main-nav {
    width: min(100%, 1050px);
    height: 82px;

    margin: 0 auto;

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

    gap: 64px;
}


.nav-link {
    position: relative;

    color: #eee9dc;

    font-family: "DM Sans", sans-serif;

    font-size: 0.78rem;
    font-weight: 500;

    letter-spacing: 0.18em;

    text-transform: uppercase;

    padding: 30px 0 24px;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}


.nav-link:hover {
    color: var(--dorado-claro);
    transform: translateY(-1px);
}


/* Línea dorada debajo del menú */

.nav-link::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    bottom: 17px;

    height: 2px;

    background: var(--dorado);

    transform: scaleX(0);

    transform-origin: center;

    transition: transform 0.3s ease;
}


.nav-link.active {
    color: var(--dorado-claro);
}


.nav-link.active::after,
.nav-link:hover::after {
    transform: scaleX(1);
}


/* =========================================================
   HERO / IDENTIDAD
   ========================================================= */

.brand {
    position: relative;

    width: 100%;
    height: 453px;

    min-height: 453px;

    padding: 0;

    background:
        radial-gradient(
            ellipse at center,
            rgba(255, 255, 255, 0.28) 0%,
            rgba(241, 236, 220, 0.96) 68%,
            rgba(235, 229, 211, 1) 100%
        );

    overflow: hidden;
}


/* =========================================================
   ILUMINACIÓN DEL HERO
   ========================================================= */

.brand::before {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at 18% 55%,
            rgba(255, 255, 255, 0.48),
            transparent 38%
        ),

        radial-gradient(
            ellipse at 88% 35%,
            rgba(255, 255, 255, 0.42),
            transparent 38%
        );

    z-index: 1;
}


/* =========================================================
   SOMBRAS DE HOJAS — LADO IZQUIERDO Y DERECHO
   ========================================================= */

.brand::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    z-index: 2;

    opacity: 0.55;

    filter: blur(7px);

    background:

        /* -------------------------
           IZQUIERDA
           ------------------------- */

        radial-gradient(
            ellipse 80px 220px at -1% 52%,
            rgba(36, 78, 42, 0.34),
            transparent 70%
        ),

        radial-gradient(
            ellipse 55px 170px at 3% 73%,
            rgba(42, 86, 46, 0.28),
            transparent 70%
        ),

        radial-gradient(
            ellipse 42px 130px at 7% 36%,
            rgba(46, 91, 48, 0.20),
            transparent 70%
        ),

        /* -------------------------
           DERECHA
           ------------------------- */

        radial-gradient(
            ellipse 85px 235px at 101% 45%,
            rgba(36, 78, 42, 0.34),
            transparent 70%
        ),

        radial-gradient(
            ellipse 60px 180px at 97% 72%,
            rgba(42, 86, 46, 0.28),
            transparent 70%
        ),

        radial-gradient(
            ellipse 45px 135px at 94% 30%,
            rgba(46, 91, 48, 0.20),
            transparent 70%
        );
}


/* =========================================================
   CONTENIDO DEL HERO
   ========================================================= */

.brand-content {
    position: relative;

    z-index: 5;

    width: min(1200px, calc(100% - 80px));

    height: 100%;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 480px 1fr;

    align-items: center;

    gap: 20px;
}


/* =========================================================
   LOGO
   ========================================================= */

.brand-logo {
    width: 700px;
    height: 453px;

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

    position: relative;
}

.brand-logo img {
    display: block;

    width: 700px;
    height: auto;

    max-width: none;

    object-fit: contain;

    filter:
        drop-shadow(0 18px 18px rgba(0, 0, 0, 0.18))
        drop-shadow(0 5px 7px rgba(10, 33, 20, 0.12));
}


/* =========================================================
   NOMBRE VILLA FLOR DEL PERÚ — ESTILO DEL BOCETO
   ========================================================= */

.brand-name {
    position: relative;

    padding-left: 0;

    display: flex;
    flex-direction: column;

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

    text-align: center;
}


/* NOMBRE PRINCIPAL */

.brand-name h1 {
    margin: 0;

    color: #0a3821;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 3.65rem;

    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.01em;

    white-space: nowrap;
}


/* E.I.R.L. */

.brand-name span {
    display: block;

    margin-top: 20px;

    color: var(--dorado);

    font-family:
        "DM Sans",
        sans-serif;

    font-size: 1rem;

    font-weight: 600;

    letter-spacing: 0.62em;

    padding-left: 0.62em;

    text-align: center;
}


/* LÍNEA DORADA + DETALLE CENTRAL */

.brand-name::after {
    content: "";

    display: block;

    width: 100%;

    max-width: 645px;

    height: 2px;

    margin-top: 22px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            var(--dorado) 7%,
            var(--dorado) 46%,
            transparent 46%
        ),
        linear-gradient(
            90deg,
            transparent 54%,
            var(--dorado) 54%,
            var(--dorado) 93%,
            transparent 100%
        );

    position: relative;
}


/* =========================================================
   FIN PARTE 1
   ========================================================= */
   /* =========================================================
   PARTE 2 — NUESTRA SELECCIÓN + PRODUCTOS
   ========================================================= */


/* =========================================================
   SECCIÓN PRODUCTOS
   ========================================================= */

.featured {
    position: relative;

    width: 100%;

    min-height: 520px;

    padding: 28px 0 42px;

    background:
        radial-gradient(
            ellipse at center top,
            rgba(15, 82, 48, 0.30),
            transparent 58%
        ),
        #033b23;

    overflow: hidden;
}


/* =========================================================
   DECORACIÓN DE HOJAS LATERALES
   ========================================================= */

.featured::before,
.featured::after {
    content: "";

    position: absolute;

    top: 0;

    width: 230px;
    height: 100%;

    pointer-events: none;

    opacity: 0.28;

    z-index: 0;

    filter: blur(0.5px);
}


/* HOJAS IZQUIERDA */

.featured::before {
    left: -35px;

    background:

        radial-gradient(
            ellipse 95px 260px at 5% 25%,
            rgba(103, 130, 82, 0.35),
            transparent 65%
        ),

        radial-gradient(
            ellipse 70px 220px at 18% 50%,
            rgba(91, 121, 73, 0.28),
            transparent 65%
        ),

        radial-gradient(
            ellipse 100px 280px at 2% 82%,
            rgba(77, 109, 67, 0.25),
            transparent 65%
        );
}


/* HOJAS DERECHA */

.featured::after {
    right: -35px;

    background:

        radial-gradient(
            ellipse 95px 260px at 95% 25%,
            rgba(103, 130, 82, 0.35),
            transparent 65%
        ),

        radial-gradient(
            ellipse 70px 220px at 82% 50%,
            rgba(91, 121, 73, 0.28),
            transparent 65%
        ),

        radial-gradient(
            ellipse 100px 280px at 98% 82%,
            rgba(77, 109, 67, 0.25),
            transparent 65%
        );
}


/* =========================================================
   TÍTULO DE LA SECCIÓN
   ========================================================= */

.section-title {
    position: relative;

    z-index: 5;

    width: min(900px, calc(100% - 40px));

    margin: 0 auto 20px;

    text-align: center;
}


/* NUESTRA SELECCIÓN */

.section-title > span {
    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 22px;

    color: var(--dorado-claro);

    font-family: "DM Sans", sans-serif;

    font-size: 0.72rem;

    font-weight: 600;

    letter-spacing: 0.30em;

    text-transform: uppercase;
}


/* Líneas a ambos lados */

.section-title > span::before,
.section-title > span::after {
    content: "";

    display: block;

    width: 205px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--dorado)
        );
}


.section-title > span::after {
    background:
        linear-gradient(
            90deg,
            var(--dorado),
            transparent
        );
}


/* =========================================================
   PRODUCTOS DESTACADOS
   ========================================================= */

.section-title h2 {
    margin-top: 14px;

    color: #f5f0e4;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 2.75rem;

    font-weight: 500;

    line-height: 1.05;
}


/* =========================================================
   DESCRIPCIÓN
   ========================================================= */

.section-title p {
    max-width: 720px;

    margin: 10px auto 0;

    color: #dddccf;

    font-family: "DM Sans", sans-serif;

    font-size: 0.92rem;

    font-weight: 400;

    line-height: 1.5;
}


/* =========================================================
   CARRUSEL
   ========================================================= */

.carousel {
    position: relative;

    z-index: 5;

    width: min(1400px, calc(100% - 80px));

    margin: 0 auto;

    display: flex;

    align-items: center;

    gap: 18px;
}


/* =========================================================
   CONTENEDOR DE PRODUCTOS
   ========================================================= */

.products {
    width: 100%;

    display: flex;

    flex-wrap: nowrap;

    gap: 18px;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-behavior: smooth;

    scrollbar-width: none;

    -ms-overflow-style: none;

    scroll-snap-type: x mandatory;
}

.products::-webkit-scrollbar {
    display: none;
}


/* =========================================================
   TARJETA
   ========================================================= */

.product {
   min-width: 0;
flex: 0 0 auto;
scroll-snap-align: start;

    height: 290px;

    background: var(--crema-claro);

    border-radius: 17px;

    overflow: hidden;

    position: relative;

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

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.product:hover {
    transform: translateY(-6px);

    box-shadow:
        0 18px 35px rgba(0, 0, 0, 0.25);
}


/* =========================================================
   IMAGEN DEL PRODUCTO
   ========================================================= */

.product-image {
    width: 100%;

    height: 190px;

    position: relative;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #758b69,
            #536f50
        );
}


/* Texto PLANTA */

.product-image span {
    position: relative;

    z-index: 2;

    color: #063b23;

    font-family: "DM Sans", sans-serif;

    font-size: 0.72rem;

    font-weight: 600;

    letter-spacing: 0.25em;

    text-transform: uppercase;
}


/* =========================================================
   ZONA INFERIOR DE LA TARJETA
   ========================================================= */

.product h3 {
    margin: 18px 16px 0;

    color: #123c27;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 1rem;

    font-weight: 700;

    line-height: 1.2;
}


.product p {
    margin: 7px 16px 0;

    color: #70756d;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 0.82rem;

    font-style: italic;

    line-height: 1.2;
}


/* =========================================================
   BOTONES LATERALES
   ========================================================= */

.carousel-btn {
    flex: 0 0 58px;

    width: 58px;
    height: 58px;

    border: 1px solid var(--dorado);

    border-radius: 50%;

    background: transparent;

    color: var(--dorado-claro);

    font-family:
        Georgia,
        serif;

    font-size: 2.3rem;

    line-height: 1;

    display: flex;

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

    cursor: pointer;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}
/* =========================================================
   PRODUCTOS DESTACADOS — SOLO CELULAR
   ========================================================= */

@media (max-width: 700px) {

    .carousel {
        width: calc(100% - 24px);
        gap: 8px;
    }

    .products {
        width: 100%;
        gap: 0;
        overflow-x: hidden;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
    }

    .product {
        flex: 0 0 100%;
        width: 100%;
        min-width: 100%;
        scroll-snap-align: center;
        height: 300px;
    }

    .product-image {
        height: 200px;
    }

    .carousel-btn {
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        font-size: 1.5rem;
    }

}


.carousel-btn:hover {
    background: var(--dorado);

    color: #063b23;

    transform: scale(1.06);
}


/* =========================================================
   FIN PARTE 2
   ========================================================= */
   /* =====================================================
   HOJAS REALES DEL MOLLE - HERO
   ===================================================== */

.brand::after {
    content: "";
    position: absolute;
    inset: 0;

    background-image: url("../assets/hero-leaves.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    opacity: 0.90;

    pointer-events: none;
    z-index: 0;
}

/* El logo y el nombre quedan por encima */
.brand > * {
    position: relative;
    z-index: 2;
}

/* =========================================================
   HOJAS DECORATIVAS EN PRODUCTOS
   ========================================================= */

.featured::before {
    opacity: 0.42;

    width: 280px;

    left: -65px;

    filter: blur(1px);

    background:
        radial-gradient(
            ellipse 48px 130px at 12% 18%,
            rgba(91,121,73,0.45),
            transparent 70%
        ),

        radial-gradient(
            ellipse 38px 105px at 25% 32%,
            rgba(91,121,73,0.38),
            transparent 70%
        ),

        radial-gradient(
            ellipse 55px 150px at 8% 52%,
            rgba(91,121,73,0.42),
            transparent 70%
        ),

        radial-gradient(
            ellipse 40px 120px at 22% 70%,
            rgba(91,121,73,0.35),
            transparent 70%
        ),

        radial-gradient(
            ellipse 55px 145px at 7% 88%,
            rgba(91,121,73,0.32),
            transparent 70%
        );
}


.featured::after {
    opacity: 0.42;

    width: 280px;

    right: -65px;

    filter: blur(1px);

    background:
        radial-gradient(
            ellipse 48px 130px at 88% 18%,
            rgba(91,121,73,0.45),
            transparent 70%
        ),

        radial-gradient(
            ellipse 38px 105px at 75% 32%,
            rgba(91,121,73,0.38),
            transparent 70%
        ),

        radial-gradient(
            ellipse 55px 150px at 92% 52%,
            rgba(91,121,73,0.42),
            transparent 70%
        ),

        radial-gradient(
            ellipse 40px 120px at 78% 70%,
            rgba(91,121,73,0.35),
            transparent 70%
        ),

        radial-gradient(
            ellipse 55px 145px at 93% 88%,
            rgba(91,121,73,0.32),
            transparent 70%
        );
}

/* =========================================================
   NOSOTROS — VILLA FLOR DEL PERÚ
   ========================================================= */

.about-section {
    position: relative;
    width: 100%;
    padding: 45px 0 40px;
    background: var(--crema-claro);
    overflow: hidden;
}


/* Decoración vegetal suave */

.about-section::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 650px;
    left: -230px;
    top: 50%;
    transform: translateY(-50%) rotate(-12deg);

    background:
        radial-gradient(
            ellipse at center,
            rgba(55, 91, 57, 0.16),
            transparent 68%
        );

    filter: blur(20px);
    pointer-events: none;
}


/* Contenedor */

.about-container {
    position: relative;
    z-index: 2;

    width: min(1200px, calc(100% - 80px));
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;

    gap: 90px;
}


/* =========================================================
   IMAGEN
   ========================================================= */

.about-image {
    position: relative;
    width: 100%;
}


.about-image-box {
    position: relative;

    width: 100%;
    height: 540px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #173d29,
            #496b4d
        );

    border-radius: 2px;

    display: flex;
    align-items: flex-end;
    justify-content: flex-start;

    padding: 35px;

    box-shadow:
        0 25px 55px rgba(3, 38, 23, 0.18);
}


/* Texto provisional de la imagen */

.about-image-box span {
    position: relative;
    z-index: 2;

    color: rgba(255, 255, 255, 0.9);

    font-family: "DM Sans", sans-serif;

    font-size: 0.75rem;
    font-weight: 600;

    letter-spacing: 0.28em;

    text-transform: uppercase;
}


/* =========================================================
   CONTENIDO
   ========================================================= */

.about-content {
    max-width: 560px;
}


.about-label {
    display: block;

    margin-bottom: 22px;

    color: var(--dorado);

    font-family: "DM Sans", sans-serif;

    font-size: 0.72rem;
    font-weight: 700;

    letter-spacing: 0.28em;

    text-transform: uppercase;
}


.about-content h2 {
    margin: 0 0 28px;

    color: var(--verde-texto);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 3.2rem;
    font-weight: 600;

    line-height: 1.08;

    letter-spacing: -0.02em;
}


.about-intro {
    margin-bottom: 18px;

    color: #405247;

    font-size: 1.05rem;
    font-weight: 500;

    line-height: 1.8;
}


.about-content > p:not(.about-intro) {
    margin-bottom: 38px;

    color: var(--texto-suave);

    font-size: 0.95rem;

    line-height: 1.8;
}


/* =========================================================
   VALORES
   ========================================================= */

.about-values {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 15px;

    border-top:
        1px solid rgba(10, 56, 33, 0.14);

    padding-top: 28px;
}


.about-value {
    display: flex;
    flex-direction: column;

    gap: 8px;
}


.about-value strong {
    color: var(--dorado);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 1.4rem;

    font-weight: 600;
}


.about-value span {
    color: var(--verde-texto);

    font-size: 0.72rem;

    font-weight: 600;

    line-height: 1.4;

    text-transform: uppercase;

    letter-spacing: 0.08em;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .about-section {
        padding: 90px 0;
    }

    .about-container {
        width: min(900px, calc(100% - 60px));

        grid-template-columns: 1fr;

        gap: 55px;
    }

    .about-image-box {
        height: 460px;
    }

    .about-content {
        max-width: 700px;
    }

}


/* =========================================================
   NUESTRA EMPRESA — CELULAR
   ========================================================= */

@media (max-width: 600px) {

    .about-values {
        display: flex;
        grid-template-columns: none;
        gap: 0;

        width: 100%;

        overflow-x: auto;
        overflow-y: hidden;

        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;

        scrollbar-width: none;

        -webkit-overflow-scrolling: touch;
    }

    .about-values::-webkit-scrollbar {
        display: none;
    }

    .about-value,
    .about-value:first-child {
        flex: 0 0 100%;
        width: 100%;

        box-sizing: border-box;

        padding: 0 20px 25px;

        min-height: 145px;

        scroll-snap-align: center;

        border: 0 !important;
    }

    .about-value + .about-value {
        border: 0 !important;
        padding-top: 0;
    }

    .about-value span {
        max-width: 100%;
    }

}
/* =========================================================
   VALORES — DISEÑO PREMIUM
   ========================================================= */

.about-values {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-top: 15px;
    padding-top: 30px;
    border-top: 1px solid rgba(10, 56, 33, 0.14);
}

.about-value {
    position: relative;
    padding: 0 25px;
    min-height: 125px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.about-value:first-child {
    padding-left: 0;
}

.about-value + .about-value {
    border-left: 1px solid rgba(10, 56, 33, 0.12);
}

.about-value-number {
    color: var(--dorado);
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 10px;
}

.about-value-line {
    width: 28px;
    height: 2px;
    background: var(--dorado);
    margin-bottom: 12px;
}

.about-value strong {
    color: var(--verde-texto);
    font-family: "DM Sans", sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 7px;
}

.about-value span {
    color: var(--texto-suave);
    font-family: "DM Sans", sans-serif;
    font-size: 0.76rem;
    line-height: 1.55;
    max-width: 170px;
}


/* =========================================================
   CELULAR
   ========================================================= */

@media (max-width: 600px) {

    .about-values {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .about-value,
    .about-value:first-child {
        padding: 0 0 22px;
        min-height: auto;
    }

    .about-value + .about-value {
        border-left: none;
        border-top: 1px solid rgba(10, 56, 33, 0.12);
        padding-top: 22px;
    }

    .about-value span {
        max-width: 100%;
    }

}
/* =========================================================
   NOSOTROS - INTERACTIVIDAD DE VALORES
   ========================================================= */

.about-value {
    border: 0;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
    width: 100%;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.about-value:hover {
    transform: translateY(-3px);
}

.about-value:not(.active) {
    opacity: 0.55;
}

.about-value.active {
    opacity: 1;
}

.about-value.active .about-value-number {
    color: var(--dorado);
}

.about-value.active .about-value-line {
    width: 45px;
}

.about-value-line {
    transition: width 0.3s ease;
}


/* IMAGEN PRINCIPAL */

.about-image-box {
    position: relative;
    overflow: hidden;
}

#about-main-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        opacity 0.35s ease,
        transform 0.6s ease;
}

.about-image-box.changing #about-main-image {
    opacity: 0;
    transform: scale(1.04);
}


/* OSCURECIMIENTO SUAVE */

.about-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(4, 35, 20, 0.72),
        rgba(4, 35, 20, 0.05) 55%,
        transparent
    );
    pointer-events: none;
}


/* TEXTO SOBRE LA FOTO */

.about-image-caption {
    position: absolute;
    left: 36px;
    bottom: 30px;
    z-index: 2;

    display: flex;
    flex-direction: column;
    gap: 7px;

    color: #fff;
}

.about-image-caption span {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1rem;
    color: var(--dorado);
}

.about-image-caption strong {
    font-size: 1rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}


/* =========================================================
   DESCRIPCIÓN DINÁMICA
   ========================================================= */

.about-intro {
    transition: opacity 0.3s ease;
}


/* =========================================================
   CELULAR
   ========================================================= */

@media (max-width: 600px) {

    .about-value {
        width: 100%;
    }

    .about-image-caption {
        left: 22px;
        bottom: 22px;
    }

    .about-image-caption strong {
        font-size: 0.85rem;
    }

}
/* =========================================================
   CATÁLOGO DE PRODUCTOS
   ========================================================= */

.catalog-section {
    position: relative;
    width: 100%;
    padding: 55px 0 75px;
    background: var(--crema-claro);
    overflow: hidden;
}


/* TÍTULO */

.catalog-title {
    width: min(900px, calc(100% - 40px));
    margin: 0 auto 45px;
    text-align: center;
}

.catalog-title > span {
    display: inline-block;
    margin-bottom: 14px;

    color: var(--dorado);

    font-size: 0.72rem;
    font-weight: 700;

    letter-spacing: 0.28em;
    text-transform: uppercase;
}

.catalog-title h2 {
    margin: 0;

    color: var(--verde-texto);

    font-family: "Playfair Display", Georgia, serif;

    font-size: 2.8rem;
    font-weight: 500;

    line-height: 1.1;
}

.catalog-title p {
    max-width: 650px;
    margin: 14px auto 0;

    color: var(--texto-suave);

    font-size: 0.92rem;
    line-height: 1.7;
}


/* =========================================================
   CARRUSEL DE CATEGORÍAS
   ========================================================= */

.category-carousel {
    position: relative;

    width: min(1300px, calc(100% - 80px));

    margin: 0 auto;

    display: flex;
    align-items: center;

    gap: 18px;
}


.categories {
    width: 100%;

    display: flex;
    gap: 16px;

    overflow: hidden;

    scroll-behavior: smooth;

    scrollbar-width: none;
}

.categories::-webkit-scrollbar {
    display: none;
}


/* CATEGORÍA */

.category-card {
    flex: 0 0 calc((100% - 64px) / 5);

    min-height: 145px;

    padding: 24px 22px;

    border: 1px solid rgba(10, 56, 33, 0.15);

    border-radius: 3px;

    background: rgba(255, 255, 255, 0.38);

    color: var(--verde-texto);

    text-align: left;

    cursor: pointer;

    display: flex;
    flex-direction: column;

    justify-content: center;

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}


.category-card:hover {
    transform: translateY(-5px);

    border-color: var(--dorado);

    box-shadow:
        0 15px 35px rgba(3, 38, 23, 0.10);
}


.category-card.active {
    background: var(--verde-principal);

    border-color: var(--verde-principal);

    color: #fff;

    box-shadow:
        0 15px 35px rgba(3, 38, 23, 0.16);
}


.category-number {
    margin-bottom: 12px;

    color: var(--dorado);

    font-family: "Playfair Display", Georgia, serif;

    font-size: 1.15rem;
}


.category-card strong {
    font-size: 0.85rem;

    font-weight: 700;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


.category-card small {
    margin-top: 8px;

    font-size: 0.7rem;

    opacity: 0.65;
}


/* BOTONES */

.category-btn {
    flex: 0 0 52px;

    width: 52px;
    height: 52px;

    border: 1px solid var(--dorado);

    border-radius: 50%;

    background: transparent;

    color: var(--dorado);

    font-family: Georgia, serif;

    font-size: 2rem;

    line-height: 1;

    cursor: pointer;

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

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}


.category-btn:hover {
    background: var(--dorado);

    color: var(--verde-principal);

    transform: scale(1.06);
}


/* =========================================================
   LISTA DE PRODUCTOS
   ========================================================= */

.product-list {
    width: min(900px, calc(100% - 80px));

    margin: 30px auto 0;

    border-top:
        1px solid rgba(10, 56, 33, 0.18);
}


.product-list-header {
    display: flex;
    align-items: baseline;

    gap: 16px;

    padding: 25px 0;

    border-bottom:
        1px solid rgba(10, 56, 33, 0.12);
}


.product-list-header span {
    color: var(--dorado);

    font-family: "Playfair Display", Georgia, serif;

    font-size: 1.1rem;
}


.product-list-header h3 {
    color: var(--verde-texto);

    font-family: "Playfair Display", Georgia, serif;

    font-size: 1.45rem;

    font-weight: 500;
}


/* NOMBRE DEL PRODUCTO */

.product-name {
    width: 100%;

    min-height: 68px;

    padding: 0;

    border: 0;

    border-bottom:
        1px solid rgba(10, 56, 33, 0.12);

    background: transparent;

    color: var(--verde-texto);

    font-family: "DM Sans", sans-serif;

    font-size: 0.95rem;

    font-weight: 500;

    text-align: left;

    cursor: pointer;

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

    transition:
        color 0.25s ease,
        padding 0.25s ease;
}


.product-name span {
    color: var(--dorado);

    font-size: 1.4rem;

    transition: transform 0.25s ease;
}


.product-name:hover {
    color: var(--dorado);

    padding-left: 8px;
}


.product-name:hover span {
    transform: translateX(5px);
}
.ver-mas-productos {
    color: var(--dorado);
    font-weight: 600;
}

.ver-mas-productos span:last-child {
    font-size: 1.5rem;
    transition: transform 0.25s ease;
}

.ver-mas-productos:hover span:last-child {
    transform: translateX(6px);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .category-card {
        flex: 0 0 calc((100% - 32px) / 3);
    }

}


/* =========================================================
   CELULAR
   ========================================================= */

@media (max-width: 700px) {

    .catalog-section {
        padding: 75px 0 85px;
    }

    .catalog-title {
        margin-bottom: 32px;
    }

    .catalog-title h2 {
        font-size: 2.2rem;
    }

    .catalog-title p {
        font-size: 0.86rem;
    }

    .category-carousel {
        width: calc(100% - 30px);
        gap: 8px;
    }

    .categories {
        gap: 0;

        scroll-snap-type: x mandatory;
    }

    .category-card {
        flex: 0 0 100%;

        min-height: 135px;

        scroll-snap-align: center;
    }

    .category-btn {
        width: 42px;
        height: 42px;

        flex: 0 0 42px;

        font-size: 1.5rem;
    }

    .product-list {
        width: calc(100% - 36px);

        margin-top: 48px;
    }

    .product-list-header h3 {
        font-size: 1.25rem;
    }

}
/* =========================================================
   MODAL DE PRODUCTO
   ========================================================= */

.product-modal {
    position: fixed;
    inset: 0;

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

    padding: 25px;

    background: rgba(3, 38, 23, 0.72);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;

    z-index: 9999;
}

.product-modal.active {
    opacity: 1;
    visibility: visible;
}

.product-modal-overlay {
    position: absolute;
    inset: 0;
}

.product-modal-content {
    position: relative;
    z-index: 2;

    width: min(760px, 92%);

    display: grid;
    grid-template-columns: 1.05fr 0.95fr;

    background: var(--crema-claro);

    border-radius: 18px;

    overflow: hidden;

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

    transform: translateY(25px) scale(0.97);

    transition: transform 0.3s ease;
}

.product-modal.active .product-modal-content {
    transform: translateY(0) scale(1);
}

.product-modal-image {
    min-height: 380px;

    background: #e8e2d3;

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

    overflow: hidden;
}

.product-modal-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}

.product-modal-info {
    padding: 55px 45px;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.product-modal-info > span {
    color: var(--dorado);

    font-size: 0.72rem;
    font-weight: 700;

    letter-spacing: 0.2em;

    margin-bottom: 18px;
}

.product-modal-info h2 {
    margin: 0;

    color: var(--verde-texto);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: clamp(2rem, 4vw, 3.2rem);

    line-height: 1.05;
}

.product-modal-info p {
    color: var(--texto-suave);

    line-height: 1.7;
}

#modalProductScientific {
    margin-top: 12px;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-style: italic;

    color: var(--dorado);
}

.product-modal-line {
    width: 65px;
    height: 2px;

    margin: 25px 0;

    background: var(--dorado);
}

#modalProductDescription {
    margin: 0;
}

.product-modal-close {
    position: absolute;

    top: 15px;
    right: 15px;

    z-index: 5;

    width: 42px;
    height: 42px;

    border: 1px solid var(--dorado);

    border-radius: 50%;

    background: rgba(245, 241, 231, 0.9);

    color: var(--verde-texto);

    font-size: 28px;
    line-height: 1;

    cursor: pointer;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}

.product-modal-close:hover {
    background: var(--dorado);
    color: white;
    transform: rotate(90deg);
}


/* =========================
   CELULAR
   ========================= */

@media (max-width: 700px) {

    .product-modal {
        padding: 10px;
    }

    .product-modal-content {
        width: 100%;
        max-width: 420px;
        max-height: 88vh;

        overflow-y: auto;

        grid-template-columns: 1fr;

        border-radius: 16px;
    }

    .product-modal-image {
        width: 100%;
        height: 200px;
        min-height: 200px;
    }

    .product-modal-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .product-modal-info {
        padding: 22px 20px 25px;
    }

    .product-modal-info > span {
        font-size: 0.65rem;
        margin-bottom: 10px;
    }

    .product-modal-info h2 {
        font-size: 1.8rem;
    }

    .product-modal-info p {
        font-size: 0.9rem;
        line-height: 1.5;
    }

    .product-modal-line {
        margin: 15px 0;
    }

    .product-modal-close {
        top: 8px;
        right: 8px;

        width: 38px;
        height: 38px;

        font-size: 24px;
    }
}


/* =========================================================
   CONTACTO
   ========================================================= */

.contact-section {
    position: relative;

    width: 100%;

    padding: 100px 0;

    background: #032617;

    overflow: hidden;
}


.contact-section::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    left: -250px;
    top: 50%;

    transform: translateY(-50%);

    background:
        radial-gradient(
            ellipse,
            rgba(201, 162, 74, 0.12),
            transparent 68%
        );

    pointer-events: none;
}


.contact-section::after {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    right: -250px;
    bottom: -250px;

    background:
        radial-gradient(
            ellipse,
            rgba(65, 105, 69, 0.18),
            transparent 68%
        );

    pointer-events: none;
}


.contact-container {
    position: relative;

    z-index: 2;

    width: min(
        1150px,
        calc(100% - 80px)
    );

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 90px;

    align-items: center;
}


/* =========================================================
   INFORMACIÓN
   ========================================================= */

.contact-label {
    display: block;

    margin-bottom: 20px;

    color: var(--dorado-claro);

    font-size: 0.72rem;

    font-weight: 700;

    letter-spacing: 0.28em;

    text-transform: uppercase;
}


.contact-intro h2 {
    margin: 0;

    color: #f5f0e4;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 3.2rem;

    font-weight: 500;

    line-height: 1.08;
}


.contact-intro > p {
    max-width: 500px;

    margin-top: 25px;

    color: #cfd5cb;

    font-size: 0.95rem;

    line-height: 1.8;
}


/* =========================================================
   DATOS DE CONTACTO — DISEÑO COMPACTO
   ========================================================= */

.contact-details {
    margin-top: 35px;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    column-gap: 30px;
    row-gap: 0;

    border-top: 1px solid rgba(201, 162, 74, 0.25);
}


.contact-detail {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 12px;

    padding: 14px 0;

    border-bottom: 1px solid rgba(201, 162, 74, 0.15);
}


.contact-detail > span {
    flex: 0 0 auto;

    color: var(--dorado);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 0.9rem;
}


.contact-detail div {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 4px;
}


.contact-detail small {
    color: #8f9a8e;

    font-size: 0.56rem;
    font-weight: 500;

    letter-spacing: 0.13em;

    line-height: 1.2;
}


.contact-detail strong {
    display: block;

    color: #f2eee3;

    font-size: 0.72rem;
    font-weight: 500;

    line-height: 1.35;

    overflow-wrap: anywhere;
}


/* =========================================================
   FORMULARIO
   ========================================================= */

.contact-form-box {
    padding: 45px;

    background: var(--crema-claro);

    border-radius: 3px;

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


.contact-form-header {
    margin-bottom: 30px;
}


.contact-form-header span {
    color: var(--dorado);

    font-size: 0.68rem;

    font-weight: 700;

    letter-spacing: 0.2em;

    text-transform: uppercase;
}


.contact-form-header h3 {
    margin-top: 8px;

    color: var(--verde-texto);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 2rem;

    font-weight: 500;
}


.contact-field {
    margin-bottom: 20px;
}


.contact-field label {
    display: block;

    margin-bottom: 8px;

    color: var(--verde-texto);

    font-size: 0.72rem;

    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.contact-field input,
.contact-field textarea {
    width: 100%;

    padding: 14px 15px;

    border: 1px solid
        rgba(10, 56, 33, 0.16);

    border-radius: 2px;

    background: #fffdf8;

    color: var(--verde-texto);

    font-family: "DM Sans", sans-serif;

    font-size: 0.88rem;

    outline: none;

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}


.contact-field textarea {
    resize: vertical;

    min-height: 120px;
}


.contact-field input:focus,
.contact-field textarea:focus {
    border-color: var(--dorado);

    box-shadow:
        0 0 0 3px
        rgba(201, 162, 74, 0.10);
}


.contact-submit {
    width: 100%;

    margin-top: 5px;

    padding: 16px 20px;

    border: 0;

    background: var(--verde-principal);

    color: #fff;

    font-size: 0.72rem;

    font-weight: 700;

    letter-spacing: 0.14em;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: space-between;

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}


.contact-submit:hover {
    background: var(--dorado);

    color: var(--verde-oscuro);

    transform: translateY(-2px);
}


.contact-submit span {
    font-size: 1.2rem;
}


/* =========================================================
   CONTACTO — TABLET
   ========================================================= */

@media (max-width: 900px) {

    .contact-container {
        width: min(
            700px,
            calc(100% - 60px)
        );

        grid-template-columns: 1fr;

        gap: 55px;
    }

}


/* =========================================================
   CONTACTO — CELULAR
   ========================================================= */

@media (max-width: 600px) {

    .contact-section {
        padding: 75px 0;
    }

    .contact-container {
        width: calc(100% - 36px);

        gap: 40px;
    }
     .contact-details {
        grid-template-columns: 1fr;
        column-gap: 0;
        margin-top: 30px;
    }

    .contact-detail {
        padding: 13px 0;
    }

    .contact-detail strong {
        font-size: 0.72rem;
    }

    .contact-intro h2 {
        font-size: 2.35rem;
    }

    .contact-intro > p {
        font-size: 0.9rem;
    }

    .contact-form-box {
        padding: 28px 22px;
    }

    .contact-form-header h3 {
        font-size: 1.7rem;
    }

}
/* =========================================================
   EXPORTACIÓN — TÍTULO DE SECCIÓN
   ========================================================= */

.export-title {
    width: 100%;
    box-sizing: border-box;
    padding: 38px 25px 0;
    text-align: center;
    background: #f5f1e7;
}

.export-title small {
    display: block;
    margin-bottom: 12px;
    font-size: 0.72rem;
    letter-spacing: 0.35em;
    font-weight: 700;
    color: #c99b32;
}

.export-title h2 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1.1;
    color: #063d27;
    font-weight: 500;
}

.export-title p {
    max-width: 650px;
    margin: 16px auto 0;
    font-size: 1rem;
    line-height: 1.7;
    color: #53685e;
}

.export-title-decoration {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    max-width: 260px;
    margin: 0 auto 25px;
}

.export-title-decoration span {
    height: 1px;
    flex: 1;
    background: #d6b45d;
}

.export-title-decoration b {
    color: #d6b45d;
    font-size: 0.8rem;
    font-weight: 400;
}

.export-title-decoration.bottom {
    margin: 15px auto 0;
    max-width: 180px;
}

.export-title-decoration.bottom b {
    font-size: 1.1rem;
}


/* =========================================================
   EXPORTACIÓN — CELULAR
   ========================================================= */

@media (max-width: 600px) {

    .export-title {
        padding: 40px 20px 38px;
    }

    .export-title h2 {
        font-size: 2rem;
    }

    .export-title p {
        font-size: 0.9rem;
        line-height: 1.6;
    }

    .export-title-decoration {
        max-width: 190px;
    }

}
/* =========================================
   PAMPAS - DECORACIÓN DEL TÍTULO EXPORTACIÓN
   ========================================= */

.export-title {
    position: relative;
    overflow: hidden;
}

.export-pampas {
    position: absolute;
    width: 170px;
    height: auto;
    top: 50%;
    z-index: 1;
    pointer-events: none;
}

/* Pampa izquierda */
.export-pampas-left {
    left: 25px;
    transform: translateY(-50%) rotate(-8deg);
}

/* Pampa derecha */
.export-pampas-right {
    right: 25px;
    transform: translateY(-50%) scaleX(-1) rotate(-8deg);
}

/* El contenido queda por encima de las pampas */
.export-title > *:not(.export-pampas) {
    position: relative;
    z-index: 2;
}
/* =========================================
   EXPORTACIÓN - CELULAR
   ========================================= */

@media (max-width: 768px) {

    .export-pampas {
        width: 90px;
        top: 50%;
    }

    .export-pampas-left {
        left: -8px;
        transform: translateY(-50%) rotate(-8deg);
    }

    .export-pampas-right {
        right: -8px;
        transform: translateY(-50%) scaleX(-1) rotate(-8deg);
    }
}
/* =========================================
   PAMPAS EXPORTACIÓN - AJUSTE DEFINITIVO
   ========================================= */

.export-title {
    position: relative !important;
    overflow: hidden !important;
}

.export-pampas {
    position: absolute !important;
    width: 115px !important;
    height: auto !important;
    top: 50% !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

/* IZQUIERDA: apunta hacia el título */
.export-pampas-left {
    left: 230px !important;
    right: auto !important;
    transform: translateY(-50%) rotate(-12deg) !important;
}

/* DERECHA: apunta hacia el título */
.export-pampas-right {
    right: 230px !important;
    left: auto !important;
    transform: translateY(-50%) scaleX(-1) rotate(-12deg) !important;
}

/* Mantener el título por encima */
.export-title-decoration,
.export-title small,
.export-title h2,
.export-title p {
    position: relative !important;
    z-index: 2 !important;
}


/* =========================================
   CELULAR
   ========================================= */

@media (max-width: 768px) {

    .export-pampas {
        width: 65px !important;
    }

    .export-pampas-left {
        left: 5px !important;
        transform: translateY(-50%) rotate(-10deg) !important;
    }

    .export-pampas-right {
        right: 5px !important;
        transform: translateY(-50%) scaleX(-1) rotate(-10deg) !important;
    }
}
/* AJUSTE FINAL PAMPAS EXPORTACIÓN */

.export-pampas {
    width: 360px !important;
}

.export-pampas-left {
    left: 180px !important;
}

.export-pampas-right {
    right: 190px !important;
}

@media (max-width: 768px) {
    .export-pampas {
        width: 55px !important;
    }

    .export-pampas-left {
        left: 8px !important;
    }

    .export-pampas-right {
        right: 8px !important;
    }
}
/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
    background: #003d29;
    color: #f5f0e5;
    padding: 28px 8% 20px;
    border-top: 1px solid rgba(212, 166, 66, 0.35);
}

.footer-main {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.footer-copy {
    font-size: 13px;
    letter-spacing: 0.3px;
    opacity: 0.9;
}

.footer-social {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-social a {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(212, 166, 66, 0.65);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d4a642;
    text-decoration: none;
    transition: 0.3s ease;
}

.footer-social a:hover {
    background: #d4a642;
    color: #003d29;
}

.footer-bottom {
    max-width: 1200px;
    margin: 18px auto 0;
    padding-top: 15px;
    border-top: 1px solid rgba(255,255,255,0.12);
    text-align: center;
    font-size: 11px;
    letter-spacing: 0.5px;
    opacity: 0.75;
}

.veyrox-link {
    color: #d4a642;
    text-decoration: none;
    font-weight: 700;
    margin: 0 4px;
}

.veyrox-link:hover {
    text-decoration: underline;
}


/* CELULAR */

@media (max-width: 600px) {

    .footer-main {
        flex-direction: column;
        text-align: center;
    }

    .footer-copy {
        line-height: 1.6;
    }

    .footer-social {
        margin-top: 4px;
    }

}
/* =========================================================
   NUESTRA EMPRESA — CONTROLES MÓVILES
   SOLO CELULAR
========================================================= */

.about-mobile-navigation {
    display: none;
}


@media (max-width: 600px) {

    .about-mobile-navigation {

        display: flex;

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

        gap: 25px;

        width: 100%;

        margin-top: 18px;

        padding: 0 10px;

        box-sizing: border-box;

    }


    .about-mobile-navigation button {

        display: flex;

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

        width: 42px;
        height: 42px;

        border: 1px solid
            rgba(10, 56, 33, 0.18);

        border-radius: 50%;

        background:
            rgba(255, 255, 255, 0.65);

        color:
            var(--verde-texto);

        font-size: 22px;

        line-height: 1;

        cursor: pointer;

        transition:
            transform 0.2s ease,
            background 0.2s ease;

    }


    .about-mobile-navigation button:active {

        transform: scale(0.92);

    }


    .about-mobile-counter {

        min-width: 60px;

        text-align: center;

        font-size: 12px;

        font-weight: 700;

        letter-spacing: 0.15em;

        color:
            var(--verde-texto);

    }

}
/* =========================================================
   CORRECCIÓN SOLO PARA CELULAR
   NO MODIFICA PC
   ========================================================= */

@media (max-width: 700px) {

    /* =====================================================
       1. LOGO
       ===================================================== */

    .brand-content {
        width: 100% !important;
        height: 100% !important;

        display: flex !important;
        flex-direction: column !important;

        align-items: center !important;
        justify-content: center !important;

        margin: 0 !important;
        padding: 0 15px !important;

        gap: 0 !important;
    }

    .brand-logo {
        width: 100% !important;
        height: 260px !important;

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

        overflow: hidden !important;
    }

    .brand-logo img {
        width: 92vw !important;
        max-width: 380px !important;

        height: auto !important;
        max-height: 250px !important;

        object-fit: contain !important;
    }

    .brand-name {
        display: none !important;
    }


    /* =====================================================
       2. PRODUCTOS DESTACADOS
       AL ABRIR LA FOTO
       ===================================================== */

    .product-modal {
        padding: 10px !important;

        width: 100vw !important;
        height: 100vh !important;

        box-sizing: border-box !important;
    }

    .product-modal-content {
        width: calc(100vw - 20px) !important;
        max-width: 390px !important;

        max-height: 88vh !important;

        display: flex !important;
        flex-direction: column !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        grid-template-columns: none !important;

        border-radius: 16px !important;
    }

    .product-modal-image {
        width: 100% !important;

        height: 210px !important;
        min-height: 210px !important;

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

        overflow: hidden !important;
    }

    .product-modal-image img {
        width: 100% !important;
        height: 100% !important;

        /* AQUÍ ESTÁ EL CAMBIO IMPORTANTE */
        object-fit: contain !important;
    }

    .product-modal-info {
        width: 100% !important;

        padding: 20px !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       3. NUESTRA EMPRESA
       UNA SOLA OPCIÓN + BOTONES
       ===================================================== */

    .about-values {
        display: flex !important;

        width: 100% !important;

        flex-direction: row !important;

        flex-wrap: nowrap !important;

        gap: 0 !important;

        overflow: hidden !important;

        padding-top: 30px !important;

        border-top: 1px solid rgba(10, 56, 33, 0.14) !important;
    }

    .about-value,
    .about-value:first-child {
        flex: 0 0 100% !important;

        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;

        min-height: 145px !important;

        padding: 0 20px 20px !important;

        box-sizing: border-box !important;

        border: 0 !important;

        scroll-snap-align: center !important;
    }

    .about-value + .about-value {
        border: 0 !important;
        padding-top: 0 !important;
    }

    .about-value span {
        max-width: 100% !important;
    }


    /* =====================================================
       BOTONES ANTERIOR / SIGUIENTE
       ===================================================== */

    .about-mobile-navigation {
        display: flex !important;

        width: 100% !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 25px !important;

        margin-top: 5px !important;

        padding: 0 10px !important;

        box-sizing: border-box !important;
    }

    .about-mobile-navigation button {
        width: 45px !important;
        height: 45px !important;

        flex: 0 0 45px !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;
    }

}


/* =========================================================
   CELULARES PEQUEÑOS
   ========================================================= */

@media (max-width: 400px) {

    .brand-logo {
        height: 235px !important;
    }

    .brand-logo img {
        width: 94vw !important;
        max-height: 225px !important;
    }

    .product-modal-image {
        height: 190px !important;
        min-height: 190px !important;
    }

}

/* =========================================================
   VILLA FLOR DEL PERÚ — AJUSTES FINALES SOLO CELULAR
   NO MODIFICA EL DISEÑO DE PC NI EL MODAL DE PRODUCTOS
   ========================================================= */

@media (max-width: 700px) {

    /* ---------------------------------------------------------
       0. EVITAR CUALQUIER DESBORDAMIENTO HORIZONTAL
       --------------------------------------------------------- */
    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
    }

    body {
        position: relative;
    }

    .top-header,
    .brand,
    .featured,
    .about-section,
    .catalog-section,
    .contact-section,
    .export-title,
    .site-footer {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
    }

    /* ---------------------------------------------------------
       1. MENÚ SUPERIOR — TODO DEBE CABER EN EL CELULAR
       --------------------------------------------------------- */
    .top-header {
        height: 64px !important;
    }

    .main-nav {
        width: 100% !important;
        max-width: none !important;
        height: 64px !important;
        margin: 0 !important;
        padding: 0 8px !important;
        gap: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .nav-link {
        flex: 0 1 auto !important;
        min-width: 0 !important;
        white-space: nowrap !important;
        padding: 22px 3px 18px !important;
        font-size: clamp(0.55rem, 2.35vw, 0.68rem) !important;
        letter-spacing: 0.08em !important;
        line-height: 1 !important;
        text-align: center !important;
    }

    .nav-link::after {
        bottom: 11px !important;
        height: 1px !important;
    }

    /* ---------------------------------------------------------
       2. LOGO — MÁS COMPACTO + NOMBRE DE LA EMPRESA DEBAJO
       --------------------------------------------------------- */
    .brand {
        height: 365px !important;
        min-height: 365px !important;
    }

    .brand-content {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        padding: 0 12px !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
        box-sizing: border-box !important;
    }

    .brand-logo {
        width: 100% !important;
        max-width: 100% !important;
        height: 285px !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .brand-logo img {
        display: block !important;
        width: min(82vw, 330px) !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 235px !important;
        object-fit: contain !important;
        margin: 0 auto !important;
    }

    /* El nombre aparece debajo del logo sin necesitar tocar HTML. */
    @media (max-width: 700px) {

    /* El nombre ya está dentro del logo.
       No generar otro nombre. */
    .brand-logo::after {
        content: "E · I · R · L." !important;

        display: block !important;

        color: var(--dorado) !important;

        font-family: "DM Sans", sans-serif !important;

        font-size: 0.72rem !important;

        font-weight: 600 !important;

        letter-spacing: 0.45em !important;

        text-align: center !important;

        white-space: nowrap !important;

        margin: 8px auto 0 !important;

        padding: 0 0 14px 0 !important;

        border-bottom: 2px solid var(--dorado) !important;

        width: 82% !important;

        max-width: 300px !important;

        line-height: 1 !important;
    }

    /* Ocultar cualquier otro texto generado */
    .brand-name {
        display: none !important;
    }
}

    /* El nombre antiguo no se duplica. */
    .brand-name {
        display: none !important;
    }

    /* ---------------------------------------------------------
       3. NUESTRA EMPRESA — FOTO COMPLETA Y TEXTO SIN CORTES
       --------------------------------------------------------- */
    .about-section {
        padding: 45px 0 40px !important;
        box-sizing: border-box !important;
    }

    .about-container {
        width: calc(100% - 30px) !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
        box-sizing: border-box !important;
    }

    .about-image {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .about-image-box {
        width: 100% !important;
        height: 300px !important;
        min-height: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /* Antes estaba en cover y por eso se cortaban partes de la foto. */
    #about-main-image {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
        object-position: center !important;
    }

    .about-image-caption {
        left: 18px !important;
        right: 18px !important;
        bottom: 18px !important;
        max-width: calc(100% - 36px) !important;
        box-sizing: border-box !important;
    }

    .about-content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow-wrap: anywhere !important;
    }

    .about-label {
        margin-bottom: 14px !important;
        font-size: 0.65rem !important;
        letter-spacing: 0.18em !important;
    }

    .about-content h2 {
        max-width: 100% !important;
        margin: 0 0 18px !important;
        font-size: clamp(2rem, 9vw, 2.45rem) !important;
        line-height: 1.08 !important;
        letter-spacing: -0.015em !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }

    .about-intro,
    .about-content > p:not(.about-intro) {
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        font-size: 0.92rem !important;
        line-height: 1.65 !important;
        overflow-wrap: anywhere !important;
    }

    .about-content > p:not(.about-intro) {
        margin-bottom: 25px !important;
    }

    /* Los valores siguen funcionando, pero ya no pueden crear ancho extra. */
    .about-values {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .about-value,
    .about-value:first-child {
        min-width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-wrap: anywhere !important;
    }

    /* ---------------------------------------------------------
       4. PRODUCTOS DESTACADOS — UNA TARJETA COMPLETA POR VEZ
       --------------------------------------------------------- */
    .featured {
        min-height: 500px !important;
        box-sizing: border-box !important;
    }

    .section-title {
        width: calc(100% - 30px) !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    .section-title > span {
        gap: 10px !important;
        font-size: 0.62rem !important;
        letter-spacing: 0.20em !important;
    }

    .section-title > span::before,
    .section-title > span::after {
        width: 55px !important;
    }

    .section-title h2 {
        font-size: clamp(2rem, 10vw, 2.45rem) !important;
    }

    .section-title p {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 0.84rem !important;
    }

    .carousel {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 10px !important;
        gap: 7px !important;
        box-sizing: border-box !important;
    }

    .products {
        width: 100% !important;
        min-width: 0 !important;
        gap: 0 !important;
        overflow-x: hidden !important;
        overflow-y: hidden !important;
        box-sizing: border-box !important;
    }

    .product {
        flex: 0 0 100% !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        scroll-snap-align: center !important;
    }

    .carousel-btn {
        flex: 0 0 38px !important;
        width: 38px !important;
        height: 38px !important;
        font-size: 1.35rem !important;
    }

    /* ---------------------------------------------------------
       5. CATEGORÍAS — OCUPAR TODO EL ANCHO, SIN FRANJA BLANCA
       --------------------------------------------------------- */
    .catalog-section {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 55px 0 65px !important;
        box-sizing: border-box !important;
    }

    .catalog-title {
        width: calc(100% - 30px) !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    .catalog-title h2 {
        font-size: clamp(2rem, 9vw, 2.35rem) !important;
        line-height: 1.1 !important;
    }

    .catalog-title p {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 0.86rem !important;
        line-height: 1.6 !important;
    }

    /* Los botones se colocan encima del carrusel y no le quitan ancho. */
    .category-carousel {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        box-sizing: border-box !important;
    }

    .categories {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        gap: 0 !important;
        overflow-x: hidden !important;
        overflow-y: hidden !important;
        box-sizing: border-box !important;
    }

    .category-card {
        flex: 0 0 100% !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        min-height: 150px !important;
        padding: 24px 60px 24px 24px !important;
        box-sizing: border-box !important;
        scroll-snap-align: center !important;
    }

    .category-btn {
        position: absolute !important;
        top: 50% !important;
        z-index: 10 !important;
        transform: translateY(-50%) !important;
        width: 42px !important;
        height: 42px !important;
        flex: none !important;
        font-size: 1.5rem !important;
        background: rgba(245, 241, 231, 0.82) !important;
        backdrop-filter: blur(3px) !important;
    }

    .category-btn:hover {
        transform: translateY(-50%) !important;
    }

    .category-btn:first-child {
        left: 10px !important;
    }

    .category-btn:last-child {
        right: 10px !important;
    }

    .product-list {
        width: calc(100% - 30px) !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .product-list-header,
    .product-name {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
    }
}

/* -------------------------------------------------------------
   TELÉFONOS PEQUEÑOS
   ------------------------------------------------------------- */
@media (max-width: 400px) {

    .top-header,
    .main-nav {
        height: 60px !important;
    }

    .main-nav {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    .nav-link {
        font-size: 0.53rem !important;
        letter-spacing: 0.065em !important;
        padding-left: 2px !important;
        padding-right: 2px !important;
    }

    .brand {
        height: 340px !important;
        min-height: 340px !important;
    }

    .brand-logo {
        height: 265px !important;
    }

    .brand-logo img {
        width: 78vw !important;
        max-height: 215px !important;
    }

    .brand-logo::after {
        font-size: 1rem !important;
        margin-top: 2px !important;
    }

    .about-image-box {
        height: 270px !important;
    }

    .about-container {
        width: calc(100% - 24px) !important;
    }

    .category-card {
        min-height: 145px !important;
        padding-left: 52px !important;
        padding-right: 52px !important;
    }
}

/* =========================================================
   VILLA FLOR DEL PERÚ — ÚLTIMOS 3 AJUSTES
   SOLO CELULAR
   NO TOCAR PC
   NO TOCAR EL MODAL DE PRODUCTOS
   ========================================================= */

@media (max-width: 700px) {

    /* ---------------------------------------------------------
       1. LOGO
       MISMO TAMAÑO DEL LOGO, MENOS ESPACIO VACÍO ALREDEDOR
       --------------------------------------------------------- */

    .brand {
        height: 325px !important;
        min-height: 325px !important;
    }

    .brand-content {
        height: 100% !important;
        justify-content: flex-start !important;
        padding-top: 4px !important;
    }

    .brand-logo {
        height: 300px !important;
        min-height: 0 !important;
        justify-content: flex-start !important;
        overflow: visible !important;
    }

    .brand-logo img {
        /* Se mantiene prácticamente el mismo tamaño visual */
        width: min(82vw, 330px) !important;
        max-width: 100% !important;
        max-height: 235px !important;
        height: auto !important;
        object-fit: contain !important;
        margin: 0 auto !important;
    }

    .brand-logo::after {
        margin-top: 0 !important;
    }


    /* ---------------------------------------------------------
       2. NUESTRA EMPRESA
       FOTO + TEXTO + VALOR + FLECHAS EN UNA VISTA MÁS COMPACTA
       --------------------------------------------------------- */

    .about-section {
        padding: 28px 0 30px !important;
    }

    .about-container {
        width: calc(100% - 30px) !important;
        gap: 14px !important;
    }

    .about-image-box {
        height: 185px !important;
        min-height: 185px !important;
    }

    #about-main-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: center !important;
    }

    .about-image-caption {
        left: 16px !important;
        bottom: 14px !important;
    }

    .about-image-caption span {
        font-size: 0.82rem !important;
    }

    .about-image-caption strong {
        font-size: 0.72rem !important;
    }

    .about-content {
        width: 100% !important;
        max-width: 100% !important;
    }

    .about-label {
        margin-bottom: 8px !important;
        font-size: 0.60rem !important;
        letter-spacing: 0.16em !important;
    }

    .about-content h2 {
        margin-bottom: 10px !important;
        font-size: clamp(1.72rem, 7.8vw, 2.15rem) !important;
        line-height: 1.03 !important;
    }

    .about-intro,
    .about-content > p:not(.about-intro) {
        font-size: 0.78rem !important;
        line-height: 1.42 !important;
    }

    .about-intro {
        margin-bottom: 8px !important;
    }

    .about-content > p:not(.about-intro) {
        margin-bottom: 12px !important;
    }

    .about-values {
        margin-top: 4px !important;
        padding-top: 13px !important;
        min-height: 0 !important;
    }

    .about-value,
    .about-value:first-child {
        min-height: 92px !important;
        padding: 0 18px 10px !important;
    }

    .about-value-number {
        font-size: 1.15rem !important;
        margin-bottom: 6px !important;
    }

    .about-value-line {
        width: 28px !important;
        margin-bottom: 8px !important;
    }

    .about-value.active .about-value-line {
        width: 38px !important;
    }

    .about-value strong {
        font-size: 0.70rem !important;
        margin-bottom: 4px !important;
        letter-spacing: 0.10em !important;
    }

    .about-value span {
        font-size: 0.68rem !important;
        line-height: 1.35 !important;
        max-width: 100% !important;
    }

    .about-mobile-navigation {
        margin-top: 0 !important;
        gap: 22px !important;
    }

    .about-mobile-navigation button {
        width: 40px !important;
        height: 40px !important;
        flex: 0 0 40px !important;
        font-size: 19px !important;
    }

    .about-mobile-counter {
        min-width: 55px !important;
        font-size: 0.68rem !important;
    }


    /* ---------------------------------------------------------
       3. CATÁLOGO
       LA SEGUNDA CATEGORÍA DEBE PODER MOSTRARSE.
       NO CAMBIAMOS EL DISEÑO DE LAS TARJETAS.
       --------------------------------------------------------- */

    .category-carousel {
        overflow: visible !important;
    }

    .categories {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;

        /* Importante: permite que el carrusel llegue realmente
           a la segunda categoría en lugar de quedar recortado. */
        overflow-x: auto !important;
        overflow-y: hidden !important;

        scroll-snap-type: x mandatory !important;
        scroll-behavior: smooth !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    .categories::-webkit-scrollbar {
        display: none !important;
    }

    .category-card {
        flex: 0 0 100% !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        flex-shrink: 0 !important;
        scroll-snap-align: start !important;
        scroll-snap-stop: always !important;
    }

}


/* -------------------------------------------------------------
   TELÉFONOS PEQUEÑOS
   MISMAS CORRECCIONES, SIN CAMBIAR EL RESTO DEL DISEÑO
   ------------------------------------------------------------- */

@media (max-width: 400px) {

    .brand {
        height: 305px !important;
        min-height: 305px !important;
    }

    .brand-logo {
        height: 280px !important;
    }

    .brand-logo img {
        width: 78vw !important;
        max-height: 215px !important;
    }

    .about-image-box {
        height: 165px !important;
        min-height: 165px !important;
    }

    .about-content h2 {
        font-size: clamp(1.58rem, 7.4vw, 1.95rem) !important;
    }

    .about-intro,
    .about-content > p:not(.about-intro) {
        font-size: 0.74rem !important;
        line-height: 1.38 !important;
    }

    .about-value,
    .about-value:first-child {
        min-height: 86px !important;
    }

    .about-mobile-navigation button {
        width: 38px !important;
        height: 38px !important;
        flex-basis: 38px !important;
    }
}

/* =========================================================
   SOLO E.I.R.L. + LÍNEA DORADA EN CELULAR
   NO GENERAR NI REPETIR EL NOMBRE
   ========================================================= */

@media (max-width: 700px) {

    /* El nombre original queda como está */
    .brand-name {
        text-align: center !important;
    }

    /* NO crear otro nombre */
    .brand-name h1::before,
    .brand-name h1::after {
        content: none !important;
        display: none !important;
    }

    /* E.I.R.L. */
    .brand-name span {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        color: var(--dorado) !important;

        font-family: "DM Sans", sans-serif !important;
        font-size: 0.72rem !important;
        font-weight: 600 !important;

        letter-spacing: 0.55em !important;
        padding-left: 0.55em !important;

        margin: 10px auto 0 !important;

        line-height: 1 !important;
        text-align: center !important;
    }

    /* Línea dorada */
    .brand-name::after {
        content: "" !important;
        display: block !important;

        width: 82% !important;
        max-width: 330px !important;
        height: 2px !important;

        margin: 16px auto 0 !important;

        background: linear-gradient(
            90deg,
            transparent 0%,
            var(--dorado) 18%,
            var(--dorado) 42%,
            transparent 50%,
            var(--dorado) 58%,
            var(--dorado) 82%,
            transparent 100%
        ) !important;
    }
}
/* =========================================================
   CORRECCIÓN FINAL — NOMBRE + E.I.R.L. SOLO CELULAR
   ========================================================= */

@media (max-width: 700px) {

    /* Mostrar el nombre real */
    .brand-name {
        display: flex !important;
        position: relative !important;

        width: 100% !important;

        margin: -80px auto 0 !important;

        padding: 0 !important;

        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        text-align: center !important;

        z-index: 10 !important;
    }

    /* NOMBRE */
    .brand-name h1 {
        display: block !important;

        margin: 0 !important;

        color: var(--verde-texto) !important;

        font-family: "Playfair Display", Georgia, serif !important;

        font-size: clamp(1.15rem, 5.2vw, 1.45rem) !important;

        font-weight: 600 !important;

        line-height: 1.1 !important;

        letter-spacing: 0.02em !important;

        white-space: nowrap !important;
    }

    /* E.I.R.L. */
    .brand-name span {
        display: block !important;

        margin: 8px auto 0 !important;

        color: var(--dorado) !important;

        font-family: "DM Sans", sans-serif !important;

        font-size: 0.68rem !important;

        font-weight: 600 !important;

        letter-spacing: 0.45em !important;

        padding-left: 0.45em !important;

        line-height: 1 !important;

        text-align: center !important;
    }

    /* Línea dorada */
    .brand-name::after {
        content: "" !important;

        display: block !important;

        width: 82% !important;

        max-width: 320px !important;

        height: 2px !important;

        margin: 14px auto 0 !important;

        background: var(--dorado) !important;
    }

    /* MUY IMPORTANTE:
       quitar el E.I.R.L. que habíamos generado
       directamente desde el logo */
    .brand-logo::after {
        content: none !important;
        display: none !important;
    }
}
/* =========================================================
   BOTÓN FLOTANTE WHATSAPP
   ========================================================= */

.whatsapp-float {
    position: fixed;
    right: 22px;
    bottom: 22px;
    width: 58px;
    height: 58px;
    background: #25D366;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 29px;
    text-decoration: none;
    z-index: 9999;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease;
}

.whatsapp-float:hover {
    transform: scale(1.08);
}

@media (max-width: 700px) {
    .whatsapp-float {
        width: 52px;
        height: 52px;
        right: 14px;
        bottom: 14px;
        font-size: 26px;
    }
}