@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --green:#165f2d;--green-dark:#0d4a23;--green-soft:#e8f2e9;
  --pink:#ef174a;--text:#17211b;--muted:#687069;--border:#e6ebe6;
  --bg:#f7f9f6;--shadow:0 12px 34px rgba(17,59,31,.08);--radius:16px;
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;font-family:'Manrope',sans-serif;color:var(--text);background:#fff;-webkit-font-smoothing:antialiased}
img{max-width:100%} a{color:inherit}.site-container{width:min(1180px,calc(100% - 40px));margin:auto}

.topbar{min-height:38px;display:flex;align-items:center;background:var(--green-dark);color:#fff;font-size:12px}
.topbar-inner,.topbar-links{display:flex;align-items:center}.topbar-inner{justify-content:space-between;gap:30px}
.topbar-links{gap:26px}.topbar span,.topbar a{display:inline-flex;align-items:center;gap:8px}.topbar a{color:#fff;text-decoration:none}

.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.header-inner{min-height:92px;display:grid;grid-template-columns:220px 1fr auto;align-items:center;gap:32px}
.site-logo{display:inline-flex}.site-logo img{width:190px;max-height:70px;object-fit:contain}
.main-nav{display:flex;justify-content:center;align-items:center;gap:28px}
.main-nav a{position:relative;padding:34px 0 30px;color:#242b25;font-size:13px;font-weight:700;text-decoration:none;text-transform:uppercase}
.main-nav a:after{content:'';position:absolute;left:0;right:100%;bottom:24px;height:2px;background:var(--green);transition:right .2s}
.main-nav a:hover:after,.main-nav a.active:after{right:0}
.header-actions{display:flex;align-items:center;gap:10px}
.search-link,.menu-toggle{width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:9px;background:#fff;color:var(--green-dark);text-decoration:none}
.wholesale-button{min-height:42px;padding:0 18px;display:inline-flex;align-items:center;gap:9px;color:#fff;background:var(--green);border-radius:9px;text-decoration:none;font-size:13px;font-weight:700}
.menu-toggle{display:none;cursor:pointer}

/* =========================================
   HERO HOME
   ========================================= */

.hero{
    position:relative;
    overflow:hidden;
    background:#f6f3eb;
}

/* ESTRUCTURA GENERAL */

.hero-grid{
    min-height:620px;
    display:grid;
    grid-template-columns:45% 55%;
    align-items:stretch;
    gap:0;
}


/* =========================
   TEXTO
   ========================= */

.hero-copy{
    position:relative;
    z-index:3;
    max-width:650px;

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

    padding:75px 40px 90px 0;
}

.hero .eyebrow{
    display:inline-block;
    margin-bottom:18px;

    color:var(--green);

    font-size:12px;
    font-weight:800;
    letter-spacing:.18em;
}

.hero h1{
    margin:0 0 24px;

    color:#15301f;

    font-size:clamp(44px,4.3vw,64px);
    line-height:1.03;
    letter-spacing:-.035em;
}

.hero p{
    max-width:560px;
    margin:0;

    color:#5f685f;

    font-size:17px;
    line-height:1.7;
}


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

.hero-actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:12px;

    margin-top:30px;
}

.hero .btn{
    min-height:50px;
    padding:0 24px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    border-radius:9px;

    font-size:13px;
    font-weight:800;
    text-decoration:none;

    transition:.2s;
}

.hero .btn-primary{
    color:#fff;
    background:var(--green);
}

.hero .btn-primary:hover{
    background:var(--green-dark);
    transform:translateY(-2px);
}

.hero .btn-secondary{
    color:var(--green-dark);
    background:#fff;
    border:1px solid #dce4db;
}

.hero .btn-secondary:hover{
    border-color:var(--green);
}


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

.hero-image{
    position:relative;
    min-height:620px;
    overflow:hidden;
}

/*
IMPORTANTE:
cover vuelve a hacer protagonista la imagen.
La posicionamos hacia la derecha para conservar
regadera, macetas, bolsa y plantas.
*/

.hero-image img{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center right;

    display:block;
}


/* FUSIÓN ENTRE FONDO E IMAGEN */

.hero-image::before{
    content:"";

    position:absolute;
    z-index:2;

    top:0;
    bottom:0;
    left:0;

    width:170px;

    background:linear-gradient(
        90deg,
        #f6f3eb 0%,
        rgba(246,243,235,.82) 30%,
        rgba(246,243,235,.35) 60%,
        rgba(246,243,235,0) 100%
    );

    pointer-events:none;
}


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

@media(max-width:860px){

    .hero-grid{
        min-height:auto;
        grid-template-columns:1fr;
    }

    .hero-copy{
        max-width:680px;
        padding:60px 0 45px;
    }

    .hero-image{
        min-height:430px;
    }

    .hero-image::before{
        display:none;
    }

    .hero-image img{
        object-position:center;
    }

}


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

@media(max-width:560px){

    .hero-copy{
        padding:45px 0 35px;
    }

    .hero h1{
        font-size:39px;
    }

    .hero p{
        font-size:15px;
    }

    .hero-actions{
        flex-direction:column;
        align-items:stretch;
    }

    .hero .btn{
        width:100%;
    }

    .hero-image{
        min-height:330px;
    }

}

/* HERO A TODO EL ANCHO, TEXTO ALINEADO AL CONTENIDO */

.hero .site-container{
    width:100%;
    max-width:none;
    margin:0;
    padding-left:max(40px, calc((100vw - 1180px) / 2));
}

.hero-grid{
    grid-template-columns:45% 55%;
}

.hero-image{
    width:100%;
    min-height:620px;
}
.benefits{position:relative;z-index:10;margin-top:-28px}
.benefits-grid{padding:18px 24px;display:grid;grid-template-columns:repeat(3,1fr);background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow)}
.benefit-item{padding:12px 18px;display:flex;align-items:center;gap:15px}.benefit-item+.benefit-item{border-left:1px solid var(--border)}
.benefit-icon{width:48px;height:48px;flex:0 0 48px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--green-soft);color:var(--green)}
.benefit-item strong{display:block;margin-bottom:4px;font-size:14px}.benefit-item p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}

.section{padding:86px 0}.section-products{background:var(--bg)}.section-heading{margin-bottom:34px}.section-heading.centered{max-width:620px;margin-inline:auto;text-align:center}
.section-heading h2{margin:8px 0;color:#14221a;font-size:clamp(30px,4vw,40px);line-height:1.1}.section-heading p{margin:0;color:var(--muted);font-size:15px}
.row-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:30px}.section-link{display:inline-flex;align-items:center;gap:10px;color:var(--green);font-size:13px;font-weight:800;text-decoration:none}

.category-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.category-card{overflow:hidden;background:#fff;border:1px solid var(--border);border-radius:var(--radius);text-decoration:none;transition:.2s}
.category-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.category-image{
    width:100%;
    height:210px;
    overflow:hidden;
    background:#f2f5f1;
}

.category-image img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center;
}
.category-body{padding:17px 18px 19px}.category-body h3{margin:0 0 7px;font-size:16px}.category-body p{min-height:38px;margin:0 0 13px;color:var(--muted);font-size:12px;line-height:1.55}
.category-body span{display:inline-flex;align-items:center;gap:8px;color:var(--green);font-size:12px;font-weight:800}

.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.product-card{overflow:hidden;background:#fff;border:1px solid var(--border);border-radius:var(--radius);transition:.2s}.product-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.product-image{position:relative;aspect-ratio:1/.78;display:block;overflow:hidden;background:#f5f7f4}.product-image img{width:100%;height:100%;object-fit:contain;padding:20px}
.product-badge{position:absolute;z-index:2;top:14px;left:14px;padding:6px 9px;color:#fff;background:var(--green);border-radius:6px;font-size:9px;font-weight:800}
.product-body{padding:18px}.product-category,.product-brand{color:var(--muted);font-size:11px}.product-body h3{min-height:46px;margin:6px 0 5px;font-size:16px;line-height:1.4}.product-body h3 a{text-decoration:none}
.product-footer{margin-top:17px;padding-top:15px;display:flex;justify-content:space-between;align-items:flex-end;border-top:1px solid var(--border)}.product-footer>div{display:flex;flex-direction:column;gap:3px}
.product-footer strong{color:var(--green-dark);font-size:18px}.product-footer small{color:var(--muted);font-size:10px}.price-consult{font-size:14px!important}
.product-arrow{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;color:var(--green);background:var(--green-soft);text-decoration:none}

.wholesale-cta{padding:80px 0}.wholesale-card{padding:44px 48px;display:flex;justify-content:space-between;align-items:center;gap:40px;border-radius:22px;background:linear-gradient(120deg,var(--green-dark),var(--green));color:#fff}
.wholesale-card h2{margin:9px 0 8px;font-size:32px}.wholesale-card p{max-width:660px;margin:0;color:#dce9df;font-size:14px;line-height:1.7}

.site-footer{background:#10251a;color:#fff}.footer-grid{padding:58px 0 46px;display:grid;grid-template-columns:1.5fr .8fr 1fr;gap:60px}
.footer-brand img{width:190px;margin-bottom:15px;filter:brightness(0) invert(1)}.footer-brand p,.site-footer p{max-width:360px;margin:0;color:#bccabf;font-size:13px;line-height:1.7}
.site-footer h3{margin:0 0 16px;font-size:14px}.site-footer a{width:fit-content;margin:8px 0;display:block;color:#cbd6cd;font-size:13px;text-decoration:none}.footer-bottom{padding:18px 0;border-top:1px solid rgba(255,255,255,.09);color:#9eada1;font-size:11px}
.empty-state{grid-column:1/-1;padding:36px;color:var(--muted);background:#fff;border:1px dashed #d7dfd8;border-radius:14px;text-align:center}

@media(max-width:1080px){.header-inner{grid-template-columns:190px 1fr auto;gap:18px}.main-nav{gap:18px}.main-nav a{font-size:11px}.wholesale-button{display:none}.category-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:860px){
  .topbar{display:none}.header-inner{min-height:76px;grid-template-columns:1fr auto}.site-logo img{width:165px}
  .main-nav{position:absolute;top:76px;left:0;right:0;padding:16px 20px 22px;display:none;flex-direction:column;align-items:stretch;background:#fff;border-top:1px solid var(--border);border-bottom:1px solid var(--border);box-shadow:0 14px 28px rgba(0,0,0,.07)}
  .main-nav.open{display:flex}.main-nav a{padding:13px 4px;font-size:13px}.main-nav a:after{display:none}.menu-toggle{display:inline-flex}
  .hero-grid{min-height:auto;padding:70px 0 80px;grid-template-columns:1fr;gap:35px}.hero-visual{min-height:280px}.hero-visual-card{min-height:250px}
  .benefits{margin-top:0;padding-top:20px}.benefits-grid{grid-template-columns:1fr}.benefit-item+.benefit-item{border-left:0;border-top:1px solid var(--border)}
  .category-grid,.product-grid{grid-template-columns:repeat(2,1fr)}.wholesale-card{align-items:flex-start;flex-direction:column}
}
@media(max-width:560px){
  .site-container{width:min(100% - 28px,1180px)}.section{padding:62px 0}.hero h1{font-size:40px}.hero p{font-size:15px}.hero-actions{flex-direction:column}.btn{width:100%}.hero-visual{display:none}
  .category-grid,.product-grid{grid-template-columns:1fr}.row-heading{align-items:flex-start;flex-direction:column}.wholesale-card{padding:34px 28px}.wholesale-card h2{font-size:27px}.footer-grid{padding:46px 0 36px;grid-template-columns:1fr;gap:34px}
}
/* =====================================
   FICHA DE PRODUCTO
===================================== */

.product-breadcrumb{
    padding:22px 0;
    border-bottom:1px solid var(--border);
    background:#fff;
}

.product-breadcrumb .site-container{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:13px;
}

.product-breadcrumb a{
    color:#657065;
    text-decoration:none;
}

.product-breadcrumb a:hover{
    color:var(--green);
}

.product-breadcrumb i{
    font-size:9px;
    color:#a3aaa3;
}


/* DETALLE */

.product-detail{
    padding:60px 0 80px;
}

.product-detail-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(360px,.85fr);
    gap:70px;
    align-items:start;
}


/* IMAGEN */

.product-detail-image{
    position:relative;
    min-height:540px;
    border:1px solid var(--border);
    border-radius:22px;
    background:#f5f7f3;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
}

.product-detail-image img{
    width:100%;
    height:540px;
    object-fit:contain;
    padding:35px;
}

.product-detail-badge{
    position:absolute;
    z-index:2;
    top:20px;
    left:20px;

    background:var(--green);
    color:#fff;

    font-size:11px;
    font-weight:800;
    letter-spacing:.06em;

    padding:8px 12px;
    border-radius:7px;
}


/* INFORMACIÓN */

.product-detail-info{
    padding-top:15px;
}

.product-detail-category{
    display:inline-block;
    color:var(--green);
    font-size:13px;
    font-weight:800;
    text-decoration:none;
    text-transform:uppercase;
    letter-spacing:.05em;
    margin-bottom:12px;
}

.product-detail-info h1{
    margin:0 0 15px;

    color:var(--green-dark);

    font-size:clamp(34px,4vw,52px);
    line-height:1.06;
}

.product-detail-brand{
    color:#7a827a;
    font-size:14px;
    margin-bottom:28px;
}

.product-detail-brand a{
    color:var(--green);
    text-decoration:none;
    font-weight:700;
}


/* PRECIO */

.product-detail-price{
    font-size:30px;
    font-weight:800;
    color:var(--green-dark);
    margin-bottom:12px;
}


/* STOCK */

.product-stock{
    display:flex;
    align-items:center;
    gap:8px;

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

    margin-bottom:30px;
}

.product-stock i{
    font-size:7px;
}

.product-stock.available{
    color:#297a42;
}

.product-stock.unavailable{
    color:#9b5b34;
}


/* DESCRIPCIÓN */

.product-description{
    color:#616961;
    line-height:1.75;
    margin-bottom:32px;
    padding-top:25px;
    border-top:1px solid var(--border);
}


/* BOTONES */

.product-detail-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:35px;
}


/* INFO COMERCIAL */

.product-commercial-info{
    border-top:1px solid var(--border);
    padding-top:28px;

    display:grid;
    gap:18px;
}

.product-commercial-info > div{
    display:flex;
    align-items:flex-start;
    gap:14px;
}

.product-commercial-info i{
    width:38px;
    height:38px;

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

    border-radius:50%;

    background:#eef4ec;
    color:var(--green);
}

.product-commercial-info span{
    display:flex;
    flex-direction:column;
    color:#727a72;
    font-size:13px;
}

.product-commercial-info strong{
    color:#344234;
    margin-bottom:2px;
}


/* RELACIONADOS */

.related-products{
    background:#f7f8f5;
}


/* RESPONSIVE */

@media(max-width:900px){

    .product-detail-grid{
        grid-template-columns:1fr;
        gap:35px;
    }

    .product-detail-image{
        min-height:420px;
    }

    .product-detail-image img{
        height:420px;
    }

}

@media(max-width:560px){

    .product-detail{
        padding-top:35px;
    }

    .product-detail-image{
        min-height:330px;
    }

    .product-detail-image img{
        height:330px;
        padding:20px;
    }

    .product-detail-actions{
        flex-direction:column;
    }

    .product-detail-actions .btn{
        width:100%;
        justify-content:center;
    }

}

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

.catalog-hero {
    background: #f4f6f1;
    padding: 28px 0 24px;
    border-bottom: 1px solid var(--border);
}

.catalog-hero .eyebrow {
    display: inline-block;
    margin-bottom: 10px;
}

.catalog-hero h1 {
    margin: 0 0 10px;
    color: var(--green-dark);
    font-size: clamp(32px, 4vw, 46px);
    line-height: 1.05;
}

.catalog-hero p {
    margin: 0;
    max-width: 680px;
    color: #687168;
    font-size: 16px;
    line-height: 1.6;
}


/* CONTENIDO */

.catalog-section {
    padding: 28px 0 70px;
}


/* BUSCADOR */

.catalog-search {
    margin-bottom: 24px;
}

.catalog-search-box {
    width: 100%;
    max-width: 720px;

    display: flex;
    align-items: center;

    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;

    overflow: hidden;

    box-shadow: 0 4px 14px rgba(20, 60, 30, .04);
}

.catalog-search-box > i {
    margin-left: 18px;
    color: var(--green);
    font-size: 17px;
}

.catalog-search-box input {
    flex: 1;

    height: 52px;

    padding: 0 14px;

    border: 0;
    outline: 0;

    background: transparent;

    font-family: inherit;
    font-size: 14px;
}

.catalog-search-box button {
    height: 52px;

    padding: 0 26px;

    border: 0;

    background: var(--green);
    color: #fff;

    font-family: inherit;
    font-weight: 700;

    cursor: pointer;

    transition: .2s;
}

.catalog-search-box button:hover {
    background: var(--green-dark);
}


/* Las categorías del catálogo se muestran en la barra lateral. */

/* RESULTADOS */

.catalog-results-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 26px;
}

.catalog-results-heading h2 {
    margin: 0 0 5px;

    font-size: 28px;
    color: var(--green-dark);
}

.catalog-results-heading p {
    margin: 0;

    color: #7b837b;
    font-size: 14px;
}

.clear-filters {
    color: var(--green);

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

    text-decoration: none;
}

.clear-filters:hover {
    text-decoration: underline;
}


/* SIN RESULTADOS */

.catalog-empty {
    padding: 70px 25px;

    text-align: center;

    background: #f7f8f5;

    border: 1px solid var(--border);
    border-radius: 18px;
}

.catalog-empty i {
    margin-bottom: 16px;

    font-size: 34px;
    color: var(--green);
}

.catalog-empty h3 {
    margin: 0 0 8px;

    color: var(--green-dark);
}

.catalog-empty p {
    margin: 0 0 25px;

    color: #747d74;
}


/* RESPONSIVE */

@media (max-width: 700px) {

    .catalog-hero {
        padding: 28px 0 24px;
    }

    .catalog-section {
        padding: 24px 0 55px;
    }

    .catalog-search-box {
        max-width: none;
    }

    .catalog-search-box button {
        padding: 0 18px;
    }

    .catalog-results-heading {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* =====================================================
   CATALOGO - MENU LATERAL DE CATEGORIAS
   ===================================================== */

.catalog-layout {
    display: grid !important;
    grid-template-columns: 250px minmax(0, 1fr) !important;
    gap: 35px;
    align-items: start;
}

/* COLUMNA IZQUIERDA */
.catalog-sidebar {
    width: 100%;
    background: #ffffff;
    border: 1px solid #e2e7e1;
    border-radius: 14px;
    overflow: hidden;
}

.sidebar-title {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 20px;
    background: #f3f6f1;
    border-bottom: 1px solid #e2e7e1;
}

.sidebar-title i {
    color: #12652f;
    font-size: 15px;
}

.sidebar-title h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: #173c25;
}

/* MUY IMPORTANTE:
   convierte los links en menú vertical */
.sidebar-categories {
    display: flex !important;
    flex-direction: column !important;
    width: 100%;
}

.sidebar-categories a {
    width: 100%;
    min-height: 48px;

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

    padding: 12px 18px;
    box-sizing: border-box;

    border-bottom: 1px solid #edf0eb;

    color: #434c45;
    background: #ffffff;

    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;

    text-decoration: none !important;

    transition: all .2s ease;
}

.sidebar-categories a:last-child {
    border-bottom: none;
}

.sidebar-categories a i {
    margin-left: 10px;
    font-size: 9px;
    color: #a4ada6;
}

.sidebar-categories a:hover {
    background: #f5f8f3;
    color: #12652f;
    padding-left: 22px;
}

/* CATEGORIA ACTIVA */
.sidebar-categories a.active {
    background: #12652f !important;
    color: #ffffff !important;
}

.sidebar-categories a.active i {
    color: #ffffff;
}

/* COLUMNA DERECHA */
.catalog-content {
    width: 100%;
    min-width: 0;
}

.catalog-content .product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}


/* TABLET */
@media (max-width: 1000px) {

    .catalog-layout {
        grid-template-columns: 210px minmax(0, 1fr) !important;
        gap: 22px;
    }

    .catalog-content .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* CELULAR */
@media (max-width: 760px) {

    .catalog-layout {
        display: block !important;
    }

    .catalog-sidebar {
        margin-bottom: 30px;
    }

    .catalog-content .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {

    .catalog-content .product-grid {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   AJUSTES FINALES CATALOGO
   ===================================================== */
.catalog-layout {
    margin-top: 0;
}

.catalog-sidebar {
    position: sticky;
    top: 150px;
}

@media (max-width: 760px) {
    .catalog-sidebar {
        position: static;
    }
}
/* =====================================================
   HOME - BENEFICIOS COMERCIALES
   ===================================================== */

.home-features {
    padding: 65px 0;
    background: #fff;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.home-features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 35px;
}

.home-feature {
    text-align: center;
}

.home-feature-icon {
    width: 76px;
    height: 76px;
    margin: 0 auto 20px;

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

    border-radius: 50%;
    background: var(--green-soft);
    color: var(--green);

    font-size: 26px;
    transition: .25s ease;
}

.home-feature:hover .home-feature-icon {
    background: var(--green);
    color: #fff;
    transform: translateY(-4px);
}

.home-feature h3 {
    margin: 0 0 10px;
    color: #263229;
    font-size: 16px;
    font-weight: 700;
}

.home-feature p {
    max-width: 245px;
    margin: 0 auto;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.7;
}

@media (max-width: 850px) {
    .home-features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 45px 25px;
    }
}

@media (max-width: 520px) {
    .home-features {
        padding: 50px 0;
    }

    .home-features-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   HERO MOBILE - FIX FINAL
   ========================================= */

@media (max-width: 560px) {

    .hero {
        overflow: hidden;
    }

    .hero .site-container {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
    }

    .hero-grid {
        display: grid;
        grid-template-columns: 1fr !important;
        min-height: auto;
        gap: 0;
    }

    .hero-copy {
        width: auto;
        max-width: none;
        padding: 38px 20px 30px;
    }

    .hero .eyebrow {
        margin-bottom: 12px;
        font-size: 10px;
    }

    .hero h1 {
        margin: 0 0 16px;
        font-size: 34px;
        line-height: 1.05;
        letter-spacing: -0.025em;
    }

    .hero p {
        max-width: none;
        font-size: 14px;
        line-height: 1.55;
    }

    .hero-actions {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin-top: 22px;
    }

    .hero .btn {
        width: 100%;
        min-height: 46px;
        box-sizing: border-box;
    }

    .hero-image {
        width: 100%;
        min-height: 260px;
        height: 260px;
        order: 2;
    }

    .hero-image img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 70% center;
    }

    .hero-image::before {
        display: none;
    }

}

.hero-image picture {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.hero-image picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 860px) {

    .hero-image {
        height: 360px;
        min-height: 360px;
    }

    .hero-image picture img {
        object-position: center center;
    }

}

/* =========================================
   HERO MOBILE CON IMAGEN PROPIA
   ========================================= */

@media (max-width: 560px) {

    .hero .site-container {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
    }

    .hero-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    .hero-copy {
        padding: 35px 28px 30px !important;
    }

    .hero-image {
        position: relative;
        width: 100%;
        height: 440px !important;
        min-height: 440px !important;
        overflow: hidden;
    }

    .hero-image picture {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
    }

    .hero-image picture img {
        position: static !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;
        object-fit: cover !important;
        object-position: center bottom !important;
    }

    .hero-image::before {
        display: none !important;
    }

}

/* =========================================================
   PRODUCTO - DESCRIPCIÓN EXTENDIDA
========================================================= */

.product-description-section {
    margin-top: 55px;
    padding: 42px 0 48px;
    border-top: 1px solid rgba(31, 68, 52, 0.14);
}

.product-description-header {
    margin-bottom: 24px;
}

.product-description-eyebrow {
    display: block;
    margin-bottom: 8px;

    color: #6f7f73;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.13em;
}

.product-description-header h2 {
    margin: 0;

    color: #183c2e;
    font-size: clamp(25px, 3vw, 34px);
    font-weight: 700;
    line-height: 1.15;
}

.product-description-content {
    max-width: 900px;

    color: #4f5b54;
    font-size: 15px;
    line-height: 1.85;
    font-weight: 400;
}

@media (max-width: 768px) {

    .product-description-section {
        margin-top: 35px;
        padding: 30px 0 35px;
    }

    .product-description-content {
        font-size: 14px;
        line-height: 1.75;
    }
}

/* =========================================================
   PRODUCTO - GALERÍA DE IMÁGENES
   ========================================================= */

.product-gallery {
    width: 100%;
    min-width: 0;
}

.product-gallery .product-detail-image {
    width: 100%;
}


/* MINIATURAS */

.product-thumbnails {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-top: 16px;
    padding: 2px 0 6px;

    overflow-x: auto;
    scrollbar-width: thin;
}


/* BOTÓN MINIATURA */

.product-thumbnail {
    width: 86px;
    height: 86px;
    flex: 0 0 86px;

    padding: 5px;

    border: 1px solid #dfe6df;
    border-radius: 12px;

    background: #fff;

    cursor: pointer;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}


.product-thumbnail:hover {
    border-color: var(--green);
    transform: translateY(-2px);
}


.product-thumbnail.active {
    border: 2px solid var(--green);
    box-shadow: 0 0 0 3px rgba(22, 95, 45, .08);
}


/* IMAGEN DE LA MINIATURA */

.product-thumbnail img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;

    padding: 0;

    border-radius: 8px;

    background: #f7f8f5;
}


/* TRANSICIÓN IMAGEN PRINCIPAL */

#productMainImage {
    transition: opacity .18s ease;
}


/* TABLET */

@media (max-width: 900px) {

    .product-thumbnail {
        width: 78px;
        height: 78px;
        flex-basis: 78px;
    }

}


/* CELULAR */

@media (max-width: 560px) {

    .product-thumbnails {
        gap: 9px;
        margin-top: 12px;
    }

    .product-thumbnail {
        width: 68px;
        height: 68px;
        flex-basis: 68px;
        border-radius: 9px;
    }

}