:root {
      /* Valores extraídos del frame de Figma 1831 × 1616 px.
         El corte de las dos secciones está en y=808 px. */
      --fondo: #eeede7;
      --texto: #000000;
      --acento: #cc5002;
      --color-linea: var(--color-trazos);
      --grosor-lineas: 1px;
      --linea-inicio: 73.5vh;    /* línea más cerca del HERO centrado */
      --linea-fin: 118.812vh;    /* y=960/808 */
      --posicion-guia: 78;       /* punta a 78% del viewport */
    }

    *, *::before, *::after { box-sizing: border-box; }
    /* Lenis controla el desplazamiento; evitar doble suavizado CSS. */
    html { scroll-behavior: auto; }
    body {
      margin: 0;
      overflow-x: hidden;
      background: var(--fondo);
      color: var(--texto);
      font-family: 'Arimo', Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
    }
    a, button { -webkit-tap-highlight-color: transparent; }
    a { color: inherit; }
    button { font: inherit; }
    .pagina { position: relative; isolation: isolate; width: 100%; }

    /* Cortina de entrada: cubre todo antes de revelar el HERO. */
    .pantalla-entrada {
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100vh;
      height: 100dvh;
      z-index: 9999;
      background: #000;
      pointer-events: all;
      transform: translate3d(0,0,0);
      will-change: transform;
    }
    .pantalla-entrada[hidden] { display: none; }
    @media (prefers-reduced-motion: reduce) {
      .pantalla-entrada { display: none; }
    }

    /* Sección 01: 100vh. Layout en Flexbox. */
    .hero {
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
      min-height: 100vh;
      height: 100vh;
      width: 100%;
    }
    .navbar {
      position: absolute;
      top: 18px;
      left: 0;
      right: 0;
      z-index: 5;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-shrink: 0;
      width: 100%;
      height: 6.807vh;           /* 55 / 808 */
      margin-top: 0;
      padding-left: 1.8vw;
      padding-right: 1.8vw;
    }
    .marca { display: inline-flex; align-items: center; flex: 0 0 auto; text-decoration: none; }
    .marca img {
      display: block;
      width: 14.910vw;          /* logo exacto de Figma: 273 × 55 px */
      height: auto;
    }
    .navegacion { display: flex; align-items: center; gap: 2.568vw; }
    .menu-boton {
      border: 0;
      padding: 8px 0;
      background: none;
      color: var(--texto);
      font-size: 1.169vw;       /* Figma 21.413 px */
      letter-spacing: -0.03em;
      cursor: pointer;
    }
    .boton-borde {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      gap: 8px;
      width: 11.196vw;        /* 205 px */
      height: 6.436vh;         /* 52 px */
      border: var(--grosor-lineas) solid var(--texto);
      color: var(--texto);
      text-decoration: none;
      font-size: 1.169vw;
      line-height: 1;
      letter-spacing: -0.03em;
      /* Relleno circular que crece desde el centro sin cambiar dimensiones. */
      position: relative;
      isolation: isolate;
      overflow: hidden;
      background: transparent;
      transition: color .18s ease-out;
    }
    .boton-borde::before {
      content: '';
      position: absolute;
      left: 50%;
      top: 50%;
      width: 240%;
      aspect-ratio: 1 / 1;
      border-radius: 50%;
      z-index: -1;
      background: var(--texto);
      transform: translate(-50%, -50%) scale(0);
      transform-origin: center center;
      transition: transform .22s ease-out;
      pointer-events: none;
    }
    .boton-borde:hover::before,
    .boton-borde:focus-visible::before {
      transform: translate(-50%, -50%) scale(1);
      transition-duration: .82s;
      transition-timing-function: cubic-bezier(.3, 0, .25, 1);
    }
    .boton-borde:hover,
    .boton-borde:focus-visible { color: var(--fondo); transition-duration: .42s; }
    .boton-borde:hover img, .boton-borde:focus-visible img { filter: invert(1); transition-duration: .42s; }
    .boton-borde img { display: block; width: 1.42vw; height: auto; transition: filter .18s ease-out; }
    @media (prefers-reduced-motion: reduce) {
      .boton-borde::before { transition-duration: .01ms; }
      .boton-borde, .boton-borde img { transition-duration: .01ms; }
    }
    .menu-opciones {
      position: absolute;
      z-index: 10;
      top: calc(100% + 14px);
      right: 16.4vw;
      display: flex;
      flex-direction: column;
      min-width: 150px;
      padding: 13px 15px;
      border: 1px solid var(--texto);
      background: var(--fondo);
    }
    .menu-opciones[hidden] { display: none; }
    .menu-opciones a { padding: 8px; text-decoration: none; font-size: 14px; }
    .menu-opciones a:hover { color: var(--acento); }

    .hero-contenido {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      margin-top: 0; /* centrado real dentro de los 100vh del HERO */
      padding: 0 2vw;
      text-align: center;
    }
    .hero-titulo {
      width: 81.65vw;          /* 1495 / 1831 */
      max-width: none;
      margin: 0;
      font-size: 6.554vw;       /* 120 / 1831 */
      font-weight: 400;
      line-height: 0.85342;     /* 102.41 / 120 */
      letter-spacing: -0.04em; /* -4.8 px @ 120px */
    }
    .hero-titulo .renglon { display: block; white-space: nowrap; }
    .hero-titulo em {
      color: var(--acento);
      font-style: italic;
      font-weight: 400;
      letter-spacing: -0.08em; /* -9.6 px @ 120px */
    }

    /* Sección 02: 100vh. La jerarquía y los espacios vienen de Figma. */
    .manifiesto {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      height: 100vh;
      padding: 27.228vh 20px 0;
      text-align: center;
    }
    .manifiesto-titulo {
      width: 54.342vw;         /* 995 / 1831 */
      max-width: 100%;
      margin: 0;
      font-size: 2.4588vw;     /* 45 / 1831 */
      font-weight: 400;
      line-height: 1.02222;    /* 46 / 45 */
      letter-spacing: 0.01em;  /* 0.45 / 45 */
    }
    .manifiesto-parrafo {
      width: 46.423vw;         /* 850 / 1831 */
      max-width: 100%;
      margin: 4vh 0 0;         /* menor separación visual con el título */
      font-family: Arial, sans-serif;
      font-size: 1.0923vw;     /* 20 / 1831 */
      line-height: 1.45;       /* 29 / 20 */
      letter-spacing: 0.01em;
    }
    .manifiesto-boton {
      width: auto;
      padding-left: 2.2vw;
      padding-right: 2.2vw;
      margin-top: 5.074vh;     /* ajustado a la altura de párrafo de Figma */
      font-size: 1.169vw;
      letter-spacing: -0.01em;
    }

    /* UNA SOLA LÍNEA. Ocupa y=648–960 del frame original, y atraviesa
       el límite de ambas secciones en y=808 sin ninguna interrupción. */
    .linea-guia {
      position: absolute;
      z-index: 1;
      top: var(--linea-inicio);
      left: 50%;
      width: var(--grosor-lineas);
      height: calc(var(--linea-fin) - var(--linea-inicio));
      transform: translateX(-50%);
      pointer-events: none;
    }
    .linea-trazo {
      width: 100%;
      height: 0%;
      background: var(--color-linea);
    }

    /* El logo, el menú y contacto permanecen ocultos hasta terminar el HERO. */
    .js .navbar:not(.navbar-lista) .marca,
    .js .navbar:not(.navbar-lista) .menu-boton,
    .js .navbar:not(.navbar-lista) .navegacion > .boton-borde { opacity: 0; }
    .js .navbar .marca, .js .navbar .menu-boton,
    .js .navbar .navegacion > .boton-borde { will-change: opacity; }


    /* Masked Text Reveal. La tipografía y geometría de Figma se mantienen.
       Primero escondemos todo el h1 para impedir un flash de texto sin máscara.
       JS monta las máscaras y entonces deja visible su contenedor. */
    .js .hero-titulo { visibility: hidden; }
    .js .hero-titulo.mascara-lista { visibility: visible; }
    /* No recortar el renglón completo: con line-height editorial muy cerrado
       se cortarían ascendentes y descendentes durante el reveal. */
    .hero-titulo.en-revelado .renglon { overflow: visible; }
    .hero-titulo.en-revelado .palabra-mascara {
      display: inline-block;
      overflow: hidden;
      /* Aire interno de la máscara sin alterar el flujo ni la altura final. */
      padding-top: .22em;
      padding-bottom: .30em;
      margin-top: -.22em;
      margin-bottom: -.30em;
      vertical-align: baseline;
      white-space: nowrap;
    }
    /* La cursiva de «conecte» sobresale del advance de su última letra.
       El espacio extra evita cortar la e y se compensa para no alterar el tracking. */
    .hero-titulo.en-revelado em .palabra-mascara {
      padding-right: .34em;
      margin-right: -.34em;
    }
    .hero-titulo.en-revelado .palabra-contenido {
      display: inline-block;
      transform: translate3d(0, 130%, 0);
      visibility: hidden; /* Nada asoma antes de su turno de entrada. */
      will-change: transform;
    }

    /* Cursor editorial: círculo naranja, únicamente para mouse/trackpad. */
    .cursor-naranja {
      position: fixed;
      top: 0;
      left: 0;
      width: 23px;
      height: 23px;
      border-radius: 50%;
      background: var(--acento);
      pointer-events: none;
      z-index: 10001;
      opacity: 0;
      transform: translate3d(-50px, -50px, 0);
      transition: opacity .14s ease;
      will-change: transform;
    }
    .cursor-naranja.visible { opacity: 1; }
    @media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
      .cursor-naranja { display: none !important; }
    }

    .palabra-manifiesto { opacity: 0; }

    /* El scroll únicamente dispara la secuencia; no determina su duración. */
    .js [data-revelar] {
      opacity: 0;
      transform: translateY(22px);
      will-change: opacity, transform;
    }

    /* Adaptaciones para pantallas medianas. Sin Grid, sin clamp(). */
    @media (max-width: 1050px) {
      .marca img { width: 173px; }
      .navbar { height: 54px; }
      .menu-boton, .boton-borde { font-size: 13px; }
      .navegacion { gap: 25px; }
      .boton-borde { width: 132px; height: 38px; }
      .boton-borde img { width: 18px; }
      .manifiesto-titulo { font-size: 28px; width: 620px; }
      .manifiesto-parrafo { font-size: 13px; width: 540px; }
      .manifiesto-boton { width: auto; padding-left: 28px; padding-right: 28px; }
    }
    @media (max-width: 680px) {
      .navbar { top: 12px; margin-top: 0; height: 42px; padding: 0 12px; }
      .marca img { width: 132px; }
      .navegacion { gap: 15px; }
      .menu-boton { font-size: 11px; }
      .boton-borde { width: 100px; height: 31px; font-size: 11px; gap: 3px; }
      .boton-borde img { width: 14px; }
      .menu-opciones { right: 122px; }
      .hero-contenido { margin-top: 0; padding: 0 14px; }
      .hero-titulo { width: 100%; font-size: 8.5vw; line-height: .98; letter-spacing: -.054em; }
      .hero-titulo .renglon { white-space: normal; }
      .hero-titulo em { letter-spacing: -.07em; }
      .manifiesto { padding: 26vh 18px 0; }
      .manifiesto-titulo { width: 100%; max-width: 360px; font-size: 22px; line-height: 1.12; }
      .manifiesto-parrafo { width: 100%; max-width: 340px; font-size: 11px; line-height: 1.36; margin-top: 3.5vh; }
      .manifiesto-boton { margin-top: 4.2vh; width: auto; padding-left: 22px; padding-right: 22px; height: 36px; font-size: 11px; }
      .manifiesto-boton img { width: 14px; }
    }
    @media (max-width: 420px) {
      .hero-titulo { font-size: 9vw; }
      .hero-contenido { margin-top: 0; }
      .manifiesto { padding-top: 25vh; }
      .manifiesto-titulo { font-size: 20px; max-width: 315px; }
      .manifiesto-parrafo { max-width: 315px; font-size: 10.5px; margin-top: 3vh; }
    }
    @media (max-height: 610px) and (max-width: 680px) {
      .hero-contenido { margin-top: 0; }
      .hero-titulo { font-size: 7vw; }
      .manifiesto { padding-top: 21vh; }
      .manifiesto-titulo { font-size: 17px; }
      .manifiesto-parrafo { margin-top: 3vh; font-size: 9px; }
      .manifiesto-boton { margin-top: 3vh; height: 31px; }
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .js [data-revelar] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
      }
      .js .hero-titulo { visibility: visible !important; }
      .hero-titulo .palabra-contenido { transform: none !important; }
      .js .navbar .marca, .js .navbar .menu-boton,
      .js .navbar .navegacion > .boton-borde { opacity: 1 !important; animation: none !important; }
    }

/* Invitación a seguir el mismo eje vertical que continúa hacia Manifiesto. */
.indicador-scroll {
  position: absolute;
  z-index: 3;
  top: var(--linea-inicio);
  left: 50%;
  display: flex;
  justify-content: center;
  width: var(--grosor-lineas);
  height: calc(100dvh - var(--linea-inicio));
  transform: translateX(-50%);
  opacity: 1;
  transition: opacity 350ms ease;
}
.indicador-scroll::after {
  content: '';
  position: absolute;
  inset: 0 -22px;
}
/* La invitación anima el trazo principal real, no una segunda línea. */
.invitacion-lista .linea-trazo.en-espera {
  --color-linea: var(--color-trazos);
  position: relative;
  transform: none !important;
  animation: invitacion-bajar 5.6s cubic-bezier(.37,0,.63,1) infinite;
}
.indicador-scroll:focus-visible { outline: 1px solid var(--acento); outline-offset: 4px; }
.indicador-scroll.indicador-scroll-oculto { opacity: 0; pointer-events: none; }
@keyframes invitacion-bajar {
  0% { height: 0%; opacity: 0; }
  8% { height: 1.5%; opacity: 1; }
  40%, 46% { height: calc(100dvh - var(--linea-inicio)); opacity: 1; }
  72%, 100% { height: calc(100dvh - var(--linea-inicio)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .indicador-scroll { transition: none; }
  .invitacion-lista .linea-trazo.en-espera { animation: none; height: 18%; opacity: 1; }
}