/* =========================================================
   ORIGEN · Hero + maqueta de teléfono (device)
   .hero-art / .device se reutilizan también en el showcase.
   ========================================================= */
.hero-l { padding: 84px 0 96px; position: relative; overflow: hidden; }
.hero-l .grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
@media (max-width: 920px){ .hero-l .grid { grid-template-columns: 1fr; gap: 48px; } }
.hero-l h1 { font-family: var(--font-head); font-weight: 600; font-size: clamp(46px, 6.4vw, 80px); line-height: 1.0; letter-spacing: -.025em; }
.hero-l h1 em { font-style: italic; color: var(--bosque); font-weight: 500; }
.hero-l .sub { font-size: var(--t-bodyL); line-height: 1.6; color: var(--piedra); max-width: 46ch; margin-top: 26px; }
.hero-l .cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }
.hero-l .micro { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 26px; }
.hero-l .micro span { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--piedra); }
.hero-l .micro .ico { width: 17px; height: 17px; stroke: var(--bien); }

.hero-art { position: relative; display: flex; justify-content: center; }
.hero-blob { position: absolute; width: 118%; height: 118%; top: -9%; left: -9%; background:
   radial-gradient(60% 60% at 70% 28%, rgba(187,232,91,.28), transparent 70%),
   radial-gradient(55% 55% at 22% 78%, rgba(199,91,57,.16), transparent 70%); z-index: 0; }

/* ---------- Device (phone) ---------- */
.device { width: 340px; max-width: 100%; background: var(--crema); border-radius: 42px; box-shadow: 0 40px 80px -28px rgba(20,36,26,.4), 0 0 0 10px #11140f, 0 0 0 11px #2a2f25; overflow: hidden; position: relative; z-index: 1; }
.device .notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 140px; height: 28px; background: #11140f; border-radius: 0 0 16px 16px; z-index: 6; }
.appframe { width: 100%; height: 712px; border: 0; display: block; background: var(--crema); }