/*
 * fluid.css — Fluid Scalable Typography & Layout
 * Escala suavemente desde 768px (tablets) hasta 2560px (4K).
 * Se aplica DESPUÉS de output.css (Tailwind) para sobreescribir
 * los tamaños fijos en pantallas xl y 2xl.
 *
 * Fórmula clamp: clamp(min, min + (max - min) * ((100vw - min-width) / (max-width - min-width)), max)
 * Se simplifica como: clamp(min, Xvw + Yrem, max)
 */

/* ─── Variables de escala fluida ─── */
:root {
    /* Pantalla de referencia mín: 768px → máx: 2560px */
    --fs-6xl: clamp(3.25rem, 2.5vw + 1.5rem, 6rem);
    /* hero h1 (~52–96px) */
    --fs-5xl: clamp(2.75rem, 2vw + 1.25rem, 5rem);
    /* h1 grande (~44–80px) */
    --fs-4xl: clamp(2rem, 1.5vw + 1rem, 4rem);
    /* h2 sección (~32–64px) */
    --fs-3xl: clamp(1.6rem, 1.2vw + 0.8rem, 3rem);
    /* h2/h3 (~26–48px) */
    --fs-2xl: clamp(1.3rem, 0.9vw + 0.7rem, 2.25rem);
    /* subtítulos (~21–36px) */
    --fs-xl: clamp(1.1rem, 0.6vw + 0.65rem, 1.75rem);
    /* texto destacado (~18–28px) */
    --fs-lg: clamp(1rem, 0.45vw + 0.6rem, 1.5rem);
    /* texto grande (~16–24px) */
    --fs-base: clamp(0.9rem, 0.3vw + 0.55rem, 1.2rem);
    /* cuerpo (~14.4–19px) */
    --fs-sm: clamp(0.8rem, 0.2vw + 0.5rem, 1rem);
    /* pequeño */

    /* Espaciado fluido */
    --space-xs: clamp(0.5rem, 0.5vw + 0.1rem, 1rem);
    --space-sm: clamp(0.75rem, 0.75vw + 0.2rem, 1.5rem);
    --space-md: clamp(1rem, 1vw + 0.25rem, 2rem);
    --space-lg: clamp(1.5rem, 1.5vw + 0.3rem, 3rem);
    --space-xl: clamp(2rem, 2vw + 0.5rem, 4rem);
    --space-2xl: clamp(3rem, 3vw + 0.75rem, 6rem);

    /* Contenedor máximo fluido */
    --container-max: clamp(80rem, 85vw, 112rem);
    /* 1280px → 1792px */
}

/* ─── Aplicar a los selectores de Tailwind ─────────────────────────────────
   Solo en pantallas ≥ 1024px (lg) para no afectar móvil/tablet
   ─────────────────────────────────────────────────────────────────────── */

@media (min-width: 1024px) {

    /* Contenedor principal — ampliar max-w-7xl */
    .max-w-7xl {
        max-width: var(--container-max);
    }

    /* Navbar: más padding horizontal en pantallas grandes */
    nav .max-w-7xl {
        padding-left: var(--space-xl);
        padding-right: var(--space-xl);
    }

    /* Logo de la navbar escala suavemente */
    nav img.h-24 {
        height: clamp(6rem, 7vw, 9rem);
    }

    /* Hero h1 */
    .text-6xl {
        font-size: var(--fs-6xl) !important;
    }

    /* H1 grandes */
    .text-5xl {
        font-size: var(--fs-5xl) !important;
    }

    /* H2 secciones */
    .text-4xl {
        font-size: var(--fs-4xl) !important;
    }

    /* H2/H3 secundarios */
    .text-3xl {
        font-size: var(--fs-3xl) !important;
    }

    /* Subtítulos */
    .text-2xl {
        font-size: var(--fs-2xl) !important;
    }

    /* Texto destacado */
    .text-xl {
        font-size: var(--fs-xl) !important;
    }

    /* Texto normal grande */
    .text-lg {
        font-size: var(--fs-lg) !important;
    }

    /* Cuerpo de texto */
    .text-base {
        font-size: var(--fs-base) !important;
    }

    /* Texto pequeño */
    .text-sm {
        font-size: var(--fs-sm) !important;
    }

    /* ─── Padding de secciones fluido ─── */
    .py-12 {
        padding-top: var(--space-xl);
        padding-bottom: var(--space-xl);
    }

    .py-16 {
        padding-top: var(--space-2xl);
        padding-bottom: var(--space-2xl);
    }

    .py-24 {
        padding-top: clamp(1.5rem, 4vw, 5rem);
        padding-bottom: clamp(1.5rem, 4vw, 5rem);
    }

    /* ─── Gap en grids ─── */
    .gap-8 {
        gap: clamp(2rem, 2.5vw, 4rem);
    }

    .gap-12 {
        gap: clamp(3rem, 3vw, 5rem);
    }

    /* ─── Cards del equipo médico ─── */
    .w-40 {
        width: clamp(10rem, 10vw, 14rem);
    }

    .h-40 {
        height: clamp(10rem, 10vw, 14rem);
    }

    /* ─── Footer ─── */
    footer .max-w-7xl {
        max-width: var(--container-max);
    }

    /* ─── Botones: padding escala suavemente ─── */
    .px-8 {
        padding-left: clamp(2rem, 2vw, 3rem);
        padding-right: clamp(2rem, 2vw, 3rem);
    }

    .px-10 {
        padding-left: clamp(2.5rem, 2.5vw, 4rem);
        padding-right: clamp(2.5rem, 2.5vw, 4rem);
    }

    .py-3 {
        padding-top: clamp(0.75rem, 0.8vw, 1.25rem);
        padding-bottom: clamp(0.75rem, 0.8vw, 1.25rem);
    }

    .py-4 {
        padding-top: clamp(1rem, 1vw, 1.5rem);
        padding-bottom: clamp(1rem, 1vw, 1.5rem);
    }

    /* ─── íconos de features ─── */
    .h-12.w-12 {
        height: clamp(3rem, 3.5vw, 5rem);
        width: clamp(3rem, 3.5vw, 5rem);
    }
}