/* 1. CARGA DE TIPOGRAFÍAS */
@font-face {
    font-family: 'AvantGarde-parrafo';
    src: url('../tipografias/ITCAvantGardePro-XLt.otf') format('opentype');
    
}

@font-face {
    font-family: 'AvantGarde-parrafo-resaltado';
    src: url('../tipografias/ITCAvantGardePro-Demi.otf') format('opentype');
    
}


@font-face {
    font-family: 'AvantGarde-Book';
    src: url('../tipografias/ITCAvantGardePro-Bk.otf') format('opentype');
    
}

@font-face {
    font-family: 'AvantGarde-Secreto';
    src: url('../tipografias/ITCAvantGardePro-XLt.otf') format('opentype');
    
}

@font-face {
    font-family: 'AvantGarde-texto-mini';
    src: url('../tipografias/ITCAvantGardePro-XLt.otf') format('opentype');
    
}

@font-face {
    font-family: 'AvantGarde';
    src: url('../tipografias/ITCAvantGardePro-BkObl.otf') format('opentype');
    
}

@font-face {
    font-family: 'AvantGarde-Bold';
    src: url('../tipografias/ITCAvantGardePro-Bold.otf') format('opentype');
    
}

@font-face {
    font-family: 'AvantGarde';
    src: url('../tipografias/ITCAvantGardePro-BoldObl.otf') format('opentype');
    
}

@font-face {
    font-family: 'AvantGarde';
    src: url('../tipografias/ITCAvantGardePro-Demi.otf') format('opentype');
    
}

@font-face {
    font-family: 'AvantGarde';
    src: url('../tipografias/ITCAvantGardePro-DemiObl.otf') format('opentype');
    
}

@font-face {
    font-family: 'AvantGarde';
    src: url('../tipografias/ITCAvantGardePro-Md.otf') format('opentype');
    
}

@font-face {
    font-family: 'AvantGarde';
    src: url('../tipografias/ITCAvantGardePro-MdObl.otf') format('opentype');
    
}

@font-face {
    font-family: 'AvantGarde-parrafo2';
    src: url('../tipografias/ITCAvantGardePro-XLt.otf') format('opentype');
    
}

@font-face {
    font-family: 'AvantGarde';
    src: url('../tipografias/ITCAvantGardePro-XLtObl.otf') format('opentype');
    
}

/* 2. GENERAL */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'AvantGarde-Book', sans-serif;
    background-color: #C93B2C;
    color: white;
    text-align: center;
    line-height: 1.2;
    overflow-x: hidden;    
}

.container {
    width: 90%;
    max-width: 900px;
    margin: 0 auto;
    padding: 60px 0;
}


.section-red { background-color: #C93B2C; }
.section-black { background-color: #000; }

/* Reduce el espacio inferior de la primera sección */
.section-red.hero .container {
    padding-bottom: 0px; /* Antes era 60px */
}

/* Centrado del contenedor de la imagen */
.hero-visual {
    width: 100%;
    display: flex;
    justify-content: center; /* Centra el contenido horizontalmente */
    margin-top: 20px;
}

/* Centrado de la imagen en sí */
.sticker-img {
    display: block; /* Importante para que funcione el margin auto */
    margin: 0 auto;
    width: 100%;
    max-width: 400px;
    height: auto;
}

/* 3. TEXTOS */
.title-main { 
    margin-bottom: 30px; line-height: 0.9; 
    display: inline;
}

.text-bold {
    font-family: 'AvantGarde-Bold', sans-serif; /* Debe coincidir con el nombre de tu @font-face */
    font-size: 3.5rem;
    text-transform: uppercase;
}

.text-thin {
    font-family: 'AvantGarde-Secreto', sans-serif;
    font-size: 3.5rem;
    display: block;
}

.instruction {
    font-size: 1.5rem;
    margin-bottom: 20px;
    font-family: 'AvantGarde-Bold', sans-serif;
}

.paragraph-detail {
    font-size: 1.3rem;
    line-height: 1.4;
    margin-bottom: 40px;
}

.text-movie {
    font-size: 1.3rem;
    margin-bottom: 20px;
    font-family: 'AvantGarde-Bold', sans-serif;
}

.text-movie-mini {
    font-size: 1.3rem;
    margin-bottom: 20px;
    font-family: 'AvantGarde-texto-mini', sans-serif;
}

.text-movie-parrafo {
    font-size: 1.3rem;
    margin-bottom: 20px;
    font-family: 'AvantGarde-parrafo', sans-serif;
}

.text-movie-parrafo-resaltado {
    font-size: 1.3rem;
    margin-bottom: 20px;
    font-family: 'AvantGarde-parrafo-resaltado', sans-serif;
}

/* 4. BOTÓN */
.btn-ver {
    /* Medidas exactas de Figma */
    width: 86px;
    height: 57px;
    
    /* Forma y Color */
    background-color: #000;
    color: #fff;
    border-radius: 50px; /* Esto le da la forma de pastilla */
    text-decoration: none;
    
    /* Tipografía solicitada */
    font-family: 'AvantGarde-Bold', sans-serif;
    font-size: 18px; /* Ajusta este valor según veas en Figma */
    text-transform: uppercase;
    
    /* Centrado perfecto del texto "VER" */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Margen para separarlo del texto de arriba */
    margin: 40px auto; 
    
    /* Suavizado de transición */
    transition: transform 0.2s ease;
}






/* 5. VÍDEOS RESPONSIVOS (YouTube) */
.video-responsive-trailer {
    position: relative;
    padding-bottom: 56.25%; /* Proporción 16:9 */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
    margin-bottom: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.video-responsive-trailer iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}



/* ESTILOS PARA LA PORTADA DEL VÍDEO */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10; /* Por encima del iframe */
    cursor: pointer;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.img-portada {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ajusta la imagen sin deformarla */
}















.video-responsive-capitulo {
    position: relative;
    width: 90vw;        /* 90% del ancho real de la pantalla */
    left: 50%;
    transform: translateX(-50%); /* centra aunque el padre sea estrecho */
    padding-bottom: 50.625vw;    /* 16:9 basado en el viewport */
    height: 0;
    overflow: hidden;
    background: #000;
    /*box-shadow: 0 20px 50px rgba(0,0,0,0.4);*/
}

.video-responsive-capitulo iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* 6. IMÁGENES */
.sticker-img { width: 100%; max-width: 400px; height: auto; }
.img-elenco { width: 100%; max-width: 700px; margin-bottom: 40px; }
.logos-footer { width: 100%; max-width: 700px; margin-top: 40px; }
.title-movie { font-family: 'AvantGarde-Bold', sans-serif; margin-bottom: 20px; }

/* 7. MÓVIL */
@media (max-width: 768px) {
    .text-bold { font-size: 2.5rem; }
    .text-thin { font-size: 2.2rem; }
    .container { padding: 40px 20px; }
}