/* Páginas de proyecto: sobreescribe el tema y añade el teléfono */
.hero { background: radial-gradient(1100px 600px at 80% -10%, var(--hero-1) 0%, transparent 62%), radial-gradient(800px 500px at -10% 110%, var(--hero-2) 0%, transparent 58%), var(--ink); }
.kicker.dark { color: var(--brand); filter: brightness(.82); }
.legal a { color: var(--brand); filter: brightness(.8); }
.steps.three { grid-template-columns: repeat(3, 1fr); }
.hero-art { display: grid; place-items: center; min-height: 560px; }
.blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; }
.blob.b1 { width: 320px; height: 320px; background: var(--brand); top: 8%; left: 12%; }
.blob.b2 { width: 260px; height: 260px; background: var(--brand-2); bottom: 6%; right: 8%; opacity: .4; }

.phone { position: relative; width: 290px; height: 590px; border-radius: 46px; padding: 12px; background: #0b0b12; box-shadow: 0 0 0 2px rgba(255,255,255,.18), 0 50px 80px -20px rgba(0,0,0,.7), inset 0 0 0 2px #2a2a38; z-index: 1; }
.phone .notch { position: absolute; top: 20px; left: 50%; width: 84px; height: 22px; margin-left: -42px; background: #05050a; border-radius: 12px; z-index: 3; }
.screen { height: 100%; border-radius: 36px; overflow: hidden; padding: 56px 16px 16px; background: linear-gradient(180deg, color-mix(in srgb, var(--hero-1) 70%, #000), var(--ink)); color: #fff; display: flex; flex-direction: column; gap: 10px; font-size: 13px; position: relative; }
.s-title { font: 700 17px var(--display); margin-bottom: 6px; }
.s-card { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,.1); backdrop-filter: blur(4px); animation: slideUp .8s var(--ease) both; }
.s-card:nth-child(3) { animation-delay: .1s; } .s-card:nth-child(4) { animation-delay: .2s; } .s-card:nth-child(5) { animation-delay: .3s; }
.s-card b { font-weight: 600; } .s-card span { grid-column: 1; font-size: 11.5px; opacity: .65; }
.s-card u { grid-row: 1 / 3; grid-column: 2; align-self: center; text-decoration: none; min-width: 28px; height: 28px; padding: 0 7px; border-radius: 14px; display: grid; place-items: center; background: var(--brand); color: var(--brand-ink); font-weight: 700; font-size: 12px; }
.s-cta { margin-top: auto; padding: 14px; border-radius: 16px; text-align: center; font-weight: 600; background: var(--brand); color: var(--brand-ink); animation: slideUp .8s .4s var(--ease) both; }
.s-bar { height: 8px; border-radius: 4px; background: rgba(255,255,255,.14); overflow: hidden; margin: -2px 6px 4px; }
.s-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); transform-origin: left; animation: grow 1.8s .3s var(--ease) both; }
.s-ring { position: relative; width: 150px; height: 150px; margin: 6px auto 10px; color: var(--brand); }
.s-ring svg { width: 100%; height: 100%; } .s-ring circle:nth-child(2) { animation: dash 2s .3s var(--ease) both; }
.s-ring b { position: absolute; inset: 0; display: grid; place-items: center; font: 700 30px var(--display); color: #fff; }
.s-bubble { max-width: 80%; padding: 10px 14px; border-radius: 18px 18px 18px 4px; background: rgba(255,255,255,.14); animation: slideUp .7s var(--ease) both; }
.s-bubble.me { align-self: flex-end; border-radius: 18px 18px 4px 18px; background: var(--brand); color: var(--brand-ink); animation-delay: .25s; }
.kb { margin-top: auto; display: grid; gap: 7px; padding: 10px 6px; border-radius: 18px; background: rgba(0,0,0,.35); }
.kr { display: flex; gap: 5px; justify-content: center; }
.kr i { flex: 1; max-width: 22px; height: 32px; display: grid; place-items: center; border-radius: 7px; background: rgba(255,255,255,.14); font: 500 12px var(--font); font-style: normal; animation: key 4.8s infinite; }
.kr:nth-child(1) i:nth-child(3) { animation-delay: .4s; } .kr:nth-child(2) i:nth-child(5) { animation-delay: 1.6s; } .kr:nth-child(3) i:nth-child(4) { animation-delay: 2.8s; } .kr:nth-child(2) i:nth-child(8) { animation-delay: 3.6s; }
.kr i.w { max-width: 34px; flex: 1.5; background: rgba(255,255,255,.08); }
.kr i.sp { max-width: none; flex: 5; letter-spacing: .2em; font-weight: 700; font-size: 11px; color: var(--brand-2); }
.kr i.acc { background: var(--brand); color: var(--brand-ink); }
@keyframes key { 0%, 90%, 100% { background: rgba(255,255,255,.14); transform: none; } 94% { background: var(--brand); transform: translateY(2px) scale(.94); } }
@keyframes slideUp { from { opacity: 0; transform: translateY(18px); } }
@keyframes grow { from { transform: scaleX(0); } }
@keyframes dash { from { stroke-dashoffset: 251; } }

.chip-float { position: absolute; display: flex; gap: 12px; align-items: center; padding: 12px 18px 12px 12px; border-radius: 18px; background: rgba(255,255,255,.96); color: var(--ink); box-shadow: 0 24px 40px -14px rgba(0,0,0,.5); z-index: 2; }
.chip-float.c1 { left: -2%; bottom: 14%; }
.chip-float img { border-radius: 10px; }
.chip-float b { display: block; font: 700 14px var(--display); } .chip-float span { font-size: 12px; color: var(--muted); }

.faq { display: grid; gap: 14px; }
.faq details { background: var(--surface); border-radius: 18px; padding: 4px 24px; box-shadow: var(--shadow); transition: box-shadow .4s; }
.faq details[open] { box-shadow: 0 2px 4px rgba(15,29,58,.06), 0 24px 40px -18px rgba(15,29,58,.3); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 28px 20px 0; font: 600 1.08rem var(--display); color: var(--ink); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 50%; translate: 0 -50%; font: 400 28px var(--font); color: var(--brand); transition: rotate .4s var(--ease); }
.faq details[open] summary::after { rotate: 45deg; }
.faq p { color: var(--muted); padding-bottom: 14px; margin: 0; animation: slideUp .5s var(--ease); }

@media (max-width: 980px) { .hero-art { min-height: 520px; } .chip-float.c1 { left: 4%; } }
@media (max-width: 620px) { .steps.three { grid-template-columns: 1fr; } .phone { width: 260px; height: 540px; } .chip-float.c1 { left: -4%; bottom: 6%; } }

/* Fuente del alfabeto masónico M3N */
@font-face { font-family: "M3N"; src: url("/assets/fonts/m3n.ttf") format("truetype"); font-display: swap; }
.m3n { font-family: "M3N", sans-serif !important; font-size: 1.25em; letter-spacing: .06em; font-style: normal; }
.kr i.m3n { font-size: 15px; }
.sug { display: flex; justify-content: space-around; font-size: 12px; padding: 2px 0 6px; opacity: .85; border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: 2px; }
.s-chat { padding: 12px 14px; border-radius: 16px; background: color-mix(in srgb, var(--brand) 22%, transparent); box-shadow: inset 0 0 0 1px var(--brand); animation: slideUp .8s .35s var(--ease) both; }
.s-chat b { display: block; font-size: 12px; color: var(--brand); } .s-chat span { font-weight: 600; }
.s-kpi { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.s-kpi div { padding: 12px; border-radius: 14px; background: rgba(255,255,255,.1); } .s-kpi span { display: block; font-size: 11px; opacity: .65; } .s-kpi b { font: 700 18px var(--display); color: var(--brand); }

/* Pantalla con captura real */
.screen.img { padding: 0; background: #fff; }
.screen.img img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* Galería de capturas */
.shots { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 10px max(20px, calc((100vw - var(--maxw)) / 2)) 34px; scrollbar-width: thin; }
.shots figure { flex: none; margin: 0; scroll-snap-align: center; text-align: center; }
.shots img { width: 240px; height: auto; border-radius: 26px; box-shadow: 0 0 0 6px #0b0b12, 0 30px 50px -18px rgba(0,0,0,.45); transition: transform .5s var(--ease); }
.shots figure:hover img { transform: translateY(-8px) scale(1.02); }
.shots figcaption { margin-top: 18px; font: 600 .95rem var(--display); color: var(--muted); }
.logo img, .chip-float img { object-fit: cover; }

/* Tarjeta flotante: fuera del área del teclado */
.chip-float.c1 { left: -16%; top: 34%; bottom: auto; }
@media (max-width: 980px) { .chip-float.c1 { left: 2%; top: 4%; } }
@media (max-width: 620px) { .chip-float { display: none; } }

/* Ajustes tras revisión visual */
.chip-float.c1 { left: -8%; top: -2%; bottom: auto; padding: 10px 16px 10px 10px; }
.hero-art:has(.screen.img) .phone { height: 545px; }
.screen.img { padding-top: 34px; background: #f5fbf9; }
.screen.img img { object-fit: cover; object-position: top center; border-radius: 0 0 36px 36px; }
@media (max-width: 980px) { .chip-float.c1 { left: 4%; top: 2%; } }
@media (max-width: 620px) { .chip-float { display: none; } .hero-art:has(.screen.img) .phone { height: 500px; } }

.s-bars { display: flex; align-items: flex-end; gap: 7px; height: 96px; padding: 12px 10px 0; border-radius: 16px; background: rgba(255,255,255,.07); margin-top: 2px; }
.s-bars i { flex: 1; height: var(--h); border-radius: 6px 6px 0 0; background: linear-gradient(180deg, var(--brand), color-mix(in srgb, var(--brand) 35%, transparent)); transform-origin: bottom; animation: bar 1.4s var(--ease) both; }
.s-bars i:nth-child(2) { animation-delay: .08s; } .s-bars i:nth-child(3) { animation-delay: .16s; } .s-bars i:nth-child(4) { animation-delay: .24s; } .s-bars i:nth-child(5) { animation-delay: .32s; } .s-bars i:nth-child(6) { animation-delay: .4s; } .s-bars i:nth-child(7) { animation-delay: .48s; }
@keyframes bar { from { transform: scaleY(0); } }