/* ==================================================================
   EleMa — cuestionario para clientes nuevos
   El mismo sistema visual del sitio: «alacena de terminal». Oscuro,
   verde lima de la marca, retícula de fondo, Fragment Mono para las
   etiquetas técnicas e Instrument Serif itálica para las frases.
   ================================================================== */

:root{
  --bg:        #050807;
  --panel:     #0A120D;
  --footer:    #030504;
  --vidrio:    rgba(255,255,255,.045);
  --vidrio-2:  rgba(255,255,255,.075);

  --ink:       #F2F7F3;
  --ink-70:    rgba(242,247,243,.72);
  --ink-55:    rgba(242,247,243,.55);
  --ink-35:    rgba(242,247,243,.35);
  --ink-18:    rgba(242,247,243,.18);
  --ink-12:    rgba(242,247,243,.12);

  --lima:      #57FC0F;
  --lima-on:   #08150A;
  --brote:     #B4FF7E;
  --lima-06:   rgba(87,252,15,.06);
  --lima-12:   rgba(87,252,15,.12);
  --lima-25:   rgba(87,252,15,.25);
  --lima-40:   rgba(87,252,15,.40);

  --alerta:    #FF6B4A;

  --ease-out:  cubic-bezier(.23,1,.32,1);
  --t-rapido:  160ms;
  --t-ui:      240ms;

  --ancho:     760px;
  --alto-barra: 4px;
}

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

html{ scroll-behavior:smooth; scroll-padding-top:96px }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important }
}

body{
  margin:0;
  color:var(--ink);
  font-family:'Bricolage Grotesque',system-ui,sans-serif;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  background-color:var(--bg);
  background-image:
    radial-gradient(1100px 540px at 78% -10%, rgba(87,252,15,.075), transparent 62%),
    linear-gradient(rgba(242,247,243,.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242,247,243,.026) 1px, transparent 1px);
  background-size:auto, 100% 34px, 34px 100%;
  background-attachment:fixed;
  overflow-x:hidden;
  line-height:1.55;
}

.mono{ font-family:'Fragment Mono',ui-monospace,monospace }
.serif{ font-family:'Instrument Serif',Georgia,serif; font-style:italic; font-weight:400 }

:focus-visible{ outline:2px solid var(--lima); outline-offset:3px; border-radius:2px }
::selection{ background:var(--lima); color:var(--lima-on) }

/* ------------------------------------------------------------ progreso */
/* Va pegada arriba del todo. Es lo único que le dice al cliente cuánto le
   falta; sin eso, un formulario largo se siente infinito y se abandona. */
.progreso{
  position:fixed; inset:0 0 auto 0; height:var(--alto-barra);
  background:var(--ink-12); z-index:60;
}
.progreso i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg, var(--lima-40), var(--lima));
  transition:width var(--t-ui) var(--ease-out);
}

/* ------------------------------------------------------------ encabezado */
header{
  max-width:var(--ancho); margin:0 auto; padding:56px 24px 0;
}
.marca{ display:flex; align-items:center; gap:14px; margin-bottom:44px }
.marca img{ height:26px; width:auto }
.marca span{
  font-family:'Fragment Mono',monospace; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-35);
  padding-left:14px; border-left:1px solid var(--ink-18);
}

h1{
  font-size:clamp(30px, 6vw, 46px); line-height:1.1; margin:0 0 18px;
  font-weight:600; letter-spacing:-.02em;
}
h1 em{ font-family:'Instrument Serif',Georgia,serif; font-style:italic; font-weight:400; color:var(--brote) }

.entradilla{ color:var(--ink-70); font-size:17px; max-width:60ch; margin:0 0 10px }
.minutos{
  font-family:'Fragment Mono',monospace; font-size:12px; color:var(--lima);
  letter-spacing:.06em; margin:26px 0 0;
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 13px; border:1px solid var(--lima-25); border-radius:999px;
  background:var(--lima-06);
}

/* ------------------------------------------------------------ secciones */
main{ max-width:var(--ancho); margin:0 auto; padding:0 24px 80px }

.seccion{
  margin-top:52px; padding-top:34px; border-top:1px solid var(--ink-12);
}
.seccion[hidden]{ display:none }

.seccion h2{
  font-size:13px; font-family:'Fragment Mono',monospace; font-weight:400;
  letter-spacing:.14em; text-transform:uppercase; color:var(--lima);
  margin:0 0 6px; display:flex; align-items:baseline; gap:12px;
}
.seccion h2 b{ color:var(--ink-35); font-weight:400 }
.seccion .entrada{ color:var(--ink-55); font-size:15px; margin:0 0 8px; max-width:62ch }

/* ------------------------------------------------------------ preguntas */
.pregunta{ margin-top:34px }

.pregunta > label,
.pregunta > .etiqueta{
  display:block; font-size:17px; font-weight:500; margin-bottom:4px; line-height:1.4;
}
.pregunta .obligatoria{ color:var(--lima); margin-left:4px }
.pregunta .ayuda{ color:var(--ink-55); font-size:14px; margin:0 0 12px; max-width:62ch }
.pregunta .ayuda:last-of-type{ margin-bottom:12px }

input[type=text], input[type=email], input[type=tel], textarea{
  width:100%; display:block;
  background:var(--vidrio); color:var(--ink);
  border:1px solid var(--ink-18); border-radius:10px;
  padding:13px 15px; font:inherit; font-size:16px;   /* 16px o iOS hace zoom */
  transition:border-color var(--t-rapido) ease, background var(--t-rapido) ease;
}
input::placeholder, textarea::placeholder{ color:var(--ink-35) }
input:hover, textarea:hover{ border-color:var(--ink-35) }
input:focus, textarea:focus{
  outline:none; border-color:var(--lima); background:var(--vidrio-2);
  box-shadow:0 0 0 3px var(--lima-12);
}
textarea{ min-height:104px; resize:vertical; line-height:1.55 }

/* --- radios y casillas, como fichas que se pueden tocar con el dedo --- */
.opciones{ display:flex; flex-direction:column; gap:9px; margin-top:12px }

.opcion{
  display:flex; align-items:flex-start; gap:12px;
  padding:13px 15px; cursor:pointer;
  background:var(--vidrio); border:1px solid var(--ink-18); border-radius:10px;
  transition:border-color var(--t-rapido) ease, background var(--t-rapido) ease;
}
.opcion:hover{ border-color:var(--ink-35); background:var(--vidrio-2) }
.opcion input{
  appearance:none; -webkit-appearance:none;
  flex:0 0 auto; width:19px; height:19px; margin:2px 0 0;
  border:1.5px solid var(--ink-35); background:transparent;
  transition:border-color var(--t-rapido) ease, background var(--t-rapido) ease;
  cursor:pointer;
}
.opcion input[type=radio]{ border-radius:50% }
.opcion input[type=checkbox]{ border-radius:5px }
.opcion input:checked{ border-color:var(--lima); background:var(--lima) }
.opcion input[type=radio]:checked{ box-shadow:inset 0 0 0 3.5px var(--bg) }
.opcion input[type=checkbox]:checked{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%2308150A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:100%;
}
.opcion:has(input:checked){ border-color:var(--lima-40); background:var(--lima-06) }
.opcion span{ font-size:15.5px; line-height:1.45 }

/* --- el error, cuando falta algo obligatorio --- */
.pregunta.falta input[type=text],
.pregunta.falta input[type=email],
.pregunta.falta input[type=tel],
.pregunta.falta textarea{ border-color:var(--alerta) }
.pregunta.falta .opciones{
  border-left:2px solid var(--alerta); padding-left:12px; margin-left:-14px;
}
.aviso-falta{
  display:none; color:var(--alerta); font-size:13.5px; margin-top:8px;
  font-family:'Fragment Mono',monospace;
}
.pregunta.falta .aviso-falta{ display:block }

/* ------------------------------------------------- abrir el detalle */
.abrir-detalle{
  margin-top:52px; padding-top:34px; border-top:1px solid var(--ink-12);
}
.abrir-detalle p{ color:var(--ink-55); font-size:15px; margin:0 0 16px; max-width:62ch }

.boton-fantasma{
  display:inline-flex; align-items:center; gap:10px;
  background:transparent; color:var(--ink); cursor:pointer;
  border:1px solid var(--ink-35); border-radius:999px;
  padding:12px 22px; font:inherit; font-size:15px;
  transition:border-color var(--t-rapido) ease, color var(--t-rapido) ease, background var(--t-rapido) ease;
}
.boton-fantasma:hover{ border-color:var(--lima); color:var(--lima); background:var(--lima-06) }
.boton-fantasma svg{ transition:transform var(--t-ui) var(--ease-out) }

/* ------------------------------------------------------------ enviar */
.enviar{
  margin-top:56px; padding-top:34px; border-top:1px solid var(--ink-12);
}
.boton{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:var(--lima); color:var(--lima-on); cursor:pointer;
  border:none; border-radius:999px;
  padding:16px 36px; font:inherit; font-size:16px; font-weight:600;
  transition:transform var(--t-rapido) var(--ease-out), box-shadow var(--t-ui) ease, opacity var(--t-rapido) ease;
  box-shadow:0 0 0 0 var(--lima-25);
}
.boton:hover:not(:disabled){ transform:translateY(-1px); box-shadow:0 8px 28px -8px var(--lima-40) }
.boton:active:not(:disabled){ transform:translateY(0) }
.boton:disabled{ opacity:.55; cursor:progress }

.privacidad{
  color:var(--ink-35); font-size:13.5px; margin:20px 0 0; max-width:62ch;
  font-family:'Fragment Mono',monospace; line-height:1.7;
}

.error-envio{
  display:none; margin-top:20px; padding:14px 16px;
  border:1px solid var(--alerta); border-radius:10px;
  background:rgba(255,107,74,.08); color:var(--ink);
  font-size:14.5px; line-height:1.6;
}
.error-envio.visible{ display:block }
.error-envio b{ color:var(--alerta) }

/* trampa para robots: invisible para la gente, irresistible para un bot */
.miel{
  position:absolute; left:-9999px; width:1px; height:1px;
  overflow:hidden; opacity:0;
}

/* ------------------------------------------------------------ el acuse */
.acuse{ max-width:var(--ancho); margin:0 auto; padding:90px 24px 100px; text-align:left }
.acuse .marca-check{
  width:58px; height:58px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--lima-12); border:1px solid var(--lima-40); margin-bottom:30px;
}
.acuse h1{ margin-bottom:14px }
.acuse p{ color:var(--ink-70); font-size:17px; max-width:58ch }
.referencia{
  display:inline-block; margin-top:30px; padding:13px 20px;
  border:1px dashed var(--ink-35); border-radius:10px;
  font-family:'Fragment Mono',monospace; font-size:14px; color:var(--ink-70);
}
.referencia b{ color:var(--lima); letter-spacing:.08em }

/* ------------------------------------------------------------ pie */
footer{
  border-top:1px solid var(--ink-12); background:var(--footer);
  padding:34px 24px; margin-top:40px;
}
footer .adentro{
  max-width:var(--ancho); margin:0 auto;
  display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center;
  font-family:'Fragment Mono',monospace; font-size:12px; color:var(--ink-35);
}
footer a{ color:var(--ink-55); text-decoration:none; transition:color var(--t-rapido) ease }
footer a:hover{ color:var(--lima) }
footer .lema{
  font-family:'Instrument Serif',Georgia,serif; font-style:italic;
  font-size:15px; color:var(--ink-55);
}

/* ------------------------------------------------------------ teléfono */
@media (max-width:640px){
  header{ padding-top:38px }
  .marca{ margin-bottom:32px }
  main{ padding-bottom:56px }
  .seccion{ margin-top:42px }
  .boton{ width:100%; padding:17px 24px }
  .acuse{ padding-top:60px }
}