/* ==================================================================
   Jarvis: /jarvis.

   Hoja APARTE, como la del blog y la del cotizador: la pagina no carga
   styles.css. Lleva las Neue Haas del sitio, su menu copiado y, debajo,
   lo propio de la pagina. Los dos idiomas van escritos en el HTML
   (data-doc-lang) y jarvis.js solo cambia cual se ve.
================================================================== */

/* --- Neue Haas Grotesk ---
   Las mismas declaraciones que blog.css, y las mismas versiones -Trial:
   el dia que entre la licencia se sustituye el .otf y no se toca esto. */
@font-face {
  font-family: "Neue Haas Display";
  src: url("assets/fonts/neue-haas-display-black.otf") format("opentype");
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Text";
  src: url("assets/fonts/neue-haas-text-roman.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Text";
  src: url("assets/fonts/neue-haas-text-bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --display: "Neue Haas Display", "Helvetica Neue", Arial, sans-serif;
  --body:    "Neue Haas Text", "Helvetica Neue", Arial, sans-serif;
  /* lo que pide el menu copiado de abajo */
  --rd-acido:  #D3F32C;
  --nav-tinta: #f2efe9;
  /* Alto de la barra fija: su relleno mas el logotipo, que mide el 51%
     de su ancho. Calculado y no medido a ojo para que el titular no se
     meta debajo en ningun ancho. */
  --nav-alto: calc(2.2rem + clamp(74px, 8vw, 118px) * 0.51);
}

/* los dos idiomas: van escritos en el HTML y solo se muestra uno */
html[data-lang="en"] [data-doc-lang="es"] { display: none; }
html[data-lang="es"] [data-doc-lang="en"] { display: none; }

/* ==================================================================
   EL MENU DEL SITIO

   ★ COPIADO de blog.css -que a su vez lo copio de styles.css-, no
   compartido: es la tercera copia y un cambio en el menu va en LAS
   TRES hojas (CUATRO con esta de /jarvis).
================================================================== */

/* --- reglas base del menu que en blog.css viven fuera de su copia ---
   Van ANTES del resto: la media query de abajo enciende .nav__toggle en
   estrecho, y si esto fuera despues lo volveria a apagar. */

.nav__lang button[aria-pressed="true"] { opacity: 1; font-weight: 500; }

.nav__toggle {
  display: none;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0;
  border: 0;
  background: transparent;
  color: var(--nav-tinta);
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  /* vuelve a repartir: marca a la izquierda, enlaces y redes a la derecha */
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.1rem clamp(1.2rem, 4vw, 3rem);
  /* Barra negra maciza, en todas las secciones.
     El difference original se iba con el rediseno -sobre el rojo devolvia
     un cian electrico-, y dejarla transparente y blanca la hacia
     desaparecer sobre las secciones claras. Con fondo propio deja de
     depender de lo que tenga detras: un solo estado, legible siempre. */
  background: #000;
  color: #fff;
}

.nav__brand {
  display: block;
  flex: none;
  line-height: 0;
}

.nav__brand img {
  display: block;
  width: clamp(74px, 8vw, 118px);
  height: auto;
  -webkit-user-drag: none;
}

.nav__right {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 3vw, 2.4rem);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2.2vw, 2rem);
}

.social {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.social a {
  display: block;
  line-height: 0;
  transition: transform 220ms ease;
}

.social a:hover {
  transform: scale(1.12) rotate(-4deg);
}

.social img {
  display: block;
  width: clamp(24px, 2.4vw, 32px);
  height: auto;
  -webkit-user-drag: none;
}

.nav__links a {
  color: #fff;
  text-decoration: none;
  font-family: "Neue Haas Text", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: clamp(0.66rem, 0.86vw, 0.82rem);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.95;
  transition: opacity 200ms ease;
}

.nav__links a:hover {
  opacity: 0.6;
}

.nav__burger {
  position: relative;
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  transition: background-color 200ms ease;
}

.nav__burger::before,
.nav__burger::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: transform 260ms cubic-bezier(0.16, 0.9, 0.25, 1);
}

.nav__burger::before { top: -6px; }

.nav__burger::after { top: 6px; }

.nav.is-open .nav__burger { background: transparent; }

.nav.is-open .nav__burger::before { transform: translateY(6px) rotate(45deg); }

.nav.is-open .nav__burger::after { transform: translateY(-6px) rotate(-45deg); }

.nav__item--sub {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.nav__subtoggle {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.nav__chev {
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 260ms cubic-bezier(0.16, 0.9, 0.25, 1);
}

.nav__item--sub.is-open .nav__chev { transform: translateY(1px) rotate(-135deg); }

.nav__sub {
  position: absolute;
  top: calc(100% + 0.9rem);
  right: 0;
  z-index: 2;
  min-width: 17rem;
  margin: 0;
  padding: 0.5rem 0;
  list-style: none;
  background: #08080a;
  border: 1px solid rgba(244, 242, 237, 0.16);
  /* el zoom: nace un poco encogido y desde arriba */
  transform: scale(0.96) translateY(-8px);
  transform-origin: top right;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease, transform 260ms cubic-bezier(0.16, 0.9, 0.25, 1);
}

.nav__item--sub.is-open .nav__sub {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}

.nav__sub button {
  display: block;
  width: 100%;
  padding: 0.5rem 1.1rem;
  border: 0;
  background: transparent;
  color: rgba(244, 242, 237, 0.82);
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 300;
  font-size: 0.86rem;
  letter-spacing: 0.01em;
  text-align: left;
  text-transform: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 200ms ease, color 200ms ease;
}

.nav__sub button:hover { background: rgba(244, 242, 237, 0.07); color: var(--rd-acido); }

.nav__sub button:focus-visible { outline: 2px solid var(--rd-acido); outline-offset: -2px; }

.nav.is-sub-open { mix-blend-mode: normal; }

.nav__lang {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-right: clamp(0.8rem, 2vw, 1.6rem);
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  /* Hereda del nav en vez de fijar --ink, que era un blanco roto y se
     despegaba medio tono del resto de la barra. */
  color: inherit;
}

.nav__lang span { opacity: 0.4; }

.nav__lang button {
  padding: 0.2em 0.1em;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  opacity: 0.45;
  -webkit-appearance: none;
  appearance: none;
  transition: opacity 200ms ease;
}

.nav__lang button:hover { opacity: 0.8; }

.nav__lang button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

@media (max-width: 1180px) {
  .nav__toggle { display: inline-flex; }
  .nav__right {
      position: fixed;
      inset: 0;
      z-index: -1;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      gap: clamp(1.4rem, 4vh, 2.2rem);
      padding: 6rem clamp(1.4rem, 8vw, 3rem) 3rem;
      /* el mismo negro que la barra: son una sola superficie */
      background: #000;
      opacity: 0;
      pointer-events: none;
      transition: opacity 320ms ease;
    }
  .nav.is-open .nav__right {
      z-index: 1;
      opacity: 1;
      pointer-events: auto;
    }
  .nav__links a:focus-visible,
    .nav__sub button:focus-visible {
      outline: 2px solid var(--rd-acido);
      outline-offset: 4px;
      border-radius: 2px;
    }
  .nav__links {
      flex-direction: column;
      align-items: flex-start;
      gap: clamp(0.7rem, 2.2vh, 1.2rem);
    }
  .nav__links a {
      font-family: "Neue Haas Text", "Helvetica Neue", Arial, sans-serif;
      font-weight: 700;
      font-style: italic;
      font-size: clamp(1.7rem, 7vw, 2.6rem);
      letter-spacing: -0.01em;
      text-transform: uppercase;
      color: #fff;
    }
  .nav__links a:hover { color: var(--rd-acido); }
  .social { gap: 1.4rem; }
  .social img { width: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .nav__right,
    .nav__burger,
    .nav__burger::before,
    .nav__burger::after { transition: none; }
}

@media (max-width: 1180px) {
  .nav__item--sub { display: block; }
  .nav__item--sub > a { display: inline-block; }
  .nav__subtoggle {
      width: 28px;
      height: 28px;
      vertical-align: middle;
      margin-left: 0.4rem;
    }
  .nav__chev { width: 8px; height: 8px; }
  .nav__sub {
      position: static;
      min-width: 0;
      margin: 0.5rem 0 0;
      padding: 0;
      background: transparent;
      border: 0;
      border-left: 1px solid rgba(244, 242, 237, 0.2);
      display: none;
      transform: none;
      opacity: 1;
    }
  .nav__item--sub.is-open .nav__sub { display: block; }
  .nav__sub button {
      padding: 0.42rem 0 0.42rem 1rem;
      font-size: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
  .nav__sub, .nav__chev { transition: none; }
}

@media (max-width: 1180px) {
  .nav__lang { margin-right: auto; }
}

@media (pointer: coarse) {
  .nav__lang button {
      padding: 0.75rem 0.55rem;
      margin: -0.75rem -0.2rem;
    }
  .social a {
      padding: 0.55rem;
      margin: -0.55rem;
    }
  .nav__subtoggle,
    .nav__toggle { position: relative; }
  .nav__subtoggle::after {
      content: "";
      position: absolute;
      inset: -9px;
    }
  .nav__toggle::after {
      content: "";
      position: absolute;
      inset: -9px -8px;
    }
}

/* El acceso al portal sale del sitio y va el ultimo: se separa con aire. */
.nav__os { margin-left: 0.4rem; }



/* ==================================================================
   LA PAGINA DE JARVIS

   Negro como la pantalla de JARVIS OS, y los campos de color de ODD
   -violeta electrico, acido- para las dos secciones que piden fuerza:
   el control y el cierre. Las imagenes son cuadros REALES de la pelicula
   «Jarvis se presenta» (26 oct 2026), con datos de ejemplo y sin los
   subtitulos: nada redibujado a mano.
================================================================== */

:root {
  --jv-negro: #000;
  --jv-crema: #EFEBE8;
  --jv-violeta: #4E00FF;
  --jv-acido: #DEFA00;
  --jv-rojo: #990807;
  --jv-mut: rgba(239, 235, 232, 0.66);
  --jv-linea: rgba(239, 235, 232, 0.14);
  --jv-mono: "DM Mono", ui-monospace, monospace;
  --jv-margen: clamp(18px, 5vw, 72px);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--jv-negro); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--jv-negro);
  color: var(--jv-crema);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; }

/* --- piezas comunes --- */
.jv-rotulo {
  font-family: var(--jv-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--jv-acido);
  margin: 0 0 18px;
}
.jv-titular {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.86;
  letter-spacing: -0.015em;
  margin: 0;
}
.jv-titular i {
  font-family: "Neue Haas Text", var(--body);
  font-weight: 700;
  font-style: italic;
  text-transform: none;
  letter-spacing: -0.02em;
}
.jv-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.jv-btn {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 0 26px;
  border-radius: 999px;
  font-family: var(--jv-mono); font-size: 13px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
  transition: transform 0.35s cubic-bezier(.22,1,.36,1), background-color 0.35s, color 0.35s;
}
.jv-btn:active { transform: scale(0.97); }
.jv-btn--violeta { background: var(--jv-violeta); color: #fff; }
.jv-btn--violeta:hover { background: #6526ff; }
.jv-btn--linea { border: 1px solid currentColor; }
.jv-btn--linea:hover { background: rgba(239, 235, 232, 0.1); }
.jv-btn--negro { background: #000; color: var(--jv-acido); }
.jv-btn--negro:hover { background: #1a1a1a; }
.jv-btn .flecha { transition: transform 0.35s cubic-bezier(.22,1,.36,1); }
.jv-btn:hover .flecha { transform: translateX(4px); }

/* --- 1 · Portada: el cerebro de JARVIS OS de fondo --- */
.jv-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: calc(var(--nav-alto) + 40px) var(--jv-margen) clamp(48px, 9vh, 96px);
  overflow: hidden;
  isolation: isolate;
}
.jv-hero__fondo {
  position: absolute; inset: 0; z-index: -2;
  background: #050512 center / cover no-repeat;
}
.jv-hero__fondo img, .jv-hero__fondo video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 62% 50%;
}
.jv-hero__fondo video { opacity: 0; transition: opacity 1.4s ease; }
.jv-hero__fondo video.is-listo { opacity: 1; }
.jv-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 45%, rgba(0,0,0,.88) 100%),
    radial-gradient(90% 70% at 0% 100%, rgba(0,0,0,.75) 0%, rgba(0,0,0,0) 65%);
}
.jv-hero__txt { max-width: 1100px; }
.jv-hero h1 { font-size: clamp(46px, 8.6vw, 148px); }
.jv-hero__sub { max-width: 54ch; margin: 26px 0 0; font-size: clamp(17px, 1.35vw, 20px); color: rgba(239,235,232,.86); }

/* --- 2 · La presentacion, con su voz --- */
.jv-voz { padding: clamp(90px, 14vw, 180px) var(--jv-margen); text-align: center; }
.jv-voz blockquote { margin: 0 auto; max-width: 1050px; }
.jv-voz blockquote p {
  font-family: "Neue Haas Text", var(--body); font-weight: 700; font-style: italic;
  font-size: clamp(28px, 4.2vw, 62px); line-height: 1.04; letter-spacing: -0.02em; margin: 0;
}
.jv-voz footer { margin-top: 26px; font-family: var(--jv-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--jv-mut); }
.jv-voz__intro { max-width: 60ch; margin: 44px auto 0; color: var(--jv-mut); font-size: clamp(17px, 1.3vw, 20px); }

/* --- 3 · Lo que hace: una fila por capacidad --- */
.jv-caps { padding: 0 var(--jv-margen) clamp(60px, 8vw, 120px); }
.jv-caps__cab { max-width: 1100px; margin-bottom: clamp(48px, 7vw, 96px); }
.jv-caps__cab h2 { font-size: clamp(40px, 6.4vw, 104px); }
.jv-cap {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  padding: clamp(36px, 5vw, 64px) 0;
  border-top: 1px solid var(--jv-linea);
}
/* filas pares: la imagen a la izquierda y con la columna ancha */
.jv-cap--inv { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.jv-cap--inv .jv-cap__img { order: -1; }
.jv-cap h3 { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(28px, 3.3vw, 50px); line-height: .9; margin: 0 0 18px; }
.jv-cap p { margin: 0; color: var(--jv-mut); max-width: 46ch; }
.jv-cap ul { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.jv-cap li { position: relative; padding-left: 22px; color: rgba(239,235,232,.84); }
.jv-cap li::before { content: ""; position: absolute; left: 0; top: .62em; width: 10px; height: 2px; background: var(--jv-acido); }
/* 4:3: los videos de Remotion (Cap-<id>-<idioma>) traen letra grande para leerse
   a ~750 px; la imagen fija es un cuadro del mismo video y el video entra encima. */
.jv-cap__img { position: relative; margin: 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--jv-linea); background: #07071a; aspect-ratio: 4 / 3; }
.jv-cap__img video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s ease; }
.jv-cap__img video.is-listo { opacity: 1; }
.jv-cap__img img { width: 100%; height: 100%; object-fit: cover; }
.jv-cap__img figcaption { position: absolute; }
.jv-caps__nota { margin-top: 28px; font-size: 13px; color: var(--jv-mut); }

/* sin imagen: las capacidades de texto van en rejilla */
.jv-mas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--jv-linea); border: 1px solid var(--jv-linea); border-radius: 18px; overflow: hidden; margin-top: clamp(24px, 4vw, 48px); }
.jv-mas > div { background: #000; padding: 28px 26px 30px; }
.jv-mas h4 { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: 22px; line-height: .95; margin: 0 0 10px; }
.jv-mas p { margin: 0; color: var(--jv-mut); font-size: 15px; }

/* --- 4 · El control: campo violeta a sangre --- */
.jv-control { background: var(--jv-violeta); color: #fff; padding: clamp(90px, 12vw, 160px) var(--jv-margen); }
.jv-control .jv-rotulo { color: var(--jv-acido); }
.jv-control h2 { font-size: clamp(44px, 7.6vw, 128px); max-width: 12ch; }
.jv-control__reglas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 44px) clamp(28px, 5vw, 80px); margin-top: clamp(48px, 6vw, 80px); max-width: 1180px; }
.jv-control__reglas h3 { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(22px, 2.1vw, 30px); line-height: .95; margin: 0 0 10px; }
.jv-control__reglas p { margin: 0; color: rgba(255,255,255,.82); }

/* --- 5 · Como lo construimos para tu empresa --- */
.jv-pasos { padding: clamp(90px, 12vw, 160px) var(--jv-margen); }
.jv-pasos h2 { font-size: clamp(40px, 6.4vw, 104px); max-width: 14ch; }
.jv-pasos__intro { max-width: 58ch; color: var(--jv-mut); margin: 26px 0 0; }
.jv-pasos ol { list-style: none; margin: clamp(48px, 6vw, 80px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 36px); counter-reset: paso; }
.jv-pasos li { border-top: 2px solid var(--jv-crema); padding-top: 22px; counter-increment: paso; }
.jv-pasos li::before { content: "0" counter(paso); display: block; font-family: var(--jv-mono); font-size: 13px; letter-spacing: .14em; color: var(--jv-acido); margin-bottom: 18px; }
.jv-pasos h3 { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(22px, 2vw, 30px); line-height: .95; margin: 0 0 12px; }
.jv-pasos p { margin: 0; color: var(--jv-mut); font-size: 16px; }

/* --- 6 · Cierre: campo acido a sangre --- */
.jv-cierre { background: var(--jv-acido); color: #000; padding: clamp(90px, 12vw, 170px) var(--jv-margen); }
.jv-cierre .jv-rotulo { color: #000; opacity: .7; }
.jv-cierre h2 { font-size: clamp(46px, 8vw, 140px); max-width: 13ch; }
.jv-cierre p { max-width: 52ch; margin: 26px 0 0; font-size: clamp(17px, 1.3vw, 20px); }
.jv-cierre .jv-btn--linea { color: #000; }
.jv-cierre .jv-btn--linea:hover { background: rgba(0,0,0,.08); }

/* --- 6 · Preguntas frecuentes: acordeones nativos (<details>), sin JS --- */
.jv-faq { padding: clamp(90px, 12vw, 160px) var(--jv-margen); border-top: 1px solid var(--jv-linea); }
.jv-faq h2 { font-size: clamp(40px, 6.4vw, 104px); max-width: 14ch; }
.jv-faq__lista { margin: clamp(40px, 5vw, 64px) 0 0; border-top: 1px solid var(--jv-linea); max-width: 1100px; }
.jv-faq details { border-bottom: 1px solid var(--jv-linea); }
.jv-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 26px 0; font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(20px, 2.1vw, 30px); line-height: 1; transition: color .2s; }
.jv-faq summary::-webkit-details-marker { display: none; }
.jv-faq summary::after { content: "+"; flex: none; font-family: var(--jv-mono); font-weight: 500; font-size: 24px; line-height: 1; color: var(--jv-acido); transition: transform .3s; }
.jv-faq details[open] summary::after { transform: rotate(45deg); }
.jv-faq summary:hover { color: var(--jv-acido); }
.jv-faq summary:focus-visible { outline: 2px solid var(--jv-acido); outline-offset: 4px; }
.jv-faq details p { margin: -6px 0 28px; max-width: 70ch; color: var(--jv-mut); font-size: clamp(16px, 1.15vw, 18px); }
@media (prefers-reduced-motion: reduce) { .jv-faq summary, .jv-faq summary::after { transition: none; } }

/* --- 7 · El pie del sitio, copiado de styles.css (6 nov 2026) ---
   El mismo pie de oddmarketingagency.com: las tres frases, las secciones,
   el contacto, las redes, la barra legal y la firma. Igual que el menu,
   va copiado y no compartido: esta pagina no carga styles.css. Si el pie
   cambia alla, hay que traerlo aqui. footer.js pone el ano y el volver
   arriba (sin GSAP las frases salen quietas). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* ==================================================================
   Pie

   Colofon, no directorio. Un pie de cuatro columnas con "enlaces
   rapidos" seria justo lo que el sitio lleva seis secciones evitando.

   Cierra en negro despues de la menta de admisiones -contraste duro, y
   la figura de arriba sangra contra este borde- y firma con el logotipo
   enorme recortado por abajo, el mismo gesto del David y la Mona.
================================================================== */
.ft {
  position: relative;
  z-index: 5;
  background: #08080a;
  color: #f4f2ed;
  padding: clamp(3.5rem, 9vh, 6rem) clamp(1.4rem, 6vw, 7rem) 0;
  overflow: hidden;
}

.ft__in { width: 100%; max-width: 1180px; margin: 0 auto; }

.ft__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

/* Las tres frases, apiladas y en mayusculas: es la voz del sitio
   cerrandose sobre si misma.

   Llevaban la serif del diseno anterior y las escribia un comentario como
   "las tres frases del hero". Ya no lo son: el hero del rediseno tiene un
   titular fijo y aquellas frases rotatorias se retiraron. Aqui se quedan
   porque siguen siendo la firma de ODD, pero ahora son SUYAS, no una
   repeticion. */
.ft__say {
  margin: 0;
  display: grid;
  gap: 0.02em;
  font-family: "Neue Haas Display", "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(1.7rem, 4vw, 3.6rem);
  line-height: 0.94;
  letter-spacing: -0.025em;
}

/* de mas apagada a mas encendida: la ultima es la que se queda */
.ft__say > .ft__l:nth-child(1) { color: rgba(244, 242, 237, 0.55); }
.ft__say > .ft__l:nth-child(2) { color: rgba(244, 242, 237, 0.8); }
.ft__say > .ft__l:nth-child(3) { color: var(--rd-acido); }

/* el exterior recorta, el interior sube dentro: revelado enmascarado.
   El padding con margen negativo da holgura para que la mascara no se
   coma las serifas ni los descendentes de la Romana. */
.ft__l {
  display: block;
  overflow: hidden;
  padding: 0.1em 0;
  margin: -0.1em 0;
}

/* SIN transform ni opacity aqui, a proposito.

   Con translateY(110%) en el CSS, GSAP lo lee al arrancar y se lo queda
   en su canal "y"; animar yPercent a 0 no lo limpia, asi que la palabra
   se quedaba 52px abajo y la mascara la recortaba entera. Es la misma
   colision de transforms que ya mordio en el campo cinetico y en el
   David.

   El estado de partida lo pone GSAP con gsap.set, que es dueno unico del
   transform. Y de paso esto es el respaldo sin JS: sin script las
   palabras salen visibles y el pie se lee igual. */
.ft__w {
  display: inline-block;
  will-change: transform;
}

.ft__col { display: grid; gap: 0.55rem; align-content: start; }

/* Al acido: en gris estaban en 3.82:1 sobre el negro del pie, por debajo
   del minimo de 4.5 para texto pequeno. El acido da 17.43:1 y ademas los
   convierte en la senal de orientacion de la seccion. */
.ft__h {
  margin: 0 0 0.35rem;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 0.64rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--rd-acido);
}

.ft__col a {
  font-family: "Neue Haas Text", "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
  font-size: clamp(0.92rem, 1.15vw, 1.02rem);
  color: rgba(244, 242, 237, 0.8);
  text-decoration: none;
  justify-self: start;
  transition: color 240ms ease;
}

.ft__col a:hover { color: var(--rd-acido); }
.ft__col a:focus-visible { outline: 2px solid var(--rd-acido); outline-offset: 3px; }

.ft__mail { font-weight: 400 !important; }

/* la ciudad: texto, no enlace, con la letra de los enlaces de al lado */
.ft__city {
  margin: 0;
  font-family: "Neue Haas Text", "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
  font-size: clamp(0.92rem, 1.15vw, 1.02rem);
  color: rgba(244, 242, 237, 0.8);
}

.ft__social {
  display: flex;
  gap: 0.9rem;
  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;
}

.ft__social a { display: block; line-height: 0; transition: transform 240ms ease; }
.ft__social a:hover { transform: scale(1.12) rotate(-4deg); }

/* Los iconos son mapa de bits con su propio color: ni fill ni opacidad,
   que apagarian el peluche. El estado de raton se hace con el tamano. */
.ft__social img {
  display: block;
  width: 26px;
  height: auto;
  -webkit-user-drag: none;
}

/* LinkedIn no tiene peluche y va de texto, alineado con los correos */
.ft__in-link {
  margin-top: 0.55rem;
  font-family: "Neue Haas Text", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.85rem;
  color: rgba(244, 242, 237, 0.8);
  text-decoration: none;
}

.ft__in-link:hover { color: var(--rd-acido); }

/* --- barra inferior --- */
.ft__bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: clamp(2.5rem, 6vh, 4rem);
  padding-top: 1.2rem;
  border-top: 1px solid rgba(244, 242, 237, 0.14);
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: #82807a;
}

/* Los enlaces legales quedan en medio de la barra: el copyright a la
   izquierda y el volver arriba a la derecha ya estaban, y space-between
   reparte los tres solo. Heredan tamano y color de .ft__bar; lo unico
   propio es el subrayado, que solo aparece al pasar por encima para que
   no compitan con el resto del pie. */
.ft__legalnav {
  display: flex;
  gap: 1.4rem;
  flex-wrap: wrap;
}

.ft__legalnav a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 200ms, border-color 200ms;
}

.ft__legalnav a:hover,
.ft__legalnav a:focus-visible {
  color: #f4f2ed;
  border-bottom-color: #f4f2ed;
}

.ft__legal { margin: 0; }

.ft__top {
  padding: 0;
  border: 0;
  background: transparent;
  color: #82807a;
  font: inherit;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: color 240ms ease;
}

.ft__top:hover { color: var(--rd-acido); }
.ft__top:focus-visible { outline: 2px solid var(--rd-acido); outline-offset: 3px; }

/* --- la firma ---
   Recortada por el borde inferior a proposito: se lee como un sello, no
   como un logotipo centrado. El margen negativo es en em del propio
   ancho, asi que el recorte se mantiene proporcional en cualquier
   pantalla. */
/* La firma de abajo: sangra por el borde inferior, recortada.

   Baja de 1180px a 780. El logotipo de antes era el CONTORNO de graffiti y
   a ancho completo pesaba poco; el del rediseno es macizo y a ese tamano
   se comia la seccion entera: ocupaba mas alto que las tres frases, los
   dos bloques de enlaces y la barra legal juntos. Una firma no puede
   pesar mas que lo que firma.

   El margen inferior negativo es una fraccion del MISMO ancho, asi que el
   recorte se mantiene igual de proporcionado cuando la caja se encoge. */
.ft__mark {
  display: block;
  width: min(88%, 780px);
  height: auto;   /* con width/height en el HTML, sin esto no escala */
  margin: clamp(2rem, 5vh, 3.5rem) auto calc(-1 * min(88%, 780px) * 0.1);
  opacity: 0.92;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 860px) {
  .ft__grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .ft__bar { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ft__col a, .ft__social a, .ft__top { transition: none; }
}

/* Aqui no hay Neue Haas Text a 300: el navegador pedia la Light de la
   letra de respaldo solo para las vocales con acento (Conócenos, Cancún)
   y se veian de otro grueso. A 400 se usa la misma cara de la pagina. */
.ft__col a, .ft__city { font-weight: 400; }

@media (pointer: coarse) {
  .ft__col a, .ft__in-link { padding: 0.4rem 0; margin: -0.4rem 0; }
  .ft__social a { padding: 0.5rem; margin: -0.5rem; }
  .ft__top, .ft__legalnav a { padding: 0.55rem 0; }
}

/* --- entradas: se revelan al entrar en pantalla (IntersectionObserver),
   nunca con posiciones calculadas al cargar. Sin JS se ve todo. --- */
html.js [data-entra] { opacity: 0; transform: translateY(26px); transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1); transition-delay: calc(var(--orden, 0) * 80ms); }
html.js [data-entra].is-dentro { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .jv-cap { grid-template-columns: 1fr; }
  .jv-cap--inv .jv-cap__img { order: 0; }
  .jv-mas { grid-template-columns: 1fr; }
  .jv-control__reglas { grid-template-columns: 1fr; }
  .jv-pasos ol { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .jv-pasos ol { grid-template-columns: 1fr; }
  .jv-btn { width: 100%; justify-content: center; }
}
/* Vertical: portada y video 9:16 con el cerebro ya arriba del texto. */
@media (max-aspect-ratio: 4/5) {
  .jv-hero__fondo img, .jv-hero__fondo video { object-position: 50% 50%; }
  /* El titular cae sobre la mitad baja del cerebro: ahi se oscurece antes
     y el cerebro queda limpio arriba. */
  .jv-hero::after {
    background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 14%, rgba(0,0,0,0) 30%, rgba(0,0,0,.62) 50%, rgba(0,0,0,.9) 72%, rgba(0,0,0,.94) 100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  html.js [data-entra] { opacity: 1; transform: none; transition: none; }
  .jv-hero__fondo video, .jv-cap__img video { display: none; }
}

/* Con ODD OS y JARVIS en el menu (5 nov 2026), entre 1181 y 1520px los
   iconos de redes se salian por la derecha. En ese tramo la barra los
   suelta: siguen en el pie y en el menu recogido. */
@media (min-width: 1181px) and (max-width: 1520px) {
  .nav__right > .social { display: none; }
}

/* El idioma que no esta activo quedaba en 4.42:1 sobre negro (pide 4.5). */
.nav__lang button { opacity: 0.62; }
.nav__lang button[aria-pressed="true"] { opacity: 1; }