@charset "utf-8";
/* CSS Document */

/* =========================================================
   PHOTOGLAM
   ESTILO GLOBAL
   ========================================================= */

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


/* =========================================================
   CUERPO
   ========================================================= */
body {
    background: #E9E5DF !important;
    color: #292724;
}


/* CABECERA */

header {
    background: #292724 !important;
}


/* LOGO */

.logo a {
    color: #F5F2ED !important;
}

.logo::after {
    color: #C7A98B !important;
}


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

nav {
    background: #D8D2CA !important;
    padding: 8px 0;
}

nav ul {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}

nav li {
    margin: 0;
}

nav a {
    display: block;
    padding: 12px 20px;

    color: #292724 !important;
    background: transparent !important;

    text-decoration: none;
    text-transform: uppercase;

    font-size: 13px;
    letter-spacing: 2px;
    font-weight: 600;

    border-radius: 8px;

    transition: background .3s ease, color .3s ease;
}

nav a:hover {
    background: #A45F46 !important;
    color: #FFFFFF !important;
}
/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {
.logo a {
    display: inline-block;
    color: #D8C6B2 !important;
    text-decoration: none;
    font-family: "Playfair Display", serif;
    font-size: 54px;
    letter-spacing: 6px;
    font-weight: 400;
    text-shadow: none !important;
}
.logo::after {
    content: "EDITORIAL · MODA · FOTOGRAFÍA";

    display: block;
    margin-top: 8px;

    color: #C9A982 !important;

    font-family: "Playfair Display", serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 3px;

    text-transform: uppercase;
}
    nav ul {
        flex-wrap: wrap;
    }

}
.logo a {
    color: #C9A982 !important;
    background: transparent !important;

    text-decoration: none;
    font-family: "Playfair Display", serif;
    font-size: 54px;
    letter-spacing: 6px;
    font-weight: 400;

    text-shadow: none !important;
    box-shadow: none !important;
}
.container {
    width: 95%;
    max-width: 1700px;
    margin: 0 auto;
}

.logo {
    text-align: center;
    padding: 35px 0 20px;
}

.logo a {
    display: inline-block;

    color: #333 !important;

    text-decoration: none;
    font-family: "Playfair Display", serif;
    font-size: 54px;
    letter-spacing: 6px;
    font-weight: 400;

    text-shadow: none !important;
    box-shadow: none !important;
}
.logo-subtitulo {
    margin-top: 8px;
    color:#333;
    font-family: "Playfair Display", serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 3px;
    text-align: center;
}
/* =========================================================
   PÁGINA MODELOS
========================================================= */

.contenido {
    width: 94%;
    max-width: 1700px;
    margin: 0 auto;
    padding: 40px 0 80px;
}

.contenido > h1 {
    margin: 0 0 40px;

    font-family: "Playfair Display", serif;
    font-size: 42px;
    font-weight: 400;
    letter-spacing: 4px;

    color: #292724 !important;
}


/* =========================================================
   GRID DE MODELOS
========================================================= */

.grid-modelos {
    width: 100%;

    display: grid;

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

    gap: 28px;

    margin: 0 auto;
}


/* =========================================================
   TARJETA
========================================================= */

.card-modelo {
    background: #F5F2ED;

    padding: 12px;

    text-align: center;

    border: 1px solid #D2CCC4;

    border-radius: 8px;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.card-modelo:hover {
    transform: translateY(-4px);

    box-shadow: 0 10px 25px rgba(41,39,36,.12);
}


/* =========================================================
   FOTO
========================================================= */

.card-modelo img {
    display: block;

    width: 100%;
    height: 350px;

    object-fit: cover;

    margin: 0 auto 15px;

    border-radius: 5px;
}


/* =========================================================
   NOMBRE
========================================================= */

.card-modelo h2 {
    margin: 0 0 8px;

    font-family: "Playfair Display", serif;
    font-size: 24px;
    font-weight: 500;

    letter-spacing: 1px;

    color: #292724;
}

.card-modelo a {
    text-decoration: none;
}


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

.card-modelo p {
    margin: 5px 0;

    font-family: Inter, Arial, sans-serif;
    font-size: 13px;

    line-height: 1.5;

    color: #706B65;
}


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

.card-modelo .btn {
    display: inline-block;

    margin-top: 15px;

    padding: 10px 18px;

    background: #A45F46;
    color: #FFFFFF !important;

    border-radius: 7px;

    font-family: Inter, Arial, sans-serif;
    font-size: 11px;
    font-weight: 600;

    letter-spacing: 1.5px;

    text-decoration: none;

    transition:
        background .3s ease,
        transform .3s ease;
}

.card-modelo .btn:hover {
    background: #874A38;
    transform: translateY(-2px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1200px) {

    .grid-modelos {
        grid-template-columns: repeat(4, 1fr);
    }

}


/* =========================================================
   TABLET PEQUEÑA
========================================================= */

@media (max-width: 900px) {

    .grid-modelos {
        grid-template-columns: repeat(3, 1fr);
    }

}


/* =========================================================
   MÓVIL
========================================================= */

@media (max-width: 600px) {

    .contenido {
        width: 92%;
    }

    .contenido > h1 {
        font-size: 34px;
    }

    .grid-modelos {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .card-modelo img {
        height: 250px;
    }

}
/* =========================================================
   FICHA INDIVIDUAL DE MODELO
========================================================= */

.ficha-modelo {
    width: 1200px;
    max-width: 90vw;
    margin: 0 auto;
    padding: 40px 20px 80px;
    text-align: center;
}


/* =========================================================
   TITULO
========================================================= */

.titulo-modelo {
    width: 100%;
    text-align: center;
    margin: 10px auto 30px;
}

.titulo-modelo h1 {
    margin: 0 0 8px;

    font-family: "Playfair Display", serif;
    font-size: 52px;
    font-weight: 400;
    letter-spacing: 2px;

    color: #292724;
}

.titulo-modelo p {
    margin: 0;

    font-family: Inter, Arial, sans-serif;
    font-size: 16px;

    color: #706B65;
}


/* =========================================================
   FOTO PORTADA
========================================================= */

.foto-portada-modelo {
    width: 600px;
    max-width: 100%;
    margin: 30px auto;
    text-align: center;
}

.foto-portada-modelo img {
    display: block;

    width: auto;
    max-width: 250px;
    height: auto;

    margin: 0 auto;
}


/* =========================================================
   UBICACIÓN
========================================================= */

.ubicacion-modelo {
    width: 100%;
    margin: 10px auto 55px;

    font-family: Inter, Arial, sans-serif;
    font-size: 15px;

    color: #706B65;
}


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

.datos-modelo h2,
.biografia-modelo h2,
.portfolio-modelo h2 {

    margin: 0 0 30px;

    font-family: "Playfair Display", serif;
    font-size: 34px;
    font-weight: 400;
    letter-spacing: 2px;

    color: #292724;
}


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

.datos-modelo {
    width: 100%;
    margin: 0 auto 65px;
}

.grid-datos {
    display: grid;

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

    width: 100%;
    gap: 15px;

    margin: 30px auto;
}

.dato {
    min-height: 75px;

    padding: 18px 10px;

    background: #F5F2ED;

    border: 1px solid #D2CCC4;
    border-radius: 10px;

    text-align: center;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.dato span {
    display: block;

    margin-bottom: 6px;

    font-family: Inter, Arial, sans-serif;
    font-size: 11px;
    letter-spacing: 1.5px;

    color: #706B65;
}

.dato strong {
    display: block;

    font-family: Inter, Arial, sans-serif;
    font-size: 16px;
    font-weight: 500;

    color: #292724;
}


/* =========================================================
   BIOGRAFÍA
========================================================= */

.biografia-modelo {
    width: 90%;
    max-width: 850px;

    margin: 0 auto 70px;

    text-align: center;
}

.biografia-modelo p {
    margin: 0;

    font-family: Inter, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.8;

    color: #3F3B37;
}


/* =========================================================
   PORTFOLIO
========================================================= */

.portfolio-modelo {
    width: 100%;
    max-width: 1100px;

    margin: 0 auto 65px;

    text-align: center;
}

.grid-portfolio {
    display: grid;

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

    gap: 20px;

    width: 100%;

    margin: 30px auto;
}

.foto-portfolio {
    width: 100%;
    height: 400px;

    overflow: hidden;

    background: #DED8D0;
}

.foto-portfolio img {
    display: block;

    width: 250px;
    max-width: 250px;
    height: auto;

    margin: 0 auto;

    object-fit: contain;
}


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

.volver-modelos {
    width: 100%;
    margin-top: 40px;

    text-align: center;
}

.volver-modelos a {
    font-family: Inter, Arial, sans-serif;
    font-size: 13px;
    letter-spacing: 1px;

    color: #A45F46;

    text-decoration: none;
}

.volver-modelos a:hover {
    color: #874A38;
}


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

@media (max-width: 900px) {

    .grid-datos {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-portfolio {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 600px) {

    .ficha-modelo {
        width: 100%;
        max-width: 100%;
        padding: 30px 15px 60px;
    }

    .titulo-modelo h1 {
        font-size: 38px;
    }

    .foto-portada-modelo {
        width: 100%;
    }

    .foto-portada-modelo img {
        max-width: 100%;
    }

    .grid-datos {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-portfolio {
        grid-template-columns: 1fr;
    }

    .foto-portfolio {
        height: auto;
    }

    .foto-portfolio img {
        width: 100%;
        max-width: 100%;
    }

}
/* =========================================================
   BOTÓN VOLVER A MODELOS
========================================================= */

.volver-modelos {
    width: 100%;
    margin: 50px auto 20px;
    text-align: center;
}

.volver-modelos a {
    display: inline-block;

    padding: 13px 28px;

    background: #A45F46;
    color: #FFFFFF !important;

    border: 1px solid #A45F46;
    border-radius: 8px;

    font-family: Inter, Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;

    letter-spacing: 1.5px;
    text-decoration: none;

    transition:
        background .3s ease,
        border-color .3s ease,
        transform .3s ease;
}

.volver-modelos a:hover {
    background: #874A38;
    border-color: #874A38;
    color: #FFFFFF !important;

    transform: translateY(-2px);
}
/* =========================================================
   LOGO PHOTOGLAM
========================================================= */

.logo {
    text-align: center !important;
    background: transparent !important;
}

.logo a {
    display: inline-block !important;

    color: #000!important;

    background: transparent !important;

    font-family: "Playfair Display", serif !important;
    font-size: 54px !important;
    font-weight: 400 !important;
    letter-spacing: 6px !important;

    text-decoration: none !important;

    text-shadow: none !important;
    box-shadow: none !important;
}

.logo-subtitulo {
    display: block !important;

    margin-top: 8px !important;

    color: #000 !important;

    font-family: "Playfair Display", serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    letter-spacing: 3px !important;

    text-align: center !important;
}
/* =========================================================
   CABECERA PHOTOGLAM
========================================================= */

header {
    width: 100%;
    background:#E9E5DF!important;
    box-shadow: 0 5px 20px rgba(0,0,0,.15);
}

header .container {
    width: 95%;
    max-width: 1700px;
    margin: 0 auto;
}
/* =========================================================
   PHOTOGLAM · AUTENTICACIÓN Y PERFIL
========================================================= */
.auth-card,.profile-card{max-width:980px;margin:60px auto;padding:55px;background:#f4efe7;box-sizing:border-box;box-shadow:0 18px 50px rgba(0,0,0,.08)}
.auth-card h1,.profile-card h1{font-family:"Cormorant Garamond",serif;font-size:54px;font-weight:400;letter-spacing:3px;margin:8px 0 10px;text-align:center}
.auth-card>p,.profile-card>p{text-align:center;color:#555}
.eyebrow{display:block;text-align:center;font-size:11px;letter-spacing:4px;color:#9b7559}
.auth-card form,.profile-card form{max-width:820px;margin:35px auto 0}
.auth-card label,.profile-card label{display:block;font-size:12px;letter-spacing:1px;color:#444;margin-bottom:18px}
.auth-card input,.auth-card select,.auth-card textarea,.profile-card input,.profile-card select,.profile-card textarea{width:100%;box-sizing:border-box;padding:13px 14px;margin-top:7px;border:1px solid #cfc5ba;background:#fff;font:15px Inter,Arial,sans-serif;color:#222}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.auth-card button,.profile-card button{display:block;margin:28px auto 0;padding:13px 32px;border:1px solid #222;background:#222;color:#fff;letter-spacing:2px;cursor:pointer}
.auth-error,.auth-ok{padding:13px 16px;margin:20px 0;text-align:center}.auth-error{background:#f4dede;color:#7c2020}.auth-ok{background:#e4efe3;color:#315b31}
.auth-foot{text-align:center;margin-top:25px}.auth-foot a{color:#8a5a43}
.check{display:flex!important;align-items:center;gap:9px}.check input{width:auto!important;margin:0!important}
.profile-role{text-transform:uppercase;letter-spacing:3px}
@media(max-width:700px){.auth-card,.profile-card{margin:25px 15px;padding:30px 20px}.auth-card h1,.profile-card h1{font-size:42px}.form-grid{grid-template-columns:1fr}}
/* FOOTER */
.site-footer{margin-top:70px;background:#1c1a18;color:#ddd;padding:35px 20px}.footer-inner{text-align:center}.footer-brand{font-family:"Cormorant Garamond",serif;font-size:30px;letter-spacing:5px}.footer-copy{font-size:11px;letter-spacing:1px;margin:10px 0 18px;color:#aaa}.footer-links{display:flex;justify-content:center;gap:25px}.footer-links a{color:#ddd;text-decoration:none;font-size:11px;letter-spacing:1.5px;text-transform:uppercase}