/* ===================================================================== REDISEÑO 2026 — "Editorial de Empoderamiento que respira" Se carga DESPUÉS de app.css y animaciones.css (sus reglas ganan). Porcelana cálida dominante · dorado mate (logro) · magenta = "siguiente paso" · grano global · brutalismo táctil medido · firma "marcador Aquí". Solo se anima transform/opacity. Todo respeta prefers-reduced-motion. ===================================================================== */ /* --------------------------------------------------------------------- 0. Grano global (lo más barato anti-plantilla) --------------------------------------------------------------------- */ body::after { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.05; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* --------------------------------------------------------------------- 1. Cambio de marca por temperatura (data-marca en ) --------------------------------------------------------------------- */ html { transition: none; } :root { --acento: var(--plum); --acento-2: var(--gold); --acento-marca: var(--magenta); } html[data-marca="yo-estoy-aqui"] { --acento: var(--burdeo); --acento-2: var(--gold); --acento-marca: var(--burdeo-2); } /* La transición de color vive en los elementos que usan --acento, no en :root */ .hero, .hero__titulo .fluido, .marcador-presencia, .cambio-marca__opcion { transition: color var(--transicion), background-color var(--transicion), background var(--transicion), box-shadow var(--transicion); } /* --------------------------------------------------------------------- 2. Firma: "marcador Aquí" — pin que viaja con el scroll --------------------------------------------------------------------- */ .marcador-presencia { position: fixed; left: clamp(0.6rem, 1.5vw, 1.4rem); top: calc(9vh + (var(--p, 0) * 78vh)); width: 13px; height: 13px; border-radius: 999px; background: var(--acento-marca); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento-marca) 22%, transparent), 0 0 22px var(--acento-marca); z-index: 95; pointer-events: none; } .marcador-presencia::before { content: ""; position: absolute; left: 50%; top: -78vh; width: 1px; height: 78vh; transform: translateX(-50%); background: linear-gradient(var(--acento-marca), transparent); opacity: 0.25; } html[data-marca="impulsate"] .marcador-presencia { background: var(--gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 22%, transparent), 0 0 22px var(--gold); } @media (max-width: 920px), (pointer: coarse), (prefers-reduced-motion: reduce) { .marcador-presencia { display: none; } } /* --------------------------------------------------------------------- 3. Botones — el magenta como único "siguiente paso" --------------------------------------------------------------------- */ .boton { border-radius: 0; /* brutalismo táctil: nada de 8px por defecto */ border-width: 1.5px; } .boton--pill { border-radius: 100px; } .boton--magenta { --boton-bg: var(--magenta); --boton-texto: var(--white); border-color: var(--magenta); } .boton--magenta:hover { box-shadow: 0 16px 34px -14px color-mix(in srgb, var(--magenta) 70%, transparent); } .boton--oro { --boton-bg: var(--gold); --boton-texto: var(--ink); border-color: var(--gold); } /* --------------------------------------------------------------------- 4. HÉROE — sección ancla oscura con malla + grano + titular fluido --------------------------------------------------------------------- */ .hero { position: relative; background: var(--plum-deep); color: var(--porcelain); overflow: hidden; isolation: isolate; border-bottom: none; } .hero__mesh { position: absolute; inset: 0; z-index: -2; pointer-events: none; } .hero__blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.55; will-change: transform; } .hero__blob--1 { width: 46vw; height: 46vw; left: -8vw; top: -10vw; background: var(--magenta); animation: flotar 11s ease-in-out infinite; } .hero__blob--2 { width: 38vw; height: 38vw; right: -6vw; top: 4vw; background: var(--gold); animation: flotar 14s ease-in-out infinite reverse; } .hero__blob--3 { width: 40vw; height: 40vw; left: 28vw; bottom: -18vw; background: var(--plum-080); animation: flotar 17s ease-in-out infinite; } .hero::before { /* velo de contraste para legibilidad del copy */ content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 90% at 30% 30%, color-mix(in srgb, var(--plum-deep) 70%, transparent), transparent 70%); pointer-events: none; } .hero__inner { position: relative; z-index: 2; } .hero__titulo { color: var(--porcelain); } .hero__titulo .fluido { background: linear-gradient(100deg, var(--gold-soft), var(--magenta) 45%, var(--gold) 90%); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: gradiente-mov 7s ease infinite; } .hero__plomo { color: color-mix(in srgb, var(--porcelain) 86%, transparent); } .hero .eyebrow { color: var(--gold-soft); } .hero__dato-num { color: var(--gold-soft); } .hero__dato-etq { color: color-mix(in srgb, var(--porcelain) 66%, transparent); } /* Subrayado SVG dibujado de la palabra clave */ .subrayado-svg { display: inline-block; position: relative; } .subrayado-svg svg { position: absolute; left: 0; bottom: -0.18em; width: 100%; height: 0.4em; overflow: visible; } .subrayado-svg path { fill: none; stroke: var(--gold); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; pathLength: 1; } [data-reveal].es-visible .subrayado-svg path { animation: dibujar-trazo 0.9s 0.3s ease forwards; } /* Conmutador de marca en el héroe */ .cambio-marca { display: inline-flex; gap: 0.25rem; padding: 0.3rem; border-radius: 100px; background: color-mix(in srgb, var(--porcelain) 12%, transparent); border: 1px solid color-mix(in srgb, var(--porcelain) 22%, transparent); margin-bottom: 1.6rem; } .cambio-marca__opcion { border: none; background: none; color: color-mix(in srgb, var(--porcelain) 78%, transparent); font-family: var(--fuente-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.5rem 1rem; border-radius: 100px; cursor: pointer; } .cambio-marca__opcion[aria-pressed="true"] { background: var(--acento-marca); color: var(--white); } /* Puertas de marca sobre fondo oscuro */ .hero .puerta { background: color-mix(in srgb, var(--porcelain) 8%, transparent); border: 1px solid color-mix(in srgb, var(--porcelain) 18%, transparent); color: var(--porcelain); border-radius: 0; backdrop-filter: blur(6px); } .hero .puerta__logo { filter: brightness(0) invert(1); opacity: 0.92; } .hero .puerta__lema { color: color-mix(in srgb, var(--porcelain) 70%, transparent); } .hero .puerta__flecha { color: var(--gold-soft); } .hero .puerta::before { background: var(--acento-marca); } /* --------------------------------------------------------------------- 5. Bento de propuesta de valor --------------------------------------------------------------------- */ .bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; } .bento__tile { position: relative; grid-column: span 2; background: var(--white); border: 1.5px solid var(--line); border-radius: 0; padding: 1.6rem; overflow: hidden; display: flex; flex-direction: column; gap: 0.7rem; min-height: 160px; } .bento__tile--ancho { grid-column: span 4; } .bento__tile--alto { grid-row: span 2; min-height: 340px; } .bento__tile--destacado { background: var(--plum-deep); color: var(--porcelain); border-color: transparent; } .bento__tile--destacado .bento__titulo { color: var(--porcelain); } .bento__tile--destacado .bento__txt { color: color-mix(in srgb, var(--porcelain) 80%, transparent); } .bento__kicker { font-family: var(--fuente-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--magenta); } .bento__tile--destacado .bento__kicker { color: var(--gold-soft); } .bento__titulo { font-size: var(--paso-1); line-height: 1.1; } .bento__txt { font-size: var(--paso--1); color: var(--texto-tenue); } .bento__num { font-family: var(--fuente-display); font-weight: 800; font-size: var(--paso-4); color: var(--gold); line-height: 1; margin-top: auto; } .bento__icono { color: var(--acento); } @media (max-width: 760px) { .bento { grid-template-columns: repeat(2, 1fr); } .bento__tile, .bento__tile--ancho, .bento__tile--alto { grid-column: span 2; grid-row: auto; min-height: 140px; } } /* --------------------------------------------------------------------- 6. Tarjeta de curso avanzada (glow al cursor + brutalista) --------------------------------------------------------------------- */ .tarjeta-curso { border-radius: 0; border-width: 1.5px; box-shadow: none; } .tarjeta-curso::after { /* glow que sigue al cursor (--x/--y los escribe JS) */ content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity var(--transicion); background: radial-gradient(220px circle at var(--x, 50%) var(--y, 0%), color-mix(in srgb, var(--marca) 22%, transparent), transparent 60%); pointer-events: none; } .tarjeta-curso:hover::after { opacity: 1; } .tarjeta-curso:hover { transform: translateY(-6px); box-shadow: 0 22px 48px -20px color-mix(in srgb, var(--marca) 60%, transparent); border-color: var(--marca); } .tarjeta-curso__media, .tarjeta-curso__cuerpo { position: relative; z-index: 1; } .tarjeta-curso__overlay { position: absolute; inset: 0; z-index: 2; } .tarjeta-curso__enlace { color: inherit; text-decoration: none; } .tarjeta-curso__enlace:hover { text-decoration: underline; text-decoration-color: var(--marca); } .tarjeta-curso__qv { position: absolute; top: 0.8rem; right: 0.8rem; z-index: 3; font-family: var(--fuente-mono); font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; background: color-mix(in srgb, var(--ink) 82%, transparent); color: var(--porcelain); border: none; padding: 0.42rem 0.7rem; cursor: pointer; opacity: 0; transform: translateY(-4px); transition: opacity var(--transicion), transform var(--transicion), background-color var(--transicion); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .tarjeta-curso:hover .tarjeta-curso__qv, .tarjeta-curso:focus-within .tarjeta-curso__qv { opacity: 1; transform: none; } .tarjeta-curso__qv:hover { background: var(--magenta); } @media (hover: none) { .tarjeta-curso__qv { opacity: 1; transform: none; } } .tarjeta-curso__media { border-radius: 0; } .tarjeta-curso__media img { transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); } .tarjeta-curso:hover .tarjeta-curso__media img { transform: scale(1.06); } .tarjeta-curso__chip { border-radius: 0; } /* Badge "financiable SENCE" */ .tarjeta-curso__sence { position: absolute; bottom: 0.8rem; left: 0.8rem; z-index: 2; font-family: var(--fuente-mono); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; background: var(--gold); color: var(--ink); padding: 0.3rem 0.6rem; } /* --------------------------------------------------------------------- 7. Marquee de sellos (reemplaza la franja estática) --------------------------------------------------------------------- */ .sellos-marquee { border-block: 1.5px solid var(--line); background: var(--porcelain-2); padding-block: 1.6rem; } .sellos-marquee .marquee__pista { gap: clamp(2.5rem, 6vw, 5rem); } .sellos-marquee img { height: clamp(30px, 5vw, 46px); width: auto; filter: grayscale(1); opacity: 0.6; transition: filter var(--transicion), opacity var(--transicion); } .sellos-marquee a:hover img, .sellos-marquee span:hover img { filter: grayscale(0); opacity: 1; } .sellos-marquee__rotulo { font-family: var(--fuente-mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--texto-tenue); white-space: nowrap; } /* --------------------------------------------------------------------- 8. Banda de stats --------------------------------------------------------------------- */ .stats { background: var(--plum-deep); color: var(--porcelain); } .stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } .stat { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.5rem 0; } .stat__num { font-family: var(--fuente-display); font-weight: 800; font-size: var(--paso-4); color: var(--gold-soft); line-height: 1; } .stat__etq { font-size: var(--paso--1); color: color-mix(in srgb, var(--porcelain) 72%, transparent); } @media (max-width: 700px) { .stats__grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; } } /* --------------------------------------------------------------------- 9. "Cómo funciona" — ruta de pasos --------------------------------------------------------------------- */ .ruta { position: relative; display: grid; gap: 1.4rem; } .ruta__paso { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: start; padding: 1.3rem 1.5rem; background: var(--white); border: 1.5px solid var(--line); } .ruta__num { width: 46px; height: 46px; display: grid; place-items: center; background: var(--acento); color: var(--white); font-family: var(--fuente-display); font-weight: 800; border-radius: 999px; box-shadow: 0 0 0 5px color-mix(in srgb, var(--acento) 16%, transparent); } .ruta__paso:nth-child(even) .ruta__num { background: var(--gold); color: var(--ink); box-shadow: 0 0 0 5px color-mix(in srgb, var(--gold) 20%, transparent); } .ruta__titulo { font-size: var(--paso-1); margin-bottom: 0.2rem; } .ruta__txt { font-size: var(--paso--1); color: var(--texto-tenue); } @media (min-width: 880px) { .ruta { grid-template-columns: 1fr 1fr; gap: 1.2rem 2.5rem; } .ruta__paso:nth-child(odd) { transform: translateY(0); } .ruta__paso:nth-child(even) { transform: translateY(2.2rem); } } /* --------------------------------------------------------------------- 10. Testimonios — carrusel scroll-snap --------------------------------------------------------------------- */ .testi__pista { display: flex; gap: 1.2rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; scrollbar-width: none; } .testi__pista::-webkit-scrollbar { display: none; } .testi__card { scroll-snap-align: start; flex: 0 0 min(420px, 85%); background: var(--white); border: 1.5px solid var(--line); padding: 1.8rem; display: flex; flex-direction: column; gap: 1.1rem; } .testi__quote { font-family: var(--fuente-display); font-size: var(--paso-1); line-height: 1.3; } .testi__quote::before { content: "“"; color: var(--gold); font-size: 1.4em; line-height: 0; vertical-align: -0.3em; margin-right: 0.1em; } .testi__pie { display: flex; align-items: center; gap: 0.8rem; margin-top: auto; } .testi__avatar { width: 46px; height: 46px; border-radius: 999px; background: linear-gradient(135deg, var(--plum), var(--magenta)); color: var(--gold-soft); display: grid; place-items: center; font-weight: 800; font-family: var(--fuente-display); } .testi__nombre { font-weight: 700; } .testi__rol { font-size: var(--paso--1); color: var(--texto-tenue); } /* --------------------------------------------------------------------- 11. CTA sticky "Postula con SENCE" (aparece tras el héroe) --------------------------------------------------------------------- */ .sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; background: var(--ink); color: var(--porcelain); padding: 0.85rem clamp(1rem, 4vw, 2rem); display: flex; align-items: center; justify-content: space-between; gap: 1rem; transform: translateY(110%); transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1); box-shadow: 0 -10px 30px -16px rgba(0, 0, 0, 0.5); } .sticky-cta.es-visible { transform: translateY(0); } .sticky-cta__txt { font-size: var(--paso--1); } .sticky-cta__txt strong { color: var(--gold-soft); } .sticky-cta__acciones { display: flex; gap: 0.6rem; flex-shrink: 0; } @media (min-width: 760px) { .sticky-cta { display: none; } } /* solo móvil */ /* --------------------------------------------------------------------- 12. FAQ (layout de 2 columnas) --------------------------------------------------------------------- */ .faq__grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; } .faq__intro { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 1rem; } @media (max-width: 860px) { .faq__grid { grid-template-columns: 1fr; } .faq__intro { position: static; } } /* --------------------------------------------------------------------- 13. Modal de retención --------------------------------------------------------------------- */ .modal-retencion__titulo { font-size: var(--paso-3); margin: 0.6rem 0 0.8rem; } .modal-retencion__texto { color: var(--texto-tenue); } .modal-retencion__acciones { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 1.6rem; } .modal-retencion__nota { font-size: 0.8rem; color: var(--texto-tenue); margin-top: 1rem; } /* Vista rápida de curso */ .qv .eyebrow { color: var(--magenta); } .qv__titulo { font-size: var(--paso-3); margin: 0.5rem 0 0.7rem; } .qv__resumen { color: var(--texto-tenue); font-size: var(--paso-1); } .qv__meta { list-style: none; padding: 0; display: grid; gap: 0.6rem; margin: 1.4rem 0; } .qv__meta li { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: 0.6rem; border-bottom: 1px dashed var(--line); } .qv__meta span { font-family: var(--fuente-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-tenue); } .qv__meta strong { font-family: var(--fuente-mono); } .qv__nota { font-size: var(--paso--1); color: var(--texto-tenue); background: var(--porcelain-2); padding: 0.8rem 1rem; border-left: 3px solid var(--gold); } .qv__acciones { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 1.4rem; } /* --------------------------------------------------------------------- 14. Stagger de revelado (CSP-safe, sin estilos inline): el contenedor lleva [data-stagger] y los hijos se escalonan por nth-child. --------------------------------------------------------------------- */ [data-stagger] > [data-reveal]:nth-child(2) { transition-delay: 70ms; } [data-stagger] > [data-reveal]:nth-child(3) { transition-delay: 140ms; } [data-stagger] > [data-reveal]:nth-child(4) { transition-delay: 210ms; } [data-stagger] > [data-reveal]:nth-child(5) { transition-delay: 280ms; } [data-stagger] > [data-reveal]:nth-child(6) { transition-delay: 350ms; } [data-stagger] > [data-reveal]:nth-child(7) { transition-delay: 420ms; } [data-stagger] > [data-reveal]:nth-child(8) { transition-delay: 490ms; } @media (prefers-reduced-motion: reduce) { [data-stagger] > [data-reveal] { transition-delay: 0ms !important; } } /* --------------------------------------------------------------------- 15. Quita el arco viejo del héroe claro --------------------------------------------------------------------- */ .hero__arco { display: none; } /* Encabezados de sección con más aire editorial */ .encabezado-seccion { display: flex; flex-direction: column; gap: 0.9rem; max-width: 40ch; margin-bottom: clamp(2rem, 4vw, 3.2rem); } .encabezado-seccion--centrado { margin-inline: auto; text-align: center; align-items: center; } /* Héroe: botón fantasma legible sobre fondo oscuro */ .hero .boton--fantasma { --boton-texto: var(--porcelain); border-color: color-mix(in srgb, var(--porcelain) 42%, transparent); } .hero .boton--fantasma:hover { border-color: var(--porcelain); background: color-mix(in srgb, var(--porcelain) 9%, transparent); } /* Centinela del héroe (para el CTA sticky) */ .centinela { display: block; height: 1px; } /* Cabecera del catálogo: título + filtros */ .catalogo__cabecera { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem 2rem; flex-wrap: wrap; margin-bottom: clamp(2rem, 4vw, 3rem); } .catalogo__cabecera .encabezado-seccion { margin-bottom: 0; } .filtro-chip:hover { border-color: var(--magenta); }