/* ============================================================
   AGENTES IA (especialidad, banda oscura) + CÓMO TRABAJO (proceso)
   ============================================================ */

/* ── AI Agents — featured dark band ───────────────────── */
.agents { position: relative; overflow: hidden; }
.agents.section-dark { background: linear-gradient(160deg, #10131F 0%, #171426 45%, #241A2A 100%); }
.agents::before {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5;
    background-image: linear-gradient(rgba(212,165,110,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(212,165,110,0.05) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(70% 70% at 70% 30%, #000, transparent);
            mask-image: radial-gradient(70% 70% at 70% 30%, #000, transparent);
}
.agents .wrap { position: relative; z-index: 1; }
.agents .sec-head { border-top-color: rgba(232,196,154,0.3); }
.agents .sec-head .marker { color: var(--accent-lt); }
.agents .sec-head .title { color: #FBF4EA; }
.agents .sec-head .title em { color: var(--accent-lt); }
.agents-lead { color: var(--on-dark-mut); font-size: clamp(1.1rem, 2vw, 1.4rem); line-height: 1.55; font-weight: 300; max-width: 60ch; margin: -2rem 0 3rem; }
.agents-lead em { color: var(--accent-lt); font-style: italic; }
.agents-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
.agent-card {
    position: relative; padding: 1.9rem 1.7rem; border-radius: var(--r-lg);
    background: rgba(255,247,238,0.04); border: 1px solid rgba(232,196,154,0.16);
    transition: transform 0.5s var(--cinema), border-color 0.4s, background 0.4s; overflow: hidden;
}
.agent-card:hover { transform: translateY(-6px); border-color: rgba(232,196,154,0.4); background: rgba(255,247,238,0.07); }
.agent-icon {
    width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 1.1rem;
    background: rgba(232,196,154,0.12); color: var(--accent-lt); font-size: 1.2rem;
    border: 1px solid rgba(232,196,154,0.22);
}
.agent-card h3 { color: #FBF4EA; font-size: 1.4rem; letter-spacing: -0.02em; margin-bottom: 0.6rem; }
.agent-card p { color: var(--on-dark-mut); font-size: 0.96rem; line-height: 1.6; font-weight: 300; }
.agents-cta { margin-top: 2.6rem; display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.agents .btn-ghost { color: #FBF4EA; border-color: rgba(255,247,238,0.34); }
.agents .btn-ghost:hover { border-color: var(--accent-lt); color: var(--accent-lt); }

/* animated agent orbit motif */
.agent-orbit { position: absolute; right: -60px; top: -60px; width: 260px; height: 260px; z-index: 0; opacity: 0.5; pointer-events: none; }
.agent-orbit .ring { fill: none; stroke: rgba(232,196,154,0.25); }
.agent-orbit .node { fill: var(--accent-lt); }
.agent-orbit .spin { transform-box: fill-box; transform-origin: center; animation: orbitSpin 14s linear infinite; }
.agent-orbit .spin2 { animation-duration: 22s; animation-direction: reverse; }
@keyframes orbitSpin { to { transform: rotate(360deg); } }
@media (max-width: 900px) { .agents-grid { grid-template-columns: 1fr; } .agents-lead { margin-top: -1rem; } }
[data-motion="reduced"] .agent-orbit .spin { animation: none; }

/* ── Cómo trabajo — proceso ───────────────────────────── */
.process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); position: relative; }
.process-steps::before { content: ''; position: absolute; left: 0; right: 0; top: 26px; height: 1px; background: var(--hairline-strong); }
.pstep { position: relative; padding-top: 3.4rem; }
.pstep-num {
    position: absolute; top: 0; left: 0; width: 52px; height: 52px; border-radius: 50%;
    display: grid; place-items: center; background: var(--card-solid); border: 1px solid var(--hairline-strong);
    font-family: var(--f-display); font-style: italic; font-size: 1.3rem; color: var(--accent-dk); z-index: 1;
    transition: transform 0.5s var(--spring), border-color 0.3s, background 0.3s;
}
.pstep:hover .pstep-num { transform: scale(1.1); border-color: var(--accent); background: var(--accent); color: #fff; }
[data-theme="dark"] .pstep:hover .pstep-num { color: var(--ink); }
.pstep h3 { font-size: 1.25rem; letter-spacing: -0.02em; margin-bottom: 0.5rem; }
.pstep p { font-size: 0.95rem; line-height: 1.6; color: var(--on-light-mut); font-weight: 300; text-wrap: pretty; }
.pstep .pstep-meta { font-family: var(--f-mono); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-dk); margin-top: 0.7rem; display: block; }
@media (max-width: 820px) { .process-steps { grid-template-columns: 1fr 1fr; } .process-steps::before { display: none; } }
@media (max-width: 460px) { .process-steps { grid-template-columns: 1fr; } }

/* ── AI Agents page hero (agents.html) ── */
.ag-hero { position: relative; overflow: hidden; padding: 140px 0 5rem; background: linear-gradient(160deg, #10131F, #1B1730 50%, #2A1C2E); color: var(--on-dark); }
.ag-hero::before {
    content: ''; position: absolute; inset: 0; opacity: .5;
    background-image: linear-gradient(rgba(212,165,110,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(212,165,110,.05) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(60% 70% at 75% 25%, #000, transparent);
    mask-image: radial-gradient(60% 70% at 75% 25%, #000, transparent);
}
.ag-hero .wrap { position: relative; z-index: 1; }
.ag-eyebrow {
    font-family: var(--f-mono); font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
    color: var(--accent-lt); display: inline-flex; align-items: center; gap: .7rem; margin-bottom: 1.4rem;
}
.ag-eyebrow::before { content: ''; width: 32px; height: 1px; background: var(--accent-lt); }
.ag-hero h1 { font-size: clamp(2.8rem, 8vw, 6rem); line-height: .92; letter-spacing: -.05em; color: #FBF4EA; margin-bottom: 1.4rem; max-width: 16ch; }
.ag-hero h1 em { color: var(--accent-lt); font-style: italic; }
.ag-hero p { color: var(--on-dark-mut); font-size: clamp(1.1rem, 2vw, 1.4rem); line-height: 1.55; font-weight: 300; max-width: 56ch; margin-bottom: 2.2rem; }
.ag-hero p em { color: var(--accent-lt); font-style: italic; }
.uc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
.uc {
    padding: 1.8rem 1.6rem; border: 1px solid var(--hairline); border-radius: var(--r-lg);
    background: var(--card-bg); backdrop-filter: blur(8px);
    transition: transform .5s var(--cinema), box-shadow .5s, border-color .4s;
}
.uc:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.uc .ic {
    width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 1rem;
    background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-dk); font-size: 1.15rem;
}
.uc h3 { font-size: 1.3rem; letter-spacing: -.02em; margin-bottom: .5rem; }
.uc p { font-size: .95rem; line-height: 1.6; color: var(--on-light-mut); font-weight: 300; }
@media (max-width: 900px) { .uc-grid { grid-template-columns: 1fr; } }

/* ── Planes (modelo mixto setup + mensual) ───────────────────────────── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.plans-intro { font-size: .98rem; line-height: 1.65; color: var(--on-light-mut); font-weight: 300; max-width: 40ch; margin: 0 0 0 auto; text-wrap: pretty; }
.plans-intro em { color: var(--accent-dk); font-style: italic; }

.plans-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); margin-top: 3rem; align-items: start; }
.plan-card {
    position: relative; display: flex; flex-direction: column; padding: 2rem 1.7rem;
    border: 1px solid var(--hairline); border-radius: var(--r-lg); background: var(--card-bg);
    box-shadow: var(--sh-md); transition: transform .5s var(--cinema), border-color .4s, box-shadow .4s;
}
.plan-card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--accent) 40%, transparent); box-shadow: var(--sh-lg); }
.plan-card.is-featured {
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
    background: color-mix(in srgb, var(--accent) 6%, var(--card-bg));
    box-shadow: 0 18px 50px -22px color-mix(in srgb, var(--accent) 60%, transparent);
}
.plan-card.is-featured::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; border-radius: var(--r-lg) 0 0 var(--r-lg); background: var(--accent); }
.plan-badge {
    position: absolute; top: -11px; left: 1.7rem; padding: .28rem .8rem; border-radius: 100px;
    font-family: var(--f-mono); font-size: .58rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
    background: var(--accent); color: var(--ink); box-shadow: var(--sh-md);
}
.plan-head { margin-bottom: 1.3rem; }
.plan-name { font-family: var(--f-display); font-size: 1.7rem; letter-spacing: -.03em; color: var(--on-light); margin: 0 0 .5rem; }
.plan-ideal { font-size: .9rem; line-height: 1.5; color: var(--on-light-mut); font-weight: 300; text-wrap: pretty; margin: 0; }

.plan-price { padding: 1rem 0 1.1rem; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); margin-bottom: 1.3rem; }
.pp-row { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.pp-pre { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--on-light-mut); }
.pp-num { font-family: var(--f-display); font-size: 2.6rem; line-height: 1; letter-spacing: -.04em; color: var(--on-light); }
.pp-uf { font-family: var(--f-display); font-size: 1.1rem; color: var(--accent-dk); font-style: italic; }
.pp-tag { font-family: var(--f-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--on-light-mut); align-self: center; padding: .2rem .5rem; border: 1px solid var(--hairline); border-radius: 100px; }
.pp-month { font-size: .86rem; color: var(--on-light-mut); margin-top: .5rem; }

.plan-feats { list-style: none; padding: 0; margin: 0 0 1.6rem; display: grid; gap: .65rem; }
.plan-feats li { display: flex; gap: .6rem; font-size: .9rem; line-height: 1.45; color: var(--on-light); text-wrap: pretty; }
.plan-feats li i { color: var(--accent-dk); font-size: .72rem; margin-top: .32rem; flex-shrink: 0; }
.plan-cta { margin-top: auto; width: 100%; justify-content: center; }

.plans-foot { margin-top: 2rem; font-size: .9rem; line-height: 1.6; color: var(--on-light-mut); text-align: center; text-wrap: pretty; }
.plans-foot a { color: var(--accent-dk); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) { .plans-grid { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; } }

/* ── Tablas de referencia de mercado ─────────────────────────────────── */
.priceref-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); margin-top: 3rem; align-items: start; }
.priceref-card { border: 1px solid var(--hairline); border-radius: var(--r-lg); background: var(--card-bg); box-shadow: var(--sh-md); overflow: hidden; }
.priceref-card h3 {
    display: flex; align-items: center; gap: .6rem; margin: 0; padding: 1.1rem 1.4rem;
    font-family: var(--f-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--on-light); border-bottom: 1px solid var(--hairline);
}
.priceref-card h3 i { font-size: .9rem; opacity: .85; color: var(--accent-dk); }
.ptable-wrap { overflow-x: auto; }
.ptable { width: 100%; border-collapse: collapse; font-size: .9rem; }
.ptable thead th {
    font-family: var(--f-mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--on-light-mut); font-weight: 500; text-align: left; padding: .7rem 1.4rem; border-bottom: 1px solid var(--hairline);
}
.ptable th.num, .ptable td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ptable tbody th, .ptable tbody td { padding: .72rem 1.4rem; border-bottom: 1px solid var(--hairline); vertical-align: baseline; }
.ptable tbody tr:last-child th, .ptable tbody tr:last-child td { border-bottom: 0; }
.ptable tbody tr { transition: background .2s; }
.ptable tbody tr:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.ptable tbody th { font-weight: 500; color: var(--on-light); text-align: left; }
.ptable td { color: var(--on-light-mut); }
.ptable td.num { color: var(--on-light); font-weight: 500; }
.ptable .prov { display: block; font-family: var(--f-mono); font-size: .58rem; letter-spacing: .06em; text-transform: uppercase; color: var(--on-light-mut); margin-top: .2rem; font-weight: 400; }
.ptable .tiers { font-size: .76rem; color: var(--on-light-mut); }
.priceref-note { margin-top: 1.6rem; font-size: .82rem; line-height: 1.55; color: var(--on-light-mut); font-style: italic; text-wrap: pretty; }
@media (max-width: 820px) { .priceref-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .ptable thead th, .ptable tbody th, .ptable tbody td { padding-inline: .85rem; } }