/* Importación de la fuente (se mantiene igual) */
@import url(https://fonts.bunny.net/css?family=cutive:400);

/* NOTA: @layer es una característica de CSS moderno. La mayoría de navegadores lo soportan. */
@layer base, demo;

@layer demo {
    /* --- Estilos Generales --- */
    h1 {
        font-weight: 300;
        font-size: 1.4rem;
    }

    /* --- Contenedor Principal de las Tarjetas (.cards) --- */
    .cards {
        --width: 300px;
        --rotate-duration: 500ms;
        --rotate-timing-function: linear(
            0, 0.417 25.5%, 0.867 49.4%, 1 57.7%, 0.925 65.1%, 0.908 68.6%,
            0.902 72.2%, 0.916 78.2%, 0.988 92.1%, 1
        );
        --article-reveal-duration: 300ms;
        --article-reveal-delay: 500ms;
        --degrees: 360deg;
        --degree-start: 0deg;
        --items: 4;
        --radius: 300px;
        --item-size: 120px;

        position: relative;
        width: var(--width);
        aspect-ratio: 3/5;
        /* background-color: white; */
        background-repeat: no-repeat;
        background-size: cover;
        overflow: hidden;
        outline-offset: 10px;
        color: black;
        display: grid;
    }

    /* Media query para las variables de .cards */
    @media (min-width: 800px) {
        .cards {
            --width: 300px;
            --radius: 450px;
            --item-size: 150px;
        }
    }

    /* Lógica para los radio buttons seleccionados */
    .cards:has(#card-1:checked) {
        --target: 1;
        --opacity-card-1: 1;
    }
    .cards:has(#card-2:checked) {
        --target: 2;
        --opacity-card-2: 2;
    }
    .cards:has(#card-3:checked) {
        --target: 3;
        --opacity-card-3: 3;
    }
    .cards:has(#card-4:checked) {
        --target: 4;
        --opacity-card-4: 4;
    }

    /* Ocultar los inputs de tipo radio */
    .cards input[type="radio"] {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
    }

    /* --- Contenedor del Círculo Rotatorio (.circle-container) --- */
    .circle-container {
        position: absolute;
        top: calc(var(--radius) * -1);
        left: 50%;
        translate: -50%;
        margin: auto;
        width: var(--item-size);
        height: var(--item-size);
        rotate: calc(var(--degrees) / var(--items) * var(--target));
        transition-property: rotate;
        transition-duration: var(--rotate-duration);
        transition-timing-function: var(--rotate-timing-function);
    }
    
    /* Íconos individuales dentro del círculo */
    .circle-container > div {
        pointer-events: none;
        z-index: 2;
        position: absolute;
        inset: 0;
        margin: auto;
        display: grid;
        place-content: center;
    }

    /* Asignación de variables y transformaciones a cada ícono */
    .circle-container > div:nth-child(1) { --i: 1; }
    .circle-container > div:nth-child(2) { --i: 2; }
    .circle-container > div:nth-child(3) { --i: 3; }
    .circle-container > div:nth-child(4) { --i: 4; }
    .circle-container > div {
        --angle: calc((var(--degrees) / var(--items)) * (var(--i) - 1) + var(--degree-start));
        transform: rotate(var(--angle)) translate(var(--radius)) rotate(90deg);
    }
    
    .circle-container > div > img {
        width: 90px;
        margin: auto;
        object-fit: cover;
        rotate: 180deg;
        filter: drop-shadow(6px 14px 5px rgba(0, 0, 0, 0.35));
    }

    /* --- Contenedor del Contenido (.contents) --- */
    .contents {
        margin-top: var(--item-size);
        padding: 2rem 2rem 1rem;
        display: grid;
    }

    .contents > article {
        grid-area: 1/1;
        display: grid;
        grid-template-rows: auto 1fr auto;
        opacity: var(--article-opacity, 0);
        pointer-events: none;
    }

    /* Transición para el texto dentro del artículo */
    .contents > article :is(li, .article-title) {
        transition: var(--article-reveal-duration) ease-in-out;
        transition-delay: var(--article-delay, 0ms);
        opacity: var(--article-opacity, 0);
        translate: 0 var(--article-y, 20px);
    }

    /* Retrasos de transición para los li */
    .contents > article li:nth-child(1) { transition-delay: calc(var(--article-delay) * 2); }
    .contents > article li:nth-child(2) { transition-delay: calc(var(--article-delay) * 3); }
    .contents > article li:nth-child(3) { transition-delay: calc(var(--article-delay) * 4); }


    /* --- REGLAS RESPONSIVAS PARA EL TÍTULO (LA PARTE IMPORTANTE) --- */
    
    /* 1. Regla base para el título (pantallas pequeñas / móvil) */
    .contents > article .article-title {
        font-size: 1.6rem !important;
        font-weight: 600 !important;
        color: #FA9140;
        margin: auto !important;
        margin-bottom: 1rem !important;
        text-align: center;
        margin-top: 8rem !important; 
    }

    /* 2. Regla para pantallas grandes (correctamente fuera de otras reglas) */
    @media (min-width: 800px) {
        .contents > article .article-title {
            margin-top: 10rem !important;
        }
    }


    /* --- RESTO DE ESTILOS DEL CONTENIDO --- */

    .contents > article ul {
        margin-block: 0;
        font-weight: 300;
        padding-inline-start: 1rem;
        display: grid;
        gap: 0.5rem;
        place-content: start;
    }

    .contents > article li {
        margin: 0;
        font-size: 0.9rem !important;
        text-align:center;
    }

    .contents > article li > span {
        font-size: 1rem;
        font-weight: bold;
        color: #037da5;
    }

	@media (min-width: 800px) {
        .contents > article li {
            text-align: end;
        }
    }
    .contents > article a {
        position: relative;
    }

    .contents > article > .buttons {
        display: flex;
        justify-content: center;
        gap: 10rem;
    }

    .contents > article > .buttons > label {
        font-size: 2rem;
        cursor: pointer;
        color: #FA9140;
        transition: color 150ms ease-in-out;
    }

    .contents > article > .buttons > label:hover {
        color: steelblue;
    }

    .contents > article > .buttons > label[disabled] {
        opacity: 0.25;
        pointer-events: none;
    }

    /* --- Lógica para mostrar el artículo activo --- */
    .cards:has(#card-1:checked) > .contents > article:nth-child(1),
    .cards:has(#card-2:checked) > .contents > article:nth-child(2),
    .cards:has(#card-3:checked) > .contents > article:nth-child(3),
    .cards:has(#card-4:checked) > .contents > article:nth-child(4) {
        --article-opacity: 1;
        --article-y: 0;
        pointer-events: auto;
        --article-delay: var(--article-reveal-delay);
    }
}