/* Variables CSS para personalización */
:root {
    --color-neutral-900: #111;
    --color-light: #f5f5f5;
    --color-black: #000;
    --size-font: 16px;
    --container-padding: 1rem;
    --section-padding: 2rem;
  }
  
  /* Estilos generales */
  body {
    background-color: var(--color-neutral-900);
    color: var(--color-light);
    font-size: var(--size-font);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
  }
  
  /* Contenedor parallax */
  .parallax {
    width: 100%;
    position: relative;
    overflow: hidden;
  }
  
  /* Encabezado parallax */
  .parallax__header {
    z-index: 2;
    padding: var(--section-padding) var(--container-padding);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100svh;
    position: relative;
  }
  
  /* Contenido parallax */
  .parallax__content {
    padding: var(--section-padding) var(--container-padding);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100svh;
    position: relative;
  }
  
  /* Visuales parallax */
  .parallax__visuals {
    width: 100%;
    height: 120%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
  }
  
  /* Capas del parallax */
  .parallax__layers {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
  }
  
  .parallax__layer-img {
    object-fit: cover;
    width: 100%;
    height: 117.5%;
    position: absolute;
    top: -17.5%;
    left: 0;
    pointer-events: none;
  }
  
  .parallax__layer-title {
    width: 100%;
    height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: auto;
  }
  
  /* Título parallax */
  .parallax__title {
    font-family: 'PP Neue Corp Wide', sans-serif;
    font-size: 11vw;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    margin: 0;
  }
  
  /* Degradado inferior */
  .parallax__fade {
    z-index: 30;
    width: 100%;
    height: 20%;
    position: absolute;
    bottom: 0;
    left: 0;
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 0.738) 19%,
      rgba(0, 0, 0, 0.541) 34%,
      rgba(0, 0, 0, 0.382) 47%,
      rgba(0, 0, 0, 0.278) 56.5%,
      rgba(0, 0, 0, 0.194) 65%,
      rgba(0, 0, 0, 0.126) 73%,
      rgba(0, 0, 0, 0.075) 80.2%,
      rgba(0, 0, 0, 0.042) 86.1%,
      rgba(0, 0, 0, 0.021) 91%,
      rgba(0, 0, 0, 0.008) 95.2%,
      rgba(0, 0, 0, 0.002) 98.2%,
      transparent 100%
    );
  }
  
  /* Línea negra para dar efecto overflow */
  .parallax__black-line-overflow {
    z-index: 20;
    background-color: var(--color-black);
    width: 100%;
    height: 2px;
    position: absolute;
    bottom: -1px;
    left: 0;
  }
  
  /* Estilo para el ícono SVG */
  .osmo-icon-svg {
    width: 8em;
    position: relative;
  }
  
  /* Importación de fuente personalizada */
  @font-face {
    font-family: 'PP Neue Corp Wide';
    src: url('https://cdn.prod.website-files.com/671752cd4027f01b1b8f1c7f/6717e399d30a606fed425914_PPNeueCorp-WideUltrabold.woff2')
      format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
  }
  
  .btn-medussa {
    display: inline-block;               /* Permite usar margin/padding sin forzar un ancho */
    padding: 1rem 2rem;                  /* Espacio interno para un tamaño más cómodo */
    font-size: 1rem;                     /* Tamaño de texto */
    font-weight: 600;                    /* Peso de la fuente para darle más énfasis */
    color: #fff;                         /* Color de texto */
    background: linear-gradient(
      135deg, 
      #6d5dfc 0%, 
      #00c9ff 100%
    );                                   /* Gradiente de ejemplo (ajústalo a tu gusto) */
    border: none;                        /* Quitar borde */
    border-radius: 4px;                  /* Bordes ligeramente redondeados */
    cursor: pointer;                     /* Indica que es clickeable */
    transition: transform 0.3s ease, 
                box-shadow 0.3s ease;    /* Transiciones suaves en hover */
    text-transform: uppercase;           /* Ejemplo: mayúsculas; quítalo si no lo quieres */
    letter-spacing: 0.5px;               /* Separación ligera de letras */
  }
  
  /* Efecto al poner el cursor encima */
  .btn-medussa:hover {
    transform: translateY(-2px);         /* Levanta un poco el botón */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3); /* Sombra para dar sensación de profundidad */
  }
  
  /* Opcional: estilo al hacer clic (active) */
  .btn-medussa:active {
    transform: translateY(0px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  }
  
  /* Opcional: estilo para foco (accesibilidad) */
  .btn-medussa:focus {
    outline: 2px solid #00c9ff;
    outline-offset: 2px;
  }