/* La portada de ¡Brisca!: el tapete, la madera y el latón del propio juego. */
  @font-face { font-family: 'Alfa'; src: url('/fuentes/alfa-slab-one.ttf') format('truetype'); font-display: swap; }
  @font-face { font-family: 'Barlow'; font-weight: 500; src: url('/fuentes/barlow-500.ttf') format('truetype'); font-display: swap; }
  @font-face { font-family: 'Barlow'; font-weight: 800; src: url('/fuentes/barlow-800.ttf') format('truetype'); font-display: swap; }
  :root {
    --tapete: #0f5c3e; --tapete-claro: #1a7c53; --tapete-oscuro: #062c1e;
    --madera: #4a2b12; --madera-clara: #5a3417; --madera-oscura: #25150a; --canto: #160c05;
    --laton: #d9a441; --laton-claro: #f7dc9a; --laton-oscuro: #8a5a17;
    --texto: #f6ecd8; --texto-suave: #c9b48f;
  }
  * { box-sizing: border-box; }
  /* Los móviles de la portada van en abanico y se asoman por los lados: que eso
     no le ponga a la página una barra para desplazarse de lado. */
  html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
  body {
    margin: 0; color: var(--texto);
    font: 500 18px/1.5 'Barlow', 'Avenir Next Condensed', 'Helvetica Neue', Arial, sans-serif;
    background:
      repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 2px, transparent 2px 9px),
      repeating-linear-gradient(-45deg, rgba(0,0,0,.05) 0 2px, transparent 2px 9px),
      radial-gradient(120% 80% at 30% 0%, var(--tapete-claro) 0%, var(--tapete) 42%, var(--tapete-oscuro) 100%);
    background-attachment: fixed;
    min-height: 100vh;
  }
  a { color: var(--laton-claro); }
  a:focus-visible { outline: 3px solid var(--laton-claro); outline-offset: 3px; border-radius: 4px; }
  .ancho { max-width: 1120px; margin: 0 auto; padding: 0 22px; }

  .cabecera { display: flex; align-items: center; justify-content: space-between; padding-top: 18px; padding-bottom: 6px; }
  .marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--laton-claro); font: 22px/1 'Alfa', Georgia, serif; }
  .marca img { width: 38px; height: 38px; border-radius: 9px; border: 1.5px solid var(--laton-oscuro); }
  .idioma { font-weight: 800; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
    padding: 7px 12px; border-radius: 999px; border: 1.5px solid rgba(217,164,65,.4); background: rgba(0,0,0,.28); }

  .portada { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 36px; align-items: center; padding-top: 34px; padding-bottom: 56px; }
  h1 { margin: 0; font: clamp(64px, 11vw, 128px)/.95 'Alfa', Georgia, serif; color: var(--laton-claro); letter-spacing: -.01em;
    text-shadow: 0 6px 0 var(--madera), 0 14px 30px rgba(0,0,0,.45); }
  .adorno { display: flex; align-items: center; gap: 9px; margin: 22px 0 20px; max-width: 300px; }
  .adorno b { flex: 1; height: 1.5px; background: linear-gradient(90deg, var(--laton), transparent); }
  .adorno b:last-child { transform: scaleX(-1); }
  .adorno i { width: 9px; height: 9px; background: var(--laton); transform: rotate(45deg); }
  .adorno i:nth-of-type(2) { width: 6px; height: 6px; }
  .lema { margin: 0 0 12px; font: 800 clamp(24px, 3.2vw, 34px)/1.12 'Barlow', sans-serif; text-transform: uppercase; letter-spacing: .02em; text-wrap: balance; }
  .entradilla { margin: 0 0 26px; max-width: 34em; color: var(--texto-suave); font-size: 19px; text-wrap: pretty; }
  .boton, .pronto { display: inline-flex; align-items: center; gap: 10px; padding: 15px 24px; border-radius: 14px;
    font: 800 19px/1 'Barlow', sans-serif; text-transform: uppercase; letter-spacing: .04em; }
  .boton { color: #3a2405; text-decoration: none; background: linear-gradient(160deg, var(--laton-claro), var(--laton));
    border: 1px solid #b0791f; box-shadow: 0 5px 0 var(--laton-oscuro), 0 14px 26px rgba(0,0,0,.35); }
  .boton:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--laton-oscuro); }
  .pronto { color: var(--laton-claro); background: linear-gradient(160deg, var(--madera-clara), #341d0c);
    border: 1.5px solid var(--laton-oscuro); box-shadow: 0 5px 0 var(--canto), 0 14px 26px rgba(0,0,0,.35); }
  .gratis { margin: 16px 0 0; font-weight: 800; font-size: 13.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-suave); }

  .moviles { display: flex; justify-content: center; align-items: center; }
  .moviles img { display: block; width: 38%; max-width: 250px; height: auto; aspect-ratio: 1320 / 2868; border-radius: 26px;
    border: 2px solid var(--laton); background: var(--tapete-oscuro); box-shadow: 0 22px 44px rgba(0,0,0,.55); }
  .moviles img:nth-child(1) { transform: rotate(-7deg) translate(18%, 5%); }
  .moviles img:nth-child(2) { position: relative; z-index: 1; width: 42%; max-width: 276px; }
  .moviles img:nth-child(3) { transform: rotate(7deg) translate(-18%, 5%); }

  .bloques { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding-bottom: 28px; }
  .tablon { padding: 3px; border-radius: 17px; background: var(--canto); border: 1.5px solid var(--laton-oscuro); box-shadow: 0 8px 18px rgba(0,0,0,.4); }
  .tablon > div { height: 100%; padding: 18px 18px 16px; border-radius: 13px; border: 1px solid rgba(217,164,65,.22);
    background: linear-gradient(165deg, var(--madera-clara), #341d0c); }
  h2 { margin: 0 0 10px; font: 800 19px/1.15 'Barlow', sans-serif; text-transform: uppercase; letter-spacing: .04em; color: var(--laton-claro); }
  .tablon ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; color: var(--texto-suave); font-size: 16.5px; line-height: 1.35; }
  .tablon li { padding-left: 16px; position: relative; }
  .tablon li::before { content: ''; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; background: var(--laton); transform: rotate(45deg); }

  .limpio { margin: 12px 0 44px; padding: 22px 24px; border-radius: 16px; background: rgba(9,5,2,.5); border: 1px solid rgba(217,164,65,.2); }
  .limpio h2 { font-size: 21px; }
  .limpio p { margin: 0; max-width: 46em; color: var(--texto-suave); }

  footer { padding: 22px 0 40px; border-top: 1px solid rgba(217,164,65,.22); color: var(--texto-suave); font-size: 15.5px; }
  footer nav { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-bottom: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: 14.5px; }
  footer p { margin: 0 0 4px; }

  /* La página de «no encontrada» (404.html). */
  .perdida { padding-top: 48px; padding-bottom: 80px; }
  .perdida .entradilla span { display: block; margin-top: 6px; opacity: .8; }

  @media (max-width: 900px) {
    .portada { grid-template-columns: 1fr; gap: 30px; padding-top: 22px; padding-bottom: 40px; }
    .bloques { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .moviles img { max-width: 210px; }
  }
  @media (max-width: 560px) {
    body { font-size: 17px; }
    .bloques { grid-template-columns: 1fr; }
    .boton, .pronto { width: 100%; justify-content: center; }
    .moviles { margin: 0 -8px; }
  }