/* Cuarta opción «Actualiza tus datos» (2026-11-06): brillo morado, como su imagen. */
.choice-card[data-choice=datos]{--glow:168,85,247}
body[data-service=datos]{--glow:168,85,247}

/* Cuatro tarjetas en la columna derecha del inicio */
.cards{grid-template-rows:repeat(4,minmax(0,1fr))!important;height:min(calc(100dvh - 150px),640px)!important}
@media (max-width:700px){.cards{max-height:none!important;height:auto!important;flex:1;grid-template-rows:repeat(4,minmax(0,1fr))!important}}

/* Imagen de la tarjeta: igual que la del canal (completa, centrada y con bordes difuminados) */
.choice-card[data-choice="datos"] > img{
  order:2;width:39%;height:100%;min-height:0;object-fit:contain;object-position:center;
  background:transparent!important;border:0;border-radius:0!important;opacity:1;transform:none!important;filter:none!important;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.50) 5%,#000 16%,#000 84%,rgba(0,0,0,.50) 95%,transparent 100%),linear-gradient(180deg,transparent 0%,rgba(0,0,0,.50) 5%,#000 16%,#000 84%,rgba(0,0,0,.50) 95%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.50) 5%,#000 16%,#000 84%,rgba(0,0,0,.50) 95%,transparent 100%),linear-gradient(180deg,transparent 0%,rgba(0,0,0,.50) 5%,#000 16%,#000 84%,rgba(0,0,0,.50) 95%,transparent 100%);
  mask-composite:intersect;
}

/* Fondo de la pantalla con la imagen de la opción */
body[data-service="datos"] .service-backdrop::before{
  content:'';background-image:url('/assets/datos-2027.png');
  left:50%;right:auto;top:50%;width:min(100vw,80vh);height:min(100vw,80vh);transform:translate(-50%,-50%);
  background-size:contain;background-position:center;background-repeat:no-repeat;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 10%,#000 90%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 10%,#000 90%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0%,#000 10%,#000 90%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 10%,#000 90%,transparent 100%);
  mask-composite:intersect;
}
body[data-service="datos"] .service-backdrop::after{content:none}

/* Cuadro con Correo, Celular y DNI */
.update-box{display:grid;gap:16px;padding:18px;border:1px solid rgba(var(--glow),.55);border-radius:16px;background:rgba(var(--glow),.05);box-shadow:0 0 0 1px rgba(var(--glow),.08),0 0 22px rgba(var(--glow),.10)}
.update-box label{margin:0}
.update-box input{margin-top:8px!important}
.update-note{margin:-4px 0 0;font-size:11px;line-height:1.45;color:var(--secondary-ui,#aaa)}
.update-more{margin:0;font-size:11px;line-height:1.45;color:var(--secondary-ui,#aaa)}
.update-more a{color:var(--text-ui,#fff);text-decoration:underline;text-underline-offset:3px}
body.light .update-box{border-color:rgba(11,17,21,.3);background:rgba(255,255,255,.08);box-shadow:none}
body.light .update-note,body.light .update-more{color:var(--humo-text,#1A252C)}
body.light .update-more a{color:var(--humo-ink,#0B1115)}
@media (max-width:700px){.update-box{padding:14px;gap:12px}}

/* El paso de datos usa la misma altura de panel que el pago y es más compacto. */
@media (min-width:701px){.panel:has(.form-step[data-step="update"]:not([hidden])){height:min(100%,650px);max-height:min(100%,650px)}}
.form-step[data-step="update"]{gap:14px}
.update-box{gap:12px;padding:16px}
.update-box input{height:46px!important;margin-top:6px!important}
.update-note{margin:-2px 0 0}
@media (min-width:701px){
  .update-box{grid-template-columns:1fr 1fr;column-gap:14px}
  .update-box label:first-child,.update-box .update-note{grid-column:1 / -1}
}

/* Celular con selector de código de país (igual que en «Datos de contacto»). */
.update-box .update-phone{min-width:0}
.update-box .phone-row{margin-top:6px}
.update-box .country-trigger{height:46px}
.update-box .phone-row>input{height:46px!important;margin:0!important}
@media (min-width:701px){
  .update-box{grid-template-columns:minmax(0,3fr) minmax(0,2fr)!important}
  .update-box .update-phone .country-trigger{min-width:92px;padding:0 9px}
}
@media (max-width:700px){.update-box .update-phone{grid-column:1 / -1}}

/* Datos de contacto: el selector de país y el número tienen la misma altura que el resto de casillas. */
.form-step[data-step="contact"] .country-trigger{height:50px!important;min-height:50px!important;max-height:50px!important;box-sizing:border-box}
.form-step[data-step="contact"] .phone-row>input{height:50px!important;box-sizing:border-box}
.form-step[data-step="contact"] .phone-row{align-items:stretch}

/* El botón de la cuarta tarjeta conserva el ancho visual de las demás opciones. */
.choice-card[data-choice="datos"] .card-overlay>span{box-sizing:border-box;min-width:147px}
@media(max-width:700px){.choice-card[data-choice="datos"] .card-overlay>span{min-width:134px}}