/**

    @file index.css

    @project Chicky Galery


    Página principal:


        Carrusel


        Galería de obras


        Precios


        Descuentos


        Likes
        */

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

.home-page {
width: 100%;
max-width: 1400px;
margin: 0 auto;
padding: 0 1.5rem 4rem;
box-sizing: border-box;
}

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

.section-title {
text-align: center;

margin: 3rem 0 1.5rem;

font-size: 2rem;

color: var(
    --primary-color,
    #af00a1
);

text-transform: uppercase;

letter-spacing: 1px;

font-weight: 700;

}

/* =========================================================
CARRUSEL
========================================================= */

.carousel-container {

width: 100%;

max-width: 1000px;

height: 500px;

margin: 0 auto 3rem;

position: relative;

overflow: hidden;

border-radius: 20px;

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

background: #111;

}

.carousel {

width: 100%;

height: 100%;

position: relative;

}

.carousel-item {

width: 100%;

height: 100%;

position: absolute;

inset: 0;

display: none;

}

.carousel-item.active {

display: block;

animation:
    carouselFade
    0.6s ease;

}

@keyframes carouselFade {

from {
    opacity: 0;
    transform: scale(1.02);
}

to {
    opacity: 1;
    transform: scale(1);
}

}

/* =========================================================
IMAGEN DEL CARRUSEL
========================================================= */

.slide-image {

width: 100%;

height: 100%;

background-size: cover;

background-position: center;

background-repeat: no-repeat;

position: relative;

}

.slide-image::after {

content: "";

position: absolute;

inset: 0;

background:
    linear-gradient(
        to top,
        rgba(0, 0, 0, 0.9),
        rgba(0, 0, 0, 0.05) 65%
    );

}

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

.slide-info {

position: absolute;

left: 0;

bottom: 0;

width: 100%;

padding: 5rem 2rem 2rem;

box-sizing: border-box;

color: white;

z-index: 2;

display: flex;

flex-direction: column;

align-items: flex-start;

}

.slide-info h3 {

margin: 0;

font-size: 2rem;

color: white;

font-weight: 700;

}

.slide-info .artist-link {

margin-top: 0.3rem;

color: #f1c40f;

font-weight: 600;

text-decoration: none;

}

.slide-info .artist-link {

text-decoration: underline;

}

/* =========================================================
META DEL CARRUSEL
========================================================= */

.slide-meta {

width: 100%;

display: flex;

align-items: center;

justify-content: space-between;

gap: 1rem;

margin-top: 1rem;

}

.slide-price {

font-size: 1.4rem;

font-weight: 700;

}

.slide-like-button {

border: none;

background: rgba(255, 255, 255, 0.15);

backdrop-filter: blur(8px);

color: white;

padding: 0.65rem 1rem;

border-radius: 50px;

cursor: pointer;

font-size: 1rem;

transition:
    transform 0.2s ease,
    background 0.2s ease;

}

.slide-like-button {

transform: scale(1.05);

background: rgba(255, 255, 255, 0.25);

}

.slide-like-button.liked {

color: #ff4f8b;

}

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

.price-container {

display: flex;

align-items: center;

flex-wrap: wrap;

gap: 0.6rem;

}

.current-price {

font-size: 1.2rem;

font-weight: 800;

color: var(
    --primary-color,
    #af00a1
);

}

.original-price {

font-size: 0.95rem;

color: #888;

text-decoration: line-through;

}

.discount-badge {

display: inline-flex;

align-items: center;

justify-content: center;

padding: 0.25rem 0.55rem;

border-radius: 20px;

background: #e74c3c;

color: white;

font-size: 0.75rem;

font-weight: 700;

}

/* =========================================================
GALERÍA
========================================================= */

.galeria-grid {

display: grid;

grid-template-columns:
    repeat(
        auto-fill,
        minmax(250px, 1fr)
    );

gap: 1.5rem;

width: 100%;

}

/* =========================================================
CARD DE OBRA
========================================================= */

.obra-card {

position: relative;

background: white;

border-radius: 16px;

overflow: hidden;

box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.10);

transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;

}

.obra-card {

transform: translateY(-6px);

box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.16);

}

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

.obra-image-container {

position: relative;

width: 100%;

aspect-ratio: 1 / 1;

overflow: hidden;

background: #f2f2f2;

}

.obra-card img {

width: 100%;

height: 100%;

object-fit: cover;

display: block;

transition:
    transform 0.4s ease;

}

.obra-card img {

transform: scale(1.04);

}

/* =========================================================
LIKE
========================================================= */

.like-button {
position: absolute;
top: 14px;
right: 14px;

width: 52px;
height: 52px;

border: none;
border-radius: 50%;

background: rgba(255, 255, 255, 0.88);

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

cursor: pointer;

z-index: 20;

transition:
    transform 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease;

}

.like-button i {
font-size: 22px;

color: #777;

transition:
    transform 0.25s ease,
    color 0.25s ease,
    filter 0.25s ease;

}

/* Hover */

.like-button {
transform: scale(1.12);

background: rgba(255, 255, 255, 0.98);

box-shadow:
    0 8px 25px rgba(0, 0, 0, 0.25);

}

/* Corazón seleccionado */

.like-button.liked {
background: #fff;

box-shadow:
    0 5px 25px rgba(220, 40, 130, 0.35);

}

.like-button.liked i {
color: #e62991;

animation: heartPop 0.45s ease;

}

/* Animación principal */

@keyframes heartPop {

0% {
    transform: scale(0.5);
}

45% {
    transform: scale(1.45);
}

70% {
    transform: scale(0.85);
}

100% {
    transform: scale(1);
}

}

/* Cuando mantienes presionado */

.like-button.pressing {
transform: scale(0.88);
}

/* Pequeño efecto alrededor del corazón */

.like-button.liked::after {
content: '';

position: absolute;

inset: -6px;

border-radius: 50%;

border: 2px solid rgba(230, 41, 145, 0.35);

animation: likeRing 0.55s ease forwards;

pointer-events: none;

}

@keyframes likeRing {

0% {
    opacity: 1;
    transform: scale(0.7);
}

100% {
    opacity: 0;
    transform: scale(1.35);
}

}

/* =========================================================
OBRA CARD - ZOOM
========================================================= */

.obra-card {
position: relative;

overflow: visible;

transition:
    transform 0.35s ease,
    z-index 0s linear 0.35s;

}

/* Contenedor de imagen */

.obra-image-container {
position: relative;

overflow: hidden;

border-radius: 18px;

transition:
    transform 0.45s cubic-bezier(.2,.8,.2,1),
    box-shadow 0.45s ease;

}

/* Imagen */

.obra-image-container img {
width: 100%;
height: 100%;

object-fit: cover;

display: block;

transition:
    transform 0.55s cubic-bezier(.2,.8,.2,1),
    filter 0.45s ease;

}

/* Hover */

.obra-card {
z-index: 100;
}

.obra-card .obra-image-container {
transform: scale(1.08);

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

}

.obra-card .obra-image-container img {
transform: scale(1.15);
}
/* =========================================================
DESCUENTO SOBRE IMAGEN
========================================================= */

.obra-discount-badge {

position: absolute;

top: 12px;

left: 12px;

z-index: 3;

padding: 0.4rem 0.65rem;

border-radius: 20px;

background: #e74c3c;

color: white;

font-size: 0.8rem;

font-weight: 800;

}

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

.obra-info {

padding: 1rem 1.1rem 1.2rem;

}

.obra-info h3 {

margin: 0;

font-size: 1.1rem;

color: #222;

line-height: 1.3;

}

.obra-info .artist-link {

display: inline-block;

margin-top: 0.35rem;

font-size: 0.9rem;

color: #777;

text-decoration: none;

}

.obra-info .artist-link {

color: var(
    --primary-color,
    #af00a1
);

}

/* =========================================================
PRECIO EN CARD
========================================================= */

.obra-price {

margin-top: 0.8rem;

}

.obra-price .current-price {

font-size: 1.2rem;

}

.obra-price .original-price {

font-size: 0.85rem;

}

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

.btn-buy-artwork {

width: 100%;

margin-top: 1rem;

padding: 0.7rem 1rem;

border: none;

border-radius: 10px;

background:
    var(
        --primary-color,
        #af00a1
    );

color: white;

font-weight: 700;

cursor: pointer;

transition:
    transform 0.2s ease,
    opacity 0.2s ease;

}

.btn-buy-artwork {

transform: translateY(-1px);

opacity: 0.9;

}

/* =========================================================
ESTADOS
========================================================= */

.empty-state {

width: 100%;

padding: 3rem 1rem;

text-align: center;

color: #777;

}

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

@media (max-width: 768px) {

.home-page {

    padding:
        0 1rem 3rem;

}


.section-title {

    font-size: 1.5rem;

    margin-top: 2rem;

}


.carousel-container {

    height: 420px;

    border-radius: 14px;

}


.slide-info {

    padding:
        4rem 1.2rem 1.2rem;

}


.slide-info h3 {

    font-size: 1.4rem;

}


.galeria-grid {

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

    gap: 0.8rem;

}


.obra-info {

    padding:
        0.8rem;

}


.obra-info h3 {

    font-size: 0.95rem;

}


.btn-buy-artwork {

    font-size: 0.85rem;

}

}

@media (max-width: 480px) {

.carousel-container {

    height: 350px;

}


.galeria-grid {

    grid-template-columns:
        1fr;

}

}

/* =========================================================
CARD - HOVER / ZOOM
========================================================= */

.obra-card {
position: relative;
z-index: 1;

transition:
    transform 0.45s cubic-bezier(.2,.8,.2,1),
    box-shadow 0.45s ease;

transform-origin: center center;

}

/*

    Después de mantener el cursor encima

    durante aproximadamente 650ms.
    */

.obra-card.obra-hover-activo {

transform: scale(1.35);

z-index: 100;

box-shadow:
    0 25px 70px rgba(0, 0, 0, 0.65);

}

/* =========================================================
CONTENEDOR DE IMAGEN
========================================================= */

.obra-image-container {

position: relative;

overflow: hidden;

border-radius: 18px;

}

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

.obra-image-container img {

width: 100%;
height: 100%;

object-fit: cover;

display: block;

transition:
    transform 0.7s cubic-bezier(.2,.8,.2,1),
    filter 0.5s ease;

}

/*

    Cuando la tarjeta hace zoom,

    también acercamos ligeramente la imagen.
    */

.obra-card.obra-hover-activo
.obra-image-container img {

transform: scale(1.08);

filter:
    brightness(0.45)
    saturate(1.1);

}

/* =========================================================
INFORMACIÓN DE DESCRIPCIÓN
========================================================= */

.obra-hover-info {

position: absolute;

inset: 0;

display: flex;

align-items: flex-end;

justify-content: center;

padding: 25px;

opacity: 0;

pointer-events: none;

background:
    linear-gradient(
        to top,
        rgba(15, 12, 20, 0.96) 0%,
        rgba(15, 12, 20, 0.78) 40%,
        rgba(15, 12, 20, 0.15) 100%
    );

transition:
    opacity 0.4s ease;

}

/*

    Aparece solamente después

    del hover prolongado.
    */

.obra-card.obra-hover-activo
.obra-hover-info {

opacity: 1;

}

/* =========================================================
CONTENIDO DEL HOVER
========================================================= */

.obra-hover-content {

width: 100%;

max-height: 80%;

overflow-y: auto;

text-align: left;

color: white;

}

.obra-hover-content h4 {

margin:
    0 0 10px 0;

font-size: 1.35rem;

font-weight: 700;

}

.obra-hover-content p {

margin: 0;

font-size: 0.95rem;

line-height: 1.55;

color: rgba(255,255,255,0.9);

}

/* =========================================================
   BOTÓN DE ME GUSTA (UNIFICADO Y OPTIMIZADO)
   ========================================================= */

.like-button {
    /* Posicionamiento */
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 20;

    /* Dimensiones y Espaciado */
    min-width: 64px;
    height: 46px;
    padding: 0 14px;
    gap: 8px;

    /* Alineación */
    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* Estilo Visual Base (Moderna Transparencia/Blur) */
    background: rgba(22, 18, 28, 0.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    
    /* Tipografía y Cursor */
    color: #ffffff;
    cursor: pointer;
    
    /* Sombras y Transiciones Suaves */
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24);
    transition:
        transform 0.25s cubic-bezier(.2, .8, .2, 1),
        background 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

/* Icono del Corazón */
.like-button i {
    font-size: 21px;
    line-height: 1;
    color: var(--gallery-primary, #ff2bce); /* Usa tu variable o rosa por defecto */
    display: inline-block;
    transition:
        transform 0.25s cubic-bezier(.17, .67, .35, 1.4),
        color 0.25s ease,
        filter 0.25s ease;
}

/* Contador Interno */
.like-count {
    font-size: 0.85rem;
    font-weight: 700;
    color: #ffffff;
    pointer-events: none;
    user-select: none;
}

/* =========================================================
   ESTADOS DE INTERACCIÓN (HOVER, ACTIVE, LIKED)
   ========================================================= */

/* Al pasar el cursor (Hover) */
.like-button:hover {
    transform: translateY(-2px) scale(1.04);
    background: rgba(35, 28, 43, 0.9);
    border-color: color-mix(in srgb, var(--gallery-primary, #ff2bce) 55%, transparent);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.34);
}

.like-button:hover i {
    transform: scale(1.15);
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--gallery-primary, #ff2bce) 65%, transparent));
}

/* Efecto de clic físico al presionar (Active) */
.like-button:active,
.like-button.pressing {
    transform: translateY(0) scale(0.95);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: transform 0.05s ease;
}

/* Estado Activo (Cuando ya se dio Like) */
.like-button.liked {
    background: rgba(35, 22, 42, 0.9);
    border-color: color-mix(in srgb, var(--gallery-primary, #ff2bce) 60%, transparent);
    box-shadow:
        0 0 22px color-mix(in srgb, var(--gallery-primary, #ff2bce) 30%, transparent),
        0 8px 24px rgba(0, 0, 0, 0.28);
}

/* =========================================================
   ANIMACIONES IMPULSADAS POR JAVASCRIPT
   ========================================================= */

/* Animación del Corazón al activarse */
.like-button.like-animate i {
    animation: heartPop 0.5s cubic-bezier(.17, .67, .35, 1.4) forwards;
}

/* Anillo de onda expansiva exterior (Reemplaza al Ripple complejo) */
.like-button.like-animate::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    border: 2px solid var(--gallery-primary, #ff2bce);
    pointer-events: none;
    animation: likeRing 0.55s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

/* Keyframes de las Animaciones */
@keyframes heartPop {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.45); }
    60%  { transform: scale(0.85); }
    100% { transform: scale(1); }
}

@keyframes likeRing {
    0% {
        opacity: 0.8;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(1.3);
    }
}


/* =========================================================
CONTADOR
========================================================= */

.like-count {

position: absolute;

top: 27px;
right: -2px;

min-width: 25px;

padding:
    3px 7px;

border-radius: 20px;

background:
    rgba(30,25,35,0.85);

color: white;

font-size: 0.8rem;

font-weight: 700;

z-index: 21;

}