/* =====================================================
   INNOVATECH CALI 2026 — Presentation-Style Design
   Solo estética — mismas clases del HTML original
   ===================================================== */

/* ─────────────────────────────────────
   1. BACKGROUND
   ───────────────────────────────────── */

body{
  margin:0;
  background:#dddbe4;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 10%,rgba(12,197,216,.04) 0%,transparent 60%),
    radial-gradient(ellipse 50% 50% at 80% 90%,rgba(12,197,216,.03) 0%,transparent 55%);
  pointer-events:none;
  z-index:0;
}

body::after{
  content:none;
}

/* Disable heavy overlays */
.stars::before,
.stars::after,
.particles::before,
.particles::after,
.page::before{
  content:none;
}

/* — Background image — */
.bg-container{
  position:fixed;
  inset:0;
  z-index:-1;
}

.bg-image{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:brightness(.12) saturate(.4) hue-rotate(-10deg);
}

.bg-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(221,219,228,.95) 0%,rgba(221,219,228,.88) 50%,rgba(221,219,228,.95) 100%);
}


/* ─────────────────────────────────────
   2. LAYOUT
   ───────────────────────────────────── */

.page{
  position:relative;
  z-index:1;
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding:48px 20px 80px;
}

.container{
  width:100%;
  max-width:780px;
}


/* ─────────────────────────────────────
   3. REGISTRATION CARD (main panel)
   ───────────────────────────────────── */

.registration-card{
  width:100%;
  position:relative;
  padding:0;
  background:transparent;
  border:none;
  border-radius:0;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:none;
}

.registration-card::before,
.registration-card::after{
  content:none;
}


/* ─────────────────────────────────────
   4. HEADER / LOGO IMAGEN
   ───────────────────────────────────── */

.card-header{
  margin-bottom:0;
}

.header-img-wrap{
  width:100%;
  max-width:100%;
  margin:0;
  border-radius:20px 20px 0 0;
  overflow:hidden;
  position:relative;
  box-shadow:0 4px 24px rgba(0,0,0,.08);
  border:1px solid #d8d7e0;
  border-bottom:none;
}

.header-img-wrap::after{
  content:none;
}

.header-img{
  width:100%;
  height:auto;
  display:block;
}


/* ─────────────────────────────────────
   5. HERO EXTRA (title + subtitle)
   ───────────────────────────────────── */

.hero-extra{
  text-align:center;
  margin-bottom:0;
  padding:32px 32px 28px;
  padding-bottom:28px;
  position:relative;
  background:#fff;
  border-left:1px solid #d8d7e0;
  border-right:1px solid #d8d7e0;
}

.hero-extra::after{
  content:"";
  position:absolute;
  bottom:0;
  left:8%;
  right:8%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(12,197,216,.2),transparent);
}

.hero-extra-title{
  font-family:'Orbitron',sans-serif;
  font-size:clamp(1.6rem,5vw,2.2rem);
  font-weight:900;
  letter-spacing:.5px;
  margin-bottom:10px;
  background:linear-gradient(135deg,#0047AB 20%,#0a9aaf 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.hero-extra-subtitle{
  font-size:14.5px;
  font-weight:400;
  color:#111;
  max-width:520px;
  margin:0 auto;
  line-height:1.65;
}


/* ─────────────────────────────────────
   6. FORM CARD (inner panel)
   ───────────────────────────────────── */

.card-grid--single{
  width:100%;
}

.form-card{
  margin-top:0;
  padding:36px 40px;
  position:relative;
  background:#fff;
  border:1px solid #d8d7e0;
  border-top:none;
  border-radius:0 0 20px 20px;
}

.form-card::before,
.form-card::after{
  content:none;
}

.form-title{
  font-family:'Orbitron',sans-serif;
  font-size:20px;
  font-weight:700;
  margin-bottom:6px;
  color:#0047AB;
  letter-spacing:.5px;
  padding-left:16px;
  border-left:3px solid #0cc5d8;
}

.form-subtitle{
  font-size:13.5px;
  font-weight:400;
  color:#222;
  margin-bottom:28px;
  letter-spacing:.2px;
  padding-left:16px;
}


/* ─────────────────────────────────────
   7. FORM FIELDS
   ───────────────────────────────────── */

.registro-form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px 18px;
}

.registro-form .field:nth-child(n+4),
.registro-form .consent,
.registro-form > div[style],
.registro-form button[type="submit"],
.registro-form .form-msg{
  grid-column:1 / -1;
}

.field{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.field label{
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#0047AB;
}

.registro-form input,
.registro-form select{
  width:100%;
  padding:13px 16px;
  border-radius:10px;
  border:1.5px solid #e0dfe8;
  background:#f4f3f8;
  color:#0047AB;
  font-size:14px;
  font-weight:400;
  transition:border-color .25s,box-shadow .25s,background .25s;
  outline:none;
}

.registro-form input:hover,
.registro-form select:hover{
  border-color:#c0bfcc;
  background:#f0eff5;
}

.registro-form input::placeholder{
  color:#aaa;
  font-weight:300;
}

.registro-form input:focus,
.registro-form select:focus{
  border-color:#0cc5d8;
  border-left:2px solid #0cc5d8;
  background:#fff;
  box-shadow:
    0 0 0 3px rgba(12,197,216,.08),
    0 0 12px rgba(12,197,216,.05);
}

/* Select arrow */
.registro-form select{
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:18px;
  padding-right:40px;
  cursor:pointer;
}

.registro-form select option{
  background:#fff;
  color:#0047AB;
}


/* ─────────────────────────────────────
   8. CHECKBOX
   ───────────────────────────────────── */

.consent{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  font-weight:600;
  color:#111;
  margin-top:4px;
  cursor:pointer;
  transition:color .2s;
}

.consent:hover{
  color:#000;
}

.consent input[type="checkbox"]{
  width:18px;
  height:18px;
  accent-color:#0cc5d8;
  cursor:pointer;
  flex-shrink:0;
  border:2px solid #555;
}


/* ─────────────────────────────────────
   9. BOTÓN SUBMIT
   ───────────────────────────────────── */

.registro-form button[type="submit"]{
  margin-top:10px;
  padding:16px;
  border-radius:12px;
  border:none;
  font-family:'Orbitron',sans-serif;
  font-weight:700;
  font-size:14px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#fff;
  cursor:pointer;
  position:relative;
  overflow:hidden;

  background:linear-gradient(135deg,#0cc5d8,#0a9aaf);
  box-shadow:0 4px 20px rgba(12,197,216,.25);

  transition:transform .25s,box-shadow .25s;
}

.registro-form button[type="submit"]:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 30px rgba(12,197,216,.35);
}

.registro-form button[type="submit"]:active{
  transform:translateY(0);
}

/* Sweep shine */
.registro-form button[type="submit"]::after{
  content:"";
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);
  transition:left .5s;
}

.registro-form button[type="submit"]:hover::after{
  left:100%;
}

.registro-form button[type="submit"]:disabled{
  opacity:.5;
  cursor:not-allowed;
  transform:none;
}


/* ─────────────────────────────────────
   10. FORM MESSAGE
   ───────────────────────────────────── */

.form-msg{
  margin-top:12px;
  padding:12px 16px;
  border-radius:10px;
  font-size:13px;
  font-weight:400;
  line-height:1.5;
  background:#f4f3f8;
  border:1px solid #e0dfe8;
  color:#666;
  transition:all .3s;
}

.form-msg:empty{
  display:none;
}

.form-msg[data-type="ok"]{
  background:rgba(12,197,216,.06);
  border-color:rgba(12,197,216,.2);
  color:#0a9aaf;
}

.form-msg[data-type="error"]{
  background:rgba(224,76,76,.05);
  border-color:rgba(224,76,76,.15);
  color:#c53030;
}


/* ─────────────────────────────────────
   11. MICRO TEXT
   ───────────────────────────────────── */

.micro{
  margin-top:16px;
  font-size:11.5px;
  color:#aaa;
  text-align:center;
  line-height:1.5;
}


/* ─────────────────────────────────────
   12. FOOTER
   ───────────────────────────────────── */

.card-footer{
  margin-top:28px;
  padding-top:18px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:12px;
  color:#aaa;
  border-top:1px solid #d8d7e0;
}

.footer-link{
  color:#0aabbf;
  font-weight:600;
  letter-spacing:.03em;
  transition:color .2s;
}

.footer-link:hover{
  color:#088a9a;
}


/* ─────────────────────────────────────
   HERO INFO BOXES
   ───────────────────────────────────── */

.hero-info-boxes{
  display:flex;
  justify-content:center;
  gap:14px;
  margin-top:22px;
}

.hero-info-box{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 20px;
  background:#f4f3f8;
  border:1px solid #e0dfe8;
  border-radius:12px;
  transition:border-color .3s,transform .2s;
}

.hero-info-box:hover{
  border-color:#0cc5d8;
  transform:translateY(-2px);
}

.hero-info-icon{
  font-size:22px;
  flex-shrink:0;
}

.hero-info-box strong{
  display:block;
  font-size:11.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:#0047AB;
}

.hero-info-box span{
  font-size:13px;
  font-weight:400;
  color:#555;
}


/* ─────────────────────────────────────
   13. RESPONSIVE
   ───────────────────────────────────── */

@media(max-width:768px){
  .hero-info-boxes{
    flex-direction:column;
    gap:10px;
  }

  .page{
    padding:24px 14px 60px;
  }

  .container{
    max-width:100%;
  }

  .header-img-wrap{
    border-radius:14px 14px 0 0;
  }

  .hero-extra{
    padding:24px 20px 22px;
  }

  .hero-extra-title{
    font-size:clamp(1.2rem,5vw,1.5rem);
  }

  .form-card{
    padding:24px 20px;
    border-radius:0 0 14px 14px;
  }

  .registro-form{
    grid-template-columns:1fr;
  }

  .registro-form .field:nth-child(n+4){
    grid-column:1;
  }

  .registro-form{
    gap:16px;
  }

  .registro-form input,
  .registro-form select{
    padding:12px 14px;
  }

  .card-footer{
    flex-direction:column;
    gap:8px;
    text-align:center;
  }
}

@media(max-width:420px){
  .page{
    padding:16px 10px 40px;
  }

  .form-card{
    padding:20px 16px;
  }

  .hero-extra{
    padding:20px 16px 18px;
  }

  .hero-extra-subtitle{
    font-size:13px;
  }
}

/* ✅ NUEVO (SOLO AGREGADO): Mantener "Tema de interés" en 2 columnas (al lado de Teléfono) */
@media(min-width:769px){
  .registro-form .field.field--tema-interes{
    grid-column:auto;
  }
}