Default

<div class="gcf-fullwidth--full">
<div class="gcf-hero-page">

  <style>
    @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap');

    .gcf-hero-page{
      --gcf-rojo:#D5001C;
      --gcf-rojo-osc:#B50018;
      --gcf-negro:#0F0F0F;
      font-family:'Cairo',Arial,Helvetica,sans-serif;
      color:var(--gcf-negro);
      line-height:1.45;
      box-sizing:border-box;
      width:100%;
      overflow-x:hidden;
    }
    .gcf-hero-page *,.gcf-hero-page *::before,.gcf-hero-page *::after{box-sizing:border-box;}
    .gcf-hero-page img{max-width:100%;display:block;}

    /* Técnica full-bleed: hace que el bloque ocupe el 100% del ancho
       de la ventana aunque el sitio tenga un contenedor central más
       estrecho por defecto. */
    .gcf-fullwidth--full{
      width:100vw !important;
      position:relative !important;
      left:50% !important;
      right:50% !important;
      margin-left:-50vw !important;
      margin-right:-50vw !important;
      /* Tira del banner 44px hacia arriba: el módulo Hero de encima
         reserva más alto (808px) del que realmente ocupa su carrusel
         (764px), dejando un hueco vacío/transparente que se ve del
         color de fondo de la página. Con esto lo tapamos. Si esta
         página no lleva un Hero encima, o el hueco nativo tiene otra
         medida, puede que haya que ajustar o quitar este valor. */
      margin-top:-44px !important;
      overflow-x:hidden;
    }

    .gcf-wrap{max-width:1200px;margin:0 auto;padding:0 24px;}

    /* ===== Botón (mismo estilo que el resto del sitio) ===== */
    .gcf-hero-page .gcf-btn{
      display:inline-block;
      background:var(--gcf-rojo);
      color:#fff;
      text-decoration:none;
      font-weight:700;
      font-size:15px;
      padding:11px 26px;
      border-radius:6px;
      transition:background .2s ease;
      text-align:center;
    }
    .gcf-hero-page .gcf-btn:hover{background:var(--gcf-rojo-osc);}

    /* ===== HERO =====
       padding: 0 -> sin margen/aire arriba ni abajo, pegado a lo
       que haya justo encima y debajo en la página. */
    .gcf-hero{background:#fff;padding:0;}
    .gcf-hero-grid{
      display:grid;
      grid-template-columns:1fr 1.25fr;
      gap:48px;
      align-items:center;
    }
    .gcf-hero-titulo{max-width:460px;}
    .gcf-hero-titulo img{margin-bottom:28px;}
    .gcf-hero-escudo img{width:180px;height:auto;margin:0;}
    /* Espacio entre el escudo y el botón, mismo ritmo que el resto */
    .gcf-hero-titulo .gcf-btn{margin-top:48px;}
    .gcf-hero-vinetas img{width:100%;border-radius:4px;}

    @media(max-width:900px){
      .gcf-hero-grid{grid-template-columns:1fr;gap:36px;}
      .gcf-hero-titulo{max-width:100%;text-align:center;margin:0 auto;}
      .gcf-hero-escudo{display:flex;justify-content:center;}
    }
    @media(max-width:560px){
      .gcf-wrap{padding:0 16px;}
      .gcf-hero-escudo img{width:150px;}
    }
  </style>

  <section class="gcf-hero">
    <div class="gcf-wrap gcf-hero-grid">
      <div class="gcf-hero-titulo">
        <img src="https://statics-maker.llt-services.com/gra/images/2026/06/22/original/b95dcf7b-049e-4eee-b6f9-c858bf2a78f6-822.png" alt="El corazón está mal de la cabeza">
        <div class="gcf-hero-escudo">
          <img src="https://statics-maker.llt-services.com/gra/images/2026/06/22/original/d36c3040-8c63-46eb-a50e-fb903af1f123-1.png" alt="Granada CF 2026/27 Abónate">
        </div>
        <a href="https://www.granadacf.es/abono-primer-equipo" class="gcf-btn">MÁS INFO</a>
      </div>
      <div class="gcf-hero-vinetas">
        <img src="https://statics-maker.llt-services.com/gra/images/2026/07/07/original/f2e5831a-58c0-4632-ac95-c6af329b10fd-844.png" alt="Viñetas campaña Granada CF">
      </div>
    </div>
  </section>

</div>
</div>

<style>
  .gcf-entradas {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    background-image: url('https://statics-maker.llt-services.com/gra/images/2026/07/28/original/4660dc8f-5b5b-4207-bc5b-e51cd8e271e6-257.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #0F0F0F; /* de respaldo, por si la imagen tarda en cargar */
    padding: 48px 0;
    box-sizing: border-box;
  }

  .gcf-entradas-inner {
    max-width: 1680px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
  }

  .gcf-entradas-title {
    color: #ffffff;
    text-transform: uppercase;
    text-align: left;
    font-size: 44px;
    font-weight: 800;
    margin: 0 0 32px 0;
    line-height: 1.1;
  }

  .gcf-entradas-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }

  .gcf-entradas-card {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    border-radius: 16px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-color: #1a1a1a; /* de respaldo, por si alguna imagen tarda en cargar */
    text-decoration: none;
  }

  /* Degradado oscuro en la parte de abajo para que el texto se
     lea bien encima de cualquier imagen */
  .gcf-entradas-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.75) 100%);
  }

  .gcf-entradas-label {
    position: absolute;
    left: 16px;
    bottom: 16px;
    z-index: 2;
    color: #ffffff;
    font-size: 30px;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.2;
  }

  /* Responsive: tablet (2 columnas) y móvil (1 columna) */
  @media (max-width: 1024px) {
    .gcf-entradas-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (max-width: 560px) {
    .gcf-entradas-grid {
      grid-template-columns: repeat(1, 1fr);
    }
    .gcf-entradas-title {
      font-size: 36px;
    }
  }
</style>

<section class="gcf-entradas">
  <div class="gcf-entradas-inner">
    <h2 class="gcf-entradas-title">Entradas</h2>
    <div class="gcf-entradas-grid">
      <a
        href="https://entradas.granadacf.es/"
        class="gcf-entradas-card"
        style="background-image: url('https://statics-maker.llt-services.com/gra/images/2026/07/28/original/2eb86c62-547a-43e3-89d4-ba93cb29c4f5-434.png')"
      >
        <span class="gcf-entradas-label">Primer equipo</span>
      </a>
      <a
        href="https://www.granadacf.es/tour-or-nuevo-los-carmenes"
        class="gcf-entradas-card"
        style="background-image: url('https://statics-maker.llt-services.com/gra/images/2026/07/28/original/073f6ab1-e48f-44ba-a656-025b5db8502b-20.png')"
      >
        <span class="gcf-entradas-label">Tours</span>
      </a>
      <a
        href="https://entradas.granadacf.es/"
        class="gcf-entradas-card"
        style="background-image: url('https://statics-maker.llt-services.com/gra/images/2026/07/28/original/fff0d39a-3576-4a56-a122-050242bb1f84-884.png')"
      >
        <span class="gcf-entradas-label">Femenino</span>
      </a>
      <a
        href="https://entradas.granadacf.es/"
        class="gcf-entradas-card"
        style="background-image: url('https://statics-maker.llt-services.com/gra/images/2026/07/28/original/42feabf9-4165-409c-913d-a843c9130222-662.png')"
      >
        <span class="gcf-entradas-label">Recreativo</span>
      </a>
    </div>
  </div>
</section>

<style>
  .MkFootballMatchCard--card.MkFootballMatchCard--card {
    padding: 3px !important;
    padding-top: 16px !important;
    padding-bottom: 14px !important;
    padding-right: 16px !important;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.35) !important;
  }
  .kaKCoa {
    align-items: flex-start !important;
    gap: 0 !important;
  }

  /* ===== Cuerpo de la tarjeta: 2 columnas ===== */
  .gcf-card-body {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    width: 100%;
  }

  /* --- Columna izquierda: escudos + cuenta atrás --- */
  .gcf-left-col.gcf-left-col {
    display: flex;
    flex-direction: column;
    align-items: center !important;
    gap: 10px !important;
    flex-shrink: 0;
  }
  .gcf-crests {
    position: relative;
    display: flex;
    align-items: center;
  }
  .gcf-crests .kEfdVo.kEfdVo {
    width: 78px !important;
    height: 78px !important;
  }
  .gcf-crests .kEfdVo.kEfdVo:last-child {
    margin-left: 6px !important;
  }
  .gcf-vs {
    position: relative;
    z-index: 2;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #0F0F0F;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 -2px;
    flex-shrink: 0;
  }

  .gcf-countdown {
    display: flex;
    align-items: flex-end;
    gap: 4px;
  }
  .gcf-countdown-col {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .gcf-countdown-label {
    font-size: 11px;
    font-weight: 700;
    color: #9a9a9a;
    letter-spacing: 0.04em;
  }
  .gcf-countdown-num {
    font-size: 26px;
    font-weight: 800;
    color: #D5001C;
    line-height: 1.1;
  }
  .gcf-countdown-sep {
    font-size: 16px;
    font-weight: 700;
    color: #ccc;
    align-self: center;
  }

  /* --- Columna derecha: nombres / jornada / estadio / fecha-hora --- */
  .gcf-right-col.gcf-right-col {
    display: flex;
    flex-direction: column;
    gap: 0px;
    padding-top: 10px !important;
  }
  .gcf-names {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-bottom: 0px;
  }
  .gcf-names .MkFootballMatchCard__teamName.MkFootballMatchCard__teamName {
    font-size: 14px !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
  }
  /* Granada CF siempre en negrita; el rival, peso normal */
  .gcf-names .MkFootballMatchCard__teamName.gcf-own {
    font-weight: 800 !important;
  }
  .gcf-names .MkFootballMatchCard__teamName.gcf-opponent {
    font-weight: 500 !important;
  }

  .gcf-right-col .MkFootballMatchCard__matchWeek.MkFootballMatchCard__matchWeek {
    font-size: 11px !important;
    color: #9a9a9a !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    line-height: 1.2 !important;
    text-align: left !important;
    margin-top: 8px !important;
  }
  .gcf-right-col .MkFootballMatchCard__venue.MkFootballMatchCard__venue {
    font-size: 11px !important;
    color: #51606c !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
    text-align: left !important;
  }
  .gcf-datetime {
    font-size: 12px !important;
    color: #51606c !important;
    line-height: 1.2 !important;
    text-align: left !important;
  }

  /* ===== Fila inferior: botones abajo a la derecha ===== */
  .gcf-bottom-row {
    display: flex !important;
    justify-content: flex-end !important;
    width: 100%;
    margin-top: 0px;
  }
  .kmlBtd {
    display: flex !important;
    gap: 8px !important;
  }
  .kmlBtd .MkButton.MkButton {
    background-color: #ffffff !important;
    border: 1.5px solid #0F0F0F !important;
    border-radius: 6px !important;
    color: #0F0F0F !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    height: 32px !important; /* el nativo trae height:40px fijo, que
                                 no se reduce solo con el padding */
    padding: 0 16px !important;
  }

  /* ===== Logo de LaLiga, esquina superior derecha ===== */
  .gcf-laliga-logo {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 28px;
    height: auto;
  }

  /* ===== Título de la sección "Partidos" =====
     Este módulo no trae ningún título de sección de forma nativa
     (a diferencia de Actualidad o Jugadores), así que se crea uno
     desde cero con el script de abajo. Mismo tamaño y estilo que
     los demás títulos (44px, mayúsculas, centrado), pero en negro
     en vez de blanco, ya que el fondo de esta sección es claro. */
  .gcf-partidos-title {
    text-align: left;
    text-transform: uppercase;
    font-size: 44px;
    font-weight: 800;
    color: #000000;
    margin: 0 !important;
  }
  /* La cabecera nativa traía un gap de 32px entre el título y el
     carrusel de tarjetas, sumado al margen del título - entre los
     dos dejaban demasiado aire. Se reduce el gap a 0 (queda un
     resto de ~32px, del propio padding de las tarjetas). */
  .MkFootballModuleMatches__header.MkFootballModuleMatches__header {
    gap: 0px !important;
  }

  /* Responsive: móvil */
  @media (max-width: 560px) {
    .gcf-crests .kEfdVo.kEfdVo { width: 66px !important; height: 66px !important; }
    .gcf-vs { width: 20px !important; height: 20px !important; font-size: 8px !important; }
    .gcf-countdown-num { font-size: 22px; }
    .gcf-countdown-label { font-size: 9px; }
    .gcf-names .MkFootballMatchCard__teamName.MkFootballMatchCard__teamName { font-size: 12px !important; }
    .gcf-partidos-title { font-size: 36px; }
  }
</style>

<script>
(function () {
  function findFootballMatchesData() {
    let nextData;
    try {
      nextData = JSON.parse(document.getElementById('__NEXT_DATA__').textContent);
    } catch (e) {
      return null;
    }
    const grids = nextData?.props?.pageProps?.data?.page?.grids || [];
    for (const grid of grids) {
      for (const area of (grid.areas || [])) {
        for (const mod of (area.modules || [])) {
          if (mod.type === 'football_matches') return mod.data;
        }
      }
    }
    return null;
  }

  // Este módulo no trae de serie ningún título de sección (a
  // diferencia de Actualidad o Jugadores), así que se crea aquí.
  function addSectionTitle() {
    const header = document.querySelector('.MkFootballModuleMatches__header');
    if (!header || header.querySelector('.gcf-partidos-title')) return;
    const title = document.createElement('h2');
    title.className = 'gcf-partidos-title';
    title.textContent = 'Calendario';
    header.insertBefore(title, header.firstChild);
  }

  function processCards() {
    const data = findFootballMatchesData();
    if (!data) return false;

    const allMatches = [
      ...(data.previous || []),
      ...(data.current || []),
      ...(data.next || []),
    ];

    const cards = document.querySelectorAll(
      '.MkFootballMatchCard--status-pending:not([data-gcf-v4])'
    );
    if (!cards.length) return false;

    cards.forEach((card) => {
      card.setAttribute('data-gcf-v4', '1');

      // Logo de LaLiga, esquina superior derecha
      const laligaLogo = document.createElement('img');
      laligaLogo.className = 'gcf-laliga-logo';
      laligaLogo.src = 'https://statics-maker.llt-services.com/gra/images/2026/07/24/original/13ab6d83-aac6-4a9e-8575-ab2304dc43d6-768.webp';
      laligaLogo.alt = 'LaLiga Hypermotion';
      card.appendChild(laligaLogo);

      const wrapper = card.querySelector('.kaKCoa');
      const teamsRow = card.querySelector('.fBWcYW');
      const infoRow = card.querySelector('.ciJQWP');
      const btnWrap = card.querySelector('.kmlBtd');
      if (!wrapper || !teamsRow || !infoRow || !btnWrap || teamsRow.children.length < 3) return;

      const homeTeam = teamsRow.children[0];
      const timeDateBlock = teamsRow.children[1];
      const awayTeam = teamsRow.children[2];

      const homeNameEl = homeTeam.querySelector('.MkFootballMatchCard__teamName');
      const awayNameEl = awayTeam.querySelector('.MkFootballMatchCard__teamName');
      const homeShield = homeTeam.querySelector('.kEfdVo');
      const awayShield = awayTeam.querySelector('.kEfdVo');
      const matchWeekEl = infoRow.querySelector('.MkFootballMatchCard__matchWeek');
      const venueEl = infoRow.querySelector('.MkFootballMatchCard__venue');
      const timeEl = timeDateBlock.querySelector('.MkFootballMatchCard__time');
      const dateEl = timeDateBlock.querySelector('.MkFootballMatchCard__date');
      if (!homeNameEl || !awayNameEl || !matchWeekEl || !venueEl || !timeEl || !dateEl) return;

      const homeName = homeNameEl.textContent.trim();
      const awayName = awayNameEl.textContent.trim();
      const match = allMatches.find(
        (m) =>
          m.homeTeam?.shortName === homeName &&
          m.awayTeam?.shortName === awayName
      );

      // Granada CF siempre en negrita, el rival en peso normal
      homeNameEl.classList.add(homeName === 'Granada CF' ? 'gcf-own' : 'gcf-opponent');
      awayNameEl.classList.add(awayName === 'Granada CF' ? 'gcf-own' : 'gcf-opponent');

      // Fecha + hora combinadas ("15/08 - 19:00")
      let dateTimeText = dateEl.textContent.trim();
      if (match && match.date) {
        const parts = match.date.split('-');
        dateTimeText = `${parts[2]}/${parts[1]} - ${timeEl.textContent.trim()}`;
      }

      // ---- Construye el nuevo layout de 2 columnas ----
      const vs = document.createElement('span');
      vs.className = 'gcf-vs';
      vs.textContent = 'VS';

      const crests = document.createElement('div');
      crests.className = 'gcf-crests';
      crests.appendChild(homeShield);
      crests.appendChild(vs);
      crests.appendChild(awayShield);

      const countdown = document.createElement('div');
      countdown.className = 'gcf-countdown';

      const leftCol = document.createElement('div');
      leftCol.className = 'gcf-left-col';
      leftCol.appendChild(crests);
      leftCol.appendChild(countdown);

      const names = document.createElement('div');
      names.className = 'gcf-names';
      names.appendChild(homeNameEl);
      names.appendChild(awayNameEl);

      const datetime = document.createElement('div');
      datetime.className = 'gcf-datetime';
      datetime.textContent = dateTimeText;

      const rightCol = document.createElement('div');
      rightCol.className = 'gcf-right-col';
      rightCol.appendChild(names);
      rightCol.appendChild(matchWeekEl);
      rightCol.appendChild(venueEl);
      rightCol.appendChild(datetime);

      const cardBody = document.createElement('div');
      cardBody.className = 'gcf-card-body';
      cardBody.appendChild(leftCol);
      cardBody.appendChild(rightCol);

      teamsRow.remove();
      infoRow.remove();
      wrapper.insertBefore(cardBody, btnWrap);

      const bottomRow = document.createElement('div');
      bottomRow.className = 'gcf-bottom-row';
      wrapper.insertBefore(bottomRow, btnWrap);
      bottomRow.appendChild(btnWrap);

      // ---- Cuenta atrás (si el partido tiene hora confirmada) ----
      if (!match || !match.time) {
        countdown.remove();
        return;
      }
      countdown.innerHTML =
        '<div class="gcf-countdown-col"><span class="gcf-countdown-label">D\u00cdAS</span><span class="gcf-countdown-num" data-unit="d">00</span></div>' +
        '<span class="gcf-countdown-sep">:</span>' +
        '<div class="gcf-countdown-col"><span class="gcf-countdown-label">HORAS</span><span class="gcf-countdown-num" data-unit="h">00</span></div>' +
        '<span class="gcf-countdown-sep">:</span>' +
        '<div class="gcf-countdown-col"><span class="gcf-countdown-label">MINUTOS</span><span class="gcf-countdown-num" data-unit="m">00</span></div>';

      function tick() {
        const diff = new Date(match.time).getTime() - Date.now();
        if (diff <= 0) {
          countdown.remove();
          return;
        }
        const d = Math.floor(diff / 86400000);
        const h = Math.floor((diff % 86400000) / 3600000);
        const m = Math.floor((diff % 3600000) / 60000);
        countdown.querySelector('[data-unit="d"]').textContent = String(d).padStart(2, '0');
        countdown.querySelector('[data-unit="h"]').textContent = String(h).padStart(2, '0');
        countdown.querySelector('[data-unit="m"]').textContent = String(m).padStart(2, '0');
      }
      tick();
      setInterval(tick, 60000);
    });

    return true;
  }

  // Procesa las tarjetas que ya existan al cargar la página...
  addSectionTitle();
  processCards();

  // ...y vigila de forma PERMANENTE por si el carrusel crea o
  // vuelve a renderizar tarjetas más tarde (por ejemplo, al navegar
  // con las flechas entre partidos). Antes esto solo se comprobaba
  // durante los primeros ~10 segundos tras cargar, así que las
  // tarjetas que aparecían después se quedaban con el diseño nativo
  // sin restylear. Ahora no hay límite de tiempo: en cuanto el
  // carrusel añade o cambia una tarjeta, se reestiliza al momento.
  const observer = new MutationObserver(function () {
    addSectionTitle();
    processCards();
  });
  observer.observe(document.body, { childList: true, subtree: true });
})();
</script>

<style>
  .gcf-plus {
    background: #ffffff;
    padding: clamp(20px, 3vw, 40px) clamp(16px, 2vw, 24px);
    box-sizing: border-box;
  }

  .gcf-plus-card {
    max-width: 1560px;
    margin: 0 auto;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    min-height: clamp(320px, 40vw, 480px);
    display: flex;
    box-sizing: border-box;
    background-image: url('https://statics-maker.llt-services.com/gra/images/2026/07/28/original/7a74a7fd-cb63-409d-b9cb-68e4c6208dd0-267.png');
    background-size: cover; /* proporción de la caja muy cercana a
                                la real de la imagen (2140/1080),
                                así que el recorte que hace "cover"
                                es siempre mínimo, en cualquier
                                ancho, y no llega a tocar la
                                tablet/móvil de la imagen */
    background-position: center;
    background-repeat: no-repeat;
    background-color: #0F0F0F; /* de respaldo, por si la imagen tarda en cargar */
  }

  .gcf-plus-content {
    max-width: min(600px, 70%);
    box-sizing: border-box;
    padding: clamp(20px, 4vw, 40px) 0 clamp(20px, 4vw, 40px) clamp(24px, 5vw, 64px);
    margin: auto 0; /* centra el bloque verticalmente dentro de la
                        tarjeta (que es display:flex) */
    display: flex;
    flex-direction: column;
  }

  .gcf-plus-logo {
    height: clamp(36px, 6vw, 90px);
    width: auto;
    align-self: flex-start; /* evita que se estire a todo el ancho
                                (comportamiento por defecto de las
                                columnas flex) */
    margin-bottom: clamp(12px, 2.5vw, 32px);
    display: block;
  }

  .gcf-plus-heading {
    color: #ffffff;
    font-size: clamp(24px, 4vw, 56px);
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 clamp(10px, 2vw, 28px) 0;
  }

  .gcf-plus-text {
    color: rgba(255, 255, 255, 0.85);
    font-size: clamp(14px, 1.7vw, 24px);
    line-height: 1.4;
    margin: 0 0 clamp(16px, 4.5vw, 56px) 0;
    max-width: 620px;
  }

  .gcf-plus-btn {
    display: inline-block;
    width: fit-content;
    background-color: #D5001C;
    color: #ffffff;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    padding: clamp(10px, 1.4vw, 16px) clamp(20px, 3vw, 36px);
    border-radius: 14px;
    font-size: clamp(13px, 1.4vw, 20px);
    white-space: nowrap;
  }
</style>

<section class="gcf-plus">
  <div class="gcf-plus-card">
    <div class="gcf-plus-content">
      <img
        class="gcf-plus-logo"
        src="https://statics-maker.llt-services.com/gra/images/2026/07/28/original/27f1617d-c938-480f-9dfd-9f47d8df2ea3-469.png"
        alt="GranadaCF Plus"
      />
      <h2 class="gcf-plus-heading">¿Quieres conocer tu club como nunca antes?</h2>
      <p class="gcf-plus-text">
        Disfruta de GranadaCF Plus: entrevistas exclusivas, partidos de
        cantera y contenido premium, estés donde estés.
      </p>
      <a class="gcf-plus-btn" href="https://plus.granadacf.es">Accede</a>
    </div>
  </div>
</section>

<style>
  /* Rejilla a 4 columnas (antes 3) */
  .MkModuleLatestNews__layout {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  /* Título de la sección centrado de verdad, independientemente
     de dónde quede el botón "Ver más noticias" */
  .MkSectionHeader__titleBar {
    position: relative !important;
  }
  .MkSectionHeader__title {
    text-align: center !important;
    text-transform: uppercase !important;
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: max-content;
    font-size: 44px !important;
  }

  /* Más aire arriba del título de la sección (el "header" envuelve
     TODA la sección -título + tarjetas-, así que este padding-top
     es lo que separa el principio del módulo del título) */
  .MkModuleLatestNews__header.MkModuleLatestNews__header {
    padding-top: 32px !important;
  }

  /* Aire entre el título y las tarjetas. Nota: no vale con un
     padding-bottom en ".MkModuleLatestNews__header" para esto,
     porque ese contenedor envuelve tanto el título como las
     tarjetas - un padding-bottom ahí mete aire al final de TODA
     la sección, no debajo del título. Hay que separarlo en la
     propia barra del título. */
  .MkSectionHeader__titleBar.MkSectionHeader__titleBar {
    margin-bottom: 32px !important;
  }

  /* Oculta el botón "Ver más noticias" */
  .MkSectionHeader__button {
    display: none !important;
  }

  /* Más aire debajo de toda la sección, antes de la siguiente */
  .MkModuleLatestNews {
    padding-bottom: 56px !important;
  }

  /* ===== Las 3 tarjetas nativas =====
     Los selectores van con la clase repetida (ej. ".cYplci.cYplci")
     para blindar la especificidad: detecté que el sitio a veces
     regenera estas tarjetas y, sin este refuerzo, el orden y la
     proporción de imagen podían perderse en algunas tarjetas sí y
     en otras no (mismo problema que ya vimos en las tarjetas de
     partidos). */

  /* El contenedor de la imagen usa la técnica clásica de
     "padding-top en % simula la proporción" con la imagen real
     en position:absolute encima. El padding-top nativo era un
     valor fijo en px (306px) pensado para el diseño original a 3
     columnas; con la imagen puesta en position:absolute, cambiar
     el tamaño de la imagen en sí (o su aspect-ratio) NO tenía
     ningún efecto - había que cambiar este padding-top. */
  .MkNewsCard .MkNewsCard__imageContainer.MkNewsCard__imageContainer {
    padding-top: 66.6667% !important; /* proporción 3:2 */
  }

  /* La categoría llevaba un margin-top nativo de ~19.5px pensado
     para separarla del título cuando iba justo detrás. Al
     reordenarla para que vaya primero, ese margen se quedaba
     arriba del todo, separándola de la imagen en vez de pegarla. */
  .MkNewsCard .MkNewsCard__categoryAndDate.MkNewsCard__categoryAndDate {
    margin-top: 0 !important;
  }
  .MkNewsCard .MkNewsCard__infoContainer.MkNewsCard__infoContainer {
    padding-top: 12px !important;
  }

  .MkNewsCard .cYplci.cYplci {
    height: auto !important;
    aspect-ratio: 3 / 2 !important;
  }
  .MkNewsCard__infoContainer.MkNewsCard__infoContainer {
    display: flex !important;
    flex-direction: column !important;
  }
  .MkNewsCard__title.MkNewsCard__title {
    order: 2 !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
    -webkit-line-clamp: 2 !important;
    margin-top: 6px !important;
  }
  .MkNewsCard__categoryAndDate.MkNewsCard__categoryAndDate {
    order: 1 !important;
  }
  .MkNewsCard__categoryAndDate.MkNewsCard__categoryAndDate > :not(.MkNewsCard__category) {
    display: none !important;
  }

  /* ===== Las 5 tarjetas "extra", construidas por este mismo
     script a partir de /noticias, con el mismo aspecto visual
     que las nativas ===== */
  .gcf-news-card {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
  }
  .gcf-news-image-wrap {
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    position: relative;
  }
  .gcf-news-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .gcf-news-info {
    padding: 12px 4px 0;
  }
  .gcf-news-category {
    color: #D5001C;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    display: block;
    margin-bottom: 6px;
  }
  .gcf-news-title {
    font-size: 15px;
    font-weight: 700;
    color: rgb(16, 19, 22);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Responsive: tablet y móvil */
  @media (max-width: 1024px) {
    .MkModuleLatestNews__layout {
      grid-template-columns: repeat(2, 1fr) !important;
    }
  }
  @media (max-width: 560px) {
    .MkModuleLatestNews__layout {
      grid-template-columns: repeat(1, 1fr) !important;
    }
  }
</style>

<script>
(function () {
  function fixTitle() {
    const title = document.querySelector('.MkSectionHeader__title');
    if (title && title.textContent.trim() !== 'ACTUALIDAD') {
      title.textContent = 'ACTUALIDAD';
    }
  }

  let extraCardsAdded = false;

  async function addExtraCards() {
    if (extraCardsAdded) return;
    const layout = document.querySelector('.MkModuleLatestNews__layout');
    if (!layout) return;
    if (layout.querySelector('.gcf-news-card')) {
      extraCardsAdded = true;
      return;
    }
    if (layout.children.length !== 3) return;

    extraCardsAdded = true;

    try {
      const res = await fetch('/noticias');
      const html = await res.text();
      const match = html.match(/<script id="__NEXT_DATA__"[^>]*>([\s\S]*?)<\/script>/);
      if (!match) return;
      const data = JSON.parse(match[1]);
      const grids = data?.props?.pageProps?.data?.page?.grids || [];
      let items = null;
      for (const grid of grids) {
        for (const area of (grid.areas || [])) {
          for (const mod of (area.modules || [])) {
            if (Array.isArray(mod.data) && mod.data.length && mod.data[0]?.slug && mod.data[0]?.mainCategory) {
              items = mod.data;
            }
          }
        }
      }
      if (!items) return;

      const extra = items.slice(3, 8);

      extra.forEach((item) => {
        const a = document.createElement('a');
        a.className = 'gcf-news-card';
        a.href = '/noticias/' + item.slug;
        const imgUrl =
          item.image?.thumbnails?.xlarge ||
          item.image?.url ||
          '';
        a.innerHTML =
          '<div class="gcf-news-image-wrap">' +
          '<img src="' + imgUrl + '" alt="' + (item.title || '').replace(/"/g, '&quot;') + '">' +
          '</div>' +
          '<div class="gcf-news-info">' +
          '<span class="gcf-news-category">' + (item.mainCategory?.name || '') + '</span>' +
          '<div class="gcf-news-title">' + item.title + '</div>' +
          '</div>';
        layout.appendChild(a);
      });
    } catch (e) {
      extraCardsAdded = false;
    }
  }

  function run() {
    fixTitle();
    addExtraCards();
  }

  run();
  const observer = new MutationObserver(run);
  observer.observe(document.body, { childList: true, subtree: true });
})();
</script>

<style>
  /* ===== Fondo a todo el ancho =====
     Imagen de fondo definitiva de la sección. */
  .MkGrids__block--name-Jugadores.MkGrids__block--name-Jugadores.MkGrids__block--name-Jugadores {
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    background-color: #D5001C !important;
    background-image: url('https://statics-maker.llt-services.com/gra/images/2026/07/28/original/06b8e22f-632c-4810-9a8e-ef6c6bf2c49a-888.png') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }

  /* Esta sección usa una variable CSS propia del sitio
     (--card-shadow) para pintar una sombra nativa muy sutil en
     las tarjetas. Cambiar la propiedad box-shadow directamente no
     bastaba, y ponerla en el bloque exterior tampoco: la propia
     sección del módulo (".MkFootballModulePlayers") vuelve a
     definir esta variable por dentro, así que hay que anularla
     ahí exactamente, no más arriba. */
  .MkFootballModulePlayers.MkFootballModulePlayers {
    --card-shadow: none !important;
  }

  /* ===== Título "Jugadores" ===== */
  .MkFootballModulePlayers .MkSectionHeader__title {
    text-align: center !important;
    font-size: 44px !important;
  }

  /* ===== Formato de cada tarjeta ===== */
  /* Oculta el número gigante nativo (el número ahora va delante
     del nombre, en el mismo tamaño de letra) */
  .MkFootballModulePlayers__slideShirtNumber.MkFootballModulePlayers__slideShirtNumber {
    display: none !important;
  }
  /* Oculta minutos/goles/partidos (vacío en pretemporada) */
  .MkFootballModulePlayers__slidePlayerStats.MkFootballModulePlayers__slidePlayerStats {
    display: none !important;
  }

  /* La tarjeta (tanto la de la foto como la del texto - comparten
     la misma clase nativa) traía fondo blanco de serie. Se separa
     el tratamiento de cada una usando el slider contenedor
     (imagen vs texto) para distinguirlas, aunque compartan clase:
     - Foto: SIN borde (a petición), con la imagen de fondo
       definitiva que has pasado.
     - Texto: sin borde ni fondo, totalmente transparente. */
  .MkFootballModulePlayers__imageSlider .MkFootballModulePlayers__slide.MkFootballModulePlayers__slide.MkFootballModulePlayers__slide {
    border: none !important;
    background-color: #8A0015 !important; /* de respaldo, por si la imagen tarda en cargar */
    background-image: url('https://statics-maker.llt-services.com/gra/images/2026/07/28/original/548ef2df-10d4-45b5-9232-791428efbfa4-708.png') !important;
    background-size: cover !important;
    background-position: center !important;
    border-radius: 20px !important;
    overflow: hidden !important;
  }
  .MkFootballModulePlayers__infoSlider .MkFootballModulePlayers__slide.MkFootballModulePlayers__slide {
    border: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
  }

  /* El hueco nativo entre fotos era enorme (~146px, calculado por
     el propio carrusel), y con el marco puesto se notaba todavía
     más. Se reduce a un espacio normal entre tarjetas. */
  .MkFootballModulePlayers__imageSlider .splide__slide.splide__slide {
    margin-right: 16px !important;
  }

  /* El nombre/posición vive dentro de una rejilla (CSS grid) que
     el propio módulo genera con un ancho de columna calculado
     igual al del texto ("65px, 304px" tipo de cosa) - por eso
     "text-align: center" no tenía ningún efecto: la caja ya medía
     lo mismo que el texto, no había espacio donde centrar nada.
     Forzando la rejilla a una sola columna a ancho completo, el
     centrado empieza a funcionar de verdad, y además queda
     centrado respecto al ANCHO REAL de la foto de encima (los dos
     comparten el mismo punto central en la pantalla). */
  .MkFootballModulePlayers__infoSlider .MkFootballModulePlayers__slide.MkFootballModulePlayers__slide.MkFootballModulePlayers__slide {
    grid-template-columns: 100% !important;
  }
  .MkFootballModulePlayers__slidePlayerInfo.MkFootballModulePlayers__slidePlayerInfo.MkFootballModulePlayers__slidePlayerInfo {
    width: 100% !important;
  }
  .MkFootballModulePlayers__slideInfoContainer.MkFootballModulePlayers__slideInfoContainer.MkFootballModulePlayers__slideInfoContainer {
    width: 100% !important;
    justify-content: center !important;
  }

  .MkFootballModulePlayers__slidePlayerName.MkFootballModulePlayers__slidePlayerName.MkFootballModulePlayers__slidePlayerName {
    font-size: 28px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    text-align: center !important;
    color: #ffffff !important;
  }
  .MkFootballModulePlayers__slidePlayerPosition.MkFootballModulePlayers__slidePlayerPosition.MkFootballModulePlayers__slidePlayerPosition {
    font-size: 17px !important;
    text-align: center !important;
    color: #ffffff !important;
  }

  /* ===== Flechas nativas, recolocadas en medio de las fotos =====
     La posición (top/left/right) la calcula el JavaScript de más
     abajo en tiempo real; aquí se cambia su aspecto a círculo
     blanco semitransparente con borde negro, como en tu
     referencia. */
  .MkFootballModulePlayers__infoSlider .splide__arrow.splide__arrow.splide__arrow {
    z-index: 10 !important;
    background-color: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid #000000 !important;
    border-radius: 50% !important;
    color: #000000 !important;
  }
  .MkFootballModulePlayers__infoSlider .splide__arrow.splide__arrow.splide__arrow svg {
    color: #000000 !important;
    fill: #000000 !important;
  }

  /* ===== Flechas personalizadas (alternativa) =====
     Este bloque de estilos se queda preparado pero SIN USARSE por
     ahora (el script ya no las crea, ver más abajo) - cuando
     retomemos las flechas personalizadas, no hay que tocar nada
     aquí. */
  .MkFootballModulePlayers__imageSlider {
    position: relative;
  }
  .gcf-jug-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    color: #fff;
    padding: 0;
  }
  .gcf-jug-arrow:hover {
    background: rgba(255, 255, 255, 0.5);
  }
  .gcf-jug-arrow--prev {
    left: 12px;
  }
  .gcf-jug-arrow--next {
    right: 12px;
  }
</style>

<script>
(function () {
  function renameTitle() {
    const title = document.querySelector('.MkFootballModulePlayers .MkSectionHeader__title');
    if (title && title.textContent.trim() !== 'Jugadores') {
      title.textContent = 'Jugadores';
    }
  }

  // Refuerzo para la sombra nativa (--card-shadow): en pruebas, el
  // CSS de arriba no siempre ganaba por sí solo, así que además se
  // fuerza por JavaScript directamente sobre la sección. Si aun
  // así en algún momento vuelve a verse una sombra muy sutil bajo
  // el texto, es esta misma variable resistiéndose - avisa y lo
  // revisamos con más margen.
  function forceNoCardShadow() {
    const section = document.querySelector('.MkFootballModulePlayers');
    if (section) {
      section.style.setProperty('--card-shadow', 'none', 'important');
    }
  }

  // Las flechas nativas de "siguiente/anterior" viven dentro del
  // slider de texto (abajo del todo), no en el de las fotos - por
  // eso salían pegadas abajo. Sacarlas de ahí (moverlas de sitio
  // en el DOM) hace que Splide deje de reconocerlas y se rompan,
  // así que en vez de moverlas, se recalcula su posición (arriba,
  // centradas en la altura de las fotos) por JavaScript cada vez
  // que haga falta - así funciona igual en cualquier tamaño de
  // pantalla, sin depender de un número fijo de píxeles.
  function centerArrowsOnPhotos() {
    const imgSlider = document.querySelector('.MkFootballModulePlayers__imageSlider');
    const prevBtn = document.querySelector('.MkFootballModulePlayers__infoSlider .splide__arrow--prev');
    const nextBtn = document.querySelector('.MkFootballModulePlayers__infoSlider .splide__arrow--next');
    if (!imgSlider || !prevBtn || !nextBtn || !prevBtn.offsetParent) return;
    const parentRect = prevBtn.offsetParent.getBoundingClientRect();
    const imgRect = imgSlider.getBoundingClientRect();
    const centerY = imgRect.top - parentRect.top + imgRect.height / 2;
    prevBtn.style.position = 'absolute';
    prevBtn.style.top = centerY + 'px';
    prevBtn.style.left = (imgRect.left - parentRect.left + 12) + 'px';
    prevBtn.style.right = 'auto';
    prevBtn.style.transform = 'translateY(-50%)';
    nextBtn.style.position = 'absolute';
    nextBtn.style.top = centerY + 'px';
    nextBtn.style.right = (parentRect.right - imgRect.right + 12) + 'px';
    nextBtn.style.left = 'auto';
    nextBtn.style.transform = 'translateY(-50%)';
  }
  window.addEventListener('resize', centerArrowsOnPhotos);

  function combineNumberAndName() {
    const infoSlider = document.querySelector('.MkFootballModulePlayers__infoSlider');
    if (!infoSlider) return;
    const slides = infoSlider.querySelectorAll('.splide__slide');
    slides.forEach((slide) => {
      const nameEl = slide.querySelector('.MkFootballModulePlayers__slidePlayerName');
      const numEl = slide.querySelector('.MkFootballModulePlayers__slideShirtNumber');
      if (nameEl && numEl && !nameEl.dataset.gcfDone) {
        nameEl.dataset.gcfDone = '1';
        nameEl.textContent = numEl.textContent.trim() + '. ' + nameEl.textContent.trim();
      }
    });
  }

  // Simula un arrastre de exactamente una tarjeta de distancia,
  // midiendo en tiempo real la separación real entre dos tarjetas
  // (más fiable que un valor fijo). Incluye un reintento
  // automático: si tras el primer gesto no detecta cambio de
  // jugador activo, lo intenta una segunda vez. En mis pruebas,
  // la gran mayoría de las veces funciona a la primera; el
  // reintento es una red de seguridad para el resto de casos.
  function activePlayerName() {
    const el = document.querySelector(
      '.MkFootballModulePlayers__infoSlider .splide__slide.is-active .MkFootballModulePlayers__slidePlayerName'
    );
    return el ? el.textContent : null;
  }

  async function attemptDrag(direction) {
    const slides = document.querySelectorAll('.MkFootballModulePlayers__imageSlider .splide__slide');
    if (slides.length < 2) return;
    const step = Math.abs(
      slides[1].getBoundingClientRect().left - slides[0].getBoundingClientRect().left
    );
    const track = document.querySelector('.MkFootballModulePlayers__imageSlider .splide__track');
    if (!track) return;
    const rect = track.getBoundingClientRect();
    const y = rect.top + rect.height / 2;
    const dist = step * 0.6;
    const startX = rect.left + rect.width / 2;
    const endX = direction === 'next' ? startX - dist : startX + dist;

    function fire(type, Ctor, x) {
      track.dispatchEvent(
        new Ctor(type, {
          bubbles: true,
          cancelable: true,
          clientX: x,
          clientY: y,
          pointerId: 1,
          isPrimary: true,
          view: window,
        })
      );
    }

    fire('pointerdown', PointerEvent, startX);
    fire('mousedown', MouseEvent, startX);
    await new Promise((r) => setTimeout(r, 90));
    fire('pointermove', PointerEvent, (startX + endX) / 2);
    fire('mousemove', MouseEvent, (startX + endX) / 2);
    await new Promise((r) => setTimeout(r, 90));
    fire('pointermove', PointerEvent, endX);
    fire('mousemove', MouseEvent, endX);
    await new Promise((r) => setTimeout(r, 90));
    fire('pointerup', PointerEvent, endX);
    fire('mouseup', MouseEvent, endX);
  }

  async function dragOneCard(direction) {
    const before = activePlayerName();
    await attemptDrag(direction);
    await new Promise((r) => setTimeout(r, 700));
    if (activePlayerName() === before) {
      // No se detectó cambio: reintenta una vez más
      await attemptDrag(direction);
    }
  }

  function addArrows() {
    const imgSlider = document.querySelector('.MkFootballModulePlayers__imageSlider');
    if (!imgSlider || imgSlider.querySelector('.gcf-jug-arrow--prev')) return;

    const prevBtn = document.createElement('button');
    prevBtn.type = 'button';
    prevBtn.className = 'gcf-jug-arrow gcf-jug-arrow--prev';
    prevBtn.setAttribute('aria-label', 'Jugador anterior');
    prevBtn.innerHTML =
      '<svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M15 18l-6-6 6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>';
    prevBtn.addEventListener('click', () => dragOneCard('prev'));
    imgSlider.appendChild(prevBtn);

    const nextBtn = document.createElement('button');
    nextBtn.type = 'button';
    nextBtn.className = 'gcf-jug-arrow gcf-jug-arrow--next';
    nextBtn.setAttribute('aria-label', 'Jugador siguiente');
    nextBtn.innerHTML =
      '<svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M9 18l6-6-6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>';
    nextBtn.addEventListener('click', () => dragOneCard('next'));
    imgSlider.appendChild(nextBtn);
  }

  function run() {
    renameTitle();
    combineNumberAndName();
    forceNoCardShadow();
    centerArrowsOnPhotos();
    // addArrows(); // Desactivado por ahora: se deja el comportamiento
    // nativo del carrusel mientras se terminan de afinar los estilos.
    // Todo el código de las flechas personalizadas se queda aquí
    // debajo, listo para reactivar cuando lo retomemos - solo hay
    // que quitar el "//" de la línea de arriba.
  }

  run();
  // Vigilancia permanente: si el carrusel carga más jugadores más
  // tarde (scroll, nueva página de datos...), se les aplica el
  // mismo formato automáticamente.
  const observer = new MutationObserver(run);
  observer.observe(document.body, { childList: true, subtree: true });
})();
</script>