/* ============================================================================
   FBF Digital · Presencia de escritorio
   ----------------------------------------------------------------------------
   TODO ESTE ARCHIVO VIVE DENTRO DE @media (min-width: 900px).

   No es una manera de ordenar el codigo: es la garantia de que el telefono no
   se toca. El sitio es una aplicacion instalable y la mayoria de los hinchas
   entra desde el celular; una regla suelta fuera del media query podria
   moverles el piso. Por debajo de 900px este archivo no existe.

   Y por eso mismo revertir es quitar una linea: el <link> de cada pagina.

   QUE SE CAMBIA Y POR QUE

   El sitio nacio como aplicacion: columna angosta, tarjetas chicas, todo
   pensado para el pulgar. En el telefono esta bien. En un monitor de 27
   pulgadas esa misma columna se ve como una tira en el medio de la pantalla,
   con mucho vacio a los costados — y ahi es donde pierde cuando se lo mira al
   lado de un sitio editorial.

   Se corrigen cuatro cosas, en orden de peso visual:

     1. El lienzo. De 1180 a 1320 px, con mas aire adentro.
     2. Las noticias. De tarjetas con una foto de 120 px arriba, a piezas
        altas donde la imagen ES la tarjeta y el texto se apoya sobre ella.
        Es el cambio que mas se nota.
     3. Los titulos de seccion. Mas grandes, con el enlace convertido en
        boton, para que cada bloque abra con jerarquia clara.
     4. El resto de las grillas. Escudos, jugadores y productos mas grandes,
        con mas separacion.

   El contenido no cambia. La estructura HTML no cambia. Los colores son los
   mismos de la marca: no se copia la paleta de nadie.
   ============================================================================ */

@media (min-width: 900px) {

  /* --------------------------------------------------------------------------
     1 · El lienzo
     -------------------------------------------------------------------------- */
  :root { --max-width: 1320px; }

  .app {
    margin-block: 16px;
    border-radius: 32px;
    border-color: rgba(255, 255, 255, .09);
    box-shadow: 0 40px 90px rgba(0, 0, 0, .38);
  }

  .app-header { padding-inline: 44px; }
  .app-header .brand img { height: 64px; }

  /* Un respiro mayor entre bloques: es lo que separa una pagina densa de una
     que se lee con calma. */
  .section { padding: 54px 44px 12px; }
  .section + .section { padding-top: 26px; }

  .quick-links,
  .clubs-grid,
  .players-grid,
  .products-grid,
  .stats-grid,
  .entity-nav,
  .info-block,
  .live-banner,
  .sponsors-strip { padding-inline: 44px; }

  .federation-social-section { margin-inline: 44px; }
  .promo-banner { margin-inline: 44px !important; }

  /* --------------------------------------------------------------------------
     2 · Cabecera de seccion
     -------------------------------------------------------------------------- */
  .section-head { margin-bottom: 24px; gap: 20px; }

  .section-head h2 {
    font-size: 1.7rem;
    line-height: 1.15;
    letter-spacing: -0.015em;
    font-weight: 850;
  }

  /* El "ver todas" pasa de enlace suelto a boton. Da un punto de apoyo a la
     derecha del titulo y equilibra la fila. */
  .section-head .see-all,
  .section-head a.see-all {
    flex: none;
    padding: 10px 20px;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: rgba(255, 255, 255, .05);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
  }

  .section-head .see-all:hover {
    background: rgba(79, 214, 140, .14);
    border-color: var(--border-accent);
    transform: translateY(-1px);
  }

  /* --------------------------------------------------------------------------
     3 · Noticias — el cambio principal
     ----------------------------------------------------------------------------
     Antes: foto de 120 px de alto y debajo una caja de texto. La imagen
     quedaba de adorno.

     Ahora la imagen ES la tarjeta y el texto se apoya sobre su parte baja con
     un degradado que lo sostiene. El degradado no es decoracion: sin el, un
     titulo claro sobre una foto clara no se lee. Va de casi opaco abajo a
     transparente al 62% de la altura, asi la foto se sigue viendo arriba y el
     texto tiene fondo firme justo donde esta.
     -------------------------------------------------------------------------- */
  .hscroll { gap: 24px; }

  .card-news {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    min-height: 420px;
    border-radius: 22px;
    border-color: rgba(255, 255, 255, .08);
    isolation: isolate;
    transition: transform .28s cubic-bezier(.2, .7, .3, 1), box-shadow .28s ease;
  }

  .card-news .thumb {
    position: absolute;
    inset: 0;
    height: 100%;
    border-radius: inherit;
    transition: transform .5s cubic-bezier(.2, .7, .3, 1);
  }

  .card-news::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
      to top,
      rgba(3, 12, 9, .94) 0%,
      rgba(3, 12, 9, .82) 26%,
      rgba(3, 12, 9, .34) 48%,
      rgba(3, 12, 9, 0) 62%
    );
    pointer-events: none;
  }

  .card-news .body {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: 2;
    padding: 26px 26px 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .card-news h3 {
    font-size: 1.3rem;
    line-height: 1.24;
    font-weight: 850;
    margin-top: 0;
    letter-spacing: -0.01em;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .5);
    /* Tres lineas como maximo: un titular largo no puede empujar la etiqueta
       fuera de la tarjeta. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* La etiqueta de categoria, como pastilla solida: sobre una foto, texto
     dorado suelto puede caer justo encima de una zona clara y perderse. */
  .card-news .tag {
    align-self: flex-start;
    order: -1;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--gold-500);
    color: #1a1200;
    font-size: 10.5px;
    font-weight: 900;
    letter-spacing: .07em;
  }

  .card-news .meta {
    margin-top: 0;
    font-size: 12px;
    color: rgba(255, 255, 255, .78);
    text-shadow: 0 1px 8px rgba(0, 0, 0, .6);
  }

  /* El movimiento al pasar el mouse es minimo a proposito: apenas confirma que
     la pieza es clicable. Una tarjeta que salta distrae. */
  .card-news:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 54px rgba(0, 0, 0, .46);
  }

  .card-news:hover .thumb { transform: scale(1.05); }

  /* Quien navega con teclado tiene que ver donde esta parado. */
  .card-news:focus-visible {
    outline: 2px solid var(--green-300);
    outline-offset: 3px;
  }

  /* --------------------------------------------------------------------------
     4 · Las demas grillas
     -------------------------------------------------------------------------- */
  .quick-links { gap: 14px; padding-block: 28px 32px; }
  .quick-links a { min-height: 122px; border-radius: 20px; }

  .clubs-grid { gap: 16px; }
  .home-club-card { flex-basis: 142px; min-height: 162px; border-radius: 20px; }
  .home-club-crest { width: 84px; height: 84px; }

  .players-grid { gap: 16px; }
  .products-grid { gap: 20px; }

  .staff-grid { gap: 20px; margin-inline: 44px; }
  .gallery-grid { gap: 16px; }

  /* Portadas mas generosas: en un monitor ancho, una franja baja se ve
     recortada. */
  .hero-cover-strip, .club-cover { aspect-ratio: 3.4 / 1; max-height: 380px; }
  .article-cover { aspect-ratio: 2 / 1; max-height: 560px; }
  .institutional-hero h1, .club-hero h1 { font-size: 2.7rem; letter-spacing: -0.02em; }

  /* La lectura de un articulo agradece una medida comoda y mas aire. */
  .article-body { max-width: 780px; padding: 46px 34px; font-size: 1.02rem; line-height: 1.75; }
}

/* ----------------------------------------------------------------------------
   Pantallas muy anchas: la tercera columna de noticias no tiene que estirarse
   hasta deformarse. A partir de 1500 px entra una cuarta.
   ---------------------------------------------------------------------------- */
@media (min-width: 1500px) {
  :root { --max-width: 1440px; }
  .section .hscroll { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .card-news { min-height: 400px; }
}

/* ----------------------------------------------------------------------------
   Respeta a quien pidio menos movimiento en la configuracion de su sistema.
   Va fuera del bloque de escritorio a proposito: la preferencia vale en
   cualquier tamano de pantalla.
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .card-news,
  .card-news .thumb,
  .section-head .see-all { transition: none; }
  .card-news:hover { transform: none; }
  .card-news:hover .thumb { transform: none; }
}