/* rogelioguz.com — landing nueva (borrador). Paleta oficial RG de 7 colores: Deep Navy, Midnight, Teal, Aqua, Mint, Soft White, Pale Mint. El coral solo es de Claudio. */
@font-face { font-family: "Sora"; src: url("assets/fonts/sora-semibold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Sora"; src: url("assets/fonts/sora-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("assets/fonts/inter-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --navy: #0a1128; --midnight: #0d1b3d; --deep: #081026;
  --teal: #0ea5a3; --aqua: #22d8c5; --mint: #a7f3d0; --paper: #fafcfb;
  --pale: #e8f7f1;
  --coral: var(--teal); --coral-l: var(--aqua); --coral-d: var(--teal);
  --ink-soft: rgba(10, 17, 40, 0.72);
  --paper-soft: rgba(250, 252, 251, 0.78);
  --rule-dark: rgba(250, 252, 251, 0.16);
  --rule-light: rgba(10, 17, 40, 0.13);
  --sora: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --inter: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gutter: clamp(20px, 4vw, 56px);
  --max: 1280px;
  --nav-h: 64px;
  --ease: cubic-bezier(.5, 0, .2, 1);
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); -webkit-text-size-adjust: 100%; background: var(--navy); }
body { background: var(--paper); color: var(--navy); font: 400 clamp(16px, 1.15vw, 18px)/1.65 var(--inter); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; }
ul, ol { list-style: none; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.dark :focus-visible, .nav :focus-visible, .foot :focus-visible { outline-color: var(--mint); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--paper); color: var(--navy); padding: 10px 14px; z-index: 100; font-family: var(--sora); }
.skip:focus { left: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
section { position: relative; }
.sec { padding-block: clamp(60px, 8vw, 112px); }
.light, .paper { background: var(--paper); color: var(--navy); }
.pale { background: var(--pale); color: var(--navy); isolation: isolate; }
.mid { background: var(--midnight); }
.dark { background: var(--navy); color: var(--paper); }
.dark--mid { background: var(--midnight); }
.dark p, .dark li { color: var(--paper-soft); }
/* Fondo navy profundo con luz suave y grano */
/* Direcciones de arte del manual: Soft Geometry, Tech Minimalism, Human-Centered AI, Gradient Energy */
.geo { overflow: hidden; }
.geo::before, .geo::after { content: ""; position: absolute; z-index: -1; pointer-events: none; border-radius: 72px; }
.geo::before { width: min(46vw, 520px); height: min(38vw, 420px); right: -8vw; top: -6%; background: rgba(14, 165, 163, .12); transform: rotate(14deg); }
.geo::after { width: min(30vw, 340px); height: min(26vw, 280px); left: -6vw; bottom: -4%; background: rgba(167, 243, 208, .75); transform: rotate(-10deg); }
.geo--r::before { right: auto; left: -8vw; transform: rotate(-12deg); } .geo--r::after { left: auto; right: -6vw; transform: rotate(9deg); }
.tech { background: radial-gradient(rgba(250, 252, 251, .085) 1px, transparent 1.4px) 0 0 / 26px 26px, var(--navy); }
.orb { background: radial-gradient(620px 520px at 82% 40%, rgba(14, 165, 163, .34), transparent 66%), radial-gradient(420px 360px at 8% 100%, rgba(34, 216, 197, .12), transparent 70%), var(--midnight); }
.grad { background: radial-gradient(900px 520px at 100% 0%, rgba(34, 216, 197, .28), transparent 60%), linear-gradient(135deg, #0a1128 0%, #0d1b3d 52%, #0b5a63 130%); }
.lines { background: repeating-linear-gradient(115deg, rgba(34, 216, 197, .07) 0 1px, transparent 1px 26px), var(--navy); }

/* Tipografía */
.display, h1, h2 { font: 600 clamp(2rem, 5vw, 4rem)/1.02 var(--sora); letter-spacing: -0.01em; overflow-wrap: break-word; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 6vw, 5.4rem); line-height: .98; max-width: 17ch; color: var(--paper); }
h3 { font: 600 clamp(1.05rem, 1.5vw, 1.3rem)/1.25 var(--sora); letter-spacing: -0.01em; }
p { max-width: 62ch; }
em { font-style: normal; }
h2 em { color: var(--teal); }
.dark h2 em { color: var(--aqua); }
.eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; font: 500 12px/1 var(--inter); letter-spacing: 0.15em; text-transform: uppercase; color: rgba(10, 17, 40, .6); }
.eyebrow::before { content: ""; width: 34px; height: 1px; background: var(--coral); flex: none; }
.dark .eyebrow { color: var(--mint); }
.dark .eyebrow::before { background: var(--coral-l); }

/* Botones */
.btn { display: inline-flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 30px; background: linear-gradient(180deg, #3ee8d5, #1fcab8); color: var(--navy); font: 600 15px/1 var(--sora); letter-spacing: 0.02em; text-decoration: none; border: 0; border-radius: 999px; cursor: pointer; box-shadow: 0 12px 28px -12px rgba(34, 216, 197, .75), inset 0 1px 0 rgba(255, 255, 255, .5); transition: transform .2s ease, box-shadow .2s ease; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -12px rgba(34, 216, 197, .85), inset 0 1px 0 rgba(255, 255, 255, .5); }
.btn .arr { display: inline-block; transition: transform 0.2s ease; }
.btn:hover .arr { transform: translateX(5px); }
.btn--sm { min-height: 42px; padding: 0 20px; font-size: 13px; }
.btn--ghost { background: transparent; color: var(--paper); border: 1px solid rgba(34, 216, 197, .7); box-shadow: none; }
.btn--ghost:hover { background: rgba(34, 216, 197, .14); box-shadow: none; }
.link-alt { color: inherit; text-decoration-line: underline; text-decoration-color: var(--coral); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* Navegación */
.nav { position: sticky; top: 0; z-index: 50; background: var(--navy); border-bottom: 1px solid var(--rule-dark); transition: background-color .35s ease, -webkit-backdrop-filter .35s ease, backdrop-filter .35s ease; }
.nav.is-scrolled { background: rgba(10, 17, 40, .72); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); }
.nav__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--nav-h); }
.nav__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--paper); }
.nav__brand img { height: 28px; width: auto; }
.nav__brand span { font: 400 10.5px/1 var(--sora); letter-spacing: 0.3em; text-transform: uppercase; color: rgba(250, 252, 251, 0.62); }
.nav__links { display: none; gap: 32px; }
.nav__links a { font: 400 13.5px/1 var(--sora); letter-spacing: 0.04em; color: var(--paper-soft); text-decoration: none; padding: 8px 0; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.nav__links a:hover { border-bottom-color: var(--coral-l); color: var(--paper); }
@media (min-width: 860px) { .nav__links { display: flex; } }
@media (max-width: 480px) { .nav__brand span { display: none; } .btn--sm { padding: 0 14px; font-size: 12.5px; } }

/* Marcos de foto. La <img> tapa el marco cuando el archivo existe. */
.ph { position: relative; overflow: hidden; aspect-ratio: var(--r, 3/2); background-color: var(--midnight); background-image: repeating-linear-gradient(135deg, rgba(167, 243, 208, 0.05) 0 1px, transparent 1px 11px); }
.ph img, .ph video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--midnight); }
.ph__label { position: absolute; left: 22px; right: 22px; bottom: 22px; display: grid; gap: 8px; font: 400 12.5px/1.45 var(--inter); letter-spacing: 0.02em; color: rgba(250, 252, 251, 0.82); }
.ph__label b { font: 600 11px/1 var(--sora); letter-spacing: 0.18em; color: var(--aqua); }
.ph__label i { font-style: normal; color: rgba(250, 252, 251, 0.55); }

/* Hero */
.hero { background: var(--navy); min-height: calc(100svh - var(--nav-h)); min-height: max(580px, calc(100svh - var(--nav-h))); display: flex; align-items: flex-end; overflow: hidden; }
.hero .ph { position: absolute; inset: 0; aspect-ratio: auto; }
.hero__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(8, 16, 38, .95) 0%, rgba(8, 16, 38, .66) 38%, rgba(8, 16, 38, .14) 74%), linear-gradient(to right, rgba(8, 16, 38, .6) 0%, rgba(8, 16, 38, 0) 58%), radial-gradient(700px 400px at 90% 100%, rgba(14, 165, 163, .22), transparent 70%); pointer-events: none; }
.hero h1 { font-size: clamp(2.1rem, 4.6vw, 4.2rem); max-width: 16ch; }
.hero h1 em { color: var(--paper); background: linear-gradient(transparent 84%, var(--aqua) 84% 95%, transparent 95%); }
.hero__body { position: relative; z-index: 2; padding-block: 0 clamp(40px, 6vw, 80px); width: 100%; }
.hero__sub { margin-top: 26px; font: 400 clamp(1.1rem, 1.8vw, 1.5rem)/1.45 var(--inter); color: var(--paper); max-width: 34ch; }
.hero__row { margin-top: 34px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.facts { display: flex; gap: 8px; font: 400 12px/1 var(--sora); letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper); }
.facts span { padding: 9px 14px; border: 1px solid rgba(250, 252, 251, .28); border-radius: 999px; background: rgba(250, 252, 251, .08); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hero__cl { display: none; position: absolute; z-index: 2; right: clamp(220px, 20vw, 320px); bottom: -22px; overflow: visible; width: clamp(190px, 18vw, 280px); height: auto; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .4)); }
@media (min-width: 900px) { .hero__cl { display: block; } }
/* Globo de diálogo de Claudio (escritorio) y su versión en línea (celular) */
.hero__say { display: none; position: absolute; z-index: 3; right: calc(clamp(220px, 20vw, 320px) + clamp(190px, 18vw, 280px) / 2 - 150px); bottom: calc(clamp(190px, 18vw, 280px) * .56 + 14px); width: 300px; align-items: center; gap: 12px; padding: 14px 18px; background: var(--paper); color: var(--navy); border-radius: 18px; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .55); font: 500 14.5px/1.35 var(--sora); }
.hero__say::after { content: ""; position: absolute; left: 50%; bottom: -9px; width: 18px; height: 18px; background: var(--paper); border-radius: 3px; transform: translateX(-50%) rotate(45deg); }
.hero__say img, .hero__say-m img { flex: none; }
.hero__say b, .hero__say-m b { font-weight: 600; }
@media (min-width: 900px) { .hero__say { display: flex; } }
.hero__say-m { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 10px 16px; background: var(--paper); color: var(--navy); border-radius: 14px; font: 500 14px/1.3 var(--sora); }
@media (min-width: 900px) { .hero__say-m { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  .js .hero__say { animation: say-in .6s cubic-bezier(.3, 1.4, .5, 1) 1s both; transform-origin: 50% 100%; }
}
@keyframes say-in { from { opacity: 0; transform: translateY(8px) scale(.9); } to { opacity: 1; transform: none; } }
/* Claudio del hero: quieto; parpadea, respira y mueve un poco las patitas */
@media (prefers-reduced-motion: no-preference) {
  .hero__cl .cl-legs rect { transform-box: fill-box; transform-origin: 50% 0; animation: hcl-tap 4s ease-in-out infinite; }
  .hero__cl .cl-legs rect:nth-child(2) { animation-delay: .25s; }
  .hero__cl .cl-legs rect:nth-child(3) { animation-delay: .5s; }
  .hero__cl .cl-legs rect:nth-child(4) { animation-delay: .75s; }
  .hero__cl .cl-wig { animation: none; }
}
@keyframes hcl-tap { 0%, 30%, 100% { transform: translateY(0); } 15% { transform: translateY(-3px); } }
@media (max-width: 700px) { .hero .ph img { object-position: 50% 50%; } }

/* Aparición escalonada al entrar en vista */
@media (prefers-reduced-motion: no-preference) {
  .js .rv { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1); }
  .js .rv.in { opacity: 1; transform: none; }
  .js .hero__in > * { animation: rise .9s cubic-bezier(.2, .7, .2, 1) both; }
  .js .hero__in > :nth-child(2) { animation-delay: .12s; } .js .hero__in > :nth-child(3) { animation-delay: .24s; }
  .js .hero .ph img { animation: kb 2.8s cubic-bezier(.2, .6, .2, 1) both; }
  @keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
  @keyframes kb { from { transform: scale(1.07); } to { transform: scale(1); } }
}

/* Layouts */
.split { display: grid; gap: 40px 64px; }
@media (min-width: 960px) { .split { grid-template-columns: 5fr 7fr; } }

/* Testimonios (ocultos con data-testimonios="off") */
.quotes { margin-top: 48px; display: grid; gap: 40px; }
@media (min-width: 760px) { .quotes { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
.quote .ph { --r: 4/5; border-radius: 18px; }
.quote blockquote { margin-top: 20px; font: 400 1.05rem/1.55 var(--inter); color: var(--ink-soft); }
.quote cite { display: block; margin-top: 14px; font: 600 13px/1.5 var(--sora); font-style: normal; letter-spacing: 0.02em; }
.quote cite span { display: block; font-weight: 400; color: var(--ink-soft); }
.todo-txt { border-left: 3px solid var(--coral); padding-left: 14px; }
body[data-testimonios="off"] #testimonios { display: none; }
/* Galería (oculta con data-galeria="off"; el padding vive aquí, no en línea) */
#galeria { padding-block: clamp(48px, 7vw, 96px); }
body[data-galeria="off"] #galeria { display: none; }

/* Para quién */
.para { background: radial-gradient(640px 320px at 100% 0%, rgba(14, 165, 163, .10), transparent 70%), var(--paper); }
.voice { display: grid; counter-reset: v; }
.voice li { counter-increment: v; display: grid; grid-template-columns: 3.2ch 1fr; align-items: baseline; gap: 14px; padding-block: 28px; border-top: 1px solid var(--rule-light); font: 600 clamp(1.25rem, 2.5vw, 2.05rem)/1.2 var(--sora); letter-spacing: -0.02em; color: var(--navy); max-width: 30ch; overflow-wrap: break-word; }
.voice li:last-child { border-bottom: 1px solid var(--rule-light); }
.voice li::before { content: "0" counter(v); font: 600 .78rem/1 var(--sora); letter-spacing: .14em; color: var(--coral-d); }
.voice-wrap { display: grid; gap: 28px; }
@media (min-width: 960px) { .voice-wrap { grid-template-columns: 5fr 7fr; gap: 72px; } }
.proof { margin-top: 24px; max-width: 34ch; color: var(--ink-soft); }

/* Equipo */
.bio { display: grid; gap: 40px 72px; align-items: center; }
@media (min-width: 900px) { .bio { grid-template-columns: 5fr 6fr; } }
.bio .ph { --r: 4/5; border-radius: 24px; box-shadow: 0 40px 70px -36px rgba(10, 17, 40, .55), 0 0 0 1px rgba(10, 17, 40, .06); }
.bio h2 { margin-bottom: 24px; }
.bio p + p { margin-top: 16px; }
.bio__lead { font: 400 clamp(1.15rem, 1.8vw, 1.45rem)/1.5 var(--inter); }
.bio p { color: var(--ink-soft); }
.bio .bio__lead { color: var(--navy); }
.dark .bio p { color: var(--paper-soft); }
.dark .bio .bio__lead { color: var(--paper); }

/* FAQ */
details { border-top: 1px solid var(--rule-light); }
details:last-of-type { border-bottom: 1px solid var(--rule-light); }
summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; font: 600 clamp(1rem, 1.5vw, 1.2rem)/1.3 var(--sora); letter-spacing: -0.01em; transition: color .2s; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; flex: none; width: 16px; height: 16px; background: linear-gradient(var(--coral-d), var(--coral-d)) center / 100% 2px no-repeat, linear-gradient(var(--coral-d), var(--coral-d)) center / 2px 100% no-repeat; transition: transform 0.25s ease; }
details[open] summary::after { background: linear-gradient(var(--coral-d), var(--coral-d)) center / 100% 2px no-repeat; transform: rotate(180deg); }
summary:hover { color: var(--coral-d); }
details > div { padding: 0 0 26px; color: var(--ink-soft); max-width: 62ch; }
details > div p + p { margin-top: 12px; }

/* Pie */
.foot { background: var(--deep); color: var(--paper-soft); padding-block: 48px 88px; border-top: 1px solid var(--rule-dark); }
.foot__in { display: grid; gap: 28px; }
@media (min-width: 760px) { .foot__in { grid-template-columns: auto 1fr auto; align-items: center; gap: 48px; } }
.foot img { height: 34px; width: auto; }
.foot ul { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 0.95rem; }
.foot a { text-decoration-color: var(--coral-l); text-underline-offset: 4px; }
.foot small { font: 400 12px/1.5 var(--sora); letter-spacing: 0.08em; color: rgba(250, 252, 251, 0.6); text-transform: uppercase; }

/* ---------- Carrusel horizontal ---------- */
.car__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: clamp(28px, 3.4vw, 44px); }
.car__ctl { display: flex; align-items: center; gap: 10px; }
.car__count { font: 600 13px/1 var(--sora); letter-spacing: 0.12em; margin-right: 8px; min-width: 4ch; }
.car__btn { display: none; place-items: center; width: 46px; height: 46px; background: transparent; color: inherit; border: 1px solid var(--rule-light); border-radius: 50%; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; }
.car__btn--dark { border-color: var(--rule-dark); }
.car__btn:hover:not(:disabled) { background: var(--navy); color: var(--paper); }
.car__btn--dark:hover:not(:disabled) { background: var(--aqua); color: var(--navy); }
.car__btn:disabled { opacity: 0.35; cursor: default; }
@media (min-width: 760px) { .car__btn { display: grid; } }
.track { position: relative; display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; padding: 6px var(--gutter) 30px; scroll-padding-inline: var(--gutter); scrollbar-width: thin; scrollbar-color: var(--teal) transparent; }
@media (min-width: 1368px) { .track { padding-inline: calc((100vw - var(--max)) / 2 + var(--gutter)); scroll-padding-inline: calc((100vw - var(--max)) / 2 + var(--gutter)); } }
.track:focus-visible { outline-offset: -3px; }
.card { flex: 0 0 min(85vw, 400px); scroll-snap-align: start; background: var(--navy); color: var(--paper); display: grid; align-content: start; gap: 8px; border-radius: 22px; }
.dark .track { scrollbar-color: var(--aqua) transparent; }
.card--photo { flex-basis: auto; padding: 0; background: none; }
.card--photo .ph { height: clamp(260px, 32vw, 440px); aspect-ratio: var(--r); border-radius: 18px; }

/* Tarjetas de Metodología: claras, cada una con su tinte */
.card--m { flex-basis: min(82vw, 346px); padding: 10px; background: var(--paper); color: var(--navy); gap: 0; border: 1px solid rgba(10, 17, 40, .07); box-shadow: 0 1px 2px rgba(10, 17, 40, .05), 0 24px 44px -26px rgba(10, 17, 40, .28); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.card--m:hover { transform: translateY(-5px); box-shadow: 0 2px 4px rgba(10, 17, 40, .06), 0 34px 54px -26px rgba(10, 17, 40, .34); }
.card__panel { background: var(--pale); border-radius: 14px; overflow: hidden; }
.p-geo { background: var(--pale); }
.p-dots { background: radial-gradient(rgba(250, 252, 251, .16) 1px, transparent 1.4px) 0 0 / 18px 18px, var(--navy); }
.p-mint { background: linear-gradient(160deg, var(--pale), var(--mint)); }
.p-lines { background: repeating-linear-gradient(115deg, rgba(34, 216, 197, .14) 0 1px, transparent 1px 18px), var(--midnight); }
.p-grad { background: radial-gradient(260px 200px at 100% 0%, rgba(34, 216, 197, .5), transparent 70%), linear-gradient(135deg, var(--navy), var(--midnight) 50%, #0b5a63 140%); }
.card__art { width: 100%; height: auto; display: block; }
.card__body { padding: 16px 12px 20px; display: grid; gap: 6px; align-content: start; }
.card--m .card__n { font: 600 clamp(2.8rem, 4vw, 3.6rem)/1 var(--sora); letter-spacing: -0.05em; color: var(--teal); margin: 0 0 6px; max-width: none; }
.card--m h3 { color: var(--navy); font-size: clamp(1.15rem, 1.7vw, 1.4rem); }
.card--m p { color: var(--ink-soft); max-width: 30ch; font-size: .98rem; line-height: 1.55; }

/* Claudio (compartido por todas las escenas) */
.cl-bob { animation: bob 3.4s ease-in-out infinite alternate; }
.cl-eye { transform-box: fill-box; transform-origin: center; animation: blink 5.5s infinite; }
.cl-armL, .cl-armR { transform-box: fill-box; transition: transform .6s var(--ease); }
.cl-armL, .cl-armL .cl-wig { transform-origin: 100% 50%; }
.cl-armR, .cl-armR .cl-wig { transform-origin: 0 50%; --s: -1; }
.cl-wig { transform-box: fill-box; animation: wig 3s ease-in-out infinite alternate; }
.cl-wig--b { animation-delay: -1.4s; }
.cl-main { transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes bob { to { transform: translateY(-3px); } }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.08); } }
@keyframes wig { to { transform: rotate(calc(5deg * var(--s, 1))); } }

/* ---------- Animaciones de las láminas de Metodología (una vez al entrar; quedan en su estado final) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-anim] svg *:not([transform]), .js [data-anim] .card__art *:not([transform]) { transform-box: fill-box; }
  .mc-arm { transform-origin: 0 50%; }
  /* 1 · oficina */
  .js .a-office .lap-screen { transform-origin: 50% 100%; transform: scaleY(0.04); transition: transform 800ms var(--ease); }
  .js .a-office .lap-lines { opacity: 0; transition: opacity 600ms ease 750ms; }
  .js .a-office .pin { opacity: 0; transform: translateY(-40px); transition: transform .8s cubic-bezier(.3, 1.6, .5, 1) 1s, opacity .3s ease 1s; }
  .js .a-office .pin-ring { opacity: 0; transform: scale(.3); transform-origin: center; }
  .js .is-in .a-office .lap-screen { transform: none; }
  .js .is-in .a-office .lap-lines, .js .is-in .a-office .pin { opacity: 1; transform: none; }
  .js .is-in .a-office .pin-ring { animation: ring 2.6s ease-out 1.6s infinite; }
  .js .is-in .a-office .mc-arm { animation: wave 1.5s ease-in-out 1.2s infinite alternate; }
  @keyframes ring { 0% { opacity: .9; transform: scale(.3); } 80%, 100% { opacity: 0; transform: scale(1.3); } }
  @keyframes wave { to { transform: rotate(-30deg); } }
  /* 2 · pizarra */
  .js .a-board .bline { transform-origin: 0 50%; transform: scaleX(0); transition: transform 700ms var(--ease); transition-delay: calc(var(--i) * 450ms + 200ms); }
  .js .a-board .hl { transform-origin: 0 50%; transform: scaleX(0); transition: transform 600ms var(--ease) 1.1s; }
  .js .a-board .dot { opacity: 0; transform: scale(0); transform-origin: center; transition: transform .4s cubic-bezier(.3, 1.6, .5, 1), opacity .3s; transition-delay: calc(var(--i) * 450ms); }
  .js .is-in .a-board .bline, .js .is-in .a-board .hl, .js .is-in .a-board .dot { transform: none; opacity: 1; }
  .js .a-board .cursor { opacity: 0; }
  .js .is-in .a-board .cursor { animation: cur 3.6s ease-in-out 1.6s infinite; }
  @keyframes cur { 0%, 100% { opacity: 1; transform: translate(0, 0); } 50% { opacity: 1; transform: translate(-70px, -52px); } }
  /* 3 · hoja en vivo */
  .js .a-sheet .hlg { opacity: 0; transition: opacity .5s ease .5s; }
  .js .is-in .a-sheet .hlg { opacity: 1; animation: walk 6s cubic-bezier(.45, 0, .2, 1) 1s infinite; }
  .js .a-sheet .cell-val { transform-origin: 0 50%; }
  .js .is-in .a-sheet .cell-val { animation: type 1.6s steps(7) 1s infinite alternate; }
  @keyframes walk { 0%, 18% { transform: translate(0, 0); } 25%, 43% { transform: translate(82px, 0); } 50%, 68% { transform: translate(82px, 28px); } 75%, 93% { transform: translate(0, 28px); } 100% { transform: translate(0, 0); } }
  @keyframes type { from { transform: scaleX(.1); } to { transform: scaleX(1); } }
  /* 4 · cada quien con su archivo */
  .js .a-rows .row { transform: translateX(var(--dx)); opacity: 0.45; transition: transform 700ms var(--ease), opacity 700ms ease; transition-delay: calc(var(--i) * 110ms); }
  .js .is-in .a-rows .row { transform: none; opacity: 1; }
  .js .a-rows .ptr { transform: translate(61px, 172px); transition: opacity .4s; opacity: 0; }
  .js .is-in .a-rows .ptr { opacity: 1; animation: hop3 6s cubic-bezier(.5, 0, .2, 1) 1.2s infinite; }
  @keyframes hop3 { 0%, 25% { transform: translate(61px, 172px); } 33%, 58% { transform: translate(160px, 172px); } 66%, 91% { transform: translate(259px, 172px); } 100% { transform: translate(61px, 172px); } }
  /* 5 · se van con su flujo */
  .js .a-flow .f-in, .js .a-flow .f-cl, .js .a-flow .f-tbl { opacity: 0; transform: translateY(10px); transition: opacity .6s ease, transform .6s var(--ease); }
  .js .a-flow .f-in { transition-delay: .1s; } .js .a-flow .f-cl { transition-delay: .6s; } .js .a-flow .f-tbl { transition-delay: 1.2s; }
  .js .a-flow .f-arr { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .5s ease; }
  .js .a-flow .f-arr--1 { transition-delay: .4s; } .js .a-flow .f-arr--2 { transition-delay: 1s; }
  .js .a-flow .trw { opacity: 0; transition: opacity .3s ease; transition-delay: calc(1.6s + var(--k) * .22s); }
  .js .a-flow .chk-ring { transform: scale(0); transform-origin: center; transition: transform .5s cubic-bezier(.3, 1.6, .5, 1) 2.5s; }
  .js .a-flow .chk-mark { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .4s ease 2.8s; }
  .js .a-flow .conf rect { opacity: 0; }
  .js .is-in .a-flow .f-in, .js .is-in .a-flow .f-cl, .js .is-in .a-flow .f-tbl { opacity: 1; transform: none; }
  .js .is-in .a-flow .f-arr, .js .is-in .a-flow .chk-mark { stroke-dashoffset: 0; }
  .js .is-in .a-flow .trw { opacity: 1; }
  .js .is-in .a-flow .chk-ring { transform: none; }
  .js .is-in .a-flow .conf rect { animation: conf 1.1s ease-out 2.6s both; }
  @keyframes conf { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0; transform: translate(var(--cx), var(--cy)) rotate(200deg); } }
}

/* ---------- Casos: un bootcamp, varias soluciones ---------- */
#h-caso { max-width: 20ch; }
.cases__head { margin-bottom: clamp(28px, 4vw, 52px); }
.lede { font: 400 clamp(1.05rem, 1.7vw, 1.3rem)/1.5 var(--inter); color: var(--paper-soft); max-width: 40ch; margin-top: 18px; }
.cases { display: grid; gap: 22px; }
.case__photo { margin: 0; }
.case__photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 100%; border-radius: 22px; background: var(--midnight); box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .75); }
.case__photo figcaption { margin-top: 12px; font: 400 13px/1.4 var(--inter); letter-spacing: .02em; color: var(--paper-soft); }
.cases__list { display: grid; gap: 22px; min-width: 0; }
.case { min-width: 0; padding: clamp(16px, 2.2vw, 28px); background: linear-gradient(180deg, rgba(250, 252, 251, .07), rgba(250, 252, 251, .025)); border: 1px solid rgba(250, 252, 251, .13); box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .7); border-radius: 26px; }
.case__head { margin-bottom: 16px; }
.case__tag { display: inline-flex; margin-bottom: 12px; padding: 7px 12px; border: 1px solid rgba(34, 216, 197, .55); border-radius: 999px; font: 500 11px/1 var(--inter); letter-spacing: .15em; text-transform: uppercase; color: var(--aqua); max-width: none; }
.case__t { display: flex; align-items: baseline; gap: 14px; font-size: clamp(1.25rem, 2.3vw, 1.9rem); line-height: 1.15; color: var(--paper); letter-spacing: -0.01em; }
.case__n { font: 600 .85rem/1 var(--sora); letter-spacing: .12em; color: var(--aqua); }
.stage { position: relative; border-radius: 20px; overflow: hidden; border: 1px solid rgba(250, 252, 251, .1); background: radial-gradient(120% 90% at 50% 0%, rgba(14, 165, 163, .22), transparent 62%), radial-gradient(rgba(250, 252, 251, .07) 1px, transparent 1.3px) 0 0 / 22px 22px, #0d1b3d; }
.scene__svg, .vid__svg { display: block; width: 100%; height: auto; }

/* Video explicativo (caso 1): la escena la fija main.js con data-s="0..7" */
.vid .stage { aspect-ratio: 480 / 300; }

/* Piezas del video */
.vs { transform: translate(var(--x), var(--y)) rotate(var(--r)); opacity: 0; transition: transform .9s var(--ease) calc(var(--i) * .12s), opacity .45s ease calc(var(--i) * .12s); }
.vs__in { animation: vfloat 3.2s ease-in-out infinite alternate; animation-delay: var(--fd); }
.cb { opacity: 0; animation: cblink 2.4s steps(1) infinite; animation-delay: var(--b); }
.vid .cl { opacity: 0; transform: translateY(70px) scale(.85); transition: opacity .5s ease, transform .8s cubic-bezier(.3, 1.4, .5, 1); transform-box: view-box; transform-origin: 0 40px; }
.orbx { opacity: .3; transition: opacity .8s ease; }
.ghost, .ghost-t { opacity: .5; transition: opacity .6s ease; }
.vid:is([data-s="3"], [data-s="4"], [data-s="5"], [data-s="6"], [data-s="7"]) :is(.ghost, .ghost-t) { opacity: 0; }
.ring, .appb, .env, .bk, .bit, .spk, .qb, .rl, .cp-i, .pn, .pr, .al, .rls, .alr { opacity: 0; }
.cp-l { fill: none; stroke: var(--aqua); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 5 5; opacity: 0; }
.appb { transform: translateY(-64px); }
.qb, .rl { transform: translate(var(--x), var(--y)); }
.pn { transform-box: view-box; transform-origin: 240px 176px; transform: scale(.15); }
.bk { transform: translate(var(--x), var(--y)); }
.spk { transform: translate(var(--sx), var(--sy)) scale(0); }
.cl-armL, .cl-armR { transition: transform .5s var(--ease); }

/* 0 · un Excel de entrada */
.vid[data-s="0"] .vs--A { opacity: 1; animation: sin .9s var(--ease) both; }
.vid[data-s="1"] .vs--A, .vid[data-s="2"] .vs--A { opacity: 1; }
/* 1 · varios Excel de fórmulas, a mano */
.vid[data-s="1"] .vs--F, .vid[data-s="2"] .vs--F { opacity: 1; }
.vid[data-s="1"] .vs--F { animation: fin .8s var(--ease) calc(var(--i) * .32s + .2s) both; }
.vid[data-s="1"] .cp-l, .vid[data-s="1"] .cp-i { opacity: 1; transition: opacity .4s ease 1.4s; }
.vid[data-s="1"] .cp-l { animation: dash 1s linear infinite; }
.vid[data-s="1"] .cp-i { animation: cphop 1.2s ease-in-out infinite alternate; animation-delay: calc(var(--k) * .25s); }
/* 2 · reglas que nadie recordaba */
.vid[data-s="2"] .qb { opacity: 1; animation: qpop .6s cubic-bezier(.3, 1.6, .5, 1) calc(var(--k) * .22s + .3s) both, qbob 1.8s ease-in-out calc(var(--k) * .22s + 1s) infinite alternate; }
.vid[data-s="2"] .rl { opacity: 1; transform: translate(calc(var(--x) + var(--dx) / 4), calc(var(--y) + 38px)) rotate(calc(var(--k) * 5deg - 7deg)); transition: transform .8s var(--ease) calc(var(--k) * .2s), opacity .4s ease calc(var(--k) * .2s); }
/* 3 · las fórmulas se vuelven una app (Claudio) */
.vid[data-s="3"] .vs--A, .vid[data-s="3"] .vs--F, .vid[data-s="4"] .vs--F, .vid[data-s="4"] .vs--A { opacity: 0; transform: translate(240px, 214px) scale(.15); }
.vid[data-s="3"] .vs--A, .vid[data-s="3"] .vs--F { transition-delay: calc(var(--i) * .1s); }
.vid:is([data-s="3"], [data-s="4"], [data-s="5"], [data-s="6"], [data-s="7"]) .cl { opacity: 1; transform: none; }
.vid:is([data-s="3"], [data-s="4"], [data-s="5"], [data-s="6"], [data-s="7"]) .orbx { opacity: .95; }
.vid[data-s="3"] .bk { animation: bkfly 1.9s var(--ease) calc(var(--i) * .17s + .25s) both; }
.vid[data-s="3"] .cl-eye { animation: none; transform: scaleY(.4); }
.vid[data-s="3"] .appb { animation: pop .7s cubic-bezier(.3, 1.6, .5, 1) 1.6s both; }
.vid[data-s="4"] .appb { opacity: 1; }
.vid[data-s="3"] .cl-armL, .vid[data-s="3"] .cl-armR { transform: rotate(calc(16deg * var(--s, 1))); }
/* 4 · subes el Excel de entrada */
.vid[data-s="4"] .vs--A { animation: ain 2.6s var(--ease) both; }
.vid[data-s="4"] .ring { animation: ringp 1.5s ease-out 1.5s infinite; }
.vid[data-s="4"] .cl-eye { animation: none; transform: scaleY(.4); transition: transform .3s ease 1.3s; }
.vid[data-s="4"] .bit { animation: bit 1.3s ease-out infinite; animation-delay: calc(var(--bd) + 1.7s); }
.vid[data-s="4"] .spk { animation: spk 1.4s ease-out infinite; animation-delay: calc(var(--k) * .3s + 1.6s); }
.vid[data-s="4"] .cl-armL, .vid[data-s="4"] .cl-armR { transform: rotate(calc(16deg * var(--s, 1))); }
/* 5 · el resultado, claro y con colores */
.vid[data-s="5"] .cl-armL { transform: rotate(40deg); } .vid[data-s="5"] .cl-armR { transform: rotate(-40deg); }
.vid[data-s="5"] .pn { opacity: 1; transform: translateY(22px) scale(1.15); transition: transform .9s cubic-bezier(.3, 1.3, .5, 1), opacity .4s ease; }
.vid[data-s="5"] .pr { opacity: 1; animation: rowin .5s var(--ease) calc(var(--k) * .28s + .8s) both; }
.vid[data-s="5"] .al--1 { opacity: 1; animation: popa .6s cubic-bezier(.3, 1.6, .5, 1) 2.2s both; }
.vid[data-s="5"] .al--2 { opacity: 1; animation: popa .6s cubic-bezier(.3, 1.6, .5, 1) 3s both; }
.vid[data-s="5"] .rls { opacity: 1; animation: rowin .6s var(--ease) 3.6s both; }
.vid[data-s="5"] .alr { opacity: 1; animation: alp 1.1s ease-in-out 2.4s infinite alternate; }
/* 6 · listo para mandarlo por correo */
.vid[data-s="6"] .pn { opacity: 1; transform: translateY(22px) scale(1.15); animation: fold 1s var(--ease) .2s both; }
.vid[data-s="6"] .pr, .vid[data-s="6"] .al, .vid[data-s="6"] .rls, .vid[data-s="6"] .alr { opacity: 1; }
.vid[data-s="6"] .env { animation: envfly 2.8s var(--ease) 1s both; }
.vid[data-s="6"] .cl-armL { transform: rotate(40deg); } .vid[data-s="6"] .cl-armR { transform: rotate(-40deg); }
.vid[data-s="6"] .cl-main { animation: hop .7s ease-out 1.6s 1 both; }
/* 7 · varios Excel menos */
.vid[data-s="7"] .cl-armL { transform: rotate(48deg); } .vid[data-s="7"] .cl-armR { transform: rotate(-48deg); }
.vid[data-s="7"] .vs--A { opacity: 1; transform: translate(80px, 226px) rotate(-4deg) scale(.9); transition: none; animation: none; }
.vid[data-s="7"] .pn { opacity: 1; transform: translateY(-4px) scale(.5); transition: transform .9s var(--ease) .2s, opacity .5s ease .2s; }
.vid[data-s="7"] .pr, .vid[data-s="7"] .al, .vid[data-s="7"] .rls, .vid[data-s="7"] .alr { opacity: 1; }
.vid[data-s="7"] .ring { opacity: 1; transform-box: fill-box; transform-origin: center; transform: scale(1.5); stroke-opacity: .5; }
.vid[data-s="7"] .cl-main { animation: hop .8s ease-out .2s 2 both; }
.vid[data-s="7"] .spk { animation: spk 1.6s ease-out infinite; animation-delay: calc(var(--k) * .25s); }
.al text { font-size: 15.5px; }
.rls text { font-size: 9px; }
.scene:not(.is-vis) * { animation-play-state: paused !important; }
.scene.is-reset .stage, .scene.is-reset .stage * { transition: none !important; animation: none !important; }
.vid, .scene { --ease: cubic-bezier(.5, 0, .2, 1); }

@keyframes vfloat { to { transform: translateY(-4px) rotate(1.4deg); } }
@keyframes cblink { 0%, 50% { opacity: 0; } 58%, 80% { opacity: .9; } 100% { opacity: 0; } }
@keyframes sin { from { opacity: 0; transform: translate(calc(var(--x) - 70px), calc(var(--y) + 30px)) rotate(-18deg) scale(.7); } to { opacity: 1; transform: translate(var(--x), var(--y)) rotate(var(--r)); } }
@keyframes fin { from { opacity: 0; transform: translate(var(--x), calc(var(--y) + 46px)) rotate(calc(var(--r) + 12deg)) scale(.7); } to { opacity: 1; transform: translate(var(--x), var(--y)) rotate(var(--r)); } }
@keyframes dash { to { stroke-dashoffset: -20; } }
@keyframes cphop { to { transform: translate(5px, -5px); } }
@keyframes qpop { from { opacity: 0; transform: translate(var(--x), var(--y)) scale(0); } to { opacity: 1; transform: translate(var(--x), var(--y)) scale(1); } }
@keyframes qbob { to { transform: translate(var(--x), calc(var(--y) - 6px)) scale(1.06); } }
@keyframes bkfly { 0% { opacity: 0; transform: translate(var(--x), var(--y)) scale(.4); } 25% { opacity: 1; transform: translate(var(--x), calc(var(--y) - 10px)) scale(1.1); } 100% { opacity: 0; transform: translate(240px, 212px) scale(.25); } }
@keyframes chomp { from { transform: scaleY(1); } to { transform: scaleY(.45); } }
@keyframes scan { from { transform: translateX(0); } to { transform: translateX(200px); } }
@keyframes pop { from { opacity: 0; transform: translateY(-64px) scale(.3); } to { opacity: 1; transform: translateY(-64px) scale(1); } }
@keyframes popa { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
.al { transform-box: fill-box; transform-origin: center; }
@keyframes ain { 0% { opacity: 0; transform: translate(-50px, 150px) rotate(-14deg) scale(.9); } 25% { opacity: 1; transform: translate(90px, 150px) rotate(-6deg) scale(1.05); } 60% { opacity: 1; transform: translate(190px, 190px) rotate(0) scale(.7); } 100% { opacity: 0; transform: translate(240px, 214px) scale(.15); } }
@keyframes ringp { 0% { opacity: .9; transform: scale(.5); transform-box: fill-box; transform-origin: center; } 100% { opacity: 0; transform: scale(2.4); transform-box: fill-box; transform-origin: center; } }
@keyframes bit { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--bx), -52px) rotate(120deg); } }
@keyframes spk { 0% { opacity: 0; transform: translate(var(--sx), var(--sy)) scale(0) rotate(0); } 30% { opacity: 1; transform: translate(var(--sx), calc(var(--sy) - 8px)) scale(1) rotate(40deg); } 100% { opacity: 0; transform: translate(var(--sx), calc(var(--sy) - 26px)) scale(.4) rotate(90deg); } }
@keyframes rowin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes alp { to { stroke-width: 4; } }
@keyframes fold { 0% { transform: translateY(22px) scale(1.15); opacity: 1; } 100% { transform: translateY(40px) scale(.12); opacity: 0; } }
@keyframes envfly { 0% { opacity: 0; transform: translate(240px, 150px) scale(.2); } 25% { opacity: 1; transform: translate(240px, 130px) scale(1.15); } 50% { opacity: 1; transform: translate(240px, 124px) scale(1); } 100% { opacity: 0; transform: translate(540px, 10px) rotate(14deg) scale(.7); } }
@keyframes hop { 0% { transform: translateY(0); } 35% { transform: translateY(-14px); } 100% { transform: translateY(0); } }

/* Caso 2: dos hojas, líneas que emparejan, Claudio y la tarjeta con las diferencias */
.scene { display: grid; align-content: start; min-width: 0; }
.case--c2 .stage { aspect-ratio: 600 / 380; }
/* Mazo de pasos: tarjetas que se deslizan; la del centro manda, las de los lados giran y se asoman */
.deck { margin-top: 16px; min-width: 0; }
.scene { grid-template-columns: minmax(0, 1fr); }
.deck__track { display: flex; gap: 12px; margin: 0; padding: 10px 11% 16px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; perspective: 900px; outline: none; }
.deck__track::-webkit-scrollbar { display: none; }
.deck__track:focus-visible { box-shadow: 0 0 0 2px var(--aqua); border-radius: 22px; }
.dk { flex: 0 0 78%; scroll-snap-align: center; display: grid; align-content: start; gap: 10px; padding: 20px 22px 22px; border-radius: 20px; background: linear-gradient(160deg, rgba(34, 216, 197, .16), rgba(250, 252, 251, .04) 55%), var(--midnight); border: 1px solid rgba(34, 216, 197, .5); box-shadow: 0 24px 40px -26px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .08); transition: transform .55s cubic-bezier(.3, 1.2, .4, 1), opacity .4s ease, border-color .4s, filter .4s; }
.dk.is-prev, .dk.is-next { opacity: .42; border-color: rgba(250, 252, 251, .12); filter: saturate(.4); cursor: pointer; }
.dk.is-prev { transform: rotateY(22deg) rotateZ(-2deg) scale(.88); transform-origin: 100% 50%; }
.dk.is-next { transform: rotateY(-22deg) rotateZ(2deg) scale(.88); transform-origin: 0 50%; }
.dk.is-next:hover, .dk.is-prev:hover { opacity: .7; }
.dk__k { display: flex; align-items: center; gap: 10px; margin: 0; font: 600 12px/1 var(--sora); letter-spacing: .14em; text-transform: uppercase; color: var(--aqua); max-width: none; }
.dk__n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--aqua); color: var(--navy); letter-spacing: 0; font-size: 12px; }
.dk__t { margin: 0; font: 500 clamp(1rem, 1.45vw, 1.1rem)/1.55 var(--inter); color: var(--paper); max-width: none; }
.deck__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 4px; padding-inline: 4px; }
.deck__dots { display: flex; gap: 8px; }
.deck__dot { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; background: none; border: 0; cursor: pointer; }
.deck__dot i { position: relative; display: block; width: 8px; height: 8px; border-radius: 99px; background: rgba(250, 252, 251, .28); overflow: hidden; transition: width .35s cubic-bezier(.3, 1.2, .4, 1), background .3s; }
.deck__dot.is-done i { background: rgba(250, 252, 251, .55); }
.deck__dot[aria-current] i { width: 34px; background: rgba(250, 252, 251, .2); }
.deck__dot[aria-current] i::after { content: ""; position: absolute; inset: 0; background: var(--aqua); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }
.deck__hint { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 8px 14px; border-radius: 999px; background: rgba(34, 216, 197, .12); color: var(--aqua); font: 600 12px/1 var(--sora); letter-spacing: .08em; text-transform: uppercase; max-width: none; transition: opacity .4s ease; }
.deck__chev { letter-spacing: -.05em; font-size: 15px; }
.deck.is-touched .deck__hint { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .deck.is-seen:not(.is-touched) .deck__hand { animation: dk-hand 1.8s ease-in-out infinite; }
  .deck.is-seen:not(.is-touched) .deck__chev { animation: dk-chev 1.8s ease-in-out infinite; }
  .deck.is-seen:not(.is-touched) .deck__track { animation: dk-nudge 1.4s cubic-bezier(.4, 0, .2, 1) 1.2s 2; }
}
@keyframes dk-hand { 0%, 100% { transform: translateX(4px) rotate(8deg); } 50% { transform: translateX(-6px) rotate(-6deg); } }
@keyframes dk-chev { 0%, 100% { opacity: .35; transform: translateX(-2px); } 50% { opacity: 1; transform: translateX(3px); } }
@keyframes dk-nudge { 0%, 100% { transform: none; } 40% { transform: translateX(-28px); } }
.rw { transform: translateY(var(--o)); transition: transform .9s var(--ease) calc(var(--k) * .1s), opacity .6s ease; }
.rw .rbg { transition: fill .5s ease, stroke .5s ease; }
.pl { stroke-dasharray: 1; stroke-dashoffset: 1; }
.tk { opacity: 0; transform: translate(300px, var(--y)) scale(.3); }
.dc { transform-box: view-box; transform-origin: 300px 208px; transform: translateY(110px) scale(.7); opacity: 0; transition: transform .9s var(--ease), opacity .4s ease; }
/* Caso 2 por tiempos (data-s 0..5): 0-1 Antes (lupa buscando, reloj), 2-3 Lo que armó (Claudio empareja), 4-5 Después (solo diferencias) */
.scene--2 .sheetL, .scene--2 .sheetR { transform-box: fill-box; transform-origin: 50% 50%; }
.scene--2 .cl { opacity: 0; transform: translateY(80px) scale(.85); transform-box: view-box; transform-origin: 0 40px; transition: opacity .5s ease, transform .8s cubic-bezier(.3, 1.4, .5, 1); }
.scene--2 .cl-armL, .scene--2 .cl-armR { transition: transform .5s var(--ease); }
.clk, .mg, .q2, .appb2, .bang { opacity: 0; }
.clk { transition: opacity .4s ease; }
.clk__in { transform-box: fill-box; transform-origin: center; transition: transform .5s var(--ease); }
.clk__h, .clk__m { transform-box: view-box; transform-origin: 0 0; }
.mg { transform: translate(92px, 70px); }
.q2 { transform: translate(var(--x), var(--y)); }
.appb2__in { transform-box: fill-box; transform-origin: center; }
.bang { transform: translate(var(--x), var(--y)) scale(0); }
.scene--2 .rw.diff .rbg { transition: fill .5s ease, stroke .5s ease; }
/* 0 · llegan las hojas y la lupa busca renglón por renglón */
.scene--2[data-s="0"] .sheetL { animation: shL .9s var(--ease) both; }
.scene--2[data-s="0"] .sheetR { animation: shR .9s var(--ease) .15s both; }
.scene--2:is([data-s="0"], [data-s="1"]) .mg { opacity: 1; transition: opacity .3s ease 1s; animation: mgscan 5.2s ease-in-out .9s infinite; }
.scene--2:is([data-s="0"], [data-s="1"]) .clk { opacity: 1; transition-delay: 1.3s; }
.scene--2:is([data-s="0"], [data-s="1"]) .clk__m { animation: spin 1.6s linear infinite; }
.scene--2:is([data-s="0"], [data-s="1"]) .clk__h { animation: spin 12s linear infinite; }
.scene--2[data-s="0"] .clk__in { animation: popc .6s cubic-bezier(.3, 1.6, .5, 1) 1.3s both; }
/* 1 · se tarda: los renglones no cuadran y salen dudas */
.scene--2[data-s="1"] .rw { animation: rwj .5s ease-in-out infinite alternate; animation-delay: calc(var(--k) * .12s); }
.scene--2[data-s="1"] .q2 { opacity: 1; animation: qpop .5s cubic-bezier(.3, 1.6, .5, 1) calc(var(--k) * .35s + .3s) both, qbob 1.6s ease-in-out calc(var(--k) * .35s + .9s) infinite alternate; }
.scene--2[data-s="1"] .clk__in { animation: tired 1.2s ease-in-out infinite alternate; }
/* 2 · llega la mini app: Claudio */
.scene--2:is([data-s="2"], [data-s="3"], [data-s="4"], [data-s="5"]) .cl { opacity: 1; transform: none; transition-delay: .35s; }
.scene--2[data-s="2"] .clk__in { transform: scale(.2); }
.scene--2[data-s="2"] .appb2 { opacity: 1; animation: popc .7s cubic-bezier(.3, 1.6, .5, 1) 1.1s both; }
.scene--2[data-s="2"] .cl-armL { transform: rotate(40deg); } .scene--2[data-s="2"] .cl-armR { transform: rotate(-40deg); }
.scene--2[data-s="2"] .cl-main { animation: hop .6s ease-out 1s 1 both; }
.scene--2[data-s="2"] .spk { animation: spk 1.3s ease-out calc(var(--k) * .15s + 1.1s) 1 both; }
/* 3 · empareja cada movimiento con su par */
.scene--2:is([data-s="3"], [data-s="4"], [data-s="5"]) .rw { transform: none; }
.scene--2[data-s="3"] .appb2 { opacity: 1; }
.scene--2[data-s="3"] .pl { stroke-dashoffset: 0; transition: stroke-dashoffset .6s ease calc(1s + var(--k) * .16s); }
.scene--2[data-s="3"] .tk { opacity: 1; transform: translate(300px, var(--y)) scale(1); transition: transform .45s cubic-bezier(.3, 1.6, .5, 1) calc(1.55s + var(--k) * .16s), opacity .3s ease calc(1.55s + var(--k) * .16s); }
.scene--2[data-s="3"] .cl-eyes { animation: look 1.4s ease-in-out infinite alternate; }
.scene--2[data-s="3"] .cl-armL { transform: rotate(34deg); } .scene--2[data-s="3"] .cl-armR { transform: rotate(-34deg); }
/* 4 · solo quedan a la vista las diferencias */
.scene--2:is([data-s="4"], [data-s="5"]) .pl { stroke-dashoffset: 0; opacity: 0; transition: opacity .4s ease .6s; }
.scene--2[data-s="4"] .tk { opacity: 0; transform: translate(300px, 306px) scale(.1); transition: transform .8s var(--ease) calc(var(--k) * .2s), opacity .3s ease calc(var(--k) * .2s + .55s); }
.scene--2:is([data-s="4"], [data-s="5"]) .rw:not(.diff) { opacity: .22; transition-delay: .9s; }
.scene--2:is([data-s="4"], [data-s="5"]) .rw.diff .rbg { fill: var(--mint); stroke: var(--aqua); stroke-width: 2.5; transition-delay: 1.2s; }
.scene--2[data-s="4"] .rw.diff { animation: dpulse 1s ease-in-out 1.6s infinite alternate; }
.scene--2:is([data-s="4"], [data-s="5"]) .bang { opacity: 1; }
.scene--2[data-s="4"] .bang { animation: bangin .6s cubic-bezier(.3, 1.6, .5, 1) calc(var(--k) * .3s + 1.5s) both; }
.scene--2[data-s="5"] .bang { transform: translate(var(--x), var(--y)) scale(1); }
.scene--2[data-s="4"] .cl-armL { transform: rotate(20deg); } .scene--2[data-s="4"] .cl-armR { transform: rotate(-20deg); }
.scene--2[data-s="4"] .cl-eyes { animation: look .7s ease-in-out infinite alternate; }
/* 5 · te las entrega para revisarlas con calma */
.scene--2[data-s="5"] .cl-armL { transform: rotate(46deg); } .scene--2[data-s="5"] .cl-armR { transform: rotate(-46deg); }
.scene--2[data-s="5"] .dc { transform: none; opacity: 1; transition-delay: .5s; }
.scene--2[data-s="5"] .dcr { animation: dpulse 1s ease-in-out 1.6s infinite alternate; }
.scene--2[data-s="5"] .cl-main { animation: hop .7s ease-out .6s 2 both; }
.scene--2[data-s="5"] .spk { animation: spk 1.5s ease-out calc(var(--k) * .22s + 1s) infinite; }
@keyframes shL { from { opacity: 0; transform: translate(-80px, 30px) rotate(-12deg) scale(.8); } to { opacity: 1; transform: none; } }
@keyframes shR { from { opacity: 0; transform: translate(80px, 30px) rotate(12deg) scale(.8); } to { opacity: 1; transform: none; } }
@keyframes mgscan { 0%, 12% { transform: translate(92px, 70px); } 25%, 37% { transform: translate(508px, 92px); } 50%, 62% { transform: translate(92px, 122px); } 75%, 87% { transform: translate(508px, 150px); } 100% { transform: translate(92px, 70px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes popc { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }
@keyframes tired { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
@keyframes rwj { from { transform: translateY(calc(var(--o) - 2px)); } to { transform: translateY(calc(var(--o) + 3px)); } }
@keyframes dpulse { from { opacity: 1; } to { opacity: .55; } }
@keyframes bangin { from { transform: translate(var(--x), var(--y)) scale(0); } to { transform: translate(var(--x), var(--y)) scale(1); } }
@keyframes look { from { transform: translateX(-5px); } to { transform: translateX(5px); } }

/* Casos en escritorio: foto de ancla a la izquierda, casos a la derecha */
@media (min-width: 960px) {
  .cases { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 3vw, 44px); align-items: start; }
  .case__photo { position: sticky; top: calc(var(--nav-h) + 24px); }
}
@media (max-width: 520px) { .case__t { flex-direction: column; gap: 8px; } }

/* ---------- Contacto ---------- */
.cta { display: grid; gap: 32px 64px; align-items: start; }
@media (min-width: 960px) { .cta { grid-template-columns: 4fr 8fr; } .cta__txt { position: sticky; top: calc(var(--nav-h) + 40px); } }
.cta h2 { margin-bottom: 20px; }
.form { display: grid; gap: 20px 24px; }
@media (min-width: 700px) { .form { grid-template-columns: 1fr 1fr; } }
.field--full { grid-column: 1 / -1; }
.field { display: grid; gap: 8px; }
.field label { font: 600 13px/1.3 var(--sora); letter-spacing: 0.04em; color: var(--paper); }
.field .opt { font-weight: 400; color: var(--paper-soft); }
.field input, .field select, .field textarea { width: 100%; min-height: 54px; padding: 12px 16px; font: 400 16px/1.4 var(--inter); color: var(--paper); background: rgba(250, 252, 251, .06); border: 1px solid rgba(250, 252, 251, 0.26); border-radius: 14px; appearance: none; -webkit-appearance: none; transition: border-color .2s, background .2s; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(250, 252, 251, .5); }
.field select { background-image: linear-gradient(45deg, transparent 50%, var(--mint) 50%), linear-gradient(135deg, var(--mint) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 42px; }
.field select option { color: var(--navy); }
.field textarea { resize: vertical; min-height: 88px; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--mint); outline-offset: 2px; }
.field input:user-invalid, .field select:user-invalid { border-color: var(--aqua); box-shadow: inset 4px 0 0 var(--aqua); }
.form .btn { width: 100%; justify-content: center; }
@media (min-width: 700px) { .form .btn { width: auto; } }
.form__note { margin-top: 14px; font-size: 0.95rem; }
.form__actions { display: grid; gap: 12px; justify-items: start; }
.form__actions .btn { width: 100%; justify-content: center; }
@media (min-width: 700px) { .form__actions .btn { width: auto; } }

/* Botón flotante de WhatsApp */
.wa-float { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 45; display: inline-flex; align-items: center; justify-content: flex-end; height: 58px; text-decoration: none; transition: opacity 0.2s ease, visibility 0.2s; }
.wa-float__i { position: relative; display: grid; place-items: center; flex: none; width: 58px; height: 58px; border-radius: 50%; background: #25d366; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .14) inset; transition: transform .3s cubic-bezier(.3, 1.5, .5, 1), background .2s; }
.wa-float__i::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25d366; animation: wa-pulse 2.6s ease-out infinite; }
.wa-float__l { margin-right: -24px; padding: 0 36px 0 18px; height: 44px; display: flex; align-items: center; white-space: nowrap; background: #fff; color: #0a1128; border-radius: 999px 0 0 999px; font: 600 13px/1 var(--sora); letter-spacing: .01em; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5); opacity: 0; transform: translateX(16px) scaleX(.85); transform-origin: 100% 50%; pointer-events: none; transition: opacity .25s ease, transform .35s cubic-bezier(.3, 1.3, .5, 1); }
.wa-float:hover .wa-float__l, .wa-float:focus-visible .wa-float__l { opacity: 1; transform: none; }
.wa-float:hover .wa-float__i, .wa-float:focus-visible .wa-float__i { transform: scale(1.07) rotate(-8deg); background: #1ebe5b; }
.wa-float:hover .wa-float__i::before { animation: none; opacity: 0; }
.wa-float:focus-visible { outline: none; }
.wa-float:focus-visible .wa-float__i { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #25d366; }
@keyframes wa-pulse { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(1.55); opacity: 0; } }
.wa-float.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }

h2.h2--sm { font-size: clamp(1.6rem, 3.6vw, 2.8rem); line-height: 1.06; }

/* Movimiento reducido: cuadro final estático, sin animaciones ni transiciones */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .cb, .bit { opacity: 0 !important; }
  .card--m:hover { transform: none; }
}
.deck__hint-t { font-size: 0; }
.deck__hint-t::before { content: "Desliza"; font-size: 12px; }
@media (hover: hover) and (pointer: fine) { .deck__hint-t::before { content: "Desliza o da clic"; } }
/* Celular: el mazo usa todo el ancho de la caja del caso para que la tarjeta respire */
@media (max-width: 640px) {
  .deck__track { margin-inline: calc(-1 * clamp(16px, 2.2vw, 28px)); padding-inline: 8%; gap: 10px; }
  .dk { flex-basis: 84%; padding: 18px 18px 20px; }
}
/* Caso completo a la vista: la animación no pasa de ~33% de la pantalla para que título, dibujo y tarjeta quepan sin scroll.
   El cuadro conserva todo el ancho y el dibujo se centra dentro (preserveAspectRatio por defecto). */
.case .stage { width: 100%; max-height: 33svh; }
.case .stage > svg { width: 100%; height: 100%; }
@media (min-width: 900px) {
  .case__head { margin-bottom: 12px; }
  .case__tag { margin-bottom: 8px; }
  .deck { margin-top: 8px; }
  .deck__track { padding-top: 6px; padding-bottom: 10px; }
  .dk { padding: 16px 20px 18px; gap: 8px; }
}