/* =============================================
   ALL ENDURO TEXCOCO · Áreas de video de Instagram
   Bajadas en video (teleférico de cabinas) y Comunidad (tablero de marcadores).
   Depende de los tokens de styles.css. Se carga después de styles.css.
   ============================================= */

.ig-wall {
  position: relative;
  padding: 6rem 0;
  overflow: hidden;
  scroll-margin-top: 5rem;
}
.ig-wall--bajadas { background: var(--bg-surface); }
.ig-wall--comunidad {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(74,222,38,0.06), transparent 50%),
    repeating-linear-gradient(90deg, #06100a 0 2px, #050d08 2px 90px),
    #050d08;
}
.ig-wall__head {
  text-align: center;
  max-width: 1100px;
  margin: 0 auto 2.5rem;
  padding: 0 2rem;
}
.ig-wall__head .section__desc { margin: 0 auto; }

/* --- Marquesina outline que se desplaza con el scroll --- */
.ig-marquee {
  overflow: hidden;
  white-space: nowrap;
  padding: 0.35rem 0;
  margin-bottom: 1.5rem;
  border-top: 1px solid rgba(74,222,38,0.08);
  border-bottom: 1px solid rgba(74,222,38,0.08);
}
.ig-marquee__track { display: inline-flex; will-change: transform; }
.ig-marquee__text {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px rgba(74,222,38,0.55);
  white-space: pre;
}
.ig-marquee--naranja .ig-marquee__text { -webkit-text-stroke-color: rgba(255,140,38,0.6); }

/* =============================================
   TELEFÉRICO
   ============================================= */
.telef { position: relative; }
.telef__pista {
  --cab: min(88vw, 400px);
  --tilt: 0deg;
  --spin: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-padding-inline: max(clamp(1rem, 4vw, 3rem), calc((100% - var(--cab)) / 2));
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.telef__pista::-webkit-scrollbar { display: none; }
.telef__pista:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.telef__inner {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 2.5rem;
  width: max-content;
  min-width: 100%;
  padding: 1.5rem max(clamp(1rem, 4vw, 3rem), calc((100% - var(--cab)) / 2)) 3rem;
}

/* Cable con pendiente (1.5 grados, cae hacia la derecha) y poleas de estación */
.telef__cable {
  position: absolute;
  top: 34px; left: 0; right: 0;
  height: 3px;
  transform-origin: 0 50%;
  transform: rotate(1.5deg);
  background: linear-gradient(90deg, #2c3d2c, #7a907a 20%, #7a907a 80%, #2c3d2c);
  box-shadow: 0 1px 0 #000, 0 0 12px var(--accent-glow);
  pointer-events: none;
}
.telef__polea {
  position: absolute;
  top: 50%;
  width: 30px; height: 30px;
  margin-top: -15px;
  border-radius: 50%;
  border: 4px solid #7a907a;
  background: var(--bg-card);
  box-shadow: inset 0 0 0 3px #0b140b;
  transform: rotate(calc(var(--spin) * 3deg));
}
.telef__polea::before {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  border: 2px dashed rgba(74,222,38,0.55);
}
.telef__polea--a { left: 4%; }
.telef__polea--b { right: 4%; }

/* Cabina: el article es el área de snap (sin transformaciones);
   .cabina__cuelga lleva entrada, inclinación y hover para no mover el snap. */
.cabina {
  position: relative;
  flex: 0 0 var(--cab);
  scroll-snap-align: start;
  margin-top: var(--hang, 0px);
}
.cabina__cuelga {
  transform-origin: 50% 12px;
  transform: rotate(var(--tilt));
  rotate: 2.5deg;
  opacity: 0;
  translate: 60px 0;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cabina.is-in .cabina__cuelga {
  opacity: 1;
  translate: 0 0;
  rotate: 0deg;
  transition:
    opacity 0.6s ease calc(var(--i) * 120ms),
    translate 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--i) * 120ms),
    rotate 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--i) * 120ms),
    transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cabina.is-in:hover .cabina__cuelga,
.cabina.is-in:focus-within .cabina__cuelga {
  translate: 0 -6px;
  transition: translate 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cabina__polea {
  display: block;
  position: relative;
  width: 24px; height: 24px;
  margin: 0 auto;
  border-radius: 50%;
  border: 3px solid #8aa08a;
  background: var(--bg-card);
  box-shadow: 0 0 0 2px #0b140b;
  transform: rotate(calc(var(--spin) * 5deg));
}
.cabina__polea::before {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  border: 2px dotted rgba(74,222,38,0.6);
}
.cabina__pinza {
  position: relative;
  width: 52px; height: 36px;
  margin: -4px auto -6px;
  background: linear-gradient(#5a6e5a, #1d2a1d);
  clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
  transform-origin: 50% 0;
  transition: rotate 0.25s ease;
}
.cabina__pinza::after {
  content: '';
  position: absolute;
  top: 12px; left: 50%;
  width: 8px; height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 6px var(--orange);
}
.cabina:hover .cabina__pinza { rotate: -2deg; }
.cabina__label {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--font-tech);
  font-size: 0.65rem;
  letter-spacing: 0.25em;
  color: var(--accent);
  padding: 0.65rem 0.75rem 0.45rem;
  background: #0b140b;
  border: 1px solid rgba(74,222,38,0.3);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  transition: border-color 0.3s ease;
}
.cabina__rec {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--orange);
}
.cabina__rec::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 6px var(--orange);
  animation: ig-rec 2s steps(2) infinite;
}
@keyframes ig-rec { to { opacity: 0; } }

.cabina__cuerpo {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #0b140b;
  border: 1px solid rgba(74,222,38,0.3);
  border-top: 0;
  border-radius: 0 0 28px 28px;
  padding: 8px;
  min-height: auto;
  box-shadow: 0 30px 60px -20px rgba(74,222,38,0.18), 0 20px 40px rgba(0,0,0,0.6);
  transition: border-color 0.3s ease;
}
.cabina.is-active .cabina__cuerpo,
.cabina.is-active .cabina__label { border-color: rgba(74,222,38,0.6); }

/* Luz que cruza la cabina activa (no tapa el iframe: pointer-events none) */
.cabina__cuerpo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(74,222,38,0.14) 50%, transparent 60%);
  translate: -100% 0;
}
.cabina.is-active .cabina__cuerpo::before { animation: ig-sweep 1.4s ease-out 0.2s 1; }
@keyframes ig-sweep { to { translate: 100% 0; } }

/* Navegación */
.telef__nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 0.5rem;
}
.telef__btn {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--accent);
  border-radius: 4px;
  background: transparent;
  color: var(--accent);
  font-family: var(--font-body);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: var(--transition-fast);
}
.telef__btn:hover { background: var(--accent); color: var(--bg-deep); }
.telef__btn:disabled { opacity: 0.35; cursor: default; background: transparent; color: var(--accent); }
.telef__btn:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.telef__pos {
  font-family: var(--font-tech);
  font-size: 0.65rem;
  letter-spacing: 0.25em;
  color: var(--text-secondary);
  min-width: 6ch;
  text-align: center;
}

/* =============================================
   TABLERO DE MARCADORES
   ============================================= */
.tablero {
  columns: 2;
  column-gap: 2.5rem;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0.75rem 2rem 0;
}
.marcador {
  --rot: -2deg;
  break-inside: avoid;
  position: relative;
  margin: 0 0 2.5rem;
  padding: 26px 12px 12px;
  background: #101a10;
  border: 1px solid rgba(255,255,255,0.08);
  rotate: var(--rot);
  opacity: 0;
  translate: 0 -24px;
  scale: 1.04;
}
.marcador:nth-child(3n+2) { --rot: 1.5deg; }
.marcador:nth-child(3n+3) { --rot: -1deg; }
.marcador.is-in {
  opacity: 1;
  translate: 0 0;
  scale: 1;
  transition:
    opacity 0.5s ease,
    translate 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
    scale 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: calc(var(--i) * 90ms);
}
.marcador.is-in:hover,
.marcador.is-in:focus-within {
  rotate: 0deg;
  translate: 0 -8px;
  box-shadow: 0 24px 40px rgba(0,0,0,0.6);
  transition: rotate 0.3s ease, translate 0.3s ease, box-shadow 0.3s ease;
}

/* Cinta naranja de señalización */
.marcador__cinta {
  position: absolute;
  top: 10px; left: -14px;
  width: 120px; height: 22px;
  rotate: -12deg;
  background: repeating-linear-gradient(135deg, rgba(255,140,38,0.85) 0 10px, rgba(255,140,38,0.65) 10px 20px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  mix-blend-mode: screen;
  transition: filter 0.3s ease;
}
.marcador:hover .marcador__cinta,
.marcador:focus-within .marcador__cinta { filter: brightness(1.2); }

/* Chincheta verde */
.marcador__chincheta {
  position: absolute;
  top: -8px; left: 50%;
  width: 16px; height: 16px;
  margin-left: -8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #9dff6e, #4ade26 60%, #1f6a10);
  box-shadow: 0 3px 5px rgba(0,0,0,0.7);
}
.marcador__cuerpo { min-height: 320px; display: flex; flex-direction: column; }
.cabina__cuerpo > .ig-placeholder,
.marcador__cuerpo > .ig-placeholder { flex: 1; }
.marcador__label {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  color: var(--orange);
  margin: 0.75rem 0 0;
}
.marcador__num {
  font-family: var(--font-tech);
  font-size: 0.6rem;
  letter-spacing: 0.25em;
  color: var(--text-secondary);
}

/* =============================================
   EMBED DE INSTAGRAM (blockquote y el iframe que lo sustituye)
   ============================================= */
.cabina__cuerpo .instagram-media,
.marcador__cuerpo .instagram-media,
.cabina__cuerpo iframe,
.marcador__cuerpo iframe {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 18px;
}

/* =============================================
   MARCADOR HONESTO (tutorial)
   ============================================= */
.ig-placeholder {
  position: relative;
  overflow: hidden;
  min-height: 380px;
  display: grid;
  place-content: center;
  gap: 0.6rem;
  text-align: center;
  padding: 1.5rem;
  border: 1px dashed rgba(74,222,38,0.45);
  border-radius: 18px;
  background: var(--bg-card);
  color: #c7d3c4;
  font-family: var(--font-body);
}
.ig-placeholder::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 1px;
  background: var(--accent);
  opacity: 0.3;
  box-shadow: 0 0 8px var(--accent);
  animation: ig-scan 4s linear infinite;
}
@keyframes ig-scan { to { top: 100%; } }
.ig-placeholder__tag {
  font-family: var(--font-tech);
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.ig-placeholder__title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--accent);
}
.ig-placeholder__steps {
  text-align: left;
  font-size: 0.85rem;
  line-height: 1.6;
  padding-left: 1.2rem;
  list-style: decimal;
}
.ig-placeholder__note { font-size: 0.75rem; color: var(--text-secondary); }
.ig-placeholder code {
  font-family: var(--font-tech);
  font-size: 0.68rem;
  color: var(--orange);
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 768px) {
  .ig-wall { padding: 4rem 0; }
  .ig-wall__head { padding: 0 1.5rem; }
  .telef__pista { scroll-snap-type: x mandatory; }
  .telef__inner { gap: 1.25rem; }
  .cabina__cuerpo { min-height: 628px; } /* medido: 609 a 622 px de iframe a 323 px de ancho */
  .tablero { columns: 1; padding: 0.75rem 1.5rem 0; }
  .marcador { --rot: -1deg; }
  .marcador:nth-child(3n+2) { --rot: 0.7deg; }
  .marcador:nth-child(3n+3) { --rot: -0.5deg; }
}

/* =============================================
   REDUCED MOTION
   ============================================= */
@media (prefers-reduced-motion: reduce) {
  .cabina__cuelga, .cabina.is-in .cabina__cuelga {
    opacity: 1;
    translate: 0 0;
    rotate: 0deg;
    transform: none;
    transition: none;
  }
  .marcador, .marcador.is-in {
    opacity: 1;
    translate: 0 0;
    scale: 1;
    transition: none;
  }
  .telef__polea, .cabina__polea { transform: none; }
  .cabina__rec::before,
  .cabina.is-active .cabina__cuerpo::before,
  .ig-placeholder::after { animation: none; }
  .ig-placeholder::after { top: 40%; }
  .ig-marquee__track { transform: none !important; }
}

/* =============================================
   REPRODUCTOR NATIVO INLINE (ESTILO OFICIAL INSTAGRAM)
   Fondo blanco, tipografía oficial y elementos de interacción
   ============================================= */
.ig-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #ffffff;
  color: #262626;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  user-select: none;
}

/* Header Oficial Instagram */
.ig-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #ffffff;
  border-bottom: 1px solid #f0f0f0;
  gap: 10px;
}

.ig-card__header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.ig-card__avatar-wrap {
  position: relative;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  padding: 2px;
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ig-card__avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #262626;
  color: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #ffffff;
}

.ig-card__user-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.ig-card__usernames {
  font-size: 13px;
  font-weight: 600;
  color: #262626;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}

.ig-card__username {
  color: #262626;
  font-weight: 700;
}

.ig-card__colab {
  color: #737373;
  font-weight: 400;
  margin-left: 2px;
}

.ig-card__audio-info {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #737373;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.ig-card__music-icon {
  flex-shrink: 0;
  color: #8e8e8e;
}

.ig-card__audio-text {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Botón Azul "Ver perfil" */
.ig-card__profile-btn {
  background: #0095f6;
  color: #ffffff !important;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s ease;
  line-height: 1.2;
}

.ig-card__profile-btn:hover {
  background: #1877f2;
}

/* Zona de Video */
.ig-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 14;
  background: #000000;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ig-card__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Play Overlay idéntico a Instagram Embed (desaparece al reproducir como en CAB 02) */
.ig-card__play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 3;
  pointer-events: none;
}

.ig-card.is-playing .ig-card__play-overlay {
  opacity: 0;
  visibility: hidden;
}

.ig-card__play-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(8px);
  border: 2px solid rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  color: #ffffff;
  transition: transform 0.2s ease, background 0.2s ease;
}

.ig-card__play-btn svg {
  margin-left: 4px;
}

.ig-card:hover .ig-card__play-btn {
  transform: scale(1.08);
  background: rgba(255, 255, 255, 0.4);
}

.ig-card__play-hint {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}

/* Botón flotante de audio */
.ig-card__mute-btn {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
  padding: 0;
}

.ig-card__mute-btn:hover {
  transform: scale(1.1);
  background: rgba(0, 0, 0, 0.9);
}

.ig-card__mute-btn .icon-sound { display: block; }
.ig-card__mute-btn .icon-muted { display: none; }
.ig-card__mute-btn.is-muted .icon-sound { display: none; }
.ig-card__mute-btn.is-muted .icon-muted { display: block; }

/* Barra de progreso */
.ig-card__progress-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: rgba(255, 255, 255, 0.25);
  z-index: 5;
  cursor: pointer;
  transition: height 0.15s ease;
}

.ig-card__progress-wrap:hover {
  height: 7px;
}

.ig-card__progress-bar {
  height: 100%;
  width: 0%;
  background: #ffffff;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
  transition: width 0.1s linear;
}

/* Footer Oficial Instagram (Blanco) */
.ig-card__footer {
  padding: 10px 14px 12px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ig-card__more-row {
  line-height: 1;
}

.ig-card__more-link {
  font-size: 13px;
  font-weight: 600;
  color: #0095f6 !important;
  text-decoration: none;
}

.ig-card__more-link:hover {
  text-decoration: underline;
}

.ig-card__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1px;
}

.ig-card__actions-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ig-card__action-btn {
  background: none;
  border: none;
  padding: 0;
  color: #262626;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease;
}

.ig-card__action-btn:hover {
  transform: scale(1.12);
}

.ig-card__like-btn.is-liked {
  color: #ed4956;
}

.ig-card__like-btn.is-liked svg {
  fill: #ed4956;
  stroke: #ed4956;
  animation: ig-heart-bounce 0.35s ease;
}

@keyframes ig-heart-bounce {
  0% { transform: scale(1); }
  50% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

.ig-card__save-btn.is-saved svg {
  fill: #262626;
}

.ig-card__likes-row {
  font-size: 13px;
  font-weight: 700;
  color: #262626;
  line-height: 1.2;
}

.ig-card__comment-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: #8e8e8e;
  padding-top: 6px;
  border-top: 1px solid #efefef;
  margin-top: 2px;
}

.ig-card__comment-placeholder {
  color: #8e8e8e;
}

.ig-card__ig-logo {
  color: #8e8e8e;
  display: inline-flex;
}