* {
        margin: 0; /* elimina el margen externo (evita espacios no deseados alrededor)*/
        padding: 0; /* elimina el relleno interno por defecto */
        box-sizing: border-box; /* Incluye border y padding en el ancho total */
    }

    body {
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        background: radial-gradient(circle, rgb(214, 168, 182) 0%, rgba(30, 115, 135, 1) 100%);
        color: white; /*color texto por defecto*/ 
        padding: 20px; /* espaciado interno */
        font-size: 16px; /* tamaño base de letra para el documento*/
    }

    h1 {
        display: flex;
        text-align: center;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /*esto se utiliza para settear la fuente de el titulos */
        font-size: 3rem;
        background: linear-gradient(100deg, #755465, #708dc7);
        -webkit-text-fill-color: transparent; /* para que el texto quede transparente y mostrar el gradiente */
        background-clip: text; /* recorta el fondo para que sólo se muestre dentro de las letras*/
    }
    
    h2 {
        text-align: center;
        margin-bottom: 30px; /* separa del siguiente elemento (espacio inferior)*/
        font-size: 30px;
    }

    section {
        background: rgba(255, 255, 255, 0.1); /*(10% de opacidad)*/
        backdrop-filter: blur(15px); /* aplica desenfoque al contenido que queda detrás*/
        border: 1px solid rgba(255, 255, 255, 0.12);
        padding: 2rem; /* espacio interno (2rem = 2 * tamaño raíz) */
        border-radius: 20px; /* esquinas redondeadas*/
        margin: 20px auto;
    }

    input {
        padding: 12px; /* espacio dentro del campo de texto */
        margin-bottom: 15px; /* espacio debajo del input */
        border-radius: 25px; 
        background: rgba(255, 255, 255, 0.5);
        border: 2px solid #bebebe;
        width: 300px;
        font-size: 14px;
    }

    input::placeholder {
        color: #555555; /*color de texto*/
    }

    .pelicula {
        background: #fff;
        border-radius: 12px;
        padding: 15px;
        margin: 15px 0;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        display: flex; /*los elementos hijos se ponen en una fila horizontal */
        align-items: flex-start; /* alinea los items al inicio verticalmente*/
    }

    .pelicula img { /*imagenes de peliculas*/
        width: 120px;
        height: auto;
        border-radius: 8px;
        margin-right: 15px;
    }

    .pelicula h2 { /*texto de las pelis*/
        margin: 0;
        color: #333;
    }

    .pelicula p {
        margin: 5px 0;
        color: #555;
    }

    button {
        background-color: #1E7387;
        color: white;
        margin: 10px auto;
        width: 200px;
        margin: 10px;
        border-radius: 20px;
        padding: 15px;
        font-weight: bold;
        font-size: 14px;
        border: 1px solid #8f9091;
    }

    .button-NewPagina {
        display: block;
        background-color: aliceblue;
        color: #333;
        border-radius: 10px;
        width: 500px;
        font-size: 20px;
        transition: all 0.5s ease;
    }

    .cuenta {
        background: linear-gradient(100deg, #5b609b, #708dc7);
        color: whitesmoke;
        width: 50px;
        height: 50px;
        border-radius: 100px;
        font-weight: bold;
        font-size: 16px;
        border: 1px solid #8f9091;
        margin-left: 1170px;
    
        /* Propiedades para centrar el contenido */
        display: flex;
        align-items: center;
        justify-content: center;
    
        /* Opcional: mejorar la interacción */
        cursor: pointer;
        transition: transform 0.2s ease;
    }
    .contenedor-busqueda {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 15px; /* controla separación */
    }

    button:hover { /*Cuando pasan el puntero en el botón*/
        background: linear-gradient(90deg, #755465, #708dc7);
        font-weight: bold;
        color: black; /*color de la letra*/
        border: 1px solid #5e5d5d;
    }

    .contenedor {
      display: flex; /* pone los elementos en la misma línea */
      grid-template-columns: 150px 1fr;       
      align-items: center; /* alinea verticalmente */
      gap: 10px;           /* espacio entre ellos */
      margin: 10px auto;
      max-width: 400px;
    }

    /*SECCIÓN DE LOGIN*/
    .seccion-login {
        max-width: 600px;
        height: 450px;
        margin: 40px auto; /*para centrar*/
        padding: 3rem;
    }
    .formulario-login {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 15px;
    }
    .seccion-login button {
        margin-top: 50px;
        width: 100%;   /* botón ocupa todo el ancho */
    }

    .miCuenta {
        display: flex;
        flex-direction: column; /* apila en columna */
        align-items: center;
        margin-bottom: 15px; /*espacio por debajo del bloque*/
    }

    .volver {
        background-color: #1E7387;
        color: white;
        margin: 10px auto;
        width: 50px;
        margin: 10px;
        border-radius: 20px;
        padding: 15px;
        font-weight: bold;
        font-size: 14px;
        border: 1px solid #8f9091;
    }

    .news {
        display: flex;
        align-items: flex-start;
        gap: 20px;
        margin-bottom: 25px;
        padding: 15px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 15px;
        background-color: rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(20px);
    }

    .news img {
        width: 220px;
        height: 190px;
        border-radius: 8px;
        object-fit: cover;
        margin-right: 15px;
    }

    .detalle {
        display: flex; /* coloca la imagen y el texto en una fila horizontal */
        align-items: flex-start; /* alinea arriba verticalmente */
        gap: 25px; /* separación entre la imagen y el texto */
        padding: 20px;
        margin-top: 30px;
    }

    .detalle img {
        width: 500px;
        height: auto;
        border-radius: 15px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    }
    
    .detalle h2 {
        font-size: 2rem;
        text-align: center;
        font-family: 'Times New Roman', Times, serif;
    }


.seccion-login {  
    margin: 50px auto;                      /* centra horizontalmente y separa verticalmente */
    padding: 3rem 2.5rem;                   /* espacio interno (arriba/abajo 3rem, lados 2.5rem) */
    border-radius: 25px;      
    background: rgba(255, 255, 255, 0.12);  /* fondo semi-transparente blanco (12% opacidad) */
    border: 1px solid rgba(255, 255, 255, 0.25); /* borde suave para delimitar la tarjeta */
    backdrop-filter: blur(20px);            /* desenfoca lo que hay detrás de esta tarjeta*/
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); /* sombra para dar profundidad (x, y, blur, color) */
}

/* Título dentro de la sección */
.seccion-login h2 {
    text-align: center;          
    font-size: 2rem;
    margin-bottom: 30px;                    /* separa del formulario */
    background: linear-gradient(90deg, #2f0033, #387ba8); /* degradado de fondo para el texto */
    -webkit-text-fill-color: transparent;   /* <--- importante explicado abajo */
    background-clip: text;                  /* <--- importante explicado abajo */
    -webkit-background-clip: text;          /* soporte extra para webkit (Safari/Chrome antiguos) */
}

/* EXPLICACIÓN:
   -webkit-text-fill-color: transparent;
     Hace que el "relleno" del texto quede transparente. Esto se suele usar en combinación
     con background-clip: text para que el texto muestre el fondo (degradado) en lugar de
     un color sólido. Es una propiedad con prefijo -webkit porque es historic/propia de navegadores
     basados en WebKit/Blink, pero funciona bien en la práctica.

   background-clip: text;
     Indica que el recorte del fondo (background) se aplique sólo dentro de las letras del texto.
     Combinado con -webkit-text-fill-color: transparent permite "rellenar" las letras con un
     degradado u otra imagen de fondo.
*/

/* =========================================================
  ADICIONES PARA ORDENAR EL SIGN UP
  Pegar AL FINAL de tu Style.css
   - No borra nada, solo agrega/override donde haga falta
   - Comentarios explicativos incluidos
   ========================================================= */

/* Asegura que la sección del signup use el mismo ancho que definiste,
   pero la centra y añade un padding más consistente */
.seccion-login {
    max-width: 720px;          /* un poco más ancho para escritorio */
    height: auto;
    margin: 40px auto;         /* centra horizontalmente y separa verticalmente */
    padding: 36px 32px;        /* espacio interior (arriba/abajo, laterales) */
    border-radius: 20px;       /* esquinas redondeadas (override si ya tenías) */
    background: rgba(255,255,255,0.09); /* ligera capa para destacar el formulario */
    backdrop-filter: blur(12px);       /* desenfoque del fondo detrás (glassmorphism) */
    box-shadow: 0 10px 30px rgba(0,0,0,0.25); /* sombra para profundidad */
}

/* Título: que refleje "Sign Up" en lugar de 'Registrarse' si quieres homogeneizar.
   Esto no cambia tu HTML, solo el estilo (puedes mantener el texto HTML como prefieras). */
.seccion-login h2 {
    font-size: 2rem;
    margin-bottom: 1.25rem;
    text-align: center;
    /* gradiente aplicado al texto */
    background: linear-gradient(90deg,#543175,#80b5d8);
    -webkit-background-clip: text;    /* recorta el fondo al interior del texto (webkit) */
    background-clip: text;            /* estándar */
    -webkit-text-fill-color: transparent; /* hace el "relleno" del texto transparente para ver el gradiente */
}

/* FORMA Y ESPACIADO de cada campo del formulario */
.formulario-signup {
    display: flex;
    flex-direction: column;   /* coloca label sobre input */
    gap: 8px;                 /* espacio pequeño entre label e input */
}

/* Si quieres agrupar en dos columnas en pantallas grandes, usamos un "grid" en el form */
#formRegistro {
    display: grid;
    grid-template-columns: 1fr; /* por defecto 1 columna (móvil) */
    gap: 16px;                  /* separación entre celdas */
}

/* En pantallas más anchas, pasa a 2 columnas para aprovechar el espacio */
@media (min-width: 900px) {
    #formRegistro {
        grid-template-columns: 1fr 1fr; /* dos columnas iguales */
    }

    /* Forzar que ciertos campos ocupen las dos columnas (ej: botón o dirección larga) */
    /* usa la clase .fullwidth en el HTML si quieres que un campo ocupe 2 columnas */
    #formRegistro .fullwidth {
        grid-column: 1 / -1; /* ocupa desde la primera hasta la última columna */
    }
}

/* Inputs y se*