/* ==========================================================================
   Layout & responsive – variables y medidas en rem. Sin estilos inline.
   Breakpoints: sm 40rem (640px), md 48rem (768px), lg 64rem (1024px)
   ========================================================================== */

:root {
    --bp-sm: 40rem;
    --bp-md: 48rem;
    --bp-lg: 64rem;
    --banner-h: 2.5rem;
    --header-h: 4rem;
    --space-section-y: 3rem;
    --space-section-x: 1rem;
    --space-hero-y: 3rem;
    --space-hero-y-end: 3rem;
    --space-nav-x: 1rem;
    --space-banner-x: 1rem;
    --space-footer-y: 2.5rem;
    --space-footer-x: 1rem;
    --space-grid-gap: 1rem;
    --space-card-padding: 1.25rem;
    --size-hero-title: 1.875rem;
    --size-price: 2.25rem;
    --size-whatsapp: 3.5rem;
    --whatsapp-green: #25D366;
}

@media (min-width: 40rem) {
    :root {
        --space-section-y: 4rem;
        --space-section-x: 1.5rem;
        --space-hero-y: 5rem;
        --space-hero-y-end: 4rem;
        --space-grid-gap: 1.5rem;
        --space-card-padding: 1.5rem;
        --size-hero-title: 2.25rem;
        --size-price: 2.5rem;
    }
}

@media (min-width: 48rem) {
    :root {
        --space-section-y: 5rem;
        --space-hero-y: 6rem;
        --space-hero-y-end: 5rem;
        --size-hero-title: 3rem;
        --size-price: 3rem;
    }
}

@media (min-width: 64rem) {
    :root {
        --space-section-y: 6rem;
        --size-hero-title: 3.75rem;
    }
}

/* Base: sin desborde horizontal y scroll suave */
html {
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
    min-width: 0;
}

.app {
    min-width: 0;
    overflow-x: hidden;
}

/* Main: padding-top = banner + header para que el contenido no quede bajo los fijos */
.app main {
    padding-top: calc(var(--banner-h) + var(--header-h));
}

/* Header: fondo sólido para que al hacer scroll el contenido no se vea por debajo */
.app header {
    background-color: var(--background);
}

/* Banner superior: centrado y que no desborde en pantallas chicas */
.app .fixed.inset-x-0.top-0.z-\[60\] {
    padding-left: var(--space-banner-x);
    padding-right: var(--space-banner-x);
}

.app .fixed.inset-x-0.top-0.z-\[60\] p {
    text-align: center;
}

@media (max-width: 24rem) {
    .app .fixed.inset-x-0.top-0.z-\[60\] p {
        font-size: 0.65rem;
        line-height: 1.35;
    }
}

@media (min-width: 24rem) and (max-width: 30rem) {
    .app .fixed.inset-x-0.top-0.z-\[60\] p {
        font-size: 0.7rem;
        line-height: 1.35;
    }
}

/* Navegación: padding consistente */
.app header nav {
    padding-left: var(--space-nav-x);
    padding-right: var(--space-nav-x);
}

@media (min-width: 40rem) {
    :root {
        --space-nav-x: 1.5rem;
    }
}

/* Secciones: padding vertical y horizontal según variables */
.app main > section {
    padding-top: var(--space-section-y);
    padding-bottom: var(--space-section-y);
    padding-left: var(--space-section-x);
    padding-right: var(--space-section-x);
}

.app main > section:first-of-type {
    padding-top: var(--space-hero-y);
    padding-bottom: var(--space-hero-y-end);
}

.app main > section.relative.overflow-hidden:first-of-type {
    padding-top: var(--space-hero-y);
    padding-bottom: var(--space-hero-y-end);
}

/* Hero: título escalado por breakpoint */
.app main > section:first-of-type h1 {
    font-size: var(--size-hero-title);
}

@media (min-width: 64rem) {
    :root {
        --size-hero-title: 4.5rem;
    }
}

/* Grids de sección: gap según variable */
.app main section .grid {
    gap: var(--space-grid-gap);
}

@media (min-width: 48rem) {
    :root {
        --space-grid-gap: 1.5rem;
    }
}

/* Tarjetas de precios: padding interno */
.app #pricing .rounded-2xl.border-2.border-primary,
.app #pricing .rounded-2xl.border.border-border\/50 {
    padding: var(--space-card-padding);
}

@media (max-width: 23.99rem) {
    .app #pricing .rounded-2xl.border-2.border-primary,
    .app #pricing .rounded-2xl.border.border-border\/50 {
        padding: 1rem;
    }
}

@media (min-width: 40rem) {
    :root {
        --space-card-padding: 2rem;
    }
}

/* Precio destacado: tamaño de fuente responsive */
.app #pricing .flex.items-baseline.gap-3 span:first-child {
    font-size: var(--size-price);
}

@media (min-width: 48rem) {
    :root {
        --size-price: 3.75rem;
    }
}

/* Sección precios: evitar desborde en móvil */
.app #pricing .mx-auto.max-w-5xl {
    min-width: 0;
    width: 100%;
}

.app #pricing .grid {
    min-width: 0;
}

.app #pricing .grid > * {
    min-width: 0;
}

.app #pricing .rounded-2xl.border-2.border-primary,
.app #pricing .rounded-2xl.border.border-border\/50 {
    min-width: 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.app #pricing .rounded-2xl.border-2.border-primary p,
.app #pricing .rounded-2xl.border.border-border\/50 p,
.app #pricing .rounded-2xl.border-2.border-primary span:not([class*="inline-flex"]),
.app #pricing .rounded-2xl.border.border-border\/50 span:not([class*="inline-flex"]) {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.app #pricing .flex.items-baseline.gap-3 {
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
}

/* CTA principal de la tarjeta de precio: permitir salto de línea en móvil */
.pricing-cta {
    white-space: normal;
    text-align: center;
    line-height: 1.35;
}

@media (min-width: 40rem) {
    .pricing-cta {
        white-space: nowrap;
    }
}

/* CTA final (sección "Tu negocio empieza hoy"): que no se corte en móvil */
.cta-final {
    white-space: normal;
    text-align: center;
    line-height: 1.35;
}

@media (min-width: 40rem) {
    .cta-final {
        white-space: nowrap;
    }
}

/* Stats finales (20 Lecciones, 10+ Horas, 4 Módulos): que quepan en pantalla */
.final-stats {
    min-width: 0;
}

@media (max-width: 24rem) {
    .final-stats {
        gap: 0.75rem !important;
    }
}

/* Footer */
.app footer {
    padding-top: var(--space-footer-y);
    padding-bottom: var(--space-footer-y);
    padding-left: var(--space-footer-x);
    padding-right: var(--space-footer-x);
}

@media (min-width: 40rem) {
    :root {
        --space-footer-y: 2.5rem;
        --space-footer-x: 1.5rem;
    }
}

/* Acordeón: rotación del chevron al abrir */
/* Chevron: cerrado = derecha (► expandir), abierto = abajo (▼ cerrar) */
.accordion-chevron {
    transition: transform 0.2s ease;
    transform: rotate(-90deg);
}

[aria-expanded="true"] .accordion-chevron {
    transform: rotate(0deg);
}

/* Botón flotante WhatsApp */
.whatsapp-float {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 50;
    width: var(--size-whatsapp);
    height: var(--size-whatsapp);
    border-radius: 50%;
    background: var(--whatsapp-green);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none;
}

.whatsapp-float:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5);
}

.whatsapp-float svg {
    width: 1.75rem;
    height: 1.75rem;
}

@media (min-width: 48rem) {
    .whatsapp-float {
        bottom: 1.5rem;
        right: 1.5rem;
        width: 3.75rem;
        height: 3.75rem;
    }

    .whatsapp-float svg {
        width: 1.875rem;
        height: 1.875rem;
    }
}