/* ============================================================ noformal_estilos.css Reemplazo en CSS puro de las utilidades de Tailwind usadas en: noformal-adultos.php, alumni.php, rikudim.php, noformal-infantil.php ============================================================ */ /* 1. Variables de color (tema por defecto = adultos/infantil) */ :root { --surface-tint: #931e9f; --background: #f7fafd; --on-primary-fixed-variant: #931e9f; --on-secondary-fixed: #1a1c1c; --primary-container: #931e9f; --surface-container-lowest: #ffffff; --on-primary-container: #8fbbff; --secondary: #5d5f5f; --surface-bright: #f7fafd; --on-error: #ffffff; --tertiary-fixed-dim: #ffabef; --heritage-blue: #931e9f; --inverse-on-surface: #eef1f4; --surface-dim: #d7dadd; --inverse-surface: #2d3133; --surface-variant: #e0e3e6; --on-surface-variant: #424750; --tertiary-container: #782871; --on-tertiary-fixed: #390036; --on-error-container: #93000a; --deep-ink: #0A2D52; --on-background: #181c1e; --surface: #f7fafd; --secondary-fixed: #e2e2e2; --secondary-container: #dfe0e0; --primary-fixed: #d5e3ff; --on-secondary-fixed-variant: #454747; --vibrant-purple: #9D4993; --surface-container-low: #f1f4f7; --on-tertiary: #ffffff; --on-secondary-container: #616363; --outline: #737781; --surface-container-highest: #e0e3e6; --surface-container-high: #e5e8eb; --on-secondary: #ffffff; --secondary-fixed-dim: #c6c6c7; --on-primary: #ffffff; --on-tertiary-container: #f898e8; --tertiary-fixed: #ffd7f3; --on-surface: #181c1e; --error: #ba1a1a; --inverse-primary: #a6c8ff; --primary-fixed-dim: #a6c8ff; --outline-variant: #c2c6d1; --surface-container: #ebeef1; --error-container: #ffdad6; --growth-green: #4CAF50; --on-primary-fixed: #931e9f; --primary: #003365; --on-tertiary-fixed-variant: #75256e; --tertiary: #5d0c58; } /* Tema Alumni (colores azules) — agregar class="theme-alumni" al */ body.theme-alumni { --heritage-blue: #114A87; --vibrant-purple: #0b4784; --deep-ink: #0A2D52; --primary: #003365; --primary-container: #114a87; } /* Tema Rikudim (violeta uniforme) — agregar class="theme-rikudim" al */ body.theme-rikudim { --heritage-blue: #931e9f; --vibrant-purple: #9D4993; --deep-ink: #931e9f; --primary: #931e9f; --primary-container: #931e9f; } /* 2. Estilos manuales que ya existían */ .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; } .carousel-track { transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .asymmetric-stack > div:nth-child(even) { margin-top: 40px; } .tab-active { color: #114A87; border-bottom: 2px solid #114A87; } .hide-scrollbar::-webkit-scrollbar { display: none; } .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } /* ============================================================ 3. Utilidades (reemplazo de clases de Tailwind) ============================================================ */ /* --- Layout / display --- */ .flex { display: flex; } .flex-col { flex-direction: column; } .flex-grow { flex-grow: 1; } .grid { display: grid; } .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } /* Evita que imágenes u otro contenido dentro de una celda de grid impidan que esa celda se achique en pantallas chicas (bug clásico de CSS Grid: por defecto min-width es "auto" y usa el tamaño natural de la imagen, ignorando el width:100% aplicado) */ .grid > * { min-width: 0; } .inline-block { display: inline-block; } .items-center { align-items: center; } .justify-center { justify-content: center; } .relative { position: relative; } .absolute { position: absolute; } .overflow-hidden { overflow: hidden; } .overflow-x-auto { overflow-x: auto; } .group { /* marcador para group-hover */ } /* --- Tamaños --- */ .max-w-2xl { max-width: 42rem; } .max-w-3xl { max-width: 48rem; } .max-w-7xl { max-width: 80rem; } .max-w-xl { max-width: 36rem; } .w-64 { width: 16rem; } .w-fit { width: fit-content; } .w-full { width: 100%; } .h-64 { height: 16rem; } .h-full { height: 100%; } .h-\[400px\] { height: 400px; } .aspect-\[4\/5\] { aspect-ratio: 4 / 5; } .mx-auto { margin-left: auto; margin-right: auto; } /* --- Espaciados (padding / margin / gap) --- */ .p-3 { padding: 0.75rem; } .p-4 { padding: 1rem; } .p-6 { padding: 1.5rem; } .p-12 { padding: 3rem; } .pb-2 { padding-bottom: 0.5rem; } .pt-4 { padding-top: 1rem; } .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } .px-8 { padding-left: 2rem; padding-right: 2rem; } .px-grid-margin { padding-left: 24px; padding-right: 24px; } .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; } .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; } .py-section-gap-desktop { padding-top: 80px; padding-bottom: 80px; } .mb-1 { margin-bottom: 0.25rem; } .mb-2 { margin-bottom: 0.5rem; } .mb-3 { margin-bottom: 0.75rem; } .mb-4 { margin-bottom: 1rem; } .mb-6 { margin-bottom: 1.5rem; } .mb-8 { margin-bottom: 2rem; } .mb-10 { margin-bottom: 2.5rem; } .mb-12 { margin-bottom: 3rem; } .mt-2 { margin-top: 0.5rem; } .mt-6 { margin-top: 1.5rem; } .-mr-32 { margin-right: -8rem; } .-mt-32 { margin-top: -8rem; } .gap-1 { gap: 0.25rem; } .gap-2 { gap: 0.5rem; } .gap-4 { gap: 1rem; } .gap-6 { gap: 1.5rem; } .gap-base { gap: 8px; } .gap-grid-gutter { gap: 24px; } .space-y-4 > * + * { margin-top: 1rem; } .space-y-6 > * + * { margin-top: 1.5rem; } /* --- Posicionamiento --- */ .-inset-4 { top: -1rem; right: -1rem; bottom: -1rem; left: -1rem; } .top-0 { top: 0; } .right-0 { right: 0; } .z-10 { z-index: 10; } /* --- Tipografía --- */ .text-headline-lg { font-size: 32px; line-height: 40px; font-weight: 700; } .text-headline-md { font-size: 24px; line-height: 32px; font-weight: 600; } .text-label-md { font-size: 14px; line-height: 20px; letter-spacing: 0.05em; font-weight: 600; } .text-body-lg { font-size: 18px; line-height: 28px; font-weight: 400; } .text-body-md { font-size: 16px; line-height: 24px; font-weight: 400; } .text-4xl { font-size: 2.25rem; line-height: 2.5rem; } .text-xs { font-size: 0.75rem; line-height: 1rem; } .text-sm { font-size: 0.875rem; line-height: 1.25rem; } .text-md, .text-m { font-size: 1rem; line-height: 1.5rem; } .font-headline-lg, .font-label-md, .font-headline-md, .font-display-lg { font-family: "Plus Jakarta Sans", sans-serif; } .font-bold { font-weight: 700; } .font-medium { font-weight: 500; } .font-semibold { font-weight: 600; } .text-center { text-align: center; } .uppercase { text-transform: uppercase; } .italic { font-style: italic; } .tracking-widest { letter-spacing: 0.1em; } .leading-relaxed { line-height: 1.625; } /* --- Colores de texto --- */ .text-heritage-blue { color: var(--heritage-blue); } .text-vibrant-purple { color: var(--vibrant-purple); } .text-primary { color: var(--primary); } .text-on-surface-variant { color: var(--on-surface-variant); } .text-tertiary { color: var(--tertiary); } .text-white { color: #ffffff; } /* --- Colores de fondo --- */ .bg-heritage-blue { background-color: var(--heritage-blue); } .bg-deep-ink { background-color: var(--deep-ink); } .bg-surface-container { background-color: var(--surface-container); } .bg-surface-container-low { background-color: var(--surface-container-low); } .bg-surface-container-high { background-color: var(--surface-container-high); } .bg-surface-container-highest { background-color: var(--surface-container-highest); } .bg-white { background-color: #ffffff; } .bg-white\/50 { background-color: color-mix(in srgb, #ffffff 50%, transparent); } .bg-primary-container\/10 { background-color: color-mix(in srgb, var(--primary-container) 10%, transparent); } .bg-vibrant-purple\/10 { background-color: color-mix(in srgb, var(--vibrant-purple) 10%, transparent); } .bg-vibrant-purple\/20 { background-color: color-mix(in srgb, var(--vibrant-purple) 20%, transparent); } /* --- Bordes --- */ .border { border-width: 1px; border-style: solid; border-color: var(--outline-variant); } .border-2 { border-width: 2px; border-style: solid; } .border-b { border-bottom-width: 1px; border-bottom-style: solid; } .border-dashed { border-style: dashed; } .border-outline-variant { border-color: var(--outline-variant); } .border-vibrant-purple\/20 { border-color: color-mix(in srgb, var(--vibrant-purple) 20%, transparent); } /* --- Bordes redondeados --- */ .rounded { border-radius: 0.25rem; } .rounded-lg { border-radius: 0.5rem; } .rounded-xl { border-radius: 0.75rem; } .rounded-2xl { border-radius: 1rem; } .rounded-full { border-radius: 9999px; } .rounded-\[2rem\] { border-radius: 2rem; } /* --- Sombras y efectos --- */ .shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); } .backdrop-blur-sm { backdrop-filter: blur(4px); } .blur-3xl { filter: blur(64px); } .opacity-50 { opacity: 0.5; } .opacity-60 { opacity: 0.6; } .opacity-90 { opacity: 0.9; } .object-cover { object-fit: cover; } .-rotate-2 { transform: rotate(-2deg); } /* --- Transiciones --- */ .transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; } .transition-colors { transition-property: color, background-color, border-color; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; } .transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; } .duration-500 { transition-duration: 500ms; } /* --- Estados hover --- */ .hover\:bg-surface-container-highest:hover { background-color: var(--surface-container-highest); } .hover\:text-tertiary:hover { color: var(--tertiary); } .hover\:underline:hover { text-decoration: underline; } .hover\:shadow-lg:hover { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); } .hover\:border-heritage-blue:hover { border-color: var(--heritage-blue); } .hover\:border-vibrant-purple:hover { border-color: var(--vibrant-purple); } /* --- Estados group-hover (requieren el padre con clase .group) --- */ .group:hover .group-hover\:rotate-0 { transform: rotate(0deg); } .group:hover .group-hover\:scale-105 { transform: scale(1.05); } .group:hover .group-hover\:bg-primary-fixed\/30 { background-color: color-mix(in srgb, var(--primary-fixed) 30%, transparent); } /* ============================================================ 4. Responsive (equivalentes a los breakpoints sm/md de Tailwind) ============================================================ */ @media (min-width: 640px) { .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 768px) { .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .md\:flex-row { flex-direction: row; } } /* La imagen de "Nuestra Esencia" (adultos/infantil/rikudim/alumni) usa un alto fijo de 400px + object-cover pensado para pantallas anchas. Las fotos reales tienen relaciones de aspecto muy distintas entre sí (algunas verticales, otras horizontales panorámicas), así que en mobile ese alto fijo termina recortando partes importantes de la imagen (texto, caras, etc). En mobile dejamos que la imagen se muestre completa, respetando su relación de aspecto real, sin recortar. */ @media (max-width: 767px) { .h-\[400px\].object-cover { height: auto; object-fit: contain; } }