/* VELYRO · Recorrido de autoservicio — hoja de estilos
   Los tokens son los del sitio (sitio/activos/velyro.css): plum #2B003A,
   magenta, naranja, oro, el degradado firma, radio 22px, Sora para display y
   Manrope para texto. No se redefine ninguna paleta: si el sitio cambia de
   marca, esto cambia con él porque son los mismos valores y las mismas fuentes,
   servidas localmente desde /activos/ (nada de CDN, igual que el sitio). */

@font-face{font-family:'Sora';src:url("/activos/Sora.woff2") format('woff2');font-weight:100 800;font-style:normal;font-display:swap}
@font-face{font-family:'Manrope';src:url("/activos/Manrope.woff2") format('woff2');font-weight:200 800;font-style:normal;font-display:swap}

:root{
  --plum:#2B003A; --magenta:#B10A5B; --orange:#FF4D00; --yellow:#FFC20E;
  --light:#F2F2F4; --ink:#231427; --white:#fff; --muted:#716775;
  --gradient:linear-gradient(90deg,var(--plum) 0%,var(--magenta) 36%,var(--orange) 72%,var(--yellow) 100%);
  --action:linear-gradient(90deg,var(--magenta),var(--orange));
  --radius:22px; --radius-sm:14px; --shadow:0 24px 70px rgba(43,0,58,.13);
  --ease:cubic-bezier(.2,.8,.2,1);
  --line:#E4E1E8; --surface:#fff; --tint:linear-gradient(145deg,#fff 0%,#faf7fb 60%,#fff4ee 100%);
  --ok:#0E8F63; --ok-bg:#E6F4EE; --warn-bg:#FFF6DC; --warn-txt:#8A6400;
  --display:'Sora',system-ui,-apple-system,sans-serif;
  --body:'Manrope',system-ui,-apple-system,Arial,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--light);color:var(--ink);font-family:var(--body);
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,a,input,select,textarea{font:inherit}
button{color:inherit}
:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.oculto{display:none !important}
.solo-lectores{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.envoltura{width:min(1180px,calc(100% - 40px));margin-inline:auto}

/* ── barra superior ─────────────────────────────────────────────────── */
.barra-marca{background:var(--plum);color:#fff;position:sticky;top:0;z-index:40}
.barra-marca .envoltura{display:flex;align-items:center;gap:1.25rem;
  min-height:62px;flex-wrap:wrap}
.marca{font-family:var(--display);font-weight:800;letter-spacing:.16em;font-size:.95rem}
.modulo{font-family:var(--display);font-size:.68rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--yellow);padding-left:1.1rem;
  border-left:1px solid rgba(255,255,255,.24)}
.barra-marca .der{margin-left:auto;display:flex;align-items:center;gap:.9rem;font-size:.82rem}
.barra-marca .der a{opacity:.85;border-bottom:1px solid rgba(255,255,255,.28)}
.barra-marca .der a:hover{opacity:1}
.firma{height:3px;background:var(--gradient)}

/* ── pasos del recorrido ────────────────────────────────────────────── */
.pasos{display:flex;gap:.5rem;flex-wrap:wrap;padding:1.1rem 0 0;font-size:.74rem}
.paso{display:flex;align-items:center;gap:.45rem;color:var(--muted);
  font-family:var(--display);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.paso b{width:1.35rem;height:1.35rem;border-radius:50%;display:grid;place-items:center;
  background:#fff;border:1.5px solid var(--line);font-size:.68rem;color:var(--muted)}
.paso.activo{color:var(--plum)}
.paso.activo b{background:var(--plum);border-color:var(--plum);color:#fff}
.paso.hecho b{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}
.paso+.paso::before{content:"→";color:var(--line);margin-right:.15rem}

/* ── encabezados ────────────────────────────────────────────────────── */
.hero{padding:3.2rem 0 2.2rem}
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--display);
  font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--magenta);margin:0 0 1rem}
.eyebrow span:first-child{width:24px;height:2px;background:var(--action);display:block}
h1{font-family:var(--display);font-size:clamp(1.9rem,4vw,3rem);font-weight:700;
  letter-spacing:-.025em;line-height:1.1;margin:0 0 .9rem}
h1 em{font-style:normal;background:var(--action);-webkit-background-clip:text;
  background-clip:text;color:transparent}
h2{font-family:var(--display);font-size:1.28rem;font-weight:700;letter-spacing:-.015em;margin:0 0 .35rem}
h3{font-family:var(--display);font-size:1.02rem;font-weight:700;margin:0 0 .3rem}
.plomo{color:var(--muted);font-size:1.05rem;max-width:62ch;margin:0 0 1.4rem}
.pie-nota{color:var(--muted);font-size:.82rem}

/* ── etiqueta de honestidad — nunca se esconde ──────────────────────── */
.honesto{display:flex;gap:.7rem;align-items:flex-start;background:var(--warn-bg);
  border:1px solid var(--yellow);color:var(--warn-txt);border-radius:var(--radius-sm);
  padding:.85rem 1.05rem;font-size:.86rem;margin:0 0 1.5rem}
.honesto b{font-family:var(--display)}
.honesto .icono{flex:none;font-size:1rem;line-height:1.3}

.aviso{border-radius:var(--radius-sm);padding:.85rem 1.05rem;font-size:.87rem;margin:0 0 1.1rem;
  background:#FCEDF3;border:1px solid var(--magenta);color:var(--magenta)}
.aviso.bien{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}
.aviso ul{margin:.4rem 0 0;padding-left:1.1rem}

/* ── tarjetas de ficha ──────────────────────────────────────────────── */
.fichas{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  padding-bottom:1rem}
.ficha{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform var(--ease) .35s,box-shadow var(--ease) .35s}
.ficha:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.ficha .lomo{height:4px;background:var(--gradient)}
.ficha figure{margin:0;background:var(--light);aspect-ratio:16/10;overflow:hidden}
.ficha figure img{width:100%;height:100%;object-fit:cover}
.ficha figure.vacia{display:grid;place-items:center;color:var(--muted);font-size:.8rem;text-align:center;padding:1rem}
.ficha .cuerpo{padding:1.25rem 1.35rem 1.5rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.tag{display:inline-block;font-family:var(--display);font-size:.64rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--magenta)}
.ficha p{margin:0;color:var(--muted);font-size:.9rem}
.datos{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.2rem}
.dato{font-size:.7rem;font-weight:700;letter-spacing:.03em;color:var(--muted);
  background:var(--light);border-radius:999px;padding:.2rem .6rem}
.ficha form{margin-top:auto;padding-top:.9rem}

/* ── botones ────────────────────────────────────────────────────────── */
.boton{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  border:none;border-radius:999px;padding:.8rem 1.5rem;font-family:var(--display);
  font-weight:700;font-size:.9rem;cursor:pointer;background:var(--action);color:#fff;
  transition:transform var(--ease) .25s,filter var(--ease) .25s}
.boton:hover{transform:translateY(-1px);filter:brightness(1.06)}
.boton[disabled]{opacity:.45;cursor:not-allowed;transform:none;filter:none}
.boton.fantasma{background:none;color:var(--plum);border:1.5px solid var(--line)}
.boton.fantasma:hover{border-color:var(--magenta);color:var(--magenta)}
.boton.claro{background:#fff;color:var(--plum)}
.boton.ancho{width:100%}
.mini{font-size:.74rem;padding:.3rem .7rem;border-radius:999px;border:1.5px solid var(--line);
  background:none;color:var(--muted);cursor:pointer;font-family:var(--body);font-weight:600}
.mini:hover{border-color:var(--magenta);color:var(--magenta)}
.mini[disabled]{opacity:.35;cursor:not-allowed}
.mini.on{background:var(--plum);border-color:var(--plum);color:#fff}
.mini.fuera{border-color:var(--magenta);color:var(--magenta)}

/* ── paneles ────────────────────────────────────────────────────────── */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.5rem 1.6rem;margin:0 0 1.4rem}
.panel>header{display:flex;gap:.8rem;align-items:baseline;flex-wrap:wrap;margin-bottom:.9rem}
.panel>header .cuenta{font-size:.68rem;font-weight:700;letter-spacing:.04em;color:var(--muted);
  background:var(--light);border-radius:999px;padding:.16rem .55rem}
.panel .desc{color:var(--muted);font-size:.88rem;margin:0 0 1rem;max-width:70ch}
.dos{display:grid;gap:1.4rem;grid-template-columns:1fr}
@media (min-width:62rem){.dos{grid-template-columns:minmax(0,1fr) 21rem;align-items:start}
  .dos>aside{position:sticky;top:80px}}

/* ── barra de etapas (replay) ───────────────────────────────────────── */
.etapas{display:flex;flex-direction:column;gap:.55rem;margin:0;padding:0;list-style:none}
.etapa{display:grid;grid-template-columns:1.5rem minmax(7rem,10rem) minmax(0,1fr) auto;
  gap:.7rem;align-items:baseline;padding:.5rem .1rem;border-top:1px solid var(--line);
  font-size:.88rem}
.etapa:first-child{border-top:none}
.etapa .luz{width:.7rem;height:.7rem;border-radius:50%;background:var(--line);
  align-self:center;justify-self:center}
.etapa .nombre{font-family:var(--display);font-weight:700;font-size:.8rem;
  letter-spacing:.03em;color:var(--muted)}
.etapa .detalle{color:var(--muted);font-size:.84rem;min-width:0;overflow-wrap:anywhere}
.etapa .reloj{font-variant-numeric:tabular-nums;font-size:.76rem;color:var(--muted)}
.etapa.corriendo .luz{background:var(--orange);animation:latir 1.1s var(--ease) infinite}
.etapa.corriendo .nombre{color:var(--plum)}
.etapa.listo .luz{background:var(--ok)}
.etapa.listo .nombre{color:var(--ink)}
.etapa.sin_avisos .luz{background:var(--yellow)}
.etapa .avisos{grid-column:2/-1;margin:.35rem 0 0;padding:0;list-style:none;
  font-size:.79rem;color:var(--warn-txt)}
@keyframes latir{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.35);opacity:.6}}
@media (prefers-reduced-motion:reduce){.etapa.corriendo .luz{animation:none}}

.progreso{height:4px;background:var(--line);border-radius:999px;overflow:hidden;margin:.9rem 0 0}
.progreso i{display:block;height:100%;width:0;background:var(--action);
  transition:width .3s linear}

/* ── curaduría sandbox ─────────────────────────────────────────────── */
.escena{border-top:1px solid var(--line);padding:1.15rem 0;display:grid;gap:1rem;
  grid-template-columns:1fr}
@media (min-width:48rem){.escena{grid-template-columns:15rem minmax(0,1fr)}}
.escena:first-of-type{border-top:none}
.escena.fuera{opacity:.42}
.escena .lienzo{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px;
  border:1px solid var(--line);background:var(--light)}
.escena .orden{font-family:var(--display);font-weight:700;color:var(--magenta);
  font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;margin:.45rem 0 0}
.escena .titulo{font-weight:700;font-size:.98rem;margin:0 0 .3rem}
.campo{margin:.75rem 0 0}
.campo .lbl{font-size:.64rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);
  font-weight:700;margin:0 0 .3rem;display:flex;gap:.5rem;align-items:baseline;flex-wrap:wrap}
.campo .lbl .pista{letter-spacing:0;text-transform:none;font-weight:500;font-size:.74rem}
textarea,input[type=text],input[type=email],select{width:100%;font-family:inherit;
  font-size:.9rem;line-height:1.5;color:var(--ink);background:var(--light);
  border:1px solid var(--line);border-radius:12px;padding:.6rem .75rem}
textarea{resize:vertical;min-height:4.2rem}
.acciones{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.5rem}
.tira{display:flex;gap:.5rem;overflow-x:auto;padding:.15rem 0 .4rem}
.tira button{flex:none;width:6.6rem;border:2px solid transparent;border-radius:10px;
  padding:0;background:none;cursor:pointer}
.tira button img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px;
  border:1px solid var(--line)}
.tira button.on{border-color:var(--magenta)}
.tira button span{display:block;font-size:.62rem;color:var(--muted);margin-top:.2rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pagina{font-size:.7rem;color:var(--muted);background:var(--light);border-radius:999px;
  padding:.16rem .55rem;font-weight:700}
.descarte{display:flex;gap:.6rem;align-items:baseline;font-size:.84rem;color:var(--muted);
  padding:.4rem 0;border-top:1px dashed var(--line)}

/* ── resumen lateral ───────────────────────────────────────────────── */
.resumen{list-style:none;margin:0 0 1.1rem;padding:0;font-size:.86rem}
.resumen li{display:flex;justify-content:space-between;gap:1rem;padding:.4rem 0;
  border-top:1px solid var(--line)}
.resumen li:first-child{border-top:none}
.resumen b{font-family:var(--display);font-variant-numeric:tabular-nums}

/* ── Flow ──────────────────────────────────────────────────────────── */
.flow-cabeza{background:var(--plum);color:#fff;padding:2.4rem 0 2.6rem}
.flow-cabeza h1{color:#fff}
.flow-cabeza .plomo{color:rgba(255,255,255,.78)}
.flow-cabeza .eyebrow{color:var(--yellow)}
.flow-cabeza .eyebrow span:first-child{background:var(--yellow)}
.piezas{display:grid;gap:1.4rem;grid-template-columns:1fr;margin-top:-1.6rem}
@media (min-width:60rem){.piezas{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}}
.pieza{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow)}
.pieza .cuerpo{padding:1.3rem 1.45rem 1.5rem}
.pieza video,.pieza img.grande{width:100%;background:#000;display:block}
.pieza audio{width:100%;margin-top:.9rem}
.pregunta{border-top:1px solid var(--line);padding:1rem 0}
.pregunta:first-of-type{border-top:none}
.pregunta p.enunciado{font-weight:700;margin:0 0 .6rem;display:flex;gap:.6rem;
  align-items:baseline;flex-wrap:wrap}
.opciones{display:flex;flex-direction:column;gap:.4rem}
.opcion{display:flex;gap:.6rem;align-items:flex-start;text-align:left;width:100%;
  border:1.5px solid var(--line);border-radius:12px;padding:.6rem .8rem;background:none;
  cursor:pointer;font-size:.9rem;transition:border-color var(--ease) .2s}
.opcion:hover{border-color:var(--magenta)}
.opcion .letra{font-family:var(--display);font-weight:700;color:var(--muted);flex:none}
.opcion.bien{border-color:var(--ok);background:var(--ok-bg);color:var(--ok)}
.opcion.mal{border-color:var(--magenta);background:#FCEDF3;color:var(--magenta)}
.opcion[disabled]{cursor:default}
.retro{font-size:.84rem;color:var(--muted);margin:.6rem 0 0;padding-left:.2rem}

/* ── cierre / CTA ──────────────────────────────────────────────────── */
.cierre{background:var(--plum);color:#fff;margin-top:3rem;padding:3.2rem 0 3.4rem}
.cierre h2{font-size:clamp(1.5rem,3vw,2.1rem);color:#fff}
.cierre p{color:rgba(255,255,255,.78);max-width:60ch}
.cierre .caja{display:grid;gap:1.6rem;grid-template-columns:1fr}
@media (min-width:60rem){.cierre .caja{grid-template-columns:minmax(0,1fr) 24rem;align-items:start}}
.cierre form{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius);padding:1.4rem 1.5rem;display:flex;flex-direction:column;gap:.7rem}
.cierre form label{display:flex;flex-direction:column;gap:.3rem;font-size:.78rem;
  letter-spacing:.04em;text-transform:uppercase;font-weight:700;color:rgba(255,255,255,.7)}
.cierre form input,.cierre form textarea,.cierre form select{background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);color:#fff;text-transform:none;letter-spacing:0;
  font-weight:400}
.cierre form input::placeholder,.cierre form textarea::placeholder{color:rgba(255,255,255,.45)}
.estado-form{font-size:.83rem;margin:0;color:var(--yellow)}
.pie{padding:1.6rem 0 2.4rem;color:var(--muted);font-size:.8rem}
.pie a{border-bottom:1px solid var(--line)}