/* ===== Landing DRONI — misma línea visual que las landings de CLEMEN y PENTUS ===== */
:root {
  --bg: #fafafa;
  --bg-card: #ffffff;
  --ink: #1d1d1f;
  --ink-soft: #515154;
  --accent: #f7a000;      /* ámbar de la silicona del DRONI */
  --accent-ink: #b06a00;  /* ámbar oscuro para texto sobre fondo claro */
  --dark: #0a0a0c;
  --dark-ink: #f5f5f7;
  --dark-soft: #a1a1a6;
  --radius: 28px;
  --maxw: 1100px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }

/* ===== Nav ===== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px;
  background: rgba(250, 250, 250, .72);
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  border-bottom: 1px solid rgba(0, 0, 0, .06);
}
.nav .brand {
  font-weight: 800; letter-spacing: .14em; font-size: 15px;
  color: var(--ink); text-decoration: none;
}
.nav .brand span { color: var(--accent); }
.nav .links { display: flex; gap: 26px; }
.nav .links a {
  color: var(--ink-soft); text-decoration: none; font-size: 13.5px; font-weight: 500;
  transition: color .2s;
}
.nav .links a:hover { color: var(--ink); }

/* ===== Escena 3D con scroll (hero incluido) ===== */
.scroll3d { position: relative; height: 520vh; }
.scroll3d .sticky {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 30%, #ffffff 0%, #f2f2f4 55%, #e8e8ec 100%);
}
#three-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
#oscurece {
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(120% 90% at 50% 30%, #1a1a20 0%, #0c0c10 60%, #060608 100%);
  opacity: 0;
}
#poster3d {
  position: absolute; inset: 0; margin: auto;
  height: 86%; width: auto; object-fit: contain;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.18));
  transition: opacity .8s ease;
}
#poster3d.oculto { opacity: 0; pointer-events: none; }

/* Scrim: degradados del color de fondo arriba y abajo (transparentes en el
   centro) que garantizan contraste del texto sobre las partes negras del
   DRONI y su base. Dos capas: la clara para el día y la oscura para la escena nocturna. */
.scrim {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  /* Alto de cada banda velada. viewer.js las mueve según dónde esté el texto
     en cada momento, para no velar el DRONI donde no hace falta. */
  --scrim-top: 24%;
  --scrim-bottom: 32%;
}
#scrim-dia {
  background:
    linear-gradient(to bottom,
      #f7f7f9 0%,
      rgba(247,247,249,.92) calc(var(--scrim-top) * .55),
      rgba(247,247,249,0)   var(--scrim-top)),
    linear-gradient(to top,
      #f5f5f8 0%,
      rgba(245,245,248,.92) calc(var(--scrim-bottom) * .55),
      rgba(245,245,248,0)   var(--scrim-bottom));
  opacity: .6;
}
#scrim-noche {
  background:
    linear-gradient(to bottom,
      #08080b 0%,
      rgba(8,8,11,.92) calc(var(--scrim-top) * .55),
      rgba(8,8,11,0)   var(--scrim-top)),
    linear-gradient(to top,
      #08080b 0%,
      rgba(8,8,11,.94) calc(var(--scrim-bottom) * .55),
      rgba(8,8,11,0)   var(--scrim-bottom));
  opacity: 0;
}

/* Textos superpuestos de la secuencia */
.k-text {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: min(92vw, 900px); text-align: center;
  opacity: 0; pointer-events: none; z-index: 5;
  transition: none;
}
.k-text.hero-text { top: 14vh; }
/* En escritorio el DRONI (ancho y plano) va a la derecha y el título a la
   izquierda, alineado. */
@media (min-width: 861px) {
  .k-text.hero-text {
    top: 50%; left: max(6vw, calc((100vw - 1240px) / 2));
    transform: translateY(-50%); text-align: left; width: min(46vw, 620px);
  }
  .k-text.hero-text h1 { font-size: clamp(48px, 6.4vw, 92px); }
}
.k-text.abajo { bottom: 9vh; }
.k-text.arriba { top: 6vh; }
.k-text .sub, .k-text .mini { text-shadow: 0 1px 12px rgba(250,250,250,.9); }
.k-text h1 {
  font-size: clamp(44px, 9vw, 104px);
  font-weight: 800; letter-spacing: -0.03em; line-height: 1.02;
}
.k-text h1 .acento { color: var(--accent); }
.k-text .sub {
  margin-top: 18px; font-size: clamp(16px, 2.4vw, 22px);
  color: var(--ink-soft); font-weight: 500;
}
.k-text h2 {
  font-size: clamp(30px, 5.4vw, 60px);
  font-weight: 800; letter-spacing: -0.025em; line-height: 1.06;
  text-shadow: 0 2px 24px rgba(250,250,250,.85);
}
.k-text .mini {
  margin-top: 10px; font-size: clamp(14px, 1.9vw, 18px);
  color: var(--ink-soft); font-weight: 500;
}
.k-text.clara h2 { color: var(--dark-ink); text-shadow: 0 2px 24px rgba(0,0,0,.75); }
.k-text.clara .mini { color: var(--dark-soft); text-shadow: 0 1px 12px rgba(0,0,0,.75); }
.scroll-hint {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  z-index: 6; color: var(--ink-soft); font-size: 12.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  animation: flotar 2.2s ease-in-out infinite;
}
@keyframes flotar {
  0%, 100% { transform: translate(-50%, 0); opacity: .85; }
  50% { transform: translate(-50%, 8px); opacity: .4; }
}
.scroll-hint.oculto { animation: none; opacity: 0; transition: opacity .4s; }

/* ===== En movimiento (animaciones 3D) ===== */
.movimiento { padding: 120px 24px 20px; }
.movimiento .inner { max-width: var(--maxw); margin: 0 auto; }
.movimiento h2 {
  font-size: clamp(34px, 5.4vw, 60px); font-weight: 800;
  letter-spacing: -0.028em; line-height: 1.05; text-align: center; margin-bottom: 16px;
}
.movimiento h2 .acento { color: var(--accent); }
.movimiento .lead {
  text-align: center; color: var(--ink-soft); font-size: clamp(16px, 2vw, 20px);
  line-height: 1.55; max-width: 58ch; margin: 0 auto 60px;
}
.anim-card {
  display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(26px, 5vw, 64px);
  align-items: center; margin-bottom: 90px;
}
.anim-card.invertida .anim-stage { order: 2; }
.anim-stage {
  position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius); overflow: hidden;
  background: radial-gradient(120% 100% at 50% 30%, #ffffff 0%, #f0f0f3 60%, #e6e6eb 100%);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .10);
}
.anim-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .8s ease; }
.anim-stage.listo canvas { opacity: 1; }
.anim-copy .kicker {
  color: var(--accent-ink); font-weight: 700; font-size: 14px;
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px;
}
.anim-copy h3 {
  font-size: clamp(28px, 3.6vw, 42px); font-weight: 800;
  letter-spacing: -0.025em; line-height: 1.08; margin-bottom: 16px;
}
.anim-copy p { font-size: clamp(16px, 1.8vw, 18px); line-height: 1.55; color: var(--ink-soft); }
.anim-copy .nota, .feature .copy .nota { margin-top: 14px; font-size: 13.5px; color: #86868b; font-style: italic; }

/* ===== Secciones de características ===== */
.features { padding: 110px 24px 40px; }
.feature {
  max-width: var(--maxw); margin: 0 auto 120px;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 90px);
  align-items: center;
}
.feature.invertida .media { order: 2; }
.feature .copy .kicker {
  color: var(--accent-ink); font-weight: 700; font-size: 14px;
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px;
}
.feature .copy h2 {
  font-size: clamp(32px, 4.6vw, 52px);
  font-weight: 800; letter-spacing: -0.025em; line-height: 1.06;
  margin-bottom: 18px;
}
.feature .copy p {
  font-size: clamp(16px, 1.9vw, 19px); line-height: 1.55;
  color: var(--ink-soft); max-width: 46ch;
}
.media {
  border-radius: var(--radius); overflow: hidden;
  background: radial-gradient(110% 110% at 50% 22%, #ffffff 0%, #f0f0f3 58%, #e2e2e8 100%);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .10);
}
.media.r34 { aspect-ratio: 3 / 4; }
.media.r11 { aspect-ratio: 1 / 1; }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media.oscura { background: radial-gradient(110% 110% at 50% 25%, #2c2c31 0%, #161619 60%, #0a0a0c 100%); }

/* Reveal al hacer scroll */
.rev { opacity: 0; transform: translateY(46px); transition: opacity .9s cubic-bezier(.2,.65,.25,1), transform .9s cubic-bezier(.2,.65,.25,1); }
.rev.visible { opacity: 1; transform: none; }

/* ===== Sección oscura: specs ===== */
.specs { background: var(--dark); color: var(--dark-ink); padding: 130px 24px; }
.specs .inner { max-width: var(--maxw); margin: 0 auto; }
.specs h2 {
  font-size: clamp(34px, 5.4vw, 64px); font-weight: 800;
  letter-spacing: -0.028em; line-height: 1.05; text-align: center;
  margin-bottom: 14px;
}
.specs .lead {
  text-align: center; color: var(--dark-soft); font-size: clamp(16px, 2vw, 20px);
  max-width: 62ch; margin: 0 auto 70px;
}
.specs h2 .acento { color: var(--accent); }
.grid-specs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.spec-card {
  background: #17171a; border: 1px solid #26262b;
  border-radius: 20px; padding: 28px 24px;
}
.spec-card h3 { font-size: 19px; font-weight: 700; margin-bottom: 8px; letter-spacing: -0.01em; }
.spec-card h3 em { color: var(--accent); font-style: normal; }
.spec-card p { color: var(--dark-soft); font-size: 14.5px; line-height: 1.5; }

/* ===== Pantallas (strip de caras, formato 6:5 como la pantalla real) ===== */
.pantallas { background: var(--dark); color: var(--dark-ink); padding: 0 24px 140px; }
.pantallas .inner { max-width: var(--maxw); margin: 0 auto; text-align: center; }
.pantallas h2 {
  font-size: clamp(28px, 4vw, 46px); font-weight: 800; letter-spacing: -0.025em;
  margin-bottom: 12px;
}
.pantallas .lead { color: var(--dark-soft); font-size: 17px; margin-bottom: 50px; }
.strip {
  display: flex; gap: 22px; overflow-x: auto; padding: 10px 6px 26px;
  scrollbar-width: thin; scrollbar-color: #333 transparent;
  justify-content: safe center;
}
.strip .disco {
  flex: 0 0 auto; width: 150px; height: 125px; border-radius: 22px;
  overflow: hidden; border: 5px solid #f7a000; background: #000;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  transition: transform .3s ease, border-color .3s ease;
}
.strip .disco:hover { transform: scale(1.1); border-color: #ffc14d; }
.strip .disco img { width: 100%; height: 100%; object-fit: cover; }
.strip-cap { color: #6e6e73; font-size: 13px; margin-top: 6px; }

/* ===== Estado del proyecto (hoja de ruta) ===== */
.estado { padding: 130px 24px 40px; }
.estado .inner { max-width: var(--maxw); margin: 0 auto; }
.estado h2, .participa h2 {
  font-size: clamp(34px, 5.4vw, 60px); font-weight: 800;
  letter-spacing: -0.028em; line-height: 1.05; text-align: center; margin-bottom: 16px;
}
.estado .lead {
  text-align: center; color: var(--ink-soft); font-size: clamp(16px, 2vw, 20px);
  line-height: 1.55; max-width: 60ch; margin: 0 auto 64px;
}
.ruta {
  list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  position: relative;
}
.ruta li {
  background: var(--bg-card); border-radius: 22px; padding: 26px 22px 28px;
  box-shadow: 0 14px 40px rgba(0,0,0,.07); border: 1px solid rgba(0,0,0,.05);
}
.ruta .cuando {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-soft);
  background: #f0f0f3; border-radius: 999px; padding: 5px 12px; margin-bottom: 16px;
}
.ruta li.actual .cuando { background: var(--accent); color: #1d1d1f; }
.ruta h3 { font-size: 20px; font-weight: 800; letter-spacing: -0.015em; margin-bottom: 8px; }
.ruta p { color: var(--ink-soft); font-size: 15px; line-height: 1.5; }

/* ===== Para quién + aportes ===== */
.participa { padding: 110px 24px 20px; }
.participa .inner { max-width: var(--maxw); margin: 0 auto; }
.participa h2 { margin-bottom: 54px; }
.participa h2 .acento, .estado h2 .acento { color: var(--accent); }
.grid-para { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.para-card {
  border-radius: 22px; padding: 28px 22px;
  background: radial-gradient(120% 120% at 20% 0%, #ffffff 0%, #f3f3f5 100%);
  border: 1px solid rgba(0,0,0,.06);
}
.para-card .num { font-weight: 800; color: var(--accent); font-size: 15px; letter-spacing: .1em; margin-bottom: 18px; }
.para-card h3 { font-size: 20px; font-weight: 800; letter-spacing: -0.015em; margin-bottom: 8px; }
.para-card p { color: var(--ink-soft); font-size: 15px; line-height: 1.5; }
.aportes { margin-top: 46px; text-align: center; }
.aportes p { color: var(--ink-soft); font-weight: 600; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 16px; }
.aportes ul { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.aportes li {
  font-weight: 700; font-size: 17px; padding: 12px 24px; border-radius: 999px;
  background: var(--dark); color: var(--dark-ink);
}

/* ===== Cita del podcast ===== */
.cita { padding: 120px 24px; background: linear-gradient(180deg, #fafafa 0%, #fff6e6 50%, #fafafa 100%); }
.cita .inner { max-width: 900px; margin: 0 auto; text-align: center; }
.cita blockquote {
  font-size: clamp(30px, 4.8vw, 56px); font-weight: 800; letter-spacing: -0.028em;
  line-height: 1.12; color: var(--ink);
}
.cita blockquote::before {
  content: ''; display: block; width: 64px; height: 6px; border-radius: 3px;
  background: var(--accent); margin: 0 auto 34px;
}
.cita .fuente { margin-top: 26px; color: var(--ink-soft); font-size: 15.5px; line-height: 1.6; }

/* ===== Con cuidado / Familia de proyectos (tarjetas como .participa) ===== */
.cuidado, .familia { padding: 110px 24px 20px; }
.cuidado .inner, .familia .inner { max-width: var(--maxw); margin: 0 auto; }
.cuidado h2, .familia h2 {
  font-size: clamp(34px, 5.4vw, 60px); font-weight: 800;
  letter-spacing: -0.028em; line-height: 1.05; text-align: center; margin-bottom: 16px;
}
.cuidado h2 .acento, .familia h2 .acento { color: var(--accent); }
.cuidado .lead, .familia .lead, .participa .lead {
  text-align: center; color: var(--ink-soft); font-size: clamp(16px, 2vw, 20px);
  line-height: 1.55; max-width: 60ch; margin: 0 auto 54px;
}
.participa h2 + .lead { margin-top: -38px; }
.familia { padding-bottom: 40px; }
.familia .para-card .num { letter-spacing: .14em; font-size: 13px; }
.familia .para-card { background: radial-gradient(120% 120% at 20% 0%, #fffaf0 0%, #f6f1e8 100%); }

/* ===== CTA final ===== */
.cta { padding: 140px 24px 80px; }
.cta .inner {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(30px, 6vw, 80px);
  align-items: center;
}
.cta h2 {
  font-size: clamp(36px, 5.6vw, 66px); font-weight: 800;
  letter-spacing: -0.028em; line-height: 1.04; margin-bottom: 22px;
}
.cta h2 .acento { color: var(--accent); }
.cta p {
  font-size: clamp(16px, 2vw, 20px); color: var(--ink-soft);
  line-height: 1.55; max-width: 52ch; margin-bottom: 34px;
}
.btn {
  display: inline-block; background: var(--accent); color: #1d1d1f;
  font-weight: 700; font-size: 17px; padding: 15px 34px;
  border-radius: 999px; text-decoration: none;
  box-shadow: 0 12px 30px rgba(245, 163, 0, .35);
  transition: transform .25s ease, box-shadow .25s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(245, 163, 0, .45); }
.cta .media { max-width: 420px; margin: 0 auto; }
.cta .pasos {
  font-size: 16px; background: #fff; border-left: 4px solid var(--accent);
  padding: 16px 20px; border-radius: 0 14px 14px 0; box-shadow: 0 8px 26px rgba(0,0,0,.06);
}
.cta .cta-links { font-size: 15px; line-height: 1.8; margin: 20px 0 0; }
.cta .cta-links a { color: var(--accent-ink); font-weight: 600; text-decoration: none; }
.cta .cta-links a:hover { text-decoration: underline; }

/* ===== Footer ===== */
footer {
  border-top: 1px solid rgba(0,0,0,.08);
  padding: 34px 24px 44px; text-align: center;
  color: var(--ink-soft); font-size: 13.5px;
}
footer b { letter-spacing: .1em; }
footer b span { color: var(--accent); }
footer a { color: var(--accent-ink); text-decoration: none; }
footer a:hover { text-decoration: underline; }

/* ===== Responsive ===== */
@media (max-width: 860px) {
  /* En pantallas angostas el velo es opaco para tapar el negro de la base y
     el paragolpes bajo el texto (viewer.js ajusta su alto). */
  #scrim-dia { opacity: 1; }
  .k-text { width: 90vw; }
  .k-text.hero-text { top: 11vh; }
  .k-text.abajo { bottom: 7vh; }
  .k-text.arriba { top: 9vh; }
  .k-text h1 { font-size: clamp(38px, 11vw, 60px); }
  .k-text h2 { font-size: clamp(27px, 8vw, 40px); }
  .k-text .sub { margin-top: 14px; font-size: 16px; }
  .k-text .mini { font-size: 15px; }

  .nav .links { display: none; }
  .feature { grid-template-columns: 1fr; gap: 26px; margin-bottom: 90px; }
  .feature.invertida .media { order: 0; }
  .grid-specs { grid-template-columns: 1fr 1fr; }
  .ruta, .grid-para { grid-template-columns: 1fr 1fr; }
  .cita { padding: 90px 24px; }
  .anim-card { grid-template-columns: 1fr; gap: 24px; margin-bottom: 70px; }
  .anim-card.invertida .anim-stage { order: 0; }
  .anim-stage { aspect-ratio: 4 / 3.4; }
  .cta .inner { grid-template-columns: 1fr; }
  .cta .media { max-width: 320px; }
}
@media (max-width: 540px) {
  .grid-specs { grid-template-columns: 1fr; }
  .ruta, .grid-para { grid-template-columns: 1fr; }
  .strip .disco { width: 120px; height: 100px; border-radius: 18px; }
}