/* Página pública de Ofercell. Colores del logo: negro, azul rey y blanco. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --negro: #05070D;
  --tinta: #0A0F1E;
  --tinta-2: #10172B;
  --linea: rgba(160, 178, 255, .14);
  --azul: #3D5EF5;           /* el azul del logo */
  --azul-vivo: #5B7BFF;
  --azul-claro: #A9B8FF;
  --cian: #5CE1FF;           /* solo en brillos y degradados */
  --blanco: #FFFFFF;
  --texto: #E8ECFA;
  --tenue: #9AA5C8;
  --degradado: linear-gradient(120deg, #3D5EF5 0%, #6A86FF 45%, #5CE1FF 100%);
  --radio: 18px;
  --sombra: 0 24px 60px -24px rgba(0, 0, 0, .7);
  --fuente: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --banda: 42px;
}
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--banda) + 76px); -webkit-text-size-adjust: 100%; }
body { background: var(--negro); color: var(--texto); font-family: var(--fuente); line-height: 1.6; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.contenedor { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px; }

/* ── Banda de servicios en movimiento ── */
.banda { position: sticky; top: 0; z-index: 30; height: var(--banda); overflow: hidden; background: var(--degradado); color: #fff; display: flex; align-items: center; }
.banda-pista { display: flex; width: max-content; animation: banda 32s linear infinite; }
.banda:hover .banda-pista { animation-play-state: paused; }
.banda-grupo { display: flex; align-items: center; flex-shrink: 0; }
.banda-grupo span { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; padding: 0 22px; }
.banda-grupo i { width: 7px; height: 7px; background: #fff; transform: rotate(45deg); border-radius: 1px; opacity: .85; flex-shrink: 0; }
@keyframes banda { to { transform: translateX(-50%); } }

/* ── Barra superior ── */
.barra { position: sticky; top: var(--banda); z-index: 25; background: rgba(5, 7, 13, .72); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--linea); }
.barra-in { display: flex; align-items: center; gap: 28px; height: 68px; }
.barra-marca img { width: 118px; height: auto; }
.barra-nav { display: flex; gap: 26px; margin-left: auto; }
.barra-nav a { text-decoration: none; font-size: 14px; font-weight: 500; color: var(--tenue); transition: color .2s; }
.barra-nav a:hover { color: #fff; }

/* ── Botones ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 26px; border-radius: 999px; font: 600 15px/1 var(--fuente); text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: transform .2s, box-shadow .2s, background .2s, border-color .2s; white-space: nowrap; }
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn-principal { background: var(--azul); color: #fff; box-shadow: 0 10px 30px -10px rgba(61, 94, 245, .8), inset 0 1px 0 rgba(255, 255, 255, .25); }
.btn-principal:hover { background: var(--azul-vivo); transform: translateY(-2px); box-shadow: 0 16px 36px -12px rgba(91, 123, 255, .9), inset 0 1px 0 rgba(255, 255, 255, .25); }
.btn-borde { background: rgba(255, 255, 255, .03); color: #fff; border-color: rgba(255, 255, 255, .22); }
.btn-borde:hover { border-color: var(--azul-claro); background: rgba(91, 123, 255, .1); transform: translateY(-2px); }
.btn-chico { padding: 10px 18px; font-size: 14px; }
.btn-grande { padding: 17px 30px; font-size: 16px; }
.btn-wa svg { fill: currentColor; }
.btn-wa { background: rgba(255, 255, 255, .06); color: #fff; border-color: rgba(255, 255, 255, .16); }
.btn-wa:hover { background: var(--azul); border-color: var(--azul); }
.btn-grande svg, .servicio-icono svg, .sellos svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.btn:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--cian); outline-offset: 3px; }

/* ── Portada ── */
.portada { position: relative; overflow: hidden; padding: 72px 0 96px; text-align: center; }
.portada-fondo { position: absolute; inset: 0; pointer-events: none; }
.brillo { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55; }
.brillo-1 { width: 620px; height: 620px; left: 50%; top: -180px; margin-left: -310px; background: radial-gradient(circle, rgba(61, 94, 245, .9), transparent 65%); animation: flotar 14s ease-in-out infinite alternate; }
.brillo-2 { width: 380px; height: 380px; right: -120px; bottom: -160px; background: radial-gradient(circle, rgba(92, 225, 255, .45), transparent 65%); animation: flotar 18s ease-in-out infinite alternate-reverse; }
@keyframes flotar { to { transform: translate(40px, 30px) scale(1.08); } }
.portada-in { position: relative; display: flex; flex-direction: column; align-items: center; }

/* El logo entra como resorte: cae, se comprime, rebota y se asienta */
.logo-escena { position: relative; width: min(620px, 92vw); margin-bottom: 30px; }
.logo-resorte { width: 100%; height: auto; transform-origin: 50% 100%; animation: resorte 1.6s .15s both; }
.logo-sombra { position: absolute; left: 18%; right: 18%; bottom: -14px; height: 22px; border-radius: 50%; background: radial-gradient(ellipse, rgba(61, 94, 245, .55), transparent 70%); filter: blur(6px); animation: sombra 1.6s .15s both; }
@keyframes resorte {
  0%   { transform: translateY(-140px) scale(.7, 1.15); opacity: 0; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  28%  { transform: translateY(0) scale(1.18, .78); opacity: 1; animation-timing-function: cubic-bezier(0, .55, .45, 1); }
  44%  { transform: translateY(-34px) scale(.94, 1.08); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  58%  { transform: translateY(0) scale(1.07, .92); animation-timing-function: cubic-bezier(0, .55, .45, 1); }
  70%  { transform: translateY(-10px) scale(.98, 1.03); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  82%  { transform: translateY(0) scale(1.02, .98); }
  100% { transform: none; opacity: 1; }
}
@keyframes sombra {
  0% { opacity: 0; transform: scaleX(.3); }
  28% { opacity: 1; transform: scaleX(1.2); }
  44% { opacity: .5; transform: scaleX(.8); }
  58% { opacity: 1; transform: scaleX(1.08); }
  100% { opacity: .8; transform: none; }
}
.portada-titulo { font-size: clamp(30px, 5.2vw, 56px); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: #fff; max-width: 820px; animation: subir .8s 1.1s both; }
.degradado { background: var(--degradado); -webkit-background-clip: text; background-clip: text; color: transparent; }
.portada-texto { margin-top: 18px; font-size: clamp(16px, 2vw, 19px); color: var(--tenue); max-width: 620px; animation: subir .8s 1.25s both; }
.portada-acciones { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 34px; animation: subir .8s 1.4s both; }
.sellos { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin-top: 44px; animation: subir .8s 1.55s both; }
.sellos li { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--texto); }
.sellos svg { width: 20px; height: 20px; color: var(--azul-claro); }
@keyframes subir { from { opacity: 0; transform: translateY(18px); } }

/* ── Secciones ── */
.seccion { padding: 104px 0; position: relative; }
.seccion-oscura { background: linear-gradient(180deg, var(--tinta) 0%, var(--negro) 100%); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.encabezado { text-align: center; max-width: 640px; margin: 0 auto 56px; }
.antetitulo { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--azul-claro); margin-bottom: 14px; }
.encabezado h2 { font-size: clamp(28px, 4vw, 42px); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; color: #fff; }
.encabezado p:not(.antetitulo) { margin-top: 14px; color: var(--tenue); font-size: 17px; }

/* Aparición al hacer scroll (la clase .visible la pone inicio.js) */
.js .aparece { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
.js .aparece.visible { opacity: 1; transform: none; }

/* ── Servicios ── */
.servicios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.servicio { position: relative; padding: 30px 28px; border-radius: var(--radio); background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015)); border: 1px solid var(--linea); transition: transform .3s, border-color .3s, background .3s; overflow: hidden; }
.servicio::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 0%), rgba(91, 123, 255, .16), transparent 45%); opacity: 0; transition: opacity .3s; pointer-events: none; }
.servicio:hover { transform: translateY(-4px); border-color: rgba(91, 123, 255, .45); }
.servicio:hover::after { opacity: 1; }
.servicio-icono { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: rgba(61, 94, 245, .14); color: var(--azul-claro); border: 1px solid rgba(91, 123, 255, .3); margin-bottom: 20px; }
.servicio-icono svg { width: 26px; height: 26px; }
.servicio h3 { font-size: 19px; font-weight: 600; color: #fff; margin-bottom: 8px; }
.servicio p { font-size: 15px; color: var(--tenue); }
.servicio-destacado { background: linear-gradient(160deg, rgba(61, 94, 245, .32), rgba(10, 15, 30, .4) 60%); border-color: rgba(91, 123, 255, .5); }
.servicio-destacado .servicio-icono { background: var(--azul); color: #fff; border-color: transparent; }
.etiqueta { position: absolute; top: 22px; right: 22px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: rgba(92, 225, 255, .14); color: var(--cian); border: 1px solid rgba(92, 225, 255, .35); }

/* ── Proceso ── */
.pasos { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; counter-reset: paso; position: relative; }
.pasos::before { content: ''; position: absolute; left: 6%; right: 6%; top: 27px; height: 2px; background: linear-gradient(90deg, transparent, var(--azul) 15%, var(--cian) 85%, transparent); opacity: .5; }
.paso { position: relative; padding: 0 6px; text-align: center; }
.paso-num { position: relative; display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 50%; background: var(--negro); border: 2px solid var(--azul); font-weight: 700; font-size: 16px; color: #fff; box-shadow: 0 0 0 6px var(--tinta), 0 0 30px rgba(61, 94, 245, .5); }
.paso h3 { font-size: 17px; font-weight: 600; color: #fff; margin-bottom: 6px; }
.paso p { font-size: 14px; color: var(--tenue); }
.paso:nth-child(2) { transition-delay: .08s; } .paso:nth-child(3) { transition-delay: .16s; } .paso:nth-child(4) { transition-delay: .24s; } .paso:nth-child(5) { transition-delay: .32s; }

.folio { margin-top: 64px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 28px 32px; border-radius: var(--radio); background: rgba(61, 94, 245, .1); border: 1px solid rgba(91, 123, 255, .35); }
.folio-texto h3 { font-size: 20px; color: #fff; font-weight: 600; }
.folio-texto p { color: var(--tenue); font-size: 15px; }
.folio-campo { display: flex; gap: 10px; flex: 1 1 460px; max-width: 560px; }
#folio-num { flex: 1.25; }
.folio input { flex: 1; min-width: 0; padding: 13px 18px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(5, 7, 13, .6); color: #fff; font: 500 16px var(--fuente); outline: none; transition: border-color .2s; }
.folio input::placeholder { color: #6E7899; }
.folio input:focus { border-color: var(--azul-vivo); }

/* Resultado de la consulta (lo pinta inicio.js) */
.consulta { flex-basis: 100%; display: grid; gap: 14px; }
.consulta[hidden] { display: none; }
.consulta-tarjeta { display: grid; gap: 12px; padding: 22px 24px; border-radius: 14px; background: rgba(5, 7, 13, .6); border: 1px solid var(--linea); }
.consulta-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.consulta-folio { font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--azul-claro); }
.consulta-equipo { font-size: 21px; font-weight: 600; line-height: 1.3; color: #fff; overflow-wrap: anywhere; }
.consulta-mensaje { font-size: 15px; color: var(--texto); }
.consulta-pasos { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; font-size: 12px; color: #6E7899; }
.consulta-pasos li::before { content: ''; display: block; height: 5px; margin-bottom: 7px; border-radius: 999px; background: rgba(255, 255, 255, .1); }
.consulta-pasos li.hecho { color: var(--tenue); }
.consulta-pasos li.hecho::before { background: var(--azul); }
.consulta-pasos li.actual { color: #fff; font-weight: 600; }
.consulta-pasos li.actual::before { background: var(--degradado); box-shadow: 0 0 12px rgba(92, 225, 255, .45); }
.consulta-datos { display: flex; flex-wrap: wrap; gap: 10px 32px; }
.consulta-datos dt { font-size: 12.5px; color: var(--tenue); }
.consulta-datos dd { font-size: 15px; font-weight: 500; color: #fff; }
.consulta-datos .fuerte dd { font-weight: 700; color: var(--cian); }
.consulta-tarjeta .btn { justify-self: start; }
.consulta-aviso { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; padding: 16px 20px; border-radius: 14px; background: rgba(255, 196, 61, .08); border: 1px solid rgba(255, 196, 61, .3); color: #FFE1A3; font-size: 15px; }
.btn:disabled { opacity: .7; cursor: wait; transform: none; }

/* ── Sucursales ── */
.sucursales { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.sucursal { border-radius: var(--radio); overflow: hidden; border: 1px solid var(--linea); background: var(--tinta); display: flex; flex-direction: column; transition: border-color .3s, transform .3s; }
.sucursal:hover { border-color: rgba(91, 123, 255, .45); transform: translateY(-4px); }
/* Mapa decorativo: calles dibujadas con degradados (el enlace abre el mapa real) */
.sucursal-mapa { position: relative; height: 170px; background:
  linear-gradient(28deg, transparent 47%, rgba(169, 184, 255, .22) 47.5%, rgba(169, 184, 255, .22) 49.5%, transparent 50%),
  linear-gradient(-62deg, transparent 63%, rgba(169, 184, 255, .14) 63.5%, rgba(169, 184, 255, .14) 64.8%, transparent 65.3%),
  linear-gradient(var(--linea) 1px, transparent 1px), linear-gradient(90deg, var(--linea) 1px, transparent 1px),
  radial-gradient(circle at 50% 55%, rgba(61, 94, 245, .35), transparent 55%), var(--tinta-2);
  background-size: auto, auto, 34px 34px, 34px 34px, auto, auto; }
.sucursal-mapa-2 { background:
  linear-gradient(-18deg, transparent 52%, rgba(169, 184, 255, .22) 52.5%, rgba(169, 184, 255, .22) 54.5%, transparent 55%),
  linear-gradient(74deg, transparent 30%, rgba(169, 184, 255, .14) 30.5%, rgba(169, 184, 255, .14) 31.8%, transparent 32.3%),
  linear-gradient(var(--linea) 1px, transparent 1px), linear-gradient(90deg, var(--linea) 1px, transparent 1px),
  radial-gradient(circle at 50% 55%, rgba(61, 94, 245, .35), transparent 55%), var(--tinta-2);
  background-size: auto, auto, 34px 34px, 34px 34px, auto, auto; }
.sucursal-mapa-3 { background:
  repeating-linear-gradient(45deg, rgba(169, 184, 255, .05) 0 10px, transparent 10px 20px),
  radial-gradient(circle at 50% 55%, rgba(92, 225, 255, .22), transparent 55%), var(--tinta-2); }
.pronto-anillo { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; border: 2px dashed rgba(92, 225, 255, .7); animation: girar 12s linear infinite; }
.pronto-anillo::after { content: ''; position: absolute; inset: 14px; border-radius: 50%; background: var(--cian); opacity: .8; }
@keyframes girar { to { transform: rotate(360deg); } }
.sucursal-texto { color: var(--tenue); font-size: 15.5px; }
.pin { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -26px 0 0 -13px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--azul); box-shadow: 0 0 0 6px rgba(61, 94, 245, .25); animation: pin 2.4s ease-in-out infinite; }
.pin::after { content: ''; position: absolute; inset: 8px; border-radius: 50%; background: #fff; }
@keyframes pin { 50% { transform: rotate(-45deg) translate(4px, -4px); box-shadow: 0 0 0 12px rgba(61, 94, 245, .08); } }
.sucursal-info { padding: 26px 28px 30px; }
.sucursal-zona { font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--azul-claro); }
.sucursal h3 { font-size: 26px; color: #fff; font-weight: 700; margin: 2px 0 10px; }
.sucursal-dir { display: block; color: var(--texto); text-decoration: none; font-size: 15.5px; border-bottom: 1px dashed transparent; transition: color .2s; }
.sucursal-dir:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--azul-vivo); text-underline-offset: 4px; }
.horario { margin-top: 14px; display: grid; gap: 4px; font-size: 14.5px; }
.horario div { display: flex; justify-content: space-between; gap: 12px; max-width: 320px; }
.horario dt { color: var(--tenue); }
.horario dd { color: var(--texto); font-weight: 500; }
.abierto { display: inline-flex; align-items: center; gap: 7px; margin-left: 10px; font-size: 12px; font-weight: 600; letter-spacing: .02em; padding: 3px 10px; border-radius: 999px; vertical-align: middle; }
.abierto::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.abierto.si { color: #7BE3A6; background: rgba(80, 220, 140, .12); }
.abierto.si::before { box-shadow: 0 0 0 0 rgba(123, 227, 166, .6); animation: latido 2s infinite; }
.abierto.pronto { color: var(--cian); background: rgba(92, 225, 255, .12); }
.abierto.pronto::before { display: none; }
.abierto.no { color: var(--tenue); background: rgba(255, 255, 255, .06); }
@keyframes latido { 70% { box-shadow: 0 0 0 7px rgba(123, 227, 166, 0); } 100% { box-shadow: 0 0 0 0 rgba(123, 227, 166, 0); } }
.sucursal-acciones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }

/* Etiquetas de estado (también en el resultado de la consulta) */
.pv-estado { font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.pv-diag { background: rgba(255, 196, 61, .14); color: #FFD27A; }
.pv-rep { background: rgba(61, 94, 245, .22); color: var(--azul-claro); }
.pv-listo { background: rgba(92, 225, 255, .14); color: var(--cian); }
.pv-ent { background: rgba(80, 220, 140, .14); color: #7BE3A6; }
.pv-cancel { background: rgba(255, 255, 255, .08); color: var(--tenue); }

/* ── Pie ── */
.pie { padding: 64px 0 48px; border-top: 1px solid var(--linea); }
.pie-in { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; color: var(--tenue); font-size: 14px; }
.pie-in img { width: 150px; height: auto; margin-bottom: 8px; }
.pie-links a { color: var(--texto); text-decoration: none; white-space: nowrap; }
.pie-links a:hover { color: #fff; text-decoration: underline; }

/* ── WhatsApp flotante (en el celular solo el ícono) ── */
.wa-flotante { position: fixed; right: calc(28px + env(safe-area-inset-right)); bottom: calc(28px + env(safe-area-inset-bottom)); z-index: 40; display: inline-flex; align-items: center; gap: 12px; height: 66px; padding: 0 32px 0 24px; border-radius: 999px; background: var(--azul); color: #fff; font: 600 18px/1 var(--fuente); text-decoration: none; box-shadow: 0 14px 34px -10px rgba(61, 94, 245, .9), inset 0 1px 0 rgba(255, 255, 255, .25); transition: transform .2s, background .2s; }
.wa-flotante:hover { background: var(--azul-vivo); transform: translateY(-2px); }
.wa-flotante svg { width: 30px; height: 30px; fill: currentColor; flex-shrink: 0; }
.pie { padding-bottom: 116px; }   /* que el botón no tape los enlaces del pie */
@media print { .wa-flotante { display: none; } }

/* ── Tabletas y teléfonos ── */
@media (max-width: 960px) {
  .servicios, .sucursales { grid-template-columns: 1fr 1fr; }
  .sucursal-pronto { grid-column: 1 / -1; }
  .sucursal-pronto .sucursal-mapa { height: 110px; }
  .pasos { grid-template-columns: 1fr; gap: 0; max-width: 520px; margin: 0 auto; }
  .pasos::before { left: 27px; right: auto; top: 10px; bottom: 10px; width: 2px; height: auto; background: linear-gradient(180deg, var(--azul), var(--cian)); }
  .paso { display: grid; grid-template-columns: 56px 1fr; column-gap: 18px; text-align: left; padding: 0 0 26px; }
  .paso-num { grid-row: span 2; margin: 0; }
  .paso h3 { align-self: end; margin-top: 4px; }
}
@media (max-width: 700px) {
  :root { --banda: 36px; }
  .banda-grupo span { font-size: 11.5px; padding: 0 16px; }
  .barra-nav { display: none; }
  .barra-in { height: 60px; justify-content: space-between; }
  .barra-marca img { width: 104px; }
  .portada { padding: 48px 0 72px; }
  .seccion { padding: 76px 0; }
  .servicios, .sucursales { grid-template-columns: 1fr; }
  .portada-acciones { flex-direction: column; width: 100%; max-width: 360px; }
  .portada-acciones .btn { width: 100%; }
  .sellos { flex-direction: column; align-items: center; gap: 12px; }
  .folio { padding: 24px 20px; }
  .folio-campo { flex-basis: 100%; flex-direction: column; }
  .consulta-tarjeta { padding: 18px; }
  .btn-grande { width: 100%; }
  .wa-flotante { width: 56px; height: 56px; padding: 0; justify-content: center; right: calc(16px + env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); }
  .wa-flotante svg { width: 26px; height: 26px; }
  .wa-flotante span { display: none; }
}

/* En teléfonos angostos la barra de avance va sin nombres: el estado ya sale arriba */
@media (max-width: 560px) {
  .consulta-pasos span { display: none; }
  .consulta-pasos li::before { margin-bottom: 0; }
}

/* Sin animaciones si la persona lo pidió en su sistema */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .banda-pista { animation: none; }
  html { scroll-behavior: auto; }
}