/* ==========================================
HOME ANKANA
========================================== */

/* ==========================================
HERO PREMIUM CURVO
========================================== */

.hero-home{

width:100%;
padding:1px 0 220px;
overflow:hidden;
position:relative;

}

.carousel-3d-wrapper{

width:100%;
height:650px;

position:relative;

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

perspective:1800px;
    
overflow:hidden;

}

.carousel-spotlight{

position:absolute;

width:700px;
height:700px;

border-radius:50%;

background:radial-gradient(
    circle,
    rgba(214,166,106,.28) 0%,
    rgba(214,166,106,.12) 35%,
    transparent 75%
);

filter:blur(45px);

pointer-events:none;

z-index:1;

}

.carousel-3d{

position:relative;

width:100%;
height:100%;

}

.carousel-item{

position:absolute;

top:50%;
left:50%;

width:220px;
height:300px;

transform-origin:center center;

transition:
    transform .8s ease,
    opacity .8s ease,
    filter .8s ease;

cursor:pointer;

}

.carousel-item img{

width:100%;
height:100%;

object-fit:cover;

border-radius:28px;

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

transition:
    transform .4s ease,
    box-shadow .4s ease,
    filter .4s ease;

}

.carousel-item img{

transform:scale(1.10);

filter:brightness(1.08);

box-shadow:
    0 25px 80px rgba(43,30,24,.25);

}

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

.intro-home{

padding:0 8% 100px;

}

.intro-container{

max-width:950px;

margin:0 auto;

text-align:center;

}

.intro-container h1{

font-family:'Marcellus', serif;

font-size:2.8rem;

color:var(--cafe);

margin-bottom:30px;

line-height:1.3;

}

.intro-container p{

max-width:850px;

margin:0 auto;

font-size:1.08rem;

line-height:2;

color:#5b4537;

}

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

.editorial-section{

width:88%;

margin:0 auto;

display:grid;

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

gap:30px;

padding-bottom:120px;

}

.editorial-card{

position:relative;

overflow:hidden;

border-radius:20px;

text-decoration:none;

box-shadow:
    0 15px 40px rgba(43,30,24,.12);

}

.editorial-card img{

width:100%;

height:500px;

object-fit:cover;

transition:transform .6s ease;

}

.editorial-card img{

transform:scale(1.08);

}

.overlay{

position:absolute;

inset:0;

background:
    linear-gradient(
        to top,
        rgba(43,30,24,.85),
        rgba(43,30,24,.15)
    );

display:flex;

flex-direction:column;

justify-content:flex-end;

padding:35px;

}

.overlay h2{

font-family:'Marcellus', serif;

font-size:2rem;

color:white;

margin-bottom:12px;

}

.overlay p{

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

line-height:1.8;

margin-bottom:20px;

}

.overlay span{

display:inline-flex;

align-items:center;

justify-content:center;

width:fit-content;

padding:12px 24px;

border-radius:999px;

background:var(--dorado);

color:var(--cafe);

font-size:.9rem;

font-weight:600;

}

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

.home-social{

text-align:center;

padding:0 20px 120px;

}

.home-social p{

font-family:'Marcellus', serif;

font-size:1.5rem;

color:var(--cafe);

margin-bottom:35px;

}

.social-icons{

display:flex;

justify-content:center;

gap:30px;

flex-wrap:wrap;

}

.social-icons img{

width:70px;

height:70px;

object-fit:contain;

transition:transform .35s ease;

}

.social-icons a img{

transform:scale(1.12);

}

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

@media(max-width:1000px){

.editorial-section{

    grid-template-columns:1fr;

    width:92%;

}

.editorial-card img{

    height:420px;

}

.intro-container h1{

    font-size:2.2rem;

}

.carousel-item{

    width:250px;

    height:340px;

}

}

@media(max-width:768px){

.carousel-3d-wrapper{

    height:500px;

}

.carousel-item{

    width:200px;

    height:280px;

}

.intro-container h1{

    font-size:1.9rem;

}

.home-social p{

    font-size:1.2rem;

}

.social-icons img{

    width:55px;

    height:55px;

}

}