/*==================================================
  PUCARÁ GAMES
  COMMUNITY PAGE 2.0
==================================================*/

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

.community-hero{
  position:relative;
  min-height:clamp(680px,92vh,920px);
  display:grid;
  align-items:center;
  overflow:hidden;
  isolation:isolate;
}

.community-hero .hero-media{
  position:absolute;
  inset:0;
  z-index:-3;

  background:
    linear-gradient(
      120deg,
      rgba(3,18,13,.16),
      rgba(3,18,13,.48)
    ),
    url("../games/truco/hero.webp")
    center 34% / cover
    no-repeat;

  transform:scale(1.025);
}

.community-hero .hero-media::before{
  content:"";
  position:absolute;
  inset:0;

  background:
    radial-gradient(
      circle at 72% 30%,
      rgba(218,174,78,.16),
      transparent 34%
    ),
    radial-gradient(
      circle at 24% 72%,
      rgba(26,135,87,.2),
      transparent 38%
    );
}

.community-hero .hero-shade{
  position:absolute;
  inset:0;
  z-index:-2;

  background:
    linear-gradient(
      90deg,
      rgba(3,15,11,.96) 0%,
      rgba(3,15,11,.83) 43%,
      rgba(3,15,11,.42) 72%,
      rgba(3,15,11,.72) 100%
    ),
    linear-gradient(
      180deg,
      rgba(3,15,11,.18) 0%,
      rgba(3,15,11,.28) 50%,
      rgba(3,15,11,.95) 100%
    );
}

.community-hero .hero-content{
  position:relative;
  z-index:1;
  width:100%;
  padding-top:clamp(170px,18vh,210px);
  padding-bottom:clamp(150px,18vh,210px);
}

.community-hero h1{

  max-width:720px;

  margin:0;

  font-size:clamp(2.8rem,5vw,5.4rem);

  line-height:1.02;

  letter-spacing:-.04em;

  text-wrap:balance;
}

.community-hero .hero-description{
  max-width:720px;
  margin:
    clamp(28px,4vw,42px)
    0
    0;

  color:rgba(244,241,229,.78);
  font-size:clamp(1.05rem,1.6vw,1.28rem);
  line-height:1.75;
  text-wrap:pretty;
}

.community-hero .button-row{
  margin-top:clamp(32px,4vw,48px);
}

.community-hero .scroll-cue{
  position:absolute;
  left:50%;
  bottom:38px;
  z-index:2;

  display:flex;
  flex-direction:column;
  align-items:center;
  gap:11px;

  color:rgba(244,241,229,.68);
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;

  transform:translateX(-50%);
}

.community-hero .scroll-cue span{
  position:relative;

  width:1px;
  height:36px;

  background:rgba(244,241,229,.32);
  overflow:hidden;
}

.community-hero .scroll-cue span::after{
  content:"";
  position:absolute;
  inset:auto 0 100%;

  height:14px;

  background:var(--accent);
  animation:community-scroll-line 1.8s ease-in-out infinite;
}

@keyframes community-scroll-line{
  0%{
    transform:translateY(0);
  }

  100%{
    transform:translateY(50px);
  }
}

/*==================================================
  SECTION HEADINGS
==================================================*/

.community-process,
.community-philosophy,
.community-roadmap,
.community-contact,
.community-closing{
  position:relative;
  overflow:hidden;
}

.community-process::before,
.community-roadmap::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(255,255,255,.012),
      transparent
    );
}

.community-process .component-heading,
.community-philosophy .component-heading,
.community-roadmap .component-heading,
.community-contact .component-heading{
  position:relative;
  z-index:1;
  max-width:860px;
}

.community-process .component-heading h2,
.community-philosophy .component-heading h2,
.community-roadmap .component-heading h2,
.community-contact .component-heading h2{
  max-width:820px;
  text-wrap:balance;
}

/*==================================================
  COMMUNITY CARDS
==================================================*/

.community-cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  margin-top:clamp(40px,6vw,72px);
}

.community-card{

    position:relative;

    min-height:460px;

    padding:42px;

    display:flex;
    flex-direction:column;
    align-items:flex-start;

    overflow:hidden;

    border-radius:28px;

    border:1px solid rgba(226,191,102,.18);

    background:
        linear-gradient(
            160deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.015)
        );

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

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

.community-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;

  background:
    radial-gradient(
      circle at 88% 10%,
      rgba(218,174,78,.13),
      transparent 34%
    );
}

.community-card::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:-1;

  height:4px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--accent),
      transparent
    );

  transform:scaleX(0);
  transform-origin:center;
  transition:transform .35s ease;
}

.community-card:hover{

    transform:
        translateY(-12px);

    border-color:
        rgba(226,191,102,.45);

    box-shadow:
        0 34px 90px rgba(0,0,0,.34);
}

.community-card:hover::after{
  transform:scaleX(1);
}

.community-card__icon{

    width:84px;
    height:84px;

    margin-bottom:34px;

    display:grid;
    place-items:center;

    border-radius:22px;

    background:

        linear-gradient(
            145deg,
            rgba(226,191,102,.18),
            rgba(226,191,102,.05)
        );

    border:1px solid rgba(226,191,102,.25);

    font-size:2.2rem;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08);
}

.community-card h3{
  margin:0;

  font-size:clamp(1.45rem,2vw,1.9rem);
  line-height:1.15;
  text-wrap:balance;
}

.community-card p{
  margin:20px 0 32px;

  color:var(--text-muted);
  font-size:1rem;
  line-height:1.75;
}

.community-card .button{
  margin-top:auto;
}
/*==================================================
  TIMELINE
==================================================*/

.community-timeline{
  position:relative;

  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));

  gap:28px;

  margin-top:clamp(46px,6vw,80px);
}

.community-timeline::before{
  content:"";

  position:absolute;

  left:12%;
  right:12%;
  top:42px;

  height:2px;

  background:
    linear-gradient(
      90deg,
      rgba(226,191,102,.18),
      rgba(226,191,102,.72),
      rgba(226,191,102,.18)
    );

  z-index:0;
}

.timeline-step{
  position:relative;
  z-index:1;

  padding:0 10px;

  text-align:center;
}

.timeline-step__number{

  width:84px;
  height:84px;

  margin:0 auto 26px;

  display:grid;
  place-items:center;

  border-radius:50%;

  border:2px solid rgba(226,191,102,.35);

  background:
    linear-gradient(
      145deg,
      rgba(226,191,102,.20),
      rgba(226,191,102,.05)
    );

  color:var(--accent);

  font-size:1.15rem;
  font-weight:800;
  letter-spacing:.12em;

  box-shadow:
    0 0 0 10px rgba(226,191,102,.04);

  transition:
    transform .35s ease,
    box-shadow .35s ease;
}

.timeline-step:hover .timeline-step__number{

  transform:translateY(-6px);

  box-shadow:
    0 0 0 14px rgba(226,191,102,.08);
}

.timeline-step h3{

  margin:0 0 14px;

  font-size:1.35rem;
}

.timeline-step p{

  color:var(--text-muted);

  line-height:1.7;
}


/*==================================================
  FILOSOFÍA
==================================================*/

.philosophy-grid{

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

  gap:24px;

  margin-top:clamp(48px,6vw,80px);
}

.philosophy-card{

  padding:34px;

  border-radius:22px;

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

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

  transition:
    transform .35s ease,
    border-color .35s ease;
}

.philosophy-card:hover{

  transform:translateY(-8px);

  border-color:rgba(226,191,102,.32);
}

.philosophy-card__icon{

  width:72px;
  height:72px;

  margin-bottom:26px;

  display:grid;
  place-items:center;

  border-radius:18px;

  background:
    linear-gradient(
      145deg,
      rgba(226,191,102,.18),
      rgba(226,191,102,.05)
    );

  font-size:2rem;
}

.philosophy-card h3{

  margin:0 0 14px;

  font-size:1.45rem;
}

.philosophy-card p{

  color:var(--text-muted);

  line-height:1.75;
}


/*==================================================
  ROADMAP
==================================================*/

.roadmap-list{

  display:grid;

  gap:22px;

  margin-top:clamp(46px,6vw,72px);
}

.roadmap-item{

  display:grid;

  grid-template-columns:80px 1fr;

  gap:24px;

  padding:28px 30px;

  border-radius:22px;

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

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

  transition:
    transform .3s ease,
    border-color .3s ease;
}

.roadmap-item:hover{

  transform:translateY(-5px);

  border-color:rgba(226,191,102,.30);
}

.roadmap-item__status{

  width:64px;
  height:64px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:
    linear-gradient(
      145deg,
      rgba(226,191,102,.22),
      rgba(226,191,102,.05)
    );

  color:var(--accent);

  font-size:1.5rem;
  font-weight:700;
}

.roadmap-item__content h3{

  margin:0 0 16px;

  font-size:1.3rem;
}

.roadmap-progress{

  width:100%;
  height:10px;

  margin-bottom:14px;

  overflow:hidden;

  border-radius:999px;

  background:rgba(255,255,255,.08);
}

.roadmap-progress span{

  display:block;

  height:100%;

  border-radius:999px;

  background:
    linear-gradient(
      90deg,
      #d7a93b,
      #f2d27b
    );
}

.roadmap-item p{

  margin:0;

  color:var(--text-muted);
}
/*==================================================
  FORMULARIO
==================================================*/

.community-contact{
  position:relative;
}

.community-form{

  margin-top:clamp(44px,6vw,72px);

  padding:clamp(34px,5vw,54px);

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

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

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

.community-form__grid{

  display:grid;

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

  gap:24px;

  margin-bottom:24px;
}

.field{

  display:flex;
  flex-direction:column;
}

.field label{

  margin-bottom:10px;

  color:var(--text);

  font-size:.9rem;
  font-weight:700;
  letter-spacing:.05em;

  text-transform:uppercase;
}

.field input,
.field select,
.field textarea{

  width:100%;

  padding:16px 18px;

  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;

  background:rgba(255,255,255,.04);

  color:var(--text);

  font:inherit;

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

.field textarea{

  resize:vertical;
  min-height:220px;
}

.field input::placeholder,
.field textarea::placeholder{

  color:rgba(244,241,229,.42);
}

.field input:focus,
.field select:focus,
.field textarea:focus{

  outline:none;

  border-color:rgba(226,191,102,.55);

  background:rgba(255,255,255,.06);

  box-shadow:
    0 0 0 4px rgba(226,191,102,.10);
}

.community-form__footer{

  margin-top:34px;

  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:28px;
}

.community-form__note{

  max-width:620px;

  color:var(--text-muted);

  line-height:1.75;
}


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

.community-closing{

  padding-bottom:clamp(80px,10vw,140px);
}

.community-banner{

  position:relative;

  padding:
    clamp(52px,7vw,80px);

  border-radius:32px;

  text-align:center;

  border:1px solid rgba(226,191,102,.20);

  background:
    linear-gradient(
      145deg,
      rgba(226,191,102,.08),
      rgba(255,255,255,.03)
    );

  overflow:hidden;
}

.community-banner::before{

  content:"";

  position:absolute;
  inset:0;

  background:
    radial-gradient(
      circle at top right,
      rgba(226,191,102,.12),
      transparent 35%
    ),
    radial-gradient(
      circle at bottom left,
      rgba(33,138,90,.10),
      transparent 38%
    );

  pointer-events:none;
}

.community-banner>*{

  position:relative;
  z-index:1;
}

.community-banner h2{

  max-width:820px;

  margin:
    18px auto 24px;

  font-size:
    clamp(2.3rem,4vw,4.4rem);

  line-height:1.04;

  text-wrap:balance;
}

.community-banner p{

  max-width:760px;

  margin:0 auto;

  color:var(--text-muted);

  line-height:1.8;
}

.community-banner .button-row{

  justify-content:center;

  margin-top:42px;
}


/*==================================================
  EFECTOS
==================================================*/

.community-card,
.timeline-step,
.philosophy-card,
.roadmap-item,
.community-banner,
.community-form{

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);
}

.community-card,
.timeline-step,
.philosophy-card,
.roadmap-item{

  will-change:
    transform;
}
/*==================================================
  HERO SHOWCASE
==================================================*/

.community-hero__layout{

    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:72px;
    align-items:center;
}

.community-showcase{

    position:relative;

    width:100%;
    aspect-ratio:4 / 5;

    border-radius:34px;

    overflow:hidden;

    border:1px solid rgba(226,191,102,.18);

    background:#06120d;

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

.community-showcase__image{

    position:absolute;
    inset:0;

    background:
        linear-gradient(rgba(5,20,15,.25),
                        rgba(5,20,15,.65)),
        url("../heroes/home-hero.webp")
        center
        center /
        cover
        no-repeat;
}

.community-showcase__glow{

    position:absolute;

    width:420px;
    height:420px;

    right:-120px;
    top:-120px;

    border-radius:50%;

    background:

        radial-gradient(circle,
            rgba(226,191,102,.35),
            transparent 70%);
}

.community-showcase__brand{

    position:absolute;

    left:34px;
    bottom:34px;

    display:flex;
    flex-direction:column;
    gap:8px;
}

.community-showcase__brand span{

    color:rgba(255,255,255,.65);

    letter-spacing:.12em;

    font-size:.78rem;
}

.community-showcase__brand strong{

    font-size:1.6rem;

    line-height:1.2;
}

.community-showcase__badge{

    position:absolute;

    padding:12px 18px;

    border-radius:999px;

    background:rgba(6,18,13,.82);

    border:1px solid rgba(226,191,102,.25);

    backdrop-filter:blur(10px);

    font-size:.82rem;

    font-weight:700;
}

.community-showcase__badge--criollos{

    top:24px;
    left:24px;
}

.community-showcase__badge--clasicos{

    top:24px;
    right:24px;
}

.community-showcase__badge--puzzle{

    bottom:110px;
    left:24px;
}

.community-showcase__badge--dikelar{

    bottom:110px;
    right:24px;
}
/*==================================================
  RESPONSIVE
==================================================*/

@media (max-width:1200px){

  .community-cards,
  .philosophy-grid{

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

  .community-timeline{

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

    row-gap:60px;
  }

  .community-timeline::before{

    display:none;
  }

}


@media (max-width:900px){

  .community-hero{

    min-height:auto;
  }

  .community-hero .hero-content{

    padding-top:140px;
    padding-bottom:120px;
  }

  .community-hero h1{

    font-size:
      clamp(2.6rem,8vw,4.5rem);
  }

  .community-form__grid{

    grid-template-columns:1fr;
  }

  .roadmap-item{

    grid-template-columns:64px 1fr;
  }

  .community-form__footer{

    flex-direction:column;
    align-items:flex-start;
  }

}


@media (max-width:768px){

  .community-cards,
  .community-timeline,
  .philosophy-grid{

    grid-template-columns:1fr;
  }

  .community-card{

    min-height:auto;
  }

  .timeline-step{

    text-align:left;
    padding-left:10px;
  }

  .timeline-step__number{

    margin:
      0
      0
      20px;
  }

  .roadmap-item{

    grid-template-columns:1fr;

    gap:20px;
  }

  .roadmap-item__status{

    margin:auto;
  }

  .community-banner{

    text-align:left;
  }

  .community-banner h2{

    margin-left:0;
    margin-right:0;
  }

  .community-banner p{

    margin-left:0;
    margin-right:0;
  }

  .community-banner .button-row{

    justify-content:flex-start;
  }

}


@media (max-width:560px){

  .community-hero .hero-content{

    padding-top:120px;
    padding-bottom:90px;
  }

  .community-hero h1{

    line-height:1.02;
  }

  .community-card,
  .philosophy-card,
  .community-form,
  .community-banner{

    padding:24px;
  }

  .community-card__icon,
  .philosophy-card__icon{

    width:60px;
    height:60px;

    font-size:1.6rem;
  }

  .timeline-step__number{

    width:68px;
    height:68px;

    font-size:1rem;
  }

  .roadmap-item{

    padding:22px;
  }

  .community-form{

    border-radius:22px;
  }

  .community-banner{

    border-radius:24px;
  }

}
/*==================================================
  MICROINTERACCIONES
==================================================*/

.community-card,
.timeline-step,
.philosophy-card,
.roadmap-item,
.community-banner,
.community-form{

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

.community-card:hover,
.philosophy-card:hover,
.roadmap-item:hover{

  transform:translateY(-8px);
}

.community-card:active,
.philosophy-card:active,
.roadmap-item:active{

  transform:translateY(-3px);
}


/*==================================================
  BOTONES
==================================================*/

.community-card .button,
.community-banner .button{

  min-width:180px;
}

.community-banner .button-row{

  flex-wrap:wrap;
}


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

.community-form input:focus-visible,
.community-form select:focus-visible,
.community-form textarea:focus-visible,
.community-card .button:focus-visible,
.community-banner .button:focus-visible{

  outline:2px solid var(--accent);
  outline-offset:4px;
}


/*==================================================
  REDUCCIÓN DE MOVIMIENTO
==================================================*/

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

  .community-card,
  .timeline-step,
  .philosophy-card,
  .roadmap-item,
  .community-banner,
  .community-form,
  .community-card::after,
  .timeline-step__number{

    animation:none !important;
    transition:none !important;
    transform:none !important;
  }

  .community-hero .scroll-cue span::after{

    animation:none !important;
  }

}


/*==================================================
  IMPRESIÓN
==================================================*/

@media print{

  .site-header,
  .button-row,
  .scroll-cue,
  .nav-toggle,
  .community-form{

    display:none !important;
  }

  .community-hero{

    min-height:auto;
  }

  .community-card,
  .roadmap-item,
  .philosophy-card{

    break-inside:avoid;
    box-shadow:none;
  }

}


/*==================================================
  FIN
==================================================*/