/* =====================================================================
   WEB DE CLIENTES - DISEÑO MODERNO  -  entrega 292
   Lo usa la página de acceso de distribuidores (index_cli).
   Para cambiar colores o tamaños, toca SOLO estas variables.
   ===================================================================== */
:root{
  --wl-azul: #3f6fa8;          /* botón Acceder, títulos                     */
  --wl-verde: #2e8b57;
  --wl-gris: #8a94a3;          /* botón secundario (Ahora no)                */
  --wl-rojo: #c0392b;          /* mensajes de error                          */
  --wl-cian: #1f98a9;          /* enlace "Recuperar contraseña" (color de la marca) */
  --wl-fondo: #eef2f7;         /* fondo de la página                         */
  --wl-cabecera: #5a5959;      /* franja gris de arriba (igual que el logo)  */
  --wl-pie: #4f5357;           /* franja de abajo                            */
  --wl-texto: #26303d;
  --wl-nota: #6b7686;
  --wl-borde: #c9d4e3;
  --wl-ancho-caja: 420px;      /* ancho del cuadro de acceso                 */
  --wl-ancho-caja-ancha: 560px;/* ancho de los cuadros de cambiar contraseña */
  --wl-radio: 12px;
}

/* ---------------- a partir de aquí no hace falta tocar ---------------- */
body.wl{ margin:0; background:var(--wl-fondo) !important; font-family:Arial, Helvetica, sans-serif; color:var(--wl-texto); overflow-x:hidden; }
body.wl *, body.wl *::before, body.wl *::after{ box-sizing:border-box; }

/* cabecera común (index_top) */
body.wl div.wl-cabecera{ background:var(--wl-cabecera); }
body.wl div.wl-cabecera > table{ background:transparent !important; max-width:100%; }
body.wl div.wl-cabecera td.login{ background:transparent; }
body.wl div.wl-cabecera a{ text-decoration:none; }
body.wl div.wl-cabecera a:hover{ text-decoration:underline; }
body.wl #cookiesAlerta{ background:#3b4046 !important; padding:8px 0 4px; }
body.wl #cookiesAlerta table{ max-width:calc(100% - 32px); }

/* zona central */
div.wl-centro{ display:flex; justify-content:center; align-items:flex-start; padding:48px 16px 56px; }
div.wl-caja{ width:var(--wl-ancho-caja); max-width:100%; padding:28px 30px 26px; border-radius:var(--wl-radio); background:#fff; box-shadow:0 10px 34px rgba(20,40,70,.12); }
div.wl-caja-ancha{ width:var(--wl-ancho-caja-ancha); }
h1.wl-titulo{ margin:0; font-size:22px; color:var(--wl-azul); }
p.wl-subtitulo{ margin:6px 0 0; font-size:13.5px; color:var(--wl-nota); }
p.wl-texto{ margin:10px 0 0; font-size:14px; line-height:1.6; }
p.wl-nota{ margin:-4px 0 0; font-size:12px; color:var(--wl-nota); }

div.wl-alerta{ margin:-28px -30px 20px; padding:18px 30px; border-radius:var(--wl-radio) var(--wl-radio) 0 0; background:#fff4e0; border-bottom:1px solid #f0dcb4; font-size:13.5px; line-height:1.6; color:#5c4410; }
div.wl-alerta b{ display:block; margin-bottom:4px; font-size:15px; color:var(--wl-rojo); text-transform:uppercase; letter-spacing:.3px; }

form.wl-form{ display:flex; flex-direction:column; gap:14px; margin:20px 0 0; }
form.wl-form label{ display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:bold; color:#4a5565; }
form.wl-form label small{ font-weight:normal; color:var(--wl-nota); }
form.wl-form input[type=text], form.wl-form input[type=password]{ width:100%; height:auto; padding:11px 12px; border:1px solid var(--wl-borde); border-radius:8px; background:#fff; color:var(--wl-texto); font-size:15px; font-family:inherit; }
form.wl-form input[type=text]:focus, form.wl-form input[type=password]:focus{ outline:none; border-color:var(--wl-azul); box-shadow:0 0 0 3px rgba(63,111,168,.15); }

div.wl-error{ padding:10px 14px; border-radius:8px; border:1px solid #f1c6c1; border-left:4px solid var(--wl-rojo); background:#fdf1f0; color:#8f2a1f; font-size:13.5px; font-weight:bold; line-height:1.45; }

div.wl-botones{ display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:10px; margin-top:6px; }
div.wl-botones-login{ justify-content:space-between; }
.wl-boton{ display:inline-flex; align-items:center; justify-content:center; padding:11px 22px; border:0; border-radius:8px; background:var(--wl-azul); color:#fff !important; font-size:14px; font-weight:bold; font-family:inherit; text-decoration:none !important; cursor:pointer; }
.wl-boton:hover{ filter:brightness(1.08); }
.wl-boton-gris{ background:var(--wl-gris); }
a.wl-enlace{ color:var(--wl-cian); font-size:13px; font-weight:bold; text-decoration:none; }
a.wl-enlace:hover{ text-decoration:underline; }
a.wl-enlace-grande{ display:inline-block; margin-top:4px; color:var(--wl-cian); font-size:15px; font-weight:bold; word-break:break-all; }

/* pie común (principal_bottom_cli) */
div.wl-pie{ background:var(--wl-pie); }
div.wl-pie > div{ width:986px !important; max-width:100%; margin:0 auto; padding:10px 16px 6px; background:transparent !important; line-height:1.4; }

/* el pie siempre abajo aunque haya poco contenido */
body.wl{ display:flex; flex-direction:column; min-height:100vh; }
body.wl > div.wl-centro{ flex:1 0 auto; }

/* zona de banners de publicidad (si hay): sobre la franja gris, sin fondo blanco */
body.wl div.wl-cabecera table[bgcolor="#ebe7e8" i]{ background:#fff !important; max-width:100%; padding:16px 0 10px; box-shadow:0 0 0 100vmax #fff; clip-path:inset(0 -100vmax); }	/* entrega 308: la zona del banner con fondo blanco de lado a lado (antes gris) */
body.wl div.wl-cabecera table[bgcolor="#ebe7e8" i] > tbody > tr > td{ background:transparent !important; }
body.wl div.wl-cabecera #divBanners{ max-width:100%; margin:0 auto; border-radius:0; }	/* entrega 307: sin esquinas redondeadas (antes 8px) */
body.wl div.wl-cabecera .mediaBannerSat17{ background:transparent !important; }

/* ===================== entrega 294: Contacto, Recuperar contraseña y Solicitud distribuidor ===================== */
:root{
  --wl-ancho-caja-form: 680px; /* ancho del formulario de Solicitud distribuidor */
}
div.wl-caja-form{ width:var(--wl-ancho-caja-form); }
form.wl-form textarea{ width:100%; min-height:70px; padding:10px 12px; border:1px solid var(--wl-borde); border-radius:8px; background:#fff; color:var(--wl-texto); font-size:15px; font-family:inherit; resize:vertical; }
form.wl-form textarea:focus{ outline:none; border-color:var(--wl-azul); box-shadow:0 0 0 3px rgba(63,111,168,.15); }
form.wl-form label i{ font-style:normal; color:var(--wl-rojo); }
div.wl-fila2{ display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; }
@media (max-width:640px){ div.wl-fila2{ grid-template-columns:1fr; } }

/* icono redondo (correo, teléfono, ok...) */
span.wl-icono{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background:rgba(63,111,168,.12); }
span.wl-icono svg{ width:22px; height:22px; fill:none; stroke:var(--wl-azul); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
span.wl-icono-grande{ width:74px; height:74px; margin:0 auto 16px; display:flex; }
span.wl-icono-grande svg{ width:38px; height:38px; }
span.wl-icono-verde{ background:rgba(46,139,87,.13); }
span.wl-icono-verde svg{ stroke:var(--wl-verde); stroke-width:2.6; }

/* datos de contacto */
div.wl-contactos{ display:flex; flex-direction:column; gap:12px; margin-top:20px; }
div.wl-contacto{ display:flex; align-items:center; gap:14px; padding:14px 16px; border:1px solid #e3e8ef; border-radius:10px; background:#f8fafc; }
div.wl-contacto small{ display:block; font-size:12px; font-weight:bold; color:var(--wl-nota); text-transform:uppercase; letter-spacing:.3px; }
div.wl-contacto a, div.wl-contacto b{ display:inline-block; margin-top:2px; font-size:17px; font-weight:bold; color:var(--wl-texto); text-decoration:none; word-break:break-all; }
div.wl-contacto a:hover{ color:var(--wl-azul); }
div.wl-contacto p{ margin:4px 0 0; font-size:13px; line-height:1.5; color:var(--wl-nota); }

/* mensajes de resultado */
div.wl-resultado{ text-align:center; }
div.wl-resultado h1.wl-titulo{ margin-bottom:4px; }
div.wl-resultado div.wl-botones{ justify-content:center; margin-top:20px; }
div.wl-info{ margin-top:16px; padding:12px 14px; border-radius:8px; border:1px solid #c9d4e3; border-left:4px solid var(--wl-azul); background:#f3f7fc; font-size:14px; line-height:1.55; text-align:left; }
form.wl-form .wl-campo-mal{ border-color:var(--wl-rojo) !important; background:#fffafa !important; }

/* ===================== entrega 300: Información legal (condiciones generales y cookies) ===================== */
:root{
  --wl-ancho-legal: 880px;     /* ancho de los textos legales */
}
div.wl-legal-marco{ width:var(--wl-ancho-legal); max-width:100%; display:flex; flex-direction:column; gap:18px; }
div.wl-legal-marco > div.wl-caja{ width:100%; }
div.wl-pestanas{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
a.wl-pestana{ padding:8px 14px; border-radius:20px; background:rgba(63,111,168,.10); color:var(--wl-azul) !important; font-size:13px; font-weight:bold; text-decoration:none !important; }
a.wl-pestana:hover{ background:var(--wl-azul); color:#fff !important; }
div.wl-legal{ scroll-margin-top:16px; font-size:14px; line-height:1.65; color:var(--wl-texto); }
div.wl-legal h2{ margin:0 0 4px; font-size:21px; color:var(--wl-azul); }
div.wl-legal h3{ margin:22px 0 6px; font-size:15.5px; color:#2f3b4c; }
div.wl-legal p{ margin:0 0 10px; }
div.wl-legal ul{ margin:0 0 10px; padding-left:20px; }
div.wl-legal li{ margin-bottom:6px; }
div.wl-legal em{ color:var(--wl-nota); font-size:12.5px; }
div.wl-legal a{ color:var(--wl-azul); font-weight:bold; }
div.wl-legal a[name]{ display:block; height:0; }
table.cg-tabla{ width:100%; margin:6px 0 14px; border-collapse:separate; border-spacing:0; border:1px solid #d5dde8; border-radius:8px; overflow:hidden; font-size:13px; }
table.cg-tabla th{ padding:9px 10px; background:#f1f4f8; border-bottom:1px solid #d5dde8; color:#4a5568; font-size:11.5px; text-transform:uppercase; letter-spacing:.3px; text-align:left; }
table.cg-tabla td{ padding:9px 10px; border-bottom:1px solid #e6ebf2; vertical-align:top; }
table.cg-tabla tr:last-child td{ border-bottom:0; }
table.cg-tabla td:first-child{ font-family:Consolas, monospace; font-weight:bold; white-space:nowrap; }
@media (max-width:640px){ table.cg-tabla td:first-child{ white-space:normal; } }

/* ===================== entrega 305: página de inicio de la web de clientes finales (index) ===================== */
:root{
  --ini-alto-banner: 370px;   /* alto del banner de publicidad en la página principal y en Liberar móvil (antes 320px) */
  --ini-ancho-banner: 100%;    /* ancho del banner: 100% = de lado a lado de la pantalla (pon 1320px para que vaya igual que el contenido) */
  --ini-ancho: 1320px;         /* ancho máximo de la cabecera y de la zona central (en pantallas pequeñas se ajusta solo) */
  --ini-ancho-pedido: 525px;   /* ancho mínimo del cuadro del pedido (no bajar de 525)  */
  --ini-activo: #3f6fa8;       /* color del paso en el que está el cliente              */
  --ini-hecho: #2e8b57;        /* color de los pasos ya hechos                           */
}

/* cabecera (logotipo, botón de acceso y enlaces) a lo ancho de la pantalla */
body.wl-inicio div.wl-cabecera > table[bgcolor="#ffffff" i]{ width:var(--ini-ancho); max-width:100%; background:transparent !important; }
body.wl-inicio div.wl-cabecera td.login > table{ width:100% !important; }
body.wl-inicio div.wl-cabecera td.login > table > tbody > tr > td[background]{ width:auto !important; background-color:var(--wl-cabecera); background-repeat:no-repeat; background-position:left center; }
body.wl-inicio div.wl-cabecera td.login > table > tbody > tr > td[background] > table{ float:right; }
/* entrega 306: banner de publicidad a lo ancho de la página (el alto se cambia en --ini-alto-banner, arriba) */
body.wl-inicio div.wl-cabecera table[bgcolor="#ebe7e8" i]{ width:var(--ini-ancho-banner) !important; max-width:100%; table-layout:fixed; }	/* entrega 313: banner de lado a lado de la pantalla */
body.wl-inicio div.wl-cabecera #divBanners{ width:100% !important; height:var(--ini-alto-banner) !important; }
body.wl-inicio div.wl-cabecera #divBanners img[name="bannerI"]{ width:100% !important; height:var(--ini-alto-banner) !important; }
body.wl-inicio div.wl-cabecera .paseBannerSat17, body.wl-inicio div.wl-cabecera .paseBannerSat17 .mediaBannerSat17, body.wl-inicio div.wl-cabecera .paseBannerSat17 .enlaceBannerSat17{ width:100% !important; height:var(--ini-alto-banner) !important; }
body.wl-inicio div.wl-cabecera .paseBannerSat17 .mediaBannerSat17{ object-fit:fill; }
body.wl-inicio #cookiesAlerta table{ width:var(--ini-ancho); max-width:calc(100% - 32px); }
body.wl-inicio footer.pie299 .pie299-dentro{ max-width:var(--ini-ancho); }

body.wl-inicio div.ini-zona{ padding:30px 16px 44px; font-size:15px; }
div.ini-marco{ width:var(--ini-ancho); max-width:100%; display:flex; flex-direction:column; gap:22px; }
div.ini-rejilla{ display:grid; grid-template-columns:minmax(0,5fr) minmax(var(--ini-ancho-pedido),6fr); gap:22px; align-items:start; }

/* pasos (izquierda) */
aside.ini-pasos{ padding:28px 28px 24px; border-radius:16px; background:#fff; box-shadow:0 10px 34px rgba(20,40,70,.10); }
aside.ini-pasos h1{ margin:0; font-size:24px; line-height:1.3; color:var(--wl-azul); }
aside.ini-pasos p.ini-sub{ margin:6px 0 22px; font-size:14.5px; color:var(--wl-nota); }
aside.ini-pasos ol{ position:relative; list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
aside.ini-pasos ol::before{ content:""; position:absolute; left:39px; top:30px; bottom:30px; width:2px; background:#dde4ee; }
li.ini-paso{ position:relative; display:flex; gap:16px; align-items:center; padding:16px 18px; border:1px solid #e3e8ef; border-radius:12px; background:#f8fafc; transition:background .25s, border-color .25s, box-shadow .25s, transform .25s; }
li.ini-paso b{ display:block; font-size:16.5px; color:#2f3b4c; }
li.ini-paso p{ margin:4px 0 0; font-size:14px; line-height:1.5; color:var(--wl-nota); }
span.ini-num{ position:relative; z-index:1; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background:#e4e9f1; border:3px solid #fff; box-shadow:0 0 0 1px #dde4ee; color:#5d6878; font-size:18px; font-weight:bold; }
span.ini-num i{ font-style:normal; }
span.ini-num svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
li.ini-paso[data-paso] span.ini-num svg{ display:none; }
li.ini-paso.activo{ border-color:var(--ini-activo); background:linear-gradient(90deg, #eaf1fa, #f7faff); box-shadow:0 6px 18px rgba(63,111,168,.16); transform:translateX(4px); }
li.ini-paso.activo span.ini-num{ background:var(--ini-activo); color:#fff; box-shadow:0 0 0 4px rgba(63,111,168,.22); }
li.ini-paso.activo b{ color:var(--ini-activo); }
li.ini-paso.activo::after{ content:""; position:absolute; right:-9px; top:50%; width:16px; height:16px; margin-top:-8px; background:#f7faff; border-top:1px solid var(--ini-activo); border-right:1px solid var(--ini-activo); transform:rotate(45deg); }
li.ini-paso.hecho span.ini-num{ background:var(--ini-hecho); color:#fff; }
li.ini-paso.hecho span.ini-num i{ display:none; }
li.ini-paso.hecho span.ini-num svg{ display:block; }
li.ini-paso.hecho b{ color:var(--ini-hecho); }
li.ini-paso-fin{ background:#f2faf5; border-color:#cfe8da; }
li.ini-paso-fin span.ini-num{ background:#dcf0e4; color:var(--ini-hecho); }
div.ini-consejo{ display:flex; gap:10px; align-items:flex-start; margin-top:18px; padding:13px 15px; border-radius:10px; border-left:4px solid var(--wl-azul); background:#f3f7fc; font-size:14px; line-height:1.5; color:#3c4858; }
div.ini-consejo svg{ flex:0 0 auto; width:20px; height:20px; fill:none; stroke:var(--wl-azul); stroke-width:2; stroke-linecap:round; }

/* cuadro del pedido (derecha). Lo de dentro lo pinta el programa del pedido: aquí solo se suaviza */
section.ini-panel{ border-radius:16px; background:#fff; box-shadow:0 10px 34px rgba(20,40,70,.10); overflow:hidden; }
div.ini-panel-cab{ padding:18px 24px; background:linear-gradient(90deg, var(--wl-azul), #5585c0); color:#fff; font-size:19px; font-weight:bold; letter-spacing:.2px; }
div#primerBloque{ padding:20px 24px 24px; }
p.ini-intro{ margin:0 0 16px; font-size:14.5px; font-weight:bold; color:#3c4858; }
div.ini-campo{ display:block; margin-bottom:16px; }
div.ini-campo > span{ display:block; margin-bottom:7px; font-size:13.5px; font-weight:bold; color:#4a5565; }
section.ini-panel select, section.ini-panel input[type=text]{ max-width:100%; padding:8px 10px; border:1px solid var(--wl-borde); border-radius:8px; background-color:#fff; color:var(--wl-texto); font-size:14px; font-family:inherit; }
div#primerBloque select{ -webkit-appearance:none; appearance:none; width:100% !important; height:48px !important; padding:0 44px 0 16px; border:1.5px solid #cfd8e5; border-radius:10px; background-color:#f9fbfd; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233f6fa8' stroke-width='2.4' 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; font-size:15px !important; color:var(--wl-texto); cursor:pointer; transition:border-color .15s, box-shadow .15s, background-color .15s; }
div#primerBloque select:hover:not(:disabled){ border-color:#9fb4d0; background-color:#fff; }
div#primerBloque select:focus{ outline:none; border-color:var(--wl-azul); background-color:#fff; box-shadow:0 0 0 4px rgba(63,111,168,.15); }
div#primerBloque select:disabled{ background-color:#f0f3f7; border-style:dashed; color:#a0a9b6; cursor:not-allowed; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3bcc8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
div#primerBloque select option{ color:var(--wl-texto); background:#fff; }
section.ini-panel select:focus, section.ini-panel input[type=text]:focus{ outline:none; border-color:var(--wl-azul); box-shadow:0 0 0 3px rgba(63,111,168,.15); }
section.ini-panel table[width="493"], section.ini-panel table[width="480"]{ width:100%; }
section.ini-panel [bgcolor="#baf6fe" i]{ background:transparent !important; }
section.ini-panel [bgcolor="#ff999d" i]{ background:#e3ebf5 !important; }
section.ini-panel [bgcolor="#fbdddd" i]{ background:#f6f8fb !important; }
section.ini-panel [bgcolor="#ebebeb" i], section.ini-panel [bgcolor="#f7f7f7" i], section.ini-panel [bgcolor="#faf8f9" i]{ background:#f6f8fb !important; }
section.ini-panel [bgcolor="#aeced2" i]{ background:#eef2f7 !important; }
section.ini-panel [bgcolor="#fcff00" i], section.ini-panel [bgcolor="#fffc01" i], section.ini-panel [bgcolor="#fffc00" i]{ background:#fff4d6 !important; }
section.ini-panel [bgcolor="#54fd54" i]{ background:#e3f4ea !important; }
section.ini-panel input[type=radio], section.ini-panel input[type=checkbox]{ accent-color:var(--wl-azul); }
section.ini-panel img[onclick]{ cursor:pointer; }

/* nota del modelo (franja de abajo) */
div.ini-nota{ border-radius:16px; overflow:hidden; box-shadow:0 6px 20px rgba(20,40,70,.08); }
div.ini-nota table{ width:100% !important; }
div.ini-nota [bgcolor="#fcff00" i], div.ini-nota [bgcolor="#fffc01" i], div.ini-nota [bgcolor="#fffc00" i], div.ini-nota [bgcolor="#ffff00" i]{ background:#fff4d6 !important; }

/* tarjetas de teléfono y preguntas frecuentes */
div.ini-tarjeta{ padding:22px 28px; border-radius:16px; background:#fff; box-shadow:0 10px 34px rgba(20,40,70,.10); }
div.ini-telefono{ display:flex; gap:16px; align-items:center; }
div.ini-telefono small{ display:block; font-size:12px; font-weight:bold; color:var(--wl-nota); text-transform:uppercase; letter-spacing:.3px; }
div.ini-telefono a{ display:inline-block; margin-top:2px; font-size:20px; font-weight:bold; color:var(--wl-texto); text-decoration:none; }
div.ini-telefono a:hover{ color:var(--wl-azul); }
div.ini-telefono p{ margin:4px 0 0; font-size:13.5px; line-height:1.5; color:#4a5565; }
div.ini-telefono p.ini-aviso b{ color:var(--wl-rojo); }
div.ini-faq-cab{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; margin-bottom:8px; }
div.ini-faq-cab h2{ margin:0; font-size:19px; color:var(--wl-azul); }
div.ini-faq-cab .wl-boton{ padding:9px 18px; font-size:13px; }
div.ini-faq-item{ padding:14px 0; border-top:1px solid #e6ebf2; font-size:13.5px; line-height:1.6; color:#3c4858; }
div.ini-faq-item h3{ margin:0 0 4px; font-size:15px; color:#2f3b4c; }
div.ini-faq-item img{ max-width:100%; height:auto; }

/* ventana de avisos */
div.ini-modal{ position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(25,35,50,.45); }
div.ini-modal[hidden]{ display:none; }
div.ini-modal-caja{ width:420px; max-width:100%; padding:26px 26px 20px; border-radius:var(--wl-radio); background:#fff; box-shadow:0 18px 50px rgba(0,0,0,.25); text-align:center; font-size:14.5px; }
div.ini-modal-caja span.wl-icono{ margin:0 auto 12px; }
div.ini-modal-caja p{ margin:0 0 18px; line-height:1.55; color:var(--wl-texto); white-space:pre-line; }
div.ini-modal-caja div.wl-botones{ justify-content:center; }

/* pantallas estrechas: un cuadro debajo del otro */
@media (max-width:900px){
  div.ini-rejilla{ grid-template-columns:minmax(0,1fr); }
  li.ini-paso.activo{ transform:none; }
  li.ini-paso.activo::after{ display:none; }
  section.ini-panel{ overflow-x:auto; }
}