contenedor). Eso confina el position:sticky a esos ~121px y el header se va con el scroll. Volviéndolos display:contents desaparecen de la maquetación (sin quitar el header), y el header pasa a ser hijo directo del body: así el sticky abarca toda la página. */ #hs_cos_wrapper_header_v2, body > div:has(> #hs_cos_wrapper_header_v2) { display: contents; } .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.86); backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--color-borde); transition: box-shadow .3s, background .3s; } .site-header.scrolled { box-shadow: var(--shadow-sm); } /* Top bar: barra superior oscura (estilo sitio actual) con botones de acción */ .site-header__top { background: var(--color-gris-oscuro); } .site-header__top-inner { display: flex; align-items: stretch; justify-content: flex-end; gap: 0; min-height: 44px; } .site-header__top .nav__cta { height: 44px; margin: 0; padding: 0 22px; border-radius: 0; font-size: 13px; font-weight: 700; letter-spacing: .01em; box-shadow: none; transform: none; } .site-header__top .nav__cta:hover { transform: none; box-shadow: none; } .site-header__top .nav__cta:first-child { background: var(--color-corp); color: #fff; } .site-header__top .nav__cta:first-child:hover { background: var(--color-morado); } .site-header__top .nav__cta:last-child { background: transparent; color: #fff; } .site-header__top .nav__cta:last-child:hover { background: rgba(255,255,255,.14); } @media (max-width: 900px) { /* En móvil se alinean a la izquierda para que ambos queden visibles (a la derecha "Encuentra tu ruta" se sale de pantalla) */ .site-header__top-inner { justify-content: flex-start; } .site-header__top .nav__cta.desktop { display: inline-flex; flex: 0 0 auto; white-space: nowrap; padding: 0 14px; font-size: 12px; letter-spacing: 0; } } .nav { display: flex; align-items: center; gap: 28px; height: var(--header-h); } .nav__logo { display: flex; align-items: center; } .nav__logo img { height: 34px; width: auto; } .nav__menu { display: flex; align-items: center; gap: 26px; margin-left: auto; } .nav__menu a { font-size: 15px; font-weight: 600; color: var(--color-texto-dark); padding: 8px 0; position: relative; } .nav__menu a:hover { color: var(--color-corp); } .nav__item { position: relative; } .nav__item > button, .nav__item > .nav__item-link { background: none; border: none; font: inherit; font-size: 15px; font-weight: 600; color: var(--color-texto-dark); display: inline-flex; align-items: center; gap: 6px; padding: 8px 0; } .nav__item > button:hover, .nav__item > .nav__item-link:hover { color: var(--color-corp); } .nav__item .chev { width: 10px; height: 10px; transition: transform .25s; } .nav__item:hover .chev, .nav__item:focus-within .chev { transform: rotate(180deg); } /* Dropdown rutas */ .dropdown { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(8px); width: 360px; background: #fff; border: 1px solid var(--color-borde); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 12px; opacity: 0; visibility: hidden; transition: .25s var(--ease); } .nav__item:hover .dropdown, .nav__item:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .dropdown::before { content:""; position:absolute; top:-14px; left:0; right:0; height:14px; } .drop-route { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: var(--radius-md); transition: background .2s; } .drop-route:hover { background: var(--color-soft); } .drop-route__dot { width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 18px; } /* Íconos oficiales de ruta (PNG circular, color de fondo incluido) — reemplazan letras C/M/D/T */ .route-ico { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 50%; background: none !important; box-shadow: none !important; } .drop-route__dot.has-ico { background: none; padding: 0; } .drop-route__dot .route-ico { width: 38px; height: 38px; } .drop-route__t { display: block; font-weight: 700; color: var(--color-texto-dark); font-size: 15px; } .drop-route__d { display: block; margin-top: 2px; font-size: 13px; color: var(--color-gris); } .dropdown--community { width: 280px; } .drop-route--simple { padding: 14px 12px; } .dot--capital { background:#FFF21C; color:#2A0A4A; box-shadow: inset 0 0 0 2px rgba(42,10,74,.16); } /* amarillo de marca con anillo para legibilidad sobre blanco */ .dot--mercado { background:#330559; } .dot--digitalizacion { background:#FF2B5E; } .dot--talento { background:#00BD70; color:#06301D; } .nav__cta { margin-left: 4px; } .nav__cta + .nav__cta { margin-left: 0; } .nav__burger { display: none; margin-left: auto; background: none; border: none; width: 44px; height: 44px; } .nav__burger span { display:block; width: 24px; height: 2px; background: var(--color-texto-dark); margin: 5px auto; transition: .3s; } /* ===================== Hero ===================== */ .hero { position: relative; overflow: hidden; background: var(--ruta); } .hero::after { /* banda de color de ruta al pie */ content:""; position:absolute; inset:auto 0 0 0; height: 46%; background: var(--ruta); z-index:0; opacity:.0; } .hero__grid { display: grid; grid-template-columns: 1fr 1.08fr; gap: clamp(24px,4vw,64px); align-items: center; padding-block: clamp(40px, 4.5vw, 76px); position: relative; z-index: 2; } .hero__badge { display:inline-flex; align-items:center; gap:10px; background:#fff; border-radius: var(--radius-pill); padding: 8px 16px 8px 8px; box-shadow: var(--shadow-sm); font-weight:700; font-size:14px; color: var(--color-texto-dark); margin-bottom: 22px; } .hero__badge .rline { width: 30px; height: 30px; border-radius:50%; display:grid; place-items:center; color:#fff; font-family:var(--font-display); font-weight:800; } .hero__badge .rline.has-ico { background: none !important; } .hero__badge .rline .route-ico { width: 30px; height: 30px; } .hero__copy { align-self: center; } .hero h1 { font-size: var(--text-display); color: var(--ruta-ink); margin-bottom: 20px; max-width: 19ch; } .hero__sub { font-size: var(--text-lead); color: var(--ruta-ink); opacity: .82; max-width: 46ch; margin-bottom: 30px; } .hero__cta { display: flex; gap: 14px; flex-wrap: wrap; align-items:center; } /* CTAs legibles sobre el hero de color vibrante */ .hero .btn--ruta { background: var(--color-corp); color: #fff; } .hero .btn--ruta:hover { background: var(--color-morado); color: #fff; } .hero .btn--ghost { color: var(--ruta-ink); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ruta-ink) 38%, transparent); } .hero .btn--ghost:hover { background: var(--ruta-ink); color: var(--ruta); box-shadow: none; } /* Mercado: hero en morado profundo → CTA primario blanco para contraste */ body[data-ruta="mercado"] .hero .btn--ruta { background: #fff; color: #330559; } body[data-ruta="mercado"] .hero .btn--ruta:hover { background: #220A40; color: #fff; } /* Visual del hero: foto + líneas cruzadas */ .hero__visual { position: relative; aspect-ratio: 1/1; } .photo-frame { position: relative; z-index: 2; width: 100%; height: 100%; } .photo-frame__img { position: relative; z-index: 2; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); } .lines-svg { position: absolute; inset: -8% -10%; width: 120%; height: 116%; overflow: visible; pointer-events: none; } .lines-svg--back { z-index: 1; } .lines-svg--front { z-index: 3; } .route-line { fill: none; stroke-width: var(--linea-peso); stroke-linecap: round; stroke-linejoin: round; } .station { stroke: #fff; stroke-width: 4; } /* ---- Hero (hub + rutas): líneas full-bleed (de borde a borde) + caja del texto ---- */ .hero--framed { isolation: isolate; } .hero--framed .hero__lines { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .hero--framed .hero__lines svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; } .hero--framed .hero__lines .route-line { vector-effect: non-scaling-stroke; stroke-width: var(--linea-peso); } .hero--framed .hero__dot { position: absolute; width: var(--estacion); height: var(--estacion); border-radius: 50%; background: var(--ruta); box-shadow: 0 0 0 5px var(--c, #fff); transform: translate(-50%, -50%); } .hero--framed .hero__copy { background: rgba(255,255,255,.08); -webkit-backdrop-filter: blur(16px) saturate(115%); backdrop-filter: blur(16px) saturate(115%); border: 1px solid rgba(255,255,255,.22); box-shadow: var(--shadow-md); padding: clamp(28px, 3.2vw, 48px); } /* ---- Hero v3: 3 capas — fondo (mitad derecha, full-bleed) → líneas → personaje ---- */ .hero--framed { min-height: clamp(520px, 52vw, 640px); display: flex; align-items: center; } .hero--framed .hero__grid { width: 100%; } .hero__bg { position: absolute; inset: 0 0 0 50%; z-index: 0; overflow: hidden; } /* corte recto mitad y mitad */ .hero__bg img { width: 100%; height: 100%; object-fit: cover; display: block; } .hero__bg::after { content:""; position:absolute; inset:0; } /* sin degradado en desktop: borde recto */ .hero__lines { filter: drop-shadow(0 1px 2px rgba(0,0,0,.12)); } .hero__stn { fill:#fff; } .hero__character { /* busto (cintura arriba) anclado al borde inferior */ position: absolute; z-index: 2; bottom: 0; right: 9%; height: 84%; width: auto; max-width: 42%; object-fit: contain; object-position: bottom; pointer-events: none; filter: drop-shadow(0 10px 22px rgba(0,0,0,.20)); } @media (max-width: 900px){ .hero--framed { min-height: 580px; } .hero__bg { inset: 0; } /* fondo a todo el ancho */ .hero__bg::after { background: linear-gradient(180deg, var(--ruta) 0%, color-mix(in srgb,var(--ruta) 34%,transparent) 50%, transparent 100%); } .hero__character { right: 50%; transform: translateX(50%); height: 52%; max-width: 70%; } .hero--framed .hero__grid { align-items: flex-start; padding-top: 30px; } } /* ---- Sección con líneas full-bleed + caja de texto (descripción "por qué la ruta") ---- */ .section--lines { overflow: hidden; } .section--lines .section__lines { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .section--lines .section__lines svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; } .section--lines .section__lines .route-line { vector-effect: non-scaling-stroke; stroke-width: var(--linea-peso); } .section--lines .section__stn { fill:#fff; } .section--lines .split { position: relative; z-index: 1; } .section--lines .split__copy { background: #fff; border: 1px solid var(--color-borde); box-shadow: var(--shadow-md); padding: clamp(26px, 3vw, 44px); } /* dibujo animado de líneas */ .draw { stroke-dasharray: var(--len, 1200); stroke-dashoffset: var(--len, 1200); } .is-visible .draw { animation: draw 1.5s var(--ease) forwards; } .is-visible .draw.d2 { animation-delay:.18s } .is-visible .draw.d3{animation-delay:.36s} .is-visible .draw.d4{animation-delay:.54s} @keyframes draw { to { stroke-dashoffset: 0; } } .station-pop { transform: scale(0); transform-origin: center; transform-box: fill-box; } .is-visible .station-pop { animation: pop .5s var(--ease) forwards .9s; } @keyframes pop { 60%{transform:scale(1.25)} 100%{transform:scale(1)} } /* ===================== Reveal on scroll ===================== */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .reveal.is-visible { opacity: 1; transform: none; } .reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s} /* ===================== Sección: descripción del eje ===================== */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,5vw,72px); align-items: center; } .split__media { position: relative; aspect-ratio: 4/3.4; } .split__media .photo-frame__img { border-radius: var(--radius-xl); } .split h2 { font-size: var(--text-h2); margin: 16px 0 18px; max-width: 18ch; } .section-head { max-width: 640px; margin-bottom: clamp(34px, 4vw, 54px); } .section-head h2 { font-size: var(--text-h2); margin: 14px 0 14px; } .section-head.center { margin-inline: auto; text-align: center; } .section-head.center .eyebrow { justify-content: center; } /* ===================== Estaciones (cards de partners) ===================== */ .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .combo__inner.two { grid-template-columns: 1fr; } .combo__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } @media (max-width: 820px){ .combo__cards { grid-template-columns: 1fr; } } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } @media (max-width: 1080px){ .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px){ .grid-4 { grid-template-columns: 1fr; } } /* Estaciones: flex que respira (4/5/6 cards) — 3 por fila, última fila centrada */ .grid-stations { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; } .grid-stations > .station-card { flex: 1 1 300px; max-width: 352px; } @media (max-width: 980px){ .grid-stations > .station-card { flex-basis: 44%; max-width: none; } } @media (max-width: 560px){ .grid-stations > .station-card { flex-basis: 100%; } } /* Variante para rutas con 4 estaciones: 2 columnas x 2 filas */ .grid-stations--2col > .station-card { flex-basis: calc(50% - 12px); max-width: 520px; } @media (max-width: 560px){ .grid-stations--2col > .station-card { flex-basis: 100%; max-width: none; } } /* ===== Estaciones con fondo de color de ruta vibrante ===== */ .estaciones-band { background: var(--ruta); } .estaciones-band .eyebrow { color: var(--ruta-ink); } .estaciones-band .eyebrow::before { background: var(--ruta-ink); } .estaciones-band .section-head h2 { color: var(--ruta-ink); } .estaciones-band .section-head .lead { color: var(--ruta-ink); opacity: .85; } .estaciones-band .station-card__num { color: var(--ruta); } .estaciones-band .tag { background: var(--ruta); color: var(--ruta-ink); min-height: 54px; } .estaciones-band .station-card .link-more { color: var(--ruta-deep); } /* Simetría entre cajas: filas a misma altura, botón al fondo */ .estaciones-band .station-card { align-self: stretch; } .estaciones-band .station-card h3 { min-height: 2.2em; } .estaciones-band .station-card .link-more { margin-top: auto; } .station-card { background: #fff; border: 1px solid var(--color-borde); border-radius: var(--radius-lg); padding: 26px; display: flex; flex-direction: column; gap: 12px; position: relative; overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; } .station-card::before { content:""; position:absolute; top:0; left:0; right:0; height: 5px; background: var(--ruta); transform: scaleX(0); transform-origin:left; transition: transform .4s var(--ease); } .station-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; } .station-card:hover::before { transform: scaleX(1); } .station-card__logo { height: 46px; display: flex; align-items: center; } .station-card__logo .ph { height: 40px; min-width: 120px; border-radius: var(--radius-sm); background: var(--color-soft-2); display:grid; place-items:center; color: var(--color-gris-claro); font-size:12px; font-weight:700; } .station-card__logo img { max-height: 40px; max-width: 160px; width: auto; object-fit: contain; } .tag { align-self: flex-start; display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; line-height: 1.3; color: var(--ruta-deep); background: var(--ruta-soft); padding: 6px 18px; border-radius: var(--radius-pill); } .station-card h3 { font-size: var(--text-h3); } .station-card p { font-size: var(--text-sm); color: var(--color-gris); } .station-card .link-more { margin-top: auto; padding-top: 8px; color: var(--ruta-deep); } .station-card__num { display: none; } .station-card > * { position: relative; z-index: 1; } /* ===================== Estaciones de combinación ===================== */ .combo { background: var(--color-corp); color:#fff; border-radius: var(--radius-xl); overflow: hidden; position: relative; } .combo__inner { position: relative; z-index: 2; padding: clamp(34px,5vw,64px); display:grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,4vw,56px); align-items:center; } .combo .eyebrow { color: #fff; } .combo .eyebrow::before { background:#fff; } .combo h2 { color: #fff; font-size: var(--text-h2); margin: 14px 0 16px; } .combo p { color: rgba(255,255,255,.82); } .combo__card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius-lg); padding: 28px; backdrop-filter: blur(6px); } .combo__routes { display:flex; align-items:center; gap:10px; margin: 4px 0 14px; flex-wrap: wrap; } .route-pill { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; background: rgba(255,255,255,.12); padding:6px 12px 6px 6px; border-radius: var(--radius-pill); } .route-pill .d { width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-family:var(--font-display); font-weight:800; font-size:12px; } .route-pill .d.has-ico { background: none !important; } .route-pill .d .route-ico { width:22px; height:22px; } .combo__routes .route-ico--lg { width:34px; height:34px; border-radius:50%; } .combo__card h3 { color:#fff; font-size: 26px; margin-bottom: 6px; } .combo__benefit { margin-top: 16px; padding: 14px 16px; border-radius: var(--radius-md); background: var(--ruta); color: var(--ruta-ink); font-weight: 700; font-size: 14px; } .combo__lines { position:absolute; inset:0; z-index:1; opacity:.5; } /* ===================== Beneficios ===================== */ .benefit { background:#fff; border:1px solid var(--color-borde); border-radius: var(--radius-lg); padding: 30px; display:flex; flex-direction: column; gap: 12px; transition: transform .3s var(--ease), box-shadow .3s; } .benefit:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); } .benefit__ico { width: 56px; height: 56px; border-radius: 50%; background: var(--ruta); color: var(--ruta-ink); display:grid; place-items:center; } .benefit__ico svg { width: 28px; height: 28px; } .benefit h3 { font-size: 20px; } .benefit p { font-size: var(--text-sm); color: var(--color-gris); } /* ===================== Contenidos / Blog ===================== */ .blog-section { background: var(--color-soft); } .blog-card { background:#fff; border-radius: var(--radius-lg); overflow: hidden; border:1px solid var(--color-borde); display:flex; flex-direction:column; transition: transform .3s var(--ease), box-shadow .3s; } .blog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); } .blog-card__img { aspect-ratio: 16/10; position: relative; overflow:hidden; background: var(--color-soft-2); } .blog-card__img img { width:100%; height:100%; object-fit: cover; transition: transform .6s var(--ease); } .blog-card:hover .blog-card__img img { transform: scale(1.06); } .blog-card__img .ribbon { position:absolute; left:0; bottom:0; height:6px; width:100%; background: var(--ruta); } .blog-card__body { padding: 22px; display:flex; flex-direction:column; gap:10px; flex:1; } .blog-card h3 { font-size: 20px; } .blog-card p { font-size: var(--text-sm); color: var(--color-gris); } .blog-card .link-more { margin-top: auto; color: var(--ruta-deep); } /* ===================== CTA diagnóstico ===================== */ .diag { position: relative; overflow: hidden; border-radius: var(--radius-xl); background: var(--color-corp); color:#fff; text-align:center; padding: clamp(32px,4vw,52px) clamp(24px,5vw,72px); } .diag h2 { color:#fff; font-size: var(--text-h2); max-width: 32ch; margin: 0 auto 14px; } .diag p { color: rgba(255,255,255,.86); max-width: 76ch; margin: 0 auto 24px; } .diag__lines { position:absolute; inset:0; z-index:0; opacity:.55; pointer-events:none; } .diag > * { position: relative; z-index: 1; } /* ===================== CTA final / otras rutas ===================== */ .route-card { display:block; background:#fff; border:1px solid var(--color-borde); border-radius: var(--radius-lg); padding: 26px; transition: transform .3s var(--ease), box-shadow .3s; position:relative; overflow:hidden; } .route-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); } .route-card__top { display:flex; align-items:center; gap:14px; margin-bottom: 14px; } .route-card__dot { width: 48px; height: 48px; border-radius:50%; display:grid; place-items:center; color:#fff; font-family: var(--font-display); font-weight:800; font-size: 22px; } .route-card__dot.has-ico { background: none !important; box-shadow: none !important; } .route-card__dot .route-ico { width: 48px; height: 48px; } .route-card h3 { font-size: 21px; } .route-card .tag { margin-bottom: 10px; } .route-card p { font-size: var(--text-sm); color: var(--color-gris); margin-bottom: 14px; } /* Sección "Continúa tu viaje / otras rutas": burbuja pastel + más aire (solo route pages) */ .otras-rutas .route-card { padding: 30px; } .otras-rutas .route-card__top { margin-bottom: 22px; } .otras-rutas .route-card .tag { margin-bottom: 14px; } .otras-rutas .route-card h3 { margin-bottom: 6px; } .otras-rutas .route-card__dot { box-shadow: none; } .otras-rutas .route-card__dot.dot--capital { background:#FFF3A6; color:#7A6A00; } .otras-rutas .route-card__dot.dot--mercado { background:#D8CCEC; color:#330559; } .otras-rutas .route-card__dot.dot--digitalizacion { background:#FFC7DC; color:#A8003C; } .otras-rutas .route-card__dot.dot--talento { background:#A6EFC8; color:#00733E; } /* ===================== Footer ===================== */ .site-footer { background: #2F2927; color: #fff; padding-block: clamp(48px,6vw,80px) 32px; } .footer-grid { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; } .site-footer img { height: 36px; margin-bottom: 16px; } .site-footer h4 { font-family: var(--font-body); font-size: 13px; letter-spacing:.1em; text-transform:uppercase; color: rgba(255,255,255,.55); margin-bottom: 14px; } .site-footer a { display:block; color: rgba(255,255,255,.82); font-size: 14px; padding: 5px 0; } .site-footer a:hover { color:#fff; } .footer-bottom { border-top: 1px solid rgba(255,255,255,.14); margin-top: 40px; padding-top: 22px; display:flex; justify-content: space-between; gap:16px; flex-wrap:wrap; font-size: 13px; color: rgba(255,255,255,.6); } .footer-social { display: flex; gap: 10px; margin-top: 20px; } .footer-social a { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; transition: background .25s, color .25s, transform .25s; } .footer-social a:hover { background: var(--c-morado); color: #fff; transform: translateY(-2px); } .footer-social svg { width: 18px; height: 18px; display: block; } /* ===================== Franja B&N con parallax ===================== */ .bw-band { position: relative; overflow: hidden; min-height: clamp(280px, 36vw, 420px); display: grid; place-items: center; text-align: center; } .bw-band__bg { position: absolute; inset: -42% 0; background-size: cover; background-position: center; filter: grayscale(1) contrast(1.06) brightness(.85); } .bw-band__bg--digitalizacion, .bw-band__bg--mercado { inset: 0; background-position: center top; } .bw-band__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,8,22,.56), rgba(14,8,22,.78)); } .bw-band__line { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 100%; z-index: 1; opacity: .85; pointer-events: none; } .bw-band .container { position: relative; z-index: 2; } .bw-band .eyebrow { color: #fff; justify-content: center; } .bw-band .eyebrow::before { background: var(--ruta); } .bw-band h2 { color: #fff; font-size: var(--text-h2); max-width: 24ch; margin: 12px auto 0; } /* ===================== Journey strip (vehículo en la ruta) ===================== */ .journey { overflow: hidden; padding: 6px 0 18px; } .journey__track { position: relative; height: 150px; } .journey__line { position: absolute; inset: 0; width: 100%; height: 100%; } .journey__dot { position: absolute; width: 18px; height: 18px; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 4px #fff; z-index: 1; } @media (max-width: 620px){ .journey__dot { width: 13px; height: 13px; box-shadow: 0 0 0 3px #fff; } } .journey__vehicle { position: absolute; bottom: 12px; left: -14%; height: clamp(76px, 9.5vw, 116px); width: auto; animation: ride 17s linear infinite, bob 3.2s ease-in-out infinite; filter: drop-shadow(0 10px 14px rgba(51,5,89,.18)); } @keyframes ride { from { left: -14%; } to { left: 110%; } } @keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } @media (max-width: 620px){ .journey__track { height: 96px; } } /* ===================== Parallax ===================== */ .parallax { will-change: transform; } /* ===================== Responsive ===================== */ @media (max-width: 980px) { .hero__grid { grid-template-columns: 1fr; } .hero__visual { max-width: 460px; margin-inline: auto; order: -1; } .split { grid-template-columns: 1fr; } .combo__inner { grid-template-columns: 1fr; } .grid-3 { grid-template-columns: 1fr 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; } .nav__menu, .nav__cta.desktop { display: none; } .nav__burger { display: block; } } @media (max-width: 620px) { :root { --linea-peso: 6px; } .grid-3, .grid-2 { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; } .hero__cta { width: 100%; } .hero__cta .btn { flex: 1; } } /* ===== Menú móvil ===== */ .mobile-menu { position: fixed; inset: var(--header-h) 0 0 0; background:#fff; z-index: 99; transform: translateX(100%); transition: transform .35s var(--ease); padding: 24px var(--pad-x); overflow-y:auto; display:flex; flex-direction:column; gap: 6px; } .mobile-menu.open { transform: none; } .mobile-menu__label { font-size: 18px; font-weight: 600; padding: 14px 0; border-bottom: 1px solid var(--color-borde); color: var(--color-texto-dark); } .mobile-menu a { font-size: 18px; font-weight: 600; padding: 14px 0; border-bottom: 1px solid var(--color-borde); color: var(--color-texto-dark); } .mobile-menu a.mobile-menu__sub { padding-left: 18px; font-size: 14px; color: var(--color-gris); } .mobile-menu .btn { margin-top: 18px; color: #fff; border-bottom: none; justify-content: center; } .mobile-menu .btn + .btn { margin-top: 6px; } body.menu-open { overflow: hidden; } /* ===================== HOME — utilidades nuevas (mínimas, sobre tokens existentes) ===================== */ .center { text-align: center; } /* Aliados — grid de logos en escala de grises → color en hover */ .logo-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; } .logo-cell { display: grid; place-items: center; min-height: 96px; padding: 20px 18px; background: #fff; border: 1px solid var(--color-borde); border-radius: var(--radius-md); transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; } .logo-cell:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); border-color: var(--color-corp-40); } .logo-cell img { max-height: 52px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .72; transition: filter .3s, opacity .3s; } .logo-cell:hover img { filter: none; opacity: 1; } @media (max-width: 980px) { .logo-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 560px) { .logo-grid { grid-template-columns: repeat(2, 1fr); } .logo-cell { min-height: 84px; padding: 16px; } } /* Aliados: cards con logo + descripción (cajas rectas) */ /* ===== Carrusel de aliados (HOME · "Nuestros Aliados") — texto izq + cards ===== */ .hp-allies__layout { display: grid; grid-template-columns: minmax(290px, 380px) minmax(0, 1fr); gap: clamp(28px, 4vw, 60px); align-items: center; } .hp-allies__badge { display: inline-block; background: var(--c-lavanda); color: var(--c-morado); font-weight: 800; font-size: 13px; letter-spacing: .01em; padding: 7px 14px; border-radius: 0; margin-bottom: 18px; } .hp-allies__dots { display: flex; gap: 9px; margin-top: clamp(22px, 2.8vw, 32px); } .hp-allies__dot { width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; background: #D9D7E3; cursor: pointer; transition: background .25s, transform .25s; } .hp-allies__dot:hover { background: #b9b5cc; } .hp-allies__dot.is-active { background: var(--c-morado); transform: scale(1.2); } .hp-allies__carousel { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(8px, 1.4vw, 16px); } .hp-allies__nav { width: 44px; height: 44px; border-radius: 0; flex: 0 0 auto; display: grid; place-items: center; cursor: pointer; background: #F1F0F6; color: var(--c-morado-deep); border: 1px solid var(--color-borde); transition: background .25s, color .25s, opacity .25s; } .hp-allies__nav:hover { background: var(--c-morado); color: #fff; } .hp-allies__nav:disabled { opacity: .35; cursor: default; } .hp-allies__nav:disabled:hover { background: #F1F0F6; color: var(--c-morado-deep); box-shadow: none; } .hp-allies__viewport { overflow: hidden; padding: 16px 0; } .hp-allies__track { list-style: none; margin: 0; padding: 0 4px; display: flex; gap: 20px; transition: transform .45s var(--ease); will-change: transform; } .ally-card { flex: 0 0 calc(50% - 10px); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; min-height: clamp(290px, 30vw, 340px); background: #fff; border: 1px solid var(--color-borde); border-radius: 0; padding: clamp(26px, 2.4vw, 36px) clamp(20px, 2vw, 30px); transition: transform .3s var(--ease), border-color .3s; } .ally-card:hover { transform: translateY(-4px); border-color: var(--c-morado); } .ally-card__logo { height: 64px; display: flex; align-items: center; justify-content: center; } .ally-card__logo img { max-height: 60px; max-width: 180px; width: auto; object-fit: contain; margin: 0 auto; } .ally-card__logo img[src*="FACEA19"], .ally-card__logo img[src*="otic.png"] { max-height: 76px; } .ally-card__desc { font-size: 15px; color: var(--color-gris); line-height: 1.5; margin: 0; } .ally-card__name { font-family: var(--font-display); font-weight: 800; color: var(--c-morado-deep); font-size: 16px; margin: 4px 0 0; } /* Desktop: 2 aliados a la vista (tarjetas amplias, no apretadas) — estructura Propuesta A */ @media (min-width: 861px) { .hp-allies__carousel .ally-card { flex: 0 0 calc(50% - 10px); min-width: 0; min-height: clamp(258px, 23vw, 296px); padding: 26px 22px; } .hp-allies__carousel .ally-card__logo { height: 54px; } .hp-allies__carousel .ally-card__logo img { max-height: 46px; max-width: 100%; } .hp-allies__carousel .ally-card__logo img[src*="FACEA19"], .hp-allies__carousel .ally-card__logo img[src*="otic.png"] { max-height: 60px; } } @media (max-width: 860px) { .hp-allies__layout { grid-template-columns: 1fr; gap: 24px; } /* Flechas abajo en vez de a los costados. A los lados le robaban ~100px al viewport y la tarjeta siguiente asomaba cortada por detrás del botón. Como no hay swipe, las flechas son la única navegación: centradas bajo la tarjeta quedan a mano del pulgar y con área táctil de 48px. Las filas van explícitas porque el orden del DOM es prev · viewport · next, y con colocación automática el "next" se iría a una tercera fila. */ .hp-allies__carousel { grid-template-columns: 1fr 1fr; column-gap: 12px; row-gap: 16px; } .hp-allies__viewport { grid-column: 1 / -1; grid-row: 1; } .hp-allies__carousel [data-ally-prev] { grid-column: 1; grid-row: 2; justify-self: end; } .hp-allies__carousel [data-ally-next] { grid-column: 2; grid-row: 2; justify-self: start; } .hp-allies__nav { width: 48px; height: 48px; } /* El min-height cede al contenido y el contenido se centra: todas las tarjetas se estiran a la más alta, así que con el texto pegado arriba quedaba un hueco muerto abajo. En tablet se mantienen dos a la vista: una sola a ancho completo queda de 3:1, una franja casi vacía. */ .ally-card { flex: 0 0 calc(50% - 10px); min-height: 0; justify-content: center; } } /* Teléfono: una tarjeta entera, sin recorte */ @media (max-width: 600px) { .ally-card { flex: 0 0 100%; } } /* Franja ciclista (CTA aliados): foto de pared con líneas de marca + ciclista */ .hp-cyclist { position: relative; overflow: hidden; isolation: isolate; background: #6126FF; color: #fff; display: grid; align-items: center; min-height: clamp(400px, 44vw, 600px); } .hp-cyclist__bg { position: absolute; inset: 0; z-index: 0; } .hp-cyclist__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; display: block; } .hp-cyclist__veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(15,3,33,.62) 0%, rgba(15,3,33,.42) 40%, rgba(15,3,33,.12) 72%, rgba(15,3,33,0) 100%); } .hp-cyclist__photo { position: absolute; right: clamp(-40px, 2vw, 40px); bottom: 0; height: 88%; width: auto; z-index: 2; pointer-events: none; filter: drop-shadow(0 18px 30px rgba(0,0,0,.28)); } .hp-cyclist__copy { position: relative; z-index: 3; max-width: 560px; padding-block: clamp(40px, 6vw, 80px); } .hp-cyclist__l1, .hp-cyclist__l2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.35rem, 2.5vw, 2.1rem); line-height: 1.18; } .hp-cyclist__l2 { margin-top: clamp(48px, 8vw, 110px); margin-left: clamp(16px, 5vw, 80px); } @media (max-width: 760px) { .hp-cyclist__photo { height: 64%; right: -14%; opacity: .4; } .hp-cyclist__copy { max-width: none; } .hp-cyclist__l2 { margin-left: 0; margin-top: 28px; } } /* Tres pasos */ .steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .step { background: var(--color-soft); border: 1px solid var(--color-borde); border-radius: var(--radius-lg); padding: 32px 28px; position: relative; } .step__num { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--color-corp); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 24px; margin-bottom: 18px; box-shadow: 0 8px 20px var(--color-corp-40); } .step h3 { font-size: var(--text-h3); margin-bottom: 10px; } .step p { color: var(--color-gris); font-size: var(--text-sm); } @media (max-width: 760px) { .steps { grid-template-columns: 1fr; } } /* Comunidad / oferta (foto + copy con offer stack) */ .community { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(28px,5vw,64px); align-items: center; } .community__media { position: relative; aspect-ratio: 4/3.4; } .community__copy h2 { font-size: var(--text-h2); margin: 14px 0 16px; } .offer-stack { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 12px; } .offer-stack li { position: relative; padding-left: 34px; color: var(--color-texto-body); font-size: var(--text-body); line-height: 1.5; } .offer-stack li::before { content: ""; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--color-corp); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9.5 17.6 4.4 12.5l1.4-1.4 3.7 3.7L18 6l1.4 1.4z'/%3E%3C/svg%3E") center/16px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9.5 17.6 4.4 12.5l1.4-1.4 3.7 3.7L18 6l1.4 1.4z'/%3E%3C/svg%3E") center/16px no-repeat; } .offer-guarantee { font-family: var(--font-display); font-weight: 800; color: var(--color-corp); font-size: var(--text-lead); margin-bottom: 22px; } @media (max-width: 980px) { .community { grid-template-columns: 1fr; } .community__media { max-width: 480px; margin-inline: auto; } } /* FAQ — acordeón accesible con

*/ .faq { max-width: 820px; margin-inline: auto; display: grid; gap: 14px; } .faq__item { background: #fff; border: 1px solid var(--color-borde); border-radius: var(--radius-md); overflow: hidden; transition: border-color .25s, box-shadow .25s; } .faq__item[open] { border-color: var(--color-corp-40); box-shadow: var(--shadow-sm); } .faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; padding: 20px 24px; list-style: none; } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary:focus-visible { outline: 3px solid var(--color-corp-40); outline-offset: -3px; border-radius: var(--radius-md); } .faq__item summary h3 { font-size: 18px; color: var(--color-texto-dark); } .faq__icon { flex: 0 0 auto; width: 22px; height: 22px; position: relative; } .faq__icon::before, .faq__icon::after { content: ""; position: absolute; background: var(--color-corp); border-radius: 0; transition: transform .25s var(--ease), opacity .25s; } .faq__icon::before { top: 10px; left: 2px; width: 18px; height: 2px; } .faq__icon::after { left: 10px; top: 2px; width: 2px; height: 18px; } .faq__item[open] .faq__icon::after { transform: rotate(90deg); opacity: 0; } .faq__a { padding: 0 24px 22px; } .faq__a p { color: var(--color-gris); line-height: 1.6; } /* ===================================================================== HOME REDESIGN — namespaced `hp-*` (no afecta rutas.html) Breaks de color full-bleed + motion (CSS keyframes + sticky + parallax) ===================================================================== */ /* ---- Tipografía display más grande para los breaks del home ---- */ .hp .hp-display { font-size: clamp(2.4rem, 6vw, 5rem); line-height: 1.02; letter-spacing: -.02em; } .hp .hp-h2 { font-size: clamp(2rem, 4.5vw, 3.4rem); line-height: 1.04; letter-spacing: -.015em; } .hp-eyebrow { font-family: var(--font-body); font-weight: 800; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px; } .hp-eyebrow::before { content: ""; width: 26px; height: 3px; border-radius: 0; background: currentColor; opacity: .85; } .hp-section { padding-block: clamp(64px, 9vw, 130px); position: relative; } /* ===================== 1 · HERO break morado + orbit ===================== */ .hp-hero { position: relative; overflow: hidden; color: #fff; background: #6126FF; padding-block: clamp(56px, 8vw, 104px); } .hp-hero__glow { display: none; } .hp-hero .container { position: relative; z-index: 2; } .hp-hero__grid { display: block; max-width: 560px; } .hp-hero__badge { display: inline-flex; align-items: center; gap: 10px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.24); backdrop-filter: blur(6px); border-radius: var(--radius-pill); padding: 8px 16px 8px 8px; font-weight: 700; font-size: 13.5px; color: #fff; margin-bottom: 24px; } .hp-hero__badge .rline { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #2A0A4A; background: var(--c-amarillo); font-family: var(--font-display); font-weight: 800; font-size: 13px; } .hp-hero h1 { color: #fff; margin-bottom: 22px; max-width: 16ch; } .hp-hero__sub { font-size: clamp(16px, 1.5vw, 21px); color: rgba(255,255,255,.86); max-width: 48ch; margin-bottom: 32px; line-height: 1.5; } .hp-hero__sub strong { color: #fff; } .hp-hero__cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; } .hp-hero .btn--onfill { background: #fff; color: var(--c-morado-deep); } .hp-hero .btn--onfill:hover { background: var(--c-morado-deep); color: #fff; } .hp-hero .btn--ghost { color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.4); } .hp-hero .btn--ghost:hover { background: #fff; color: var(--c-morado-deep); box-shadow: none; } /* Hero visual: video de fondo full-bleed (sin velo); caja glass igual a las rutas */ .hp-hero { isolation: isolate; } .hp-hero__bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } /* Home hero: animación del hero con los vectores del Figma (líneas de color entran, se tejen en el isotipo y salen a la derecha). El movimiento lo hacen los clips SMIL dentro del SVG; el CSS solo asegura visibilidad. Vectorial y sin JS. */ .hp-anim .hp-s { opacity: 1; } .hp-hero__copy { position: relative; background: rgba(255,255,255,.08); -webkit-backdrop-filter: blur(16px) saturate(115%); backdrop-filter: blur(16px) saturate(115%); border: 1px solid rgba(255,255,255,.22); box-shadow: var(--shadow-md); padding: clamp(28px, 3.2vw, 48px); } /* ---- Hero SPLIT (Nosotros / Contacto): copy + animación de líneas de marca ---- */ .hp-hero--split { overflow: hidden; padding-block: clamp(60px, 8vw, 112px); } .hp-hero--split .hp-hero__watermark { position: absolute; z-index: 0; pointer-events: none; top: -30%; left: -12%; width: 55vw; height: 120%; background: radial-gradient(closest-side, rgba(255,255,255,.14), rgba(255,255,255,0) 70%); } .hp-hero--split .container { position: relative; z-index: 2; } .hp-hero__split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 72px); align-items: center; } .hp-hero__lead { max-width: 34rem; } .hp-hero__lead .hp-eyebrow { color: #fff; opacity: .82; } .hp-hero--split h1 { max-width: 15ch; } .hp-hero--split .hp-hero__sub { max-width: 46ch; } /* Panel de animación: el isotipo va en un APNG/PNG con fondo TRANSPARENTE (líneas blancas sobre nada), así se apoya directo sobre el hero SIN caja. */ .hp-hero__media { position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 460px; margin-inline: auto; } .hp-hero__anim { display: block; width: 100%; height: 100%; object-fit: contain; } /* Contacto: mismo morado corporativo del hero base */ .hp-hero--contacto { background: #6126FF; } @media (max-width: 820px) { .hp-hero__split { grid-template-columns: 1fr; gap: clamp(24px, 6vw, 40px); } .hp-hero__lead { max-width: none; } .hp-hero__media { order: -1; max-width: 300px; } .hp-hero--split h1 { max-width: none; } } /* ===================== 2 · Convocatorias destacadas (lavanda · carrusel) ===================== */ .hp-conv { background: var(--c-lavanda); } .hp-conv__intro { max-width: 62ch; margin-bottom: clamp(26px, 3.4vw, 44px); } .hp-conv__intro .hp-eyebrow { color: var(--c-morado); } .hp-conv__intro h2 { color: var(--c-morado-deep); } .hp-conv__intro p { color: var(--color-gris); font-size: var(--text-lead); line-height: 1.5; margin-top: 12px; max-width: 58ch; } .hp-conv__carousel { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(8px, 1.4vw, 16px); } .hp-conv__nav { width: 44px; height: 44px; flex: 0 0 auto; display: grid; place-items: center; cursor: pointer; background: #fff; color: var(--c-morado-deep); border: 1px solid var(--color-borde); transition: background .25s, color .25s, opacity .25s; } .hp-conv__nav:hover { background: var(--c-morado); color: #fff; } .hp-conv__nav:disabled { opacity: .35; cursor: default; } .hp-conv__nav:disabled:hover { background: #fff; color: var(--c-morado-deep); } .hp-conv__viewport { overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -ms-overflow-style: none; } .hp-conv__viewport::-webkit-scrollbar { display: none; } .hp-conv__track { list-style: none; margin: 0; padding: 6px 4px 8px; display: flex; gap: clamp(16px, 1.6vw, 22px); } .conv-card { flex: 0 0 clamp(280px, 30vw, 360px); scroll-snap-align: start; background: #fff; border: 1px solid var(--color-borde); overflow: hidden; display: flex; flex-direction: column; transition: transform .3s var(--ease), box-shadow .3s; } .conv-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .conv-card__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--c-lavanda); } .conv-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .conv-card__body { padding: 20px 22px 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; flex: 1; } .conv-card__tag { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--c-morado); background: var(--c-lavanda); padding: 5px 12px; border-radius: var(--radius-pill); } .conv-card__title { font-size: 19px; color: var(--c-morado-deep); line-height: 1.2; } .conv-card__desc { font-size: 14px; color: var(--color-gris); line-height: 1.5; margin: 0; } .conv-card .link-more { color: var(--c-morado); margin-top: auto; } @media (max-width: 600px) { .hp-conv__carousel { grid-template-columns: 1fr; } .hp-conv__nav { display: none; } .conv-card { flex-basis: 82%; } } /* Convocatorias · variante lado a lado (texto izq + carrusel der) — consistente con Aliados */ .hp-conv--split .hp-conv__layout { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center; } .hp-conv--split .hp-conv__intro { margin-bottom: 0; max-width: none; } .hp-conv--split .hp-conv__intro h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.08; } .hp-conv__controls { display: flex; gap: 10px; margin-top: 28px; } .hp-conv--split .conv-card { flex-basis: calc(50% - clamp(8px, 0.8vw, 11px)); } .hp-conv--split .hp-conv__track { padding-inline: 0; } @media (max-width: 860px) { .hp-conv--split .hp-conv__layout { grid-template-columns: 1fr; } .hp-conv__controls { display: none; } } /* ===================== 2 · ¿Qué es Valor Pyme? (blanco) ===================== */ .hp-acomp { background: #FBFAFF; padding-top: clamp(56px, 7vw, 104px); padding-bottom: clamp(56px, 7vw, 104px); } .hp-acomp__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(28px, 5vw, 64px); align-items: start; } .hp-acomp .hp-eyebrow { color: var(--c-rosa); } .hp-acomp h2 { color: var(--c-morado-deep); margin-bottom: 18px; } .hp-acomp p { color: var(--color-gris); font-size: var(--text-lead); line-height: 1.55; margin-bottom: 18px; } .hp-acomp .link-more { margin-top: 6px; } @media (max-width: 760px){ .hp-acomp__grid { grid-template-columns: 1fr; } } /* ===================== 3 · 4 rutas — scroll horizontal anclado (lavanda) ===================== */ .hp-routes { background: var(--c-lavanda); position: relative; padding-block: clamp(8px,2vw,24px); } .hp-routes__intro { padding-block: clamp(48px,6vw,80px) 0; text-align: center; } .hp-routes__intro .hp-scrollcue { margin-top: 20px; } .hp-routes__intro .hp-eyebrow { color: var(--c-morado); justify-content: center; } .hp-routes__intro h2 { color: var(--c-morado-deep); margin: 0 auto 14px; max-width: 20ch; } .hp-routes__intro p { color: var(--color-gris); font-size: var(--text-lead); max-width: 56ch; margin: 0 auto; } .hp-hscroll-wrap { height: 200vh; position: relative; } .hp-hscroll-sticky { position: sticky; top: var(--header-h); height: calc(100svh - var(--header-h)); overflow: hidden; display: grid; grid-template-columns: .72fr 1.28fr; align-items: center; gap: clamp(20px,3vw,48px); padding: clamp(20px,3vh,40px) var(--pad-x); max-width: var(--maxw); margin-inline: auto; } .hp-hscroll-head { align-self: center; } .hp-hscroll-head .hp-eyebrow { color: var(--c-morado); } .hp-hscroll-head h2 { color: var(--c-morado-deep); font-size: clamp(1.8rem,3.6vw,2.8rem); margin-bottom: 14px; max-width: 18ch; } .hp-hscroll-head p { color: var(--color-gris); font-size: var(--text-body); max-width: 38ch; } .hp-hscroll-cta { display: inline-flex; margin-top: 24px; } .hp-hscroll-head .hp-scrollcue { margin-top: 22px; } .hp-hscroll-viewport { position: relative; overflow: hidden; align-self: center; } .hp-rail { display: flex; gap: 24px; will-change: transform; padding: 30px 0; } .hp-rcard { flex: 0 0 clamp(260px, 30vw, 340px); background: #fff; border-radius: var(--radius-lg); border: 1px solid var(--color-borde); padding: 28px; position: relative; overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s; --rc: var(--c-morado); display: flex; flex-direction: column; min-height: clamp(380px, 56vh, 520px); } .hp-rcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); } .hp-rcard::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: var(--rc); } .hp-rcard__top { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; } .hp-rcard__icon { width: 48px; height: 48px; border-radius: 50%; object-fit: contain; display: block; } .hp-rcard h3 { font-size: 22px; color: var(--c-morado-deep); } .hp-rcard__tag { display: inline-flex; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 6px 14px; border-radius: var(--radius-pill); margin-bottom: 14px; } .hp-rcard p { font-size: var(--text-sm); color: var(--color-gris); margin-bottom: 16px; } .hp-rcard__logos { display: flex; flex-direction: column; gap: 8px; margin: 2px 0 18px; } .hp-rcard__logo { display: grid; place-items: center; background: #fff; border: 1px solid var(--c-lavanda); border-radius: 0; padding: 10px 12px; } .hp-rcard__logo img { max-height: 30px; max-width: 84%; width: auto; object-fit: contain; filter: grayscale(1); opacity: .72; transition: filter .35s var(--ease), opacity .35s var(--ease); } .hp-rcard__logo:hover img { filter: grayscale(0); opacity: 1; } .hp-rcard[href^="/ruta-talento"] .hp-rcard__logo img { max-height: 50px; } /* Solo el logo de Sawu (Ruta Mercado) más alto para que se distinga. href^= porque HubSpot agrega ?hsLang=es al enlace. */ .hp-rcard[href^="/ruta-mercado"] .hp-rcard__logo img[src*="sawu"] { max-height: 60px; } .hp-rcard .link-more { color: var(--rc); margin-top: auto; } /* Home · 4 rutas: exactamente 2 cards completas por vista en desktop (sin corte) */ @media (min-width: 901px) { .hp-rail .hp-rcard { flex: 0 0 calc(50% - 12px); } } /* Indicador "Desliza →": cue de que la sección se recorre a la derecha */ .hp-scrollcue { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; font-size: 14px; letter-spacing: .02em; color: var(--c-morado); background: rgba(97,38,255,.08); border: 1px solid rgba(97,38,255,.18); padding: 8px 16px; border-radius: var(--radius-pill); } .hp-scrollcue .cue-arrow { display: inline-flex; animation: cue-slide 1.4s var(--ease) infinite; } .hp-scrollcue svg { display: block; } @keyframes cue-slide { 0%,100% { transform: translateX(0); opacity: .65; } 50% { transform: translateX(7px); opacity: 1; } } /* Línea ondulada de Valor Pyme (sistema metro) que se desplaza a la derecha conforme avanza el scroll horizontal del riel. Misma altura abajo. */ .hp-metroline { position: absolute; left: 0; right: 0; bottom: 6px; height: 56px; z-index: 0; pointer-events: none; overflow: hidden; } .hp-metroline svg { position: absolute; left: 0; top: 0; height: 100%; width: 220%; will-change: transform; } .hp-metroline path { fill: none; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; } @media (max-width: 900px) { /* Móvil/tablet: desactivar sticky, apilar vertical */ .hp-hscroll-wrap { height: auto; } .hp-hscroll-sticky { position: relative; top: 0; height: auto; overflow: visible; grid-template-columns: 1fr; padding-block: clamp(40px,6vw,64px); } .hp-hscroll-viewport { overflow: visible; } .hp-rail { flex-direction: column; transform: none !important; } .hp-rcard { flex: 1 1 auto; } .hp-metroline { display: none; } .hp-hscroll-head .hp-scrollcue { display: none; } } /* ===================== 4 · Diagnóstico — break morado ===================== */ .hp-diag { background: #6126FF; position: relative; overflow: hidden; color: #fff; text-align: center; padding-block: clamp(64px,9vw,120px); } .hp-diag__glow { display: none; } .hp-diag .container { position: relative; z-index: 2; } .hp-diag .hp-eyebrow { color: var(--c-amarillo); justify-content: center; } .hp-diag h2 { color: #fff; max-width: 28ch; margin: 0 auto 16px; } .hp-diag p { color: rgba(255,255,255,.85); max-width: 64ch; margin: 0 auto 28px; font-size: var(--text-lead); } .hp-diag .btn--onfill { background: #fff; color: var(--c-morado-deep); } .hp-diag .btn--onfill:hover { background: var(--c-morado-deep); color: #fff; } /* ===================== 5 · Aliados blanco (carrusel) ===================== */ .hp-allies { background: #fff; position: relative; overflow: hidden; } .hp-allies__intro { text-align: left; position: relative; z-index: 2; } .hp .hp-allies__intro h2 { color: var(--c-morado-deep); margin: 0; line-height: 1.08; font-size: clamp(1.7rem, 2.8vw, 2.4rem); } .hp-allies__sub { font-family: var(--font-display); font-weight: 800; color: var(--c-morado); font-size: clamp(1rem, 1.35vw, 1.15rem); line-height: 1.3; margin: 14px 0 0; max-width: 42ch; } .hp-allies__lead { color: var(--color-gris); font-size: var(--text-lead); line-height: 1.55; margin: 12px 0 0; max-width: 46ch; } .hp-allies__cta { display: inline-flex; margin-top: 22px; } /* ===================== 6 · Break B&N oscuro + parallax ===================== */ .hp-bn { position: relative; overflow: hidden; height: clamp(160px, 26vh, 320px); background: var(--c-dark); } .hp-bn__bg { position: absolute; inset: -55% 0; z-index: 0; } .hp-bn__bg img { width: 100%; height: 210%; object-fit: cover; filter: grayscale(1) contrast(1.08) brightness(.72); } .hp-bn__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(22,22,22,.32), rgba(22,22,22,.5)); } /* ===================== 7 · 3 pasos — break verde + cards translúcidas ===================== */ .hp-steps { background: var(--c-verde); color: #fff; position: relative; overflow: hidden; } .hp-steps__glow { position: absolute; inset: -20% -10%; z-index: 0; background: radial-gradient(circle at 85% 15%, rgba(255,255,255,.18), transparent 55%); } .hp-steps .container { position: relative; z-index: 2; } .hp-steps__intro { text-align: center; margin-bottom: clamp(34px,4vw,54px); } .hp-steps__intro .hp-eyebrow { color: #06301D; justify-content: center; } .hp-steps__intro h2 { color: #fff; } .hp-steps__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; } .hp-tstep { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.24); backdrop-filter: blur(6px); border-radius: var(--radius-lg); padding: 32px 28px; } .hp-tstep__num { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--c-verde); font-family: var(--font-display); font-weight: 800; font-size: 24px; margin-bottom: 18px; } .hp-tstep h3 { color: #fff; font-size: var(--text-h3); margin-bottom: 10px; } .hp-tstep p { color: rgba(255,255,255,.86); font-size: var(--text-sm); } .hp-steps .btn--onfill { background: #fff; color: var(--c-verde); } .hp-steps .btn--onfill:hover { background: #06301D; color: #fff; } @media (max-width: 760px){ .hp-steps__grid { grid-template-columns: 1fr; } } /* ===================== 8 · Blog destacado — fondo rosa · tarjetas con foto + barra amarilla ===================== */ .hp-blog { background: #FF2B5E; color: #fff; position: relative; overflow: hidden; } .hp-blog .container { position: relative; z-index: 2; } .hp-blog__intro { text-align: center; margin-bottom: clamp(34px,4vw,54px); } .hp-blog__intro .hp-eyebrow { color: var(--c-amarillo); justify-content: center; } .hp-blog__intro h2 { color: #fff; max-width: 22ch; margin: 0 auto 14px; } .hp-blog__intro p { color: rgba(255,255,255,.92); font-size: var(--text-lead); max-width: 60ch; margin: 0 auto; line-height: 1.5; } .hp-blog__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(18px,2.4vw,28px); } .hp-blog__card { background: #fff; border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 24px 54px rgba(46,4,38,.30); transition: transform .3s var(--ease), box-shadow .3s; } .hp-blog__card:hover { transform: translateY(-4px); box-shadow: 0 32px 64px rgba(46,4,38,.38); } .hp-blog__media { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--color-soft-2); } .hp-blog__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); } .hp-blog__card:hover .hp-blog__media img { transform: scale(1.06); } .hp-blog__bar { position: absolute; left: 0; bottom: 0; width: 100%; height: 6px; background: var(--c-amarillo); } .hp-blog__body { padding: clamp(22px,2.6vw,30px); display: flex; flex-direction: column; gap: 12px; flex: 1; } .hp-blog__date { font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--c-rosa); text-transform: uppercase; } .hp-blog__card h3 { font-size: clamp(17px,1.6vw,20px); line-height: 1.3; color: var(--c-morado-deep); margin: 0; flex: 1 1 auto; } .hp-blog__card .link-more { color: #7A6A00; margin-top: 2px; } .hp-blog .btn--onfill { background: #fff; color: var(--c-morado-deep); } .hp-blog .btn--onfill:hover { background: var(--c-morado-deep); color: #fff; } @media (max-width: 900px){ .hp-blog__grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } } /* ===================== 9 · FAQ lavanda ===================== */ .hp-faq { background: var(--c-lavanda); } .hp-faq__intro { text-align: center; margin-bottom: clamp(30px,4vw,48px); } .hp-faq__intro .hp-eyebrow { color: var(--c-morado); justify-content: center; } .hp-faq__intro h2 { color: var(--c-morado-deep); } /* ---- prefers-reduced-motion: apaga orbits/auto-anim del home ---- */ @media (prefers-reduced-motion: reduce) { .orbit-ring, .hp-orbit__dot, .beam-flow, .hp-allies__beam .beam-flow { animation: none !important; } .hp-hero__bg { display: none; } } /* ===================== CONTACTO ===================== */ /* Hero: media documental en vez del orbit */ .hp-contacto-hero__media { position: relative; width: 100%; max-width: 520px; margin-inline: auto; } .hp-contacto-hero__media img { width: 100%; height: auto; aspect-ratio: 13/15; object-fit: cover; border-radius: var(--radius-xl); box-shadow: 0 24px 60px rgba(20,4,40,.34); } /* Sección motivos */ .hp-contacto-help { background: #FBFAFF; } .hp-contacto-help__intro { text-align: center; max-width: 640px; margin: 0 auto clamp(34px,4.5vw,52px); } .hp-contacto-help__intro .hp-eyebrow { color: var(--c-morado); justify-content: center; } .hp-contacto-help__intro h2 { color: var(--c-morado-deep); margin: 12px 0 14px; } .hp-contacto-help__intro p { color: var(--color-gris); font-size: var(--text-lead); line-height: 1.55; } .hp-motivos { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .hp-motivo { display: flex; align-items: flex-start; gap: 16px; height: 100%; background: #fff; border: 1px solid var(--color-borde); border-radius: var(--radius-md); padding: 22px 22px; transition: transform .25s var(--ease), border-color .25s, box-shadow .25s; } .hp-motivo:hover { transform: translateY(-3px); border-color: var(--color-corp-40); box-shadow: var(--shadow-md); } .hp-motivo:focus-visible { outline: 3px solid var(--color-corp-40); outline-offset: 3px; } .hp-motivo__ico { flex: 0 0 auto; width: 48px; height: 48px; display: grid; place-items: center; background: var(--c-lavanda); color: var(--color-corp); } .hp-motivo__ico svg { width: 24px; height: 24px; } .hp-motivo__copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; } .hp-motivo__t { font-family: var(--font-display); font-weight: 800; font-size: 16px; line-height: 1.2; color: var(--color-texto-dark); } .hp-motivo__d { font-size: 14px; line-height: 1.45; color: var(--color-gris); } .hp-motivo__arrow { flex: 0 0 auto; color: var(--color-corp); font-weight: 800; font-size: 18px; line-height: 1; margin-top: 2px; transition: transform .25s var(--ease); } .hp-motivo:hover .hp-motivo__arrow { transform: translateX(4px); } /* Formulario */ .hp-contacto-form { background: var(--c-lavanda); } .hp-contacto-form__intro { text-align: center; max-width: 600px; margin: 0 auto clamp(28px,4vw,40px); } .hp-contacto-form__intro .hp-eyebrow { color: var(--c-morado); justify-content: center; } .hp-contacto-form__intro h3 { color: var(--c-morado-deep); margin: 12px 0 14px; } .hp-contacto-form__intro p { color: var(--color-gris); font-size: var(--text-lead); line-height: 1.55; } .hp-form { max-width: 720px; margin-inline: auto; background: #fff; border: 1px solid var(--color-borde); padding: clamp(24px,4vw,40px); box-shadow: var(--shadow-sm); } .hp-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .hp-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; } .hp-field label { font-weight: 700; font-size: 14px; color: var(--color-texto-dark); } .hp-field .req { color: var(--c-rosa); } .hp-field input, .hp-field select, .hp-field textarea { font-family: var(--font-body); font-size: 15px; color: var(--color-texto-dark); padding: 13px 15px; border: 1px solid var(--color-borde); border-radius: 0; background: #fff; transition: border-color .2s, box-shadow .2s; width: 100%; } .hp-field textarea { resize: vertical; min-height: 130px; } .hp-field input:focus, .hp-field select:focus, .hp-field textarea:focus { outline: none; border-color: var(--color-corp); box-shadow: 0 0 0 3px var(--color-corp-40); } .hp-field input::placeholder, .hp-field textarea::placeholder { color: var(--color-gris-claro); } .hp-field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%236126FF' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; padding-right: 40px; } .hp-check { display: flex; align-items: flex-start; gap: 12px; margin: 6px 0 22px; } .hp-check input { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--color-corp); } .hp-check label { font-size: 13.5px; color: var(--color-gris); line-height: 1.5; } .hp-check .req { color: var(--c-rosa); } .hp-form__actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .hp-form__note { font-size: 13px; color: var(--color-gris); } .hp-form__ok { margin-top: 20px; padding: 16px 18px; background: #D4FBE8; border: 1px solid #00BD70; color: #00733E; font-weight: 700; font-size: 14.5px; } @media (max-width: 900px) { .hp-motivos { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 760px) { .hp-contacto-hero__media { display: none; } } @media (max-width: 600px) { .hp-motivos { grid-template-columns: 1fr; } .hp-form__row { grid-template-columns: 1fr; } .hp-form__actions .btn { width: 100%; justify-content: center; } } /* ===================== NOSOTROS ===================== */ /* Intro centrado compartido */ .np-intro { text-align: center; max-width: 760px; margin: 0 auto clamp(34px,4.5vw,52px); } .np-intro .hp-eyebrow { justify-content: center; } .np-intro h2 { color: var(--c-morado-deep); margin: 12px 0 14px; } .np-intro p { color: var(--color-gris); font-size: var(--text-lead); line-height: 1.55; } /* 3 · Propuesta de valor + pilares */ .np-value { background: var(--c-lavanda); } .np-value .hp-eyebrow { color: var(--c-morado); } .np-pillars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .np-pillar { display: flex; flex-direction: column; gap: 14px; background: #fff; border: 1px solid var(--color-borde); padding: 26px 22px; } .np-pillar__ico { width: 48px; height: 48px; display: grid; place-items: center; background: var(--c-lavanda); color: var(--c-morado); flex: 0 0 auto; } .np-pillar__ico svg { width: 24px; height: 24px; } .np-pillar h3 { font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 1.25; color: var(--c-morado-deep); } /* 4 · Cómo funciona — recorrido */ .np-flow { background: #fff; } .np-flow .hp-eyebrow { color: var(--c-rosa); } .np-recorrido { position: relative; list-style: none; margin: 0 auto clamp(28px,4vw,44px); padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 980px; } .np-recorrido::before { content: ""; position: absolute; top: 28px; left: 12.5%; right: 12.5%; height: 3px; background: var(--c-lavanda); z-index: 0; } .np-rec { position: relative; z-index: 1; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0 6px; } .np-rec__num { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--c-morado); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 22px; } .np-rec h3 { font-family: var(--font-display); font-weight: 700; font-size: 16px; line-height: 1.2; color: var(--c-morado-deep); } /* 5 · Rutas (reusa hp-rcard) */ .np-routes-sec { background: var(--c-lavanda); } .np-routes-sec .hp-eyebrow { color: var(--c-morado); } .np-routes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: clamp(28px,4vw,44px); } .np-routes .hp-rcard { flex: initial; min-height: 0; } /* 6 · Quiénes hacen posible (logos) */ .np-socios { background: #fff; } .np-socios .hp-eyebrow { color: var(--c-rosa); } .np-logos { list-style: none; margin: 0 0 clamp(28px,4vw,44px); padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .np-logo { display: grid; place-items: center; background: #fff; border: 1px solid var(--color-borde); padding: 26px 20px; min-height: 110px; } .np-logo img { max-height: 80px; max-width: 72%; width: auto; object-fit: contain; } /* 7 · Impacto (stats) */ .np-impact { background: var(--c-lavanda); text-align: center; } .np-impact .hp-eyebrow { color: var(--c-morado); justify-content: center; } .np-impact h2 { color: var(--c-morado-deep); max-width: 24ch; margin: 12px auto 14px; } .np-impact__lead { color: var(--color-gris); font-size: var(--text-lead); max-width: 64ch; margin: 0 auto clamp(34px,4.5vw,52px); line-height: 1.55; } .np-stats { list-style: none; margin: 0 0 clamp(32px,4.5vw,48px); padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .np-stat { background: #fff; border: 1px solid var(--color-borde); padding: 28px 20px; } .np-stat__num { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 4vw, 3rem); line-height: 1; color: var(--c-morado); } .np-stat__unit { display: block; font-family: var(--font-display); font-weight: 800; font-size: 15px; color: var(--c-morado-deep); margin-top: 4px; } .np-stat p { font-size: var(--text-sm); color: var(--color-gris); margin-top: 10px; line-height: 1.45; } @media (max-width: 900px) { .np-pillars, .np-routes, .np-logos, .np-stats { grid-template-columns: repeat(2, 1fr); } .np-recorrido { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; max-width: 460px; } .np-recorrido::before { display: none; } } @media (max-width: 520px) { .np-pillars, .np-routes, .np-logos, .np-stats, .np-recorrido { grid-template-columns: 1fr; } } /* ===================================================================== BUSCADOR IA — lupa en el nav + popup (todas las páginas) ===================================================================== */ .nav__search { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto; border: 1px solid var(--color-borde); background: #fff; cursor: pointer; color: var(--color-texto-dark); transition: color .2s, border-color .2s, background .2s; } .nav__search svg { width: 20px; height: 20px; } .nav__search:hover { color: var(--color-corp); border-color: var(--color-corp-40); } .nav__search:focus-visible { outline: 3px solid var(--color-corp-40); outline-offset: 2px; } @media (max-width: 900px) { /* En móvil la lupa se queda visible junto al burger */ .nav__search { margin-left: auto; } .nav__search + .nav__burger { margin-left: 8px; } } /* ---- Popup ---- */ body.vp-ask-open { overflow: hidden; } .vp-ask { position: fixed; inset: 0; z-index: 200; display: grid; place-items: start center; padding: clamp(16px, 6vh, 84px) 16px 24px; opacity: 0; transition: opacity .22s var(--ease); } .vp-ask.is-open { opacity: 1; } .vp-ask[hidden] { display: none; } .vp-ask__backdrop { position: absolute; inset: 0; background: rgba(24, 8, 56, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .vp-ask__dialog { position: relative; width: min(720px, 100%); background: #FBFAFF; border: 1px solid var(--color-borde); box-shadow: 0 30px 80px rgba(24, 8, 56, .32); padding: clamp(24px, 4vw, 44px); transform: translateY(-12px) scale(.99); transition: transform .24s var(--ease); } .vp-ask.is-open .vp-ask__dialog { transform: none; } .vp-ask__x { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; display: grid; place-items: center; border: none; background: transparent; cursor: pointer; color: var(--color-gris); } .vp-ask__x svg { width: 22px; height: 22px; } .vp-ask__x:hover { color: var(--c-morado-deep); } .vp-ask__badge { display: inline-flex; align-items: center; gap: 8px; background: var(--c-morado-deep); color: #fff; font-weight: 800; font-size: 12px; letter-spacing: .06em; padding: 6px 12px; border-radius: var(--radius-pill); margin-bottom: 16px; } .vp-ask__title { font-size: clamp(1.5rem, 3.4vw, 2.2rem); line-height: 1.08; color: var(--c-morado-deep); margin-bottom: 22px; max-width: 22ch; } .vp-ask__title em { font-style: normal; color: var(--c-morado); } .vp-ask__form { display: flex; align-items: center; gap: 8px; background: #17111F; padding: 8px 8px 8px 20px; box-shadow: 0 10px 30px rgba(24, 8, 56, .18); } .vp-ask__input { flex: 1; min-width: 0; border: none; background: transparent; color: #fff; font-size: 16px; font-family: inherit; padding: 12px 0; } .vp-ask__input::placeholder { color: rgba(255,255,255,.55); } .vp-ask__input:focus { outline: none; } .vp-ask__send { flex: 0 0 auto; width: 48px; height: 48px; display: grid; place-items: center; border: none; cursor: pointer; color: #fff; background: var(--c-morado); transition: filter .2s, transform .2s, background .2s; } .vp-ask__send svg { width: 22px; height: 22px; } .vp-ask__send:hover { filter: brightness(1.06); transform: translateY(-1px); } .vp-ask__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; } .vp-ask__chip { border: 1px solid var(--color-borde); background: #fff; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--color-texto-dark); padding: 9px 16px; border-radius: var(--radius-pill); transition: all .2s; } .vp-ask__chip:hover { border-color: var(--color-corp); color: var(--color-corp); } .vp-ask__answer { margin-top: 20px; max-height: 46vh; overflow-y: auto; border-top: 1px solid var(--color-borde); padding-top: 20px; } .vp-ask__q { font-weight: 700; color: var(--c-morado-deep); font-size: 15px; margin-bottom: 10px; display: flex; gap: 8px; } .vp-ask__q::before { content: "Tú:"; opacity: .5; font-weight: 800; } .vp-ask__a { color: var(--color-texto-dark); font-size: 15.5px; line-height: 1.6; white-space: pre-wrap; } .vp-ask__a a { color: var(--color-corp); text-decoration: underline; } .vp-ask__typing { display: inline-flex; gap: 5px; padding: 4px 0; } .vp-ask__typing i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-morado); opacity: .35; animation: vpDot 1s infinite ease-in-out; } .vp-ask__typing i:nth-child(2) { animation-delay: .15s; } .vp-ask__typing i:nth-child(3) { animation-delay: .3s; } @keyframes vpDot { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } } .vp-ask__disc { margin-top: 16px; font-size: 12.5px; color: var(--color-gris); } @media (max-width: 520px) { .vp-ask__form { padding-left: 14px; } .vp-ask__title { margin-bottom: 18px; } } @media (prefers-reduced-motion: reduce) { .vp-ask, .vp-ask__dialog { transition: none; } .vp-ask__typing i { animation: none; } } /* Rutas generales: hero morado con mapa de líneas, como la nueva referencia visual. */ .hero--rutas-hub { min-height: clamp(500px, 50.2vw, 604px); align-items: flex-end; background: #6126FF; } .hero--rutas-hub .hero__grid { grid-template-columns: 1fr; padding-block: clamp(330px, 35vw, 500px) clamp(56px, 6vw, 72px); } .hero--rutas-hub .hero__copy { display: grid; grid-template-columns: minmax(500px, .98fr) minmax(300px, .62fr); gap: clamp(44px, 8vw, 96px); align-items: end; background: none; border: 0; box-shadow: none; padding: 0; -webkit-backdrop-filter: none; backdrop-filter: none; } .hero--rutas-hub h1 { max-width: 21.5ch; margin: 0; font-size: clamp(46px, 4.7vw, 56px); line-height: .95; letter-spacing: 0; } .hero--rutas-hub .hero__aside { max-width: 410px; padding-bottom: clamp(2px, .65vw, 8px); } .hero--rutas-hub .hero__sub { max-width: 42ch; margin-bottom: 26px; font-size: clamp(15px, 1.34vw, 18px); line-height: 1.4; opacity: .9; } .hero--rutas-hub .hero__cta { gap: 12px; } .hero--rutas-hub .btn { height: 48px; padding-inline: 28px; font-size: 15px; } .hero--rutas-hub .btn--ghost { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.54); } .hero--rutas-hub .hero__lines--rutas { inset: 0; z-index: 1; filter: none; } .hero--rutas-hub .hero__lines--rutas svg { position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; } .hero--rutas-hub .hero__lines .route-line { fill: none; stroke-width: 12; stroke-linecap: butt; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .hero--rutas-hub .route-line--purple { stroke: #330559; } .hero--rutas-hub .route-line--green { stroke: #00BD70; } .hero--rutas-hub .route-line--pink { stroke: #FF2B5E; } .hero--rutas-hub .route-line--yellow { stroke: #FFF21C; } /* Animación de entrada: las líneas se dibujan y las estaciones aparecen al paso. pathLength=1000 normaliza los guiones (vector-effect los mide en px de pantalla). */ .hero--rutas-hub .route-line { stroke-dasharray: 1500 1500; stroke-dashoffset: 1500; } .hero--rutas-hub .is-visible .route-line { animation: draw 1.9s var(--ease) forwards; } .hero--rutas-hub .is-visible .route-line--pink { animation-delay: .18s; } .hero--rutas-hub .is-visible .route-line--purple { animation-delay: .36s; } .hero--rutas-hub .is-visible .route-line--yellow { animation-delay: .54s; } .hero--rutas-hub .hero__station { scale: 0; } .hero--rutas-hub .is-visible .hero__station--top { animation: station-pop-hub .5s var(--ease) forwards .75s; } .hero--rutas-hub .is-visible .hero__station--mid { animation: station-pop-hub .5s var(--ease) forwards 1.15s; } @keyframes station-pop-hub { 0% { scale: 0; } 60% { scale: 1.25; } 100% { scale: 1; } } .hero--rutas-hub .hero__station { position: absolute; width: clamp(36px, 4vw, 44px); height: clamp(36px, 4vw, 44px); border-radius: 50%; background: #fff; box-shadow: 0 5px 14px rgba(26, 6, 70, .4); transform: translate(-50%, -50%); } .hero--rutas-hub .hero__station--top { left: 33.1%; top: 10%; } .hero--rutas-hub .hero__station--mid { left: 40.1%; top: 42.5%; } @media (max-width: 900px) { .hero--rutas-hub { min-height: 0; align-items: stretch; } .hero--rutas-hub .hero__lines--rutas { bottom: auto; height: clamp(210px, 56vw, 280px); } .hero--rutas-hub .hero__grid { padding-block: clamp(180px, 48vw, 260px) clamp(34px, 8vw, 52px); } .hero--rutas-hub .hero__copy { grid-template-columns: 1fr; gap: 18px; } .hero--rutas-hub h1 { max-width: 12.6ch; font-size: clamp(38px, 12vw, 58px); } .hero--rutas-hub .hero__aside { max-width: 520px; padding-bottom: 0; } .hero--rutas-hub .hero__sub { font-size: 15px; line-height: 1.42; } .hero--rutas-hub .hero__lines--rutas svg { width: 180%; transform: translateX(-26%); } .hero--rutas-hub .hero__station { width: 34px; height: 34px; } .hero--rutas-hub .hero__station--top { left: 33%; top: 8.8%; } .hero--rutas-hub .hero__station--mid { left: 3%; top: 42.5%; } } @media (max-width: 520px) { .hero--rutas-hub .hero__grid { padding-block: 210px 34px; } .hero--rutas-hub .hero__cta { align-items: stretch; flex-direction: column; } .hero--rutas-hub .btn { width: 100%; } .hero--rutas-hub .hero__lines--rutas svg { width: 220%; transform: translateX(-38%); } } /* ===================== Hero V2 (full-bleed: foto + panel violeta) ===================== */ .hero-v2 { position: relative; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); height: clamp(480px, 48.1vw, 760px); overflow: hidden; background: var(--color-corp); } /* Foto full-bleed (mitad izquierda) */ .hero-v2__photo { position: relative; overflow: hidden; } .hero-v2__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } /* Panel violeta corporativo (mitad derecha) */ .hero-v2__panel { position: relative; display: flex; align-items: center; overflow: hidden; background: var(--color-corp); background-image: linear-gradient(158deg, rgba(255,255,255,.05), rgba(0,0,0,.05)); } /* Card con glassmorphism (mismo tratamiento que Ruta Capital/Mercado): la línea decorativa queda por detrás y se difumina a través del vidrio. Colores sin cambios. */ .hero-v2__panel::before { content: ""; position: absolute; inset: clamp(28px, 3.4vw, 52px); z-index: 2; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.08); -webkit-backdrop-filter: blur(16px) saturate(115%); backdrop-filter: blur(16px) saturate(115%); box-shadow: var(--shadow-md); pointer-events: none; } .hero-v2__copy { position: relative; z-index: 3; padding: clamp(32px, 5.2vw, 84px) clamp(24px,3vw,56px) clamp(32px,5.2vw,84px) clamp(48px, 6.4vw, 116px); max-width: 612px; } .hero-v2__copy h1 { font-size: var(--text-display); line-height: 1.06; letter-spacing: -.01em; color: #fff; margin: 0 0 clamp(18px, 2vw, 26px); } .hero-v2__sub { font-size: clamp(15px, 1.3vw, 19px); line-height: 1.52; color: rgba(255,255,255,.87); max-width: 32em; margin: 0 0 clamp(24px, 2.6vw, 36px); } .hero-v2__cta { display: flex; gap: 14px; flex-wrap: wrap; } .hero-v2 .btn--onfill { background: #fff; color: var(--color-morado); } .hero-v2 .btn--onfill:hover { background: var(--color-morado); color: #fff; } .hero-v2 .btn--ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.55); } .hero-v2 .btn--ghost:hover { background: #fff; color: var(--color-corp); box-shadow: none; } /* Continuación de la línea de ruta sobre el panel (empalma con la línea de la foto) */ /* Detrás del vidrio (::before, z2): nítida en los márgenes de la tarjeta y difuminada a través del vidrio, como en Figma. */ .hero-v2__line { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: visible; } .hero-v2__line path { fill: none; stroke: var(--color-rosa); stroke-width: 10; stroke-linecap: round; } /* Capa "solo línea" sobre la foto: se revela con barrido izq→der y empalma con el trazado del panel (mismo mecanismo que Ruta Talento). */ .hero-v2__photo-line { position: absolute; inset: 0; pointer-events: none; clip-path: inset(0 100% 0 0); animation: talento-wipe .9s linear .15s forwards; } /* El panel arranca cuando el barrido de la foto llega al empalme. */ body[data-ruta="digitalizacion"] .hero-v2 .hero-v2__line path { animation: draw 1.3s var(--ease) 1.02s forwards; } /* Ruta Talento: Hero replicado desde Figma (foto izquierda + panel violeta). */ .hero-v2--talento { grid-template-columns: 41.35% 58.65%; height: clamp(420px, 47.95vw, 588px); background: var(--color-corp); } .hero-v2--talento .hero-v2__photo img { object-fit: cover; /* Anclada a la derecha: la línea horneada sale siempre por el mismo punto y empalma con la línea SVG del panel a cualquier ancho de viewport. */ object-position: right center; } /* Capa con solo la línea (extraída de la foto, oclusiones incluidas): se revela con un wipe de izquierda a derecha y empalma con el path del panel. */ .hero-v2--talento .hero-v2__photo-line { position: absolute; inset: 0; pointer-events: none; clip-path: inset(0 100% 0 0); animation: talento-wipe .9s linear .15s forwards; } @keyframes talento-wipe { to { clip-path: inset(0 0 0 0); } } .hero-v2--talento .hero-v2__photo-foreground { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; object-fit: cover; object-position: center center; pointer-events: none; } .hero-v2--talento .hero-v2__panel { background: #6126FF; background-image: radial-gradient(95% 52% at 46% 51%, rgba(128,85,255,.48), rgba(128,85,255,0) 64%), linear-gradient(158deg, rgba(255,255,255,.045), rgba(44,0,156,.09)); } .hero-v2--talento .hero-v2__panel::before { top: clamp(26px, 2.9vw, 44px); bottom: clamp(26px, 2.9vw, 44px); left: clamp(40px, 4.25vw, 64px); width: min(612px, calc(100% - clamp(80px, 8.5vw, 128px))); z-index: 3; border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.065); box-shadow: none; } .hero-v2--talento .hero-v2__copy { z-index: 4; width: 100%; max-width: 612px; padding: clamp(40px, 4.6vw, 62px) clamp(54px, 7.1vw, 108px) clamp(56px, 5.8vw, 76px) clamp(66px, 7vw, 116px); } .hero-v2--talento .hero-v2__copy h1 { max-width: 9em; font-size: clamp(44px, 4.65vw, 62px); line-height: 1.0; letter-spacing: 0; white-space: nowrap; margin-bottom: clamp(22px, 2.3vw, 34px); } .hero-v2--talento .hero-v2__sub { max-width: 36.5em; font-size: clamp(14px, 1.36vw, 18px); line-height: 1.42; color: #fff; opacity: .95; margin-bottom: clamp(22px, 2.4vw, 36px); } .hero-v2--talento .hero-v2__cta { gap: 10px; } .hero-v2--talento .btn { height: 38px; padding: 0 20px; gap: 9px; font-size: clamp(12px, 1.15vw, 15px); } .hero-v2--talento .btn--ghost { box-shadow: inset 0 0 0 1px rgba(255,255,255,.72); } .hero-v2--talento .hero-v2__line--talento { z-index: 2; filter: none; } .hero-v2--talento .hero-v2__line--talento path { stroke: #54b579; stroke-width: 13; stroke-linecap: round; stroke-linejoin: round; /* Se dibuja desde el empalme con la foto hacia la derecha al cargar el hero. pathLength="100" normaliza el dash; sin non-scaling-stroke el grosor escala junto con la línea horneada de la foto. */ stroke-dasharray: 101; stroke-dashoffset: 101; /* Arranca cuando el wipe de la foto llega al empalme (.15s + .9s). */ animation: draw 1.3s var(--ease) 1.02s forwards; } /* Rutas Capital y Mercado: Heroes Figma trabajados previamente. */ body[data-ruta="capital"] .hero--capital-v2, body[data-ruta="mercado"] .hero--mercado-v2 { background: var(--color-corp); min-height: clamp(520px, 44vw, 620px); } body[data-ruta="capital"] .hero--capital-v2 .hero__bg, body[data-ruta="mercado"] .hero--mercado-v2 .hero__bg { inset: 0 auto 0 0; width: 50%; } body[data-ruta="capital"] .hero--capital-v2 .hero__bg { width: calc(50% - 40px); } body[data-ruta="capital"] .hero--capital-v2 .hero__bg img, body[data-ruta="mercado"] .hero--mercado-v2 .hero__bg img { object-position: center center; } body[data-ruta="capital"] .hero--capital-v2 .hero__lines, body[data-ruta="mercado"] .hero--mercado-v2 .hero__lines { z-index: 1; filter: none; } body[data-ruta="capital"] .hero--capital-v2 .hero__lines svg, body[data-ruta="mercado"] .hero--mercado-v2 .hero__lines svg { position: absolute; inset: 0; width: 100%; height: 100%; } body[data-ruta="capital"] .hero--capital-v2 .hero__lines path, body[data-ruta="mercado"] .hero--mercado-v2 .hero__lines path { fill: none; stroke-width: 9; stroke-linecap: butt; stroke-linejoin: round; } body[data-ruta="capital"] .hero--capital-v2 .hero__lines path { stroke: var(--color-amarillo); } body[data-ruta="mercado"] .hero--mercado-v2 .hero__lines path { stroke: #330559; } /* La línea del hero se dibuja al cargar (pathLength=100 normaliza el dash). */ body[data-ruta="capital"] .hero--capital-v2 .hero__lines path, body[data-ruta="mercado"] .hero--mercado-v2 .hero__lines path, .hero-v2 .hero-v2__line path { stroke-dasharray: 101; stroke-dashoffset: 101; animation: draw 1.7s var(--ease) .25s forwards; } body[data-ruta="capital"] .hero--capital-v2 .hero__character { left: clamp(180px, 24vw, 400px); right: auto; bottom: 0; height: 90%; max-width: 42%; transform: translateX(-50%); filter: none; } body[data-ruta="mercado"] .hero--mercado-v2 .hero__character { left: clamp(210px, 28.5vw, 460px); right: auto; bottom: 0; height: 86%; max-width: 34%; transform: translateX(-50%); filter: none; } body[data-ruta="capital"] .hero--capital-v2 .container { max-width: var(--maxw); padding-inline: 0; } body[data-ruta="mercado"] .hero--mercado-v2 .container { max-width: none; padding-inline: clamp(52px, 5vw, 80px); } body[data-ruta="capital"] .hero--capital-v2 .hero__grid, body[data-ruta="mercado"] .hero--mercado-v2 .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(460px, 620px); justify-content: end; gap: clamp(28px, 4vw, 56px); padding-block: clamp(30px, 3vw, 44px); } body[data-ruta="capital"] .hero--capital-v2 .hero__copy, body[data-ruta="mercado"] .hero--mercado-v2 .hero__copy { position: relative; z-index: 3; grid-column: 2; justify-self: end; width: min(100%, 612px); max-width: 612px; background: rgba(255,255,255,.08); -webkit-backdrop-filter: blur(16px) saturate(115%); backdrop-filter: blur(16px) saturate(115%); border: 1px solid rgba(255,255,255,.22); box-shadow: var(--shadow-md); padding: clamp(28px, 3.2vw, 48px); } body[data-ruta="capital"] .hero--capital-v2 h1, body[data-ruta="mercado"] .hero--mercado-v2 h1 { color: #fff; font-size: clamp(3rem, 4.15vw, 3.8rem); line-height: .98; max-width: 13ch; letter-spacing: 0; margin-bottom: 22px; } body[data-ruta="capital"] .hero--capital-v2 .hero__sub, body[data-ruta="mercado"] .hero--mercado-v2 .hero__sub { color: #fff; font-size: clamp(.95rem, 1.05vw, 1.05rem); line-height: 1.45; max-width: 42ch; opacity: .94; margin-bottom: 26px; } body[data-ruta="capital"] .hero--capital-v2 .hero__cta, body[data-ruta="mercado"] .hero--mercado-v2 .hero__cta { gap: 12px; } body[data-ruta="capital"] .hero--capital-v2 .btn, body[data-ruta="mercado"] .hero--mercado-v2 .btn { min-height: 44px; padding-inline: 22px; } body[data-ruta="capital"] .hero--capital-v2 .btn--ruta, body[data-ruta="mercado"] .hero--mercado-v2 .btn--ruta { background: #fff; color: #220A40; } body[data-ruta="capital"] .hero--capital-v2 .btn--ghost, body[data-ruta="mercado"] .hero--mercado-v2 .btn--ghost { color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.62); } body[data-ruta="capital"] .hero--capital-v2 .btn--ghost:hover, body[data-ruta="mercado"] .hero--mercado-v2 .btn--ghost:hover { background: #fff; color: #220A40; } @media (max-width: 900px){ .hero-v2 { grid-template-columns: minmax(0,1fr); height: auto; } .hero-v2__photo { aspect-ratio: 636 / 500; } .hero-v2__panel::before { inset: 14px; } .hero-v2__line { display: none; } .hero-v2__copy { padding: clamp(28px,7vw,48px); max-width: none; } .hero-v2--talento .hero-v2__photo { aspect-ratio: 768 / 500; } .hero-v2--talento .hero-v2__panel::before { inset: 18px; width: auto; } .hero-v2--talento .hero-v2__copy { max-width: 612px; padding: clamp(38px, 9vw, 58px) clamp(30px, 8vw, 54px); } .hero-v2--talento .hero-v2__copy h1 { max-width: 10em; font-size: clamp(38px, 8.8vw, 56px); } .hero-v2--talento .hero-v2__sub { max-width: 42em; font-size: 15px; } body[data-ruta="capital"] .hero--capital-v2, body[data-ruta="mercado"] .hero--mercado-v2 { display: block; min-height: 0; padding-top: clamp(248px, 58vw, 360px); } body[data-ruta="capital"] .hero--capital-v2 .hero__bg, body[data-ruta="mercado"] .hero--mercado-v2 .hero__bg { inset: 0 0 auto 0; width: 100%; height: clamp(248px, 58vw, 360px); } body[data-ruta="capital"] .hero--capital-v2 .hero__bg::after, body[data-ruta="mercado"] .hero--mercado-v2 .hero__bg::after { background: linear-gradient(180deg, transparent 42%, rgba(97,38,255,.55) 76%, rgba(97,38,255,.98) 100%); } body[data-ruta="capital"] .hero--capital-v2 .hero__lines, body[data-ruta="mercado"] .hero--mercado-v2 .hero__lines { height: clamp(248px, 58vw, 360px); bottom: auto; overflow: hidden; } /* La línea usa viewBox 1200×560 con preserveAspectRatio="none": estirada al alto de la foto se aplastaría casi al doble (2.1× en 320px). En vez de eso se le da su proporción real y se centra, así se ve la curva COMPLETA igual que en desktop. `aspect-ratio` necesita width:100% (con width:auto el