/* ============================================================
   CLOO · Form Kit
   Estilos compartidos por los 4 formularios de captura de leads.
   Móvil primero: pensados para llenarse de pie, en un evento.
   ============================================================ */

:root{
  --ground:#FBF7F3;
  --surface:#FFFFFF;
  --surface-2:#F6F0F7;
  --ink:#251629;
  --ink-2:#6B5C74;
  --ink-3:#9A8CA1;
  --brand:#4A1E6E;
  --brand-deep:#2C1145;
  --brand-soft:#F2E9F7;
  --gold:#FFB020;
  --gold-ink:#8F5B00;
  --gold-soft:#FDF3E0;
  --line:#E7DDE9;
  --line-2:#D6C7DA;
  --ok:#1F6B4E;
  --ok-bg:#E4F2EB;
  --err:#9B2C1F;
  --err-bg:#FBEAE7;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;
  --mono:ui-monospace,"Cascadia Mono","Segoe UI Mono",Consolas,monospace;
  --radius:12px;
  --tap:52px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
  padding:0 0 40px;
}

/* ---------- estructura ---------- */
.shell{max-width:600px;margin:0 auto;padding:0 18px;}

.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 0 14px;position:sticky;top:0;z-index:20;
  background:linear-gradient(var(--ground) 78%, rgba(251,247,243,0));
}
.brandmark{
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-ink);font-weight:600;
}

/* ---------- selector de idioma ---------- */
.lang{
  display:inline-flex;border:1px solid var(--line-2);border-radius:999px;
  background:var(--surface);overflow:hidden;flex:none;
}
.lang button{
  appearance:none;border:0;background:transparent;cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;font-weight:600;
  color:var(--ink-3);padding:9px 14px;min-height:38px;transition:background .15s,color .15s;
}
.lang button[aria-pressed="true"]{background:var(--brand);color:#fff;}
.lang button:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;}

/* ---------- encabezado ---------- */
.hero{padding:10px 0 22px;}
.eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-ink);margin:0 0 10px;
}
h1{
  font-family:var(--serif);font-size:clamp(26px,7vw,34px);font-weight:600;
  line-height:1.15;letter-spacing:-.01em;margin:0;text-wrap:balance;
}
.hero p{color:var(--ink-2);margin:12px 0 0;font-size:15px;}
.event-badge{
  display:none;margin-top:14px;padding:9px 14px;border-radius:999px;
  background:var(--brand-soft);border:1px solid var(--line-2);
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brand);
}
.event-badge.on{display:inline-block;}

/* ---------- tarjeta / campos ---------- */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 18px 24px;box-shadow:0 1px 2px rgba(37,22,41,.04),0 10px 30px -20px rgba(37,22,41,.3);
}

.field{margin:0 0 22px;}
.field:last-of-type{margin-bottom:0;}

.label{display:block;font-weight:600;font-size:15px;margin:0 0 9px;color:var(--ink);}
.label .req{color:var(--gold-ink);margin-left:2px;}
.hint{display:block;font-weight:400;font-size:13px;color:var(--ink-3);margin-top:3px;}

input[type=text],input[type=email],input[type=tel],input[type=date],select,textarea{
  width:100%;min-height:var(--tap);
  padding:13px 14px;font-family:inherit;font-size:16px;color:var(--ink);
  background:var(--surface);border:1.5px solid var(--line-2);border-radius:10px;
  transition:border-color .15s,box-shadow .15s;
}
textarea{min-height:92px;resize:vertical;line-height:1.5;}
select{
  appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%236B5C74' stroke-width='2' d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:42px;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft);
}
input::placeholder,textarea::placeholder{color:var(--ink-3);}

/* ---------- chips (opción única, dedo grande) ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip{
  appearance:none;cursor:pointer;text-align:left;
  font-family:inherit;font-size:14.5px;line-height:1.35;color:var(--ink);
  background:var(--surface);border:1.5px solid var(--line-2);border-radius:10px;
  padding:12px 15px;min-height:48px;
  transition:background .13s,border-color .13s,color .13s;
}
.chip:hover{border-color:var(--brand);}
.chip[aria-pressed="true"]{
  background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600;
}
.chip:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.chips.stack{flex-direction:column;}
.chips.stack .chip{width:100%;}

/* ---------- valoración 1-5 ---------- */
.rating{display:flex;gap:8px;align-items:stretch;}
.rating .chip{flex:1;text-align:center;font-size:19px;font-weight:600;padding:14px 0;min-height:56px;}
.scale-ends{
  display:flex;justify-content:space-between;gap:10px;
  font-size:12.5px;color:var(--ink-3);margin-top:8px;
}

/* ---------- consentimiento ---------- */
.consent{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--surface-2);border:1px solid var(--line);border-radius:10px;
  padding:14px 15px;margin-top:4px;cursor:pointer;
}
.consent input{
  appearance:none;flex:none;width:24px;height:24px;margin:0;
  border:1.5px solid var(--line-2);border-radius:6px;background:var(--surface);
  cursor:pointer;position:relative;transition:background .13s,border-color .13s;
}
.consent input:checked{background:var(--brand);border-color:var(--brand);}
.consent input:checked::after{
  content:"";position:absolute;left:8px;top:3.5px;width:5px;height:11px;
  border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg);
}
.consent input:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.consent span{font-size:13.5px;color:var(--ink-2);line-height:1.45;}

/* ---------- errores ---------- */
.field.invalid input,.field.invalid select,.field.invalid textarea{
  border-color:var(--err);background:var(--err-bg);
}
.field.invalid .chip{border-color:var(--err);}
.field-err{
  display:none;color:var(--err);font-size:13px;font-weight:600;margin-top:7px;
}
.field.invalid .field-err{display:block;}

.form-err{
  display:none;background:var(--err-bg);border:1px solid var(--err);border-left:4px solid var(--err);
  color:var(--err);border-radius:8px;padding:12px 14px;font-size:14px;margin:0 0 18px;
}
.form-err.on{display:block;}

/* ---------- envío ---------- */
.actions{margin-top:26px;}
button.submit{
  appearance:none;cursor:pointer;width:100%;
  min-height:56px;padding:16px 20px;
  background:var(--brand);color:#fff;border:0;border-radius:10px;
  font-family:inherit;font-size:16.5px;font-weight:600;letter-spacing:.01em;
  transition:opacity .15s,transform .08s;
}
button.submit:hover{opacity:.9;}
button.submit:active{transform:scale(.99);}
button.submit:disabled{opacity:.55;cursor:progress;}
button.submit:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
.legal{font-size:12px;color:var(--ink-3);text-align:center;margin:14px 0 0;line-height:1.45;}

/* ---------- pantalla de éxito ---------- */
.done{display:none;text-align:center;padding:46px 20px 40px;}
.done.on{display:block;}
.done .mark{
  width:66px;height:66px;margin:0 auto 22px;border-radius:50%;
  background:var(--ok-bg);border:2px solid var(--ok);
  display:flex;align-items:center;justify-content:center;
}
.done .mark::after{
  content:"";width:14px;height:26px;margin-top:-6px;
  border:solid var(--ok);border-width:0 3.5px 3.5px 0;transform:rotate(45deg);
}
.done h2{font-family:var(--serif);font-size:27px;font-weight:600;margin:0 0 10px;}
.done p{color:var(--ink-2);margin:0 auto;max-width:38ch;}
.done .again{
  appearance:none;cursor:pointer;margin-top:26px;
  background:transparent;color:var(--brand);border:1.5px solid var(--brand);
  border-radius:10px;padding:14px 26px;min-height:var(--tap);
  font-family:inherit;font-size:15px;font-weight:600;
}
.done .again:hover{background:var(--brand-soft);}
.done .queued{
  display:none;margin-top:20px;padding:11px 14px;border-radius:8px;
  background:var(--gold-soft);border:1px solid var(--gold);
  color:var(--gold-ink);font-size:13px;
}
.done .queued.on{display:block;}

/* ---------- pie ---------- */
footer{
  text-align:center;padding:26px 0 0;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);
}

/* ---------- panel de rescate (?admin=1) ---------- */
.admin{
  margin:14px 0 0;padding:14px 16px;border-radius:10px;
  background:var(--gold-soft);border:1px solid var(--gold);
  font-size:13.5px;color:var(--gold-ink);
}
.admin b{font-size:19px;font-family:var(--serif);}
.admin-actions{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap;}
.admin-actions button{
  appearance:none;cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;
  padding:10px 15px;min-height:42px;border-radius:8px;
  border:1.5px solid var(--gold-ink);background:transparent;color:var(--gold-ink);
}
.admin-actions button:hover{background:rgba(143,91,0,.08);}

/* ---------- honeypot (anti-spam, nunca visible) ---------- */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* ---------- condicionales ---------- */
[data-show-when]{display:none;}
[data-show-when].on{display:block;}

@media (min-width:560px){
  .shell{padding:0 24px;}
  .card{padding:26px 26px 30px;}
}

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