/* ============================================
   LAYOUT UTILITIES - Widths, Heights & Spacing
   ============================================ */

/* ====== CONTAINERS & MAX-WIDTH UTILITIES ====== */
.container-main {
    max-width: var(--container-main);
    margin: 0 auto;
}

.container-content {
    max-width: var(--container-content);
    margin: 0 auto;
}

.container-testimonials {
    max-width: var(--container-testimonials);
    margin: 0 auto;
}

.container-timeline {
    max-width: var(--container-timeline);
    margin: 0 auto;
}

/* ====== HERO SECTION SPECIFIC ====== */
.hero-section {
    min-height: 80vh;
    display: flex;
    align-items: center;
}

.hero-content {
    display: flex;
    align-items: flex-start;
    max-width: 50%;
}

.hero-subtitle-width {
    width: 80%;
}

/* ====== LOGO & BRAND ELEMENTS ====== */
.logo-portal {
    width: 10rem; /* w-40 */
}

.logo-date-icon {
    width: 1rem; /* w-4 */
    height: 1rem; /* h-4 */
}

.cta-icon {
    width: 1.5rem; /* w-6 */
    height: 1.5rem; /* h-6 */
}

/* ====== CARD & PANEL DIMENSIONS ====== */
.glass-card-solid {
    background: rgba(14, 29, 51, 1) !important;
}

.timeline-card {
    max-width: 28rem; /* max-w-md */
}

.timeline-number {
    width: 4rem; /* w-16 */
    height: 4rem; /* h-16 */
}

.testimonial-card {
    width: 18rem; /* w-72 */
    height: 28.125rem; /* h-[450px] */
}

.carousel-nav-button {
    width: 3rem; /* w-12 */
    height: 3rem; /* h-12 */
}

/* ====== OFFER SECTION LAYOUT ====== */
.offer-section {
    padding: 5em 0;
}

.offer-box-left {
    border-radius: 20px 0 0 20px;
    gap: 0;
    text-align: left;
    align-items: flex-start;
    display: flex;
}

/* ====== PROFILE IMAGES ====== */
.profile-image-main {
    width: 600px;
    height: 800px;
}

.profile-image-testimonial {
    width: 512px;
    height: 683px;
}

/* ====== BACKGROUND PATTERNS ====== */
.problems-bg-pattern {
    background-image: radial-gradient(circle at 20% 30%, rgba(43, 99, 163, 0.3) 0%, transparent 50%), 
                      radial-gradient(circle at 80% 70%, rgba(237, 203, 154, 0.2) 0%, transparent 50%), 
                      radial-gradient(circle at 50% 50%, rgba(27, 52, 79, 0.4) 0%, transparent 70%);
}

.container-problems {
    padding-bottom: 6em;
}

/* ====== UTILITIES ICONS ====== */
.icon-small {
    width: 2rem; /* w-8 */
    height: 2rem; /* h-8 */
}

.icon-check {
    width: 1.25rem; /* w-5 */
    height: 1.25rem; /* h-5 */
}

/* ====== TYPOGRAPHY FONT FAMILY ====== */
.font-norman {
    font-family: 'Norman', serif;
}

/* ====== RESPONSIVE UTILITIES ====== */
@media (min-width: 768px) {
    .logo-portal {
        width: 12rem; /* md:w-48 */
    }
    
    .cta-icon {
        width: 2rem; /* md:w-8 */
        height: 2rem; /* md:h-8 */
    }
}

@media (min-width: 1024px) {
    .logo-portal {
        width: 18rem; /* lg:w-72 */
    }
}

/* ====== ASPECT RATIOS ====== */
.aspect-video {
    aspect-ratio: 16 / 9;
}

.aspect-square {
    aspect-ratio: 1 / 1;
}

.aspect-portrait {
    aspect-ratio: 3 / 4;
}

/* ====== CONTAINER QUERIES (quando suportado) ====== */
@container (min-width: 768px) {
    .container-responsive {
        padding: 2rem;
    }
}

/* ====== FLEX & GRID UTILITIES ====== */
.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.grid-responsive {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    .grid-responsive {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .grid-responsive {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
}

/* ====== TEXT UTILITIES ====== */
.text-responsive-sm {
    font-size: clamp(0.875rem, 2vw, 1rem);
}

.text-responsive-base {
    font-size: clamp(1rem, 2.5vw, 1.125rem);
}

.text-responsive-lg {
    font-size: clamp(1.125rem, 3vw, 1.25rem);
}

.text-responsive-xl {
    font-size: clamp(1.25rem, 4vw, 1.5rem);
}

.text-responsive-2xl {
    font-size: clamp(1.5rem, 5vw, 2rem);
}

.text-responsive-3xl {
    font-size: clamp(2rem, 6vw, 3rem);
}