*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Montserrat',sans-serif;
}

html{
scroll-behavior:smooth;
}

body{
background:#071321;
color:#fff;
}
.beneficios-section{
    background:#104f8d;


}
/* BOTÓN VOLVER ARRIBA */

#btn-arriba{
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 55px;
    height: 55px;
    background: rgba(0,0,0,.8);
    color: #fff;
    border-radius: 50%;
    text-decoration: none;

    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 26px;
    font-weight: bold;

    box-shadow: 0 5px 15px rgba(0,0,0,.3);

    cursor: pointer;
    z-index: 99999;

    opacity: 0;
    visibility: hidden;
    transition: all .3s ease;
}

#btn-arriba.visible{
    opacity: 1;
    visibility: visible;
}

#btn-arriba:hover{
    background:#0d3f71;
    transform: translateY(-5px);
}

/* TICKER */

.ticker{
background:#e30613;
padding:12px;
overflow:hidden;
white-space:nowrap;
font-weight:700;
}

.ticker span{
display:inline-block;
padding-left:100%;
animation:ticker 20s linear infinite;
}

@keyframes ticker{
from{transform:translateX(0);}
to{transform:translateX(-100%);}
}

/* HERO */

.hero{
height:80vh;
background:url(' ../img/home-cinepolis.jpg') center center/cover;
position:relative;
display:flex;
align-items:center;
}

.hero::before{
content:'';
position:absolute;
inset:0;
background:linear-gradient(
90deg,
rgba(0,0,0,.85),
rgba(0,0,0,.3)
);
}

.hero-content{
position:relative;
z-index:2;
padding:40px;
max-width:700px;
}

.badge{
display:inline-block;
background:#e30613;
padding:10px 18px;
border-radius:50px;
font-size:14px;
font-weight:700;
margin-bottom:20px;
}

.hero h1{
font-size:4rem;
line-height:1;
margin-bottom:20px;
}

.hero p{
font-size:1.2rem;
margin-bottom:30px;
color:#ddd;
}

.buttons{
display:flex;
gap:15px;
flex-wrap:wrap;
}

.btn{
    background:#104f8d;
color:white;
padding:15px 30px;
border-radius:50px;
text-decoration:none;
font-weight:700;
transition:.3s;

}

.btn-primary{
background:#104f8d;
color:white;
}

.btn-secondary{
background:white;
color:#104f8d;
}



/* SECCIONES */

.section{
padding:60px 30px;
background-color: #f3f4f6;
color: #104f8d;
}

.section h2{
margin-bottom:25px;
font-size:2rem;
}

/* CARRUSEL */

.movies{
display:flex;
gap:20px;
overflow-x:auto;
padding-bottom:10px;
}

.movies::-webkit-scrollbar{
height:8px;
}

.movies::-webkit-scrollbar-thumb{
background:#104f8d;
border-radius:20px;
}

.movie{
min-width:220px;
transition:.3s;
cursor:pointer;
}

.movie img{
width:100%;
border-radius:12px;
display:block;
}

.movie:hover{
transform:scale(1.08);
}

.movie-title{
margin-top:10px;
font-weight:600;
}

/* BENEFICIOS */

/* =========================
   TITULOS
========================= */
h2, .subtitulo {
  text-align: center;
}

/* =========================
   SLIDER (MOBILE + BASE)
========================= */
.netflix-slider {
  display: flex;
  gap: 20px;

  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;

  padding: 40px 20px;

  scrollbar-width: none;
}

.netflix-slider::-webkit-scrollbar {
  display: none;
}

/* =========================
   CARD
========================= */
.netflix-card {
  flex: 0 0 320px;

  scroll-snap-align: center;

  position: relative;
  border-radius: 16px;
  overflow: hidden;

  transform: scale(0.9);
  opacity: 0.6;

  transition: transform 0.3s ease, opacity 0.3s ease;

  box-shadow: 0 10px 25px rgba(0,0,0,0.25);
}

/* estado hover (PC) */
.netflix-card:hover {
  transform: scale(1.05);
  opacity: 1;
  z-index: 2;
}

/* imagen */
.netflix-card img {
  width: 100%;
  display: block;
}

/* boton */
.buttons{
    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
}

.buttons a{
    display:inline-block;
    padding:14px 30px;
    background:#104f8d;
    color:#fff !important;
    text-decoration:none !important;
    border-radius:10px;
    font-weight:bold;
    font-size:16px;
    transition:0.3s;
}

.buttons a:hover{
    background:#0c3f70;
    transform:translateY(-2px);
}

/* =========================
   🖥️ PC CENTRADO REAL
========================= */

@media (min-width: 1024px) {

.netflix-slider {
  justify-content: flex-start;
  overflow-x: auto;
  padding: 40px calc(50% - 160px);
}

}

@media (min-width: 1024px) {

.netflix-slider {
  justify-content: center;;
  overflow-x: hidden;
  padding: 40px calc(50% - 160px); /* centra la card */
}

.netflix-card {
  transform: scale(0.9);
  opacity: 0.5;
}

.netflix-card:hover {
  transform: scale(1.08);
  opacity: 1;
  z-index: 2;
}

/* card en foco (truco visual sin JS) */
.netflix-card {
  scroll-snap-align: center;
}
}

.netflix-card {
  transform: scale(0.9);
  opacity: 0.5;
  transition: 0.3s ease;
}

.netflix-card.active {
  transform: scale(1.08);
  opacity: 1;
  z-index: 2;
}

/*flechas*/
.slider-wrapper {
  position: relative;
}

/* SLIDER */
.netflix-slider {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 40px 20px;
  scrollbar-width: none;
}

.netflix-slider::-webkit-scrollbar {
  display: none;
}

/* FLECHAS */
.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  width: 45px;
  height: 45px;

  border: none;
  border-radius: 50%;

  background: rgba(0,0,0,0.6);
  color: white;
  font-size: 26px;

  cursor: pointer;
  z-index: 10;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* izquierda */
.arrow.left {
  left: 10px;
}

/* derecha */
.arrow.right {
  right: 10px;
}

.arrow:hover {
  background: rgba(0,0,0,0.8);
}

/* FOOTER */

footer{
padding:30px;
text-align:center;
background:#05101d;
color:#999;
}

/* RESPONSIVE */

@media(max-width:768px){

.hero{
height:70vh;
}

.hero h1{
font-size:2.5rem;
}

.hero p{
font-size:1rem;
}

.section{
padding:40px 20px;
}

.movie{
min-width:160px;
}

}