/**
 * Tema Tailwind v4 — TM-Educ (sitio publico)
 */
@theme {
    --font-display: "Cormorant Garamond", Georgia, serif;
    --font-body: "Outfit", system-ui, sans-serif;

    --color-rose-light: #fdf2f6;
    --color-rose: #e8a0b8;
    --color-rose-dark: #c97896;
    --color-gold-light: #f5ebe0;
    --color-gold: #c9a87c;
    --color-charcoal: #2d2a32;
    --color-muted: #6b6570;
    --color-surface: #f7f5f8;

    --radius-card: 1rem;
    --radius-pill: 9999px;

    --shadow-soft: 0 4px 24px rgba(45, 42, 50, 0.08);
    --shadow-lift: 0 12px 48px rgba(45, 42, 50, 0.12);

    --width-content: 1100px;
    --content-pad: 1.25rem;
}

@media (min-width: 1024px) {
    :root {
        --content-pad: 1.5rem;
    }
}

@layer base {
    .public-site {
        @apply font-body text-charcoal bg-surface antialiased;
    }

    .font-display {
        font-family: var(--font-display);
    }
}

@layer components {
    .tw-section {
        @apply py-10 md:py-14;
    }

    .tw-section--tight {
        @apply py-8 md:py-10;
    }

    .tw-page-hero {
        @apply relative overflow-hidden bg-gradient-to-br from-rose-light via-gold-light to-rose-light py-10 md:py-12;
    }

    .tw-page-hero::before {
        content: "";
        @apply pointer-events-none absolute -right-16 -top-16 h-48 w-48 rounded-full bg-rose/20 blur-3xl;
    }

    .tw-page-hero::after {
        content: "";
        @apply pointer-events-none absolute -bottom-20 -left-10 h-40 w-40 rounded-full bg-gold/25 blur-3xl;
    }

    .tw-badge {
        @apply inline-flex items-center rounded-pill bg-white px-3 py-1 text-xs font-bold uppercase tracking-widest text-rose-dark;
    }

    .tw-heading {
        @apply font-display text-3xl font-semibold tracking-tight text-charcoal md:text-4xl;
    }

    .tw-subheading {
        @apply mt-2 max-w-2xl text-muted;
    }

    .tw-btn {
        @apply inline-flex items-center justify-center gap-2 rounded-pill px-5 py-2.5 text-sm font-semibold transition-all duration-200;
    }

    .tw-btn--primary {
        @apply bg-gradient-to-br from-rose-dark to-rose text-white shadow-[0_4px_16px_rgba(201,120,150,0.35)] hover:-translate-y-0.5 hover:shadow-[0_6px_24px_rgba(201,120,150,0.45)];
    }

    .tw-btn--secondary {
        @apply border-2 border-rose bg-white text-charcoal hover:bg-rose-light;
    }

    .tw-btn--ghost {
        @apply text-muted hover:text-rose-dark;
    }

    .tw-btn--lg {
        @apply px-6 py-3 text-base;
    }

    .tw-card {
        @apply rounded-2xl bg-white shadow-[var(--shadow-soft)] ring-1 ring-rose/10;
    }

    .tw-alert {
        @apply mb-6 rounded-xl border px-4 py-3 text-sm;
    }

    .tw-alert--success {
        @apply border-emerald-200 bg-emerald-50 text-emerald-800;
    }

    .tw-alert--warning {
        @apply border-amber-200 bg-amber-50 text-amber-800;
    }

    .tw-alert--info {
        @apply border-sky-200 bg-sky-50 text-sky-800;
    }

    .tw-input {
        @apply w-full rounded-xl border-2 border-rose-light/80 bg-white px-4 py-3 text-charcoal outline-none transition focus:border-rose focus:ring-2 focus:ring-rose/20;
    }

    .tw-label {
        @apply mb-1.5 block text-sm font-semibold text-charcoal;
    }

    .tw-feature {
        @apply tw-card p-6 text-center transition hover:-translate-y-1 hover:shadow-[var(--shadow-lift)];
    }

    .tw-icon-box {
        @apply mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-rose-light text-rose-dark;
    }
}