/* ═══════════════════════════════════════════════════════════════════════
   ESTRUCTURA · header, footer, hero y esqueleto de las paginas internas.
   Lo que es comun a todo el sitio. Cada seccion de la home tendra despues
   su propio archivo en esta carpeta.
   ═══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════ HEADER ═══════════════════════════════ */

.encabezado {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  padding-block: var(--esp-4);
  /* Un velo minimo para que el menu se lea sobre el plasma. */
  background: linear-gradient(to bottom,
              color-mix(in srgb, var(--azul-950) 55%, transparent), transparent);
  backdrop-filter: blur(2px);
}

.encabezado__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-8);
}

.encabezado__logo img { width: 92px; height: auto; }

.encabezado__menu {
  display: flex;
  gap: clamp(var(--esp-4), 2.2vw, var(--esp-8));
}

.encabezado__menu a {
  font-size: var(--t-etiqueta);
  font-weight: 500;
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--texto);
  transition: color var(--dur-rapida) ease;
}
.encabezado__menu a:hover { color: var(--acento); }
.encabezado__menu li { display: flex; align-items: center; }
.encabezado__menu { align-items: center; }

/* ── Call to action (HABLEMOS) ─────────────────────────────────────────
   Boton verde que llama la atencion: un halo que late, un brillo que lo
   cruza cada tanto y un titileo corto tipo neon. Se marca con "cta": true
   en contenido/config.json → menu. */
.encabezado__menu a.boton-cta,
.boton-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0.7em 1.5em;
  border-radius: 999px;
  overflow: hidden;
  isolation: isolate;
  background: var(--acento);
  color: var(--azul-900);
  font-size: var(--t-etiqueta);
  font-weight: 800;
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--acento) 70%, transparent),
              0 0 18px color-mix(in srgb, var(--acento) 55%, transparent);
  animation: cta-halo 2.2s ease-out infinite,
             cta-titileo 6s steps(1, end) infinite;
  transition: transform var(--dur-rapida) var(--curva-salida),
              background var(--dur-rapida) ease;
}

/* El brillo que cruza el boton. */
.boton-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 30%,
              color-mix(in srgb, var(--blanco) 75%, transparent) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: cta-brillo 3.4s ease-in-out infinite;
}

.encabezado__menu a.boton-cta:hover,
.boton-cta:hover,
.boton-cta:focus-visible {
  color: var(--azul-900);
  background: var(--verde-400);
  transform: scale(1.07);
  animation-play-state: paused, paused;
}

@keyframes cta-halo {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--acento) 70%, transparent),
                     0 0 18px color-mix(in srgb, var(--acento) 55%, transparent); }
  70%  { box-shadow: 0 0 0 14px color-mix(in srgb, var(--acento) 0%, transparent),
                     0 0 28px color-mix(in srgb, var(--acento) 75%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--acento) 0%, transparent),
                     0 0 18px color-mix(in srgb, var(--acento) 55%, transparent); }
}
@keyframes cta-brillo {
  0%, 55% { transform: translateX(-120%); }
  85%, 100% { transform: translateX(120%); }
}
@keyframes cta-titileo {
  0%, 100% { opacity: 1; }
  62% { opacity: 0.55; }
  63% { opacity: 1; }
  65% { opacity: 0.7; }
  66% { opacity: 1; }
}

/* En desktop el CTA de la barra mobile no se muestra (ya esta en el menu). */
.encabezado__cta-mobile { display: none; }

@media (prefers-reduced-motion: reduce) {
  .boton-cta,
  .boton-cta::after { animation: none; }
}

/* ── Hamburguesa: SOLO en mobile ───────────────────────────────────── */

.encabezado__hamburguesa {
  display: none;
  width: 34px;
  height: 34px;
  place-items: center;
  gap: 5px;
  flex-direction: column;
  justify-content: center;
}
.encabezado__hamburguesa span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--texto);
  transition: transform var(--dur-rapida) var(--curva-salida),
              opacity var(--dur-rapida) ease;
}
.encabezado__hamburguesa[aria-expanded="true"] span:first-child {
  transform: translateY(3.25px) rotate(45deg);
}
.encabezado__hamburguesa[aria-expanded="true"] span:last-child {
  transform: translateY(-3.25px) rotate(-45deg);
}

.menu-mobile { display: none; }

@media (max-width: 767px) {
  .encabezado__nav { display: none; }
  .encabezado__hamburguesa { display: flex; }
  /* El CTA queda a la vista en la barra, antes de la hamburguesa. */
  .encabezado__cta-mobile { display: inline-flex; margin-left: auto; padding: 0.6em 1.15em; }
  .encabezado__interior { gap: var(--esp-4); }

  .menu-mobile {
    display: block;
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-header) - 1);
    padding: 25vh var(--margen-lateral) var(--esp-16);
    background: var(--azul-900);
  }
  .menu-mobile[hidden] { display: none; }
  .menu-mobile ul { display: flex; flex-direction: column; gap: var(--esp-6); }
  .menu-mobile a {
    font-family: var(--fuente-titulo);
    font-weight: 900;
    font-size: var(--t-sub);
    letter-spacing: var(--tracking-titulo);
    text-transform: uppercase;
  }
  .menu-mobile a.menu-mobile__cta { color: var(--acento); }
}


/* ═══════════════════════════════ HERO ════════════════════════════════ */

.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(6rem, 14vh, 9rem);
}

.hero__interior {
  display: grid;
  gap: var(--esp-12);
  align-items: center;
}

@media (min-width: 1024px) {
  .hero__interior {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--esp-16);
  }
}

.hero__texto { display: flex; flex-direction: column; gap: var(--esp-6); }

/* ── Titular que se escribe solo ───────────────────────────────────────
   Ver fuente/js/ui/tipeo.js. Cada linea lleva dos capas: el fantasma
   reserva el espacio del texto completo y la capa visible, que es la que
   crece, va absoluta encima. Asi tipear no mueve nada de lo de abajo.
   Sin JS no existe ninguna de las dos y el titular se ve normal. */

.titulo--hero [data-tipeo-linea] {
  display: block;
  position: relative;
}

.tipeo__fantasma { visibility: hidden; }

.tipeo__visible {
  position: absolute;
  inset: 0;
  white-space: pre-wrap;
}

/* El cursor vive dentro de la linea que se esta escribiendo. */
.tipeo__cursor {
  display: inline-block;
  width: 0.06em;
  height: 0.76em;
  margin-left: 0.05em;
  background: var(--acento);
  animation: tipeo-parpadeo 1s steps(1) infinite;
}

@keyframes tipeo-parpadeo {
  0%,     49.9%  { opacity: 1; }
  50%,    100%   { opacity: 0; }
}

/* ── El latido de la ultima linea ──────────────────────────────────────
   Arranca cuando termina de escribirse. Sube rapido y baja despacio: eso
   es lo que lo hace leer como un latido y no como un fundido. El halo usa
   el verde de brillo, el mismo que los picos de luz del resto del sitio. */

.termino-tipeo [data-tipeo-late] .tipeo__visible {
  transform-origin: left center;
  animation: tipeo-latido 2.6s ease-out infinite;
  will-change: transform;
}

@keyframes tipeo-latido {
  0% {
    color: var(--acento);
    text-shadow: none;
    transform: scale(1);
  }
  10% {
    color: var(--acento-brillo);
    text-shadow:
      0 0 20px color-mix(in srgb, var(--acento-brillo) 60%, transparent),
      0 0 64px color-mix(in srgb, var(--acento-brillo) 30%, transparent);
    transform: scale(1.014);
  }
  42%, 100% {
    color: var(--acento);
    text-shadow: none;
    transform: scale(1);
  }
}

/* Sin color-mix el latido sigue estando, solo que sin el halo mas abierto. */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
  @keyframes tipeo-latido {
    0%          { color: var(--acento);        text-shadow: none; transform: scale(1); }
    10%         { color: var(--acento-brillo); text-shadow: 0 0 20px rgba(26,255,175,.6); transform: scale(1.014); }
    42%, 100%   { color: var(--acento);        text-shadow: none; transform: scale(1); }
  }
}

/* El cursor no aporta nada si el usuario pidio menos movimiento: el
   titular ya aparece escrito. (El latido lo frena base.css.) */
@media (prefers-reduced-motion: reduce) {
  .tipeo__cursor { display: none; }
}

.hero__lugares {
  display: flex;
  align-items: center;
  gap: var(--esp-4);
}

/* Lugar reservado para las letras 3D. La escena se dibuja encima con el
   canvas compartido; el div solo define el rectangulo. */
.hero__objeto {
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 34rem;
  margin-inline: auto;
}
@media (max-width: 1023px) {
  .hero__objeto { max-width: 22rem; }
}

/* Sin WebGL no hay nada que dibujar: el hueco no debe dejar un vacio raro. */
.gama-nulo .hero__objeto { display: none; }

.hero__scroll {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-3);
  margin-top: var(--esp-16);
  padding-inline: var(--margen-lateral);
  color: var(--texto-etiqueta);
  transition: color var(--dur-rapida) ease;
}
.hero__scroll:hover { color: var(--acento); }


/* ═══════════════════════ SECCIONES (esqueleto) ═══════════════════════ */

/* Las secciones que NO llevan plasma se tapan con fondo opaco.
   Las que si lo llevan quedan transparentes y dejan ver el canvas. */
.manifiesto,
.proyecto,
.proceso,
.estudio,
.ideas {
  background: var(--fondo);
}

.hero,
.trabajo,
.capacidades,
.contacto {
  background: transparent;
}

/* El plasma tiene zonas muy brillantes y el texto blanco se pierde encima.
   Este velo lo oscurece del lado donde va el texto y se desvanece hacia
   donde van los objetos 3D, igual que en las maquetas.
   Vive en su propia capa (--z-velo): encima del plasma y debajo tanto del
   canvas 3D como del contenido. */
.hero::before,
.trabajo::before,
.capacidades::before,
.contacto::before,
.cabecera-interna::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: var(--z-velo);
  pointer-events: none;
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--azul-950) 78%, transparent) 0%,
    color-mix(in srgb, var(--azul-950) 58%, transparent) 38%,
    transparent 78%);
}

/* En pantallas angostas el texto ocupa todo el ancho, asi que el velo
   tambien. */
@media (max-width: 1023px) {
  .hero::before,
  .trabajo::before,
  .capacidades::before,
  .contacto::before,
  .cabecera-interna::before {
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--azul-950) 70%, transparent) 0%,
      color-mix(in srgb, var(--azul-950) 62%, transparent) 100%);
  }
}

@supports not (color: color-mix(in srgb, red 50%, transparent)) {
  .hero::before,
  .trabajo::before,
  .capacidades::before,
  .contacto::before,
  .cabecera-interna::before {
    background: linear-gradient(100deg, rgba(6, 9, 35, 0.78), rgba(6, 9, 35, 0) 78%);
  }
}

.seccion > .contenedor > .etiqueta { margin-bottom: var(--esp-6); }

.estudio__objeto {
  aspect-ratio: 4 / 3;
  width: 100%;
  max-width: 32rem;
}


/* ════════════════════════ PAGINAS INTERNAS ═══════════════════════════ */

.cabecera-interna {
  padding-top: clamp(8rem, 20vh, 12rem);
  background: transparent;
}
.cabecera-interna .titulo { margin-block: var(--esp-6); }

.rejilla {
  display: grid;
  gap: var(--esp-8);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}

.tarjeta-proyecto,
.tarjeta-idea {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  padding: var(--esp-6);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 4px;
  transition: border-color var(--dur-rapida) ease,
              transform var(--dur-rapida) var(--curva-salida);
}
.tarjeta-proyecto:hover,
.tarjeta-idea:hover {
  border-color: var(--acento);
  transform: translateY(-3px);
}

.tarjeta-proyecto__nombre,
.tarjeta-idea__titulo {
  font-family: var(--fuente-titulo);
  font-weight: 900;
  font-size: var(--t-sub);
  line-height: 1.05;
  letter-spacing: var(--tracking-titulo);
  text-transform: uppercase;
}

.tarjeta-idea a { display: flex; flex-direction: column; gap: var(--esp-3); }
.tarjeta-idea__imagen {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 2px;
  background: var(--azul-700);
}

.listado-proyectos,
.listado-ideas,
.vias-contacto { background: var(--fondo); }


/* ═══════════════════════════ ARTICULO ════════════════════════════════ */

/* La cabecera del articulo deja ver el plasma; de la portada para abajo
   el fondo es opaco para que el texto largo se lea comodo. */
.articulo { background: transparent; }
.articulo__lectura {
  position: relative;
  padding-top: var(--esp-12);
  background: var(--fondo);
}

.articulo__portada {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 4px;
  background: var(--azul-700);
}

.articulo__cuerpo {
  max-width: var(--ancho-texto);
  margin-block: var(--esp-16);
  color: var(--texto-tenue);
}
.articulo__cuerpo > * + * { margin-top: var(--esp-6); }

.articulo__cuerpo h2,
.articulo__cuerpo h3 {
  font-family: var(--fuente-titulo);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: var(--tracking-titulo);
  color: var(--texto);
  margin-top: var(--esp-12);
}
.articulo__cuerpo h2 { font-size: var(--t-sub); }
.articulo__cuerpo h3 { font-size: 1.25rem; }

.articulo__cuerpo a { color: var(--acento); text-decoration: underline; text-underline-offset: 3px; }
.articulo__cuerpo strong { color: var(--texto); }
.articulo__cuerpo img { border-radius: 4px; }

.articulo__cuerpo blockquote {
  padding-left: var(--esp-6);
  border-left: 2px solid var(--acento);
  color: var(--texto);
}

.articulo__cuerpo .lista { display: flex; flex-direction: column; gap: var(--esp-2); }
.articulo__cuerpo .lista li { padding-left: var(--esp-6); position: relative; }
.articulo__cuerpo .lista li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 10px;
  height: 1px;
  background: var(--acento);
}

.articulo__volver { margin-bottom: var(--esp-16); }


/* ═══════════════════════════ CONTACTO ════════════════════════════════ */

.vias {
  display: grid;
  gap: var(--esp-8);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  margin-bottom: var(--esp-16);
}
.via { display: flex; flex-direction: column; gap: var(--esp-2); }
.via__enlace {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 1.125rem;
  transition: color var(--dur-rapida) ease;
}
.via__enlace:hover { color: var(--acento); }


/* ═════════════════════════════ FOOTER ════════════════════════════════ */

.pie {
  padding-block: var(--esp-12);
  background: var(--azul-950);
  border-top: 1px solid var(--borde);
}

.pie__interior {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-6) var(--esp-8);
}

.pie__logo img { width: 78px; height: auto; opacity: 0.9; }

.pie__redes { display: flex; gap: var(--esp-6); }
.pie__redes a {
  font-size: var(--t-etiqueta);
  font-weight: 500;
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--texto-tenue);
  transition: color var(--dur-rapida) ease;
}
.pie__redes a:hover { color: var(--acento); }

.pie__legal {
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
  font-size: var(--t-etiqueta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-etiqueta);
  text-align: right;
}
.pie__lema { color: var(--acento); }

@media (max-width: 767px) {
  .pie__interior { flex-direction: column; align-items: flex-start; }
  .pie__legal { text-align: left; }
}


/* ═══════════════════ ACCESOS FLOTANTES (WhatsApp · Email) ═══════════════ */

.flotantes {
  position: fixed;
  right: clamp(1rem, 2.5vw, 2rem);
  bottom: clamp(1rem, 2.5vw, 2rem);
  z-index: var(--z-flotantes);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.flotantes__boton {
  display: grid;
  place-items: center;
  width: 3.5rem;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 0 10px 28px -8px rgba(6, 9, 35, 0.7);
  transition: transform var(--dur-rapida) var(--curva-salida),
              background var(--dur-rapida) ease,
              box-shadow var(--dur-rapida) ease;
}
.flotantes__boton:hover,
.flotantes__boton:focus-visible { transform: translateY(-3px) scale(1.06); }

.flotantes__boton--whatsapp { background: var(--acento); color: var(--azul-900); }
.flotantes__boton--whatsapp:hover { background: var(--verde-400); box-shadow: 0 10px 30px -6px var(--acento); }

.flotantes__boton--email { background: var(--azul-marca); color: var(--texto); }
.flotantes__boton--email:hover { background: var(--azul-400); }

@media (max-width: 767px) {
  .flotantes__boton { width: 3.1rem; }
}

/* Entrada: llegan desde la izquierda con rebote, uno detras del otro.
   main.js agrega .es-visible (en la home, cuando se va el preloader).
   Sin JS (.sin-js) se ven directamente. */
html:not(.sin-js) .flotantes:not(.es-visible) .flotantes__boton {
  opacity: 0;
  transform: translateX(-320px);
}
.flotantes.es-visible .flotantes__boton {
  /* backwards y no both: al terminar, el hover vuelve a poder mover el boton. */
  animation: flotantes-rebote 1.3s cubic-bezier(0.25, 1, 0.5, 1) backwards;
}
.flotantes.es-visible .flotantes__boton:nth-child(2) { animation-delay: 0.22s; }

@keyframes flotantes-rebote {
  0%   { opacity: 0; transform: translateX(-320px) scale(0.6); }
  40%  { opacity: 1; transform: translateX(28px) scale(1.12, 0.9); }
  58%  { transform: translateX(-16px) scale(0.95, 1.05); }
  74%  { transform: translateX(8px) scale(1.03, 0.98); }
  88%  { transform: translateX(-3px) scale(1); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}
}

@media (prefers-reduced-motion: reduce) {
  .flotantes.es-visible .flotantes__boton { animation: none; }
  html:not(.sin-js) .flotantes:not(.es-visible) .flotantes__boton { opacity: 1; transform: none; }
}