/* Loyca Hosting — planes de Minecraft. Estética de referencia del usuario:
   fondo casi negro, tarjetas oscuras con borde sutil, acento dorado/ámbar
   para precios y botones, un plan "Popular" destacado con borde dorado.
   Sitio propio, separado de loyca.ar (son productos distintos) — pensado
   para vivir en hosting.loyca.ar. */

:root {
  --bg: #0c0d10;
  --surface: #16181d;
  --surface-border: #26282f;
  --text: #f5f6f7;
  --text-muted: #9a9da5;
  --amber: #f2b134;
  --amber-dark: #d99a1f;
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

/* Sin esto, cualquier elemento oculto con el atributo `hidden` (ver
   checkout.html) que además tenga una clase con su propio `display` (ej.
   display:flex) vuelve a mostrarse — la regla [hidden] del navegador y una
   clase de acá empatan en especificidad, y gana la de acá por ser CSS de
   autor. Pasó con la línea del cupón en el checkout (se veía "-$0" sin
   haber aplicado ningún cupón) — !important fuerza que "hidden" gane
   siempre, sea cual sea la clase. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

a { color: inherit; }

/* ===================== BANNER "EN CONSTRUCCIÓN" ===================== */
/* Cinta de "zona de obra": rayas diagonales ámbar/negro en movimiento de
   fondo, con el texto en una píldora oscura arriba (si el texto fuera
   directo sobre las rayas, se leería pésimo). Reusable — ver
   /home/mora/pages/_shared/under-construction-banner/. */

.construccion-banner {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 1rem;
  background-image: repeating-linear-gradient(
    -45deg,
    var(--amber) 0px,
    var(--amber) 26px,
    #14110a 26px,
    #14110a 52px
  );
  background-size: 74px 74px;
  animation: construccionRayas 3.2s linear infinite;
}

@keyframes construccionRayas {
  from { background-position: 0 0; }
  to { background-position: -74px 0; }
}

.construccion-banner__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: #14110a;
  color: var(--amber);
  font-weight: 800;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  padding: 0.55rem 1.4rem;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  white-space: normal;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .construccion-banner { animation: none; }
}

@media (max-width: 560px) {
  .construccion-banner__pill { font-size: 0.78rem; padding: 0.5rem 1rem; }
}

/* ===================== HEADER ===================== */

.header {
  border-bottom: 1px solid var(--surface-border);
}

.header__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header__logo {
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--text);
}

.header__logo span { color: var(--amber); }

.header__cta {
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: none;
  color: var(--text);
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  padding: 0.55rem 1.1rem;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.header__cta:hover { border-color: var(--amber); color: var(--amber); }

.header__cta--solid {
  background: var(--amber);
  color: #14110a;
  border-color: var(--amber);
}
.header__cta--solid:hover { background: var(--amber-dark); border-color: var(--amber-dark); color: #14110a; }

.header__nav {
  display: flex;
  gap: 1.75rem;
}

.header__nav a {
  text-decoration: none;
  color: var(--text-muted);
  font-weight: 700;
  font-size: 0.9rem;
  transition: color 0.2s ease;
}

.header__nav a:hover { color: var(--text); }

/* --- Dropdown "Juegos" del nav (preview + link al catálogo completo) --- */
.navdrop { position: relative; }

.navdrop__trigger {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font-family: inherit;
  color: var(--text-muted);
  font-weight: 700;
  font-size: 0.9rem;
  transition: color 0.2s ease;
}
.navdrop__trigger:hover { color: var(--text); }
.navdrop.is-open .navdrop__trigger { color: var(--text); }

.navdrop__chevron { width: 14px; height: 14px; transition: transform 0.2s ease; }
.navdrop:hover .navdrop__chevron,
.navdrop.is-open .navdrop__chevron { transform: rotate(180deg); }

.navdrop__panel {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  width: 300px;
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: 14px;
  padding: 0.6rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 50;
}
.navdrop:hover .navdrop__panel,
.navdrop:focus-within .navdrop__panel,
.navdrop.is-open .navdrop__panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.navdrop__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.6rem;
  border-radius: 10px;
  text-decoration: none;
  color: var(--text);
  transition: background-color 0.15s ease;
}
.navdrop__item:hover { background: rgba(255, 255, 255, 0.05); }

.navdrop__icono { width: 38px; height: 38px; border-radius: 9px; overflow: hidden; flex-shrink: 0; }
.navdrop__icono img { width: 100%; height: 100%; object-fit: cover; display: block; }

.navdrop__info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.navdrop__nombre { font-weight: 800; font-size: 0.92rem; }
.navdrop__precio { font-size: 0.78rem; color: var(--text-muted); }
.navdrop__precio strong { color: var(--text); }

.navdrop__badge {
  background: var(--amber);
  color: #14110a;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  flex-shrink: 0;
}

.navdrop__footer {
  display: block;
  text-align: center;
  margin-top: 0.4rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--surface-border);
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.85rem;
  transition: color 0.2s ease;
}
.navdrop__footer:hover { color: var(--amber); }

/* ===================== HERO ===================== */

.hero {
  max-width: 760px;
  margin: 0 auto;
  padding: 5.5rem 1.5rem 3.5rem;
  text-align: center;
}

.hero__kicker {
  display: block;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 1.1rem;
}

.hero__titulo {
  font-size: 2.75rem;
  line-height: 1.15;
  font-weight: 800;
  margin: 0 0 1.25rem;
  letter-spacing: -0.01em;
}

.hero__texto {
  color: var(--text-muted);
  font-size: 1.05rem;
  margin: 0 auto 2.25rem;
  max-width: 520px;
}

.hero__acciones {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.btn {
  display: inline-block;
  text-decoration: none;
  font-weight: 800;
  font-size: 0.95rem;
  border-radius: 8px;
  padding: 0.85rem 1.75rem;
}

.btn--primary { background: var(--amber); color: #14110a; transition: background 0.2s ease; }
.btn--primary:hover { background: var(--amber-dark); }

.btn--ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--surface-border);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.btn--ghost:hover { border-color: var(--amber); color: var(--amber); }

/* ===================== FEATURES ===================== */

.features {
  border-top: 1px solid var(--surface-border);
  border-bottom: 1px solid var(--surface-border);
}

.features__grid {
  max-width: 1180px;
  margin: 0 auto;
  padding: 2.75rem 1.5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.feature__num {
  display: block;
  font-weight: 800;
  color: var(--surface-border);
  font-size: 1.4rem;
  margin-bottom: 0.4rem;
}

.feature h3 {
  margin: 0 0 0.35rem;
  font-size: 1.02rem;
}

.feature p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.92rem;
}

/* ===================== DESTACADOS (home) ===================== */

.destacados__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 4.5rem 1.5rem 5.5rem;
}

.destacados__titulo {
  font-size: 1.9rem;
  font-weight: 800;
  margin: 0 0 2.5rem;
}

.destacados__grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 1.25rem;
  align-items: start;
}

/* --- Panel izquierdo: cupón + mini lista de planes --- */

.promo-panel {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: 14px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

/* #promoPanelBody se reemplaza por JS según el juego activo del carrusel
   (ver script al final de la página) — Minecraft muestra sus mini-planes
   reales, el resto un aviso de "todavía no hay planes". El crossfade evita
   que el contenido salte de golpe al cambiar de juego. */
#promoPanelBody {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
#promoPanelBody.promo-panel__body--saliendo {
  opacity: 0;
  transform: translateY(4px);
}

.promo-panel__proximamente {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0.5rem 0.25rem 1rem;
  text-align: center;
}
.promo-panel__proximamente-texto {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.55;
}
.promo-panel__proximamente-texto strong { color: var(--text); }

.cupon-banner {
  background: rgba(242, 177, 52, 0.1);
  border: 1px dashed var(--amber);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  text-align: center;
  font-weight: 700;
  font-size: 0.92rem;
}

.cupon-banner strong { color: var(--amber); letter-spacing: 0.03em; }

.mini-planes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }

.mini-plan {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid var(--surface-border);
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
}

.mini-plan__cubo { width: 34px; height: 34px; flex-shrink: 0; }

.mini-plan__info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.mini-plan__nombre { font-weight: 800; font-size: 0.92rem; }
.mini-plan__ram { font-size: 0.75rem; color: var(--text-muted); }

.mini-plan__precio { text-align: right; }

.mini-plan__fila-arriba { display: flex; align-items: center; justify-content: flex-end; gap: 0.4rem; }
.mini-plan__original { font-size: 0.72rem; color: var(--text-muted); text-decoration: line-through; }

.mini-plan__badge {
  background: #e53946;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
}

.mini-plan__fila-abajo { font-weight: 800; font-size: 1rem; }
.mini-plan__fila-abajo small { font-weight: 500; font-size: 0.72rem; color: var(--text-muted); }

.promo-panel__ver-todos { text-align: center; margin-top: 0.25rem; }

.carousel__ver-todos {
  display: block;
  width: fit-content;
  margin: 1.25rem auto 0;
  padding: 0.6rem 1.4rem;
  font-size: 0.85rem;
}

/* --- Panel derecho: carrusel de juegos --- */

.carousel {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: 14px;
  padding: 1.5rem;
}

.carousel__strip-wrap {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.75rem;
}

.carousel__strip {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  flex: 1;
  /* La miniatura activa escala a 1.12x (~9px por lado en ancho, ~13px en
     alto) y encima puede quedar pegada al borde tras el reordenado al
     frente — el padding tiene que ser mayor a eso o el overflow-x:auto la
     recorta. */
  padding: 20px 16px;
  scrollbar-width: none;
}
.carousel__strip::-webkit-scrollbar { display: none; }

.carousel__thumb {
  width: 150px;
  height: 225px;
  border: 3px solid transparent;
  border-radius: 14px;
  padding: 0;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.carousel__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 11px;
  /* Apagada por default ("en standby") — solo la portada activa se ve a
     full color, así se nota de un vistazo cuál está seleccionada sin
     depender solo del borde dorado. */
  filter: grayscale(85%) brightness(0.55);
  transition: filter 0.25s ease;
}

.carousel__thumb:hover { transform: translateY(-3px); }
.carousel__thumb:hover img { filter: grayscale(35%) brightness(0.8); }

/* La miniatura activa se agranda un poco, se resalta con el borde dorado y
   recupera el color completo, como un "carrusel de tapas de juego" real. */
.carousel__thumb--activo {
  border-color: var(--amber);
  transform: scale(1.12);
  z-index: 1;
}
.carousel__thumb--activo img { filter: none; }
.carousel__thumb--activo:hover { transform: scale(1.12) translateY(-3px); }

.carousel__arrow {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--surface-border);
  background: transparent;
  color: var(--text);
  font-size: 1.3rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.carousel__arrow:hover { border-color: var(--amber); color: var(--amber); }

.carousel__nombre {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0 0 0.75rem;
}

.carousel__badge {
  background: var(--amber);
  color: #14110a;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
}

.carousel__badge--proximamente { background: var(--surface-border); color: var(--text); }

/* Crossfade del texto al cambiar de juego en el carrusel (ver mostrar() en
   el script) — sin esto el nombre/precio/texto cambiaban de golpe. */
.carousel__detalle {
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.carousel__detalle--saliendo {
  opacity: 0;
  transform: translateY(4px);
}

.carousel__detalle p {
  color: var(--text-muted);
  font-size: 0.98rem;
  line-height: 1.6;
  margin: 0 0 1.1rem;
  max-width: 640px;
}

.carousel__link {
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--amber);
  text-decoration: none;
}

@media (max-width: 780px) {
  .destacados__grid { grid-template-columns: 1fr; }
}

/* ===================== HERO DE PRODUCTO (minecraft.html) ===================== */
/* Reemplaza el "intro" de texto plano que tenía antes esta página — portada
   grande + pills de features + título + cinta de precio, mismo espíritu
   que el hero de la home pero pensado para una sola ficha de producto.
   Reusa el key art oficial de fondo (../images/minecraft-bg.jpg, el mismo
   que .mc-hero) que había quedado sin usar desde que la home pasó a tener
   el video animado. */

.mc-producto {
  position: relative;
  overflow: hidden;
  background-image:
    linear-gradient(180deg, rgba(12, 13, 16, 0.93) 0%, rgba(12, 13, 16, 0.97) 65%, var(--bg) 100%),
    url("../images/minecraft-bg.jpg");
  background-size: cover;
  background-position: center 60%;
  border-bottom: 1px solid var(--surface-border);
  padding: 3.5rem 1.5rem 3rem;
}

.mc-producto__inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 3rem;
  flex-wrap: wrap;
}

.mc-producto__media {
  position: relative;
  flex-shrink: 0;
  width: 240px;
}

.mc-producto__media img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  display: block;
  border-radius: 16px;
  border: 3px solid var(--amber);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55);
}

.mc-producto__badge-popular {
  position: absolute;
  top: -10px;
  left: 16px;
  z-index: 1;
}

.mc-producto__info { flex: 1 1 320px; min-width: 280px; }

.mc-producto__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
}

.mc-producto__pill {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--surface-border);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
}

.mc-producto__titulo {
  font-size: 3.2rem;
  font-weight: 800;
  line-height: 1;
  margin: 0;
  letter-spacing: -0.01em;
}

.mc-producto__subtitulo {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--amber);
  font-weight: 800;
  font-size: 0.9rem;
  margin: 0.4rem 0 1.1rem;
}

.mc-producto__estado {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0 0 1.1rem;
}

.mc-producto__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #25d366;
  flex-shrink: 0;
}

.mc-producto__texto {
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 520px;
  margin: 0 0 1.75rem;
}

.mc-producto__acciones { display: flex; gap: 0.75rem; flex-wrap: wrap; }

.mc-producto__ribbon {
  max-width: 1180px;
  margin: 2.75rem auto 0;
  background: var(--surface);
  border: 1px solid var(--amber);
  border-radius: 12px;
  padding: 0.9rem 1.5rem;
  text-align: center;
  font-weight: 700;
  color: var(--text);
}

.mc-producto__ribbon-original {
  text-decoration: line-through;
  color: var(--text-muted);
  font-weight: 500;
  margin: 0 0.4rem;
}

.mc-producto__ribbon strong {
  color: var(--amber);
  font-size: 1.2rem;
}

@media (max-width: 640px) {
  .mc-producto__titulo { font-size: 2.3rem; }
  .mc-producto__media { width: 180px; }
}

/* ===================== PLANES ===================== */

.planes {
  max-width: 1180px;
  margin: 0 auto;
  padding: 1rem 1.5rem 5rem;
}

.planes__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

/* Stagger del reveal por columna (ver .reveal en la sección SCROLL REVEAL
   más abajo) — cada fila de 4 entra en oleada de izquierda a derecha. */
.planes__grid .plan.reveal:nth-child(4n + 1) { --reveal-delay: 0s; }
.planes__grid .plan.reveal:nth-child(4n + 2) { --reveal-delay: 0.08s; }
.planes__grid .plan.reveal:nth-child(4n + 3) { --reveal-delay: 0.16s; }
.planes__grid .plan.reveal:nth-child(4n + 4) { --reveal-delay: 0.24s; }

.plan {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: 14px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}

.plan--popular {
  border-color: var(--amber);
  box-shadow: 0 0 0 1px var(--amber);
}

.plan__badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--amber);
  color: #14110a;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  white-space: nowrap;
}

.plan__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.plan__nombre {
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0 0 0.35rem;
}

.plan__ram {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.92rem;
}

.plan__ram strong { color: var(--amber); font-weight: 800; }

/* Renders reales de bloques de Minecraft (blockrender.dev) — reemplazan a
   los cuadrados de gradiente CSS que usábamos antes de tener esto. */
.cubo {
  display: inline-block;
  width: 46px;
  height: 46px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Placa gris neutra detrás del bloque (no un color por material) — mismo
   tratamiento que usan los sitios reales de hosting de Minecraft. */
.cubo-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 14px;
  background: #2b2d34;
  border: 1px solid var(--surface-border);
  flex-shrink: 0;
}

.cubo-tile .cubo { width: 56px; height: 56px; }

.cubo-tile--sm { width: 50px; height: 50px; border-radius: 10px; }
.cubo-tile--sm .cubo { width: 34px; height: 34px; }

.plan__precio-original {
  margin: 0;
  color: var(--text-muted);
  text-decoration: line-through;
  font-size: 0.9rem;
}

.plan__precio {
  margin: 0.2rem 0 1.4rem;
  font-size: 1.65rem;
  font-weight: 800;
}

.plan__precio span {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-muted);
}

.plan__btn {
  margin-top: auto;
  display: block;
  text-align: center;
  text-decoration: none;
  background: var(--amber);
  color: #14110a;
  font-weight: 800;
  font-size: 0.95rem;
  border-radius: 8px;
  padding: 0.8rem;
  transition: background 0.2s ease;
}

.plan__btn:hover { background: var(--amber-dark); }

/* ===================== CATÁLOGO DE JUEGOS (juegos.html) ===================== */

.juegos-catalogo {
  max-width: 1180px;
  margin: 0 auto;
  padding: 1rem 1.5rem 5rem;
}

.juegos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1.25rem;
}

/* Stagger del reveal — 6 buckets alcanza para cubrir el ancho típico de
   esta grilla (no hace falta que coincida exacto con las columnas reales
   en cada breakpoint, es solo para que no entren todas de una). */
.juegos-grid .juego-card.reveal:nth-child(6n + 1) { --reveal-delay: 0s; }
.juegos-grid .juego-card.reveal:nth-child(6n + 2) { --reveal-delay: 0.05s; }
.juegos-grid .juego-card.reveal:nth-child(6n + 3) { --reveal-delay: 0.1s; }
.juegos-grid .juego-card.reveal:nth-child(6n + 4) { --reveal-delay: 0.15s; }
.juegos-grid .juego-card.reveal:nth-child(6n + 5) { --reveal-delay: 0.2s; }
.juegos-grid .juego-card.reveal:nth-child(6n + 6) { --reveal-delay: 0.25s; }

.juego-card {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.juego-card:hover { transform: translateY(-4px); border-color: var(--amber); }

.juego-card__imagen-wrap {
  position: relative;
  aspect-ratio: 2 / 3;
  overflow: hidden;
}
.juego-card__imagen-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }

.juego-card__badge { position: absolute; top: 10px; left: 10px; }

.juego-card__body {
  padding: 1rem 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.juego-card__nombre { margin: 0; font-size: 1.02rem; font-weight: 800; }

.juego-card__texto {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.5;
  flex: 1;
}

.juego-card__cta {
  margin-top: 0.4rem;
  display: block;
  text-align: center;
  text-decoration: none;
  font-weight: 800;
  font-size: 0.88rem;
  border-radius: 8px;
  padding: 0.65rem;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
/* Minecraft (único juego real hoy) tira a "Ver planes" con botón sólido —
   el resto son "Avisenme" en modo ghost, para no prometer visualmente lo
   mismo que algo ya comprable. */
.juego-card__cta {
  background: transparent;
  color: var(--amber);
  border: 1px solid var(--surface-border);
}
.juego-card__cta:hover { border-color: var(--amber); }
.juego-card:has(.carousel__badge:not(.carousel__badge--proximamente)) .juego-card__cta {
  background: var(--amber);
  color: #14110a;
  border-color: var(--amber);
}
.juego-card:has(.carousel__badge:not(.carousel__badge--proximamente)) .juego-card__cta:hover {
  background: var(--amber-dark);
  border-color: var(--amber-dark);
}

/* ===================== FOOTER ===================== */

.footer {
  border-top: 1px solid var(--surface-border);
  background: var(--bg);
  padding: 3.5rem 1.5rem 0;
}

.footer__inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 2.75rem;
}

.footer__logo {
  margin: 0 0 0.75rem;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
}
.footer__logo span { color: var(--amber); }

.footer__tagline {
  margin: 0 0 1.35rem;
  max-width: 320px;
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

.footer__whatsapp { display: inline-block; }

.footer__titulo {
  margin: 0 0 1rem;
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.footer__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.footer__lista a {
  color: var(--text);
  text-decoration: none;
  font-size: 0.92rem;
  transition: color 0.2s ease;
}
.footer__lista a:hover { color: var(--amber); }

.footer__bottom {
  border-top: 1px solid var(--surface-border);
  padding: 1.5rem 0;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.82rem;
}
.footer__bottom p { margin: 0; }
.footer__bottom a { color: var(--amber); text-decoration: none; }
.footer__bottom a:hover { text-decoration: underline; }

@media (max-width: 780px) {
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .footer__marca { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .footer__inner { grid-template-columns: 1fr; gap: 2rem; }
}

/* ===================== HERO DE MINECRAFT (minecraft.html) ===================== */
/* Inspirado en la estructura de sitios reales de hosting de Minecraft (texto
   grande a la izquierda, checklist de features, arte vibrante a la derecha) —
   sin usar ningún asset real de Minecraft (es de Mojang): el "arte" acá son
   los mismos cubos de color que ya usamos en las tarjetas de plan, más
   grandes y flotando, sobre un degradé propio. */

.mc-hero {
  position: relative;
  overflow: hidden;
  /* Color de respaldo mientras carga el video (o si falla) — mismo --bg de
     siempre, para que no haya un flash blanco. */
  background-color: var(--bg);
  border-bottom: 1px solid var(--surface-border);
}

.mc-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 65%;
  z-index: 0;
}

/* Degradé oscuro por encima del video para que el texto de la izquierda
   siga siendo legible — se aclara hacia la derecha para dejar ver la
   escena. Va en un pseudo-elemento propio (no en el background del video)
   porque tiene que pintarse ARRIBA del <video>, no detrás. */
.mc-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(100deg, rgba(12, 13, 16, 0.97) 0%, rgba(12, 13, 16, 0.88) 32%, rgba(12, 13, 16, 0.55) 60%, rgba(12, 13, 16, 0.2) 100%);
}

.mc-hero__cubos {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  transition: transform 0.3s ease-out;
}

.mc-hero__cubo {
  position: absolute;
  width: 90px;
  height: 90px;
  border-radius: 16px;
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.5));
}

/* Entrada tipo "caen y asientan" al cargar la página (overshoot leve, como
   un bloque que cae y rebota), y después quedan flotando en loop — cada
   cubo con su propio ángulo de reposo (--r), tamaño de flote y timing para
   que no se vean todos sincronizados/artificiales. */
@keyframes cuboEntra {
  from { opacity: 0; transform: translateY(-46px) scale(0.5) rotate(var(--r)); }
  to { opacity: 0.9; transform: translateY(0) scale(1) rotate(var(--r)); }
}

@keyframes cuboFlota {
  0%, 100% { transform: translateY(0) rotate(var(--r)); }
  50% { transform: translateY(-14px) rotate(calc(var(--r) + 4deg)); }
}

.mc-hero__cubo--1 {
  width: 140px; height: 140px; top: 8%; right: 14%; --r: -8deg;
  animation: cuboEntra 0.7s cubic-bezier(.34, 1.56, .64, 1) 0.1s backwards,
             cuboFlota 5s ease-in-out 0.8s infinite;
}
.mc-hero__cubo--2 {
  width: 90px; height: 90px; top: 42%; right: 4%; --r: 10deg;
  animation: cuboEntra 0.7s cubic-bezier(.34, 1.56, .64, 1) 0.25s backwards,
             cuboFlota 4.2s ease-in-out 0.95s infinite;
}
.mc-hero__cubo--3 {
  width: 70px; height: 70px; top: 62%; right: 26%; --r: -14deg;
  animation: cuboEntra 0.7s cubic-bezier(.34, 1.56, .64, 1) 0.4s backwards,
             cuboFlota 4.8s ease-in-out 1.1s infinite;
}
.mc-hero__cubo--4 {
  width: 110px; height: 110px; top: 68%; right: 2%; --r: 6deg;
  animation: cuboEntra 0.7s cubic-bezier(.34, 1.56, .64, 1) 0.55s backwards,
             cuboFlota 5.4s ease-in-out 1.25s infinite;
}
.mc-hero__cubo--5 {
  width: 60px; height: 60px; top: 14%; right: 34%; --r: 18deg;
  animation: cuboEntra 0.7s cubic-bezier(.34, 1.56, .64, 1) 0.7s backwards,
             cuboFlota 3.8s ease-in-out 1.4s infinite;
}

@media (prefers-reduced-motion: reduce) {
  .mc-hero__cubo { animation: none !important; opacity: 0.9; transform: rotate(var(--r)) !important; }
  .mc-hero__cubos { transition: none; }
}

.mc-hero__inner {
  position: relative;
  z-index: 3;
  max-width: 1180px;
  margin: 0 auto;
  padding: 5rem 1.5rem 5.5rem;
}

.mc-hero__kicker {
  display: block;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 1rem;
}

.mc-hero__titulo {
  font-size: 3.6rem;
  line-height: 1.05;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin: 0 0 2rem;
  max-width: 640px;
}

.mc-hero__lista {
  list-style: none;
  margin: 0 0 2.25rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 0.85rem 2.5rem;
  max-width: 640px;
}

.mc-hero__lista li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-weight: 600;
  font-size: 0.95rem;
}

.mc-hero__check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(242, 177, 52, 0.16);
  color: var(--amber);
  font-size: 0.75rem;
  font-weight: 800;
  flex-shrink: 0;
}

.mc-hero__acciones {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  flex-wrap: wrap;
}

.mc-hero__whatsapp-link {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--surface-border);
  padding-bottom: 2px;
}
.mc-hero__whatsapp-link:hover { color: var(--amber); border-color: var(--amber); }

/* ===================== WHATSAPP FLOTANTE ===================== */

.whatsapp-float {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
  z-index: 40;
  transition: transform 0.2s ease;
}

.whatsapp-float svg { width: 28px; height: 28px; }
.whatsapp-float:hover { transform: scale(1.08); }

/* ===================== SCROLL REVEAL ===================== */
/* Entrada tipo "aparece y asienta" al llegar al viewport — mismo espíritu
   que la caída de los cubos del hero, pero disparada por scroll en vez de
   por carga de página. Ver el IntersectionObserver al final de index.html. */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(.22, .61, .36, 1), transform 0.6s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--reveal-delay, 0s);
}
.reveal--in { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ===================== RESPONSIVE ===================== */

@media (max-width: 980px) {
  .planes__grid { grid-template-columns: repeat(2, 1fr); }
  .mc-hero__titulo { font-size: 2.8rem; }
  .mc-hero__cubo { display: none; }
}

@media (max-width: 560px) {
  .planes__grid { grid-template-columns: 1fr; }
  .intro__titulo { font-size: 1.9rem; }
  .header__cta { font-size: 0.78rem; padding: 0.5rem 0.85rem; }
  .mc-hero__titulo { font-size: 2.2rem; }
  .mc-hero__lista { grid-template-columns: 1fr; }

  /* En mobile el texto ocupa todo el ancho (no solo una columna a la
     izquierda como en escritorio), así que el scrim necesita quedar más
     oscuro en general para que siga siendo legible. */
  .mc-hero::after {
    background-image:
      linear-gradient(180deg, rgba(12, 13, 16, 0.94) 0%, rgba(12, 13, 16, 0.86) 55%, rgba(12, 13, 16, 0.75) 100%);
  }
  .mc-hero__video { object-position: center 70%; }
}

/* ===================== CHECKOUT (checkout.html) ===================== */
/* Maqueta interactiva — recalcula todo en el navegador (ver el script al
   final de checkout.html) pero no cobra nada de verdad: este sitio no
   tiene backend/pasarela todavía. El botón final arma un WhatsApp con el
   pedido resumido en vez de procesar un pago. */

.checkout {
  max-width: 1180px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 5rem;
}

.checkout-pasos {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0 0 2.5rem;
  padding: 0;
}

.checkout-pasos__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.checkout-pasos__numero {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--surface-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

.checkout-pasos__item--activo .checkout-pasos__numero {
  background: var(--amber);
  border-color: var(--amber);
  color: #14110a;
}

.checkout-pasos__texto { display: flex; flex-direction: column; line-height: 1.25; }
.checkout-pasos__texto strong { font-size: 0.92rem; }
.checkout-pasos__texto small { color: var(--text-muted); font-size: 0.76rem; }
.checkout-pasos__item:not(.checkout-pasos__item--activo) .checkout-pasos__texto strong { color: var(--text-muted); }

.checkout-pasos__linea {
  flex: 1;
  height: 1px;
  background: var(--surface-border);
  margin: 0 1.25rem;
  min-width: 24px;
}

.checkout-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 1.5rem;
  align-items: start;
}

.checkout-col { display: flex; flex-direction: column; gap: 1.25rem; }

.checkout-plan {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: 14px;
  padding: 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.checkout-plan .cubo-tile { width: 52px; height: 52px; }
.checkout-plan__nombre { margin: 0; font-size: 1.15rem; font-weight: 800; }
.checkout-plan__sub { margin: 0.15rem 0 0; color: var(--text-muted); font-size: 0.85rem; }

.checkout-section {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: 14px;
  padding: 1.5rem;
}

.checkout-section__titulo {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 1.25rem;
  font-size: 1rem;
  font-weight: 800;
}

.checkout-section__numero {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(242, 177, 52, 0.12);
  color: var(--amber);
  font-size: 0.78rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.checkout-terminos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
}

.checkout-termino {
  background: transparent;
  border: 1px solid var(--surface-border);
  border-radius: 10px;
  padding: 1rem 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
  color: var(--text);
  font-family: inherit;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.checkout-termino:hover { border-color: var(--amber); }
.checkout-termino--activo {
  border-color: var(--amber);
  background: rgba(242, 177, 52, 0.08);
}
.checkout-termino__label { font-weight: 700; font-size: 0.88rem; }
.checkout-termino__precio { font-weight: 800; font-size: 1.1rem; }
.checkout-termino__ahorro { font-size: 0.72rem; color: #4caf6d; font-weight: 700; }

.checkout-campo__label {
  display: block;
  margin: 0 0 0.6rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
}

.checkout-select {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  border: 1px solid var(--surface-border);
  border-radius: 10px;
  padding: 0.75rem 1rem;
}
.checkout-select__bandera { font-size: 1.2rem; }
.checkout-select select {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 700;
}
.checkout-select select:focus { outline: none; }
.checkout-select__ping { font-size: 0.78rem; color: var(--text-muted); }

.checkout-toggle {
  display: flex;
  gap: 0.6rem;
}
.checkout-toggle__op {
  flex: 1;
  background: transparent;
  border: 1px solid var(--surface-border);
  border-radius: 10px;
  padding: 0.7rem;
  color: var(--text-muted);
  font-family: inherit;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.checkout-toggle__op:hover { border-color: var(--amber); }
.checkout-toggle__op--activo { border-color: var(--amber); color: var(--text); }

.checkout-extra {
  padding: 1.1rem 0;
  border-top: 1px solid var(--surface-border);
}
.checkout-section .checkout-extra:first-of-type { border-top: none; padding-top: 0; }

.checkout-extra__cabecera {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  cursor: pointer;
}

/* Checkbox con estilo propio (appearance:none + check dibujado a mano) en
   vez del checkbox nativo del navegador — se nota mucho más cuando está
   tildado, con el mismo ámbar del resto del sitio. */
.checkout-extra__check {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid var(--surface-border);
  background: transparent;
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.checkout-extra__check:hover { border-color: var(--amber); }
.checkout-extra__check:checked { background: var(--amber); border-color: var(--amber); }
.checkout-extra__check:checked::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 6px;
  height: 11px;
  border: solid #14110a;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.checkout-extra__icono { font-size: 1.3rem; flex-shrink: 0; }
.checkout-extra__titulo { flex: 1; min-width: 0; font-weight: 700; font-size: 0.94rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.checkout-extra__badge {
  background: var(--amber);
  color: #14110a;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
}
.checkout-extra__precio { font-weight: 800; font-size: 0.92rem; white-space: nowrap; }
.checkout-extra__precio small { font-weight: 500; color: var(--text-muted); font-size: 0.72rem; }

/* El texto/botón/detalle van indentados para alinear con el título de
   arriba (checkbox 22px + gap + ícono ≈ 2.9rem), no con el borde de la
   tarjeta. */
.checkout-extra__texto {
  margin: 0.6rem 0 0 2.9rem;
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

.checkout-extra__masinfo {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.5rem 0 0 2.9rem;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.2s ease;
}
.checkout-extra__masinfo:hover { color: var(--amber); }

.checkout-extra__detalle {
  margin: 0.65rem 0 0 2.9rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--surface-border);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.6;
}

@media (max-width: 560px) {
  .checkout-extra__texto,
  .checkout-extra__masinfo,
  .checkout-extra__detalle { margin-left: 0; }
}

.checkout-resumen {
  position: sticky;
  top: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: 14px;
  padding: 1.5rem;
}
.checkout-resumen__titulo { margin: 0 0 1.25rem; font-size: 1rem; font-weight: 800; }

.checkout-resumen__linea {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  font-size: 0.88rem;
  color: var(--text-muted);
}
.checkout-resumen__linea--descuento { color: #4caf6d; }

/* Este contenedor no es UNA línea, es donde el JS mete VARIAS líneas de
   extras (una por checkbox tildado) — si hereda el display:flex de fila de
   .checkout-resumen__linea, esas líneas quedan todas apretadas una al lado
   de la otra en vez de apiladas. */
.checkout-resumen__linea--extras {
  display: block;
  padding: 0;
}
.checkout-resumen__linea--descuento strong { color: #4caf6d; }

.checkout-resumen__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-top: 1px solid var(--surface-border);
  margin-top: 0.5rem;
  padding-top: 1rem;
  font-weight: 800;
  font-size: 1.05rem;
}
.checkout-resumen__total strong { font-size: 1.6rem; color: var(--amber); }
.checkout-resumen__total small { color: var(--text-muted); font-size: 0.8rem; font-weight: 500; }

.checkout-resumen__nota {
  margin: 0.75rem 0 0;
  color: var(--text-muted);
  font-size: 0.76rem;
  line-height: 1.5;
}

.checkout-cupon { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--surface-border); }
.checkout-cupon__fila { display: flex; gap: 0.5rem; }
.checkout-cupon__fila input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  padding: 0.6rem 0.85rem;
  color: var(--text);
  font-family: inherit;
  font-size: 0.88rem;
}
.checkout-cupon__fila input:focus { outline: none; border-color: var(--amber); }
.checkout-cupon__fila .btn { padding: 0.6rem 1.1rem; font-size: 0.85rem; white-space: nowrap; }
.checkout-cupon__estado { margin: 0.6rem 0 0; font-size: 0.82rem; font-weight: 700; color: #4caf6d; }
.checkout-cupon__estado--error { color: #e5484d; }

.checkout-resumen__cta { display: block; width: 100%; text-align: center; margin-top: 1.5rem; }

.checkout-confianza {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--surface-border);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .checkout-grid { grid-template-columns: 1fr; }
  .checkout-resumen { position: static; }
}

@media (max-width: 560px) {
  .checkout-pasos__texto small { display: none; }
  .checkout-terminos { grid-template-columns: 1fr; }
  .checkout-pasos__linea { margin: 0 0.6rem; }
}