/* =========================================================================
   Formulario SAGRILAFT · Evolution Fitness Corp. S.A.S.
   Sistema visual derivado de la identidad de evolutionfitness.co:
   naranja #FF6600, tinta casi negra, titulares en Bebas Neue.
   ========================================================================= */

:root{
  --naranja:#FF6600;
  --naranja-osc:#E25400;
  --naranja-tenue:#FFF2E8;
  --naranja-borde:#FFD2B0;

  --tinta:#14161C;
  --tinta-suave:#20242A;
  --gris:#69727D;
  --gris-claro:#9299A3;

  --linea:#E6EAEF;
  --linea-fuerte:#D2D8E0;
  --fondo:#F2F4F7;
  --blanco:#FFFFFF;

  --ok:#0E7C5A;
  --ok-fondo:#E8F6F0;
  --error:#B42318;
  --error-fondo:#FDF0EE;
  --aviso:#B25E09;
  --aviso-fondo:#FFF7EC;

  --r-chico:8px;
  --r:12px;
  --r-grande:18px;

  --sombra-1:0 1px 2px rgba(20,22,28,.06);
  --sombra-2:0 1px 3px rgba(20,22,28,.07), 0 12px 32px -14px rgba(20,22,28,.28);
  --sombra-3:0 2px 6px rgba(20,22,28,.08), 0 24px 48px -20px rgba(20,22,28,.35);

  --titular:"Bebas Neue","Oswald","Arial Narrow",Impact,sans-serif;
  --texto:"Inter","Segoe UI",system-ui,-apple-system,Arial,sans-serif;

  --ancho:920px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:var(--texto);
  font-size:15px;
  line-height:1.6;
  color:var(--tinta-suave);
  background:var(--fondo);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

[hidden]{display:none !important}

/* ---------------------------------------------------------------- CABECERA */
.ef-cabecera{
  background:var(--tinta);
  background-image:
    radial-gradient(120% 180% at 82% -40%, rgba(255,102,0,.30), transparent 58%),
    radial-gradient(90% 140% at 8% 130%, rgba(255,102,0,.12), transparent 60%);
  border-bottom:3px solid var(--naranja);
  color:#fff;
  padding:26px 20px 30px;
}

.ef-cabecera__marca{
  max-width:var(--ancho);
  margin:0 auto;
}

.ef-logo{
  display:block;
  height:34px;
  width:auto;
  margin:0 0 22px;
}

.ef-kicker{
  display:inline-block;
  font-family:var(--titular);
  font-size:13px;
  letter-spacing:.14em;
  line-height:1.3;
  text-transform:uppercase;
  color:var(--naranja);
  border:1px solid rgba(255,102,0,.45);
  background:rgba(255,102,0,.10);
  border-radius:999px;
  padding:7px 13px 5px;
  margin-bottom:14px;
}

.ef-cabecera h1{
  font-family:var(--titular);
  font-weight:400;
  font-size:clamp(30px,5.4vw,46px);
  line-height:1.02;
  letter-spacing:.012em;
  margin:0 0 10px;
  color:#fff;
  max-width:20ch;
}

.ef-nit{
  margin:0;
  font-size:13.5px;
  color:rgba(255,255,255,.62);
  letter-spacing:.02em;
}

/* ------------------------------------------------------------- ENVOLTURA */
.ef-envoltura{
  max-width:var(--ancho);
  margin:0 auto;
  padding:26px 20px 40px;
}

/* ----------------------------------------------------------------- AVISO */
.ef-aviso{
  background:var(--blanco);
  border:1px solid var(--linea);
  border-left:4px solid var(--naranja);
  border-radius:var(--r);
  padding:20px 22px;
  margin:0 0 22px;
  box-shadow:var(--sombra-1);
}

.ef-aviso h2{
  font-family:var(--titular);
  font-weight:400;
  font-size:20px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--tinta);
  margin:0 0 8px;
}

.ef-aviso p{margin:0 0 10px; font-size:14px; color:var(--gris); line-height:1.65}
.ef-aviso p:last-child{margin-bottom:0}
.ef-aviso strong{color:var(--tinta-suave)}

a{color:var(--naranja-osc); text-decoration:underline; text-underline-offset:2px}
a:hover{color:var(--naranja)}

/* -------------------------------------------------------------- TARJETAS */
.ef-tarjeta{
  background:var(--blanco);
  border:1px solid var(--linea);
  border-radius:var(--r-grande);
  padding:28px;
  margin:0 0 22px;
  box-shadow:var(--sombra-2);
}

.ef-tarjeta__titulo{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:var(--titular);
  font-weight:400;
  font-size:26px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--tinta);
  margin:0 0 6px;
  padding:0 0 16px;
  border-bottom:1px solid var(--linea);
}

.ef-num{
  display:inline-grid;
  place-items:center;
  width:34px; height:34px;
  flex:0 0 34px;
  border-radius:50%;
  background:var(--naranja);
  color:#fff;
  font-size:18px;
  line-height:1;
  padding-top:3px;
  box-shadow:0 4px 10px -3px rgba(255,102,0,.7);
}

.ef-explica{
  font-size:14px;
  color:var(--gris);
  margin:14px 0 18px;
  line-height:1.65;
}

.ef-nota{
  font-size:13px;
  color:var(--gris-claro);
  margin:10px 0 0;
}

/* ---------------------------------------------------------------- CAMPOS */
.ef-campos{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px 18px;
  margin:20px 0 0;
}

.ef-campo{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}

.ef-campo--corto{max-width:280px}

.ef-campo > span{
  font-size:12px;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--gris);
}

.ef-campo em,
.ef-declaracion em,
.ef-documento em,
.ef-firma__etiqueta em{
  color:var(--naranja);
  font-style:normal;
  font-weight:700;
}

.ef-campo input,
.ef-campo select,
.ef-campo textarea{
  font-family:inherit;
  font-size:15px;
  color:var(--tinta-suave);
  background:var(--blanco);
  border:1.5px solid var(--linea-fuerte);
  border-radius:var(--r-chico);
  padding:0 13px;
  height:46px;
  width:100%;
  transition:border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
  appearance:none;
}

.ef-campo select{
  padding-right:38px;
  cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2369727D' d='M6 8 0 1.4 1.4 0 6 4.6 10.6 0 12 1.4z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
}

.ef-campo input::placeholder{color:#B6BCC6}

.ef-campo input:hover,
.ef-campo select:hover{border-color:#B9C1CC}

.ef-campo input:focus,
.ef-campo select:focus{
  outline:none;
  border-color:var(--naranja);
  box-shadow:0 0 0 3.5px rgba(255,102,0,.16);
}

.ef-campo input[type="date"]{padding-right:10px}

.ef-campo:has(.ef-error:not([hidden])) input,
.ef-campo:has(.ef-error:not([hidden])) select{
  border-color:var(--error);
  background:var(--error-fondo);
}

.ef-error{
  font-size:12.5px;
  color:var(--error);
  font-weight:500;
  display:flex;
  gap:5px;
  align-items:flex-start;
}
.ef-error::before{content:"!"; font-weight:800; line-height:1.25}

/* --------------------------------------------------------------- BOTONES */
.ef-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:var(--titular);
  font-size:17px;
  letter-spacing:.07em;
  text-transform:uppercase;
  line-height:1;
  padding:15px 24px 12px;
  min-height:46px;
  border:1.5px solid var(--linea-fuerte);
  border-radius:var(--r-chico);
  background:var(--blanco);
  color:var(--tinta);
  cursor:pointer;
  transition:transform .12s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease, color .16s ease;
}

.ef-btn:hover{border-color:var(--tinta); background:#FAFBFC}
.ef-btn:active{transform:translateY(1px)}

.ef-btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3.5px rgba(255,102,0,.32);
}

.ef-btn--principal{
  background:var(--naranja);
  border-color:var(--naranja);
  color:#fff;
  box-shadow:0 6px 16px -8px rgba(255,102,0,.95);
}
.ef-btn--principal:hover{
  background:var(--naranja-osc);
  border-color:var(--naranja-osc);
  color:#fff;
  box-shadow:0 10px 22px -10px rgba(255,102,0,.95);
}

.ef-btn--secundario{background:transparent; color:var(--gris)}
.ef-btn--secundario:hover{color:var(--tinta)}

.ef-btn--texto{
  border:none; background:none; padding:8px 4px; min-height:0;
  color:var(--naranja-osc); font-family:var(--texto);
  font-size:13px; letter-spacing:0; text-transform:none;
  text-decoration:underline; text-underline-offset:3px;
}
.ef-btn--texto:hover{background:none; color:var(--naranja)}

.ef-btn:disabled{
  opacity:.42; cursor:not-allowed; transform:none;
  box-shadow:none;
}

#btn-identificar,
#btn-enviar-codigo{margin-top:22px}

/* -------------------------------------------------------------- MENSAJES */
.ef-mensaje{
  margin:18px 0 0;
  padding:12px 15px;
  border-radius:var(--r-chico);
  font-size:14px;
  font-weight:500;
  border-left:3px solid var(--gris-claro);
  background:#F7F9FB;
  color:var(--gris);
}
.ef-mensaje--error{border-left-color:var(--error); background:var(--error-fondo); color:var(--error)}
.ef-mensaje--ok{border-left-color:var(--ok); background:var(--ok-fondo); color:var(--ok)}
.ef-mensaje--aviso{border-left-color:var(--aviso); background:var(--aviso-fondo); color:var(--aviso)}

/* --------------------------------------------------------------- CANALES */
.ef-canales{
  display:grid;
  gap:12px;
  margin:20px 0 0;
}

.ef-canal{
  display:grid;
  grid-template-columns:22px 1fr;
  grid-template-rows:auto auto;
  column-gap:14px;
  align-items:center;
  padding:16px 18px;
  border:1.5px solid var(--linea-fuerte);
  border-radius:var(--r);
  cursor:pointer;
  background:var(--blanco);
  transition:border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.ef-canal:hover{border-color:#B9C1CC; background:#FCFDFE}

.ef-canal input{
  grid-row:1 / span 2;
  appearance:none;
  width:20px; height:20px;
  border:2px solid var(--linea-fuerte);
  border-radius:50%;
  margin:0;
  cursor:pointer;
  transition:border-color .16s ease, box-shadow .16s ease;
}
.ef-canal input:checked{
  border-color:var(--naranja);
  box-shadow:inset 0 0 0 4px var(--blanco), inset 0 0 0 12px var(--naranja);
}
.ef-canal:has(input:checked){
  border-color:var(--naranja);
  background:var(--naranja-tenue);
  box-shadow:0 0 0 3px rgba(255,102,0,.10);
}

.ef-canal__tipo{
  font-family:var(--titular);
  font-size:18px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--tinta);
  line-height:1.2;
}
.ef-canal__destino{
  font-size:13.5px;
  color:var(--gris);
  font-variant-numeric:tabular-nums;
}

/* ------------------------------------------------------------------- OTP */
.ef-otp{
  margin:22px 0 0;
  padding:22px;
  border:1px dashed var(--naranja-borde);
  border-radius:var(--r);
  background:var(--naranja-tenue);
}
.ef-otp .ef-campo input{
  font-family:var(--titular);
  font-size:30px;
  letter-spacing:.34em;
  text-align:center;
  height:60px;
  padding-left:.34em;
  background:var(--blanco);
}
.ef-otp .ef-btn{margin-top:16px}
.ef-otp .ef-nota{min-height:19px}

/* --------------------------------------------------------------- STEPPER */
.ef-pasos{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:0 0 16px;
  margin:0 0 24px;
  border-bottom:1px solid var(--linea);
  scrollbar-width:thin;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
}
.ef-pasos::-webkit-scrollbar{height:4px}
.ef-pasos::-webkit-scrollbar-thumb{background:var(--linea-fuerte); border-radius:4px}

.ef-pasos__item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
  scroll-snap-align:start;
  padding:8px 14px 8px 8px;
  border:1.5px solid var(--linea);
  border-radius:999px;
  font-size:12.5px;
  font-weight:600;
  color:var(--gris-claro);
  background:var(--blanco);
  white-space:nowrap;
  transition:all .18s ease;
}
.ef-pasos__item b{
  display:inline-grid;
  place-items:center;
  width:24px; height:24px;
  border-radius:50%;
  background:var(--fondo);
  color:var(--gris-claro);
  font-family:var(--titular);
  font-size:14px;
  font-weight:400;
  padding-top:2px;
}
.ef-pasos__item.es-hecho{color:var(--ok); border-color:#BFE5D6; background:var(--ok-fondo)}
.ef-pasos__item.es-hecho b{background:var(--ok); color:#fff; font-size:0}
.ef-pasos__item.es-hecho b::after{content:"✓"; font-size:13px; font-family:var(--texto)}
.ef-pasos__item.es-actual{
  color:var(--tinta);
  border-color:var(--naranja);
  background:var(--naranja-tenue);
  box-shadow:0 0 0 3px rgba(255,102,0,.12);
}
.ef-pasos__item.es-actual b{background:var(--naranja); color:#fff}

/* ----------------------------------------------------------------- PASOS */
.ef-paso{animation:aparece .28s ease both}
@keyframes aparece{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

.ef-paso > h3{
  font-family:var(--titular);
  font-weight:400;
  font-size:24px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--naranja);
  margin:0 0 4px;
}
.ef-paso > h3 + .ef-explica{margin-top:0}

/* --------------------------------------------------------- DECLARACIONES */
.ef-declaraciones{display:grid; gap:10px; margin:18px 0 26px}

.ef-declaracion{
  display:grid;
  grid-template-columns:22px 1fr;
  gap:14px;
  align-items:start;
  padding:15px 17px;
  border:1.5px solid var(--linea-fuerte);
  border-radius:var(--r);
  background:var(--blanco);
  cursor:pointer;
  font-size:14px;
  line-height:1.55;
  color:var(--gris);
  transition:border-color .16s ease, background-color .16s ease;
}
.ef-declaracion:hover{border-color:#B9C1CC}
.ef-declaracion .ef-error{grid-column:2}
.ef-declaracion:has(.ef-error:not([hidden])){border-color:var(--error); background:var(--error-fondo)}
.ef-firma .ef-error{margin-top:2px}
.ef-declaracion:has(input:checked){
  border-color:var(--naranja);
  background:var(--naranja-tenue);
  color:var(--tinta-suave);
}

.ef-declaracion input,
.ef-documento input[type="checkbox"]{
  appearance:none;
  width:22px; height:22px;
  margin:0;
  border:2px solid var(--linea-fuerte);
  border-radius:6px;
  background:var(--blanco);
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:all .16s ease;
}
.ef-declaracion input:checked{background:var(--naranja); border-color:var(--naranja)}
.ef-declaracion input:checked::after{
  content:"";
  width:6px; height:11px;
  border:solid #fff;
  border-width:0 2.5px 2.5px 0;
  transform:rotate(43deg) translateY(-1px);
}
.ef-declaracion input:focus-visible{outline:none; box-shadow:0 0 0 3.5px rgba(255,102,0,.3)}

/* ------------------------------------------------------------ DOCUMENTOS */
#zona-documentos{display:grid; gap:12px; margin:18px 0 0}

.ef-documento{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:16px 18px;
  border:1.5px dashed var(--linea-fuerte);
  border-radius:var(--r);
  background:#FBFCFD;
  transition:border-color .16s ease, background-color .16s ease;
}
.ef-documento:hover{border-color:var(--naranja-borde); background:var(--blanco)}

.ef-documento__info{display:flex; flex-direction:column; gap:3px; min-width:190px}
.ef-documento__info strong{
  font-size:14.5px;
  font-weight:600;
  color:var(--tinta-suave);
}

.ef-documento__estado{
  font-size:12px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--gris-claro);
}
.ef-documento__estado.es-ok{color:var(--ok)}
.ef-documento__estado.es-error{color:var(--error)}

.ef-documento__boton{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  font-family:var(--titular);
  font-size:15px;
  letter-spacing:.07em;
  text-transform:uppercase;
  line-height:1;
  padding:13px 20px 10px;
  border:1.5px solid var(--tinta);
  border-radius:var(--r-chico);
  background:var(--blanco);
  color:var(--tinta);
  cursor:pointer;
  white-space:nowrap;
  transition:background-color .16s ease, color .16s ease, transform .12s ease;
}
.ef-documento__boton:hover{background:var(--tinta); color:#fff}
.ef-documento__boton:active{transform:translateY(1px)}
.ef-documento__boton:focus-within{outline:none; box-shadow:0 0 0 3.5px rgba(255,102,0,.32)}
.ef-documento__boton input[type="file"]{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap; border:0;
}

/* ----------------------------------------------------------------- FIRMA */
.ef-firma{margin:26px 0 0}

.ef-firma__etiqueta{
  display:block;
  font-size:12px;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--gris);
  margin-bottom:8px;
}

#lienzo-firma{
  display:block;
  width:100%;
  max-width:600px;
  height:auto;
  aspect-ratio:3/1;
  border:1.5px solid var(--linea-fuerte);
  border-radius:var(--r);
  background:
    linear-gradient(var(--linea-fuerte),var(--linea-fuerte)) no-repeat center 78%/86% 1px,
    var(--blanco);
  cursor:crosshair;
  touch-action:none;
}
#lienzo-firma:hover{border-color:var(--naranja-borde)}

.ef-firma__acciones{margin-top:4px}

/* ------------------------------------------------------------ NAVEGACIÓN */
.ef-navegacion{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin:30px 0 0;
  padding:20px 0 0;
  border-top:1px solid var(--linea);
}
#btn-atras{margin-right:auto}

/* ------------------------------------------------------------------ ÉXITO */
.ef-tarjeta--exito{
  text-align:center;
  border-color:#BFE5D6;
  border-top:4px solid var(--ok);
}
.ef-tarjeta--exito::before{
  content:"✓";
  display:grid;
  place-items:center;
  width:62px; height:62px;
  margin:6px auto 18px;
  border-radius:50%;
  background:var(--ok-fondo);
  color:var(--ok);
  font-size:30px;
  font-weight:700;
}
.ef-tarjeta--exito h2{
  font-family:var(--titular);
  font-weight:400;
  font-size:30px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--tinta);
  margin:0 0 10px;
}
.ef-tarjeta--exito p{color:var(--gris); margin:0 auto 8px; max-width:52ch}

/* ------------------------------------------------------------------- PIE */
.ef-pie{
  border-top:1px solid var(--linea);
  background:var(--blanco);
  padding:22px 20px;
}
.ef-pie p{
  max-width:var(--ancho);
  margin:0 auto;
  font-size:12.5px;
  color:var(--gris-claro);
  text-align:center;
}

/* ------------------------------------------------------------ RESPONSIVE */
@media (max-width:640px){
  body{font-size:14.5px}
  .ef-cabecera{padding:20px 16px 24px}
  .ef-logo{height:28px; margin-bottom:18px}
  .ef-envoltura{padding:18px 14px 34px}
  .ef-tarjeta{padding:20px 16px; border-radius:var(--r)}
  .ef-aviso{padding:16px}
  .ef-campos{grid-template-columns:1fr; gap:14px}
  .ef-campo--corto{max-width:none}
  .ef-tarjeta__titulo{font-size:22px}
  .ef-navegacion{
    position:sticky;
    bottom:0;
    background:var(--blanco);
    margin:24px -16px -20px;
    padding:14px 16px calc(14px + env(safe-area-inset-bottom));
    box-shadow:0 -6px 18px -12px rgba(20,22,28,.5);
    z-index:5;
  }
  .ef-navegacion .ef-btn{flex:1 1 auto; padding-left:14px; padding-right:14px}
  #btn-atras{margin-right:0}
  .ef-documento{flex-direction:column; align-items:stretch}
  .ef-documento__boton{width:100%}
}

/* ------------------------------------------------------------------- A11Y */
:focus-visible{outline:2px solid var(--naranja); outline-offset:2px}

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

@media print{
  .ef-cabecera{background:#fff; color:#000; border-bottom:2px solid #000}
  .ef-navegacion,.ef-pasos{display:none}
  .ef-tarjeta{box-shadow:none; border:1px solid #999}
}

/* ------------------------------------------------------ BARRA DE AVANCE */
.ef-avance{margin:0 0 20px}

.ef-avance__texto{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--gris);
  margin-bottom:9px;
}
.ef-avance__texto span:last-child{
  font-family:var(--titular);
  font-size:17px;
  letter-spacing:.04em;
  color:var(--naranja);
}

.ef-avance__riel{
  height:7px;
  border-radius:999px;
  background:var(--fondo);
  overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(20,22,28,.08);
}
.ef-avance__riel i{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--naranja-osc),var(--naranja));
  transition:width .4s cubic-bezier(.4,0,.2,1);
}

/* --------------------------------------------------------- TEXTO DE AYUDA */
.ef-ayuda{
  font-size:12.5px;
  color:var(--gris-claro);
  line-height:1.45;
}