/* =====================================================================
   AUTÉNTICO CREATIVO — PÁGINAS
   Intro animada · manifiesto · cabeceras de página interior
   ===================================================================== */

/* =====================================================================
   1. INTRO — la marca se monta sola, letra a letra, en orden aleatorio
   ===================================================================== */

/* Mientras dura la intro, el scroll queda bloqueado */
body.intro-running { overflow: hidden; }

#intro {
  position: relative;
  z-index: var(--z-content);
  /* Orden importante: 100vh primero como respaldo y 100svh después, para que
     gane el "small viewport height". Al revés (como estaba) mandaba 100vh y en
     el móvil el hero quedaba más alto que la pantalla: al ocultarse la barra
     del navegador, todo daba un salto. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 90px 22px 120px;
}

/* ── Logo de cristal: aparece primero, antes que las letras ──
   OJO: aquí NO se usa filter/drop-shadow sobre la <img>. En Safari de iOS,
   animar un filtro sobre un WebP con transparencia deja un rectángulo blanco
   al terminar la animación. El resplandor lo pinta el contenedor. */
.intro-logo-wrap {
  position: relative;
  display: block;
  width: clamp(96px, 13vw, 150px);
  margin: 0 auto clamp(18px, 3vw, 34px);
  opacity: 0;
  transform: translateY(18px) scale(0.86);
  transition:
    opacity 1s var(--ease-out),
    transform 1.2s var(--ease-out);
}
.intro-logo-wrap.on { opacity: 1; transform: none; }

/* Resplandor de marca detrás del logo (no toca a la imagen) */
.intro-logo-wrap::before {
  content: '';
  position: absolute;
  inset: -32%;
  border-radius: 50%;
  background: radial-gradient(closest-side,
              rgba(79, 201, 230, 0.34) 0%,
              rgba(211, 20, 81, 0.14) 55%,
              rgba(0, 0, 0, 0) 100%);
  filter: blur(16px);
  z-index: -1;
  pointer-events: none;
}

.intro-logo {
  display: block;
  width: 100%;
  height: auto;
}

/* Velo oscuro muy suave detrás del texto: garantiza la legibilidad del
   titular aunque la nebulosa pase justo por detrás */
#intro::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(58% 46% at 50% 48%,
              rgba(0, 0, 0, 0.30) 0%,
              rgba(0, 0, 0, 0.14) 55%,
              rgba(0, 0, 0, 0) 100%);
}

.intro-brand {
  font-family: var(--font-title);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 0.86;
  font-size: clamp(3.4rem, 14vw, 11rem);
  color: var(--text);
  margin: 0;
  /* El brillo llega cuando la palabra ya está formada */
  text-shadow: 0 0 0 rgba(120, 200, 255, 0);
  transition: text-shadow 1.6s var(--ease);
}
.intro-brand.lit {
  text-shadow:
    0 0 26px rgba(120, 200, 255, 0.20),
    0 0 70px rgba(41, 156, 184, 0.16);
}

.intro-line { display: block; }

/* Cada letra es un <span> que JS revela en orden desordenado */
.intro-brand .ltr {
  display: inline-block;
  opacity: 0;
  filter: blur(14px);
  transform: translate3d(var(--dx, 0), var(--dy, 14px), 0) scale(0.86) rotate(var(--rot, 0deg));
  transition:
    opacity 0.85s var(--ease-out),
    filter  0.85s var(--ease-out),
    transform 1s var(--ease-out);
}
.intro-brand .ltr.on {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
}
/* El espacio entre palabras no se anima */
.intro-brand .ltr-space { width: 0.28em; }

/* El eslogan vive dentro de una pastilla de cristal: con la tipografía fina
   sola sobre la nebulosa no se leía bien. */
.intro-slogan {
  position: relative;
  margin-top: clamp(20px, 3.2vw, 34px);
  padding: 11px 26px;
  border-radius: var(--r-full);
  font-size: clamp(0.74rem, 1.7vw, 0.95rem);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #ffffff;

  background: linear-gradient(180deg,
              rgba(20, 26, 46, 0.58) 0%,
              rgba(10, 13, 26, 0.66) 100%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(20px) saturate(165%);
  -webkit-backdrop-filter: blur(20px) saturate(165%);
  box-shadow:
    0 12px 34px rgba(0, 0, 0, 0.5),
    0 0 26px rgba(41, 156, 184, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.20);

  opacity: 0;
  transform: translateY(12px);
  transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out);
}
.intro-slogan.on { opacity: 1; transform: none; }

/* Filete degradado teal → carmín bajo el eslogan */
.intro-rule {
  width: 0;
  height: 1px;
  margin: clamp(20px, 4vw, 34px) auto 0;
  background: linear-gradient(90deg, var(--teal), var(--red));
  transition: width 1.4s var(--ease-out);
}
.intro-rule.on { width: min(260px, 60vw); }

/* Indicador de scroll: solo aparece cuando la intro ha terminado */
.intro-scroll {
  position: absolute;
  bottom: 46px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transition: opacity 1s var(--ease);
  pointer-events: none;
}
.intro-scroll.on { opacity: 1; }

.intro-scroll-line {
  width: 1px;
  height: 46px;
  background: linear-gradient(180deg, transparent, var(--teal-light));
  animation: scrollPulse 2.4s var(--ease) infinite;
}
@keyframes scrollPulse {
  0%, 100% { transform: scaleY(0.35); transform-origin: top; opacity: 0.35; }
  50%      { transform: scaleY(1);    transform-origin: top; opacity: 1;    }
}

.intro-scroll-label {
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* Botón para saltar la intro (accesible con teclado) */
.intro-skip {
  position: absolute;
  top: 24px;
  right: 24px;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 8px 16px;
  border: 1px solid var(--glass-border);
  border-radius: var(--r-full);
  background: var(--glass-bg-soft);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: color var(--t), border-color var(--t), opacity var(--t);
}
.intro-skip:hover { color: var(--text); border-color: var(--glass-border-strong); }
.intro-skip.gone { opacity: 0; pointer-events: none; }

/* =====================================================================
   2. MANIFIESTO — el bloque que se descubre tras el primer scroll
   ===================================================================== */
#manifiesto { padding: clamp(70px, 14vh, 140px) 0 clamp(60px, 10vh, 110px); }

.manifiesto-text {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(1.25rem, 3.4vw, 2.15rem);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--text);
  max-width: 24ch;
  margin: 0 auto;
  text-wrap: balance;
}
.manifiesto-text .m-em { color: var(--teal-light); font-weight: 500; }
.manifiesto-text .m-em-red { color: var(--red-light); font-weight: 500; }

.manifiesto-foot {
  margin: var(--gap) auto 0;
  font-size: 0.92rem;
  color: var(--text-muted);
  max-width: 52ch;
  line-height: 1.8;
  text-wrap: pretty;
}

.manifiesto-actions {
  margin-top: var(--gap-lg);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Tira de datos del estudio */
.stat-strip {
  margin-top: var(--gap-lg);
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-top: 1px solid var(--glass-border);
  border-bottom: 1px solid var(--glass-border);
}
.stat-cell {
  flex: 1 1 140px;
  padding: 22px 18px;
  border-right: 1px solid var(--glass-border);
}
.stat-cell:last-child { border-right: none; }
.stat-num {
  font-family: var(--font-title);
  font-size: 2.1rem;
  line-height: 1;
  color: var(--teal-light);
  letter-spacing: 0.03em;
}
.stat-num-red { color: var(--red-light); }
.stat-label {
  margin-top: 6px;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* =====================================================================
   3. CABECERA DE PÁGINA INTERIOR (servicios · portafolio · contacto)
   ===================================================================== */
.page-hero { padding: clamp(110px, 18vh, 180px) 0 clamp(40px, 7vh, 80px); }

.page-title {
  font-family: var(--font-title);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 0.9;
  font-size: clamp(2.8rem, 9vw, 6.4rem);
  margin-bottom: 20px;
}

/* Los titulares con class="scramble" se montan letra a letra igual que la intro */
.scramble .ltr {
  display: inline-block;
  opacity: 0;
  filter: blur(10px);
  transform: translate3d(var(--dx, 0), var(--dy, 10px), 0) scale(0.9);
  transition:
    opacity 0.7s var(--ease-out),
    filter 0.7s var(--ease-out),
    transform 0.8s var(--ease-out);
}
.scramble .ltr.on { opacity: 1; filter: blur(0); transform: none; }
.scramble .ltr-space { width: 0.28em; }

.page-sub {
  font-size: 0.95rem;
  color: var(--text-muted);
  max-width: 54ch;
  line-height: 1.8;
}

/* =====================================================================
   4. CTA DE CIERRE (se repite al final de las páginas interiores)
   ===================================================================== */
.closing-cta {
  padding: clamp(50px, 9vh, 90px) clamp(24px, 5vw, 64px);
  text-align: center;
  border-radius: var(--r-xl);
}
.closing-cta h2 {
  font-family: var(--font-title);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 0.92;
  font-size: clamp(2.2rem, 7vw, 4.4rem);
  margin-bottom: 14px;
}
.closing-cta p {
  font-size: 0.9rem;
  color: var(--text-muted);
  max-width: 44ch;
  margin: 0 auto var(--gap);
  line-height: 1.75;
}


/* Los titulares multilínea usan un <span data-line> por línea */
.page-title [data-line],
.closing-cta h2 [data-line] { display: block; }

/* =====================================================================
   RENDIMIENTO EN MÓVIL
   ---------------------------------------------------------------------
   En un teléfono, cada elemento con `backdrop-filter` obliga al navegador a
   volver a muestrear y desenfocar todo lo que tiene detrás EN CADA FOTOGRAMA
   del scroll. Con el fondo animado detrás y varias tarjetas en pantalla, eso
   es lo que hacía que los contenedores se movieran a tirones.

   Solución: en pantallas táctiles el cristal se pinta con un fondo traslúcido
   sólido en vez de desenfocando el fondo. Visualmente es casi idéntico sobre
   un fondo oscuro, y el scroll pasa a ser fluido.
   El NAV se queda con su cristal real: es un solo elemento pequeño.
   ===================================================================== */
@media (max-width: 900px), (pointer: coarse) {

  .glass,
  .btn-glass,
  .section-tag,
  .cat-btn,
  .intro-skip,
  .intro-slogan,
  .social-link,
  .site-footer {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .glass          { background: rgba(13, 17, 32, 0.86); }
  .btn-glass      { background: rgba(18, 23, 40, 0.86); }
  .section-tag,
  .cat-btn,
  .intro-skip,
  .social-link    { background: rgba(16, 20, 36, 0.78); }
  .intro-slogan   { background: rgba(14, 18, 34, 0.88); }
  .site-footer    { background: linear-gradient(180deg, rgba(5,5,10,0) 0%, rgba(3,3,7,0.92) 55%); }

  /* El reflejo líquido que recorre cada tarjeta es un desenfoque animado:
     bonito en escritorio, caro en móvil y multiplicado por cada tarjeta. */
  .glass::after { display: none; }

  /* El micro-tejido de píxeles usa mix-blend-mode a pantalla completa: obliga
     a recomponer toda la capa mientras se hace scroll. */
  body::after { display: none; }

  /* Menos desenfoque en el NAV, que sí conserva el cristal */
  .nav-glass {
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
  }
  .nav-glass::after { display: none; }
}