:root {
  --naranja: #E3562B;
  --naranja-claro: #DB7751;
  --negro: #161616;
  --gris: #6D6D6D;
  --tiza: #DFDFDF;

  --font-display: 'Funnel Display', sans-serif;
  --font-body: 'Inter', sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--negro);
  color: var(--tiza);
  font-family: var(--font-body);
  font-weight: 300;
}
body.modal-open { overflow: hidden; }

h1, h2, h3, .btn, .tag {
  font-family: var(--font-display);
  margin: 0;
}

/* ---------- Fondo del edificio (fijo, animación SVG atada al scroll) ---------- */
#bg-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--negro);
}
#bg-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  will-change: transform;
}
#scene-parallax { will-change: transform; }

#bg-tint {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(22,22,22,.55), rgba(22,22,22,.75));
  pointer-events: none;
}

/* Marca de agua: isologo solo, sin texto, en el cuarto inferior derecho.
   Arranca en opacity:0 — main.js la sube a .15 (85% transparente) en el
   mismo instante en que el logo del hero queda "frizado" arriba, y la
   vuelve a bajar a 0 si el usuario scrollea de nuevo hasta el hero. */
#watermark-iso {
  position: fixed;
  right: 6vw;
  bottom: 6vh;
  width: min(28vw, 320px);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}

/* ---------- Barra superior fija (glassmorphism / frosted glass) ---------- */
#topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 56px;
  padding: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(22, 22, 22, .55);
  -webkit-backdrop-filter: blur(24px) saturate(130%);
  backdrop-filter: blur(24px) saturate(130%);
  border-bottom: 1px solid rgba(223, 223, 223, .08);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-100%);
  transition: opacity .45s ease, transform .45s ease;
}
#topbar.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
#topbar-logo {
  width: min(50vw, 240px);
  height: auto;
  object-fit: contain;
  pointer-events: none;
}

/* Apaga el footer nativo (vacío) de Squarespace: sin esto queda un
   espacio/franja en blanco debajo de nuestro #site-footer propio,
   porque #footer-sections trae padding por defecto del template
   aunque no tenga ningún bloque cargado adentro. */
#footer-sections {
  display: none !important;
}

/* Compensa el alto fijo por grilla que Squarespace le asigna a la sección
   Fluid Engine que contiene nuestro bloque de código: ese alto se calcula
   con el tamaño que tenía el bloque al posicionarlo en el editor visual
   (una grilla de ~491 filas con un mínimo fijo por fila), no con el alto
   real de nuestro contenido. Como nuestro contenido real es más bajo que
   ese mínimo, sobra scroll vacío (fondo estático) después del footer.
   Anulando el factor de escala de cada fila, la grilla se ajusta al alto
   real del contenido en vez de imponer ese piso artificial. */
.fe-6ab0ad47e9575337ff7f5be2 {
  --row-height-scaling-factor: 0 !important;
}

/* ---------- Footer final: cierre glassmorphism ---------- */
#site-footer {
  position: relative;
  z-index: 4;
  overflow: hidden;
  margin-top: 6vh;
  color: var(--tiza);
  background: rgba(22, 22, 22, .72);
  -webkit-backdrop-filter: blur(24px) saturate(125%);
  backdrop-filter: blur(24px) saturate(125%);
  border-top: 1px solid rgba(223,223,223,.12);
  box-shadow: 0 -12px 36px rgba(0,0,0,.18);
  padding: 2.25rem 4vw 1.1rem;
}
.site-footer-building {
  position: absolute;
  z-index: -1;
  top: 50%;
  right: 0;
  width: min(58vw, 760px);
  max-height: 100%;
  object-fit: contain;
  object-position: right center;
  transform: translateY(-50%);
  opacity: .15;
  filter: grayscale(1) contrast(1.1);
  pointer-events: none;
}
.site-footer-main {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.25rem;
  min-height: 150px;
}
.site-footer-logo {
  width: min(48vw, 440px);
  height: auto;
  pointer-events: none;
}
.site-footer-lead {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(.95rem, 1.6vw, 1.35rem);
  line-height: 1.2;
  color: var(--tiza);
  margin: 0;
}
.site-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 1.6rem;
  padding-top: .85rem;
  border-top: 1px solid rgba(223,223,223,.2);
}
.site-footer-bottom p {
  margin: 0;
  font-family: var(--font-display);
  font-size: .73rem;
  letter-spacing: .025em;
  color: var(--tiza);
}
.site-footer-bottom p span, .site-footer-bottom p b { color: var(--naranja); }
.terms-link {
  appearance: none;
  border: 0;
  padding: 0;
  background: none;
  color: var(--tiza);
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.terms-link:hover, .terms-link:focus-visible { color: var(--naranja); }
.social-links { display: flex; gap: .6rem; }
.social-link {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--tiza);
  color: var(--tiza);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.social-link:hover { color: var(--negro); background: var(--tiza); border-color: var(--tiza); }
.social-link--x { font-size: .9rem; }
.social-link--ig { border-radius: 9px; font-size: 1.45rem; font-weight: 400; }

/* Ventana secundaria de términos: el logo queda como marca de agua persistente. */
.terms-modal[hidden] { display: none; }
.terms-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 5vh 5vw;
}
.terms-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.68);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.terms-modal-panel {
  position: relative;
  width: min(900px, 100%);
  max-height: 90vh;
  overflow: hidden;
  background: rgba(22,22,22,.9);
  border: 1px solid rgba(223,223,223,.18);
  border-radius: 20px;
  box-shadow: 0 18px 80px rgba(0,0,0,.5);
}
.terms-watermark {
  position: absolute;
  width: min(55vw, 480px);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: .055;
  pointer-events: none;
}
.terms-close {
  position: absolute;
  z-index: 2;
  top: .75rem;
  right: 1rem;
  border: 0;
  background: none;
  color: var(--tiza);
  font-family: var(--font-body);
  font-size: 2rem;
  font-weight: 300;
  cursor: pointer;
}
.terms-close:hover { color: var(--naranja); }
.terms-modal-content {
  position: relative;
  z-index: 1;
  max-height: 90vh;
  overflow-y: auto;
  padding: 2.5rem clamp(1.25rem, 4vw, 3.5rem) 3rem;
}
.terms-modal-content h2 {
  color: var(--tiza);
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  margin-bottom: 1.5rem;
}
.terms-text {
  white-space: pre-wrap;
  color: var(--tiza);
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 300;
  line-height: 1.7;
}

/* ---------- Hero ---------- */
#hero {
  position: relative;
  /* más alto que .hito-wrapper (z-index: 2): el logo, una vez "frizado" arriba
     (position: fixed, ver js/main.js), es descendiente de #hero, así que
     queda atrapado dentro del contexto de apilamiento de #hero — si #hero
     tuviera el mismo z-index que los hitos, el panel de cada hito (que viene
     después en el DOM) lo taparía sin importar el z-index propio del logo. */
  z-index: 60;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 2rem;
}
#hero img { width: min(70vw, 480px); z-index: 50; will-change: transform; pointer-events: none; }
#hero .scroll-cue {
  font-size: .75rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gris);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: .4 } 50% { opacity: 1 } }

/* ---------- Hitos ---------- */
.hito-wrapper {
  position: relative;
  z-index: 2;
  height: 220vh; /* recorrido de scroll dentro del cual el hito queda "pegado" */
}
.hito-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: flex-start;
  padding: 12vh 8vw 4vh;
}
#hito-04 .hito-sticky {
  justify-content: center;
  padding-left: 4vw;
  padding-right: 4vw;
}
.hito-content,
.hito-01-detail {
  max-width: 620px;
  opacity: 0;
  background: color-mix(in srgb, var(--naranja-claro) 14%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  backdrop-filter: blur(18px) saturate(120%);
  border: 1px solid rgba(223,223,223,.08);
  border-radius: 20px;
  padding: 2rem;
}
.hito-content .eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: .8rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--naranja);
  margin-bottom: .75rem;
}
.hito-content h2 {
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--tiza);
  margin-bottom: .5rem;
}
.hito-content .subtitulo {
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--naranja-claro);
  font-size: 1.1rem;
  margin-bottom: 1.25rem;
}
.hito-content p {
  font-weight: 300;
  line-height: 1.6;
  font-size: 1.05rem;
  color: var(--tiza);
}

/* Tags (Hito 02 / 03) */
.tags { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }
.tag {
  font-size: .85rem;
  font-weight: 500;
  padding: .5rem 1rem;
  border: 1px solid var(--gris);
  border-radius: 999px;
  color: var(--tiza);
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, font-weight .15s ease;
}
.tag:hover {
  background: var(--naranja);
  border-color: var(--naranja);
  color: var(--tiza);
  font-weight: 700;
}

/* Botón base (extraído del manual de marca: pill naranja) */
.btn {
  display: inline-block;
  background: var(--naranja);
  color: var(--tiza);
  font-weight: 700;
  font-size: .95rem;
  padding: .8rem 1.6rem;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform .15s ease, background .15s ease;
}
.btn:hover { background: var(--naranja-claro); transform: translateY(-2px); }
.btn:focus-visible { outline: 2px solid var(--tiza); outline-offset: 3px; }
.btn.secundario {
  background: transparent;
  border: 1px solid var(--gris);
  color: var(--tiza);
  text-align: left; /* las opciones del árbol de decisión (A-D y niveles siguientes) alinean
                        igual sin importar si el texto entra en una línea o se envuelve en varias */
}
.btn.secundario:hover { border-color: var(--naranja); color: var(--naranja); }

/* Hito 01 — botones circulares de detalle + panel de descripción en hover.
   El panel (.hito-01-detail) comparte el "vidrio esmerilado" de .hito-content
   (ver regla combinada arriba) para mantener exactamente la misma identidad
   visual; solo agrega acá su propio posicionamiento/transición. */
.hito-01-panels {
  position: relative;
}
.hito-01-detail {
  position: absolute;
  top: calc(100% + 1.5rem);
  left: 0;
  width: 100%;
  z-index: 3;
  transform: translateY(-10px);
  filter: blur(8px);
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease, filter .35s ease;
}
.hito-01-detail.is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  pointer-events: auto;
}
.hito-01-detail-inner { transition: opacity .16s ease; }
.hito-01-detail-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--naranja);
  margin: 0 0 .75rem;
}
.hito-01-detail-body {
  font-weight: 300;
  line-height: 1.6;
  font-size: 1rem;
  color: var(--tiza);
  margin: 0;
}

.hito-01-icons {
  display: flex;
  gap: 1rem;
  margin-left: 2.5rem;
  margin-top: 2.4rem;
}
/* Botón circular: mismo lenguaje que .btn (paleta naranja + transición rápida),
   pero contorneado en reposo — se "ilumina" (relleno naranja sólido) en
   hover/foco, igual lógica que .btn.secundario:hover pero invirtiendo qué
   estado lleva el relleno. */
.hito-01-icon-btn {
  flex: 0 0 auto;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  border: 2px solid var(--naranja);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  opacity: 0; /* estado inicial — GSAP los despliega en cascada (blur + slide), ver main.js */
  filter: blur(10px);
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.hito-01-icon-btn img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  pointer-events: none;
}
.hito-01-icon-btn:hover,
.hito-01-icon-btn:focus-visible,
.hito-01-icon-btn.is-active {
  background: var(--naranja);
  transform: translateY(-2px);
}
.hito-01-icon-btn:focus-visible { outline: 2px solid var(--tiza); outline-offset: 3px; }

/* Portfolio — tira de reels en loop continuo (Hito 04) */
.hito-content--ancho {
  max-width: min(94vw, 1320px);
  width: 100%;
  padding: 2rem 2.25rem;
}
.portfolio-strip {
  margin-top: 1.75rem;
  overflow: hidden;
  /* deja lugar para que el clip en hover pueda agrandarse sin recortarse */
  padding: 1.5rem 0;
}
.portfolio-track {
  display: flex;
  gap: 1rem;
  width: max-content;
  animation: portfolio-marquee 168s linear infinite; /* velocidad al 45% de la anterior (75.6s -> 168s) */
}
.portfolio-strip:hover .portfolio-track { animation-play-state: paused; }
@keyframes portfolio-marquee {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}
.portfolio-item {
  position: relative;
  flex: 0 0 360px;
  height: 210px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(223,223,223,.15);
  background: #000;
  transition: transform .3s ease, border-color .3s ease;
}
.portfolio-item:hover {
  transform: scale(1.15);
  border-color: var(--naranja);
  z-index: 2;
}
.portfolio-item-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  transition: opacity .35s ease;
}
.portfolio-item-video.is-fading {
  opacity: 0;
}
@media (max-width: 720px) {
  .portfolio-item { flex-basis: 260px; height: 160px; }
}

/* Árbol de decisión (Hito 05) */
.arbol-nivel {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.25rem;
}
.breadcrumb {
  font-size: .85rem;
  color: var(--gris);
  margin-top: 1rem;
  min-height: 1.2em;
}
.breadcrumb .paso { color: var(--naranja-claro); }

/* Formulario (Hito 06) */
.form-contacto { display: flex; flex-direction: column; gap: .9rem; margin-top: 1.5rem; }
.form-contacto input, .form-contacto textarea {
  background: rgba(223,223,223,.09);
  border: 1px solid var(--gris);
  border-radius: 10px;
  padding: .8rem 1rem;
  color: var(--tiza);
  font-family: var(--font-body);
  font-size: .95rem;
}
.form-contacto textarea { min-height: 120px; resize: vertical; }
.form-contacto input:focus, .form-contacto textarea:focus {
  outline: none;
  border-color: var(--naranja);
}

/* Hito 06: estado de éxito tras enviar el formulario — mismo "vidrio esmerilado"
   que el resto de los cuadros (backdrop-filter/border/radius heredados de la
   regla combinada de .hito-content), solo con tinte gris en vez de naranja
   para diferenciar visualmente el estado de confirmación. */
.hito-content--success {
  background: color-mix(in srgb, var(--gris) 22%, transparent);
  transition: background .4s ease;
}
.form-success {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-align: center;
  color: var(--tiza);
  margin: 0;
  animation: form-success-in .5s ease;
}
@keyframes form-success-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.form-success {
  font-weight: 300;
  line-height: 1.6;
  font-size: 1.05rem;
  color: var(--tiza);
}
@media (max-width: 720px) {
  .site-footer { padding: 1.5rem 5vw 1rem; }
  .site-footer-building { width: 92vw; opacity: .15; }
  .site-footer-main { flex-direction: column; gap: 1rem; min-height: 0; text-align: center; }
  .site-footer-logo { width: min(82vw, 360px); }
  .site-footer-lead { font-size: 1rem; }
  .site-footer-bottom { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .site-footer-bottom p { font-size: .68rem; line-height: 1.5; }
  .social-links { align-self: center; }

  .hito-wrapper { height: 180vh; }
  .hito-content { max-width: 100%; }

  /* hito-intro y hito-01 llevan mucho más texto que el resto (varios
     párrafos, y hito-01 además los 4 íconos) — en pantallas angostas ese
     texto se envuelve a muchas más líneas y la caja queda bastante más alta
     que en desktop. Con el recorrido general de 180vh, el "cruce" de
     opacidad con el hito siguiente (que arranca apenas termina el anterior)
     se ve como un solapamiento porque la caja saliente todavía ocupa casi
     toda la pantalla cuando la entrante ya empieza a aparecer encima. Les
     damos más recorrido propio para separar mejor ambas transiciones, y
     reducimos un poco el texto para que la caja entre más compacta. */
  #hito-intro, #hito-01 { height: 260vh; }
  #hito-intro .hito-content p,
  #hito-01 .hito-content p { font-size: .95rem; line-height: 1.5; }

  /* Hito 01: los 4 botones no entran a la derecha del panel en pantallas
     chicas — pasan a una fila propia debajo del texto, y el panel de
     detalle deja de flotar superpuesto (position: absolute) para fluir
     en el documento debajo de esa fila, así nunca tapa ni los botones
     ni el panel principal. */
  #hito-01 .hito-sticky {
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
  }
  .hito-01-icons {
    margin-left: 0;
    margin-top: 0;
    justify-content: center;
  }
  .hito-01-detail {
    position: static;
    width: 100%;
    max-width: 100%;
    margin-top: 0;
    max-height: 0;
    padding: 0 2rem;
    overflow: hidden;
    transition: opacity .35s ease, transform .35s ease, filter .35s ease, max-height .35s ease, padding .35s ease;
  }
  .hito-01-detail.is-visible {
    max-height: 600px;
    padding: 2rem;
    margin-top: 1rem;
  }
}

/* Fallback Squarespace: evita que el contenido quede invisible si el reveal JS no arranca.
   OJO: limitado solo a .hito-content — .hito-01-detail y .hito-01-icon-btn NO se incluyen
   acá porque su visibilidad es intencionalmente condicional (hover / cascada de scroll) y
   no un simple reveal inicial; forzarlos a opacity:1 !important los dejaba permanentemente
   visibles y anulaba por completo el show/hide de esta sección. */
.hito-content {
  opacity: 1 !important;
}