/* Landing pages (ciudades y servicios) · se usa junto con blog.css */
.l-hero { padding: 9rem 0 4rem; background: radial-gradient(50% 60% at 85% 30%, rgba(124,92,255,0.18), transparent 70%), radial-gradient(35% 45% at 5% 80%, rgba(255,122,89,0.09), transparent 70%); }
.l-hero .grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3.5rem; align-items: center; }
.l-hero h1 { font-size: clamp(2.2rem, 4.2vw, 3.3rem); letter-spacing: -0.035em; line-height: 1.1; margin-bottom: 1.2rem; }
.l-hero h1 em { font-style: normal; color: var(--accent-2); background: linear-gradient(transparent 72%, rgba(109,74,255,0.2) 72%); }
.l-hero .desc { color: var(--muted); font-size: 1.1rem; max-width: 560px; margin-bottom: 2rem; }
.l-hero .cta-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.75rem; }
.btn-ghost { background: #fff; color: var(--text); border: 1px solid var(--border); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-2); }
.trust { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; font-size: 0.86rem; color: var(--muted); }
.trust span::before { content: '✓'; color: var(--green); font-weight: 700; margin-right: 0.4rem; }

.hl-card { position: relative; background: #fff; border-radius: 26px; padding: 1.8rem; box-shadow: 24px 30px 70px rgba(91,61,245,0.2); transform: perspective(1400px) rotateY(-8deg) rotateX(3deg); }
.hl-card::before { content: ''; position: absolute; inset: -18px -18px auto auto; width: 120px; height: 120px; border-radius: 50%; background: rgba(109,74,255,0.12); z-index: -1; }
.hl-top { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.3rem; }
.hl-pin { width: 52px; height: 52px; border-radius: 16px; background: #f0ecff; display: grid; place-items: center; flex-shrink: 0; }
.hl-pin svg { width: 26px; height: 26px; fill: none; stroke: var(--accent-2); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hl-top small { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted); }
.hl-top b { font-family: 'Space Grotesk', sans-serif; font-size: 1.2rem; letter-spacing: -0.02em; }
.hl-card ul { list-style: none; display: grid; gap: 0.7rem; margin-bottom: 1.3rem; }
.hl-card li { position: relative; padding: 0.7rem 0.9rem 0.7rem 2.4rem; background: #f7f5ff; border-radius: 12px; font-size: 0.92rem; }
.hl-card li::before { content: '✓'; position: absolute; left: 0.9rem; color: var(--green); font-weight: 700; }
.hl-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.hl-chips span { font-size: 0.74rem; font-weight: 600; color: var(--accent-2); background: #f0ecff; padding: 0.3rem 0.75rem; border-radius: 999px; }

.l-sec { padding: 4.5rem 0; }
.sec-head { text-align: center; max-width: 700px; margin: 0 auto 3rem; }
.sec-head h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); letter-spacing: -0.03em; line-height: 1.15; margin: 0.4rem 0 0.9rem; }
.sec-head p { color: var(--muted); }
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.feat { background: #fff; border-radius: 20px; padding: 1.7rem; box-shadow: 0 14px 40px rgba(91,61,245,0.08); transition: transform 0.3s, box-shadow 0.3s; }
.feat:hover { transform: translateY(-4px); box-shadow: 0 22px 50px rgba(91,61,245,0.15); }
.feat .ic { width: 52px; height: 52px; border-radius: 16px; background: #f0ecff; display: grid; place-items: center; margin-bottom: 1.1rem; }
.feat .ic svg { width: 26px; height: 26px; fill: none; stroke: var(--text); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.feat .ic svg .ac { stroke: var(--accent); }
.feat h3 { font-size: 1.1rem; letter-spacing: -0.02em; margin-bottom: 0.45rem; }
.feat p { font-size: 0.92rem; color: var(--muted); line-height: 1.65; }
.feat a { display: inline-block; margin-top: 0.7rem; font-size: 0.85rem; font-weight: 700; text-decoration: none; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; background: linear-gradient(135deg, #ffffff 45%, #f3efff); border: 1px solid var(--border); border-radius: 28px; padding: clamp(1.8rem, 4vw, 3rem); box-shadow: 0 18px 50px rgba(91,61,245,0.08); }
.split h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -0.03em; line-height: 1.2; margin: 0.4rem 0 1rem; }
.split p { color: var(--muted); margin-bottom: 1rem; }
.split .checks { list-style: none; display: grid; gap: 0.7rem; }
.split .checks li { position: relative; padding: 0.85rem 1rem 0.85rem 2.6rem; background: #fff; border: 1px solid var(--border); border-radius: 14px; font-size: 0.93rem; }
.split .checks li::before { content: '✓'; position: absolute; left: 1rem; color: var(--green); font-weight: 700; }

.l-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.25rem; counter-reset: st; }
@media (max-width: 1000px) { .l-steps { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } }
.l-step { position: relative; background: #fff; border-radius: 20px; padding: 1.6rem 1.4rem 1.5rem; box-shadow: 0 14px 40px rgba(91,61,245,0.07); overflow: hidden; }
.l-step::before { counter-increment: st; content: '0' counter(st); position: absolute; top: 0.4rem; right: 1rem; font-family: 'Space Grotesk', sans-serif; font-size: 3.6rem; font-weight: 700; line-height: 1; color: rgba(109,74,255,0.1); }
.l-step h3 { position: relative; font-size: 1.05rem; margin-bottom: 0.4rem; letter-spacing: -0.02em; }
.l-step p { position: relative; font-size: 0.9rem; color: var(--muted); line-height: 1.6; }

.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 0.9rem; }
.faq details { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 0 1.3rem; box-shadow: 0 8px 24px rgba(91,61,245,0.05); }
.faq summary { cursor: pointer; list-style: none; padding: 1.1rem 0; font-weight: 600; font-family: 'Space Grotesk', sans-serif; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--accent); font-size: 1.5rem; line-height: 1; }
.faq details[open] summary::after { content: '−'; }
.faq p { padding: 0 0 1.2rem; color: #43456c; margin: 0; font-size: 0.97rem; }

.rel-links { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
.rel-links a { font-size: 0.9rem; font-weight: 600; text-decoration: none; color: var(--accent-2); background: #fff; border: 1px solid var(--border); padding: 0.6rem 1.1rem; border-radius: 999px; box-shadow: 0 6px 18px rgba(91,61,245,0.06); }
.rel-links a:hover { border-color: var(--accent); }

@media (max-width: 900px) {
  .l-hero .grid, .split { grid-template-columns: 1fr; gap: 2.5rem; }
  .feat-grid { grid-template-columns: 1fr 1fr; }
  .hl-card { transform: none; }
}
@media (max-width: 620px) {
  .l-hero { padding-top: 7rem; }
  .feat-grid { grid-template-columns: 1fr; }
}

/* ── CRM: tarjeta 3D de orden de producción y panel de ejemplo ── */
.crm-visual { position: relative; min-height: 470px; display: flex; align-items: center; justify-content: center; }
.crm-visual .orbit { position: absolute; width: 118%; max-width: 620px; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.po-card { position: relative; z-index: 2; width: min(440px, 100%); background: #fff; border-radius: 26px; padding: 1.5rem; box-shadow: 30px 40px 80px rgba(91,61,245,0.22); transform: perspective(1400px) rotateY(-13deg) rotateX(5deg) rotateZ(1.5deg); }
.po-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.2rem; }
.po-head small { display: block; font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.po-head b { font-family: 'Space Grotesk', sans-serif; font-size: 1.5rem; letter-spacing: -0.02em; }
.po-status { display: inline-flex; align-items: center; gap: 0.4rem; background: #eafbf0; color: #15803d; font-size: 0.72rem; font-weight: 700; padding: 0.3rem 0.7rem; border-radius: 999px; }
.po-status i { width: 7px; height: 7px; border-radius: 50%; background: #16a34a; }
.po-body { display: flex; align-items: center; gap: 1.4rem; padding: 1rem; background: #f7f5ff; border-radius: 18px; margin-bottom: 1.3rem; }
.po-ring { position: relative; width: 96px; height: 96px; flex-shrink: 0; }
.po-ring span { position: absolute; inset: 0; display: grid; place-items: center; font-family: 'Space Grotesk', sans-serif; font-size: 1.35rem; font-weight: 700; }
.po-meta { display: grid; gap: 0.55rem; font-size: 0.8rem; margin: 0; }
.po-meta dt { font-size: 0.66rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.po-meta dd { font-weight: 600; margin: 0; }
.po-steps { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); position: relative; margin: 0; padding: 0; }
.po-steps::before { content: ''; position: absolute; top: 8px; left: 10%; right: 10%; height: 2px; background: #e9e4ff; }
.po-steps li { position: relative; text-align: center; font-size: 0.66rem; color: var(--muted); font-weight: 600; }
.po-steps li i { display: block; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid #d9d1fb; margin: 0 auto 0.4rem; position: relative; z-index: 1; }
.po-steps li.done { color: var(--text); }
.po-steps li.done i { background: var(--accent); border-color: var(--accent); }
.po-steps li.now { color: var(--accent-2); }
.po-steps li.now i { border-color: var(--accent); box-shadow: 0 0 0 5px rgba(109,74,255,0.18); }
.chip { position: absolute; z-index: 3; background: #fff; border-radius: 999px; padding: 0.55rem 0.95rem; font-size: 0.78rem; font-weight: 600; box-shadow: 0 14px 34px rgba(91,61,245,0.18); display: inline-flex; align-items: center; gap: 0.5rem; animation: floaty 6s ease-in-out infinite; }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: #16a34a; }
.chip.warn .dot { background: #ff7a59; }
.chip b { color: var(--accent-2); }
.chip-a { top: 4%; left: -2%; } .chip-b { top: 46%; right: -8%; animation-delay: -2s; } .chip-c { bottom: 6%; left: 4%; animation-delay: -4s; }
.crm-visual .roll { position: absolute; z-index: 3; width: 140px; right: -3%; bottom: -12%; filter: drop-shadow(0 18px 24px rgba(91,61,245,0.25)); animation: floaty 7s ease-in-out infinite; animation-delay: -1s; }
.note { position: absolute; bottom: -2.2rem; left: 0; right: 0; text-align: center; font-size: 0.72rem; color: var(--muted); }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .chip, .crm-visual .roll { animation: none; } }

.mock { background: #fff; border-radius: 22px; overflow: hidden; box-shadow: 0 24px 60px rgba(91,61,245,0.16); border: 1px solid var(--border); }
.mock-bar { display: flex; align-items: center; gap: 6px; padding: 0.7rem 1rem; background: #f3f0ff; border-bottom: 1px solid var(--border); }
.mock-bar i { width: 9px; height: 9px; border-radius: 50%; background: #d3c9fb; }
.mock-bar span { margin-left: 0.6rem; font-size: 0.78rem; font-weight: 600; color: var(--muted); }
.mock-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; padding: 1rem 1rem 0.5rem; }
.mock-kpis div { background: #f7f5ff; border-radius: 12px; padding: 0.7rem 0.85rem; }
.mock-kpis b { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 1.5rem; line-height: 1.1; }
.mock-kpis small { font-size: 0.7rem; color: var(--muted); }
.mock-kpis .warn b { color: #dc2626; }
.mock-table { padding: 0.5rem 1rem 1.1rem; }
.mock-row { display: grid; grid-template-columns: 0.8fr 1.6fr 1fr 1fr; gap: 0.6rem; align-items: center; padding: 0.6rem 0; border-bottom: 1px solid var(--border); font-size: 0.78rem; }
.mock-row:last-child { border-bottom: none; }
.mock-row.head { color: var(--muted); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; }
.mock-row span:first-child { font-weight: 600; color: var(--accent-2); }
.mock-row em { display: block; height: 6px; border-radius: 3px; background: #ece8ff; position: relative; overflow: hidden; }
.mock-row em::after { content: ''; position: absolute; inset: 0; width: var(--w); background: var(--accent); border-radius: 3px; }
.mock-row em.done::after { background: var(--green); }
.mock-row em.late::after { background: #dc2626; }
.mock-cap { text-align: center; font-size: 0.74rem; color: var(--muted); margin-top: 0.8rem; }
@media (max-width: 900px) { .po-card { transform: none; } }
@media (max-width: 620px) { .po-body { gap: 0.9rem; padding: 0.8rem; } .chip-a { left: 0; } .chip-b { right: 0; } .crm-visual .roll { width: 110px; } .crm-visual { margin-bottom: 2rem; } }