/* =============================================================
   STYLES.CSS — Hoja de estilos compartida.

   Bloques:
     1.  Tipografía (@font-face)
     2.  Variables y reset
     3.  Transición de páginas (dissolve)
     4.  Navegación lateral izquierda (desktop)
     5.  Logo PNG (blanco / negro según sección)
     6.  Página: Home (index)
     7.  Página: Artículo (about + vision)
     8.  Página: Education & Experience
     9.  Página: Our Work
     10. Página: Clients
         Contact
     11. Utilidades (fade-in)
     12. Responsive mobile (≤ 768px)
   ============================================================= */


/* =============================================================
   1. TIPOGRAFÍA
   ============================================================= */
@font-face {
  font-family: 'cabin';
  /* Reemplazar con la ruta real al archivo TTF regular */
  src: url('../fonts/Cabin-VariableFont_wdth/,wght.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'LTC Nicolas Cochin';
  /* Reemplazar con la ruta real al archivo TTF italic */
  src: url('../fonts/NicolasCochin.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}


/* =============================================================
   2. VARIABLES, RESET Y BASE
   ============================================================= */
:root {
  --color-bg:   #FFFFFF;
  --color-ink:  #0A0A0A;
  --color-mid:  #555555;
  --color-rule: #CCCCCC;
  --nav-width:  300px;
  --header-h:   60px;   /* alto del header mobile */
}

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

html { scroll-behavior: auto; }

body {
  font-family: 'cabin', serif;
  background: var(--color-bg);
  color: var(--color-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  cursor: default;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

::selection { background: var(--color-ink); color: var(--color-bg); }

img { display: block; max-width: 100%; }


/* =============================================================
   3. TRANSICIÓN DE PÁGINAS — DISSOLVE
   El body entra desde opacidad 0 y se desvanece hacia 1.
   El JS agrega .is-leaving al body antes de navegar a otra
   página, fundiendo el contenido a 0 antes de cambiar.

   Si JavaScript no carga, la regla `html:not(.js)` mantiene
   el body visible para no dejar la página en blanco.
   ============================================================= */
html:not(.js) body { opacity: 1; }

html.js body {
  opacity: 0;
  transition: opacity 0.4s ease;
}
html.js body.is-loaded { opacity: 1; }
html.js body.is-leaving { opacity: 0; }


/* =============================================================
   4. NAVEGACIÓN LATERAL IZQUIERDA (desktop)
   Fondo siempre transparente.
   - Home: letras blancas.
   - Resto: letras negras (heredan de body).
   ============================================================= */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--nav-width);
  height: 100vh;
  background: transparent;
  padding: 16px 28px 32px 28px;
  display: flex;
  flex-direction: column;
  z-index: 100;
}

/* — Marca / logo — */
.nav__brand {
  margin-bottom: 80px;
}
.nav__brand a {
  display: inline-block;
}
.nav__brand a:hover { text-decoration: none; }

/* — Contenedor de grupos — */
.nav__groups {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* — Cada grupo: '&' como viñeta — */
.nav__group {
  position: relative;
  padding-left: 32px;
  margin-bottom: 32px;
}
.nav__group::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 14x;
  letter-spacing: 0;
  opacity: 0.45;
}

.footer__division {
  margin-bottom: 16px;
}

.footer__title {
  font-size: 10px !important ;
  opacity: 0.6;
}

.contact__content a,
.contact__content p,
.contact__content span {
  display: block;
  margin-bottom: 8px;
}

/* Título de grupo (no clickeable — p.ej. "Our Work") */
.nav__group-title {
  font-size: 12px;
  letter-spacing: 0.18em;
  opacity: 0.65;
  margin-bottom: 16px;
  pointer-events: none;
}

.nav__legal {
  font-size:12px;
  font-weight: lighter !important;
  line-height: 160%;
  letter-spacing: 0.18em;
  flex: 1;
  display: flex;
  align-items: flex-end;
}

/* Lista de links */
.nav__group-list,
.nav__group-sublist {
  list-style: none;
  display: flex;
  flex-direction: column;
}
.nav__group-list { gap: 10px; }
.nav__group-sublist { gap: 8px; }

/* ---- LINKS ----
   Por requerimiento: sólo el ítem activo cambia opacidad / lleva
   el guión. El resto del menú NO baja de opacidad. */
.nav__group-list a,
.nav__group-sublist a {
  display: inline-block;
  position: relative;
  transition: opacity 0.15s ease;
}
.nav__group-list a {
  font-size: 12px;
  letter-spacing: 0.18em;
}
.nav__group-sublist a {
  font-size: 12px;
  letter-spacing: 0.14em;
}

/* Hover: subrayado breve y sin variar opacidad del resto */
.nav__group-list a:hover,
.nav__group-sublist a:hover {
  text-decoration: underline dotted;
}

/* ---- ESTADO ACTIVO ----
   Único estado que muestra guion '—' a la izquierda.
   El guion va con position: absolute para que no mueva el texto. */
.nav__group-list a::before,
.nav__group-sublist a::before {
  content: ">";
  position: absolute;
  right: calc(100% + 6px);
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
.nav__group-list a::before  { font-size: 9px; }
.nav__group-sublist a::before { font-size: 8px; }

.nav__group-list a.active::before,
.nav__group-sublist a.active::before {
  opacity: 1;
  font-weight: 00 !important;
}

.nav__group-list a.active,
.nav__group-sublist a.active {
  font-weight: 600;
}

/* — Datos de contacto al pie — */
.nav__contact {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0px;
  padding-left: 8px;
}
.nav__contact span,
.nav__contact a {
  font-size: 10px;
  letter-spacing: 0.04em;
  line-height: 1.5;
}
.nav__contact a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.nav__contact-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'LTC Nicolas Cochin', serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: inherit;
  padding: 0;
}

.nav__contact-drawer {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 10px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 400ms ease, opacity 400ms ease;
  opacity: 0;
}

.nav__contact-drawer.open {
  max-height: 200px;
  opacity: 1;
}

.nav__contact-drawer span,
.nav__contact-drawer a {
  font-size: 9px;
  letter-spacing: 0.04em;
  line-height: 1.55;
}
.igTitle{
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 8px ;
}
/* — Header mobile + panel: ocultos en desktop — */
.mob-header { display: none; }
.mob-panel  { display: none; }


/* =============================================================
   5. LOGO PNG
   El HTML siempre incluye AMBAS imágenes (blanca y negra).
   El CSS oculta una u otra según la página:
   - body.home (fondo oscuro)  → logo blanco
   - resto (fondo blanco)      → logo negro
   ============================================================= */
.logo {
  height: auto;       /* alto fijo del logo en desktop */
  width: 180px;
  display: block;
}

/* Por defecto: mostrar el logo negro, ocultar el blanco */
.logo--white { display: none; }
.logo--black { display: block; }

/* En home: invertir */
body.home .logo--white { display: block; }
body.home .logo--black { display: none; }


/* =============================================================
   6. PÁGINA HOME (index.html)
   Hero a sangre completa. Sin tagline (se eliminó).
   ============================================================= */
body.home {
  overflow: hidden;
  background: #000;   /* fondo oscuro mientras carga la imagen */
}
body.home .nav { color: #FFFFFF; }
body.home .nav a { color: #FFFFFF; }

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.hero-placeholder {
  width: 100%;
  height: 100%;
  background-color: #555555;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--color-rule);
}
.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* =============================================================
   7. PÁGINA ARTÍCULO (about.html + vision.html)
   ============================================================= */
.article {
  margin-left: var(--nav-width);
  padding: 80px 80px 120px 80px;
  min-height: 100vh;
}
.article__label {
  font-family: 'LTC Nicolas Cochin', serif;
  font-size:28px;
  font-weight: normal;
  letter-spacing: 0.5em;
  color: var(--color-mid);
  padding-bottom: 16px;
}
.article__rule {
  border: none;
  max-width: 808px;
  border-top: 0px solid var(--color-rule);
  margin-bottom: 48px;
}
.article__title {
  font-family: 'LTC Nicolas Cochin', serif;
  font-weight: normal;
  font-size: clamp(24px, 3vw, 36px);
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: var(--color-ink);
  margin-bottom: 16px;
  max-width: 90%;
}

.article__divisor {
  border-bottom: 1px solid #979797;
  margin: 40px 0 40px 0;
  width: 40%;
  opacity: 40%;
}


.article__body {
  column-count: 2;
  column-gap: 48px;
  font-size: 17px;
  line-height: 1.5;
  max-width: 900px;
  margin-bottom: 64px;
  color: var(--color-ink);
}
.article__body p {
  margin-bottom: 20px;
  break-inside: avoid-column;
}


/* =============================================================
   8. PÁGINA EDUCATION & EXPERIENCE
   ============================================================= */
.edu {
  margin-left: var(--nav-width);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
}
.edu__image {
  top: 100px;
  height: 100vh;
  margin-top: 118px;
  margin-right: 16px;
  align-self: start;
  overflow: hidden;
  opacity: 80%;
  border-radius: 4px;

  
}
.edu__image-placeholder {
  width: 100%;
  height: 100%;
  background-color: #CCCCCC;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--color-mid);
}
.edu__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.edu__content {
  padding: 80px 80px 120px 48px;
  min-height: 100vh;
}
.edu__label {
  font-family: 'LTC Nicolas Cochin', serif;
  font-size:28px;
  font-weight: normal;
  letter-spacing: 0.5em;
  color: var(--color-mid);
  padding-bottom: 16px;
}
.edu__rule {
  border: none;
  border-top: 0px solid var(--color-rule);
  margin-bottom: 56px;
}
.entry {
  display: grid;
  grid-template-columns: 1fr;
  padding: 24px 0;
  border-top: 0px solid var(--color-rule);
  margin-bottom: 16px;
}
.entry:first-of-type { border-top: none; padding-top: 0; }
.entry__num {
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--color-mid);
  padding-top: 8px;
  
}
.entry__title {
  font-family: 'LTC Nicolas Cochin', serif;
  font-weight: normal;
  font-size: 28px;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  line-height: 1.2;
  margin-bottom: 6px;
}
.entry__meta {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--color-mid);
  margin-bottom: 14px;
}
.entry__desc {
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-mid);
  max-width: 42em;
  padding-bottom: 12px;
}


/* =============================================================
   9. PÁGINA OUR WORK (work.html)
   ============================================================= */
.work {
  margin-left: var(--nav-width);
  padding: 80px 80px 0 80px;
}
.work__label {
  font-family: 'LTC Nicolas Cochin', serif;
  font-size:28px;
  font-weight: normal;
  letter-spacing: 0.5em;
  color: var(--color-mid);
  padding-bottom: 16px;
}
.work__rule {
  border: none;
  border-top: 1px solid var(--color-rule);
  margin-bottom: 80px;
}

.project { margin-bottom: 140px; scroll-margin-top: 40px; }
.project__header { margin-bottom: 48px; }
.project__title {
  font-family: 'LTC Nicolas Cochin', serif;
  font-weight: normal;
  font-size: clamp(28px, 4vw, 48px);
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--color-ink);
  margin-bottom: 8px;
}
.project__meta {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--color-mid);
}
.project__divider {
  border: 0px solid #f4f4f4;
  border-radius: 8px;
  margin: 40px 80px 20px 80px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 24px;
  row-gap: 80px;
}
.item--xxl { grid-column: span 12;}
.item--xl { grid-column: span 10;}
.item--llg { grid-column: span 8; }
.item--lg { grid-column: span 6; }
.item--md { grid-column: span 5; }
.item--sm { grid-column: span 4; }
.item--vert  .item__img { /* quitá aspect-ratio */ }
.item--horiz .item__img { /* quitá aspect-ratio */ }
.item__img {
  width: 100%;
  height: auto;         /* la imagen define su propia altura */
  display: block;
  object-fit: contain;  /* nunca recorta */
}

.item__caption {
  display: flex;
  gap: 16px;
  margin-top: 14px;
  align-items: baseline;
}
.item__num {
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--color-mid);
  flex-shrink: 0;
  min-width: 24px;
}
.item__desc {
  font-size: 12px;
  color: var(--color-mid);
  line-height: 1.5;
}
.offset-1 { grid-column-start: 2; }
.offset-2 { grid-column-start: 4; }
.offset-3 { grid-column-start: 6; }


/* =============================================================
   10. PÁGINA CLIENTS
   ============================================================= */
.clients {
  margin-left: var(--nav-width);
  padding: 80px 80px 120px 80px;
  min-height: 100vh;
}
.clients__label {
  font-family: 'LTC Nicolas Cochin', serif;
  font-size:28px;
  font-weight: normal;
  letter-spacing: 0.5em;
  color: var(--color-mid);
  padding-bottom: 16px;
}
.clients__rule {
  border: none;
  border-top: 1px solid var(--color-rule);
  margin-bottom: 0;
}
.list { list-style: none; }
.list__item {
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: center;
  column-gap: 16px;
  padding: 32px 0;
  border-bottom: 1px solid var(--color-rule);
}
.list__num {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--color-mid);
  transition: color 0.15s ease;
}
.list__bullet {
  width: 32px;
  height: 32px;
  display: block;
  flex-shrink: 0;
}
.list__name {
  font-size: 22px;
  color: var(--color-ink);
  letter-spacing: -0.01em;
  transition: color 0.15s ease;
}
.list__item:hover .list__num,
.list__item:hover .list__name {
  color: var(--color-mid);
}


/* =============================================================
   11. UTILIDADES
   ============================================================= */
.fade-in {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.fade-in.is-visible { opacity: 1; }


/* =============================================================
   12. RESPONSIVE — breakpoint 768px
   En mobile:
   - El menú lateral desaparece.
   - Aparece un header fijo en la parte superior con el logo a
     la izquierda y un botón "Menu" a la derecha.
   - En home el header es transparente con texto blanco;
     en el resto es blanco con texto negro.
   - El panel mobile cubre la pantalla con fondo blanco y
     letras negras siempre.
   - El hero ocupa toda la pantalla detrás del header.
   ============================================================= */
@media (max-width: 768px) {

  :root {
    --nav-width: 0px;
  }

  /* En mobile, el contenido fluye normalmente sin overflow */
  body { overflow-x: hidden; }
  body.home { overflow: visible; }

  /* La barra lateral desktop se oculta por completo */
  .nav { display: none; }

  /* ---- Header mobile fijo arriba ---- */

  .work {
    padding-left: 0;
    padding-right: 0;
  }
  
  .grid {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 24px;
  }

  .item {
    grid-column: 1 / -1 !important;
  }

  .item__img {
    width: 100vw;
  }

  .mob-header {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-h);
    padding: 0 20px;
    align-items: center;
    justify-content: space-between;
    z-index: 90;
    background: transparent;
    transition: background 0.2s ease, color 0.2s ease;
  }

  /* Por defecto (páginas internas): fondo blanco, texto negro */
  body:not(.home) .mob-header {
    background: var(--color-bg);
    color: var(--color-ink);
    border-bottom: 1px solid var(--color-rule);
  }

  /* Home: header transparente sobre la imagen, texto blanco */
  body.home .mob-header {
    background: transparent;
    color: #FFFFFF;
  }

  .mob-header__brand {
    display: flex;
    align-items: center;
  }
  .mob-header__brand a { display: block; }
  .mob-header__brand a:hover { text-decoration: none; }

  /* Logo en mobile más chico */
  .mob-header .logo { height: autopx; }

  /* Lógica blanco / negro idéntica al desktop */
  .mob-header .logo--white { display: block; }
  .mob-header .logo--black { display: block; }
  body.home .mob-header .logo--white { display: block; }
  body.home .mob-header .logo--black { display: none; }

  /* Botón "Menu" — sólo texto */
  .mob-header__toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    color: inherit;
    font-family: inherit;
    font-size: 11px;
    letter-spacing: 0.18em;
    padding: 4px 0;
  }

  /* ---- Panel mobile a pantalla completa ---- */
  .mob-panel {
    display: flex;
    position: fixed;
    inset: 0;
    background: var(--color-bg);
    color: var(--color-ink);
    z-index: 200;
    flex-direction: column;
    padding: 0 32px 32px 32px;
    /* Oculto por defecto: opacidad 0 + pointer-events ninguno */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
    overflow-y: auto; 
  }
  .mob-panel.open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.25s ease, visibility 0s linear 0s;
  }

  /* Header dentro del panel: logo + botón Cerrar */
  .mob-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-h);
    padding: 0;
    margin: 0 -32px 0 -32px;
    padding: 0 20px;
    border-bottom: 1px solid var(--color-rule);
  }
  .mob-panel__header .logo--white { display: none; }
  .mob-panel__header .logo--black { display: block; }
  .mob-panel__close {
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--color-ink);
    padding: 4px 0;
  }

  /* Lista de navegación mobile */
  .mob-panel__nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 24px;
    padding: 32px 0;
  }
  .mob-group {
    position: relative;
    padding-left: 16px;
    padding-bottom: 24px;
  }
  .mob-group::before {
    position: absolute;
    left: 0;
    top: 2px;
    font-size: 13px;
    opacity: 0.45;
  }
  .mob-group__title {
    font-family: 'LTC Nicolas Cochin', serif;
    font-weight: normal;
    font-size: 18px;
    letter-spacing: 0.18em;
    opacity: 0.45;
    margin-bottom: 32px;
  }
  .mob-group__list,
  .mob-group__sublist {
    list-style: none;
    display: flex;
    flex-direction: column;
  }
  .mob-group__list { gap: 16px; }
  .mob-group__sublist { gap: 16px; }

  .mob-group__list a {
  font-size: 18px;
  letter-spacing: 0.03em;
  color: var(--color-ink);
  text-transform: none;
  font-style: normal;
  position: relative;  /* necesario para que el ::before se posicione */
}

/* El indicador existe en todos pero oculto */
.mob-group__list a::before,
.mob-group__sublist a::before {
  content: ">";
  position: absolute;
  right: calc(100% + 2px);
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;   /* ← oculto por defecto */
  transition: opacity 0.15s ease;
  pointer-events: none;
}

/* Solo visible cuando tiene clase .active */
.mob-group__list a.active::before,
.mob-group__sublist a.active::before {
  opacity: 1;
}

  .mob-group__list a.active,
  .mob-group__sublist a.active {
    font-weight: 800;
  }

  .mob-group__sublist a {
    font-size: 14px;
    letter-spacing: 0.06em;
    color: var(--color-ink);
    text-transform: none;
    position: relative;
  }

  /* Datos de contacto al pie del panel */
  .mob-panel__contact {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 24px;
    border-top: 1px solid var(--color-rule);
  }
  .mob-panel__contact span,
  .mob-panel__contact a {
    font-size: 11px;
    letter-spacing: 0.04em;
    line-height: 1.55;
    color: var(--color-mid);
  }

  /* ---- Páginas individuales (compensar header mobile) ---- */

  /* Home: el hero pasa detrás del header transparente */
  .hero {
    width: 100%;
    height: 100vh;
  }

  /* Artículo */
  .article {
    margin-left: 0;
    padding: calc(var(--header-h) + 32px) 24px 64px 24px;
  }
  .article__body {
    column-count: 1;
    font-size: 16px;
  }
  .article__title {
    font-family: 'LTC Nicolas Cochin', serif;
    font-weight: normal;
    margin-bottom: 40px;
    font-size: clamp(36px, 9vw, 56px);
  }

  /* Education: imagen arriba (no sticky), índice debajo */
  .edu {
    margin-left: 0;
    grid-template-columns: 1fr;
    padding-top: var(--header-h);
  }
  .edu__image {
    position: relative;
    height: 55vh;
  }
  .edu__content {
    padding: 40px 24px 64px 24px;
  }
  .entry {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 16px;
    padding: 16px 0;
    
  }
  .entry__title { font-size: 28px; }
  .entry__desc  { font-size: 16px; }

  /* Work: galería a una sola columna */
  .work {
    margin-left: 0;
    padding: calc(var(--header-h) + 32px) 24px 0 24px;
  }
  .grid {
    grid-template-columns: 1fr;
    row-gap: 48px;
  }
  .item--lg, .item--md, .item--sm,
  .offset-1, .offset-2, .offset-3 {
    grid-column: 1 / -1;
    grid-column-start: auto;
  }
  .project {
    margin-bottom: 72px;
    scroll-margin-top: calc(var(--header-h) + 16px);
  }
  .project__header { margin-bottom: 32px; }
  .project__divider { margin-bottom: 56px; }

  /* Clients */
  .clients {
    margin-left: 0;
    padding: calc(var(--header-h) + 32px) 24px 64px 24px;
  }
  .list__item {
    grid-template-columns: 32px 1fr;
    column-gap: 12px;
    padding: 22px 0;
  }
  .list__name { font-size: 17px; }
}

.splash {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  pointer-events: none;
  transition: opacity 600ms ease;
}

.splash--hidden {
  opacity: 0;
  visibility: hidden;
  transition: opacity 600ms ease, visibility 0ms linear 600ms;
}

.splash__logo {
  width: 400px;
  height: auto;
}

/* Nav y header mobile ocultos durante el splash */
body.splash-active .nav,
body.splash-active .mob-header {
  opacity: 0.3;
  transition: opacity 600ms ease;
}