/* Estilos propios de la landing. Se apoya en fc-design-tokens.css */

/* ============================================================
   HEADER / NAV — compartido en todas las páginas del sitio
   ============================================================ */

.fc-header {
  position: sticky;
  top: 0;
  z-index: var(--fc-z-nav);
  background: rgba(10, 10, 15, 0.85);
  backdrop-filter: blur(8px);
  border-bottom: var(--fc-border-width) solid var(--fc-border);
}

.fc-header-inner {
  max-width: var(--fc-max-width);
  margin: 0 auto;
  padding: var(--fc-space-4) var(--fc-padding-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.fc-logo {
  display: flex;
  align-items: center;
  gap: var(--fc-space-2);
  text-decoration: none;
}

.fc-logo-icon {
  height: 53px;
  width: auto;
  display: block;
}

.fc-logo-text {
  font-family: var(--fc-font-display);
  font-size: var(--fc-text-2xl);
  color: #FFFFFF;
  line-height: 1;
}

.fc-nav {
  display: flex;
  align-items: center;
  gap: var(--fc-space-6);
}

.fc-nav a {
  color: var(--fc-text-primary);
  text-decoration: none;
  font-family: var(--fc-font-body);
  font-weight: 500;
  font-size: var(--fc-text-base);
  transition: color var(--fc-transition-fast);
}

.fc-nav a:hover,
.fc-nav a[aria-current="page"] {
  color: var(--fc-orange);
}

.fc-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

.fc-nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--fc-text-primary);
  transition: transform var(--fc-transition-fast), opacity var(--fc-transition-fast);
}

.fc-nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.fc-nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.fc-nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 768px) {
  .fc-nav-toggle {
    display: flex;
  }

  .fc-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--fc-space-4);
    background: var(--fc-surface-1);
    border-bottom: var(--fc-border-width) solid var(--fc-border);
    padding: var(--fc-space-6) var(--fc-padding-x);
  }

  .fc-nav.is-open {
    display: flex;
  }
}

/* ============================================================
   SELECTOR DE IDIOMA — dentro de .fc-nav, en las 15 páginas con header
   ============================================================ */

.fc-lang-selector {
  position: relative;
  margin-left: auto;
}

.fc-lang-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--fc-surface-2);
  border: 1px solid rgba(0, 168, 232, 0.15);
  border-radius: 9999px;
  padding: 4px 10px 4px 4px;
  cursor: pointer;
  font-family: inherit;
  color: var(--fc-text-primary);
}

.fc-lang-trigger-code {
  font-size: 12px;
  font-weight: 600;
}

.fc-lang-chevron {
  color: var(--fc-text-secondary);
  transition: transform var(--fc-transition-fast);
}

.fc-lang-trigger[aria-expanded="true"] .fc-lang-chevron {
  transform: rotate(180deg);
}

.fc-lang-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 168px;
  background: var(--fc-surface-1);
  border: 1px solid rgba(0, 168, 232, 0.15);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  padding: 4px;
}

.fc-lang-panel[hidden] {
  display: none;
}

.fc-lang-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--fc-text-primary);
  transition: background var(--fc-transition-fast), color var(--fc-transition-fast);
}

.fc-lang-option:hover {
  background: rgba(255, 255, 255, 0.05);
}

.fc-lang-flag {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  overflow: hidden;
  display: block;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.fc-lang-flag--es {
  background: linear-gradient(to bottom, #AA151B 0 25%, #F1BF00 25% 75%, #AA151B 75% 100%);
  border-color: rgba(255, 255, 255, 0.3);
}

.fc-lang-flag--en {
  background: linear-gradient(135deg, #012169 0 40%, #FFFFFF 40% 50%, #C8102E 50% 60%, #FFFFFF 60% 70%, #012169 70% 100%);
}

.fc-lang-flag--de {
  background: linear-gradient(to bottom, #000000 0 33%, #DD0000 33% 66%, #FFCE00 66% 100%);
}

.fc-lang-name {
  flex: 1;
  font-size: 13px;
}

.fc-lang-check {
  color: var(--fc-blue);
  opacity: 0;
  flex-shrink: 0;
}

.fc-lang-option[aria-selected="true"] {
  background: rgba(0, 168, 232, 0.10);
  color: var(--fc-blue);
}

.fc-lang-option[aria-selected="true"] .fc-lang-check {
  opacity: 1;
}

@media (max-width: 768px) {
  .fc-lang-selector {
    margin-left: 0;
  }

  /* .fc-lang-panel se ancla con right:0 al propio .fc-lang-trigger (ver
     arriba) — en desktop eso es seguro porque margin-left:auto empuja el
     selector al extremo derecho del header, así que el panel (168px) se
     abre hacia la izquierda dentro de una pantalla ancha. En mobile, con el
     menú hamburguesa abierto, el selector pasa a align-items:flex-start
     (pegado al borde IZQUIERDO), pero el right:0 sigue intentando abrir el
     panel hacia la izquierda del disparador — con éste ya pegado al borde,
     no hay 168px de sobra y el panel se sale por la izquierda del viewport
     (confirmado: left: -71.75px en 375px de ancho). Aquí se invierte el
     anclaje (abre hacia la derecha, donde sí sobra espacio) y se limita el
     ancho máximo al viewport menos el padding lateral, para que nunca se
     salga sea cual sea el ancho de pantalla o la longitud del texto
     traducido. */
  .fc-lang-panel {
    left: 0;
    right: auto;
    max-width: calc(100vw - (var(--fc-padding-x) * 2));
  }
}

/* ============================================================
   FOOTER — compartido en todas las páginas del sitio
   ============================================================ */

.fc-footer {
  border-top: var(--fc-border-width) solid var(--fc-border);
  margin-top: var(--fc-space-24);
  padding: var(--fc-space-8) var(--fc-padding-x);
}

.fc-footer-inner {
  max-width: var(--fc-max-width);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--fc-space-4);
  font-family: var(--fc-font-body);
  font-size: var(--fc-text-sm);
  color: var(--fc-text-secondary);
}

.fc-footer-links {
  display: flex;
  gap: var(--fc-space-6);
}

.fc-footer a {
  color: var(--fc-text-secondary);
  text-decoration: none;
  transition: color var(--fc-transition-fast);
}

.fc-footer a:hover {
  color: var(--fc-orange);
}

/* ============================================================
   PLACEHOLDER — solo para la página de prueba
   ============================================================ */

.fc-main-placeholder {
  max-width: var(--fc-max-width-content);
  margin: 0 auto;
  padding: var(--fc-space-24) var(--fc-padding-x);
  text-align: center;
}

.fc-main-placeholder p {
  margin-top: var(--fc-space-6);
  color: var(--fc-text-secondary);
}

/* ============================================================
   CIELO Y TIERRA — tarjetas de servicio
   ============================================================ */

.fc-cielo-y-tierra {
  max-width: var(--fc-max-width);
  margin: 0 auto;
  padding: var(--fc-space-16) var(--fc-padding-x) var(--fc-space-24);
  text-align: center;
}

.fc-cielo-y-tierra > .fc-line-orange {
  max-width: 200px;
  margin: var(--fc-space-4) auto var(--fc-space-16);
}

.fc-cielo-y-tierra > h1 {
  font-family: var(--fc-font-display);
}

.fc-cielo-y-tierra-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--fc-space-8);
  text-align: left;
}

.fc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-4);
  background: var(--fc-surface-1);
  border: var(--fc-border-width) solid var(--fc-border);
  border-radius: var(--fc-radius-lg);
  box-shadow: var(--fc-shadow-surface);
  padding: var(--fc-space-8);
}

.fc-card h2 {
  font-family: var(--fc-font-display);
  font-size: var(--fc-text-xl);
  color: var(--fc-text-primary);
}

.fc-card p {
  color: var(--fc-text-secondary);
}

.fc-card .fc-btn-primary {
  align-self: flex-start;
  margin-top: auto;
  box-shadow: var(--fc-shadow-orange);
}

.fc-card-content {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--fc-space-4);
  margin: calc(-1 * var(--fc-space-4)) calc(-1 * var(--fc-space-8)) calc(-1 * var(--fc-space-8));
  padding: var(--fc-space-6) var(--fc-space-8) var(--fc-space-8);
  border-radius: 0 0 var(--fc-radius-lg) var(--fc-radius-lg);
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 60% at 100% 0%, var(--fc-blue-glow) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 0% 100%, var(--fc-orange-glow) 0%, transparent 60%),
    var(--fc-surface-1);
}

.fc-card-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--fc-space-2);
  margin-top: auto;
}

.fc-card-price {
  font-size: calc(var(--fc-text-xs) * 1.3);
  text-decoration: none;
  transition: color var(--fc-transition-fast);
}

.fc-card-price:hover {
  color: var(--fc-blue-hover);
}

.fc-card-media {
  position: relative;
  height: 170px;
  margin: calc(-1 * var(--fc-space-8)) calc(-1 * var(--fc-space-8)) 0;
  border-radius: var(--fc-radius-lg) var(--fc-radius-lg) 0 0;
  overflow: hidden;
}

.fc-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
}

.fc-card-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--fc-vignette);
}

.fc-card-media--grupo img {
  object-position: center 32%;
}

.fc-card-media--huckjam img {
  object-position: center;
}

/* --- Season Pass (Cielo y tierra) — sin foto de producto, misma tarjeta
   base .fc-card pero con lista de bullets/ventajas y precio plegable
   en vez de imagen + "Precio: consultar". --- */

/* Página propia season-pass.html — mismo patrón "← Friendzone" de las
   páginas hijas de Friendzone (.fc-friendzone-back), aplicado a Cielo y tierra. */
.fc-season-back {
  display: inline-block;
  margin-bottom: var(--fc-space-4);
  font-family: var(--fc-font-data);
  font-size: var(--fc-text-sm);
  color: var(--fc-blue);
  letter-spacing: 0.04em;
  text-decoration: none;
}

.fc-season-back:hover {
  color: var(--fc-blue-hover);
}

/* En season-pass.html el grid solo tiene una tarjeta — se acota el
   ancho para que no se estire a todo .fc-cielo-y-tierra-grid. */
.fc-season-pass-grid {
  max-width: 480px;
  margin: 0 auto;
}

/* Fix degradado cortado en la esquina superior derecha: sin
   .fc-card-media, .fc-card-content (esquinas superiores cuadradas,
   recortado por su propio overflow:hidden) no llega hasta el borde
   real de la tarjeta — queda un hueco de ~17px de fondo plano entre
   el borde redondeado de .fc-card y donde empieza el degradado de
   .fc-card-content, anclado a su propia esquina sup. derecha (100% 0%).
   En tarjetas CON foto ese hueco no se nota porque .fc-card-media lo
   cubre entero. Se repite el mismo degradado en el fondo de la propia
   tarjeta (que sí tiene las 4 esquinas redondeadas) para que se vea
   continuo hasta la esquina real, sin tocar el margin/overlap de
   .fc-card-content con el crosshair (ya corregido aparte). */
.fc-season-pass-card {
  background:
    radial-gradient(70% 60% at 100% 0%, var(--fc-blue-glow) 0%, transparent 60%),
    radial-gradient(60% 50% at 0% 100%, var(--fc-orange-glow) 0%, transparent 60%),
    var(--fc-surface-1);
}

/* Fix crosshair superior cortado: sin .fc-card-media, .fc-card-content
   (position: relative) es el sibling en DOM justo después de ::before,
   así que en el orden de pintado de z-index:auto pinta encima suyo y
   tapa el trazo vertical izquierdo. z-index eleva el pseudo-elemento a
   su propio contexto de apilamiento, por encima del contenido. */
.fc-season-pass-grid .fc-hud-corner::before,
.fc-season-pass-grid .fc-hud-corner::after {
  z-index: 1;
}

.fc-season-bullets,
.fc-season-ventajas {
  list-style: none;
}

.fc-season-bullets {
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-2);
}

.fc-season-bullets li {
  color: var(--fc-text-secondary);
}

.fc-season-bullets strong {
  color: var(--fc-text-primary);
}

.fc-season-ventajas {
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-1);
  font-size: var(--fc-text-sm);
  color: var(--fc-text-secondary);
}

.fc-season-ventajas li::before {
  content: '✓ ';
  color: var(--fc-blue);
}

.fc-season-precio-toggle {
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

.fc-season-precio-toggle:hover,
.fc-season-precio-toggle:focus-visible {
  opacity: 1;
}

.fc-season-precio {
  margin-top: var(--fc-space-1);
  font-size: var(--fc-text-sm);
  color: var(--fc-text-secondary);
}

.fc-season-precio p + p {
  margin-top: var(--fc-space-1);
}

.fc-season-precio strong {
  color: var(--fc-text-primary);
}

/* --- Categoría de sesión (Cielo y tierra) — pequeño label naranja/azul
   en cada tarjeta de sesión, mismo criterio de chip que ya usa el sitio
   (pill con borde+fondo tintado), para que la dualidad individual/grupo
   se lea de un vistazo y no dependa solo del color de fondo. --- */
.fc-sesion-tag {
  align-self: flex-start;
  padding: var(--fc-space-1) var(--fc-space-3);
  border-radius: var(--fc-radius-full);
  font-family: var(--fc-font-data);
  font-size: var(--fc-text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fc-sesion-tag--individual {
  color: var(--fc-orange);
  border: var(--fc-border-width) solid var(--fc-border);
  background: var(--fc-orange-subtle);
}

.fc-sesion-tag--grupo {
  color: var(--fc-blue);
  border: var(--fc-border-width) solid var(--fc-border-blue);
  background: var(--fc-blue-subtle);
}

/* Tarjetas de grupo (Túnel grupo, Huckjam, Skydive groups) — mismo molde
   fc-card que el resto, pero en reposo el glow permanente naranja
   (compartido por .fc-cielo-y-tierra-grid .fc-card, ver más abajo) se
   sustituye por azul, para que la dualidad no dependa solo del label.
   Selector más específico que el compartido → gana sin tocarlo (sigue
   sirviendo tal cual a las tarjetas individuales y a otras secciones).
   En hover convergen al mismo azul intenso de siempre (regla compartida,
   sin cambios). */
.fc-cielo-y-tierra-grid .fc-card.fc-card--grupo {
  border-color: var(--fc-border-blue);
  box-shadow: var(--fc-shadow-blue);
}

/* Tarjeta destacada (AFF 10) — mismo molde y mismo color que el resto de
   tarjetas individuales, solo que el glow naranja en reposo sube un
   escalón: los valores son --fc-shadow-orange (0 0 20px/.30 + 0 0 60px/
   .10) con radio y alfa escalados ~1.4×, ni de lejos el salto del hover
   azul (40px/.50). Se queda a medio camino entre el reposo compartido y
   el hover, que es justo lo que hace que se note sin gritar. Va inline en
   vez de tocar el token porque --fc-shadow-orange lo comparten botones,
   títulos y media docena de grids.
   Misma mecánica de especificidad que fc-card--grupo justo encima: (0,3,0)
   gana al reposo compartido (0,2,0) de más abajo, y empata con el hover
   (0,3,0) — que al ir después en el archivo sigue ganando. Por eso el
   hover azul + crosshair queda intacto sin tocar ni una línea de ese
   bloque. Revertir: borrar esta regla y la clase fc-card--destacado del
   <article> de AFF 10 en cielo-y-tierra.html. */
.fc-cielo-y-tierra-grid .fc-card.fc-card--destacado {
  border-color: rgba(240, 100, 0, 0.45);
  box-shadow:
    0 0 28px rgba(240, 100, 0, 0.42),
    0 0 84px rgba(240, 100, 0, 0.14);
}

/* --- Season Pass destacado (Cielo y tierra) — ya no es una tarjeta más
   del grid: banda propia a todo el ancho, con acento dorado+naranja más
   intenso que el resto (en vez del naranja→azul en hover de las
   sesiones), reforzando que es el producto de recurrencia/fidelización,
   no una sesión suelta. Clases nuevas — no toca fc-card/
   fc-season-pass-card/fc-cielo-y-tierra-grid, que season-pass.html sigue
   usando tal cual en su propia página. --- */
.fc-season-feature {
  position: relative;
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(280px, 1.3fr);
  gap: var(--fc-space-10);
  margin-bottom: var(--fc-space-12);
  padding: var(--fc-space-10);
  text-align: left;
  border-radius: var(--fc-radius-lg);
  border: var(--fc-border-width) solid rgba(212, 175, 55, 0.35);
  box-shadow: 0 0 30px var(--fc-gold-glow), 0 0 90px var(--fc-orange-glow);
  background:
    radial-gradient(ellipse 60% 60% at 100% 0%, var(--fc-gold-glow) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 0% 100%, var(--fc-orange-glow) 0%, transparent 60%),
    var(--fc-surface-1);
  transition: box-shadow var(--fc-transition-base), border-color var(--fc-transition-base);
}

.fc-season-feature:hover,
.fc-season-feature:focus-within {
  border-color: rgba(212, 175, 55, 0.6);
  box-shadow: 0 0 45px var(--fc-gold-glow), 0 0 130px var(--fc-orange-glow);
}

.fc-season-feature-intro {
  display: flex;
  flex-direction: column;
}

.fc-season-feature-eyebrow {
  color: var(--fc-gold);
}

.fc-season-feature-eyebrow-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fc-space-3);
}

/* Badge "Ahorra por sesión" — mismo componente de pill que
   .fc-mapa-destacado-badge (bg oscuro+blur, radio full), aquí estático en
   vez de absolute (no hay foto debajo) y en naranja para sumarse al
   lenguaje de la banda sin competir con el dorado del borde/eyebrow. */
.fc-season-feature-badge {
  background: rgba(10, 10, 15, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: var(--fc-space-1) var(--fc-space-3);
  border-radius: var(--fc-radius-full);
  border: var(--fc-border-width) solid rgba(240, 100, 0, 0.4);
  color: var(--fc-orange);
}

.fc-season-feature-title {
  margin-top: var(--fc-space-2);
  text-shadow: 0 0 24px var(--fc-gold-glow);
}

.fc-season-feature-tagline {
  margin-top: var(--fc-space-4);
  color: var(--fc-text-secondary);
}

.fc-season-feature-intro .fc-card-cta {
  margin-top: var(--fc-space-6);
}

.fc-season-feature-details {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--fc-space-6);
  padding-left: var(--fc-space-10);
  border-left: var(--fc-border-width) solid rgba(212, 175, 55, 0.25);
}

@media (max-width: 760px) {
  .fc-season-feature {
    grid-template-columns: 1fr;
    padding: var(--fc-space-6);
  }

  .fc-season-feature-details {
    padding-left: 0;
    border-left: none;
    padding-top: var(--fc-space-6);
    border-top: var(--fc-border-width) solid rgba(212, 175, 55, 0.25);
  }
}

.fc-season-form-section {
  max-width: var(--fc-max-width-content);
  margin: var(--fc-space-24) auto 0;
  padding: 0 var(--fc-padding-x);
  text-align: center;
}

.fc-season-form-section > h2 {
  font-family: var(--fc-font-display);
}

.fc-season-form-intro {
  color: var(--fc-text-secondary);
  margin: var(--fc-space-4) 0 var(--fc-space-8);
}

.fc-season-form {
  text-align: left;
}

.fc-season-form .fc-btn-primary {
  align-self: flex-start;
}

/* ============================================================
   SOBRE MÍ
   ============================================================ */

.fc-sobre-mi {
  max-width: var(--fc-max-width);
  margin: 0 auto;
  padding: var(--fc-space-16) var(--fc-padding-x) var(--fc-space-24);
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-20);
}

.fc-bio-text h1 {
  font-family: var(--fc-font-display);
  text-shadow: 0 0 35px rgba(240, 100, 0, 0.5), 0 0 90px rgba(240, 100, 0, 0.2);
}

.fc-bio-text .fc-line-orange {
  box-shadow: 0 0 10px rgba(240, 100, 0, 0.55);
}

.fc-sobre-fc h2,
.fc-hablamos h2 {
  font-family: var(--fc-font-display);
}

.fc-bio {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(280px, 1.2fr);
  gap: var(--fc-space-10);
  align-items: center;
}

/* Contenedor reutilizable para fotos con el tratamiento de glow +
   crosshair del resto del sitio (ver bloques compartidos al final
   del archivo). Envuelve a .fc-bio-media hoy; cualquier foto nueva
   de esta página (ej. una segunda foto de Flying Cuquis) puede
   reusar la misma clase sin tocar CSS. */
.fc-photo-frame {
  position: relative;
  height: 100%;
  min-height: 360px;
  border-radius: var(--fc-radius-lg);
  border: var(--fc-border-width) solid var(--fc-border);
}

.fc-bio-media {
  position: relative;
  height: 100%;
  border-radius: var(--fc-radius-lg);
  overflow: hidden;
}

.fc-bio-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fc-bio-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--fc-vignette);
}

.fc-bio-text p {
  color: var(--fc-text-primary);
  margin-top: var(--fc-space-4);
}

.fc-bio-text .fc-hud-label {
  display: block;
  margin-top: var(--fc-space-6);
  color: var(--fc-blue);
  text-shadow: 0 0 14px rgba(0, 168, 232, 0.45);
}

.fc-hablamos {
  max-width: var(--fc-max-width-content);
  margin: 0 auto;
  text-align: center;
}

/* Mismo patrón de grid que .fc-bio, pero invertido (texto a la
   izquierda, foto a la derecha) para diferenciar visualmente ambas
   secciones — el orden natural del HTML (texto primero) ya coloca
   la columna así, sin necesidad de order/CSS extra. */
.fc-sobre-fc {
  max-width: var(--fc-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(280px, 1.2fr) minmax(280px, 1fr);
  gap: var(--fc-space-10);
  align-items: center;
}

.fc-sobre-fc-text {
  text-align: left;
}

.fc-sobre-fc p {
  color: var(--fc-text-primary);
  margin-top: var(--fc-space-4);
}

.fc-bio-media-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fc-surface-2);
  font-size: var(--fc-text-5xl);
  opacity: 0.4;
}

@media (max-width: 768px) {
  .fc-sobre-fc {
    grid-template-columns: 1fr;
  }
}

.fc-hablamos p {
  color: var(--fc-text-secondary);
  margin-top: var(--fc-space-4);
}

.fc-cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--fc-space-4);
  margin-top: var(--fc-space-6);
}

@media (max-width: 768px) {
  .fc-bio {
    grid-template-columns: 1fr;
  }

  .fc-photo-frame {
    min-height: 280px;
  }
}

/* ============================================================
   MINI-TIMELINE BIO (horizontal) — Sobre nosotros. PRUEBA visual,
   placeholder para que Mario compare contra el párrafo de "Sobre mí".
   Reversible: borra este bloque y la section "fc-bio-flow-section" de
   sobre-mi.html.

   Tratamiento deliberadamente distinto a la Línea de tiempo de Equipo:
   esa es "de datos" (resultados de competición, vertical, con tarjetas
   con borde); esta es biográfica/editorial — fila horizontal, sin
   tarjetas, hitos flotando a distinta altura sobre un trazo curvo que
   recorre naranja→azul, con scroll horizontal si no cabe y colapso a
   columna solo en pantallas muy estrechas.
   ============================================================ */

.fc-bio-flow-section {
  width: 100%;
  max-width: var(--fc-max-width);
  margin: 0 auto;
  padding: 0 var(--fc-padding-x);
  box-sizing: border-box;
}

.fc-bio-flow-label {
  text-align: center;
  margin-bottom: var(--fc-space-6);
}

.fc-bio-flow {
  position: relative;
}

.fc-bio-flow-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.fc-bio-flow-stop-a {
  stop-color: var(--fc-orange);
}

.fc-bio-flow-stop-b {
  stop-color: var(--fc-blue);
}

.fc-bio-flow-path {
  fill: none;
  stroke: url(#fc-bio-flow-gradient);
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: 0.6;
}

.fc-bio-flow-path--glow {
  stroke-width: 6;
  opacity: 0.4;
}

.fc-bio-flow-items {
  position: relative;
  z-index: 1;
  display: flex;
  gap: var(--fc-space-6);
  overflow-x: auto;
  padding: var(--fc-space-10) 0 var(--fc-space-4);
  scrollbar-width: thin;
  scrollbar-color: var(--fc-orange) var(--fc-surface-1);
}

/* Barra de scroll a juego con el Sistema J en vez de la nativa del
   navegador. Firefox (scrollbar-color, arriba) solo admite un color
   plano de thumb, sin glow en hover. */
.fc-bio-flow-items::-webkit-scrollbar {
  height: 6px;
}

.fc-bio-flow-items::-webkit-scrollbar-track {
  background: var(--fc-surface-1);
  border-radius: var(--fc-radius-full);
}

.fc-bio-flow-items::-webkit-scrollbar-thumb {
  background: var(--fc-orange);
  border-radius: var(--fc-radius-full);
}

.fc-bio-flow-items::-webkit-scrollbar-thumb:hover {
  box-shadow: var(--fc-shadow-orange);
}

.fc-bio-flow-item {
  flex: 1 1 160px;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

/* 7 hitos: naranja (primeros pasos) → dorado (coach/competición
   individual) → azul (instructor/equipo/resultados), con el hito final
   (2026) en el glow más fuerte — es el punto de llegada del recorrido. */
.fc-bio-flow-item:nth-child(1) {
  color: var(--fc-orange);
  margin-top: var(--fc-space-6);
}

.fc-bio-flow-item:nth-child(2) {
  color: var(--fc-orange);
  margin-top: 0;
}

.fc-bio-flow-item:nth-child(3) {
  color: var(--fc-gold);
  margin-top: var(--fc-space-10);
}

.fc-bio-flow-item:nth-child(4) {
  color: var(--fc-gold);
  margin-top: var(--fc-space-2);
}

.fc-bio-flow-item:nth-child(5) {
  color: var(--fc-blue);
  margin-top: var(--fc-space-8);
}

.fc-bio-flow-item:nth-child(6) {
  color: var(--fc-blue);
  margin-top: 0;
}

.fc-bio-flow-item:nth-child(7) {
  color: var(--fc-blue);
  margin-top: var(--fc-space-4);
}

.fc-bio-flow-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
  margin-bottom: var(--fc-space-3);
}

.fc-bio-flow-item:nth-child(7) .fc-bio-flow-dot {
  box-shadow: 0 0 16px currentColor;
}

.fc-bio-flow-mes {
  font-family: var(--fc-font-data);
  font-size: var(--fc-text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: currentColor;
  opacity: 0.7;
  margin: 0;
}

.fc-bio-flow-year {
  font-family: var(--fc-font-data);
  font-size: var(--fc-text-3xl);
  line-height: 1;
  color: currentColor;
  margin: 0;
}

.fc-bio-flow-titulo {
  font-family: var(--fc-font-body);
  font-weight: 700;
  font-size: var(--fc-text-base);
  color: var(--fc-text-primary);
  margin: var(--fc-space-2) 0 0;
}

.fc-bio-flow-desc {
  font-size: var(--fc-text-sm);
  color: var(--fc-text-secondary);
  margin: var(--fc-space-1) 0 0;
  max-width: 26ch;
}

@media (max-width: 480px) {
  .fc-bio-flow-line {
    display: none;
  }

  .fc-bio-flow-items {
    flex-direction: column;
    overflow-x: visible;
    gap: var(--fc-space-8);
    padding-top: var(--fc-space-4);
  }

  .fc-bio-flow-item {
    flex-basis: auto;
    margin-top: 0 !important;
  }
}

/* ============================================================
   CROSS-LINK EQUIPO (Sobre nosotros) — banner hacia la Línea de tiempo
   de Equipo, mismo tratamiento de card/glow que .fc-recurso.
   ============================================================ */

.fc-equipo-crosslink-wrap {
  max-width: var(--fc-max-width-content);
  margin: 0 auto;
}

.fc-equipo-crosslink,
.fc-equipo-crosslink:link,
.fc-equipo-crosslink:visited {
  color: inherit;
  text-decoration: none;
}

.fc-equipo-crosslink {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--fc-space-5);
  background: var(--fc-surface-1);
  border: var(--fc-border-width) solid var(--fc-border);
  border-radius: var(--fc-radius-lg);
  padding: var(--fc-space-5) var(--fc-space-6);
  box-shadow: var(--fc-shadow-orange);
  transition: border-color var(--fc-transition-base), box-shadow var(--fc-transition-base);
}

.fc-equipo-crosslink:hover,
.fc-equipo-crosslink:focus-visible {
  border-color: var(--fc-border-blue);
  box-shadow: var(--fc-shadow-blue);
}

.fc-equipo-crosslink-icons {
  display: flex;
  gap: var(--fc-space-2);
  flex-shrink: 0;
}

.fc-equipo-crosslink-star {
  color: var(--fc-orange);
  filter: drop-shadow(0 0 4px var(--fc-orange-glow));
}

.fc-equipo-crosslink p {
  margin: 0;
  font-family: var(--fc-font-display);
  font-size: var(--fc-text-base);
  color: var(--fc-text-primary);
}

@media (max-width: 480px) {
  .fc-equipo-crosslink {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ============================================================
   CAMPS
   ============================================================ */

.fc-camps {
  max-width: var(--fc-max-width);
  margin: 0 auto;
  padding: var(--fc-space-16) var(--fc-padding-x) var(--fc-space-24);
  text-align: center;
}

.fc-camps > .fc-line-orange {
  max-width: 200px;
  margin: var(--fc-space-4) auto var(--fc-space-16);
}

.fc-camps > h1 {
  font-family: var(--fc-font-display);
}

.fc-camps-grid {
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-10);
  text-align: left;
}

.fc-camp-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  background: var(--fc-surface-1);
  border: var(--fc-border-width) solid var(--fc-border);
  border-radius: var(--fc-radius-lg);
  box-shadow: var(--fc-shadow-surface);
  overflow: hidden;
}

.fc-camp-media {
  position: relative;
  height: 380px;
  width: auto;
  overflow: hidden;
}

.fc-camp-media img {
  width: auto;
  height: 100%;
  display: block;
}

.fc-camp-media--merseburg {
  width: 304px;
}

.fc-camp-media--merseburg img {
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.fc-camp-card.fc-hud-corner::before {
  display: none;
}

/* Badge "Finalizado" — deliberadamente agresivo, no el tratamiento sutil
   de .fc-mapa-destacado-badge: rojo (--fc-red, único uso de rojo en todo
   Sistema J, reservado para esto), borde grueso + glow a la misma
   intensidad que --fc-shadow-orange en elementos destacados, tipografía
   display en vez del mono fino de fc-hud-label. Debe leerse "esto ya
   pasó" de un vistazo, sin depender del texto — por eso también se apoya
   en .fc-camp-media--finalizado (abajo), que oscurece/desatura la foto.
   Oculto por defecto vía atributo hidden, no display:none propio (evita
   el bug [hidden] vs display de la clase, ver álbum Just4Fun en
   Momentos); camps.js revela ambos si data-fecha-fin del <article> ya
   pasó. */
.fc-camp-badge-finalizado {
  position: absolute;
  top: var(--fc-space-4);
  right: var(--fc-space-4);
  z-index: 3;
  background: rgba(40, 4, 4, 0.85);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: var(--fc-space-2) var(--fc-space-4);
  border-radius: var(--fc-radius-full);
  border: 2px solid var(--fc-red);
  box-shadow: var(--fc-shadow-red);
  color: var(--fc-red);
  font-family: var(--fc-font-display);
  font-size: var(--fc-text-base);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.fc-camp-media--finalizado img {
  filter: grayscale(0.7) brightness(0.55);
}

.fc-camp-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--fc-space-2);
  padding: var(--fc-space-6);
  background: linear-gradient(
    to top,
    rgba(10, 10, 15, 0.92) 15%,
    rgba(10, 10, 15, 0.55) 55%,
    transparent 100%
  );
}

.fc-camp-kicker {
  font-family: var(--fc-font-body);
  font-size: var(--fc-text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fc-orange);
  margin: 0;
}

.fc-camp-name {
  font-family: var(--fc-font-display);
  font-size: var(--fc-text-3xl);
  color: var(--fc-text-primary);
  margin: 0;
}

.fc-camp-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--fc-space-3);
  padding: var(--fc-space-8);
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 60% at 100% 0%, var(--fc-blue-glow) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 0% 100%, var(--fc-orange-glow) 0%, transparent 60%);
}

.fc-camp-title {
  font-family: var(--fc-font-display);
  font-size: var(--fc-text-2xl);
  color: var(--fc-text-primary);
  margin: 0;
}

.fc-camp-title-line {
  width: 100px;
  margin: 0;
  box-shadow: 0 0 8px rgba(0, 168, 232, 0.5);
}

.fc-camp-dates {
  font-family: var(--fc-font-data);
  font-size: var(--fc-text-lg);
  color: var(--fc-blue);
  text-shadow: 0 0 10px rgba(0, 168, 232, 0.3);
  margin: 0;
}

.fc-camp-desc {
  color: var(--fc-text-secondary);
  margin: 0;
}

.fc-camp-spots {
  font-family: var(--fc-font-data);
  font-size: var(--fc-text-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fc-text-secondary);
  margin: 0;
}

.fc-camp-info .fc-btn-primary {
  margin-top: var(--fc-space-3);
  box-shadow: var(--fc-shadow-orange);
}

@media (max-width: 768px) {
  .fc-camp-card {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   FRIENDZONE
   ============================================================ */

.fc-friendzone {
  max-width: var(--fc-max-width);
  margin: 0 auto;
  padding: var(--fc-space-16) var(--fc-padding-x) var(--fc-space-24);
  text-align: center;
}

.fc-friendzone > .fc-line-orange {
  max-width: 200px;
  margin: var(--fc-space-4) auto var(--fc-space-16);
}

.fc-friendzone > h1 {
  font-family: var(--fc-font-display);
}

/* Texto de introducción del índice de Friendzone — párrafo suelto, sin
   caja, entre el header y las tarjetas de categoría. Nombre propio
   (.fc-friendzone-manifiesto) para no chocar con .fc-friendzone-intro,
   que ya usan las páginas hijas como entradilla de sección. */
.fc-friendzone-manifiesto {
  max-width: var(--fc-max-width-content);
  margin: 0 auto var(--fc-space-16);
  font-family: var(--fc-font-body);
  font-size: var(--fc-text-lg);
  color: var(--fc-text-secondary);
}

/* Banner de colaboración — invita a mandar sugerencias antes del índice.
   Presupuesto de pseudo-elementos: .fc-hud-corner ya ocupa ::before Y
   ::after (los dos crosshairs) y va después de .fc-vignette en
   fc-design-tokens.css, así que gana ambos por orden de cascada. Por eso
   la viñeta y la fuente de luz azul no pueden montarse aquí como
   pseudo-elementos: van apiladas como capas de background-image sobre
   --fc-surface-1 (mismo criterio que usa `body` con --fc-light-source).
   Se conserva la clase .fc-vignette en el HTML por su position: relative
   y para dejar la intención declarada junto a fc-hud-corner. */
.fc-comunidad-banner {
  max-width: var(--fc-max-width-content);
  margin: 0 auto var(--fc-space-16);
  padding: var(--fc-space-10) var(--fc-space-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fc-space-3);
  text-align: center;
  background-color: var(--fc-surface-1);
  background-image: var(--fc-vignette), var(--fc-light-source);
  border: 1px solid var(--fc-border-blue);
  border-radius: var(--fc-radius-lg);
  box-shadow: var(--fc-shadow-surface);
}

.fc-comunidad-banner-titulo {
  font-family: var(--fc-font-display);
  font-size: var(--fc-text-2xl);
  font-weight: 400;
  text-shadow: var(--fc-text-glow-orange);
}

.fc-comunidad-banner-texto {
  max-width: 46ch;
  font-family: var(--fc-font-body);
  font-size: var(--fc-text-base);
  color: var(--fc-text-secondary);
}

.fc-comunidad-banner .fc-btn-primary {
  margin-top: var(--fc-space-3);
}

@media (max-width: 640px) {
  .fc-comunidad-banner {
    padding: var(--fc-space-8) var(--fc-space-6);
  }

  .fc-comunidad-banner-titulo {
    font-size: var(--fc-text-xl);
  }
}

.fc-friendzone-back {
  display: inline-block;
  margin-bottom: var(--fc-space-4);
  font-family: var(--fc-font-data);
  font-size: var(--fc-text-sm);
  color: var(--fc-blue);
  letter-spacing: 0.04em;
  text-decoration: none;
}

.fc-friendzone-back:hover {
  color: var(--fc-blue-hover);
}

.fc-friendzone-index-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--fc-space-8);
  text-align: left;
}

@media (max-width: 640px) {
  .fc-friendzone-index-grid {
    grid-template-columns: 1fr;
  }
}

/* Franja de invitación a colaborar, bajo el header de cada página de
   categoría de Friendzone (las 6). Es la bajada a nivel de categoría del
   banner .fc-comunidad-banner del índice: mismo destinatario, asunto
   distinto por página. Deliberadamente un <div> y no un <section>: el
   selector .fc-friendzone-section:first-of-type (margin-top: 0) cuenta
   elementos <section> hermanos, así que meter un <section> aquí le
   robaría el :first-of-type a la primera sección real de la página y le
   metería 64px de margen superior que hoy no tiene. */
.fc-categoria-aporta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fc-space-6);
  margin-bottom: var(--fc-space-16);
  padding: var(--fc-space-5) var(--fc-space-6);
  background: var(--fc-surface-1);
  border: var(--fc-border-width) solid var(--fc-border-blue);
  border-radius: var(--fc-radius-md);
  text-align: left;
}

.fc-categoria-aporta-texto {
  color: var(--fc-text-secondary);
  font-size: var(--fc-text-base);
}

/* El botón no debe encogerse cuando el texto ocupa varias líneas. */
.fc-categoria-aporta .fc-btn-secondary {
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .fc-categoria-aporta {
    flex-direction: column;
    align-items: stretch;
    gap: var(--fc-space-4);
    text-align: center;
  }

  /* .fc-btn-secondary es inline-flex: con align-items: stretch pasa a
     ancho completo, y justify-content centra su contenido dentro. */
  .fc-categoria-aporta .fc-btn-secondary {
    justify-content: center;
  }
}

.fc-friendzone-section {
  text-align: left;
  margin-top: var(--fc-space-16);
}

.fc-friendzone-section:first-of-type {
  margin-top: 0;
}

.fc-friendzone-section h2 {
  font-family: var(--fc-font-display);
  font-size: var(--fc-text-2xl);
}

.fc-friendzone-intro {
  color: var(--fc-text-secondary);
  margin-top: var(--fc-space-2);
  margin-bottom: var(--fc-space-6);
  max-width: var(--fc-max-width-content);
}

/* SEPARADOR — estela de avión, validado con Mario y aplicado entre las 6
   secciones de Friendzone-Recursos (ver los .fc-recursos-divider en el
   HTML). Mismo lenguaje que los iconos de línea de Inicio/Sistemas y
   Palmarés de Equipo (trazo fino sin relleno + drop-shadow como glow),
   aplicado aquí a un avión que "vuela" hacia el azul dejando detrás la
   estela naranja→azul de .fc-line-trail. margin: var(--fc-space-16) 0
   iguala el hueco arriba y abajo del separador con el margin-top que ya
   usa .fc-friendzone-section entre secciones (con el que colapsa por
   debajo), en vez de sumarse a él. */
.fc-recursos-divider {
  display: flex;
  align-items: center;
  gap: var(--fc-space-3);
  margin: var(--fc-space-16) 0;
}

.fc-recursos-divider .fc-line-trail {
  flex: 1;
}

.fc-recursos-divider-icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  color: var(--fc-blue);
  filter: drop-shadow(0 0 4px var(--fc-blue));
}

.fc-friendzone-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--fc-space-8);
}

.fc-colab-card {
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 1 / 1;
  background: var(--fc-surface-1);
  border: var(--fc-border-width) solid var(--fc-border);
  border-radius: var(--fc-radius-lg);
  box-shadow: var(--fc-shadow-surface);
  padding: var(--fc-space-4);
  overflow: hidden;
}

.fc-colab-media {
  position: relative;
  flex: 0 0 40%;
  margin: calc(-1 * var(--fc-space-4)) calc(-1 * var(--fc-space-4)) 0;
  border-radius: var(--fc-radius-lg) var(--fc-radius-lg) 0 0;
  overflow: hidden;
}

.fc-colab-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Estándar de tarjeta de coach "enriquecida" (icono+lista) — más alta que
   un cuadrado, con foto en aspect-ratio 1:1 mostrando más cuerpo junto con
   la cara. Probado primero solo en John, adoptado como estándar para
   cualquier tarjeta con .fc-coach-card--enriquecida (hoy Omar y John); el
   resto de Coaches/Material/Net/Riggers sigue con el cuadrado fijo al 40%.
   Mario elige las fotos para que encajen en este formato (idealmente
   retrato, resolución suficiente para no pixelarse al ampliar).
   Nota técnica: se probó mantener el cuadrado fijo y solo agrandar la foto
   (flex-basis 80/60/50%) — en los tres casos la zona de info se quedaba
   sin espacio y el nombre colapsaba a altura 0 (min-height automático 0 por
   el overflow:hidden del h3). La solución robusta es dejar crecer la
   tarjeta: se quita el aspect-ratio 1:1 y la foto pasa a tener su propio
   aspect-ratio (no flex-basis en %, que depende de una altura de
   contenedor que ya no es fija), así el alto sale del contenido y el
   nombre nunca se comprime. Revertir: borrar este bloque. */
.fc-coach-card--enriquecida {
  aspect-ratio: auto;
}

.fc-coach-card--enriquecida .fc-colab-media {
  flex: none;
  aspect-ratio: 1 / 1;
}

/* Foto de John Alexander: retrato muy vertical con la cara en el tercio
   superior — con el centrado por defecto de .fc-colab-media img el recorte
   caía en el pecho/equipo. Ajuste específico de esta foto, no del estándar
   — cada coach nuevo puede necesitar su propio object-position según el
   encuadre de su imagen. */
#coach-john .fc-colab-media img {
  object-position: center 20%;
}

.fc-colab-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--fc-vignette);
}

.fc-colab-media--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fc-surface-2);
  font-size: var(--fc-text-2xl);
  opacity: 0.5;
}

.fc-colab-content {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--fc-space-1);
  margin: 0 calc(-1 * var(--fc-space-4)) calc(-1 * var(--fc-space-4));
  padding: var(--fc-space-3) var(--fc-space-4) var(--fc-space-4);
  border-radius: 0 0 var(--fc-radius-lg) var(--fc-radius-lg);
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 60% at 100% 0%, var(--fc-blue-glow) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 0% 100%, var(--fc-orange-glow) 0%, transparent 60%),
    var(--fc-surface-1);
}

.fc-colab-content h3 {
  font-family: var(--fc-font-data);
  font-weight: 600;
  font-size: var(--fc-text-lg);
  color: var(--fc-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fc-colab-meta {
  font-size: var(--fc-text-sm);
  color: var(--fc-text-secondary);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.fc-colab-descuento {
  margin-top: var(--fc-space-1);
}

.fc-colab-contacts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fc-space-1) var(--fc-space-3);
  margin-top: auto;
  padding-top: var(--fc-space-2);
}

.fc-colab-contact {
  text-decoration: none;
  transition: color var(--fc-transition-fast);
}

.fc-colab-contact:hover {
  color: var(--fc-blue-hover);
}

/* Recursos (Friendzone): acción placeholder sin destino real todavía —
   mismo <span class="fc-colab-contact"> visual pero sin subrayado de hover
   activo, para no simular un enlace que no lleva a ningún sitio. */
.fc-colab-contact--pendiente {
  opacity: 0.5;
  cursor: default;
}

.fc-colab-contact--pendiente:hover {
  color: inherit;
}

/* Recursos: bloque "FC Logbook — próximamente", mismo .fc-colab-card que el
   resto de Friendzone pero con un párrafo largo en vez de una ficha corta.
   Mismo patrón que .fc-coach-card--enriquecida: quitar el aspect-ratio 1:1
   y el line-clamp de 2 líneas para que la tarjeta crezca con su contenido.
   Revertir: borrar este bloque. */
.fc-colab-card--anuncio {
  aspect-ratio: auto;
}

.fc-colab-card--anuncio .fc-colab-meta {
  -webkit-line-clamp: unset;
}

/* Material (Friendzone): directorio filtrable de Marcas — pills de categoría
   (mismo componente que .fc-filtro-pill de Momentos) sobre un grid compacto
   de "logo wall", con el detalle completo en el .fc-lightbox reutilizado de
   Momentos. Pensado para 20-30+ marcas sin repetir la tarjeta cuadrada
   pesada de Coaches/Net. */
.fc-material-filtros {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--fc-space-3);
  margin-bottom: var(--fc-space-8);
}

.fc-marca-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--fc-space-4);
}

.fc-marca-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fc-space-3);
  padding: var(--fc-space-5) var(--fc-space-3);
  background: var(--fc-surface-1);
  border: var(--fc-border-width) solid var(--fc-border);
  border-radius: var(--fc-radius-md);
  color: inherit;
  font-family: inherit;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--fc-transition-fast), box-shadow var(--fc-transition-fast), transform var(--fc-transition-fast);
}

/* Marcas destacadas del muro — mismo tratamiento que la tarjeta AFF 10 de
   Cielo y tierra (.fc-card--destacado, ver más arriba): los mismos valores
   exactos de borde y glow naranja en reposo, sin badge ni icono propio. Ojo
   al matiz: allí ese glow sube un escalón sobre el naranja que ya tienen
   todas las tarjetas en reposo, y aquí el reposo del tile no lleva sombra
   ninguna, así que el contraste con las vecinas es algo mayor. Si algún día
   se toca, tocar los dos sitios a la vez o dejarán de ser el mismo lenguaje.
   La lista de qué marcas la llevan vive en MARCAS_DESTACADAS
   (friendzone.js), no aquí ni en el JSON.
   Va tras el bloque base de .fc-marca-tile (misma especificidad (0,1,0), gana
   por orden) y antes del :hover, que con su (0,2,0) gana a esta regla por
   especificidad: el azul + elevación sigue sustituyendo al glow igual que en
   AFF 10. */
.fc-marca-tile--destacada {
  border-color: rgba(240, 100, 0, 0.45);
  box-shadow:
    0 0 28px rgba(240, 100, 0, 0.42),
    0 0 84px rgba(240, 100, 0, 0.14);
}

.fc-marca-tile:hover,
.fc-marca-tile:focus-visible {
  border-color: var(--fc-blue);
  box-shadow: var(--fc-shadow-blue);
  transform: translateY(-2px);
}

.fc-marca-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--fc-radius-full);
  background: var(--fc-surface-2);
  overflow: hidden;
}

.fc-marca-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.fc-marca-logo--placeholder {
  font-family: var(--fc-font-display);
  font-size: var(--fc-text-lg);
  color: var(--fc-text-secondary);
}

/* La mayoría de logos de marca son texto oscuro sobre transparente, pensados
   para fondos claros — ilegibles sobre el logo wall oscuro. m.logoOnLight
   en el JSON activa este chip de fondo claro detrás del logo en vez de
   forzarlo sobre var(--fc-surface-2). */
.fc-marca-logo--on-light {
  background: var(--fc-text-primary);
  padding: var(--fc-space-1);
}

.fc-marca-nombre {
  font-family: var(--fc-font-data);
  font-weight: 600;
  font-size: var(--fc-text-sm);
  color: var(--fc-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.fc-lightbox-ficha h3 {
  font-family: var(--fc-font-data);
  font-size: var(--fc-text-xl);
  color: var(--fc-text-primary);
  margin-bottom: var(--fc-space-1);
}

/* ============================================================
   TIENDAS (Friendzone-Material) — PRUEBA visual, solo esta sección.
   Reemplaza fc-colab-card (grid de tarjetas cuadradas foto+ficha, igual
   que Coaches/Net/Riggers) por una lista/directorio: filas horizontales
   separadas por un hairline compartido en vez de una caja con borde por
   ficha — "estructura sin caja", igual criterio que el mini-timeline de
   Sobre mí, pero SIN su línea curva/metáfora de progreso: una tienda no
   tiene una siguiente, no hay recorrido que dibujar entre ellas.
   ============================================================ */

.fc-tiendas-list {
  display: flex;
  flex-direction: column;
}

.fc-tienda-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--fc-space-6);
  padding: var(--fc-space-8) 0;
}

.fc-tienda-row + .fc-tienda-row {
  border-top: var(--fc-border-width) solid var(--fc-border);
}

/* Resplandor ambiental al hover/focus — sustituye a los corners HUD
   (fc-hud-corner) del resto de Friendzone: aquí la estructura entre filas
   ya la da el hairline de arriba, así que el hover solo necesita insinuar
   presencia, no dibujar una caja. */
.fc-tienda-row::before {
  content: '';
  position: absolute;
  inset: 0 calc(-1 * var(--fc-space-4));
  background: radial-gradient(ellipse 55% 100% at 0% 50%, var(--fc-orange-glow) 0%, transparent 70%);
  opacity: 0;
  transition: opacity var(--fc-transition-base);
  pointer-events: none;
  z-index: 0;
}

.fc-tienda-row:hover::before,
.fc-tienda-row:focus-within::before {
  opacity: 0.6;
}

/* Emblema — la identidad real de una tienda es su logo, no una foto de
   escaparate (de ahí que ya no haya fc-colab-media aquí); más grande que
   el chip de .fc-marca-logo del logo wall porque aquí es el elemento
   dominante de la ficha, no un acompañante del nombre. */
.fc-tienda-emblem {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: var(--fc-radius-full);
  background: var(--fc-surface-2);
  box-shadow: 0 0 0 1px var(--fc-border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.fc-tienda-emblem img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--fc-space-2);
}

.fc-tienda-emblem--placeholder {
  font-family: var(--fc-font-display);
  font-size: var(--fc-text-2xl);
  color: var(--fc-text-secondary);
}

.fc-tienda-emblem--on-light {
  background: var(--fc-text-primary);
}

.fc-tienda-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.fc-tienda-heading h3 {
  font-family: var(--fc-font-data);
  font-weight: 600;
  font-size: var(--fc-text-xl);
  color: var(--fc-text-primary);
}

.fc-tienda-lugar {
  margin-top: var(--fc-space-1);
  font-family: var(--fc-font-data);
  font-size: var(--fc-text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fc-text-secondary);
}

.fc-tienda-desc {
  margin-top: var(--fc-space-3);
  max-width: 60ch;
  font-size: var(--fc-text-sm);
  line-height: 1.6;
  color: var(--fc-text-secondary);
}

.fc-tienda-oficial-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fc-space-4);
  margin-top: var(--fc-space-3);
}

.fc-tienda-oficial {
  display: inline-flex;
  align-items: center;
  gap: var(--fc-space-1);
  font-family: var(--fc-font-data);
  font-size: var(--fc-text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fc-orange);
}

.fc-tienda-oficial svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 4px var(--fc-orange-glow));
}

.fc-tienda-link {
  align-self: flex-start;
  margin-top: var(--fc-space-4);
  font-family: var(--fc-font-data);
  font-size: var(--fc-text-sm);
  letter-spacing: 0.02em;
  color: var(--fc-blue);
  text-decoration: none;
  transition: color var(--fc-transition-fast);
}

.fc-tienda-link:hover,
.fc-tienda-link:focus-visible {
  color: var(--fc-blue-hover);
}

@media (max-width: 560px) {
  .fc-tienda-row {
    flex-direction: column;
    gap: var(--fc-space-4);
  }
}

/* Recursos: sección "Referencias externas" — listado de enlaces agrupados
   por categoría (SIM, CYPRES, PD, etc.), formato fila/manifiesto en vez de
   tarjeta cuadrada como el resto de Friendzone. Diseño aprobado en
   prototipo aparte; aquí solo se adaptan las variables de fc-design-tokens
   y se integra en fc-friendzone-section. Revertir: borrar este bloque y
   volver a la versión de tarjetas "PDFs descargables" (ver historial git). */
.fc-recursos-categoria {
  margin-bottom: var(--fc-space-10);
}

.fc-recursos-categoria:last-child {
  margin-bottom: 0;
}

.fc-recursos-categoria-header {
  display: flex;
  align-items: baseline;
  gap: var(--fc-space-3);
  margin-bottom: var(--fc-space-4);
}

.fc-recursos-categoria-header h3 {
  font-family: var(--fc-font-data);
  font-weight: 600;
  font-size: var(--fc-text-lg);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fc-text-primary);
}

.fc-recursos-categoria-line {
  max-width: none;
  margin-bottom: var(--fc-space-4);
}

/* Rejilla de 2 columnas por categoría, mismo criterio que .fc-canales-grid
   (Comunidad) — align-items: start es necesario porque, a diferencia de
   Comunidad, aquí la descripción no lleva line-clamp: dos tarjetas en la
   misma fila pueden tener alturas distintas y no deben estirarse para
   igualarse. */
.fc-recursos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--fc-space-3);
  align-items: start;
}

.fc-recurso {
  position: relative;
  display: grid;
  grid-template-columns: var(--fc-space-24) 1fr auto;
  gap: var(--fc-space-4);
  align-items: start;
  padding: var(--fc-space-3);
  border-radius: var(--fc-radius-md);
  border: var(--fc-border-width) solid var(--fc-border);
  box-shadow: var(--fc-shadow-orange);
  text-decoration: none;
  transition: box-shadow var(--fc-transition-base), border-color var(--fc-transition-base);
}

/* El navegador aplica color azul (:link) / morado (:visited) y subrayado
   por defecto a los <a> — sin resetear color explícitamente en el propio
   ancla (y en :link/:visited, que si no ganan por especificidad de origen
   UA) el título quedaba azul en reposo y morado tras visitar el enlace. El
   segundo selector corta el subrayado en cualquier descendiente. */
.fc-recurso,
.fc-recurso:link,
.fc-recurso:visited {
  color: inherit;
  text-decoration: none;
}

.fc-recurso * {
  text-decoration: none;
}

.fc-recurso:hover,
.fc-recurso:focus-within {
  border-color: var(--fc-border-blue);
  box-shadow: var(--fc-shadow-blue);
}

.fc-recurso::before,
.fc-recurso::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  opacity: 0;
  transition: opacity var(--fc-transition-fast);
}

.fc-recurso::before {
  top: 10px;
  left: 10px;
  border-top: 1px solid var(--fc-blue);
  border-left: 1px solid var(--fc-blue);
}

.fc-recurso::after {
  bottom: 10px;
  right: 10px;
  border-bottom: 1px solid var(--fc-blue);
  border-right: 1px solid var(--fc-blue);
}

.fc-recurso:hover::before,
.fc-recurso:hover::after,
.fc-recurso:focus-within::before,
.fc-recurso:focus-within::after {
  opacity: 0.7;
}

.fc-recurso-thumb {
  width: var(--fc-space-24);
  height: var(--fc-space-24);
  border-radius: var(--fc-radius-md);
  overflow: hidden;
  background: var(--fc-surface-2);
  border: var(--fc-border-width) solid var(--fc-border-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* contain, no cover: el thumb es cuadrado (96px) pero los logos
   institucionales que lo ocupan son casi todos apaisados — cover les
   recortaba los laterales. Mismo criterio que .fc-marca-logo (Material) y
   .fc-blog-logo (Blogs). El padding deja aire alrededor para que el logo
   no toque el borde de la caja. */
.fc-recurso-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: var(--fc-space-2);
}

/* Chip de fondo claro para logos con tinta oscura sobre transparente —
   replica .fc-marca-logo--on-light (Material) y .fc-blog-logo--on-light
   (Blogs), activado por r.logoOnLight en el JSON. Sin esto, los logos
   institucionales (USPA, PIA, FAI…) desaparecen sobre --fc-surface-2. */
.fc-recurso-thumb--on-light {
  background: var(--fc-text-primary);
}

.fc-recurso-thumb--placeholder svg {
  width: 28px;
  height: 28px;
  color: var(--fc-text-disabled);
}

.fc-recurso-main h3 {
  font-family: var(--fc-font-body);
  font-weight: 500;
  font-size: var(--fc-text-base);
  color: var(--fc-text-primary);
  margin-bottom: var(--fc-space-2);
}

.fc-recurso-main p {
  font-size: var(--fc-text-sm);
  color: var(--fc-text-secondary);
  max-width: 56ch;
}

.fc-recurso-fuente {
  display: inline-flex;
  align-items: center;
  gap: var(--fc-space-2);
  margin-top: var(--fc-space-3);
  padding: var(--fc-space-1) var(--fc-space-3);
  border: var(--fc-border-width) solid var(--fc-border-blue);
  border-radius: var(--fc-radius-full);
  background: var(--fc-blue-subtle);
}

.fc-recurso-fuente svg {
  width: 12px;
  height: 12px;
  color: var(--fc-blue);
  flex-shrink: 0;
}

.fc-recurso-fuente span {
  font-family: var(--fc-font-data);
  font-size: var(--fc-text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fc-blue);
}

.fc-recurso-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: var(--fc-border-width) solid var(--fc-border-blue);
  color: var(--fc-text-secondary);
  transition: color var(--fc-transition-fast), border-color var(--fc-transition-fast);
  align-self: center;
}

.fc-recurso:hover .fc-recurso-link,
.fc-recurso:focus-within .fc-recurso-link {
  color: var(--fc-blue);
  border-color: var(--fc-blue);
}

.fc-recurso-link svg {
  width: 14px;
  height: 14px;
}

@media (max-width: 620px) {
  .fc-recurso {
    grid-template-columns: var(--fc-space-16) 1fr auto;
    gap: var(--fc-space-3);
  }
  .fc-recurso-thumb {
    width: var(--fc-space-16);
    height: var(--fc-space-16);
  }
}

/* Recursos: sección "Sintoniza tu grupo" — grupos de WhatsApp/Facebook en
   formato fila compacta de 2 columnas, similar a .fc-recurso pero más denso
   (una sola línea de descripción, plataforma + tags en vez de fuente).
   --whatsapp/--facebook son intencionalmente los únicos colores fuera de la
   paleta naranja/azul de FC en todo el sitio — no remapear a los tokens de
   fc-design-tokens.css. Diseño aprobado en prototipo aparte. Revertir:
   borrar este bloque y volver a la versión de tarjetas "Grupos de WhatsApp
   y Facebook" (ver historial git). */
.fc-canales-grid {
  --whatsapp: #25D366;
  --facebook: #1877F2;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--fc-space-3);
  align-items: stretch;
}

.fc-canal {
  position: relative;
  display: grid;
  grid-template-columns: 2.25rem 1fr auto;
  gap: var(--fc-space-4);
  align-items: center;
  padding: var(--fc-space-3) var(--fc-space-4);
  border-radius: var(--fc-radius-md);
  border: var(--fc-border-width) solid var(--fc-border);
  box-shadow: var(--fc-shadow-orange);
  transition: box-shadow var(--fc-transition-base), border-color var(--fc-transition-base);
}

/* Mismo reset que .fc-recurso: sin esto el título quedaba azul (:link) /
   morado (:visited) por defecto del navegador en vez del texto FC. */
.fc-canal,
.fc-canal:link,
.fc-canal:visited {
  color: inherit;
  text-decoration: none;
}

.fc-canal * {
  text-decoration: none;
}

.fc-canal:hover,
.fc-canal:focus-within {
  border-color: var(--fc-border-blue);
  box-shadow: var(--fc-shadow-blue);
}

.fc-canal::before,
.fc-canal::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  opacity: 0;
  transition: opacity var(--fc-transition-fast);
}

.fc-canal::before {
  top: 10px;
  left: 10px;
  border-top: 1px solid var(--fc-blue);
  border-left: 1px solid var(--fc-blue);
}

.fc-canal::after {
  bottom: 10px;
  right: 10px;
  border-bottom: 1px solid var(--fc-blue);
  border-right: 1px solid var(--fc-blue);
}

.fc-canal:hover::before,
.fc-canal:hover::after,
.fc-canal:focus-within::before,
.fc-canal:focus-within::after {
  opacity: 0.7;
}

.fc-canal-platform {
  position: relative;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fc-surface-2);
  flex-shrink: 0;
}

.fc-canal-platform svg {
  width: 16px;
  height: 16px;
}

.fc-canal-platform--wa svg {
  color: var(--whatsapp);
}

.fc-canal-platform--fb svg {
  color: var(--facebook);
}

.fc-canal-live-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--fc-bg);
}

@media (prefers-reduced-motion: no-preference) {
  .fc-canal-live-dot {
    animation: fc-canal-pulse 2.2s ease-in-out infinite;
  }
}

@keyframes fc-canal-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
  50% { box-shadow: 0 0 0 5px rgba(37, 211, 102, 0); }
}

.fc-canal-main h3 {
  font-family: var(--fc-font-body);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--fc-text-primary);
  margin-bottom: 0.2rem;
}

.fc-canal-main p {
  font-size: 0.78rem;
  color: var(--fc-text-secondary);
  line-height: 1.4;
  margin-bottom: var(--fc-space-1);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fc-canal-tags {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.fc-tag {
  font-family: var(--fc-font-data);
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.15rem 0.45rem;
  border-radius: var(--fc-radius-full);
  border: var(--fc-border-width) solid var(--fc-border-blue);
  color: var(--fc-blue);
  background: var(--fc-blue-subtle);
}

.fc-tag--compraventa {
  color: var(--fc-orange);
  border-color: var(--fc-border);
  background: var(--fc-orange-subtle);
}

.fc-canal-cta {
  font-family: var(--fc-font-data);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: var(--fc-space-2) var(--fc-space-3);
  border-radius: var(--fc-radius-full);
  border: var(--fc-border-width) solid var(--fc-border-blue);
  color: var(--fc-text-secondary);
  white-space: nowrap;
  transition: background var(--fc-transition-fast), border-color var(--fc-transition-fast), color var(--fc-transition-fast);
}

.fc-canal:hover .fc-canal-cta,
.fc-canal:focus-within .fc-canal-cta {
  background: var(--fc-blue-subtle);
  border-color: var(--fc-blue);
  color: var(--fc-blue);
}

@media (max-width: 400px) {
  .fc-canal {
    grid-template-columns: 2rem 1fr;
  }
  .fc-canal-cta {
    grid-column: 1 / -1;
    justify-self: start;
    margin-top: var(--fc-space-1);
  }
}

/* Recursos: sección "YouTube Channels" — franja de tarjetas compactas con
   avatar circular + play, para contenido audiovisual (se "reproduce" más
   que se "lee", a diferencia de Blogs justo debajo). Primer bloque nuevo
   de Recursos escrito en inglés desde el principio (labels/textos de UI),
   ver criterio en memoria del asistente — el resto de la página se queda
   en español hasta que se traduzca el sitio completo. */
.fc-youtube-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--fc-space-3);
}

.fc-youtube-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--fc-space-3);
  padding: var(--fc-space-3);
  border-radius: var(--fc-radius-lg);
  border: var(--fc-border-width) solid var(--fc-border);
  box-shadow: var(--fc-shadow-orange);
  transition: box-shadow var(--fc-transition-base), border-color var(--fc-transition-base);
}

.fc-youtube-card,
.fc-youtube-card:link,
.fc-youtube-card:visited {
  color: inherit;
  text-decoration: none;
}

.fc-youtube-card * {
  text-decoration: none;
}

.fc-youtube-card:hover,
.fc-youtube-card:focus-within {
  border-color: var(--fc-border-blue);
  box-shadow: var(--fc-shadow-blue);
}

.fc-youtube-avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--fc-surface-2);
  border: var(--fc-border-width) solid var(--fc-border-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fc-font-data);
  font-weight: 600;
  font-size: var(--fc-text-lg);
  color: var(--fc-blue);
}

.fc-youtube-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fc-youtube-main {
  flex: 1;
  min-width: 0;
}

.fc-youtube-name {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.fc-youtube-main h3 {
  font-family: var(--fc-font-body);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--fc-text-primary);
}

/* Glyph oficial de YouTube junto al nombre — identidad de plataforma a
   simple vista, independiente del botón play (CTA) al final de la tarjeta. */
.fc-youtube-brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.fc-youtube-brand svg {
  width: 16px;
  height: 16px;
}

.fc-youtube-handle {
  font-family: var(--fc-font-data);
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  color: var(--fc-text-secondary);
  margin-bottom: 0.2rem;
}

.fc-youtube-tagline {
  font-size: 0.78rem;
  color: var(--fc-text-secondary);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fc-youtube-play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: var(--fc-border-width) solid var(--fc-border-blue);
  color: var(--fc-text-secondary);
  flex-shrink: 0;
  transition: color var(--fc-transition-fast), border-color var(--fc-transition-fast), background var(--fc-transition-fast);
}

.fc-youtube-play svg {
  width: 13px;
  height: 13px;
  margin-left: 1px;
}

.fc-youtube-card:hover .fc-youtube-play,
.fc-youtube-card:focus-within .fc-youtube-play {
  background: var(--fc-blue-subtle);
  border-color: var(--fc-blue);
  color: var(--fc-blue);
}

/* Recursos: sección "Blogs" — lista compacta sin imagen destacada, más
   ligera visualmente que YouTube Channels justo arriba (mismo criterio que
   las tarjetas fc-recurso de PDFs, pero en fila simple porque aquí no hay
   fuente/categoría que mostrar, solo nombre + una línea + dominio). */
.fc-blog-list {
  display: flex;
  flex-direction: column;
}

.fc-blog-row {
  display: flex;
  align-items: center;
  gap: var(--fc-space-3);
  padding: var(--fc-space-3) var(--fc-space-1);
  border-bottom: var(--fc-border-width) solid var(--fc-border);
  transition: border-color var(--fc-transition-fast);
}

.fc-blog-row:last-child {
  border-bottom: none;
}

.fc-blog-row,
.fc-blog-row:link,
.fc-blog-row:visited {
  color: inherit;
  text-decoration: none;
}

.fc-blog-row * {
  text-decoration: none;
}

.fc-blog-row:hover,
.fc-blog-row:focus-within {
  border-color: var(--fc-border-blue);
}

.fc-blog-icon {
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fc-text-secondary);
  transition: color var(--fc-transition-fast);
}

.fc-blog-icon svg {
  width: 16px;
  height: 16px;
}

.fc-blog-row:hover .fc-blog-icon,
.fc-blog-row:focus-within .fc-blog-icon {
  color: var(--fc-blue);
}

/* Logo real del blog en vez del icono genérico de artículo — mismo ancho
   que el resto de la fila permite, altura fija para no romper la densidad
   de la lista. --on-light replica el chip de .fc-marca-logo--on-light
   (Material) para logos con tinta pensada para fondo claro. */
.fc-blog-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6.5rem;
  height: 1.75rem;
  flex-shrink: 0;
}

.fc-blog-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.fc-blog-logo--on-light {
  background: var(--fc-text-primary);
  border-radius: var(--fc-radius-sm);
  padding: var(--fc-space-1) var(--fc-space-2);
}

@media (max-width: 480px) {
  .fc-blog-logo {
    width: 4.5rem;
  }
}

.fc-blog-main {
  flex: 1;
  min-width: 0;
}

.fc-blog-main h3 {
  font-family: var(--fc-font-body);
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--fc-text-primary);
  margin-bottom: 0.15rem;
}

.fc-blog-main p {
  font-size: 0.78rem;
  color: var(--fc-text-secondary);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fc-blog-domain {
  font-family: var(--fc-font-data);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fc-text-disabled);
  flex-shrink: 0;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .fc-blog-domain {
    display: none;
  }
}

/* Recursos: sección "Perfiles de Instagram" — fila enriquecida en lista
   vertical (no grid): avatar circular con anillo naranja→azul + badge de
   plataforma, identidad al centro y CTA pill "Seguir" a la derecha.
   Toma la caja de .fc-youtube-card (surface-1 + borde naranja sutil +
   radius-lg, el mismo patrón que el resto de filas enriquecidas de
   Friendzone) pero con acción en el botón en vez de fila entera clicable.
   Dimensionado para apilar varias tarjetas: hoy solo hay una entrada. */
.fc-instagram-list {
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-3);
}

.fc-instagram-row {
  display: flex;
  align-items: center;
  gap: var(--fc-space-3);
  padding: var(--fc-space-3);
  background: var(--fc-surface-1);
  border: var(--fc-border-width) solid var(--fc-border);
  border-radius: var(--fc-radius-lg);
  transition: border-color var(--fc-transition-base), box-shadow var(--fc-transition-base);
}

.fc-instagram-row:hover,
.fc-instagram-row:focus-within {
  border-color: var(--fc-border-blue);
  box-shadow: var(--fc-shadow-blue);
}

/* Anillo de 2px en conic-gradient (borde dual naranja/azul, no glow): el
   gradiente pinta el contenedor y el padding deja verlo como aro alrededor
   del inner, que lleva el fondo de la tarjeta debajo de la foto. */
.fc-instagram-avatar {
  position: relative;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 2px;
  border-radius: 50%;
  background: conic-gradient(from 135deg, var(--fc-orange), var(--fc-blue), var(--fc-orange));
}

.fc-instagram-avatar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: var(--fc-surface-2);
  font-family: var(--fc-font-data);
  font-weight: 600;
  font-size: var(--fc-text-lg);
  color: var(--fc-blue);
}

.fc-instagram-avatar-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Badge de plataforma incrustado en la esquina inferior-derecha — el fondo
   --fc-bg lo recorta contra el anillo en vez de superponerse a él. */
.fc-instagram-badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--fc-bg);
  color: var(--fc-blue);
}

.fc-instagram-badge-icon {
  width: 12px;
  height: 12px;
}

.fc-instagram-main {
  flex: 1;
  min-width: 0;
}

.fc-instagram-main h3 {
  font-family: var(--fc-font-body);
  font-weight: 700;
  font-size: var(--fc-text-sm);
  color: var(--fc-text-primary);
}

.fc-instagram-handle {
  font-family: var(--fc-font-data);
  font-size: var(--fc-text-xs);
  letter-spacing: 0.03em;
  color: var(--fc-text-secondary);
  margin-bottom: 0.15rem;
}

.fc-instagram-desc {
  font-size: 0.6875rem;
  color: var(--fc-text-secondary);
  line-height: 1.4;
}

/* Mismo lenguaje que .fc-btn-secondary (outline azul) en formato pill y a
   escala de fila. Usa font-body en vez de font-display porque Carter One
   no tiene peso 700 real y a 11px se vuelve ilegible. */
.fc-instagram-follow {
  display: inline-flex;
  align-items: center;
  gap: var(--fc-space-1);
  flex-shrink: 0;
  padding: var(--fc-space-2) var(--fc-space-4);
  background: transparent;
  border: var(--fc-border-width) solid var(--fc-blue);
  border-radius: var(--fc-radius-full);
  font-family: var(--fc-font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  white-space: nowrap;
  transition: background var(--fc-transition-fast), box-shadow var(--fc-transition-fast);
}

.fc-instagram-follow,
.fc-instagram-follow:link,
.fc-instagram-follow:visited {
  color: var(--fc-blue);
  text-decoration: none;
}

.fc-instagram-follow:hover,
.fc-instagram-follow:focus-visible {
  background: var(--fc-blue-subtle);
  box-shadow: var(--fc-shadow-blue);
}

/* En móvil el CTA baja bajo la identidad para no comprimir nombre/handle. */
@media (max-width: 480px) {
  .fc-instagram-row {
    flex-wrap: wrap;
  }

  .fc-instagram-follow {
    width: 100%;
    justify-content: center;
  }
}

/* Recursos: sección "Encuentra dónde volar" — mapa Leaflet + tiles CARTO
   Dark Matter (gratuitas, sin API key) sobre los 51 túneles/zonas de salto.
   Solo se restylean los controles propios de Leaflet (popup, zoom,
   atribución) para que encajen en Sistema J — la atribución OSM/CARTO se
   mantiene siempre visible, solo se le da un fondo oscuro semitransparente
   en vez de tocar su contenido (requisito de la licencia de los tiles).
   Revertir: borrar este bloque + friendzone-mapa.js + el <link>/<script>
   de Leaflet en friendzone-recursos.html, y volver a la versión de 3
   tarjetas "próximamente" (ver historial git). */
.fc-mapa-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--fc-space-4);
  margin-bottom: var(--fc-space-2);
}

.fc-mapa-buscador {
  flex: 1 1 260px;
  min-width: 0;
  background: var(--fc-surface-2);
  border: var(--fc-border-width) solid var(--fc-border-blue);
  border-radius: var(--fc-radius-md);
  padding: var(--fc-space-3) var(--fc-space-4);
  color: var(--fc-text-primary);
  font-family: var(--fc-font-body);
  font-size: var(--fc-text-base);
  transition: border-color var(--fc-transition-fast), box-shadow var(--fc-transition-fast);
}

.fc-mapa-buscador::placeholder {
  color: var(--fc-text-secondary);
}

.fc-mapa-buscador:focus {
  outline: none;
  border-color: var(--fc-blue);
  box-shadow: var(--fc-shadow-blue);
}

.fc-mapa-leyenda {
  display: flex;
  gap: var(--fc-space-4);
  flex-shrink: 0;
}

.fc-mapa-leyenda-item {
  display: inline-flex;
  align-items: center;
  gap: var(--fc-space-2);
  font-family: var(--fc-font-data);
  font-size: var(--fc-text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fc-text-secondary);
}

.fc-mapa-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.fc-mapa-dot--tunel {
  background: var(--fc-orange);
}

.fc-mapa-dot--zona {
  background: var(--fc-blue);
}

.fc-mapa-status {
  min-height: 1.4em;
  margin-bottom: var(--fc-space-2);
  font-family: var(--fc-font-data);
  font-size: var(--fc-text-sm);
  color: var(--fc-text-secondary);
}

.fc-mapa {
  height: 480px;
  border-radius: var(--fc-radius-lg);
  border: var(--fc-border-width) solid var(--fc-border);
  box-shadow: var(--fc-shadow-orange);
  overflow: hidden;
  background: var(--fc-surface-1);
}

@media (max-width: 640px) {
  .fc-mapa {
    /* No solo 360px: un mapa más bajo deja muy poco margen vertical sobre
       un marcador centrado tras el flyTo del buscador, y el popup (~150px)
       queda recortado por el propio borde del contenedor. */
    height: 440px;
  }
}

/* Marcador propio (L.divIcon) en vez del pin azul por defecto de Leaflet —
   así el color sale directo de los tokens FC (naranja/azul) sin depender
   de imágenes externas. --activo se aplica desde friendzone-mapa.js a los
   marcadores que coinciden con el buscador. */
.fc-mapa-marcador-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.fc-mapa-marcador {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--fc-bg);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
  transition: transform var(--fc-transition-fast);
}

.fc-mapa-marcador-wrap--activo .fc-mapa-marcador {
  transform: scale(1.6);
  box-shadow: 0 0 0 4px var(--fc-blue-subtle), 0 0 12px var(--fc-blue);
}

.fc-mapa-popup {
  font-family: var(--fc-font-body);
  min-width: 180px;
}

.fc-mapa-popup-tipo {
  display: block;
  font-family: var(--fc-font-data);
  font-size: var(--fc-text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--fc-space-1);
}

.fc-mapa-popup h3 {
  font-size: var(--fc-text-base);
  color: var(--fc-text-primary);
  margin-bottom: var(--fc-space-1);
}

.fc-mapa-popup p {
  font-size: var(--fc-text-sm);
  color: var(--fc-text-secondary);
  margin-bottom: var(--fc-space-2);
}

.fc-mapa-popup-link {
  display: inline-block;
  font-family: var(--fc-font-data);
  font-size: var(--fc-text-sm);
  color: var(--fc-blue);
  text-decoration: none;
}

.fc-mapa-popup-link:hover {
  color: var(--fc-blue-hover);
}

.fc-mapa-popup-sinweb {
  font-family: var(--fc-font-data);
  font-size: var(--fc-text-xs);
  color: var(--fc-text-disabled);
}

/* --- Overrides de controles Leaflet para encajar en Sistema J --- */

.fc-mapa .leaflet-popup-content-wrapper {
  background: var(--fc-surface-1);
  border: var(--fc-border-width) solid var(--fc-border-blue);
  border-radius: var(--fc-radius-md);
  box-shadow: var(--fc-shadow-blue);
}

.fc-mapa .leaflet-popup-content {
  margin: var(--fc-space-3) var(--fc-space-4);
}

.fc-mapa .leaflet-popup-tip {
  background: var(--fc-surface-1);
  border: var(--fc-border-width) solid var(--fc-border-blue);
  box-shadow: none;
}

.fc-mapa .leaflet-popup-close-button {
  color: var(--fc-text-secondary) !important;
}

.fc-mapa .leaflet-popup-close-button:hover {
  color: var(--fc-blue) !important;
}

.fc-mapa .leaflet-control-zoom a {
  background: var(--fc-surface-2);
  border-color: var(--fc-border-blue) !important;
  color: var(--fc-text-primary);
}

.fc-mapa .leaflet-control-zoom a:hover {
  background: var(--fc-surface-1);
  color: var(--fc-blue);
}

/* La atribución OSM/CARTO se mantiene siempre visible y legible — solo se
   le da un fondo oscuro semitransparente para que no sea una caja blanca
   sobre el mapa oscuro. No ocultar ni recortar este control. */
.fc-mapa .leaflet-control-attribution {
  background: rgba(10, 10, 15, 0.72);
  color: var(--fc-text-secondary);
}

.fc-mapa .leaflet-control-attribution a {
  color: var(--fc-blue);
}

/* Recursos: panel destacado sobre el mapa — 2 colaboradores oficiales
   (Indoor Skydiving Leipzig, Merseburg) con foto a sangre. Mismo lenguaje
   visual que .fc-hero (foto a sangre + degradado inferior a --fc-bg +
   contenido superpuesto), pero encajado en una tarjeta con radius/border
   en vez de sangrado de página completa — aquí conviven 2 lado a lado.
   Reversible: borrar este bloque + el bloque HTML en
   friendzone-recursos.html + FC_MAPA_DESTACADOS/flyTo en
   friendzone-mapa.js. */
.fc-mapa-destacado {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: var(--fc-space-6);
  margin-bottom: var(--fc-space-8);
}

.fc-mapa-destacado-panel {
  position: relative;
  min-height: 380px;
  border-radius: var(--fc-radius-lg);
  overflow: hidden;
  border: var(--fc-border-width) solid var(--fc-border);
  isolation: isolate;
  /* Fondo sólido detrás de la foto — necesario para que el fundido de
     .fc-mapa-destacado-img (mask-image, ver abajo) revele un borde inferior
     limpio en vez de un hueco transparente. */
  background: var(--fc-bg);
}

.fc-mapa-destacado-panel--merseburg {
  border-color: var(--fc-border-blue);
}

/* Skydive Empuriabrava — no es colaboración oficial (a diferencia de los
   otros 2), así que lleva un tratamiento neutro (gris cálido, ni naranja ni
   azul) en vez de heredar la lógica individual/grupo del resto del sitio. */
.fc-mapa-destacado-panel--empuriabrava {
  border-color: rgba(138, 138, 154, 0.35);
}

/* Fundido del borde inferior — MISMA técnica que .fc-hero-media (Inicio,
   "Hero foto fade inferior", ya cerrado): mask-image en vez de un
   degradado de color superpuesto. La foto se desvanece de verdad hacia el
   fondo sólido del panel (--fc-bg, puesto arriba) en su propio borde
   inferior, no se oscurece con una capa encima. Solo el borde inferior
   (a diferencia de .fc-hero-media, que funde arriba y abajo porque sangra
   página completa) — aquí el panel tiene su propio marco arriba. */
.fc-mapa-destacado-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  mask-image: linear-gradient(to bottom, black 0%, black 62%, transparent 100%);
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 62%, transparent 100%);
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
}

.fc-mapa-destacado-badge {
  position: absolute;
  top: var(--fc-space-4);
  right: var(--fc-space-4);
  z-index: 3;
  background: rgba(10, 10, 15, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: var(--fc-space-1) var(--fc-space-3);
  border-radius: var(--fc-radius-full);
  border: var(--fc-border-width) solid var(--fc-border-blue);
}

.fc-mapa-destacado-badge--neutral {
  color: var(--fc-text-secondary);
  border-color: rgba(138, 138, 154, 0.4);
}

/* Refuerzo de contraste SOLO detrás del bloque de texto (título, desc,
   botón) — independiente del fundido de la foto de arriba. El fundido por
   sí solo no basta en Leipzig (foto mucho más clara): este scrim vive en
   su propio ::before, entre la foto (z-index implícito 0) y el texto
   (z-index 2), así el fundido de la foto se ve intacto por encima del
   scrim y el texto queda siempre legible debajo. */
.fc-mapa-destacado-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: var(--fc-space-6);
  gap: var(--fc-space-2);
}

.fc-mapa-destacado-content::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgba(10, 10, 15, 0.95) 0%,
    rgba(10, 10, 15, 0.80) 20%,
    rgba(10, 10, 15, 0.40) 45%,
    transparent 70%
  );
  pointer-events: none;
}

.fc-mapa-destacado-title {
  font-family: var(--fc-font-display);
  font-size: var(--fc-text-2xl);
  color: var(--fc-text-primary);
  margin: 0;
}

.fc-mapa-destacado-title--orange {
  text-shadow: var(--fc-text-glow-orange);
}

.fc-mapa-destacado-title--blue {
  text-shadow: var(--fc-text-glow-blue);
}

/* Neutro (Skydive Empuriabrava) — glow blanco difuso, ni naranja ni azul;
   no es colaboración oficial como los otros 2 paneles. */
.fc-mapa-destacado-title--neutral {
  text-shadow: 0 0 30px rgba(240, 237, 232, 0.35), 0 0 80px rgba(240, 237, 232, 0.12);
}

.fc-mapa-destacado-desc {
  color: var(--fc-text-secondary);
  font-size: var(--fc-text-sm);
  max-width: 40ch;
  margin: 0;
}

.fc-mapa-destacado-btn {
  align-self: flex-end;
  margin-top: var(--fc-space-2);
  cursor: pointer;
  font-size: var(--fc-text-sm);
  padding: var(--fc-space-2) var(--fc-space-5);
}

/* Override neutro sobre .fc-btn-secondary (outline azul por defecto) —
   Skydive Empuriabrava no es colaboración oficial, así que ni naranja relleno
   ni azul contorno; gris cálido a juego con el resto del panel. */
.fc-mapa-destacado-btn--neutral {
  color: var(--fc-text-primary);
  border-color: rgba(138, 138, 154, 0.5);
}

.fc-mapa-destacado-btn--neutral:hover {
  background: rgba(138, 138, 154, 0.14);
  box-shadow: 0 0 20px rgba(138, 138, 154, 0.25);
}

/* Línea de vuelo decorativa entre paneles — mismo icono/degradado que
   .fc-recursos-divider, pero vertical en desktop (pasa por el hueco entre
   fotos) y horizontal en mobile (ver media query). Se repite entre cada
   par de paneles consecutivos (2 líneas para 3 paneles). */
.fc-mapa-destacado-trail {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--fc-space-2);
  width: 1px;
}

.fc-mapa-destacado-trail .fc-line-trail {
  width: 1px;
  height: 100%;
  min-height: 120px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--fc-orange) 10%,
    var(--fc-orange) 45%,
    var(--fc-blue) 55%,
    var(--fc-blue) 90%,
    transparent 100%
  );
  opacity: 0.85;
}

.fc-mapa-destacado-trail-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  color: var(--fc-text-secondary);
  transform: rotate(90deg);
}

@media (max-width: 768px) {
  .fc-mapa-destacado {
    grid-template-columns: 1fr;
  }

  .fc-mapa-destacado-trail {
    flex-direction: row;
    width: 100%;
    height: 1px;
    padding: var(--fc-space-2) 0;
  }

  .fc-mapa-destacado-trail .fc-line-trail {
    width: 100%;
    height: 1px;
    min-height: 0;
    background: linear-gradient(
      90deg,
      transparent 0%,
      var(--fc-orange) 10%,
      var(--fc-orange) 45%,
      var(--fc-blue) 55%,
      var(--fc-blue) 90%,
      transparent 100%
    );
  }

  .fc-mapa-destacado-trail-icon {
    transform: none;
  }

  .fc-mapa-destacado-panel {
    min-height: 320px;
  }
}

/* Marcador distintivo para los mismos 2 colaboradores destacados —
   mismo círculo que .fc-mapa-marcador (color por tipo, ya naranja/azul de
   forma natural porque Leipzig es Túnel y Merseburg es Zona de salto) pero
   más grande y con un anillo de glow permanente, para que se distingan del
   resto de los 51 puntos sin zoom ni highlight de búsqueda. */
.fc-mapa-marcador--destacado {
  width: 22px;
  height: 22px;
  border-width: 3px;
}

.fc-mapa-marcador--destacado.fc-mapa-marcador--tunel {
  box-shadow: 0 0 0 4px rgba(240, 100, 0, 0.30), 0 0 14px var(--fc-orange);
}

.fc-mapa-marcador--destacado.fc-mapa-marcador--zona {
  box-shadow: 0 0 0 4px var(--fc-blue-subtle), 0 0 14px var(--fc-blue);
}

/* Lista de detalles de coach con icono de línea neón (ej. Omar y John en
   Coaches). Sustituye a .fc-colab-meta solo cuando la entrada trae
   c.detalles; coaches sin ese campo (y Riggers, que reutiliza cardCoach)
   siguen mostrando la línea país · especialidad de siempre — ver friendzone.js. */
.fc-coach-detalles {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-1);
}

.fc-coach-detalle {
  display: flex;
  align-items: center;
  gap: var(--fc-space-2);
  font-size: var(--fc-text-sm);
  color: var(--fc-text-secondary);
}

.fc-coach-detalle-icon {
  width: 16px;
  height: 16px;
  color: var(--fc-blue);
  filter: drop-shadow(0 0 3px var(--fc-blue));
  flex-shrink: 0;
}

/* Estrellas de rango (ej. "Trainer ★★★★") dentro de una línea de detalle —
   mismo criterio de sutileza que .fc-hud-label (opacity 0.7) pero sin tocar
   el resto de la frase, que vive en el mismo nodo de texto. */
.fc-coach-detalle-rango {
  opacity: 0.7;
  font-size: 0.85em;
}

/* Link sutil entre fichas relacionadas de distintas categorías de
   Friendzone (ej. Jonas Krasa ↔ Tunnel School) — mismo estilo que
   .fc-hud-label/.fc-colab-contact, solo en su propia línea. */
.fc-coach-enlace-relacionado {
  display: block;
  margin-top: var(--fc-space-2);
}

/* Tratamiento "enriquecido" de tarjeta de coach — probado primero solo en
   Omar (iconos en naranja, nombre y CTAs más grandes, lista más grande) y
   ahora reutilizado también en John. cardCoach() añade esta clase
   automáticamente cuando la entrada trae c.detalles (misma condición que
   activa la lista), así que cualquier coach futuro con detalles hereda el
   mismo tratamiento sin tocar CSS. Revertir: borrar este bloque (o quitar
   la clase en cardCoach(), friendzone.js).
   Nota: los factores de tamaño están ajustados a la baja (1.3/1.35/1.2, no
   1.4/1.5/1.3) porque a los valores originales el contenido desbordaba la
   tarjeta en mobile — .fc-colab-card usa aspect-ratio 1/1 (compartido con
   Coach/Material/Net/Riggers, no tocado) y la fila de contactos quedaba
   cortada por overflow:hidden. */
.fc-coach-card--enriquecida .fc-colab-contact {
  font-size: calc(var(--fc-text-xs) * 1.35);
}

.fc-coach-card--enriquecida .fc-colab-content h3 {
  font-size: calc(var(--fc-text-lg) * 1.3);
  margin-bottom: var(--fc-space-2);
}

.fc-coach-card--enriquecida .fc-coach-detalle {
  font-size: calc(var(--fc-text-sm) * 1.2);
}

.fc-coach-card--enriquecida .fc-coach-detalle-icon {
  width: calc(16px * 1.2);
  height: calc(16px * 1.2);
  color: var(--fc-orange);
  filter: drop-shadow(0 0 3px var(--fc-orange));
}

/* Net: tablón de anuncios de la comunidad (rediseño 2026-08-13, sustituye al
   antiguo directorio de ubicaciones túnel ISL + DZ Merseburg). Corcho
   nocturno propio de Sistema J — sin amarillo pastel: fondo con textura de
   puntos + tarjetas "nota" con esquina doblada (clip-path) y chincheta,
   alternando naranja/azul por posición vía nth-child en vez de heredar el
   cuadrado fijo que comparten Coaches/Material/Riggers (.fc-colab-card).
   Mockup aprobado por Mario el 2026-08-13 (public/lab/net-tablon-mockup.html).
   #grid-net ya hereda display:grid + gap de .fc-friendzone-grid — aquí solo
   se pone el fondo de tablón y se ajusta el ancho de columna. */
#grid-net {
  background-color: var(--fc-surface-1);
  background-image: radial-gradient(var(--fc-border-blue) 1px, transparent 1px);
  background-size: 22px 22px;
  border: var(--fc-border-width) solid var(--fc-border);
  border-radius: var(--fc-radius-xl);
  padding: var(--fc-space-12) var(--fc-space-8);
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

.fc-nota {
  position: relative;
  background: var(--fc-surface-2);
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius-md);
  box-shadow: var(--fc-shadow-surface);
  padding: var(--fc-space-4);
  padding-top: var(--fc-space-6);
  transition: transform var(--fc-transition-base), box-shadow var(--fc-transition-base);
  clip-path: polygon(0 0, 88% 0, 100% 12%, 100% 100%, 0 100%);
}

.fc-nota::after {
  /* esquina doblada — recorte, no imagen */
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 22px;
  height: 22px;
  background: var(--fc-surface-1);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

/* Rotación "pegado a mano" + alternancia naranja/azul por posición en vez
   de por índice pasado desde JS, así vale para cualquier número de
   anuncios sin tocar cardNetAnuncio(). */
#grid-net .fc-nota:nth-child(3n+1) { transform: rotate(-3deg); }
#grid-net .fc-nota:nth-child(3n+2) { transform: rotate(2.5deg); }
#grid-net .fc-nota:nth-child(3n)   { transform: rotate(-1.5deg); }

#grid-net .fc-nota:nth-child(even) {
  border-color: var(--fc-border-blue);
}

#grid-net .fc-nota:hover {
  transform: rotate(0deg) translateY(-4px);
  box-shadow: var(--fc-shadow-orange);
  z-index: 2;
}
#grid-net .fc-nota:nth-child(even):hover {
  box-shadow: var(--fc-shadow-blue);
}

.fc-nota-pin {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--fc-orange);
  box-shadow: var(--fc-shadow-orange), inset 0 -2px 3px rgba(0, 0, 0, 0.35);
}
#grid-net .fc-nota:nth-child(even) .fc-nota-pin {
  background: var(--fc-blue);
  box-shadow: var(--fc-shadow-blue), inset 0 -2px 3px rgba(0, 0, 0, 0.35);
}

.fc-nota-foto {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--fc-radius-sm);
  margin-bottom: var(--fc-space-3);
  overflow: hidden;
}
.fc-nota-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fc-nota-foto--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fc-surface-1);
  font-size: var(--fc-text-2xl);
  opacity: 0.5;
}

.fc-nota-desc {
  font-size: var(--fc-text-sm);
  color: var(--fc-text-primary);
  margin: 0 0 var(--fc-space-3);
  line-height: 1.5;
}

.fc-nota-precio {
  display: inline-block;
  font-family: var(--fc-font-display);
  font-size: var(--fc-text-base);
  color: var(--fc-orange);
  background: var(--fc-orange-subtle);
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius-full);
  padding: 2px var(--fc-space-3);
  margin: 0 0 var(--fc-space-3);
}

.fc-nota-contacto {
  margin: 0;
  font-size: var(--fc-text-xs);
  color: var(--fc-text-primary);
}
.fc-nota-contacto .fc-hud-label {
  margin-right: var(--fc-space-2);
}

/* Estado vacío — spanea todo el ancho del tablón (a diferencia del mockup,
   aquí es la única "nota" presente, así que una caja estrecha en la
   esquina quedaría descolocada). */
.fc-nota-vacia {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--fc-space-2);
  min-height: 200px;
  text-align: center;
  border: 1.5px dashed var(--fc-border-blue);
  border-radius: var(--fc-radius-md);
  padding: var(--fc-space-8);
}
.fc-nota-vacia p {
  color: var(--fc-text-secondary);
  font-size: var(--fc-text-sm);
  max-width: 32ch;
  margin: 0;
}

/* ============================================================
   CONTACTO
   ============================================================ */

.fc-contacto {
  max-width: var(--fc-max-width);
  margin: 0 auto;
  padding: var(--fc-space-16) var(--fc-padding-x) var(--fc-space-24);
  text-align: center;
}

.fc-contacto > .fc-line-orange {
  max-width: 200px;
  margin: var(--fc-space-4) auto var(--fc-space-16);
}

.fc-contacto > h1 {
  font-family: var(--fc-font-display);
}

.fc-contacto-section {
  text-align: left;
  margin-top: var(--fc-space-16);
  max-width: var(--fc-max-width-content);
  margin-left: auto;
  margin-right: auto;
}

.fc-contacto-section:first-of-type {
  margin-top: 0;
}

.fc-contacto-section h2 {
  font-family: var(--fc-font-display);
  font-size: var(--fc-text-2xl);
  margin-bottom: var(--fc-space-6);
}

/* Mapa — se atenúa el iframe (que trae fondo claro por defecto) para que no rompa el tema oscuro */
.fc-map-frame {
  border-radius: var(--fc-radius-lg);
  overflow: hidden;
  border: var(--fc-border-width) solid var(--fc-border-blue);
  box-shadow: var(--fc-shadow-surface);
  filter: grayscale(0.4) brightness(0.85) contrast(1.05);
}

.fc-map-frame iframe {
  display: block;
  width: 100%;
  height: 360px;
  border: 0;
}

.fc-form {
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-5);
}

.fc-field {
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-2);
}

.fc-field input,
.fc-field select,
.fc-field textarea {
  background: var(--fc-surface-2);
  border: var(--fc-border-width) solid var(--fc-border-blue);
  border-radius: var(--fc-radius-md);
  padding: var(--fc-space-3) var(--fc-space-4);
  color: var(--fc-text-primary);
  font-family: var(--fc-font-body);
  font-size: var(--fc-text-base);
  transition: border-color var(--fc-transition-fast), box-shadow var(--fc-transition-fast);
}

.fc-field input:focus,
.fc-field select:focus,
.fc-field textarea:focus {
  outline: none;
  border-color: var(--fc-blue);
  box-shadow: var(--fc-shadow-blue);
}

.fc-field textarea {
  resize: vertical;
}

.fc-contacto-form .fc-btn-primary {
  align-self: flex-start;
}

.fc-net-anuncio-form .fc-btn-primary {
  align-self: flex-start;
}

.fc-net-anuncio-nota {
  color: var(--fc-text-secondary);
  font-size: var(--fc-text-sm);
  margin: 0;
}

.fc-mensaje {
  min-height: 1.2em;
  font-size: var(--fc-text-sm);
}

.fc-mensaje[data-estado="ok"] {
  color: var(--fc-status-done-text);
}

.fc-mensaje[data-estado="error"] {
  color: var(--fc-status-pending-text);
}

.fc-contact-cards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fc-space-4);
}

.fc-contact-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--fc-space-3);
  padding: var(--fc-space-3) var(--fc-space-5);
  min-width: 220px;
  background: var(--fc-surface-1);
  border: var(--fc-border-width) solid var(--fc-border);
  border-radius: var(--fc-radius-lg);
  box-shadow: var(--fc-shadow-surface);
  text-decoration: none;
  color: var(--fc-text-primary);
  transition: border-color var(--fc-transition-fast), box-shadow var(--fc-transition-fast);
}

.fc-contact-card-icon {
  font-size: var(--fc-text-2xl);
  line-height: 1;
}

.fc-contact-card-label {
  display: block;
}

.fc-contact-card-value {
  display: block;
  font-size: var(--fc-text-sm);
  color: var(--fc-text-secondary);
}

/* ============================================================
   MOMENTOS — flight log
   ============================================================ */

.fc-momentos {
  max-width: var(--fc-max-width);
  margin: 0 auto;
  padding: var(--fc-space-16) var(--fc-padding-x) var(--fc-space-24);
  text-align: center;
}

.fc-momentos > .fc-line-orange {
  max-width: 200px;
  margin: var(--fc-space-4) auto var(--fc-space-4);
}

.fc-momentos > h1 {
  font-family: var(--fc-font-display);
}

.fc-momentos-intro {
  max-width: var(--fc-max-width-content);
  margin: 0 auto var(--fc-space-10);
  color: var(--fc-text-secondary);
}

/* --- filtros --- */

.fc-momentos-filtros {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--fc-space-3);
  margin-bottom: var(--fc-space-10);
}

.fc-filtro-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--fc-space-2);
  padding: var(--fc-space-2) var(--fc-space-5);
  background: var(--fc-surface-1);
  border: var(--fc-border-width) solid var(--fc-border);
  border-radius: var(--fc-radius-full);
  color: var(--fc-text-secondary);
  font-family: var(--fc-font-body);
  font-size: var(--fc-text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--fc-transition-fast), color var(--fc-transition-fast), box-shadow var(--fc-transition-fast);
}

.fc-filtro-pill:hover {
  color: var(--fc-text-primary);
  border-color: var(--fc-border-blue);
}

.fc-filtro-pill.is-active {
  color: var(--fc-text-primary);
  border-color: var(--fc-blue);
  background: var(--fc-blue-subtle);
  box-shadow: var(--fc-shadow-blue);
}

.fc-filtro-count {
  color: var(--fc-text-secondary);
  font-family: var(--fc-font-data);
  font-size: var(--fc-text-xs);
}

/* --- Grid con jerarquía (sustituye a la "constelación de vuelos" con
   solape) --- .fc-momentos-grid es solo el contenedor relativo que aloja
   el SVG de líneas (detrás, z-index:0) y hasta dos bloques hijos en
   flujo normal: .fc-momentos-featured (fila de destacadas, más grande —
   se omite del DOM si no hay ninguna, ver renderGrid() en momentos.js) y
   .fc-momentos-uniform (el resto, rejilla uniforme más pequeña). Cada
   foto vive en su propia celda de CSS grid — sin position:absolute, sin
   rotación, sin solape. El criterio de qué foto es "destacada"
   (foto.destacada en momentos.json) no cambia, solo dónde aterriza. */
.fc-momentos-grid {
  position: relative;
  text-align: left;
  padding: var(--fc-space-6) 0 var(--fc-space-10);
}

.fc-momentos-featured {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--fc-space-6);
  margin-bottom: var(--fc-space-8);
}

.fc-momentos-uniform {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--fc-space-4);
}

@media (max-width: 900px) {
  .fc-momentos-uniform {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .fc-momentos-featured,
  .fc-momentos-uniform {
    grid-template-columns: 1fr;
  }
}

.fc-photo-card {
  position: relative;
  z-index: 1;
  display: block;
  background: var(--fc-surface-1);
  border: var(--fc-border-width) solid rgba(240, 100, 0, 0.3);
  border-radius: var(--fc-radius-lg);
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--fc-shadow-orange);
  transition: box-shadow var(--fc-transition-fast), border-color var(--fc-transition-fast);
}

.fc-photo-card:hover,
.fc-photo-card:focus-visible {
  z-index: 2;
  border-color: var(--fc-border-blue);
  box-shadow: var(--fc-shadow-blue), 0 0 50px var(--fc-blue-glow);
  outline: none;
}

.fc-photo-card--featured {
  box-shadow: var(--fc-shadow-orange);
  border-color: rgba(240, 100, 0, 0.3);
}

/* Tarjeta-álbum (ver Just4Fun/South Direction, tarjetaAlbumHtml() en
   momentos.js) — mismo principio que --featured pero en azul: glow en
   reposo un escalón por encima del compartido, para que se note que es
   distinta a una foto suelta antes del hover. En hover converge al
   mismo azul de siempre (regla compartida de arriba, sin cambios). */
.fc-photo-card--album {
  box-shadow: var(--fc-shadow-blue);
  border-color: var(--fc-border-blue);
}

/* Badge de contador ("13 fotos") sobre la carátula — mismo componente
   que .fc-mapa-destacado-badge (Friendzone-Recursos), aquí con icono +
   texto en línea en vez de solo texto. */
.fc-photo-album-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--fc-space-1);
  z-index: 2;
}

.fc-photo-album-badge svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.fc-photo-media {
  position: relative;
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 25% 20%, var(--fc-blue-glow) 0%, transparent 55%),
    radial-gradient(circle at 80% 85%, var(--fc-orange-glow) 0%, transparent 55%),
    var(--fc-surface-2);
}

.fc-photo-card--featured .fc-photo-media {
  aspect-ratio: 3 / 4;
}

/* Líneas de vuelo decorativas entre fotos — mismo lenguaje que el
   separador de avión entre secciones (degradado naranja→azul, ver
   .fc-line-trail en fc-design-tokens.css), aquí punteadas y de fondo.
   z-index 0 (las tarjetas van a z-index 1+) y pointer-events:none: son
   puramente decorativas, nunca deben interferir con clic/hover de una
   foto. Coordenadas calculadas en actualizarLineas() (momentos.js) a
   partir del getBoundingClientRect() real de las tarjetas ya
   renderizadas — no hay relación semántica entre las fotos que conecta
   cada línea. Solo en desktop/tablet; en mobile se omiten (ver
   actualizarLineas()). */
.fc-momentos-lineas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}

.fc-momentos-linea {
  fill: none;
  stroke: url(#fc-momentos-linea-gradient);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 5 7;
  opacity: 0.5;
}

.fc-momentos-linea-stop-a {
  stop-color: var(--fc-orange);
}

.fc-momentos-linea-stop-b {
  stop-color: var(--fc-blue);
}

.fc-photo-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Excepción puntual (f5, Formación · Nov25, ver momentos.js): esa foto
   trae una marca de agua en una esquina que object-fit:cover recortaba.
   Aquí pasa a "contain" (foto completa siempre visible) sobre un fondo
   plano del Sistema J en vez del degradado decorativo por defecto —
   ese degradado está pensado para asomar apenas por los bordes de una
   foto a cover, no para verse de lleno en las franjas de un letterbox.
   Solo afecta a esta tarjeta (clase añadida por foto, no al resto). */
.fc-photo-media--contain {
  background: var(--fc-surface-1);
}

.fc-photo-media--contain img {
  object-fit: contain;
}

.fc-photo-media-icon {
  font-size: var(--fc-text-3xl);
  opacity: 0.35;
}

/* Siempre visible — es la identidad "Flight Log" de la página (se lee
   de un vistazo, no se descubre en hover). Antes solo aparecía al pasar
   el cursor; el degradado de fondo se conserva para que el texto siga
   siendo legible sobre cualquier foto sin necesitar el hover. */
.fc-photo-ficha {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--fc-space-3);
  background: linear-gradient(to top, rgba(10, 10, 15, 0.88) 20%, transparent 100%);
  color: var(--fc-blue);
}

@media (max-width: 640px) {
  .fc-photo-ficha {
    padding: var(--fc-space-1) var(--fc-space-2);
    font-size: var(--fc-text-xs);
  }
}

/* --- lightbox --- */

.fc-lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--fc-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--fc-space-8);
  background: rgba(10, 10, 15, 0.92);
}

.fc-lightbox[hidden] {
  display: none;
}

.fc-lightbox-content {
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--fc-surface-1);
  border: var(--fc-border-width) solid var(--fc-border-blue);
  border-radius: var(--fc-radius-lg);
  box-shadow: var(--fc-shadow-surface);
}

.fc-lightbox-media {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 25% 20%, var(--fc-blue-glow) 0%, transparent 55%),
    radial-gradient(circle at 80% 85%, var(--fc-orange-glow) 0%, transparent 55%),
    var(--fc-surface-2);
}

/* contain, no cover: las fotos de Momentos vienen de fuentes distintas
   con proporciones muy variadas (vertical, cuadrada, panorámica) — cover
   sobre el marco fijo de abajo (aspect-ratio 4/3) recortaba bordes y en
   las fotos con crédito (Gustavo Cabana, Ewan Cowie) podía tapar la
   marca de agua de la esquina. Con contain la foto entera cabe siempre
   dentro del marco, con letterbox si hace falta, en vez de recortarse.
   No afecta al lightbox de Marcas (Friendzone-Material): ese usa
   fc-lightbox-media--logo, que ya fuerza contain con más especificidad
   (ver debajo) — este cambio en la base no le cambia nada. */
.fc-lightbox-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.fc-lightbox-media .fc-photo-media-icon {
  font-size: var(--fc-text-5xl);
}

/* Marcas (Friendzone-Material): logo dentro del lightbox — a diferencia de
   una foto (object-fit cover arriba), un logo necesita verse completo sin
   recortar. m.logoOnLight activa el mismo chip de fondo claro que
   .fc-marca-logo--on-light en el logo wall, para logos con tinta oscura. */
.fc-lightbox-media--logo img {
  object-fit: contain;
  padding: var(--fc-space-10);
  box-sizing: border-box;
}

.fc-lightbox-media--on-light {
  background: var(--fc-text-primary);
}

.fc-lightbox-divider {
  display: block;
  margin: 0;
  opacity: 0.6;
}

.fc-lightbox-ficha {
  padding: var(--fc-space-6);
}

.fc-lightbox-ficha .fc-hud-label {
  display: block;
  margin-bottom: var(--fc-space-3);
  font-size: var(--fc-text-sm);
  opacity: 1;
}

.fc-lightbox-desc {
  color: var(--fc-text-secondary);
}

/* Enlace de texto pequeño para cross-links puntuales entre secciones
   (mismo tratamiento que .fc-friendzone-back) — compartido por el
   lightbox de Momentos (foto de German Nationals → Línea de tiempo de
   Equipo) y por .fc-timeline-momentos-link en Equipo (enlace inverso). */
.fc-crosslink-text {
  display: inline-block;
  margin-top: var(--fc-space-3);
  font-family: var(--fc-font-data);
  font-size: var(--fc-text-sm);
  color: var(--fc-blue);
  letter-spacing: 0.04em;
  text-decoration: none;
}

.fc-crosslink-text:hover {
  color: var(--fc-blue-hover);
}

/* [hidden] tiene la MISMA especificidad (0,1,0) que la clase de abajo —
   sin esta regla, el "display: inline-block" del selector de clase gana
   por ir después en la hoja (el display:none del atributo vive en la UA
   stylesheet, de prioridad más baja), y el enlace se queda visible con
   el texto/href de la última foto que sí lo usó en vez de desaparecer.
   Bug real encontrado en el álbum Just4Fun (ver fc-lightbox-credito
   abajo, mismo problema) — este ya existía antes, para el cross-link de
   German Nationals. */
.fc-crosslink-text[hidden] {
  display: none;
}

/* Crédito de autor — más discreto que .fc-crosslink-text (texto
   secundario en vez de azul, sin negrita visual) porque es atribución,
   no navegación. Solo en el lightbox (ver foto.credito, momentos.js);
   nunca en la miniatura. */
.fc-lightbox-credito {
  display: block;
  margin-top: var(--fc-space-2);
  font-family: var(--fc-font-data);
  font-size: var(--fc-text-xs);
  letter-spacing: 0.04em;
  color: var(--fc-text-secondary);
  text-decoration: none;
  opacity: 0.8;
}

.fc-lightbox-credito:hover {
  color: var(--fc-text-primary);
  opacity: 1;
}

/* Sin href (ver álbum FlyWarriors Workshop — Ewan Cowie, sin web que
   enlazar) el elemento sigue siendo <a>, pero no es un link real: sin
   esto, el :hover de arriba seguiría reaccionando al pasar el ratón y
   parecería clicable sin serlo. */
.fc-lightbox-credito:not([href]) {
  cursor: default;
  pointer-events: none;
}

/* Mismo motivo que .fc-crosslink-text[hidden] arriba — sin esto, el
   crédito de Gustavo Cabana se quedaba pegado (visible) en fotos que no
   son suyas después de haber visto cualquier foto del álbum Just4Fun. */
.fc-lightbox-credito[hidden] {
  display: none;
}

.fc-lightbox-close,
.fc-lightbox-nav {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--fc-surface-2);
  border: var(--fc-border-width) solid var(--fc-border-blue);
  border-radius: var(--fc-radius-full);
  color: var(--fc-text-primary);
  font-size: var(--fc-text-xl);
  cursor: pointer;
  transition: border-color var(--fc-transition-fast), box-shadow var(--fc-transition-fast);
}

.fc-lightbox-close:hover,
.fc-lightbox-nav:hover {
  border-color: var(--fc-blue);
  box-shadow: var(--fc-shadow-blue);
}

.fc-lightbox-close {
  top: var(--fc-space-6);
  right: var(--fc-space-6);
}

.fc-lightbox-prev {
  left: var(--fc-space-6);
  top: 50%;
  transform: translateY(-50%);
}

.fc-lightbox-next {
  right: var(--fc-space-6);
  top: 50%;
  transform: translateY(-50%);
}

/* --- altímetro: indicador vertical de posición dentro del carrete filtrado --- */

.fc-altimetro {
  position: fixed;
  right: 84px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fc-space-3);
  height: 220px;
}

.fc-altimetro-track {
  position: relative;
  flex: 1;
  width: 1px;
  background: var(--fc-border-blue);
}

.fc-altimetro-marker {
  position: absolute;
  left: 50%;
  top: var(--fc-altimetro-pos, 0%);
  width: 14px;
  height: 2px;
  background: var(--fc-blue);
  box-shadow: var(--fc-shadow-blue);
  transform: translate(-50%, -50%);
  transition: top var(--fc-transition-fast);
}

.fc-altimetro-count {
  font-family: var(--fc-font-data);
  font-size: var(--fc-text-sm);
  color: var(--fc-blue);
  letter-spacing: 0.08em;
}

@media (max-width: 768px) {
  .fc-lightbox {
    padding: var(--fc-space-4);
  }

  .fc-lightbox-prev,
  .fc-lightbox-next {
    width: 36px;
    height: 36px;
  }

  .fc-lightbox-prev {
    left: var(--fc-space-2);
  }

  .fc-lightbox-next {
    right: var(--fc-space-2);
  }

  .fc-lightbox-close {
    top: var(--fc-space-2);
    right: var(--fc-space-2);
  }

  .fc-altimetro {
    right: auto;
    left: 50%;
    bottom: var(--fc-space-2);
    top: auto;
    transform: translateX(-50%);
    flex-direction: row;
    height: auto;
    width: 140px;
    gap: var(--fc-space-2);
  }

  .fc-altimetro-track {
    height: 1px;
    width: 100%;
  }

  .fc-altimetro-marker {
    top: 50%;
    left: var(--fc-altimetro-pos, 0%);
    width: 2px;
    height: 14px;
    transform: translate(-50%, -50%);
    transition: left var(--fc-transition-fast);
  }
}

/* ============================================================
   GLOW + CROSSHAIR DE TARJETA — tratamiento definitivo, iniciado
   en Momentos, cerrado en Cielo y tierra, extendido a Camps & Events y
   a Friendzone. Aplica por igual a todas las tarjetas de cada grid,
   sin jerarquía entre ellas. Para añadir a un grid nuevo, sumar su
   selector de contenedor a las 4 reglas de abajo.
   ============================================================ */

/* Efecto 1 — crosshair .fc-hud-corner (definición sin tocar) pasa
   de "siempre visible" a "solo en hover". */
.fc-cielo-y-tierra-grid .fc-hud-corner::before,
.fc-cielo-y-tierra-grid .fc-hud-corner::after,
.fc-camps-grid .fc-hud-corner::before,
.fc-camps-grid .fc-hud-corner::after,
.fc-friendzone-grid .fc-hud-corner::before,
.fc-friendzone-grid .fc-hud-corner::after,
.fc-contact-cards .fc-hud-corner::before,
.fc-contact-cards .fc-hud-corner::after,
.fc-photo-frame.fc-hud-corner::before,
.fc-photo-frame.fc-hud-corner::after,
.fc-sistemas-grid .fc-hud-corner::before,
.fc-sistemas-grid .fc-hud-corner::after,
.fc-friendzone-index-grid .fc-hud-corner::before,
.fc-friendzone-index-grid .fc-hud-corner::after,
.fc-perfiles-grid .fc-hud-corner::before,
.fc-perfiles-grid .fc-hud-corner::after,
.fc-testimonios-grid .fc-hud-corner::before,
.fc-testimonios-grid .fc-hud-corner::after,
.fc-hero.fc-hud-corner::before,
.fc-hero.fc-hud-corner::after {
  opacity: 0;
  transition: opacity var(--fc-transition-fast);
}

.fc-cielo-y-tierra-grid .fc-card:hover.fc-hud-corner::before,
.fc-cielo-y-tierra-grid .fc-card:hover.fc-hud-corner::after,
.fc-cielo-y-tierra-grid .fc-card:focus-within.fc-hud-corner::before,
.fc-cielo-y-tierra-grid .fc-card:focus-within.fc-hud-corner::after,
.fc-camps-grid .fc-camp-card:hover.fc-hud-corner::before,
.fc-camps-grid .fc-camp-card:hover.fc-hud-corner::after,
.fc-camps-grid .fc-camp-card:focus-within.fc-hud-corner::before,
.fc-camps-grid .fc-camp-card:focus-within.fc-hud-corner::after,
.fc-friendzone-grid .fc-colab-card:hover.fc-hud-corner::before,
.fc-friendzone-grid .fc-colab-card:hover.fc-hud-corner::after,
.fc-friendzone-grid .fc-colab-card:focus-within.fc-hud-corner::before,
.fc-friendzone-grid .fc-colab-card:focus-within.fc-hud-corner::after,
.fc-contact-cards .fc-contact-card:hover.fc-hud-corner::before,
.fc-contact-cards .fc-contact-card:hover.fc-hud-corner::after,
.fc-contact-cards .fc-contact-card:focus-within.fc-hud-corner::before,
.fc-contact-cards .fc-contact-card:focus-within.fc-hud-corner::after,
.fc-photo-frame:hover.fc-hud-corner::before,
.fc-photo-frame:hover.fc-hud-corner::after,
.fc-photo-frame:focus-within.fc-hud-corner::before,
.fc-photo-frame:focus-within.fc-hud-corner::after,
.fc-sistemas-grid .fc-sistema-card:hover.fc-hud-corner::before,
.fc-sistemas-grid .fc-sistema-card:hover.fc-hud-corner::after,
.fc-sistemas-grid .fc-sistema-card:focus-within.fc-hud-corner::before,
.fc-sistemas-grid .fc-sistema-card:focus-within.fc-hud-corner::after,
.fc-friendzone-index-grid .fc-sistema-card:hover.fc-hud-corner::before,
.fc-friendzone-index-grid .fc-sistema-card:hover.fc-hud-corner::after,
.fc-friendzone-index-grid .fc-sistema-card:focus-within.fc-hud-corner::before,
.fc-friendzone-index-grid .fc-sistema-card:focus-within.fc-hud-corner::after,
.fc-perfiles-grid .fc-perfil-card:hover.fc-hud-corner::before,
.fc-perfiles-grid .fc-perfil-card:hover.fc-hud-corner::after,
.fc-perfiles-grid .fc-perfil-card:focus-within.fc-hud-corner::before,
.fc-perfiles-grid .fc-perfil-card:focus-within.fc-hud-corner::after,
.fc-testimonios-grid .fc-testimonio-card:hover.fc-hud-corner::before,
.fc-testimonios-grid .fc-testimonio-card:hover.fc-hud-corner::after,
.fc-testimonios-grid .fc-testimonio-card:focus-within.fc-hud-corner::before,
.fc-testimonios-grid .fc-testimonio-card:focus-within.fc-hud-corner::after,
.fc-hero:hover.fc-hud-corner::before,
.fc-hero:hover.fc-hud-corner::after,
.fc-hero:focus-within.fc-hud-corner::before,
.fc-hero:focus-within.fc-hud-corner::after {
  opacity: 0.6;
}

/* Efecto 2 — glow naranja permanente, mismo tratamiento que
   .fc-photo-card--featured en Momentos. Reposo compartido. En hover,
   todos sustituyen el naranja por azul (ver bloque "GLOW AZUL EN
   HOVER" más abajo). */
.fc-cielo-y-tierra-grid .fc-card,
.fc-camps-grid .fc-camp-card,
.fc-friendzone-grid .fc-colab-card,
.fc-contact-cards .fc-contact-card,
.fc-photo-frame,
.fc-sistemas-grid .fc-sistema-card,
.fc-friendzone-index-grid .fc-sistema-card,
.fc-perfiles-grid .fc-perfil-card,
.fc-testimonios-grid .fc-testimonio-card,
.fc-hero {
  box-shadow: var(--fc-shadow-orange);
  border-color: rgba(240, 100, 0, 0.3);
  transition: box-shadow var(--fc-transition-base), border-color var(--fc-transition-base);
}

@media (max-width: 640px) {
  /* En mobile no hay hover: mostrar el crosshair siempre, igual que
     en la ficha de Momentos, sin que rompa el layout de la tarjeta. */
  .fc-cielo-y-tierra-grid .fc-hud-corner::before,
  .fc-cielo-y-tierra-grid .fc-hud-corner::after,
  .fc-camps-grid .fc-hud-corner::before,
  .fc-camps-grid .fc-hud-corner::after,
  .fc-friendzone-grid .fc-hud-corner::before,
  .fc-friendzone-grid .fc-hud-corner::after,
  .fc-contact-cards .fc-hud-corner::before,
  .fc-contact-cards .fc-hud-corner::after,
  .fc-photo-frame.fc-hud-corner::before,
  .fc-photo-frame.fc-hud-corner::after,
  .fc-sistemas-grid .fc-hud-corner::before,
  .fc-sistemas-grid .fc-hud-corner::after,
  .fc-friendzone-index-grid .fc-hud-corner::before,
  .fc-friendzone-index-grid .fc-hud-corner::after,
  .fc-perfiles-grid .fc-hud-corner::before,
  .fc-perfiles-grid .fc-hud-corner::after,
  .fc-testimonios-grid .fc-hud-corner::before,
  .fc-testimonios-grid .fc-hud-corner::after,
  .fc-hero.fc-hud-corner::before,
  .fc-hero.fc-hud-corner::after {
    opacity: 0.6;
  }
}

/* ============================================================
   GLOW AZUL EN HOVER — validado primero solo en Túnel 1:1, cerrado
   como definitivo en las 3 tarjetas de Cielo y tierra, extendido a Camps
   & Events (Gravity Brake, Oslo), a Friendzone (Coaches, Material, NET),
   a las 3 tarjetas de Contacto (Instagram, email, WhatsApp), a la
   foto de Sobre nosotros (.fc-photo-frame, reutilizable para futuras
   fotos de esa página), a los perfiles de Equipo, y
   ahora a las tarjetas de Testimonios (Sobre nosotros). Reposo sin
   cambios (sigue la regla compartida de arriba); en hover el naranja
   se sustituye por completo por azul al 100% de --fc-shadow-blue. La
   transición ya la aporta la regla compartida
   (box-shadow var(--fc-transition-base)).
   ============================================================ */
.fc-cielo-y-tierra-grid .fc-card:hover,
.fc-camps-grid .fc-camp-card:hover,
.fc-friendzone-grid .fc-colab-card:hover,
.fc-contact-cards .fc-contact-card:hover,
.fc-photo-frame:hover,
.fc-sistemas-grid .fc-sistema-card:hover,
.fc-friendzone-index-grid .fc-sistema-card:hover,
.fc-perfiles-grid .fc-perfil-card:hover,
.fc-testimonios-grid .fc-testimonio-card:hover,
.fc-hero:hover {
  box-shadow:
    0 0 40px rgba(0, 168, 232, 0.50),
    0 0 120px rgba(0, 168, 232, 0.16);
}

/* ============================================================
   INICIO — "panel de vuelo"
   ============================================================ */

.fc-inicio {
  max-width: var(--fc-max-width);
  margin: 0 auto;
  padding: var(--fc-space-16) var(--fc-padding-x) var(--fc-space-24);
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-24);
}

/* --- hero: sangrado atmosférico, no tarjeta. Antes era una tarjeta con
   borde+radius+glow de contorno (naranja en reposo, azul en hover, igual
   que el resto de tarjetas del sitio) con crosshair permanente
   (fc-hud-corner, ver comentario anterior — ya retirado de esta section
   en el HTML). box-shadow:none explícito aquí y en :hover porque la
   regla compartida de glow naranja→azul (ver bloque GLOW AZUL EN HOVER
   más abajo) sigue listando .fc-hero — se neutraliza solo para esta
   tarjeta sin tocar esa regla, que otras secciones siguen usando tal
   cual.

   Primer intento (retirado): oscurecer los 4 bordes de la foto hasta
   --fc-bg apagaba demasiado la luminosidad de la imagen. Ahora el
   "sangrado" no es oscurecimiento sino un halo tipo ambilight — ::before
   es una copia borrosa (filter: blur) del azul dominante de la foto
   (--fc-blue, el más cercano en Sistema J al azul cielo de la imagen),
   más grande que la propia foto, que se derrama hacia el fondo oscuro de
   la página. La foto en sí queda casi a su luminosidad original. */
.fc-hero {
  position: relative;
  min-height: 60vh;
  border: none;
  box-shadow: none;
}

.fc-hero:hover {
  box-shadow: none;
}

.fc-hero::before {
  content: '';
  position: absolute;
  inset: -70px;
  background: var(--fc-blue);
  filter: blur(90px);
  opacity: 0.35;
  pointer-events: none;
}

/* La máscara vive aquí, no en el <img> — el <img> mide 130%/150% de alto
   (buffer para el parallax) y se desplaza con translateY, así que un
   porcentaje de máscara sobre el propio <img> no cae donde parece: "black
   82%" se mide contra su altura TOTAL (oversized), y buena parte de esa
   franja queda recortada por overflow:hidden antes de llegar a verse —
   el fundido real que se veía era mucho más corto de lo que decían los
   números, y además cambiaba con el scroll según cuánto se desplazara el
   parallax. .fc-hero-media, en cambio, mide exactamente la ventana visible
   (sin transform, sin oversize), así que sus porcentajes de máscara
   siempre corresponden 1:1 al recorte real, sea cual sea el desplazamiento
   del <img> de dentro. */
.fc-hero-media {
  position: relative;
  height: 100%;
  min-height: 60vh;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 70%, transparent 100%);
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 70%, transparent 100%);
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
}

/* Ken Burns sutil — respira, no "se mueve": recorrido pequeño (1 → 1.08)
   y muy lento (22s), alternando ida/vuelta en bucle infinito.
   overflow:hidden en el padre (.fc-hero-media) contiene el zoom.
   translateY(var(--fc-hero-parallax)) va en el mismo transform que el
   scale — el parallax de scroll (inicio.js) solo actualiza esa custom
   property en .fc-hero-media, sin tocar el transform inline ni pisar
   esta animación. Fallback 0px: sin JS o con prefers-reduced-motion no
   se mueve nada. */
@keyframes fc-hero-kenburns {
  from { transform: scale(1) translateY(var(--fc-hero-parallax, 0px)); }
  to   { transform: scale(1.08) translateY(var(--fc-hero-parallax, 0px)); }
}

/* Solo tamaño/posición aquí — la máscara vive en .fc-hero-media (ver
   comentario ahí arriba). position:absolute + height:150%/top:-25%
   (antes 130%/-15%, ampliado junto con el parallax): la foto necesita
   ese margen de sobra para el translateY del parallax — sin suficiente
   buffer, al desplazarse dejaría ver un hueco en el borde opuesto dentro
   de .fc-hero-media (overflow:hidden). 25% de margen cubre con holgura
   el MAX_OFFSET de 90px del parallax (inicio.js) en la altura mínima
   real del hero (60vh). */
.fc-hero-media img {
  position: absolute;
  top: -25%;
  left: 0;
  width: 100%;
  height: 150%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}

@media (prefers-reduced-motion: no-preference) {
  .fc-hero-media img {
    animation: fc-hero-kenburns 22s ease-in-out infinite alternate;
  }
}

/* Sin oscurecimiento propio: la foto queda a su luminosidad casi
   original. El contraste del texto lo da solo el degradado de
   .fc-hero-content de abajo (franja mínima, ya existente, sin cambios),
   no una capa extra sobre toda la imagen. */

/* transparent 0% → esta capa cubre TODO .fc-hero (inset:0), incluida la
   franja inferior donde .fc-hero-media ya hace fade a transparente para
   enseñar el halo — sin este primer stop, el 0.9 opaco tapaba ese fade
   por completo y el borde inferior se veía cortado en vez de desvanecido
   (el superior sí se veía bien porque ahí este degradado ya llega
   transparente al 100%). 9% deja el hueco justo por debajo de
   fc-hero-cta-row (padding var(--fc-space-8), sin texto ahí), así que el
   contraste del texto no se resiente. */
.fc-hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--fc-space-2);
  padding: var(--fc-space-8);
  background: linear-gradient(
    to top,
    transparent 0%,
    rgba(10, 10, 15, 0.9) 9%,
    rgba(10, 10, 15, 0.35) 55%,
    transparent 100%
  );
}

.fc-hero-title-row {
  display: flex;
  align-items: center;
  gap: var(--fc-space-3);
}

.fc-hero-content h1 {
  font-family: var(--fc-font-display);
  font-size: var(--fc-text-5xl);
  color: var(--fc-text-primary);
  margin: 0;
}

.fc-hero-logo {
  height: 1em;
  width: auto;
  font-size: var(--fc-text-5xl);
  display: block;
}

.fc-hero-subtitle {
  color: var(--fc-text-primary);
  font-size: var(--fc-text-lg);
  margin: 0;
}

.fc-hero-telemetry {
  margin-top: var(--fc-space-2);
}

/* Explica el gancho de fc-hero-telemetry ("pero un poquito diferente")
   sin currículum ni credenciales — perfil bajo intencional en el hero. */
.fc-hero-explainer {
  margin-top: var(--fc-space-3);
  max-width: 46ch;
  color: var(--fc-text-secondary);
  font-size: var(--fc-text-base);
}

/* Mismo .fc-cta-row del resto del sitio (ver "¿Hablamos?" en Sobre
   nosotros), pero alineado a la izquierda para seguir el título/subtítulo
   del hero en vez de centrarse — override local, no toca .fc-cta-row. */
.fc-hero-cta-row {
  justify-content: flex-start;
}

@media (max-width: 640px) {
  .fc-hero,
  .fc-hero-media,
  .fc-hero-media img {
    min-height: 70vh;
  }

  /* En mobile el recorte de object-fit:cover es horizontal, no vertical:
     el contenedor es mucho más alto que ancho (70vh de alto vs. ~viewport
     de ancho) y la foto (1440x770, muy apaisada) escala para cubrir el
     alto, así que sobra ancho de sobra para recortar y el "center" (50%)
     por defecto cae en el cielo/paisaje de la derecha — la campana y los
     dos paracaidistas están entre el 14% y el 42% del ancho de la foto
     (verificado por muestreo de píxeles, no a ojo). 22% centra el recorte
     ahí. object-position Y (30%, heredado del bloque de desktop) no tiene
     ningún efecto real a este tamaño de contenedor — se deja igual por si
     min-height cambia en el futuro y vuelve a ser relevante. */
  .fc-hero-media img {
    object-position: 22% 30%;
  }

  .fc-hero-content h1 {
    font-size: var(--fc-text-4xl);
  }
}

/* --- sistemas --- */

.fc-sistemas {
  text-align: center;
}

.fc-sistemas > .fc-line-orange {
  max-width: 200px;
  margin: var(--fc-space-4) auto var(--fc-space-12);
}

.fc-sistemas > h2 {
  font-family: var(--fc-font-display);
}

.fc-sistemas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--fc-space-8);
  text-align: left;
}

.fc-sistema-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-2);
  background: var(--fc-surface-1);
  border: var(--fc-border-width) solid var(--fc-border);
  border-radius: var(--fc-radius-lg);
  padding: var(--fc-space-6);
  text-decoration: none;
  color: var(--fc-text-primary);
}

.fc-sistema-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fc-space-3);
  flex-wrap: wrap;
}

/* Icono de línea neón — capa independiente del glow de fondo de la
   tarjeta (ese vive en box-shadow del .fc-sistema-card; este es un
   filter: drop-shadow aplicado solo al trazo del SVG). */
.fc-sistema-icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

/* Grupo de 2 iconos (Cielo y tierra: paracaídas + túnel) — mismo
   tratamiento visual que un icono suelto, solo un poco más pequeños
   para que quepan juntos sin desbordar la cabecera de la tarjeta. */
.fc-sistema-icon-group {
  display: flex;
  align-items: center;
  gap: var(--fc-space-1);
  flex-shrink: 0;
}

.fc-sistema-icon-group .fc-sistema-icon {
  width: 24px;
  height: 24px;
}

.fc-sistema-icon--orange {
  color: var(--fc-orange);
  filter: drop-shadow(0 0 4px var(--fc-orange));
}

.fc-sistema-icon--blue {
  color: var(--fc-blue);
  filter: drop-shadow(0 0 4px var(--fc-blue));
}

.fc-sistema-card h3 {
  font-family: var(--fc-font-display);
  font-size: var(--fc-text-lg);
  margin: 0;
}

.fc-sistema-card p {
  color: var(--fc-text-secondary);
  margin: 0;
}

/* PRUEBA — vista previa (contador + avatares) en el índice de Friendzone.
   Mismo tratamiento en las 6 tarjetas (mismo tamaño, mismas clases) para no
   romper la regla de "sin jerarquía entre tarjetas": ninguna debe destacar
   sobre las demás. Deliberadamente más pequeño y apagado que
   .fc-sistema-icon (30px) y el <h3> — es un dato de apoyo, no un segundo
   punto focal. Revertir: borrar este bloque + friendzone-index.js + los
   <div class="fc-sistema-preview"> en friendzone.html. */
.fc-sistema-preview {
  display: flex;
  align-items: center;
  gap: var(--fc-space-2);
  min-height: 28px;
}

.fc-sistema-avatares {
  display: flex;
  align-items: center;
}

.fc-sistema-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--fc-surface-2);
  background-size: cover;
  background-position: center;
  border: 2px solid var(--fc-surface-1);
  flex-shrink: 0;
}

.fc-sistema-avatar:not(:first-child) {
  margin-left: -10px;
}

.fc-sistema-avatar--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}

.fc-sistema-avatar--placeholder svg {
  width: 14px;
  height: 14px;
  color: var(--fc-text-disabled);
}

.fc-sistema-count {
  font-family: var(--fc-font-data);
  font-size: var(--fc-text-xs);
  color: var(--fc-text-secondary);
}

/* ============================================================
   INICIO — detalle propio por tarjeta de Sistemas. Mismo criterio que
   fc-sistema-preview (Friendzone): un dato de apoyo entre el <h3> y las
   <p>, sutil, sin competir con icono/título. Cada tarjeta usa el recurso
   que mejor encaja con su propio contenido, no un componente único
   repetido — solo esta sección (fc-sistemas-grid), no toca las 6
   tarjetas del índice de Friendzone.
   ============================================================ */

/* Cielo y tierra — 2 miniaturas de formato (túnel / paracaidismo), mismo
   criterio visual que fc-sistema-avatar pero en cuadrado, no círculo,
   para no confundirse con "personas" (Friendzone/Sobre nosotros). */
.fc-sistema-thumbs {
  display: flex;
  gap: var(--fc-space-2);
}

.fc-sistema-thumb {
  width: 36px;
  height: 36px;
  border-radius: var(--fc-radius-md);
  overflow: hidden;
  flex-shrink: 0;
}

.fc-sistema-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Camps & Events — número real de próximos eventos (Gravity Brake +
   Oslo, ver camps.html), mismo peso que fc-sistema-count le da a
   Friendzone pero con el número destacado en vez de solo texto. */
.fc-sistema-stat {
  display: flex;
  align-items: baseline;
  gap: var(--fc-space-2);
}

.fc-sistema-stat-number {
  font-family: var(--fc-font-data);
  font-size: var(--fc-text-2xl);
  font-weight: 600;
  color: var(--fc-orange);
  line-height: 1;
}

.fc-sistema-stat-label {
  font-size: var(--fc-text-xs);
  color: var(--fc-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Momentos — mini-grid de 4 fotos reales (ver data/momentos.json),
   anticipo del propio registro de fotos que enlaza la tarjeta. */
.fc-sistema-photogrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--fc-space-1);
  max-width: 160px;
}

.fc-sistema-photogrid img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--fc-radius-sm);
  display: block;
}

/* Contacto — los 3 canales reales de la propia página (mapa, WhatsApp,
   Instagram), mismo criterio de línea (viewBox 32x32, stroke 1.8) que el
   resto del sitio, reutilizados aquí como SVG estático — dato de apoyo, no
   un segundo set de iconos a color como el de la cabecera. */
.fc-sistema-canales {
  display: flex;
  gap: var(--fc-space-3);
}

.fc-sistema-canal-icon {
  width: 18px;
  height: 18px;
  color: var(--fc-text-secondary);
}

/* Friendzone — las 6 categorías reales de la sección, un icono por cada
   una, cada uno enlazando a su propia página (friendzone-coaches.html,
   friendzone-material.html, etc.). Sustituye a la fila de avatares de
   coaches: aquella anticipaba "4 coaches" en una tarjeta cuyo texto habla
   de seis categorías. Tamaño de dato de apoyo como fc-sistema-canal-icon
   (18px de trazo), pero en el azul HUD de la tarjeta y dentro de un área de
   click de 28px — el mismo alto que tenía .fc-sistema-avatar, así el ritmo
   vertical de la tarjeta no cambia. */
.fc-sistema-categorias {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fc-space-1);
  /* fit-content, no el 100% que tomaría por defecto un contenedor de
     bloque: esta fila va con z-index por encima del ::after estirado del
     enlace de la tarjeta (ver más abajo), así que todo lo que ocupe de
     ancho deja de llevar a friendzone.html. A ancho completo, la franja
     vacía a la derecha de los 6 iconos se tragaba el click sin ir a
     ninguna parte. */
  width: fit-content;
  max-width: 100%;
  /* Y por lo mismo, los huecos del gap entre iconos tampoco deben
     interceptar: sin esto, apuntar entre dos iconos era un click a ninguna
     parte. Con pointer-events el hueco cae al ::after de debajo y lleva a
     friendzone.html, que es el destino razonable para "la tarjeta, no una
     categoría concreta". */
  pointer-events: none;
}

.fc-sistema-categoria {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--fc-radius-sm);
  color: var(--fc-blue);
  pointer-events: auto;
  transition: background-color var(--fc-transition-base);
}

/* drop-shadow en el <svg>, no en el <a>: en el <a> el glow envolvería
   también la caja de 28px (y su fondo en hover), no el trazo. Radio menor
   y --fc-blue-glow en vez de --fc-blue a secas porque a 18px el mismo
   glow que lleva .fc-sistema-icon (30px) se come el dibujo. */
.fc-sistema-categoria svg {
  width: 18px;
  height: 18px;
  filter: drop-shadow(0 0 3px var(--fc-blue-glow));
  transition: filter var(--fc-transition-base);
}

.fc-sistema-categoria:hover,
.fc-sistema-categoria:focus-visible {
  background: var(--fc-blue-subtle);
}

.fc-sistema-categoria:hover svg,
.fc-sistema-categoria:focus-visible svg {
  filter: drop-shadow(0 0 5px var(--fc-blue));
}

/* La tarjeta de Friendzone ya no puede ser un <a> entera: dentro lleva los
   6 enlaces de categoría, y HTML no admite <a> dentro de <a> (el parser
   cierra el de fuera y parte el DOM). Pasa a <div> y es el enlace del <h3>
   el que se estira sobre toda la tarjeta con un ::after invisible, así que
   la superficie completa sigue llevando a friendzone.html igual que antes
   —y :hover/:focus-within del glow y del crosshair siguen funcionando
   porque son selectores de clase, no de <a>. */
.fc-sistema-card-link {
  color: inherit;
  text-decoration: none;
}

.fc-sistema-card-link::after {
  content: '';
  position: absolute;
  inset: 0;
}

/* El crosshair de .fc-hud-corner es decorativo, pero ::after de la tarjeta
   pinta por encima del ::after estirado del enlace (un pseudo ::after cuenta
   como último hijo), así que su cuadrado de 16px en la esquina inferior
   derecha se comía el click. Mientras la tarjeta era un <a> entero no se
   notaba: el click caía igualmente dentro del enlace. Scoped a
   .fc-sistema-card porque es la única que ha dejado de ser <a>; si algún día
   otra tarjeta adopta el mismo patrón, subir esto a .fc-hud-corner. */
.fc-sistema-card.fc-hud-corner::before,
.fc-sistema-card.fc-hud-corner::after {
  pointer-events: none;
}

/* Por encima del ::after estirado, si no los 6 iconos quedarían tapados
   por él y toda la tarjeta llevaría a friendzone.html. */
.fc-sistema-card .fc-sistema-categorias {
  position: relative;
  z-index: 1;
}

/* El "6" reutiliza el patrón de Camps & Events (número grande + label en
   versalitas) pero en azul: esta es una tarjeta --azul y los 6 iconos que
   tiene justo encima van en azul HUD, un número naranja ahí sería el único
   naranja de la tarjeta. Scoped a --azul para no tocar el de Camps. */
.fc-sistemas-grid .fc-sistema-card--azul .fc-sistema-stat-number {
  color: var(--fc-blue);
}

/* Tarjetas "azul = conocer/explorar" (Friendzone, Momentos, Sobre
   nosotros) — mismo criterio que .fc-card--grupo en Cielo y tierra: en
   reposo el glow permanente naranja (compartido por .fc-sistemas-grid
   .fc-sistema-card, ver bloque más abajo) se sustituye por azul. Selector
   más específico → gana sin tocar la regla compartida, que sigue
   sirviendo tal cual a Cielo y tierra/Camps/Contacto aquí y a las 6
   tarjetas del índice de Friendzone. En hover convergen al mismo azul de
   siempre (regla compartida, sin cambios). */
.fc-sistemas-grid .fc-sistema-card.fc-sistema-card--azul {
  border-color: var(--fc-border-blue);
  box-shadow: var(--fc-shadow-blue);
}

/* --- cta final --- */

.fc-inicio-cta {
  max-width: var(--fc-max-width-content);
  margin: 0 auto;
  text-align: center;
}

.fc-inicio-cta > .fc-line-blue {
  max-width: 200px;
  margin: 0 auto var(--fc-space-8);
}

.fc-inicio-cta h2 {
  font-family: var(--fc-font-display);
}

.fc-inicio-cta p {
  color: var(--fc-text-secondary);
  margin: var(--fc-space-4) 0 var(--fc-space-6);
}

/* Altímetro de Inicio: mismo componente que en el lightbox de
   Momentos (.fc-altimetro), reutilizado como indicador de scroll.
   Solo desktop — en mobile no encaja bien como barra persistente
   sobre el contenido en flujo normal de la página. */
@media (max-width: 768px) {
  #inicio-altimetro {
    display: none;
  }
}

/* ============================================================
   EQUIPO
   ============================================================ */

.fc-equipo {
  max-width: var(--fc-max-width);
  margin: 0 auto;
  padding: var(--fc-space-16) var(--fc-padding-x) var(--fc-space-24);
  text-align: center;
}

.fc-equipo > .fc-line-orange {
  max-width: 200px;
  margin: var(--fc-space-4) auto var(--fc-space-16);
}

.fc-equipo > h1 {
  font-family: var(--fc-font-display);
}

.fc-equipo-section {
  text-align: left;
  margin-top: var(--fc-space-16);
}

.fc-equipo-section:first-of-type {
  margin-top: 0;
}

.fc-equipo-section h2 {
  font-family: var(--fc-font-display);
  font-size: var(--fc-text-2xl);
  margin-bottom: var(--fc-space-6);
  text-align: center;
}

/* --- Kaeli --- */

.fc-kaeli-content {
  display: flex;
  align-items: center;
  gap: var(--fc-space-8);
  max-width: var(--fc-max-width-content);
  margin: 0 auto;
}

.fc-kaeli-logos {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--fc-space-4);
  flex-shrink: 0;
}

.fc-kaeli-logo {
  flex-shrink: 0;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fc-surface-2);
  border: var(--fc-border-width) solid var(--fc-border);
  border-radius: var(--fc-radius-lg);
  font-size: var(--fc-text-4xl);
  color: var(--fc-orange);
  opacity: 0.5;
  overflow: hidden;
}

.fc-kaeli-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Logo de Indoor Skydiving Leipzig — 30% mayor que el de Kaeli (120px),
   mismo tratamiento de tarjeta para que ambos lean como un mismo par. */
.fc-isl-logo {
  flex-shrink: 0;
  width: 156px;
  height: 156px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fc-surface-2);
  border: var(--fc-border-width) solid var(--fc-border);
  border-radius: var(--fc-radius-lg);
  overflow: hidden;
}

.fc-isl-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ============================================================
   PRUEBA — logos de Kaeli sin marco, con resplandor azul.
   Se activa con la clase "fc-kaeli-logos--sin-marco" en el HTML
   (public/equipo.html), en vez de tocar las reglas de arriba.
   Para revertir: quitar esa clase del <div class="fc-kaeli-logos">
   (o borrar este bloque completo) y los logos vuelven a la tarjeta
   original (fondo --fc-surface-2 + borde + radius), sin más cambios.

   El glow reutiliza el mismo tono/opacidades que --fc-shadow-blue
   (0, 168, 232 al 0.25/0.08), vía drop-shadow porque los PNG son
   transparentes y el glow debe seguir el contorno del logo, no un
   box-shadow rectangular.
   ============================================================ */
.fc-kaeli-logos--sin-marco .fc-kaeli-logo,
.fc-kaeli-logos--sin-marco .fc-isl-logo {
  background: none;
  border: none;
  border-radius: 0;
}

.fc-kaeli-logos--sin-marco .fc-isl-logo img {
  filter:
    drop-shadow(0 0 20px rgba(0, 168, 232, 0.25))
    drop-shadow(0 0 60px rgba(0, 168, 232, 0.08));
}

/* El logo de Kaeli es cromado/plateado — su saturación de color
   (~0.32, medida) es la mitad que la del logo de ISL (~0.68), aunque
   su luminosidad ya sea alta. Por eso se ve apagado en la fila pese
   a no ser "oscuro". Se compensa con saturación/contraste (no solo
   brightness, que ya tiene) y un glow algo más intenso que el de
   ISL — mismo tono azul, nunca se apaga el de ISL.

   PENDIENTE: esto todavía no iguala del todo la luminosidad
   percibida frente a ISL (el gris neutro de Kaeli no admite el mismo
   tipo de brillo saturado sin generar artefactos de halo/bordeado
   probados y descartados en otra sesión) — afinado pendiente de
   retomar más adelante. */
.fc-kaeli-logos--sin-marco .fc-kaeli-logo img {
  filter:
    saturate(1.7) contrast(1.15)
    drop-shadow(0 0 20px rgba(0, 168, 232, 0.35))
    drop-shadow(0 0 60px rgba(0, 168, 232, 0.12));
}

.fc-kaeli-significado p {
  color: var(--fc-text-secondary);
  font-style: italic;
}

.fc-kaeli-significado p + p {
  margin-top: var(--fc-space-4);
}

.fc-kaeli-significado p.fc-kaeli-significado-titulo {
  color: var(--fc-text-primary);
  font-style: normal;
  font-weight: 700;
}

/* --- Cómo nació Kaeli --- */

.fc-kaeli-historia-text {
  max-width: var(--fc-max-width-content);
  margin: 0 auto;
  text-align: left;
}

.fc-kaeli-historia-text p {
  color: var(--fc-text-primary);
  margin-top: var(--fc-space-4);
}

@media (max-width: 640px) {
  .fc-kaeli-content {
    flex-direction: column;
    text-align: center;
  }
}

/* --- El equipo --- */

.fc-equipo-foto {
  position: relative;
  max-width: var(--fc-max-width-content);
  margin: 0 auto var(--fc-space-10);
  border-radius: var(--fc-radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.fc-equipo-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 10%;
  display: block;
}

.fc-equipo-foto::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--fc-vignette);
}

.fc-equipo-foto-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fc-surface-2);
  font-size: var(--fc-text-5xl);
  opacity: 0.4;
}

.fc-perfiles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--fc-space-8);
}

.fc-perfil-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--fc-surface-1);
  border: var(--fc-border-width) solid var(--fc-border);
  border-radius: var(--fc-radius-lg);
  overflow: hidden;
}

.fc-perfil-media {
  position: relative;
  height: 220px;
}

.fc-perfil-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}

.fc-perfil-media--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fc-surface-2);
  font-size: var(--fc-text-4xl);
  opacity: 0.4;
}

.fc-perfil-content {
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-2);
  padding: var(--fc-space-6);
}

.fc-perfil-content h3 {
  font-family: var(--fc-font-display);
  font-size: var(--fc-text-xl);
  color: var(--fc-text-primary);
}

.fc-perfil-detalle {
  color: var(--fc-text-secondary);
}

.fc-perfil-content .fc-btn-secondary {
  align-self: flex-start;
  margin-top: var(--fc-space-2);
}

.fc-perfil-content .fc-colab-contacts {
  margin-top: var(--fc-space-2);
}

/* --- Iconos de medalla ---
   Antes también usados por el grid de la sección Palmarés (retirada de
   equipo.html — ver comentario ahí). Ahora solo los pinta
   resultadoTimeline() dentro de la Línea de tiempo, pero conservan el
   nombre fc-palmares-icon* porque el icono en sí no cambió, solo su
   sección contenedora — renombrarlas obligaría a tocar equipo.js sin
   ganar nada. Mismo lenguaje que los iconos de línea de Inicio (trazo +
   drop-shadow como glow), pero en plata/bronce en vez de naranja/azul,
   para diferenciarlos del resto del sitio. */
.fc-palmares-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.fc-palmares-icon--plata {
  color: var(--fc-text-primary);
  filter: drop-shadow(0 0 4px #F0EDE8);
}

.fc-palmares-icon--bronce {
  color: #CD7F32;
  filter: drop-shadow(0 0 4px #CD7F32);
}

/* Oro — dorado real (--fc-gold), no el naranja de acento del sitio,
   para que lea como metal de medalla junto a plata/bronce. */
.fc-palmares-icon--oro {
  color: var(--fc-gold);
  filter: drop-shadow(0 0 4px var(--fc-gold));
}

/* ============================================================
   LÍNEA DE TIEMPO (Equipo) — pendiente de confirmar como definitiva,
   reversible. Para quitarla: borra este bloque completo, la <section
   class="fc-timeline-section"> de equipo.html, y en equipo.js las
   funciones filasCategoriaTimeline/resultadoTimeline/
   filaCategoriaTimeline/banderaPais/cardTimeline + el bloque que
   rellena #timeline-grid dentro de cargarEquipo(). El array
   "linea_tiempo" de data/equipo.json puede quedarse sin usarse o
   borrarse también.

   Formato vertical (no horizontal) para que no dependa del ancho de
   viewport ni necesite scroll lateral — coherente con el resto de
   la página, que apila secciones a una columna.
   ============================================================ */

.fc-timeline-section > .fc-line-orange {
  max-width: 200px;
  margin: 0 auto var(--fc-space-6);
}

.fc-timeline {
  position: relative;
  max-width: var(--fc-max-width-content);
  margin: 0 auto;
  padding-left: var(--fc-space-10);
}

.fc-timeline::before {
  content: '';
  position: absolute;
  left: 5px;
  top: var(--fc-space-2);
  bottom: var(--fc-space-2);
  width: 2px;
  background: linear-gradient(to bottom, var(--fc-orange), var(--fc-blue));
  box-shadow: 0 0 8px var(--fc-orange-glow);
}

.fc-timeline-item {
  position: relative;
  margin-bottom: var(--fc-space-8);
}

.fc-timeline-item:last-child {
  margin-bottom: 0;
}

.fc-timeline-marker {
  position: absolute;
  left: calc(-1 * var(--fc-space-10) + 1px);
  top: var(--fc-space-2);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--fc-bg);
  border: 2px solid var(--fc-orange);
  box-shadow: 0 0 10px var(--fc-orange-glow);
}

.fc-timeline-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fc-space-6);
  background: var(--fc-surface-1);
  border: var(--fc-border-width) solid var(--fc-border);
  border-radius: var(--fc-radius-lg);
  padding: var(--fc-space-6);
}

.fc-timeline-fecha {
  margin: 0;
}

/* Lugar (túnel/DZ + ciudad + país) — línea auxiliar bajo fecha/país, en
   texto secundario apagado (no fc-hud-label como la fecha) para que no
   compita con el título del evento; solo se pinta si la entrada trae el
   dato — hoy las 3 lo traen, pero no se inventa si faltara (ver
   cardTimeline() en equipo.js). */
.fc-timeline-lugar {
  margin: var(--fc-space-1) 0 0;
  font-size: var(--fc-text-xs);
  color: var(--fc-text-secondary);
}

.fc-timeline-card h3 {
  font-family: var(--fc-font-display);
  font-size: var(--fc-text-lg);
  margin: var(--fc-space-1) 0;
}

/* Una fila por categoría: el nombre a la izquierda (pill azul, igual
   que antes) y, si esa categoría tiene medalla, el resultado a la
   derecha en la misma línea — nunca en un bloque aparte. */
.fc-timeline-categorias {
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-2);
  margin-top: var(--fc-space-3);
}

.fc-timeline-categoria-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fc-space-4);
}

.fc-timeline-chip {
  font-family: var(--fc-font-data);
  font-size: var(--fc-text-sm);
  padding: var(--fc-space-1) var(--fc-space-3);
  color: var(--fc-blue);
  border: var(--fc-border-width) solid var(--fc-blue);
  border-radius: var(--fc-radius-full);
}

/* Resultado (Oro/Plata/Bronce) — icono de iconoMedalla() + texto, sin
   borde ni fondo, solo color (mismo lenguaje que el resto de iconos
   de línea del sitio: el color lleva el peso, no un contenedor). */
.fc-timeline-resultado {
  display: inline-flex;
  align-items: center;
  gap: var(--fc-space-2);
  flex-shrink: 0;
  font-family: var(--fc-font-data);
  font-size: var(--fc-text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* El SVG de iconoMedalla() reserva más espacio arriba (la cinta) que
   abajo del disco (ver viewBox en equipo.js: cinta y=4-13, disco
   cy=20 r=8 sobre un lienzo de 32) — su bounding box está centrado
   con el texto, pero el disco (el peso visual real del icono) queda
   ~3px por debajo del centro óptico del texto. Se corrige solo aquí
   (no en .fc-palmares-icon de Palmarés) para no tocar esa sección. */
.fc-timeline-resultado svg {
  transform: translateY(-3px);
}

.fc-timeline-resultado--oro {
  color: var(--fc-gold);
  text-shadow: 0 0 8px var(--fc-gold-glow);
}

.fc-timeline-resultado--plata {
  color: var(--fc-text-primary);
  text-shadow: 0 0 8px rgba(240, 237, 232, 0.35);
}

.fc-timeline-resultado--bronce {
  color: #CD7F32;
  text-shadow: 0 0 8px rgba(205, 127, 50, 0.35);
}

/* Miniatura de foto — placeholder con icono si "foto" viene vacío,
   para que el layout no se rompa mientras falte alguna imagen. Un
   poco más grande que el resto de miniaturas del sitio (fc-perfil-
   media, etc.) para que se lea bien en el formato vertical de la
   línea de tiempo. */
.fc-timeline-foto {
  flex-shrink: 0;
  width: 88px;
  height: 88px;
  border-radius: var(--fc-radius-md);
  overflow: hidden;
}

.fc-timeline-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fc-timeline-foto--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fc-surface-2);
  border: var(--fc-border-width) dashed var(--fc-border);
  font-size: var(--fc-text-lg);
  opacity: 0.4;
}

@media (max-width: 640px) {
  .fc-timeline-card {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ============================================================
   TESTIMONIOS (Sobre nosotros)
   ============================================================ */

.fc-testimonios {
  max-width: var(--fc-max-width);
  margin: var(--fc-space-24) auto 0;
  padding: 0 var(--fc-padding-x);
  text-align: center;
}

.fc-testimonios > .fc-line-orange {
  max-width: 200px;
  margin: var(--fc-space-4) auto var(--fc-space-12);
}

.fc-testimonios > h2 {
  font-family: var(--fc-font-display);
  font-size: var(--fc-text-2xl);
}

.fc-testimonios-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--fc-space-8);
  text-align: left;
}

/* Tarjeta tipo cita — distinta a propósito de .fc-card (Cielo y tierra):
   sin foto de producto ni CTA, con comillas decorativas grandes,
   para que se lea como testimonio, no como algo en venta. */
.fc-testimonio-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--fc-surface-1);
  border: var(--fc-border-width) solid var(--fc-border);
  border-radius: var(--fc-radius-lg);
  padding: var(--fc-space-8) var(--fc-space-6) var(--fc-space-6);
}

.fc-testimonio-quote-mark {
  font-family: var(--fc-font-display);
  font-size: 3.5rem;
  line-height: 1;
  color: var(--fc-orange);
  opacity: 0.35;
  margin: 0 0 calc(-1 * var(--fc-space-4));
}

.fc-testimonio-texto {
  margin: 0;
  color: var(--fc-text-primary);
  font-style: italic;
}

.fc-testimonio-autor {
  display: flex;
  align-items: center;
  gap: var(--fc-space-3);
  margin-top: var(--fc-space-5);
}

.fc-testimonio-foto {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--fc-radius-full);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fc-surface-2);
  font-size: var(--fc-text-lg);
}

.fc-testimonio-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fc-testimonio-nombre {
  font-family: var(--fc-font-data);
  color: var(--fc-text-secondary);
  letter-spacing: 0.04em;
}

/* --- progreso técnico (opcional, solo si el testimonio trae "progreso") --- */

.fc-testimonio-progreso-toggle {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-top: var(--fc-space-5);
  padding: var(--fc-space-2) var(--fc-space-4);
  background: var(--fc-blue-subtle);
  border: var(--fc-border-width) solid var(--fc-border-blue);
  border-radius: var(--fc-radius-full);
  cursor: pointer;
  opacity: 1;
  transition: border-color var(--fc-transition-fast), box-shadow var(--fc-transition-fast);
}

.fc-testimonio-progreso-toggle:hover,
.fc-testimonio-progreso-toggle:focus-visible {
  border-color: var(--fc-blue);
  box-shadow: var(--fc-shadow-blue);
}

.fc-testimonio-progreso {
  margin-top: var(--fc-space-3);
}

.fc-testimonio-progreso-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fc-text-sm);
}

.fc-testimonio-progreso-tabla th {
  font-family: var(--fc-font-data);
  color: var(--fc-blue);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: var(--fc-text-xs);
  text-align: left;
  padding: var(--fc-space-2) var(--fc-space-3) var(--fc-space-2) 0;
  border-bottom: 1px solid var(--fc-border-blue);
}

.fc-testimonio-progreso-tabla td {
  padding: var(--fc-space-3) var(--fc-space-3) var(--fc-space-3) 0;
  border-bottom: 1px solid var(--fc-border-blue);
  vertical-align: top;
}

.fc-testimonio-progreso-tabla tr:last-child td {
  border-bottom: none;
}

.fc-testimonio-progreso-reto {
  color: var(--fc-text-secondary);
}

.fc-testimonio-progreso-mejora {
  color: var(--fc-text-primary);
}

/* Label real (span en el HTML, ver tablaProgreso() en sobre-mi.js) en vez
   de content: CSS — un ::before no es un nodo de texto y el walker de
   i18n.js no puede traducirlo. Oculto por defecto: en desktop el <thead>
   ya hace de columna visible; solo se muestra en el media query de mobile
   de más abajo, donde sustituye a la fila de encabezado (oculta fuera de
   pantalla). */
.fc-testimonio-progreso-label {
  display: none;
}

@media (max-width: 480px) {
  .fc-testimonio-progreso-tabla,
  .fc-testimonio-progreso-tabla thead,
  .fc-testimonio-progreso-tabla tbody,
  .fc-testimonio-progreso-tabla th,
  .fc-testimonio-progreso-tabla td,
  .fc-testimonio-progreso-tabla tr {
    display: block;
  }

  .fc-testimonio-progreso-tabla thead {
    position: absolute;
    left: -9999px;
  }

  .fc-testimonio-progreso-tabla tr {
    padding: var(--fc-space-3) 0;
    border-bottom: 1px solid var(--fc-border-blue);
  }

  .fc-testimonio-progreso-tabla tr:last-child {
    border-bottom: none;
  }

  .fc-testimonio-progreso-tabla td {
    padding: var(--fc-space-1) 0;
    border-bottom: none;
  }

  .fc-testimonio-progreso-label {
    display: inline;
    color: var(--fc-blue);
    font-family: var(--fc-font-data);
    font-size: var(--fc-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
}

/* --- formulario --- */

.fc-testimonio-form-section {
  max-width: var(--fc-max-width-content);
  margin: var(--fc-space-24) auto 0;
  padding: 0 var(--fc-padding-x);
  text-align: center;
}

.fc-testimonio-form-section > h2 {
  font-family: var(--fc-font-display);
}

.fc-testimonio-form-intro {
  color: var(--fc-text-secondary);
  margin: var(--fc-space-4) 0 var(--fc-space-8);
}

.fc-testimonio-form {
  text-align: left;
}

.fc-testimonio-form .fc-btn-primary {
  align-self: flex-start;
}