/* Aplicación del tema: body, títulos, utilidad .sr-only */
* {
    border-color: hsl(var(--border))
}

body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: Inter, sans-serif
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: Outfit, sans-serif
}

.grecaptcha-badge {
    display: none
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0
}

/* Layout del hero: contenido (.7fr) + formulario (1fr) */
.hero-grid {
    display: flex;
    flex-direction: column;
    align-items: center
}

@media (min-width:1024px) {
    .hero-grid {
        display: grid;
        grid-template-columns: 0.7fr 1fr;
        align-items: center
    }
}

/* Layout de la sección FAQs: columna en mobile, FAQs + personaje en desktop */
.faq-grid {
    display: flex;
    flex-direction: column;
    gap: 2.5rem
}

.faq-grid__image {
    display: none
}

@media (min-width:1024px) {
    .faq-grid {
        flex-direction: row;
        align-items: center;
        max-width: 72em;
        margin-inline: auto
    }

    .faq-grid__faqs {
        flex: 1;
        min-width: 0
    }

    .faq-grid__image {
        display: block;
        flex-shrink: 0
    }

    .faq-grid__image img {
        width: 32rem;
        object-fit: contain;
        filter: drop-shadow(0 10px 24px rgb(0 0 0 / 0.15))
    }
}

/* Animaci\u00f3n de apertura del contenido FAQ */
@keyframes faq-open {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

details[open]>div {
    animation: faq-open 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Rotaci\u00f3n suave de la flecha */
details summary svg {
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

details[open] summary svg {
    transform: rotate(180deg);
}

/* Asterisco en campos obligatorios */
label:has(+ input:required)::after,
label:has(+ select:required)::after {
    content: " *";
    font-weight: 700;
}

/* Flecha del select personalizada */
select.appearance-none,
select[class*="appearance-none"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.875rem center;
    background-size: 1.1rem;
    padding-right: 2.75rem;
}