/* Portada panorámica: conserva el color de la cancha y da contraste al texto. */
.cf-gramas .cg-hero {
  padding-top: 0;
}

.cf-gramas .cg-hero .cg-shell {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: calc(100% - clamp(24px, 4vw, 72px));
  border-radius: 18px;
  background: #20392c;
}

.cf-gramas .cg-hero .cg-hero-grid {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1.4rem;
  width: auto;
  min-height: clamp(540px, 44vw, 690px);
  padding: 56px clamp(26px, 3.5vw, 60px);
  margin: 0;
  text-align: left;
  color: #fff;
}

.cf-gramas .cg-hero .cg-kicker {
  display: inline-block;
  color: #fff;
  text-shadow: 0 1px 5px #101e16;
}

.cf-gramas .cg-hero h1 {
  font-size: clamp(3rem, 5.8vw, 5.85rem);
  font-weight: 550;
  line-height: 1.02;
  text-shadow: 0 2px 22px #102117, 0 1px 4px #102117;
}

.cf-gramas .cg-hero h1 em {
  color: #fff;
}

.cf-gramas .cg-hero .cg-hero-aside {
  padding: 0;
}

.cf-gramas .cg-hero .cg-intro,
.cf-gramas .cg-hero-aside .cg-micro {
  color: #fff;
  text-shadow: 0 1px 5px #101e16;
}

.cf-gramas .cg-hero .cg-intro {
  max-width: 49ch;
}

.cf-gramas .cg-hero .cg-hero-figure {
  position: absolute;
  inset: 0;
  border-radius: 0;
}

.cf-gramas .cg-hero .cg-hero-figure img {
  height: 100%;
  object-fit: cover;
  object-position: 60% 57%;
}

.cf-gramas .cg-hero .cg-hero-figure::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10, 25, 17, .8), rgba(10, 25, 17, .64) 26%, rgba(10, 25, 17, .18) 55%, transparent 73%);
  pointer-events: none;
}

.cf-gramas .cg-hero .cg-hero-figure figcaption {
  z-index: 1;
  left: auto;
  right: 14px;
  bottom: 12px;
  background: transparent;
  color: #fff;
  text-shadow: 0 1px 5px #101e16;
}

.cf-gramas .cg-header {
  position: sticky;
  top: 0;
  z-index: 5;
}

.cf-gramas :is(section, article)[id] {
  scroll-margin-top: 115px;
}

.cf-gramas .cg-nav nav a {
  position: relative;
}

.cf-gramas .cg-nav nav a::after {
  content: '';
  position: absolute;
  inset: auto 0 -4px;
  height: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
}

.cf-gramas .cg-nav nav a[aria-current="location"]::after {
  transform: scaleX(1);
}

.cf-gramas .cg-app-photo {
  overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .cf-gramas .cg-app-photo img {
    transition: transform 360ms ease-out;
  }

  .cf-gramas .cg-app:hover .cg-app-photo img {
    transform: scale(1.04);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .cf-gramas .cg-nav nav a::after {
    transition: transform 220ms ease-out;
  }
  html:has(.cf-gramas) {
    scroll-behavior: smooth;
  }

  .cf-gramas .cg-en-vista:not(.cg-app) > *,
  .cf-gramas .cg-app.cg-en-vista {
    animation: cg-seccion-entrada 560ms cubic-bezier(.2, .7, .25, 1) backwards;
  }

  .cf-gramas .cg-en-vista:not(.cg-app) > :nth-child(2) {
    animation-delay: 85ms;
  }

  .cf-gramas .cg-en-vista:not(.cg-app) > :nth-child(n+3),
  .cf-gramas .cg-app.cg-en-vista:nth-child(even) {
    animation-delay: 155ms;
  }

  .cf-gramas .cg-app.cg-en-vista > div {
    animation: cg-seccion-entrada 440ms ease-out 160ms backwards;
  }

  .cf-gramas .cg-en-vista:focus-within > * {
    animation: none;
  }

  .cf-gramas .cg-hero .cg-hero-copy {
    animation: cg-hero-reveal 540ms ease-out both;
  }

  .cf-gramas .cg-hero .cg-hero-aside {
    animation: cg-hero-reveal 540ms ease-out 120ms both;
  }

  .cf-gramas .cg-hero .cg-button {
    transition: background-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
  }

  .cf-gramas .cg-hero .cg-button:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .26);
  }

  .cf-gramas .cg-hero .cg-button:active {
    transform: scale(.98);
  }
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .cf-gramas .cg-hero .cg-button:hover:not(:active) {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .26);
  }
}

@keyframes cg-seccion-entrada {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cg-hero-reveal {
  from {
    opacity: .25;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 680px) {
  .cf-gramas .cg-hero .cg-shell {
    border-radius: 12px;
  }

  .cf-gramas .cg-hero .cg-hero-grid {
    min-height: 550px;
    padding: 45px 16px 54px;
  }

  .cf-gramas .cg-hero h1 {
    font-size: clamp(2rem, 9vw, 3.4rem);
  }

  .cf-gramas .cg-hero .cg-hero-figure img {
    object-position: 67% 54%;
  }

  .cf-gramas .cg-hero .cg-hero-figure::after {
    background: linear-gradient(90deg, rgba(10, 25, 17, .84), rgba(10, 25, 17, .61) 55%, rgba(10, 25, 17, .16));
  }
}