/*==================================================
  SUPPORT PAGE
==================================================*/

.support-page{
  background:
    radial-gradient(circle at top,#143327 0%,#081611 46%,#050908 100%);
  color:#eef4f1;
}

.support-page main{
  overflow:hidden;
}


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

.support-hero{
  position:relative;
  min-height:78vh;
  display:flex;
  align-items:center;
  isolation:isolate;
  overflow:hidden;
}

.support-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-3;

  background:
    linear-gradient(
      135deg,
      rgba(7,22,16,.97),
      rgba(7,22,16,.86) 52%,
      rgba(7,22,16,.72)
    );
}

.support-hero::after{
  content:"";
  position:absolute;
  right:-12%;
  bottom:-40%;
  width:620px;
  aspect-ratio:1;
  border-radius:50%;
  z-index:-2;

  background:
    radial-gradient(
      circle,
      rgba(210,169,73,.16),
      rgba(210,169,73,0) 68%
    );
}

.support-hero__layout{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) 360px;
  gap:4rem;
  align-items:center;
  padding-block:9rem 7rem;
}

.support-hero__copy{
  max-width:760px;
}

.support-hero h1{
  margin:.8rem 0 1.6rem;
  font-size:clamp(3rem,5vw,5rem);
  line-height:1.03;
  letter-spacing:-.035em;
}

.support-hero__intro{
  max-width:650px;
  margin:0;
  font-size:1.15rem;
  line-height:1.85;
  color:rgba(255,255,255,.82);
}


/*==================================================
  HERO - PANEL
==================================================*/

.support-hero__panel{
  padding:2.5rem;
  border:1px solid rgba(255,255,255,.08);
  border-radius:28px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.055),
      rgba(255,255,255,.018)
    );

  backdrop-filter:blur(14px);

  box-shadow:
    0 24px 70px rgba(0,0,0,.28);
}

.support-hero__panel > span{
  display:block;
  margin-bottom:1.3rem;

  font-size:.78rem;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;

  color:var(--color-accent);
}

.support-hero__panel strong{
  display:block;
  margin-bottom:1rem;
  font-size:1.5rem;
  line-height:1.35;
}

.support-hero__panel p{
  margin:0;
  line-height:1.8;
  color:rgba(255,255,255,.72);
}
/*==================================================
  ENCABEZADOS DE SECCIÓN
==================================================*/

.support-page .section-heading{
  max-width:760px;
  margin-bottom:3rem;
}

.support-page .section-heading h2{
  margin:.8rem 0 1rem;
  font-size:clamp(2.2rem,4vw,3.6rem);
  line-height:1.08;
  letter-spacing:-.025em;
}

.support-page .section-heading > p:last-child{
  margin:0;
  line-height:1.8;
  color:rgba(255,255,255,.74);
}


/*==================================================
  CENTRO DE AYUDA
==================================================*/

.support-center{
  padding:7rem 0;
}

.support-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1.5rem;
}

.support-card{
  min-height:250px;
  padding:2rem;
  border:1px solid rgba(255,255,255,.08);
  border-radius:24px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.045),
      rgba(255,255,255,.015)
    );

  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

.support-card:hover{
  transform:translateY(-6px);
  border-color:rgba(255,255,255,.16);
  box-shadow:0 20px 55px rgba(0,0,0,.2);
}

.support-card h3{
  margin:0 0 1rem;
  font-size:1.45rem;
}

.support-card p{
  margin:0;
  line-height:1.8;
  color:rgba(255,255,255,.72);
}


/*==================================================
  PREGUNTAS FRECUENTES
==================================================*/

.support-faq{
  padding:7rem 0;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.018),
      rgba(255,255,255,.008)
    );
}

.faq-list{
  display:grid;
  gap:1rem;
}

.faq-item{
  padding:2rem 2.2rem;
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  background:rgba(255,255,255,.025);
}

.faq-item h3{
  margin:0 0 .8rem;
  font-size:1.25rem;
}

.faq-item p{
  margin:0;
  line-height:1.8;
  color:rgba(255,255,255,.72);
}
/*==================================================
  CONTACTO
==================================================*/

.support-contact{
  padding:7rem 0;
}

.contact-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.6rem;
}

.contact-card{
  padding:2.2rem;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.08);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.045),
      rgba(255,255,255,.015)
    );

  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

.contact-card:hover{
  transform:translateY(-6px);

  border-color:rgba(210,169,73,.28);

  box-shadow:
    0 22px 60px rgba(0,0,0,.22);
}

.contact-card h3{
  margin:0 0 1rem;
  font-size:1.45rem;
}

.contact-card p{
  margin:0;
  line-height:1.8;
  color:rgba(255,255,255,.72);
}


/*==================================================
  ENLACES LEGALES
==================================================*/

.support-links{
  padding:7rem 0;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.02),
      rgba(255,255,255,.006)
    );
}

.legal-links-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.5rem;
}

.legal-card{
  display:block;

  padding:2rem;

  border-radius:24px;
  border:1px solid rgba(255,255,255,.08);

  text-decoration:none;
  color:inherit;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.05),
      rgba(255,255,255,.015)
    );

  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

.legal-card:hover{
  transform:translateY(-6px);

  border-color:rgba(210,169,73,.32);

  box-shadow:
    0 24px 65px rgba(0,0,0,.22);
}

.legal-card h3{
  margin:0 0 .9rem;
  font-size:1.35rem;
}

.legal-card p{
  margin:0;
  line-height:1.8;
  color:rgba(255,255,255,.72);
}


/*==================================================
  CIERRE
==================================================*/

.support-closing{
  padding:8rem 0;
}

.support-closing__box{
  max-width:900px;

  margin:0 auto;

  padding:4rem;

  text-align:center;

  border-radius:32px;

  border:1px solid rgba(255,255,255,.08);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.05),
      rgba(255,255,255,.015)
    );

  box-shadow:
    0 30px 80px rgba(0,0,0,.24);
}

.support-closing__box h2{
  margin:.8rem 0 1.2rem;

  font-size:clamp(2.2rem,4vw,3.5rem);

  line-height:1.08;
}

.support-closing__box p{
  max-width:700px;

  margin:0 auto;

  line-height:1.9;

  color:rgba(255,255,255,.74);
}
/*==================================================
  BOTONES
==================================================*/

.support-page .button-row{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:1rem;
  margin-top:2.5rem;
}

.support-page .button{
  min-width:220px;
}

.support-page .button--primary{
  box-shadow:
    0 18px 45px rgba(210,169,73,.22);
}

.support-page .button--primary:hover{
  box-shadow:
    0 24px 60px rgba(210,169,73,.34);
}

.support-page .button--ghost{
  border:1px solid rgba(255,255,255,.12);
}


/*==================================================
  ESPACIADOS
==================================================*/

.support-center,
.support-faq,
.support-contact,
.support-links,
.support-closing{
  scroll-margin-top:110px;
}

.support-page section{
  position:relative;
}

.support-page section + section{
  border-top:1px solid rgba(255,255,255,.035);
}


/*==================================================
  TABLET
==================================================*/

@media (max-width:1100px){

  .support-hero__layout{
    grid-template-columns:1fr;
    gap:3rem;
  }

  .support-hero__panel{
    max-width:540px;
  }

  .support-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .contact-grid{
    grid-template-columns:1fr;
  }

  .legal-links-grid{
    grid-template-columns:1fr;
  }

}
/*==================================================
  MOBILE
==================================================*/

@media (max-width:768px){

  .support-hero{
    min-height:auto;
  }

  .support-hero__layout{
    padding-block:7rem 4.5rem;
    gap:2.5rem;
  }

  .support-hero h1{
    font-size:clamp(2.3rem,10vw,3.4rem);
  }

  .support-hero__intro{
    font-size:1rem;
    line-height:1.75;
  }

  .support-hero__panel{
    padding:2rem;
    border-radius:22px;
  }

  .support-page .section-heading{
    margin-bottom:2.4rem;
  }

  .support-page .section-heading h2{
    font-size:clamp(1.9rem,8vw,2.7rem);
  }

  .support-grid{
    grid-template-columns:1fr;
  }

  .support-card{
    min-height:auto;
  }

  .faq-item{
    padding:1.6rem;
  }

  .contact-card{
    padding:1.8rem;
  }

  .legal-card{
    padding:1.8rem;
  }

  .support-closing{
    padding:5rem 0;
  }

  .support-closing__box{
    padding:2.4rem 1.8rem;
    border-radius:24px;
  }

  .support-page .button-row{
    flex-direction:column;
    align-items:stretch;
  }

  .support-page .button{
    width:100%;
    min-width:0;
  }

}


/*==================================================
  MOBILE PEQUEÑO
==================================================*/

@media (max-width:480px){

  .support-center,
  .support-faq,
  .support-contact,
  .support-links,
  .support-closing{
    padding:4rem 0;
  }

  .support-hero__layout{
    padding-top:6.2rem;
  }

  .support-card,
  .contact-card,
  .legal-card{
    border-radius:20px;
  }

}
/*==================================================
  REVEAL
==================================================*/

.reveal{
  opacity:0;
  transform:translateY(24px);

  transition:
    opacity .7s ease,
    transform .7s ease;
}

.reveal.is-visible{
  opacity:1;
  transform:none;
}


/*==================================================
  DETALLES VISUALES
==================================================*/

.support-card,
.contact-card,
.legal-card,
.faq-item,
.support-hero__panel,
.support-closing__box{
  position:relative;
  overflow:hidden;
}

.support-card::before,
.contact-card::before,
.legal-card::before,
.faq-item::before{
  content:"";

  position:absolute;
  inset:0;

  pointer-events:none;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.045),
      transparent 38%
    );

  opacity:.45;
}

.support-card > *,
.contact-card > *,
.legal-card > *,
.faq-item > *{
  position:relative;
  z-index:1;
}

.support-card h3,
.contact-card h3,
.legal-card h3,
.faq-item h3{
  color:#ffffff;
}

.support-card:hover h3,
.contact-card:hover h3,
.legal-card:hover h3{
  color:var(--color-accent);
}


/*==================================================
  ACCESIBILIDAD
==================================================*/

.support-page a:focus-visible,
.support-page button:focus-visible{
  outline:3px solid var(--color-accent);
  outline-offset:4px;
}

@media (prefers-reduced-motion:reduce){

  .reveal{
    opacity:1;
    transform:none;
    transition:none;
  }

  .support-card,
  .contact-card,
  .legal-card,
  .support-page .button{
    transition:none;
  }

}


/*==================================================
  AJUSTES FINALES
==================================================*/

.support-page .site-footer{
  border-top:1px solid rgba(255,255,255,.06);
}

.support-page ::selection{
  background:rgba(210,169,73,.32);
  color:#ffffff;
}