/* ============================================================
   FitEvents · PAGINA: Crea tu FitEvent de Navidad  (/navidad)

   Un configurador, no un formulario: tarjetas grandes, una
   pregunta por pantalla y un resumen antes de pedir los datos.
   Sin JavaScript se ven los ocho bloques seguidos, separados
   por una linea; con JavaScript (html.js) solo se ve el activo.
   Todo sale de tokens.css: aqui no hay ningun HEX.
   ============================================================ */

/* Los botones y la barra son inline-flex y ganarian al atributo
   hidden, asi que aqui se dice claramente que oculto es oculto. */
.page-navidad [hidden]{display:none !important;}

/* ---------- Marco de la pagina ---------- */
.nvd{
  background:var(--lima);
  position:relative;overflow:hidden;
  padding-top:56px;padding-bottom:80px;
}
.nvd-wrap{position:relative;z-index:2;max-width:800px;}

/* ---------- Cabecera ---------- */
.nvd-cabecera{max-width:640px;}
.nvd-cabecera .eyebrow{display:block;margin-bottom:12px;}
.nvd-cabecera h1{font-size:clamp(30px,4.6vw,48px);color:var(--ink);}
.nvd-lede{
  font-weight:var(--fw-medium);font-size:clamp(15px,2vw,19px);
  color:var(--malva-dark);margin-top:12px;letter-spacing:.01em;
}
.nvd-desc{font-size:15px;color:var(--ink-soft);margin-top:12px;}

/* ---------- La tarjeta del configurador ---------- */
.nvd-form{
  margin-top:34px;
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  padding:30px 30px 26px;
  gap:22px;
}
@media (max-width:560px){ .nvd-form{padding:22px 18px 20px;border-radius:var(--radius-md);} }

/* ---------- Barra de progreso ---------- */
.nvd-progreso{display:flex;align-items:center;gap:14px;}
.nvd-barra{flex:1;height:4px;background:var(--malva-tint);border-radius:var(--radius-pill);overflow:hidden;}
.nvd-barra span{
  display:block;height:100%;width:12.5%;
  background:var(--malva);border-radius:var(--radius-pill);
  transition:width .35s ease;
}
.nvd-contador{
  flex:none;font-size:var(--fs-caption);font-weight:var(--fw-semibold);
  letter-spacing:var(--track-caption);text-transform:uppercase;color:var(--ink-faint);
}

/* ---------- Un paso ---------- */
.nvd-paso{border:0;padding:0;margin:0;min-width:0;}
.nvd-paso + .nvd-paso{margin-top:34px;padding-top:30px;border-top:1px solid var(--line);}

/* Con JavaScript solo vive el paso activo, y la linea sobra */
html.js .nvd-paso{display:none;}
html.js .nvd-paso.is-activa{display:block;animation:nvd-entra .35s ease both;}
html.js .nvd-paso + .nvd-paso{margin-top:0;padding-top:0;border-top:none;}

@keyframes nvd-entra{
  from{opacity:0;transform:translateY(10px);}
  to{opacity:1;transform:none;}
}

/* El legend flotado se comporta como un bloque normal (si no, el
   navegador lo incrusta en el borde del fieldset). Al flotar deja de
   ocupar sitio, asi que el aire de debajo lo pone su propio padding. */
.nvd-legend{display:block;width:100%;float:left;padding:0 0 24px;}
.nvd-num{
  display:block;font-size:var(--fs-caption);font-weight:var(--fw-semibold);
  letter-spacing:var(--track-caption);text-transform:uppercase;color:var(--malva-dark);
}
.nvd-pregunta{
  display:block;margin-top:10px;
  font-size:clamp(22px,3.2vw,30px);font-weight:var(--fw-light);
  letter-spacing:var(--track-tight);line-height:var(--lh-tight);color:var(--ink);
}
.nvd-ayuda{display:block;margin-top:10px;font-size:13.5px;color:var(--ink-soft);line-height:1.55;}

/* Lo que sigue al legend empieza en linea nueva y sin margen propio:
   la separacion ya la ha puesto el padding del legend. */
.nvd-legend + *{clear:both;margin-top:0;}

.nvd-subpregunta{
  margin-top:26px;font-size:15px;font-weight:var(--fw-medium);color:var(--ink);
}

/* ---------- Campos escritos ---------- */
.nvd-campos{margin-top:24px;display:flex;flex-direction:column;gap:18px;}
.nvd-campos .field input[readonly]{background:var(--malva-tint);color:var(--ink-soft);cursor:default;}

/* ---------- Tarjetas elegibles ---------- */
.opciones{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:24px;}
.opciones-compactas{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));}
@media (max-width:640px){ .opciones{grid-template-columns:1fr;} }

.opcion{position:relative;display:block;}
.opcion input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;}

.opcion-cuerpo{
  display:flex;align-items:flex-start;gap:14px;height:100%;
  padding:16px;border:1.5px solid var(--line);border-radius:var(--radius);
  background:var(--cream);
  transition:border-color .15s ease, background .15s ease, transform .15s ease;
}
.opcion:hover .opcion-cuerpo{border-color:var(--ink-faint);transform:translateY(-1px);}
.opcion input:checked + .opcion-cuerpo{border-color:var(--ink);background:var(--malva-tint);}
.opcion input:focus-visible + .opcion-cuerpo{outline:2px solid var(--malva-dark);outline-offset:3px;}

.opcion-icono{
  flex:none;width:44px;height:44px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
}
.opcion-icono svg{width:24px;height:24px;}

.opcion-texto{display:flex;flex-direction:column;gap:5px;min-width:0;}
.opcion-titulo{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;}
.opcion-label{font-size:16px;font-weight:var(--fw-medium);color:var(--ink);line-height:1.3;}
.opcion-precio{
  font-size:12px;font-weight:var(--fw-semibold);color:var(--malva-dark);
  border:1px solid var(--malva);border-radius:var(--radius-pill);padding:2px 10px;
  white-space:nowrap;
}
.opcion-desc{font-size:13.5px;color:var(--ink-soft);line-height:1.5;}

.opcion-lista{display:flex;flex-direction:column;gap:5px;margin-top:6px;}
.opcion-item{position:relative;padding-left:16px;font-size:12.5px;color:var(--ink-soft);line-height:1.45;}
.opcion-item::before{
  content:"";position:absolute;left:0;top:7px;
  width:6px;height:6px;border-radius:50%;background:var(--lima);
}

/* El circulo de la derecha: marca cual esta elegida */
.opcion-check{
  flex:none;margin-left:auto;align-self:center;
  width:20px;height:20px;border-radius:50%;
  border:1.5px solid var(--line);background:var(--cream);
  transition:background .15s ease, border-color .15s ease;
}
.opcion input:checked + .opcion-cuerpo .opcion-check{
  border-color:var(--ink);background:var(--ink);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23F8F5EE' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.5l4 4 8-9'/%3E%3C/svg%3E");
  background-size:13px;background-position:center;background-repeat:no-repeat;
}

/* Las compactas son solo texto: se centra y se aprieta */
.opciones-compactas .opcion-cuerpo{align-items:center;padding:14px 16px;}
.opciones-compactas .opcion-label{font-size:15px;}

/* ---------- Resumen final ---------- */
.nvd-resumen{
  margin-top:24px;background:var(--malva-tint);
  border-radius:var(--radius);padding:22px 24px;
}
@media (max-width:560px){ .nvd-resumen{padding:18px;} }

.nvd-resumen dl{margin:0;}
.nvd-resumen dl > div{
  display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  padding:9px 0;border-bottom:1px solid var(--line-soft);
}
.nvd-resumen dl > div:last-child{border-bottom:none;}
.nvd-resumen dt{
  flex:none;font-size:var(--fs-caption);font-weight:var(--fw-semibold);
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);
}
.nvd-resumen dd{
  margin:0;text-align:right;
  font-size:14.5px;font-weight:var(--fw-medium);color:var(--ink);line-height:1.4;
}

.nvd-precio{
  margin-top:18px;background:var(--cream);
  border:1px dashed var(--malva);border-radius:var(--radius-sm);
  padding:14px 16px;
}
.nvd-precio .eyebrow{display:block;}
.nvd-precio-linea{margin-top:6px;font-size:15px;font-weight:var(--fw-medium);color:var(--ink);}
.nvd-precio-nota{margin-top:14px;font-size:12.5px;color:var(--ink-soft);line-height:1.5;}

/* ---------- Botonera ---------- */
.nvd-acciones{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:4px;}
.nvd-avanza{margin-left:auto;}
@media (max-width:560px){
  .nvd-acciones{flex-direction:column-reverse;align-items:stretch;}
  .nvd-avanza{margin-left:0;width:100%;}
}

.page-navidad .form-note{margin-top:2px;}