/* ==========================================
   DISEÑO PREMIUM CON BARRA EN CONTRASTE - KRISTELL MARVAL
   ========================================== */
body {
    background-color: #F9F6F0; /* Todo el fondo vuelve a ser crema suave */
    color: #2C2520;
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}

/* LA BARRA SUPERIOR CON CONTRASTE EXCLUSIVO (Negra Premium) */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 10%;
    position: sticky;
    top: 0;
    background-color: #2C2520; /* Fondo negro carbón exclusivo para la barra */
    box-shadow: 0 4px 20px rgba(44, 37, 32, 0.15); /* Sombra elegante */
    z-index: 100;
}

.logo {
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 2px;
    color: #F9F6F0; /* Texto del logo en crema para contrastar con la barra */
}

nav a {
    text-decoration: none;
    color: #F9F6F0; /* Enlaces en crema para contrastar */
    margin-left: 20px;
    font-weight: 400;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.3s;
}

nav a:hover {
    color: #D3C5B5; /* Color arena suave al pasar el mouse por el menú */
}

/* SECCIÓN INICIO */
.hero {
    text-align: center;
    padding: 60px 10% 80px 10%;
    overflow: hidden; 
}

h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(40px, 6vw, 72px);
    margin-bottom: 15px;
    letter-spacing: 4px;
    color: #2C2520;
}

.subtitulo {
    font-size: 14px;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 40px;
    color: #70655B;
}

.contenedor-foto-principal {
    width: 100%;
    max-width: 550px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 6px;
}

.foto-principal {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.2s ease-out;
    animation: zoomOnScroll linear both;
    animation-timeline: scroll(root);
    animation-range: 0px 600px;
}

@keyframes zoomOnScroll {
    from { transform: scale(1); }
    to { transform: scale(1.15); } 
}

/* SECCIÓN PERFIL */
.perfil-section {
    padding: 100px 10%;
    text-align: center;
    background-color: #F4EFE6; /* Fondo un poquito más cálido que el inicio */
    color: #2C2520;
}

.stats-grid {
    display: flex;
    justify-content: center;
    gap: 60px;
    margin-top: 40px;
}

.stat-item {
    font-size: 16px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #70655B;
}

.stat-item strong {
    font-family: 'Playfair Display', serif;
    font-size: 36px;
    display: block;
    margin-bottom: 5px;
    color: #2C2520;
}

.titulo-seccion {
    font-family: 'Playfair Display', serif;
    font-size: 42px;
    text-align: center;
    margin-bottom: 20px;
    color: #2C2520;
}

.bajada-seccion {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 60px auto;
    color: #70655B;
    font-size: 15px;
    line-height: 1.6;
}

/* SECCIÓN MODELAJE */
.seccion-contenido {
    padding: 100px 10%;
}

.grid-modelaje {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}

.marco-foto-book {
    overflow: hidden;
    border-radius: 4px;
    background-color: #2C2520; 
}

.foto-book {
    width: 100%;
    height: 500px;
    object-fit: cover;
    display: block;
    filter: contrast(1.05);
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), filter 0.6s ease;
}

.marco-foto-book:hover .foto-book {
    transform: scale(1.06);
}

/* SECCIÓN UGC */
.contenedor-ugc {
    max-width: 1000px;
    margin: 0 auto;
}

.fila-ugc {
    display: flex;
    align-items: center;
    gap: 80px;
    margin-bottom: 100px;
}

.fila-ugc:nth-child(even) {
    flex-direction: row-reverse;
}

.video-box {
    flex: 1;
    max-width: 350px; 
}

.tarjeta-video {
    width: 100%;
    height: 550px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(44, 37, 32, 0.08);
}

.texto-box {
    flex: 1;
}

.tag-marca {
    display: inline-block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    background-color: #2C2520;
    color: #F9F6F0;
    padding: 6px 14px;
    border-radius: 3px;
    margin-bottom: 20px;
    font-weight: bold;
}

.texto-box h3 {
    font-family: 'Playfair Display', serif;
    font-size: 28px;
    margin: 0 0 15px 0;
    color: #2C2520;
}

.texto-box p {
    font-size: 15px;
    line-height: 1.8;
    color: #554A42;
    margin: 0;
}

/* BOTÓN DE CONTACTO ORIGINAL Y BOTONES DE EXTENSIÓN */
/* Como toda la web es clara, todos los botones usan el mismo look negro de lujo */
.btn-contacto, .btn-premium-negro {
    display: inline-block;
    background-color: #2C2520 !important;
    color: #F9F6F0 !important;
    padding: 16px 45px;
    text-decoration: none !important;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 12px;
    border-radius: 50px;
    transition: all 0.3s ease;
    border: none;
}

.btn-contacto:hover, .btn-premium-negro:hover {
    transform: scale(1.05);
    background-color: #4A3F37 !important;
    box-shadow: 0 10px 20px rgba(44, 37, 32, 0.15);
}

/* El botón crema con borde para romper la monotonía en las secciones claras */
.btn-premium-crema {
    display: inline-block;
    background-color: transparent !important;
    color: #2C2520 !important;
    padding: 16px 45px;
    text-decoration: none !important;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 12px;
    border-radius: 50px;
    border: 1px solid #2C2520 !important;
    transition: all 0.3s ease;
}

.btn-premium-crema:hover {
    transform: scale(1.05);
    background-color: #2C2520 !important;
    color: #F9F6F0 !important;
}

.contenedor-botones-extension {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 40px;
    flex-wrap: wrap;
}

/* RESPONSIVO */
/* ==========================================
   RESPONSIVO (Cierra sus llaves de inmediato)
   ========================================== */
@media (max-width: 768px) {
    .fila-ugc, .fila-ugc:nth-child(even) {
        flex-direction: column;
        gap: 30px;
        text-align: center;
    }
    .video-box {
        width: 100%;
    }
} /* <- Esta llave cierra el modo celular AQUÍ, no al final del archivo */


/* ==========================================
   SECCIÓN DE MARCAS - PARA TODOS LOS TAMAÑOS
   ========================================== */
.contenedor-marcas {
    max-width: 1000px;
    margin: 60px auto 0 auto;
    padding-top: 40px;
    border-top: 1px solid #E8E1D5;
}

.titulo-marcas {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #2C2520;
    margin-bottom: 30px;
    font-weight: 400;
    text-align: center; /* Centrado para que combine con tu estética */
}

.grid-marcas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 25px;
}

.item-marca {
    background-color: #F4EFE6; /* Mismo crema sutil de tu captura */
    padding: 25px 20px;
    border-radius: 6px;
    text-align: center; /* Queda súper elegante centrado en PC y móvil */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.item-marca:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(44, 37, 32, 0.05);
}

.item-marca h4 {
    font-family: 'Playfair Display', serif;
    font-size: 19px;
    margin: 0 0 8px 0;
    color: #2C2520;
}

.item-marca p {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #70655B;
    margin: 0;
}

/* ==========================================
   SECCIÓN UGC INICIO (2 VIDEOS HORIZONTALES)
   ========================================== */
.grid-ugc-inicio {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    max-width: 900px;
    margin: 40px auto 0 auto;
}

.item-ugc-inicio {
    background-color: #F4EFE6;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.item-ugc-inicio:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(44, 37, 32, 0.08);
}

.video-vertical-recorte {
    width: 100%;
    height: 500px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 20px;
}

.info-ugc-inicio {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.habilidades-titulo {
    font-family: 'Playfair Display', serif;
    font-size: 16px;
    color: #2C2520;
    margin: 20px 0 5px 0;
}

.habilidades-texto {
    font-size: 13px;
    line-height: 1.6;
    color: #70655B;
    margin: 0;
    padding: 0 15px;
}

/* Responsivo para que en celular pase a una sola columna */
/* ==========================================
   AJUSTES CRUCIALES PARA MÓVIL (768px o menos)
   ========================================== */
/* ==========================================
   CONTROL TOTAL PARA CELULARES (RESPONSIVO)
   ========================================== */
@media (max-width: 768px) {
    
    /* 1. CORRECCIÓN UGC: Forzamos una sola columna vertical (Como en image_6af3fa.jpg) */
    .grid-ugc-inicio {
        grid-template-columns: 1fr !important; /* Rompe las 2 columnas en móvil */
        gap: 35px !important; /* Espacio elegante entre un video y el siguiente */
        padding: 0 10px;
        max-width: 100%;
    }

    .item-ugc-inicio {
        width: 100%;
        display: block;
        box-sizing: border-box;
        padding: 25px 20px;
    }

    /* Ajuste para que los videos verticales no se corten raro en pantallas pequeñas */
    .video-vertical-recorte {
        height: auto !important; 
        max-height: 520px;
        width: 100%;
        object-fit: cover;
    }

    /* 2. MANTENER CORRECCIÓN DE MODELAJE (Para que no se descuadre lo anterior) */
    .grid-modelaje {
        grid-template-columns: 1fr !important;
        gap: 30px;
        padding: 0 15px;
    }

    .marco-foto-book {
        width: 100%;
        border-radius: 30px;
        overflow: hidden;
        box-shadow: 0 10px 25px rgba(44, 37, 32, 0.05);
    }

    .foto-book {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
    }
}
}
/* ==========================================
   TRANSICIÓN DE "NUEVA PÁGINA" PARA UGC
   ========================================== */
.seccion-nueva-hoja {
    background-color: #FFFFFF; /* Contraste blanco sobre el fondo crema */
    padding: 80px 20px 100px 20px; /* Le da mucho aire y elegancia */
    margin-top: 60px; /* Lo separa del botón negro de arriba */
    border-radius: 60px 60px 0 0; /* Curvas pronunciadas solo en la parte superior */
    box-shadow: 0 -15px 40px rgba(44, 37, 32, 0.03); /* Sombra difuminada hacia arriba */
}

/* Ajuste opcional para celular */
@media (max-width: 768px) {
    .seccion-nueva-hoja {
        border-radius: 40px 40px 0 0;
        padding: 60px 20px 80px 20px;
    }
}

/* ==========================================
   TÍTULO UGC PREMIUM (ESTILO EDITORIAL)
   ========================================== */
.titulo-ugc-premium {
    text-align: center;
    margin-bottom: 20px;
    padding-top: 20px;
}

.subtitulo-ugc {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 5px; /* Letras muy separadas para dar aire */
    color: #70655B; /* Un tono café suave */
    display: block;
    margin-bottom: -10px; /* Acerca el subtítulo a las letras grandes */
}

.texto-ugc-principal {
    font-family: 'Playfair Display', serif;
    font-size: clamp(60px, 8vw, 100px); /* Se adapta al tamaño de la pantalla */
    font-weight: 400;
    color: #2C2520;
    margin: 0;
    line-height: 1.2;
    letter-spacing: 2px;
}

/* Un toque de color sutil para el punto del UGC (opcional pero elegante) */
.punto-ugc {
    color: #D3C5B5; 
}
/* ==========================================
   CABECERA DE MODELAJE (ESTILO EDITORIAL)
   ========================================== */
.cabecera-modelaje {
    text-align: center;
    max-width: 650px; /* Limita el ancho para que el texto se vea como un bloque fino */
    margin: 0 auto 50px auto; /* Lo centra y le da espacio hacia abajo */
    padding-top: 20px;
}

.subtitulo-modelaje {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: #70655B;
    display: block;
    margin-bottom: 15px;
    font-weight: 600;
}

.titulo-principal-modelaje {
    font-family: 'Playfair Display', serif;
    font-size: clamp(45px, 6vw, 75px);
    font-weight: 400;
    color: #2C2520;
    margin: 0 0 25px 0;
    line-height: 1.1;
}

.parrafo-modelaje-editorial {
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    line-height: 1.8;
    color: #554A42;
    margin: 0 auto;
}
/* ==========================================
   INTRODUCCIÓN DE MODELAJE PREMIUM
   ========================================== */
.bloque-intro-modelaje {
    text-align: center;
    max-width: 700px; /* Evita que el párrafo se estire demasiado hacia los lados */
    margin: 60px auto; /* Centrado perfecto con buen espacio arriba y abajo */
    padding: 0 20px;
}

.tag-esencia {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 5px; /* Espaciado ultra elegante */
    color: #70655B;
    display: block;
    margin-bottom: 10px;
    font-weight: 600;
}

.titulo-editorial-grande {
    font-family: 'Playfair Display', serif;
    font-size: clamp(40px, 5.5vw, 70px); /* Responsivo e imponente */
    font-weight: 400;
    color: #2C2520;
    margin: 0 0 20px 0;
    line-height: 1.1;
}

.parrafo-editorial-fino {
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    line-height: 1.8; /* Más espacio entre líneas para que se sienta fluido */
    color: #554A42;
    margin: 0;
}
/* ==========================================
   ENCABEZADO DE PERFIL / SOBRE MÍ PREMIUM
   ========================================== */
.bloque-intro-perfil {
    text-align: center;
    max-width: 680px; /* Limita el ancho del texto para que no canse la vista al leer */
    margin: 0 auto 45px auto; /* Lo centra y le da una separación perfecta de las estadísticas */
    padding: 0 20px;
}

.tag-perfil {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 5px; /* Espaciado premium entre letras */
    color: #70655B;
    display: block;
    margin-bottom: 12px;
    font-weight: 600;
}

.titulo-perfil-grande {
    font-family: 'Playfair Display', serif;
    font-size: clamp(40px, 5.5vw, 70px); /* Se adapta perfectamente tanto a Mac como a iPhone */
    font-weight: 400;
    color: #2C2520;
    margin: 0 0 25px 0;
    line-height: 1.1;
}

.parrafo-perfil-fino {
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    line-height: 1.8; /* Mayor interlineado para una lectura ultra fluida */
    color: #554A42;
    margin: 0;
}
}