/* Identidad del despacho (presentación oct. 2026): fondo marfil luminoso, morado institucional #521B93, acentos dorados.
   Titulares en serif con la frase final en cursiva morada; texto en Montserrat. Vista clara deliberada: el despacho pide evitar fondos negros. */
:root {
  --bg: #FCFAF5; --surface: #FFFFFF; --tint: #F5F0FB; --tint-2: #EDE5F7; --cream: #FBF2DC;
  --line: #E6DFEE; --line-2: #BBAAD6;
  --fg: #231833; --muted: #5A5068; --faint: #675E73;
  --purple: #521B93; --purple-hi: #6526B0; --purple-deep: #3D1170; --lav: #C9B5EA;
  --gold: #C9A04A; --gold-hi: #E2BC66; --gold-ink: #8A6516;
  --display: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --body: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --r: 16px;
  color-scheme: light;
}
* { box-sizing: border-box }
[hidden] { display: none !important }
html { scroll-behavior: smooth }
body { background: var(--bg); color: var(--fg); font-family: var(--body); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--bg) }
h1, h2, h3 { font-family: var(--display); font-weight: 500; line-height: 1.08; margin: 0; text-wrap: balance; color: var(--fg) }
h1 { font-size: clamp(2.7rem, 5.6vw, 4.6rem); letter-spacing: -0.01em }
h2 { font-size: clamp(2.1rem, 3.6vw, 3.1rem) }
h3 { font-size: 1.5rem; font-weight: 600 }
h1 em, h2 em { font-style: italic; color: var(--purple) }
p { margin: 0 }
a { color: inherit }
:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; border-radius: 4px }
.wrap { max-width: 1200px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)) }
.skip { position: absolute; left: -999px; top: 8px; background: var(--purple); color: #FFFFFF; padding: 8px 12px; z-index: 40 }
.skip:focus { left: 12px }

.eyebrow, .label { display: inline-flex; align-items: center; gap: 12px; font-size: .74rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--purple) }
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--gold) }
.label { color: var(--faint); letter-spacing: .16em }
.eyebrow.gold, .label.gold { color: var(--gold-hi) }
.eyebrow.light, .label.light { color: #E9DFF8 }
.lead { font-size: 1.12rem; color: var(--muted); max-width: 60ch }
.muted { color: var(--muted) }
.small { font-size: .85rem; color: var(--faint) }
.fine { font-size: .78rem; color: var(--faint); max-width: 52ch }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center }

/* Botones */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px; border-radius: 999px; font: 600 .93rem/1 var(--body); text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background .2s, border-color .2s, color .2s, transform .2s }
.btn:active { transform: scale(.98) }
.btn.primary { background: var(--purple); color: #FFFFFF }
.btn.primary:hover { background: var(--purple-hi) }
.btn.ghost { background: transparent; color: var(--purple); border-color: var(--line-2) }
.btn.ghost:hover { border-color: var(--purple) }
.btn.gold { background: var(--gold-hi); color: #2B1A05 }
.btn.gold:hover { background: #EDC979 }
.btn.ghost-light { background: transparent; color: #FFFFFF; border-color: rgba(255, 255, 255, .4) }
.btn.ghost-light:hover { border-color: #FFFFFF }
.btn.full { width: 100% }
.ic { width: 20px; height: 20px; flex: none }
.ic.sm { width: 16px; height: 16px }
.ic.lg { width: 30px; height: 30px }
.ic.xl { width: 54px; height: 54px; color: var(--purple) }
.textlink { display: inline-flex; align-items: center; gap: 8px; color: var(--purple); font-weight: 600; text-decoration: none; font-size: .93rem; transition: gap .2s }
.textlink:hover { gap: 12px }
.link { background: none; border: 0; color: var(--muted); font: inherit; cursor: pointer; padding: 6px 0 }

/* Logotipo tipográfico, como en la presentación */
.logo { display: flex; flex-direction: column; text-decoration: none; line-height: 1; flex: none; color: var(--fg) }
.logo .l1, .logo .l2 { font-family: var(--display); font-weight: 600; font-size: 1.55rem; letter-spacing: .02em }
.logo .l1 em { font-style: normal; color: var(--purple); margin-left: 1px }
.logo .l2 { margin-top: -1px }
.logo .l3 { align-self: flex-end; font-size: .52rem; font-weight: 600; letter-spacing: .14em; margin-top: 3px }
.logo.light { color: #FFFFFF }
.logo.light .l1 em { color: var(--gold-hi) }

/* Encabezado */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: rgba(252, 250, 245, .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); transition: box-shadow .3s }
.top.scrolled { box-shadow: 0 10px 30px rgba(61, 17, 112, .08) }
.top-in { display: flex; align-items: center; gap: 28px; min-height: 82px }
.nav { display: flex; gap: 24px; margin-left: auto }
.nav a, .mnav nav a:not(.btn) { color: var(--muted); text-decoration: none; font-size: .88rem; font-weight: 500 }
.nav a:hover, .nav a[aria-current="page"] { color: var(--purple) }
.nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--gold); padding-bottom: 4px }
.nav-cta { min-height: 44px }
.mnav { display: none; margin-left: auto }
.mnav summary { list-style: none; cursor: pointer; width: 44px; height: 44px; display: grid; place-content: center; gap: 5px; border: 1px solid var(--line-2); border-radius: 12px }
.mnav summary::-webkit-details-marker { display: none }
.mnav summary span { display: block; width: 18px; height: 2px; background: var(--purple) }
.mnav nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: 0 20px 40px rgba(61, 17, 112, .1); display: flex; flex-direction: column; gap: 4px; padding: 12px max(20px, env(safe-area-inset-right, 0px)) 20px max(20px, env(safe-area-inset-left, 0px)) }
.mnav nav a:not(.btn) { padding: 12px 0; font-size: 1rem; border-bottom: 1px solid var(--line) }
.mnav nav .btn { margin-top: 12px }
@media (max-width: 1080px) { .nav, .nav-cta { display: none } .mnav { display: block } }

/* Héroe */
.hero { position: relative; overflow: hidden; padding-block: clamp(40px, 6vw, 72px) clamp(56px, 7vw, 88px); background: radial-gradient(60% 80% at 0% 100%, var(--tint) 0%, rgba(245, 240, 251, 0) 70%), var(--bg) }
.hero-grid { display: flex; flex-wrap: wrap; gap: 48px; align-items: center }
.hero-copy { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 24px }
.hero-media { flex: 1 1 420px; min-width: 0 }
.frame { position: relative; border-radius: 28px 28px 28px 220px; overflow: hidden; aspect-ratio: 5 / 5.2; max-width: 100%; box-shadow: 0 30px 60px rgba(61, 17, 112, .18) }
.frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4) }
.frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 40% 30%; animation: drift 22s ease-in-out infinite alternate }
@keyframes drift { from { transform: scale(1.04) } to { transform: scale(1.14) translate(-1.5%, 1%) } }
.pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--line-2); background: var(--surface); border-radius: 999px; padding: 8px 16px; font-size: .8rem; color: var(--muted) }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold) }
/* Etiqueta del héroe: entrada propia, brillo dorado que la recorre y punto que late */
.hero .pill { position: relative; overflow: hidden; animation: pill-in .9s cubic-bezier(.2, .7, .2, 1) .05s both }
.pill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(226, 188, 102, .35) 50%, transparent 70%); transform: translateX(-120%); animation: shimmer 6s ease-in-out 1.1s infinite; pointer-events: none }
.pill .dot { position: relative; animation: dot-in .5s cubic-bezier(.3, 1.6, .5, 1) .5s both }
.pill .dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--gold); animation: ping 2.4s cubic-bezier(0, 0, .2, 1) 1s infinite }
.pill-t { display: inline-block; animation: text-in .8s cubic-bezier(.2, .7, .2, 1) .35s both }
@keyframes pill-in { from { opacity: 0; transform: translateY(14px) scale(.92); filter: blur(4px) } to { opacity: 1; transform: none; filter: none } }
@keyframes dot-in { from { transform: scale(0) } to { transform: scale(1) } }
@keyframes ping { 0% { transform: scale(1); opacity: .7 } 70%, 100% { transform: scale(3.2); opacity: 0 } }
@keyframes text-in { from { opacity: 0; transform: translateX(-8px); letter-spacing: .08em } to { opacity: 1; transform: none; letter-spacing: normal } }
@keyframes shimmer { 0% { transform: translateX(-120%) } 28%, 100% { transform: translateX(120%) } }
.hero-facts { list-style: none; margin: 8px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px 32px; font-size: .88rem; color: var(--muted) }
.hero-facts strong { color: var(--purple); font-weight: 700 }
@keyframes rise { from { opacity: 0; transform: translateY(22px) } to { opacity: 1; transform: none } }
@keyframes reveal-frame { from { clip-path: inset(0 0 0 100% round 28px 28px 28px 220px); } to { clip-path: inset(0 0 0 0 round 28px 28px 28px 220px) } }
.hero-copy > * { animation: rise .8s cubic-bezier(.2, .7, .2, 1) both }
.hero-copy > :nth-child(1) { animation-delay: .05s } .hero-copy > :nth-child(2) { animation-delay: .18s } .hero-copy > :nth-child(3) { animation-delay: .32s } .hero-copy > :nth-child(4) { animation-delay: .46s } .hero-copy > :nth-child(5) { animation-delay: .6s }
.hero .frame { animation: reveal-frame 1.3s cubic-bezier(.65, 0, .25, 1) .15s both }

/* Clientes y alianzas: banda morada (los logotipos son blancos) */
.clients { background: linear-gradient(120deg, var(--purple-deep), var(--purple) 70%) }
.clients-in { display: grid; gap: 22px; padding-block: 40px }
.client-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 26px 0 }
.client-list li { flex: 0 0 136px; display: flex; justify-content: center; align-items: center; height: 52px }
.client-list img { display: block; height: 34px; width: auto; max-width: 140px; object-fit: contain; opacity: .78; transition: opacity .2s, transform .2s }
.client-list li.sq img { height: 50px }
.client-list li:hover img { opacity: 1; transform: scale(1.05) }
.allies { display: flex; flex-wrap: wrap; gap: 14px 40px; align-items: center; justify-content: center; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .15) }
.allies ul { display: flex; flex-wrap: wrap; gap: 14px 36px; list-style: none; margin: 0; padding: 0; align-items: center }
.allies img { display: block; height: 30px; width: auto; max-width: 240px; object-fit: contain; opacity: .8 }
.allies a:hover img { opacity: 1 }
@media (max-width: 640px) { .client-list li { flex-basis: 33.33%; height: 44px; min-width: 0; padding-inline: 6px } .client-list img { max-width: 100%; height: 28px } .client-list li.sq img { height: 42px } }

/* Secciones */
.sec { padding-block: clamp(64px, 9vw, 112px) }
.sec.tint { background: var(--tint) }
.sec.purple { background: radial-gradient(70% 90% at 100% 0%, rgba(201, 181, 234, .25), transparent 60%), linear-gradient(140deg, var(--purple-deep), var(--purple)); color: #EFE8F9 }
.sec.purple h2, .sec.purple h3 { color: #FFFFFF }
.sec.purple h2 em { color: var(--gold-hi) }
.sec-head { display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between; align-items: flex-end; margin-bottom: 44px }
.sec-head > div { display: flex; flex-direction: column; gap: 14px; max-width: 760px }
.split { display: flex; flex-wrap: wrap; gap: 40px 72px; align-items: flex-start }
.split-a { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 18px }
.split-b { flex: 1.4 1 420px; min-width: 0 }
.prose { display: flex; flex-direction: column; gap: 18px; color: var(--muted); font-size: 1.05rem; max-width: 66ch }
.prose.wide { flex: 2 1 480px }
.statement { font-family: var(--display); font-size: 1.7rem; line-height: 1.3; color: var(--purple); font-style: italic }

/* Pilares, audiencia, valores */
.pillars, .audience, .values, .fees, .pmv { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)) }
.values { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)) }
.fees { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)) }
.pillar, .aud, .value, .fee, .pmv article { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 30px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 1px 0 rgba(61, 17, 112, .03) }
.pillar p, .aud p, .value p, .fee p:not(.tag-s), .pmv p:not(.eyebrow) { color: var(--muted); font-size: .95rem }
.pillar .ic { color: var(--purple); background: var(--tint); padding: 10px; width: 50px; height: 50px; border-radius: 14px }
.pillar { border-top: 3px solid var(--gold) }
.aud .textlink { margin-top: auto }
.pmv article p:not(.eyebrow) { font-family: var(--display); font-size: 1.3rem; line-height: 1.4; color: var(--fg) }
.sectors { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center }
.sectors ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0 }
.sectors li { border: 1px solid var(--line-2); background: var(--surface); border-radius: 999px; padding: 6px 14px; font-size: .82rem; color: var(--muted) }
.sectors li:nth-child(4n+1) { background: var(--cream); border-color: #F0DFB2 }
.tag-s { font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-ink) }
.fee.feat { background: linear-gradient(150deg, var(--purple), var(--purple-deep)); border-color: var(--purple); color: #FFFFFF }
.fee.feat h3 { color: #FFFFFF }
.fee.feat p:not(.tag-s) { color: #E6DAF6 }
.fee.feat .tag-s { align-self: flex-start; background: var(--gold-hi); color: #2B1A05; padding: 4px 10px; border-radius: 999px }

/* Servicios */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 18px }
.svc-grid.small { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)) }
.svc { display: flex; flex-direction: column; gap: 10px; padding: 28px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); text-decoration: none; transition: border-color .2s, transform .25s, box-shadow .25s }
.sec.tint .svc { background: var(--surface) }
.svc .ic { width: 30px; height: 30px; color: var(--purple); transition: transform .3s }
.svc:hover { border-color: var(--lav); transform: translateY(-3px); box-shadow: 0 18px 40px rgba(61, 17, 112, .1) }
.svc:hover .ic { transform: translateY(-2px) rotate(-6deg) }
.svc-name { font-family: var(--display); font-size: 1.6rem; font-weight: 600; line-height: 1.15 }
.svc-short { color: var(--muted); font-size: .93rem; flex: 1 }
.svc.small .svc-name { font-size: 1.35rem }
.svc.small .svc-short { font-size: .88rem }
.more { display: inline-flex; gap: 6px; align-items: center; color: var(--purple); font-weight: 600; font-size: .86rem }

/* Coaching Legal: pasos sobre morado, tarjetas translúcidas */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 16px }
.steps li { position: relative; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--r); padding: 24px; display: flex; flex-direction: column; gap: 8px; overflow: hidden }
.steps .n { font-size: .72rem; font-weight: 700; letter-spacing: .14em; color: var(--gold-hi) }
.steps p { color: #E3D7F4; font-size: .93rem }
.steps li::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--gold-hi); transform: scaleX(0); transform-origin: left; transition: transform 1s cubic-bezier(.2, .7, .2, 1) calc(var(--d, 0ms) + .25s) }
.steps li.in::after, .steps li:not(.rv)::after { transform: scaleX(1) }
.sec:not(.purple) .steps li { background: var(--surface); border-color: var(--line) }
.sec:not(.purple) .steps p { color: var(--muted) }
.sec:not(.purple) .steps .n { color: var(--gold-ink) }
.pquote { margin: 12px 0 0; padding-left: 20px; border-left: 2px solid var(--gold-hi); font-family: var(--display); font-style: italic; font-size: 1.35rem; line-height: 1.4; color: #FFFFFF }
.pquote.dark { color: var(--purple); border-color: var(--gold) }

/* Socio */
.socio { display: flex; flex-wrap: wrap; gap: 40px 64px; align-items: stretch }
.socio-card { flex: 1 1 300px; min-height: 380px; border-radius: 22px; padding: 32px; background: radial-gradient(80% 60% at 30% 20%, rgba(201, 181, 234, .35), transparent 60%), linear-gradient(160deg, var(--purple-hi), var(--purple-deep)); display: flex; flex-direction: column; justify-content: space-between; color: #FFFFFF; position: relative; overflow: hidden }
.mono { font-family: var(--display); font-size: clamp(7rem, 14vw, 10rem); line-height: .8; font-weight: 600; color: #FFFFFF; letter-spacing: -.12em }
.mono em { font-style: normal; color: var(--gold-hi) }
.socio-name { font-family: var(--display); font-size: 1.6rem; line-height: 1.2; margin-bottom: 8px }
.socio-text { flex: 1.5 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 20px }
.edu { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px }
.edu div { background: var(--tint); border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px }
.edu strong { font-family: var(--display); font-size: 1.25rem; color: var(--purple); font-weight: 600 }
.edu span { font-size: .84rem; color: var(--muted) }
.bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px }
.bullets li { position: relative; padding-left: 22px; color: var(--muted); font-size: .96rem }
.bullets li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; border-radius: 50%; background: var(--gold) }

/* En lugar de… */
.instead { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column }
.instead li { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--line-2) }
.instead li:first-child { border-top: 1px solid var(--line-2) }
.was { color: var(--faint); font-size: .95rem }
.is { font-family: var(--display); font-size: 1.55rem; font-weight: 600; color: var(--purple) }

/* Agenda jurídica */
.agenda-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px }
.agenda-list li { display: flex; gap: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 24px }
.agenda-list .n { font-family: var(--display); font-size: 2rem; line-height: 1; color: var(--purple) }
.agenda-list h3 { font-size: 1.35rem; margin-bottom: 6px }
.agenda-list p { color: var(--muted); font-size: .92rem }
.agenda-list .q { margin-top: 8px; font-family: var(--display); font-style: italic; font-size: 1.15rem; color: var(--purple) }

/* Filosofía */
.philo { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 14px }
.philo li { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--purple); border-radius: var(--r); padding: 24px; display: flex; flex-direction: column; gap: 8px }
.philo li:nth-child(2) { border-top-color: var(--gold) }
.philo li:nth-child(3) { border-top-color: var(--lav) }
.philo p:not(.tag-s) { color: var(--muted); font-size: .92rem }

/* Startups: globos de fondo con acercamiento lento */
.startups { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(84px, 11vw, 140px); color: #FFFFFF }
.bg-zoom { position: absolute; inset: 0; z-index: -2; background: url("../img/emprender.webp") 60% 40% / cover no-repeat var(--purple); transform-origin: 72% 35%; animation: kenburns 26s ease-in-out infinite alternate; will-change: transform }
.startups::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(61, 17, 112, .9) 0%, rgba(82, 27, 147, .62) 50%, rgba(82, 27, 147, .1) 100%) }
@keyframes kenburns { from { transform: scale(1) } to { transform: scale(1.18) translate(-2%, -1.5%) } }
.startups h2 { color: #FFFFFF }
.startups .split-a p:not(.eyebrow) { color: #EFE7FA; max-width: 46ch }
.startups .btn { align-self: flex-start }
.mini-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 12px }
.mini-plan { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 18px 20px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 14px; text-decoration: none; background: rgba(255, 255, 255, .12); backdrop-filter: blur(8px); color: #FFFFFF; transition: background .2s }
.mini-plan:hover { background: rgba(255, 255, 255, .22) }
.mini-plan strong { font-family: var(--display); font-size: 1.45rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap }
@media (max-width: 900px) { .startups::after { background: linear-gradient(rgba(61, 17, 112, .82), rgba(61, 17, 112, .9)) } }

/* Planes */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 16px; align-items: start }
.plan { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 14px }
.plan h2 { font-size: 1.75rem }
.plan.featured { background: linear-gradient(160deg, var(--purple), var(--purple-deep)); border-color: var(--purple); color: #FFFFFF; box-shadow: 0 24px 50px rgba(61, 17, 112, .25) }
.plan.featured h2, .plan.featured .price { color: #FFFFFF }
.plan.featured .muted, .plan.featured .checks, .plan.featured .small { color: #E6DAF6 }
.plan.featured .btn.primary { background: var(--gold-hi); color: #2B1A05 }
.tag { align-self: flex-start; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: var(--gold-hi); color: #2B1A05; padding: 5px 12px; border-radius: 999px }
.price { font-family: var(--display); font-size: 2.6rem; font-weight: 600; line-height: 1; color: var(--purple); font-variant-numeric: tabular-nums }
.price span { font-family: var(--body); font-size: .8rem; color: var(--faint); font-weight: 600 }
.plan.featured .price span { color: #D9C8F2 }
.checks { list-style: none; margin: 4px 0 8px; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: .92rem; color: var(--muted) }
.checks li { display: flex; gap: 10px; align-items: flex-start }
.checks .ic { color: var(--gold); margin-top: 4px }
.foot-note { margin-top: 26px; color: var(--muted); font-size: .92rem }

/* Blog */
.posts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column }
.posts.three { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 18px }
.posts.three .post a { height: 100%; border: 1px solid var(--line); border-radius: var(--r); padding: 26px; background: var(--surface); transition: box-shadow .25s, transform .25s }
.posts.three .post a:hover { box-shadow: 0 18px 40px rgba(61, 17, 112, .1); transform: translateY(-3px) }
.post a { display: flex; flex-direction: column; gap: 8px; padding: 20px 0; border-bottom: 1px solid var(--line); text-decoration: none }
.post a:hover .post-title { color: var(--purple) }
.post-meta { font-size: .78rem; color: var(--faint); font-weight: 500 }
.post-title { font-family: var(--display); font-size: 1.4rem; font-weight: 600; line-height: 1.25 }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px }
.chip { font: 600 .82rem var(--body); color: var(--muted); background: var(--surface); border: 1px solid var(--line-2); border-radius: 999px; padding: 9px 16px; cursor: pointer; min-height: 40px }
.chip[aria-pressed="true"] { background: var(--purple); border-color: var(--purple); color: #FFFFFF }

/* Páginas interiores */
.page-head { padding-block: clamp(52px, 7vw, 92px) clamp(36px, 4vw, 56px); background: radial-gradient(60% 100% at 100% 0%, var(--tint) 0%, rgba(245, 240, 251, 0) 70%), var(--bg); border-bottom: 1px solid var(--line) }
.page-head .wrap { display: flex; flex-direction: column; gap: 18px }
.crumbs { font-size: .82rem; color: var(--faint) }
.crumbs a { color: var(--muted); text-decoration: none }
.crumbs a:hover { color: var(--purple) }
.svc-head { display: flex; gap: 24px; align-items: flex-start }
.svc-head > div { display: flex; flex-direction: column; gap: 14px; min-width: 0 }
.side { gap: 24px }
.side-block { display: flex; flex-direction: column; gap: 12px }
.box { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 26px; box-shadow: 0 18px 40px rgba(61, 17, 112, .06) }
.side-t { font-family: var(--display); font-size: 1.45rem; font-weight: 600 }
.note-box { border: 1px dashed var(--line-2); border-radius: 14px; padding: 20px; display: flex; flex-direction: column; gap: 8px; color: var(--faint) }
.photo-img { display: block; width: 100%; max-width: 100%; object-fit: cover; border-radius: 20px; background: var(--tint) }
.photo-img.tall { aspect-ratio: 4 / 5 }
.photo-img.banner { aspect-ratio: 21 / 8; margin-top: 12px; transition: transform .8s cubic-bezier(.2, .7, .2, 1) }
@media (hover: hover) { .photo-img.banner.in:hover, .photo-img.banner:not(.rv):hover { transform: scale(1.012) } }
@media (max-width: 640px) { .photo-img.banner { aspect-ratio: 16 / 9 } }
.contact-info { gap: 28px }
.ci { display: flex; gap: 16px; align-items: flex-start }
.ci > .ic { color: var(--purple); margin-top: 2px; width: 24px; height: 24px }
.ci > div { display: flex; flex-direction: column; gap: 10px; min-width: 0; align-items: flex-start }
.big-t { font-family: var(--display); font-size: 2rem; font-weight: 600; color: var(--purple); user-select: all; font-variant-numeric: tabular-nums }
.mail-t { font-weight: 600; user-select: all; overflow-wrap: anywhere }
.cform { display: flex; flex-direction: column; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 30px; box-shadow: 0 24px 50px rgba(61, 17, 112, .08) }
.form-t { font-size: 2rem; margin-bottom: 10px }
.cform .btn { margin-top: 8px }
.cform .small a { color: var(--purple) }

/* Formularios y diagnóstico */
label { font-size: .82rem; font-weight: 600; color: var(--muted) }
input, textarea { font: 400 1rem var(--body); color: var(--fg); background: var(--bg); border: 1px solid var(--line-2); border-radius: 12px; padding: 13px 14px; width: 100%; margin-bottom: 6px }
input:focus, textarea:focus { outline: 2px solid var(--purple); outline-offset: 0; border-color: transparent }
.diag { flex: 1 1 340px; min-width: 0; background: var(--surface); color: var(--fg); border-radius: 22px; padding: 28px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 30px 60px rgba(30, 8, 60, .35) }
.diag-title { font-size: 1.8rem }
.diag-step { font-size: .82rem; color: var(--faint) }
.diag fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0 }
.diag legend { font-weight: 600; margin-bottom: 10px; padding: 0 }
.opts { display: flex; flex-direction: column; gap: 8px }
.opt { text-align: left; font: 500 .93rem var(--body); background: var(--bg); color: var(--fg); border: 1px solid var(--line-2); border-radius: 12px; padding: 13px 16px; cursor: pointer; min-height: 48px; transition: border-color .2s, background .2s }
.opt:hover { border-color: var(--purple) }
.opt[aria-pressed="true"] { border-color: var(--purple); background: var(--tint) }
.diag-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap }
.diag-done { display: flex; flex-direction: column; gap: 10px }
.done-t { font-weight: 700; font-size: 1.05rem }
.err { color: #A3243A; font-size: .9rem }

/* Banda final */
.band { background: radial-gradient(60% 80% at 100% 100%, rgba(226, 188, 102, .18), transparent 60%), linear-gradient(140deg, var(--purple-deep), var(--purple)); color: #EFE8F9; padding-block: clamp(64px, 9vw, 104px) }
.band-in { display: flex; flex-wrap: wrap; gap: 48px; align-items: center }
.band-text { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 18px }
.band h2 { color: #FFFFFF; font-size: clamp(2.4rem, 4.4vw, 3.6rem) }
.band-contact { font-size: .92rem; color: #D9C8F2; overflow-wrap: anywhere }
.band .diag h2 { color: var(--fg); font-size: 1.8rem }
.instead li { flex-direction: column; gap: 2px }

/* Pie */
.foot { background: #2A0C4E; color: #D9C8F2; padding-block: 60px 24px; font-size: .9rem }
.foot-in { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 32px }
.foot-in > div { display: flex; flex-direction: column; gap: 10px; min-width: 0 }
.foot-in a:not(.logo) { color: #D9C8F2; text-decoration: none }
.foot-in a:not(.logo):hover { color: var(--gold-hi) }
.foot-lema { font-family: var(--display); font-style: italic; font-size: 1.25rem; color: #FFFFFF; margin-top: 10px }
.foot-dir { color: #B8A6D3; font-size: .85rem }
.foot-b { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; margin-top: 44px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .12); color: #B8A6D3; font-size: .82rem }
.foot-b a { color: #B8A6D3 }
.credit { padding-top: 14px; text-align: center }
.credit a { font-size: .74rem; color: #9C88BC; text-decoration: none; letter-spacing: .02em }
.credit a:hover { color: var(--gold-hi) }
.credit strong { font-weight: 600 }

.wa-float { position: fixed; right: calc(20px + env(safe-area-inset-right, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); width: 58px; height: 58px; border-radius: 50%; background: #25A162; color: #FFFFFF; display: grid; place-items: center; box-shadow: 0 10px 26px rgba(30, 8, 60, .3); z-index: 25; transition: transform .2s }
.wa-float:hover { transform: scale(1.06) }
.wa-float .ic { width: 28px; height: 28px }
.view { animation: fade .3s ease }
@keyframes fade { from { opacity: .4 } to { opacity: 1 } }

/* Aparición al desplazarse: solo lo que está fuera de la primera pantalla */
.rv { opacity: 0; transform: translateY(28px); transition: opacity .75s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms), transform .75s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms) }
.rv.in { opacity: 1; transform: none }
.photo-img.rv { transform: scale(1.06); clip-path: inset(10% 0 0 0 round 20px); transition: opacity .9s ease var(--d, 0ms), transform 1.4s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms), clip-path 1.1s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms) }
.photo-img.rv.in { transform: none; clip-path: inset(0 0 0 0 round 20px) }
.client-list li.rv { transform: translateY(12px) scale(.94) }
.client-list li.rv.in { transform: none }
@media (max-width: 560px) { .svc-head { flex-direction: column } .diag, .cform { padding: 22px } .row .btn { flex: 1 1 auto } .frame { border-radius: 24px 24px 24px 120px } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } *, *::before, *::after { transition: none !important; animation: none !important } .rv { opacity: 1 !important; transform: none !important; clip-path: none !important } .steps li::after { transform: scaleX(1) } }

/* Submenú de servicios */
.nav { align-items: center }
.dd { position: relative }
.dd > a { display: inline-flex; align-items: center; gap: 4px }
.chev { width: 14px; height: 14px; transition: transform .25s }
.dd:hover .chev, .dd:focus-within .chev { transform: rotate(180deg) }
.dd-menu { position: absolute; top: calc(100% + 18px); left: 50%; width: min(640px, 90vw); background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 30px 60px rgba(61, 17, 112, .16); padding: 14px; opacity: 0; visibility: hidden; transform: translate(-50%, 8px); transition: opacity .2s, transform .25s cubic-bezier(.2, .7, .2, 1), visibility .2s; z-index: 30 }
.dd-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -20px; height: 20px }
.dd:hover .dd-menu, .dd:focus-within .dd-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0) }
.dd.closed .dd-menu { opacity: 0; visibility: hidden; transform: translate(-50%, 8px) }
.dd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px }
.dd-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 12px; text-decoration: none; transition: background .15s }
.dd-item:hover, .dd-item:focus-visible { background: var(--tint) }
.dd-item .ic { color: var(--purple); margin-top: 2px }
.dd-item strong { display: block; font-family: var(--display); font-size: 1.15rem; font-weight: 600; color: var(--fg); line-height: 1.2 }
.dd-item small { display: block; font-size: .76rem; color: var(--muted); line-height: 1.4; margin-top: 2px }
.dd-foot { border-top: 1px solid var(--line); margin-top: 8px; padding: 12px 12px 4px }
.dd-foot a { font-size: .82rem; font-weight: 600; color: var(--purple); text-decoration: none }
.nav .dd-menu a { box-shadow: none; padding-bottom: 12px }
.nav .dd-foot a { padding-bottom: 0 }
.m-sub { display: flex; flex-direction: column; padding: 4px 0 8px 16px; border-left: 2px solid var(--gold); margin: 4px 0 8px 4px }
.mnav nav .m-sub a { border-bottom: 0; padding: 9px 0; font-size: .93rem }
.mnav nav { max-height: calc(100vh - 100px); overflow-y: auto }

/* Programa de apoyo a startups */
.support-badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px 8px 12px; border-radius: 999px; background: var(--gold-hi); color: #2B1A05; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; box-shadow: 0 8px 24px rgba(30, 8, 60, .25) }
.support-badge .ic { width: 16px; height: 16px }
.plans-teaser { display: flex; flex-direction: column; gap: 14px }
.teaser-label { display: inline-flex; align-items: center; gap: 12px; font-size: .74rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-hi) }
.teaser-label::before { content: ""; width: 26px; height: 1px; background: var(--gold-hi) }
.teaser-note { font-size: .82rem; color: #E3D7F4; max-width: 56ch; padding-left: 14px; border-left: 2px solid rgba(226, 188, 102, .7) }

.startups .btn.ghost-light { border-color: rgba(255, 255, 255, .75); border-width: 1.5px }
.startups .btn.ghost-light:hover { background: rgba(255, 255, 255, .12); border-color: #FFFFFF }
.client-list li.wide { flex-basis: 172px }
.client-list li.wide img { height: 26px; max-width: 166px }
@media (max-width: 640px) { .client-list li.wide { flex-basis: 33.33% } .client-list li.wide img { height: 20px; max-width: 100% } }
.client-list { column-gap: 14px }
.client-list li img { max-width: 128px }
.client-list li.wide img { max-width: 166px }
@media (max-width: 640px) { .client-list { column-gap: 0 } .client-list li img, .client-list li.wide img { max-width: 100% } }

/* Blog: tarjetas con foto */
.post a { flex-direction: row; gap: 22px; align-items: center }
.post-img { flex: 0 0 220px; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: var(--tint) }
.post-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1) }
.post a:hover .post-img img { transform: scale(1.06) }
.post-body { display: flex; flex-direction: column; gap: 8px; min-width: 0 }
.post-read { font-size: .8rem; font-weight: 600; color: var(--purple) }
.posts.three .post a { flex-direction: column; align-items: stretch; padding: 0; overflow: hidden; gap: 0 }
.posts.three .post-img { flex: none; border-radius: 0; aspect-ratio: 16 / 9 }
.posts.three .post-body { padding: 22px 24px 24px }
.side .posts .post a { gap: 14px }
.side .post-img { flex-basis: 84px; border-radius: 10px }
.side .post-title { font-size: 1.1rem }
.side .post-read { display: none }
@media (max-width: 640px) { .posts.list .post a { flex-direction: column; align-items: stretch; gap: 14px } .posts.list .post-img { flex: none } }

/* Artículo */
.art-title, .art-meta { max-width: 30ch }
.art-meta { max-width: none }
@media (min-width: 900px) { .art-sec .side { position: sticky; top: calc(100px + env(safe-area-inset-top, 0px)) } }
.art-title { font-size: clamp(2.2rem, 4.6vw, 3.6rem) }
.art-meta { font-size: .85rem; color: var(--faint) }
.art-hero { display: block; width: 100%; max-width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: 20px; margin-top: 14px; box-shadow: 0 24px 50px rgba(61, 17, 112, .14) }
.art-sec { padding-top: clamp(40px, 6vw, 64px) }
.art-body { flex: 2 1 520px; display: flex; flex-direction: column; gap: 18px; font-size: 1.05rem; line-height: 1.8; color: #3A3046; max-width: 70ch }
.art-body h2, .art-body h3, .art-body h4 { margin-top: 18px; color: var(--fg) }
.art-body h2 { font-size: 2rem } .art-body h3 { font-size: 1.6rem } .art-body h4 { font-size: 1.3rem }
.art-body p, .art-body ul, .art-body ol, .art-body blockquote, .art-body table { margin: 0 }
.art-body ul, .art-body ol { padding-left: 1.3em; display: flex; flex-direction: column; gap: 8px }
.art-body li::marker { color: var(--gold) }
.art-body strong, .art-body b { color: var(--fg) }
.art-body a { color: var(--purple); text-decoration-color: var(--lav); text-underline-offset: 3px; overflow-wrap: anywhere }
.art-body blockquote { border-left: 2px solid var(--gold); padding: 4px 0 4px 20px; font-family: var(--display); font-style: italic; font-size: 1.3rem; line-height: 1.5; color: var(--purple) }
.art-body table { display: block; overflow-x: auto; border-collapse: collapse; font-size: .9rem }
.art-body td, .art-body th { border: 1px solid var(--line); padding: 8px 10px; vertical-align: top }
.art-disclaimer { margin-top: 14px; padding: 16px 18px; border-radius: 12px; background: var(--tint); font-size: .85rem !important; line-height: 1.6; color: var(--muted) }
.small-p { font-size: .9rem }
.side .box .textlink { margin-top: 4px }
.art-note { padding: 14px 18px; border-radius: 12px; background: var(--cream); border: 1px solid #F0DFB2; font-size: .9rem !important; line-height: 1.6; color: #5B4512 }
.art-note strong { color: #5B4512 }
.legal-body { max-width: 78ch; font-size: .98rem }
.art-lead { max-width: 62ch; font-size: 1.15rem; color: var(--muted) }
.prose-h { font-size: clamp(1.6rem, 2.6vw, 2.1rem); color: var(--fg); margin-bottom: 4px }
.svc .svc-name { margin: 0 }
.prose .steps { margin-top: 8px }
.prose .steps li { background: var(--surface); border-color: var(--line) }
.prose .steps p { color: var(--muted) } .prose .steps .n { color: var(--gold-ink) }
.prose .steps li::after { background: var(--gold) }
input, textarea { border-color: #9784BC }
.legal-body ol.alpha { list-style: none; counter-reset: al; padding-left: 2em }
.legal-body ol.alpha > li { counter-increment: al; position: relative }
.legal-body ol.alpha > li::before { content: counter(al, lower-alpha) ")"; position: absolute; left: -1.8em; color: var(--gold-ink, #8A6516); font-weight: 600 }
.legal-body h2 { font-size: 1.7rem; margin-top: 28px }
.socio-card.has-photo { padding: 0; justify-content: flex-end; min-height: 440px; background: var(--purple-deep) }
.socio-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22% }
.socio-cap { position: relative; padding: 96px 32px 28px; background: linear-gradient(to top, rgba(42, 12, 78, .92) 0%, rgba(42, 12, 78, .7) 55%, transparent) }
.split.mid { align-items: center }
.photo-img.land { aspect-ratio: 4 / 3; height: auto }