/* ============================================================================
   TIERRA — Animaciones, ritmo y micro-interacciones (Bloque 3)
   Objetivos: scroll-reveal lindo y consistente + menos espacio vacío
   (que la gente no se aburra scrolleando) + cards con vida.
   Solo CSS/overrides — no pelea con el GSAP existente del home.
   ========================================================================== */

/* ────────────────────────────────────────────────────────────────
   1) MENOS ESPACIO VACÍO — ritmo más ágil
   ──────────────────────────────────────────────────────────────── */

/* Páginas secundarias: secciones un poco más compactas */
.sec { padding-top: 92px; padding-bottom: 92px; }

@media (max-width: 768px) {
  /* Secciones de páginas secundarias */
  .sec { padding-top: 58px !important; padding-bottom: 58px !important; }

  /* Home: recortar el aire de las secciones grandes en móvil */
  #manifesto { padding-top: 62px !important; padding-bottom: 62px !important; }
  #construccion, #confianza, #invertir, #proceso {
    padding-top: 58px !important; padding-bottom: 58px !important;
  }

  /* Las 5 franjas de "experiencia" eran 60vh c/u = scroll eterno.
     Más bajas y con menos hueco entre título e imagen. */
  #experiencia .exp-strip { height: 44vh !important; min-height: 288px !important; }
  #experiencia .exp-intro { padding: 40px 22px 26px !important; }
}

@media (max-width: 420px) {
  #experiencia .exp-strip { height: 40vh !important; min-height: 260px !important; }
}

/* PC: que quede tan ágil como en móvil — menos espacio vacío en desktop.
   (El gran hueco arriba de "El amanecer" era el padding de .exp-intro.) */
@media (min-width: 769px) {
  #experiencia .exp-intro { padding-top: 74px !important; padding-bottom: 34px !important; }
  #manifesto { padding-top: 104px !important; padding-bottom: 104px !important; }
  #construccion, #confianza, #invertir, #proceso {
    padding-top: 96px !important; padding-bottom: 96px !important;
  }
  .sec { padding-top: 84px !important; padding-bottom: 84px !important; }
}

/* ────────────────────────────────────────────────────────────────
   2) SCROLL-REVEAL — más lindo y ágil (menos recorrido, mejor curva)
   Aplica a .reveal (páginas secundarias) sin tocar su JS.
   ──────────────────────────────────────────────────────────────── */
.reveal {
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1),
              transform .7s cubic-bezier(.16, 1, .3, 1) !important;
  will-change: opacity, transform;
}
.reveal.in { transform: none; }

/* Reveal propio, opt-in, para lo que quede sin animar (.t-reveal) */
.t-reveal { opacity: 0; transform: translateY(24px); }
.t-reveal.in {
  opacity: 1; transform: none;
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1),
              transform .7s cubic-bezier(.16, 1, .3, 1);
}

/* ────────────────────────────────────────────────────────────────
   3) MICRO-INTERACCIONES — cards con vida (hover en desktop, tap en móvil)
   ──────────────────────────────────────────────────────────────── */

/* Cards de proyecto del home (Azimut / Nabani / Aldea Tao) */
.pcard .piw img { transition: transform 1s cubic-bezier(.16, 1, .3, 1), filter .5s ease; }
.pcard:hover .piw img { transform: scale(1.1); }
.pcard .pov { transition: opacity .5s ease; }
.pcard:hover .pov { opacity: .82; }

/* Galería y cards varias */
.gcard, .cs-card, .ptb, .grid figure, .plot-card {
  transition: transform .5s cubic-bezier(.16, 1, .3, 1), box-shadow .5s ease;
}
.gcard img, .cs-card img, .ptb img, .grid figure img {
  transition: transform .8s cubic-bezier(.16, 1, .3, 1);
}
@media (hover: hover) {
  .gcard:hover, .cs-card:hover, .ptb:hover, .grid figure:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .34);
  }
  .gcard:hover img, .cs-card:hover img, .ptb:hover img, .grid figure:hover img {
    transform: scale(1.06);
  }
}
/* Feedback táctil en móvil */
.gcard:active, .cs-card:active, .ptb:active, .grid figure:active { transform: scale(.985); }

/* ────────────────────────────────────────────────────────────────
   4) TICKER — banda infinita con datos (anti-aburrimiento, compacta)
   ──────────────────────────────────────────────────────────────── */
.t-ticker {
  --tk-gold: var(--gold, #C9A96E);
  overflow: hidden;
  white-space: nowrap;
  border-top: 1px solid rgba(201, 169, 110, .16);
  border-bottom: 1px solid rgba(201, 169, 110, .16);
  background: rgba(201, 169, 110, .04);
  padding: 16px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.t-ticker-track {
  display: inline-flex;
  align-items: center;
  gap: 34px;
  padding-left: 34px;
  will-change: transform;
  animation: tkScroll 34s linear infinite;
}
.t-ticker:hover .t-ticker-track { animation-play-state: paused; }
.t-ticker span {
  font-family: var(--fh, 'Cormorant Garamond', Georgia, serif);
  font-size: clamp(17px, 2.4vw, 24px);
  font-weight: 400;
  color: var(--cream, #F2EEE4);
  letter-spacing: .01em;
}
.t-ticker .tk-dot { color: var(--tk-gold); font-size: 14px; opacity: .7; }
.t-ticker .tk-em { color: var(--tk-gold); font-style: italic; }

@keyframes tkScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ────────────────────────────────────────────────────────────────
   Badges de disponibilidad en las cards de proyecto (urgencia honesta)
   ──────────────────────────────────────────────────────────────── */
.pstatus {
  display: inline-flex; align-items: center; gap: 7px;
  margin-left: 12px; padding: 5px 12px;
  border-radius: 20px;
  font-family: var(--fb, 'DM Sans', sans-serif);
  font-size: 10px; font-weight: 400;
  letter-spacing: .16em; text-transform: uppercase;
  vertical-align: middle;
  color: var(--cream, #F2EEE4);
  background: rgba(18, 32, 25, .5);
  border: 1px solid rgba(201, 169, 110, .35);
}
.pstatus::before {
  content: '';
  width: 7px; height: 7px; border-radius: 50%;
  background: #69d189;
  box-shadow: 0 0 8px rgba(105, 209, 137, .8);
  animation: pstPulse 2.2s ease-in-out infinite;
}
.pstatus.lim::before { background: var(--gold, #C9A96E); box-shadow: 0 0 8px rgba(201, 169, 110, .9); }
@keyframes pstPulse { 50% { opacity: .45; } }
@media (max-width: 640px) {
  .pstatus { display: inline-flex; margin-left: 8px; padding: 4px 10px; }
}
@media (prefers-reduced-motion: reduce) { .pstatus::before { animation: none; } }

/* ────────────────────────────────────────────────────────────────
   Barra de progreso de lectura
   ──────────────────────────────────────────────────────────────── */
#t-progress {
  position: fixed; top: 0; left: 0; z-index: 995;
  height: 2px; width: 0;
  background: linear-gradient(90deg, #C9A96E, #e7c98a);
  box-shadow: 0 0 8px rgba(201, 169, 110, .5);
  pointer-events: none;
}

/* ────────────────────────────────────────────────────────────────
   Hero: segunda línea de negocio (qué vende Tierra y en qué zonas)
   ──────────────────────────────────────────────────────────────── */
.hsub2 {
  margin-top: 12px;
  font-family: var(--fb, 'DM Sans', sans-serif);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(242, 238, 228, .55);
}
@media (max-width: 640px) {
  .hsub2 { font-size: 10px; letter-spacing: .1em; }
}

/* ────────────────────────────────────────────────────────────────
   Módulos de proyecto: "Ideal para" + FAQ (accesibles, nativos)
   ──────────────────────────────────────────────────────────────── */
.t-ideal {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin-top: 34px;
}
.t-ideal .ti-card {
  padding: 26px 24px;
  border: 1px solid rgba(201, 169, 110, .2);
  border-radius: 6px;
  background: rgba(201, 169, 110, .045);
}
.t-ideal .ti-ico { font-size: 22px; margin-bottom: 12px; }
.t-ideal h3 {
  font-family: var(--fh, 'Cormorant Garamond', Georgia, serif);
  font-weight: 400; font-size: 21px;
  color: var(--cream, #F2EEE4);
  margin: 0 0 8px;
}
.t-ideal p {
  font-family: var(--fb, 'DM Sans', sans-serif);
  font-weight: 300; font-size: 14px; line-height: 1.75;
  color: var(--muted, #8FA396);
  margin: 0;
}

.t-faq { max-width: 780px; margin-top: 30px; }
.t-faq details {
  border-bottom: 1px solid rgba(201, 169, 110, .16);
}
.t-faq summary {
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 19px 2px;
  font-family: var(--fh, 'Cormorant Garamond', Georgia, serif);
  font-weight: 400; font-size: clamp(17px, 2.2vw, 21px);
  color: var(--cream, #F2EEE4);
  transition: color .3s ease;
}
.t-faq summary::-webkit-details-marker { display: none; }
.t-faq summary::after {
  content: '+';
  flex: none;
  font-family: var(--fb, 'DM Sans', sans-serif);
  font-size: 20px; font-weight: 300;
  color: var(--gold, #C9A96E);
  transition: transform .3s ease;
}
.t-faq details[open] summary::after { transform: rotate(45deg); }
.t-faq summary:hover { color: var(--gold, #C9A96E); }
.t-faq .fa-a {
  font-family: var(--fb, 'DM Sans', sans-serif);
  font-weight: 300; font-size: 14.5px; line-height: 1.8;
  color: var(--muted, #8FA396);
  padding: 0 2px 20px;
  max-width: 680px;
}
.t-proc-link {
  display: inline-block;
  margin-top: 26px;
  font-family: var(--fb, 'DM Sans', sans-serif);
  font-size: 13px; letter-spacing: .06em;
  color: var(--gold, #C9A96E);
  border-bottom: 1px solid rgba(201, 169, 110, .5);
  padding-bottom: 2px;
}

/* ────────────────────────────────────────────────────────────────
   Red de seguridad GSAP: si el CDN falla, .t-no-gsap muestra todo lo
   que el bundle dejaba en opacity:0 esperando animación.
   ──────────────────────────────────────────────────────────────── */
.t-no-gsap .hpre, .t-no-gsap .hhl, .t-no-gsap .hsub, .t-no-gsap .hctas,
.t-no-gsap .mfs, .t-no-gsap .tl-step, .t-no-gsap #trust-badge,
.t-no-gsap .scn, .t-no-gsap .exp-txt .k, .t-no-gsap .sind,
.t-no-gsap .gcard, .t-no-gsap #logo3d-img {
  opacity: 1 !important;
  transform: none !important;
}

/* ────────────────────────────────────────────────────────────────
   Accesibilidad
   ──────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .t-ticker-track { animation: none; }
  .pcard .piw img, .gcard img, .cs-card img, .ptb img { transition: none; }
  .t-reveal { opacity: 1; transform: none; }
}

/* ────────────────────────────────────────────────────────────────
   5) AJUSTES DE FEEDBACK
   ──────────────────────────────────────────────────────────────── */

/* "Encuentra tu tierra": una sola vía de contacto — el formulario real.
   Ocultamos el chat simulado (no enviaba nada) para no duplicar. */
#chat .cwin { display: none !important; }
#chat .cht-hd { margin-bottom: 10px; }

/* Videos de la sección Experiencia (superpuestos a la foto real).
   La foto queda de fallback/póster debajo; el video entra con fade. */
.exp-strip .exp-vid {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 1;
  filter: brightness(.6) saturate(1.05);
  opacity: 0; transition: opacity 1.2s ease;
  pointer-events: none;
}
.exp-strip .exp-vid.on { opacity: 1; }
.exp-strip::after { z-index: 1; }   /* la viñeta queda sobre el video */
.exp-strip .exp-txt { z-index: 2; }

/* Hero de video en páginas secundarias (Construcción) */
.phero-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.phero-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(18,32,25,.35) 0%, rgba(18,32,25,.12) 42%, rgba(18,32,25,.78) 100%); }

/* Fade-in de imágenes (PC y móvil) — SOLO OPACIDAD.
   Antes usaba transform y por eso chocaba con el parallax del hero, el
   translateY de .reveal y el zoom de hover (el shorthand `transition:
   transform` de las galerías pisaba la transición → aparecía de golpe).
   Al ser opacidad pura no pelea con NINGÚN transform: fade limpio siempre.
   Clase doble = más peso que `.grid figure img` / `.gcard img`. */
img.t-fade-img.t-fade-img { opacity: 0; }
/* la transición vive en .loaded: el estado oculto se aplica al instante
   (sin "parpadeo" de ida) y solo la ENTRADA se anima */
img.t-fade-img.t-fade-img.loaded {
  opacity: 1;
  transition: opacity .9s ease;
}
@media (prefers-reduced-motion: reduce) {
  img.t-fade-img.t-fade-img { opacity: 1 !important; }
}

/* Menos espacio vacío al principio.
   En móvil el hero ancla el texto en el tercio inferior (la costa llena
   arriba) → composición editorial moderna, sin hueco muerto al entrar. */
@media (max-width: 768px) {
  #hero { align-items: flex-end !important; }
  #hbody { padding-bottom: 13vh; }
  #manifesto { padding-top: 50px !important; }
  /* el indicador de scroll no debe pelear con el texto reubicado */
  #sind { bottom: 14px !important; }
}