/* ========================================================= DESIGN SYSTEM BASE — Generado por Constructor de Base de Sitio Web Plataforma: Joomla Requiere: Bootstrap 5 (CSS/JS) + jQuery — ver / scripts del HTML generado. Este archivo se carga DESPUÉS de bootstrap.min.css para poder sobreescribirlo con las variables de marca. Se usan clases de Bootstrap en el HTML siempre que es posible; aquí solo se definen los tokens y las piezas que Bootstrap no puede resolver por tratarse de valores dinámicos (colores, tipografía, tamaños fluidos y contenedores a medida). ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap'); :root{ /* Tipografía */ --font-heading: 'Noto Sans', sans-serif; --font-body: 'Helvetica Neue', sans-serif; --font-button: 'Helvetica Neue', sans-serif; /* Fondos */ --color-bg-light: #ffffff; --color-bg-dark: #303681; --color-bg-neutral: #eaebf2; /* Texto */ --color-text-heading: #303681; --color-text-body: #1a1a1a; --color-text-accent: #e8ba34; --color-text-extra: #c64333; --color-on-bg-dark: #ffffff; --color-on-bg-accent: #111111; --color-accent: #e8ba34; --color-on-bg-rojo: #ffffff; --color-rojo: #c64333; /* Tamaños tipográficos (fluidos) */ --fs-h1: clamp(2.000rem, 1.6479rem + 1.5023vw, 3.000rem); --fs-h2: clamp(1.625rem, 1.4049rem + 0.9390vw, 2.250rem); --fs-h3: clamp(1.375rem, 1.2430rem + 0.5634vw, 1.750rem); --fs-h4: clamp(1.125rem, 1.0370rem + 0.3756vw, 1.375rem); --fs-h5: clamp(1.000rem, 0.9560rem + 0.1878vw, 1.125rem); --fs-h6: clamp(0.875rem, 0.8310rem + 0.1878vw, 1.000rem); --fs-text: clamp(0.938rem, 0.9155rem + 0.0939vw, 1.000rem); --fs-text-secondary: clamp(0.813rem, 0.7905rem + 0.0939vw, 0.875rem); --fs-text-small: 0.750rem; --fs-button: clamp(0.938rem, 0.9155rem + 0.0939vw, 1.000rem); /* Contenedores */ --container-padding-x: clamp(1.250rem, 0.8099rem + 1.8779vw, 2.500rem); /* Espaciado (escala tipo Bootstrap: Pequeño/Mediano/Grande, fluida) */ --gap-x: clamp(0.750rem, 0.4859rem + 1.1268vw, 1.500rem); --gap-y: clamp(1.250rem, 0.8099rem + 1.8779vw, 2.500rem); /* Botones — estructura compartida */ --btn-border-width: 1px; --btn-radius: 4px; --btn-height: 48px; --btn-padding-x: 24px; --btn-padding-y: 12px; --btn-font-size: var(--fs-button); --btn-font-weight: 700; --btn-transition-duration: 0.3s; /* Botones — uno por cada llave de btnColors (dark/neutral/accent siempre, más un bloque extra por cada color adicional con button:true) */ --btn-dark-bg: #303681; --btn-dark-text: #ffffff; --btn-dark-border: #303681; --btn-dark-hover-bg: #555a98; --btn-dark-hover-text: #ffffff; --btn-dark-hover-border: #555a98; --btn-neutral-bg: #eaebf2; --btn-neutral-text: #111111; --btn-neutral-border: #eaebf2; --btn-neutral-hover-bg: #c0c1c6; --btn-neutral-hover-text: #111111; --btn-neutral-hover-border: #c0c1c6; --btn-accent-bg: #e8ba34; --btn-accent-text: #111111; --btn-accent-border: #e8ba34; --btn-accent-hover-bg: #be992b; --btn-accent-hover-text: #ffffff; --btn-accent-hover-border: #be992b; --btn-rojo-bg: #c64333; --btn-rojo-text: #ffffff; --btn-rojo-border: #c64333; --btn-rojo-hover-bg: #d06558; --btn-rojo-hover-text: #ffffff; --btn-rojo-hover-border: #d06558; /* Bullets */ --bullet-color: #e8ba34; --bullet-gap: 0.6rem; } /* ---------- Base (complementa el reset de Bootstrap) ---------- */ body{ font-family: var(--font-body); color: var(--color-text-body); background-color: var(--color-bg-light); font-size: var(--fs-text); } h1,h2,h3,h4,h5,h6{ font-family: var(--font-heading); color: var(--color-text-heading); font-weight: 700; } h1{ font-size: var(--fs-h1); } h2{ font-size: var(--fs-h2); } h3{ font-size: var(--fs-h3); } h4{ font-size: var(--fs-h4); } h5{ font-size: var(--fs-h5); } h6{ font-size: var(--fs-h6); } p{ font-size: var(--fs-text); } .text-secondary{ font-size: var(--fs-text-secondary); color: var(--color-text-extra) !important; } .text-small{ font-size: var(--fs-text-small); } /* ---------- Espaciado vertical fluido (usar junto a las utilidades de Bootstrap) ---------- */ .section-py{ padding-block: var(--gap-y); } /* ---------- Fondos y texto de marca (evita repetir estilo en línea) ---------- */ .bg-light{ background-color: var(--color-bg-light) !important; color: var(--color-text-body); } .bg-dark{ background-color: var(--color-bg-dark) !important; color: var(--color-on-bg-dark); } .bg-neutral{ background-color: var(--color-bg-neutral); color: var(--color-text-body); } .bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5, .bg-dark h6{ color: inherit; } .text-heading{ color: var(--color-text-heading); } /* Uno por cada color de marca: el accent principal siempre, más un bloque por cada color adicional definido en colors.extras (los que existan de verdad en la referencia — no hay un número fijo). */ .text-accent{ color: var(--color-accent); } .bg-accent{ background-color: var(--color-accent); color: var(--color-on-bg-accent); } .bg-accent h1, .bg-accent h2, .bg-accent h3, .bg-accent h4, .bg-accent h5, .bg-accent h6{ color: inherit; } .badge-accent{ background-color: var(--color-accent); color: var(--color-on-bg-accent); } .border-accent{ border-color: var(--color-text-accent) !important; } .text-rojo{ color: var(--color-rojo); } .bg-rojo{ background-color: var(--color-rojo); color: var(--color-on-bg-rojo); } .bg-rojo h1, .bg-rojo h2, .bg-rojo h3, .bg-rojo h4, .bg-rojo h5, .bg-rojo h6{ color: inherit; } .badge-rojo{ background-color: var(--color-rojo); color: var(--color-on-bg-rojo); } .card-step-bg{ background-color: color-mix(in srgb, var(--color-bg-dark) 80%, white 20%); } /* ---------- Contenedores a medida (usar con .row/.col-* de Bootstrap adentro) ---------- */ .container-full{ width:100%; padding-inline: clamp(1.250rem, 0.8099rem + 1.8779vw, 2.500rem); } .container-1400{ width: min(100% - (clamp(1.250rem, 0.8099rem + 1.8779vw, 2.500rem) * 2), 1400px); margin-inline:auto; padding-inline: clamp(1.250rem, 0.8099rem + 1.8779vw, 2.500rem); } .container-1200{ width: min(100% - (clamp(1.250rem, 0.8099rem + 1.8779vw, 2.500rem) * 2), 1200px); margin-inline:auto; padding-inline: clamp(1.250rem, 0.8099rem + 1.8779vw, 2.500rem); } .container{ width: min(100% - (clamp(1.250rem, 0.8099rem + 1.8779vw, 2.500rem) * 2), 1200px); margin-inline:auto; padding-inline: clamp(1.250rem, 0.8099rem + 1.8779vw, 2.500rem); } /* alias por defecto, sobreescribe .container de Bootstrap */ /* ---------- Botones de marca (usar junto con .btn de Bootstrap: class="btn btn-brand btn-dark|btn-neutral|btn-accent|btn-extra") ---------- */ .btn-brand{ border-width: var(--btn-border-width); border-style: solid; border-radius: var(--btn-radius); min-height: var(--btn-height); padding: var(--btn-padding-y) var(--btn-padding-x); font-family: var(--font-button); font-size: var(--btn-font-size); font-weight: var(--btn-font-weight); transition: background-color var(--btn-transition-duration) ease, color var(--btn-transition-duration) ease, border-color var(--btn-transition-duration) ease; } .btn-dark{ background-color: var(--btn-dark-bg); color: var(--btn-dark-text); border-color: var(--btn-dark-border); } .btn-dark:hover, .btn-dark.hover-preview{ background-color: var(--btn-dark-hover-bg); color: var(--btn-dark-hover-text); border-color: var(--btn-dark-hover-border); } .btn-neutral{ background-color: var(--btn-neutral-bg); color: var(--btn-neutral-text); border-color: var(--btn-neutral-border); } .btn-neutral:hover, .btn-neutral.hover-preview{ background-color: var(--btn-neutral-hover-bg); color: var(--btn-neutral-hover-text); border-color: var(--btn-neutral-hover-border); } .btn-accent{ background-color: var(--btn-accent-bg); color: var(--btn-accent-text); border-color: var(--btn-accent-border); } .btn-accent:hover, .btn-accent.hover-preview{ background-color: var(--btn-accent-hover-bg); color: var(--btn-accent-hover-text); border-color: var(--btn-accent-hover-border); } .btn-rojo{ background-color: var(--btn-rojo-bg); color: var(--btn-rojo-text); border-color: var(--btn-rojo-border); } .btn-rojo:hover, .btn-rojo.hover-preview{ background-color: var(--btn-rojo-hover-bg); color: var(--btn-rojo-hover-text); border-color: var(--btn-rojo-hover-border); } /* Variantes "outline" (fondo transparente, borde y texto del color de marca) */ .btn-outline-accent{ background-color: transparent; color: var(--color-text-accent); border-color: var(--color-text-accent); } .btn-outline-accent:hover, .btn-outline-accent.hover-preview{ background-color: var(--btn-accent-hover-bg); color: var(--btn-accent-hover-text); border-color: var(--btn-accent-hover-border); } /* Sin estilo adicional */ /* ---------- Listas (usar junto con .list-unstyled de Bootstrap: class="list-unstyled list-check|list-numero|...") ---------- */ .list-check li{ position:relative; padding-left: calc(18px + var(--bullet-gap)); margin-bottom:.5rem; } .list-check li::before{ content:""; position:absolute; left:0; top:.25em; width:18px; height:18px; background-color: var(--bullet-color); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E") no-repeat center / contain; } /* ---------- Utilidades de color (nomenclatura genera-base-css-site) ---------- */ .bg-white{ background-color: #ffffff; } .white{ color: #ffffff; } .borde--white{ border-color: #ffffff; } .bg-darkslateblue{ background-color: #303681; } .darkslateblue{ color: #303681; } .borde--darkslateblue{ border-color: #303681; } .bg-lavender{ background-color: #eaebf2; } .lavender{ color: #eaebf2; } .borde--lavender{ border-color: #eaebf2; } .bg-black{ background-color: #1a1a1a; } .black{ color: #1a1a1a; } .borde--black{ border-color: #1a1a1a; } .bg-peru{ background-color: #e8ba34; } .peru{ color: #e8ba34; } .borde--peru{ border-color: #e8ba34; } .bg-sienna{ background-color: #c64333; } .sienna{ color: #c64333; } .borde--sienna{ border-color: #c64333; } /* ---------- Bloque con tarjeta encimada sobre imagen (ej. sección "Educación continua") ---------- */ .overlap-block{ position: relative; } .overlap-block .overlap-card{ position: relative; z-index: 2; max-width: 420px; padding: var(--gap-y) var(--gap-x); border-radius: var(--btn-radius); } @media (min-width: 768px){ .overlap-block .overlap-card{ position: absolute; top: 50%; left: 0; transform: translateY(-50%); margin-left: var(--gap-x); } .overlap-block .overlap-image{ margin-left: 12%; } } .overlap-block .overlap-image{ aspect-ratio: 16 / 8; object-fit: cover; } /* ---------- Botones outline adicionales (fondo transparente) ---------- */ .btn-outline-white{ background-color: transparent; color: #ffffff; border-color: #ffffff; } .btn-outline-white:hover, .btn-outline-white.hover-preview{ background-color: #ffffff; color: var(--color-bg-dark); border-color: #ffffff; } .btn-outline-dark{ background-color: transparent; color: var(--color-bg-dark); border-color: var(--color-bg-dark); } .btn-outline-dark:hover, .btn-outline-dark.hover-preview{ background-color: var(--color-bg-dark); color: #ffffff; border-color: var(--color-bg-dark); } /* ---------- Tarjetas de programa académico (fondo a color, texto encima) ---------- */ .card-program{ display:flex; flex-direction:column; justify-content:flex-end; height:100%; min-height:280px; padding: var(--gap-x); border-radius: var(--btn-radius); } .card-program-lic{ background-color:#5baed8; color:#ffffff; } .card-program-lic h3{ color:#ffffff; } .card-program-maestria{ background-color:#6d5953; color:#ffffff; } .card-program-maestria h3{ color:#ffffff; } .card-program-doctorado{ background-color:#fae977; color:#1a1a1a; } .card-program-doctorado h3{ color:#1a1a1a; } /* ---------- Insignia circular de reproducción (video/testimonial) ---------- */ .play-badge{ width:64px; height:64px; display:flex; align-items:center; justify-content:center; margin-inline:auto; margin-bottom:.5rem; background-color:#ffffff; border-radius:50%; } .play-badge__icon{ color: var(--color-bg-dark); font-size:1.5rem; } /* ---------- Imagen recortada 1:1 (fotos de perfil/fundadores) ---------- */ .img-square{ aspect-ratio: 1 / 1; object-fit: cover; } /* ---------- Espaciado tipo "gap" reutilizable en flex-wrap ---------- */ .gap-brand{ gap: var(--gap-x); }