/* =====================================================================
 *  Gamerol · Pantalla de entrada del panel (/panel)
 *  ---------------------------------------------------------------------
 *  Mismo lenguaje que la portada: fondo de Los Santos, GAMEROL en Bungee
 *  y la ETIQUETA DE PRECIO del cliente. Esa etiqueta es lo que ata el
 *  login con su tarjeta de la portada, antes de escribir la contraseña.
 *
 *  Prefijo `lg-` propio a proposito: NO reutiliza las clases `.login-*`
 *  de styles.css. Son dos disenos distintos y mezclarlos era pedir una
 *  colision de cascada (ver README, "la trampa de cascada").
 * ===================================================================== */

.lg-body {
  margin: 0;
  min-height: 100vh;
}

.lg-hoja {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 72px 20px 40px;
  background-image:
    linear-gradient(rgba(11, 11, 13, .70), rgba(11, 11, 13, .90) 60%, var(--fondo) 96%),
    url("/img/gamerol-fondo.jpg");
  background-size: cover;
  background-position: center 30%;
}

.lg-volver {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 40;
  padding: 9px 15px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: rgba(0, 0, 0, .55);
  color: var(--texto-apagado);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
  text-decoration: none;
  transition: color var(--trans), border-color var(--trans);
}
.lg-volver:hover { color: var(--texto); border-color: var(--dorado); }
.lg-volver:focus-visible { outline: 2px solid var(--dorado-suave); outline-offset: 2px; }

/* ---------------------------------------------------------------------
   TARJETA
--------------------------------------------------------------------- */
.lg-tarjeta {
  position: relative;
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  padding: 30px 28px 26px;
  background: var(--sup-tarjeta);
  border: 1px solid var(--borde-dorado);
  border-radius: var(--radio);
  box-shadow: var(--luz-superior), var(--sombra-elevada);
  animation: lg-aparecer .35s ease;
}
@keyframes lg-aparecer {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Etiqueta de precio: la misma de la portada, con su punta, su agujero
   y su sombra dura. La sombra va con drop-shadow y no con box-shadow
   porque con clip-path el box-shadow dibuja la caja rectangular e
   ignora el recorte (asomaba por la punta). */
.lg-tag {
  position: absolute;
  top: -13px;
  left: 20px;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 6px 15px 6px 26px;
  transform: rotate(-6deg);
  transform-origin: left center;
  clip-path: polygon(0 50%, 14px 0, 100% 0, 100% 100%, 14px 100%);
  filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, .55));
  background: var(--tag-fondo);
  color: var(--tag-tinta);
}
.lg-tag::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .5);
}
.lg-tag-nombre {
  font-family: var(--fuente-drip);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.05;
  letter-spacing: .4px;
}
.lg-tag-reclamo {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  opacity: .78;
}

.lg-samp  { --tag-fondo: linear-gradient(160deg, var(--dorado-suave), var(--dorado)); --tag-tinta: var(--dorado-tinta); }

/* ---------------------------------------------------------------------
   CABECERA
--------------------------------------------------------------------- */
.lg-cabecera {
  text-align: center;
  margin: 18px 0 22px;
}
.lg-gamerol {
  display: block;
  font-family: var(--fuente-drip);
  font-weight: 400;
  font-size: 38px;
  line-height: 1;
  letter-spacing: .5px;
  background: linear-gradient(180deg, var(--dorado-suave) 10%, var(--dorado) 52%, #8a1a52 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lg-titulo {
  display: block;
  margin: 11px 0 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--dorado-suave);
}

/* Nombre del servidor + estado en vivo, juntos en una pildora: es LA
   linea que responde "¿a que panel estoy entrando?". */
.lg-servidor {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 0;
  padding: 6px 14px 6px 15px;
  border-radius: 999px;
  border: 1px solid var(--borde);
  background: rgba(0, 0, 0, .45);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--texto);
  letter-spacing: .2px;
}
.lg-servidor .sep {
  width: 1px;
  height: 13px;
  background: var(--borde);
  flex: none;
}
.lg-estado {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--texto-apagado);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.lg-estado .punto {
  width: 7px; height: 7px; flex: none;
  border-radius: 50%;
  background: var(--texto-apagado);
}
.lg-estado[data-estado="online"] { color: var(--exito); }
.lg-estado[data-estado="online"] .punto {
  background: var(--exito);
  animation: lg-latido 2.2s ease-out infinite;
}
.lg-estado[data-estado="offline"] .punto { background: var(--critico); }
@keyframes lg-latido {
  0%   { box-shadow: 0 0 0 0 rgba(83, 193, 104, .5); }
  70%  { box-shadow: 0 0 0 7px rgba(83, 193, 104, 0); }
  100% { box-shadow: 0 0 0 0 rgba(83, 193, 104, 0); }
}

/* ---------------------------------------------------------------------
   FORMULARIO
--------------------------------------------------------------------- */
.lg-error {
  display: none;
  margin: 0 0 16px;
  padding: 11px 14px;
  background: var(--critico-tenue);
  border: 1px solid var(--critico-borde);
  border-radius: var(--radio-chico);
  color: var(--critico);
  font-size: 13px;
  line-height: 1.5;
}
.lg-error.visible { display: block; }

.lg-campo { margin-bottom: 15px; }
.lg-campo label {
  display: block;
  margin-bottom: 7px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--texto-tenue);
}
.lg-campo input {
  width: 100%;
  padding: 13px 14px;
  background: var(--sup-hundida);
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: 15px;
  transition: border-color var(--trans), box-shadow var(--trans);
}
.lg-campo input::placeholder { color: var(--texto-apagado); }
.lg-campo input:focus {
  outline: none;
  border-color: var(--dorado);
  box-shadow: 0 0 0 3px rgba(255, 47, 146, .15);
}

.lg-entrar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  margin-top: 6px;
  padding: 13px 18px;
  border: none;
  border-radius: var(--radio-chico);
  background: linear-gradient(135deg, var(--dorado-suave), var(--dorado));
  color: var(--dorado-tinta);
  font-family: var(--fuente);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--sombra-dorada);
  transition: filter var(--trans), transform .1s;
}
.lg-entrar:hover:not(:disabled) { filter: brightness(1.08); }
.lg-entrar:active:not(:disabled) { transform: translateY(1px) scale(.99); }
.lg-entrar:disabled { opacity: .5; cursor: not-allowed; }
.lg-entrar:focus-visible { outline: 2px solid var(--dorado-suave); outline-offset: 3px; }

.lg-nota {
  margin: 18px 0 0;
  text-align: center;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--texto-apagado);
}
.lg-nota a { color: var(--texto-tenue); font-weight: 700; }
.lg-nota a:hover { color: var(--dorado); }

@media (max-width: 560px) {
  .lg-hoja { padding: 66px 16px 32px; background-position: center 20%; }
  .lg-tarjeta { padding: 26px 20px 22px; }
  .lg-gamerol { font-size: 33px; }
  .lg-volver { min-height: 40px; display: inline-flex; align-items: center; }
  /* Los campos NO bajan de 16px: por debajo, Safari en iOS hace zoom
     solo al enfocarlos y descoloca la pagina entera. */
  .lg-campo input { font-size: 16px; }
  .lg-entrar { min-height: 50px; }
}

@media (prefers-reduced-motion: reduce) {
  .lg-tarjeta { animation: none; }
  .lg-estado[data-estado="online"] .punto { animation: none; }
}

/* =====================================================================
 *  /panel (SA-MP) — rediseño de Vanessa, integracion v1 (31/08/2026)
 *  ---------------------------------------------------------------------
 *  TODO lo de aqui abajo esta prefijado por ".lg-samp" a proposito: el
 *  body de /panel ya llevaba esa clase (antes solo para elegir el color
 *  de la etiqueta de precio). Anclar cada regla nueva a ".lg-samp" evita
 *  que se filtren a ningun otro login que pueda existir en el futuro.
 *  Nada de lo de arriba en este archivo se ha tocado ni borrado.
 *
 *  Paleta, medidas y contrato: ESPECIFICACION.md de Vanessa
 *  (Grok Vanesa/ENTREGAS/GAMEROL-LOGIN-PANEL-SAMP-v1/). Token por token:
 * ===================================================================== */
.lg-samp {
  --sv-fondo: #0A0A0A;
  --sv-card: #111111;
  --sv-input: #161616;
  --sv-linea: #2A2A2A;
  --sv-lima: #A7E20B;
  --sv-lima-hover: #C6FF2A;
  --sv-rosa: #F12A8B;
  --sv-texto: #F5F5F5;
  --sv-mute: #9A9A9A;
  --sv-placeholder: #6B6B6B;
  --sv-error: #FF4D8D;
  --sv-error-fondo: #1A0B12;
  --sv-cta-disabled-fondo: #4A5A12;
  --sv-cta-disabled-texto: #1A1A1A;
  /* Rubik Wet Paint (la tipografia "goteando" de la especificacion) es
     un Google Font: cargarla violaria el CSP de este sitio (style-src /
     font-src caen en 'self' por defecto, sin ningun dominio externo
     permitido -- ver server.js) y el VPS no la tiene instalada.
     Permanent Marker / Bangers, los locales alternativos que proponia
     la especificacion, tampoco existen en este proyecto. Sustituyo por
     Bungee, la MISMA fuente de identidad que ya usan Portada Simple v1,
     Normas Simple v1 y Guia Simple v1 -- sigue siendo consistente con
     el resto del sitio, aunque pierde el efecto de goteo concreto de la
     lamina. Ya esta cargada por styles.css, no hace falta declararla
     otra vez. */
  --sv-fuente-marca: 'Bungee', 'Arial Black', sans-serif;
  /* Inter tampoco esta instalado localmente y cargarlo por red tiene el
     mismo problema de CSP. Uso directamente el fallback de sistema que
     la propia especificacion ya preveia ("Fallback: system-ui,
     sans-serif"). */
  --sv-fuente-ui: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ---------------------------------------------------------------------
   LIENZO — usa el fondo de Vanessa (grano + halos + goteos + ladrillo
   ya "horneados" en el PNG) en vez de recrearlos con feTurbulence, que
   la propia Vanessa señalaba como pesado en Android antiguo (riesgo 2
   de MEMORIA.md). Dos imagenes, una por composicion.
--------------------------------------------------------------------- */
.lg-samp .lg-hoja {
  display: block;
  padding: 0;
  min-height: 100vh;
  background-color: var(--sv-fondo);
  background-image: url("/img/login-samp/fondo-movil.png");
  background-size: cover;
  background-position: top center;
}
@media (min-width: 720px) {
  .lg-samp .lg-hoja {
    background-image: url("/img/login-samp/fondo-desktop.png");
    background-position: center;
  }
}

.lg-samp .lg-envoltura {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
  padding: 22px 20px max(28px, env(safe-area-inset-bottom));
}

/* Tablet / intermedio: 720–1099, tarjeta de 420 alineada a la derecha */
@media (min-width: 720px) {
  .lg-samp .lg-envoltura {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 48px;
    padding: 40px 48px;
  }
  .lg-samp .lg-marca-col { flex: 1 1 auto; }
  .lg-samp .lg-tarjeta { flex: 0 0 420px; }
}

/* Desktop completo: grid 1fr + 480, igual que la lamina de Vanessa */
@media (min-width: 1100px) {
  .lg-samp .lg-envoltura {
    display: grid;
    grid-template-columns: 1fr 480px;
    gap: 64px;
    justify-content: initial;
    padding: 48px 72px 56px;
  }
  .lg-samp .lg-marca-col { margin-top: 72px; }
  .lg-samp .lg-tarjeta { align-self: center; }
}

/* ---------------------------------------------------------------------
   COLUMNA DE MARCA
--------------------------------------------------------------------- */
.lg-samp .lg-marca { display: flex; flex-direction: column; }
.lg-samp .lg-gamerol {
  font-family: var(--sv-fuente-marca);
  font-weight: 400;
  font-size: 52px;
  line-height: .92;
  letter-spacing: -.5px;
  color: var(--sv-lima);
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  text-shadow: 0 6px 0 rgba(0, 0, 0, .4);
}
.lg-samp .lg-subtitulo {
  display: block;
  font-family: var(--sv-fuente-marca);
  font-weight: 400;
  font-size: 26px;
  line-height: 1;
  color: var(--sv-rosa);
  margin-top: 4px;
  text-transform: none;
  letter-spacing: 0;
}
.lg-samp .lg-tagline {
  display: block;
  margin-top: 8px;
  font-family: var(--sv-fuente-ui);
  font-weight: 700;
  font-size: 13px;
  color: var(--sv-rosa);
}
@media (min-width: 1100px) {
  .lg-samp .lg-gamerol { font-size: 96px; }
  .lg-samp .lg-subtitulo { font-size: 38px; }
  .lg-samp .lg-tagline { font-size: 16px; margin-top: 10px; }
}

.lg-samp .lg-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 22px;
}
.lg-samp .lg-badge {
  font-family: var(--sv-fuente-ui);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sv-fondo);
  background: var(--sv-rosa);
  padding: 6px 9px;
  border-radius: 4px;
  transform: rotate(-2deg);
}
.lg-samp .lg-servidor {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--sv-linea);
  background: #141414;
  color: var(--sv-mute);
  font-family: var(--sv-fuente-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
}
.lg-samp .lg-descripcion {
  margin-top: 20px;
  max-width: 46ch;
  color: var(--sv-mute);
  font-family: var(--sv-fuente-ui);
  font-size: 13.5px;
  line-height: 1.55;
}
@media (max-width: 719px) {
  .lg-samp .lg-descripcion { display: none; }
}

/* ---------------------------------------------------------------------
   ESTADO DEL SERVIDOR
   login.js solo conoce tres valores de data-estado: "cargando" (el que
   trae el HTML antes de que el script corra), "online" y "offline". El
   propio script funde en "offline" tanto "Sin conexion" (la API
   respondio, el juego esta apagado) como "No disponible" (fallo la
   peticion) -- son el MISMO data-estado con distinto texto. La hoja de
   estados de Vanessa pedia un cuarto estilo distinto (punto hueco
   discontinuo) para "No disponible": no es alcanzable sin tocar
   login.js, que esta fuera de mi alcance. Ambos casos comparten aqui el
   estilo rosa de "Sin conexion". Señalado en el informe de entrega.
--------------------------------------------------------------------- */
.lg-samp .lg-estado {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 500;
  color: var(--sv-mute);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.lg-samp .lg-estado .punto {
  width: 8px; height: 8px; flex: none;
  border-radius: 50%;
  background: #6B6B6B;
}
.lg-samp .lg-estado[data-estado="online"] { color: var(--sv-lima); font-weight: 700; }
.lg-samp .lg-estado[data-estado="online"] .punto {
  background: var(--sv-lima);
  box-shadow: 0 0 0 4px rgba(167, 226, 11, .18);
  animation: sv-latido 2.2s ease-out infinite;
}
.lg-samp .lg-estado[data-estado="offline"] { color: var(--sv-rosa); font-weight: 700; }
.lg-samp .lg-estado[data-estado="offline"] .punto {
  background: var(--sv-rosa);
  box-shadow: 0 0 0 4px rgba(241, 42, 139, .18);
}
@keyframes sv-latido {
  0%   { box-shadow: 0 0 0 0 rgba(167, 226, 11, .45); }
  70%  { box-shadow: 0 0 0 7px rgba(167, 226, 11, 0); }
  100% { box-shadow: 0 0 0 0 rgba(167, 226, 11, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .lg-samp .lg-estado[data-estado="online"] .punto { animation: none; }
}

/* ---------------------------------------------------------------------
   TARJETA
--------------------------------------------------------------------- */
.lg-samp .lg-tarjeta {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 26px 22px 22px;
  background: var(--sv-card);
  border: 1px solid #222222;
  border-radius: 16px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .03);
  animation: lg-aparecer .35s ease;
}
@media (min-width: 1100px) {
  .lg-samp .lg-tarjeta { padding: 36px 32px 28px; border-radius: 18px; }
}

.lg-samp .lg-entrar-titulo {
  font-family: var(--sv-fuente-marca);
  font-weight: 400;
  font-size: 22px;
  color: var(--sv-lima);
  margin: 0 0 4px;
}
.lg-samp .lg-quien {
  margin: 0 0 22px;
  color: var(--sv-mute);
  font-family: var(--sv-fuente-ui);
  font-size: 13px;
}

/* ---------------------------------------------------------------------
   ERROR — caja + borde + icono "!", no solo color
--------------------------------------------------------------------- */
.lg-samp .lg-error {
  display: none;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 16px;
  padding: 10px 12px;
  background: var(--sv-error-fondo);
  border: 1px solid var(--sv-error);
  border-radius: 10px;
  color: var(--sv-texto);
  font-family: var(--sv-fuente-ui);
  font-size: 13px;
  line-height: 1.5;
}
.lg-samp .lg-error.visible { display: flex; }
.lg-samp .lg-error::before {
  content: "!";
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--sv-error);
  color: var(--sv-fondo);
  font-weight: 800;
  font-size: 12px;
  text-align: center;
  line-height: 18px;
}

/* ---------------------------------------------------------------------
   CAMPOS
--------------------------------------------------------------------- */
.lg-samp .lg-campo { margin-bottom: 16px; }
.lg-samp .lg-campo label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--sv-fuente-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #CFCFCF;
}
.lg-samp .lg-campo input {
  width: 100%;
  height: 52px;
  padding: 0 14px;
  background: var(--sv-input);
  border: 1px solid var(--sv-linea);
  border-radius: 10px;
  color: var(--sv-texto);
  font-family: var(--sv-fuente-ui);
  font-size: 16px;
  font-weight: 500;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.lg-samp .lg-campo input::placeholder { color: var(--sv-placeholder); }
.lg-samp .lg-campo input:focus {
  outline: none;
  border-color: var(--sv-lima);
  box-shadow: 0 0 0 3px rgba(167, 226, 11, .22);
}
/* El error tiñe el borde del campo ademas de mostrar la caja: el rosa
   de marca no es el unico canal (MEMORIA.md, "Errores"). */
.lg-samp .lg-error.visible ~ .lg-campo input {
  border-color: var(--sv-error);
  box-shadow: 0 0 0 3px rgba(255, 77, 141, .18);
}

/* ---------------------------------------------------------------------
   BOTON ENTRAR
--------------------------------------------------------------------- */
.lg-samp .lg-entrar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  min-height: 52px;
  margin-top: 8px;
  padding: 0 18px;
  border: none;
  border-radius: 10px;
  background: var(--sv-lima);
  color: var(--sv-fondo);
  font-family: var(--sv-fuente-ui);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: none;
  transition: background-color .15s ease, transform .1s ease;
}
.lg-samp .lg-entrar:hover:not(:disabled) { background: var(--sv-lima-hover); }
.lg-samp .lg-entrar:active:not(:disabled) { transform: translateY(1px) scale(.99); }
.lg-samp .lg-entrar:disabled {
  background: var(--sv-cta-disabled-fondo);
  color: var(--sv-cta-disabled-texto);
  opacity: 1;
  cursor: not-allowed;
}
.lg-samp .lg-entrar:focus-visible {
  outline: 3px solid var(--sv-rosa);
  outline-offset: 3px;
}

.lg-samp .lg-nota {
  margin: 18px 0 0;
  text-align: center;
  font-family: var(--sv-fuente-ui);
  font-size: 13px;
  line-height: 1.55;
  color: var(--sv-mute);
}
.lg-samp .lg-nota a { color: var(--sv-rosa); font-weight: 700; text-decoration: none; }
.lg-samp .lg-nota a:hover { text-decoration: underline; }
.lg-samp .lg-nota a:focus-visible { outline: 2px solid var(--sv-lima); outline-offset: 2px; }

/* ---------------------------------------------------------------------
   VOLVER — pastilla oscura, ya no fija/flotante: en el diseño de
   Vanessa vive dentro de la columna de marca, arriba del todo.
--------------------------------------------------------------------- */
.lg-samp .lg-volver {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  min-height: 44px;
  padding: 10px 14px;
  margin-bottom: 18px;
  border: 1px solid var(--sv-linea);
  border-radius: 999px;
  background: #0F0F0F;
  color: var(--sv-texto);
  font-family: var(--sv-fuente-ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.lg-samp .lg-volver:hover { color: var(--sv-lima); border-color: var(--sv-lima); }
.lg-samp .lg-volver:focus-visible { outline: 2px solid var(--sv-lima); outline-offset: 3px; }

@media (min-width: 720px) {
  .lg-samp .lg-envoltura { position: relative; }
  .lg-samp .lg-volver { position: absolute; top: 40px; left: 48px; margin-bottom: 0; }
  .lg-samp .lg-marca-col { padding-top: 64px; }
}
@media (min-width: 1100px) {
  .lg-samp .lg-volver { top: 48px; left: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  .lg-samp .lg-tarjeta { animation: none; }
}