/* ===== Taddig · landing =====
   Paleta: #342546 violeta espacial · #5AED90 verde malaquita · #643BD7 Majorelle blue · #FFFFFF
   Tipografía: Poppins */

:root {
  --violet: #342546;
  --violet-deep: #291c38;
  --green: #5AED90;
  --blue: #643BD7;
  --white: #fff;
  --tint: #f5f2fc;
  --grad: linear-gradient(90deg, var(--green), var(--blue));
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-padding-top: 76px; }
/* El scroll suave se activa desde script.js tras la carga: si está activo desde el inicio, el navegador no llega a la sección del hash al abrir la URL directamente */
html.smooth { scroll-behavior: smooth; }
body {
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--violet);
  background: var(--white);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }

.container { width: min(1160px, 100% - 48px); margin-inline: auto; }
.section { padding: 112px 0; position: relative; overflow: hidden; }

.ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ico-fill { width: 100%; height: 100%; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 28px; border-radius: 999px; border: 1.5px solid transparent;
  font: 600 .95rem/1 'Poppins', sans-serif; cursor: pointer;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background-color .3s, border-color .3s, color .3s;
}
.btn-sm { padding: 11px 22px; font-size: .88rem; }
.btn-primary { background: var(--green); color: var(--violet); }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 14px 34px -8px rgba(90, 237, 144, .6), 0 0 0 5px rgba(90, 237, 144, .18); }
.btn-primary:active { transform: translateY(-1px); }
.btn-primary .arrow { transition: transform .3s var(--ease); }
.btn-primary:hover .arrow { transform: translateX(5px); }
.btn-ghost { color: var(--white); border-color: rgba(255, 255, 255, .38); }
.btn-ghost:hover { border-color: var(--green); color: var(--green); transform: translateY(-3px); }

/* ---------- Header ---------- */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: 72px;
  background: rgba(16, 11, 38, .9);   /* antes: rgba(52, 37, 70, .82) */
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.header-in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand img { height: 34px; width: auto; }
.nav { display: flex; gap: 34px; margin-left: auto; }
.nav a { color: rgba(255, 255, 255, .82); font-weight: 500; font-size: .92rem; position: relative; transition: color .25s; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.nav a:hover { color: var(--white); }
.nav a:hover::after { transform: scaleX(1); }

/* ---------- Hero ---------- */
.hero { position: relative; background: #0d0a1f url(assets/tadingosc.png) center / cover no-repeat; color: var(--white); padding: 150px 0 110px; overflow: hidden; }
.hero-bg {   /* velo oscuro suave sobre tadingosc.png para dar contraste al texto y al iPhone */
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(13, 10, 31, .55) 0%, rgba(13, 10, 31, .2) 55%, rgba(13, 10, 31, 0) 100%),
    radial-gradient(420px 320px at 8% 92%, rgba(90, 237, 144, .12), transparent 70%);
}
.hero-copy, .identity-copy, .biz-copy, .biz-visual, .identity-visual, .hero-visual { min-width: 0; }
.hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }

.chip {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 999px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14);
  font-size: .82rem; font-weight: 500; color: rgba(255, 255, 255, .9);
}
.chip-light { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .22); color: var(--white); }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); position: relative; flex: none; }
.dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--green); animation: ping 2.4s ease-out infinite; }

/* Tipografía display de marca: Cabinet Grotesk 500 (Fontshare) solo en h1/h2; el resto sigue en Poppins */
h1, h2 { font-family: 'Cabinet Grotesk', 'Poppins', sans-serif; text-transform: uppercase; }
h1 { font-size: clamp(2.5rem, 5.6vw, 4.3rem); font-weight: 500; line-height: 1.08; letter-spacing: -.02em; margin: 22px 0 22px; }
.accent { color: var(--green); white-space: nowrap; }
.lead { font-size: clamp(1.02rem, 1.6vw, 1.18rem); color: rgba(255, 255, 255, .78); max-width: 33rem; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.soon { margin-top: 22px; font-size: .84rem; color: rgba(255, 255, 255, .72); }

/* Avatares y redes (compartidos) */
.av {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, var(--green), var(--blue)); color: var(--white);
  font: 700 .72rem/1 'Poppins', sans-serif; font-style: normal;
}
.av-lg { width: 40px; height: 40px; font-size: .95rem; }
.av.alt { background: linear-gradient(135deg, var(--blue), var(--green)); }

/* Móvil del Hero */
.hero-visual { position: relative; display: grid; place-items: center; min-height: 600px; }
.halo { position: absolute; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .09); left: 50%; top: 50%; transform: translate(-50%, -50%); }
.halo-1 { width: 470px; height: 470px; }
.halo-2 { width: 640px; height: 640px; border-color: rgba(255, 255, 255, .05); }

.phone {
  position: relative; width: min(288px, 100%); height: 540px; border-radius: 46px; padding: 16px;
  background: linear-gradient(180deg, #402f57, #2b1e3b);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 50px 90px -24px rgba(0, 0, 0, .55), 0 0 0 8px rgba(255, 255, 255, .05);
}
.phone-notch { position: absolute; top: 14px; left: 50%; width: 76px; height: 20px; border-radius: 999px; background: #22162f; transform: translateX(-50%); z-index: 2; }
.screen { height: 100%; border-radius: 32px; background: var(--violet); padding: 44px 14px 14px; overflow: hidden; position: relative; }
.scan { display: flex; align-items: center; justify-content: center; gap: 9px; font-size: .74rem; font-weight: 500; color: rgba(255, 255, 255, .8); }

.radar { position: relative; height: 252px; margin-top: 8px; display: grid; place-items: center; }
.radar-icon { width: 84px; height: 84px; position: relative; z-index: 2; filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .4)); }
.ring, .base-ring { position: absolute; left: 50%; top: 50%; border-radius: 50%; }
.ring { width: 200px; height: 200px; margin: -100px 0 0 -100px; border: 2px solid var(--green); opacity: 0; animation: radar 4.2s ease-out infinite; }
.r2 { animation-delay: 1.4s; }
.r3 { animation-delay: 2.8s; }
.base-ring { border: 1px dashed rgba(255, 255, 255, .14); }
.b1 { width: 150px; height: 150px; margin: -75px 0 0 -75px; }
.b2 { width: 220px; height: 220px; margin: -110px 0 0 -110px; border-style: solid; border-color: rgba(255, 255, 255, .07); }

.bubble {
  position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 11px 4px 4px; border-radius: 999px; background: var(--white); color: var(--violet);
  font-size: .72rem; font-weight: 600; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .5);
  opacity: 0; animation: pop .6s var(--ease) forwards;
}
.bb1 { top: 6px; left: 0; animation-delay: 1.1s; }
.bb2 { top: 92px; right: -2px; animation-delay: 1.8s; }
.bb3 { bottom: 4px; left: 34px; animation-delay: 2.5s; }

.found { display: grid; gap: 8px; margin-top: 6px; }
.found-row {
  display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 18px;
  background: var(--white); color: var(--violet);
  opacity: 0; animation: rise .7s var(--ease) forwards;
}
.fr1 { animation-delay: 3s; }
.fr2 { animation-delay: 3.5s; }
.found-row b { display: block; font-size: .8rem; line-height: 1.3; }
.nets { display: flex; gap: 6px; color: var(--blue); }
.nets .ico { width: 15px; height: 15px; }

/* ---------- Secciones: cabeceras ---------- */
.eyebrow { display: inline-block; font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); margin-bottom: 14px; }
.eyebrow.green { color: var(--green); }
h1, h2 { text-wrap: balance; }
h2 { font-size: clamp(1.9rem, 3.8vw, 2.9rem); font-weight: 500; line-height: 1.15; letter-spacing: -.015em; }
.section-head { text-align: center; margin-bottom: 84px; }

/* ---------- Cómo funciona ---------- */
/* Fondo assets/fondo1.png (antes Dubái: dubai.png) con parallax suave (--ty0 y --zoom los escribe script.js). Tres cards de cristal siempre visibles. */
.steps-section { background: var(--violet); padding: 210px 0 132px; }   /* 120px + 90px de solape (sticky cover) */
.parallax-bg {
  position: absolute; left: 0; right: 0; top: -6%; bottom: -6%; z-index: 0; pointer-events: none; will-change: transform;
  background: url(assets/fondo1.png) 50% 50% / cover no-repeat;
  transform: translate3d(0, var(--ty0, 0px), 0) scale(var(--zoom, 1)); transform-origin: 54.7% 50%;
}
.steps-section .container { position: relative; z-index: 1; }
.steps-section .section-head { margin-bottom: 64px; }
.steps-section .section-head h2 { color: var(--violet); font-family: 'Cabinet Grotesk', 'Poppins', sans-serif; font-weight: 500; letter-spacing: -.02em; line-height: 1; padding-block: .075em; text-transform: uppercase; }   /* prueba tipográfica (solo este titular); el padding compensa el line-height */
.steps-section .eyebrow { color: var(--blue); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: stretch; }

/* Cards tipo Raycast (medidas tomadas del DOM de raycast.com): cabecera (icono + título + botón), descripción, divisor de 1px y visual a sangre en la parte inferior.
   Raycast: card 360x536, radio 20, padding 24, cabecera 52, icono 56 (r12), título 18, botón 36 (r8), descripción 16/25.6, divisor blanco al 5%.
   Aquí a escala ~1,07 (385x575) con radio 30. --w (0..1) = elevación/glow sutil de la card más cercana al centro de la pantalla */
.steps-section .container { width: min(1400px, 100% - 64px); }
.steps { gap: 32px; }
.pcard { --w: 0; position: relative; }
.pcard-in {
  height: 100%; border-radius: 30px; color: #fff; position: relative; overflow: hidden; display: flex; flex-direction: column;
  border: 0; background: linear-gradient(138deg, #3a2a78 22%, #150e2e 82%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(255, 255, 255, calc(.06 + .06 * var(--w))), 0 30px 60px -30px rgba(12, 6, 30, .7),
    0 0 20px 3px rgba(44, 30, 120, .12), 0 0 calc(50px * var(--w)) rgba(100, 59, 215, calc(.4 * var(--w)));
  transform: translate3d(0, calc(-8px * var(--w)), 0);
}
.pc-blue .pcard-in { background: radial-gradient(94% 78% at 50% 30%, #3b46a8, #10122f); }
.pc-green .pcard-in { background: linear-gradient(138deg, #3a2a78 22%, #150e2e 82%); }   /* misma paleta lila que la card 1 (la versión verde tipo Spotify está en web-backup-raycast-cards-v1) */
.pcard-head { padding: 32px 32px 0; position: relative; }
.pcard-top { display: flex; align-items: center; gap: 10px; min-height: 52px; }
.pcard-icon {
  width: 52px; height: 52px; border-radius: 13px; flex: none; display: grid; place-items: center; color: var(--green);
  background: linear-gradient(160deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04)); border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.pcard-icon svg { width: 26px; height: 26px; }
.pcard h3 { flex: 1; min-width: 0; font-size: 1.2rem; font-weight: 600; line-height: 1.22; color: #fff; margin: 0; }
.pcard-action { width: 36px; height: 36px; border-radius: 8px; flex: none; display: grid; place-items: center; color: #e6e6e6; background: linear-gradient(rgba(255, 255, 255, .03), rgba(255, 255, 255, .1)); border: 1px solid rgba(255, 255, 255, .1); }
.pcard-action svg { width: 16px; height: 16px; }
.pcard-head p { margin: 24px 0 0; padding-bottom: 25px; font-size: 1.06rem; line-height: 1.6; font-weight: 500; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .07); }

/* Visual a sangre bajo el divisor (ocupa el resto de la card) */
.pcard-visual {
  position: relative; flex: 1; min-height: 300px; overflow: hidden; display: grid; place-items: center; isolation: isolate;
  background: radial-gradient(55% 50% at 50% 52%, rgba(90, 237, 144, calc(.12 + .1 * var(--w))), transparent 72%);
}
.pcard-visual::before {   /* rejilla técnica muy tenue */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .45;
  background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 34px 34px; -webkit-mask-image: radial-gradient(65% 65% at 50% 50%, #000, transparent 100%); mask-image: radial-gradient(65% 65% at 50% 50%, #000, transparent 100%);
}
/* elemento "interfaz" común: cristal oscuro */
.gl {
  position: relative; border-radius: 22px; background: linear-gradient(150deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .05));
  border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 22px 40px -18px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .22);
}

/* Paso 1: radar */
.pv-radar .rw, .pv-radar .rc, .pv-radar .rp, .pv-radar .wv { position: absolute; left: 50%; top: 50%; border-radius: 50%; }
.pv-radar .rw { border: 1.5px solid rgba(255, 255, 255, .3); }
.pv-radar .rw1 { width: 70px; height: 70px; margin: -35px 0 0 -35px; background: rgba(255, 255, 255, .05); }
.pv-radar .rw2 { width: 136px; height: 136px; margin: -68px 0 0 -68px; border-color: rgba(255, 255, 255, .2); }
.pv-radar .rw3 { width: 202px; height: 202px; margin: -101px 0 0 -101px; border-color: rgba(255, 255, 255, .13); }
.pv-radar .rw4 { width: 268px; height: 268px; margin: -134px 0 0 -134px; border-color: rgba(255, 255, 255, .08); }
.pv-radar .rc { width: 20px; height: 20px; margin: -10px 0 0 -10px; background: #fff; box-shadow: 0 0 0 8px rgba(255, 255, 255, .14), 0 0 30px 6px rgba(90, 237, 144, .8); }
.pv-radar .wv { width: 70px; height: 70px; margin: -35px 0 0 -35px; border: 1.5px solid rgba(90, 237, 144, .9); opacity: 0; animation: pvWave 3.2s ease-out infinite; }
.pv-radar .wv2 { animation-delay: 1.6s; }
@keyframes pvWave { 0% { transform: scale(.5); opacity: .9; } 100% { transform: scale(3.6); opacity: 0; } }
.pv-radar .rp {
  width: 40px; height: 40px; margin: -20px 0 0 -20px; display: grid; place-items: center; z-index: 2;
  background: linear-gradient(135deg, var(--green), #3fcf78); border: 2px solid rgba(255, 255, 255, .9); box-shadow: 0 0 20px 3px rgba(90, 237, 144, .45), 0 8px 16px -4px rgba(0, 0, 0, .5);
}
.pv-radar .rp em { font: 700 .8rem/1 'Poppins', sans-serif; font-style: normal; color: var(--violet); }
.pv-radar .rp1 { transform: translate(-84px, -66px); }
.pv-radar .rp-photo { width: 58px; height: 58px; margin: -29px 0 0 -29px; }
.pv-radar .rp-photo { overflow: hidden; background: #2a2058; }
.pv-radar .rp-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; display: block; border-radius: 50%; }
.pv-radar .rp2 { transform: translate(96px, -40px); background: linear-gradient(135deg, #9a7bf5, var(--blue)); box-shadow: 0 0 20px 3px rgba(154, 123, 245, .5), 0 8px 16px -4px rgba(0, 0, 0, .5); }
.pv-radar .rp2 em { color: #fff; }
.pv-radar .rp3 { transform: translate(-40px, 82px); }
.pv-radar .rp4 { transform: translate(76px, 78px); }
.pv-radar .rp4.rp-photo { width: 48px; height: 48px; margin: -24px 0 0 -24px; }

/* Paso 2: tarjeta Taddig apilada */
.pv-card .gl { position: absolute; width: 290px; height: 156px; left: 50%; top: 50%; margin: -78px 0 0 -145px; }
.pv-card .gb { transform: translate(16px, -18px) rotate(4deg) scale(.94); background: linear-gradient(150deg, rgba(154, 123, 245, .38), rgba(100, 59, 215, .2)); border-color: rgba(154, 123, 245, .35); }
.pv-card .gf { padding: 22px 22px 18px; display: grid; align-content: space-between; transform: translate(-8px, 10px); background: linear-gradient(150deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .08)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pv-card .pv-card-img { width: 108%; max-width: none; height: auto; zoom: 1; filter: drop-shadow(0 24px 36px rgba(0, 0, 0, .45)); }
.pv-nets .pv-nets-img { width: 86%; max-width: none; height: auto; zoom: 1; filter: drop-shadow(0 24px 36px rgba(0, 0, 0, .45)); }   /* 86% de ancho = misma altura que lucia.png (108%) */
.pc-top { display: flex; align-items: center; gap: 14px; }
.pc-av {
  width: 58px; height: 58px; border-radius: 50%; flex: none; display: grid; place-items: center; font: 700 1.3rem/1 'Poppins', sans-serif; font-style: normal; color: #fff;
  background: linear-gradient(135deg, var(--blue), #8a68f0); box-shadow: 0 0 0 3px var(--green), 0 0 22px rgba(90, 237, 144, .45);
}
.pc-top b { display: block; font-size: 1.2rem; line-height: 1.25; color: #fff; }
.pc-top small { color: rgba(226, 219, 245, .8); font-size: .88rem; }
.pc-nets { display: flex; align-items: center; gap: 9px; }
.pc-nets span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .2); }
.pc-nets .ico { width: 15px; height: 15px; }
.pc-more { width: 36px; height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--green), rgba(90, 237, 144, .25)); margin-left: 2px; }

/* Paso 3: redes + barra de enlace */
.pv-nets .gl { width: 290px; height: 156px; padding: 22px 18px 18px; display: grid; align-content: space-between; justify-items: center; }
.pn-row { display: flex; gap: 11px; }
.pn {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; flex: none; color: #fff;
  background: linear-gradient(145deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .05)), var(--tint, rgba(255, 255, 255, .1));
  border: 1px solid rgba(255, 255, 255, .3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 calc(24px * var(--w)) rgba(90, 237, 144, calc(.45 * var(--w)));
}
.pn:nth-child(1) { --tint: rgba(225, 48, 108, .4); }
.pn:nth-child(2) { --tint: rgba(37, 211, 102, .42); }
.pn:nth-child(3) { --tint: rgba(10, 102, 194, .55); }
.pn:nth-child(4) { --tint: rgba(255, 30, 30, .42); }
.pn .ico { width: 24px; height: 24px; }
.pn-link { width: 100%; height: 26px; border-radius: 999px; display: flex; align-items: center; gap: 9px; padding: 0 11px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .15); }
.pn-link i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px rgba(90, 237, 144, .9); flex: none; }
.pn-link span { flex: 1; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .28); }
.pn-link .ico { width: 13px; height: 13px; color: var(--green); flex: none; }

/* Proporción vertical (Raycast 1:1,49): cards 425 x 635 en escritorio, tres iguales. Descripción reservada a 3 líneas para que divisor y visual queden alineados. */
@media (min-width: 961px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 425px)); justify-content: center; gap: 40px; }
  .pcard-in { min-height: 635px; }
  .pcard-head p { min-height: 4.8em; box-sizing: content-box; }
  .pv-radar > * { zoom: 1.1; }
  .pv-card > *, .pv-nets > * { zoom: .86; }
}
@media (min-width: 1200px) {
  .pv-radar > * { zoom: 1.24; }
  .pv-card > *, .pv-nets > * { zoom: 1.08; }
  .pv-card .gl, .pv-nets .gl { height: 196px; }
  .pv-card .gl { margin-top: -98px; }
  .pv-nets .gl { align-content: center; gap: 26px; }
  .pv-nets .pn { width: 56px; height: 56px; }
  .pv-nets .pn-row { gap: 12px; }
  .pv-nets .pn-link { height: 30px; }
}

@media (min-width: 1400px) {   /* cards de 425 px: visuales a escala completa */
  .pv-radar > * { zoom: 1.42; }
  .pv-card > *, .pv-nets > * { zoom: 1.28; }
}

/* ---------- Tu identidad digital ---------- */
/* Fondo claro con degradado pastel muy sutil; dos cards superpuestas (trasera violeta girada, delantera clara y protagonista) */
.identity { background: #0d0a1f url(assets/tadingosc.png) center / cover no-repeat; color: var(--white); padding: 222px 0 132px; }   /* +90px de solape */
.identity-bg { display: none; }   /* el fondo ahora es assets/tadingosc.png */
.identity-grid { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; gap: 88px; align-items: center; }
.identity-visual { order: -1; }
.identity-copy .eyebrow { color: var(--green); margin-bottom: 18px; }
.identity-copy h2 { color: var(--white); line-height: 1.1; }
.identity-copy p { margin-top: 24px; color: rgba(255, 255, 255, .78); font-size: 1.12rem; line-height: 1.7; max-width: 29rem; }
.checks { margin-top: 36px; display: grid; gap: 12px; justify-items: start; }
.checks li { display: flex; align-items: center; gap: 14px; font-weight: 500; color: var(--white); padding: 10px 22px 10px 12px; border-radius: 999px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.checks li::before { content: ""; width: 26px; height: 26px; border-radius: 50%; flex: none; background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23342546' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat; }

.identity-visual { position: relative; min-height: 520px; display: grid; place-items: center; }
.idv-img { width: 100%; max-width: 660px; height: auto; filter: drop-shadow(0 34px 44px rgba(8, 4, 30, .55)); animation: idvFloat 7s ease-in-out infinite; }
@keyframes idvFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }   /* 'translate' (no 'transform') para no chocar con .reveal */
.idv-back, .idv-front { position: absolute; left: 50%; top: 50%; border-radius: 34px; }
.idv-back {
  width: 300px; height: 370px; margin: -200px 0 0 -252px; transform: rotate(-8deg); padding: 34px 26px; display: grid; align-content: start; gap: 22px;
  background: linear-gradient(160deg, #7a5bdb 0%, #55408f 55%, #3a2a66 100%); border: 1px solid rgba(255, 255, 255, .18); box-shadow: 0 40px 60px -30px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.idv-row { display: flex; align-items: center; gap: 12px; opacity: .92; }
.idv-dot { width: 40px; height: 40px; border-radius: 50%; flex: none; background: linear-gradient(135deg, var(--green), #3fcf78); }
.idv-dot.d2 { background: linear-gradient(135deg, #9a7bf5, var(--blue)); }
.idv-dot.d3 { background: linear-gradient(135deg, #c9b8fa, #9a7bf5); }
.idv-bar { flex: 1; display: grid; gap: 7px; }
.idv-bar s { display: block; height: 7px; border-radius: 999px; background: rgba(255, 255, 255, .34); }
.idv-bar s + s { width: 58%; background: rgba(255, 255, 255, .18); }
.idv-chip { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22); }
.idv-chip .ico { width: 16px; height: 16px; }
.idv-front {
  width: 340px; margin: -140px 0 0 -92px; transform: rotate(3deg); padding: 30px; background: linear-gradient(160deg, #fff 0%, #f8f5ff 55%, #ecfbf2 100%);
  border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 44px 70px -30px rgba(52, 37, 70, .45), 0 4px 14px rgba(52, 37, 70, .08), 0 0 60px rgba(100, 59, 215, .12);
}
.id-top { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
.id-top b { display: block; font-size: 1.15rem; line-height: 1.3; color: var(--violet); }
.id-top small, .id-foot small { color: rgba(52, 37, 70, .7); font-size: .82rem; }
.id-avatar { width: 68px; height: 68px; border-radius: 50%; flex: none; padding: 16px 14px 0; color: var(--white); background: linear-gradient(135deg, var(--green), var(--blue)); border: 3px solid var(--white); box-shadow: 0 0 0 3px var(--blue); overflow: hidden; }
.idv-nets { display: flex; gap: 10px; }
.idv-nets span { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: var(--blue); background: rgba(100, 59, 215, .09); }
.idv-nets span:nth-child(even) { color: #1a9e55; background: rgba(90, 237, 144, .22); }
.idv-nets .ico { width: 20px; height: 20px; }
.id-foot { display: flex; align-items: center; gap: 14px; margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(52, 37, 70, .09); }
.id-foot b { display: block; font-size: .92rem; line-height: 1.3; color: var(--violet); }
.id-foot > div { flex: 1; }
.qr { width: 58px; height: 58px; flex: none; padding: 5px; border-radius: 12px; background: var(--tint); }
.idv-badge { position: absolute; right: 6%; top: 10%; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: var(--violet); box-shadow: 0 14px 26px -10px rgba(90, 237, 144, .8); transform: rotate(-30deg); }
.idv-badge .ico { width: 22px; height: 22px; }

/* Movimiento mínimo de fondos entre "Tu identidad digital" y "Para negocios" con scroll: --tr / --enter (script.js). Sin overlays ni degradados en la unión. */
.identity, .biz { --tr: 0; }
.identity { background-position: center calc(50% + var(--tr) * -8px); }
.identity-grid { z-index: 1; }
.biz .container { position: relative; z-index: 1; }

/* Efecto "sticky cover" de JOYAS (style.css: .eg__row { position: sticky; top: 0 } con z-index creciente) aplicado a TODAS las uniones de la landing:
   cada sección queda fijada arriba (sticky) y la siguiente sube encima al ritmo del scroll (sin JS de animación). --stick (script.js) solo corrige el 'top' si la sección es más alta que la ventana.
   La sección que cubre entra con su borde limpio, sin sombras, máscaras ni degradados de unión. El solape (-90px de margen, +90px de padding) no cambia ninguna posición. */
.hero, .steps-section, .identity, .biz { position: sticky; top: var(--stick, 0px); }
.hero { z-index: 1; }
.steps-section { z-index: 2; }
.identity { z-index: 3; }
.biz { z-index: 4; }
.final { z-index: 5; }
.hero.is3d { top: calc(100vh - 280vh); }   /* el Hero 3D es una pista de 280vh (220svh en móvil): se fija cuando su final llega al pie de la ventana */
.steps-section, .identity, .biz, .final { margin-top: -90px; }

.no-stick .hero, .no-stick .steps-section, .no-stick .identity, .no-stick .biz { position: relative !important; top: auto !important; }   /* medición de anclas (script.js) */
/* Hero 3D en móvil: el texto va al pie del escenario y el solape de 90px lo taparía, así que ahí "Cómo funciona" sube encima sin solape ni máscara (borde del panel, como en JOYAS). */
@media (max-width: 767.98px) {
  .hero.is3d ~ .steps-section { margin-top: 0; padding-top: 92px; }
}

/* ---------- Para negocios ---------- */
.biz { background: #faf9ff url(assets/tading.png) center calc(50% + var(--enter, 0) * 18px) / cover no-repeat;   /* el fondo claro 'entra' unos px desde abajo */
  padding-top: 186px; padding-bottom: 96px; }   /* 96px + 90px de solape sobre Tu identidad digital (ver bloque 'sticky cover') */
.biz-panel {
  position: relative; overflow: hidden; border-radius: 44px; color: var(--white);
  background: linear-gradient(135deg, var(--blue) 0%, #4a2f9c 45%, var(--violet) 100%);
  padding: 16px; display: grid; grid-template-columns: 1.08fr .92fr; gap: 24px; align-items: stretch;   /* texto ~54% / foto ~46% */
}
.biz-copy { position: relative; z-index: 1; align-self: center; padding: 72px 36px 72px 64px; }
.biz-copy h2 { margin: 22px 0 22px; font-size: clamp(1.9rem, 4vw, 3.2rem); }
.biz-copy p { color: rgba(255, 255, 255, .84); margin-bottom: 32px; max-width: 30rem; }
.biz-visual { position: relative; min-height: 600px; border-radius: 32px; overflow: hidden; box-shadow: 0 24px 50px -24px rgba(10, 5, 25, .6); }
.biz-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 42% 50%; }

/* ---------- CTA final ---------- */
.final { position: relative; overflow: hidden; background: radial-gradient(60% 55% at 50% 52%, rgba(13, 10, 31, .5), rgba(13, 10, 31, 0) 100%), #0d0a1f url(assets/tadingosc.png) center / cover no-repeat; color: var(--white); text-align: center; padding: 210px 0 120px;   /* +90px de solape */
  min-height: calc(100vh - 102px); display: flex; flex-direction: column; justify-content: center; }   /* final + pie llenan la ventana: al llegar abajo ya no asoma 'Para negocios' por arriba (102px = alto del pie) */
.final-rings { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.final-rings span { position: absolute; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .09); transform: translate(-50%, -50%); }
.final-rings span:nth-child(1) { width: 420px; height: 420px; }
.final-rings span:nth-child(2) { width: 700px; height: 700px; border-color: rgba(255, 255, 255, .06); }
.final-rings span:nth-child(3) { width: 980px; height: 980px; border-color: rgba(255, 255, 255, .04); }
.final-in { position: relative; display: flex; flex-direction: column; align-items: center; }
.final-icon { width: 76px; height: 76px; margin-bottom: 26px; filter: drop-shadow(0 12px 28px rgba(100, 59, 215, .55)); }
.final h2 { max-width: 20ch; }
.final p { margin: 18px 0 34px; color: rgba(255, 255, 255, .78); font-size: 1.08rem; max-width: 30rem; }

/* ---------- Footer ---------- */
.footer { background: #100b26;   /* mismo azul noche que la cabecera; antes var(--violet-deep) */ color: rgba(255, 255, 255, .75); padding: 36px 0; }
.footer-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.footer .brand img { height: 30px; width: auto; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: .9rem; }
.footer-nav a { transition: color .25s; }
.footer-nav a:hover { color: var(--green); }
.copy { font-size: .84rem; color: rgba(255, 255, 255, .68); }

/* ---------- Animaciones ---------- */
@keyframes radar { 0% { transform: scale(.35); opacity: .75; } 100% { transform: scale(1.25); opacity: 0; } }
@keyframes ping { 0% { transform: scale(1); opacity: .6; } 80%, 100% { transform: scale(2.6); opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: scale(.6) translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }

.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0s); }
.js .reveal.in { opacity: 1; transform: none; }
/* La tarjeta de la identidad conserva su inclinación */

/* ---------- Intro del Hero (solo con html.intro; ver script.js) ----------
   El propio .hero-visual (teléfono + halos) parte grande y centrado y vuelve a su posición
   natural con una transición de transform. Al terminar se retira la clase y queda el Hero de siempre. */
html.intro .hero-visual { transform: none; transition: none; z-index: 5; }
html.intro.intro-ready .hero-visual {
  opacity: 1;
  transform: translate(var(--ix, 0px), var(--iy, 0px)) scale(var(--is, 1));
  will-change: transform;
}
html.intro.intro-go .hero-visual {
  transform: none;
  transition: transform var(--intro-dur, 950ms) cubic-bezier(.65, 0, .2, 1);
}
html.intro .header { opacity: 0; }
html.intro.intro-go .header { opacity: 1; transition: opacity .7s ease .1s; }
html.intro .hero-copy .reveal { transition-duration: .7s; transition-delay: calc(var(--d, 0s) * .75); }
/* Dos pulsos de radar mientras el teléfono está grande */
html.intro .radar::before, html.intro .radar::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 200px; height: 200px; margin: -100px 0 0 -100px;
  border-radius: 50%; border: 2px solid var(--green); opacity: 0; animation: radar 1.2s ease-out 1 both;
}
html.intro .radar::after { animation-delay: .5s; }

/* ---------- Hero 3D (solo con .hero.is3d; ver hero3d.js) ----------
   .hero pasa a ser una pista de 280vh y .hero-stage queda fijada (sticky) a pantalla completa.
   Sin .is3d, .hero-stage es display:contents y el Hero es exactamente el de siempre. */
.hero-stage { display: contents; }
.hero.is3d { height: 280vh; padding: 0; overflow: visible; overflow: clip; }
.hero.is3d { background: none; }
.hero.is3d .hero-stage { display: block; position: sticky; top: 0; height: 100vh; overflow: hidden; background: #0d0a1f url(assets/tadingosc.png) center / cover no-repeat; }   /* el fondo va en el escenario fijo, no en la pista de 280vh */
.hero.is3d .hero-grid { height: 100%; padding-top: 72px; align-content: center; z-index: 2; }
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .6s ease; }
.hero-canvas.on { opacity: 1; }
/* Sin flash del Hero 2D en escritorio: oculto hasta que el 3D está renderizado (clase puesta en el head; ver index.html / hero3d.js) */
html.h3d-pending .hero-copy, html.h3d-pending .hero-visual { visibility: hidden; }
html.h3d-pending .hero .hero-visual.reveal { opacity: 0 !important; transition: none !important; }   /* que al quitar h3d-pending no quede un 2D desvaneciéndose junto al canvas */
/* El móvil CSS queda solo como medida de posición; el texto lo controla el scroll (estilos inline) */
.js .hero.is3d .hero-visual { opacity: 0; }
.hero.is3d .hero-visual * { animation-play-state: paused; }
.js .hero.is3d .hero-copy .reveal { transition: none; }
.js .hero.is3d.h3d-fade .hero-copy .reveal, .js .hero.is3d.h3d-fade .hero-visual { transition: opacity .45s ease; }

/* Hero 3D en móvil (<768px): pista de 220svh, escenario en svh (estable con las barras del navegador).
   Composición vertical: el móvil 3D arriba y el texto al pie (el .hero-visual CSS no se usa). */
@media (max-width: 767.98px) {
  .hero.is3d { height: 220vh; height: 220svh; top: calc(100vh - 220vh); top: calc(100svh - 220svh); }
  .hero.is3d .hero-stage { height: 100vh; height: 100svh; }
  .hero.is3d .hero-visual { display: none; }
  .hero.is3d .hero-grid { align-content: end; padding-bottom: 28px; }
  .hero.is3d h1 { font-size: 2.05rem; margin: 16px 0 14px; }
  .hero.is3d .lead { font-size: .98rem; }
  .hero.is3d .cta-row { margin-top: 22px; gap: 10px; }
  .hero.is3d .soon { margin-top: 14px; }
}
/* Pantallas bajas (Safari con barras: ~664px de svh): texto más compacto para dejar sitio al móvil 3D */
@media (max-width: 767.98px) and (max-height: 760px) {
  .hero.is3d .hero-grid { padding-bottom: 18px; }
  .hero.is3d .chip { padding: 6px 14px; font-size: .78rem; }
  .hero.is3d h1 { font-size: 1.8rem; margin: 12px 0 10px; }
  .hero.is3d .lead { font-size: .9rem; }
  .hero.is3d .cta-row { margin-top: 16px; gap: 8px; flex-wrap: nowrap; }
  .hero.is3d .cta-row .btn { padding: 13px 14px; font-size: .84rem; gap: 6px; white-space: nowrap; }
  .hero.is3d .soon { margin-top: 10px; font-size: .78rem; }
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .section { padding: 84px 0; }
  .biz { padding-top: 174px; }   /* 84px + 90px de solape (sticky cover) */
  .hero { padding: 116px 0 80px; }
  .hero-grid, .identity-grid { grid-template-columns: 1fr; gap: 48px; }
  .hero-copy { text-align: center; }
  .hero-copy .lead { margin-inline: auto; }
  .cta-row { justify-content: center; }
  .hero-visual { min-height: 580px; }
  .halo-2 { width: 560px; height: 560px; }
  .steps-section { padding: 182px 0 100px; }
  .steps { grid-template-columns: 1fr; gap: 24px; max-width: 460px; margin-inline: auto; }
  .steps-section .section-head { margin-bottom: 44px; }
  .section-head { margin-bottom: 64px; }
  .identity-copy { text-align: center; }
  .identity-copy p { margin-inline: auto; }
  .checks { justify-items: start; width: fit-content; margin-inline: auto; }
  .identity { padding: 182px 0 92px; }
  .identity-visual { order: 0; min-height: 0; }   /* imagen fluida: ya no hace falta escalar el mockup */
  .biz-panel { grid-template-columns: 1fr; text-align: center; gap: 12px; }
  .biz-copy { padding: 44px 28px 28px; }
  .biz-visual { min-height: 0; aspect-ratio: 4 / 3; }
  .biz-copy p { margin-inline: auto; }
}

@media (max-width: 720px) {
  .nav { display: none; }
  .header-in { justify-content: space-between; }
}

@media (max-width: 380px) {
  .identity-visual { scale: .6; margin-block: -76px; }
  h1 { font-size: 2.15rem; }
  .btn { padding: 14px 22px; }
  .biz-copy .btn { width: 100%; }
}

@media (max-width: 560px) {
  .pcard-visual { height: 280px; }
  .pv-card .gl { width: 254px; margin-left: -127px; }
  .pv-nets .gl { width: 262px; padding-inline: 12px; }
  .pn { width: 46px; height: 46px; }
  .pn-row { gap: 9px; }
  .container, .steps-section .container { width: min(1160px, 100% - 40px); }
  .brand img { height: 30px; }
  .header .btn-sm { padding: 10px 18px; font-size: .82rem; }
  .hero-visual { min-height: 560px; }
  .halo-1 { width: 380px; height: 380px; }
  .halo-2 { width: 500px; height: 500px; }
  .biz-panel { border-radius: 32px; padding: 12px; }
  .biz-copy { padding: 36px 14px 22px; }
  .biz-visual { border-radius: 24px; }
  .final { padding: 182px 0 92px; }
  .final-rings span:nth-child(3) { display: none; }
  .footer-in { flex-direction: column; text-align: center; }
  .footer-nav { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) { .idv-img { animation: none; } }
@media (prefers-reduced-motion: reduce) {
  html.smooth { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  .bubble, .found-row { opacity: 1; }
  .ring, .wave { opacity: .25; transform: scale(.9); }
}