/* jA Comunicación — página "en construcción"
   Sistema de color y tipografía cerrado el 14/08/2026 (ver MATERIA-PRIMA.md §15).
   Verde institucional #2E7D82, escala tonal (no grises neutros), General Sans + Barlow.
   Único juego gráfico por ahora: el logotipo respira opacidad (14/08/2026). */

:root{
  --bg:#05110f;
  --green:#2e7d82;
  --green-70: color-mix(in srgb, var(--green) 70%, var(--bg));
  --green-45: color-mix(in srgb, var(--green) 45%, var(--bg));
  --green-30: color-mix(in srgb, var(--green) 30%, var(--bg));
  --green-18: color-mix(in srgb, var(--green) 18%, var(--bg));
  --green-10: color-mix(in srgb, var(--green) 10%, var(--bg));
  --ink:#eef2f1;
  --ink-dim: color-mix(in srgb, var(--ink) 60%, var(--bg));
  --gold:#d9a441;
  --gold-dim: color-mix(in srgb, var(--gold) 55%, var(--bg));

  --font-display:"General Sans", -apple-system, "Segoe UI", sans-serif;
  --font-body:"Barlow", -apple-system, "Segoe UI", sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{
  background:var(--bg);
  color:var(--ink);
  overflow-x:hidden;
}

body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--ink);
  overflow-x:hidden;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

.stage{
  position:relative; z-index:2;
  flex-shrink:0;
  min-height:100vh; min-height:100dvh;
  display:flex;
  flex-direction:column;
  align-items:center;
  /* el logo arranca pegado al video (30px), el resto sigue debajo en flujo normal */
  justify-content:flex-start;
  padding:30px 7vw 8vw;
  text-align:center;
}

/* logotipo — 30% mas chico que el original en PC/Tablet (20/08/2026);
   en celulares 75% mas chico (50% el 20/08, otra mitad el 23/09/2026) */
.logo-frame{
  width:100%;
  max-width:448px; /* 640px - 30% */
  padding:10%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:2rem;
}

.logo-breathe{
  width:100%;
  height:auto;
  max-height:49vh; /* 70vh - 30% */
  object-fit:contain;
  /* único juego gráfico por ahora: 30s a opacidad 0, 30s de vuelta a 1 */
  animation: breathe 60s ease-in-out infinite;
}

@media (max-width: 768px){
  /* celular: otra mitad mas chico (23/09/2026) — 320px/35vh → 160px/17.5vh */
  .logo-frame{ max-width:160px; }
  .logo-breathe{ max-height:17.5vh; }
}

@keyframes breathe{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}

.eyebrow{
  font-family:var(--font-display);
  font-size:.8rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold-dim);
  margin-bottom:1.4rem;
}

h1{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(2.1rem, 5.5vw, 4.4rem);
  line-height:1.05;
  letter-spacing:-.01em;
  max-width:18ch;
  margin:0 auto 1.4rem;
  text-wrap:balance;
}

.lede{
  font-size:clamp(1rem, 1.6vw, 1.2rem);
  color:var(--ink-dim);
  max-width:46ch;
  line-height:1.6;
  margin:0 auto;
}

.foot{
  position:relative; z-index:2;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:.6rem;
  padding:1.6rem 7vw 2rem;
  font-size:.78rem;
  letter-spacing:.02em;
  color:var(--ink-dim);
  border-top:1px solid var(--green-18);
}

@media (prefers-reduced-motion: reduce){
  .logo-breathe{ animation:none; opacity:1; }
}

/* ====================================================================
   MENU — portado tal cual de WEBSITE (.hamburger-nav, #hamburger-toggle,
   .hbn-links), re-pelado a la paleta oscura/verde de este sitio. Mecanismo
   intacto: checkbox CSS-only para abrir/cerrar, JS solo para el umbral de
   scroll (ver assets/js/main.js). Mayuscula + italica al hover es
   continuidad de este componente ya cerrado (MATERIA-PRIMA.md §15), no una
   excepcion nueva a la regla general de tipografia.
   ==================================================================== */

.site-header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  /* padding-right deja lugar al circulo de #hamburger-toggle (fixed, mismo
     right:7vw), que si no queda tapando al boton de contacto */
  padding:1.4rem calc(7vw + 68px) 1.4rem 7vw;
  opacity:0;
  pointer-events:none;
  transition:opacity .8s ease;
}

body.hero-settled .site-header{
  opacity:1;
  pointer-events:auto;
}

/* Pasado el umbral de scroll (30px), la navbar chica se oculta y deja solo
   el boton hamburguesa — objeto ya cerrado, ver MATERIA-PRIMA.md §15. */
.site-header.is-scrolled .nav-links,
.site-header.is-scrolled .btn-contacto{
  display:none;
}

.site-header .flex{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
}

.site-header .logo{
  flex-shrink:0;
  display:flex;
  align-items:center;
}

.site-header .logo img{
  max-height:56px; /* el doble del original (28px), estaba muy chico */
  width:auto;
}

.nav-links{
  display:flex;
  align-items:center;
  gap:clamp(1rem, 3vw, 2rem);
  list-style:none;
  font-family:var(--font-display);
}

.nav-links a{
  color:var(--ink);
  text-decoration:none;
  text-transform:uppercase;
  font-size:.8rem;
  letter-spacing:.08em;
}

.nav-links a:hover{
  color:var(--gold);
}

.btn-contacto{
  flex-shrink:0;
  color:var(--ink);
  border:1px solid var(--green-45);
  border-radius:4px;
  padding:.5rem 1.1rem;
  font-family:var(--font-display);
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  text-decoration:none;
  transition:all .2s ease;
}

.btn-contacto:hover{
  background:var(--green);
  border-color:var(--green);
}

.hbn-container{
  position:fixed; inset:0;
  width:100%; height:100%;
  z-index:49;
  pointer-events:none;
}

.hamburger-nav{
  position:fixed; inset:0;
  width:100vw; height:100vh;
  z-index:48;
  padding:15vh 0;
  background:var(--bg);
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  overflow:hidden;
  box-sizing:border-box;
}

#hamburger-toggle{
  position:fixed;
  top:1.1rem; right:7vw;
  z-index:51;
  appearance:none; -webkit-appearance:none;
  width:52px; height:52px;
  background:var(--green-18);
  border:1px solid var(--green-45);
  border-radius:50%;
  cursor:pointer;
  outline:none;
  pointer-events:auto;
  transition:transform .3s ease, opacity .8s ease;
  opacity:0;
}

body.hero-settled #hamburger-toggle{
  opacity:1;
}

#hamburger-toggle:hover{
  transform:scale(1.05);
}

#hamburger-toggle::before{
  content:"";
  position:absolute;
  width:22px; height:2px;
  background:var(--ink);
  top:50%; left:50%;
  transform:translate(-50%, -50%);
  box-shadow:0 -7px 0 var(--ink), 0 7px 0 var(--ink);
  transition:all .3s ease;
}

#hamburger-toggle::after{
  content:"";
  position:absolute;
  width:22px; height:2px;
  background:var(--ink);
  top:50%; left:50%;
  transform:translate(-50%, -50%) rotate(-45deg);
  opacity:0;
  transition:all .3s ease;
}

#hamburger-toggle:checked::before{
  box-shadow:none;
  transform:translate(-50%, -50%) rotate(45deg);
}

#hamburger-toggle:checked::after{
  opacity:1;
}

#hamburger-toggle:checked + .hamburger-nav{
  opacity:1;
  pointer-events:auto;
}

.hbn-links{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
}

.hbn-links a{
  display:block;
  width:100%;
  text-align:center;
  font-family:var(--font-display);
  font-size:clamp(2rem, 7vw, 4rem);
  line-height:.95;
  letter-spacing:-.02em;
  font-weight:500;
  color:var(--ink);
  text-decoration:none;
  text-transform:uppercase;
  padding:.9rem 0;
  border-bottom:1px solid var(--green-18);
  transition:all .3s ease;
}

.hbn-links a:first-child{
  border-top:1px solid var(--green-18);
}

.hbn-links a:hover{
  background:var(--gold);
  color:var(--bg);
  font-style:italic !important;
}

@media (max-width: 768px){
  .site-header{ padding:1rem calc(6vw + 58px) 1rem 6vw; }
  .nav-links{ display:none; }
  #hamburger-toggle{ top:.9rem; right:6vw; width:46px; height:46px; }
  .hbn-links a{ font-size:clamp(1.5rem, 7vw, 2.5rem); padding:.7rem 0; }
}

/* ====================================================================
   HERO DE VIDEO — apertura. Empieza a pantalla completa; a los -2s del
   final se achica a la medida "de reposo" (90vh / 70vh mobile) y deja ver
   el menu de arriba (fade via body.hero-settled, ver bloque MENU).
   ==================================================================== */

.hero-video-section{
  position:relative;
  flex-shrink:0;
  height:100vh; height:100dvh;
  overflow:hidden;
  background:var(--bg);
  transition:height 1.1s cubic-bezier(.2,.7,.3,1);
  display:flex;
  align-items:flex-end;
}

body.hero-settled .hero-video-section{
  height:90vh; height:90dvh;
}

.hero-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}

.hero-video-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--bg) 45%, transparent) 0%,
    color-mix(in srgb, var(--bg) 15%, transparent) 40%,
    color-mix(in srgb, var(--bg) 85%, transparent) 100%);
}

/* La entrada (keyframes) usa la propiedad `translate`; el viaje hacia el titulo
   usa left/top/transform/color con transition — asi no se pisan entre si. */
.hero-tagline{
  position:absolute;
  top:46%;
  left:50%;
  width:max-content;
  max-width:calc(100% - 14vw);
  transform:translate(-50%, -50%);
  z-index:2;
  text-align:center;
  color:var(--ink);
  font-family:var(--font-display);
  font-size:clamp(.85rem, 1.6vw, 1.1rem);
  letter-spacing:.3em;
  text-transform:uppercase;
  opacity:0;
  animation:tagline-in 4s cubic-bezier(.16,.7,.3,1) forwards;
  transition:
    left 1.4s cubic-bezier(.2,.7,.3,1),
    top 1.4s cubic-bezier(.2,.7,.3,1),
    transform 1.4s cubic-bezier(.2,.7,.3,1),
    color 1.4s ease;
}

@keyframes tagline-in{
  0%   { opacity:0; translate:-6vw 0; }
  25%  { opacity:1; }
  100% { opacity:1; translate:0 0; }
}

@keyframes tagline-out{
  to { opacity:0; }
}

/* PC y tablet: al aparecer los titulos, la leyenda vira al verde de marca y
   viaja hasta quedar alineada a izquierda, justo encima del titulo (23/09/2026).
   --tagline-bottom lo calcula main.js: distancia desde el pie del hero hasta
   el borde superior del h1. */
@media (min-width: 769px){
  .hero-video-section.titles-in .hero-tagline{
    left:7vw;
    top:calc(100% - var(--tagline-bottom, 50%));
    transform:translate(0, -100%);
    text-align:left;
    color:var(--green);
  }
}

/* Celular: la leyenda se desvanece un segundo despues de que aparece el
   titulo, para no superponerse (23/09/2026). */
@media (max-width: 768px){
  .hero-video-section.titles-in .hero-tagline{
    animation:
      tagline-in 4s cubic-bezier(.16,.7,.3,1) forwards,
      tagline-out .8s ease 1s forwards;
  }
}

.hero-titles{
  position:relative;
  z-index:2;
  width:100%;
  padding:0 7vw clamp(3rem, 8vw, 5rem);
  opacity:0;
  transform:translateY(18px);
  transition:opacity 1s ease, transform 1s ease;
}

.hero-titles.is-visible{
  opacity:1;
  transform:translateY(0);
}

.hero-titles h1{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(2rem, 6vw, 4.2rem);
  line-height:1.05;
  letter-spacing:-.01em;
  color:var(--ink);
  max-width:20ch;
  margin:0 0 .6rem;
}

.hero-titles p{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(1rem, 2vw, 1.4rem);
  color:var(--ink-dim);
  margin:0;
  /* sin tope de ancho: en PC va en un renglon; salta solo si la pantalla
     no alcanza (tablet/celular) — pedido de Julio 23/09/2026 */
}

@media (max-width: 768px){
  body.hero-settled .hero-video-section{
    height:70vh; height:70dvh;
  }
}