/* * Sistema de diseño Umake (spec de rediseño, área D). * * Una sola fuente de verdad: colores, tipografía, espacios y componentes. * Reglas: nada de colores ni tamaños sueltos fuera de estas variables; * cada color tiene un significado fijo; celular primero; contraste AA. * * Colores tomados del SVG original del logo (Logo_Header.svg). */ /* ------------------------------------------------------------ Fuentes */ @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 500 800; font-display: swap; src: url('../fonts/bricolage-grotesque.woff2') format('woff2'); } @font-face { font-family: 'Geist'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/geist.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/jetbrains-mono.woff2') format('woff2'); } /* ------------------------------------------------------------ Variables */ :root { /* Marca (logo) */ --um-navy: #0A1F44; /* texto, fondos oscuros */ --um-blue: #1974C6; /* única acción principal, enlaces, "En vivo" */ --um-yellow: #F4C214; /* Kids 7–11, acentos sobre oscuro */ --um-purple: #5B2FC4; /* Junior 12+ */ --um-cyan: #18A4CF; /* Presencial, información */ --um-green: #009540; /* Gratis, completado, certificados */ --um-red: #E83427; /* solo alertas */ /* Variantes para texto sobre fondo claro (AA 4,5:1) */ --um-blue-ink: #155FA3; --um-yellow-ink: #7A5A00; --um-cyan-ink: #0B6E8F; --um-green-ink: #007A34; --um-red-ink: #B9261A; --um-purple-ink: #5B2FC4; /* Neutros */ --um-bg: #F6F8FC; --um-surface: #FFFFFF; --um-ink: var(--um-navy); --um-ink-soft: #46557A; /* texto secundario: 7,2:1 sobre blanco */ --um-line: #DCE3EE; --um-navy-2: #13306A; /* tarjetas sobre fondo navy */ --um-on-dark: #FFFFFF; --um-on-dark-soft: #C5D0E6; /* Tintes de sección (≈10–12 % del color) */ --um-tint-blue: #E8F1FA; --um-tint-yellow: #FDF6DC; --um-tint-purple: #EEE9FA; --um-tint-cyan: #E5F5FA; --um-tint-green: #E0F2E8; --um-tint-red: #FCE9E7; /* Tipografía */ --um-font-display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif; --um-font-body: 'Geist', 'Segoe UI', system-ui, sans-serif; --um-font-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace; --um-fs-14: 0.875rem; --um-fs-16: 1rem; --um-fs-18: 1.125rem; --um-fs-22: 1.375rem; --um-fs-28: 1.75rem; --um-fs-36: 2.25rem; --um-fs-48: 3rem; --um-fs-display: clamp(2.5rem, 1.6rem + 4.2vw, 4.5rem); --um-fs-h2: clamp(1.75rem, 1.35rem + 1.8vw, 3rem); --um-lh-body: 1.5; --um-lh-tight: 1.08; /* Espacios (múltiplos de 8) */ --um-s1: 0.5rem; --um-s2: 1rem; --um-s3: 1.5rem; --um-s4: 2rem; --um-s5: 2.5rem; --um-s6: 3rem; --um-s8: 4rem; --um-section-y: clamp(3.5rem, 2rem + 6vw, 7rem); --um-gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem); --um-max: 1200px; /* Formas */ --um-r-control: 12px; --um-r-card: 20px; --um-r-chip: 999px; --um-shadow-hover: 0 10px 24px rgba(10, 31, 68, 0.12); /* Movimiento */ --um-t: 180ms ease; } /* ------------------------------------------------------------ Base (solo dentro de .um) */ .um, .um *, .um *::before, .um *::after { box-sizing: border-box; } .um { margin: 0; font-family: var(--um-font-body); font-size: var(--um-fs-16); line-height: var(--um-lh-body); color: var(--um-ink); background: var(--um-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } :where(.um) img { max-width: 100%; height: auto; display: block; } :where(.um) a { color: var(--um-blue-ink); text-underline-offset: 3px; } :where(.um) a:hover { color: var(--um-navy); } :where(.um) :is(h1, h2, h3, h4) { font-family: var(--um-font-display); font-weight: 800; line-height: var(--um-lh-tight); letter-spacing: -0.02em; margin: 0; color: inherit; text-wrap: balance; } :where(.um) p { margin: 0 0 var(--um-s2); max-width: 68ch; } .um :focus-visible { outline: 3px solid var(--um-blue); outline-offset: 3px; border-radius: 4px; } .um .um-on-dark :focus-visible, .um .um-section--navy :focus-visible, .um .um-hero :focus-visible { outline-color: var(--um-yellow); } .um .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .um-container { width: 100%; max-width: var(--um-max); margin-inline: auto; padding-inline: var(--um-gutter); } .um-h1 { font-size: var(--um-fs-display); } .um-h2 { font-size: var(--um-fs-h2); } .um-h3 { font-size: var(--um-fs-22); line-height: 1.2; } .um-lead { font-size: var(--um-fs-18); color: var(--um-ink-soft); } .um-small { font-size: var(--um-fs-14); color: var(--um-ink-soft); } /* ------------------------------------------------------------ Secciones */ .um-section { padding-block: var(--um-section-y); background: var(--um-surface); } .um-section--bg { background: var(--um-bg); } .um-section--navy { background: var(--um-navy); color: var(--um-on-dark); } .um-section--navy .um-lead, .um-section--navy .um-small { color: var(--um-on-dark-soft); } .um-section--blue { background: var(--um-tint-blue); } .um-section--yellow { background: var(--um-tint-yellow); } .um-section--cyan { background: var(--um-tint-cyan); } .um-section--purple { background: var(--um-tint-purple); } /* Cabecera de sección: etiqueta de código + título + rayita del color de la sección */ .um-head { --um-accent: var(--um-blue); margin-bottom: var(--um-s5); max-width: 760px; } .um-head .um-h2 { margin-top: var(--um-s1); } .um-head::after { content: ""; display: block; width: 48px; height: 4px; border-radius: 2px; background: var(--um-accent); margin-top: var(--um-s2); } .um-head p { margin-top: var(--um-s2); } .um-code { font-family: var(--um-font-mono); font-size: 0.8125rem; font-weight: 500; color: var(--um-accent, var(--um-blue-ink)); letter-spacing: 0; } .um-code::before { content: "// "; } .um-accent-yellow { --um-accent: var(--um-yellow-ink); } .um-accent-purple { --um-accent: var(--um-purple-ink); } .um-accent-cyan { --um-accent: var(--um-cyan-ink); } .um-accent-green { --um-accent: var(--um-green-ink); } .um-section--navy .um-head { --um-accent: var(--um-yellow); } /* ------------------------------------------------------------ Botones (D3: solo 2 estilos) */ .um-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 48px; padding: 0.75rem 1.5rem; border-radius: var(--um-r-control); border: 2px solid var(--um-blue); background: var(--um-blue); color: #fff; font-family: var(--um-font-body); font-size: var(--um-fs-16); font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background var(--um-t), border-color var(--um-t), color var(--um-t); } .um-btn:hover { background: var(--um-blue-ink); border-color: var(--um-blue-ink); color: #fff; } .um-btn--secondary { background: transparent; color: var(--um-navy); border-color: var(--um-line); } .um-btn--secondary:hover { background: var(--um-surface); border-color: var(--um-navy); color: var(--um-navy); } .um-hero .um-btn--secondary, .um-section--navy .um-btn--secondary, .um-on-dark .um-btn--secondary { color: #fff; border-color: rgba(255, 255, 255, 0.45); } .um-hero .um-btn--secondary:hover, .um-section--navy .um-btn--secondary:hover, .um-on-dark .um-btn--secondary:hover { background: rgba(255, 255, 255, 0.08); border-color: #fff; } .um-btn--block { width: 100%; } .um-btn[disabled], .um-btn.is-disabled { opacity: 0.5; pointer-events: none; } .um-btn svg { width: 20px; height: 20px; flex: none; } .um-actions { display: flex; flex-wrap: wrap; gap: var(--um-s2); } @media (max-width: 599px) { .um-actions--stack .um-btn { width: 100%; } } /* ------------------------------------------------------------ Chips (significado fijo por color) */ .um-chip { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.75rem; border-radius: var(--um-r-chip); font-size: var(--um-fs-14); font-weight: 600; line-height: 1.4; background: var(--um-bg); color: var(--um-ink-soft); border: 1px solid var(--um-line); } .um-chip svg { width: 16px; height: 16px; } .um-chip--kids { background: var(--um-tint-yellow); color: var(--um-yellow-ink); border-color: transparent; } .um-chip--junior { background: var(--um-tint-purple); color: var(--um-purple-ink); border-color: transparent; } .um-chip--live { background: var(--um-tint-blue); color: var(--um-blue-ink); border-color: transparent; } .um-chip--free { background: var(--um-tint-green); color: var(--um-green-ink); border-color: transparent; } .um-chip--presencial { background: var(--um-tint-cyan); color: var(--um-cyan-ink); border-color: transparent; } .um-chip--alert { background: var(--um-tint-red); color: var(--um-red-ink); border-color: transparent; } .um-chips { display: flex; flex-wrap: wrap; gap: var(--um-s1); } /* Chips seleccionables (filtros del catálogo) */ .um-chip--filter { cursor: pointer; background: var(--um-surface); color: var(--um-navy); min-height: 40px; padding-inline: 1rem; text-decoration: none; } .um-chip--filter[aria-pressed="true"], .um-chip--filter.is-active { background: var(--um-navy); color: #fff; border-color: var(--um-navy); } /* ------------------------------------------------------------ Tarjetas */ .um-card { background: var(--um-surface); border: 1px solid var(--um-line); border-radius: var(--um-r-card); padding: var(--um-s3); } .um-card--link { transition: box-shadow var(--um-t), transform var(--um-t); } .um-card--link:hover { box-shadow: var(--um-shadow-hover); } /* Tarjeta de curso única (C1) */ .um-course { display: flex; flex-direction: column; background: var(--um-surface); border: 1px solid var(--um-line); border-radius: var(--um-r-card); overflow: hidden; transition: box-shadow var(--um-t); } .um-course:hover { box-shadow: var(--um-shadow-hover); } .um-course__media { aspect-ratio: 16 / 9; background: var(--um-tint-blue); overflow: hidden; } .um-course__media img { width: 100%; height: 100%; object-fit: cover; } .um-course__body { display: flex; flex-direction: column; gap: 0.75rem; padding: var(--um-s3); flex: 1; } .um-course__title { font-size: var(--um-fs-22); line-height: 1.2; } .um-course__title a { color: var(--um-navy); text-decoration: none; } .um-course__meta { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; color: var(--um-ink-soft); font-size: var(--um-fs-14); } .um-course__meta span { display: inline-flex; align-items: center; gap: 0.375rem; } .um-course__meta svg { width: 16px; height: 16px; } .um-course__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--um-s2); margin-top: auto; padding-top: 0.75rem; border-top: 1px solid var(--um-line); } .um-price { font-family: var(--um-font-display); font-weight: 800; font-size: var(--um-fs-22); } .um-price--free { color: var(--um-green-ink); } .um-grid { display: grid; gap: var(--um-s3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); } /* ------------------------------------------------------------ Progreso */ .um-progress { height: 10px; border-radius: var(--um-r-chip); background: var(--um-tint-blue); overflow: hidden; } .um-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--um-blue); } .um-progress--done > span { background: var(--um-green); } /* ------------------------------------------------------------ Formularios */ .um-field { display: grid; gap: 0.375rem; margin-bottom: var(--um-s3); } .um-field label { font-weight: 600; } .um-field .um-hint { font-size: var(--um-fs-14); color: var(--um-ink-soft); } .um-input, .um-field input, .um-field select, .um-field textarea { width: 100%; min-height: 48px; padding: 0.75rem 1rem; font: inherit; color: var(--um-ink); background: var(--um-surface); border: 1.5px solid var(--um-line); border-radius: var(--um-r-control); transition: border-color var(--um-t), box-shadow var(--um-t); } .um-field input:focus, .um-field select:focus, .um-field textarea:focus, .um-input:focus { outline: none; border-color: var(--um-blue); box-shadow: 0 0 0 4px var(--um-tint-blue); } .um-field.is-error input, .um-field.is-error select { border-color: var(--um-red); } .um-field .um-error { color: var(--um-red-ink); font-size: var(--um-fs-14); font-weight: 600; } .um-req { color: var(--um-red-ink); } /* ------------------------------------------------------------ Avisos */ .um-alert { display: flex; gap: 0.75rem; align-items: flex-start; padding: var(--um-s2) var(--um-s3); border-radius: var(--um-r-control); background: var(--um-tint-blue); color: var(--um-navy); } .um-alert svg { width: 22px; height: 22px; flex: none; margin-top: 1px; color: var(--um-blue-ink); } .um-alert--success { background: var(--um-tint-green); } .um-alert--success svg { color: var(--um-green-ink); } .um-alert--warning { background: var(--um-tint-yellow); } .um-alert--warning svg { color: var(--um-yellow-ink); } .um-alert--error { background: var(--um-tint-red); } .um-alert--error svg { color: var(--um-red-ink); } .um-alert p { margin: 0; } /* ------------------------------------------------------------ Encabezado y menú */ .um-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.96); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--um-line); } .um-header__bar { display: flex; align-items: center; gap: var(--um-s3); min-height: 72px; } .um-header__logo img { height: 36px; width: auto; } .um-nav { display: none; gap: var(--um-s3); margin-left: auto; } .um-nav a { color: var(--um-navy); text-decoration: none; font-weight: 500; padding: 0.5rem 0; } .um-nav a:hover, .um-nav a[aria-current="page"] { color: var(--um-blue-ink); } .um-header__cta { margin-left: auto; } .um-header__menu { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1.5px solid var(--um-line); border-radius: var(--um-r-control); background: var(--um-surface); color: var(--um-navy); } .um-header__menu svg { width: 24px; height: 24px; } @media (min-width: 1024px) { .um-nav { display: flex; } .um-header__cta { margin-left: var(--um-s2); } .um-header__menu { display: none; } } @media (max-width: 599px) { .um-header__cta .um-btn { min-height: 44px; padding-inline: 1rem; } } /* ------------------------------------------------------------ Hero */ .um-hero { background: var(--um-navy); color: #fff; overflow: hidden; } .um-hero__grid { display: grid; gap: var(--um-s5); align-items: center; padding-block: clamp(3rem, 2rem + 5vw, 6rem); } .um-hero .um-lead { color: var(--um-on-dark-soft); font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); margin-top: var(--um-s3); } .um-hero .um-actions { margin-top: var(--um-s4); } .um-hero__art { position: relative; justify-self: center; width: min(100%, 520px); } .um-proof { display: flex; align-items: center; gap: 0.75rem; margin-top: var(--um-s4); color: var(--um-on-dark-soft); font-size: var(--um-fs-14); } .um-proof__faces { display: flex; } .um-proof__faces img { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--um-navy); margin-left: -10px; background: var(--um-surface); } .um-proof__faces img:first-child { margin-left: 0; } @media (min-width: 900px) { .um-hero__grid { grid-template-columns: 1.1fr 0.9fr; } } /* ------------------------------------------------------------ Cifras */ .um-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--um-s4) var(--um-s3); } .um-stat__n { font-family: var(--um-font-display); font-weight: 800; font-size: clamp(2.25rem, 1.6rem + 2.5vw, 3.5rem); line-height: 1; color: var(--um-navy); } .um-stat__l { margin-top: 0.5rem; color: var(--um-ink-soft); } @media (min-width: 900px) { .um-stats { grid-template-columns: repeat(4, 1fr); } } /* ------------------------------------------------------------ La ruta (elemento distintivo: bloques del cubo) */ .um-route { display: grid; gap: var(--um-s4); } .um-route__step { display: grid; grid-template-columns: 88px 1fr; gap: var(--um-s3); align-items: start; } .um-route__block { width: 88px; height: auto; } .um-route__step h3 { font-size: var(--um-fs-22); } .um-route__step p { margin: 0.5rem 0 0; color: var(--um-ink-soft); } .um-route__step .um-chips { margin-top: 0.75rem; } @media (min-width: 900px) { .um-route { grid-template-columns: repeat(3, 1fr); align-items: end; } .um-route__step { grid-template-columns: 1fr; } /* La escalera: cada nivel sube un bloque, como la U del logo */ .um-route__step:nth-child(1) { padding-top: 6rem; } .um-route__step:nth-child(2) { padding-top: 3rem; } .um-route__block { width: 120px; } } /* ------------------------------------------------------------ Paneles Presencial / Colegios */ .um-panels { display: grid; gap: var(--um-s3); } .um-panel { border-radius: var(--um-r-card); padding: var(--um-s4); display: grid; gap: var(--um-s2); align-content: start; } .um-panel--cyan { background: var(--um-tint-cyan); } .um-panel--purple { background: var(--um-tint-purple); } .um-panel ul { margin: 0; padding-left: 1.25rem; } .um-panel li { margin-bottom: 0.375rem; } @media (min-width: 900px) { .um-panels { grid-template-columns: 1fr 1fr; } } /* ------------------------------------------------------------ Aliados */ .um-logos { display: flex; flex-wrap: wrap; gap: var(--um-s3) var(--um-s5); align-items: center; } .um-logos img { height: 40px; width: auto; filter: grayscale(1); opacity: 0.75; } .um-logo-slot { display: inline-flex; align-items: center; justify-content: center; min-width: 140px; height: 56px; padding: 0 var(--um-s2); border: 1.5px dashed var(--um-line); border-radius: var(--um-r-control); color: var(--um-ink-soft); font-size: var(--um-fs-14); } /* ------------------------------------------------------------ Testimonios */ .um-quotes { display: grid; gap: var(--um-s3); } .um-quote { background: var(--um-navy-2); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; padding: var(--um-s4) var(--um-s3) var(--um-s3); display: grid; gap: var(--um-s2); } .um-quote__mark { font-family: var(--um-font-display); font-weight: 800; font-size: 4rem; line-height: 0.6; color: var(--um-yellow); height: 1.75rem; } .um-quote p { color: #fff; font-size: var(--um-fs-18); margin: 0; } .um-quote footer { border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: var(--um-s2); color: var(--um-on-dark-soft); font-size: var(--um-fs-14); } .um-quote footer strong { display: block; color: #fff; font-size: var(--um-fs-16); } @media (min-width: 900px) { .um-quotes { grid-template-columns: repeat(3, 1fr); } } /* ------------------------------------------------------------ FAQ (acordeón) */ .um-faq { border-top: 1px solid var(--um-line); max-width: 860px; } .um-faq details { border-bottom: 1px solid var(--um-line); } .um-faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--um-s2); padding: var(--um-s3) 0; cursor: pointer; list-style: none; font-weight: 600; font-size: var(--um-fs-18); } .um-faq summary::-webkit-details-marker { display: none; } .um-faq summary .um-faq__icon { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--um-tint-blue); color: var(--um-blue-ink); transition: transform var(--um-t); } .um-faq summary .um-faq__icon svg { width: 18px; height: 18px; } .um-faq details[open] .um-faq__icon { transform: rotate(45deg); } .um-faq details > div { padding: 0 0 var(--um-s3); color: var(--um-ink-soft); } /* ------------------------------------------------------------ Banda final + WhatsApp */ .um-final { display: grid; gap: var(--um-s3); align-items: center; } @media (min-width: 900px) { .um-final { grid-template-columns: 1.2fr auto; } } .um-wa { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 56px; padding: 0 1.25rem 0 1rem; border-radius: var(--um-r-chip); background: var(--um-green-ink); color: #fff; font-weight: 600; text-decoration: none; box-shadow: 0 8px 20px rgba(0, 149, 64, 0.35); } .um-wa svg { width: 24px; height: 24px; } .um-wa:hover { background: var(--um-green-ink); filter: brightness(0.9); } @media (max-width: 599px) { .um-wa span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .um-wa { padding: 0; width: 56px; justify-content: center; } } /* ------------------------------------------------------------ Pie */ .um-footer { background: var(--um-surface); border-top: 1px solid var(--um-line); padding-block: var(--um-s8) var(--um-s4); } .um-footer__grid { display: grid; gap: var(--um-s4); } .um-footer__title, .um-footer h3 { font-size: var(--um-fs-16); font-family: var(--um-font-body); font-weight: 700; letter-spacing: 0; margin: 0 0 var(--um-s2); color: var(--um-navy); } .um-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; } .um-footer a { color: var(--um-ink-soft); text-decoration: none; } .um-footer a:hover { color: var(--um-navy); text-decoration: underline; } .um-footer__social { display: flex; gap: 0.5rem; margin-top: var(--um-s2); } .um-footer__social a { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--um-line); color: var(--um-navy); } .um-footer__social svg { width: 20px; height: 20px; } .um-footer__legal { margin-top: var(--um-s6); padding-top: var(--um-s3); border-top: 1px solid var(--um-line); display: flex; flex-wrap: wrap; gap: var(--um-s2); justify-content: space-between; color: var(--um-ink-soft); font-size: var(--um-fs-14); } .um-stripe { display: flex; height: 6px; } .um-stripe i { flex: 1; } .um-stripe i:nth-child(1) { background: var(--um-yellow); } .um-stripe i:nth-child(2) { background: var(--um-red); } .um-stripe i:nth-child(3) { background: var(--um-blue); } .um-stripe i:nth-child(4) { background: var(--um-purple); } .um-stripe i:nth-child(5) { background: var(--um-cyan); } .um-stripe i:nth-child(6) { background: var(--um-green); } @media (min-width: 900px) { .um-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } } /* ------------------------------------------------------------ Barra fija de compra (celular) */ .um-buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: flex; align-items: center; justify-content: space-between; gap: var(--um-s2); padding: 0.75rem var(--um-gutter); background: var(--um-surface); border-top: 1px solid var(--um-line); box-shadow: 0 -6px 16px rgba(10, 31, 68, 0.08); } @media (min-width: 900px) { .um-buybar { display: none; } } /* ------------------------------------------------------------ Estados vacíos con el robot */ .um-empty { display: grid; justify-items: start; gap: var(--um-s2); padding: var(--um-s5); border: 1.5px dashed var(--um-line); border-radius: var(--um-r-card); background: var(--um-surface); } .um-empty img { width: 96px; } /* ------------------------------------------------------------ Movimiento */ @media (prefers-reduced-motion: reduce) { .um *, .um *::before, .um *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; } } .um-footer__links { display: flex; flex-wrap: wrap; gap: var(--um-s3); } /* ------------------------------------------------------------ Accesos y menú de celular */ .um-skip { position: absolute; left: 1rem; top: -100px; z-index: 200; padding: 0.75rem 1rem; background: var(--um-navy); color: #fff; border-radius: var(--um-r-control); } .um-skip:focus { top: 1rem; } .um-header__login { display: none; color: var(--um-navy); font-weight: 600; text-decoration: none; margin-right: var(--um-s2); } .um-header__login:hover { color: var(--um-blue-ink); } @media (min-width: 600px) { .um-header__login { display: inline; } } .um-header__cta { display: flex; align-items: center; } @media (max-width: 599px) { .um-header__cta { display: none; } .um-header__menu { margin-left: auto; } } .um-mnav { border-top: 1px solid var(--um-line); background: var(--um-surface); padding-block: var(--um-s2) var(--um-s3); } .um-mnav ul { list-style: none; margin: 0; padding: 0; } .um-mnav li a { display: block; padding: 0.875rem 0; border-bottom: 1px solid var(--um-line); color: var(--um-navy); font-weight: 600; font-size: var(--um-fs-18); text-decoration: none; } .um-mnav li a[aria-current="page"] { color: var(--um-blue-ink); } .um-mnav__actions { display: grid; gap: var(--um-s1); margin-top: var(--um-s3); } @media (min-width: 1024px) { .um-mnav { display: none !important; } } /* El sello de reCAPTCHA (formularios de contacto) sube para no tapar el botón de WhatsApp. */ .grecaptcha-badge { bottom: 88px !important; } /* ------------------------------------------------------------ Portada (D2) */ .um-section--tight { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem); } .um-code--on-dark { --um-accent: var(--um-yellow); color: var(--um-yellow); } .um-hero__title { margin-top: var(--um-s2); color: #fff; } .um-greet { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: var(--um-s3); padding: 0.5rem 1rem; border-radius: var(--um-r-chip); background: rgba(255, 255, 255, 0.1); color: #fff; } .um-greet a { color: var(--um-yellow); font-weight: 600; } ol.um-route { list-style: none; margin: 0; padding: 0; } .um-course__media { display: block; } .um-quote__by { display: flex; align-items: center; gap: 0.75rem; border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: var(--um-s2); color: var(--um-on-dark-soft); font-size: var(--um-fs-14); } .um-quote__by img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; } .um-quote__by strong { display: block; color: #fff; font-size: var(--um-fs-16); } .um-logos a { display: inline-flex; } .um-logos img:hover { filter: none; opacity: 1; } /* Selector de idioma de TranslatePress: el sitio tiene un solo idioma (es_CO), no se muestra. */ #trp-floater-ls { display: none !important; } /* ------------------------------------------------------------ Catálogo (C2) */ .um-catalog .um-head { margin-bottom: var(--um-s4); } .um-catalog__filters { margin-bottom: var(--um-s4); } /* ------------------------------------------------------------ Página de curso (C3) */ .um-crumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; padding-top: var(--um-s3); } .um-crumbs a { color: var(--um-ink-soft); } .um-course-hero { display: grid; gap: var(--um-s4); padding-block: var(--um-s4) var(--um-s5); align-items: center; } .um-course-hero__title { margin-top: var(--um-s2); font-size: clamp(2.25rem, 1.6rem + 3vw, 3.75rem); } .um-course-hero .um-lead { margin-top: var(--um-s2); } .um-course-hero__buy { display: grid; gap: var(--um-s2); margin-top: var(--um-s3); } .um-course-hero__progress { display: grid; gap: 0.375rem; max-width: 360px; } .um-course-hero__media { border-radius: var(--um-r-card); overflow: hidden; aspect-ratio: 16 / 10; background: var(--um-tint-blue); } .um-course-hero__media img { width: 100%; height: 100%; object-fit: cover; } .um-price--lg { font-size: var(--um-fs-36); } @media (min-width: 900px) { .um-course-hero { grid-template-columns: 1fr 1fr; } } .um-facts { list-style: none; margin: 0 0 var(--um-s6); padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--um-s3) var(--um-s2); } .um-facts li { display: flex; gap: 0.625rem; align-items: flex-start; } .um-facts svg { width: 22px; height: 22px; color: var(--um-blue-ink); flex: none; margin-top: 2px; } .um-facts strong { display: block; } .um-facts span { color: var(--um-ink-soft); font-size: var(--um-fs-14); } .um-facts span strong { color: var(--um-navy); font-size: var(--um-fs-16); } @media (min-width: 900px) { .um-facts { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } } .um-cols { display: grid; gap: var(--um-s6); } @media (min-width: 900px) { .um-cols { grid-template-columns: 1fr 1fr; gap: var(--um-s8); } } .um-cols .um-head + * { margin-top: 0; } .um-cols > div > .um-head:not(:first-child) { margin-top: var(--um-s6); } .um-prose { max-width: 68ch; } .um-prose p, .um-prose li { color: var(--um-ink); } .um-prose ul, .um-prose ol { padding-left: 1.25rem; } .um-prose :is(h2, h3, h4):not(.um-h2) { font-size: var(--um-fs-22); margin: var(--um-s4) 0 var(--um-s1); } .um-prose img { border-radius: var(--um-r-control); margin-block: var(--um-s2); } .um-checks { list-style: none; margin: 0 0 var(--um-s3); padding: 0; display: grid; gap: var(--um-s2); } .um-checks li { display: grid; grid-template-columns: 26px 1fr; gap: 0.75rem; } .um-checks svg { width: 24px; height: 24px; color: var(--um-green-ink); } .um-block-title { margin: var(--um-s4) 0 var(--um-s2); } .um-teacher { display: flex; gap: var(--um-s2); align-items: center; margin-bottom: var(--um-s3); } .um-teacher__photo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; } .um-cert { display: flex; gap: var(--um-s2); align-items: flex-start; margin-top: var(--um-s4); padding: var(--um-s3); border-radius: var(--um-r-card); background: var(--um-tint-yellow); } .um-cert > svg { width: 32px; height: 32px; color: var(--um-yellow-ink); flex: none; } .um-cert p { margin: 0; } .um-syllabus details { border: 1px solid var(--um-line); border-radius: var(--um-r-control); background: var(--um-surface); margin-bottom: 0.75rem; } .um-syllabus summary { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; cursor: pointer; font-weight: 600; list-style: none; } .um-syllabus summary::-webkit-details-marker { display: none; } .um-syllabus ol { list-style: none; margin: 0; padding: 0 1.25rem 1rem; } .um-syllabus li { display: grid; grid-template-columns: 22px 1fr; gap: 0.75rem; padding: 0.5rem 0; border-top: 1px solid var(--um-line); color: var(--um-ink); } .um-syllabus li svg { width: 20px; height: 20px; color: var(--um-ink-soft); margin-top: 2px; } @media (max-width: 899px) { body.um-has-buybar { padding-bottom: 84px; } body.um-has-buybar .um-wa { bottom: 96px; } } /* ------------------------------------------------------------ Mi cuenta (B1–B7) */ .um-account { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--um-s4); padding-block: var(--um-s4) var(--um-s8); } .um-account__nav ul { list-style: none; margin: 0; padding: 0 0 0.25rem; display: flex; gap: 0.5rem; overflow-x: auto; scrollbar-width: thin; } .um-account__nav a { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0 1rem; border-radius: var(--um-r-control); border: 1px solid var(--um-line); background: var(--um-surface); color: var(--um-navy); text-decoration: none; font-weight: 500; white-space: nowrap; } .um-account__nav a svg { width: 20px; height: 20px; flex: none; } .um-account__nav a[aria-current="page"] { background: var(--um-navy); border-color: var(--um-navy); color: #fff; } .um-account__main { display: grid; gap: var(--um-s4); align-content: start; min-width: 0; } .um-account__main > h1 + .um-lead { margin-top: calc(-1 * var(--um-s3)); } .um-account__hello { display: flex; gap: var(--um-s2); align-items: center; } .um-account__hello img { width: 64px; height: 64px; flex: none; } .um-account__hello .um-lead { margin: 0.25rem 0 0; } .um-account__hello .um-lead a { font-weight: 600; } @media (min-width: 900px) { .um-account { grid-template-columns: 240px minmax(0, 1fr); align-items: start; gap: var(--um-s6); } .um-account__nav ul { flex-direction: column; overflow: visible; position: sticky; top: 96px; } .um-account__nav a { border-color: transparent; background: transparent; } .um-account__nav a:hover { background: var(--um-surface); border-color: var(--um-line); } .um-account__nav a[aria-current="page"] { background: var(--um-navy); color: #fff; } } .um-live-card { display: grid; gap: var(--um-s2); background: var(--um-navy); color: #fff; border-radius: var(--um-r-card); padding: var(--um-s3); } .um-live-card .um-h3 { color: #fff; } .um-live-card .um-small { color: var(--um-on-dark-soft); } .um-live-card__when { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; } .um-live-card__when span { display: inline-flex; gap: 0.5rem; align-items: center; } .um-live-card__when svg { width: 20px; height: 20px; color: var(--um-yellow); } .um-live-card .um-btn.is-disabled { background: rgba(255, 255, 255, 0.12); border-color: transparent; opacity: 1; color: var(--um-on-dark-soft); } .um-tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--um-line); overflow-x: auto; } .um-tabs a { padding: 0.75rem 1rem; color: var(--um-ink-soft); text-decoration: none; font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; } .um-tabs a[aria-current="page"] { color: var(--um-navy); border-color: var(--um-blue); } .um-mycourses { display: grid; gap: var(--um-s3); } .um-mycourse { display: grid; background: var(--um-surface); border: 1px solid var(--um-line); border-radius: var(--um-r-card); overflow: hidden; } .um-mycourse__media { display: block; aspect-ratio: 16 / 9; background: var(--um-tint-blue); } .um-mycourse__media img { width: 100%; height: 100%; object-fit: cover; } .um-mycourse__body { display: grid; gap: 0.75rem; padding: var(--um-s3); } .um-mycourse__body .um-h3 a { color: var(--um-navy); text-decoration: none; } .um-mycourse__pct { display: flex; justify-content: space-between; font-size: var(--um-fs-14); color: var(--um-ink-soft); margin-bottom: 0.375rem; } @media (min-width: 900px) { .um-mycourse { grid-template-columns: 280px 1fr; align-items: stretch; } .um-mycourse__media { aspect-ratio: auto; height: 100%; } } .um-classrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--um-s2); } .um-classrow__end { display: flex; align-items: center; gap: var(--um-s2); } .um-empty--next { background: var(--um-tint-blue); border-style: solid; border-color: transparent; } .um-steps { margin: 0; padding-left: 1.5rem; display: grid; gap: 0.75rem; max-width: 68ch; } .um-account__more { border-top: 1px solid var(--um-line); padding-top: var(--um-s4); } .um-account__more ul { list-style: none; margin: var(--um-s2) 0 0; padding: 0; display: grid; gap: 0.5rem; } .um-account__more a { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; } .um-account__more svg { width: 20px; height: 20px; } /* Completa tu perfil (E1, E2: formulario del plugin umake-core) */ .uc-profile { display: grid; gap: var(--um-s3); max-width: 760px; } .uc-profile__progress { display: grid; gap: 0.375rem; max-width: 420px; } .uc-profile__grid { display: grid; gap: 0 var(--um-s3); } @media (min-width: 700px) { .uc-profile__grid { grid-template-columns: 1fr 1fr; } } .uc-profile .um-field { margin-bottom: var(--um-s2); } .uc-cert { border: 1px solid var(--um-line); border-radius: var(--um-r-card); padding: var(--um-s3); margin: 0; background: var(--um-surface); display: grid; gap: var(--um-s2); } .uc-cert legend { padding: 0 0.5rem; margin-left: -0.5rem; } .uc-cert__preview { display: grid; gap: 0.25rem; justify-items: center; text-align: center; padding: var(--um-s3); border-radius: var(--um-r-control); background: var(--um-tint-yellow); } .uc-cert__preview strong { font-family: var(--um-font-display); font-weight: 800; font-size: var(--um-fs-28); line-height: 1.15; } .uc-check { display: flex; gap: 0.625rem; align-items: center; font-weight: 600; min-height: 44px; } .uc-check input { width: 22px; height: 22px; accent-color: var(--um-blue); } .uc-check.is-error { color: var(--um-red-ink); } /* ------------------------------------------------------------ E3: Presencial y Colegios */ .um-landing__art { border-radius: var(--um-r-card); aspect-ratio: 4 / 3; display: grid; place-items: center; padding: var(--um-s4); } .um-landing__art img { width: min(70%, 320px); height: auto; } .um-landing__form { max-width: 760px; } .um-card.um-leadform { padding: var(--um-s4); display: grid; gap: var(--um-s2); } .um-leadform__grid { display: grid; gap: 0 var(--um-s3); } .um-leadform__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .um-field.is-error textarea { border-color: var(--um-red); } @media (min-width: 640px) { .um-leadform__grid { grid-template-columns: 1fr 1fr; } .um-leadform__grid .um-field--wide { grid-column: 1 / -1; } } @media (min-width: 960px) { .um-landing__hero { grid-template-columns: 1.1fr 0.9fr; } } /* ============================================================ Identidad v2: bloques y color * Inspirada en el isotipo (la "U" de bloques isométricos). Los colores del logo se usan * como bloques decorativos; las acciones siguen siendo azules. */ /* Color por elemento: .um-c-{color} da --c (base), --c-ink (texto AA), --c-tint (fondo) y --c-on (texto sobre --c). */ .um-c-yellow { --c: var(--um-yellow); --c-ink: var(--um-yellow-ink); --c-tint: var(--um-tint-yellow); --c-on: var(--um-navy); } .um-c-red { --c: var(--um-red); --c-ink: var(--um-red-ink); --c-tint: var(--um-tint-red); --c-on: #fff; } .um-c-blue { --c: var(--um-blue); --c-ink: var(--um-blue-ink); --c-tint: var(--um-tint-blue); --c-on: #fff; } .um-c-green { --c: var(--um-green); --c-ink: var(--um-green-ink); --c-tint: var(--um-tint-green); --c-on: #fff; } .um-c-cyan { --c: var(--um-cyan); --c-ink: var(--um-cyan-ink); --c-tint: var(--um-tint-cyan); --c-on: var(--um-navy); } .um-c-purple { --c: var(--um-purple); --c-ink: var(--um-purple-ink); --c-tint: var(--um-tint-purple); --c-on: #fff; } .um-accent-red { --um-accent: var(--um-red-ink); } /* ------------------------------------------------------------ Encabezado */ .um-header { background: rgba(255, 255, 255, 0.9); border-bottom: 0; box-shadow: 0 1px 0 var(--um-line); transition: box-shadow var(--um-t); } .um-header.is-scrolled { box-shadow: 0 1px 0 var(--um-line), 0 10px 30px rgba(10, 31, 68, 0.08); } .um-stripe--top { height: 4px; } .um-header__bar { min-height: 64px; gap: var(--um-s2); } .um-header__logo img { height: 32px; } .um-nav { gap: 2px; padding: 4px; background: var(--um-bg); border: 1px solid var(--um-line); border-radius: var(--um-r-chip); } .um-nav a { --dot: var(--um-blue); position: relative; padding: 0.5rem 0.875rem; border-radius: var(--um-r-chip); color: var(--um-ink-soft); font-size: 0.9375rem; font-weight: 500; line-height: 1.2; transition: background var(--um-t), color var(--um-t), box-shadow var(--um-t); } .um-nav a:nth-child(2) { --dot: var(--um-cyan); } .um-nav a:nth-child(3) { --dot: var(--um-purple); } .um-nav a:nth-child(4) { --dot: var(--um-green); } .um-nav a:nth-child(5) { --dot: var(--um-yellow); } .um-nav a:nth-child(6) { --dot: var(--um-red); } .um-nav a::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 6px; height: 6px; border-radius: 1px; background: var(--dot); transform: translateX(-50%) rotate(45deg) scale(0); transition: transform var(--um-t); } .um-nav a:hover, .um-nav a[aria-current="page"] { background: var(--um-surface); color: var(--um-navy); box-shadow: 0 1px 3px rgba(10, 31, 68, 0.1); } .um-nav a:hover::after, .um-nav a[aria-current="page"]::after { transform: translateX(-50%) rotate(45deg) scale(1); } .um-header__login { align-items: center; gap: 0.375rem; margin-right: 0.25rem; padding: 0.5rem 0.75rem; border-radius: var(--um-r-chip); font-size: 0.9375rem; transition: background var(--um-t); } .um-header__login svg { width: 18px; height: 18px; } .um-header__login:hover { background: var(--um-tint-blue); } @media (min-width: 600px) { .um-header__login { display: inline-flex; } } .um-btn--sm { min-height: 42px; padding: 0.5rem 1.125rem; font-size: 0.9375rem; } .um-header .um-btn--sm { border-radius: var(--um-r-chip); } .um-header__menu { width: 44px; height: 44px; border-radius: var(--um-r-chip); } .um-mnav li a { font-size: var(--um-fs-16); } @media (min-width: 1024px) and (max-width: 1279px) { .um-nav a { padding-inline: 0.625rem; font-size: 0.875rem; } } /* ------------------------------------------------------------ Cargador (GIF de la U del sitio original) */ .um-loader { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; background: rgba(255, 255, 255, 0.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s ease, visibility 0s linear 0.25s; } .um-loader img { width: 120px; height: 120px; } html.um-js:not(.um-ready) .um-loader { animation: um-loader-in 0.25s ease 0.4s both; } html.um-leaving .um-loader { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.25s ease 0.2s, visibility 0s linear 0.2s; } @keyframes um-loader-in { from { opacity: 0; visibility: visible; } to { opacity: 1; visibility: visible; } } /* ------------------------------------------------------------ Desplazamiento suave a anclas (#cursos…) */ @media (prefers-reduced-motion: no-preference) { html:has(body.um) { scroll-behavior: smooth; } } .um [id] { scroll-margin-top: 88px; } /* ------------------------------------------------------------ Construcción por bloques al bajar * umake-front.js marca piezas con .um-b y les pone .is-in al entrar en pantalla: caen y * "encajan" como un ladrillo (con un pequeño rebote). Las capas de los cubos (.um-brick) caen * una sobre otra y las imágenes se arman con cuadros (.um-tiles). Solo con html.um-anim, que * no se activa si el equipo pide reducir movimiento. */ html.um-anim .um-b { opacity: 0; transform: perspective(900px) translate3d(0, -36px, 0) rotateX(20deg) scale(0.95); transform-origin: 50% 100%; } html.um-anim .um-b.is-in { opacity: 1; transform: none; transition: opacity 0.35s ease var(--d, 0ms), transform 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) var(--d, 0ms); } html.um-anim .um-b:not(.is-in) .um-brick { opacity: 0; } html.um-anim .um-b.is-in .um-brick, html.um-anim .um-build-now .um-brick { animation: um-drop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--i, 0) * 110ms + var(--d, 0ms) + 180ms) both; } @keyframes um-drop { from { opacity: 0; transform: translateY(-42px); } 55% { opacity: 1; } to { opacity: 1; transform: none; } } .um-tiling { position: relative; } .um-tiling > img { opacity: 0; } .um-tiles { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .um-tiles i { position: absolute; background-repeat: no-repeat; animation: um-tile 0.5s cubic-bezier(0.34, 1.4, 0.64, 1) calc(var(--t) * 45ms + var(--d, 0ms) + 120ms) both; } @keyframes um-tile { from { opacity: 0; transform: translate3d(0, -48px, 0) scale(0.85); } 50% { opacity: 1; } to { opacity: 1; transform: none; } } /* ------------------------------------------------------------ Hero con más color */ .um-hero { background: radial-gradient(520px 380px at 88% 18%, rgba(24, 164, 207, 0.28), transparent 65%), radial-gradient(560px 420px at 8% 100%, rgba(91, 47, 196, 0.45), transparent 65%), var(--um-navy); } .um-hl { white-space: nowrap; } .um-hl--yellow { color: var(--um-yellow); } .um-hl--cyan { color: #4FC3E8; } .um-hero__art { isolation: isolate; } .um-hero__art > img { position: relative; z-index: 1; } .um-hero__cube { position: absolute; z-index: 0; display: block; } .um-hero__cube .um-route__block { width: 100%; } .um-hero__cube--a { width: 64px; left: 2%; top: 6%; } .um-hero__cube--b { width: 78px; right: -2%; bottom: 10%; z-index: 2; } .um-hero__cube--c { width: 48px; right: 10%; top: 0; } .um-iso { width: 100%; height: 100%; overflow: visible; } @media (prefers-reduced-motion: no-preference) { .um-hero__cube { animation: um-float 6s ease-in-out infinite alternate; } .um-hero__cube--b { animation-delay: -2s; } .um-hero__cube--c { animation-delay: -4s; } } /* ------------------------------------------------------------ Nuestros resultados */ .um-results { background: var(--um-surface); } .um-stats { gap: var(--um-s2); } .um-stat { position: relative; overflow: hidden; padding: var(--um-s3); border-radius: var(--um-r-card); background: var(--c-tint, var(--um-tint-blue)); } .um-stat::after { content: ""; position: absolute; right: -14px; top: -14px; width: 56px; height: 56px; background: var(--c); transform: rotate(45deg) scaleY(0.58); border-radius: 6px; opacity: 0.9; } .um-stat .um-stat__n { color: var(--c-ink, var(--um-navy)); } .um-stat .um-stat__l { color: var(--um-navy); font-weight: 500; } /* ------------------------------------------------------------ La trayectoria (de pequeños a grandes) */ .um-journey { background: linear-gradient(180deg, var(--um-surface) 0%, var(--um-tint-yellow) 100%); } .um-route { position: relative; gap: var(--um-s3); } .um-route__step { grid-template-columns: 72px 1fr; position: relative; padding-top: 0 !important; } .um-route__art { display: flex; align-items: flex-end; justify-content: center; } .um-route__block { width: 72px; } .um-route__age { display: inline-block; margin-bottom: 0.5rem; padding: 0.25rem 0.75rem; border-radius: var(--um-r-chip); background: var(--c-solid, var(--c)); color: var(--c-on); font-family: var(--um-font-mono); font-size: var(--um-fs-14); font-weight: 500; } .um-route__step h3 { font-size: var(--um-fs-28); } /* Celular: línea punteada que une las etapas, de arriba (pequeños) hacia abajo (grandes). */ .um-route__step:not(:last-child)::before { content: ""; position: absolute; left: 35px; top: 100%; height: var(--um-s3); border-left: 3px dotted var(--um-line); } @media (min-width: 900px) { .um-route { grid-template-columns: repeat(var(--um-steps, 4), 1fr); align-items: start; gap: var(--um-s4); } .um-route__step { grid-template-columns: 1fr; align-content: end; } .um-route__art { justify-content: flex-start; align-items: flex-end; min-height: 260px; padding-bottom: var(--um-s3); border-bottom: 3px solid var(--c); } .um-route__block { width: 104px; } .um-route__step:not(:last-child)::before { display: none; } } /* ------------------------------------------------------------ Método STEAM */ .um-method__intro { display: grid; gap: var(--um-s3); align-items: end; margin-bottom: var(--um-s5); } .um-method__intro .um-head { margin-bottom: 0; } .um-steam { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; max-width: 420px; } .um-steam li { display: grid; justify-items: center; gap: 0.375rem; } .um-steam b { display: grid; place-items: center; width: 100%; max-width: 60px; aspect-ratio: 1; border-radius: 14px; background: var(--c); color: var(--c-on); font-family: var(--um-font-display); font-size: var(--um-fs-28); font-weight: 800; box-shadow: inset 0 -7px 0 rgba(0, 0, 0, 0.2); } .um-steam span { font-size: 0.75rem; text-align: center; color: var(--um-on-dark-soft); } .um-pillars { display: grid; gap: var(--um-s2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); } .um-pillar { display: grid; grid-template-columns: 44px 1fr; gap: 0.25rem var(--um-s2); align-items: start; padding: var(--um-s3); border-radius: var(--um-r-card); background: var(--um-navy-2); border-top: 4px solid var(--c); } .um-pillar .um-route__block { width: 44px; grid-row: span 2; } .um-pillar h3 { font-size: var(--um-fs-18); color: #fff; } .um-pillar p { margin: 0; color: var(--um-on-dark-soft); font-size: var(--um-fs-16); } @media (min-width: 900px) { .um-method__intro { grid-template-columns: 1.3fr 1fr; } .um-steam { grid-template-columns: repeat(5, 72px); max-width: none; justify-content: end; } } /* ------------------------------------------------------------ Nuestros profes */ .um-team { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--um-s4) var(--um-s3); grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } .um-team__item { display: grid; justify-items: center; text-align: center; gap: 0.25rem; } .um-team__item strong { font-family: var(--um-font-display); font-size: var(--um-fs-16); line-height: 1.25; margin-top: var(--um-s2); text-wrap: balance; } .um-team__photo { position: relative; display: block; width: min(100%, 150px); aspect-ratio: 1; border-radius: 24px; overflow: hidden; background: var(--c-tint); box-shadow: 8px 8px 0 var(--c); transition: transform var(--um-t), box-shadow var(--um-t); } .um-team__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; } .um-team__item:hover .um-team__photo { transform: translate(-3px, -3px); box-shadow: 11px 11px 0 var(--c); } /* ------------------------------------------------------------ Ellos confían en nosotros */ .um-trust { background: var(--um-surface); border-top: 1px solid var(--um-line); } .um-trust__title { text-align: center; font-size: var(--um-fs-22); margin-bottom: var(--um-s4); } .um-trust__title::after { content: ""; display: block; width: 90px; height: 6px; margin: var(--um-s2) auto 0; background: linear-gradient(90deg, var(--um-yellow) 0 20%, var(--um-red) 20% 40%, var(--um-blue) 40% 60%, var(--um-green) 60% 80%, var(--um-cyan) 80%); border-radius: 3px; } .um-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .um-marquee__track { display: flex; width: max-content; animation: um-marquee 38s linear infinite; } .um-marquee:hover .um-marquee__track, .um-marquee:focus-within .um-marquee__track { animation-play-state: paused; } .um-marquee .um-logos { list-style: none; margin: 0; padding: 0 var(--um-s2) 0 0; display: flex; flex-wrap: nowrap; gap: var(--um-s2); } .um-logo { display: grid; place-items: center; height: 92px; min-width: 190px; padding: var(--um-s2) var(--um-s3); background: var(--um-surface); border: 1px solid var(--um-line); border-radius: var(--um-r-card); } .um-logos .um-logo img { height: auto; max-height: 56px; width: auto; max-width: 150px; filter: none; opacity: 1; } @keyframes um-marquee { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .um-marquee { -webkit-mask-image: none; mask-image: none; } .um-marquee__track { width: auto; animation: none; justify-content: center; } .um-marquee .um-logos { flex-wrap: wrap; justify-content: center; padding-inline: var(--um-gutter); } .um-marquee .um-logos[aria-hidden="true"] { display: none; } } /* ------------------------------------------------------------ Indicador "trabajando" en formularios públicos */ .um-btn.is-busy { pointer-events: none; opacity: 0.85; } .um-btn.is-busy::before { content: ""; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: um-spin 0.7s linear infinite; } html.um-locked .um-page { pointer-events: none; } @keyframes um-spin { to { transform: rotate(360deg); } } /* ============================================================ Portada v3: lo que crean y más color abajo */ /* Título que se escribe solo: "…sus propios robots|" (umake-front.js, sección 6) */ /* La frase va en su propia línea y se reserva espacio para 2 líneas, para que nada salte. */ .um-type { display: block; min-height: 2.16em; color: var(--um-yellow); } .um-type__caret { display: inline-block; width: 0.08em; height: 0.9em; margin-left: 0.06em; vertical-align: -0.08em; background: var(--um-yellow); border-radius: 2px; animation: um-caret 1s steps(1) infinite; } @keyframes um-caret { 50% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .um-type__caret { animation: none; } } /* Cubos decorativos en las esquinas de una sección */ .um-deco-host { position: relative; overflow: hidden; isolation: isolate; } .um-deco-host > .um-container { position: relative; z-index: 1; } .um-deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .um-deco__c { position: absolute; display: block; opacity: 0.9; } .um-deco__c .um-route__block { width: 100%; } .um-deco__c1 { width: 54px; right: 6%; top: 48px; } .um-deco__c2 { width: 44px; right: 2.5%; bottom: 14%; } .um-deco__c3 { width: 34px; left: 2%; bottom: 40px; } @media (max-width: 899px) { .um-deco__c1 { width: 40px; right: 4%; top: 20px; } .um-deco__c2, .um-deco__c3 { display: none; } } @media (prefers-reduced-motion: no-preference) { .um-deco__c { animation: um-float 7s ease-in-out infinite alternate; } .um-deco__c2 { animation-delay: -2.5s; } .um-deco__c3 { animation-delay: -5s; } } /* Mucho más que robots: áreas */ .um-areas { background: linear-gradient(180deg, var(--um-tint-purple) 0%, var(--um-surface) 100%); } .um-areas__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--um-s2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); } .um-area { position: relative; display: grid; align-content: start; gap: 0.5rem; padding: var(--um-s3); border-radius: var(--um-r-card); background: var(--um-surface); border: 1px solid var(--um-line); border-bottom: 4px solid var(--c); transition: transform var(--um-t), box-shadow var(--um-t); } .um-area:hover { transform: translateY(-4px); box-shadow: var(--um-shadow-hover); } .um-area__icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 0.25rem; border-radius: 14px; background: var(--c); color: var(--c-on); box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.18); } .um-area__icon svg { width: 26px; height: 26px; } .um-area h3 { font-size: var(--um-fs-18); line-height: 1.25; } .um-area p { margin: 0; font-size: var(--um-fs-16); color: var(--um-ink-soft); } .um-areas__cta { margin-top: var(--um-s4); } /* Inscripciones abiertas: fondo azul suave en vez de blanco plano */ .um-courses-band { background: linear-gradient(180deg, var(--um-tint-blue) 0%, var(--um-bg) 100%); } .um-courses-band .um-course { box-shadow: 0 2px 0 var(--um-line); } /* Presencial y Colegios: paneles con ilustración */ .um-places { background: var(--um-surface); } .um-panel--art { position: relative; overflow: hidden; grid-template-columns: 1fr; } .um-panel--art .um-panel__body { position: relative; z-index: 1; display: grid; gap: var(--um-s2); align-content: start; justify-items: start; } .um-panel__art { position: absolute; right: -18px; bottom: -18px; width: 150px; height: auto; opacity: 0.95; transform: rotate(-6deg); } .um-panel--cyan { background: linear-gradient(135deg, var(--um-tint-cyan) 0%, #CDEEF8 100%); } .um-panel--purple { background: linear-gradient(135deg, var(--um-tint-purple) 0%, #DCD2F6 100%); } @media (min-width: 600px) { .um-panel--art .um-panel__body { padding-right: 120px; } .um-panel__art { width: 180px; right: -10px; bottom: -10px; } } @media (max-width: 599px) { .um-panel--art { padding-bottom: 130px; } .um-panel__art { width: 130px; } } /* Profes: fondo verde suave */ .um-team-band { background: linear-gradient(180deg, var(--um-tint-green) 0%, var(--um-surface) 100%); } @media (max-width: 599px) { .um-areas__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } .um-area { padding: var(--um-s2); gap: 0.375rem; } .um-area__icon { width: 42px; height: 42px; border-radius: 12px; } .um-area__icon svg { width: 22px; height: 22px; } .um-area h3 { font-size: var(--um-fs-16); } .um-area p { font-size: var(--um-fs-14); } } /* ============================================================ Página de curso: pestañas y datos al lado */ .um-course-body { padding-top: var(--um-s5); background: linear-gradient(180deg, var(--um-tint-blue) 0%, var(--um-bg) 320px); } .um-course-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--um-s4); align-items: start; } @media (min-width: 1024px) { .um-course-layout { grid-template-columns: minmax(0, 1fr) 340px; grid-template-areas: "main aside"; } .um-course-main { grid-area: main; } .um-course-aside { grid-area: aside; position: sticky; top: 92px; } } /* Tarjeta "Datos del curso" */ .um-facts-card { padding: var(--um-s3); border-top: 4px solid var(--um-blue); display: grid; gap: var(--um-s2); } .um-facts-card .um-h3 { font-size: var(--um-fs-18); } .um-facts-list { margin: 0; display: grid; } .um-facts-list > div { display: flex; align-items: center; justify-content: space-between; gap: var(--um-s2); padding: 0.625rem 0; border-bottom: 1px solid var(--um-line); } .um-facts-list > div:last-child { border-bottom: 0; } .um-facts-list dt { display: flex; align-items: center; gap: 0.625rem; color: var(--um-ink-soft); } .um-facts-list dd { margin: 0; font-weight: 700; color: var(--um-navy); text-align: right; } .um-facts-list__icon { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--c-tint); color: var(--c-ink); flex: none; } .um-facts-list__icon svg { width: 17px; height: 17px; } .um-facts-card__buy { display: grid; gap: 0.625rem; padding-top: var(--um-s1); } .um-facts-card__buy .um-price { font-size: var(--um-fs-28); } @media (max-width: 1023px) { /* En celular y tableta: datos en dos columnas, sin repetir los botones (están en el hero y en la barra fija). */ .um-facts-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--um-s2); } .um-facts-list > div { display: grid; justify-content: start; gap: 0.25rem; } .um-facts-list dd { text-align: left; } .um-facts-card__buy { display: none; } } /* Pestañas */ .um-xtabs { display: flex; gap: 0.375rem; margin-bottom: var(--um-s3); padding: 6px; border-radius: var(--um-r-card); background: var(--um-surface); border: 1px solid var(--um-line); overflow-x: auto; scrollbar-width: none; } .um-xtabs::-webkit-scrollbar { display: none; } .um-xtabs__tab { --c: var(--um-blue); display: inline-flex; align-items: center; gap: 0.5rem; flex: 1 0 auto; justify-content: center; min-height: 48px; padding: 0.5rem 1rem; border-radius: 14px; color: var(--um-ink-soft); font-weight: 600; text-decoration: none; white-space: nowrap; transition: background var(--um-t), color var(--um-t); } .um-xtabs__tab:nth-child(2) { --c: var(--um-purple); } .um-xtabs__tab:nth-child(3) { --c: var(--um-green); } .um-xtabs__tab:nth-child(4) { --c: var(--um-red); } .um-xtabs__tab svg { width: 18px; height: 18px; } .um-xtabs__tab:hover { background: var(--um-bg); color: var(--um-navy); } .um-xtabs__tab[aria-selected="true"] { background: var(--c); color: #fff; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.18); } .um-xtabs__n { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; background: var(--um-bg); color: var(--um-navy); font-size: 0.8125rem; } .um-xtabs__tab[aria-selected="true"] .um-xtabs__n { background: rgba(255, 255, 255, 0.25); color: #fff; } .um-xtabs__panel { padding: var(--um-s4); border-radius: var(--um-r-card); background: var(--um-surface); border: 1px solid var(--um-line); } .um-xtabs__panel + .um-xtabs__panel { margin-top: var(--um-s3); } html.um-js [data-um-tabs] .um-xtabs__panel[hidden] { display: none; } html.um-js [data-um-tabs] .um-xtabs__panel + .um-xtabs__panel { margin-top: 0; } .um-xtabs__title { margin-bottom: var(--um-s2); } .um-xtabs__title:not(:first-child) { margin-top: var(--um-s4); } @media (max-width: 599px) { .um-xtabs__panel { padding: var(--um-s3) var(--um-s2); } .um-xtabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; } .um-xtabs__tab { padding-inline: 0.5rem; min-height: 44px; } } /* "Leer todo" en descripciones largas */ .um-more.is-clamped { position: relative; max-height: 22rem; overflow: hidden; } .um-more.is-clamped::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 7rem; background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--um-surface)); } .um-more__btn { margin-top: var(--um-s2); } /* Desplegables: qué logrará, para quién es, qué necesita */ .um-folds { display: grid; gap: 0.75rem; margin-top: var(--um-s4); } .um-fold { border: 1px solid var(--um-line); border-left: 4px solid var(--c); border-radius: var(--um-r-control); background: var(--um-surface); } .um-fold summary { display: flex; align-items: center; gap: 0.75rem; min-height: 60px; padding: 0.75rem var(--um-s2); cursor: pointer; list-style: none; font-weight: 700; color: var(--um-navy); } .um-fold summary::-webkit-details-marker { display: none; } .um-fold__icon { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--c-tint); color: var(--c-ink); flex: none; } .um-fold__icon svg { width: 19px; height: 19px; } .um-fold__title { flex: 1; font-family: var(--um-font-display); font-size: var(--um-fs-18); } .um-fold__count { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 13px; background: var(--c-tint); color: var(--c-ink); font-size: 0.8125rem; } .um-fold summary > svg { width: 20px; height: 20px; color: var(--um-ink-soft); transition: transform var(--um-t); } .um-fold[open] summary > svg { transform: rotate(180deg); } .um-fold .um-checks { margin: 0; padding: 0 var(--um-s2) var(--um-s3) calc(var(--um-s2) + 48px); } .um-fold .um-checks svg { color: var(--c-ink); } @media (max-width: 599px) { .um-fold .um-checks { padding-left: var(--um-s2); } } .um-syllabus summary .um-small { white-space: nowrap; } /* ============================================================ Blog */ .um-blog { background: linear-gradient(180deg, var(--um-tint-cyan) 0%, var(--um-bg) 420px); } .um-post-card__media { position: relative; aspect-ratio: 16 / 10; } .um-post-card__media img { transition: transform 0.5s ease; } .um-post-card:hover .um-post-card__media img { transform: scale(1.05); } .um-post-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; } .um-post-card__title { font-size: var(--um-fs-22); line-height: 1.2; } .um-post-card__excerpt { margin: 0; color: var(--um-ink-soft); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .um-post-card__more { margin-top: auto; font-weight: 700; text-decoration: none; color: var(--um-blue-ink); } .um-post-card__more:hover { text-decoration: underline; } .um-blog__featured { margin-bottom: var(--um-s4); } .um-post-card--featured .um-post-card__title { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem); } @media (min-width: 900px) { .um-post-card--featured { display: grid; grid-template-columns: 1.15fr 1fr; } .um-post-card--featured .um-post-card__media { aspect-ratio: auto; min-height: 360px; } .um-post-card--featured .um-post-card__body { justify-content: center; padding: var(--um-s5); } } .um-pager { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--um-s5); } .um-pager .page-numbers { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 0.875rem; border-radius: var(--um-r-control); border: 1.5px solid var(--um-line); background: var(--um-surface); color: var(--um-navy); font-weight: 600; text-decoration: none; } .um-pager .page-numbers.current { background: var(--um-navy); border-color: var(--um-navy); color: #fff; } /* Artículo */ .um-article__head { padding-block: var(--um-s4) var(--um-s5); background: linear-gradient(180deg, var(--um-tint-cyan) 0%, var(--um-surface) 100%); } .um-article__container { max-width: 820px; } .um-article__cat { margin-top: var(--um-s3); text-decoration: none; } .um-article__title { margin-top: var(--um-s2); font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); } .um-article__meta { display: flex; align-items: center; gap: 0.75rem; margin-top: var(--um-s3); line-height: 1.3; } .um-article__avatar { width: 44px; height: 44px; border-radius: 50%; } .um-article__hero { margin-top: calc(-1 * var(--um-s3)); } .um-article__figure { position: relative; margin: 0; border-radius: var(--um-r-card); box-shadow: 0 20px 50px rgba(10, 31, 68, 0.15); aspect-ratio: 16 / 9; } .um-article__body { margin-top: var(--um-s5); font-size: var(--um-fs-18); line-height: 1.7; } .um-article__body img { border-radius: var(--um-r-control); height: auto; } .um-article__body :is(h2, h3) { margin-top: var(--um-s5); margin-bottom: var(--um-s2); } .um-article__share { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: var(--um-s5); padding-top: var(--um-s3); border-top: 1px solid var(--um-line); } .um-article__share > span { margin-right: auto; } .um-article__cta { display: grid; grid-template-columns: auto 1fr; gap: var(--um-s2); margin-block: var(--um-s5) var(--um-section-y); padding: var(--um-s4); border-radius: var(--um-r-card); background: var(--c-tint); border-left: 6px solid var(--c); } .um-article__cta p { margin: 0.5rem 0 var(--um-s2); } @media (max-width: 599px) { .um-article__cta { grid-template-columns: 1fr; padding: var(--um-s3); } .um-article__body { font-size: var(--um-fs-16); } } .um-article__meta img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; } /* ============================================================ Interacción: cubos vivos, robot que sube, tarjetas 3D * umake-front.js, sección 9. Todo se apaga con "reducir movimiento". */ /* Cubos: flotan más (subir, bajar y girar). La capa interna (.um-route__block) además se desplaza con el scroll (profundidad) y con el mouse, vía --px / --py / --pr. */ @keyframes um-float { 0% { transform: translate3d(0, 0, 0) rotate(0deg); } 50% { transform: translate3d(6px, -26px, 0) rotate(8deg); } 100% { transform: translate3d(-4px, -8px, 0) rotate(-6deg); } } @media (prefers-reduced-motion: no-preference) { .um-hero__cube, .um-deco__c { animation: um-float 5.5s ease-in-out infinite alternate; } .um-hero__cube--b, .um-deco__c2 { animation-duration: 6.5s; animation-delay: -2s; } .um-hero__cube--c, .um-deco__c3 { animation-duration: 4.8s; animation-delay: -3.5s; } :is(.um-hero__cube, .um-deco__c) > .um-route__block { transform: translate3d(var(--px, 0px), var(--py, 0px), 0) rotate(var(--pr, 0deg)); will-change: transform; } } .um-deco__c { opacity: 1; filter: drop-shadow(0 10px 14px rgba(10, 31, 68, 0.18)); } .um-hero__cube { filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.35)); } /* Robot que sube los bloques de la trayectoria */ .um-climb { position: relative; } .um-climber { display: none; } @media (prefers-reduced-motion: no-preference) { html.um-js .um-climber { display: block; position: absolute; z-index: 3; left: 0; top: 0; width: 64px; height: 64px; pointer-events: none; transform: translate3d(var(--cx, 0px), var(--cy, 0px), 0) rotate(var(--cr, 0deg)); transform-origin: 50% 100%; filter: drop-shadow(0 8px 10px rgba(10, 31, 68, 0.25)); will-change: transform; } html.um-js .um-climber.is-hop { animation: um-wiggle 0.5s ease; } } @media (min-width: 900px) { html.um-js .um-climber { width: 84px; height: 84px; } } @keyframes um-wiggle { 50% { scale: 1.08 0.92; } } /* Tarjetas que se inclinan hacia el mouse (solo computador) */ .um-tilt { transform-style: preserve-3d; } .um-tilt.is-tilting { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px) !important; transition: transform 0.12s ease-out !important; box-shadow: 0 18px 40px rgba(10, 31, 68, 0.16); } .um-tilt.is-tilting::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, 0.35), transparent 55%); } .um-tilt { position: relative; } /* 10 áreas: 5 columnas en computadores grandes */ @media (min-width: 1100px) { .um-areas__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } } /* ============================================================ Celular: barra inferior tipo app y menú nuevo */ /* Barra inferior (menos de 1024 px). 4 accesos; el activo con su color. */ .um-tabbar { display: none; } @media (max-width: 1023px) { body.um { --um-tabbar-h: calc(68px + env(safe-area-inset-bottom, 0px)); padding-bottom: var(--um-tabbar-h); } .um-tabbar { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr); height: var(--um-tabbar-h); padding: 6px 6px env(safe-area-inset-bottom, 0px); background: rgba(255, 255, 255, 0.96); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--um-line); box-shadow: 0 -8px 24px rgba(10, 31, 68, 0.08); } .um-tabbar::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 3px; background: linear-gradient(90deg, var(--um-yellow) 0 16.6%, var(--um-red) 16.6% 33.3%, var(--um-blue) 33.3% 50%, var(--um-purple) 50% 66.6%, var(--um-cyan) 66.6% 83.3%, var(--um-green) 83.3%); } .um-tabbar__item { display: grid; justify-items: center; align-content: center; gap: 3px; min-height: 56px; border-radius: 14px; color: var(--um-ink-soft); font-size: 0.75rem; font-weight: 600; text-decoration: none; -webkit-tap-highlight-color: transparent; } .um-tabbar__icon { display: grid; place-items: center; width: 48px; height: 30px; border-radius: 15px; transition: background var(--um-t), transform var(--um-t); } .um-tabbar__icon svg { width: 22px; height: 22px; } .um-tabbar__item[aria-current="page"] { color: var(--um-navy); } .um-tabbar__item[aria-current="page"] .um-tabbar__icon { background: var(--c); color: var(--c-on); } .um-tabbar__item:active .um-tabbar__icon { transform: scale(0.9); } /* WhatsApp flotante: sin sesión ya está en la barra; con sesión flota encima de ella. */ body:not(.logged-in) .um-wa { display: none; } .um-wa { bottom: calc(var(--um-tabbar-h) + 14px); } /* Página de curso: la barra de compra va encima de la barra inferior. */ .um-buybar { bottom: var(--um-tabbar-h); } body.um-has-buybar { padding-bottom: calc(var(--um-tabbar-h) + 76px); } body.um-has-buybar .um-wa { bottom: calc(var(--um-tabbar-h) + 90px); } /* El menú del encabezado ya no repite "Entrar" / "Empieza aquí": están en la barra. */ .grecaptcha-badge { bottom: calc(var(--um-tabbar-h) + 88px) !important; } } /* Botón hamburguesa que se convierte en ✕ */ .um-header__menu { position: relative; transition: background var(--um-t), border-color var(--um-t); } .um-header__menu > span:not(.screen-reader-text) { position: absolute; inset: 0; display: grid; place-items: center; transition: transform 0.25s ease, opacity 0.2s ease; } .um-header__menu-close { opacity: 0; transform: rotate(-90deg) scale(0.6); } .um-header__menu[aria-expanded="true"] { background: var(--um-navy); border-color: var(--um-navy); color: #fff; } .um-header__menu[aria-expanded="true"] .um-header__menu-open { opacity: 0; transform: rotate(90deg) scale(0.6); } .um-header__menu[aria-expanded="true"] .um-header__menu-close { opacity: 1; transform: none; } /* Menú de celular: panel que baja, opciones grandes con icono de color */ .um-mnav { position: fixed; left: 0; right: 0; top: 68px; bottom: 0; z-index: 70; overflow-y: auto; padding-block: var(--um-s2) calc(var(--um-tabbar-h, 0px) + var(--um-s4)); background: var(--um-surface); box-shadow: 0 20px 40px rgba(10, 31, 68, 0.15); } .um-mnav:not([hidden]) { animation: um-drawer 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); } @keyframes um-drawer { from { opacity: 0; transform: translateY(-12px); } } .um-mnav ul { display: grid; gap: 0.5rem; } .um-mnav li { animation: um-drawer-item 0.35s ease both; animation-delay: calc(var(--i, 0) * 45ms + 60ms); } @keyframes um-drawer-item { from { opacity: 0; transform: translateX(-14px); } } .um-mnav li a { display: flex; align-items: center; gap: 0.875rem; min-height: 60px; padding: 0.5rem 0.875rem; border: 1px solid var(--um-line); border-radius: var(--um-r-control); font-size: var(--um-fs-18); font-weight: 700; } .um-mnav li a > svg { width: 20px; height: 20px; margin-left: auto; color: var(--um-ink-soft); transform: rotate(-90deg); } .um-mnav li a[aria-current="page"] { border-color: var(--c); background: var(--c-tint); color: var(--um-navy); } .um-mnav__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--c); color: var(--c-on); box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.18); flex: none; } .um-mnav__icon svg { width: 22px; height: 22px; } .um-mnav__actions { margin-top: var(--um-s3); } .um-mnav__contact { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--um-s3); padding-top: var(--um-s3); border-top: 1px solid var(--um-line); } .um-mnav__contact a { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0 1rem; border-radius: var(--um-r-chip); background: var(--um-bg); color: var(--um-navy); font-weight: 600; text-decoration: none; } .um-mnav__contact svg { width: 18px; height: 18px; } html.um-menu-open { overflow: hidden; } /* Con el menú abierto el encabezado no usa desenfoque: si lo usa, el panel fijo se mide dentro de él y no se ve. */ html.um-menu-open .um-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--um-surface); } @media (prefers-reduced-motion: reduce) { .um-mnav:not([hidden]), .um-mnav li { animation: none; } } /* ============================================================ Carrito y pago (C4) */ .um-shop { background: linear-gradient(180deg, var(--um-tint-blue) 0%, var(--um-bg) 360px); padding-top: var(--um-s5); } .um-shop__title { margin: var(--um-s4) 0 var(--um-s3); } .um-shop__help { display: flex; align-items: center; gap: 0.5rem; margin-top: var(--um-s4); } .um-shop__help svg { width: 16px; height: 16px; } /* Pasos */ .um-steps-bar { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 0.5rem; } .um-steps-bar li { display: flex; align-items: center; gap: 0.5rem; color: var(--um-ink-soft); font-weight: 600; } .um-steps-bar li:not(:last-child)::after { content: ""; width: clamp(16px, 6vw, 64px); height: 3px; border-radius: 2px; background: var(--um-line); margin-left: 0.25rem; } .um-steps-bar li.is-done:not(:last-child)::after { background: var(--um-green); } .um-steps-bar__n { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--um-surface); border: 2px solid var(--um-line); font-size: var(--um-fs-14); } .um-steps-bar__n svg { width: 18px; height: 18px; } .um-steps-bar .is-current { color: var(--um-navy); } .um-steps-bar .is-current .um-steps-bar__n { background: var(--um-blue); border-color: var(--um-blue); color: #fff; } .um-steps-bar .is-done .um-steps-bar__n { background: var(--um-green); border-color: var(--um-green); color: #fff; } @media (max-width: 599px) { .um-steps-bar li:not(.is-current) .um-steps-bar__label { display: none; } } /* Base de WooCommerce dentro del diseño */ .um-shop .woocommerce-notices-wrapper:empty { display: none; } .um-shop :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) { list-style: none; margin: 0 0 var(--um-s3); padding: var(--um-s2) var(--um-s3); border-radius: var(--um-r-control); background: var(--um-tint-blue); color: var(--um-navy); border: 0; } .um-shop .woocommerce-error { background: var(--um-tint-red); } .um-shop .woocommerce-message { background: var(--um-tint-green); } .um-shop :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before { display: none; } .um-shop :is(.woocommerce-message, .woocommerce-info) .button { float: right; margin-left: var(--um-s2); } .um-shop :where(.button, button[type="submit"], #place_order, .checkout-button) { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 48px; padding: 0.75rem 1.5rem; border-radius: var(--um-r-control); border: 2px solid var(--um-blue); background: var(--um-blue); color: #fff; font-family: var(--um-font-body); font-size: var(--um-fs-16); font-weight: 600; text-decoration: none; text-transform: none; cursor: pointer; } .um-shop :where(.button, button[type="submit"], #place_order, .checkout-button):hover { background: var(--um-blue-ink); border-color: var(--um-blue-ink); color: #fff; } .um-shop :is(.button, button)[disabled] { opacity: 0.5; cursor: not-allowed; } .um-shop input[type="text"], .um-shop input[type="email"], .um-shop input[type="tel"], .um-shop input[type="password"], .um-shop select, .um-shop textarea, .um-shop .select2-selection { width: 100%; min-height: 48px; padding: 0.625rem 0.875rem; border: 1.5px solid var(--um-line); border-radius: var(--um-r-control); background: var(--um-surface); font-family: var(--um-font-body); font-size: var(--um-fs-16); color: var(--um-ink); } .um-shop input:focus, .um-shop select:focus { outline: none; border-color: var(--um-blue); box-shadow: 0 0 0 4px var(--um-tint-blue); } .um-shop .select2-container .select2-selection--single { height: 48px; display: flex; align-items: center; } .um-shop .select2-container--default .select2-selection--single .select2-selection__arrow { height: 46px; } .um-shop .form-row { margin: 0 0 var(--um-s2); padding: 0; } .um-shop .form-row label { display: block; margin-bottom: 0.375rem; font-weight: 600; } .um-shop .form-row .required { color: var(--um-red-ink); text-decoration: none; } .um-shop .form-row .optional { color: var(--um-ink-soft); font-weight: 400; font-size: var(--um-fs-14); } .um-shop .form-row .description { display: block; margin-top: 0.375rem; font-size: var(--um-fs-14); color: var(--um-ink-soft); } .um-shop .woocommerce-invalid input { border-color: var(--um-red); } .um-shop table { width: 100%; border-collapse: collapse; } .um-shop .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* Carrito: tarjetas por curso + resumen al lado */ .um-shop--step1 .um-shop__body > .woocommerce { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--um-s4); align-items: start; } @media (min-width: 1024px) { .um-shop--step1 .um-shop__body > .woocommerce { grid-template-columns: minmax(0, 1fr) 360px; } .um-shop--step1 .woocommerce-notices-wrapper { grid-column: 1 / -1; } } .um-shop .woocommerce-cart-form { margin: 0; } .um-shop table.cart thead { display: none; } .um-shop table.cart, .um-shop table.cart tbody { display: block; } .um-shop table.cart tr.cart_item { position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; grid-template-areas: "img name remove" "img price remove"; gap: 0.25rem var(--um-s2); align-items: center; margin-bottom: var(--um-s2); padding: var(--um-s2); border-radius: var(--um-r-card); background: var(--um-surface); border: 1px solid var(--um-line); } .um-shop table.cart td { display: block; padding: 0; border: 0; } .um-shop table.cart td::before { display: none; } .um-shop table.cart .product-thumbnail { grid-area: img; } .um-shop table.cart .product-thumbnail img { width: 112px; height: 72px; object-fit: cover; border-radius: 10px; } .um-shop table.cart .product-name { grid-area: name; font-family: var(--um-font-display); font-size: var(--um-fs-18); font-weight: 700; } .um-shop table.cart .product-name a { color: var(--um-navy); text-decoration: none; } .um-shop table.cart .product-price { display: none; } .um-shop table.cart .product-subtotal { grid-area: price; font-weight: 700; color: var(--um-navy); } .um-shop table.cart .product-quantity { display: none; } .um-shop table.cart .product-remove { grid-area: remove; } .um-shop table.cart a.remove { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--um-bg); color: var(--um-ink-soft) !important; font-size: 22px; text-decoration: none; } .um-shop table.cart a.remove:hover { background: var(--um-tint-red); color: var(--um-red-ink) !important; } .um-shop table.cart td.actions { display: block; padding: var(--um-s2) 0 0; } .um-shop table.cart td.actions .coupon { display: flex; gap: 0.5rem; flex-wrap: wrap; } .um-shop table.cart td.actions .coupon label { display: none; } .um-shop table.cart td.actions .coupon input { flex: 1; min-width: 180px; width: auto; } .um-shop table.cart td.actions .coupon .button { background: var(--um-surface); color: var(--um-navy); border-color: var(--um-line); } .um-shop table.cart td.actions [name="update_cart"] { display: none; } .um-shop .cart-collaterals .cart_totals, .um-shop #order_review { padding: var(--um-s3); border-radius: var(--um-r-card); background: var(--um-surface); border: 1px solid var(--um-line); border-top: 4px solid var(--um-blue); } .um-shop .cart_totals h2 { font-size: var(--um-fs-22); margin-bottom: var(--um-s2); } .um-shop :is(.cart_totals, #order_review) table th, .um-shop :is(.cart_totals, #order_review) table td { padding: 0.75rem 0; border-bottom: 1px solid var(--um-line); text-align: left; vertical-align: top; } .um-shop :is(.cart_totals, #order_review) table td { text-align: right; } .um-shop :is(.cart_totals, #order_review) .order-total :is(th, td) { border-bottom: 0; font-size: var(--um-fs-22); font-family: var(--um-font-display); color: var(--um-navy); } .um-shop .wc-proceed-to-checkout { margin-top: var(--um-s2); } .um-shop .wc-proceed-to-checkout .checkout-button { width: 100%; min-height: 56px; font-size: var(--um-fs-18); } @media (min-width: 1024px) { .um-shop .cart-collaterals { position: sticky; top: 92px; } } /* Pago: datos a la izquierda, resumen fijo a la derecha */ .um-shop form.checkout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--um-s4); align-items: start; } @media (min-width: 1024px) { .um-shop form.checkout { grid-template-columns: minmax(0, 1fr) 400px; grid-template-areas: "details heading" "details review"; } .um-shop #customer_details { grid-area: details; } .um-shop #order_review_heading { grid-area: heading; align-self: end; } .um-shop #order_review { grid-area: review; position: sticky; top: 92px; } } .um-shop #customer_details { padding: var(--um-s4); border-radius: var(--um-r-card); background: var(--um-surface); border: 1px solid var(--um-line); } .um-shop #customer_details :is(.col-1, .col-2) { width: auto; float: none; } .um-shop #customer_details h3 { font-size: var(--um-fs-22); margin-bottom: var(--um-s3); } .um-shop .woocommerce-billing-fields__field-wrapper { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--um-s2); } @media (min-width: 600px) { .um-shop .woocommerce-billing-fields__field-wrapper { grid-template-columns: 1fr 1fr; } .um-shop .woocommerce-billing-fields__field-wrapper .form-row-wide { grid-column: 1 / -1; } } .um-shop #order_review_heading { font-size: var(--um-fs-22); margin: 0; } .um-shop #order_review .product-name { text-align: left; } .um-shop #order_review thead { display: none; } .um-shop #payment { margin-top: var(--um-s3); background: none; border-radius: 0; } .um-shop #payment ul.payment_methods { list-style: none; margin: 0 0 var(--um-s2); padding: 0; border: 0; } .um-shop #payment ul.payment_methods li { padding: var(--um-s2); border: 1.5px solid var(--um-line); border-radius: var(--um-r-control); margin-bottom: 0.5rem; } .um-shop #payment .payment_box { margin-top: 0.5rem; padding: 0.75rem; border-radius: 10px; background: var(--um-bg); font-size: var(--um-fs-14); } .um-shop #payment .payment_box::before { display: none; } .um-shop #place_order { width: 100%; min-height: 56px; font-size: var(--um-fs-18); } .um-shop .woocommerce-privacy-policy-text { font-size: var(--um-fs-14); color: var(--um-ink-soft); } .um-shop .woocommerce-form-coupon-toggle .woocommerce-info { background: var(--um-surface); border: 1px dashed var(--um-line); } .um-shop .woocommerce-form-coupon { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--um-s3); padding: var(--um-s2); border-radius: var(--um-r-control); background: var(--um-surface); border: 1px solid var(--um-line); } .um-shop .woocommerce-form-coupon p { margin: 0; } .um-shop .woocommerce-form-coupon .form-row-first { flex: 1; min-width: 180px; } /* Confirmación */ .um-shop--step3 .woocommerce-order { padding: var(--um-s4); border-radius: var(--um-r-card); background: var(--um-surface); border: 1px solid var(--um-line); border-top: 4px solid var(--um-green); } .um-shop--step3 .woocommerce-thankyou-order-received { font-family: var(--um-font-display); font-size: var(--um-fs-22); color: var(--um-green-ink); } .um-shop--step3 ul.order_details { list-style: none; margin: var(--um-s3) 0; padding: 0; display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } .um-shop--step3 ul.order_details li { padding: var(--um-s2); border-radius: var(--um-r-control); background: var(--um-bg); font-size: var(--um-fs-14); } .um-shop--step3 ul.order_details li strong { display: block; font-size: var(--um-fs-16); color: var(--um-navy); } .um-empty--cart { justify-items: center; text-align: center; padding: var(--um-s6) var(--um-s3); } .um-empty--cart img { width: 120px; } .um-shop--step1 .um-shop__body > .woocommerce > .um-empty { grid-column: 1 / -1; justify-self: center; width: min(100%, 560px); } .um-shop .includes_tax { display: block; font-family: var(--um-font-body); font-size: var(--um-fs-14); font-weight: 400; color: var(--um-ink-soft); } .um-shop__help { display: block; } .um-shop__help svg { display: inline-block; vertical-align: -3px; margin-right: 0.25rem; } /* ============================================================ Páginas institucionales */ /* 404 */ .um-404 { background: linear-gradient(180deg, var(--um-tint-yellow) 0%, var(--um-bg) 100%); min-height: 60vh; display: grid; align-items: center; } .um-404__inner { display: grid; justify-items: center; text-align: center; gap: var(--um-s2); } .um-404__inner .um-lead { max-width: 52ch; } .um-404__art { display: flex; align-items: center; gap: var(--um-s2); } .um-404__n { font-family: var(--um-font-display); font-weight: 800; font-size: clamp(5rem, 3rem + 10vw, 10rem); line-height: 1; color: var(--um-navy); } .um-404__art img { width: clamp(90px, 60px + 8vw, 150px); height: auto; } @media (prefers-reduced-motion: no-preference) { .um-404__art img { animation: um-login-hop 2.4s ease-in-out infinite; } } @keyframes um-login-hop { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-22px) rotate(-6deg); } } .um-404__actions { justify-content: center; } /* Páginas de texto */ .um-textpage { background: linear-gradient(180deg, var(--um-tint-cyan) 0%, var(--um-bg) 320px); } /* Nosotros */ .um-about-hero__art { display: grid; place-items: center; min-height: 340px; } .um-about-hero__iso { display: block; width: min(60%, 240px); filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.35)); } .um-about-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)) !important; } ol.um-stages { list-style: none; margin: 0; padding: 0; } .um-stages .um-pillar { grid-template-columns: 1fr; align-content: start; } .um-stages .um-pillar .um-route__block { width: 64px; grid-row: auto; margin-bottom: var(--um-s1); } @media (min-width: 900px) { .um-stages { grid-template-columns: repeat(4, 1fr); align-items: end; } } /* Contacto */ .um-contact { background: linear-gradient(180deg, var(--um-tint-cyan) 0%, var(--um-bg) 420px); } .um-contact__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--um-s4); align-items: start; } @media (min-width: 1024px) { .um-contact__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } } .um-contact__cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; } .um-contact__cards a { display: flex; align-items: center; gap: var(--um-s2); padding: var(--um-s2); border-radius: var(--um-r-card); background: var(--um-surface); border: 1px solid var(--um-line); border-left: 4px solid var(--c); color: var(--um-navy); text-decoration: none; transition: transform var(--um-t), box-shadow var(--um-t); } .um-contact__cards a:hover { transform: translateX(4px); box-shadow: var(--um-shadow-hover); } .um-contact__cards a > span:last-child, .um-contact__hours > div { display: grid; gap: 0.125rem; min-width: 0; } .um-contact__cards a > span:last-child span { color: var(--um-ink-soft); overflow-wrap: anywhere; } .um-contact__hours { display: flex; gap: var(--um-s2); margin-top: 0.75rem; padding: var(--um-s2); border-radius: var(--um-r-card); background: var(--c-tint); } .um-contact__hours span { color: var(--um-navy); } .um-contact__map { margin-top: var(--um-s5); border-radius: var(--um-r-card); overflow: hidden; border: 1px solid var(--um-line); box-shadow: 0 10px 30px rgba(10, 31, 68, 0.08); } .um-contact__map iframe { display: block; width: 100%; height: 360px; border: 0; } .um-leadform .um-field { align-content: start; } /* ============================================================ Opiniones (A3) */ .um-reviews { display: grid; gap: var(--um-s3); margin-bottom: var(--um-s4); } .um-reviews__summary { display: flex; align-items: center; gap: var(--um-s2); } .um-reviews__avg { font-family: var(--um-font-display); font-size: var(--um-fs-48); line-height: 1; color: var(--um-navy); } .um-reviews__summary > div { display: grid; gap: 0.25rem; } .um-stars { display: inline-flex; gap: 2px; } .um-stars__s svg { width: 18px; height: 18px; color: var(--um-line); fill: currentColor; } .um-stars__s.is-on svg { color: var(--um-yellow); } .um-reviews__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; } .um-review { padding: var(--um-s2) var(--um-s3); border-radius: var(--um-r-control); background: var(--um-bg); } .um-review__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; } .um-review p { margin: 0.5rem 0 0; } .um-review__title { font-weight: 700; } .um-review-form { padding: var(--um-s3); border-top: 4px solid var(--um-yellow); } /* Estrellas para calificar: radios de 5 a 1 en orden inverso, se pintan hasta la elegida */ .um-rate { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; margin: 0; padding: 0; border: 0; } .um-rate legend { width: 100%; margin-bottom: 0.5rem; font-weight: 600; float: left; } .um-rate input { position: absolute; opacity: 0; width: 1px; height: 1px; } .um-rate label { cursor: pointer; padding: 4px; border-radius: 10px; } .um-rate label svg { width: 34px; height: 34px; color: var(--um-line); fill: currentColor; transition: color var(--um-t), transform var(--um-t); } .um-rate label:hover svg, .um-rate label:hover ~ label svg, .um-rate input:checked ~ label svg { color: var(--um-yellow); } .um-rate label:hover svg { transform: scale(1.15); } .um-rate input:focus-visible + label { outline: 3px solid var(--um-blue); outline-offset: 2px; } /* Página pública del certificado */ body.um-cert-page { margin: 0; background: linear-gradient(180deg, var(--um-tint-green) 0%, var(--um-bg) 420px); } .um-cert-page__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--um-s2); max-width: var(--um-max); margin: 0 auto; padding: var(--um-s2) var(--um-gutter); } .um-cert-page__bar img { height: 32px; width: auto; } .um-cert-page__main { display: grid; gap: var(--um-s3); justify-items: start; padding-block: var(--um-s3) var(--um-s6); } .um-cert-page__card { width: 100%; padding: var(--um-s2); border-radius: var(--um-r-card); background: var(--um-surface); border: 1px solid var(--um-line); box-shadow: 0 20px 50px rgba(10, 31, 68, 0.12); } .um-cert-page__card canvas { max-width: 100%; height: auto !important; } .um-cert-page__share { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; } .um-cert-page .um-article__cta { width: 100%; margin: 0; } /* D4: fondo sólido con texto encima que cumple AA (4,5:1). Rojo y verde del logo no alcanzan con blanco: se usa su variante oscura. */ .um-c-red { --c-solid: var(--um-red-ink); } .um-c-green { --c-solid: var(--um-green-ink); } /* Eventos */ .um-events { background: linear-gradient(180deg, var(--um-tint-purple) 0%, var(--um-bg) 380px); } .um-events__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; max-width: 860px; } .um-event a { display: flex; gap: var(--um-s3); align-items: center; padding: var(--um-s2); border-radius: var(--um-r-card); background: var(--um-surface); border: 1px solid var(--um-line); color: var(--um-navy); text-decoration: none; transition: transform var(--um-t), box-shadow var(--um-t); } .um-event a:hover { transform: translateY(-2px); box-shadow: var(--um-shadow-hover); } .um-event__date { display: grid; place-items: center; flex: none; width: 76px; height: 76px; border-radius: 16px; background: var(--um-purple); color: #fff; font-size: var(--um-fs-14); text-transform: uppercase; line-height: 1.1; } .um-event__date strong { font-family: var(--um-font-display); font-size: var(--um-fs-28); } .um-event.is-past .um-event__date { background: var(--um-line); color: var(--um-ink-soft); } .um-event__body { display: grid; gap: 0.375rem; justify-items: start; } .um-event-single { max-width: 820px; display: grid; gap: var(--um-s2); justify-items: start; margin-top: var(--um-s2); } .um-event-single .um-facts { margin: 0; } /* Pie en celular: marca arriba y las 3 columnas de enlaces lado a lado (sin espacio sobrante) */ @media (max-width: 899px) { .um-footer { padding-block: var(--um-s5) var(--um-s3); } .um-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--um-s4) var(--um-s2); } .um-footer__grid > div:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 var(--um-s2); padding-bottom: var(--um-s3); border-bottom: 1px solid var(--um-line); } .um-footer__grid > div:first-child > p { grid-column: 1 / -1; margin-bottom: 0; } .um-footer__grid > div:first-child .um-footer__social { grid-column: 2; grid-row: 1; margin-top: 0; } .um-footer__title { font-size: var(--um-fs-14); margin-bottom: 0.75rem; } .um-footer ul { gap: 0.625rem; font-size: var(--um-fs-14); } .um-footer__legal { margin-top: var(--um-s4); justify-content: center; text-align: center; } .um-footer__links { width: 100%; justify-content: center; gap: 0.625rem 1.25rem; } } /* Dirección de la sede con enlace a Google Maps (Umake_Front::place). */ .um-place { display: inline-flex; align-items: flex-start; gap: 0.4rem; color: inherit; font-weight: 500; text-decoration: none; } .um-place svg { flex: none; width: 18px; height: 18px; margin-top: 0.15em; color: var(--um-cyan-ink); } .um-place:hover span { text-decoration: underline; } .um-place--footer { margin-top: var(--um-s2); color: var(--um-ink-soft); } /* Nosotros: formas de aprender (en vivo, grabados, presencial, colegios); toda la tarjeta es enlace. */ .um-about-modes__title { margin: var(--um-s6) 0 var(--um-s3); text-align: center; } .um-about-modes { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)) !important; } .um-about-modes .um-area { position: relative; } .um-about-modes h3 a { color: inherit; text-decoration: none; } .um-about-modes h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .um-about-modes h3 a:focus-visible { outline: none; } .um-about-modes .um-area:has(a:focus-visible) { outline: 3px solid var(--um-blue); outline-offset: 3px; } /* ------------------------------------------------------------ Mi cuenta, carrito y compra rápida */ .um-nav a:nth-child(7) { --dot: var(--um-green); } /* Carrito en el encabezado (solo si tiene cursos) */ .um-header__cart { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; margin-left: auto; border-radius: 50%; color: var(--um-navy); transition: background var(--um-t); } .um-header__cart:hover { background: var(--um-tint-blue); } .um-header__cart svg { width: 22px; height: 22px; } .um-header__cart-n { position: absolute; top: 2px; right: 0; min-width: 20px; height: 20px; padding: 0 5px; display: grid; place-items: center; border-radius: var(--um-r-chip); background: var(--um-blue); color: #fff; font-size: 0.75rem; font-weight: 700; line-height: 1; } .um-header__cart + .um-header__cta { margin-left: var(--um-s1); } @media (max-width: 599px) { .um-header__cart { margin-right: var(--um-s1); } .um-header__cart + .um-header__cta + .um-header__menu { margin-left: 0; } } @media (min-width: 1024px) { .um-nav + .um-header__cart { margin-left: var(--um-s2); } } /* Menú "Mi cuenta" */ .um-acct { position: relative; } .um-acct > summary { list-style: none; cursor: pointer; gap: 0.375rem; } .um-acct > summary::-webkit-details-marker { display: none; } .um-acct > summary svg { width: 18px; height: 18px; } .um-acct > summary svg:last-child { width: 16px; height: 16px; transition: transform var(--um-t); } .um-acct[open] > summary svg:last-child { transform: rotate(180deg); } .um-acct__menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 70; display: grid; min-width: 250px; padding: var(--um-s1); background: var(--um-surface); border: 1px solid var(--um-line); border-radius: 16px; box-shadow: 0 18px 40px rgba(10, 31, 68, 0.16); } .um-acct__who { margin: 0; padding: 0.5rem 0.75rem 0.625rem; border-bottom: 1px solid var(--um-line); margin-bottom: 0.25rem; font-size: var(--um-fs-14); color: var(--um-ink-soft); } .um-acct__who strong { color: var(--um-navy); } .um-acct__menu a { display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0.75rem; border-radius: 10px; color: var(--um-navy); font-weight: 500; font-size: 0.9375rem; text-decoration: none; } .um-acct__menu a:hover, .um-acct__menu a:focus-visible { background: var(--um-tint-blue); color: var(--um-blue-ink); } .um-acct__menu a svg { width: 18px; height: 18px; color: var(--um-blue-ink); } .um-acct__menu .um-acct__out { margin-top: 0.25rem; border-top: 1px solid var(--um-line); border-radius: 0 0 10px 10px; } .um-mnav__label { margin: var(--um-s2) 0 0.25rem; font-size: var(--um-fs-14); font-weight: 700; color: var(--um-ink-soft); } .um-mnav__acct { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin-bottom: var(--um-s1); } .um-mnav__acct a { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem; border: 1px solid var(--um-line); border-radius: var(--um-r-control); color: var(--um-navy); font-weight: 600; font-size: var(--um-fs-14); text-decoration: none; } .um-mnav__acct a svg { flex: none; width: 18px; height: 18px; color: var(--um-blue-ink); } /* Botones de la tarjeta de curso: ver, comprar y añadir al carrito */ .um-course__actions { display: flex; gap: 0.5rem; margin-top: 0.875rem; } .um-course__actions .um-btn { flex: 1 1 auto; padding-inline: 0.75rem; } .um-btn--icon { flex: 0 0 44px !important; width: 44px; padding: 0 !important; } .um-btn--icon svg { width: 20px; height: 20px; } .um-btn--icon.is-in { color: var(--um-green-ink); border-color: var(--um-green); background: var(--um-tint-green); } /* Aviso "quedó en tu carrito" */ .um-toast { position: fixed; z-index: 80; left: 50%; bottom: calc(var(--um-tabbar-h, 0px) + 16px); transform: translateX(-50%); display: flex; align-items: center; gap: 0.75rem; width: min(560px, calc(100% - 24px)); padding: 0.75rem 0.75rem 0.75rem 1rem; background: var(--um-navy); color: #fff; border-radius: 16px; box-shadow: 0 18px 40px rgba(10, 31, 68, 0.3); animation: um-toast-in 0.3s ease both; } .um-toast > svg { flex: none; width: 22px; height: 22px; color: var(--um-yellow); } .um-toast p { margin: 0; flex: 1; font-size: var(--um-fs-14); line-height: 1.4; } .um-toast .um-btn { flex: none; } .um-toast__close { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: #fff; cursor: pointer; } .um-toast__close svg { width: 18px; height: 18px; } @keyframes um-toast-in { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } } @media (prefers-reduced-motion: reduce) { .um-toast { animation: none; } } /* ============================================================ Curso por grupos: elegir tamaño y horario (umake-core) */ .um-offer { padding-block: var(--um-s4) var(--um-s5); } .um-offer__card { background: var(--um-surface); border: 1px solid var(--um-line); border-top: 4px solid var(--um-blue); border-radius: var(--um-r-card); padding: var(--um-s4); box-shadow: var(--um-shadow-hover); } .um-offer__head { margin-bottom: var(--um-s3); } .um-offer__head .um-h3 { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.25rem; } .um-offer__head .um-h3 svg { width: 24px; height: 24px; color: var(--um-blue); } .um-offer__head .um-small { margin: 0; } .um-offer .um-alert { margin: 0 0 var(--um-s3); } .um-offer__step { border: 0; padding: 0; margin: 0 0 var(--um-s3); min-width: 0; } .um-offer__step legend { display: flex; align-items: center; gap: 0.625rem; padding: 0; margin-bottom: var(--um-s2); font-family: var(--um-font-display); font-weight: 700; font-size: var(--um-fs-18); color: var(--um-navy); } .um-offer__n { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--um-navy); color: var(--um-on-dark); font-size: var(--um-fs-14); } .um-offer__opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--um-s2); } .um-offer__opts--wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); } .um-offer__opt { --c: var(--um-blue); --c-tint: var(--um-tint-blue); position: relative; display: block; cursor: pointer; } .um-offer__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; } .um-offer__opt-body { display: grid; gap: 0.25rem; height: 100%; padding: var(--um-s2) var(--um-s3); border: 2px solid var(--um-line); border-radius: var(--um-r-control); background: var(--um-surface); color: var(--um-ink); transition: border-color var(--um-t), background var(--um-t); } .um-offer__opt-body strong { color: var(--um-navy); font-size: var(--um-fs-16); } .um-offer__opt-body > span { display: flex; align-items: center; gap: 0.375rem; } .um-offer__opt-body svg { width: 16px; height: 16px; flex: none; color: var(--c); } .um-offer__opt:hover .um-offer__opt-body { border-color: var(--c); } .um-offer__opt input:checked + .um-offer__opt-body { border-color: var(--c); background: var(--c-tint); box-shadow: inset 0 0 0 1px var(--c); } .um-offer__opt input:focus-visible + .um-offer__opt-body { outline: 3px solid var(--um-blue); outline-offset: 2px; } .um-offer__opt input:disabled + .um-offer__opt-body { opacity: 0.55; cursor: not-allowed; border-style: dashed; } .um-offer__opt input:disabled + .um-offer__opt-body:hover { border-color: var(--um-line); } .um-offer__price { font-family: var(--um-font-display); font-weight: 800; font-size: var(--um-fs-22); color: var(--um-navy); } .um-offer__state { color: var(--um-red-ink); font-weight: 600; font-size: var(--um-fs-14); } .um-offer__state:empty { display: none; } .um-offer__total { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--um-s3); padding-top: var(--um-s3); border-top: 1px solid var(--um-line); } .um-offer__total > div:first-child { display: grid; } .um-offer__fine { margin: var(--um-s2) 0 0; } .um-offer__mine { margin: 0 0 var(--um-s3); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--um-s2) var(--um-s3); } .um-offer__mine dt { font-size: var(--um-fs-14); color: var(--um-ink-soft); } .um-offer__mine dd { margin: 0; font-weight: 700; color: var(--um-navy); } .um-price__from { font-family: var(--um-font-body); font-size: 0.6em; font-weight: 600; color: var(--um-ink-soft); } @media (max-width: 599px) { .um-offer__card { padding: var(--um-s3); } .um-offer__total .um-actions { width: 100%; } .um-offer__total .um-btn { flex: 1 1 100%; justify-content: center; } }