/* ============================================================================
   CONEKTADOS — Hoja de estilo del sitio
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  overflow-x: hidden;   /* nada debe desbordar de lado; todo se mueve con transform */
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--sans);
  font-size: var(--t-cuerpo);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--ambar); text-decoration: none; }
a:hover { color: var(--hueso); }
a:focus-visible,
button:focus-visible { outline: 2px solid var(--ambar); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 { font-family: var(--display); font-weight: 700; margin: 0; line-height: 1.06;
             letter-spacing: -.015em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }

.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--ambar); color: var(--indigo);
  padding: .8rem 1.2rem; border-radius: 0 0 var(--radio) 0; font-weight: 700;
}
.saltar:focus { left: 0; }

/* ------------------------------------------------------------------ piezas */
.envoltura { max-width: var(--ancho); margin-inline: auto; }

.etiqueta {
  font-size: var(--t-etiqueta); letter-spacing: .17em; text-transform: uppercase;
  color: var(--violeta); font-weight: 700; margin: 0 0 var(--e-2);
}
.regla { width: 4.2rem; height: 5px; background: var(--ambar); border: 0; margin: var(--e-3) 0; }

.boton, .cta {
  display: inline-block; border-radius: var(--pastilla);
  font-weight: 700; white-space: nowrap; text-decoration: none;
  background: var(--ambar); color: var(--indigo);
  padding: .95rem 1.7rem;
  transition: filter .15s ease;
}
.boton { padding: .78rem 1.5rem; font-size: var(--t-menor); }
.boton:hover, .cta:hover { color: var(--indigo); filter: brightness(1.07); }
.cta.secundaria {
  background: transparent; color: var(--texto);
  border: 1px solid var(--linea-fuerte, rgba(245,242,236,.32));
}
.cta.secundaria:hover { color: var(--texto); border-color: currentColor; }

/* ------------------------------------------------------------ navegación */
.nav {
  position: absolute; inset: 0 0 auto 0; z-index: 20;
  display: flex; align-items: center; min-height: 2rem;
  padding: 2.1rem var(--margen);
}
.marca {
  position: absolute; left: var(--margen); top: 1.7rem;
  height: 2rem; transform-origin: left top; will-change: transform;
}
.marca img { height: 100%; width: auto; }
.marca img + img { position: absolute; inset: 0; }
.enlaces { margin-left: auto; display: flex; gap: 2.2rem; align-items: center; }
.nav a:not(.boton) { color: var(--texto-suave); font-size: var(--t-menor); }
.nav a:not(.boton):hover { color: var(--texto); }

/* ================================================================= PORTADA */
.pista { height: 300vh; position: relative; }
.escena { position: sticky; top: 0; height: 100vh; overflow: hidden; }

/* --- fondo vivo --- */
.fondo { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.retic {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(245,242,236,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,242,236,.035) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(120% 90% at 70% 50%, #000 0%, transparent 72%);
}
.halo {
  position: absolute; inset: 0;
  background:
    radial-gradient(46% 58% at 71% 50%, rgba(122,111,240,.26), transparent 70%),
    radial-gradient(30% 40% at 20% 78%, rgba(255,193,69,.10), transparent 72%);
}
.ondas { position: absolute; left: 71%; top: 50%; width: 0; height: 0; }
.onda {
  position: absolute; left: 50%; top: 50%;
  width: 46vh; height: 46vh; margin: -23vh 0 0 -23vh;
  border: 1px solid rgba(122,111,240,.55); border-radius: 50%;
  animation: emitir 5.4s cubic-bezier(.2,.6,.3,1) infinite; opacity: 0;
}
@keyframes emitir {
  0%   { transform: scale(.34); opacity: 0; }
  12%  { opacity: .5; }
  100% { transform: scale(2.5); opacity: 0; }
}
.icono { position: absolute; bottom: -16vh; animation: subir linear infinite; opacity: 0; }
/* El brillo va en un hijo, porque la opacidad del padre ya la mueve la
   animación de subida. Multiplicadas, dan el destello del radar. */
.icono .luz { display: block; width: 100%; height: 100%; opacity: .3; }
.icono svg { width: 100%; height: 100%; }
@keyframes subir {
  0%   { transform: translate3d(0,0,0) rotate(-6deg); opacity: 0; }
  14%  { opacity: var(--tope); }
  82%  { opacity: var(--tope); }
  100% { transform: translate3d(var(--deriva), -118vh, 0) rotate(6deg); opacity: 0; }
}

/* --- el visor: la pantalla del móvil que acaba siendo la página --- */
.visor {
  position: absolute; top: 50%;
  overflow: hidden; border: solid #0B0A16; background: #F0EDE7;
  z-index: 2;
}
/* Reflejo al pasar el ratón, como si tocaras la pantalla. */
.brillo {
  position: absolute; inset: 0; z-index: 6; pointer-events: none;
  opacity: 0; transition: opacity .4s ease;
  background:
    radial-gradient(120% 70% at 30% -10%, rgba(245,242,236,.30), transparent 62%),
    linear-gradient(118deg, rgba(245,242,236,.14) 0%, transparent 44%);
}
.visor:hover .brillo, .visor-req:hover .brillo { opacity: 1; }

.app { position: absolute; inset: 0; z-index: 1; }
.app-cab {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  background: #F0EDE7;
  padding: calc(30px * var(--u)) calc(12px * var(--u)) calc(10px * var(--u));
  display: flex; align-items: flex-start; gap: calc(9px * var(--u));
}
.app-icono {
  width: calc(30px * var(--u)); height: calc(30px * var(--u)); flex: none;
  border-radius: calc(9px * var(--u)); background: #D9EDE4; display: grid; place-items: center;
}
.app-icono svg { width: 56%; height: 56%; fill: none; stroke: #1F6B52; stroke-width: 2; }
.app-tits { min-width: 0; }
.app-tit { font-size: calc(13.5px * var(--u)); font-weight: 700; color: var(--indigo); line-height: 1.12; }
.app-sub { font-size: calc(9.5px * var(--u)); color: rgba(38,32,99,.55); margin-top: calc(2px * var(--u)); line-height: 1.25; }
.app-ver {
  margin-left: auto; font-size: calc(8px * var(--u)); font-weight: 700; letter-spacing: .13em;
  color: rgba(38,32,99,.48); white-space: nowrap; padding-top: calc(4px * var(--u));
}

/* El marco del mapa: JS le mueve los cuatro lados hasta ocupar la ventana. */
.app-marco { position: absolute; overflow: hidden; }
.app-zoom {
  position: absolute; left: calc(7px * var(--u)); top: calc(7px * var(--u)); z-index: 4;
  display: grid; border-radius: calc(4px * var(--u)); overflow: hidden;
  border: 1px solid rgba(38,32,99,.28); background: #fff;
}
.app-zoom span {
  width: calc(18px * var(--u)); height: calc(18px * var(--u));
  display: grid; place-items: center; font-size: calc(13px * var(--u)); color: #444;
}
.app-zoom span + span { border-top: 1px solid rgba(38,32,99,.22); }
.app-full {
  position: absolute; right: calc(7px * var(--u)); top: calc(7px * var(--u)); z-index: 4;
  width: calc(20px * var(--u)); height: calc(20px * var(--u)); display: grid; place-items: center;
  background: #fff; border: 1px solid rgba(38,32,99,.28); border-radius: calc(4px * var(--u));
  font-size: calc(10px * var(--u)); color: #444;
}

.app-pie {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 3;
  background: #F0EDE7; padding: calc(9px * var(--u)) calc(12px * var(--u)) calc(12px * var(--u));
  display: flex; flex-wrap: wrap; gap: calc(5px * var(--u)); align-items: center;
}
.app-chip {
  display: inline-flex; align-items: center; gap: calc(5px * var(--u));
  font-size: calc(8.5px * var(--u)); color: rgba(38,32,99,.75);
  background: #F7F5F1; border: 1px solid rgba(38,32,99,.10);
  border-radius: var(--pastilla); padding: calc(4px * var(--u)) calc(8px * var(--u));
}
.app-chip i { width: calc(6px * var(--u)); height: calc(6px * var(--u)); border-radius: var(--pastilla); }
.app-ubic { margin-left: auto; font-size: calc(8.5px * var(--u)); color: rgba(38,32,99,.5); }

.capa { position: absolute; inset: 0; overflow: hidden; }
.lienzo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.lienzo img { width: 100%; height: 100%; object-fit: cover; }

/* Chinchetas: recurso visual sobre zonas pobladas reales, no coordenadas exactas. */
.pin {
  position: absolute; width: var(--pin); height: calc(var(--pin) * 1.33);
  transform: translate(-50%, -100%); filter: drop-shadow(0 2px 3px rgba(24,22,43,.32));
}
.pin svg { width: 100%; height: 100%; }
.pin .gota { fill: currentColor; }
.pin .glifo { fill: #fff; }
.sol { color: var(--ambar); }
.aco { color: var(--violeta); }
.viv { color: var(--cielo); }
.hos { color: var(--terracota); }
.tra { color: var(--salvia); }

.muesca {
  position: absolute; top: calc(6px * var(--u)); left: 50%; transform: translateX(-50%);
  width: 34%; height: calc(15px * var(--u)); border-radius: var(--pastilla);
  background: #0B0A16; z-index: 5;
}
.velo { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
#velo-claro {
  background:
    linear-gradient(to right, rgba(245,242,236,.96) 0%, rgba(245,242,236,.88) 24%,
                              rgba(245,242,236,.45) 40%, rgba(245,242,236,0) 56%),
    linear-gradient(to top,   rgba(245,242,236,.97) 0%, rgba(245,242,236,.78) 22%,
                              rgba(245,242,236,0) 50%);
}
.atribucion {
  position: absolute; right: 6px; bottom: 5px; z-index: 5; margin: 0;
  font-size: .62rem; color: rgba(24,22,43,.6);
  background: rgba(245,242,236,.75); padding: .15rem .45rem; border-radius: 4px;
}
.atribucion a { color: inherit; text-decoration: underline; }
.atr-app { font-size: calc(6.5px * var(--u)); right: calc(4px * var(--u)); bottom: calc(3px * var(--u)); }

.portada-texto {
  /* El color se vuelve a declarar aquí, dentro de la escena. Si se dejara
     heredar de body, resolvería --texto con el valor de :root y el titular
     se quedaría hueso sobre el velo hueso al invertirse la portada. */
  color: var(--texto);
  position: absolute; z-index: 5; left: 0; bottom: 0;
  padding: 0 var(--margen) clamp(2.5rem, 7vh, 5rem);
  width: min(42rem, 47vw);
}
.frases { position: relative; }
.frases h1 { font-size: var(--t-portada); }
.frases h1 + h1 { position: absolute; inset: 0; }
.pie-marca { font-size: var(--t-etiqueta); letter-spacing: .17em; text-transform: uppercase; color: var(--texto-suave); }
.explica { margin-top: var(--e-3); max-width: 40ch; color: var(--texto); opacity: .9; }
.acciones { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: var(--e-3); }
.leyenda { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: var(--e-2); }
.chip {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--chip-fondo, rgba(245,242,236,.10));
  border: 1px solid var(--linea-fuerte, rgba(245,242,236,.32));
  color: var(--texto); padding: .4rem .8rem; border-radius: var(--pastilla); font-size: .77rem;
}
.punto { width: .56rem; height: .56rem; border-radius: var(--pastilla); flex: none; }
.aviso {
  position: absolute; z-index: 6; right: var(--margen); bottom: clamp(2.5rem, 7vh, 5rem);
  font-size: var(--t-etiqueta); letter-spacing: .17em; text-transform: uppercase; color: var(--texto-suave);
}

/* ==================================================================== actos */
.acto { position: relative; }
.acto .fija { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.acto-titulo { font-size: var(--t-titular); max-width: 17ch; }
.acto-texto { max-width: 40ch; margin-top: var(--e-3); color: var(--texto-suave); }

/* --- acto 2: la tragedia --- */
#acto-tragedia { height: 280vh; }
.tragedia-texto {
  position: absolute; left: var(--margen); top: 50%;
  transform: translateY(calc(-50% + var(--sube, 0px)));
  z-index: 3; width: min(34rem, 45vw); opacity: 0;
}
.marca-linea { display: inline-block; height: 1.02em; width: auto; vertical-align: -.13em; }
.conduce { margin-top: var(--e-4); color: var(--ambar); }

.visor-req {
  position: absolute; right: 9vw; top: 50%; opacity: 0;
  width: min(292px, 27vw); aspect-ratio: 9 / 19.5;
  border: 9px solid #0B0A16; border-radius: 40px; background: var(--hueso);
  overflow: hidden; z-index: 2; will-change: transform, opacity;
  box-shadow: 0 42px 90px rgba(0,0,0,.62), 0 0 0 1px rgba(245,242,236,.07);
}
.muesca-req {
  position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  width: 34%; height: 18px; border-radius: var(--pastilla); background: #0B0A16; z-index: 4;
}
.tel-lienzo { position: absolute; inset: 0; overflow: hidden; }
.tarjeta {
  position: absolute; left: 12px; right: 12px; top: 46px;
  background: #FBFAF7; border-radius: 18px; padding: 16px 15px 15px;
  box-shadow: 0 2px 10px rgba(38,32,99,.08);
  color: var(--indigo); font-size: 15px; line-height: 1.4;
  will-change: transform;
}
.tarjeta .marcas { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.marca-pil { font-size: 11px; font-weight: 700; letter-spacing: .06em;
             padding: 4px 9px; border-radius: var(--pastilla); white-space: nowrap; }
.pil-alta { background: #FBE8DE; color: #B3502F; }
.pil-camino { background: #DCEDF5; color: #2E6E8C; }
.pil-tipo { color: rgba(38,32,99,.5); font-weight: 700; font-size: 11px; letter-spacing: .06em; }
.tarjeta h4 { font-family: var(--sans); font-size: 17px; line-height: 1.25; margin: 11px 0 12px; font-weight: 700; }
.dato { display: flex; gap: 8px; margin-top: 10px; }
.dato svg { width: 15px; height: 15px; flex: none; margin-top: 3px; color: rgba(38,32,99,.55); }
.dato b { font-weight: 600; }
.dato small { display: block; color: rgba(38,32,99,.55); font-size: 13px; margin-top: 2px; }
.tarjeta .accion {
  display: block; text-align: center; margin-top: 14px; padding: 12px;
  border-radius: 12px; font-weight: 700; font-size: 14.5px; background: #D33B52; color: #fff;
}
.tarjeta .accion.suave { background: transparent; color: #D33B52; border: 1px solid #F2C4CC; margin-top: 8px; }

/* --- acto 3: la red y lo que hay dentro --- */
#acto-red { height: 520vh; }
#red { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.red-texto {
  position: absolute; left: var(--margen); bottom: clamp(2.5rem, 8vh, 5rem);
  z-index: 3; width: min(25rem, 33vw);
}
.burbujas { position: absolute; inset: 0; z-index: 2; }
.burbuja {
  position: absolute; width: min(15.5rem, 40vw);
  background: rgba(30, 25, 66, .72); border: 1px solid var(--linea);
  border-radius: var(--radio-l); padding: var(--e-3);
  backdrop-filter: blur(10px);
  opacity: 0; transform: translateY(24px) scale(.93);
  will-change: transform, opacity;
}
.burbuja svg { width: 1.9rem; height: 1.9rem; color: var(--ambar); }
.burbuja h3 { font-family: var(--sans); font-size: 1rem; font-weight: 700; letter-spacing: 0; margin: .7rem 0 .3rem; }
.burbuja p { font-size: var(--t-menor); color: var(--texto-suave); line-height: 1.45; }

@media (max-width: 860px) {
  .tragedia-texto { position: absolute; top: auto; bottom: clamp(2rem, 6vh, 4rem);
                    transform: none; width: auto; right: var(--margen); }
  .visor-req { right: 50%; transform: translate(50%, -50%); width: min(220px, 56vw); }
  .red-texto { width: auto; right: var(--margen); bottom: auto; top: 14vh; }
  .burbuja { width: min(15rem, 78vw); }
}

/* ================================================================ secciones */
/* Las dos marcas, de la mano: la de la app y la de la fundación que la sostiene. */
.alianza {
  display: flex; align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem);
  flex-wrap: wrap; margin-top: var(--e-5);
}
 /* Las dos marcas se igualan por altura óptica, no por ancho: una es una
    tira horizontal y la otra va apilada. */
.marca-app { height: clamp(2.6rem, 4.4vw, 3.6rem); width: auto; }
.marca-fundacion { height: clamp(5rem, 8.5vw, 7rem); width: auto; }
.alianza-nexo {
  width: 1px; align-self: stretch; min-height: 4.5rem;
  background: var(--linea-clara);
}
@media (max-width: 620px) {
  .alianza-nexo { display: none; }
}

}

.seccion { padding: var(--e-6) var(--margen); }
.seccion h2 { font-size: var(--t-titular); max-width: 22ch; }
/* Sobre hueso hay que redefinir las variables de tinta, o los componentes
   que las usan (botón secundario, píldoras) se quedan sin contraste. */
.seccion.clara {
  background: var(--fondo-claro);
  color: var(--texto-claro);
  --texto: var(--texto-claro);
  --texto-suave: var(--texto-claro-suave);
  --linea-fuerte: rgba(38, 32, 99, .3);
  --chip-fondo: rgba(38, 32, 99, .05);
}
.seccion.clara .etiqueta { color: var(--indigo); opacity: .7; }
.seccion.clara a { color: var(--indigo); }

.cifras { display: grid; gap: var(--e-4) var(--e-5); grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); margin-top: var(--e-4); }
.cifra b { display: block; font-family: var(--display); font-size: var(--t-cifra); line-height: 1; }
.cifra span { display: block; margin-top: var(--e-1); font-size: var(--t-etiqueta); letter-spacing: .15em;
              text-transform: uppercase; color: var(--texto-claro-suave); }
.corte { margin-top: var(--e-4); font-size: var(--t-menor); color: var(--texto-claro-suave); }

.pasos { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); margin-top: var(--e-5); }
.paso { border-top: 1px solid var(--linea); padding-top: var(--e-3); }
.paso .num { font-family: var(--display); font-size: 2.4rem; color: var(--ambar); line-height: 1; }
.paso h3 { font-size: var(--t-seccion); margin: var(--e-2) 0 var(--e-1); }
.paso p { color: var(--texto-suave); }

.canales { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-4); }
.canal { display: inline-flex; align-items: center; gap: .6rem; border: 1px solid var(--linea);
         border-radius: var(--pastilla); padding: .55rem 1.05rem; font-size: var(--t-menor); color: var(--texto-suave); }
.canal svg { width: 1.15rem; height: 1.15rem; color: var(--violeta); }

.modulos { display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); margin-top: var(--e-5); }
.modulo { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); padding: var(--e-3); }
.modulo svg { width: 2rem; height: 2rem; color: var(--ambar); }
.modulo h3 { font-family: var(--sans); font-size: 1rem; font-weight: 700; margin: var(--e-2) 0 .35rem; letter-spacing: 0; }
.modulo p { font-size: var(--t-menor); color: var(--texto-suave); line-height: 1.5; }

.descarga { display: grid; gap: var(--e-4); align-items: center; grid-template-columns: 1fr; }
.tiendas { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: var(--e-3); }
.pronto {
  display: inline-flex; align-items: center; gap: .55rem;
  border: 1px dashed var(--linea); border-radius: var(--pastilla);
  padding: .9rem 1.5rem; color: var(--texto-tenue); font-size: var(--t-menor);
}

/* ===================================================================== pie */
.pie {
  background: var(--indigo); padding: var(--e-5) var(--margen) var(--e-4);
}
.pie-rejilla { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.pie h3 { font-family: var(--sans); font-size: var(--t-etiqueta); letter-spacing: .17em;
          text-transform: uppercase; color: var(--texto-tenue); font-weight: 700; margin-bottom: var(--e-2); }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.pie a { color: var(--texto-suave); font-size: var(--t-menor); }
.pie a:hover { color: var(--ambar); }
.pie-fin {
  margin-top: var(--e-5); padding-top: var(--e-3); border-top: 1px solid rgba(245,242,236,.12);
  display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); justify-content: space-between;
  font-size: var(--t-etiqueta); letter-spacing: .12em; text-transform: uppercase; color: var(--texto-tenue);
}

/* ================================================================= páginas */
.documento { padding: calc(var(--e-6) + 3rem) var(--margen) var(--e-6); }
.documento .envoltura { max-width: 44rem; }
.documento h1 { font-size: var(--t-titular); }
.documento h2 { font-size: var(--t-seccion); margin: var(--e-5) 0 var(--e-2); }
.documento p, .documento li { color: var(--texto-suave); }
.documento p + p,
.documento ul + p { margin-top: var(--e-2); }
.documento ul { padding-left: 1.2rem; display: grid; gap: .5rem; margin: var(--e-2) 0 0; }
.documento .falta {
  background: rgba(255,193,69,.14); border: 1px solid rgba(255,193,69,.4);
  color: var(--ambar); padding: .1rem .45rem; border-radius: 4px; font-size: .9em;
}

/* ============================================================== adaptación */
@media (max-width: 860px) {
  /* En vertical el teléfono vive arriba y el texto abajo: si comparten
     franja, el titular se monta sobre la pantalla y no se lee ninguno. */
  .portada-texto { width: auto; right: 0; padding-bottom: clamp(1.5rem, 4vh, 3rem); }
  .portada-texto .explica { display: none; }
  .nav .enlaces a:not(.boton) { display: none; }
  .nav a.boton, .boton { padding: .62rem 1.05rem; font-size: .82rem; }
  .marca { height: 1.55rem; }
  .aviso { display: none; }
  .acciones .cta { padding: .8rem 1.25rem; font-size: .92rem; }
  .req-texto .acto-texto { position: static; }
  .red-cifras { margin-top: var(--e-3); gap: var(--e-2) var(--e-3); }
  .red-cifras b { font-size: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .onda, .icono { animation: none; opacity: .12; }
  * { scroll-behavior: auto !important; }
}