/**
 * Soluciones (hub, soluciones.php). Base: HTML de Lucía (volts360-soluciones-2.html).
 * Va bajo .vmp-sol; lo común está en landing.css (.vmp-land). Imágenes en volts360-mp/soluciones/.
 */

.vmp-sol .head--760 { max-width: 760px; }
.vmp-sol .head--780 { max-width: 780px; }

/* ---------- Hero ---------- */
.vmp-sol .hero { position: relative; min-height: 600px; display: grid; place-items: start center; overflow: hidden; background: var(--night); isolation: isolate; text-align: center; }
.vmp-sol .hero__bg, .vmp-sol .hero__grid, .vmp-sol .hero__glow { position: absolute; inset: 0; z-index: -1; }
.vmp-sol .hero__bg { background: url(soluciones/hero-bg.webp) center 58% / cover no-repeat; opacity: .62; transform: scale(1.06); animation: vmp-sol-heroZoom 14s var(--ease) forwards; }
.vmp-sol .hero__grid { background: url(soluciones/hero-grid.webp) center / cover no-repeat; mix-blend-mode: screen; }
.vmp-sol .hero__glow { background: radial-gradient(60% 50% at 50% 82%, rgba(47, 217, 192, .14), transparent 70%); }
.vmp-sol .hero__content { max-width: 1000px; padding: 110px var(--gutter) 96px; }
.vmp-sol .crumb { display: flex; justify-content: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; list-style: none; }
.vmp-sol .crumb a { text-decoration: none; opacity: .75; }
.vmp-sol .crumb a:hover { opacity: 1; text-decoration: underline; }
.vmp-sol .crumb li + li::before { content: "/"; margin-right: 8px; opacity: .6; }
.vmp-sol .hero h1 { margin-top: 20px; font-size: clamp(32px, 3.4vw, 52px); line-height: 1.04; font-weight: 400; letter-spacing: -.01em; color: #fff; }
.vmp-sol .hero h1 strong { display: block; font-weight: 800; color: var(--teal); }
.vmp-sol .hero__lead { margin: 20px auto 0; max-width: 720px; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.6; font-weight: 500; text-wrap: pretty; }
.vmp-sol .hero__ctas { display: flex; gap: 16px; justify-content: center; margin-top: 41px; flex-wrap: wrap; }
.vmp-sol .arr--down { display: inline-block; transition: transform .25s var(--ease); }
.vmp-sol .btn:hover .arr--down { transform: translateY(3px); }
.vmp-sol .hero [data-in] { opacity: 0; transform: translateY(14px); animation: vmp-sol-rise .9s var(--ease) forwards; }
.vmp-sol .hero [data-in="1"] { animation-delay: .1s; }
.vmp-sol .hero [data-in="3"] { animation-delay: .42s; }
.vmp-sol .hero [data-in="4"] { animation-delay: .6s; }
.vmp-sol .hero [data-in="5"] { animation-delay: .8s; }
@keyframes vmp-sol-rise { to { opacity: 1; transform: none; } }
@keyframes vmp-sol-heroZoom { to { transform: scale(1); } }
/* Titular: palabras escalonadas (--wi lo pone soluciones.js) */
.vmp-sol.is-js .split .w { display: inline-block; opacity: 0; transform: translateY(.45em) rotate(3deg); animation: vmp-sol-wordIn .75s var(--ease) forwards; animation-delay: calc(.15s + var(--wi, 0) * 70ms); }
@keyframes vmp-sol-wordIn { to { opacity: 1; transform: none; } }
.vmp-sol .jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 28px; }
.vmp-sol .jump a { padding: 9px 15px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(6, 16, 14, .35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-size: 13px; font-weight: 600; text-decoration: none; transition: background .25s, border-color .25s, transform .25s var(--ease); }
.vmp-sol .jump a:hover, .vmp-sol .jump a:focus-visible { background: var(--teal); border-color: var(--teal); transform: translateY(-2px); }


/* ---------- Tarjetas de soluciones (bento) ---------- */
.vmp-sol .sols { background: var(--ink); padding-top: clamp(72px, 8vw, 110px); }
.vmp-sol .bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; margin-top: 52px; }
.vmp-sol .sol { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 26px; background: linear-gradient(180deg, #0c1f1f, #061212); border: 1px solid rgba(10, 158, 158, .45); transform-style: preserve-3d; transition: border-color .35s, transform .5s var(--ease), box-shadow .45s; scroll-margin-top: 110px; }
.vmp-sol .sol:hover { border-color: rgba(47, 217, 192, .8); transform: translateY(-4px); box-shadow: 0 40px 70px -40px rgba(10, 158, 158, .55); }
.vmp-sol.is-js .sol[data-reveal] { transform: translateY(34px) scale(.97); }
.vmp-sol.is-js .sol[data-reveal].is-in { transform: none; }
.vmp-sol .sol__body { position: relative; z-index: 1; padding: clamp(24px, 2.8vw, 36px); }
.vmp-sol .sol__name { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: var(--aqua); }
.vmp-sol .sol__ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: rgba(47, 217, 192, .1); border: 1px solid rgba(47, 217, 192, .35); }
.vmp-sol .sol .sol__title { margin-top: 18px; font-size: clamp(24px, 2.1vw, 30px); line-height: 1.12; font-weight: 700; letter-spacing: -.01em; text-wrap: balance; }
.vmp-sol .sol .sol__text { margin: 12px 0 2px; max-width: 52ch; font-size: 15.5px; line-height: 1.55; color: #b7c9c7; }
.vmp-sol .sol__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-size: 15px; font-weight: 800; color: #fff; text-decoration: none; }
.vmp-sol .sol__link::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: 26px; }
.vmp-sol .sol__link:focus-visible { outline: none; }
.vmp-sol .sol:has(.sol__link:focus-visible) { outline: 2px solid var(--aqua); outline-offset: 4px; }
.vmp-sol .sol__link .arr { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--teal); transition: transform .3s var(--ease), background .3s; }
.vmp-sol .sol:hover .sol__link .arr { transform: translateX(5px); background: #0bb3b3; }
.vmp-sol .sol__media { position: relative; flex: none; margin-top: auto; height: var(--mh, 290px); overflow: hidden; }
.vmp-sol .sol__media img { translate: 0 var(--par, 0px); transition: transform .8s var(--ease); }

.vmp-sol .sol--ia { grid-column: span 7; }
.vmp-sol .sol--ia .sol__media { --mh: 300px; }
.vmp-sol .sol--ia .sol__media img { position: absolute; left: clamp(24px, 2.8vw, 36px); top: 34px; width: calc(100% + 40px); max-width: none; height: auto; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .6)); }
.vmp-sol .sol--ia:hover .sol__media img { transform: translate(-10px, -8px); }
.vmp-sol .badge { position: absolute; right: clamp(24px, 2.8vw, 36px); top: 14px; z-index: 1; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: #fff; color: var(--ink); font-size: 13px; font-weight: 600; box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .6); }
.vmp-sol .badge b { color: var(--teal-d); font-size: 15px; white-space: nowrap; }

.vmp-sol .sol--exp { grid-column: span 5; background: linear-gradient(180deg, #e9f6f5 0%, #d4eeec 100%); border-color: rgba(10, 158, 158, .35); color: var(--dark-text); }
.vmp-sol .sol--exp .sol__name { color: var(--teal-d); }
.vmp-sol .sol--exp .sol__ico { background: rgba(10, 158, 158, .12); border-color: rgba(10, 158, 158, .35); }
.vmp-sol .sol--exp .sol__text { color: #3e5755; }
.vmp-sol .sol--exp .sol__link { color: var(--dark-text); }
.vmp-sol .sol--exp .sol__link .arr { color: #fff; }
.vmp-sol .sol--exp .sol__media { --mh: 300px; }
.vmp-sol .sol--exp .sol__media img { position: absolute; left: 50%; top: 6px; width: min(300px, 74%); height: auto; transform: translateX(-50%); mix-blend-mode: multiply; }
.vmp-sol .sol--exp:hover .sol__media img { transform: translate(-50%, -10px); }
.vmp-sol .sol--exp.spot::before { background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(10, 158, 158, .14), transparent 65%); }


/* Panel: fila completa en horizontal (con 3 soluciones queda sola debajo de IA + Experiencia) */
.vmp-sol .sol--panel { grid-column: span 12; flex-direction: row; align-items: center; background: linear-gradient(90deg, #0c1f1f 0%, #0a3434 100%); }
.vmp-sol .sol--panel .sol__body { flex: 0 0 40%; }
.vmp-sol .sol--panel .sol__media { --mh: 340px; flex: 1; align-self: stretch; margin-top: 0; perspective: 1200px; }
.vmp-sol .sol--panel .sol__media img { position: absolute; left: clamp(24px, 2.8vw, 36px); top: 30px; width: calc(100% + 20px); max-width: none; height: auto; border-radius: 14px; border: 1px solid rgba(47, 217, 192, .5); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7); transform: rotateX(10deg) rotateZ(-1.5deg); transform-origin: top left; }
.vmp-sol .sol--panel:hover .sol__media img { transform: rotateX(4deg) rotateZ(-.5deg) translateY(-8px); }


/* ---------- Ticker ---------- */
.vmp-sol .ticker { position: relative; overflow: hidden; padding: 22px 0; background: #061110; border-top: 1px solid rgba(10, 158, 158, .25); border-bottom: 1px solid rgba(10, 158, 158, .25); }
.vmp-sol .ticker::before, .vmp-sol .ticker::after { content: ""; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 1; pointer-events: none; }
.vmp-sol .ticker::before { left: 0; background: linear-gradient(90deg, #061110, transparent); }
.vmp-sol .ticker::after { right: 0; background: linear-gradient(270deg, #061110, transparent); }
.vmp-sol .ticker__track { display: flex; width: max-content; animation: vmp-sol-tick 45s linear infinite; }
.vmp-sol .ticker:hover .ticker__track { animation-play-state: paused; }
.vmp-sol .ticker span { display: inline-flex; align-items: center; font-size: clamp(18px, 1.8vw, 24px); font-weight: 300; color: var(--mist); white-space: nowrap; padding-right: 28px; }
.vmp-sol .ticker span::after { content: ""; width: 7px; height: 7px; margin-left: 28px; border-radius: 50%; background: var(--aqua); box-shadow: 0 0 12px var(--aqua); }
@keyframes vmp-sol-tick { to { transform: translateX(-50%); } }

/* ---------- Cómo encajan ---------- */
.vmp-sol .flow { background: linear-gradient(180deg, var(--ink) 30%, #0a6e6c 140%); }
.vmp-sol .flow .eyebrow { color: var(--teal); }
.vmp-sol .filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 36px; }
.vmp-sol .filter { position: relative; overflow: hidden; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(120, 204, 200, .35); background: transparent; color: #dfe8e7; font: 600 14px/1 var(--font); cursor: pointer; transition: background .25s, border-color .25s, color .25s; }
.vmp-sol .filter:hover { border-color: var(--aqua); color: #fff; }
.vmp-sol .filter[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); color: #fff; }
.vmp-sol .filters.is-auto .filter[aria-pressed="true"]::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: rgba(255, 255, 255, .7); transform-origin: left; animation: vmp-sol-fprog var(--fdur, 2.8s) linear forwards; }
@keyframes vmp-sol-fprog { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.vmp-sol .stages-card { margin-top: 28px; background: var(--abyss); border: 1px solid rgba(10, 158, 158, .55); border-radius: 26px; padding: clamp(28px, 3.4vw, 44px) clamp(22px, 2.6vw, 34px); }
.vmp-sol .stages { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; position: relative; }
.vmp-sol .rail2 { position: absolute; top: 9px; left: 9px; right: calc((100% - 100px) / 6 - 9px); height: 2px; background: repeating-linear-gradient(90deg, rgba(10, 158, 158, .6) 0 2px, transparent 2px 6px); pointer-events: none; }
.vmp-sol .rail2__fill { position: absolute; inset: 0; background: var(--teal); transform-origin: left; transform: scaleX(0); transition: transform 2s var(--ease); }
.vmp-sol .stages-card.is-live .rail2__fill { transform: scaleX(1); }
.vmp-sol .stage { min-width: 0; transition: opacity .35s; }
.vmp-sol .sdot { position: relative; z-index: 1; display: block; width: 20px; height: 20px; border-radius: 50%; background: var(--abyss); border: 2px solid var(--teal); margin-bottom: 18px; transition: background .3s, box-shadow .3s, transform .3s var(--ease); }
.vmp-sol .stages-card.is-live .sdot { background: var(--aqua); box-shadow: 0 0 0 5px rgba(47, 217, 192, .15); }
.vmp-sol .stage h3 { font-size: 15px; font-weight: 700; line-height: 1.3; }
.vmp-sol .stage ul { list-style: none; margin-top: 12px; display: grid; gap: 8px; }
.vmp-sol .stage li[data-sol] { padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .02); font-size: 13.5px; line-height: 1.4; color: #dfe8e7; transition: opacity .45s, border-color .45s, background .45s, transform .45s var(--ease); }
.vmp-sol .stage li i { display: block; margin-bottom: 3px; font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--aqua); }
.vmp-sol .stages[data-f]:not([data-f="all"]) li[data-sol] { opacity: .22; }
.vmp-sol .stages[data-f]:not([data-f="all"]) li[data-sol].match { opacity: 1; border-color: var(--aqua); background: rgba(47, 217, 192, .08); transform: translateY(-2px); }
.vmp-sol .stages[data-f]:not([data-f="all"]) .stage:not(.has-match) .sdot { background: var(--abyss); box-shadow: none; transform: scale(.8); }
.vmp-sol .stages[data-f]:not([data-f="all"]) .stage:not(.has-match) h3 { opacity: .4; }
.vmp-sol .stages[data-f]:not([data-f="all"]) .stage.has-match .sdot { transform: scale(1.2); box-shadow: 0 0 0 7px rgba(47, 217, 192, .2); }
.vmp-sol .flow__status { margin-top: 20px; font-size: 13px; color: var(--muted); text-align: center; min-height: 1.2em; }

/* ---------- CTA final (bloque del tema volts/footer-cta) ---------- */
.vmp-page-soluciones .volts-footer-cta .volts-footer-cta__background { object-position: center 60%; }

/* ---------- Capturas del panel (bloque volts/media-showcase traído de IA) ---------- */
/* En móvil y tablet, carrusel común con IA y Panel: ver "Carrusel de capturas" en overrides.css. */

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
	.vmp-sol .sol--ia { grid-column: span 12; }
	.vmp-sol .sol--exp { grid-column: span 12; }
	.vmp-sol .stages { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 32px; }
	.vmp-sol .rail2 { display: none; }
}

@media (max-width: 960px) {
	.vmp-sol .sol--panel { flex-direction: column; align-items: stretch; background: linear-gradient(180deg, #0c1f1f, #061212); }
	.vmp-sol .sol--panel .sol__body { flex: none; }
	.vmp-sol .sol--panel .sol__media { --mh: 300px; flex: none; margin-top: auto; }
}

@media (max-width: 760px) {
	.vmp-sol .stages { grid-template-columns: 1fr; gap: 0; }
	.vmp-sol .rail2 { display: block; top: 10px; bottom: 10px; left: 9px; right: auto; width: 2px; height: auto; background: repeating-linear-gradient(180deg, rgba(10, 158, 158, .6) 0 2px, transparent 2px 6px); }
	.vmp-sol .rail2__fill { transform: scaleY(0); transform-origin: top; }
	.vmp-sol .stages-card.is-live .rail2__fill { transform: scaleY(1); }
	.vmp-sol .stage { display: grid; grid-template-columns: 20px 1fr; column-gap: 16px; padding-bottom: 24px; }
	.vmp-sol .stage:last-child { padding-bottom: 0; }
	.vmp-sol .sdot { grid-row: 1 / span 2; margin: 0; }
	.vmp-sol .stage ul { grid-column: 2; }
	.vmp-sol .filters { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter); scrollbar-width: none; }
	.vmp-sol .filters::-webkit-scrollbar { display: none; }
	.vmp-sol .filter { flex: none; }
}

@media (max-width: 640px) {
	.vmp-sol .hero { min-height: auto; }
	.vmp-sol .hero__content { padding: 64px var(--gutter) 72px; }
	.vmp-sol .crumb { font-size: 11px; }
	.vmp-sol .hero__ctas { flex-direction: column; align-items: stretch; margin-top: 32px; }
	.vmp-sol .jump { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter); scrollbar-width: none; }
	.vmp-sol .jump::-webkit-scrollbar { display: none; }
	/* Son 3-4 pastillas: mejor en dos líneas centradas que en una fila con scroll que no se
	 * ve (la 3.ª quedaba fuera de pantalla sin ninguna pista). */
	.vmp-sol .filters, .vmp-sol .jump { flex-wrap: wrap; justify-content: center; overflow: visible; margin-inline: 0; padding-inline: 0; }
	/* Filtros de "Cómo encajan" en 2 filas (Todas + IA / Experiencia + Panel) en vez de 3. */
	.vmp-sol .filters { gap: 8px; }
	.vmp-sol .filter { padding: 0 12px; font-size: 13px; }
	.vmp-sol .jump a { flex: none; }
	.vmp-sol .sol--ia .sol__media, .vmp-sol .sol--panel .sol__media { --mh: 220px; }
	.vmp-sol .badge { left: 20px; right: 20px; top: 10px; justify-content: center; font-size: 12px; }
	.vmp-sol .ticker span { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
	.vmp-sol .ticker__track { animation: none; }
	.vmp-sol.is-js .split .w { opacity: 1 !important; transform: none !important; }
}