/**
 * Brand film section — front page, between hero and NUESTROS TRABAJOS.
 * Kept in its own file so style.css (96 KB, version-pinned) is untouched.
 */

.film-section{
    padding:72px 20px 8px;
}
.film-container{
    max-width:1000px;
    margin:0 auto;
    text-align:center;
}
/* Typography and underline bar mirror .products-display-title / .benefits-title
   in style.css so this section reads as native. */
.film-title{
    text-align:center;
    font-size:42px;
    font-weight:800;
    color:var(--text-dark);
    margin:0 0 30px;
    position:relative;
    display:inline-block;
    width:100%;
    letter-spacing:-1px;
}
.film-title::after{
    content:'';
    position:absolute;
    bottom:-15px;
    left:50%;
    transform:translateX(-50%);
    width:80px;
    height:4px;
    background:var(--gradient-primary);
    border-radius:2px;
}
.film-description{
    max-width:660px;
    margin:0 auto 32px;
    opacity:.85;
    line-height:1.6;
}
.film-frame{
    position:relative;
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 20px 52px rgba(0,0,0,.24);
    background:#000;
    aspect-ratio:16/9;
}
.film-video{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    background:#000;
}

/* Title breakpoints match the other section titles exactly:
   768 -> 32px, 480 -> 26px, 360 -> 24px. */
@media (max-width:768px){
    .film-section{ padding:44px 16px 4px; }
    .film-frame{ border-radius:10px; }
    .film-title{ font-size:32px; margin-bottom:20px; }
    .film-description{ margin-bottom:22px; }
}
@media (max-width:480px){
    .film-title{ font-size:26px; line-height:1.3; }
}
@media (max-width:360px){
    .film-title{ font-size:24px; }
}