/* ==========================================================
   GALLERY
   Part 1
========================================================== */

.gallery-body{

    margin:0;

    background:
    radial-gradient(circle at 20% 15%,rgba(255,255,255,.55),transparent 28%),
    radial-gradient(circle at 82% 78%,rgba(221,176,189,.25),transparent 30%),
    linear-gradient(#ebe0dc,#d8c6c2);

}


/* CONTENEDOR */

.gallery-container{

    overflow:hidden;

    background:#f3ece7;

}


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

.gallery-header{

    position:relative;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    min-height:320px;

    padding:55px;

    text-align:center;

    overflow:hidden;

    background:

    repeating-linear-gradient(

        -45deg,

        rgba(219,170,184,.03) 0,

        rgba(219,170,184,.03) 8px,

        transparent 8px,

        transparent 18px

    ),

    linear-gradient(

        #fffaf7,

        #f5e9e6

    );

}


.gallery-header::before{

    content:"";

    position:absolute;

    inset:32px;

    border:1px solid rgba(160,104,122,.22);

    box-shadow:

    inset 0 0 0 8px rgba(255,255,255,.35);

}


.gallery-header>*{

    position:relative;

    z-index:2;

}


.gallery-label{

    margin:0 0 18px;

    padding:7px 20px;

    border-top:1px solid rgba(154,92,112,.25);

    border-bottom:1px solid rgba(154,92,112,.25);

    font-family:"Nunito",sans-serif;

    font-size:10px;

    letter-spacing:4px;

    text-transform:uppercase;

    color:#986779;

}


.gallery-header h1{

    margin:0;

    color:#dd789b;

    font-family:"Cormorant Garamond",serif;

    font-size:clamp(82px,10vw,128px);

    font-style:italic;

    font-weight:500;

    line-height:.82;

    text-shadow:

    3px 3px 0 rgba(255,255,255,.8),

    0 12px 18px rgba(159,92,113,.1);

}


.gallery-subtitle{

    margin-top:18px;

    color:#72535d;

    font-family:"Cormorant Garamond",serif;

    font-size:22px;

    font-style:italic;

}


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

.gallery-layout{

    position:relative;

    min-height:2350px;

    background:

    radial-gradient(circle at 15% 15%,rgba(255,255,255,.55),transparent 28%),

    repeating-linear-gradient(

        0deg,

        rgba(88,65,67,.02) 0,

        rgba(88,65,67,.02) 1px,

        transparent 1px,

        transparent 36px

    ),

    #f5efe9;

}


.gallery-layout::before{

    content:"";

    position:absolute;

    inset:28px;

    border:1px dashed rgba(143,91,106,.12);

}


/* ==========================================================
   FOTOGRAFÍAS
========================================================== */

.gallery-card{

    position:absolute;

    margin:0;

    padding:8px;

    background:#fffcf9;

    border:1px solid rgba(108,74,82,.15);

    box-shadow:

    10px 12px 0 rgba(82,56,63,.06),

    0 18px 30px rgba(54,37,41,.17);

    transition:

    transform .35s ease,

    box-shadow .35s ease;

}


.gallery-card img{

    display:block;

    width:100%;

    height:auto;

}


.gallery-card:hover{

    transform:

    scale(1.06)

    rotate(0deg);

    z-index:100;

    box-shadow:

    0 25px 40px rgba(0,0,0,.20);

}


/* POLAROIDS */

.gallery-polaroid{

    padding:

    10px

    10px

    34px;

}
/* ==========================================================
   DISTRIBUCIÓN DE LAS FOTOS
========================================================== */

/* Superior izquierda */

.card-crosswalk{

    top:70px;
    left:5%;

    width:39%;

    transform:rotate(-2deg);

}

/* Superior derecha */

.card-necklace{

    top:90px;
    right:7%;

    width:26%;

    transform:rotate(3deg);

}

/* Centro izquierda */

.card-window{

    top:420px;
    left:6%;

    width:38%;

    transform:rotate(-1.5deg);

}

/* Centro derecha */

.card-selfie{

    top:470px;
    right:5%;

    width:30%;

    transform:rotate(2deg);

}

/* Fotografía horizontal */

.card-room{

    top:820px;
    left:12%;

    width:33%;

    transform:rotate(-3deg);

}

/* Foto vertical pequeña */

.card-grass{

    top:1180px;
    right:11%;

    width:25%;

    transform:rotate(2deg);

}

/* Imagen principal */

.card-ballerina{

    top:1380px;
    left:4%;

    width:50%;

    transform:rotate(-1deg);

}

/* Segunda imagen grande */

.card-flower-ground{

    top:1180px;
    left:6%;

    width:38%;

    transform:rotate(2deg);

}

/* Carta */

.card-love-note{

    top:1860px;
    right:5%;

    width:42%;

    transform:rotate(1deg);

}

/* Última imagen */

.card-legs{

    top:1840px;
    left:8%;

    width:33%;

    transform:rotate(-2deg);

}


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

@media (max-width:900px){

.gallery-layout{

    display:grid;

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

    gap:26px;

    padding:40px;

    min-height:auto;

}

.gallery-card{

    position:relative;

    inset:auto;

    width:auto;

    transform:none !important;

}

.gallery-card:hover{

    transform:scale(1.04);

}

}


@media (max-width:600px){

.gallery-layout{

    grid-template-columns:1fr;

    padding:22px;

}

.gallery-header{

    min-height:240px;

    padding:35px;

}

.gallery-header h1{

    font-size:70px;

}

.gallery-label{

    font-size:8px;

    letter-spacing:3px;

}

.gallery-subtitle{

    font-size:18px;

}

.gallery-card:hover{

    transform:scale(1.02);

}

}

/*==============================
FLORES
==============================*/

.flower{

    position:absolute;

    pointer-events:none;

    z-index:2;

    opacity:.92;

    filter:

    drop-shadow(0 8px 12px rgba(0,0,0,.08));

}

/* Flor superior izquierda */

.flower1{

    width:180px;

    top:120px;

    left:-25px;

    transform:rotate(-18deg);

}

/* Rosas superiores */

.flower2{

    width:170px;

    top:260px;

    right:-15px;

    transform:rotate(12deg);

}

/* Flor acuarela */

.flower3{

    width:180px;

    top:980px;

    right:-40px;

    transform:rotate(8deg);

}

/* Flor inferior */

.flower4{

    width:190px;

    bottom:90px;

    left:-30px;

    transform:rotate(-8deg);

}
/* ==========================================================
   GALLERY — TIGHTER DISTRIBUTION
   ========================================================== */

.gallery-layout {
    min-height: 2050px;
}

/* Fila superior */

.card-crosswalk {
    top: 55px;
    left: 5%;
    width: 39%;
    transform: rotate(-2deg);
}

.card-necklace {
    top: 75px;
    right: 7%;
    width: 26%;
    transform: rotate(3deg);
}

/* Segunda fila */

.card-window {
    top: 350px;
    left: 6%;
    width: 38%;
    transform: rotate(-1.5deg);
}

.card-selfie {
    top: 390px;
    right: 5%;
    width: 30%;
    transform: rotate(2deg);
}

/* Zona media */

.card-room {
    top: 700px;
    left: 8%;
    width: 34%;
    transform: rotate(-3deg);
}

.card-grass {
    top: 760px;
    right: 8%;
    width: 29%;
    transform: rotate(2deg);
}

/* Tercera fila */

.card-flower-ground {
    top: 1060px;
    left: 5%;
    width: 38%;
    transform: rotate(2deg);
}

.card-ballerina {
    top: 1010px;
    right: 4%;
    left: auto;
    width: 48%;
    transform: rotate(-1deg);
}

/* Parte inferior */

.card-legs {
    top: 1530px;
    left: 7%;
    width: 33%;
    transform: rotate(-2deg);
}

.card-love-note {
    top: 1510px;
    right: 5%;
    width: 42%;
    transform: rotate(1deg);
}

/* ==========================================================
   GALLERY — CLOSE THE CENTER GAP
   ========================================================== */

.card-crosswalk {
    left: 3%;
    width: 41%;
}

.card-necklace {
    right: 4%;
    width: 29%;
}

.card-window {
    left: 4%;
    width: 41%;
}

.card-selfie {
    right: 4%;
    width: 32%;
}

.card-room {
    left: 9%;
    width: 36%;
}

.card-grass {
    right: 7%;
    width: 31%;
}

.card-flower-ground {
    left: 4%;
    width: 41%;
}

.card-ballerina {
    right: 3%;
    width: 50%;
}

.card-legs {
    left: 6%;
    width: 35%;
}

.card-love-note {
    right: 4%;
    width: 44%;
}

.card-window,
.card-room,
.card-flower-ground {
    z-index: 4;
}

.card-selfie,
.card-grass,
.card-ballerina {
    z-index: 5;
}
/* ==========================================================
   GALLERY HEADER — MORE DECORATED
   ========================================================== */

.gallery-header {
    min-height: 360px;
    padding: 60px 40px 70px;

    background:
        radial-gradient(
            circle at 14% 26%,
            rgba(220, 126, 157, 0.13) 0 4px,
            transparent 5px
        ),
        radial-gradient(
            circle at 86% 70%,
            rgba(220, 126, 157, 0.13) 0 4px,
            transparent 5px
        ),
        repeating-linear-gradient(
            -45deg,
            rgba(210, 140, 161, 0.035) 0,
            rgba(210, 140, 161, 0.035) 8px,
            transparent 8px,
            transparent 17px
        ),
        linear-gradient(
            #fffaf7,
            #f4e7e4
        );
}

/* Tarjeta central */

.gallery-header::before {
    inset: 35px 5%;

    background:
        rgba(255, 251, 248, 0.68);

    border: 1px solid rgba(150, 91, 108, 0.3);

    box-shadow:
        12px 14px 0 rgba(111, 67, 81, 0.07),
        0 20px 34px rgba(72, 45, 51, 0.12),
        inset 0 0 0 8px rgba(255, 255, 255, 0.34);

    transform: rotate(-0.2deg);
}

/* Marco interior */

.gallery-header::after {
    content: "";

    position: absolute;
    z-index: 1;

    inset: 54px calc(5% + 19px);

    border: 1px dashed rgba(156, 94, 112, 0.24);

    pointer-events: none;
}

/* Etiqueta superior */

.gallery-label {
    margin-bottom: 23px;
    padding: 8px 26px;

    background: rgba(255, 247, 248, 0.45);

    font-size: 9px;
    letter-spacing: 4.6px;
}

/* Título */

.gallery-header h1 {
    position: relative;

    width: fit-content;

    padding: 0 75px 14px;

    font-size: clamp(88px, 10.5vw, 138px);

    text-shadow:
        3px 3px 0 rgba(255, 255, 255, 0.85),
        0 11px 18px rgba(154, 75, 102, 0.12);
}

.gallery-header h1::before,
.gallery-header h1::after {
    content: "✦";

    position: absolute;
    top: 51%;

    color: rgba(180, 99, 126, 0.6);

    font-family: "Cormorant Garamond", serif;
    font-size: 31px;
    font-style: normal;
}

.gallery-header h1::before {
    left: 8px;

    transform:
        translateY(-50%)
        rotate(-12deg);
}

.gallery-header h1::after {
    right: 8px;

    transform:
        translateY(-50%)
        rotate(12deg);
}

/* Subtítulo como pequeño recorte */

.gallery-subtitle {
    width: fit-content;

    margin-top: 16px;
    padding: 6px 20px 8px;

    border-bottom: 1px solid rgba(133, 79, 96, 0.3);

    background: rgba(255, 250, 248, 0.48);

    font-size: 22px;

    transform: rotate(0.7deg);
}

/* Cintas decorativas */

.gallery-label::before,
.gallery-label::after {
    content: "";

    position: absolute;
    top: -42px;

    width: 125px;
    height: 28px;

    background:
        repeating-linear-gradient(
            135deg,
            rgba(224, 195, 178, 0.88) 0,
            rgba(224, 195, 178, 0.88) 13px,
            rgba(238, 213, 197, 0.88) 13px,
            rgba(238, 213, 197, 0.88) 26px
        );

    box-shadow:
        0 2px 4px rgba(69, 44, 50, 0.12);
}

.gallery-label::before {
    left: -145px;

    transform: rotate(-7deg);
}

.gallery-label::after {
    right: -145px;

    transform: rotate(7deg);
}

/* Sello decorativo */

.gallery-subtitle::after {
    content: "PINK\A ARCHIVE";

    white-space: pre;

    position: absolute;
    right: -92px;
    top: -38px;

    display: grid;
    place-items: center;

    width: 68px;
    height: 68px;

    border: 2px solid rgba(181, 103, 129, 0.36);
    border-radius: 50%;

    color: rgba(163, 83, 112, 0.56);

    font-family: "Nunito", sans-serif;
    font-size: 8px;
    font-style: normal;
    font-weight: 700;

    line-height: 1.3;
    letter-spacing: 1.1px;
    text-align: center;

    transform: rotate(11deg);
}

/* Móvil */

@media (max-width: 700px) {
    .gallery-header {
        min-height: 315px;
        padding: 52px 20px 62px;
    }

    .gallery-header::before {
        inset: 28px 4%;
    }

    .gallery-header::after {
        inset: 45px calc(4% + 15px);
    }

    .gallery-header h1 {
        padding-right: 38px;
        padding-left: 38px;

        font-size: clamp(64px, 18vw, 90px);
    }

    .gallery-header h1::before,
    .gallery-header h1::after {
        font-size: 20px;
    }

    .gallery-label {
        max-width: 78%;

        font-size: 8px;
        line-height: 1.6;
    }

    .gallery-label::before,
    .gallery-label::after,
    .gallery-subtitle::after {
        display: none;
    }
}