/* ==========================================================
   PALETA DE COLORES (root)
   ========================================================== */
:root {
    --color-primary: #5AE22D;
    --color-primary-rgb: 90, 226, 45;

    --color-white: #FFFFFF;
    --color-white-rgb: 255, 255, 255;

    --color-gray-light: #B0B0B0;
    --color-gray-light-rgb: 176, 176, 176;

    --color-gray-medium: #5A5A5A;
    --color-gray-medium-rgb: 90, 90, 90;

    --color-black: #1A1A1A;
    --color-black-rgb: 26, 26, 26;
}

/* ==========================================================
   RESET / ESTILOS BASE (aplican a toda la página)
   ========================================================== */
* { box-sizing: border-box; scrollbar-width: none; }

body {
    margin: 0;
    font-family: "Poppins", Arial, Helvetica, sans-serif;
    background-color: var(--color-black);
    color: var(--color-white);
    position: relative;
    min-height: 100vh;
}

/* Imagen: esta sí se queda fija */
body::before {
    content: "";
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: -2;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url('https://assets.nflxext.com/ffe/siteui/vlv3/ae999ff9-5858-4638-b0f2-8abcf9fb6a08/web/PE-es-20260831-TRIFECTA-perspective_839c53b3-06e3-4ebb-bfc3-72df73f8a256_large.jpg');
}

/* Capa oscura: absolute, cubre TODO el documento, no el viewport */
body::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    z-index: -1;
    background: rgba(var(--color-black-rgb), 0.65);
}

/* Móviles / pantallas verticales */
@media (max-width: 828px) {
  body::before {
    position: absolute; /* fixed da problemas en iOS */
  }
}