/* ============================================================
   LIPOSSER · REGISTRO CON LECTURA FACIAL
   Hoja propia y autocontenida: este módulo se puede incrustar
   en cualquier lado sin arrastrar el CSS del sitio. Los colores
   son los mismos tokens de la marca, copiados a propósito.

   TRES REGLAS DE ESTA HOJA:
   1. Móvil primero. Las clases base son para teléfono; sm/md
      sólo agregan lo de pantalla grande.
   2. Nada tocable mide menos de 44px de alto.
   3. Nada se sale del ancho de la pantalla. Si algo desborda,
      es que se escribió un ancho fijo. No lo hagas.
   ============================================================ */

:root{
  --ink:#141A23;
  --ink-2:#1E2530;
  --ink-3:#28303C;
  --slate:#3B4654;
  --mute:#8B94A2;
  --crema:#FBF9F5;
  --arena:#F2EDE4;
  --linea:rgba(251,249,245,.13);
  --ambar:#C9854D;
  --ambar-lt:#E0AE7E;
  --ambar-dk:#9C6335;
  --verde:#5FA783;
  --rojo:#D2705C;

  --r-s:12px;
  --r-m:18px;
  --r-l:26px;
  --ease:cubic-bezier(.22,.65,.2,1);
  --sombra:0 18px 50px rgba(0,0,0,.45);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--ink);
  color:var(--crema);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img,video,canvas{ max-width:100%; display:block; }
h1,h2,h3{ font-family:'Fraunces',Georgia,serif; font-weight:900; line-height:1.06; margin:0; letter-spacing:-.015em; color:#fff; }
h1{ font-size:clamp(2rem,7.4vw,3.5rem); }
h2{ font-size:clamp(1.5rem,5.6vw,2.4rem); }
h3{ font-size:clamp(1.08rem,3.6vw,1.3rem); line-height:1.22; }
p{ margin:0; }
a{ color:inherit; }
::selection{ background:var(--ambar); color:#fff; }

/* ---------- composición ---------- */
.wrap{ width:100%; max-width:760px; margin-inline:auto; padding-inline:18px; }
@media (min-width:768px){ .wrap{ padding-inline:28px; } }
.sec{ padding-block:clamp(34px,7vw,64px); }
.sub{ color:rgba(251,249,245,.66); font-size:1rem; }
@media (min-width:768px){ .sub{ font-size:1.06rem; } }
.mini{ font-size:.83rem; line-height:1.5; color:rgba(251,249,245,.5); }
.serif{ font-family:'Fraunces',Georgia,serif; }
.tabular{ font-variant-numeric:tabular-nums; }
.oculto{ display:none !important; }

/* fondo con textura de luz — para que nunca haya un vacío muerto */
.fondo-luz{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.fondo-luz::before{
  content:''; position:absolute; inset:-30%;
  background:
    radial-gradient(46% 32% at 50% 8%, rgba(201,133,77,.20), transparent 70%),
    radial-gradient(38% 26% at 88% 68%, rgba(201,133,77,.11), transparent 70%),
    radial-gradient(50% 34% at 6% 88%, rgba(90,120,150,.10), transparent 72%);
}
.fondo-luz svg{ position:absolute; inset:0; width:100%; height:100%; opacity:.30; }
.capa{ position:relative; z-index:1; }

/* ---------- barra superior ---------- */
.tope{
  position:sticky; top:0; z-index:40;
  background:rgba(20,26,35,.86);
  backdrop-filter:saturate(1.3) blur(14px);
  -webkit-backdrop-filter:saturate(1.3) blur(14px);
  border-bottom:1px solid var(--linea);
}
.tope-in{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:58px; }
.marca{ display:flex; flex-direction:column; text-decoration:none; line-height:1.05; }
.marca-txt{ font-weight:800; letter-spacing:.20em; font-size:.86rem; }
.marca-sub{ font-size:.6rem; letter-spacing:.15em; text-transform:uppercase; color:var(--ambar-lt); }
.tope .salir{
  display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:0 14px;
  border:1px solid var(--linea); border-radius:999px;
  font-size:.82rem; font-weight:600; text-decoration:none; color:rgba(251,249,245,.8);
}
.incrustado .tope{ display:none; }

/* ---------- progreso ---------- */
.progreso{ display:flex; gap:6px; margin-top:22px; }
.progreso i{ flex:1; height:3px; border-radius:999px; background:rgba(251,249,245,.14); transition:background .4s var(--ease); }
.progreso i.on{ background:var(--ambar); }
.paso-rotulo{
  display:inline-flex; align-items:center; gap:9px; margin-top:16px;
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--ambar-lt);
}
.paso-rotulo::before{ content:''; width:22px; height:1px; background:var(--ambar); }

/* ---------- botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:52px; padding:0 22px; border-radius:999px; border:1px solid transparent;
  font-family:inherit; font-size:.97rem; font-weight:700; text-decoration:none; cursor:pointer;
  transition:transform .18s var(--ease), background .2s var(--ease), border-color .2s var(--ease), opacity .2s;
  -webkit-tap-highlight-color:transparent;
}
.btn:active{ transform:scale(.98); }
.btn:disabled{ opacity:.45; cursor:not-allowed; }
.btn-1{ background:var(--ambar); color:#fff; }
.btn-1:hover:not(:disabled){ background:var(--ambar-dk); }
.btn-2{ background:transparent; color:var(--crema); border-color:rgba(251,249,245,.26); }
.btn-2:hover{ border-color:rgba(251,249,245,.5); }
.btn-3{ background:rgba(251,249,245,.07); color:var(--crema); }
.btn-wa{ background:#25D366; color:#0B2B18; }
.btn-blk{ width:100%; }
.btn-sm{ min-height:44px; padding:0 16px; font-size:.87rem; }
.botonera{ display:flex; flex-direction:column; gap:10px; margin-top:22px; }
@media (min-width:560px){
  .botonera{ flex-direction:row; flex-wrap:wrap; }
  .botonera .btn-blk{ width:auto; flex:1 1 auto; }
}

/* ---------- tarjetas ---------- */
.tarjeta{
  background:linear-gradient(180deg, rgba(251,249,245,.055), rgba(251,249,245,.022));
  border:1px solid var(--linea); border-radius:var(--r-l);
  padding:20px; box-shadow:var(--sombra);
}
@media (min-width:640px){ .tarjeta{ padding:28px; } }
.tarjeta + .tarjeta{ margin-top:16px; }

/* ---------- portada ---------- */
.portada h1{ margin-top:14px; }
.portada .sub{ margin-top:16px; }
.sellos{ display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.sello{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 13px; border-radius:999px;
  border:1px solid var(--linea); background:rgba(251,249,245,.045);
  font-size:.78rem; font-weight:600; color:rgba(251,249,245,.82);
}
.sello svg{ flex:none; color:var(--ambar-lt); }

.pasos-lista{ list-style:none; margin:24px 0 0; padding:0; display:grid; gap:12px; }
.pasos-lista li{ display:flex; gap:13px; align-items:flex-start; }
.pasos-lista b{
  flex:none; width:27px; height:27px; border-radius:999px; margin-top:1px;
  display:grid; place-items:center; font-size:.78rem; font-weight:800;
  background:rgba(201,133,77,.16); color:var(--ambar-lt); border:1px solid rgba(201,133,77,.3);
}
.pasos-lista span{ font-size:.94rem; color:rgba(251,249,245,.75); }

/* ---------- aviso legal ---------- */
.legal{
  display:flex; gap:11px; align-items:flex-start;
  border:1px solid rgba(251,249,245,.12); border-radius:var(--r-m);
  background:rgba(251,249,245,.035); padding:14px 15px;
  font-size:.84rem; line-height:1.55; color:rgba(251,249,245,.68);
}
.legal svg{ flex:none; margin-top:2px; color:var(--ambar-lt); }
.legal b{ color:rgba(251,249,245,.9); }

.privacidad{ margin-top:18px; }
.privacidad dl{ margin:0; display:grid; gap:13px; }
.privacidad dt{ font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; font-weight:700; color:var(--ambar-lt); }
.privacidad dd{ margin:5px 0 0; font-size:.9rem; color:rgba(251,249,245,.72); }

/* casillas de consentimiento — grandes, tocables, NUNCA premarcadas */
.casilla{
  display:flex; gap:13px; align-items:flex-start;
  padding:15px; border-radius:var(--r-m); cursor:pointer;
  border:1px solid rgba(251,249,245,.16); background:rgba(251,249,245,.03);
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.casilla + .casilla{ margin-top:11px; }
.casilla:has(input:checked){ border-color:rgba(201,133,77,.62); background:rgba(201,133,77,.09); }
.casilla input{
  flex:none; appearance:none; -webkit-appearance:none;
  width:24px; height:24px; margin:1px 0 0; border-radius:7px; cursor:pointer;
  border:1.6px solid rgba(251,249,245,.4); background:transparent;
  transition:background .18s var(--ease), border-color .18s var(--ease);
}
.casilla input:checked{ background:var(--ambar); border-color:var(--ambar); }
.casilla input:checked::after{
  content:''; display:block; width:6px; height:11px; margin:3px auto 0;
  border:solid #fff; border-width:0 2.2px 2.2px 0; transform:rotate(43deg);
}
.casilla input:focus-visible{ outline:2px solid var(--ambar-lt); outline-offset:3px; }
.casilla .txt{ font-size:.92rem; line-height:1.5; }
.casilla .txt em{ display:block; font-style:normal; margin-top:4px; font-size:.8rem; color:rgba(251,249,245,.55); }
.casilla .opc{ font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--ambar-lt); }

/* ---------- el escáner ---------- */
.escaner{
  position:relative; width:100%; aspect-ratio:3/4;
  max-height:min(64vh,560px); margin-inline:auto;
  border-radius:var(--r-l); overflow:hidden;
  background:#0B0F15; border:1px solid rgba(251,249,245,.14);
  box-shadow:0 26px 70px rgba(0,0,0,.5), inset 0 0 60px rgba(0,0,0,.5);
}
@media (min-width:640px){ .escaner{ aspect-ratio:4/5; max-width:460px; } }
.escaner video, .escaner canvas, .escaner img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.escaner video{ transform:scaleX(-1); }
.escaner .lienzo{ transform:scaleX(-1); }
.escaner.sin-espejo video, .escaner.sin-espejo .lienzo{ transform:none; }

/* esquinas del encuadre */
.marco{ position:absolute; inset:14px; pointer-events:none; }
.marco i{ position:absolute; width:26px; height:26px; border:1.6px solid rgba(224,174,126,.75); }
.marco i:nth-child(1){ top:0; left:0; border-right:0; border-bottom:0; border-radius:9px 0 0 0; }
.marco i:nth-child(2){ top:0; right:0; border-left:0; border-bottom:0; border-radius:0 9px 0 0; }
.marco i:nth-child(3){ bottom:0; left:0; border-right:0; border-top:0; border-radius:0 0 0 9px; }
.marco i:nth-child(4){ bottom:0; right:0; border-left:0; border-top:0; border-radius:0 0 9px 0; }

.escaner-msg{
  position:absolute; left:14px; right:14px; bottom:14px; z-index:3;
  padding:11px 14px; border-radius:14px;
  background:rgba(11,15,21,.74); backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  border:1px solid rgba(251,249,245,.14);
  font-size:.83rem; line-height:1.45; text-align:center; color:rgba(251,249,245,.9);
}
.escaner-msg b{ color:var(--ambar-lt); }
.escaner-msg:empty{ display:none; }
.escaner-tapa{
  position:absolute; inset:0; z-index:4; display:grid; place-items:center; padding:24px; text-align:center;
  background:linear-gradient(180deg, rgba(11,15,21,.55), rgba(11,15,21,.92));
}
.escaner-tapa .ic{ margin:0 auto 12px; color:var(--ambar-lt); }
.escaner-tapa p{ font-size:.92rem; color:rgba(251,249,245,.78); max-width:34ch; margin-inline:auto; }
.escaner-tapa h3{ margin-bottom:6px; }

.etiqueta-demo{
  position:absolute; top:14px; left:50%; transform:translateX(-50%); z-index:5;
  padding:6px 12px; border-radius:999px;
  background:rgba(11,15,21,.8); border:1px solid rgba(201,133,77,.45);
  font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; font-weight:700; color:var(--ambar-lt);
  white-space:nowrap;
}

.captura-fila{ display:flex; gap:10px; align-items:center; justify-content:center; margin-top:18px; flex-wrap:wrap; }
.obturador{
  width:72px; height:72px; border-radius:999px; flex:none; cursor:pointer;
  border:2px solid rgba(251,249,245,.55); background:transparent;
  display:grid; place-items:center; transition:transform .18s var(--ease), border-color .2s;
  -webkit-tap-highlight-color:transparent;
}
.obturador span{ width:54px; height:54px; border-radius:999px; background:var(--crema); transition:background .2s; }
.obturador:active{ transform:scale(.94); }
.obturador:disabled{ opacity:.4; cursor:not-allowed; }
.obturador:not(:disabled):hover span{ background:var(--ambar-lt); }

.flash{ position:absolute; inset:0; z-index:6; background:#fff; opacity:0; pointer-events:none; }
.flash.dispara{ animation:destello .5s var(--ease); }
@keyframes destello{ 0%{opacity:.85} 100%{opacity:0} }

/* ---------- preguntas ---------- */
.pregunta{ margin-top:26px; }
.pregunta:first-child{ margin-top:0; }
.pregunta > label, .pregunta .q{
  display:block; font-family:'Fraunces',Georgia,serif; font-weight:600;
  font-size:1.12rem; line-height:1.25; color:#fff; margin-bottom:12px;
}
.pregunta .ayuda{ display:block; margin-top:-6px; margin-bottom:12px; font-size:.83rem; color:rgba(251,249,245,.5); }
.opciones{ display:grid; gap:9px; }
@media (min-width:560px){ .opciones.dos{ grid-template-columns:1fr 1fr; } }
.op{
  display:flex; align-items:center; gap:11px; cursor:pointer;
  min-height:52px; padding:12px 15px; border-radius:var(--r-m);
  border:1px solid rgba(251,249,245,.15); background:rgba(251,249,245,.03);
  font-size:.94rem; line-height:1.35;
  transition:border-color .18s var(--ease), background .18s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.op:has(input:checked){ border-color:var(--ambar); background:rgba(201,133,77,.13); }
.op input{
  flex:none; appearance:none; -webkit-appearance:none;
  width:20px; height:20px; border-radius:999px; margin:0;
  border:1.6px solid rgba(251,249,245,.4); background:transparent;
}
.op input:checked{ border-color:var(--ambar); border-width:6px; }
.op input:focus-visible{ outline:2px solid var(--ambar-lt); outline-offset:3px; }

.campo{ margin-top:16px; }
.campo label{ display:block; font-size:.85rem; font-weight:600; margin-bottom:7px; color:rgba(251,249,245,.82); }
.campo input{
  width:100%; min-height:52px; padding:0 15px; border-radius:var(--r-m);
  border:1px solid rgba(251,249,245,.17); background:rgba(251,249,245,.045);
  color:var(--crema); font-family:inherit; font-size:1rem;
}
.campo input::placeholder{ color:rgba(251,249,245,.32); }
.campo input:focus{ outline:none; border-color:var(--ambar); background:rgba(201,133,77,.08); }
.campo .err{ display:none; margin-top:6px; font-size:.82rem; color:var(--rojo); }
.campo.mal input{ border-color:var(--rojo); }
.campo.mal .err{ display:block; }
@media (min-width:560px){ .campo-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; } .campo-2 .campo{ margin-top:16px; } }

/* miniatura de la foto dentro del cuestionario */
.mini-foto{ display:flex; gap:13px; align-items:center; padding:13px; border-radius:var(--r-m); border:1px solid var(--linea); background:rgba(251,249,245,.035); margin-top:20px; }
.mini-foto img{ width:56px; height:70px; object-fit:cover; border-radius:10px; flex:none; border:1px solid rgba(251,249,245,.16); }
.mini-foto .t{ flex:1; min-width:0; font-size:.86rem; line-height:1.4; }
.mini-foto button{
  flex:none; min-height:44px; padding:0 13px; border-radius:999px; cursor:pointer;
  background:transparent; border:1px solid rgba(210,112,92,.5); color:var(--rojo);
  font-family:inherit; font-size:.8rem; font-weight:700;
}

/* ---------- resultado ---------- */
.resultado-ic{ width:56px; height:56px; border-radius:999px; display:grid; place-items:center; background:rgba(95,167,131,.15); border:1px solid rgba(95,167,131,.4); color:var(--verde); }
.dato{ display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px solid rgba(251,249,245,.09); font-size:.9rem; }
.dato:last-child{ border-bottom:0; }
.dato span{ color:rgba(251,249,245,.55); }
.dato b{ text-align:right; font-weight:600; }

.vista-clinica{ margin-top:26px; border:1px dashed rgba(201,133,77,.42); border-radius:var(--r-l); padding:20px; background:rgba(201,133,77,.05); }
.vista-clinica .rot{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; font-weight:800; color:var(--ambar-lt); }
.ficha{ margin-top:14px; border-radius:var(--r-m); background:rgba(11,15,21,.55); border:1px solid var(--linea); padding:16px; }
.ficha-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.ficha-top .n{ font-weight:700; font-size:1rem; }
.et{ display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:999px; font-size:.72rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.et-caliente{ background:rgba(210,112,92,.18); color:#EE9A86; border:1px solid rgba(210,112,92,.4); }
.et-tibia{ background:rgba(201,133,77,.18); color:var(--ambar-lt); border:1px solid rgba(201,133,77,.42); }
.et-fria{ background:rgba(251,249,245,.08); color:rgba(251,249,245,.7); border:1px solid rgba(251,249,245,.18); }
.razon{ margin-top:11px; font-size:.9rem; color:rgba(251,249,245,.75); }
.razon b{ color:#fff; }

/* ---------- pie ---------- */
.pie{ border-top:1px solid var(--linea); margin-top:44px; padding-block:26px 34px; }
.pie .mini + .mini{ margin-top:9px; }

/* ---------- transición entre pasos ---------- */
.paso{ animation:entra .5s var(--ease) both; }
@keyframes entra{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }