/* ==========================================================================
   DISEÑO WEB — palabra gigante, capas, proyectos, comparativa
   ========================================================================== */
.kword__word .char-mask { padding: .04em .12em .18em; margin: -.04em -.12em -.18em; }
/* ---------- Palabra gigante ---------- */
.kword { display: grid; place-items: center; }
.kword__label { position: absolute; top: 110px; left: var(--gutter); margin: 0; }
.kword__word { font-family: var(--f-display); font-weight: 600; font-size: clamp(4rem, 16.5vw, 24rem); letter-spacing: -.065em; line-height: .8; white-space: nowrap; padding-bottom: .08em; }
.kword__cap { position: absolute; left: 0; right: 0; bottom: calc(var(--gutter) + 50px); text-align: center; font-family: var(--f-display); font-weight: 500; font-size: clamp(1.3rem, 2.2vw, 2rem); letter-spacing: -.02em; }
/* ---------- Servicios · anatomía por capas ---------- */
.anatomy__head { position: absolute; top: 108px; left: var(--gutter); max-width: min(34vw, 460px); z-index: 2; }
.anatomy__head .title { font-size: clamp(2.6rem, 5vw, 5.4rem); }
.anatomy__head .section__sub { font-size: .98rem; }
.anatomy__extra { display: inline-block; margin-top: 1.4rem; font-family: var(--f-mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--acid); border-bottom: 1px solid currentColor; }
.alabel { position: absolute; left: 0; top: 0; width: 380px; padding-left: 70px; margin-top: -1.4em; opacity: 0; visibility: hidden; will-change: transform, opacity; }
.alabel::before { content: ''; position: absolute; left: calc(56px - var(--lead, 56px)); top: 1.35em; width: var(--lead, 56px); height: 1px; background: linear-gradient(90deg, transparent, var(--acid) 40%); }
.alabel::after { content: ''; position: absolute; left: 52px; top: calc(1.35em - 4px); width: 9px; height: 9px; border-radius: 50%; background: var(--acid); }
.alabel .mono { color: var(--acid); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; }
.alabel h3 { font-family: var(--f-display); font-weight: 600; font-size: 1.45rem; white-space: nowrap; letter-spacing: -.03em; line-height: 1.05; margin: .25rem 0 .35rem; }
.alabel p { color: var(--smoke); font-size: .82rem; line-height: 1.4; max-width: 300px; }
/* ---------- Proyectos (escena) ---------- */
.projects-intro { padding-bottom: 6vh; }
.projects-intro__title { font-size: clamp(3.4rem, 10vw, 11rem); }
.pscene__bar { position: absolute; top: 104px; left: var(--gutter); right: var(--gutter); display: flex; align-items: center; gap: 1.6rem; z-index: 2; }
.pscene__count { color: var(--smoke); }
.pscene__count b { color: var(--bone); font-weight: 500; }
.pscene__bar > i { flex: 1; height: 1px; background: var(--line); }
.pscene__bar > i b { display: block; height: 100%; background: var(--acid); transform-origin: left; transform: scaleX(0); }
.pscene__info { position: absolute; left: var(--gutter); top: 0; bottom: 0; width: min(38vw, 520px); z-index: 2; display: grid; align-items: center; padding-top: 70px; }
.pinfo { grid-area: 1 / 1; opacity: 0; visibility: hidden; }
.pinfo:first-child { opacity: 1; visibility: visible; }
.pinfo__img { display: none; width: 100%; height: auto; object-fit: contain; border-radius: 14px; border: 1px solid var(--line); margin-bottom: 1.6rem; }
.pinfo__title { font-family: var(--f-display); font-weight: 600; font-size: clamp(2.4rem, 4.4vw, 4.8rem); letter-spacing: -.04em; line-height: .95; margin-bottom: 1.1rem; }
.pinfo__desc { color: var(--smoke); margin-bottom: 1.3rem; }
.pinfo__note { color: var(--smoke); font-size: .68rem; }
.screen-tabs { display: flex; gap: 1.2rem; color: var(--smoke); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 1.2rem; }
.screen-tabs li { position: relative; padding-bottom: 6px; transition: color .3s; }
.screen-tabs li::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--red); transform: scaleX(0); transition: transform .5s var(--ease); transform-origin: left; }
.screen-tabs li.is-active { color: var(--bone); }
.screen-tabs li.is-active::after { transform: scaleX(1); }
.meta { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 2.2rem; padding: 1.1rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 1.5rem; }
.meta dt { font-family: var(--f-mono); font-size: .68rem; color: var(--smoke); text-transform: uppercase; letter-spacing: .08em; margin-bottom: .2rem; }
.meta dd { font-size: .92rem; }
.currency { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 5px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--f-mono); font-size: .85rem; }
.currency button { position: relative; z-index: 1; padding: .7em 1.4em; border-radius: 999px; color: var(--smoke); transition: color .4s; }
.currency button.is-active { color: var(--on-acid); }
.currency__thumb { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 999px; background: var(--acid); transition: transform .6s var(--ease); }
.currency[data-active="usd"] .currency__thumb { transform: translateX(100%); }
.pricing-more { padding-top: 10vh; }
.compare__scroll { overflow-x: auto; }
.compare__table { width: 100%; min-width: 640px; border-collapse: collapse; }
.compare__table th, .compare__table td { padding: 1.05rem 1rem; text-align: center; border-bottom: 1px solid var(--line); font-weight: 400; }
.compare__table th:first-child { text-align: left; padding-left: 0; }
.compare__table thead th { font-family: var(--f-mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--smoke); }
.compare__table thead th:nth-child(3) { color: var(--acid); }
.compare__table tbody td:nth-child(3) { background: color-mix(in srgb, var(--acid) 6%, transparent); }
.compare__table .y { color: var(--acid); }
.compare__table .n { color: color-mix(in srgb, var(--smoke) 45%, transparent); }
.extras { margin-top: clamp(80px, 14vh, 160px); max-width: 900px; }
/* Escenas que pasan a lista */
.reduced .kword, .reduced .anatomy, .reduced .pscene, .no-stage .anatomy, .no-stage .pscene { height: auto; overflow: visible; }
.reduced .kword { padding: 16vh 0; display: block; text-align: center; }
.reduced .kword__label, .reduced .kword__cap { position: relative; top: auto; bottom: auto; left: auto; margin-top: 2rem; }
.reduced .anatomy, .no-stage .anatomy { padding: 120px var(--gutter) 80px; }
.reduced .anatomy__head, .no-stage .anatomy__head { position: relative; top: 0; left: 0; max-width: 700px; margin-bottom: 3rem; }
.reduced .anatomy__labels, .no-stage .anatomy__labels { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
.reduced .alabel, .no-stage .alabel { position: relative; opacity: 1 !important; visibility: visible !important; transform: none !important; width: auto; margin: 0; padding: 1.6rem; border: 1px solid var(--line); border-radius: var(--radius); }
.reduced .alabel::before, .reduced .alabel::after, .no-stage .alabel::before, .no-stage .alabel::after { display: none; }
.reduced .pscene, .no-stage .pscene { padding: 0 var(--gutter) 60px; }
.reduced .pscene__bar, .no-stage .pscene__bar { display: none; }
.reduced .pscene__info, .no-stage .pscene__info { position: relative; width: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 60px 48px; left: 0; }
.reduced .pinfo, .no-stage .pinfo { grid-area: auto; opacity: 1; visibility: visible; }
.reduced .pinfo__img, .no-stage .pinfo__img { display: block; }
@media (max-width: 900px) {
  .anatomy__head { top: 96px; max-width: none; right: var(--gutter); }
  .anatomy__head .section__sub, .anatomy__extra { display: none; }
  .anatomy__labels { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 84px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
  .alabel { position: relative; width: auto; padding: 0 0 0 14px; margin: 0; border-left: 2px solid var(--acid); }
  .alabel::before, .alabel::after, .alabel p { display: none; }
  .alabel h3 { font-size: 1.05rem; }
  .pscene { height: auto; overflow: visible; }
  .pscene { padding: 0 var(--gutter) 40px; }
  .pscene__bar { display: none; }
  .pscene__info { position: relative; left: 0; width: auto; display: grid; gap: 64px; padding-top: 0; }
  .pinfo { grid-area: auto; opacity: 1; visibility: visible; }
  .pinfo__img { display: block; }
  .reduced .pscene__info, .no-stage .pscene__info { grid-template-columns: 1fr; }
  .reduced .anatomy__labels, .no-stage .anatomy__labels { grid-template-columns: 1fr; position: relative; left: 0; right: 0; bottom: 0; }
}
@media (max-width: 600px) {
  .meta { grid-template-columns: 1fr 1fr; }
  .alabel .mono { display: none; }
  /* La tabla entra entera en el celular, sin scroll lateral escondido */
  .compare__table { min-width: 0; table-layout: fixed; font-size: .82rem; }
  .compare__table th, .compare__table td { padding: .8rem .25rem; }
  .compare__table th:first-child { width: 40%; }
  .compare__table thead th { font-size: .56rem; letter-spacing: 0; }
}