/* Focus CDE — inscripción en línea.
   Sistema visual tomado del sitio real: navy #094A6E dominante, CTA dorado
   #BCA15E, píldoras en azul claro, Raleway pesada y frases resaltadas en caja. */

:root {
  --navy:   #094A6E;
  --navy-2: #073a57;
  --azul:   #1E8DB9;
  --azul-2: #69AAC9;
  --cielo:  #DFF7FF;
  --oro:    #BCA15E;
  --oro-2:  #a88d4c;
  /* Identidad de Focus: navy y dorado. Nada más.
     El amarillo #F8E237 y el verde #2DB654 salían de variables sueltas del
     Elementor de su sitio, pero no son de la marca. Fuera. */
  --oro-cl: #D8BC77;
  --oro-os: #8E6F28;
  --tinta:  #363636;
  --texto:  #636363;
  --linea:  #DDDDDD;
  --nube:   #F3F6FB;
  --humo:   #F8F8F8;

  --r:  14px;
  --r-s: 9px;
  --sombra:   0 2px 10px rgba(9,74,110,.07);
  --sombra-2: 0 14px 40px -18px rgba(9,74,110,.4);
  --ancho: 1120px;

  /* Archivo para montos, fechas y folios: numerales tabulares */
  --datos: Archivo, ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box; }

.plan__num, .cob__monto, .tot__hoy b, .tot__f b, .modal__t { font-variant-numeric: tabular-nums; }

body {
  margin: 0;
  font-family: Raleway, system-ui, sans-serif;
  font-size: 16px;
  /* Raleway en 400 se ve aguada en pantallas normales. 500 es el piso. */
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  color: var(--texto);
  background: #fff;
}

h1, h2, h3 { margin: 0; color: var(--navy); font-weight: 800; letter-spacing: -.02em; }
p { margin: 0; }
button { font: inherit; cursor: pointer; }

:where(a, button, input):focus-visible {
  outline: 3px solid var(--azul);
  outline-offset: 2px;
  border-radius: 3px;
}

/* frase resaltada, como en focuscde.com */
mark {
  padding: 0 .28em;
  background: var(--navy);
  color: #fff;
  border-radius: 3px;
}

.pill {
  display: inline-block;
  padding: 5px 13px;
  border-radius: 999px;
  background: var(--cielo);
  color: var(--navy);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

/* Nota interna de la demo: va al final de todo, en gris, deliberadamente
   fuera del lenguaje visual del checkout para que no se lea como producto. */
.nota-tec {
  padding: 14px 20px 26px;
  color: #b3b9be;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .02em;
  text-align: center;
}
.nota-tec:empty { display: none; }

/* ── marco ───────────────────────────────────────────── */
.top {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 14px 20px;
}

/* El <a> colapsaba a 34px (el alto) y el logo se salía encima del texto de
   al lado. Ancho explícito: el logo es 333×90, o sea 126×34. */
.marca { flex: 0 0 126px; }
.marca img { display: block; width: 126px; height: 34px; }

.top__tag {
  padding-left: 18px;
  border-left: 1px solid var(--linea);
  color: var(--texto);
  font-size: 14.5px;
  font-weight: 600;
}

.top__ayuda { margin-left: auto; font-size: 13.5px; }
.top__ayuda span { color: var(--texto); }
.top__ayuda a { color: var(--azul); font-weight: 700; text-decoration: none; }
.top__ayuda a:hover { text-decoration: underline; }

/* ── pasos ───────────────────────────────────────────── */
.pasos {
  max-width: var(--ancho);
  margin: 0 auto 22px;
  padding: 0 20px;
}

.pasos ol {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pasos li {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  padding-top: 12px;
  border-top: 3px solid var(--linea);
  color: #9aa6b0;
  font-size: 13px;
  font-weight: 700;
  transition: color .3s, border-color .3s;
}

.pasos li b {
  display: grid;
  place-items: center;
  width: 21px; height: 21px;
  border-radius: 50%;
  background: var(--linea);
  color: #fff;
  font-size: 11.5px;
}

.pasos li.done { border-top-color: var(--azul-2); color: var(--navy); }
.pasos li.done b { background: var(--azul); }
.pasos li.on { border-top-color: var(--navy); color: var(--navy); }
.pasos li.on b { background: var(--navy); }

/* ── contenedor ──────────────────────────────────────── */
main { max-width: var(--ancho); margin: 0 auto; padding: 0 20px 44px; }

.paso { display: none; }
.paso.on { display: block; animation: sube .38s cubic-bezier(.2,.7,.3,1) both; }

@keyframes sube { from { opacity: 0; transform: translateY(12px); } }

.intro { margin-bottom: 22px; }
.intro--tight { margin-top: 6px; margin-bottom: 28px; }

.intro h1 {
  margin-top: 12px;
  font-size: clamp(28px, 4.2vw, 40px);
  line-height: 1.08;
  font-weight: 900;
  text-wrap: balance;
}

.intro .sub {
  max-width: 54ch;
  margin-top: 12px;
  font-size: 16.5px;
  font-weight: 500;
  line-height: 1.6;
}

.volver {
  margin-bottom: 12px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--azul);
  font-size: 14px;
  font-weight: 700;
}
.volver::before { content: "← "; }
.volver:hover { color: var(--navy); }

/* ── chips de ciudad ─────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 22px; }

.chip {
  padding: 9px 18px;
  border: 1.5px solid var(--linea);
  border-radius: 999px;
  background: #fff;
  color: var(--tinta);
  font-size: 14px;
  font-weight: 700;
  transition: all .18s;
}

.chip:hover { border-color: var(--azul); color: var(--navy); }

.chip[aria-pressed="true"] {
  border-color: var(--navy);
  background: var(--navy);
  color: #fff;
}

/* ── banner general de la cadena ─────────────────────── */
/* Va arriba de todo, antes de elegir sucursal. Navy con filo dorado para que
   se distinga del banner por sucursal, que es dorado macizo. */
.gral {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
  padding: 15px 22px;
  border-radius: var(--r);
  background: linear-gradient(100deg, var(--navy-2), var(--navy) 62%, #0b5c88);
  color: #fff;
  box-shadow: var(--sombra);
}

.gral__marca {
  flex: none;
  width: 4px;
  align-self: stretch;
  min-height: 40px;
  border-radius: 4px;
  background: linear-gradient(var(--oro-cl), var(--oro));
}

.gral__txt { flex: 1 1 auto; min-width: 0; }

.gral__et {
  color: var(--oro-cl);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.gral__tit { margin-top: 3px; font-size: 18px; font-weight: 900; letter-spacing: -.01em; line-height: 1.2; }

.gral__sub {
  flex: none;
  max-width: 30ch;
  padding-left: 20px;
  border-left: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.82);
  font-size: 13.5px;
  line-height: 1.45;
}

#banner-general:empty { display: none; }

/* ── tarjetas de sucursal ────────────────────────────── */
/* Todas se ven igual de vivas: el color es de la plaza, no del inventario.
   Cuál vende en línea se dice abajo, en la nota, no apagando la tarjeta. */
.rejilla {
  display: grid;
  /* 3 por renglón: con 4 las tarjetas quedaban chiquitas y la foto no lucía */
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

.suc {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  background: rgb(var(--g1, 9 74 110));
  text-align: left;
  box-shadow: var(--sombra);
  transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s;
}

.suc:hover { transform: translateY(-6px); box-shadow: var(--sombra-2); }
.suc:active { transform: translateY(-2px); }

/* Un tono por ciudad, en RGB suelto para poder darle transparencia. */
.g-azul  { --g1: 9 62 110;  --g2: 45 175 232; }  /* Culiacán   */
.g-acero { --g1: 22 42 88;  --g2: 92 138 232; }  /* Culiacán 2 */
.g-mar   { --g1: 8 74 96;   --g2: 34 206 214; }  /* Mazatlán   */
.g-oro   { --g1: 74 56 22;  --g2: 200 168 96; }  /* Guasave    */
.g-cielo { --g1: 12 52 78;  --g2: 96 168 210; }  /* Los Mochis */

.suc__foto {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #0d1b26;
}

/* La foto va tal cual, a color. Lo único encima es negro que sube desde abajo
   y se desvanece: es lo que hace legible el nombre sin teñir el gimnasio. */
.suc__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .55s cubic-bezier(.2,.7,.3,1);
}

.suc:hover .suc__foto img { transform: scale(1.06); }

.suc__foto::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  background: linear-gradient(to top,
    rgba(0,0,0,.96) 0%,
    rgba(0,0,0,.92) 24%,
    rgba(0,0,0,.74) 42%,
    rgba(0,0,0,.42) 58%,
    rgba(0,0,0,.14) 74%,
    transparent 92%);
}

.suc__txt {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  padding: 16px;
  color: #fff;
}

.suc__ciudad {
  display: block;
  color: rgba(255,255,255,.85);
  text-shadow: 0 1px 8px rgba(0,0,0,.7);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.suc__nom {
  display: block;
  margin-top: 2px;
  font-size: clamp(19px, 2.1vw, 24px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -.015em;
  text-shadow: 0 2px 16px rgba(0,0,0,.75);
}

/* el botón delgado: es un span, no cabe un button dentro de otro */
.suc__btn {
  display: block;
  margin-top: 13px;
  padding: 10px 0;
  border: 1.5px solid rgba(255,255,255,.7);
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .09em;
  text-align: center;
  text-transform: uppercase;
  transition: background .2s, border-color .2s, color .2s;
}

.suc:hover .suc__btn { background: #fff; border-color: #fff; color: rgb(var(--g1)); }

/* Etiquetas sobre la foto. Promo = dorado sólido (grita).
   Prime = vidrio oscuro con filo dorado (no grita, presume). */
.tag {
  position: absolute;
  top: 11px; left: 11px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .11em;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: 0 3px 10px rgba(0,0,0,.32);
}

.tag::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.tag--promo {
  background: linear-gradient(140deg, #E3C87C, var(--oro));
  color: #33280A;
}

.tag--prime {
  left: auto; right: 11px;
  background: rgba(8,18,28,.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(216,188,119,.55);
  color: var(--oro-cl);
}

/* nota bajo la rejilla */
.nota-suc {
  max-width: 62ch;
  margin: 24px auto 0;
  padding: 14px 18px;
  border-radius: var(--r-s);
  background: var(--nube);
  color: var(--texto);
  font-size: 14px;
  line-height: 1.55;
  text-align: center;
}
.nota-suc b { color: var(--navy); font-weight: 800; }
.nota-suc:empty { display: none; }

/* ── sucursal sin planes en línea ────────────────────── */
/* "Elige tu plan" encima de "no hay planes" se lee como error. */
.paso.sin-planes .intro--tight { display: none; }

.sinplan {
  max-width: 520px;
  margin: 0 auto;
  padding: 34px 30px;
  border: 1.5px solid var(--linea);
  border-radius: var(--r);
  background: #fff;
  text-align: center;
  box-shadow: var(--sombra);
}

.sinplan__t { color: var(--navy); font-size: 22px; font-weight: 900; line-height: 1.2; }
.sinplan__s { max-width: 40ch; margin: 12px auto 0; font-size: 15px; }

.sinplan__cta {
  display: block;
  margin-top: 22px;
  padding: 16px;
  border-radius: var(--r-s);
  background: #25D366;
  color: #06331a;
  font-size: 16px;
  font-weight: 900;
  text-decoration: none;
  transition: background .2s;
}
.sinplan__cta:hover { background: #1eb757; }

.sinplan__otra {
  margin-top: 12px;
  padding: 12px;
  width: 100%;
  border: 1.5px solid var(--linea);
  border-radius: var(--r-s);
  background: #fff;
  color: var(--navy);
  font-size: 14.5px;
  font-weight: 800;
  transition: border-color .2s;
}
.sinplan__otra:hover { border-color: var(--navy); }

/* ── banner promocional de sucursal ──────────────────── */
.banner {
  display: flex;
  align-items: center;
  gap: 20px;
  overflow: hidden;
  margin-bottom: 16px;
  border-radius: var(--r);
  background: var(--navy);
  color: #fff;
  box-shadow: var(--sombra);
}

.banner--oro { background: linear-gradient(100deg, #8d7433, var(--oro)); }

.banner__foto {
  flex: none;
  width: 190px;
  align-self: stretch;
  object-fit: cover;
  opacity: .82;
  mask-image: linear-gradient(to right, #000 62%, transparent);
  -webkit-mask-image: linear-gradient(to right, #000 62%, transparent);
}

.banner__txt { padding: 18px 22px 18px 0; }

.banner__et {
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .75;
}

.banner__tit { margin-top: 3px; font-size: 22px; font-weight: 900; letter-spacing: -.01em; }
.banner__sub { margin-top: 4px; font-size: 14.5px; opacity: .88; }

/* ── encabezado de sucursal en el paso 2 ─────────────── */
/* Antes era una línea gris debajo del título y se perdía. La persona necesita
   saber en todo momento a qué gimnasio se está inscribiendo. */
.suc-cab { display: flex; align-items: center; gap: 15px; margin-bottom: 30px; }

.suc-cab__foto {
  flex: none;
  width: 76px; height: 60px;
  overflow: hidden;
  border-radius: 12px;
  background: var(--navy-2);
}
.suc-cab__foto img { width: 100%; height: 100%; object-fit: cover; }

.suc-cab__txt { flex: 1 1 auto; min-width: 0; }
.suc-cab__et {
  display: block;
  color: var(--texto);
  font-family: var(--datos);
  font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
}
.suc-cab__nom { display: block; margin-top: 2px; color: var(--navy); font-size: 25px; font-weight: 900; line-height: 1.1; letter-spacing: -.025em; }
.suc-cab__nom em { color: var(--texto); font-size: 17px; font-style: normal; font-weight: 700; letter-spacing: -.01em; }

.suc-cab__cambiar {
  flex: none;
  padding: 9px 16px;
  border: 1.5px solid var(--linea);
  border-radius: 999px;
  background: #fff;
  color: var(--navy);
  font-size: 13.5px; font-weight: 800;
  transition: border-color .18s;
}
.suc-cab__cambiar:hover { border-color: var(--navy); }

/* ── planes · tarjetas tipo comparativa ──────────────── */
/* Los dos planes cuestan lo mismo, así que lo que decide es lo que trae cada
   uno. Por eso la lista es la MISMA en las dos y lo que no incluye va tachado:
   la diferencia se ve sin leer dos veces. */
.planes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 20px;
  align-items: stretch;
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 26px 24px;
  border: 1.5px solid var(--linea);
  border-radius: 20px;
  background: #fff;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}

.plan:hover { border-color: var(--azul-2); box-shadow: var(--sombra-2); transform: translateY(-3px); }

/* el plan de acceso completo se va a azul de marca */
.plan--top {
  border-color: transparent;
  background: linear-gradient(168deg, #0d5c86, #06344c 62%, #042536);
  color: rgba(255,255,255,.86);
  box-shadow: 0 22px 50px -26px rgba(4,37,54,.8);
}
.plan--top:hover { border-color: transparent; box-shadow: 0 28px 60px -26px rgba(4,37,54,.85); }

.plan__nom { color: var(--navy); font-size: 26px; font-weight: 900; letter-spacing: -.025em; }
.plan--top .plan__nom { color: #fff; }

.plan__lema { margin-top: 7px; font-size: 15px; font-weight: 500; line-height: 1.45; }
.plan--top .plan__lema { color: rgba(255,255,255,.74); }

/* precio */
.plan__desde {
  display: none;
  margin-top: 18px;
  color: var(--texto);
  font-family: var(--datos);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.plan--top .plan__desde { color: rgba(255,255,255,.55); }

.plan__precio { display: flex; align-items: baseline; margin-top: 18px; color: var(--navy); }
.plan--top .plan__precio { color: #fff; }
.plan__num { font-family: var(--datos); font-size: 50px; font-weight: 700; line-height: 1; letter-spacing: -.045em; }
.plan__cent { font-family: var(--datos); font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.plan__mes { margin-left: 9px; color: var(--texto); font-size: 15px; font-weight: 700; }
.plan--top .plan__mes { color: rgba(255,255,255,.64); }

/* inscripción, con el único descuento que sí está confirmado en EVO */
.plan__ins {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px;
  margin-top: 11px;
  padding: 10px 14px;
  border-radius: 11px;
  background: var(--nube);
  font-size: 14px;
}
.plan--top .plan__ins { background: rgba(255,255,255,.08); color: rgba(255,255,255,.8); }
.plan__ins__q { font-weight: 700; color: var(--tinta); }
.plan--top .plan__ins__q { color: #fff; }
.plan__ins del { color: #98a3ab; font-family: var(--datos); }
.plan--top .plan__ins del { color: rgba(255,255,255,.45); }
.plan__ins__paga { font-family: var(--datos); font-weight: 700; color: var(--navy); }
.plan--top .plan__ins__paga { color: #fff; }

.plan__off {
  margin-left: auto;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--cielo);
  color: var(--navy);
  font-family: var(--datos);
  font-size: 12px;
  font-weight: 700;
}
.plan--top .plan__off { background: var(--oro-cl); color: #33280A; }

.plan__perm { margin-top: 14px; font-size: 13.5px; }
.plan__perm b { color: var(--navy); font-weight: 800; }
.plan--top .plan__perm { color: rgba(255,255,255,.72); }
.plan--top .plan__perm b { color: #fff; }

/* botón: dorado profundo con letra blanca, como lo pidió Fer.
   El dorado claro con blanco daba 2.5:1; este tono llega a 3.1:1, que es lo
   que pide AA para texto grande en negrita — de ahí el 18px/900. */
.plan__cta {
  margin-top: 18px;
  padding: 16px;
  width: 100%;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #B08D3E, #8E6F28);
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .01em;
  box-shadow: 0 10px 24px -12px rgba(142,111,40,.85);
  transition: filter .2s, transform .12s, box-shadow .2s;
}
.plan__cta:hover { filter: brightness(1.09); box-shadow: 0 14px 30px -12px rgba(142,111,40,.95); }
.plan__cta:active { transform: translateY(1px); }

.plan__lista { margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--linea); list-style: none; display: grid; gap: 11px; }
.plan--top .plan__lista { border-color: rgba(255,255,255,.16); }

.plan__f { display: flex; align-items: flex-start; gap: 11px; font-size: 15px; line-height: 1.35; }
.plan__f b { font-weight: 700; color: var(--tinta); }
.plan--top .plan__f b { color: #fff; }

.plan__f--no b { color: #9aa6b0; font-weight: 600; text-decoration: line-through; }
.plan--top .plan__f--no b { color: rgba(255,255,255,.4); }

.plan__ico { flex: none; width: 21px; height: 21px; margin-top: 1px; }
.plan__ico circle { fill: none; stroke-width: 2; }
.plan__f--si .plan__ico circle { stroke: var(--navy); }
.plan__f--si .plan__ico path { stroke: var(--navy); stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.plan--top .plan__f--si .plan__ico circle { stroke: var(--oro-cl); }
.plan--top .plan__f--si .plan__ico path { stroke: var(--oro-cl); }
.plan__f--no .plan__ico circle, .plan__f--no .plan__ico path { stroke: #b6bfc7; }
.plan--top .plan__f--no .plan__ico circle, .plan--top .plan__f--no .plan__ico path { stroke: rgba(255,255,255,.32); }

/* ── paso 3 · tu gimnasio, en bloques ─────────────────── */
/* La foto va limpia arriba, con el nombre. Los beneficios y el desglose van
   debajo, en bloques aparte y sobre fondo claro: encimar todo en la foto se
   veía bonito pero el desglose quedaba peleando con el edificio. */
.cierre {
  display: grid;
  grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr);
  overflow: hidden;
  border: 1.5px solid var(--linea);
  border-radius: 20px;
  box-shadow: var(--sombra);
}

.vista { background: var(--nube); }

.vista__hero { position: relative; margin: 0; width: 100%; height: 200px; overflow: hidden; background: var(--navy-2); }
.vista__hero img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vista__hero figcaption {
  position: absolute; left: 14px; right: 14px; bottom: 14px;
  padding: 13px 17px 15px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 14px;
  /* Cristal, no cortina. El degradado negro tapaba media fotografía con tal de
     poder leer el nombre; esta placa sólo ocupa lo que mide el texto y deja ver
     la sucursal completa. El desenfoque queda fuera a propósito. */
  background: rgba(12,26,36,.58);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.vista__et { color: var(--oro-cl); font-size: 11.5px; }
.vista__t {
  margin-top: 2px; color: #fff;
  font-size: clamp(23px, 2.4vw, 28px); font-weight: 900;
  line-height: 1.05; letter-spacing: -.025em;
}

.bloque { padding: 18px 24px; border-top: 1px solid rgba(9,74,110,.1); }
.bloque__t { color: var(--navy); font-size: 16px; font-weight: 900; letter-spacing: -.01em; }
.bloque__s { margin-top: 1px; font-size: 12.5px; font-weight: 500; }
.bloque__s b { color: var(--navy); font-weight: 800; }

.vent { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.vent li { display: flex; align-items: flex-start; gap: 10px; color: var(--tinta); font-size: 14px; line-height: 1.35; font-weight: 600; }
.vent svg { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.vent circle { fill: none; stroke: var(--navy); stroke-width: 2; }
.vent path { fill: none; stroke: var(--navy); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* desglose sobre fondo claro: los montos ya no pelean con la foto */
.tot { margin-top: 14px; border: 1px solid var(--linea); border-radius: 14px; background: #fff; overflow: hidden; }
.tot__f { display: flex; justify-content: space-between; gap: 12px; padding: 11px 16px; font-size: 14.5px; }
.tot__f + .tot__f { border-top: 1px solid var(--linea); }
.tot__f span { color: var(--texto); font-weight: 600; }
.tot__f b { font-family: var(--datos); font-weight: 700; color: var(--tinta); white-space: nowrap; }
.tot__f del { color: #98a3ab; margin-right: 7px; font-weight: 500; }
.tot__off { color: var(--oro-os); font-family: var(--datos); font-size: 13px; font-weight: 700; }

.tot__hoy {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 18px 18px;
  background: var(--navy);
  border-top: 1px solid var(--linea);
}
.tot__hoy span {
  color: var(--oro-cl);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.005em;
  text-transform: none;
}
.tot__hoy b { font-family: var(--datos); color: #fff; font-size: 34px; font-weight: 700; letter-spacing: -.035em; line-height: 1; }

.tot__luego { padding: 11px 16px; background: var(--humo); color: var(--texto); font-size: 12.5px; line-height: 1.5; }

/* renglón del plan elegido, debajo de la foto */
.elegido {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 24px;
  background: var(--navy);
  color: #fff;
}
.elegido__et {
  flex: none;
  color: var(--oro-cl);
  font-family: var(--datos);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
}
.elegido__nom { flex: 1 1 auto; font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.elegido__cambiar {
  flex: none;
  padding: 6px 13px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px;
  background: none;
  color: #fff;
  font-size: 12.5px; font-weight: 700;
  transition: background .18s;
}
.elegido__cambiar:hover { background: rgba(255,255,255,.14); }

.vista__ciu { margin-top: 1px; color: rgba(255,255,255,.9); font-size: 13.5px; font-weight: 600; }

/* ── paso 3 · formulario ──────────────────────────────── */
.lado { display: flex; align-items: center; padding: 28px; background: #fff; }
.lado__in { width: 100%; max-width: 430px; margin: 0 auto; }
.lado__t { margin-top: 6px; font-size: clamp(25px, 2.8vw, 30px); font-weight: 900; line-height: 1.1; }
.lado__s { margin-top: 8px; font-size: 15px; }

.et--gris { color: var(--texto); font-family: var(--datos); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }

/* Calendario de cobros. Pedido por Juan en la junta del 18 de agosto: quiere
   ver en qué mes cae la anualidad, no enterarse cuando llegue el cargo. */
.cal { margin-top: 14px; }
.cal__t { color: var(--navy); font-size: 13.5px; font-weight: 800; letter-spacing: -.01em; }
.cal__l { margin-top: 9px; border: 1px solid var(--linea); border-radius: 14px;
          background: #fff; overflow: hidden; list-style: none; }
.cal__f { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px;
          align-items: baseline; padding: 10px 16px; }
.cal__f + .cal__f { border-top: 1px solid var(--linea); }
.cal__d { grid-column: 1; font-family: var(--datos); color: var(--tinta); font-size: 13.5px; font-weight: 700; }
.cal__q { grid-column: 1; color: var(--texto); font-size: 12.5px; font-weight: 500; }
.cal__m { grid-column: 2; grid-row: 1 / span 2; align-self: center; text-align: right;
          font-family: var(--datos); color: var(--tinta); font-size: 16px;
          font-weight: 700; white-space: nowrap; }
.cal__f--ojo { background: #FBF6E9; }
.cal__f--ojo .cal__d, .cal__f--ojo .cal__m { color: var(--oro-os); }
.cal__f--ojo .cal__q { color: #7a6329; font-weight: 600; }
.cal__pie { margin-top: 8px; color: var(--texto); font-size: 12px;
            font-weight: 500; line-height: 1.5; }

/* El atributo hidden lo aplica el navegador con la prioridad más baja que
   existe, así que cualquier `display:flex` de una clase se lo pasa por alto:
   los botones del tramo seguían visibles. Aquí se le devuelve la suya. */
.forma [hidden] { display: none; }

/* ── Paso 3 por partes ─────────────────────────────────────────────────── */
/* Barrita de avance de los tres tramos. Tres rayas, no tres números: lo que
   importa es cuánto falta, no en cuál vas. */
.pista { display: flex; gap: 6px; margin-top: 16px; }
.pista i { flex: 1; height: 4px; border-radius: 4px; background: var(--linea); transition: background .25s; }
.pista i.ya { background: rgba(9,74,110,.35); }
.pista i.on { background: var(--navy); }

.tramo { display: none; }
.tramo.on { display: block; animation: entra .28s ease both; }
@keyframes entra {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}
/* Quien pidió menos movimiento no tiene por qué aguantarlo. */
@media (prefers-reduced-motion: reduce) {
  .tramo.on { animation: none; }
}

.dos--calle { grid-template-columns: 2.4fr 1fr; }

.acciones { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.acciones .cta { flex: 1; }

.atras {
  flex: none;
  padding: 13px 18px;
  border: 1.5px solid var(--linea);
  border-radius: 12px;
  background: #fff;
  color: var(--texto);
  font: inherit;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .16s, color .16s;
}
.atras:hover { border-color: var(--navy); color: var(--navy); }

/* ── El resumen ───────────────────────────────────────────────────────── */
.res { margin-bottom: 18px; }
.res__b { padding: 15px 17px; border: 1px solid var(--linea); border-radius: 14px; background: #fff; }
.res__b + .res__b { margin-top: 10px; }
.res__cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.res__t { color: var(--navy); font-size: 14px; font-weight: 800; letter-spacing: -.01em; }
.res__ed {
  border: 0; background: none; padding: 0;
  color: var(--azul); font: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.res__ed:hover { color: var(--navy); }

.res__l { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; margin-top: 11px; }
.res__l dt {
  color: var(--tenue); font-family: var(--datos);
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  align-self: center;
}
.res__l dd { color: var(--tinta); font-size: 14px; font-weight: 600; word-break: break-word; }
.res__falta { color: #b08d3e; font-weight: 600; font-style: italic; }

.res__b--plan { background: var(--cielo); border-color: rgba(9,74,110,.16); }
.res__plan { margin-top: 9px; color: var(--navy); font-size: 17px; font-weight: 900; letter-spacing: -.015em; }
.res__plan span { display: block; color: var(--texto); font-size: 13px; font-weight: 600; letter-spacing: 0; }
.res__hoy {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-top: 11px; padding-top: 11px; border-top: 1px solid rgba(9,74,110,.14);
}
.res__hoy span { color: var(--texto); font-size: 13.5px; font-weight: 700; }
.res__hoy b { font-family: var(--datos); color: var(--navy); font-size: 24px; font-weight: 700; letter-spacing: -.03em; }

.forma { margin-top: 20px; }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.campo { margin-bottom: 14px; }

.campo label {
  display: block;
  margin-bottom: 6px;
  color: var(--navy);
  font-family: var(--datos);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.campo input,
.campo select {
  width: 100%;
  padding: 13px 15px;
  border: 1.5px solid var(--linea);
  border-radius: 12px;
  background: var(--humo);
  color: var(--tinta);
  font: inherit;
  font-size: 16px;
  transition: border-color .16s, background .16s, box-shadow .16s;
}
.campo input::placeholder { color: #8b959d; opacity: 1; }
.campo input:focus,
.campo select:focus { border-color: var(--navy); background: #fff; box-shadow: 0 0 0 4px rgba(9,74,110,.09); outline: none; }
.campo input[aria-invalid="true"],
.campo select[aria-invalid="true"] { border-color: #c0392b; background: #fdf3f2; }

/* La flechita del select la pinta cada navegador a su manera; se apaga y se
   dibuja una igual a la del resto del sistema. */
.campo select {
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23094A6E' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  cursor: pointer;
}
.campo select:invalid, .campo select option[value=""] { color: #8b959d; }

/* Separador de grupos dentro del formulario. */
.grupo {
  margin: 4px 0 12px;
  padding-top: 15px;
  border-top: 1px solid var(--linea);
  color: var(--navy);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.01em;
}

.ayuda { margin-top: 6px; font-size: 12.5px; font-weight: 500; }

.error {
  margin-bottom: 14px;
  padding: 13px 15px;
  border-radius: 12px;
  background: #fdf3f2;
  color: #96271a;
  font-size: 14.5px;
  font-weight: 600;
}

.acuerdo { display: flex; gap: 11px; align-items: flex-start; margin: 2px 0 18px; font-size: 13px; line-height: 1.5; }
.acuerdo input { flex: none; width: 19px; height: 19px; margin-top: 2px; accent-color: var(--navy); }
.acuerdo b { color: var(--navy); font-weight: 800; }

/* el botón: candado y dorado profundo con letra blanca */
.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 18px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #B08D3E, #8E6F28);
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  box-shadow: 0 10px 24px -12px rgba(142,111,40,.85);
  transition: filter .2s, box-shadow .2s, transform .12s;
}
.cta:hover:not(:disabled) { filter: brightness(1.09); box-shadow: 0 14px 30px -12px rgba(142,111,40,.95); }
.cta:active:not(:disabled) { transform: translateY(1px); }
.cta:disabled { opacity: .65; cursor: progress; }
.cta__candado { display: grid; place-items: center; }

/* El dorado es del botón que lleva al cobro y de ninguno más. Los "Continuar"
   de los tramos van en azul para que no compitan con él. */
.cta--sigue {
  background: linear-gradient(180deg, #0C5C86, var(--navy));
  box-shadow: 0 10px 24px -12px rgba(9,74,110,.85);
  font-size: 17px;
}
.cta--sigue:hover:not(:disabled) { box-shadow: 0 14px 30px -12px rgba(9,74,110,.95); }


.sello { display: flex; align-items: center; gap: 13px; margin-top: 14px; }
.sello__marcas { flex: none; display: flex; gap: 6px; }
.tarj { width: 34px; height: 21px; }
.tarj rect { fill: #fff; stroke: var(--linea); stroke-width: 1; }
.tarj text { font-family: var(--datos); font-size: 8.5px; font-weight: 700; letter-spacing: .04em; }
.tarj--visa rect { fill: #1A1F71; stroke: none; }
.tarj--visa text { fill: #fff; }
.tarj--mc circle:first-of-type { fill: #EB001B; }
.tarj--mc circle:last-of-type { fill: #F79E1B; mix-blend-mode: multiply; }
.tarj--amex rect { fill: #006FCF; stroke: none; }
.tarj--amex text { fill: #fff; font-size: 7.5px; }
.sello p { font-size: 12.5px; font-weight: 500; line-height: 1.5; }
.sello b { color: var(--navy); font-weight: 800; }
.sello a { color: var(--azul); font-weight: 700; }

/* ── antesala del pago ───────────────────────────────── */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; }
.modal[hidden] { display: none; }

.modal__fondo { position: absolute; inset: 0; background: rgba(4,24,36,.72); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); animation: entra .25s ease both; }

.modal__caja {
  position: relative;
  width: 100%; max-width: 420px;
  padding: 38px 34px 30px;
  border-radius: 24px;
  background: linear-gradient(170deg, #0b3d5a, #04222f);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.8);
  color: #fff;
  text-align: center;
  animation: sube-modal .38s cubic-bezier(.2,.8,.3,1) both;
}

@keyframes entra { from { opacity: 0 } }
@keyframes sube-modal { from { opacity: 0; transform: translateY(18px) scale(.97) } }

.modal__logo { position: relative; display: grid; place-items: center; width: 92px; height: 92px; margin: 0 auto 22px; }
.modal__logo img { width: 52px; height: auto; }

.modal__aro {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.12);
  border-top-color: var(--oro-cl);
  animation: gira 1s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg) } }

.modal.listo .modal__aro { border-color: var(--oro-cl); animation: none; }

.modal__et { color: var(--oro-cl); font-family: var(--datos); font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.modal__t { margin-top: 8px; color: #fff; font-size: 24px; font-weight: 900; line-height: 1.2; letter-spacing: -.02em; min-height: 2.4em; display: grid; align-items: center; }
.modal__s { margin-top: 6px; color: rgba(255,255,255,.6); font-size: 13.5px; }

.modal__barra { margin-top: 22px; height: 5px; border-radius: 5px; background: rgba(255,255,255,.12); overflow: hidden; }
.modal__barra i { display: block; height: 100%; width: 0; border-radius: 5px; background: linear-gradient(90deg, var(--oro-os), var(--oro-cl)); transition: width .5s cubic-bezier(.3,.8,.4,1); }

.modal__pie { margin-top: 20px; }
.modal__pie:empty { display: none; }
.modal__ir {
  display: block;
  padding: 17px;
  border-radius: 999px;
  background: linear-gradient(180deg, #C6A04A, #9C7C30);
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  text-decoration: none;
}
.modal__ir:hover { filter: brightness(1.08); }
.modal__nota { margin-top: 11px; color: rgba(255,255,255,.5); font-size: 12.5px; line-height: 1.5; }
.modal__cerrar { margin-top: 10px; padding: 0; border: 0; background: none; color: rgba(255,255,255,.55); font-size: 13px; font-weight: 600; text-decoration: underline; }


/* ── paso 4 · el tótem a pantalla completa ───────────── */
/* En producción la persona ya salió de nuestro sitio. Aquí se reproduce eso:
   se esconde el encabezado, los pasos y el pie, y el tótem ocupa todo. */
body.en-pago .top,
body.en-pago .pasos,
body.en-pago .pie,
body.en-pago .nota-tec { display: none; }

body.en-pago main { max-width: none; padding: 0; }
body.en-pago .paso.on { animation: none; }

.entrega { max-width: none; }

.salida {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 22px 20px 40px;
  color: var(--texto);
  font-size: 13.5px;
  line-height: 1.55;
}
.salida p { flex: 1 1 380px; }
.salida b { color: var(--navy); font-weight: 800; }

.salida__volver {
  flex: none;
  padding: 12px 20px;
  border: 1.5px solid var(--linea);
  border-radius: 999px;
  background: #fff;
  color: var(--navy);
  font-size: 14px;
  font-weight: 800;
  transition: border-color .18s;
}
.salida__volver:hover { border-color: var(--navy); }

/* ── el tótem de EVO, incrustado ─────────────────────── */
/* Captura fija: los carritos de EVO caducan, así que un iframe o un link vivo
   se rompe a los pocos minutos. Para enseñárselo a Juan, la imagen aguanta. */
.totem { max-width: none; margin: 0; border-radius: 0; overflow: hidden; border: 0; }

.totem__barra {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  background: #dfe4ea;
  border-bottom: 1px solid #c9d1d9;
}
.totem__luces { display: flex; gap: 6px; }
.totem__luces i { width: 10px; height: 10px; border-radius: 50%; background: #c8d0d8; }
.totem__url {
  flex: 1 1 auto; min-width: 0; max-width: 620px;
  padding: 7px 14px;
  border-radius: 999px;
  background: #fff;
  color: var(--texto);
  font-family: var(--datos); font-size: 11.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.totem__url b { color: var(--tinta); font-weight: 600; }
/* Solo la captura, hijo directo. Sin el `>` esta regla pisaba al logo de la
   reconstrucción y al atributo hidden. */
.totem > img { display: block; width: 100%; height: auto; }
.totem > img[hidden] { display: none; }

/* Reconstrucción del tótem de EVO, calcada de la pantalla real.
   Es su lenguaje visual, no el nuestro: Roboto, azul #2196F3, campos con
   subrayado. Se ve fuera de lugar a propósito — ese salto es justo lo que
   hay que enseñarle a Juan. */
.tv { min-height: calc(100vh - 44px); font-family: Roboto, "Helvetica Neue", Arial, sans-serif; background: #fff; color: #2b2b2b; }

.tv__top { display: flex; align-items: center; gap: 16px; padding: 14px 26px; border-bottom: 1px solid #e6e6e6; }
.tv__top img { height: 30px; }
.tv__top span { color: #3b3b3b; font-size: 19px; }

.tv__cuerpo { display: grid; grid-template-columns: 1fr 400px; min-height: calc(100vh - 104px); }

.tv__izq { padding: 28px 40px 48px; }
.tv__quien { color: #555; font-size: 13px; }
.tv__t { margin-top: 14px; color: #2b2b2b; font-family: inherit; font-size: 20px; font-weight: 500; letter-spacing: 0; }

.tv__medio {
  display: inline-flex; flex-direction: column; align-items: center; gap: 6px;
  margin-top: 16px; padding: 14px 22px;
  border: 2px solid #2196F3; border-radius: 6px; background: #E3F2FD;
  color: #2b2b2b; font-size: 12.5px;
}

.tv__preg { display: flex; align-items: center; gap: 8px; margin-top: 22px; font-size: 13px; font-weight: 700; color: #2b2b2b; }
.tv__preg .tv__radio { width: 15px; height: 15px; border: 2px solid #2196F3; border-radius: 50%; }
.tv__preg .tv__radio--on { background: radial-gradient(#2196F3 42%, #fff 46%); }

.tv__campos { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 22px; margin-top: 28px; max-width: 720px; }
.tv__campos label { display: block; color: #6b6b6b; font-size: 12px; }
.tv__campos i { display: block; margin-top: 26px; border-bottom: 1px solid #b9b9b9; }

.tv__der { display: flex; flex-direction: column; padding: 28px 28px 0; border-left: 1px solid #e6e6e6; background: #fff; }
.tv__plan { color: #2b2b2b; font-size: 17px; font-weight: 700; line-height: 1.3; }
.tv__dur { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: 12.5px; color: #555; }
.tv__dur a { color: #555; }

.tv__cupon { display: flex; align-items: flex-end; gap: 12px; margin-top: 18px; }
.tv__cupon span { flex: 1 1 auto; padding-bottom: 6px; border-bottom: 1px solid #b9b9b9; color: #8a8a8a; font-size: 13px; }
.tv__cupon button { padding: 9px 16px; border: 0; border-radius: 4px; background: #2196F3; color: #fff; font-family: inherit; font-size: 12px; font-weight: 500; }

.tv__caja { margin-top: 18px; border: 1px solid #e6e6e6; border-radius: 4px; }
.tv__caja p { display: flex; justify-content: space-between; gap: 12px; padding: 11px 14px; font-size: 13px; }
.tv__caja p + p { border-top: 1px solid #f0f0f0; }
.tv__caja b { font-weight: 500; }
.tv__azul { color: #2196F3; font-weight: 700; }
.tv__tot { border-top: 1px solid #e6e6e6 !important; font-weight: 700; }
.tv__tot b { font-weight: 700; }

.tv__lab { margin-top: 16px; font-size: 12.5px; font-weight: 700; color: #2b2b2b; }
.tv__sel { padding-bottom: 7px; border-bottom: 1px solid #b9b9b9; font-size: 13px; color: #3b3b3b; }
.tv__det { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12.5px; color: #3b3b3b; }

.tv__final { margin: auto -28px 0; padding: 16px 24px 22px; border-top: 1px solid #e6e6e6; background: #fafafa; }
.tv__final p { display: flex; align-items: baseline; gap: 6px; font-size: 21px; }
.tv__final p small { font-size: 11px; color: #6b6b6b; }
.tv__final p span { margin-left: auto; font-size: 23px; font-weight: 500; }
.tv__final button { width: 100%; margin-top: 12px; padding: 13px; border: 0; border-radius: 4px; background: #2196F3; color: #fff; font-family: inherit; font-size: 14px; font-weight: 500; letter-spacing: .04em; }

@media (max-width: 860px) {
  .tv__cuerpo { grid-template-columns: 1fr; }
  .tv__der { border-left: 0; border-top: 1px solid #e6e6e6; }
  .tv__campos { grid-template-columns: 1fr; gap: 20px; }
}

/* ── vacíos ──────────────────────────────────────────── */
.vacio {
  padding: 40px;
  border: 2px dashed var(--linea);
  border-radius: var(--r);
  color: var(--texto);
  font-size: 16px;
  text-align: center;
}
.vacio b { color: var(--navy); }

/* ── pie ─────────────────────────────────────────────── */
.pie {
  padding: 20px;
  border-top: 1px solid var(--linea);
  background: var(--humo);
  text-align: center;
}
.pie__logo { display: inline-block; width: 74px; height: 20px; opacity: .45; }
.pie p { margin-top: 7px; color: var(--texto); font-size: 12.5px; }

/* ── responsive ──────────────────────────────────────── */
@media (max-width: 980px) {
  /* el split se apila: primero el gimnasio, luego la captura */
  .cierre { grid-template-columns: 1fr; }
  .vista { min-height: 0; }
  .vista__in { padding: 26px 22px 28px; }
  .lado { padding: 26px 22px 30px; }
}

@media (max-width: 640px) {
  /* dos por renglón: se alcanzan a ver seis sucursales de un scroll.
     En 162px de ancho, 4/3 deja la tarjeta demasiado baja para el texto,
     así que en celular se cuadra. */
  .rejilla { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .suc { aspect-ratio: 1 / 1; border-radius: 15px; }
  .suc__txt { padding: 12px 11px; }
  .suc__ciudad { font-size: 9.5px; letter-spacing: .1em; }
  .suc__nom { font-size: 16px; }
  .suc__btn { margin-top: 10px; padding: 8px 0; font-size: 10.5px; letter-spacing: .06em; }
  .tag { top: 9px; left: 9px; padding: 3px 8px; font-size: 9px; }
  .tag--prime { left: auto; right: 9px; }
  .nota-suc { font-size: 13.5px; }

  /* en celular el banner se apila; hay que apretarlo o se come media pantalla
     antes de que aparezca la primera sucursal */
  .gral { flex-direction: column; align-items: flex-start; gap: 9px; padding: 14px 16px; }
  .gral__marca { width: 30px; height: 3px; min-height: 0; align-self: auto; }
  .gral__et { font-size: 9.5px; letter-spacing: .13em; }
  .gral__tit { font-size: 16px; }
  .gral__sub {
    max-width: none; padding: 9px 0 0; border-left: 0;
    border-top: 1px solid rgba(255,255,255,.18);
    font-size: 12.5px; line-height: 1.4;
  }

  .top { flex-wrap: wrap; gap: 12px; }
  .top__tag { padding-left: 0; border-left: 0; }
  .top__ayuda { margin-left: 0; }
  .pasos li span { display: none; }

  .banner { flex-direction: column; align-items: stretch; }
  .banner__foto {
    width: 100%; height: 150px;
    mask-image: linear-gradient(to bottom, #000 62%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent);
  }
  .banner__txt { padding: 16px 18px 20px; }

  .plan { padding: 26px 22px 24px; }
  .plan--top { margin-top: 18px; }
  .plan__num { font-size: 42px; }
  .cobros-caja { padding: 22px 20px; }

  .dos { grid-template-columns: 1fr; }
  .dos--corto { grid-template-columns: 1.5fr 1fr; }
  .tot__hoy b { font-size: 27px; }

  .modal__caja { padding: 32px 24px 26px; }
  .modal__t { font-size: 21px; }

  .entrega__caja { padding: 26px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}