/* ===========================
   ASNADI Contest - Landing CSS
   Archivo: /assets/css/contest.css
=========================== */

:root{
  --bg:#f4f2ef;
  --text:#1f2a2a;
  --muted:#5a6b6b;
  --card:#ffffff;
  --line:rgba(0,0,0,.08);

  --green-900:#0f3f3a;
  --green-800:#155b52;
  --green-700:#1a6b60;
  --green-600:#2a7b6e;
  --green-200:#d9ebe6;

  --white:#fff;
  --white-web:#FCFAF3;
  --blue-web:#29C0B7;
  --yellow-web:#FDC800;
  --pink-web:#FF2A70;
  --black:#000;

  --radius-lg:18px;
  --radius-md:14px;

  --shadow: 0 10px 25px rgba(17, 46, 42, .10);
  --shadow-soft: 0 8px 20px rgba(17, 46, 42, .08);

  --container: 1080px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: 'Manrope', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background: var(--bg);
}

/* ====== Background waves (turquesa) ====== */
.page{
  min-height:100vh;
  position:relative;
  overflow:hidden;
}
.page::before,
.page::after{
  content:"";
  position:absolute;
  inset:-140px -140px auto -140px;
  height:520px;
  background:
    radial-gradient(700px 220px at 20% 40%, rgba(41,192,183,.16), transparent 65%),
    radial-gradient(520px 200px at 65% 30%, rgba(41,192,183,.10), transparent 60%),
    radial-gradient(760px 240px at 35% 90%, rgba(41,192,183,.13), transparent 65%);
  z-index:0;
}
.page::after{
  inset:auto -140px -200px -140px;
  height:520px;
  background:
    radial-gradient(700px 220px at 75% 35%, rgba(41,192,183,.13), transparent 65%),
    radial-gradient(520px 200px at 30% 55%, rgba(41,192,183,.09), transparent 60%),
    radial-gradient(760px 240px at 55% 90%, rgba(41,192,183,.12), transparent 65%);
  z-index:0;
}

.wrap{
  position:relative;
  z-index:1;
  max-width:var(--container);
  margin:0 auto;
  padding:18px 18px 42px;
}

/* ====== Header ====== */
.header{
  display:flex;
  align-items:center;
  gap:16px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:180px;
}

.brand-name img{
  width:100px;
  height:auto;
  display:block;
}

.brand-name a{
  display:inline-block;
  text-decoration:none;
}

.nav{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:22px;
  flex:1;
  font-size:14px;
  font-weight:600;
  color:#2a3434;
}
.nav a{
  color:inherit;
  text-decoration:none;
  padding:6px 8px;
  border-radius:10px;
}
.nav a:hover{ background:rgba(0,0,0,.04); }

.header-cta{
  min-width:180px;
  display:flex;
  justify-content:flex-end;
}

.pill{
  border:0;
  cursor:pointer;
  padding:10px 18px;
  border-radius:999px;
  font-size:14px;
  color:#fff;
  font-weight:700;
  font-family: inherit;
  background: linear-gradient(180deg, #FF2A70, #E61E60);
  box-shadow: 0 10px 20px rgba(255, 42, 112, .35);
  border:1px solid rgba(0,0,0,.06);
  letter-spacing: .5px;
  display:inline-block;
  text-align:center;
  text-decoration:none;
}

/* ====== Hero ====== */
.hero{
  margin-top:18px;
  border-radius: 22px;
  background: rgba(255,255,255,.35);
  border:1px solid rgba(0,0,0,.06);
  box-shadow: 0 18px 35px rgba(17,46,42,.08);
  overflow:hidden;
  position:relative;
}

.hero-top{
  position:relative;
  padding:30px 28px;
  background:
    radial-gradient(900px 240px at 20% 40%, rgba(41,192,183,.16), transparent 68%),
    radial-gradient(720px 220px at 70% 45%, rgba(41,192,183,.10), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.40));
}
.hero-top:after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:-1px;
  height:34px;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.85));
  pointer-events:none;
}

.hero-grid{
  display:grid;
  grid-template-columns: 1.2fr .9fr;
  gap:30px;
  align-items:center;
}

.hero h1{
  margin:0 0 14px;
  font-size:38px;
  font-weight:800;
  letter-spacing:-.5px;
  color:var(--black);
}

.hero .lead{
  margin:0 0 16px;
  font-size:16px;
  font-weight:600;
  color:#213131;
  line-height:1.4;
  max-width:560px;
}

.checks{
  margin:10px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:12px;
  max-width:560px;
}

.checks li{
  display:flex;
  gap:12px;
  align-items:flex-start;
  font-size:15px;
  line-height:1.5;
}

.check{
  width:20px;height:20px;
  border-radius:6px;
  background: linear-gradient(180deg, rgba(41,192,183,.30), rgba(41,192,183,.16));
  border:1px solid rgba(41,192,183,.35);
  display:grid;place-items:center;
  flex:0 0 auto;
  margin-top:3px;
}
.check:before{
  content:"";
  width:7px;height:4px;
  border-left:2px solid rgba(15, 120, 114, .95);
  border-bottom:2px solid rgba(15, 120, 114, .95);
  transform: rotate(-45deg) translateY(0px);
}

/* ====== Right Card Premium ====== */
.info-card{
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 20px 40px rgba(0,0,0,.08);
  padding: 32px 28px 28px;
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:16px;
}

.card-logo img{
  width:80px;
  height:auto;
  margin:0 auto 4px;
  display:block;
}

.card-title{
  font-weight:800;
  font-size:22px;
  line-height:1.25;
  margin:0;
}

.card-subtitle{
  font-family:'Source Serif Pro', ui-serif, Georgia, "Times New Roman", serif;
  font-size:17px;
  line-height:1.5;
  margin:4px 0 6px;
  color:#333;
}

.card-meta{
  font-size:11px;
  letter-spacing:3px;
  color:#666;
  margin-bottom:8px;
}

/* CTA PDF (amarillo -> rosa) */
.btn-video{
  margin-top:auto;
  width:100%;
  border:0;
  cursor:pointer;
  padding:14px;
  border-radius:999px;
  color:#fff;
  font-weight:700;
  font-family: inherit;

  background: linear-gradient(180deg, var(--yellow-web), var(--pink-web));
  box-shadow:
    0 10px 20px rgba(255, 42, 112, .35),
    0 4px 10px rgba(253, 200, 0, .25);

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-decoration:none;

  transition: transform .25s ease, box-shadow .25s ease;
}
.btn-video:hover{
  transform: translateY(-2px);
  box-shadow:
    0 18px 32px rgba(255, 42, 112, .45),
    0 6px 14px rgba(253, 200, 0, .30);
}

/* ====== Hero bottom ====== */
.hero-bottom{
  position:relative;
  padding:28px;
  background: rgba(255,255,255,.55);
  border-top:0;
}
.hero-bottom:before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:-24px;
  height:28px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0),
    rgba(255,255,255,.70),
    rgba(255,255,255,.95)
  );
  pointer-events:none;
}

.section-title{
  margin:0 0 18px;
  font-family:'Source Serif Pro', ui-serif, Georgia, "Times New Roman", serif;
  font-size:24px;
  font-weight:600;
  line-height:1.4;
}

.section-title span{
    color: var(--pink-web);
}

.section-title-step2{
  margin:0 0 18px;
  font-family:'Source Serif Pro', ui-serif, Georgia, "Times New Roman", serif;
  font-size:24px;
  font-weight:600;
  line-height:1.4;
  text-align: center;
}

.section-title-step2 span{
    color: var(--pink-web);
}


.copy{
  font-family:'Source Serif Pro', ui-serif, Georgia, "Times New Roman", serif;
  margin:0;
  font-size:16px;
  line-height:1.5;
  max-width:820px;
}
.copy + .copy{ margin-top:14px; }

/* ===========================
   SEPARADOR + PRIZES
=========================== */
.section-sep{
  height:26px;
  margin: 0 28px;
  position:relative;
}

.prizes{
  padding: 6px 28px 22px;
}

.prizes-title{
  margin:0 0 24px;
  text-align:center;
  font-weight:700;
  font-size:18px;
  color:var(--black);
}

.prizes-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px;
}

.prize-card{
  background: rgba(255,255,255,.92);
  border:1px solid rgba(0,0,0,.07);
  border-radius:14px;
  box-shadow: 0 14px 26px rgba(0,0,0,.06);
  padding:12px 14px 14px;
}

.prize-head{
  margin: 0 0 10px;
  text-align:center;
  font-weight:800;
  font-size:20px;
  color:var(--blue-web);
}

.prize-body{
  display:grid;
  grid-template-columns: 96px 1fr;
  gap:14px;
  align-items:center;
}

.prize-logos{
  display:flex;
  flex-direction:column;
  gap:20px;
  align-items:flex-start;
  justify-content:center;
}

.prize-logos img{
  width:100px;
  height:auto;
  display:block;
  object-fit:contain;
}

.prize-list{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.prize-list li{
  position:relative;
  padding-left:14px;
  font-family:'Source Serif Pro', ui-serif, Georgia, "Times New Roman", serif;
  font-size:11px;
  line-height:1.45;
  color:var(--black);
}

.prize-list li:before{
  content:"";
  position:absolute;
  left:0;
  top:4px;
  width:4px;
  height:4px;
  border-radius:50%;
  background: var(--black);
}

/* ===========================
   PRIZES - PARTICIPACIÓN
=========================== */
.prizes-part{
  margin-top:26px;
  padding-top:18px;
  border-top:1px solid rgba(0,0,0,.06);
}

.part-title{
  margin:0;
  text-align:center;
  font-weight:800;
  font-size:20px;
  color:var(--black);
}

.part-sub{
  margin:6px 0 16px;
  text-align:center;
  font-size:12px;
  color:rgba(0,0,0,.65);
}

.part-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
  max-width:680px;
  margin: 0 auto;
}

.part-card{
  background: rgba(255,255,255,.92);
  border:1px solid rgba(0,0,0,.07);
  border-radius:10px;
  box-shadow: 0 12px 20px rgba(0,0,0,.06);
  padding:12px 12px 10px;
  text-align:center;
}

.part-logo{
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:8px;
}

.part-logo img{
  max-height:38px;
  max-width:140px;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
}

.part-text{
  margin:0;
  font-size:11px;
  line-height:1.35;
  color:rgba(0,0,0,.85);
}

.part-text strong{
  font-weight:900;
  color:var(--black);
}

.part-foot{
  margin:12px 0 0;
  text-align:center;
  font-size:10px;
  color:rgba(0,0,0,.45);
}

/* =========================================================
   REGISTRO (step1 real)
========================================================= */
.register{
  margin-top:28px;
  padding-top:20px;
  border-top:1px solid rgba(0,0,0,.06);
}

.register-title{
  margin:0;
  text-align:center;
  font-weight:900;
  font-size:20px;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:var(--black);
}

.register-deadline{
  display:inline-block;
  margin-top:6px;
  font-weight:900;
  text-transform:uppercase;
  color:var(--black);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.register-form{
  padding-top:40px;
  max-width:520px;
  margin:0 auto;
  display:grid;
  gap:10px;
}

.field{
  display:grid;
  gap:6px;
}

.field label{
  font-size:11px;
  letter-spacing:.8px;
  text-transform:uppercase;
  color:rgba(0,0,0,.70);
}

.field input{
  width:100%;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.92);
  border-radius:12px;
  padding:12px 12px;
  font-family: inherit;
  font-size:14px;
  outline:none;
  transition: box-shadow .2s ease, border-color .2s ease;
}

.field input:focus{
  border-color: rgba(41,192,183,.55);
  box-shadow: 0 0 0 4px rgba(41,192,183,.16);
}

/* checkboxes */
.register-checks{
  margin-top:6px;
  display:grid;
  gap:8px;
}

.ck{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:12px;
  color:rgba(0,0,0,.85);
  line-height:1.7;
}

.ck input{
  margin-top:2px;
  width:16px;
  height:16px;
  accent-color: var(--blue-web);
  flex:0 0 auto;
}

.ck a{
  color: rgba(0,0,0,.85);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ck a:hover{
  color: var(--pink-web);
}

/* Honeypot: fuera de pantalla */
.hp{
  position:absolute !important;
  left:-9999px !important;
  top:-9999px !important;
  height:1px; width:1px;
  overflow:hidden;
}

/* Botón registro */
.register-cta{
  margin-top:12px;
  display:flex;
  justify-content:center;
}

.btn-register{
  border:0;
  cursor:pointer;
  padding:14px 26px;
  border-radius:999px;
  color:#fff;
  font-weight:800;
  font-family: inherit;
  letter-spacing:.6px;
  text-transform:uppercase;
  background: linear-gradient(180deg, var(--yellow-web), var(--pink-web));
  box-shadow:
    0 10px 20px rgba(255, 42, 112, .35),
    0 4px 10px rgba(253, 200, 0, .25);
  transition: transform .25s ease, box-shadow .25s ease;
  min-width: 340px;
  text-align:center;
}
.btn-register:hover{
  transform: translateY(-2px);
  box-shadow:
    0 18px 32px rgba(255, 42, 112, .45),
    0 6px 14px rgba(253, 200, 0, .30);
}

.is-submitting{ opacity:.75; pointer-events:none; }
.is-submitting .btn-register{ opacity:.9; }

/* ===========================
   HOW IT WORKS - MINIMAL BLACK
=========================== */
.how{
  margin-top:26px;
  padding-top:18px;
  border-top:1px solid #000;
}

.how-no-border{
  margin-top:0px;
  padding-top:18px;
  border-top:0px solid #000;    
}

.how-title{
  margin:0 0 10px;
  text-align:center;
  font-weight:900;
  font-size:20px;
  color:#000;
}

.how-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:0;
}

.how-card{
  border:1px solid #000;
  border-radius:0;
  background:transparent;
  padding:14px 16px;
  display:grid;
  grid-template-rows: auto 1fr;
  row-gap:10px;
}

/* desktop: evita doble borde entre columnas */
.how-card:not(:first-child){ border-left:0; }

.how-num{
  text-align:center;
  font-weight:900;
  font-size:20px;
  color:#000;
}

.how-body{
  display:grid;
  grid-template-columns: 76px 1fr;
  gap:14px;
  align-items:center;
}

.how-ico{
  width:76px;
  height:76px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.how-ico svg{
  width:76px;
  height:76px;
  color:#000;
}

.how-text{
  margin:0;
  font-family:'Source Serif Pro', ui-serif, Georgia, "Times New Roman", serif;
  font-size:12px;
  line-height:1.45;
  color:#000;
}

.how-footer{
  margin-top:14px;
  text-align:center;
  color:#000;
}

.how-q{
  font-weight:900;
  font-size:16px;
  margin-bottom:4px;
}

.how-mail{
  font-weight:800;
  font-size:14px;
}

.how-mail a{
  color:#000;
  text-decoration:underline;
  text-underline-offset:3px;
  transition: color .2s ease, text-decoration-color .2s ease;
}
.how-mail a:hover{
  color: var(--pink-web);
  text-decoration-color: var(--pink-web);
}

/* ====== Responsive ====== */
@media (max-width: 900px){
  .nav{ display:none; }
  .hero-grid{ grid-template-columns:1fr; }

  .prizes{ padding: 6px 18px 22px; }
  .prizes-grid{ grid-template-columns:1fr; }
  .prize-body{ grid-template-columns: 92px 1fr; }

  .part-grid{
    grid-template-columns:1fr;
    max-width:420px;
  }
  .part-logo{ height:40px; }

  .how-grid{ grid-template-columns:1fr; }
  .how-card{ border-left:1px solid #000; }
  .how-card:not(:first-child){ border-top:0; }
  .how-card:not(:first-child){ border-left:1px solid #000; }
}

@media (max-width: 768px){
  .header{ justify-content:space-between; }
  .nav{ display:none; }

  .hero h1{ font-size:30px; }

  .header-cta{
    min-width:auto;
    justify-content:flex-end;
  }
  .pill{
    padding:8px 14px;
    font-size:12px;
  }
  .desktop-br{ display:none; }
}

@media (max-width: 520px){
  .register-form{ max-width:100%; }
  .btn-register{ min-width: 100%; }
}

@media (max-width: 460px){
  .hero h1{ font-size:24px; }
}

/* ===========================
   THANKS (pantalla gracias)
=========================== */

.thanks{
  margin-top:18px;
}

.thanks-hero{
  border-radius: 22px;
  background: rgba(255,255,255,.35);
  border:1px solid rgba(0,0,0,.06);
  box-shadow: 0 18px 35px rgba(17,46,42,.08);
  overflow:hidden;
}

.thanks-title{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:22px 18px 10px;
}

.thanks-title h1{
  margin:0;
  font-size:28px;
  font-weight:900;
  letter-spacing:-0.2px;
  color:#000;
  text-align:center;
}

.thanks-check{
  width:22px;
  height:22px;
  border-radius:6px;
  background: linear-gradient(180deg, rgba(41,192,183,.30), rgba(41,192,183,.16));
  border:1px solid rgba(41,192,183,.35);
  display:grid;
  place-items:center;
}
.thanks-check:before{
  content:"";
  width:8px;height:5px;
  border-left:2px solid rgba(15, 120, 114, .95);
  border-bottom:2px solid rgba(15, 120, 114, .95);
  transform: rotate(-45deg);
}

.thanks-card{
  background:#fff;
  border-radius: 18px;
  box-shadow: 0 20px 40px rgba(0,0,0,.08);
  margin: 10px 18px 18px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.06);
}

/* Bloque email */
.thanks-row{
  display:grid;
  grid-template-columns: 120px 1fr;
  gap:18px;
  align-items:center;
  padding:18px 18px 14px;
}

.thanks-ico{
  height:86px;
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(15,63,58,.9);
}
.thanks-ico svg{
  width:92px;
  height:92px;
}

.thanks-kicker{
  font-weight:900;
  letter-spacing:.6px;
  text-transform:uppercase;
  font-size:14px;
  margin-bottom:6px;
  color:#000;
}

.thanks-text p{
  margin:0;
  font-family:'Source Serif Pro', ui-serif, Georgia, "Times New Roman", serif;
  font-size:14px;
  line-height:1.55;
  color: rgba(0,0,0,.78);
}

/* Alert deadline */
.thanks-alert{
  display:flex;
  gap:10px;
  align-items:center;
  padding:12px 18px;
  background: linear-gradient(180deg, rgba(253,200,0,.20), rgba(255,42,112,.10));
  border-top:1px solid rgba(0,0,0,.06);
  border-bottom:1px solid rgba(0,0,0,.06);
}

.alert-dot{
  width:18px;
  height:18px;
  border-radius:999px;
  background: rgba(253,200,0,.45);
  border:1px solid rgba(0,0,0,.10);
  position:relative;
  flex:0 0 auto;
}
.alert-dot:after{
  content:"";
  position:absolute;
  inset:5px;
  border-radius:999px;
  background: rgba(255,42,112,.45);
}

.alert-text{
  font-size:12px;
  font-weight:800;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:#000;
}

/* Comunidad */
.thanks-community{
  padding:18px 18px 18px;
  text-align:center;
  background:
    radial-gradient(900px 240px at 20% 30%, rgba(41,192,183,.12), transparent 65%),
    radial-gradient(720px 220px at 75% 60%, rgba(41,192,183,.08), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.70));
}

.thanks-community h2{
  margin:6px 0 8px;
  font-size:22px;
  font-weight:900;
  color:#000;
}

.thanks-sub{
  margin:0 auto 12px;
  max-width:560px;
  font-family:'Source Serif Pro', ui-serif, Georgia, "Times New Roman", serif;
  font-size:14px;
  line-height:1.55;
  color: rgba(0,0,0,.78);
}

/* “píldora” con URL (opcional) */
.tg-pill{
  max-width: 720px;
  margin: 0 auto 12px;
  padding:10px 12px;
  border-radius:999px;
  background: rgba(41,192,183,.10);
  border:1px solid rgba(41,192,183,.22);
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:center;
  overflow:hidden;
}

.tg-badge{
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.6px;
  background: rgba(41,192,183,.22);
  border:1px solid rgba(41,192,183,.30);
  padding:4px 8px;
  border-radius:999px;
  color:#0f3f3a;
}

.tg-url{
  font-size:12px;
  color: rgba(0,0,0,.75);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Botón telegram */
.thanks-cta{
  display:flex;
  justify-content:center;
  margin-top:8px;
}

.btn-telegram{
  border:0;
  cursor:pointer;
  padding:14px 26px;
  border-radius:999px;
  color:#fff;
  font-weight:900;
  font-family: inherit;
  letter-spacing:.6px;
  text-transform:uppercase;
  background: linear-gradient(180deg, var(--yellow-web), var(--pink-web));
  box-shadow:
    0 10px 20px rgba(255, 42, 112, .35),
    0 4px 10px rgba(253, 200, 0, .25);
  transition: transform .25s ease, box-shadow .25s ease;
  min-width: 280px;
  text-decoration:none;
  text-align:center;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0px;
  line-height:1;
}

.btn-telegram img{
  width:38px;
  height:38px;
  display:block;
  flex:0 0 auto;
}

.btn-telegram:hover{
  transform: translateY(-2px);
  box-shadow:
    0 18px 32px rgba(255, 42, 112, .45),
    0 6px 14px rgba(253, 200, 0, .30);
}

/* footer duda */
.thanks-footer{
  padding: 14px 18px 20px;
  text-align:center;
  background: rgba(255,255,255,.55);
  border-top:1px solid rgba(0,0,0,.06);
}
.tf-q{
  font-weight:900;
  font-size:16px;
  color:#000;
  margin-bottom:4px;
}
.tf-mail{
  font-weight:800;
  font-size:14px;
}
.tf-mail a{
  color:#000;
  text-decoration:underline;
  text-underline-offset:3px;
}
.tf-mail a:hover{
  color: var(--pink-web);
}

/* Responsive */
@media (max-width: 900px){
  .thanks-row{
    grid-template-columns: 92px 1fr;
  }
  .thanks-ico svg{
    width:76px;
    height:76px;
  }
}

@media (max-width: 560px){
  .thanks-title h1{ font-size:22px; }
  .thanks-row{
    grid-template-columns: 1fr;
    text-align:center;
  }
  .thanks-ico{
    height:auto;
    padding-top:10px;
  }
  .tg-pill{
    border-radius:14px;
    justify-content:flex-start;
  }
}

/* =========================================
   STEP2: 2 pasos (A/B) — volver a comportamiento
========================================= */

/* Por defecto mostramos A y ocultamos B */
.asnadi-contest .step.step-a { display: block; }
.asnadi-contest .step.step-b { display: none; }

/* Cuando JS pone data-step="b" en .asnadi-contest, invertimos */
.asnadi-contest[data-step="b"] .step.step-a { display: none; }
.asnadi-contest[data-step="b"] .step.step-b { display: block; }

/* =========================================================
   ✅ FORMULARIO LANDING (3 PASOS) — NUEVO
   (stepper + panels + uploads + botones)
   Encapsulado en .signup para no pisar .field del step1
========================================================= */

.signup{ margin:0; padding:0; border:0; }
.signup-box{ padding-top:0; max-width:560px; margin:0 auto; }

/* ===== STEPPER ===== */
.stepper{
  --dot: 34px;
  position: relative;
  width: 100%;
  margin: 18px 0 54px;
  min-height: 76px;
}

.stepper-line{
  position: absolute;
  left: calc(var(--dot) / 2);
  right: calc(var(--dot) / 2);
  top: calc(var(--dot) / 2 - 2px);
  height: 4px;
  background: rgba(0,0,0,.10);
  border-radius: 999px;
  z-index: 0;
  overflow:hidden;
}

.stepper-line-fill{
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  background: var(--blue-web);
  border-radius: 999px;
  transition: width .25s ease;
}

.step{
  position:absolute;
  top:0;
  width:0;
  text-align:center;
  z-index:2;
}
.step--1{ left:0; }
.step--2{ left: calc(50% - var(--dot) / 2); transform:none; }
.step--3{ right:0; left:auto; }

.step-dot{
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(0,0,0,.18);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight: 800;
  transition: all .25s ease;
  position:relative;
  z-index:3;
}

/* dot 3 alineado derecha */
.step--3 .step-dot{ margin-left: calc(var(--dot) * -1); }

.step-label{
  position:absolute;
  top: calc(var(--dot) + 8px);
  width: 130px;
  white-space: normal;
  text-align:center;
  left: calc(var(--dot) / 2);
  transform: translateX(-50%);
}
.step--3 .step-label{
  left:auto;
  right: calc(var(--dot) / 2);
  transform: translateX(50%);
}
.step-name{
  margin:0;
  font-size:12px;
  font-weight:800;
  letter-spacing:.2px;
  color: rgba(0,0,0,.75);
  line-height:1.15;
}

/* Progreso */
.signup[data-step="1"] .stepper-line-fill{ width:0%; }
.signup[data-step="2"] .stepper-line-fill{ width:50%; }
.signup[data-step="3"] .stepper-line-fill{ width:100%; }

/* Dot activo */
.signup[data-step="1"] .step--1 .step-dot,
.signup[data-step="2"] .step--2 .step-dot,
.signup[data-step="3"] .step--3 .step-dot{
  background:#e4f6ff;
  border-color: rgba(41,192,183,.40);
  color: rgba(15, 120, 114, 1);
}

/* Dot completado */
.signup[data-step="2"] .step--1 .step-dot,
.signup[data-step="3"] .step--1 .step-dot,
.signup[data-step="3"] .step--2 .step-dot{
  background: var(--blue-web);
  border-color: rgba(41,192,183,.55);
  color:#fff;
}

@media (max-width:520px){
  .step-label{ width:100px; }
  .step-name{ font-size:11px; }
}

/* Mostrar solo panel actual */
.step-panel{ display:none; }
.signup[data-step="1"] .step-panel--1{ display:block; }
.signup[data-step="2"] .step-panel--2{ display:block; }
.signup[data-step="3"] .step-panel--3{ display:block; }

/* ===== Form card ===== */
.signup .form-card{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.07);
  border-radius: 16px;
  box-shadow: 0 14px 26px rgba(0,0,0,.06);
  padding: 18px 18px 16px;
}

.signup .form-title{
  margin:0 0 10px;
  font-weight:900;
  font-size:14px;
  letter-spacing:.6px;
  text-transform:uppercase;
  color: rgba(0,0,0,.85);
}

.signup .form-desc{
  margin:0 0 14px;
  font-family:'Source Serif Pro', ui-serif, Georgia, "Times New Roman", serif;
  font-size:14px;
  line-height:1.5;
  color: rgba(0,0,0,.70);
}

.signup .form-sep{
  border:0;
  height:0;
  background: rgba(0,0,0,.08);
  margin:14px 0;
}

/* Grid del formulario step2 */
.signup .form-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
}

.signup .field{ display:grid; gap:6px; }
.signup .field label{
  font-size:11px;
  letter-spacing:.8px;
  text-transform:uppercase;
  color: rgba(0,0,0,.70);
}
.req{ color: var(--pink-web); font-weight:900; }

.signup .field input{
  width:100%;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.92);
  border-radius:12px;
  padding:12px 12px;
  font-family: inherit;
  font-size:14px;
  outline:none;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.signup .field input:focus{
  border-color: rgba(41,192,183,.55);
  box-shadow: 0 0 0 4px rgba(41,192,183,.16);
}

/* 2 columnas */
@media (min-width:720px){
  .signup .form-grid{ grid-template-columns: 1fr 1fr; }
  .signup .field--2{ grid-column: span 1; }
  .signup .field:not(.field--2){ grid-column: span 2; }
}

/* Uploads */
.signup .upload-grid{ display:grid; gap:10px; }
.signup .upload{
  border: 1px dashed rgba(0,0,0,.18);
  border-radius:14px;
  padding:12px;
  background: rgba(255,255,255,.80);
}
.signup .upload-label{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom:8px;
}
.signup .upload-title{
  font-weight:900;
  font-size:12px;
  letter-spacing:.5px;
  text-transform:uppercase;
  color: rgba(0,0,0,.85);
}
.signup .upload-sub{
  font-size:12px;
  color: rgba(0,0,0,.55);
}
.signup .upload input[type="file"]{
  width:100%;
  padding:10px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.92);
}
.signup .upload-meta{
  margin-top:8px;
  font-size:12px;
  color: rgba(0,0,0,.60);
}

/* Checkboxes step2 */
.signup .checks-box{
  margin-top:12px;
  display:grid;
  gap:10px;
  padding:12px;
  border-radius:14px;
  background: rgba(41,192,183,.08);
  border: 1px solid rgba(41,192,183,.18);
}
.signup .chk{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:13px;
  color: rgba(0,0,0,.80);
  line-height:1.35;
  user-select:none;
}
.signup .chk input{
  margin-top:2px;
  width:18px;
  height:18px;
  accent-color: var(--blue-web);
}

/* Disclaimer step3 */
.signup .disclaimer{
  background: rgba(0,0,0,.03);
  border: 1px solid rgba(0,0,0,.08);
  border-radius:14px;
  padding:12px;
  font-family:'Source Serif Pro', ui-serif, Georgia, "Times New Roman", serif;
  color: rgba(0,0,0,.80);
}
.signup .disclaimer p{ margin:0 0 8px; }
.signup .disclaimer ul{ margin:0; padding-left:18px; }
.signup .disclaimer li{ margin:6px 0; }

.signup .confirm-row{
  margin-top:14px;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
}

/* Toggle botón */
.signup .btn-confirm-toggle{
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.92);
  border-radius:999px;
  padding:12px 16px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.6px;
  cursor:pointer;
  box-shadow: 0 10px 18px rgba(0,0,0,.06);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.signup .btn-confirm-toggle[aria-pressed="true"]{
  background: rgba(41,192,183,.14);
  border-color: rgba(41,192,183,.40);
}

/* Acciones */
.signup .form-actions{
  margin-top:14px;
  display:flex;
  gap:10px;
  align-items:center;
}
.signup .form-actions-right{
  margin-left:auto;
  display:flex;
  gap:10px;
  align-items:center;
}

/* Atrás */
.signup .btn-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color: rgba(0,0,0,.85);
  background: rgba(255,255,255,.85);
  border:1px solid rgba(0,0,0,.10);
  box-shadow: 0 10px 20px rgba(17, 46, 42, .06);
  border-radius:999px;
  padding:12px 16px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.6px;
  cursor:pointer;
}

/* Siguiente / Confirmar */
.signup .btn-next,
.signup .btn-final{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  cursor:pointer;
  padding:14px 18px;
  border-radius:999px;
  font-weight:900;
  font-family: inherit;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:#fff;
  min-width:260px;
  background: linear-gradient(180deg, var(--yellow-web), var(--pink-web));
  box-shadow:
    0 12px 26px rgba(255, 42, 112, .35),
    0 6px 14px rgba(253, 200, 0, .25);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, opacity .18s ease;
}

.signup .btn-final{ min-width:240px; }

.signup .btn-next:hover,
.signup .btn-final:hover{
  transform: translateY(-2px);
  box-shadow:
    0 18px 34px rgba(255, 42, 112, .42),
    0 8px 18px rgba(253, 200, 0, .30);
}

.signup .btn-next[disabled],
.signup .btn-final[disabled]{
  opacity:.45;
  filter: grayscale(.15);
  cursor:not-allowed;
  transform:none !important;
  box-shadow: 0 10px 18px rgba(0,0,0,.06) !important;
}

.signup .hint{
  margin-top:12px;
  font-size:12px;
  color: rgba(0,0,0,.60);
}

@media (max-width:520px){
  .signup .btn-next, .signup .btn-final{ min-width:100%; width:100%; }
  .signup .form-actions{ flex-direction:column; align-items:stretch; }
  .signup .form-actions-right{
    margin-left:0;
    width:100%;
    flex-direction:column;
    align-items:stretch;
  }
}

.asnadi-alert{
  border-radius: 14px;
  padding: 14px 16px;
  margin: 14px 0 18px;
  box-shadow: 0 10px 25px rgba(17, 46, 42, .10);
  border: 1px solid rgba(0,0,0,.08);
}
.asnadi-alert__title{
  font-weight: 800;
  margin-bottom: 4px;
}
.asnadi-alert__text{
  font-weight: 600;
  opacity: .9;
  line-height: 1.35;
  color: red;
}
.asnadi-alert--error{
  background: #fff4f4;
  border-color: rgba(255, 0, 0, .18);
}

.btn-register:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.upload-meta.is-uploaded {
  color: var(--blue-web);
  font-weight: 600;
}

.upload-meta.is-uploaded::before {
  content: "✓ ";
  font-weight: 700;
}

input.is-invalid {
  border-color: #dc3545;
}

input.is-valid {
  border-color: #198754;
}