/* ========================================================================== CRITICAL CSS — Máster Académica Landing Page Inline en en producción para First Paint sin FOUC. Mobile-First (base: 320px+) ========================================================================== */ /* -------------------------------------------------------------------------- Custom Properties (Design Tokens) -------------------------------------------------------------------------- */ :root { /* Brand Colors */ --color-red: #C0392B; --color-red-hover: #A93226; --color-white: #FFF; --color-gold: #F5A623; --color-black: #1A1A1A; --color-whatsapp: #157A3B; --color-whatsapp-hover: #116631; --color-gray-light: #F9F9F9; --color-border: #E8E8E8; /* Typography — Montserrat primary (academic/rigorous), Inter fallback */ --font-family: 'Montserrat', 'Inter', arial, helvetica, sans-serif; --font-size-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); --font-size-h1: clamp(1.75rem, 1.5rem + 1.25vw, 3rem); --font-size-h2: clamp(1.25rem, 1.1rem + 0.75vw, 2rem); --font-size-h3: clamp(1.125rem, 1rem + 0.5vw, 1.5rem); --font-size-badge: 0.9rem; --font-size-label: 0.75rem; /* Spacing */ --spacing-section: clamp(3rem, 2.5rem + 2.5vw, 6rem); --container-max: 1200px; --header-height: 72px; --card-padding: 2rem 1.5rem; --card-padding-featured: 2.5rem 2rem; /* Shadows */ --shadow-card: 0 2px 8px rgb(0 0 0 / 8%); --shadow-card-hover: 0 8px 24px rgb(0 0 0 / 12%); --shadow-featured: 0 4px 16px rgb(192 57 43 / 15%); --shadow-university: 0 2px 8px rgb(0 0 0 / 10%); --shadow-university-hover: 0 4px 16px rgb(0 0 0 / 15%); --shadow-btn-primary: 0 4px 12px rgb(26 143 69 / 30%); --shadow-btn-secondary: 0 2px 8px rgb(192 57 43 / 20%); /* Border Radius */ --radius-card: 12px; --radius-btn: 8px; --radius-badge: 24px; --radius-circle: 50%; /* Icon Dimensions */ --icon-service-size: 48px; --icon-stroke-width: 1.5px; --university-circle-size: 100px; /* Transitions */ --transition-base: 200ms ease-in-out; --hover-lift: translateY(-2px); --hover-lift-card: translateY(-4px); --hover-scale: scale(1.05); } /* -------------------------------------------------------------------------- Minimal Reset / Normalize -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } img, picture, video, svg { display: block; max-width: 100%; height: auto; } ul, ol { list-style: none; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; border: none; background: none; } /* -------------------------------------------------------------------------- Base Styles — Mobile-First (320px+) -------------------------------------------------------------------------- */ body { font-family: var(--font-family); font-size: var(--font-size-body); color: var(--color-black); background-color: var(--color-white); line-height: 1.6; min-width: 320px; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Prevent any element from exceeding viewport width */ main, section, footer { max-width: 100%; } h1, h2, h3, h4, h5, h6 { line-height: 1.2; font-weight: 700; } h1 { font-size: var(--font-size-h1); } h2 { font-size: var(--font-size-h2); } h3 { font-size: var(--font-size-h3); } /* -------------------------------------------------------------------------- Utility: .container -------------------------------------------------------------------------- */ .container { max-width: var(--container-max); margin-inline: auto; padding-inline: 1rem; } /* -------------------------------------------------------------------------- Header Skeleton — Sticky, prevents FOUC / layout shift -------------------------------------------------------------------------- */ .header { position: sticky; top: 0; z-index: 1000; height: var(--header-height); background-color: var(--color-white); box-shadow: 0 1px 4px rgb(0 0 0 / 6%); display: flex; align-items: center; } .header__container { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 1rem; } /* -------------------------------------------------------------------------- Hero Skeleton — Reserves viewport space for First Paint, prevents CLS -------------------------------------------------------------------------- */ .hero { min-height: calc(100vh - var(--header-height)); min-height: calc(100dvh - var(--header-height)); display: flex; align-items: center; justify-content: center; position: relative; background-color: var(--color-black); background-image: linear-gradient(135deg, #1A1A1A 0%, #2D1215 25%, #4A1A1D 50%, #2D1215 75%, #1A1A1A 100%); color: var(--color-white); text-align: center; padding: 2rem 1rem; overflow: hidden; }