@layer library, reset, base, utilities, components, layout, override;

@import url("https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400..600&display=swap") layer(library.font);

@import "https://unpkg.com/open-props/normalize.light.min.css" layer(library.normalize);
@import "https://unpkg.com/open-props/buttons.light.min.css" layer(library.buttons);

@layer demo {
  .section-cardlion {
    position: relative;
    background-color: white;
    display: grid;
    min-block-size: 100px;
    padding: var(--size-px-7);
    place-items: center;
  }

  .container-cardlion {
    container-type: inline-size;
    display: grid;
    inline-size: min(100%, 1064px);
    > * {
      grid-area: 1/1;
    }
  }

  .slider-cardlion {
    display: grid;
    grid-auto-flow: column;
    inline-size: 100%;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    border-radius: var(--radius-4);
    position: relative;
    -ms-overflow-style: none; /* IE/Edge */
    scrollbar-width: none; /* Firefox */
  }

  .slider-cardlion::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }

  .card-cardlion {
    background-image: linear-gradient(122deg, #0eb582, white);
    border-radius: var(--radius-3);
    display: grid;
    gap: var(--size-px-5);
    inline-size: 100cqi;
    padding-block: var(--size-px-10);
    padding-inline: var(--size-px-6);
    place-items: start;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    @container (width >= 860px) {
      gap: var(--size-px-9);
      grid-template-columns: 1fr 1fr;
      padding-inline: var(--size-px-10);
      place-items: center;
    }
  }

  .visual-cardlion {
    aspect-ratio: var(--ratio-square);
    border-radius: var(--radius-3);
    box-shadow: var(--shadow-6);
    overflow: clip;
    @container (width >= 860px) {
      max-block-size: 400px;
    }
  }

  .img-cardlion {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-image: var(--gradient-6);
  }

  .content-cardlion {
    display: grid;
    gap: var(--size-px-8);
    place-items: center; /* Centra el contenido tanto horizontal como verticalmente */
    width: 100%; /* Asegura que ocupe todo el ancho disponible */
    text-align: center; /* Asegura que el texto también se mantenga centrado */
  }

  @media (min-width: 860px) {
    .content-cardlion {
      gap: var(--size-px-5);
      place-items: center; /* Centra el contenido */
    }
  }


  .meta-cardlion,
  .card-actions-cardlion {
    display: grid;
    gap: var(--size-px-2);
  }

  .card-actions-cardlion {
    place-items: start;
    @container (width >= 860px) {
      gap: var(--size-px-3);
      grid-auto-flow: column;
    }
  }

  .title-cardlion {
    font-family: var(--font-neo-grotesque);
    font-size: 1.75rem;
    font-weight: var(--font-weight-4);
    text-wrap: balance;
    @container (width >= 860px) {
      font-size: var(--font-size-5);
    }
  }

  .desc-cardlion {
    font-family: var(--font-neo-grotesque);
    font-size: var(--font-size-2);
    max-inline-size: var(--size-content-2);
    text-wrap: pretty;
  }

  .common-btn-cardlion {
    background-clip: padding-box, border-box;
    background-origin: border-box;
    border-radius: var(--radius-4);
    font-family: var(--font-neo-grotesque);
    font-size: 0.875rem;
    font-weight: var(--font-weight-5);
    inline-size: max-content;
    min-block-size: 40px;
    text-decoration: none;
    --_bg: linear-gradient(aliceblue, aliceblue),
      linear-gradient(to right, deepskyblue, royalblue);
    --_border: transparent;
    --_ink-shadow: none;
  }

  .primary-cardlion {
    --_bg: linear-gradient(deepskyblue, royalblue);
    --_border: deepskyblue;
    --_text: white;
    border-width: 0;
  }

  .slider-controls-cardlion {
    display: grid;
    place-items: center;
    padding-block: var(--size-px-9);
  }

  .slider-controls-wrapper-cardlion {
    display: grid;
    grid-auto-flow: column;
    inline-size: calc(100% + 2rem);
    justify-content: space-between;
    place-items: center;
    @container (width >= 860px) {
      inline-size: 100%;
      padding: var(--size-px-2);
    }
    @container (width < 860px) {
      display: none;
    }
  }

  .overlay-image-cardlion {
    position: absolute;
    top: 40%; /* Ajusta este valor para mover la imagen más abajo */
    right: 0;
    height: 300px; /* Ajustar altura de la imagen */
    width: 300px; /* Ajustar ancho de la imagen */
    z-index: 1; /* Asegúrate de que esté por encima del contenido */
    pointer-events: none; /* Permite que los clics pasen a través */
  }

  .overlay-image-cardlion img {
    height: 100%; /* Mantiene la imagen dentro del contenedor */
    width: 100%; /* Hace que la imagen ocupe todo el contenedor */
    object-fit: cover; /* Asegura que la imagen cubra el área */
  }

  /* Media query para mover la imagen debajo de la tarjeta en pantallas más pequeñas */
  @media (max-width: 860px) {
    .overlay-image-cardlion {
      position: relative; /* Cambia la posición a relativa en pantallas pequeñas */
      height: auto; /* Ajusta la altura según sea necesario */
      width: 100%; /* Hace que la imagen ocupe todo el ancho */
      top: auto; /* Elimina la posición superior */
      right: auto; /* Elimina la posición derecha */
    }

    .overlay-image-cardlion img {
      height: auto;
      width: 100%; /* Hace que la imagen ocupe todo el ancho */
      object-fit: contain; /* Asegura que la imagen completa sea visible */
    }
  }
}




.card-cardlion.card-2 {
    border-radius: 20px; /* Añade la curva a los bordes */
    overflow: hidden; /* Asegura que los contenidos no se desborden */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Añade una ligera sombra */
  }
  .card-cardlion.card-3 {
    border-radius: 20px; /* Añade la curva a los bordes */
    overflow: hidden; /* Asegura que los contenidos no se desborden */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Añade una ligera sombra */
  }
  .card-cardlion.card-4 {
    border-radius: 20px; /* Añade la curva a los bordes */
    overflow: hidden; /* Asegura que los contenidos no se desborden */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Añade una ligera sombra */
  }

  .img-cardlion {
    border-radius: 20px 20px 20px 20px; /* Aplica curva solo en la parte superior de la imagen */
    padding: 30px; /* Añade un padding alrededor de la imagen */

    box-sizing: border-box; /* Asegura que el padding no afecte el tamaño total de la imagen */
  }