section#cortina {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    background: radial-gradient(farthest-side circle at 25% 25%, var(--color-base), var(--color-oscuro));
    color: white;

    div.adorno-oscuro {
        width: 100vw;
        height: 100vh;

        position: relative;
        background-color: rgba(0, 0, 0, 0.75);
        bottom: -100vh;
        transition: bottom 0.15s, transform 0.25s;
    }

    div.contenido {
        max-width: 1300px;
        width: 100%;
        margin: 0px auto;
        padding: 0px 20px;
        box-sizing: border-box;
        height: 100vh;
        z-index: 3;
        position: absolute;
        left: 50%;
        transform: translate(-50%);

        display: flex;
        justify-content: center;
        align-items: center;

        gap: 50px;

        font-size: 15pt;

        @media (width <= 1000px) {
            flex-direction: column;
        }

        @media (width <= 1300px) {
            font-size: 11pt;
        }

        div.isotipo {
            text-align: center;
            @media (width <= 1000px) {
                display: none;
            }
        }

        div.contenedor-isotipo {
            border-radius: 50%;
            padding: 20px;

            display: inline-block;
            max-width: 512px;
            width: 100%;
            max-height: 512px;
            height: 100%;
            background: white;
            box-shadow: 10px 10px 50px rgba(0, 0, 0, 0.5);
            transition: transform 10s;
            img {
                width: 100%;
                height: 100%
            }

            &.animación {
                transform: rotate3d(1, 1, 0, 20deg)
            }
        }

        div.texto-intro {
            font-family: var(--fuente-título);
            font-weight: var(--fuente-ancho, normal);
            font-size: 150%;

            strong {
                font-size: 250%;
                color: var(--color-resaltado);
            }
        }

        div.eslogan {
            font-size: 150%;
            margin: 20px 0px;
        }

        div.planes-precio {
            display: grid;
            grid-template-columns: 250px 1fr;
            gap: 25px;

            @media (width <= 1000px) {
                display: flex;
                flex-direction: column;
                gap: 15px;

            }

            button {
                background-color: var(--color-alterno);
                padding: 10px 20px;
                font-weight: bold;
                color: white;
                border: none;

                font-size: 130%;
                @media (width <= 1000px) {
                    font-size: 200%;
                }

                width: 100%;
                height: 80px;

                cursor: pointer;
                transition: transform 0.25s, background 0.25s;
                &:hover {
                    transform: scale(1.05);
                    background-color: var(--color-alterno-resaltado);
                }
            }


            .precio-inicial {
                @media (width <= 1000px) {
                    text-align: center;
                }
                strong {
                    color: var(--color-resaltado);
                    display: block;
                    font-size: 160%;
                    @media (width <= 1000px) {
                        font-size: 260%;
                    }

                }
            }
        }
    }
}

section#planes {
    height: 100vh;
    margin: 0px auto;

    color: black;
    font-size: 14pt;

    .contenedor {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .planes {
            display: flex;
            gap: 20px;
            overflow-x: hidden;
            width: 100%;

            .plan {
                box-sizing: border-box;
                flex: 0 0 240px;
                border-radius: 10px;
                border: 1px solid var(--color-base);

                @media (width < 500px) {
                    flex: 0 0 100%;
                }

                margin-top: 40px;

                .marca-más-popular {
                    display: none;
                }

                &.más-popular {
                    margin-top: 0px;
                    .marca-más-popular {
                        display: blocK;
                        height: 20px;

                        margin-top: 0px;

                        background-color: red;
                        border-radius: 10px 10px 0px 0px;
                        color: white;
                        padding: 10px;
                        text-align: center;
                        font-weight: bold;

                    }
                }

                .info {
                    padding: 20px;
                    h1 {
                        margin: 0px;
                        font-weight: normal;
                        font-size: 120%;
                    }
                    h2 {
                        margin: 0px;
                        font-weight: normal;
                        font-size: 90%;
                    }

                    button {
                        width: 100%;
                        margin: 20px 0px;
                        font-weight: normal;
                        font-size: inherit;
                    }

                    .detalles {
                        font-size: 90%;
                        display: flex;
                        flex-direction: column;
                        gap: 5px;
                    }

                    .precio {
                        font-size: 80%;
                        .grande {
                            font-size: 220%;
                            font-weight: bold;
                        }
                    }
                }
            }
        }

        .desplazamiento {
            margin: 20px;
            button {
                border: 0px;
                border-radius: 5px;
                background-color: var(--color-base);
                font-family: monospace;
                font-size: 200%;
                font-weight: bold;
                color: white;
            }
        }
    }
}