/*=========================================
Michi and Coffee
=========================================*/

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

html,
body{

    overflow-x:hidden;

}

body{

    font-family:'Poppins',sans-serif;
    background:#FAF5EB;
    color:#3b2f2f;

}

img{

    display:block;
    max-width:100%;

}

a{

    text-decoration:none;

}

.container{

    width:100%;

    max-width:1300px;

    margin:0 auto;

    padding:0 20px;

    box-sizing:border-box;

}

.btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 34px;

    background:#6b7a5a;

    color:#ffffff;

    border-radius:50px;

    font-weight:600;

    transition:.3s;

}

.btn-primary:hover{

    background:#59664b;

    transform:translateY(-3px);

}

.btn-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 34px;

    background:transparent;

    border:2px solid #ffffff;

    color:#ffffff;

    border-radius:50px;

    font-weight:600;

    transition:.3s;

}

.btn-secondary:hover{

    background:#ffffff;

    color:#3b2f2f;

    transform:translateY(-3px);

}

.hero-buttons{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

    margin-top:40px;

}


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

.hero{

    position:relative;

    width:100%;

    height:720px;

    overflow:hidden;

}


/*==============================
SLIDER
==============================*/

.hero-slider{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    overflow:hidden;

}

.hero-slide{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    opacity:0;

    transform:scale(1.08);

    transition:opacity 1s ease;

    animation:heroZoom 5s linear forwards;

}

.hero-slide.active{

    opacity:1;

}


/*==============================
ZOOM SUAVE
==============================*/

@keyframes heroZoom{

    from{

        transform:scale(1.08);

    }

    to{

        transform:scale(1);

    }

}


/*==============================
OVERLAY
==============================*/

.hero-overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.38);

    z-index:2;

}


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

.hero-content{

    position:relative;

    z-index:5;

    width:100%;

    height:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:0 20px;

}

.hero-text{

    max-width:850px;

}

.hero-text h1{

    font-size:72px;

    color:#fff;

    margin-bottom:20px;

}

.hero-text h2{

    font-size:42px;

    color:#fff;

    line-height:1.3;

    margin-bottom:25px;

}

.hero-text p{

    font-size:20px;

    color:#fff;

    line-height:1.8;

    max-width:700px;

    margin:0 auto 40px;

}


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

.hero-buttons{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

}


/*==============================
PUNTOS
==============================*/

.slider-dots{

    position:absolute;

    left:50%;

    bottom:35px;

    transform:translateX(-50%);

    display:flex;

    gap:12px;

    z-index:10;

}

.slider-dots .dot{

    width:13px;

    height:13px;

    border-radius:50%;

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

    cursor:pointer;

    transition:.3s;

}

.slider-dots .dot.active{

    background:#fff;

    transform:scale(1.3);

}

















/*header*/
.header{

    background:#ffffff;
    border-bottom:1px solid #ece7df;

}

.navbar{

    height:90px;

    display:grid;

    grid-template-columns:130px 340px 1fr;

    align-items:center;

    gap:35px;

}

.logo img{

    width:105px;

}


/*buscador*/
.search-box{

    display:flex;

    justify-content:center;

    align-items:center;

}

.search-box input{

    width:340px;

    height:42px;

    padding:0 18px;

    border:2px solid #3b2f2f;

    border-radius:25px;

    background:#ffffff;

    outline:none;

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

    font-size:15px;

    transition:.3s;

}

.search-box input:focus{

    border-color:#6b7a5a;

}

/*menu*/
.main-menu ul{

    display:flex;

    gap:22px;

    list-style:none;

}

.main-menu a{

    color:#3b2f2f;

    font-size:15px;

    font-weight:500;

    transition:.3s;

}

.main-menu a:hover{

    color:#6b7a5a;

}

.main-menu .active{

    color:#6b7a5a;

}


/*usuario*/
.nav-right{

    display:flex;

    align-items:center;

    gap:25px;

}

.header-user{

    display:flex;

    align-items:center;

    justify-content:center;

}

.header-user img{

    width:42px;

    transition:.3s;

}

.header-user img:hover{

    transform:scale(1.1);

}

/*segunda barra*/
.top-actions{

    position:absolute;

    top:90px;

    left:0;

    width:100%;

    padding:22px 0;

    z-index:50;

    background:transparent;

}

.actions{

    display:flex;

    justify-content:flex-end;

}



/*botones*/
.project-buttons{

    display:flex;

    gap:12px;

}

.project-buttons button{

    width:110px;

    height:42px;

    border-radius:14px;

    cursor:pointer;

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

    font-weight:600;

    font-size:15px;

    transition:all .25s ease;

    position:relative;

    overflow:hidden;

}

/*==============================
ESTILO GENERAL
==============================*/

.project-buttons button{

    width:110px;

    height:42px;

    border:none;

    border-radius:12px;

    cursor:pointer;

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

    font-weight:600;

    font-size:15px;

    color:#ffffff;

    transition:all .30s ease;

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

}

.project-buttons button:hover{

    transform:translateY(-2px);

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

}

.project-buttons button:active{

    transform:translateY(1px);

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

}


/*==============================
P. FIGMA
==============================*/

#figmaBtn{

    background:#D8BC7A;

}

#figmaBtn:hover{

    background:#C5A863;

}


/*==============================
P. DIVI
==============================*/

#diviBtn{

    background:#6B7A5A;

}

#diviBtn:hover{

    background:#59664B;

}


/*==============================
P. ASTRA
==============================*/

#astraBtn{

    background:#3B2F2F;

}

#astraBtn:hover{

    background:#2B2222;

}


/*=========================================
BOTONES DEL PROYECTO
=========================================*/

.project-buttons{

    display:flex;

    gap:12px;

}

.project-buttons button{

    width:110px;

    height:42px;

    border-radius:12px;

    cursor:pointer;

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

    font-weight:600;

    font-size:15px;

    transition:all .30s ease;

    background:transparent;

}

/*==============================
P. FIGMA
==============================*/

#figmaBtn{

    background:#d8bc7a;

    color:#ffff;

    border:2px solid #d8bc7a;

}

#figmaBtn:hover{

    background:#d9b55f;

    color:#503333;
    
    border:2px solid #d9b55f;
    
    transform:translateY(-2px);

    box-shadow:0 6px 12px rgba(0,0,0,.15);

}

#figmaBtn:active{

    transform:translateY(1px);

}


/*==============================
P. DIVI
==============================*/

#diviBtn{

    background:#59664b;

    color:#ffffff;

    border:2px solid #59664b;

}

#diviBtn:hover{

    background:#5d7543;

    border-color:#59664b;

    color:#ffffff;
    
    border:2px solid #5d7543;

    transform:translateY(-2px);

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

}

#diviBtn:active{

    transform:translateY(1px);

}


/*==============================
P. ASTRA
==============================*/

#astraBtn{

    background:#3b2f2f;

    color:#ffffff;

    border:2px solid #3b2f2f;

}

#astraBtn:hover{

    background:#523232;

    border:2px solid #523232;

    color:#ffffff;

    transform:translateY(-2px);

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

}

#astraBtn:active{

    transform:translateY(1px);

}

/* Solo para la página de inicio */

.home .top-actions{

    position:absolute;

    top:90px;

    left:0;

    z-index:100;

}






/*=========================================
EN NUESTRA CAFETERÍA ENCONTRARÁS
=========================================*/


.section-title{

    text-align:center;

    font-size:36px;

    font-weight:700;

    color:#3b2f2f;

    margin-bottom:18px;

}

.section-description{

    width:700px;

    max-width:100%;

    margin:0 auto 60px;

    text-align:center;

    font-size:16px;

    color:#6d6d6d;

    line-height:1.7;

}

.services{

    padding:30px 0;

    background:#ffffff;

}

.services-grid{

    display:grid;

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

    gap:18px;

    text-align:center;

}

.service-card{

    padding:0;

}

.service-card img{

    width:100%;

    height:150px;

    object-fit:cover;

}

.service-card h3{

    margin-top:15px;

    font-size:18px;

    color:#3b2f2f;

}

.service-card p{

    margin-top:8px;

    font-size:14px;

    line-height:1.6;

    color:#555;

}

/*=========================================
SOBRE NOSOTROS
=========================================*/

.about{

    padding:50px 0;

    background:#6b7a5a;

}

.about-content{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:50px;

    align-items:center;

}

.about-image > img:first-child{

    width:100%;

    border-radius:8px;

    display:block;

}

.about-subtitle{

    display:block;

    font-size:14px;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:1px;

    color:#ffffff;

    margin-bottom:12px;

}

.about-text h2{

    font-size:42px;

    line-height:1.2;

    color:#ffffff;

    margin-bottom:22px;

    font-weight:700;

}

.about-text p{

    font-size:16px;

    line-height:1.8;

    color:#ffffff;

    margin-bottom:16px;

}

.btn-about{

    display:inline-block;

    margin-top:15px;

    padding:12px 28px;

    border:2px solid #ffffff;

    border-radius:8px;

    color:#ffffff;

    font-weight:600;

    transition:.3s;

}

.btn-about:hover{

    background:#ffffff;

    color:#6b7a5a;
    
    transform:translateY(-2px);

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

}


/*GALA*/

.about-image{

    position:relative;

}


.gala-about{

    position:absolute;

    width:120px;

    left:-80px;

    bottom:-5px;

}

.gala-about:hover{

    transform:scale(1.08);

}



/*=========================================
CAFÉ, BEBIDAS Y DELICIOSOS MOMENTOS
=========================================*/
/*=========================================
VISTA PREVIA DEL MENÚ
=========================================*/

/*=========================================
NUESTRO MENÚ
=========================================*/

.menu-preview{

    padding:90px 0;

    background:#ffffff;

}

.menu-preview-content{

    display:grid;

    grid-template-columns:500px 1fr;

    gap:70px;

    align-items:center;

}


/*=========================================
GALERÍA DEL MENÚ
=========================================*/

.menu-gallery{

    position:relative;

    width:100%;

    height:560px;

}

.menu-photo{

    position:absolute;

    width:230px;

    height:170px;

    object-fit:cover;

    border-radius:18px;

    background:#fff;

    padding:10px;

    box-shadow:0 15px 35px rgba(0,0,0,.18);

    transition:.45s;

}

.menu-photo:hover{

    transform:scale(1.05);

    z-index:100;

}






.photo1{

    top:0;

    left:20px;

    transform:rotate(-9deg);

}

.photo2{

    top:80px;

    left:190px;

    transform:rotate(8deg);

}

.photo3{

    top:250px;

    left:30px;

    transform:rotate(-6deg);

}

.photo4{

    top:330px;

    left:200px;

    transform:rotate(10deg);

}



/*=========================================
CUANDO SE SELECCIONA UNA CATEGORÍA
=========================================*/
/*=========================================
CAFÉS
=========================================*/

.menu-gallery.gallery-cafes .photo1{

    top:20px;
    left:20px;
    transform:rotate(-5deg);

}

.menu-gallery.gallery-cafes .photo2{

    top:170px;
    left:90px;
    transform:rotate(5deg);

}

.menu-gallery.gallery-cafes .photo3{

    top:320px;
    left:160px;
    transform:rotate(-4deg);

}


/*=========================================
BEBIDAS
=========================================*/

.menu-gallery.gallery-bebidas .photo1{

    top:20px;
    left:180px;
    transform:rotate(7deg);

}

.menu-gallery.gallery-bebidas .photo2{

    top:170px;
    left:20px;
    transform:rotate(-6deg);

}

.menu-gallery.gallery-bebidas .photo3{

    top:320px;
    left:180px;
    transform:rotate(5deg);

}


/*=========================================
POSTRES
=========================================*/

.menu-gallery.gallery-postres .photo1{

    top:20px;
    left:110px;
    transform:rotate(-4deg);

}

.menu-gallery.gallery-postres .photo2{

    top:200px;
    left:0;
    transform:rotate(6deg);

}

.menu-gallery.gallery-postres .photo3{

    top:200px;
    left:220px;
    transform:rotate(-6deg);

}


/*=========================================
SNACKS
=========================================*/

.menu-gallery.gallery-snacks .photo1{

    top:20px;
    left:220px;
    transform:rotate(6deg);

}

.menu-gallery.gallery-snacks .photo2{

    top:170px;
    left:110px;
    transform:rotate(-5deg);

}

.menu-gallery.gallery-snacks .photo3{

    top:320px;
    left:0;
    transform:rotate(5deg);

}


/*=========================================
OCULTAR LA CUARTA FOTO
=========================================*/

.menu-gallery.gallery-cafes .photo4,
.menu-gallery.gallery-bebidas .photo4,
.menu-gallery.gallery-postres .photo4,
.menu-gallery.gallery-snacks .photo4{

    opacity:0;

    visibility:hidden;

    transform:scale(.8);

}

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

.menu-preview-text h2{

    font-size:42px;

    color:#3b2f2f;

    margin:15px 0;

}

.menu-preview-text p{

    line-height:1.8;

    color:#666;

    margin-bottom:35px;

}


/*=========================================
CATEGORÍAS
=========================================*/

.menu-categories{

    display:grid;

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

    gap:16px;

    margin-bottom:35px;

}

.category{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:16px;

    border:none;

    border-radius:12px;

    background:#faf5eb;

    color:#3b2f2f;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

}

.category:hover{

    background:#6b7a5a;

    color:#fff;

    transform:translateY(-3px);

}

.category.active{

    background:#6b7a5a;

    color:#fff;

}


/*=========================================
BOTÓN DESCARGAR
=========================================*/

.menu-preview .btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    margin-top:10px;

    padding:16px 32px;

    border-radius:12px;

    font-size:17px;

    font-weight:600;

    text-decoration:none;

}


/*=========================================
RESERVA
=========================================*/

.reservation{

    padding:90px 0;

    background:#f8f5ef;
}

.reservation-content{

    display:grid;

    grid-template-columns:1fr 500px;

    gap:60px;

    align-items:center;

}

.reservation-info h2{

    font-size:42px;

    color:#3b2f2f;

    margin:15px 0;

}

.reservation-info p{

    color:#666;

    line-height:1.8;

}

.reservation-form{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.reservation-form input,
.reservation-form select,
.reservation-form textarea{

    width:100%;

    padding:15px 18px;

    border:2px solid #ece7df;

    border-radius:12px;

    background:#ffffff;

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

    font-size:15px;

    outline:none;

    transition:.3s;

}

.reservation-form input:focus,
.reservation-form select:focus,
.reservation-form textarea:focus{

    border-color:#6b7a5a;

}

.reservation-form textarea{

    resize:none;

}

.reservation-form button{

    align-self:flex-start;

}

/*=========================================
ELLOS BUSCAN UN HOGAR
=========================================*/



.adoption .section-title{

    text-align:center;

    font-size:36px;

    font-weight:700;

    color:#ffffff;

    margin-bottom:18px;

}

.adoption .section-description{

    max-width:700px;

    margin:0 auto 50px;

    text-align:center;

    font-size:16px;

    line-height:1.7;

    color:#ffffff;

}

.adoption-grid{

    display:grid;

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

    gap:25px;

}

.cat-card{

    text-align:center;

}

.cat-card img{

    width:100%;

    height:280px;

    object-fit:cover;

    border-radius:10px;

}

.cat-card h3{

    margin-top:18px;

    font-size:20px;

    color:#ffffff;

    font-weight:600;

}

.cat-card span{

    display:block;

    margin-top:6px;

    font-size:15px;

    color:#ffffff;

}

.adoption-button{

    text-align:center;

    margin-top:45px;

}

.btn-adoption{

    background:transparent;

    border:2px solid #ffffff;

    display:inline-block;

    padding:10px 25px;

    border-radius:8px;

    color:#ffffff;

    font-weight:600;

    transition:.3s;

}

.btn-adoption:hover{

    background:#ffffff;

    color:#6b7a5a;
    
    border:2px solid #ffffff;

    border-radius:8px;

    transform:translateY(-2px);

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

}

.adoption{

    padding:30px 0;

    background:#6b7a5a;

}

.adoption-content{

    display:grid;

    grid-template-columns:360px 1fr;

    gap:50px;

    align-items:start;

}

.adoption-gallery figcaption{

    margin-top:12px;

    font-weight:600;

    color: #ffffff

}

.adoption-info h2{

    font-size:30px;

    line-height:1.2;

    color:#ffffff;

    margin-bottom:5px;

}

.adoption-info p{

    font-size:15px;

    line-height:1.2;

    margin-bottom:20px;

    color: #ffffff

}

.adoption-gallery{

    display:grid;

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

    gap:18px;

}

.adoption-gallery figure{

    text-align:center;

}

.adoption-gallery img{

    width:auto;

    height:180px;

    object-fit:cover;

}

/*=========================================
¡AYÚDANOS A CAMBIAR MÁS VIDAS!
=========================================*/

.support{

    padding:40px 0;

    background:
        linear-gradient(rgba(39, 38, 38, 0.45),rgba(0,0,0,.45)),
        url("../img/banner.png");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

}

.support-content{

    display:grid;

    grid-template-columns:1fr 180px;

    align-items:center;

    gap:40px;

}

.support-text h2{

    font-size:40px;

    color:#ffffff;

    margin-bottom:5px;

    font-weight:700;

}

.support-text p{

    font-size:18px;

    color:#ffffff;

}

.support-buttons{

    display:flex;

    flex-direction:column;

    align-items:flex-end;

    gap:15px;

    margin-top:-100px;

}

.support-buttons a{

    width:170px;

    text-align:center;

    padding:12px 20px;

    border:2px solid #ffffff;

    border-radius:8px;

    color:#ffffff;

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

    font-weight:600;

    transition:.3s;

}

.support-buttons a:hover{

    background:#ffffff;

    color:#3b2f2f;

}

/*=========================================
FOOTER
=========================================*/

.footer{

    position:relative;

    background:#221818;

    color:#ffffff;

    padding:50px 0 20px;
}

.footer-content{

    display:grid;

    grid-template-columns:200px 130px 200px 200px 1fr;

    gap:20px;

    align-items:flex-start;

}

.footer-logo img{

    width:120px;

    margin-bottom:15px;

}

.footer-logo p{

    font-size:15px;

    font-weight:600;

}

.footer-links h3{

    font-size:13px;

    margin-bottom:5px;

    color:#ffffff;

}

.footer-links p{
    
    margin-bottom:0px;

    font-size:12px;

    color:#e9e9e9;

}

.footer-policy p{
    
    margin-bottom:0px;

    font-size:12px;

    color:#e9e9e9;

}

.footer-hours p{

    margin-bottom:0px;

    font-size:12px;

    color:#e9e9e9;

}

.footer-policy h3{

    font-size:13px;

    margin-bottom:5px;

    color:#ffffff;

}

.footer-hours h3{

    font-size:13px;

    margin-bottom:5px;

    color:#ffffff;

}

.footer-complaints{

    margin-top:20px;

}

.footer-complaints h3{

    font-size:12px;

    margin-bottom:5px;

    color:#ffffff;

}

.footer-complaints img{

    width:100px;          /* Un poquito más pequeña */

    display:block;

    transition:.30s ease;

}

.footer-complaints img:hover{

    transform:scale(1.05);

}

.footer-map iframe{

    border-radius:10px;

}



.footer ul{

    list-style:none;

}

.footer ul li{
    font-size:12px; /* medida detexto del footer*/

    margin-bottom:0px; /*margen de los links de li*/

}

.footer a{

    color:#e9e9e9;

    transition:.3s;

}

.footer a:hover{

    color:#faf5eb;

}


.footer-copy{

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

    padding:10px;

    text-align:center;

    color:#d8d8d8;

    font-size:12px;
    
    height:10px;      /* Puedes subirlo a 60 o 70 px */


}

.footer-copy p{

    margin:0;

    line-height:1;

}
/*=========================================
GALA
=========================================*/

.gala-footer{

    position:relative;
    height:0;
    z-index:10;


}

.gala-footer img{

    position:absolute;

    right:0;      /* Más a la derecha */

    top:0;      /* Se sienta sobre el footer */

    width:150px;

    transition:.35s ease;

}

.gala-footer img:hover{

    transform:translateY(-8px) rotate(-4deg);

}


/*=========================================
PÁGINA FIGMA
=========================================*/

/*=========================================
HERO FIGMA
=========================================*/

.figma-hero{

    background:#faf5eb;

    padding:80px 0;

}

.figma-hero-content{

    display:grid;

    grid-template-columns:1fr 480px;

    gap:70px;

    align-items:center;

}

.figma-tag{

    display:inline-block;

    background:#6b7a5a;

    color:#fff;

    padding:8px 18px;

    border-radius:30px;

    font-size:14px;

    margin-bottom:20px;

}

.figma-text h1{

    font-size:52px;

    color:#3b2f2f;

    line-height:1.2;

    margin-bottom:22px;

}

.figma-text p{

    font-size:18px;

    color:#666;

    line-height:1.8;

    margin-bottom:35px;

}

.figma-preview{

    text-align:right;

}

.figma-preview img{

    width:100%;

    border-radius:15px;

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

}

/*=========================================
FILTROS
=========================================*/

.figma-filter{
    background:#fff;
    padding:30px 0;
}

.filter-content{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.filter-buttons{
    display:flex;
    align-items:center;
    gap:15px;
}

.filter-buttons span{
    font-weight:600;
    color:#3b2f2f;
}

.filter-buttons button{
    padding:12px 22px;
    border-radius:12px;
    border:2px solid #d8d8d8;
    background:#fff;
    cursor:pointer;
    transition:.3s;
}

.filter-buttons button:hover,
.filter-buttons button.active{
    background:#3b2f2f;
    color:#fff;
    border-color:#3b2f2f;
}

.filter-search input{
    width:330px;
    height:45px;
    padding:0 20px;
    border:2px solid #ddd;
    border-radius:25px;
}
/*=========================================
GALERÍA
=========================================*/

.figma-gallery{

    padding:70px 0;

    background:#faf5eb;

}

.gallery-grid{

    display:grid;

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

    gap:30px;

}

.wireframe-card{

    background:#ffffff;

    border-radius:15px;

    overflow:hidden;

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

    transition:.3s;

}

.wireframe-card:hover{

    transform:translateY(-6px);

    box-shadow:0 18px 35px rgba(0,0,0,.15);

}

.card-image{

    height:230px;

    overflow:hidden;

}

.card-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    cursor:pointer;

    transition:.35s;

}

.card-image img:hover{

    transform:scale(1.05);

}

.card-info{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px;

}

.card-info h3{

    color:#3b2f2f;

    font-size:20px;

}

.view-btn{

    background:#6b7a5a;

    color:#fff;

    border:none;

    padding:10px 16px;

    border-radius:8px;

    cursor:pointer;

    transition:.3s;

}

.view-btn:hover{

    background:#3b2f2f;

}

/*=========================================
MODAL
=========================================*/

.modal{

    display:none;

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.88);

    justify-content:center;

    align-items:center;

    z-index:9999;

}

.modal img{

    max-width:90%;

    max-height:90vh;

    border-radius:12px;

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

}

.close-modal{

    position:absolute;

    top:25px;

    right:40px;

    color:#fff;

    font-size:50px;

    cursor:pointer;

    transition:.3s;

}

.close-modal:hover{

    transform:scale(1.2);

}

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

.figma-end{

    background:#ffffff;

    padding:80px 0;

    border-top:1px solid #ece7df;

}

.figma-end-content{

    display:flex;

    justify-content:flex-start;

    align-items:center;

    gap:80px;
    
    flex:1;

}

.figma-subtitle{

    display:inline-block;

    margin-bottom:12px;

    color:#6b7a5a;

    font-weight:700;

    letter-spacing:1px;

}

.figma-end h2{

    font-size:42px;

    color:#3b2f2f;

    margin-bottom:18px;

}

.figma-end p{

    font-size:17px;

    color:#666;

    line-height:1.8;

    max-width:700px;

}

.figma-end-content > div{

    flex:1;

}

>.figma-end-content .btn-primary{

    flex-shrink:0;

}


/*=========================================
BASE RESPONSIVE
=========================================*/

img{

    max-width:100%;

    height:auto;

}

iframe{

    max-width:100%;

}

button{

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

    box-sizing:border-box;

}

/*=========================================
HERO HISTORIA
=========================================*/

.history-hero{

    padding:120px 0;

    background:#faf5eb;

}

.history-hero-content{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.history-tag{

    display:inline-block;

    padding:10px 22px;

    background:#6b7a5a;

    color:#fff;

    border-radius:50px;

    font-size:14px;

    letter-spacing:2px;

    margin-bottom:25px;

    text-transform:uppercase;

}

.history-text h1{

    font-size:56px;

    line-height:1.15;

    color:#3b2f2f;

    margin-bottom:30px;

}

.history-text p{

    font-size:18px;

    line-height:1.9;

    color:#666;

    margin-bottom:40px;

}

.history-buttons{

    display:flex;

    gap:18px;

}

.history-image{

    display:flex;

    justify-content:center;

}

.history-image img{

    width:100%;

    max-width:560px;

    border-radius:30px;

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

}

/*=========================================
NUESTRA HISTORIA
=========================================*/

.history-story{

    padding:120px 0;

    background:#ffffff;

}

.story-content{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.story-image img{

    width:100%;

    border-radius:25px;

    box-shadow:0 20px 45px rgba(0,0,0,.15);

}


.story-text h2{

    font-size:42px;

    color:#3b2f2f;

    margin-bottom:30px;

    line-height:1.2;

}

.story-text p{

    font-size:17px;

    color:#666;

    line-height:1.9;

    margin-bottom:22px;

}

/*=========================================
NUESTRA MISIÓN
=========================================*/

.mission{

    padding:90px 0;

    background:#faf5eb;

}

.section-title{

    text-align:center;

    max-width:760px;

    margin:auto auto 70px;

}

.section-title span{

    display:inline-block;

    color:#6b7a5a;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:18px;

}

.section-title h2{

    font-size:46px;

    color:#3b2f2f;

    margin-bottom:20px;

}

.section-title p{

    font-size:18px;

    color:#666;

    line-height:1.8;

}

.mission-grid{

    display:grid;

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

    gap:35px;

}

.mission-card{

    background:#ffffff;

    border-radius:25px;

    padding:45px 35px;

    text-align:center;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

    transition:.35s;

}

.mission-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 45px rgba(0,0,0,.15);

}

.mission-icon{

    width:90px;
    height:90px;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:28px;

    transition:.35s;

}

.mission-icon img{

    width:90px;
    height:90px;

    object-fit:contain;

    transition:.35s;

}

.mission-card:hover .mission-icon{

    transform:scale(1.08);

}

.mission-card:hover .mission-icon img{

    transform:rotate(0);

}

.mission-card h3{

    color:#3b2f2f;

    font-size:26px;

    margin-bottom:18px;

}

.mission-card p{

    color:#666;

    line-height:1.8;

}

/*=========================================
¿POR QUÉ ELEGIRNOS?
=========================================*/

.why-us{

    padding:50px 0;

    background:#6b7a5a;

}

.why-content{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

.why-image img{

    width:100%;

    border-radius:25px;

    box-shadow:0 20px 45px rgba(0,0,0,.15);

}

.why-text .section-subtitle{

    color:#ffffff;

}


.why-grid{

    display:grid;

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

    gap:20px;

}

.why-card{

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

    border:1px solid rgba(255,255,255,.20);

    backdrop-filter:blur(8px);

    border-radius:18px;

    padding:30px;

    text-align:center;

    transition:.35s;

}

.why-card:hover{

    transform:translateY(-8px);

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

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

}

.why-card h3{

    font-size:42px;

    color:#ffffff;

    margin-bottom:12px;

}

.why-card span{

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

    font-weight:600;

    line-height:1.6;

}

/*=========================================
TÍTULOS DE SECCIÓN
=========================================*/

.section-subtitle{

    display:inline-block;

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:6px;

    color:#6b7a5a;

}

.section-heading{

    font-size:46px;

    font-weight:700;

    color:#3b2f2f;

    line-height:1.2;

    margin-bottom:0 0 18px;

}

.section-description{

    width:100%;

    max-width:none;

    font-size:17px;

    line-height:1.9;

    color:#666;

    text-align:left;

    margin:0 0 35px;

}

.why-us .section-subtitle,
.why-us .section-heading{

    color:#fff;

}

.why-us .section-description{

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

}

.why-text{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

}

.story-text{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

}

/*=========================================
NUESTROS MICHIS
=========================================*/

.our-cats{

    padding:120px 0;

    background:#faf5eb;

}

.section-header{

    text-align:center;

    max-width:760px;

    margin:0 auto 70px;

}

.section-header .section-description{

    margin:0 auto;

    text-align:center;

    max-width:700px;

}

.cats-grid{

    display:grid;

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

    gap:30px;

}

.cat-card{

    background:#ffffff;

    border-radius:25px;

    overflow:hidden;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

    transition:.35s;

}

.cat-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 45px rgba(0,0,0,.15);

}

.cat-card img{

    width:100%;

    height:300px;

    object-fit:cover;

}

.cat-card h3{

    margin:25px 25px 8px;

    font-size:28px;

    color:#3b2f2f;

}

.cat-card span{

    display:block;

    margin:0 25px;

    color:#6b7a5a;

    font-weight:600;

}

.cat-card p{

    margin:18px 25px 30px;

    color:#666;

    line-height:1.8;

}

/*=========================================
NUESTRO COMPROMISO
=========================================*/

.commitment{

    padding:90px 0;

    background:#ffffff;

}

.commitment-content{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.commitment-image img{

    width:100%;

    border-radius:25px;

    box-shadow:0 20px 45px rgba(0,0,0,.15);

}

.commitment-text{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

}

.commitment-list{

    display:grid;

    gap:18px;

    margin:5px 0;

}

.commitment-list div{

    background:#faf5eb;

    padding:18px 22px;

    border-left:5px solid #6b7a5a;

    border-radius:12px;

    color:#3b2f2f;

    font-weight:500;

}

.commitment-buttons{

    display:flex;

    gap:18px;

    margin-top:20px;

}

/*=========================================
HERO ADOPCIONES
=========================================*/

.adoption-hero{

    padding:90px 0;

    background:#faf5eb;

}

.adoption-hero-content{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.adoption-image img{

    width:100%;

    border-radius:25px;

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

}

.adoption-text{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

}

.adoption-text h1{

    font-size:58px;

    color:#3b2f2f;

    line-height:1.15;

    margin:8px 0 20px;

}

.adoption-text p{

    font-size:18px;

    line-height:1.9;

    color:#666;

    margin-bottom:35px;

}

/*=========================================
NUESTROS MICHIS
=========================================*/

.cats-section{

    padding:120px 0;

    background:#ffffff;

}

.cats-filter{

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

    margin:50px 0 60px;

}

.filter{

    padding:14px 28px;

    border:none;

    border-radius:50px;

    background:#faf5eb;

    color:#3b2f2f;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:.35s;

}

.filter:hover{

    background:#6b7a5a;

    color:#ffffff;

}

.filter.active{

    background:#6b7a5a;

    color:#ffffff;

}

.cats-grid{

    display:grid;

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

    gap:35px;

}

/*=========================
TARJETAS
=========================*/

.cat-card{

    background:#ffffff;

    border-radius:22px;

    overflow:hidden;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

    transition:.35s;

    cursor:pointer;

}

.cat-card:hover{

    transform:translateY(-10px);

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

}

.cat-card img{

    width:100%;

    height:270px;

    object-fit:cover;

    display:block;

}

.cat-info{

    padding:24px;

}

/*=========================
NOMBRE + CORAZÓN
=========================*/

.cat-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:10px;

}

.cat-header h3{

    font-size:28px;

    color:#3b2f2f;

    margin:0;

}

.status-heart{

    font-size:24px;

    transition:.3s;

}

.available{

    color:#e53935;

}

.pending{

    color:#f4b400;

}

.adopted{

    color:#bdbdbd;

}

/*=========================
DATOS
=========================*/

.cat-data{

    display:block;

    color:#6b7a5a;

    font-weight:600;

    margin-bottom:12px;

}

.cat-info p{

    color:#666;

    line-height:1.7;

    margin-bottom:22px;

}

/*=========================
BOTÓN
=========================*/

.cat-info .btn-primary{

    width:100%;

    text-align:center;

}

/*=========================
OCULTAR TARJETAS
=========================*/

.cat-card.hidden{

    display:none;

}

/*=========================
RESPONSIVE
=========================*/

@media(max-width:1100px){

    .cats-grid{

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

    }

}

@media(max-width:700px){

    .cats-grid{

        grid-template-columns:1fr;

    }

}


/*=========================================
MODAL ADOPCIONES
=========================================*/

.adoption-modal{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:rgba(0,0,0,.70);

    display:none;

    justify-content:center;

    align-items:center;

    padding:30px;

    z-index:9999;

}

.adoption-modal.active{

    display:flex;

    animation:fadeModal .3s ease;

}

.modal-content{

    width:100%;

    max-width:1050px;

    background:#ffffff;

    border-radius:25px;

    overflow:hidden;

    position:relative;

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

}

.modal-grid{

    display:grid;

    grid-template-columns:420px 1fr;

}

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

.modal-image{

    background:#faf5eb;

}

.modal-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

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

.modal-info{

    padding:45px;

}

.modal-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

}

.modal-top h2{

    font-size:42px;

    color:#3b2f2f;

}

/*=====================
ESTADO
======================*/

.status{

    padding:10px 18px;

    border-radius:40px;

    font-size:14px;

    font-weight:600;

}

.status.available{

    background:#ffe9e9;

    color:#d32f2f;

}

.status.pending{

    background:#fff6da;

    color:#d9a400;

}

.status.adopted{

    background:#eeeeee;

    color:#777;

}

/*=====================
TARJETAS
======================*/

.modal-cards{

    display:grid;

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

    gap:18px;

    margin-bottom:35px;

}

.info-card{

    background:#faf5eb;

    border-radius:15px;

    padding:18px;

}

.info-card h4{

    color:#6b7a5a;

    margin-bottom:8px;

}

.info-card span{

    color:#3b2f2f;

}

/*=====================
HISTORIA
======================*/

.modal-history h3{

    color:#3b2f2f;

    margin-bottom:15px;

}

.modal-history p{

    color:#666;

    line-height:1.9;

    margin-bottom:35px;

}

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

.modal-buttons{

    display:flex;

    gap:18px;

}

/*=====================
CERRAR
======================*/

.modal-close{

    position:absolute;

    top:18px;

    right:18px;

    width:45px;

    height:45px;

    border:none;

    border-radius:50%;

    background:#ffffff;

    box-shadow:0 5px 18px rgba(0,0,0,.15);

    cursor:pointer;

    font-size:28px;

    transition:.3s;

}

.modal-close:hover{

    background:#6b7a5a;

    color:#ffffff;

}

/*=====================
ANIMACIÓN
======================*/

@keyframes fadeModal{

    from{

        opacity:0;

        transform:scale(.96);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

/*=====================
RESPONSIVE
======================*/

@media(max-width:900px){

    .modal-grid{

        grid-template-columns:1fr;

    }

    .modal-image{

        height:320px;

    }

    .modal-info{

        padding:30px;

    }

    .modal-cards{

        grid-template-columns:1fr;

    }

    .modal-buttons{

        flex-direction:column;

    }

}


/*=========================================
REQUISITOS DE ADOPCIÓN
=========================================*/

.requirements{

    padding:120px 0;

    background:#faf5eb;

}

.requirements-grid{

    display:grid;

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

    gap:30px;

    margin-top:60px;

}

.requirement-card{

    background:#ffffff;

    border-radius:22px;

    padding:35px;

    text-align:center;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

    transition:.35s;

}

.requirement-card:hover{

    transform:translateY(-8px);

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

}

.requirement-card img{

    display:block;

    width:70px;

    height:70px;

    object-fit:contain;

    margin:0 auto 22px;

}

.requirement-card h3{

    font-size:24px;

    color:#3b2f2f;

    margin-bottom:15px;

}

.requirement-card p{

    color:#666;

    line-height:1.8;

}

@media(max-width:1000px){

    .requirements-grid{

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

    }

}

@media(max-width:700px){

    .requirements-grid{

        grid-template-columns:1fr;

    }

}

/*=========================================
HISTORIAS FELICES
=========================================*/

.happy-stories{

    padding:120px 0;

    background:#ffffff;

}

.stories-slider{

    display:flex;

    align-items:center;

    gap:25px;

    margin-top:60px;

}

.stories-wrapper{

    flex:1;

    overflow:hidden;

    position:relative;

}

.story-slide{

    display:none;

    grid-template-columns:420px minmax(0,1fr);

    gap:45px;

    align-items:center;

    background:#faf5eb;

    border-radius:30px;

    padding:35px;

    box-shadow:0 18px 45px rgba(0,0,0,.08);

}

.story-slide.active{

    display:grid;

}

.story-image{

    width:100%;

    height:420px;

}

.story-image img{

    width:auto;

    height:350;

    object-fit:cover;

    border-radius:25px;

}

.story-info{

    width:100%;

    min-width:0;

}

.story-date{

    display:inline-block;

    background:#6b7a5a;

    color:#fff;

    padding:8px 18px;

    border-radius:50px;

    font-size:14px;

    letter-spacing:1px;

    margin-bottom:20px;

}

.story-info h3{

    font-size:42px;

    color:#3b2f2f;

    margin-bottom:20px;

    line-height:1.2;

}

.story-info p{

    font-size:17px;

    color:#666;

    line-height:1.9;

    margin-bottom:25px;

    overflow-wrap:break-word;

    word-break:break-word;

}

.story-stars{

    font-size:24px;

    margin-bottom:18px;

}

.story-info strong{

    display:block;

    font-size:18px;

    color:#3b2f2f;

}

/*=========================
FLECHAS
=========================*/

.story-prev,
.story-next{

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

    background:#6b7a5a;

    color:#fff;

    font-size:26px;

    cursor:pointer;

    transition:.3s;

    flex-shrink:0;

}

.story-prev:hover,
.story-next:hover{

    background:#3b2f2f;

    transform:scale(1.08);

}

/*=========================
DOTS
=========================*/

.story-dots {

    display:flex;

    justify-content:center;

    gap:12px;

    margin-top:35px;

}

.story-dot{

    width:13px;

    height:13px;

    border-radius:50%;

    background:#d4d4d4;

    cursor:pointer;

    transition:.3s;

}

.story-dot.active{

    background:#6b7a5a;

    transform:scale(1.2);

}

/*=========================
RESPONSIVE
=========================*/

@media(max-width:900px){

    .story-slide{

        grid-template-columns:1fr;

    }

    .story-image{

        height:300px;

    }

    .story-info{

        text-align:center;

    }

}

/*=========================================
VOLVER ARRIBA
=========================================*/

.back-to-top{

    position:fixed;

    right:30px;

    bottom:30px;

    width:55px;

    height:55px;

    border-radius:50%;

    background:#6b7a5a;

    color:#ffffff;

    font-size:28px;

    text-decoration:none;

    display:flex;

    justify-content:center;

    align-items:center;

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

    transition:.3s;

    opacity:0;

    visibility:hidden;

    z-index:999;

}

.back-to-top:hover{

    background:#3b2f2f;

    transform:translateY(-5px);

}

.back-to-top.show{

    opacity:1;

    visibility:visible;

}