/* =========================================================
   PASE GOL · ADIDAS
========================================================= */


/* =========================================================
   VARIABLES
========================================================= */

:root {

  --pg-black: #050505;
  --pg-black-soft: #111111;

  --pg-blue: #0066b2;
  --pg-blue-light: #42a5f5;

  --pg-white: #ffffff;
  --pg-light: #f4f6f8;

  --pg-gray: #697078;
  --pg-gray-light: #e5e8eb;

  --pg-radius: 18px;

}


/* =========================================================
   RESET
========================================================= */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {

  margin: 0;

  font-family:
    "Trebuchet MS",
    Arial,
    Helvetica,
    sans-serif;

  color: #111;

  background:
    linear-gradient(
      rgba(0, 0, 0, 0.04),
      rgba(0, 0, 0, 0.04)    ),
    url("img_generales/cesped.png");

  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;

}

a {

  color: inherit;

  text-decoration: none;

}

img {

  max-width: 100%;

}


/* =========================================================
   HEADER
========================================================= */

.pg-header {

  position: sticky;

  top: 0;

  z-index: 100;

  background:
    rgba(5,8,13,0.94);

  backdrop-filter:
    blur(14px);

  border-bottom:
    1px solid rgba(255,255,255,0.12);

}


.pg-header__container {

  width:
    min(1380px,94%);

  min-height:
    76px;

  margin:
    auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    24px;

  position:
    relative;

}


/* =========================================================
   LOGO
========================================================= */

.pg-brand {

  display:
    flex;

  align-items:
    center;

  flex-shrink:
    0;

}


.pg-brand img {

  height:
    80px;

  width:
    auto;

  display:
    block;

  transition:
    transform 0.25s ease;

}


.pg-brand:hover img {

  transform:
    scale(1.04);

}


/* =========================================================
   PELOTA
========================================================= */

.giratoria {

  width:
    33px;

  height:
    33px;

  object-fit:
    contain;

  position:
    absolute;

  left:
    121px;

  top:
    22px;

  z-index:
    9999;

  pointer-events:
    none;

  transition:
    transform 0.1s linear;

}


/* =========================================================
   MENÚ
========================================================= */

.pg-tabs {

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  flex:
    1;

}


.newmenuboton1,
.newmenuboton2 {

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    9px 17px;

  border-radius:
    999px;

  border:
    1px solid rgba(148,163,184,0.45);

  background:
    rgba(15,23,42,0.85);

  color:
    #e8edf2;

  font-size:
    13px;

  font-weight:
    700;

  letter-spacing:
    0.3px;

  white-space:
    nowrap;

  transition:
    transform 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;

}


.newmenuboton1:hover {

  transform:
    translateY(-2px);

  background:
    rgba(0,102,178,0.22);

  border-color:
    var(--pg-blue-light);

  box-shadow:
    0 5px 18px rgba(0,0,0,0.25);

}


/* =========================================================
   ADIDAS ACTIVO
========================================================= */

.pg-tabs .activo {

  background:
    linear-gradient(
      90deg,
      #0066b2,
      #00a3e0
    );

  color:
    #ffffff;

  border-color:
    transparent;

  box-shadow:
    0 4px 18px rgba(0,102,178,0.35);

}


/* =========================================================
   REDES
========================================================= */

.pg-social {

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  flex-shrink:
    0;

}


.pg-social a {

  width:
    35px;

  height:
    35px;

  display:
    flex;

  transition:
    transform 0.2s ease;

}


.pg-social a:hover {

  transform:
    translateY(-3px)
    scale(1.08);

}


.pg-social img {

  width:
    100%;

  height:
    100%;

  object-fit:
    contain;

  border-radius:
    50%;

}


/* =========================================================
   CONTENEDOR GENERAL
========================================================= */

.page {

  width:
    min(1380px,94%);

  margin:
    26px auto 50px;

  background:
    rgba(248,249,250,0.97);

  border-radius:
    28px;

  overflow:
    hidden;

  box-shadow:
    0 20px 70px rgba(0,0,0,0.30);

}


/* =========================================================
   HERO
========================================================= */

.hero {

  position:
    relative;

  overflow:
    hidden;

  background:

    radial-gradient(
      circle at 80% 20%,
      rgba(0,102,178,0.25),
      transparent 35%
    ),

    linear-gradient(
      135deg,
      #050505 0%,
      #111111 55%,
      #062e50 100%
    );

  color:
    white;

}


.hero::after {

  content:
    "";

  position:
    absolute;

  left:
    0;

  right:
    0;

  bottom:
    0;

  height:
    5px;

  background:
    linear-gradient(
      90deg,
      #000000,
      #ffffff,
      #000000
    );

}


.hero-inner {

  width:
    min(1180px,90%);

  min-height:
    440px;

  margin:
    auto;

  display:
    grid;

  grid-template-columns:
    1.15fr 0.85fr;

  align-items:
    center;

  gap:
    70px;

  padding:
    65px 0;

}


.eyebrow {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    8px;

  font-size:
    12px;

  font-weight:
    800;

  letter-spacing:
    2px;

  color:
    var(--pg-blue-light);

  margin-bottom:
    16px;

}


.hero h1 {

  margin:
    0;

  font-size:
    clamp(50px,7vw,90px);

  line-height:
    0.92;

  letter-spacing:
    -4px;

  text-transform:
    uppercase;

}


.hero h1 strong {

  display:
    block;

  color:
    var(--pg-blue-light);

}


.hero-copy > p {

  max-width:
    650px;

  margin:
    28px 0 0;

  color:
    #cbd5d8;

  font-size:
    18px;

  line-height:
    1.7;

}


.hero-note {

  margin-top:
    28px;

  padding:
    16px 20px;

  border-left:
    3px solid var(--pg-blue);

  background:
    rgba(255,255,255,0.05);

  max-width:
    560px;

}


.hero-note span {

  display:
    block;

  font-size:
    11px;

  font-weight:
    900;

  letter-spacing:
    1.5px;

  color:
    white;

}


.hero-note p {

  margin:
    7px 0 0;

  color:
    #aeb8be;

  line-height:
    1.5;

  font-size:
    13px;

}


/* =========================================================
   HERO ADIDAS
========================================================= */

.hero-visual {

  display:
    flex;

  justify-content:
    center;

}


.adidas-hero-image {

  width:
    min(390px,100%);

  aspect-ratio:
    1 / 1;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    45px;

  border-radius:
    50%;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.18),
      rgba(255,255,255,0.03)
    );

  border:
    1px solid rgba(255,255,255,0.2);

  box-shadow:
    0 25px 70px rgba(0,0,0,0.5);

}


.adidas-hero-image img {

  width:
    100%;

  height:
    100%;

  object-fit:
    contain;

}


/* =========================================================
   SECCIONES
========================================================= */

.intro-section,
.football-section {

  width:
    min(1180px,90%);

  margin:
    auto;

  padding:
    75px 0;

}


.section-heading {

  max-width:
    760px;

  margin:
    0 auto 45px;

  text-align:
    center;

}


.eyebrow.dark {

  color:
    #111;

}


.section-heading h2 {

  margin:
    0;

  font-size:
    clamp(32px,5vw,52px);

  line-height:
    1.05;

  letter-spacing:
    -1px;

}


.section-heading h2 strong {

  color:
    var(--pg-blue);

}


.section-heading p {

  margin:
    18px auto 0;

  max-width:
    650px;

  color:
    var(--pg-gray);

  font-size:
    17px;

  line-height:
    1.7;

}


/* =========================================================
   GALERÍA ADIDAS
========================================================= */

.adidas-gallery {

  display:
    grid;

  grid-template-columns:
    repeat(2,1fr);

  gap:
    25px;

}


.adidas-card {

  min-height:
    300px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  overflow:
    hidden;

  background:
    white;

  border:
    1px solid #e1e5e8;

  border-radius:
    var(--pg-radius);

  box-shadow:
    0 10px 30px rgba(0,0,0,0.07);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;

}


.adidas-card:hover {

  transform:
    translateY(-6px);

  box-shadow:
    0 18px 40px rgba(0,0,0,0.14);

}


.adidas-card img {

  width:
    100%;

  height:
    100%;

  max-height:
    330px;

  object-fit:
    contain;

  transition:
    transform 0.35s ease;

}


.adidas-card:hover img {

  transform:
    scale(1.04);

}


/* =========================================================
   CLUBES
========================================================= */

.football-section {

  padding-top:
    25px;

}


.clubs-grid {

  display:
    grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:
    25px;

}


.club-card {

  min-height:
    250px;

  padding:
    25px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    white;

  border:
    1px solid #e1e5e8;

  border-radius:
    var(--pg-radius);

  box-shadow:
    0 10px 30px rgba(0,0,0,0.07);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;

}


.club-card:hover {

  transform:
    translateY(-7px);

  box-shadow:
    0 18px 40px rgba(0,0,0,0.14);

}


.club-card img {

  width:
    85%;

  max-height:
    200px;

  object-fit:
    contain;

  transition:
    transform 0.3s ease;

}


.club-card:hover img {

  transform:
    scale(1.07);

}


/* =========================================================
   IMAGEN PRINCIPAL
========================================================= */

.main-adidas-image {

  margin-top:
    30px;

  border-radius:
    var(--pg-radius);

  overflow:
    hidden;

  background:
    #ffffff;

  box-shadow:
    0 12px 35px rgba(0,0,0,0.10);

}


.main-adidas-image img {

  display:
    block;

  width:
    100%;

  height:
    auto;

}


/* =========================================================
   MENSAJE FINAL
========================================================= */

.adidas-message {

  position:
    relative;

  background:
    linear-gradient(
      135deg,
      #050505,
      #111111 55%,
      #06365d
    );

  color:
    white;

}


.adidas-message-inner {

  width:
    min(900px,90%);

  margin:
    auto;

  padding:
    85px 0;

  text-align:
    center;

}


.adidas-message h2 {

  margin:
    0;

  font-size:
    clamp(38px,6vw,65px);

  line-height:
    1;

  text-transform:
    uppercase;

  letter-spacing:
    -2px;

}


.adidas-message h2 strong {

  display:
    block;

  color:
    var(--pg-blue-light);

}


.adidas-message p {

  max-width:
    750px;

  margin:
    28px auto 0;

  color:
    #cbd5d8;

  font-size:
    17px;

  line-height:
    1.7;

}


.adidas-message .small-note {

  max-width:
    650px;

  margin-top:
    35px;

  padding-top:
    20px;

  border-top:
    1px solid rgba(255,255,255,0.15);

  font-size:
    11px;

  line-height:
    1.6;

  color:
    #89949c;

}


/* =========================================================
   FOOTER
========================================================= */

.pg-footer {

  background:
    #080b0e;

  color:
    #d8dee2;

}


.footer-inner {

  width:
    min(1180px,90%);

  min-height:
    85px;

  margin:
    auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    25px;

  font-size:
    12px;

}


.footer-inner > div {

  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;

}


.footer-inner strong {

  color:
    white;

  font-size:
    15px;

}


.footer-inner span {

  color:
    var(--pg-blue-light);

  font-size:
    10px;

  letter-spacing:
    1px;

  text-transform:
    uppercase;

}


.footer-inner a {

  color:
    var(--pg-blue-light);

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width:1100px) {

  .pg-header__container {

    flex-wrap:
      wrap;

    justify-content:
      center;

    padding:
      12px 0;

  }


  .pg-brand {

    width:
      100%;

    justify-content:
      center;

  }


  .giratoria {

    display:
      none;

  }


  .pg-tabs {

    flex:
      none;

  }


  .adidas-gallery {

    grid-template-columns:
      repeat(2,1fr);

  }

}


@media (max-width:800px) {

  .hero-inner {

    grid-template-columns:
      1fr;

    text-align:
      center;

    gap:
      40px;

  }


  .hero-copy > p {

    margin-left:
      auto;

    margin-right:
      auto;

  }


  .hero-note {

    margin-left:
      auto;

    margin-right:
      auto;

    text-align:
      left;

  }


  .hero-visual {

    order:
      -1;

  }


  .adidas-hero-image {

    width:
      260px;

  }


  .adidas-gallery {

    grid-template-columns:
      1fr;

  }


  .clubs-grid {

    grid-template-columns:
      1fr;

  }


  .footer-inner {

    padding:
      25px 0;

    flex-direction:
      column;

    text-align:
      center;

  }

}


@media (max-width:560px) {

  .pg-header__container {

    width:
      96%;

  }


  .pg-brand img {

    height:
      50px;

  }


  .pg-tabs {

    gap:
      4px;

  }


  .newmenuboton1,
  .newmenuboton2 {

    padding:
      7px 9px;

    font-size:
      10px;

  }


  .pg-social a {

    width:
      30px;

    height:
      30px;

  }


  .page {

    width:
      96%;

    margin-top:
      10px;

    border-radius:
      18px;

  }


  .hero-inner {

    width:
      88%;

    padding:
      45px 0;

  }


  .hero h1 {

    font-size:
      52px;

  }


  .hero-copy > p {

    font-size:
      15px;

  }


  .intro-section,
  .football-section {

    width:
      88%;

    padding:
      55px 0;

  }


  .adidas-card {

    min-height:
      220px;

  }


  .club-card {

    min-height:
      200px;

  }


  .adidas-message-inner {

    width:
      88%;

    padding:
      60px 0;

  }

}

/* =========================================================
   SELECTOR DE IDIOMA PERSONALIZADO · PASE GOL
   Google Translate funciona por detrás y su interfaz original
   permanece completamente oculta.
========================================================= */

.google-translate-hidden,
#google_translate_element{

  position:absolute !important;

  width:1px !important;
  height:1px !important;

  overflow:hidden !important;

  opacity:0 !important;

  pointer-events:none !important;

  left:-9999px !important;
  top:-9999px !important;

  margin:0 !important;
  padding:0 !important;

}


#google_translate_element .goog-te-gadget,
#google_translate_element .goog-te-combo,
#google_translate_element img,
#google_translate_element span{

  display:none !important;

}


.goog-te-banner-frame,
.goog-te-balloon-frame,
.goog-logo-link,
.goog-te-gadget-icon{

  display:none !important;

}


body{

  top:0 !important;

}


/* CONTENEDOR DEL SELECTOR */

.pg-social .language-selector-custom{

  position:relative !important;

  width:78px !important;
  height:35px !important;

  display:flex !important;

  align-items:center !important;
  justify-content:center !important;

  flex:0 0 78px !important;

  z-index:1000 !important;

}


/* BOTÓN PRINCIPAL */

.pg-social .language-button{

  width:78px !important;
  height:35px !important;

  display:flex !important;

  align-items:center !important;
  justify-content:center !important;

  gap:5px !important;

  padding:0 9px !important;
  margin:0 !important;

  border:1px solid rgba(255,255,255,.18) !important;

  border-radius:999px !important;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.09),
      rgba(255,255,255,.035)
    ) !important;

  color:#ffffff !important;

  font-family:inherit !important;
  font-size:12px !important;
  font-weight:700 !important;

  line-height:1 !important;

  cursor:pointer !important;

  outline:none !important;

  box-shadow:
    0 6px 20px rgba(0,0,0,.18) !important;

  box-sizing:border-box !important;

  transition:
    border-color .2s ease,
    background .2s ease,
    transform .2s ease !important;

}


.pg-social .language-button:hover{

  transform:translateY(-1px) !important;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.14),
      rgba(255,255,255,.06)
    ) !important;

  border-color:var(--pg-blue-light) !important;

}


.pg-social .language-button:focus{

  border-color:var(--pg-blue-light) !important;

  box-shadow:
    0 0 0 3px rgba(66,165,245,.14),
    0 8px 25px rgba(0,0,0,.20) !important;

}


/* MUNDO */

.pg-social .language-world{

  display:inline-flex !important;

  align-items:center !important;
  justify-content:center !important;

  font-size:16px !important;
  line-height:1 !important;

}


/* IDIOMA ACTUAL */

.pg-social .language-current{

  color:#ffffff !important;

  font-size:12px !important;
  font-weight:800 !important;

}


/* FLECHA */

.pg-social .language-arrow{

  color:var(--pg-blue-light) !important;

  font-size:11px !important;
  line-height:1 !important;

}


/* MENÚ DESPLEGABLE */

.pg-social .language-menu{

  position:absolute !important;

  top:calc(100% + 9px) !important;
  right:0 !important;

  width:190px !important;

  padding:7px !important;

  display:none !important;

  flex-direction:column !important;

  gap:2px !important;

  background:#101827 !important;

  border:1px solid rgba(255,255,255,.16) !important;

  border-radius:14px !important;

  box-shadow:
    0 18px 45px rgba(0,0,0,.45) !important;

  z-index:99999 !important;

  box-sizing:border-box !important;

}


.pg-social .language-menu.open{

  display:flex !important;

}


/* OPCIONES */

.pg-social .language-menu button{

  width:100% !important;

  min-height:38px !important;
  height:38px !important;

  display:flex !important;

  align-items:center !important;

  padding:0 11px !important;
  margin:0 !important;

  border:0 !important;

  border-radius:8px !important;

  background:transparent !important;

  color:#ffffff !important;

  font-family:inherit !important;
  font-size:13px !important;
  font-weight:600 !important;

  line-height:1.2 !important;

  text-align:left !important;

  cursor:pointer !important;

  box-sizing:border-box !important;

  transition:
    background .18s ease,
    color .18s ease !important;

}


.pg-social .language-menu button:hover{

  background:rgba(66,165,245,.14) !important;

  color:var(--pg-blue-light) !important;

}


/* AJUSTE DE LAS REDES PARA EL NUEVO SELECTOR */

.pg-social{

  flex-wrap:nowrap;

}


/* MÓVIL */

@media (max-width:560px){

  .pg-social{

    width:100%;

    justify-content:center;

    flex-wrap:wrap;

  }


  .pg-social .language-selector-custom{

    width:42px !important;
    height:30px !important;

    flex-basis:42px !important;

  }


  .pg-social .language-button{

    width:42px !important;
    height:30px !important;

    padding:0 !important;

    gap:0 !important;

  }


  .pg-social .language-current,
  .pg-social .language-arrow{

    display:none !important;

  }


  .pg-social .language-world{

    font-size:17px !important;

  }


  .pg-social .language-menu{

    top:calc(100% + 8px) !important;

    right:0 !important;

  }

}