*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    background:#c6ded3;

    font-family:Arial, Helvetica, sans-serif;

    color:#222;

}

header{

    text-align:center;

    padding:35px 20px 25px;

}

.logo{

    width:140px;

    max-width:60%;

    margin-bottom:18px;

}

h1{

    font-size:1.5rem;

    font-weight:500;

}

.galeria{

    width:min(94%,560px);

    margin:auto;

    padding:min(23.5vw,140px) 0 60px;
}

.cabecera-galeria{

    position:fixed;

    top:0;

    left:50%;

    z-index:10;

    width:min(94%,560px);

    transform:translateX(-50%);

}

.cabecera-galeria img{

    display:block;

    width:100%;

    height:auto;

}

.pie{

    position:fixed;

    right:0;

    bottom:0;

    left:0;

    z-index:20;

    overflow:hidden;

    min-height:67px;

    padding:0;

    display:flex;

    justify-content:center;

    align-items:center;

    /* Composición final del remate: transparencia superior y zócalo en una sola imagen. */
    background-color:transparent;

    background-image:url("../img/pie-escaparate.png");

    background-position:center bottom;

    background-repeat:no-repeat;

    background-size:100% 67px;

    box-shadow:none;

}

.firma{

    position:absolute;

    top:28px;

    left:50%;

    z-index:1;

    width:112px;

    height:22px;

    transform:translateX(-50%);

    color:transparent;

    font-size:.62rem;

    letter-spacing:.02em;

    text-decoration:none;

    text-shadow:none;

}

.firma:hover{

    color:transparent;

}

.albumes-pie{

    display:none;

    position:absolute;

    right:clamp(8px, 2.5vw, 34px);

    bottom:0;

    z-index:2;

    width:clamp(180px, 32vw, 267px);

    height:34px;

    pointer-events:none;

}

.album-pie{

    position:absolute;

    bottom:0;

    width:clamp(104px, 18vw, 150px);

    aspect-ratio:1;

    object-fit:cover;

    border-radius:2px;

    box-shadow:0 3px 5px rgba(31,16,8,.34);

    transform-origin:center bottom;

}

.album-pie-metal{

    left:0;

    z-index:1;

    transform:perspective(180px) rotateX(74deg) rotateZ(-6deg);

}

.album-pie-pop{

    right:0;

    z-index:2;

    transform:perspective(180px) rotateX(74deg) rotateZ(7deg);

}

.album{

    width:55%;

    margin:32px 0 32px 28px;

    transition:transform .35s ease;

    cursor:pointer;

}

.album:hover{

    transform:translateX(8px);

}

.album img{

    display:block;

    width:100%;

    border-radius:10px;

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

}

/* -------- VISOR -------- */

.visor{

    position:fixed;

    inset:0;

    z-index:100;

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

    backdrop-filter:blur(5px);

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:1;

    transition:opacity .45s ease;

}

.oculto{

    opacity:0;

    pointer-events:none;

}

.visor-contenido{

    width:min(88vw,420px);

    transform:scale(.70);

    transition:transform .45s ease;

}

.visor img{

    width:100%;

    border-radius:14px;

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

}

.visor:not(.oculto) .visor-contenido{

    transform:scale(1);

}

.acciones{

    display:flex;

    flex-direction:column;

    gap:14px;

    margin-top:25px;

}

.acciones button{

    border:none;

    padding:15px;

    border-radius:12px;

    font-size:1rem;

    cursor:pointer;

}

/* Botón de interés */

#interes{

    opacity:0;

    visibility:hidden;

    transition:opacity .5s ease;

}

#interes.visible{

    opacity:1;

    visibility:visible;

}

#volver{

    position:absolute;

    top:18px;

    right:18px;

    z-index:1000;

    text-decoration:none;

    color:white;

    font-size:1rem;

    font-weight:500;

    opacity:.9;

    transition:opacity .25s ease;

}

#volver:hover{

    opacity:1;

}

/* -------- SEGUNDA PANTALLA -------- */

.pedido{

    position:fixed;

    inset:0;

    z-index:100;

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

    backdrop-filter:blur(5px);

    display:flex;

    overflow-y:auto;

    padding:56px 16px 24px;

    transition:opacity .45s ease;

}

.pedido-contenido{

    width:min(88vw,420px);

    display:flex;

    flex-direction:column;

    align-items:center;

    position:relative;

    margin:auto;

}

/*
 * Cada estado del pedido comparte el mismo contenedor. Los estados inactivos
 * deben salir del flujo para que no alteren el centrado vertical del activo.
 */
.pedido-contenido > .oculto{

    display:none;

}

#pedido-img{

    width:78%;

    border-radius:14px;

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

    margin-bottom:10px;

}

.pegatina{

    position:absolute;

    top:-18px;

    left:18px;

    width:90px;

    height:90px;

    border-radius:50%;

    background:#ffd400;

    border:5px solid #d91c1c;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

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

}

.hoy{

    font-size:1rem;

    font-weight:bold;

    color:#d91c1c;

    line-height:1;

}

.precio{

    margin-top:4px;

    font-size:2rem;

    font-weight:bold;

    color:#d91c1c;

    line-height:1;

}

.pedido h2{

    font-size:1.5rem;

    font-weight:500;

    margin-bottom:24px;

    text-align:center;

    color:#ffffff;

}

.pedido button{

    width:100%;

    border:none;

    padding:15px;

    margin-bottom:14px;

    border-radius:12px;

    font-size:1rem;

    cursor:pointer;

}

#volver-pedido{

    position:fixed;

    top:18px;

    right:18px;

    z-index:1000;

    text-decoration:none;

    color:white;

    font-size:1rem;

    font-weight:500;

    opacity:.9;

}

#mensaje-pedido{

    margin-top:0;

    text-align:center;

    color:#ffffff;

}

#opciones-pedido{

    margin-top:20px;

}

#eleccion-correo{

    width:100%;

    margin-top:20px;

    text-align:center;

}

#mensaje-pedido p{

    margin:6px 0;

    font-size:1.08rem;

    color:#ffffff;

}

#preparar{

    margin-top:18px;

}

/* -------- GESTIÓN INTERNA -------- */

.gestion{

    position:fixed;

    inset:0;

    z-index:1100;

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

    backdrop-filter:blur(5px);

    display:flex;

    justify-content:center;

    align-items:center;

    transition:opacity .45s ease;

}

.gestion-contenido{

    width:min(88vw,420px);

    padding:28px;

    border-radius:14px;

    background:#c6ded3;

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

}

.gestion h2{

    margin-bottom:24px;

    text-align:center;

}

.firma-autor span{

    display:block;

    font-size:1.5rem;

    font-weight:500;

}

.firma-autor small{

    display:block;

    margin-top:5px;

    color:rgba(0,0,0,.55);

    font-size:.75rem;

    font-weight:400;

}

.gestion label,
.gestion legend{

    display:block;

    margin-bottom:8px;

    font-size:.95rem;

}

#album-gestion{

    width:100%;

    margin-bottom:22px;

    padding:13px;

    border:0;

    border-radius:10px;

    background:#fff;

    color:#222;

    font:inherit;

}

.modalidad-gestion{

    margin:0 0 24px;

    padding:0;

    border:0;

}

.modalidad-gestion label{

    display:flex;

    align-items:center;

    gap:9px;

    margin:10px 0;

}

.modalidad-gestion input{

    accent-color:#222;

}

#preparar-respuesta{

    width:100%;

    border:0;

    padding:15px;

    border-radius:12px;

    font-size:1rem;

    cursor:pointer;

}

.cerrar-gestion{

    position:absolute;

    top:18px;

    right:18px;

    color:#fff;

    text-decoration:none;

    font-size:1rem;

    font-weight:500;

    opacity:.9;

}

.cerrar-gestion:hover{

    opacity:1;

}