/* /Layout/MainLayout.razor.rz.scp.css */
/* --- PALETA DE COLORES (VARIABLES DE DISEÑO) --- */
:root[b-pr2plhgk0a] {
    --waylan-dark-coffee: #2F190E;
    --waylan-gold: #B89A5E;
    --waylan-gold-hover: #A3844C;
    --waylan-cherry-red: #3A120D;
    --waylan-cherry-hover: #2B0D0A;
    --waylan-white: #F7F2ED;
    --waylan-pure-white: #FFFFFF;
    --waylan-shadow: rgba(0, 0, 0, 0.15);
    --header-height: 120px;
}

/* --- RESET Y ESTILOS BASE DEL DOCUMENTO --- */
*[b-pr2plhgk0a] {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body[b-pr2plhgk0a] {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background-color: #FAF6F0;
    color: var(--waylan-dark-coffee);
}

/* --- FIX DEL ESPACIO BLANCO --- */
.main-content[b-pr2plhgk0a] {
    padding-top: var(--header-height) !important;
    margin-top: 0 !important;
}

/* --- HEADER FIJO --- */
header[b-pr2plhgk0a] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: transform 0.35s ease-in-out;
    margin: 0 !important;
    padding: 0 !important;
    background-color: #3A120D !important;
}

.header-waylan-oculto[b-pr2plhgk0a] {
    transform: translateY(-100%);
}

/* --- BARRA DE NAVEGACIÓN --- */
.navbar-waylan[b-pr2plhgk0a] {
    width: 100%;
    background-color: #3A120D !important; /* rojo/cereza sólido */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid rgba(250, 250, 249, 0.1);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25);
    padding: 14px 0 !important;
    position: fixed !important;
    top: 0;
    z-index: 999;
}


.nav-container[b-pr2plhgk0a] {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
}

.nav-logo-img[b-pr2plhgk0a] {
    height: 80px !important; /* o el tamaño que quieras */
    width: auto;
    margin-top: -14px; /* levanta el logo */
    margin-bottom: -14px; /* baja el logo */
}

/* --- ENLACES (VISTA PC) --- */
.nav-links[b-pr2plhgk0a] {
    display: flex;
    align-items: center;
}

.nav-links a[b-pr2plhgk0a] {
    color: #F7F2ED !important;
    text-decoration: none;
    margin: 0 12px;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    transition: color 0.2s ease;
}

.nav-links a:hover[b-pr2plhgk0a], .nav-links a.nav-active[b-pr2plhgk0a] {
    color: #B89A5E !important;
}

.nav-links a.nav-active[b-pr2plhgk0a] {
    border-bottom: 2px solid #B89A5E;
    padding-bottom: 4px;
}

/* --- DROPDOWN NOSOTROS (VISTA PC) --- */
.dropdown-waylan-container[b-pr2plhgk0a] {
    position: relative;
    display: inline-block;
    margin: 0 12px;
}

.dropdown-waylan-btn[b-pr2plhgk0a] {
    background: none;
    border: none;
    color: #F7F2ED !important;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s ease;
}

.dropdown-waylan-btn:hover[b-pr2plhgk0a], .dropdown-waylan-btn.active[b-pr2plhgk0a] {
    color: #B89A5E !important;
}

.arrow-icon[b-pr2plhgk0a] {
    transition: transform 0.2s ease;
}

.arrow-icon.rotate[b-pr2plhgk0a] {
    transform: rotate(180deg);
}

.dropdown-waylan-menu[b-pr2plhgk0a] {
    position: absolute;
    top: 34px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #FFFFFF !important;
    border-radius: 6px;
    min-width: 200px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    padding: 8px 0;
    z-index: 1100;
    animation: fadeInDropdownMenu-b-pr2plhgk0a 0.2s ease-out;
}

.dropdown-waylan-menu[b-pr2plhgk0a]::before {
    content: '';
    position: absolute;
    top: -15px;
    left: 0;
    right: 0;
    height: 15px;
    background: transparent;
}

.dropdown-waylan-menu a[b-pr2plhgk0a] {
    color: var(--waylan-dark-coffee) !important;
    padding: 10px 20px;
    margin: 0 !important;
    font-size: 0.85rem;
    font-weight: 600;
    text-shadow: none;
    text-align: left;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.dropdown-waylan-menu a:hover[b-pr2plhgk0a] {
    background-color: #FAF6F0;
    color: var(--waylan-gold) !important;
}

/* --- ACCIONES --- */
.nav-auth-actions[b-pr2plhgk0a] {
    display: flex;
    align-items: center;
    gap: 18px;
}

.nav-icon-btn[b-pr2plhgk0a] {
    background: none;
    border: none;
    color: #F7F2ED !important;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    transition: color 0.2s ease;
}

.nav-icon-btn:hover[b-pr2plhgk0a] {
    color: var(--waylan-gold) !important;
}

.cart-badge[b-pr2plhgk0a] {
    position: absolute;
    top: -2px;
    right: -2px;
    background-color: #B89A5E;
    color: var(--waylan-dark-coffee);
    font-size: 0.7rem;
    font-weight: 750;
    border-radius: 50%;
    padding: 2px 6px;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.cart-badge-bump[b-pr2plhgk0a] {
    animation: cartBump-b-pr2plhgk0a 0.3s ease-out;
}

.user-menu-container[b-pr2plhgk0a] {
    position: relative;
}

.luxury-profile-dropdown[b-pr2plhgk0a] {
    position: absolute;
    top: 48px;
    right: 0;
    background-color: #FFFFFF;
    border: 1px solid rgba(184, 154, 94, 0.3);
    border-radius: 12px;
    width: 310px;
    padding: 18px;
    box-shadow: 0 15px 40px rgba(26, 16, 10, 0.18);
    display: flex;
    flex-direction: column;
    gap: 14px;
    z-index: 1100;
    animation: fadeInDropdownMenu-b-pr2plhgk0a 0.2s ease-out;
}

.profile-avatar-header[b-pr2plhgk0a] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #FAF6F0;
}

.avatar-circle[b-pr2plhgk0a] {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: #1A100A;
    color: #B89A5E;
    font-weight: 800;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #B89A5E;
    flex-shrink: 0;
}

.user-main-details[b-pr2plhgk0a] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.user-name[b-pr2plhgk0a] {
    font-size: 0.9rem;
    font-weight: 800;
    color: #1A100A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-email[b-pr2plhgk0a] {
    font-size: 0.73rem;
    color: #706B64;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-info-grid[b-pr2plhgk0a] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    background-color: #FAF6F0;
    padding: 10px;
    border-radius: 8px;
}

.info-item[b-pr2plhgk0a] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.info-label[b-pr2plhgk0a] {
    font-size: 0.62rem;
    font-weight: 800;
    color: #706B64;
    letter-spacing: 0.5px;
}

.info-badge[b-pr2plhgk0a] {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 6px;
    border-radius: 4px;
    display: inline-block;
    width: fit-content;
}

.info-badge.role-admin[b-pr2plhgk0a] {
    background-color: #ECE7FF;
    color: #5848C2;
}

.info-badge.role-client[b-pr2plhgk0a] {
    background-color: #E2F0FE;
    color: #1F69C2;
}

.info-badge.status-active[b-pr2plhgk0a] {
    background-color: #E2F3E7;
    color: #2F6F4C;
}

.info-badge.status-inactive[b-pr2plhgk0a] {
    background-color: #FCE8E6;
    color: #8C2424;
}

.profile-actions[b-pr2plhgk0a] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.btn-profile-action[b-pr2plhgk0a] {
    width: 100%;
    padding: 10px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: all 0.2s;
    outline: none;
}

.btn-my-profile[b-pr2plhgk0a] {
    background-color: #FAF6F0;
    color: #1A100A !important;
    border: 1px solid #D2CFC9;
}

.btn-my-profile:hover[b-pr2plhgk0a] {
    background-color: #1A100A;
    color: #B89A5E !important;
    border-color: #1A100A;
}

.btn-admin-panel[b-pr2plhgk0a] {
    background-color: #1A100A;
    color: #B89A5E !important;
    border: 1px solid #B89A5E;
}

.btn-admin-panel:hover[b-pr2plhgk0a] {
    background-color: #281A12;
}

.btn-logout-action[b-pr2plhgk0a] {
    background-color: #FCE8E6;
    color: #8C2424;
}

.btn-logout-action:hover[b-pr2plhgk0a] {
    background-color: #8C2424;
    color: #FFFFFF;
}

.login-form-dropdown[b-pr2plhgk0a] {
    position: absolute;
    top: 42px;
    right: 0;
    background-color: var(--waylan-pure-white);
    border-radius: 8px;
    width: 290px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 1100;
    animation: fadeInDropdownMenu-b-pr2plhgk0a 0.2s ease-out;
}

.dropdown-form-title[b-pr2plhgk0a] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--waylan-dark-coffee);
    margin-bottom: 4px;
    text-align: center;
}

.form-group-waylan[b-pr2plhgk0a] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-group-waylan label[b-pr2plhgk0a] {
    font-size: 0.75rem;
    font-weight: 700;
    color: #55504A;
}

.form-group-waylan input[b-pr2plhgk0a] {
    width: 100%;
    padding: 8px 12px;
    font-size: 0.85rem;
    border: 1px solid #D2CFC9;
    border-radius: 4px;
    background-color: #FAF6F0;
    color: var(--waylan-dark-coffee);
    outline: none;
    transition: border-color 0.2s;
}

.form-group-waylan input:focus[b-pr2plhgk0a] {
    border-color: var(--waylan-gold);
}

.btn-submit-login[b-pr2plhgk0a] {
    background-color: var(--waylan-cherry-red);
    color: #FFFFFF !important;
    border: none;
    border-radius: 4px;
    padding: 10px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s;
    margin-top: 6px;
}

.btn-submit-login:hover[b-pr2plhgk0a] {
    background-color: var(--waylan-cherry-hover);
}

.dropdown-divider[b-pr2plhgk0a] {
    height: 1px;
    background-color: #E6E4E0;
    margin: 6px 0;
}

.dropdown-text[b-pr2plhgk0a] {
    font-size: 0.75rem;
    color: #706B64;
    text-align: center;
}

.dropdown-link-register[b-pr2plhgk0a] {
    color: var(--waylan-gold) !important;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 700;
    text-align: center;
    transition: color 0.2s;
}

.dropdown-link-register:hover[b-pr2plhgk0a] {
    color: var(--waylan-gold-hover) !important;
    text-decoration: underline;
}

.btn-nav-accent[b-pr2plhgk0a] {
    background-color: var(--waylan-cherry-red) !important;
    color: #FFFFFF !important;
    text-decoration: none;
    padding: 10px 22px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1px;
    border-radius: 4px;
    display: inline-block;
    border: none !important;
    transition: background-color 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.btn-nav-accent:hover[b-pr2plhgk0a] {
    background-color: var(--waylan-cherry-hover) !important;
}

/* --- BOTÓN DE HAMBURGUESA OCULTO EN PC --- */
.mobile-menu-btn[b-pr2plhgk0a] {
    display: none;
    background: none;
    border: none;
    color: #F7F2ED;
    cursor: pointer;
    padding: 6px;
    z-index: 1001;
}

/* --- ANIMACIONES --- */
@keyframes cartBump-b-pr2plhgk0a {
    0% { transform: scale(1); }
    50% { transform: scale(1.4); }
    100% { transform: scale(1); }
}

@keyframes fadeInDropdownMenu-b-pr2plhgk0a {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   🎯 AJUSTES RESPONSIVOS CORREGIDOS PARA MÓVILES
   ========================================================================== */
@media (max-width: 992px) {
    :root[b-pr2plhgk0a] {
        --header-height: 70px;
    }

    .navbar-waylan[b-pr2plhgk0a] {
        padding: 8px 0 !important;
    }

    .nav-container[b-pr2plhgk0a] {
        padding: 0 16px;
    }

    .nav-logo-img[b-pr2plhgk0a] {
        height: 38px;
    }

    /* Muestra el botón de hamburguesa en celulares */
    .mobile-menu-btn[b-pr2plhgk0a] {
        display: block;
    }

    /* 🎯 Menú móvil en forma de cortina desplegable de fondo */
    .nav-links[b-pr2plhgk0a] {
        display: none !important; /* Se oculta si no tiene la clase mobile-open */
        position: absolute;
        top: var(--header-height);
        left: 0;
        width: 100%;
        background-color: #3A120D !important; /* El color café/guinda oscuro de Waylan */
        flex-direction: column;
        align-items: flex-start !important;
        padding: 24px !important;
        gap: 8px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
        z-index: 998;
    }

    /* Se activa dinámicamente desde Blazor al hacer clic */
    .nav-links.mobile-open[b-pr2plhgk0a] {
        display: flex !important;
    }

    .nav-links a[b-pr2plhgk0a] {
        margin: 0 !important;
        width: 100%;
        padding: 10px 0;
        font-size: 1.05rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }
    
    .nav-links a.nav-active[b-pr2plhgk0a] {
        border-bottom: 1px solid var(--waylan-gold);
    }

    .dropdown-waylan-container[b-pr2plhgk0a] {
        width: 100%;
        margin: 0 !important;
        padding: 6px 0;
    }

    .dropdown-waylan-btn[b-pr2plhgk0a] {
        width: 100%;
        justify-content: space-between;
        font-size: 1.05rem;
        padding: 4px 0;
    }

    /* 🎯 CORRECCIÓN DEL COLOR HORRIBLE: Adiós recuadro blanco en celulares */
    .dropdown-waylan-menu[b-pr2plhgk0a] {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        width: 100% !important;
        min-width: 100% !important;
        background-color: rgba(255, 255, 255, 0.05) !important; /* Fondo integrado transparente oscuro */
        box-shadow: none !important;
        padding: 4px 0 4px 14px !important; /* Sangría interna para subsecciones */
        margin-top: 6px !important;
        animation: none !important;
    }

    /* Los enlaces internos de "Nosotros" ahora son crema elegante */
    .dropdown-waylan-menu a[b-pr2plhgk0a] {
        color: #F7F2ED !important;
        font-size: 0.95rem;
        padding: 10px 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    }

    .dropdown-waylan-menu a:hover[b-pr2plhgk0a] {
        background-color: transparent !important;
        color: var(--waylan-gold) !important;
    }

    .nav-auth-actions[b-pr2plhgk0a] {
        gap: 12px;
    }

    .btn-nav-accent[b-pr2plhgk0a] {
        padding: 6px 14px;
        font-size: 0.75rem;
        letter-spacing: 0.5px;
    }

    .login-form-dropdown[b-pr2plhgk0a] {
        width: 270px;
        right: -10px;
        top: 45px;
    }
}

/* --- SHOPPING CART DRAWER OVERLAY --- */
.cart-backdrop[b-pr2plhgk0a] {
    position: fixed;
    inset: 0;
    background-color: rgba(26, 16, 10, 0.45);
    backdrop-filter: blur(4px);
    z-index: 2000;
    display: flex;
    justify-content: flex-end;
}

.cart-drawer[b-pr2plhgk0a] {
    width: 100%;
    max-width: 480px;
    height: 100%;
    background-color: #FAF6F0;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    animation: slideIn-b-pr2plhgk0a 0.3s ease-out;
}

@keyframes slideIn-b-pr2plhgk0a {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

.cart-header[b-pr2plhgk0a] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    background-color: #3A120D;
    color: #F7F2ED;
    border-bottom: 2px solid #B89A5E;
}

.cart-header h3[b-pr2plhgk0a] {
    margin: 0;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.25rem;
    font-weight: 700;
}

.btn-close-cart[b-pr2plhgk0a] {
    background: transparent;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: #F7F2ED;
    outline: none;
    line-height: 1;
}

.btn-close-cart:hover[b-pr2plhgk0a] {
    color: #B89A5E;
}

.cart-body[b-pr2plhgk0a] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.empty-cart-view[b-pr2plhgk0a] {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: #706B64;
}

.empty-cart-message[b-pr2plhgk0a] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.btn-continue-shopping[b-pr2plhgk0a] {
    background-color: #B89A5E;
    color: #2F190E;
    border: none;
    padding: 10px 24px;
    font-weight: 800;
    font-size: 0.75rem;
    letter-spacing: 1.5px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-continue-shopping:hover[b-pr2plhgk0a] {
    background-color: #D1B894;
}

.cart-items-list[b-pr2plhgk0a] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cart-item-row[b-pr2plhgk0a] {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: 16px;
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 1px solid #E2DBD3;
}

.cart-item-img[b-pr2plhgk0a] {
    width: 80px;
    height: 80px;
    object-fit: contain;
    background-color: #FAF6F0;
    border-radius: 6px;
    border: 1px solid rgba(40, 26, 18, 0.08);
}

.cart-item-details[b-pr2plhgk0a] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cart-item-title[b-pr2plhgk0a] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #2F190E;
}

.cart-item-meta[b-pr2plhgk0a] {
    font-size: 0.75rem;
    color: #706B64;
}

.cart-item-price[b-pr2plhgk0a] {
    font-size: 0.85rem;
    font-weight: 700;
    color: #B89A5E;
}

.cart-item-actions[b-pr2plhgk0a] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

.quantity-selector[b-pr2plhgk0a] {
    display: flex;
    align-items: center;
    border: 1px solid #D2CFC9;
    border-radius: 4px;
    background-color: #FFFFFF;
}

.btn-qty[b-pr2plhgk0a] {
    background: transparent;
    border: none;
    width: 24px;
    height: 24px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    color: #2F190E;
    outline: none;
}

.btn-qty:hover[b-pr2plhgk0a] {
    background-color: rgba(40, 26, 18, 0.05);
}

.qty-val[b-pr2plhgk0a] {
    width: 24px;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 700;
}

.btn-remove-item[b-pr2plhgk0a] {
    background: transparent;
    border: none;
    color: #8C2424;
    cursor: pointer;
    outline: none;
    padding: 0;
}

.btn-remove-item:hover[b-pr2plhgk0a] {
    color: #D32F2F;
}

.cart-footer[b-pr2plhgk0a] {
    padding: 24px;
    background-color: #FFFFFF;
    border-top: 1.5px solid #E2DBD3;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cart-summary-row[b-pr2plhgk0a] {
    display: flex;
    justify-content: space-between;
    font-size: 1.1rem;
    color: #2F190E;
}

.cart-summary-row strong[b-pr2plhgk0a] {
    color: #B89A5E;
    font-size: 1.2rem;
}

.cart-disclaimer[b-pr2plhgk0a] {
    font-size: 0.75rem;
    color: #706B64;
    margin: 0;
    line-height: 1.4;
}

.btn-checkout-submit[b-pr2plhgk0a] {
    background-color: #3A120D;
    color: #FAF6F0;
    border: 1px solid #B89A5E;
    padding: 14px 20px;
    font-weight: 800;
    font-size: 0.8rem;
    letter-spacing: 1.5px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    outline: none;
    width: 100%;
}

.btn-checkout-submit:hover:not(:disabled)[b-pr2plhgk0a] {
    background-color: #2B0D0A;
    color: #B89A5E;
}

.btn-checkout-submit:disabled[b-pr2plhgk0a] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Spinner indicator */
.spinner[b-pr2plhgk0a] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(250, 246, 240, 0.25);
    border-top-color: #FAF6F0;
    border-radius: 50%;
    animation: spin-b-pr2plhgk0a 0.8s linear infinite;
    margin-right: 8px;
}

@keyframes spin-b-pr2plhgk0a {
    to { transform: rotate(360deg); }
}
/* /Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-inyl6y9wnz] {
    background-color: rgba(255, 255, 255, 0.1);
}

.top-row[b-inyl6y9wnz] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-inyl6y9wnz] {
    font-size: 1.1rem;
}

.bi[b-inyl6y9wnz] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-inyl6y9wnz] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-inyl6y9wnz] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-inyl6y9wnz] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-inyl6y9wnz] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-inyl6y9wnz] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-inyl6y9wnz] {
        padding-bottom: 1rem;
    }

    .nav-item[b-inyl6y9wnz]  a {
        color: #d7d7d7;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

.nav-item[b-inyl6y9wnz]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-inyl6y9wnz]  a:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

@media (min-width: 641px) {
    .navbar-toggler[b-inyl6y9wnz] {
        display: none;
    }

    .collapse[b-inyl6y9wnz] {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }

    .nav-scrollable[b-inyl6y9wnz] {
        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Pages/CitaSemanal.razor.rz.scp.css */
/* ==========================================================================
   ESTILOS GENERALES Y PALETA DE COLORES CÁLIDA (CAFÉ PREMIUM)
   - Negro profundo: #120c08, #1c1510
   - Beige / Crema: #FAF7F2, #F4EFE6, #E6DFDA
   - Tonos tierra: #4A3B32, #2B1E16, #8C6239
   - Dorados suaves: #B89A5E, #D1B894, #C4B79C
   ========================================================================== */

.cita-page-wrapper[b-nsmrsk2rcr] {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #2b1e16;
    background-color: #faf7f2;
    overflow-x: hidden;
}

.cita-container[b-nsmrsk2rcr] {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
}

/* --- HERO SECTION --- */
.cita-hero-section[b-nsmrsk2rcr] {
    position: relative;
    padding: 100px 0 70px 0;
    color: #FAFAF9;
    background-color: #120c08;
    background-image: url('../fondos/topography.svg');
    background-repeat: repeat;
    background-size: 800px 800px;
}

.cita-back-navigation[b-nsmrsk2rcr] {
    margin-bottom: 30px;
}

.cita-back-btn[b-nsmrsk2rcr] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #D1B894;
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: color 0.3s ease, transform 0.3s ease;
}

.cita-back-btn:hover[b-nsmrsk2rcr] {
    color: #ffffff;
    transform: translateX(-4px);
}

.cita-hero-grid[b-nsmrsk2rcr] {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 48px;
    align-items: center;
}

.cita-category-badge[b-nsmrsk2rcr] {
    display: inline-block;
    color: #B89A5E;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.cita-hero-title[b-nsmrsk2rcr] {
    font-family: 'Georgia', serif;
    font-size: 3.4rem;
    font-weight: 300;
    line-height: 1.18;
    margin-bottom: 24px;
    color: #ffffff;
}

.serif-gold-italic[b-nsmrsk2rcr] {
    font-family: 'Georgia', serif;
    font-style: italic;
    color: #D1B894;
    display: inline-block;
}

.cita-hero-subtitle[b-nsmrsk2rcr] {
    font-size: 1.15rem;
    line-height: 1.75;
    color: #E5E7EB;
    max-width: 650px;
    margin-bottom: 30px;
    font-weight: 300;
}

/* Meta info row */
.cita-meta-info-row[b-nsmrsk2rcr] {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
    padding-top: 16px;
    border-top: 1px solid rgba(209, 184, 148, 0.25);
}

.meta-item[b-nsmrsk2rcr] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #C4B79C;
    font-size: 0.88rem;
}

.meta-icon[b-nsmrsk2rcr] {
    width: 18px;
    height: 18px;
    stroke: #B89A5E;
}

/* Hero image frame */
.cita-hero-image-wrapper[b-nsmrsk2rcr] {
    position: relative;
}

.hero-image-frame[b-nsmrsk2rcr] {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(184, 154, 94, 0.3);
    max-height: 380px;
}

.hero-img[b-nsmrsk2rcr] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.hero-image-frame:hover .hero-img[b-nsmrsk2rcr] {
    transform: scale(1.04);
}

/* --- SECCIÓN HISTORIA + RAZONES --- */
.cita-main-details-section[b-nsmrsk2rcr] {
    padding: 90px 0;
    background-color: #faf7f2;
}

.cita-two-columns-layout[b-nsmrsk2rcr] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: flex-start;
}

.section-title-dark[b-nsmrsk2rcr] {
    font-family: 'Georgia', serif;
    font-size: 2.3rem;
    color: #2b1e16;
    font-weight: 300;
    margin-bottom: 12px;
    line-height: 1.25;
}

.gold-divider-line[b-nsmrsk2rcr] {
    width: 48px;
    height: 2px;
    background-color: #b89a5e;
    margin-bottom: 24px;
}

.story-paragraph[b-nsmrsk2rcr] {
    font-size: 1.02rem;
    line-height: 1.8;
    color: #4a3b32;
    margin-bottom: 20px;
}

/* Quote Card */
.quote-card[b-nsmrsk2rcr] {
    background-color: #ffffff;
    border-left: 3px solid #b89a5e;
    padding: 30px;
    border-radius: 0 12px 12px 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
    margin-top: 32px;
    position: relative;
}

.quote-icon[b-nsmrsk2rcr] {
    font-family: 'Georgia', serif;
    font-size: 3.5rem;
    color: #d1b894;
    line-height: 1;
    position: absolute;
    top: 10px;
    left: 15px;
    opacity: 0.4;
}

.quote-text[b-nsmrsk2rcr] {
    font-family: 'Georgia', serif;
    font-style: italic;
    font-size: 1.08rem;
    line-height: 1.7;
    color: #2b1e16;
    margin: 0 0 20px 0;
    position: relative;
    z-index: 1;
}

.quote-author[b-nsmrsk2rcr] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.author-avatar[b-nsmrsk2rcr] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #b89a5e;
}

.author-name[b-nsmrsk2rcr] {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: #2b1e16;
    margin: 0 0 2px 0;
}

.author-title[b-nsmrsk2rcr] {
    font-size: 0.8rem;
    color: #8c6239;
}

/* Reasons Column Box */
.reasons-card-box[b-nsmrsk2rcr] {
    background-color: #ffffff;
    border: 1px solid #e6dfda;
    border-radius: 14px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

.reasons-title[b-nsmrsk2rcr] {
    font-family: 'Georgia', serif;
    font-size: 1.6rem;
    font-style: italic;
    color: #2b1e16;
    margin-bottom: 32px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f4efe6;
}

.reason-item[b-nsmrsk2rcr] {
    display: flex;
    gap: 20px;
    margin-bottom: 28px;
}

.reason-item:last-child[b-nsmrsk2rcr] {
    margin-bottom: 0;
}

.reason-icon-wrapper[b-nsmrsk2rcr] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #f4efe6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.reason-icon-wrapper svg[b-nsmrsk2rcr] {
    width: 22px;
    height: 22px;
    stroke: #8c6239;
}

.reason-content h4[b-nsmrsk2rcr] {
    font-size: 1.05rem;
    font-weight: 600;
    color: #2b1e16;
    margin: 0 0 6px 0;
}

.reason-content p[b-nsmrsk2rcr] {
    font-size: 0.92rem;
    line-height: 1.6;
    color: #55443b;
    margin: 0;
}

/* --- SECCIÓN ASÍ OPTIMIZAMOS EL SECADO --- */
.cita-optimization-section[b-nsmrsk2rcr] {
    padding: 80px 0;
    background-color: #f4efe6;
}

.section-header-center[b-nsmrsk2rcr] {
    text-align: center;
    margin-bottom: 48px;
}

.header-leaf-icon[b-nsmrsk2rcr] {
    margin-bottom: 12px;
}

.title-center-serif[b-nsmrsk2rcr] {
    font-family: 'Georgia', serif;
    font-size: 2.2rem;
    font-weight: 300;
    font-style: italic;
    color: #2b1e16;
}

.optimization-cards-grid[b-nsmrsk2rcr] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px;
}

.opt-card[b-nsmrsk2rcr] {
    background-color: #ffffff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.opt-card:hover[b-nsmrsk2rcr] {
    transform: translateY(-6px);
    box-shadow: 0 16px 35px rgba(0, 0, 0, 0.08);
}

.opt-card-image-box[b-nsmrsk2rcr] {
    height: 240px;
    overflow: hidden;
}

.opt-card-image-box img[b-nsmrsk2rcr] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.opt-card:hover .opt-card-image-box img[b-nsmrsk2rcr] {
    transform: scale(1.05);
}

.opt-card-body[b-nsmrsk2rcr] {
    padding: 28px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.opt-number[b-nsmrsk2rcr] {
    font-family: 'Georgia', serif;
    font-size: 1.8rem;
    font-style: italic;
    color: #b89a5e;
    font-weight: 300;
    line-height: 1;
}

.opt-info h3[b-nsmrsk2rcr] {
    font-size: 1.15rem;
    font-weight: 600;
    color: #2b1e16;
    margin: 0 0 8px 0;
}

.opt-info p[b-nsmrsk2rcr] {
    font-size: 0.94rem;
    line-height: 1.6;
    color: #55443b;
    margin: 0;
}

/* ==========================================================================
   LANDING "NUESTRO PROCESO" - LAYOUT HORIZONTAL (CUMPLIENDO REQUERIMIENTOS)
   ========================================================================== */

.proceso-landing-section[b-nsmrsk2rcr] {
    padding: 100px 0;
    background-color: #faf7f2;
}

.proceso-header[b-nsmrsk2rcr] {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 56px auto;
}

.proceso-section-badge[b-nsmrsk2rcr] {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 3px;
    color: #8c6239;
    text-transform: uppercase;
    display: block;
    margin-bottom: 12px;
}

.proceso-section-title[b-nsmrsk2rcr] {
    font-family: 'Georgia', serif;
    font-size: 2.8rem;
    font-weight: 300;
    color: #120c08;
    margin-bottom: 16px;
    letter-spacing: -0.5px;
}

.proceso-section-subtitle[b-nsmrsk2rcr] {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #55443b;
    margin-bottom: 24px;
}

.proceso-title-separator[b-nsmrsk2rcr] {
    width: 60px;
    height: 2px;
    background-color: #b89a5e;
    margin: 0 auto;
}

/* Grid horizontal para tarjetas */
.proceso-cards-container[b-nsmrsk2rcr] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    justify-content: center;
    align-items: stretch;
}

/* Tarjeta individual (Card) estilo moderno, limpio y minimalista */
.proceso-card[b-nsmrsk2rcr] {
    background-color: #ffffff;
    border: 1px solid #e6dfda;
    border-radius: 14px;
    padding: 36px 22px 28px 22px;
    text-align: center;
    position: relative;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
    transition: transform 0.35s cubic-bezier(0.165, 0.84, 0.44, 1),
        box-shadow 0.35s cubic-bezier(0.165, 0.84, 0.44, 1),
        border-color 0.35s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.card-step-badge[b-nsmrsk2rcr] {
    position: absolute;
    top: 14px;
    right: 16px;
    font-family: 'Georgia', serif;
    font-size: 0.85rem;
    font-style: italic;
    color: #b89a5e;
    font-weight: bold;
}

.card-icon-container[b-nsmrsk2rcr] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: #f9f6f0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.proceso-svg-icon[b-nsmrsk2rcr] {
    width: 30px;
    height: 30px;
    stroke: #8c6239;
    transition: stroke 0.3s ease;
}

.proceso-card-title[b-nsmrsk2rcr] {
    font-family: 'Georgia', serif;
    font-size: 1.25rem;
    font-weight: 400;
    color: #120c08;
    margin-bottom: 12px;
    line-height: 1.3;
}

.proceso-card-description[b-nsmrsk2rcr] {
    font-size: 0.88rem;
    line-height: 1.6;
    color: #55443b;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Hover Effect: Ligera elevación, cambio de borde y sombra sutil */
.proceso-card:hover[b-nsmrsk2rcr] {
    transform: translateY(-8px);
    box-shadow: 0 14px 35px rgba(184, 154, 94, 0.16);
    border-color: #d1b894;
}

.proceso-card:hover .card-icon-container[b-nsmrsk2rcr] {
    background-color: #8c6239;
    transform: scale(1.08);
}

.proceso-card:hover .proceso-svg-icon[b-nsmrsk2rcr] {
    stroke: #ffffff;
}

/* --- BANNER DE CIERRE Y BOTÓN --- */
.cita-callout-section[b-nsmrsk2rcr] {
    padding: 60px 0 90px 0;
    background-color: #faf7f2;
}

.callout-box[b-nsmrsk2rcr] {
    background-color: #120c08;
    background-image: url('../fondos/topography.svg');
    background-repeat: repeat;
    background-size: 800px 800px;
    border-radius: 16px;
    padding: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    color: #FAFAF9;
    box-shadow: 0 16px 40px rgba(18, 12, 8, 0.2);
    border: 1px solid rgba(184, 154, 94, 0.25);
}

.callout-content[b-nsmrsk2rcr] {
    display: flex;
    align-items: center;
    gap: 28px;
    max-width: 800px;
}

.callout-text h3[b-nsmrsk2rcr] {
    font-family: 'Georgia', serif;
    font-size: 1.6rem;
    font-weight: 300;
    margin: 0 0 10px 0;
    color: #ffffff;
}

.callout-text p[b-nsmrsk2rcr] {
    font-size: 0.96rem;
    line-height: 1.65;
    color: #d1d5db;
    margin: 0;
}

.btn-callout[b-nsmrsk2rcr] {
    background-color: #b89a5e;
    color: #120c08;
    padding: 16px 32px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.btn-callout:hover[b-nsmrsk2rcr] {
    background-color: #d1b894;
    box-shadow: 0 6px 20px rgba(184, 154, 94, 0.4);
    transform: translateY(-2px);
}

/* --- FOOTER ESTADÍSTICAS --- */
.cita-impact-footer[b-nsmrsk2rcr] {
    background-color: #1c1510;
    background-image: url('../fondos/topography.svg');
    background-repeat: repeat;
    background-size: 800px 800px;
    padding: 48px 0;
    border-top: 1px solid rgba(184, 154, 94, 0.2);
}

.impact-stats-row[b-nsmrsk2rcr] {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.impact-stat-item[b-nsmrsk2rcr] {
    display: flex;
    align-items: center;
    gap: 18px;
}

.impact-icon svg[b-nsmrsk2rcr] {
    width: 36px;
    height: 36px;
    stroke: #b89a5e;
}

.impact-number[b-nsmrsk2rcr] {
    font-family: 'Georgia', serif;
    font-size: 2.2rem;
    font-weight: 300;
    color: #ffffff;
    display: block;
    line-height: 1.1;
}

.impact-label[b-nsmrsk2rcr] {
    font-size: 0.85rem;
    color: #c4b79c;
    margin: 4px 0 0 0;
    max-width: 180px;
    line-height: 1.4;
}

.impact-divider[b-nsmrsk2rcr] {
    width: 1px;
    height: 48px;
    background-color: rgba(184, 154, 94, 0.25);
}

/* --- ANIMACIONES SCROLL (FADE-UP) --- */
.fade-up-item[b-nsmrsk2rcr] {
    animation: fadeUp-b-nsmrsk2rcr 0.8s ease-out forwards;
}

@keyframes fadeUp-b-nsmrsk2rcr {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   RESPONSIVE DESIGN (ADAPTACIÓN A MÓVILES Y TABLETS)
   ========================================================================== */

@media (max-width: 1100px) {
    .proceso-cards-container[b-nsmrsk2rcr] {
        grid-template-columns: repeat(3, 1fr);
    }

    .cita-hero-title[b-nsmrsk2rcr] {
        font-size: 2.8rem;
    }
}

@media (max-width: 920px) {
    .cita-hero-grid[b-nsmrsk2rcr] {
        grid-template-columns: 1fr;
    }

    .cita-two-columns-layout[b-nsmrsk2rcr] {
        grid-template-columns: 1fr;
    }

    .optimization-cards-grid[b-nsmrsk2rcr] {
        grid-template-columns: 1fr;
    }

    .proceso-cards-container[b-nsmrsk2rcr] {
        grid-template-columns: repeat(2, 1fr);
    }

    .callout-box[b-nsmrsk2rcr] {
        flex-direction: column;
        text-align: center;
    }

    .callout-content[b-nsmrsk2rcr] {
        flex-direction: column;
    }

    .impact-stats-row[b-nsmrsk2rcr] {
        flex-direction: column;
        gap: 32px;
    }

    .impact-divider[b-nsmrsk2rcr] {
        display: none;
    }
}

@media (max-width: 576px) {
    .proceso-cards-container[b-nsmrsk2rcr] {
        grid-template-columns: 1fr;
    }

    .cita-hero-title[b-nsmrsk2rcr] {
        font-size: 2.2rem;
    }

    .proceso-section-title[b-nsmrsk2rcr] {
        font-size: 2.1rem;
    }

    .proceso-card[b-nsmrsk2rcr] {
        padding: 30px 20px;
    }
}
/* /Pages/Contacto.razor.rz.scp.css */
/* ==========================================
   SECCIÓN CONTACTO - ESTILO PREMIUM BEIGE/CREMA
   ========================================== */
.contacto-section[b-4hspacecfx] {
    background-color: #F4F0EA;
    color: #2B2B2B;
    position: relative;
    padding-top: 70px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    overflow: hidden;
}

.coffee-branch-bg[b-4hspacecfx] {
    position: absolute;
    top: 20px;
    right: -30px;
    width: 320px;
    height: 280px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%23C39A58' stroke-width='1' opacity='0.35'%3E%3Cpath d='M10,180 Q80,100 180,20' /%3E%3Cpath d='M60,120 Q40,90 20,100 Q40,110 60,120' /%3E%3Cpath d='M100,80 Q80,50 60,60 Q80,70 100,80' /%3E%3Cpath d='M140,40 Q120,10 100,20 Q120,30 140,40' /%3E%3Ccircle cx='70' cy='110' r='5' /%3E%3Ccircle cx='110' cy='70' r='5' /%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
}

.contacto-container[b-4hspacecfx] {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px 80px 20px;
}

/* Header */
.contacto-header[b-4hspacecfx] {
    margin-bottom: 55px;
}

.subtitle-gold[b-4hspacecfx] {
    color: #C39A58;
    font-size: 0.78rem;
    letter-spacing: 2.5px;
    font-weight: 600;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.title-serif[b-4hspacecfx] {
    font-family: 'Playfair Display', 'Georgia', serif;
    font-size: 3.2rem;
    color: #1A1A1A;
    margin: 0;
    font-weight: 500;
}

.divider-gold[b-4hspacecfx] {
    width: 40px;
    height: 1.5px;
    background-color: #C39A58;
    margin: 15px auto 20px auto;
}

.description-text[b-4hspacecfx] {
    color: #555555;
    font-size: 0.98rem;
    line-height: 1.6;
    margin: 0;
}

/* Grid Layout */
.contacto-grid[b-4hspacecfx] {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 25px;
    align-items: stretch;
}

@media (max-width: 992px) {
    .contacto-grid[b-4hspacecfx] {
        grid-template-columns: 1fr;
    }
}

/* Tarjetas */
.info-card[b-4hspacecfx],
.form-card[b-4hspacecfx] {
    background-color: #FAF7F2;
    border-radius: 12px;
    padding: 40px 35px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

.card-title-serif[b-4hspacecfx] {
    font-family: 'Playfair Display', 'Georgia', serif;
    font-size: 1.6rem;
    color: #111111;
    margin: 0;
    font-weight: 500;
}

.small-divider-gold[b-4hspacecfx] {
    width: 35px;
    height: 1.5px;
    background-color: #C39A58;
    margin: 12px 0 30px 0;
}

/* Información de Contacto (Con separadores elegantes) */
.info-list[b-4hspacecfx] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.info-item[b-4hspacecfx] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    border-bottom: 1px solid #EAE3D2;
    /* Línea divisora */
    padding-bottom: 18px;
}

.info-item:last-child[b-4hspacecfx] {
    border-bottom: none;
    padding-bottom: 0;
}

.icon-wrapper[b-4hspacecfx] {
    margin-top: 2px;
}

.info-text h3[b-4hspacecfx] {
    font-size: 0.92rem;
    font-weight: 700;
    color: #111111;
    margin: 0 0 4px 0;
}

.info-text p[b-4hspacecfx] {
    font-size: 0.86rem;
    color: #666666;
    margin: 0;
    line-height: 1.45;
}

.social-icons[b-4hspacecfx] {
    display: flex;
    gap: 20px;
    margin-top: 35px;
    padding-top: 10px;
}

.social-icons a[b-4hspacecfx] {
    display: inline-flex;
    transition: transform 0.2s ease;
}

.social-icons a:hover[b-4hspacecfx] {
    transform: translateY(-2px);
}

/* ==========================================
   FORMULARIO Y RECUADROS (AJUSTADOS Y SEPARADOS)
   ========================================== */
.form-body[b-4hspacecfx] {
    display: flex;
    flex-direction: column;
    gap: 20px !important;
    /* Despega los recuadros verticalmente */
}

.form-row[b-4hspacecfx] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px !important;
    /* Despega Nombre y Correo horizontalmente */
}

@media (max-width: 576px) {
    .form-row[b-4hspacecfx] {
        grid-template-columns: 1fr;
    }
}

.form-group[b-4hspacecfx] {
    display: flex;
    flex-direction: column;
}

/* Estilos directos sobre los inputs y textareas de Blazor */
[b-4hspacecfx] input,
[b-4hspacecfx] textarea,
.form-card input[b-4hspacecfx],
.form-card textarea[b-4hspacecfx],
.form-control-custom[b-4hspacecfx],
.textarea-custom[b-4hspacecfx] {
    width: 100% !important;
    background-color: #F7F3EE !important;
    /* Crema suave idéntico a la imagen */
    border: 1px solid #E5DEC9 !important;
    /* Borde sutil y fino */
    border-radius: 8px !important;
    padding: 16px 20px !important;
    /* Aumenta el aire interno */
    font-size: 0.92rem !important;
    color: #333333 !important;
    outline: none !important;
    box-sizing: border-box !important;
    transition: all 0.25s ease !important;
    box-shadow: none !important;
}

[b-4hspacecfx] input::placeholder,
[b-4hspacecfx] textarea::placeholder,
.form-card input[b-4hspacecfx]::placeholder,
.form-card textarea[b-4hspacecfx]::placeholder {
    color: #9E9488 !important;
    font-size: 0.88rem !important;
}

[b-4hspacecfx] input:focus,
[b-4hspacecfx] textarea:focus,
.form-card input:focus[b-4hspacecfx],
.form-card textarea:focus[b-4hspacecfx] {
    border-color: #C39A58 !important;
    background-color: #FFFFFF !important;
    box-shadow: 0 0 0 3px rgba(195, 154, 88, 0.12) !important;
}

[b-4hspacecfx] textarea,
.form-card textarea[b-4hspacecfx],
.textarea-custom[b-4hspacecfx] {
    min-height: 150px !important;
    /* Altura adecuada para la caja de mensaje */
    resize: vertical !important;
}

/* Botón NEGRO Ancho Completo (Full Width) */
.btn-submit-black[b-4hspacecfx] {
    width: 100% !important;
    /* Se estira a todo el ancho */
    background-color: #0F0E0E !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    cursor: pointer !important;
    margin-top: 5px !important;
    transition: background-color 0.25s ease !important;
}

.btn-submit-black span[b-4hspacecfx] {
    font-size: 0.82rem !important;
    letter-spacing: 2.5px !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
}

.btn-submit-black:hover[b-4hspacecfx] {
    background-color: #242220 !important;
}

.success-msg[b-4hspacecfx] {
    color: #2e7d32;
    background-color: #e8f5e9;
    padding: 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    text-align: center;
    margin-top: 10px;
}

/* Barra inferior */
.bottom-benefits-bar[b-4hspacecfx] {
    background-color: #0A0A0A;
    background-image: url('../fondos/topography.svg');
    background-repeat: repeat;
    background-size: 800px 800px;
    padding: 45px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.benefits-container[b-4hspacecfx] {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

@media (max-width: 992px) {
    .benefits-container[b-4hspacecfx] {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

@media (max-width: 576px) {
    .benefits-container[b-4hspacecfx] {
        grid-template-columns: 1fr;
    }
}

.benefit-item[b-4hspacecfx] {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    padding-right: 15px;
}

.benefit-item:last-child[b-4hspacecfx] {
    border-right: none;
}

@media (max-width: 992px) {
    .benefit-item[b-4hspacecfx] {
        border-right: none;
    }
}

.benefit-text h4[b-4hspacecfx] {
    color: #FFFFFF;
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0 0 6px 0;
}

.benefit-text p[b-4hspacecfx] {
    color: #999999;
    font-size: 0.82rem;
    line-height: 1.4;
    margin: 0 0 10px 0;
}

.mini-line-gold[b-4hspacecfx] {
    width: 25px;
    height: 2px;
    background-color: #C39A58;
}
/* /Pages/NuestroProceso.razor.rz.scp.css */
.proceso-container[b-1m2ed1p97q] {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
}

.proceso-container-wide[b-1m2ed1p97q] {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 30px;
    width: 100%;
}

.proceso-tag[b-1m2ed1p97q] {
    font-size: 0.8rem;
    letter-spacing: 3px;
    color: #C4B79C;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 0;
    font-weight: 600;
}

.proceso-badge-row[b-1m2ed1p97q] {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.badge-line-decorator[b-1m2ed1p97q] {
    width: 50px;
    height: 1px;
    background-color: #B89A5E;
}

.text-dark-brown[b-1m2ed1p97q] {
    color: #8C7A6B;
}

.serif-italic-gold[b-1m2ed1p97q] {
    font-family: 'Georgia', serif;
    font-style: italic;
    color: #D1B894;
}

.serif-italic-brown[b-1m2ed1p97q] {
    font-family: 'Georgia', serif;
    font-style: italic;
    color: #3A120D;
}

.proceso-hero[b-1m2ed1p97q] {
    position: relative;
    background-color: #120C08;
    background-image: url('../fondos/topography.svg');
    background-repeat: repeat;
    background-size: 800px 800px;
    padding: 65px 0 60px 0;
    overflow: hidden;
    color: #FAFAF9;
}

.hero-background-texture[b-1m2ed1p97q] {
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    height: 100%;
    background-image: url('FONDOPROCESO.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left center;
    opacity: 1;
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: 1;
}

.hero-layout[b-1m2ed1p97q] {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 50px;
    align-items: center;
}

.proceso-intro-text[b-1m2ed1p97q] {
    padding-right: 20px;
}

.proceso-main-title[b-1m2ed1p97q] {
    font-family: 'Georgia', serif;
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    font-weight: 300;
    line-height: 1.15;
    margin-bottom: 20px;
}

.proceso-description[b-1m2ed1p97q] {
    font-size: 1.1rem;
    line-height: 1.75;
    color: #E5E7EB;
    max-width: 560px;
    margin-bottom: 30px;
}

.proceso-hero-features[b-1m2ed1p97q] {
    display: flex;
    align-items: stretch;
    gap: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 25px;
    max-width: 560px;
}

.hero-feature-item[b-1m2ed1p97q] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.hero-feature-item img[b-1m2ed1p97q] {
    height: 55px;
    width: auto;
    object-fit: contain;
    align-self: flex-start;
}

.hero-feature-info h6[b-1m2ed1p97q] {
    font-family: 'Georgia', serif;
    font-size: 0.85rem;
    font-weight: bold;
    color: #FAFAF9;
    line-height: 1.3;
    margin-bottom: 4px;
}

.hero-feature-info p[b-1m2ed1p97q] {
    font-size: 0.75rem;
    color: #8C847E;
    margin: 0;
}

.hero-feature-divider[b-1m2ed1p97q] {
    width: 1px;
    background-color: rgba(255, 255, 255, 0.15);
    margin: 5px 0;
}

.proceso-hero-image-wrapper[b-1m2ed1p97q] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.premium-image-frame[b-1m2ed1p97q] {
    width: 100%;
    border: 1px solid rgba(184, 154, 94, 0.25);
    border-radius: 16px;
    padding: 8px;
    overflow: hidden;
}

.hero-hands-img[b-1m2ed1p97q] {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}

.proceso-steps-section[b-1m2ed1p97q] {
    background-color: #E6DFD3;
    background-image: url('fondos/blanco.png');
    padding: 80px 0;
}

.proceso-center-header[b-1m2ed1p97q] {
    text-align: center;
    margin-bottom: 50px;
}

.proceso-subtitle-center[b-1m2ed1p97q] {
    font-family: 'Georgia', serif;
    font-size: 2.8rem;
    color: #2D100B;
    font-weight: 400;
    margin-top: 5px;
}

.timeline-proceso-horizontal[b-1m2ed1p97q] {
    position: relative;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 15px;
    margin-bottom: 40px;
    padding-top: 20px;
}

.timeline-linea-conector[b-1m2ed1p97q] {
    position: absolute;
    top: 76px;
    left: 5%;
    width: 90%;
    height: 1px;
    border-top: 1px dashed #A69682;
    z-index: 1;
}

.timeline-columna[b-1m2ed1p97q] {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.timeline-icono-top[b-1m2ed1p97q] {
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

.timeline-icono-top img[b-1m2ed1p97q] {
    height: 80px;
    width: auto;
    object-fit: contain;
}

.timeline-numero-circulo[b-1m2ed1p97q] {
    background-color: #1E1A16;
    color: #FFFFFF;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: bold;
    margin-bottom: 20px;
    box-shadow: 0 0 0 6px #E6DFD3;
}

.timeline-titulo[b-1m2ed1p97q] {
    font-family: 'Georgia', serif;
    color: #1E1A16;
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 10px;
    line-height: 1.2;
    min-height: 38px;
}

.timeline-texto[b-1m2ed1p97q] {
    font-size: 0.9rem;
    color: #4A443E;
    line-height: 1.5;
    padding: 0 5px;
    margin: 0;
}

.timeline-imagenes-grid[b-1m2ed1p97q] {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 12px;
    margin-top: 20px;
}

.timeline-foto-box[b-1m2ed1p97q] {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 4px;
    background-color: #D6CDBD;
}

.timeline-foto-box img[b-1m2ed1p97q] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================
   SECCIÓN TRANSPARENCIA FINAL
   ============================ */

/* ===================================================
   SECCIÓN TRANSPARENCIA — COPIA FIEL DEL MODELO HORIZONTAL
   =================================================== */
.transparencia-section[b-1m2ed1p97q] {
    background-color: #120C08;
    background-image: url('../fondos/topography.svg');
    background-repeat: repeat;
    background-size: 800px 800px;
    padding: 40px 0 !important;
    color: #FAFAF9;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    overflow: hidden;
}

.transparencia-layout-horizontal[b-1m2ed1p97q] {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 30px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
    /* Distancia perfecta entre los 3 bloques principales */
}

/* BLOQUE DE TÍTULO (IZQUIERDA) */
.transparencia-titulo-box[b-1m2ed1p97q] {
    flex-shrink: 0;
    min-width: 220px;
}

.transparencia-top-tag[b-1m2ed1p97q] {
    font-size: 0.7rem;
    letter-spacing: 1.5px;
    color: #B89A5E;
    font-weight: 600;
    margin-bottom: 6px;
    display: block;
}

.transparencia-heading[b-1m2ed1p97q] {
    font-family: 'Georgia', serif;
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 1.2;
    color: #FAFAF9;
    margin: 0;
}

.transparencia-heading span[b-1m2ed1p97q] {
    font-style: italic;
    color: #B89A5E;
}

/* BLOQUE DE CONTENIDO (CENTRO - HORIZONTAL) */
.transparencia-features-row[b-1m2ed1p97q] {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    flex-grow: 1;
    gap: 15px;
}

/* CADA ELEMENTO INDIVIDUAL */
.feature-item-horizontal[b-1m2ed1p97q] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.feature-item-horizontal img[b-1m2ed1p97q] {
    width: 80px;
    /* Iconos pequeños y finos */
    height: 80px;
    margin-bottom: 12px;
    object-fit: contain;
}

.feature-content h5[b-1m2ed1p97q] {
    font-family: 'Georgia', serif;
    font-size: 0.95rem;
    color: #B89A5E;
    /* Tono dorado elegante para los subtítulos */
    margin: 0 0 6px 0;
    font-weight: 400;
}

.feature-content p[b-1m2ed1p97q] {
    font-size: 0.88rem;
    color: #D1D5DB;
    line-height: 1.45;
    margin: 0;
}

/* LÍNEAS DIVISORIAS SUTILES */
.transparencia-divider[b-1m2ed1p97q] {
    width: 1px;
    background-color: rgba(184, 154, 94, 0.2);
    height: 90px;
    /* Cubre el alto de los textos perfectamente */
    flex-shrink: 0;
    align-self: center;
}

/* BANNER DE LA IMAGEN (DERECHA) */
.transparencia-imagen-box[b-1m2ed1p97q] {
    flex-shrink: 0;
    width: 320px;
    /* Ancho controlado para que actúe como banner de cierre */
    height: 130px;
    /* Obliga a la imagen a ser bajita y delgada */
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(184, 154, 94, 0.15);
}

.transparencia-imagen-box img[b-1m2ed1p97q] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* RESPONSIVE CONTROLADO */
@media (max-width: 1200px) {
    .transparencia-layout-horizontal[b-1m2ed1p97q] {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 40px;
    }

    .transparencia-titulo-box[b-1m2ed1p97q] {
        text-align: center;
    }

    .transparencia-features-row[b-1m2ed1p97q] {
        width: 100%;
    }

    .transparencia-imagen-box[b-1m2ed1p97q] {
        width: 100%;
        max-width: 500px;
        height: 180px;
    }
}

@media (max-width: 768px) {
    .transparencia-features-row[b-1m2ed1p97q] {
        flex-direction: column;
        align-items: center;
        gap: 25px;
    }

    .feature-item-horizontal[b-1m2ed1p97q] {
        align-items: center;
        text-align: center;
    }

    .transparencia-divider[b-1m2ed1p97q] {
        display: none;
    }
}

/* ===================================================
   SECCIÓN HISTORIAS — DESVANECIDO DIRECTO (SIN SIERRA)
   =================================================== */
.proceso-historias[b-1m2ed1p97q] {
    background-color: #120C08;
    padding: 0;
    overflow: hidden;
    width: 100%;
    position: relative;
}

.historias-layout-full[b-1m2ed1p97q] {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    min-height: 650px;
    width: 100%;
    position: relative;
}

/* Lado izquierdo con el color beige/papel */
.historias-left-side[b-1m2ed1p97q] {
    background-color: #F2E6D8;
    background-image: url('textura-papel.png');
    background-repeat: repeat;
    padding: 90px 80px 90px 10%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    z-index: 1;
}

/* Borramos el pseudo-elemento de la sierra por completo y creamos la transición suave */
.historias-left-side[b-1m2ed1p97q]::after {
    content: "";
    position: absolute;
    top: 0;
    right: -150px;
    /* Se extiende hacia la derecha para hacer el fade encima de la taza */
    width: 150px;
    height: 100%;
    z-index: 3;
    /* Degradado que va desde el color beige exacto hasta desaparecer en transparente */
    background: linear-gradient(to right, #F2E6D8 0%, rgba(242, 230, 216, 0.8) 30%, rgba(242, 230, 216, 0) 100%);
    pointer-events: none;
}

.historias-content-wrapper[b-1m2ed1p97q] {
    max-width: 600px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 25px;
    position: relative;
    z-index: 4;
}

.historias-heading[b-1m2ed1p97q] {
    font-family: 'Georgia', serif;
    font-size: 3.2rem;
    line-height: 1.15;
    color: #2D100B;
    font-weight: 400;
    margin: 0;
}

.historias-text[b-1m2ed1p97q] {
    font-size: 1rem;
    line-height: 1.6;
    color: #5a4636;
    margin: 0;
}

.historias-bullets-row[b-1m2ed1p97q] {
    display: flex;
    flex-direction: row !important;
    gap: 20px;
    border-top: 1px solid rgba(45, 16, 11, 0.15);
    padding-top: 30px;
    justify-content: space-between;
    width: 100%;
}

.bullet-item-horizontal[b-1m2ed1p97q] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
}

.bullet-item-horizontal img[b-1m2ed1p97q] {
    width: 55px;
    height: 55px;
    object-fit: contain;
}

.bullet-info h6[b-1m2ed1p97q] {
    font-size: 0.95rem;
    font-weight: bold;
    color: #2D100B;
    margin: 0 0 4px 0;
}

.bullet-info p[b-1m2ed1p97q] {
    font-size: 0.8rem;
    color: #6B6661;
    line-height: 1.4;
    margin: 0;
}

/* Lado derecho con la imagen de la taza */
.historias-right-bg-side[b-1m2ed1p97q] {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #120C08;
    z-index: 2;
}

.historias-right-bg-side[b-1m2ed1p97q]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('imagenes/taza.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* ===================================================
   FOOTER VALORES — SIN CAMBIOS
   =================================================== */
.valores-footer-bar[b-1m2ed1p97q] {
    background-color: #120C08;
    background-image: url('../fondos/topography.svg');
    background-repeat: repeat;
    background-size: 800px 800px;
    color: #FAFAF9;
    padding: 45px 0;
    width: 100%;
}

.valores-title[b-1m2ed1p97q] {
    font-size: 0.75rem;
    letter-spacing: 3px;
    color: #B89A5E;
    display: block;
    text-align: center;
    margin-bottom: 40px;
    font-weight: 600;
    text-transform: uppercase;
}

.valores-row-premium[b-1m2ed1p97q] {
    display: grid;
    grid-template-columns: 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr;
    gap: 15px;
    align-items: center;
    padding: 0 20px;
}

.valor-box[b-1m2ed1p97q] {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    text-align: left;
}

.valor-icon[b-1m2ed1p97q] {
    width: 62px;
    height: auto;
    object-fit: contain;
    flex-shrink: 0;
    margin-top: 2px;
}

.valor-text-content[b-1m2ed1p97q] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.valor-box h6[b-1m2ed1p97q] {
    font-family: 'Georgia', serif;
    font-size: 0.95rem;
    color: #FAFAF9;
    margin: 0;
    font-weight: 400;
}

.valor-box p[b-1m2ed1p97q] {
    font-size: 0.82rem;
    color: #D1D5DB;
    line-height: 1.45;
    margin: 0;
}

.valor-divider[b-1m2ed1p97q] {
    background-color: rgba(255, 255, 255, 0.12);
    width: 1px;
    height: 55px;
    align-self: center;
}

@media (max-width: 1400px) {
    .valores-row-premium[b-1m2ed1p97q] {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px 20px;
    }

    .valor-divider[b-1m2ed1p97q] {
        display: none;
    }
}

@media (max-width: 768px) {
    .valores-row-premium[b-1m2ed1p97q] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .valores-row-premium[b-1m2ed1p97q] {
        grid-template-columns: 1fr;
    }
}

/* ===================================================
   RESPONSIVE — SIN CAMBIOS ALTERADOS
   =================================================== */
@media (max-width: 1200px) {
    .timeline-proceso-horizontal[b-1m2ed1p97q] {
        grid-template-columns: repeat(4, 1fr);
        gap: 25px 15px;
    }

    .timeline-linea-conector[b-1m2ed1p97q] {
        display: none;
    }

    .timeline-imagenes-grid[b-1m2ed1p97q] {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 992px) {
    .hero-layout[b-1m2ed1p97q] {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .features-grid[b-1m2ed1p97q] {
        grid-template-columns: repeat(2, 1fr);
    }

    .feature-item:nth-child(2)[b-1m2ed1p97q] {
        border-right: none;
    }

    .historias-layout-full[b-1m2ed1p97q] {
        grid-template-columns: 1fr;
    }

    .historias-left-side[b-1m2ed1p97q] {
        background-image: url('imagenes/camp.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        position: relative;
        padding: 45px 20px !important;
    }

    .historias-left-side[b-1m2ed1p97q]::after {
        display: none;
    }

    .historias-content-wrapper[b-1m2ed1p97q] {
        align-items: center;
    }

    .historias-bullets-row[b-1m2ed1p97q] {
        flex-direction: column !important;
        align-items: center;
        gap: 30px;
    }

    .bullet-item-horizontal[b-1m2ed1p97q] {
        align-items: center;
        text-align: center;
    }

    .historias-right-bg-side[b-1m2ed1p97q] {
        height: 380px;
        /* Se adapta el desvanecido en móviles para que vaya de arriba a abajo en bloque apilado */
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.4) 12%, black 35%);
        mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.4) 12%, black 35%);
    }

    .proceso-intro-text[b-1m2ed1p97q] {
        padding-right: 0;
    }

    .hero-feature-item[b-1m2ed1p97q] {
        align-items: center;
    }

    .hero-feature-divider[b-1m2ed1p97q] {
        width: 100%;
        height: 1px;
        margin: 10px 0;
    }

    .proceso-hero-image-wrapper[b-1m2ed1p97q] {
        justify-content: center;
        margin-top: 40px;
    }

    .valores-row[b-1m2ed1p97q] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {

    .proceso-hero-features[b-1m2ed1p97q] {
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px !important;
        max-width: 100% !important;
    }

    .hero-feature-item[b-1m2ed1p97q] {
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
    }

    .hero-feature-item img[b-1m2ed1p97q] {
        align-self: center !important;
    }

    .hero-feature-divider[b-1m2ed1p97q] {
        width: 100% !important;
        height: 1px !important;
        margin: 8px 0 !important;
        background-color: rgba(255, 255, 255, 0.15) !important;
    }

    .timeline-proceso-horizontal[b-1m2ed1p97q],
    .timeline-imagenes-grid[b-1m2ed1p97q] {
        grid-template-columns: repeat(2, 1fr);
    }

    .features-grid[b-1m2ed1p97q] {
        grid-template-columns: 1fr;
    }

    .feature-item[b-1m2ed1p97q] {
        border-right: none !important;
        border-bottom: 1px solid rgba(184, 154, 94, 0.1);
        padding-bottom: 20px;
    }

    .feature-item:last-child[b-1m2ed1p97q] {
        border-bottom: none;
    }
}

@media (max-width: 480px) {

    .timeline-proceso-horizontal[b-1m2ed1p97q],
    .timeline-imagenes-grid[b-1m2ed1p97q],
    .valores-row[b-1m2ed1p97q] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/OrganizacionFamycafe.razor.rz.scp.css */
/* Paleta de Colores Café del Diseño */
:root[b-bbe82whni6] {
    /* 1. Fondos principales */
    --fc-bg-main: #EFE6DC;
    /* El fondo beige general de toda la página */
    --fc-bg-container: #F6EEE5;
    /* Un tono sutilmente más claro para el contenedor principal */

    /* 2. Bloques y Tarjetas (Sección Estadísticas y Productores) */
    --fc-card-bg: #EAE0D3;
    /* El tono arena/beige medio de las tarjetas y el panel de iconos */
    --fc-card-hover: #DFD2C2;
    /* Un color un poco más oscuro para cuando pasen el mouse (Hover) */

    /* 3. Textos y Tipografías */
    --fc-text-title: #2A190E;
    /* Café oscuro profundo para títulos principales */
    --fc-text-body: #4A3B32;
    /* Café medio para las descripciones y textos largos */
    --fc-text-muted: #7A695D;
    /* Café claro opaco para subtítulos */

    /* 4. Detalles de Acento */
    --fc-accent-gold: #966946;
    /* El color marrón/dorado icónico de los iconos y detalles */
    --fc-border-light: #DDD0C1;
    /* Líneas divisorias sutiles */
}

*[b-bbe82whni6] {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body[b-bbe82whni6] {
    background-color: var(--fc-bg-main);
    /* Corregido: Ahora usa la variable correcta */
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh;
}

/* Contenedor principal */
.famycafe-container[b-bbe82whni6] {
    color: var(--fc-text-body);
    padding: 20px;
    padding-left: 150px;
    padding-right: 150px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    /* 🌟 CAMBIO AQUÍ: Quitamos la imagen y ponemos el color exacto de la foto 🌟 */
    background-color: #F5EFE6;
}

/* Breadcrumb */
.fc-breadcrumb[b-bbe82whni6] {
    font-size: 0.9rem;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.fc-breadcrumb a[b-bbe82whni6] {
    color: var(--fc-text-muted);
    /* Integrado a la paleta */
    text-decoration: none;
    font-weight: 500;
}

.fc-breadcrumb .separator[b-bbe82whni6] {
    color: var(--fc-text-muted);
}

.fc-breadcrumb .active[b-bbe82whni6] {
    color: var(--fc-text-title);
    /* Integrado a la paleta */
    font-weight: bold;
}

/* Hero Section */
.fc-hero[b-bbe82whni6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    margin-bottom: 40px;

    position: relative;
    overflow: visible;
    /* 🔥 IMPORTANTE (antes estaba hidden) */
}

.fc-hero[b-bbe82whni6]::after {
    content: "";
    position: absolute;

    top: -100px;
    right: -200px;
    /* 🔥 MÁS AFUERA */

    width: 650px;
    /* 🔥 tamaño fijo (NO %) */
    height: 520px;

    background: #3E4A36;

    border-top-left-radius: 80px;
    border-bottom-left-radius: 80px;

    z-index: 0;
}

.fc-hero-info[b-bbe82whni6] {
    flex: 1;
    z-index: 2;
}


.fc-main-title[b-bbe82whni6] {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--fc-text-title);
    /* Asegura el color del título de la marca */
    margin: 0 0 5px 0;
    letter-spacing: 1px;
}

.fc-leaf-icon[b-bbe82whni6] {
    margin-bottom: 20px;
}

.fc-lead[b-bbe82whni6] {
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--fc-text-title);
    margin-bottom: 20px;
}

.fc-body-text[b-bbe82whni6] {
    font-size: 1rem;
    color: var(--fc-text-body);
    line-height: 1.6;
}

.fc-hero-image[b-bbe82whni6] {
    flex: 1;
    height: 420px;
    /* 🔥 más grande */
    position: relative;
    z-index: 2;

    margin-right: 40px;
    /* 🔥 la separa del borde */
}

.fc-hero-image img[b-bbe82whni6] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 24px;

    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
    /* 🔥 PRO */
}

/* Panel de Estadísticas */
.fc-stats-panel[b-bbe82whni6] {
    display: flex;
    background-color: #3A120D;
    background-image: url('../fondos/topography.svg');
    background-repeat: repeat;
    background-size: 800px 800px;
    border: 1px solid var(--fc-border-light);
    border-radius: 16px;
    padding: 30px 15px;
    margin-bottom: 50px;
    justify-content: space-around;
    box-shadow: 0 4px 12px rgba(74, 59, 50, 0.05);
}

.fc-stat-item[b-bbe82whni6] {
    flex: 1;
    text-align: center;
    position: relative;
}

/* Aplica la línea divisoria a todos los bloques MENOS al último */


.fc-stat-item:not(:last-child)[b-bbe82whni6]::after {
    content: "";
    position: absolute;
    right: 0;
    top: 15%;
    height: 70%;
    width: 5px;
    border-right: 1px solid #966946;
    /* MÁS GRUESA */
}

.fc-stat-number[b-bbe82whni6] {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: #ffffff;
    /* BLANCO */
    margin: 0 0 4px 0;
}

.fc-stat-label[b-bbe82whni6] {
    font-size: 0.85rem;
    color: #ffffff;
    /* BLANCO */
    margin: 0;
}

/* Título de la Sección de Productores */
.fc-section-title-bar[b-bbe82whni6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.fc-section-title-bar h2[b-bbe82whni6] {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--fc-text-title);
}

.fc-view-all[b-bbe82whni6] {
    color: var(--fc-accent-gold);
    /* Cambiado al dorado/marrón de acento */
    text-decoration: none;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}

/* Grid de Productores */
.fc-productores-grid[b-bbe82whni6] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

/* Estilo Base de las Tarjetas */
.fc-producer-card[b-bbe82whni6] {
    background-color: #F2E9DA;
    /* Color arena bien clarito y sólido para que resalte la info */
    border: 1px solid rgba(150, 105, 70, 0.15);
    /* Borde sutil corporativo */
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 12px;
    /* Añade espacio interno para que el contenido no toque los bordes */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* Efecto Hover para darle dinamismo a las tarjetas */
.fc-producer-card:hover[b-bbe82whni6] {
    background-color: #F2E9DA;
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(74, 59, 50, 0.1);
}

.fc-card-img[b-bbe82whni6] {
    width: 100%;
    height: 200px;
    overflow: hidden;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}

.fc-card-img img[b-bbe82whni6] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.fc-card-content[b-bbe82whni6] {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 12px 4px 4px 4px;
    /* Espaciado limpio */
}

.fc-card-content h3[b-bbe82whni6] {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 6px 0;
    color: var(--fc-text-title);
}

.fc-finca[b-bbe82whni6] {
    font-size: 0.85rem;
    color: var(--fc-text-body);
    margin: 0 0 2px 0;
}

.fc-location[b-bbe82whni6] {
    font-size: 0.85rem;
    color: var(--fc-text-muted);
    margin: 0 0 16px 0;
}

/* Botones dentro de las Tarjetas */
.fc-btn-profile[b-bbe82whni6] {
    display: block;
    text-align: center;
    background-color: #0F0F0F;
    /* Color café con leche clarito del mockup */
    color: #966946;
    /* DORADO BRAND BOOK */
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px;
    border-radius: 10px;
    margin-top: auto;
    /* Empuja el botón siempre al fondo de la tarjeta */
    transition: background-color 0.2s;
}

.fc-btn-profile:hover[b-bbe82whni6] {
    background-color: var(--fc-accent-gold);
    color: #ffffff;
}

/* Separadores */
.separador-contenedor[b-bbe82whni6] {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 10px;
    margin-bottom: 25px;
    max-width: 450px;
}

.icono-hoja[b-bbe82whni6] {
    width: 120px;
    height: auto;
}

.linea-dorada[b-bbe82whni6] {
    width: 300px;
    /* Qué tan larga quieren que sea la línea antes de desaparecer */
    height: 2px;
    /* Grosor fino, tal como se ve en la imagen */

    /* El truco: Va desde el dorado hasta transparente (rgba con opacidad 0) */
    background: linear-gradient(to right, #c1923f, rgba(193, 146, 63, 0));
}

/* Tarjeta especial "Más productores" */
.fc-more-card[b-bbe82whni6] {
    background-color: #F2E9DA;
    /* Fondo más oscuro como el del diseño */
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.fc-more-content[b-bbe82whni6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    text-align: center;
}

.fc-user-icon[b-bbe82whni6] {
    margin-bottom: 10px;
}

.fc-more-content p[b-bbe82whni6] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--fc-text-body);
    margin: 0 0 20px 0;
}

.fc-btn-all[b-bbe82whni6] {
    width: 90%;
}

.contenido-texto[b-bbe82whni6] {
    max-width: 450px;
}

.texto-descripcion[b-bbe82whni6] {
    font-size: 16px;
    font-weight: normal;
    line-height: 1.6;
    color: var(--fc-text-body);
    /* Ahora usa el color corporativo en vez de un gris genérico */
    margin-bottom: 20px;
}

/* Iconos de Estadísticas */
.fc-stat-icon[b-bbe82whni6] {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
}

.fc-icon-img[b-bbe82whni6] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Aplica la línea divisoria a todos los bloques MENOS al último */
.fc-stat-item:not(:last-child)[b-bbe82whni6] {
    border-right: 1px solid rgba(74, 59, 50, 0.15);
    /* Línea sutil usando el tono de su sombra */
}

/* Responsive para pantallas medianas y pequeñas */
@media (max-width: 1100px) {
    .famycafe-container[b-bbe82whni6] {
        padding-left: 40px;
        /* Evita que se vea muy estrujado en pantallas medianas */
        padding-right: 40px;
    }

    .fc-productores-grid[b-bbe82whni6] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .famycafe-container[b-bbe82whni6] {
        padding-left: 20px;
        padding-right: 20px;
    }

    .fc-hero[b-bbe82whni6] {
        flex-direction: column;
    }

    .fc-stats-panel[b-bbe82whni6] {
        flex-direction: column;
        gap: 20px;
    }

    .fc-stat-item:not(:last-child)[b-bbe82whni6]::after {
        display: none;
    }

    .fc-productores-grid[b-bbe82whni6] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .fc-productores-grid[b-bbe82whni6] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/OrganizacionTresNevados.razor.rz.scp.css */
/* Paleta de Colores Café del Diseño */
:root[b-ob7svgout9] {
    /* 1. Fondos principales */
    --tn-bg-main: #EFE6DC;
    /* El fondo beige general de toda la página */
    --tn-bg-container: #F6EEE5;
    /* Un tono sutilmente más claro para el contenedor principal */

    /* 2. Bloques y Tarjetas (Sección Estadísticas y Productores) */
    --tn-card-bg: #EAE0D3;
    /* El tono arena/beige medio de las tarjetas y el panel de iconos */
    --tn-card-hover: #DFD2C2;
    /* Un color un poco más oscuro para cuando pasen el mouse (Hover) */

    /* 3. Textos y Tipografías */
    --tn-text-title: #2A190E;
    /* Café oscuro profundo para títulos principales */
    --tn-text-body: #4A3B32;
    /* Café medio para las descripciones y textos largos */
    --tn-text-muted: #7A695D;
    /* Café claro opaco para subtítulos */

    /* 4. Detalles de Acento */
    --tn-accent-gold: #966946;
    /* El color marrón/dorado icónico de los iconos y detalles */
    --tn-border-light: #DDD0C1;
    /* Líneas divisorias sutiles */
}

*[b-ob7svgout9] {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body[b-ob7svgout9] {
    background-color: var(--tn-bg-main);
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh;
}

/* Contenedor principal */
.tresnevados-container[b-ob7svgout9] {
    color: var(--tn-text-body);
    padding: 20px;
    padding-left: 150px;
    padding-right: 150px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #F5EFE6;
}

/* Breadcrumb */
.tn-breadcrumb[b-ob7svgout9] {
    font-size: 0.9rem;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tn-breadcrumb a[b-ob7svgout9] {
    color: var(--tn-text-muted);
    text-decoration: none;
    font-weight: 500;
}

.tn-breadcrumb .separator[b-ob7svgout9] {
    color: var(--tn-text-muted);
}

.tn-breadcrumb .active[b-ob7svgout9] {
    color: var(--tn-text-title);
    font-weight: bold;
}

/* Hero Section */
.tn-hero[b-ob7svgout9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    margin-bottom: 40px;

    position: relative;
    overflow: visible;
}

.tn-hero[b-ob7svgout9]::after {
    content: "";
    position: absolute;

    top: -100px;
    right: -200px;

    width: 650px;
    height: 520px;

    background: #3E4A36;

    border-top-left-radius: 80px;
    border-bottom-left-radius: 80px;

    z-index: 0;
}

.tn-hero-info[b-ob7svgout9] {
    flex: 1;
    z-index: 2;
}

.tn-main-title[b-ob7svgout9] {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--tn-text-title);
    margin: 0 0 5px 0;
    letter-spacing: 1px;
}

.tn-leaf-icon[b-ob7svgout9] {
    margin-bottom: 20px;
}

.tn-lead[b-ob7svgout9] {
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--tn-text-title);
    margin-bottom: 20px;
}

.tn-body-text[b-ob7svgout9] {
    font-size: 1rem;
    color: var(--tn-text-body);
    line-height: 1.6;
}

.tn-hero-image[b-ob7svgout9] {
    flex: 1;
    height: 420px;
    position: relative;
    z-index: 2;
    margin-right: 40px;
}

.tn-hero-image img[b-ob7svgout9] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 24px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
}

/* Panel de Estadísticas */
.tn-stats-panel[b-ob7svgout9] {
    display: flex;
    background-color: #3A120D;
    background-image: url('../fondos/topography.svg');
    background-repeat: repeat;
    background-size: 800px 800px;
    border: 1px solid var(--tn-border-light);
    border-radius: 16px;
    padding: 30px 15px;
    margin-bottom: 50px;
    justify-content: space-around;
    box-shadow: 0 4px 12px rgba(74, 59, 50, 0.05);
}

.tn-stat-item[b-ob7svgout9] {
    flex: 1;
    text-align: center;
    position: relative;
}

/* Línea divisoria */
.tn-stat-item:not(:last-child)[b-ob7svgout9]::after {
    content: "";
    position: absolute;
    right: 0;
    top: 15%;
    height: 70%;
    width: 5px;
    border-right: 1px solid #966946;
    /* MÁS GRUESA */
}

.tn-stat-number[b-ob7svgout9] {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 4px 0;
}

.tn-stat-label[b-ob7svgout9] {
    font-size: 0.85rem;
    color: #ffffff;
    margin: 0;
}

/* Iconos de Estadísticas */
.tn-stat-icon[b-ob7svgout9] {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
}

.tn-icon-img[b-ob7svgout9] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Título de la Sección de Productores */
.tn-section-title-bar[b-ob7svgout9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.tn-section-title-bar h2[b-ob7svgout9] {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--tn-text-title);
}

.tn-view-all[b-ob7svgout9] {
    color: var(--tn-accent-gold);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}

/* Grid de Productores */
.tn-productores-grid[b-ob7svgout9] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

/* Estilo Base de las Tarjetas */
.tn-producer-card[b-ob7svgout9] {
    background-color: #F2E9DA;
    border: 1px solid rgba(150, 105, 70, 0.15);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.tn-producer-card:hover[b-ob7svgout9] {
    background-color: #F2E9DA;
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(74, 59, 50, 0.1);
}

.tn-card-img[b-ob7svgout9] {
    width: 100%;
    height: 200px;
    overflow: hidden;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}

.tn-card-img img[b-ob7svgout9] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.tn-card-content[b-ob7svgout9] {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 12px 4px 4px 4px;
}

.tn-card-content h3[b-ob7svgout9] {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 6px 0;
    color: var(--tn-text-title);
}

.tn-finca[b-ob7svgout9] {
    font-size: 0.85rem;
    color: var(--tn-text-body);
    margin: 0 0 2px 0;
}

.tn-location[b-ob7svgout9] {
    font-size: 0.85rem;
    color: var(--tn-text-muted);
    margin: 0 0 16px 0;
}

/* Botones dentro de las Tarjetas */
.tn-btn-profile[b-ob7svgout9] {
    display: block;
    text-align: center;
    background-color: #0F0F0F;
    color: #966946;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px;
    border-radius: 10px;
    margin-top: auto;
    transition: background-color 0.2s;
}

.tn-btn-profile:hover[b-ob7svgout9] {
    background-color: var(--tn-accent-gold);
    color: #ffffff;
}

/* Tarjeta especial "Más productores" */
.tn-more-card[b-ob7svgout9] {
    background-color: #F2E9DA;
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.tn-more-content[b-ob7svgout9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    text-align: center;
}

.tn-user-icon[b-ob7svgout9] {
    margin-bottom: 10px;
}

.tn-more-content p[b-ob7svgout9] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--tn-text-body);
    margin: 0 0 20px 0;
}

.tn-btn-all[b-ob7svgout9] {
    width: 90%;
}

/* Separadores */
.separador-contenedor[b-ob7svgout9] {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 10px;
    margin-bottom: 25px;
    max-width: 450px;
}

.icono-hoja[b-ob7svgout9] {
    width: 120px;
    height: auto;
}

.linea-dorada[b-ob7svgout9] {
    width: 300px;
    height: 2px;
    background: linear-gradient(to right, #c1923f, rgba(193, 146, 63, 0));
}

/* Responsive */
@media (max-width: 1100px) {
    .tresnevados-container[b-ob7svgout9] {
        padding-left: 40px;
        padding-right: 40px;
    }

    .tn-productores-grid[b-ob7svgout9] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .tresnevados-container[b-ob7svgout9] {
        padding-left: 20px;
        padding-right: 20px;
    }

    .tn-hero[b-ob7svgout9] {
        flex-direction: column;
    }

    .tn-stats-panel[b-ob7svgout9] {
        flex-direction: column;
        gap: 20px;
    }

    .tn-stat-item:not(:last-child)[b-ob7svgout9]::after {
        display: none;
    }

    .tn-productores-grid[b-ob7svgout9] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .tn-productores-grid[b-ob7svgout9] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/PerfilProductor.razor.rz.scp.css */
/* ==========================================================================
   ESTILOS GENERALES
   ========================================================================== */
.perfil-container[b-24bv15nf1i] {
    max-width: none;
    margin: 0 auto;
    padding: 20px;
    padding-left:80px;
    padding-right: 80px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #2b1a0d; /* Marrón oscuro casi negro */
    background-color: #e8dfd3; /* Crema muy claro */
}

/* ==========================================================================
   HERO SECTION — Imagen de fondo + degradado + texto encima
   ========================================================================== */

.perfil-hero[b-24bv15nf1i] {
    position: relative;
    width: 100%;
    height: 400px;
    border-radius: 22px;

    background-size: 100% 100%; /* ← LLENA TODO */
    background-position: center top; /* ← NO CORTA LA IMAGEN */
    background-repeat: no-repeat;

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

    padding: 40px 60px;
    box-shadow: 0 25px 60px rgba(0,0,0,0.35);
    overflow: hidden;
}


/* Breadcrumb */
.breadcrumb[b-24bv15nf1i] {
    position: absolute;
    top: 30px;
    left: 60px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 10;
}

.breadcrumb a[b-24bv15nf1i] {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-weight: 500;
}

.breadcrumb .separator[b-24bv15nf1i] {
    color: rgba(255, 255, 255, 0.5);
}

.breadcrumb .active[b-24bv15nf1i] {
    color: #dfba9d;
}

/* Contenedor del texto del productor */
.perfil-hero-info[b-24bv15nf1i] {
    z-index: 10;
    max-width: 600px;
}

/* Nombre del productor */
.perfil-nombre[b-24bv15nf1i] {
    font-size: 3.4rem;
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 10px 0;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.6);
}

/* Ubicación */
.perfil-ubicacion[b-24bv15nf1i] {
    font-size: 1.2rem;
    color: #dfba9d;
    margin-bottom: 15px;
    font-weight: 600;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.6);
}

/* Frase */
.perfil-frase[b-24bv15nf1i] {
    font-size: 1.3rem;
    font-style: italic;
    color: #f3ece4;
    line-height: 1.6;
    border-left: 4px solid #d4a373;
    padding-left: 18px;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.6);
}


/* ==========================================================================
   2. PESTAÑAS DE NAVEGACIÓN (Tabs)
   ========================================================================== */
.perfil-tabs[b-24bv15nf1i] {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    overflow-x: auto; /* Scroll horizontal en pantallas pequeñas */
    padding-bottom: 5px;
    margin-top: 25px;
}

.perfil-tabs[b-24bv15nf1i]::-webkit-scrollbar {
    height: 5px;
}

.perfil-tabs[b-24bv15nf1i]::-webkit-scrollbar-thumb {
    background-color: #ede5da;
    border-radius: 10px;
}

.perfil-tab[b-24bv15nf1i] {
    padding: 12px 24px;
    border: none;
    background-color: #ede5da;
    color: #5c3d2e;
    font-weight: 600;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.perfil-tab:hover[b-24bv15nf1i] {
    background-color: #d8cca3;
}

.perfil-tab-activo[b-24bv15nf1i] {
    background-color: #5c3d2e;
    color: #ffffff;
}

/* ==========================================================================
   3. SECCIÓN DE CONTENIDO (Historia + Ficha Técnica Integrada)
   ========================================================================== */
.perfil-contenido[b-24bv15nf1i] {
    display: grid;
    grid-template-columns: 1.2fr 1fr; /* Divide la sección en dos */
    gap: 40px;
    margin-bottom: 40px;
    align-items: start;
}

/* Columna Izquierda: Historia */
.perfil-historia[b-24bv15nf1i] {
    background: #ffffff;
    padding: 35px;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.perfil-historia h2[b-24bv15nf1i] {
    font-size: 2rem;
    font-family: 'Georgia', serif;
    color: #3d2514;
    margin: 0;
}

.perfil-historia p[b-24bv15nf1i] {
    line-height: 1.8;
    color: #4a3b32;
    font-size: 1.05rem;
    margin: 0;
}

/* Botón "Leer más" */
.btn-leer-mas[b-24bv15nf1i] {
    align-self: flex-start;
    background-color: #241103; /* Marrón casi negro */
    color: #ffffff;
    padding: 12px 28px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: background-color 0.3s ease;
}

.btn-leer-mas:hover[b-24bv15nf1i] {
    background-color: #3d2314;
}

/* Columna Derecha: Tarjeta de Ficha Técnica */
.perfil-ficha[b-24bv15nf1i] {
    background-color: #d9c7b3; /* Fondo cálido característico */
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.ficha-grid[b-24bv15nf1i] {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Rejilla de 2x2 */
}

/* Celdas individuales de la Ficha */
.ficha-item[b-24bv15nf1i] {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 25px 15px;
}

.icon-placeholder[b-24bv15nf1i] {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.icon-placeholder img[b-24bv15nf1i] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


/* Textos informativos de la Ficha */
.ficha-text[b-24bv15nf1i] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ficha-valor[b-24bv15nf1i] {
    font-weight: bold;
    color: #2c1609;
    font-size: 1.15rem;
}

.ficha-label[b-24bv15nf1i] {
    color: #5c4a3c;
    font-size: 0.85rem;
    text-transform: capitalize;
}

/* Bordes Divisores de la Cuadrícula 2x2 */
.border-r[b-24bv15nf1i] {
    border-right: 1px solid rgba(44, 22, 9, 0.15);
}

.border-b[b-24bv15nf1i] {
    border-bottom: 1px solid rgba(44, 22, 9, 0.15);
}
/* ==========================================================================
   4. GALERÍA DE IMÁGENES (CARRUSEL ADAPTABLE)
   ========================================================================== */

/* Contenedor principal: ahora se expande para alinearse con el diseño superior */
.galeria-carrusel-wrapper[b-24bv15nf1i] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: 1200px !important; /* Le damos espacio suficiente */
    margin: 30px auto 0 auto !important;
}

/* Tira horizontal de fotos */
.perfil-galeria[b-24bv15nf1i] {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 20px !important;
    overflow-x: auto !important;
    scroll-behavior: smooth !important;
    scrollbar-width: none !important;
    padding: 10px 5px !important;
    /* Ajustamos el ancho máximo para que quepan completas 4 fotos de 220px + espacios */
    max-width: 960px !important; 
}

.perfil-galeria[b-24bv15nf1i]::-webkit-scrollbar {
    display: none !important;
}

/* Tarjetas individuales */
.perfil-galeria-item[b-24bv15nf1i] {
    flex: 0 0 220px !important; /* Mantiene el tamaño exacto sin recortar tarjetas */
    height: 180px !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
    background-color: #d9c7b3 !important;
}

.perfil-galeria-item img[b-24bv15nf1i] {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.4s ease !important;
}

.perfil-galeria-item img:hover[b-24bv15nf1i] {
    transform: scale(1.08) !important;
}

/* Botones de las flechas */
.btn-carrusel[b-24bv15nf1i] {
    background-color: #241103 !important;
    color: #ffffff !important;
    border: none !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    font-size: 26px !important;
    font-weight: bold !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
    transition: transform 0.2s ease, background-color 0.2s ease, opacity 0.2s ease !important;
}

.btn-carrusel:hover[b-24bv15nf1i] {
    background-color: #3d2314 !important;
    transform: scale(1.08) !important;
}

.btn-carrusel:active[b-24bv15nf1i] {
    transform: scale(0.95) !important;
}

/* ==========================================================================
   ESTILOS GENERALES
   ========================================================================== */
.perfil-container[b-24bv15nf1i] {
    max-width: none;
    margin: 0 auto;
    padding: 20px;
    padding-left:80px;
    padding-right: 80px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #2b1a0d; /* Marrón oscuro casi negro */
    background-color: #e8dfd3; /* Crema muy claro */
}

/* ==========================================================================
   HERO SECTION — Imagen de fondo + degradado + texto encima
   ========================================================================== */

.perfil-hero[b-24bv15nf1i] {
    position: relative;
    width: 100%;
    height: 400px;
    border-radius: 22px;

    background-size: 100% 100%; /* ← LLENA TODO */
    background-position: center top; /* ← NO CORTA LA IMAGEN */
    background-repeat: no-repeat;

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

    padding: 40px 60px;
    box-shadow: 0 25px 60px rgba(0,0,0,0.35);
    overflow: hidden;
}


/* Breadcrumb */
.breadcrumb[b-24bv15nf1i] {
    position: absolute;
    top: 30px;
    left: 60px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 10;
}

.breadcrumb a[b-24bv15nf1i] {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-weight: 500;
}

.breadcrumb .separator[b-24bv15nf1i] {
    color: rgba(255, 255, 255, 0.5);
}

.breadcrumb .active[b-24bv15nf1i] {
    color: #dfba9d;
}

/* Contenedor del texto del productor */
.perfil-hero-info[b-24bv15nf1i] {
    z-index: 10;
    max-width: 600px;
}

/* Nombre del productor */
.perfil-nombre[b-24bv15nf1i] {
    font-size: 3.4rem;
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 10px 0;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.6);
}

/* Ubicación */
.perfil-ubicacion[b-24bv15nf1i] {
    font-size: 1.2rem;
    color: #dfba9d;
    margin-bottom: 15px;
    font-weight: 600;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.6);
}

/* Frase */
.perfil-frase[b-24bv15nf1i] {
    font-size: 1.3rem;
    font-style: italic;
    color: #f3ece4;
    line-height: 1.6;
    border-left: 4px solid #d4a373;
    padding-left: 18px;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.6);
}


/* ==========================================================================
   2. PESTAÑAS DE NAVEGACIÓN (Tabs)
   ========================================================================== */
.perfil-tabs[b-24bv15nf1i] {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    overflow-x: auto; /* Scroll horizontal en pantallas pequeñas */
    padding-bottom: 5px;
    margin-top: 25px;
}

.perfil-tabs[b-24bv15nf1i]::-webkit-scrollbar {
    height: 5px;
}

.perfil-tabs[b-24bv15nf1i]::-webkit-scrollbar-thumb {
    background-color: #ede5da;
    border-radius: 10px;
}

.perfil-tab[b-24bv15nf1i] {
    padding: 12px 24px;
    border: none;
    background-color: #ede5da;
    color: #5c3d2e;
    font-weight: 600;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.perfil-tab:hover[b-24bv15nf1i] {
    background-color: #d8cca3;
}

.perfil-tab-activo[b-24bv15nf1i] {
    background-color: #5c3d2e;
    color: #ffffff;
}

/* ==========================================================================
   3. SECCIÓN DE CONTENIDO (Historia + Ficha Técnica Integrada)
   ========================================================================== */
.perfil-contenido[b-24bv15nf1i] {
    display: grid;
    grid-template-columns: 1.2fr 1fr; /* Divide la sección en dos */
    gap: 40px;
    margin-bottom: 40px;
    align-items: start;
}

/* Columna Izquierda: Historia */
.perfil-historia[b-24bv15nf1i] {
    background: #ffffff;
    padding: 35px;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.perfil-historia h2[b-24bv15nf1i] {
    font-size: 2rem;
    font-family: 'Georgia', serif;
    color: #3d2514;
    margin: 0;
}

.perfil-historia p[b-24bv15nf1i] {
    line-height: 1.8;
    color: #4a3b32;
    font-size: 1.05rem;
    margin: 0;
}

/* Botón "Leer más" */
.btn-leer-mas[b-24bv15nf1i] {
    align-self: flex-start;
    background-color: #241103; /* Marrón casi negro */
    color: #ffffff;
    padding: 12px 28px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: background-color 0.3s ease;
}

.btn-leer-mas:hover[b-24bv15nf1i] {
    background-color: #3d2314;
}

/* Columna Derecha: Tarjeta de Ficha Técnica */
.perfil-ficha[b-24bv15nf1i] {
    background-color: #d9c7b3; /* Fondo cálido característico */
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.ficha-grid[b-24bv15nf1i] {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Rejilla de 2x2 */
}

/* Celdas individuales de la Ficha */
.ficha-item[b-24bv15nf1i] {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 25px 15px;
}

.icon-placeholder[b-24bv15nf1i] {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.icon-placeholder img[b-24bv15nf1i] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


/* Textos informativos de la Ficha */
.ficha-text[b-24bv15nf1i] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ficha-valor[b-24bv15nf1i] {
    font-weight: bold;
    color: #2c1609;
    font-size: 1.15rem;
}

.ficha-label[b-24bv15nf1i] {
    color: #5c4a3c;
    font-size: 0.85rem;
    text-transform: capitalize;
}

/* Bordes Divisores de la Cuadrícula 2x2 */
.border-r[b-24bv15nf1i] {
    border-right: 1px solid rgba(44, 22, 9, 0.15);
}

.border-b[b-24bv15nf1i] {
    border-bottom: 1px solid rgba(44, 22, 9, 0.15);
}

/* ==========================================================================
   4. GALERÍA DE IMÁGENES
   ========================================================================== */
.perfil-galeria[b-24bv15nf1i] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 15px;
    margin-top: 30px;
}

.perfil-galeria-item[b-24bv15nf1i] {
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    height: 180px;
}

.perfil-galeria-item img[b-24bv15nf1i] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.perfil-galeria-item img:hover[b-24bv15nf1i] {
    transform: scale(1.08); /* Zoom interactivo al pasar el mouse */
}

/* ==========================================================================
   SECCIÓN FINCA — ANCHO COMPLETO ALINEADO AL HERO
   ========================================================================== */

.perfil-finca[b-24bv15nf1i] {
    background-color: #fdfbf7; 
    border-radius: 24px;

    /* PADDING IGUAL AL HERO */
    padding: 45px 50px;
    padding-left: 80px;
    padding-right: 80px;

    width: 100%;
    max-width: none;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    gap: 40px;
    box-shadow: 0 10px 30px rgba(61, 37, 20, 0.04);
    box-sizing: border-box;
}

/* PARTE SUPERIOR: Grid interno de la tarjeta (Texto vs Imagen) */
.finca-top-grid[b-24bv15nf1i] {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 50px;
    align-items: stretch;
    width: 100%;
}

.finca-texto[b-24bv15nf1i] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.finca-texto h2[b-24bv15nf1i] {
    font-size: 2.6rem;
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    color: #3d2514;
    margin: 0 0 15px 0;
}

.finca-texto p[b-24bv15nf1i] {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #4a3b32;
    margin: 0 0 25px 0;
}

/* DATOS HORIZONTALES */
.finca-datos[b-24bv15nf1i] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    border-top: 1px solid #ebdccb;
    padding-top: 25px;
    margin-top: auto;
}

.dato-item[b-24bv15nf1i] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.dato-icono[b-24bv15nf1i] {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5efe6;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}

.dato-textos[b-24bv15nf1i] {
    display: flex;
    flex-direction: column;
}

.dato-valor[b-24bv15nf1i] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #3d2514;
}

.dato-label[b-24bv15nf1i] {
    font-size: 0.85rem;
    color: #7a6f67;
}

/* IMAGEN DE LA FINCA */
.finca-imagen[b-24bv15nf1i] {
    width: 100%;
    height: 100%;
    min-height: 350px;
}

.finca-imagen img[b-24bv15nf1i] {
    width: 100%;
    height: 100%;
    min-height: 350px;
    max-height: 400px;
    border-radius: 20px;
    object-fit: cover;
    box-shadow: 0 10px 25px rgba(61, 37, 20, 0.08);
}

/* BANNER INFERIOR */
.finca-bottom-banner[b-24bv15nf1i] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f5efe6;
    padding: 24px 35px;
    border-radius: 18px;
    gap: 30px;
    width: 100%;
    box-sizing: border-box;
}

.banner-izq[b-24bv15nf1i] {
    display: flex;
    align-items: center;
    gap: 20px;
}

.banner-icono[b-24bv15nf1i] {
    background-color: #fff;
    border: 1px solid #ebdccb;
    border-radius: 50%;
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.finca-extra[b-24bv15nf1i] {
    font-size: 0.98rem;
    color: #4a3b32;
    line-height: 1.6;
    margin: 0;
}

.finca-bottom-banner .btn-leer-mas[b-24bv15nf1i] {
    background-color: #241103;
    padding: 14px 28px;
    font-size: 0.95rem;
    border-radius: 10px;
    text-decoration: none;
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.2s ease;
}

.finca-bottom-banner .btn-leer-mas:hover[b-24bv15nf1i] {
    background-color: #3d2314;
}

/* ==========================================================================
   FIX CRÍTICO — LIBERAR FINCA DEL GRID
   ========================================================================== */
.perfil-contenido.finca-activa[b-24bv15nf1i] {
    display: block !important;
}

/* ==========================================================================
   ESTILOS PARA LA PESTAÑA DE PROCESOS (Waylan Origin)
   ========================================================================== */

/* 1. Liberar procesos del grid principal de Blazor */
.perfil-contenido.procesos-activa[b-24bv15nf1i] {
    display: block !important;
}

/* 2. Contenedor principal (La gran tarjeta blanca que engloba todo) */
.perfil-procesos[b-24bv15nf1i] {
    background: #ffffff;
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(235, 220, 203, 0.3);
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
    box-sizing: border-box;
}

/* 3. Grid Superior (Intro izquierda | Flujo derecha) */
.procesos-top-grid[b-24bv15nf1i] {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 32px;
    align-items: start;
    width: 100%;
}

/* 4. Columna Intro Izquierda */
.procesos-intro[b-24bv15nf1i] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.procesos-intro h2[b-24bv15nf1i] {
    font-size: 2rem;
    font-family: 'Playfair Display', serif;
    color: #2c1609;
    margin: 0;
    line-height: 1.2;
}

.procesos-intro p[b-24bv15nf1i] {
    color: #7a6f67;
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}

/* Tarjeta Sostenibilidad (Debajo de la intro) */
.procesos-sostenibilidad[b-24bv15nf1i] {
    background-color: rgba(235, 220, 203, 0.2);
    border: 1px solid rgba(235, 220, 203, 0.4);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-top: 8px;
}

.sost-icono[b-24bv15nf1i] {
    background: #ffffff;
    border: 1px solid #ebdccb;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.procesos-sostenibilidad p[b-24bv15nf1i] {
    font-size: 0.85rem;
    color: #5c4f46;
    margin: 0;
}

/* 5. Contenedor del Flujo de Pasos (Columna Derecha) */
.procesos-flujo[b-24bv15nf1i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
}

/* 6. Estructura de las Tarjetas de Procesos */
.proceso-card[b-24bv15nf1i] {
    background: #ffffff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(44, 22, 9, 0.04);
    border: 1px solid rgba(235, 220, 203, 0.5);
    
    /* Permite que las tarjetas se encojan equitativamente al mínimo */
    flex: 1 1 0%;
    min-width: 0; 
    
    display: flex;
    flex-direction: column;
    height: 335px; /* Altura ideal para soportar el wrap de títulos en 2 líneas */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.proceso-card:hover[b-24bv15nf1i] {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(44, 22, 9, 0.08);
}

/* Imagen de la tarjeta */
.proceso-card-img[b-24bv15nf1i] {
    width: 100%;
    height: 120px;
    overflow: hidden;
    flex-shrink: 0;
}

.proceso-card-img img[b-24bv15nf1i] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Contenido de texto interno */
.proceso-card-body[b-24bv15nf1i] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    box-sizing: border-box;
}

/* Badge circular del paso */
.proceso-badge[b-24bv15nf1i] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.badge-num[b-24bv15nf1i] {
    background: #2c1609;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: bold;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Título corregido (No empuja ni desborda la tarjeta) */
.proceso-card-body h3[b-24bv15nf1i] {
    font-size: 0.95rem;
    font-weight: bold;
    color: #2c1609;
    margin: 0;
    
    /* Solución definitiva para el wrap y alineamiento */
    white-space: normal !important;
    word-break: break-word;
    line-height: 1.25;
    height: 38px; /* Mantiene la misma altura en todos los productores */
    
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Límite de 2 renglones */
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex-shrink: 0;
}

/* Descripción del proceso */
.proceso-card-body p[b-24bv15nf1i] {
    font-size: 0.8rem;
    color: #7a6f67;
    line-height: 1.4;
    margin: 0;
    word-break: break-word;
    
    display: -webkit-box;
    -webkit-line-clamp: 4; /* Recorta a un máximo de 4 renglones */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Flechas indicadoras de dirección (→) */
.proceso-flecha[b-24bv15nf1i] {
    font-size: 1.2rem;
    color: #c9b097;
    font-weight: bold;
    user-select: none;
    flex-shrink: 0;
}

/* 7. Banner inferior de navegación */
.procesos-footer-banner[b-24bv15nf1i] {
    background-color: rgba(235, 220, 203, 0.2);
    border: 1px solid rgba(235, 220, 203, 0.4);
    border-radius: 18px;
    padding: 18px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    width: 100%;
    box-sizing: border-box;
}

.banner-izq[b-24bv15nf1i] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.banner-icono[b-24bv15nf1i] {
    background: #ffffff;
    border: 1px solid #ebdccb;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.procesos-footer-banner p[b-24bv15nf1i] {
    font-size: 0.9rem;
    color: #5c4f46;
    margin: 0;
}

/* ==========================================================================
   5. DISEÑO RESPONSIVO (Móviles y Tablets)
   ========================================================================== */
@media (max-width: 992px) {
    .perfil-contenido[b-24bv15nf1i] {
        grid-template-columns: 1fr; /* Colapsa a una sola columna */
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .perfil-container[b-24bv15nf1i] {
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-top: 15px !important;
    }

    .perfil-hero[b-24bv15nf1i] {
        min-height: 380px;
        padding: 25px 20px;
        background-image: linear-gradient(to top, rgba(28, 15, 8, 0.95) 60%, rgba(28, 15, 8, 0.4) 100%) !important;
    }

    .perfil-hero-info[b-24bv15nf1i] {
        max-width: 100%;
    }

    .perfil-nombre[b-24bv15nf1i] {
        font-size: 2.2rem;
    }

    .perfil-frase[b-24bv15nf1i] {
        border-left: none;
        border-top: 2px solid #d4a373;
        padding-left: 0;
        padding-top: 15px;
        font-size: 1.1rem;
    }

    /* Adaptación de la Ficha Técnica en móviles */
    .ficha-grid[b-24bv15nf1i] {
        grid-template-columns: 1fr; /* Apila los elementos verticalmente */
    }

    .border-r[b-24bv15nf1i] {
        border-right: none; /* Remueve divisor lateral en móviles */
    }

    /* Genera líneas divisorias horizontales entre celdas colapsadas */
    .ficha-item:not(:last-child)[b-24bv15nf1i] {
        border-bottom: 1px solid rgba(44, 22, 9, 0.15);
    }
}


/* /Pages/Productores.razor.rz.scp.css */
/* ==========================================================================
   SECCIÓN PRODUCTORES ALIADOS
   ========================================================================== */

/* Contenedor Principal con fondo de café/montaña */
.productores-section[b-s4653wuudb] {
    width: 100%;
    min-height: 100vh;
    padding: 80px 0;
    display: flex;
    align-items: center;
   
    
    background-image: url('fondos/blanco.png');
    background-size: cover;
    background-position: center;
    
}

/* CONTENEDORES */
.container[b-s4653wuudb] {
    max-width: 1400px; /* Espacio total óptimo para pantallas grandes */
    margin: 0 auto;    /* Centrado perfecto */
    padding: 0 5%;     /* Simplificado: 0 arriba/abajo, 5% a los lados */
    width: 100%;
}

.container-fluido[b-s4653wuudb] {
    width: 100%;
    padding: 0 5%;
    position: relative;
    z-index: 2;
}

/* ENCABEZADO (Optimizado para reducir espacios verticales excesivos) */
.header-content[b-s4653wuudb] {
    text-align: left;
    max-width: 650px;       /* Un poco más angosto para un quiebre de texto elegante */
    margin-bottom: 25px;    /* REDUCIDO: Antes 40px. Sube las tarjetas para que queden más cerca */
}

.subtitle[b-s4653wuudb] {
    font-size: 0.85rem;
    font-weight: bold;
    letter-spacing: 1px;
    color: #8c6239;
    margin-top: 0;
    margin-bottom: 5px;     /* Reducido para pegar más al título principal */
    display: block; 
}

.title[b-s4653wuudb] {
    font-size: 2.3rem;
    font-family: Georgia, serif;
    font-weight: 700;
    line-height: 1.2;
    margin-top: 5px;        
    margin-bottom: 0px;     /* Eliminado para controlar el flujo con la línea decorativa */
}

/* DECORACIÓN DEL TÍTULO (LÍNEA Y HOJA) */
.decoracion-titulo[b-s4653wuudb] {
    display: flex;
    align-items: center;
    gap: 15px;              /* Un poco más compacto */
    width: 100%;
    max-width: 480px;       /* Ajustado para que se vea más estético */
    margin: 12px 0;         /* REDUCIDO: Antes 25px. Junta el título con la descripción */
}

.decoracion-titulo .linea[b-s4653wuudb] {
    flex-grow: 1;
    height: 1px;
    background-color: #8c6239;
    opacity: 0.6;
}

.icono-hoja[b-s4653wuudb] {
    display: flex;
    align-items: center;
    color: #8c6239;
    flex-shrink: 0;
}

/* DESCRIPCIÓN */
.description[b-s4653wuudb] {
    font-size: 0.95rem;
    line-height: 1.4;
    color: #4a3b32;
    margin-top: 0;          /* Evita márgenes heredados del navegador */
    margin-bottom: 0;       /* Evita empujar las tarjetas hacia abajo */
}

/* GRID DE TARJETAS */
.cards-grid[b-s4653wuudb] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    width: 100%;
    margin-top: 10px;       /* Pequeña holgura controlada desde la descripción */
}

/* TARJETAS */
.org-card[b-s4653wuudb] {
    background-color: #ede6dc;
    border: 1px solid rgba(35, 19, 13, 0.12);
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 8px 24px rgba(35, 19, 13, 0.05);
    display: flex;
    align-items: center;
    gap: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efecto Hover Moderno */
.org-card:hover[b-s4653wuudb] {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(35, 19, 13, 0.1);
}

.card-image-placeholder img[b-s4653wuudb] {
    width: 110px;
    height: auto;
    object-fit: contain;
}

.card-body h3[b-s4653wuudb] {
    font-size: 1.1rem;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.card-body p[b-s4653wuudb] {
    font-size: 0.9rem;
    color: #5a4b41;
    line-height: 1.4;
    margin-bottom: 15px;
    min-height: 55px;
}

/* BOTÓN */
.btn-ver[b-s4653wuudb] {
    background-color: #23130d;
    color: #f4eee3;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600; 
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.btn-ver:hover[b-s4653wuudb] {
    background-color: #4a2e1b;
    transform: scale(1.02); 
}

/* ==========================================================================
   RESPONSIVE (Tablets y Celulares)
   ========================================================================== */

/* Tablets (Medianas) */
@media (max-width: 1024px) {
    .cards-grid[b-s4653wuudb] {
        grid-template-columns: repeat(2, 1fr); 
    }
    .container[b-s4653wuudb] {
        padding: 0 40px; 
    }
}

/* Celulares (Pequeñas) */
@media (max-width: 768px) {
    .productores-section[b-s4653wuudb] {
        background-image: none; 
        padding: 40px 0;
    }

    .container[b-s4653wuudb] {
        padding: 0 20px; 
    }

    .header-content[b-s4653wuudb] {
        margin-bottom: 20px;
    }

    .decoracion-titulo[b-s4653wuudb] {
        max-width: 100%;
    }

    .cards-grid[b-s4653wuudb] {
        grid-template-columns: 1fr; 
    }

    .org-card[b-s4653wuudb] {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .card-body p[b-s4653wuudb] {
        min-height: auto; 
    }
}
/* /Pages/Sostenibilidad.razor.rz.scp.css */
/* --- CONTENEDORES Y MAQUETACIÓN BASE --- */
.sost-container[b-pij80fhmgr] {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
}

/* --- HERO SECTION (BANNER PRINCIPAL) --- */
.sost-hero[b-pij80fhmgr] {
    position: relative;
    padding: 100px 0 70px 0;
    min-height: 75vh;
    display: flex;
    align-items: center;
    background-color: #120C08;
    background-image: url('../fondos/topography.svg');
    background-repeat: repeat;
    background-size: 800px 800px;
    color: #FAFAF9;
    overflow: hidden;
}

.hero-layout[b-pij80fhmgr] {
    position: relative;
    z-index: 2;
}

.sost-hero-content[b-pij80fhmgr] {
    max-width: 650px;
}

.sost-badge-row[b-pij80fhmgr] {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}

.sost-tag[b-pij80fhmgr] {
    font-size: 0.8rem;
    letter-spacing: 3px;
    color: #C4B79C;
    text-transform: uppercase;
    font-weight: 600;
}

.badge-line-decorator[b-pij80fhmgr] {
    width: 50px;
    height: 1px;
    background-color: #B89A5E;
}

.sost-main-title[b-pij80fhmgr] {
    font-family: 'Georgia', serif;
    font-size: 3.8rem;
    font-weight: 300;
    line-height: 1.15;
    margin-bottom: 25px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.serif-italic-gold[b-pij80fhmgr] {
    font-family: 'Georgia', serif;
    font-style: italic;
    color: #D1B894;
}

.sost-description[b-pij80fhmgr] {
    font-size: 1.05rem;
    line-height: 1.75;
    color: #E5E7EB;
    margin-bottom: 40px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

.sost-hero-actions[b-pij80fhmgr] {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.btn-gold[b-pij80fhmgr] {
    background-color: #B89A5E;
    color: #120C08;
    padding: 14px 28px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    border: none;
    box-shadow: 0 4px 15px rgba(184, 154, 94, 0.3);
}

.btn-gold:hover[b-pij80fhmgr] {
    background-color: #A3844C;
    color: #000;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(184, 154, 94, 0.4);
}

.btn-outline[b-pij80fhmgr] {
    background: transparent;
    color: #FAFAF9;
    padding: 13px 28px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(250, 250, 249, 0.5);
    transition: all 0.3s ease;
}

.btn-outline:hover[b-pij80fhmgr] {
    border-color: #B89A5E;
    color: #B89A5E;
    background-color: rgba(184, 154, 94, 0.05);
    transform: translateY(-2px);
}

.arrow-symbol[b-pij80fhmgr] {
    font-family: sans-serif;
    font-size: 1.1rem;
    line-height: 1;
    transition: transform 0.3s ease;
}

.btn-gold:hover .arrow-symbol[b-pij80fhmgr] {
    transform: translateX(4px);
}

/* --- TABS NAVIGATION (BARRA DE PESTAÑAS) --- */
.sost-tabs-section[b-pij80fhmgr] {
    background-color: #120C08;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: sticky;
    top: 80px; /* Queda debajo del navbar de Waylan (que tiene altura 80px) */
    z-index: 99;
}

.sost-tabs-container[b-pij80fhmgr] {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    padding: 0 20px;
}

.sost-tabs-list[b-pij80fhmgr] {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.sost-tab-item[b-pij80fhmgr] {
    background: none;
    border: none;
    color: #8C847E;
    padding: 22px 10px;
    font-size: 0.88rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex: 1;
    text-align: center;
}

.sost-tab-item:hover[b-pij80fhmgr] {
    color: #D1B894;
}

.sost-tab-item.active[b-pij80fhmgr] {
    color: #B89A5E;
}

.tab-svg-icon[b-pij80fhmgr] {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    flex-shrink: 0;
    transition: stroke 0.3s ease;
}

.active-tab-line[b-pij80fhmgr] {
    position: absolute;
    bottom: 0;
    height: 3px;
    width: 25%; /* 4 tabs -> 25% de ancho */
    background-color: #B89A5E;
    transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 -1px 8px rgba(184, 154, 94, 0.5);
}

/* --- CONTENIDO DE LAS PESTAÑAS --- */
.sost-content-wrapper[b-pij80fhmgr] {
    background-color: #F7F2ED; /* Fondo crema contrastante */
    padding: 80px 0;
    min-height: 600px;
}

/* Animación de entrada de pestaña */
.tab-pane[b-pij80fhmgr] {
    animation: sostFadeIn-b-pij80fhmgr 0.5s ease forwards;
}

@keyframes sostFadeIn-b-pij80fhmgr {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tab-message-container[b-pij80fhmgr] {
    max-width: 800px;
    margin: 0 auto 60px auto;
}

.tab-message-text[b-pij80fhmgr] {
    font-family: 'Georgia', serif;
    font-style: italic;
    font-size: 1.8rem;
    line-height: 1.45;
    color: #2F190E;
}

/* Grid Reutilizable */
.sost-tab-grid[b-pij80fhmgr] {
    display: grid;
    gap: 50px;
    align-items: start;
}

.grid-2col[b-pij80fhmgr] {
    grid-template-columns: 1fr 1.1fr;
}

/* --- PESTAÑA 1: HABLEMOS DE CAFÉ --- */
.sost-blog-card[b-pij80fhmgr] {
    background-color: #FFFFFF;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sost-blog-card:hover[b-pij80fhmgr] {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.sost-blog-card-img[b-pij80fhmgr] {
    height: 320px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.sost-card-badge[b-pij80fhmgr] {
    position: absolute;
    top: 20px;
    left: 20px;
    background-color: #120C08;
    color: #FAFAF9;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 2px;
    padding: 6px 14px;
    border-radius: 2px;
}

.sost-blog-card-body[b-pij80fhmgr] {
    padding: 35px;
}

.sost-card-tag[b-pij80fhmgr] {
    font-size: 0.75rem;
    font-weight: 700;
    color: #B89A5E;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 12px;
}

.sost-card-title[b-pij80fhmgr] {
    font-family: 'Georgia', serif;
    font-size: 1.65rem;
    color: #2F190E;
    line-height: 1.3;
    margin-bottom: 15px;
    font-weight: 400;
}

.sost-card-text[b-pij80fhmgr] {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #55443B;
    margin-bottom: 25px;
}

.sost-card-link[b-pij80fhmgr] {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #2F190E;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.3s ease;
}

.sost-card-link:hover[b-pij80fhmgr] {
    color: #B89A5E;
}

.sost-card-link:hover .arrow-symbol[b-pij80fhmgr] {
    transform: translateX(4px);
}

/* Testimonio */
.sost-testimonio-wrapper[b-pij80fhmgr] {
    padding-left: 20px;
}

.sost-quote-icon[b-pij80fhmgr] {
    font-family: 'Georgia', serif;
    font-size: 6rem;
    line-height: 0.1;
    color: #DCD5CE;
    margin-bottom: 30px;
    user-select: none;
}

.sost-testimonial-quote[b-pij80fhmgr] {
    font-family: 'Georgia', serif;
    font-style: italic;
    font-size: 1.6rem;
    line-height: 1.6;
    color: #4A3B32;
    margin-bottom: 40px;
    position: relative;
    border: none;
    padding: 0;
}

.sost-testimonial-author[b-pij80fhmgr] {
    display: flex;
    align-items: center;
    gap: 20px;
}

.sost-author-avatar[b-pij80fhmgr] {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #B89A5E;
}

.sost-author-info[b-pij80fhmgr] {
    display: flex;
    flex-direction: column;
}

.sost-author-name[b-pij80fhmgr] {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: #2F190E;
    margin: 0 0 3px 0;
}

.sost-author-role[b-pij80fhmgr] {
    font-size: 0.8rem;
    color: #B89A5E;
    margin: 0;
}

.sost-author-location[b-pij80fhmgr] {
    font-size: 0.75rem;
    color: #8C847E;
    margin: 0;
}

/* --- SECCIÓN MÉTRICAS DE IMPACTO (TABS 1, 3, 4) --- */
.sost-metrics-container[b-pij80fhmgr] {
    margin-top: 60px;
    background-color: #120C08;
    background-image: url('../fondos/topography.svg');
    background-repeat: repeat;
    background-size: 800px 800px;
    border-radius: 8px;
    padding: 50px 40px;
    color: #FAFAF9;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.sost-metrics-tag[b-pij80fhmgr] {
    font-size: 0.75rem;
    font-weight: 700;
    color: #B89A5E;
    letter-spacing: 3px;
    display: block;
    text-align: center;
    margin-bottom: 45px;
}

.sost-metrics-grid[b-pij80fhmgr] {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}

.sost-metric-card[b-pij80fhmgr] {
    flex: 1;
    text-align: center;
    padding: 0 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sost-metric-icon-box[b-pij80fhmgr] {
    margin-bottom: 20px;
}

.sost-metric-icon-box img[b-pij80fhmgr] {
    height: 48px;
    width: auto;
    object-fit: contain;
}

.sost-metric-value[b-pij80fhmgr] {
    font-family: 'Georgia', serif;
    font-size: 3.2rem;
    font-weight: 300;
    color: #B89A5E;
    margin-bottom: 8px;
    line-height: 1;
}

.sost-metric-title[b-pij80fhmgr] {
    font-size: 1rem;
    font-weight: 600;
    color: #FAFAF9;
    margin-bottom: 12px;
}

.sost-metric-desc[b-pij80fhmgr] {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #E5E7EB;
    max-width: 280px;
    margin: 0 auto;
}

.sost-metric-divider[b-pij80fhmgr] {
    width: 1px;
    background-color: rgba(255, 255, 255, 0.08);
    margin: 10px 0;
}

/* --- PESTAÑA 2: ORIGEN Y RELACIÓN --- */
.sost-direct-card[b-pij80fhmgr] {
    height: 440px;
    border-radius: 8px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    padding: 45px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.sost-direct-card-content[b-pij80fhmgr] {
    color: #FAFAF9;
    max-width: 500px;
}

.sost-direct-subtitle[b-pij80fhmgr] {
    font-size: 0.8rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #D1B894;
    margin-bottom: 10px;
}

.sost-direct-title[b-pij80fhmgr] {
    font-family: 'Georgia', serif;
    font-style: italic;
    font-size: 2.2rem;
    color: #FAFAF9;
    margin-bottom: 20px;
    font-weight: 400;
}

.sost-direct-text[b-pij80fhmgr] {
    font-size: 0.95rem;
    line-height: 1.65;
    color: #E5E7EB;
}

/* Tarjeta Cercanía y Transparencia */
.sost-transparency-card[b-pij80fhmgr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #FFFFFF;
    border-radius: 8px;
    padding: 45px;
    height: 440px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

.sost-transparency-text[b-pij80fhmgr] {
    max-width: 320px;
}

.sost-transparency-title[b-pij80fhmgr] {
    font-family: 'Georgia', serif;
    font-size: 2rem;
    color: #2F190E;
    margin-bottom: 12px;
    font-weight: 400;
}

.title-underline[b-pij80fhmgr] {
    display: block;
    width: 60px;
    height: 2px;
    background-color: #B89A5E;
    margin-bottom: 25px;
}

.sost-transparency-desc[b-pij80fhmgr] {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #55443B;
}

.sost-transparency-drawing[b-pij80fhmgr] {
    flex-shrink: 0;
}

.coffee-branch-svg[b-pij80fhmgr] {
    width: 100px;
    height: auto;
    opacity: 0.85;
}

/* Sección Proceso con Productores */
.sost-process-section[b-pij80fhmgr] {
    margin: 30px 0 70px 0;
}

.sost-center-header[b-pij80fhmgr] {
    text-align: center;
    margin-bottom: 50px;
}

.delicate-separator[b-pij80fhmgr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 15px;
    width: 100%;
}

.sep-line[b-pij80fhmgr] {
    width: 35px;
    height: 1px;
    background-color: #B89A5E;
    opacity: 0.6;
}

.sep-dot[b-pij80fhmgr] {
    width: 5px;
    height: 5px;
    background-color: #B89A5E;
    border-radius: 50%;
}

.sost-process-main-title[b-pij80fhmgr] {
    font-family: 'Georgia', serif;
    font-style: italic;
    font-size: 1.9rem;
    color: #2F190E;
    font-weight: 400;
}

.sost-process-timeline[b-pij80fhmgr] {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-top: 30px;
}

.process-connecting-line[b-pij80fhmgr] {
    position: absolute;
    top: 75px;
    left: 12%;
    right: 12%;
    height: 1px;
    border-top: 1.5px dashed #B89A5E;
    z-index: 1;
}

.process-node[b-pij80fhmgr] {
    flex: 1;
    text-align: center;
    position: relative;
    z-index: 2;
    padding: 0 15px;
}

.process-node-number[b-pij80fhmgr] {
    font-family: 'Georgia', serif;
    font-size: 1.6rem;
    color: #B89A5E;
    font-weight: 400;
    margin-bottom: 12px;
}

.process-node-icon-box[b-pij80fhmgr] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: #FFFFFF;
    border: 1.5px solid #B89A5E;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 20px auto;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    transition: transform 0.3s ease;
}

.process-node:hover .process-node-icon-box[b-pij80fhmgr] {
    transform: scale(1.1);
}

.process-node-title[b-pij80fhmgr] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #2F190E;
    margin-bottom: 10px;
}

.process-node-text[b-pij80fhmgr] {
    font-size: 0.82rem;
    line-height: 1.55;
    color: #6B5B52;
    max-width: 250px;
    margin: 0 auto;
}

/* Metrics Strip (Pestaña 2) */
.sost-metrics-strip[b-pij80fhmgr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #120C08;
    background-image: url('../fondos/topography.svg');
    background-repeat: repeat;
    background-size: 800px 800px;
    border-radius: 8px;
    padding: 35px 50px;
    color: #FAFAF9;
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

.strip-item[b-pij80fhmgr] {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
}

.strip-icon[b-pij80fhmgr] {
    height: 42px;
    width: auto;
    object-fit: contain;
}

.strip-info[b-pij80fhmgr] {
    display: flex;
    flex-direction: column;
}

.strip-number[b-pij80fhmgr] {
    font-family: 'Georgia', serif;
    font-size: 2.2rem;
    font-weight: 300;
    color: #B89A5E;
    line-height: 1;
    margin-bottom: 4px;
}

.strip-label[b-pij80fhmgr] {
    font-size: 0.82rem;
    color: #C5BCB6;
    letter-spacing: 0.2px;
}

.strip-divider[b-pij80fhmgr] {
    width: 1px;
    background-color: rgba(255, 255, 255, 0.08);
    height: 45px;
    margin: 0 20px;
}

/* --- PESTAÑA 3: CUIDADO DE LA TIERRA --- */
.sost-fertilizacion-card[b-pij80fhmgr] {
    height: 460px;
    border-radius: 8px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 50px;
    color: #FAFAF9;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.sost-card-tag-gold[b-pij80fhmgr] {
    font-size: 0.7rem;
    font-weight: 700;
    color: #B89A5E;
    letter-spacing: 2.5px;
    margin-bottom: 15px;
}

.sost-fertilizacion-title[b-pij80fhmgr] {
    font-family: 'Georgia', serif;
    font-size: 2rem;
    color: #FAFAF9;
    margin-bottom: 25px;
    font-weight: 400;
}

.sost-fertilizacion-text[b-pij80fhmgr] {
    font-size: 0.92rem;
    line-height: 1.65;
    color: #E5E7EB;
    margin-bottom: 15px;
}

.sost-fertilizacion-text:last-of-type[b-pij80fhmgr] {
    margin-bottom: 0;
}

.soil-leaf-graphic[b-pij80fhmgr] {
    position: absolute;
    bottom: 35px;
    right: 40px;
    opacity: 0.25;
}

/* Columna Prácticas Agroecológicas */
.sost-practices-container[b-pij80fhmgr] {
    padding-left: 20px;
}

.sost-practices-main-title[b-pij80fhmgr] {
    font-family: 'Georgia', serif;
    font-size: 2rem;
    color: #2F190E;
    margin-bottom: 15px;
    font-weight: 400;
}

.sost-practices-intro[b-pij80fhmgr] {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #55443B;
    margin-bottom: 35px;
}

.sost-practice-item[b-pij80fhmgr] {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
}

.sost-practice-item:last-child[b-pij80fhmgr] {
    margin-bottom: 0;
}

.sost-practice-icon[b-pij80fhmgr] {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background-color: #FFFFFF;
    border: 1px solid #DCD5CE;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    box-shadow: 0 4px 8px rgba(0,0,0,0.02);
}

.sost-practice-content[b-pij80fhmgr] {
    display: flex;
    flex-direction: column;
}

.sost-practice-title[b-pij80fhmgr] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #2F190E;
    margin-bottom: 5px;
}

.sost-practice-text[b-pij80fhmgr] {
    font-size: 0.85rem;
    line-height: 1.55;
    color: #6B5B52;
}

/* --- PESTAÑA 4: CALIDAD --- */
.sost-timeline-section[b-pij80fhmgr] {
    max-width: 900px;
    margin: 0 auto;
}

.sost-timeline-main-title[b-pij80fhmgr] {
    font-family: 'Georgia', serif;
    font-size: 2rem;
    color: #2F190E;
    margin-bottom: 15px;
    text-align: center;
    font-weight: 400;
}

.sost-timeline-intro[b-pij80fhmgr] {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #55443B;
    text-align: center;
    margin-bottom: 60px;
}

/* Timeline Vertical */
.vertical-timeline[b-pij80fhmgr] {
    position: relative;
    padding: 10px 0;
}

.timeline-v-line[b-pij80fhmgr] {
    position: absolute;
    left: 21px;
    top: 10px;
    bottom: 20px;
    width: 2px;
    background-color: #DCD5CE;
}

.timeline-v-item[b-pij80fhmgr] {
    position: relative;
    padding-left: 65px;
    margin-bottom: 45px;
}

.timeline-v-item:last-child[b-pij80fhmgr] {
    margin-bottom: 0;
}

.timeline-v-badge[b-pij80fhmgr] {
    position: absolute;
    left: 0;
    top: 2px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #B89A5E;
    color: #FAFAF9;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.9rem;
    font-weight: 700;
    border: 3px solid #F7F2ED; /* Borde del color del fondo */
    z-index: 2;
    box-shadow: 0 2px 6px rgba(184, 154, 94, 0.2);
}

.timeline-v-content[b-pij80fhmgr] {
    background-color: #FFFFFF;
    border-radius: 6px;
    padding: 25px 30px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.03);
    transition: transform 0.3s ease;
}

.timeline-v-item:hover .timeline-v-content[b-pij80fhmgr] {
    transform: translateX(4px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.06);
}

.timeline-v-title[b-pij80fhmgr] {
    font-size: 1.05rem;
    font-weight: 700;
    color: #2F190E;
    margin-bottom: 8px;
}

.timeline-v-text[b-pij80fhmgr] {
    font-size: 0.88rem;
    line-height: 1.6;
    color: #55443B;
}

/* --- RESPONSIVIDAD (MEDIA QUERIES) --- */

@media (max-width: 1024px) {
    .sost-main-title[b-pij80fhmgr] {
        font-size: 3.2rem;
    }
    
    .sost-tab-item[b-pij80fhmgr] {
        padding: 18px 5px;
        font-size: 0.78rem;
        gap: 6px;
    }
    
    .tab-icon[b-pij80fhmgr] {
        font-size: 1rem;
    }
    
    .sost-metrics-grid[b-pij80fhmgr] {
        flex-direction: column;
        gap: 40px;
    }
    
    .sost-metric-divider[b-pij80fhmgr] {
        width: 100%;
        height: 1px;
        margin: 0;
    }
    
    .sost-metrics-strip[b-pij80fhmgr] {
        flex-direction: column;
        gap: 30px;
        padding: 40px 30px;
    }
    
    .strip-divider[b-pij80fhmgr] {
        width: 100%;
        height: 1px;
        margin: 0;
    }
    
    .sost-process-timeline[b-pij80fhmgr] {
        flex-direction: column;
        gap: 40px;
        align-items: center;
    }
    
    .process-connecting-line[b-pij80fhmgr] {
        display: none;
    }
}

@media (max-width: 768px) {
    .sost-hero[b-pij80fhmgr] {
        padding: 120px 0 70px 0;
        min-height: auto;
    }
    
    .sost-main-title[b-pij80fhmgr] {
        font-size: 2.5rem;
    }
    
    .sost-description[b-pij80fhmgr] {
        font-size: 0.95rem;
        margin-bottom: 30px;
    }
    
    .sost-tabs-list[b-pij80fhmgr] {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    
    .active-tab-line[b-pij80fhmgr] {
        display: none; /* Ocultamos la barra en móviles ya que se rompe a 2 filas */
    }
    
    .sost-tabs-section[b-pij80fhmgr] {
        position: static; /* Desactivar sticky en móviles */
    }
    
    .sost-tab-item[b-pij80fhmgr] {
        padding: 15px 5px;
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    
    .sost-tab-item.active[b-pij80fhmgr] {
        background-color: rgba(184, 154, 94, 0.08);
        border-bottom: 1.5px solid #B89A5E;
    }
    
    .grid-2col[b-pij80fhmgr] {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .tab-message-text[b-pij80fhmgr] {
        font-size: 1.4rem;
    }
    
    .sost-blog-card-img[b-pij80fhmgr] {
        height: 240px;
    }
    
    .sost-quote-icon[b-pij80fhmgr] {
        font-size: 4.5rem;
    }
    
    .sost-testimonial-quote[b-pij80fhmgr] {
        font-size: 1.3rem;
    }
    
    .sost-direct-card[b-pij80fhmgr] {
        height: auto;
        padding: 30px;
    }
    
    .sost-direct-title[b-pij80fhmgr] {
        font-size: 1.8rem;
    }
    
    .sost-transparency-card[b-pij80fhmgr] {
        flex-direction: column-reverse;
        height: auto;
        padding: 30px;
        gap: 20px;
    }
    
    .sost-transparency-text[b-pij80fhmgr] {
        max-width: 100%;
    }
    
    .sost-fertilizacion-card[b-pij80fhmgr] {
        height: auto;
        padding: 35px;
    }
    
    .sost-fertilizacion-title[b-pij80fhmgr] {
        font-size: 1.6rem;
    }
    
    .sost-practices-container[b-pij80fhmgr],
    .sost-testimonio-wrapper[b-pij80fhmgr] {
        padding-left: 0;
    }
    
    .sost-practices-main-title[b-pij80fhmgr] {
        font-size: 1.6rem;
    }
}