/*================================================================
    MARKETPLACE SOCIAL
    FUNDAHEROES
================================================================*/

/*===============================================================
    VARIABLES
===============================================================*/

:root{

    --primary:#003E7E;
    --secondary:#D71920;
    --accent:#FFC107;

    --white:#FFFFFF;

    --background:#F7F9FC;

    --text:#374151;

    --border:#E5E7EB;

    --shadow:0 10px 30px rgba(0,0,0,.08);

    --radius:18px;

    --transition:.35s ease;

    --container:1400px;

}

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

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

img{

    display:block;

    max-width:100%;

}

a{

    text-decoration:none;

}

button{

    border:none;

    cursor:pointer;

    font-family:inherit;

}

input{

    border:none;

    outline:none;

    font-family:inherit;

}

/*===============================================================
    BODY
===============================================================*/

body{

    font-family:'Roboto',sans-serif;

    background:var(--background);

    color:var(--text);

    overflow-x:hidden;

}

/*===============================================================
    CONTENEDOR
===============================================================*/

.container{

    width:100%;

    max-width:var(--container);

    margin:auto;

    padding:0 40px;

}

/*===============================================================
    HEADER MARKETPLACE
===============================================================*/

.market-header{

    position:sticky;

    top:0;

    z-index:1000;

    background:var(--white);

    box-shadow:0 6px 18px rgba(0,0,0,.06);

}

.market-header .container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:35px;

    min-height:95px;

}

.market-logo{

    flex-shrink:0;

}

.market-logo img{

    width:170px;

}

.market-search{

    flex:1;

}

.market-search form{

    display:flex;

    align-items:center;

    overflow:hidden;

    border-radius:60px;

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

    background:#F9FAFB;

}

.market-search input{

    width:100%;

    padding:18px 28px;

    font-size:17px;

    background:transparent;

}

.market-search button{

    width:74px;

    height:60px;

    background:var(--primary);

    color:var(--white);

    font-size:22px;

}

.market-actions{

    display:flex;

    align-items:center;

    gap:16px;

}

.market-actions a{

    width:52px;

    height:52px;

    border-radius:50%;

    background:#F3F4F6;

    display:flex;

    justify-content:center;

    align-items:center;

    color:var(--primary);

    font-size:22px;

    transition:var(--transition);

}

.market-actions a:hover{

    background:var(--primary);

    color:var(--white);

}

/*===============================================================
    HERO MARKETPLACE
===============================================================*/

.market-hero{

    position:relative;

    display:flex;

    align-items:center;

    width:100%;

    min-height:680px;

    overflow:hidden;

    background-image:
    linear-gradient(
        90deg,
        rgba(0,35,80,.78) 0%,
        rgba(0,35,80,.55) 35%,
        rgba(0,35,80,.15) 65%,
        rgba(0,35,80,0) 100%
    ),
    url("../images/marketplace/hero/marketplace-hero.webp");

    background-size:cover;

    background-position:center right;

    background-repeat:no-repeat;

}

/*---------------------------------------------------------------
    CONTENEDOR
---------------------------------------------------------------*/

.market-hero .container{

    width:100%;

    display:flex;

    align-items:center;

    min-height:680px;

}

/*---------------------------------------------------------------
    CONTENIDO
---------------------------------------------------------------*/

.hero-content{

    max-width:680px;

    padding:70px 0 70px 35px;

    color:var(--white);

}

/*---------------------------------------------------------------
    BADGE MARKETPLACE SOCIAL
---------------------------------------------------------------*/

.hero-badge{

    display:inline-block;

    padding:10px 26px;

    border-radius:50px;

    background:rgba(255,255,255,.16);

    backdrop-filter:blur(8px);

    font-family:'Montserrat',sans-serif;

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:50px;

}

/*---------------------------------------------------------------
    TITULO
---------------------------------------------------------------*/

.hero-content h1{

    width:100%;
    
    font-family:'Montserrat',sans-serif;

    font-size:70px;

    font-weight:800;

    line-height:1.08;

    margin-bottom:10px;
    

}

.hero-content h1 span{

    color:var(--accent);

}

/*---------------------------------------------------------------
    DESCRIPCION
---------------------------------------------------------------*/

.hero-content{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:flex-start;

    max-width:680px;

    font-size:18px;

    padding:70px 0 70px 35px;

    color:var(--white);

}

.hero-content p{

    width:100%;

    max-width:560px;

    font-size:20px;

    line-height:1.7;

    margin-bottom:0px;

}

/*---------------------------------------------------------------
    BOTONES
---------------------------------------------------------------*/

.hero-buttons{

    display:flex;

    align-items:center;

    gap:10px;

    flex-wrap:wrap;

    margin-top:0;

}

/*---------------------------------------------------------------
    BOTON PRIMARIO
---------------------------------------------------------------*/

.btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:17px 34px;

    background:var(--accent);

    color:#222;

    border-radius:60px;

    font-weight:700;

    transition:var(--transition);

    box-shadow:var(--shadow);

}

.btn-primary:hover{

    transform:translateY(-4px);

}

/*---------------------------------------------------------------
    BOTON SECUNDARIO
---------------------------------------------------------------*/

.btn-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:17px 34px;

    border-radius:60px;

    color:var(--white);

    border:2px solid rgba(255,255,255,.35);

    backdrop-filter:blur(10px);

    transition:var(--transition);

}

.btn-secondary:hover{

    background:rgba(255,255,255,.12);

}

/*===============================================================
    MÓDULO 03
    CATEGORÍAS DEL MARKETPLACE
===============================================================*/

.market-categories{

    padding:120px 0;

    background:var(--white);

}

/*===============================================================
    ENCABEZADO
===============================================================*/

.categories-header{

    text-align:center;

    max-width:850px;

    margin:0 auto 70px;

}

.categories-header .section-badge{

    display:inline-block;

    padding:12px 30px;

    border-radius:50px;

    background:rgba(0,62,126,.08);

    color:var(--primary);

    font-family:'Montserrat',sans-serif;

    font-size:14px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:25px;

}

.categories-header h2{

    font-family:'Montserrat',sans-serif;

    font-size:48px;

    font-weight:800;

    color:var(--primary);

    margin-bottom:25px;

}

.categories-header p{

    font-size:20px;

    line-height:1.9;

    color:#5F6B7A;

}

/*===============================================================
    GRID
===============================================================*/

.categories-grid{

    display:grid;

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

    gap:30px;

}

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

.category-card{

    position:relative;

    background:var(--white);

    border-radius:24px;

    padding:45px 35px;

    text-align:center;

    border:1px solid #E8EDF4;

    box-shadow:0 15px 40px rgba(0,0,0,.05);

    overflow:hidden;

    transition:all .35s ease;

}

.category-card:hover{

    transform:translateY(-12px);

    box-shadow:0 28px 60px rgba(0,62,126,.15);

}

.category-card:hover{

    transform:translateY(-12px);

    box-shadow:0 25px 50px rgba(0,62,126,.15);

}

/*===============================================================
    ICONO
===============================================================*/

.category-card i{

    width:95px;

    height:95px;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:0 auto 35px;

    border-radius:50%;

    background:var(--primary);

    color:var(--white);

    font-size:38px;

    transition:all .35s ease;

}

.category-card:hover i{

    background:var(--secondary);

    transform:scale(1.08);

}

/*===============================================================
    TÍTULO
===============================================================*/

.category-card h3{

    font-family:'Montserrat',sans-serif;

    font-size:30px;

    font-weight:700;

    color:var(--primary);

    margin-bottom:20px;

    transition:all .35s ease;

}

.category-card:hover h3{

    color:var(--primary);

}

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

.category-card span{

    display:block;

    font-size:18px;

    line-height:1.9;

    color:#667085;

}

/*===============================================================
    LINEA INFERIOR
===============================================================*/

.category-card::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:28px;

    width:55px;

    height:5px;

    border-radius:10px;

    background:var(--primary);

    transform:translateX(-50%);

    transition:all .35s ease;

}

/*===============================================================
    HOVER DE LA LINEA
===============================================================*/

.category-card:hover::after{

    width:120px;

    background:var(--secondary);

}

/*===============================================================
    ENCABEZADO
===============================================================*/

.products-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    margin-bottom:70px;

    gap:40px;

}

.products-header h2{

    font-family:'Montserrat',sans-serif;

    font-size:48px;

    font-weight:800;

    color:var(--primary);

    margin:20px 0;

}

.products-header p{

    max-width:700px;

    font-size:20px;

    line-height:1.9;

    color:#667085;

}

/*===============================================================
    BOTÓN VER TODOS
===============================================================*/

.view-all{

    display:flex;

    align-items:center;

    gap:12px;

    color:var(--primary);

    font-weight:700;

    transition:.35s;

}

.view-all:hover{

    color:var(--secondary);

}

/*===============================================================
    GRID FILAS COLUMNAS
===============================================================*/

.products-grid{

    display:grid;

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

    gap:35px;

}

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

.product-card{

    background:#FFFFFF;

    border-radius:24px;

    overflow:hidden;

    box-shadow:0 15px 40px rgba(0,0,0,.06);

    transition:all .35s ease;

}


.product-card:hover{

    transform:translateY(-12px);

    box-shadow:0 30px 60px rgba(0,62,126,.18);

}

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

.product-image{

    position:relative;

    overflow:hidden;

}

.product-image img{

    width:100%;

    height:280px;

    object-fit:cover;

    transition:.5s;

}

.product-card:hover img{

    transform:scale(1.08);

}

/*===============================================================
    INSIGNIA
===============================================================*/

.product-badge{

    position:absolute;

    top:20px;

    left:20px;

    background:var(--secondary);

    color:#FFFFFF;

    padding:8px 18px;

    border-radius:30px;

    font-size:12px;

    font-weight:700;

    letter-spacing:1px;

}

/*===============================================================
    INSIGNIA
===============================================================*/

.product-info{

    padding:30px;

}

.product-info small{

    color:#667085;

    font-size:14px;

    letter-spacing:1px;

    text-transform:uppercase;

}

/*===============================================================
    NOMBRE DEL PRODUCTO
===============================================================*/

.product-info h3{

    margin:15px 0;

    font-family:'Montserrat',sans-serif;

    font-size:26px;

    color:var(--primary);

    line-height:1.3;

}

/*===============================================================
    ESTRELLAS
===============================================================*/

.product-rating{

    display:flex;

    gap:4px;

    margin-bottom:18px;

    color:#FFC107;

}

/*===============================================================
    PRECIO
===============================================================*/

.product-price{

    font-size:34px;

    font-weight:800;

    color:var(--primary);

    margin-bottom:20px;

}

/*===============================================================
    MENSAJE SOCIAL
===============================================================*/

.product-purpose{

    display:flex;

    align-items:center;

    gap:10px;

    color:#667085;

    font-size:15px;

    margin-bottom:30px;

}

.product-purpose i{

    color:var(--secondary);

}

/*===============================================================
    BOTON
===============================================================*/

.product-button{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    padding:18px;

    border-radius:50px;

    background:var(--primary);

    color:#FFFFFF;

    font-weight:700;

    transition:.35s;

}

.product-button:hover{

    background:var(--secondary);

}

/*===============================================================
    MÓDULO 05
    EMPRESAS ALIADAS
===============================================================*/

.market-partners{

    padding:120px 0;

    background:#FFFFFF;

}

/*===============================================================
    ENCABEZADO EMPRESAS ALIADAS
===============================================================*/

.partners-header{

    max-width:850px;

    margin:0 auto 70px;

    text-align:center;

}

.partners-header .section-badge{

    display:inline-block;

    padding:12px 30px;

    border-radius:50px;

    background:rgba(0,62,126,.08);

    color:var(--primary);

    font-family:'Montserrat',sans-serif;

    font-size:14px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:25px;

}

.partners-header h2{

    font-family:'Montserrat',sans-serif;

    font-size:48px;

    font-weight:800;

    color:var(--primary);

    margin-bottom:25px;

}

.partners-header p{

    font-size:20px;

    line-height:1.9;

    color:#667085;

}

/*===============================================================
    GRID DE EMPRESAS ALIADAS
===============================================================*/

.partners-grid{

    display:grid;

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

    gap:35px;

    margin-bottom:90px;

}

/*===============================================================
    TARJETAS DE EMPRESAS ALIADAS
===============================================================*/

.partner-card{

    background:#FFFFFF;

    border:1px solid #E8EDF4;

    border-radius:24px;

    padding:45px;

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:180px;

    box-shadow:0 15px 40px rgba(0,0,0,.05);

    transition:all .35s ease;

}

.partner-card:hover{

    transform:translateY(-10px);

    box-shadow:0 28px 60px rgba(0,62,126,.15);

}

/*===============================================================
    LOGOTIPOS DE EMPRESAS ALIADAS
===============================================================*/

.partner-card img{

    max-width:180px;

    max-height:80px;

    object-fit:contain;

    transition:all .35s ease;

}

.partner-card:hover img{

    transform:scale(1.08);

}

/*===============================================================
    CTA DE EMPRESAS ALIADAS
===============================================================*/

.partners-cta{

    max-width:900px;

    margin:auto;

    text-align:center;

    background:linear-gradient(
        135deg,
        var(--primary),
        #0A5FB8
    );

    padding:70px 60px;

    border-radius:30px;

    color:#FFFFFF;

}

/*===============================================================
    TITULO DE EMPRESAS ALIADAS
===============================================================*/

.partners-cta h3{

    font-family:'Montserrat',sans-serif;

    font-size:42px;

    font-weight:800;

    margin-bottom:25px;

}

/*===============================================================
    TEXTO DE EMPRESAS ALIADAS
===============================================================*/

.partners-cta p{

    font-size:20px;

    line-height:1.9;

    max-width:700px;

    margin:0 auto 40px;

}

/*===============================================================
    BOTON DE EMPRESAS ALIDADAS
===============================================================*/

.partners-cta .btn-primary{

    display:inline-flex;

    align-items:center;

    gap:12px;

}

/*===============================================================
    MÓDULO 06
    BENEFICIO SOCIAL
===============================================================*/

.social-impact{

    padding:20px 0 120px;

    background:#F7F9FC;

}

/*===============================================================
    GRID BENEFICIO SOCIAL
===============================================================*/

.impact-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:80px;

}

/*===============================================================
    IMAGEN BENEFICIO SOCIAL
===============================================================*/

.impact-image{

    position:relative;

}

.impact-image img{

    width:100%;

    border-radius:28px;

    display:block;

    box-shadow:0 25px 60px rgba(0,0,0,.12);

    transition:all .35s ease;

}

.impact-image:hover img{

    transform:scale(1.02);

}

/*===============================================================
    CONTENIDO BENEFICIO SOCIAL
===============================================================*/

.impact-content{

    max-width:600px;

}

/*===============================================================
    TITULO BENEFICIO SOCIAL
===============================================================*/

.impact-content h2{

    font-family:'Montserrat',sans-serif;

    font-size:52px;

    font-weight:800;

    color:var(--primary);

    margin:25px 0;

    line-height:1.2;

}

/*===============================================================
    TEXTO BENEFICIO SOCIAL
===============================================================*/

.impact-content p{

    font-size:20px;

    line-height:1.9;

    color:#667085;

    margin-bottom:40px;

}

/*===============================================================
    LISTA BENEFICIO SOCIAL
===============================================================*/

.impact-list{

    list-style:none;

    margin-bottom:45px;

}

.impact-list li{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:22px;

    font-size:19px;

    color:var(--text);

}

.impact-list i{

    color:var(--secondary);

    font-size:22px;

}

/*===============================================================
    BOTON BENEFICIO SOCIAL
===============================================================*/

.impact-content .btn-primary{

    display:inline-flex;

    align-items:center;

    gap:12px;

}

/*===============================================================
    MÓDULO 07
    FOOTER CORPORATIVO
===============================================================*/

.market-footer{

    background:#05264A;

    color:#FFFFFF;

    padding:90px 0 30px;

}

/*===============================================================
    GRID
===============================================================*/

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1.3fr;

    gap:60px;

    margin-bottom:70px;

}

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

.footer-about img{

    width:220px;

    margin-bottom:30px;

}

.footer-about p{

    color:rgba(255,255,255,.80);

    line-height:1.9;

    font-size:17px;

}

/*===============================================================
    TÍTULOS
===============================================================*/

.footer-links h3,
.footer-contact h3{

    font-family:'Montserrat',sans-serif;

    font-size:22px;

    margin-bottom:28px;

    color:#FFFFFF;

}

/*===============================================================
    LISTAS
===============================================================*/

.footer-links ul,
.footer-contact ul{

    list-style:none;

}

.footer-links li,
.footer-contact li{

    margin-bottom:18px;

}

/*===============================================================
    ENLACES
===============================================================*/

.footer-links a{

    color:rgba(255,255,255,.75);

    transition:.35s;

}

.footer-links a:hover{

    color:#FFFFFF;

    padding-left:10px;

}

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

.footer-contact li{

    display:flex;

    align-items:flex-start;

    gap:14px;

    color:rgba(255,255,255,.80);

    line-height:1.7;

}

.footer-contact i{

    color:var(--accent);

    margin-top:4px;

}

/*===============================================================
    REDES SOCIALES
===============================================================*/

.footer-social{

    display:flex;

    justify-content:center;

    gap:18px;

    padding:40px 0;

    border-top:1px solid rgba(255,255,255,.08);

    border-bottom:1px solid rgba(255,255,255,.08);

}

/*===============================================================
    ICONOS
===============================================================*/

.footer-social a{

    width:52px;

    height:52px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(255,255,255,.08);

    color:#FFFFFF;

    font-size:20px;

    transition:.35s;

}

.footer-social a:hover{

    background:var(--secondary);

    transform:translateY(-5px);

}

/*===============================================================
    COPYRIGHT
===============================================================*/

.footer-bottom{

    padding-top:35px;

    text-align:center;

}

.footer-bottom p{

    color:rgba(255,255,255,.65);

    line-height:1.9;

    font-size:15px;

}

/*===============================================================
    HEADER INTELIGENTE
===============================================================*/

.market-header{

    transition:transform .35s ease,
               box-shadow .35s ease;

}

.market-header.header-hide{

    transform:translateY(-100%);

}

/*===============================================================
    SOMBRA HEADER
===============================================================*/

.market-header.header-shadow{

    box-shadow:0 10px 30px rgba(0,0,0,.10);

}

/*===============================================================
    BOTÓN VOLVER ARRIBA
===============================================================*/

.back-to-top{

    position:fixed;

    right:25px;

    bottom:25px;

    width:40px;

    height:40px;

    border:none;

    border-radius:50%;

    background:var(--primary);

    color:#FFFFFF;

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    box-shadow:0 8px 20px rgba(0,0,0,.18);

    z-index:99999;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:opacity .35s ease,
               visibility .35s ease,
               transform .35s ease;

}

.back-to-top.show{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

}

/*===============================================================
    EFECTO HOVER BOTÓN VOLVER ARRIBA
===============================================================*/

.back-to-top:hover{

    background: var(--secondary);

    color: #FFFFFF;

    transform: translateY(-4px) scale(1.05);

    box-shadow: 0 12px 28px rgba(227, 6, 19, .35);

}