/* ===== Colores y tipografía ===== */
:root {
  --azul: #00AFEE;
  --tinta: #16213E;
  --superficie: #22305A;
  --texto-claro: #F2F4F8;
  --suave: #A9B3CC;
  --amarillo: #FFC93C;
  --rojo: #F0323C;
  --ok: #1FA65A;
  --radio: 18px;
  font-family: "Bricolage Grotesque", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body {
  background: var(--azul) url("../img/fondo.png?v=1") center / cover no-repeat;
  color: var(--tinta);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
body.oscuro { background: #000; }
img { display: block; }
button { font: inherit; cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 3px; }

.app {
  height: 100vh;
  height: 100dvh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.pantalla { display: none; height: 100%; }
.pantalla.activa { display: grid; }

.pantalla-marca, .pantalla-clara {
  overflow-y: auto;
  background: var(--azul) url("../img/fondo.png?v=1") center / cover no-repeat;
}
.pantalla-oscura { background: #000; color: var(--texto-claro); grid-template-rows: 1fr auto auto; }

.columna {
  margin: auto;
  width: min(100%, 26rem);
  padding: 1.5rem 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.05rem;
  text-align: center;
}

h1, h2 {
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
h1 { font-size: clamp(1.9rem, 8vw, 2.6rem); }
h2 { font-size: clamp(1.6rem, 7vw, 2.1rem); }
.instruccion { font-size: 1.08rem; line-height: 1.45; max-width: 22rem; }
.nota { font-size: .88rem; line-height: 1.45; opacity: .8; }

/* ---------- Botones ---------- */
.btn {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  width: 100%;
  border: 0;
  border-radius: 999px;
  padding: 1.05rem 1.5rem;
  font-size: 1.15rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform .12s ease;
}
.btn:active { transform: scale(.97); }
.btn:disabled { cursor: wait; }
.btn-principal { background: var(--tinta); color: #fff; }
.btn-amarillo { background: var(--amarillo); color: var(--tinta); font-weight: 800; }
.btn-secundario { background: transparent; color: var(--tinta); box-shadow: inset 0 0 0 2px var(--tinta); font-size: 1.02rem; padding: .85rem 1rem; }
.btn-texto { background: transparent; color: inherit; padding: .6rem; font-size: 1rem; font-weight: 600; opacity: .85; }
.btn-youtube { font-size: 1.08rem; padding-inline: 1rem; background: #fff; color: var(--tinta); font-weight: 800; box-shadow: 0 10px 26px rgba(22, 33, 62, .22); }
.btn.hecho { background: var(--ok); color: #fff; box-shadow: none; }

.mensaje {
  width: 100%;
  text-align: left;
  background: #fff;
  border-left: 4px solid var(--rojo);
  border-radius: 12px;
  padding: .9rem 1rem;
  line-height: 1.45;
}

/* ---------- 1. Inicio ---------- */
.muestra {
  width: min(46vw, 22vh);
  aspect-ratio: 9 / 16;
  border-radius: 10px;
  overflow: hidden;
  transform: rotate(-4deg);
  margin-bottom: .6rem;
  box-shadow: 0 18px 40px rgba(22, 33, 62, .35);
}
.muestra img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 2. Cámara ---------- */
.visor-caja {
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 12px 0;
}
.visor {
  position: relative;
  height: min(100%, calc((100vw - 24px) * 16 / 9));
  aspect-ratio: 9 / 16;
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--azul);
}
/* La cámara queda debajo del lienzo: el lienzo es lo que se graba y lo que la persona ve */
.visor video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .01; }
.visor canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.etiqueta, .grabando {
  position: absolute; left: 50%; top: 14px;
  transform: translateX(-50%);
  background: rgba(22, 33, 62, .78);
  color: #fff;
  padding: .35rem .85rem;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
  z-index: 2;
}
.grabando { display: flex; align-items: center; gap: .45rem; font-size: 1rem; font-variant-numeric: tabular-nums; }
.punto { width: 10px; height: 10px; border-radius: 50%; background: var(--rojo); animation: titila 1s steps(2) infinite; }
@keyframes titila { 50% { opacity: .2; } }

.cuenta {
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-items: center;
  font-size: clamp(6rem, 38vw, 12rem);
  font-weight: 800;
  color: #fff;
  text-shadow: 0 4px 30px rgba(0, 0, 0, .45);
  pointer-events: none;
}
.cuenta.late { animation: late .9s ease-out; }
@keyframes late {
  from { transform: scale(1.35); opacity: 0; }
  25%  { opacity: 1; }
  to   { transform: scale(.9); opacity: .9; }
}

.controles {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 16px 24px 6px;
}
.btn-icono {
  justify-self: start;
  width: 52px; height: 52px;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  display: grid; place-items: center;
}
.grabar {
  position: relative;
  width: 84px; height: 84px;
  border: 0; padding: 0;
  background: transparent;
  display: grid; place-items: center;
}
.grabar:disabled { cursor: default; }
.anillo { position: absolute; inset: 0; transform: rotate(-90deg); }
.anillo circle { fill: none; stroke-width: 6; }
.anillo-fondo { stroke: #fff; }
.anillo-avance { stroke: var(--amarillo); stroke-dasharray: 289.03; stroke-dashoffset: 289.03; stroke-linecap: round; }
.nucleo {
  width: 62px; height: 62px;
  border-radius: 50%;
  background: var(--rojo);
  transition: all .2s ease;
}
.grabar.activo .nucleo { width: 34px; height: 34px; border-radius: 8px; }
.grabar:not(:disabled):active .nucleo { transform: scale(.92); }
.pista {
  text-align: center; color: var(--suave);
  font-size: .92rem; line-height: 1.4;
  padding: 2px 24px 16px;
  min-height: 2.6em;
}

/* ---------- 3. Revisar ---------- */
.revision {
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  background: #111;
}
.acciones {
  width: min(100%, 26rem);
  margin: 0 auto;
  padding: 16px 20px 18px;
  display: grid;
  gap: .4rem;
}
.pantalla-oscura .btn-texto { color: var(--texto-claro); }

/* ---------- 4. Datos ---------- */
.formulario {
  background: #fff;
  border-radius: 26px;
  margin: 16px auto;
  width: min(calc(100% - 24px), 26rem);
  padding: 1.6rem 1.3rem 1.2rem;
  box-shadow: 0 20px 50px rgba(22, 33, 62, .25);
  align-items: stretch;
  text-align: left;
  gap: .9rem;
}
.formulario h2, .formulario > .instruccion { text-align: center; }
.formulario > .instruccion { margin: -.3rem auto .2rem; color: #4A5675; font-size: 1rem; }
.campo { display: grid; gap: .35rem; font-weight: 700; font-size: 1rem; }
.opcional { font-weight: 400; color: #5B6785; }
.campo input {
  width: 100%;
  min-height: 52px;
  padding: .7rem 1rem;
  border: 2px solid #D5E3EC;
  border-radius: 14px;
  font: inherit;
  font-weight: 400;
  font-size: 1.05rem; /* 16px+ evita el zoom automático en iPhone */
  color: var(--tinta);
  background: #fff;
}
.campo input:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px #CDEFFC; }
.campo input[aria-invalid="true"] { border-color: var(--rojo); }
.error { color: #C8323C; font-size: .9rem; font-weight: 600; }
.error:empty { display: none; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.autoriza {
  display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start;
  font-size: .9rem; line-height: 1.45; color: #34405F;
  background: #F2F8FB; border-radius: 14px; padding: .85rem;
}
.autoriza input { width: 22px; height: 22px; margin-top: 1px; accent-color: var(--tinta); }
.autoriza a { color: var(--tinta); font-weight: 700; }
.btn-progreso { position: relative; overflow: hidden; margin-top: .3rem; }
.barra-progreso {
  position: absolute; inset: 0 auto 0 0; width: 0;
  background: var(--azul);
  transition: width .25s ease;
}
#texto-subir { position: relative; }
.formulario .btn-texto { color: var(--tinta); }

/* ---------- 5. Gracias ---------- */
.sello {
  width: 76px; height: 76px; border-radius: 50%;
  background: #fff; color: var(--ok);
  display: grid; place-items: center;
  box-shadow: 0 12px 30px rgba(22, 33, 62, .25);
  animation: sello .5s cubic-bezier(.2, 1.4, .4, 1);
}
@keyframes sello { from { transform: scale(.4); opacity: 0; } }
.medellin {
  width: 100%;
  background: var(--tinta);
  color: #fff;
  border-radius: 20px;
  padding: 1.1rem 1.2rem;
  display: grid; gap: .3rem;
  line-height: 1.4;
}
.medellin strong { font-size: 1.2rem; font-weight: 800; }
.medellin a { color: var(--amarillo); font-weight: 700; margin-top: .2rem; }
.guardar { width: 100%; display: grid; gap: .5rem; grid-template-columns: 1fr; margin-top: .4rem; }
.guardar:has(#btn-compartir:not([hidden])) { grid-template-columns: 1fr 1fr; }

/* ---------- Confirmaciones ---------- */
.aviso {
  position: fixed; left: 50%;
  top: calc(env(safe-area-inset-top, 0px) + 16px);
  transform: translateX(-50%);
  z-index: 60;
  width: min(calc(100% - 32px), 24rem);
  display: flex; align-items: center; gap: .8rem;
  padding: .9rem 1.1rem;
  background: #fff; color: var(--tinta);
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .35);
  animation: aviso-entra .3s ease-out;
}
.aviso.sale { animation: aviso-sale .25s ease-in forwards; }
.aviso-icono {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  background: var(--ok); color: #fff;
  display: grid; place-items: center;
}
.aviso-textos { display: grid; gap: .1rem; line-height: 1.35; }
.aviso-textos strong { font-size: 1.05rem; font-weight: 800; }
.aviso-textos span { font-size: .92rem; }
@keyframes aviso-entra { from { transform: translate(-50%, -24px); opacity: 0; } }
@keyframes aviso-sale  { to   { transform: translate(-50%, -24px); opacity: 0; } }

/* ---------- Aviso horizontal (solo celulares/tablets) ---------- */
.aviso-horizontal {
  position: fixed; inset: 0; z-index: 50;
  display: none;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem; padding: 2rem;
  background: var(--tinta); color: #fff;
  text-align: center; font-size: 1.25rem; font-weight: 600;
}
.aviso-horizontal .celular { color: var(--amarillo); animation: girar 1.8s ease-in-out infinite; }
@keyframes girar {
  0%, 20%   { transform: rotate(90deg); }
  60%, 100% { transform: rotate(0deg); }
}
@media (orientation: landscape) and (pointer: coarse) {
  .aviso-horizontal { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}