/* ============================================================ SISE · Instituto Superior — Hoja de estilos Tipografías: Barlow Condensed (títulos) / Barlow (textos) Color primario: #FF0E49 ============================================================ */ /* ---------- Tokens ---------- */ :root{ --red:#FF0E49; --red-600:#E00040; --red-700:#C00036; --red-soft:#FFE4EC; --terciario:#FAD44F; /* tercer color de marca */ --ink:#12131A; --ink-2:#2A2C36; --body:#5C6270; --muted:#8A90A0; --white:#fff; --bg:#F4F4F4; /* fondo general de la página */ --bg-soft:#F6F7FA; --line:#E7E9F0; --blue-1:#0B4FD6; --blue-2:#1E86F0; --blue-3:#37C4F5; --shell:1240px; --gut:24px; --r-sm:12px; --r-md:18px; --r-lg:26px; --r-xl:34px; --shadow-sm:0 4px 16px rgba(18,19,26,.06); --shadow-md:0 14px 40px rgba(18,19,26,.10); --shadow-lg:0 26px 70px rgba(18,19,26,.16); --header-h:78px; --ease:cubic-bezier(.22,.61,.36,1); } /* ---------- Reset ---------- */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} @keyframes pageIn{from{opacity:0}to{opacity:1}} @keyframes riseIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}} body{ animation:pageIn .5s var(--ease); margin:0; font-family:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif; font-size:17px; line-height:1.65; color:var(--body); background:var(--bg); overflow-x:hidden; } img{max-width:100%;display:block} /* Sin esto, un display de clase (p. ej. .btn{display:inline-flex}) pisa la regla del navegador y el elemento se sigue viendo. */ [hidden]{display:none!important} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;border:0;background:none;cursor:pointer} ul{margin:0;padding:0;list-style:none} h1,h2,h3,h4{ font-family:'Barlow Condensed',Impact,sans-serif; font-weight:800; color:var(--ink); line-height:1.02; letter-spacing:.005em; margin:0; } p{margin:0} :focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:4px} .shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut)} .skip-link{ position:absolute;left:-9999px;top:0;z-index:999; background:var(--red);color:#fff;padding:12px 20px;border-radius:0 0 10px 0;font-weight:700; } .skip-link:focus{left:0} /* Visible solo para lectores de pantalla */ .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } /* Los iconos inyectados desde icons.js llenan su contenedor */ [data-ico]{display:inline-flex;align-items:center;justify-content:center} [data-ico] > svg{width:100%;height:100%;display:block} .floater [data-ico]{width:26px;height:26px} .mod-opt [data-ico]{width:21px;height:21px;flex:none} /* ---------- Botones ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; font-family:'Barlow',sans-serif;font-weight:700;font-size:15px; padding:13px 28px;border-radius:10px;cursor:pointer; transition:transform .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease),color .2s var(--ease); white-space:nowrap; } .btn-pill{border-radius:999px} .btn-primary{background:var(--red);color:#fff;box-shadow:0 10px 26px rgba(255,14,73,.32)} .btn-primary:hover{background:var(--red-600);transform:translateY(-2px);box-shadow:0 14px 32px rgba(255,14,73,.42)} /* Fantasma: solo perfil y letra, sin relleno. Para acciones de apoyo que no deben competir con el boton de accion principal. */ .btn-ghost{border:1.5px solid var(--red);color:var(--red);background:transparent} .btn-ghost:hover{background:var(--red);color:#fff;transform:translateY(-2px)} .btn-outline-light{border:1.5px solid rgba(255,255,255,.55);color:#fff;background:rgba(255,255,255,.06);backdrop-filter:blur(6px)} .btn-outline-light:hover{background:var(--red);border-color:var(--red)} .btn-block{width:100%} .ico-arrow{width:18px;height:18px;flex:none;transition:transform .25s var(--ease)} .btn:hover .ico-arrow{transform:translate(3px,-3px)} /* ---------- Header (barra flotante tipo píldora) ---------- */ .site-header{ position:fixed;inset:26px 0 auto 0;z-index:100; transition:inset .3s var(--ease),transform .34s var(--ease),opacity .28s var(--ease); will-change:transform; } /* Se aparta hacia arriba al bajar. El 100% no basta: hay que subir ademas el hueco que deja el inset, si no asoma el borde inferior. */ .site-header.is-hidden{ transform:translateY(calc(-100% - 40px)); opacity:0;pointer-events:none; } .site-header.is-stuck{inset:10px 0 auto 0} .header-shell{width:100%;max-width:1288px;margin-inline:auto;padding-inline:var(--gut)} /* Sobre el banner no hay panel: ni borde, ni fondo, ni desenfoque. Lo que sostiene el texto es el degradado del borde superior de la foto (.hero-veil). El panel sólido vuelve al hacer scroll. */ .nav-pill{ position:relative; display:flex;align-items:center;gap:clamp(12px,1.8vw,28px); padding:11px 12px 11px 10px;border-radius:999px; border:1.5px solid transparent; background:transparent; transition:background .3s var(--ease),border-color .3s var(--ease), padding .3s var(--ease),backdrop-filter .3s var(--ease); } .main-nav a,.nav-link{text-shadow:0 1px 6px rgba(0,0,0,.45)} /* Aire propio delante de Empleabilidad y del icono del menu: el gap de la pastilla lo reparten todos los elementos por igual y la separacion contra el boton se quedaba en el minimo. Va con condicion de ancho a proposito: 1181px es justo donde deja de valer la regla que esconde los enlaces. Por debajo no hay barra que separar -manda el reparto de Empleabilidad y la hamburguesa a la derecha- y estos margenes solo estorbarian. */ @media (min-width:1181px){ .btn-empleo{margin-left:clamp(14px,1.5vw,24px)} .burger{margin-left:8px} } /* Al salir del banner sí hay barra: ahí no hay foto que respetar */ .site-header.is-stuck .nav-pill{ background:rgba(14,15,20,.92); border-color:rgba(255,255,255,.16); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); /* El relleno holgado va mas abajo, con su condicion de ancho. */ padding:8px 12px 8px 26px; } .site-header.is-stuck .nav-link{text-shadow:none} /* Con el panel pintado se nota mucho mas lo justo que va el contenido contra el borde, asi que la barra se ensancha un poco. Tiene que ir despues de la regla de arriba: misma especificidad, y alli el relleno estrecho ganaba por estar mas abajo en la hoja. */ @media (min-width:1181px){ .site-header.is-stuck .nav-pill{padding:10px 18px 10px 28px} } /* Logo real (SVG del diseño): las letras toman currentColor, el chevron conserva el rojo de marca #FF0C47 */ .brand{display:flex;align-items:center;flex:none;color:#fff} .brand-logo{display:block;width:auto;height:27px;aspect-ratio:96/24} .brand-logo > svg{width:100%;height:100%;display:block} .main-nav{display:flex;align-items:center;gap:clamp(12px,1.8vw,30px);margin-inline:auto} .nav-link{ display:inline-flex;align-items:center;gap:6px; font-family:inherit;font-size:15.5px;font-weight:500;color:#fff; position:relative;padding:5px 0;white-space:nowrap;cursor:pointer; transition:color .2s var(--ease); } .nav-link::after{ content:'';position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--red); transition:width .28s var(--ease); } .nav-link:hover{color:var(--red)} .nav-link:hover::after{width:100%} .nav-link .caret{width:15px;height:15px;flex:none;transition:transform .25s var(--ease)} /* ---- Dropdown ---- */ .nav-item{position:relative} /* El panel de carreras es más ancho que su enlace: se centra sobre la píldora entera, por eso el enlace deja de ser el punto de anclaje. */ .nav-item.has-mega{position:static} .nav-item:hover .nav-link,.nav-item.is-open .nav-link{color:var(--red)} .nav-item:hover .nav-link::after,.nav-item.is-open .nav-link::after{width:100%} .nav-item:hover .caret,.nav-item.is-open .caret{transform:rotate(180deg)} .drop{ position:absolute;top:calc(100% + 18px);left:50%;translate:-50% 0; min-width:258px;padding:10px;border-radius:18px; background:rgba(20,21,28,.94); backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.14); box-shadow:0 22px 50px rgba(0,0,0,.4); opacity:0;visibility:hidden;transform:translateY(-8px); transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s; z-index:5; } /* puente invisible para que el ratón llegue al panel */ .drop::before{content:'';position:absolute;left:0;right:0;top:-18px;height:18px} .nav-item:hover .drop,.nav-item.is-open .drop,.nav-item:focus-within .drop{ opacity:1;visibility:visible;transform:translateY(0); } .drop a{ display:block;padding:10px 14px;border-radius:11px; font-size:14.5px;font-weight:500;color:rgba(255,255,255,.86);white-space:nowrap; transition:background .18s var(--ease),color .18s var(--ease),padding-left .18s var(--ease); } .drop a:hover{background:rgba(255,255,255,.1);color:#fff;padding-left:19px} .drop a.is-cta{ margin-top:6px;background:var(--red);color:#fff;font-weight:600;text-align:center; } .drop a.is-cta:hover{background:var(--red-600);padding-left:14px} /* ---- Panel de carreras por áreas ---- A diferencia del resto de desplegables, este va en claro: panel blanco, título de área en rojo con su icono y las carreras en gris oscuro, tal cual el diseño. */ .drop-mega{ width:min(1100px,calc(100vw - 32px)); display:grid;grid-template-columns:repeat(4,1fr); gap:30px 24px;padding:30px 28px 34px; border-radius:20px; background:#fff; /* El menu lleva sombra de texto para sostenerse sobre la foto del banner. Aqui el fondo es blanco: esa sombra solo deja un halo gris. */ border:1px solid rgba(15,17,26,.07); box-shadow:0 26px 64px rgba(15,17,26,.17); backdrop-filter:none;-webkit-backdrop-filter:none; } .mega-area{ display:flex;align-items:center;gap:9px;margin:0 0 4px; font-family:'Barlow Condensed',sans-serif; font-size:19px;font-weight:700;line-height:1.2;color:var(--red); } .drop-mega .mega-area, .drop-mega .mega-col a{text-shadow:none} .mega-ico{display:block;width:20px;height:20px;flex:none} .mega-ico > svg{width:100%;height:100%;display:block} .drop-mega .mega-col a{ padding:7px 0;border-radius:0; font-size:13.5px;font-weight:400;line-height:1.35; color:var(--body);white-space:normal; } /* Idiomas: un solo grupo -> panel estrecho, una columna, bajo su botón. Hereda el fondo blanco de drop-mega pero sin el ancho de 1100px. */ .drop-mega.is-compact{ width:auto;min-width:224px; grid-template-columns:1fr; gap:0;padding:20px 22px 16px; } .drop-mega.is-compact .mega-col a{white-space:nowrap} .drop-mega .mega-col a:hover{ background:transparent;color:var(--red);padding-left:5px; } .btn-empleo{ display:inline-flex;align-items:center;gap:11px;flex:none; background:#fff;color:var(--ink);font-weight:600;font-size:15.5px; padding:13px 26px;border-radius:999px;white-space:nowrap; transition:background .22s var(--ease),transform .22s var(--ease),box-shadow .22s var(--ease); } /* Icono animado: hereda el color del botón */ .lottie{display:block;flex:none;line-height:0} .lottie svg{display:block;width:100%;height:100%;overflow:visible} .lottie svg path{stroke:currentColor!important} .lottie svg g[clip-path]{clip-path:none!important} .btn-empleo .lottie{width:24px;height:24px} /* El icono va en rojo aunque el texto sea oscuro: el Lottie hereda currentColor, así que se le da el suyo propio. */ .btn-empleo .lottie{color:var(--red)} /* Hover suave: la píldora no cambia de color, solo se levanta */ .btn-empleo:hover{background:#FFF3F6;transform:translateY(-2px);box-shadow:0 8px 22px rgba(18,19,26,.16)} .burger{position:relative;width:44px;height:44px;display:grid;place-content:center;border-radius:12px;flex:none;transition:background .2s} .burger:hover{background:rgba(255,255,255,.14)} .burger{color:#fff} .burger-abrir,.burger-cerrar{width:24px;height:24px;transition:opacity .2s var(--ease),transform .3s var(--ease)} .burger-cerrar{position:absolute;opacity:0;transform:rotate(-90deg)} .burger.is-open .burger-abrir{opacity:0;transform:rotate(90deg)} .burger.is-open .burger-cerrar{opacity:1;transform:rotate(0)} /* ============================================================ MENÚ DESPLEGADO (lo abre la hamburguesa) ============================================================ Hoja blanca a pantalla completa con el mapa del sitio. Sustituye al panel lateral por niveles: aquel existía para que 24 carreras y 33 cursos cupieran en una lista de móvil; aquí eso lo resuelve el buscador, y las columnas llevan a las páginas de cada sección. */ .site-menu{ position:fixed;inset:0;z-index:120;background:#fff; overflow-y:auto;overscroll-behavior:contain; opacity:0;visibility:hidden; /* La visibilidad se apaga DESPUÉS del fundido, pero se enciende al instante: si tarda, el foco no puede entrar en la hoja al abrir (no se puede enfocar lo que aún está oculto). */ transition:opacity .3s var(--ease),visibility 0s linear .3s; } .site-menu.is-open{ opacity:1;visibility:visible; transition:opacity .3s var(--ease),visibility 0s; } .sm-sheet{ position:relative;z-index:1;min-height:100%; display:flex;flex-direction:column; max-width:1180px;margin-inline:auto;padding:26px var(--gut) 24px; transform:translateY(-14px);transition:transform .38s var(--ease); } .site-menu.is-open .sm-sheet{transform:none} /* Chevrón de marca, muy tenue, detrás de todo. Cuelga de .sm-sheet y no de .site-menu: el menu tiene scroll propio, y un absoluto dentro de un contenedor con scroll se mide contra la ventana, no contra el contenido. Colgando del panel crece con el. */ .sm-deco{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none} /* Un absoluto pinta por encima de los hermanos sin posicionar, asi que el contenido necesita su propia capa para quedar delante. */ .sm-top,.sm-search,.sm-body,.sm-found,.sm-foot{position:relative;z-index:1} .sm-deco > span{position:absolute;display:block;aspect-ratio:67/71} /* El icono viene solo contorneado; aquí se quiere la silueta maciza. */ .sm-deco > span svg{width:100%;height:100%;display:block} .sm-deco > span svg path{fill:currentColor;stroke:none} /* Centrada y a toda la altura de la hoja. El alto manda y el ancho sale de la proporcion del icono; en pantallas estrechas eso la hace mas ancha que la ventana, y el overflow:hidden del contenedor la recorta por los lados, que es justo el efecto buscado. */ .sm-deco-1{ top:0;height:100%;width:auto; left:50%;transform:translateX(-50%); color:rgba(255,14,73,.075); } /* ---- Cabecera ---- */ .sm-top{ display:flex;align-items:center;justify-content:space-between;gap:20px; padding-bottom:20px;border-bottom:1.5px solid var(--red); } .sm-brand{display:inline-flex;flex-direction:column;gap:5px} .sm-brand-logo{display:block;width:clamp(112px,12vw,142px);color:var(--red)} .sm-brand-logo svg{width:100%;height:auto;display:block} .sm-brand-sub{ font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:11px; letter-spacing:.3em;text-transform:uppercase;color:var(--ink); } .menu-close{ width:46px;height:46px;flex:none;display:grid;place-content:center;border-radius:12px; color:var(--red);transition:background .2s var(--ease),transform .3s var(--ease); } .menu-close svg{width:26px;height:26px;display:block} .menu-close:hover{background:#FFF1F4;transform:rotate(90deg)} /* ---- Columnas ---- */ .sm-body{ flex:1;display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) minmax(196px,244px); gap:clamp(22px,3vw,46px);padding:clamp(28px,4vw,48px) 0; } /* display:contents deja que las tres columnas del