/* ============================================================ Casos de éxito navegables — scrollytelling mobile-first Depende de los tokens de marca definidos en custom.css/theme.json (--impacta-crema, --impacta-tinta, --impacta-azul, etc.) ============================================================ */ .caso-main { overflow-x: clip; } /* ---- Escena (cada capítulo) ---- */ .caso-escena { position: relative; padding: clamp(3rem, 10vw, 6rem) 0; } .caso-escena.is-fullbleed { min-height: 100svh; display: grid; align-items: center; } .caso-escena > .caso-contenido { position: relative; z-index: 1; box-sizing: border-box; max-width: 760px; margin-inline: auto; padding-inline: clamp(1.1rem, 5vw, 2rem); width: 100%; overflow-wrap: break-word; } .caso-escena > .caso-contenido > * { max-width: 100%; } /* Fondo de escena a sangre + velo para contraste AA del texto */ .caso-bg { position: absolute; inset: 0; overflow: hidden; z-index: 0; } .caso-bg img { width: 100%; height: 100%; object-fit: cover; display: block; } .caso-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(24,28,35,.36) 0%, rgba(24,28,35,.52) 44%, rgba(24,28,35,.85) 100%); } .caso-escena.is-sobre-foto .caso-contenido { color: var(--impacta-crema); text-shadow: 0 2px 30px rgba(13,16,21,.55); } .caso-escena.is-sobre-foto h1, .caso-escena.is-sobre-foto h2 { color: var(--impacta-crema); } .caso-escena.is-sobre-foto .impacta-kicker { color: var(--impacta-amarillo); font-size: .95rem; letter-spacing: .16em; } /* Titulares de portada/cierre: más grandes y con más carácter */ .caso-escena.is-fullbleed h1 { font-size: clamp(2.9rem, 7.6vw, 5.6rem); line-height: 1.02; letter-spacing: -.015em; text-wrap: balance; } .caso-escena.is-fullbleed.is-sobre-foto h2 { font-size: clamp(2rem, 5.2vw, 3.5rem); line-height: 1.06; text-wrap: balance; } /* Alternancia de fondos en escenas sin foto */ .caso-escena.is-crema { background: var(--impacta-crema); } .caso-escena.is-marfil { background: var(--impacta-marfil); } .caso-escena.is-tinta { background: var(--impacta-tinta); color: var(--impacta-crema); } .caso-escena.is-tinta h2 { color: var(--impacta-crema); } /* ---- Reveal al entrar al viewport ---- El estado oculto se aplica SOLO cuando el JS añadió .caso-anim al . Sin JS (o si el JS falla), el contenido queda visible: nunca una página en blanco. */ .caso-anim .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; } .caso-anim .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .caso-anim .reveal { opacity: 1; transform: none; transition: none; } } /* ---- Chips de métricas ---- */ .caso-chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.6rem; } .caso-chip { display: inline-flex; align-items: baseline; gap: .4rem; font-family: 'Clash Display', 'Satoshi', sans-serif; font-weight: 600; font-size: .95rem; padding: .55rem 1rem; border-radius: 999px; background: var(--impacta-azul-suave); color: var(--impacta-tinta); } .is-sobre-foto .caso-chip, .is-tinta .caso-chip { background: rgba(18,22,28,.46); color: var(--impacta-crema); text-shadow: none; } /* Cifra grande (cuenta hacia arriba) */ .caso-cifra { font-family: 'Hanken Grotesk', 'Clash Display', sans-serif; font-weight: 700; font-variant-numeric: tabular-nums; } .caso-chip .caso-cifra { font-size: 1.15rem; line-height: 1; } .caso-cifra--xl { display: block; font-size: clamp(2.6rem, 9vw, 4.5rem); line-height: 1; } /* ---- Progreso de capítulos: móvil = barra superior ---- */ .caso-progreso { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; gap: 2px; height: 4px; } .caso-progreso button { flex: 1; height: 100%; border: 0; padding: 0; cursor: pointer; border-radius: 0; background: rgba(51,51,51,.20); transition: background .3s ease; } .caso-progreso button[aria-current="true"] { background: var(--impacta-naranjo); } /* ---- Módulo de impacto: visual + pasos ---- */ .caso-impacto__visual { margin-bottom: 1.6rem; } .caso-impacto__pasos > * + * { margin-top: 1.4rem; } /* Grilla de tipos de cambio (Santiago) */ .caso-cambios { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; } .caso-cambio { background: var(--impacta-marfil); border-radius: 12px; padding: 1rem; border-top: 3px solid var(--impacta-azul); } .caso-cambio svg { width: 26px; height: 26px; stroke: var(--impacta-carbon); stroke-width: 1.5; } .caso-cambio p { margin: .5rem 0 0; font-size: .9rem; } /* ---- Voces: carrusel horizontal con snap ---- */ .caso-voces { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; margin-inline: calc(-1 * clamp(1.1rem, 5vw, 2rem)); padding-inline: clamp(1.1rem, 5vw, 2rem); scrollbar-width: thin; } .caso-voz { scroll-snap-align: start; flex: 0 0 84%; max-width: 420px; background: var(--impacta-marfil); border-radius: 14px; padding: 1.5rem; border-top: 4px solid var(--impacta-azul); color: var(--impacta-carbon); } .caso-voces > .caso-voz:nth-child(3n+2) { border-top-color: var(--impacta-naranjo); } .caso-voces > .caso-voz:nth-child(3n+3) { border-top-color: var(--impacta-amarillo); } .caso-voz blockquote { font-family: 'Clash Display', sans-serif; font-size: 1.1rem; line-height: 1.4; margin: 0 0 .9rem; } .caso-voz cite { font-style: normal; font-size: .85rem; color: var(--impacta-naranjo-oscuro); } /* ---- Gráfico pre/post (SVG inline) — barras que crecen con scaleY (robusto) ---- */ .caso-grafico { width: 100%; max-width: 440px; height: auto; } .caso-grafico .caso-barra { transform: scaleY(0); transform-origin: bottom; transform-box: fill-box; transition: transform .9s cubic-bezier(.2,.7,.2,1); } .caso-grafico.is-visible .caso-barra { transform: scaleY(1); } @media (prefers-reduced-motion: reduce) { .caso-grafico .caso-barra { transform: none; transition: none; } } /* ---- Escritorio (≥768px): riel lateral + sticky data moment ---- */ @media (min-width: 768px) { .caso-progreso { top: 50%; right: 20px; left: auto; bottom: auto; transform: translateY(-50%); height: auto; width: 12px; flex-direction: column; gap: 11px; } .caso-progreso button { width: 11px; height: 11px; border-radius: 50%; flex: none; background: rgba(51,51,51,.30); } .is-sobre-foto + .caso-progreso button, .caso-progreso button { box-shadow: 0 0 0 2px rgba(255,255,255,.5); } .caso-impacto { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; } .caso-impacto__visual { position: sticky; top: 96px; margin-bottom: 0; } .caso-cambios { grid-template-columns: repeat(2, 1fr); } .caso-voz { flex-basis: 360px; } }