/* ---------- VARIABLES & BASE ------------------------------------ */
:root{
  --bg:#0d1b2a;
  --card:#1b263b;
  --accent:#00ffe5;
  --accent2:#0077ff;
  --txt:#e0eafc;
  --radius:12px;
  font-size:16px;
  font-family:'Poppins',sans-serif;
  color:var(--txt);
  scroll-behavior:smooth;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);line-height:1.6;overflow-x:hidden}

/* 1️⃣ Imágenes y videos fluidos */
img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ---------- HERO ------------------------------------------------- */
.hero{
  min-height:100vh;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding:0 1rem;
  background:linear-gradient(145deg,#07111d 0%,#142544 50%,#07111d 100%);
}
.hero h1{font-size:clamp(2.5rem,5vw,4rem);font-weight:700}
.accent{color:var(--accent)}
.tagline{font-size:clamp(1rem,2.5vw,1.25rem);margin-top:.8rem}

/* ---------- BOTÓN PRINCIPAL -------------------------------------- */
.cta-btn{
  display:inline-block;margin-top:2rem;padding:.9rem 2.2rem;
  background:var(--accent2);color:#fff;font-weight:600;border:0;border-radius:var(--radius);
  text-decoration:none;transition:.3s transform ease,box-shadow .3s;
}
.cta-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px -4px var(--accent2)}
.cta-btn:active{transform:translateY(0)}

/* ---------- SCROLL HINT ----------------------------------------- */
.scroll-hint{
  position:absolute;bottom:3rem;left:50%;transform:translateX(-50%);
  font-size:2rem;color:var(--accent);animation:bounce 2s infinite;
  pointer-events:none;user-select:none;
}
@keyframes bounce{
  0%,20%,50%,80%,100%{transform:translate(-50%,0)}
  40%{transform:translate(-50%,-12px)}
  60%{transform:translate(-50%,-6px)}
}

/* ---------- FEATURES CARDS -------------------------------------- */
/* ── FEATURES CARDS (responsive mobile-first) ── */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.8rem;
  padding: 3.5rem 1rem;
  background: #0001;
  max-width: 1100px;
  margin: 0 auto;
}


/* ---------- FORMULARIO ------------------------------------------ */
.form-section{padding:4rem 1rem;background:#0003;border-top:1px solid #fff2}
.form-section h2{text-align:center;margin-bottom:2rem;font-size:1.8rem}

.preform{
  max-width:1000px;                 /* antes 600px */
  margin:auto;
  display:flex;flex-direction:column;
  gap:1rem;
}
.preform input{
  width:100%;padding:.8rem;border:2px solid #294066;
  background:#0e2036;color:#fff;border-radius:var(--radius);
}
fieldset legend{margin-bottom:.6rem;font-weight:600}

/* —————————————— 1. Tu CSS original (escritorio) —————————————— */
.options {
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem 2.2rem;
  justify-content: center;
  overflow-x: auto;
  padding: .2rem 0 .5rem;
  border: 0 !important;
}
.options label {
  display: flex;
  align-items: center;
  gap: .45rem;
  white-space: nowrap;
  font-size: .95rem;
}


/* ───── Barra de progreso v3 ───── */
.progress{
  width:100%;
  max-width:420px;           /* un poco más ancha */
  margin:1.6rem auto 0;
  height:18px;               /* más alta para que luzca */
  background:#1b263b;        /* pista: muestra lo pendiente */
  border-radius:9px;
  position:relative;
  overflow:hidden;
}

/* Relleno con “shine” diagonal y suave destello */
.progress-bar{
  height:100%;
  width:0;
  background:
    repeating-linear-gradient(60deg,
      rgba(0,255,255,.25) 0 12px,
      rgba(0,255,255,.35) 12px 24px),
    linear-gradient(90deg,var(--accent) 0%,var(--accent2) 100%);
  background-size:200% 100%,100% 100%;
  animation:
    stripes 3s linear infinite,
    glow    4s ease   infinite alternate;
  transition:width .4s ease;
  border-radius:inherit;
  box-shadow:0 0 8px 2px var(--accent2);
}
@keyframes stripes{
  0%  {background-position:0 0,0 0}
  100%{background-position:-200% 0,0 0}
}
/* brillo cíclico que recorre el relleno */
@keyframes glow{
  from{filter:brightness(1)}
  to  {filter:brightness(1.25)}
}

.progress-text{
  position:absolute;
  top:calc(100% + .55rem);
  left:50%;transform:translateX(-50%);
  font-size:1rem;font-weight:500;
  color:#d0ddff;text-shadow:0 1px 2px #000;
}


/* ---------- FOOTER ---------------------------------------------- */
footer{padding:2rem 1rem;text-align:center;font-size:.8rem;color:#88a}

/* ---------- REDUCED MOTION -------------------------------------- */
@media(prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
/* --- Efecto hover pulido para .feature-card ---------------------- */
.feature-card{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
  background:#152236;                      /* fallback por si imagen tarda */
  box-shadow:0 8px 20px -12px #000a;
  transition:transform .4s ease,box-shadow .4s;
}
.feature-card:hover{
  transform:translateY(-8px);
  box-shadow:0 24px 40px -16px rgba(0,0,0,.7);
}

/* Imagen: zoom discreto */
.card-img{height:200px;}                   /* alto fijo = evita invadir texto */
.card-img img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s ease,filter .5s;
  filter:brightness(.92) contrast(1.05);
}
.feature-card:hover .card-img img{
  transform:scale(1.08);                  /* menos agresivo que 1.12 */
  filter:brightness(1) contrast(1.1);
}

/* Texto: estable, sin desplazarse */
.card-body{padding:1.5rem 1.7rem}
.card-body h3{color:var(--accent2);font-size:1.3rem}
.card-body ul{display:flex;flex-direction:column;gap:.45rem;font-size:.95rem}
/* === Borde luminoso 100 % visible en hover ======================= */
.feature-card{
  position:relative;                   /* base para pseudoelemento   */
  z-index:0;                           /* que la máscara no tape el 3-D */
}

/* contorno */
.feature-card::before{
  content:"";
  position:absolute;inset:0;           /* cubre todo */
  border-radius:inherit;
  padding:2px;                         /* grosor del borde            */

  /* Degradado del borde (turquesa → azul) */
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent2) 100%);
  
  /* “truco” de máscara: deja solo el borde visible */
  -webkit-mask:
     linear-gradient(#000 0 0) content-box,
     linear-gradient(#000 0 0);        /* 2 capas */
  -webkit-mask-composite:xor;          /* S ↔ D en Safari/WebKit */
          mask-composite:exclude;      /* estándar */
  
  opacity:0;                           /* oculto por defecto          */
  transition:opacity .35s ease;
  pointer-events:none;                 /* no interfiere con clics     */
}

.feature-card:hover::before{
  opacity:1;                           /* aparece al pasar el ratón  */
}
/* --- Actualización visual barra --- */
.progress {
  height: 30px; /* subimos para que entre el texto */
  overflow: visible; /* necesario para mostrar el texto debajo */
}

.progress-bar {
  position: relative;
}

.progress-inside {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.85rem;
  font-weight: 600;
  color: #00223c;
  text-shadow: 0 0 2px #fff;
  z-index: 2;
  pointer-events: none;
}

/*MÓVIL: FLEX LAYOUT PARA CHECKBOXES EN .options*/
@media screen and (max-width: 767px) {
  /* 1) Stack vertical de opciones */
  .options {
    display: flex !important;
    flex-direction: column;
    gap: 1rem;
    overflow-x: hidden; /* opcional, evita scroll lateral */
    padding: .2rem 0 .5rem;
  }

  /* 2) Cada label alinea checkbox + texto */
  .options label {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
  }

  /* 3) Ajuste fino del tamaño del checkbox */
  .options label input[type="checkbox"] {
    margin: 0;
    flex-shrink: 0;
    width: 1.2em;
    height: 1.2em;
  }
}
@media (max-width: 600px) {
  .preform {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}
footer a[href^="mailto:"] {
  color: #00ffe5 !important;
  text-decoration: underline;
}