/* Kinesiomas · Tutorial «Cómo reservar». Misma marca que la página (azul, Geist, píldora con bandera).
   Todo se mide contra el escenario (unidades cq*): el mismo diseño sirve en el celular, en historia 9:16 y en feed 4:5.
   El movimiento no vive acá: lo calcula tutorial.js cuadro por cuadro. */

:root {
  --azul-1: #062A86;
  --azul-2: #0A3FB8;
  --azul-3: #0067FF;
  --celeste: #4DA3FF;
  --cian: #2FD3E8;
  --blanco: #FFFFFF;
  --tinta: #0B1B3A;
  --ok: #18A957;
  --vidrio: rgba(255, 255, 255, .14);
  --vidrio-borde: rgba(255, 255, 255, .3);
  --font: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: #041E63; }
body { display: grid; place-items: center; overflow: hidden; font-family: var(--font); color: var(--blanco);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
img, svg { display: block; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--cian); outline-offset: 3px; }
.ico { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- Escenario ---------- */
.escenario { position: relative; container-type: size; overflow: hidden;
  width: min(100vw, calc(100dvh * .62)); height: 100dvh;
  background: radial-gradient(120% 80% at 50% 0%, var(--azul-2) 0%, var(--azul-1) 70%);
  user-select: none; -webkit-user-select: none; }
.fondo { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
/* Manchas de color con degradé (no filter: blur): se ven igual y no pesan en el celular ni al grabar. */
.fondo i { position: absolute; border-radius: 50%; will-change: transform; }
.fondo i:nth-child(1) { width: 80cqmax; height: 80cqmax; left: -30cqmax; top: -35cqmax; background: radial-gradient(closest-side, rgba(0, 103, 255, .8), rgba(0, 103, 255, 0)); }
.fondo i:nth-child(2) { width: 65cqmax; height: 65cqmax; right: -30cqmax; top: 5cqmax; background: radial-gradient(closest-side, rgba(77, 163, 255, .5), rgba(77, 163, 255, 0)); }
.fondo i:nth-child(3) { width: 55cqmax; height: 55cqmax; left: -15cqmax; bottom: -30cqmax; background: radial-gradient(closest-side, rgba(47, 211, 232, .32), rgba(47, 211, 232, 0)); }

.contenido { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 3.2cqmin;
  padding: calc(var(--safe-t) + 3cqmin) 5cqmin calc(var(--safe-b) + 4cqmin); }

/* Barras de progreso: una por paso (Mauro, 14/10: «que marque los slides y el progreso»). */
.barras { display: flex; gap: 1.2cqmin; flex: none; }
.barras i { flex: 1; height: max(3px, .8cqmin); border-radius: 99px; background: rgba(255, 255, 255, .3); overflow: hidden; }
.barras b { display: block; height: 100%; background: var(--blanco); transform-origin: left; transform: scaleX(0); }

.cabeza { display: flex; align-items: center; gap: 2.6cqmin; flex: none; }
.logo { height: clamp(34px, 12cqmin, 74px); width: auto; }
.chip { font-weight: 700; font-size: clamp(13px, 3.7cqmin, 22px); padding: .38em .85em; border-radius: 99px; white-space: nowrap;
  background: var(--vidrio); border: 1px solid var(--vidrio-borde); }
/* Banderitas juntas (Pablo, 14/10): la del idioma actual, nítida y con aro. */
.pais { position: relative; z-index: 10; margin-left: auto; padding: 3px; border-radius: 999px; display: flex; gap: 4px;
  background: var(--vidrio); border: 1px solid var(--vidrio-borde); }
.pais-op { position: relative; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; opacity: .5; filter: saturate(.5); }
.pais-op::after { content: ""; position: absolute; inset: -2px; }
.pais-op svg { width: 34px; height: 34px; border-radius: 50%; }
.pais-op[aria-pressed="true"] { opacity: 1; filter: none; box-shadow: 0 0 0 2.5px var(--blanco); }
.pais-op:active { transform: scale(.92); }

/* Número gigante + 3-5 palabras. Alto fijo: el teléfono no salta cuando cambia el texto. */
.texto { display: flex; align-items: center; gap: 4cqmin; height: 31cqmin; flex: none; }
.texto-col { flex: 1; display: flex; flex-direction: column; gap: 1.6cqmin; min-width: 0; }
.numero { flex: none; min-width: .6em; text-align: center; font-weight: 800; font-size: 27cqmin; line-height: .8; letter-spacing: -.05em;
  font-variant-numeric: tabular-nums; text-shadow: 0 .04em .14em rgba(3, 18, 64, .35); }
.leyenda { margin: 0; font-weight: 800; font-size: 7.6cqmin; line-height: 1.04; letter-spacing: -.03em; text-wrap: balance; }
.leyenda em { font-style: normal; color: var(--cian); }
.leyenda .p { display: inline-block; }
/* Una línea de ayuda debajo: qué hacer exactamente en esta pantalla (Mauro, 14/10: «más comprensible»). */
/* overflow-wrap: la dirección larga se corta en vez de ensanchar la columna y empujar el teléfono afuera. */
.ayuda { margin: 0; font-weight: 600; font-size: 4.1cqmin; line-height: 1.25; color: rgba(255, 255, 255, .86); text-wrap: balance; overflow-wrap: anywhere; }
/* «Tocá» al lado del dedo en el momento del toque. */
.etiqueta-toque { position: absolute; z-index: 4; left: 0; top: 0; opacity: 0; pointer-events: none; white-space: nowrap;
  padding: .35em .75em; border-radius: 99px; background: var(--cian); color: var(--tinta); font-weight: 800; font-size: max(13px, 3.6cqmin);
  box-shadow: 0 1cqmin 3cqmin rgba(3, 14, 48, .35); }

/* Teléfono con la pantalla real */
.zona { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; }
.telefono { position: relative; background: #040A1A;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .22), 0 3cqmin 7cqmin rgba(3, 14, 48, .55); }
.pantalla { position: absolute; overflow: hidden; background: var(--azul-1); }
.pantalla img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.resalte { position: absolute; z-index: 2; opacity: 0; pointer-events: none; border: max(2px, .55cqmin) solid var(--blanco);
  box-shadow: 0 0 0 .9cqmin rgba(47, 211, 232, .5), 0 0 5cqmin rgba(47, 211, 232, .7); }
.onda { position: absolute; z-index: 2; left: 0; top: 0; border-radius: 50%; opacity: 0; pointer-events: none;
  background: rgba(255, 255, 255, .45); border: max(2px, .5cqmin) solid var(--blanco); }
.dedo { position: absolute; z-index: 3; left: 0; top: 0; opacity: 0; pointer-events: none; filter: drop-shadow(0 1.4cqmin 1.8cqmin rgba(3, 14, 48, .5)); }
.dedo svg { width: 100%; height: 100%; overflow: visible; }

/* Último paso: un solo botón (en vivo) o la dirección (en el video). */
.final { position: absolute; z-index: 20; left: 50%; bottom: 2cqmin; width: min(92%, 440px); translate: -50% 0;
  display: flex; align-items: center; gap: 2.4cqmin; opacity: 0; pointer-events: none; }
.btn-ok { flex: 1; min-height: 56px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 22px;
  border-radius: 20px; background: var(--ok); color: var(--blanco); font-weight: 800; font-size: clamp(17px, 4.6cqmin, 22px);
  text-decoration: none; box-shadow: 0 10px 26px rgba(24, 169, 87, .45), 0 0 0 1px rgba(255, 255, 255, .25) inset; }
.btn-ok:active { transform: scale(.97); }
.repetir { flex: none; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-size: 22px;
  background: rgba(6, 42, 134, .7); border: 1px solid var(--vidrio-borde); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.url { display: none; flex: 1; align-items: center; justify-content: center; gap: .45em; padding: .75em 1em; border-radius: 99px;
  background: var(--blanco); color: var(--tinta); font-weight: 800; font-size: 4cqmin; white-space: nowrap;
  box-shadow: 0 2cqmin 5cqmin rgba(3, 14, 48, .4); }

/* Zonas de toque como en las historias */
.toque { position: absolute; z-index: 5; top: 0; bottom: 0; opacity: 0; }
.toque.izq { left: 0; width: 34%; }
.toque.der { right: 0; width: 66%; }
.toque:focus-visible { opacity: 1; outline-offset: -6px; }

/* Grabación del video: sin controles, con la dirección al final. */
.grabando .pais, .grabando .toque, .grabando .repetir, .grabando .btn-ok { display: none; }
/* Sin la dirección al final del video/carrusel: Pablo pone el link a mano (Mauro, 14/10). */
.grabando .final { display: none; }
.grabando .escenario { width: 100vw; height: 100vh; }

/* Historia de Instagram (1080×1920): arriba (perfil y barras de Instagram) y abajo (cajita de respuesta) lo tapa la
   interfaz; ahí no va nada. Todo centrado para que quede bien encuadrado. */
.formato-historia .contenido { padding-top: 11cqh; padding-bottom: 12cqh; gap: 2.6cqmin; }
.formato-historia .portada { padding-top: 11cqh; padding-bottom: 12cqh; }
.formato-historia .cabeza, .formato-historia .texto { justify-content: center; }
.grabando .cabeza { gap: 3.4cqmin; }

/* ---------- Portada (video y carrusel) ---------- */
.portada { position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; justify-content: center; gap: 5cqmin;
  padding: 7cqmin; pointer-events: none; --entra: 1; }
.portada-texto { display: flex; flex-direction: column; align-items: flex-start; gap: 2.8cqmin;
  opacity: var(--entra); transform: translateY(calc((1 - var(--entra)) * 6cqmin)); }
.portada .logo { height: clamp(26px, 9cqmin, 60px); width: auto; }
.chip-tuto { font-weight: 800; font-size: 3.6cqmin; letter-spacing: .14em; text-transform: uppercase; padding: .5em 1em; border-radius: 99px;
  background: var(--cian); color: var(--tinta); }
.portada-titulo { margin: 0; font-weight: 800; font-size: 13cqmin; line-height: .96; letter-spacing: -.045em; text-wrap: balance; }
.portada-titulo em { font-style: normal; color: var(--cian); }
.portada-sub { margin: 0; font-weight: 600; font-size: 4.8cqmin; color: rgba(255, 255, 255, .85); }
.portada-tel { align-self: center; padding: 1.6cqmin; border-radius: 7cqmin; background: #040A1A;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .22), 0 4cqmin 9cqmin rgba(3, 14, 48, .6);
  transform: translateY(calc((1 - var(--entra)) * 10cqmin)) rotate(calc(-6deg + (1 - var(--entra)) * 6deg)); opacity: var(--entra); }
.portada-area { position: relative; height: 40cqh; aspect-ratio: 390 / 844; }
.portada-pantalla { position: absolute; inset: 0; overflow: hidden; border-radius: 5.6cqmin; background: var(--azul-1); }
.portada-pantalla img { width: 100%; height: 100%; object-fit: cover; }
/* El dedo apoyado en «Reservar» sobre la flecha (punta del índice en x 85 %, y 79 % de la pantalla). */
.portada-dedo { position: absolute; left: 85%; top: 79.3%; width: 26%; height: auto; aspect-ratio: 24 / 27; overflow: visible;
  transform-origin: 41.25% 4.4%; transform: translate(-41.25%, -4.4%) rotate(-12deg); filter: drop-shadow(0 1.4cqmin 1.8cqmin rgba(3, 14, 48, .5)); }
.portada-onda { position: absolute; left: 85%; top: 79.3%; width: 24%; aspect-ratio: 1; border-radius: 50%; translate: -50% -50%;
  background: rgba(255, 255, 255, .35); border: max(2px, .5cqmin) solid var(--blanco); }
.formato-historia .portada-area { height: 34cqh; }
.formato-historia .portada-titulo { font-size: 12cqmin; }

/* Feed 4:5 (o pantallas anchas): texto a la izquierda, teléfono a la derecha. */
@container (min-aspect-ratio: 7/10) {
  .contenido { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-rows: auto auto 1fr; column-gap: 3cqmin; }
  .barras, .cabeza { grid-column: 1 / -1; }
  .texto { grid-column: 1; grid-row: 3; height: auto; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3cqmin; padding-left: 1cqmin; }
  .ayuda { font-size: 3.9cqmin; }
  .numero { font-size: 32cqmin; text-align: left; }
  .leyenda { font-size: 7.4cqmin; }
  .zona { grid-column: 2; grid-row: 3; }
  .final { width: 96%; }
  .url { font-size: 3.1cqmin; }
  /* Portada 4:5: texto a la izquierda, teléfono inclinado a la derecha. */
  .portada { flex-direction: row; align-items: center; justify-content: space-between; gap: 4cqmin; padding: 8cqmin 7cqmin; }
  .portada-texto { flex: 1; }
  .portada-titulo { font-size: 9cqmin; }
  .portada-sub { font-size: 4.2cqmin; }
  .portada-area { height: 62cqh; }
}

/* Celulares chicos (≤ 360 px): la cabecera no entra entera; se va el «Cómo reservar» y las banderitas se achican. */
@container (max-width: 360px) {
  .cabeza .chip { display: none; }
  .pais-op { width: 38px; height: 38px; }
  .pais-op svg { width: 30px; height: 30px; }
  .pais-op::after { inset: -4px; }
}

/* Compu (≥ 900 px): escenario apaisado → se usa el diseño de feed (texto a la izquierda, teléfono a la derecha). */
@media (min-width: 900px) {
  .escenario { width: min(100vw, calc(100dvh * 1.1), 1100px); box-shadow: 0 0 80px rgba(0, 0, 0, .35); }
}

/* ================= Formato de la pieza de Mauro (14/10) =================
   Cielo con nubes y campo de fondo, logos Kinesiomas × TR3, títulos en Montserrat itálica pesada y celeste. */
:root { --celeste-hero: #39B5FF; --hero: "Montserrat", var(--font); }
.escenario { background: linear-gradient(180deg, #0F5BD8 0%, #1F7BEA 38%, #5AAEF2 68%, #9CD0F7 82%); }
.fondo { display: none; }
.cielo { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.cielo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(75% 50% at 50% 42%, rgba(6, 42, 134, .6), rgba(6, 42, 134, 0) 72%); }
.nube { position: absolute; left: 0; width: calc(52cqw * var(--s, 1)); aspect-ratio: 3 / 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(255, 255, 255, .55) 55%, rgba(255, 255, 255, 0)); }
.nube::before, .nube::after { content: ""; position: absolute; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0)); }
.nube::before { width: 55%; aspect-ratio: 1; left: 14%; top: -42%; }
.nube::after { width: 42%; aspect-ratio: 1; left: 48%; top: -28%; }
.nube.n1 { top: 1%; --s: 1.3; } .nube.n2 { top: 22%; --s: .8; opacity: .75; } .nube.n3 { top: 34%; --s: 1.1; opacity: .8; }
.nube.n4 { top: 46%; --s: .7; opacity: .7; } .nube.n5 { top: 56%; --s: 1; opacity: .85; }
.paisaje { position: absolute; left: 0; bottom: 0; width: 100%; height: 34%; object-fit: cover; object-position: center 30%; transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%); mask-image: linear-gradient(180deg, transparent, #000 30%); }

.marcas { display: flex; align-items: center; gap: 2cqmin; }
.marcas .logo { height: clamp(30px, 10cqmin, 64px); filter: drop-shadow(0 2px 6px rgba(3, 18, 64, .5)); }
.marcas .x { font-size: 5cqmin; color: var(--blanco); font-weight: 300; }
.marcas .tr3 { width: clamp(30px, 10cqmin, 64px); height: auto; border-radius: 4px; box-shadow: 0 1cqmin 3cqmin rgba(3, 18, 64, .4); }
.numero { font-family: var(--hero); font-style: italic; font-weight: 900; }
.leyenda { font-family: var(--hero); font-style: italic; font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; font-size: 6.4cqmin; line-height: 1.02;
  text-shadow: 0 .5cqmin 2.5cqmin rgba(3, 18, 64, .45); }
.leyenda em { color: var(--celeste-hero); }
.ayuda { font-family: var(--hero); font-weight: 600; text-shadow: 0 .3cqmin 1.5cqmin rgba(3, 18, 64, .45); }
.url { font-family: var(--hero); font-style: italic; font-weight: 800; }

/* Portada: la pieza, tal cual. */
.portada { flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 4cqmin !important; text-align: center;
  padding: 6cqmin !important; font-family: var(--hero); }
.formato-historia .portada { padding-top: 11cqh !important; padding-bottom: 12cqh !important; }
.p-marcas, .p-titulos, .p-icono { opacity: var(--entra); transform: translateY(calc((1 - var(--entra)) * 5cqmin)); }
.p-marcas { display: flex; align-items: center; justify-content: center; gap: 3cqmin; }
.p-marcas img:first-child { height: 13cqmin; width: auto; filter: drop-shadow(0 2px 6px rgba(3, 18, 64, .5)); }
.p-marcas .sep { width: 2px; height: 14cqmin; background: rgba(255, 255, 255, .75); }
.p-marcas .x { font-size: 6cqmin; color: var(--blanco); font-weight: 300; }
.p-marcas .tr3 { width: 15cqmin; height: auto; border-radius: 4px; box-shadow: 0 1cqmin 3cqmin rgba(3, 18, 64, .4); }
.p-titulos { display: flex; flex-direction: column; align-items: center; text-transform: uppercase; text-shadow: 0 .6cqmin 3cqmin rgba(3, 18, 64, .45); }
.p-titulos > span { display: block; line-height: .95; }
.p1 { font-style: italic; font-weight: 900; font-size: 10cqmin; color: var(--blanco); }
.p-pincel { width: 74%; height: 3.6cqmin; margin: -.6cqmin 0 1.6cqmin; overflow: visible; }
.p-pincel path { fill: none; stroke: var(--celeste-hero); stroke-width: 7; stroke-linecap: round; }
.p2 { font-weight: 600; font-size: 4.2cqmin; letter-spacing: .3em; margin: 1.4cqmin 0; color: var(--blanco); }
.p3 { font-style: italic; font-weight: 900; font-size: 15cqmin; color: var(--celeste-hero); letter-spacing: -.02em; }
.p4 { font-style: italic; font-weight: 900; font-size: 8.4cqmin; white-space: nowrap; color: var(--blanco); letter-spacing: -.02em; }
.p5 { font-style: italic; font-weight: 700; font-size: 3.5cqmin; letter-spacing: .26em; white-space: nowrap; color: var(--celeste-hero); margin-top: 1cqmin; }
.p-raya { width: 22cqmin; height: 1.1cqmin; border-radius: 1cqmin; background: var(--celeste-hero); margin-top: 3cqmin; }
.p-icono { position: relative; width: 17cqmin; height: 17cqmin; color: var(--blanco); }
.p-icono svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.p-icono i { position: absolute; width: 5cqmin; height: .8cqmin; border-radius: 1cqmin; background: var(--celeste-hero); }
.p-icono .r1 { left: -9cqmin; top: 3cqmin; transform: rotate(25deg); } .p-icono .r2 { left: -9cqmin; bottom: 3cqmin; transform: rotate(-25deg); }
.p-icono .r3 { right: -9cqmin; top: 3cqmin; transform: rotate(-25deg); } .p-icono .r4 { right: -9cqmin; bottom: 3cqmin; transform: rotate(25deg); }

/* Una nube detrás del título dejaba el celeste ilegible: nubes más suaves y sombra oscura fuerte en los textos. */
.cielo .nube { opacity: .42 !important; }
.leyenda, .numero { text-shadow: 0 0 1.2cqmin rgba(3, 18, 64, .75), 0 .6cqmin 3cqmin rgba(3, 18, 64, .6); }
.ayuda { text-shadow: 0 0 1cqmin rgba(3, 18, 64, .8), 0 .3cqmin 2cqmin rgba(3, 18, 64, .6); }
.p-titulos { text-shadow: 0 0 1.4cqmin rgba(3, 18, 64, .7), 0 .6cqmin 3cqmin rgba(3, 18, 64, .5); }