@font-face {
  font-family: "Futura LT Condensed Bold";
  src: url("Futura%20LT%20Condensed%20Bold.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Corte medio — condensed sin bold */
@font-face {
  font-family: "Futura LT Condensed";
  src: url("FuturaLT-Condensed.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   2. VARIABLES
   ============================================================ */

:root {
  /* Color */
  --rojo: #af0000; /* rojo de marca (cabeceras de tarjetas) */
  --rojo-titulo: #c00000; /* rojo de los títulos de sección        */
  --amarillo: #ffe83b; /* fondo de las píldoras                 */
  --gris: #cccccc; /* gris de las tarjetas                  */
  --texto: #1a1a1a;
  --linea: #333333;

  /* Medidas */
  --ancho-pagina: 1440px;
  --ancho-contenido: 1180px;
  --ancho-angosto: 980px;

  /* Tipografía */
  --fuente: "Futura LT Condensed Bold", "Arial Narrow", Arial, sans-serif;
  --fuente-medium: "Futura LT Condensed", "Arial Narrow", Arial, sans-serif;
}

/* ============================================================
   3. RESET Y BASE
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--fuente);
  font-synthesis: none; /* prohíbe al navegador falsificar grosor/itálica */
  color: var(--texto);
  background: #ffffff;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 0;
}

figure {
  margin: 0;
}

a {
  text-decoration: none;
  color: inherit;
}

h2,
h3,
p {
  margin: 0;
}

/* <strong> y <b> resaltan cambiando de FAMILIA, no de peso.
   Cada archivo trae un solo corte declarado en `normal`, así que el
   font-weight:bold que traen por defecto estos elementos no encontraría
   ninguna variante que cargar (y font-synthesis:none impide falsificarla). */
strong,
b {
  font-family: var(--fuente);
  font-weight: normal;
}

/* ============================================================
   4. ESTRUCTURA DE PÁGINA
   ============================================================ */

/* Ocupa siempre el 100% del ancho: los banners van a sangre completa
   y no quedan franjas blancas a los costados. */
.pagina {
  width: 100%;
  overflow-x: hidden; /* recorta las balotas que sobresalen */
  background: #ffffff;
}

/* Textura de fondo del cuerpo (cambia de carpeta en el media query) */
.contenido {
  background-image: url("imagenes/MOVIL/Fondo.webp");
  background-repeat: repeat-y;
  background-position: top center;
  background-size: 100% auto;
}

.contenedor {
  width: 100%;
  max-width: var(--ancho-contenido);
  margin: 0 auto;
  padding: 0 22px;
}

.contenedor--angosto {
  max-width: var(--ancho-angosto);
}

.seccion {
  position: relative; /* ancla de las balotas decorativas */
  padding: 34px 0;

  /* Franja sobrante cuando la pantalla supera el ancho del diseño (1440px).
     La usan solo las balotas que van DENTRO del marco, para que no se
     despeguen del contenido en monitores muy anchos.
     Las que asoman por el borde no la usan: van pegadas al borde real de la
     pantalla con un desplazamiento negativo, y .pagina las recorta. */
  --borde: max(0px, calc((100% - var(--ancho-pagina)) / 2));
}

/* ============================================================
   5. UTILIDADES
   ============================================================ */

/* Conmutador de imágenes por dispositivo */
.solo-pc {
  display: none;
}
.solo-movil {
  display: block;
}

.txt--centrado {
  text-align: center;
}

/* ============================================================
   6. SISTEMA DE TEXTO
   ============================================================ */

/* ---------- 6.1 Base ---------- */

.txt {
  margin: 0 0 14px;
}

/* ---------- 6.2 Rasgos compartidos ---------- */

/* Titulares en rojo */
.txt--titulo,
.txt--modo {
  color: var(--rojo-titulo);
  text-align: center;
}

/* Textos secundarios centrados */
.txt--subtitulo,
.txt--nota,
.txt--sorteo,
.txt--fecha {
  text-align: center;
}

/* Bloques en corte medio (condensed sin bold).
   Añade .txt--medium a cualquier elemento que quieras en este trazo. */
.txt--medium,
.txt--parrafo,
.txt--pill,
.txt--nota {
  font-family: var(--fuente-medium);
}

/* ---------- 6.3 Variantes ---------- */

/* Párrafo de texto corrido */
.txt--parrafo {
  font-family: "Futura LT Condensed";
  font-size: 27px;
  line-height: 1.5;
}

/* Título rojo de sección */
.txt--titulo {
  font-size: clamp(30px, 7vw, 50px);
  line-height: 1.05;
  margin-bottom: 8px;
  margin-top: -8%;
}

/* Subtítulo negro bajo el título */
.txt--subtitulo {
  font-family: "Futura LT Condensed";
  font-size: clamp(16px, 3.6vw, 33px);
  margin-bottom: 22px;
}

/* "Manual" / "Automática" */
.txt--modo {
  font-size: clamp(28px, 6.5vw, 40px);
  margin-bottom: 10px;
  margin-top: 20px;
}

/* Píldora amarilla */
.txt--pill {
  display: block;
  width: fit-content;
  min-width: 320px;
  max-width: 100%; /* evita desbordar en pantallas muy angostas */
  margin: 0 auto 16px;
  padding: 8px 22px;
  background: var(--amarillo);
  border-radius: 30px;
  font-size: clamp(16px, 4vw, 35px);
  text-align: center;
}

/* Nota legal pequeña */
.txt--nota {
  font-family: "Futura LT Condensed";
  font-size: 24px;
  line-height: 1.45;
  margin-top: 16px;
}

/* "Resultado sorteo #0000" */
.txt--sorteo {
  font-size: clamp(19px, 4.5vw, 26px);
  margin-bottom: 4px;
}

/* Fecha del sorteo */
.txt--fecha {
  font-size: 14px;
  margin-bottom: 26px;
}

/* Resalte rojo de las marcas "Baloto" y "Revancha" dentro del texto.
   Vuelve al corte grueso aunque el párrafo esté en el corte medio. */
.marca {
  font-family: var(--fuente);
  color: var(--rojo-titulo);
}

/* Descripciones de Manual y Automática.
   El número de líneas se controla con el ancho de la caja, no con <br>:
   así el corte se recalcula solo en cada pantalla y nunca queda una línea
   suelta. `text-wrap: balance` reparte las palabras para que las 5 líneas
   queden parejas y el bloque se lea como un cuerpo compacto. */
.txt.txt--desc-manual,
.txt.txt--desc-automatica {
  font-size: 19px;
  line-height: 1.45;
  max-width: 30ch; /* ← medido: 30ch = 5 líneas exactas en ambos textos */
  margin-inline: auto;
  text-wrap: balance;
}

.txt:empty {
  border: 1px dashed rgba(0, 0, 0, 0.16);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.015);
}

.txt--parrafo:empty {
  min-height: 7.5em;
}
.txt--titulo:empty {
  min-height: 1.6em;
}
.txt--subtitulo:empty {
  min-height: 1.6em;
}
.txt--modo:empty {
  min-height: 1.3em;
}
.txt--sorteo:empty {
  min-height: 1.5em;
}
.txt--fecha:empty {
  min-height: 1.5em;
}
.txt--pill:empty {
  min-height: 2.2em;
  border-style: dashed;
}

/* ============================================================
   7. COMPONENTES
   ============================================================ */

/* ---------- 7.1 Hero ---------- */

.hero img {
  width: 100%;
}

/* ---------- 7.2 Intro (Baloto / Revancha) ---------- */

.seccion--intro {
  padding-top: 26px;
}

.intro__cols {
  display: block;
}

/* En móvil las dos columnas se apilan separadas por una línea corta.
   Es de 1px y se desvanece hacia los extremos con un degradado, igual que
   la línea afilada de la imagen de referencia. */
.intro__col + .intro__col {
  position: relative;
}

.intro__col + .intro__col::before {
  content: "";
  display: block;
  width: 45%;
  height: 1px;
  margin: 8px auto 24px;
  background: linear-gradient(
    to right,
    transparent,
    var(--linea) 22%,
    var(--linea) 78%,
    transparent
  );
}

/* ---------- 7.3 Botonera principal ---------- */

.botonera {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: -16px;
}

.botonera__btn {
  flex: 0 1 46%;
  max-width: 240px;
  transition: transform 0.18s ease;
  margin-top: -16px;
}

.botonera__btn img {
  width: 100%;
}

.botonera__btn:hover {
  transform: translateY(-2px);
}

/* "Puntos de venta" ocupa su propia fila en móvil */
.botonera__btn--ancho {
  flex-basis: 100%;
  margin: 0 auto;
}

/* ---------- 7.4 Accesos rápidos flotantes ----------
   Dock fijo al viewport en la esquina inferior derecha: acompaña el scroll
   en móvil y en escritorio. Va anclado a la ventana, no a la página, así que
   el <aside> vive fuera de .pagina en el HTML (si estuviera dentro de un
   elemento con transform dejaría de comportarse como fijo).
   ------------------------------------------------------------ */

.accesos {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.accesos__item {
  display: block;
  width: 96px;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.3));
  transition: transform 0.18s ease;
}

.accesos__item:hover {
  transform: translateY(-3px);
}

/* Si el usuario pidió reducir animaciones, no se mueve al pasar por encima */
@media (prefers-reduced-motion: reduce) {
  .accesos__item {
    transition: none;
  }
  .accesos__item:hover {
    transform: none;
  }
}

/* ---------- 7.5 Figuras y botón CTA ---------- */

.figura img {
  margin: 0 auto;
}

.figura--como-jugar img {
  width: 100%;
  max-width: 784px;
}

.figura--planes img {
  width: 100%;
  max-width: 400px;
}
.figura--planes img + img {
  margin-top: 20px;
}

/* ---------- 7.5b Balotas de resultados ----------
   Cada balota es un <li> con la imagen de la bola como fondo y el número
   centrado encima. El tamaño se controla con una sola variable: --bola.
   ------------------------------------------------------------ */

.resultados {
  /* Diámetro de la balota. El min() con vw hace que las 6 quepan siempre
     en una sola fila, por angosta que sea la pantalla. */
  --bola: min(62px, 12.5vw);
  display: block;
  margin-top: 20px;
}

.resultados__grupo + .resultados__grupo {
  margin-top: 29px;
}

/* Los dos logos tienen proporciones distintas (el de Baloto es más alto que
   la etiqueta de Revancha). Se les reserva una caja de la MISMA altura y
   `object-fit: contain` centra cada uno dentro sin deformarlo: así las dos
   filas de balotas arrancan exactamente a la misma altura. */
.resultados__logo {
  width: 100%;
  max-width: 210px;
  height: 68px;
  object-fit: contain;
  object-position: center;
  margin: 0 auto 16px;
}

.balotas {
  display: flex;
  flex-wrap: nowrap; /* las 6 balotas siempre en la misma línea */
  justify-content: center;
  align-items: center;
  gap: calc(var(--bola) * 0.08);
  margin: 0;
  padding: 0;
  list-style: none;
}

.balota {
  position: relative;
  width: var(--bola);
  height: var(--bola);
  flex: 0 0 auto;
  background-image: url("imagenes/balotas/balota-amarilla.webp");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

/* Superbalota (la última de cada fila) */
.balota--super {
  background-image: url("imagenes/balotas/balota-roja.webp");
}

/* El número va centrado sobre la bola */
.balota__num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  /* Se escala con el diámetro para que nunca se salga de la bola */
  font-family: var(--fuente);
  font-size: calc(var(--bola) * 0.42);
  line-height: 1;
  color: #3a2600;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);

  /* Sube un pelo el número: el brillo de la bola desplaza su centro óptico */
  padding-bottom: calc(var(--bola) * 0.02);
}

.balota--super .balota__num {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

/* Subrayado del resultado. Solo cuando hay número: el guion de espera
   se deja sin subrayar. El grosor y la separación escalan con --bola
   para que se vea igual de proporcionado en móvil y en escritorio. */
.balota__num[data-lleno] {
  text-decoration: underline;
  text-decoration-thickness: max(1px, calc(var(--bola) * 0.03));
  text-underline-offset: calc(var(--bola) * 0.05);
}

/* Mientras no haya dato, el guion va más discreto */
.balota__num:not([data-lleno]) {
  opacity: 0.55;
}

.cta {
  display: block;
  width: 100%;
  max-width: 300px;
  margin: 28px auto 0;
  transition: transform 0.18s ease;
}

.cta:hover {
  transform: translateY(-2px);
}

/* ---------- 7.6 Formas de apostar ---------- */

.apuesta__cols {
  display: block;
}

.apuesta__col + .apuesta__col {
  position: relative;
}

.apuesta__col + .apuesta__col::before {
  content: "";
  display: block;
  width: 48%;
  height: 1px;
  margin: 10px auto 26px;
  background: linear-gradient(
    to right,
    transparent,
    var(--linea) 22%,
    var(--linea) 78%,
    transparent
  );
}

/* ---------- 7.7 Balotas decorativas ----------
   Elementos vacíos con imagen de fondo: así el media query intercambia
   la carpeta MOVIL / PC sin duplicar etiquetas en el HTML.
   ------------------------------------------------------------ */

.deco {
  position: absolute;
  z-index: 1;
  display: block;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  pointer-events: none;
}

/* Balota dorada "31" — borde izquierdo de la intro */
.deco--balota31 {
  background-image: url("imagenes/MOVIL/Balota%205.webp");
  width: 92px;
  height: 92px;
  left: -34px;
  bottom: -46px;
}

/* Balota roja pequeña — borde derecho de "¿Cómo jugar?" */
.deco--balota-roja {
  background-image: url("imagenes/MOVIL/Balota%203.webp");
  width: 86px;
  height: 81px;
  right: -30px;
  top: 42%;
}

/* Balota azul "27" — borde izquierdo de "Baloto + Revancha" */
.deco--balota27 {
  background-image: url("imagenes/MOVIL/Balota%204.webp");
  width: 150px;
  height: 149px;
  left: -66px;
  top: 44%;
}

/* Balota roja "42" — borde izquierdo de "Resultados recientes" */
.deco--balota42 {
  background-image: url("imagenes/MOVIL/balota%202%404x.webp");
  width: 150px;
  height: 126px;
  left: -62px;
  bottom: -14px;
}

/* Balota azul "23" — borde derecho de "Resultados recientes" */
.deco--balota23 {
  background-image: url("imagenes/MOVIL/balota%201%404x.webp");
  width: 118px;
  height: 149px;
  right: -34px;
  bottom: -46px;
}

/* ---------- 7.8 Banner inferior ---------- */

.banner-inferior img {
  width: 100%;
}

/* ---------- 7.9 Pie de página ---------- */

.pie {
  background: #ffffff;
  padding: 30px 22px 26px;
  text-align: center;
}

.pie__marcas img {
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
}

.pie__legales {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 26px;
  margin-top: 26px;
}

.pie__legal-item {
  max-height: 34px;
  width: auto;
}
.pie__legal-item[src*="autoriza"] {
  max-height: 26px;
}

/* ============================================================
   8. DESKTOP  ( ≥ 992px )
   ============================================================ */

@media (min-width: 992px) {
  /* --- Conmutador de imágenes --- */
  .solo-pc {
    display: block;
  }
  .solo-movil {
    display: none;
  }

  .contenido {
    background-image: url("imagenes/PC/Fondo.webp");
  }

  /* --- Estructura --- */
  .seccion {
    padding: 48px 0;
  }
  .seccion--intro {
    padding: 46px 0 40px;
  }

  /* --- Texto --- */
  .txt--parrafo {
    font-size: 23px;
  }
  .txt--parrafo:empty {
    min-height: 6em;
  }

  /* --- Intro a dos columnas con separador vertical --- */
  .intro__cols {
    font-size: 50%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 56px;
    max-width: 85%;
    margin: auto;
  }

  /* El mismo pseudoelemento del móvil se convierte en línea vertical:
     1px que se desvanece arriba y abajo, sin borde sólido. */
  .intro__col + .intro__col {
    padding-left: 67px;
  }
  .intro__col + .intro__col::before {
    position: absolute;
    left: 0;
    top: 4%;
    width: 1px;
    height: 92%;
    margin: 0;
    background: linear-gradient(
      to bottom,
      transparent,
      var(--linea) 16%,
      var(--linea) 84%,
      transparent
    );
  }

  /* --- Botonera: las tres en una sola fila --- */
  .botonera {
    gap: 26px;
    margin-top: 34px;
  }

  .botonera__btn,
  .botonera__btn--ancho {
    flex: 0 0 auto;
    width: 300px;
    max-width: none;
    margin: 0; /* anula el centrado propio del móvil */
  }

  /* --- Dock flotante: más grande en escritorio --- */
  .accesos {
    right: 26px;
    bottom: 26px;
    gap: 14px;
  }

  .accesos__item {
    width: 112px;
  }

  /* --- Figuras más anchas --- */
  .figura--como-jugar img {
    max-width: 790px;
  }
  .figura--planes img {
    max-width: 740px;
  }
  /* --- Balotas de resultados: los dos grupos lado a lado --- */
  .resultados {
    /* 6 balotas + 5 separaciones = 6.4 diámetros por columna.
       Con columnas de ~422px, 62px es el tope que entra holgado. */
    --bola: 62px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 56px;
    align-items: start;
    max-width: 900px;
    margin: 8px auto 0;
  }

  .resultados__grupo + .resultados__grupo {
    position: relative;
    margin-top: 0;
  }

  /* Misma línea fina y difuminada que separa las otras dos columnas,
     centrada en el hueco de la rejilla. */
  .resultados__grupo + .resultados__grupo::before {
    content: "";
    position: absolute;
    left: -28px;
    top: 4%;
    width: 1px;
    height: 92%;
    background: linear-gradient(
      to bottom,
      transparent,
      var(--linea) 16%,
      var(--linea) 84%,
      transparent
    );
  }

  .resultados__logo {
    max-width: 260px;
    height: 85px; /* proporcional al ancho: 260 / 3.08 */
    margin-bottom: 22px;
  }

  .cta {
    max-width: 250px;
    margin-top: 34px;
  }

  /* --- Formas de apostar a dos columnas --- */
  .apuesta__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 46px;
    max-width: 860px;
    margin: 0 auto;
  }

  .apuesta__col + .apuesta__col {
    padding-left: 46px;
  }
  .apuesta__col + .apuesta__col::before {
    position: absolute;
    left: 0;
    top: 4%;
    width: 1px;
    height: 92%;
    margin: 0;
    background: linear-gradient(
      to bottom,
      transparent,
      var(--linea) 16%,
      var(--linea) 84%,
      transparent
    );
  }

  /* --- Balotas: carpeta PC y posiciones de escritorio --- */
  .deco--balota31 {
    background-image: url("imagenes/PC/Balota%205.webp");
    width: 150px;
    height: 150px;
    left: calc(var(--borde) + 20px);
    top: 26px;
    bottom: auto;
  }

  .deco--balota-roja {
    background-image: url("imagenes/PC/Balota%203.webp");
    width: 118px;
    height: 111px;
    right: calc(var(--borde) + 26px);
    top: auto;
    bottom: -40px;
  }

  .deco--balota27 {
    background-image: url("imagenes/PC/Balota%204.webp");
    width: 250px;
    height: 248px;
    left: -70px;
    top: 6px;
  }

  .deco--balota42 {
    background-image: url("imagenes/PC/balota%202%404x.webp");
    width: 230px;
    height: 193px;
    left: -60px;
    bottom: -70px;
  }

  .deco--balota23 {
    background-image: url("imagenes/PC/balota%201%404x.webp");
    width: 200px;
    height: 252px;
    right: -30px;
    bottom: -110px;
  }

  /* --- Pie --- */
  .pie {
    padding: 40px 22px 34px;
  }
  .pie__marcas img {
    max-width: 720px;
  }
  .pie__legales img {
    width: 100%;
    max-width: 1060px;
  }
}

/* ============================================================
   9. MÓVIL  ( ≤ 991px )

   TODO lo específico de móvil vive aquí, agrupado por bloque.
   Los valores de arriba (secciones 6 y 7) quedan como los de escritorio:
   si retocas un tamaño allí y no quieres que afecte al teléfono, basta con
   poner el valor de móvil en este bloque.

   Se usa el selector doble `.txt.txt--loquesea` para ganarle a los ajustes
   individuales de la sección 6.4, que también son de dos clases.
   ============================================================ */

@media (max-width: 991px) {
  /* ---------- Ritmo general ---------- */
  .seccion {
    padding: 30px 0;
  }
  .seccion--intro {
    padding-top: 22px;
  }

  /* ---------- Textos ---------- */
  .txt.txt--parrafo {
    font-size: 20px;
  }

  .txt.txt--titulo {
    font-size: clamp(40px, 8vw, 36px);
    margin-top: 0; /* anula el -8% del escritorio */
    margin-bottom: 6px;
  }

  .txt.txt--subtitulo {
    font-size: 22px;
    margin-bottom: 18px;
  }

  .txt.txt--modo {
    font-size: clamp(26px, 8vw, 34px);
    margin-top: 14px;
    margin-bottom: 8px;
  }

  .txt.txt--pill {
    min-width: 0; /* que la píldora se ajuste al texto */
    padding: 7px 20px;
    font-size: 30px;
    margin-bottom: 14px;
  }

  /* El max-width va en `ch`, que escala con el tamaño de letra: con solo
     cambiar el font-size el bloque sigue saliendo a 5 líneas. */
  .txt.txt--desc-manual,
  .txt.txt--desc-automatica {
    font-size: 20px;
  }

  .txt.txt--nota {
    font-size: 21px;
  }

  .txt.txt--sorteo {
    font-size: 19px;
  }
  .txt.txt--fecha {
    font-size: 13px;
    margin-bottom: 20px;
  }

  /* ---------- Botonera ---------- */
  .botonera {
    gap: 12px;
    margin-top: 22px;
  }

  .botonera__btn {
    flex: 0 1 47%;
    max-width: 155px;
  }

  .botonera__btn--ancho {
    flex-basis: 100%;
    max-width: 175px;
  }

  /* Dock flotante: más discreto para no tapar contenido en pantalla chica */
  .accesos {
    right: 12px;
    bottom: 12px;
    gap: 10px;
  }

  .accesos__item {
    width: 70px;
  }

  /* ---------- Figuras y CTA ---------- */
  .figura--como-jugar img,
  .figura--planes img {
    max-width: 100%;
  }
  .figura--planes img + img {
    margin-top: 16px;
  }

  .cta {
    max-width: 230px;
    margin-top: 22px;
  }

  /* ---------- Balotas de resultados ---------- */
  .resultados__grupo + .resultados__grupo {
    margin-top: 22px;
  }

  .resultados__logo {
    max-width: 175px;
    height: 57px; /* proporcional al ancho: 175 / 3.08 */
    margin-bottom: 12px;
  }

  /* ---------- Balotas decorativas ----------
     Más pequeñas y menos metidas hacia dentro, para que asomen por el borde
     sin taparle nada al contenido. */
  .deco--balota31 {
    width: 76px;
    height: 76px;
    left: -28px;
    bottom: -34px;
  }

  .deco--balota-roja {
    width: 70px;
    height: 66px;
    right: -24px;
    top: 46%;
  }

  .deco--balota27 {
    width: 112px;
    height: 111px;
    left: -50px;
    top: 46%;
  }

  .deco--balota42 {
    width: 104px;
    height: 87px;
    left: -44px;
    bottom: -10px;
  }

  .deco--balota23 {
    width: 82px;
    height: 104px;
    right: -26px;
    bottom: -34px;
  }

  /* ---------- Pie ---------- */
  .pie {
    padding: 24px 18px 22px;
  }
  .pie__marcas img {
    max-width: 300px;
  }
  .pie__legales {
    gap: 12px 18px;
    margin-top: 18px;
  }
  .pie__legal-item {
    max-height: 26px;
  }
  .pie__legal-item[src*="autoriza"] {
    max-height: 20px;
  }
}

/* ============================================================
   10. MÓVIL PEQUEÑO  ( ≤ 380px )
   ============================================================ */

@media (max-width: 380px) {
  .contenedor {
    padding: 0 16px;
  }

  .botonera__btn {
    max-width: 142px;
  }
  .botonera__btn--ancho {
    max-width: 160px;
  }

  .accesos__item {
    width: 56px;
  }

  .deco--balota31 {
    width: 64px;
    height: 64px;
    left: -24px;
  }
  .deco--balota-roja {
    width: 58px;
    height: 55px;
    right: -20px;
  }
  .deco--balota27 {
    width: 94px;
    height: 93px;
    left: -42px;
  }
  .deco--balota42 {
    width: 88px;
    height: 74px;
    left: -38px;
  }
  .deco--balota23 {
    width: 70px;
    height: 88px;
    right: -22px;
  }
}