/* ============================================================
   mm-pages.css — componentes de las páginas estáticas generadas
   (ciudades, servicios nuevos, plantillas, microapps, herramientas,
   casos, precios…). Se carga DESPUÉS de styles.css y reusa sus
   variables (--paper, --line, --glass…), .glass, .btn y .grad.
   Prefijo pg- para no chocar con el sitio React.
   ============================================================ */

/* ---------- Base ---------- */
.pg main { display: block; }
/* Entradas al hacer scroll (mm-pages.js). Nada se oculta por defecto: el JS marca con .rv-wait
   solo los bloques que empiezan DEBAJO del primer viewport; lo visible al cargar se pinta de
   inmediato. Sin JS, sin IntersectionObserver o con reduced-motion todo queda visible.
   En grids (.pg-st) se escalona cada hijo; .rv-done devuelve las transiciones propias de hover. */
.mm-js .pg-r.rv-wait:not(.pg-st):not(.rv-done), .mm-js .pg-r.rv-wait.pg-st:not(.rv-done) > * {
  transition: opacity .8s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1), filter .8s cubic-bezier(.16,1,.3,1);
}
.mm-js .pg-r.rv-wait.pg-st:not(.rv-done) > * { transition-delay: calc(var(--i, 0) * 60ms); }
.mm-js .pg-r.rv-wait:not(.pg-st):not(.is-in), .mm-js .pg-r.rv-wait.pg-st:not(.is-in) > * { opacity: 0; transform: translate3d(0, 28px, 0); filter: blur(8px); }
@media (max-width: 760px) { .mm-js .pg-r.rv-wait:not(.pg-st):not(.is-in), .mm-js .pg-r.rv-wait.pg-st:not(.is-in) > * { filter: blur(4px); } }
@media (prefers-reduced-motion: reduce) { .mm-js .pg-r, .mm-js .pg-r > * { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; } }
.pg :focus-visible { outline: 2px solid #f036e1; outline-offset: 3px; border-radius: 6px; }
.pg .btn:active, .pg .pg-card:active, .pg button:active { transform: scale(.98); }
.mono { font-family: 'JetBrains Mono', monospace; }

/* Toggle de tema (iconos según tema) */
.theme-toggle .ic-sun { display: none; }
.theme-toggle .ic-moon { display: block; }
html:not([data-theme="light"]) .theme-toggle .ic-sun { display: block; }
html:not([data-theme="light"]) .theme-toggle .ic-moon { display: none; }
a.lang-toggle { text-decoration: none; }

/* ---------- Migas ---------- */
.pg-crumbs { margin-top: 34px; }
.pg-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; font-size: 12.5px; color: var(--paper-faint); }
.pg-crumbs li + li::before { content: "/"; margin-right: 6px; opacity: .5; }
.pg-crumbs a { color: var(--paper-dim); text-decoration: none; }
.pg-crumbs a:hover { color: var(--paper); }
.pg-crumbs [aria-current] { color: var(--paper); }

/* ---------- Hero ---------- */
.pg-hero { padding: 44px 0 40px; }
.pg-hero-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.pg-hero-row.solo { grid-template-columns: minmax(0, 1fr); }
.pg-hero-row.solo .pg-hero-txt { max-width: 980px; }
.pg-h1 { font-size: clamp(38px, 5.2vw, 76px); line-height: 1.02; letter-spacing: -0.032em; font-weight: 500; margin: 22px 0 22px; text-wrap: balance; }
.pg-h1 .grad { display: inline; }
.pg-lead { font-size: clamp(16px, 1.25vw, 19px); color: var(--paper-dim); max-width: 600px; line-height: 1.6; margin: 0; }
.pg-hero-stats { display: flex; flex-wrap: wrap; gap: 28px; margin: 40px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line); }
.pg-hero-stats div { min-width: 110px; }
.pg-hero-stats dt { font-size: 28px; font-weight: 500; letter-spacing: -0.03em; line-height: 1; }
.pg-hero-stats dd { margin: 6px 0 0; font-size: 12px; color: var(--paper-faint); letter-spacing: .02em; }
.pg-hero-aside { position: relative; min-width: 0; }
@media (max-width: 960px) { .pg-hero-row { grid-template-columns: 1fr; gap: 36px; } }

/* Panel de datos del hero */
.pg-fact { padding: 26px 26px 22px; border-radius: 26px; }
.pg-fact-head { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--paper-faint); margin-bottom: 14px; }
.pg-fact dl { margin: 0; display: grid; gap: 0; }
.pg-fact dl > div { display: grid; grid-template-columns: 128px 1fr; gap: 14px; padding: 13px 0; border-top: 1px solid var(--line); font-size: 14px; }
.pg-fact dt { color: var(--paper-faint); }
.pg-fact dd { margin: 0; color: var(--paper); }
.pg-fact-foot { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--paper-dim); }
@media (max-width: 480px) { .pg-fact dl > div { grid-template-columns: 1fr; gap: 2px; } }

/* ---------- Secciones ---------- */
.pg-sec { padding: 72px 0; position: relative; }
.pg-sec + .pg-sec { padding-top: 32px; }
.pg-h2 { font-size: clamp(32px, 4.2vw, 58px); line-height: 1.04; letter-spacing: -0.028em; margin: 14px 0 0; font-weight: 500; max-width: 860px; text-wrap: balance; }
.pg-h2.sm { font-size: clamp(30px, 3.4vw, 48px); }
.pg .sec-head { margin-bottom: 40px; }
@media (max-width: 760px) { .pg .sec-head { flex-direction: column; align-items: flex-start; gap: 14px; } .pg-sec { padding: 52px 0; } }
.pg-note { color: var(--paper-dim); margin-top: 16px; max-width: 400px; font-size: 15px; }

/* Prosa */
.pg-prose { max-width: 760px; }
.pg-prose p { font-size: 17px; line-height: 1.75; color: var(--paper-dim); margin: 0 0 18px; }
.pg-prose p b, .pg-prose p strong { color: var(--paper); font-weight: 600; }
.pg-prose a { color: var(--paper); text-decoration-color: rgba(240,54,225,.6); text-underline-offset: 3px; }
.pg-split { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 56px; align-items: start; }
@media (max-width: 900px) { .pg-split { grid-template-columns: 1fr; gap: 32px; } }

/* Respuesta directa (GEO) */
.pg-answer { padding: 24px 28px; border-radius: 22px; margin: 0 0 40px; max-width: 900px; }
.pg-answer-q { display: flex; align-items: flex-start; gap: 10px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--paper-faint); margin-bottom: 10px; }
.pg-answer-q svg { flex-shrink: 0; margin-top: 1px; }
.pg-answer p { margin: 0; font-size: 18px; line-height: 1.6; color: var(--paper); }

/* Íconos en caja */
.pg-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; color: var(--paper);
  background: linear-gradient(135deg, rgba(240,54,225,0.18), rgba(145,73,255,0.18)); box-shadow: inset 0 0 0 1px var(--line-strong); }
.pg-ic.lg { width: 48px; height: 48px; border-radius: 14px; }

/* Lista con divisores */
.pg-rows { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
.pg-rows.c1 { grid-template-columns: 1fr; }
.pg-rows.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pg-rows li { display: flex; gap: 18px; padding: 24px 0; border-top: 1px solid var(--line); }
.pg-rows h3 { margin: 0 0 6px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.pg-rows p { margin: 0; color: var(--paper-dim); font-size: 14.5px; line-height: 1.6; }
@media (max-width: 860px) { .pg-rows, .pg-rows.c3 { grid-template-columns: 1fr; } }

/* Bento asimétrico */
.pg-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pg-bento-card { padding: 28px; border-radius: 24px; display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: var(--paper); min-height: 200px; transition: transform .35s cubic-bezier(.16,1,.3,1), background .3s; }
.pg-bento-card.big { grid-column: span 2; grid-row: span 2; justify-content: flex-end; min-height: 380px;
  background: radial-gradient(120% 90% at 100% 0%, rgba(240,54,225,0.16), transparent 60%), radial-gradient(120% 100% at 0% 100%, rgba(145,73,255,0.18), transparent 65%), var(--glass-bg); }
.pg-bento-card.big h3 { font-size: 32px; }
.pg-bento-card.w2 { grid-column: span 2; }
.pg-bento-card.w4 { grid-column: span 4; }
.pg-bento-card.tall { grid-column: span 2; grid-row: span 2; }
a.pg-bento-card:hover { transform: translateY(-4px); background-color: rgba(255,255,255,0.06); }
.pg-bento-card small { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--paper-faint); }
.pg-bento-card h3 { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.pg-bento-card p { margin: 0; color: var(--paper-dim); font-size: 14.5px; line-height: 1.6; }
.pg-bento-card .pg-ic { margin-bottom: auto; }
.pg-bento-card.big .pg-ic { margin-bottom: auto; }
@media (max-width: 1000px) { .pg-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pg-bento-card.w4, .pg-bento-card.tall { grid-column: span 2; grid-row: auto; } .pg-bento-card.w2 { grid-column: auto; } .pg-bento-card.l2 { grid-column: span 2; } }
@media (max-width: 620px) { .pg-bento { grid-template-columns: 1fr; } .pg-bento-card.big, .pg-bento-card.w2, .pg-bento-card.w4, .pg-bento-card.tall, .pg-bento-card.l2 { grid-column: auto; grid-row: auto; } .pg-bento-card.big { min-height: 260px; } }

.pg-more { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--paper-dim); margin-top: auto; padding-top: 6px; transition: color .25s, gap .25s; }
a:hover > .pg-more, a:hover .pg-more { color: var(--paper); gap: 12px; }

/* Pasos */
.pg-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0; counter-reset: s; border-top: 1px solid var(--line); }
.pg-steps li { padding: 26px 24px 26px 0; position: relative; }
.pg-steps li + li { padding-left: 24px; border-left: 1px solid var(--line); }
.pg-step-n { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #f036e1; letter-spacing: .1em; }
html[data-theme="light"] .pg-step-n { color: #a8138f; }
.pg-steps h3 { margin: 12px 0 8px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.pg-steps p { margin: 0; color: var(--paper-dim); font-size: 14px; line-height: 1.6; }
.pg-steps small { display: inline-block; margin-top: 12px; font-size: 11.5px; color: var(--paper-faint); letter-spacing: .06em; }
@media (max-width: 760px) { .pg-steps { grid-template-columns: 1fr; } .pg-steps li, .pg-steps li + li { padding: 22px 0; border-left: 0; border-bottom: 1px solid var(--line); } }

/* Chips */
.pg-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.pg-chips a { display: inline-flex; flex-direction: column; gap: 2px; padding: 11px 16px; border-radius: 14px; text-decoration: none; color: var(--paper); font-size: 14px; font-weight: 500;
  background: var(--glass-bg); box-shadow: inset 0 0 0 1px var(--line); transition: background .2s, transform .2s, box-shadow .2s; }
.pg-chips a small { font-size: 11px; color: var(--paper-faint); font-weight: 400; }
.pg-chips a:hover { background: var(--glass-bg-strong); box-shadow: inset 0 0 0 1px var(--line-strong); transform: translateY(-2px); }

/* Tarjetas de enlace */
.pg-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 18px; }
.pg-cards.two { grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); }
.pg-card { display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; text-decoration: none; color: var(--paper); transition: transform .35s cubic-bezier(.16,1,.3,1), background .3s; }
.pg-card:hover { transform: translateY(-5px); background: rgba(255,255,255,0.06); }
.pg-card-media { aspect-ratio: 16/10; overflow: hidden; background: var(--ink-2); }
.pg-card-media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transition: transform .8s cubic-bezier(.16,1,.3,1); }
.pg-card:hover .pg-card-media img { transform: scale(1.04); }
.pg-card-body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pg-card-body small { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--paper-faint); }
.pg-card-body h3 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; }
.pg-card-body p { margin: 0; font-size: 14px; color: var(--paper-dim); line-height: 1.55; }
.pg-card-metric { display: flex; align-items: baseline; gap: 10px; margin-top: 6px; }
.pg-card-metric b { font-size: 28px; font-weight: 500; letter-spacing: -0.03em; }
.pg-card-metric span { font-size: 12.5px; color: var(--paper-faint); }

/* KPIs */
.pg-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin: 0; }
.pg-stats > div { padding: 24px; border-radius: 20px; }
.pg-stats dt { font-size: clamp(30px, 3vw, 42px); font-weight: 500; letter-spacing: -0.035em; line-height: 1; }
.pg-stats dd { margin: 10px 0 0; color: var(--paper-dim); font-size: 13.5px; line-height: 1.45; }
.pg-stats small { display: block; margin-top: 8px; font-size: 11px; color: var(--paper-faint); }

/* FAQ con details */
.pg-faq details.faq-item { cursor: default; }
.pg-faq summary { list-style: none; cursor: pointer; }
.pg-faq summary::-webkit-details-marker { display: none; }
.pg-faq details[open] .faq-q .pl { background: linear-gradient(135deg, #f036e1, #9149ff); border-color: transparent; }
.pg-faq details[open] .faq-q .pl::after { transform: scaleY(0); }
.pg-faq-a { color: var(--paper-dim); font-size: 14.5px; line-height: 1.65; padding-top: 14px; }
.pg-faq-a p { margin: 0 0 10px; }

/* CTA */
.pg-sec-cta { padding-top: 24px; }
.pg-cta-h { font-size: clamp(32px, 4vw, 54px); line-height: 1.04; letter-spacing: -0.028em; margin: 14px 0 16px; font-weight: 500; }
.pg-cta .hero-ctas { margin-top: 26px; }
.pg-cta-note { display: block; margin-top: 16px; color: var(--paper-faint); font-size: 12.5px; }

/* Tabla */
.pg-table-wrap { overflow-x: auto; border-radius: 20px; box-shadow: inset 0 0 0 1px var(--line); }
.pg-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
.pg-table th, .pg-table td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--line); vertical-align: top; }
.pg-table thead th { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--paper-faint); font-weight: 500; background: var(--glass-bg); }
.pg-table tbody th { font-weight: 600; }
.pg-table td { color: var(--paper-dim); }
.pg-table tr:last-child th, .pg-table tr:last-child td { border-bottom: 0; }

/* Checks */
.pg-checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.pg-checks li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--paper-dim); line-height: 1.5; }
.pg-checks svg { flex-shrink: 0; margin-top: 3px; color: #5ed29c; }

/* Etiquetas / badges */
.pg-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 500; letter-spacing: .02em;
  background: rgba(94,210,156,.12); color: #5ed29c; box-shadow: inset 0 0 0 1px rgba(94,210,156,.25); }
.pg-badge.soon { background: rgba(145,73,255,.12); color: #b58cff; box-shadow: inset 0 0 0 1px rgba(145,73,255,.3); }
html[data-theme="light"] .pg-badge { color: #1d8a57; }
html[data-theme="light"] .pg-badge.soon { color: #5618c4; }
.pg-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pg-tags span { font-size: 12px; padding: 5px 10px; border-radius: 999px; background: var(--glass-bg); box-shadow: inset 0 0 0 1px var(--line); color: var(--paper-dim); }

/* Filtros (catálogos) */
.pg-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.pg-filter button { font: inherit; font-size: 13.5px; font-weight: 500; padding: 9px 16px; border-radius: 999px; border: 0; cursor: pointer; color: var(--paper-dim);
  background: var(--glass-bg); box-shadow: inset 0 0 0 1px var(--line); transition: background .2s, color .2s; }
.pg-filter button:hover { color: var(--paper); }
.pg-filter button.on { color: #fff; background: linear-gradient(110deg, #f036e1, #9149ff); box-shadow: none; }
.is-hidden { display: none !important; }
.pg-search { width: 100%; max-width: 420px; margin-bottom: 18px; }

/* ---------- Formularios (herramientas, demos, leads) ---------- */
.pg-form, .pg-form-fields { display: grid; gap: 18px; }
.pg-form .btn { justify-self: start; }
.pg-form .row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.pg-form .row.r3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .pg-form .row, .pg-form .row.r3 { grid-template-columns: 1fr; } }
.pg-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pg-field label, .pg-label { font-size: 13px; font-weight: 500; color: var(--paper); }
.pg-field .help { font-size: 12px; color: var(--paper-faint); }
.pg-field .err { font-size: 12px; color: #ff7a8a; display: none; }
.pg-field.invalid .err { display: block; }
.pg-field.invalid .pg-input { box-shadow: inset 0 0 0 1px #ff7a8a; }
.pg-input { font: inherit; font-size: 15px; color: var(--paper); width: 100%; height: 48px; padding: 0 16px; border-radius: 14px; border: 0; outline: none;
  background: var(--glass-bg-strong); box-shadow: inset 0 0 0 1px var(--line-strong); transition: box-shadow .2s, background .2s; }
textarea.pg-input { height: auto; min-height: 110px; padding: 14px 16px; resize: vertical; line-height: 1.5; }
select.pg-input { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a99fb0' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; }
select.pg-input option { color: #16101a; background: #fff; }
.pg-input:focus { box-shadow: inset 0 0 0 1.5px #f036e1; background: var(--glass-bg-strong); }
.pg-input::placeholder { color: var(--paper-faint); }
.pg-range { width: 100%; accent-color: #f036e1; }
.pg-check { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--paper-dim); cursor: pointer; }
.pg-check input { width: 18px; height: 18px; accent-color: #f036e1; }
.pg-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.pg-form-ok { display: none; padding: 18px 20px; border-radius: 16px; background: rgba(94,210,156,.1); box-shadow: inset 0 0 0 1px rgba(94,210,156,.3); color: var(--paper); font-size: 15px; }
.pg-form.sent .pg-form-ok { display: block; }
.pg-form.sent .pg-form-fields { display: none; }
.pg-form .btn[disabled] { opacity: .6; pointer-events: none; }
.pg-panel { padding: 30px; border-radius: 26px; }
@media (max-width: 560px) { .pg-panel { padding: 22px; } }

/* Toast */
.pg-toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); opacity: 0; z-index: 200; padding: 12px 18px; border-radius: 14px; font-size: 14px;
  background: rgba(22,16,26,.94); color: #f4eef6; box-shadow: 0 18px 40px -12px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.12); transition: opacity .3s, transform .3s cubic-bezier(.16,1,.3,1); pointer-events: none; }
.pg-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Footer ampliado ---------- */
.pg-foot-top { grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; }
@media (max-width: 1100px) { .pg-foot-top { grid-template-columns: 1fr 1fr 1fr; } .pg-foot-top .foot-brand-block { grid-column: 1 / -1; } }
@media (max-width: 640px) { .pg-foot-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .pg-foot-top { grid-template-columns: 1fr; } }
.pg-foot-loc { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--paper-faint); margin-top: 2px; }
.pg-foot-h4b { margin-top: 28px !important; }
.pg-foot-contact { margin-top: 20px !important; gap: 8px !important; }
.pg-foot-contact a, .pg-foot-contact span { display: inline-flex; align-items: center; gap: 8px; color: var(--paper-dim); text-decoration: none; font-size: 13.5px; }
.pg-foot-contact a:hover { color: var(--paper); }
.foot-bottom a { color: var(--paper-dim); text-decoration: none; }
.foot-bottom a:hover { color: var(--paper); }

/* Menú móvil (estático) */
body.pg-lock { overflow: hidden; }
.nav-dropdown a { color: var(--paper); }

/* ---------- Ciudades ---------- */
.pg-city-map { aspect-ratio: 4/3; border-radius: 22px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); background: var(--ink-2); }
.pg-city-map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(.4) contrast(1.05); }
html:not([data-theme="light"]) .pg-city-map iframe { filter: invert(.9) hue-rotate(180deg) grayscale(.3); }
.pg-map-facade { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 100%; border: 0; cursor: pointer; font: inherit; color: var(--paper);
  background: radial-gradient(60% 70% at 30% 30%, rgba(240,54,225,.12), transparent 70%), radial-gradient(60% 70% at 75% 70%, rgba(145,73,255,.14), transparent 70%), repeating-linear-gradient(0deg, transparent 0 38px, var(--line) 38px 39px), repeating-linear-gradient(90deg, transparent 0 38px, var(--line) 38px 39px), var(--ink-2); }
.pg-map-facade svg { color: var(--pink); }
.pg-map-facade-addr { font-size: 15px; color: var(--paper-dim); text-align: center; padding: 0 18px; }
.pg-map-facade:hover .btn, .pg-map-facade:focus-visible .btn { border-color: var(--line-strong); }
.pg-region { margin-bottom: 44px; }
.pg-region h3 { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--paper-faint); font-weight: 500; margin: 0 0 16px; display: flex; align-items: center; gap: 10px; }
.pg-region h3 span { font-family: 'JetBrains Mono', monospace; color: var(--paper); }
.pg-zones { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pg-zones li { padding: 8px 14px; border-radius: 999px; font-size: 13.5px; background: var(--glass-bg); box-shadow: inset 0 0 0 1px var(--line); color: var(--paper-dim); }
.pg-clock { font-family: 'JetBrains Mono', monospace; }

/* ---------- Casos ---------- */
.pg-case-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pg-case-kpis > div { padding: 26px 20px 26px 0; }
.pg-case-kpis > div + div { padding-left: 20px; border-left: 1px solid var(--line); }
.pg-case-kpis b { display: block; font-size: clamp(34px, 4vw, 52px); font-weight: 500; letter-spacing: -0.04em; line-height: 1; }
.pg-case-kpis span { display: block; margin-top: 10px; font-size: 13px; color: var(--paper-dim); }
@media (max-width: 640px) { .pg-case-kpis > div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); } }
.pg-quote { margin: 0; padding: 30px 34px; border-radius: 24px; }
.pg-quote p { font-size: clamp(19px, 1.8vw, 24px); line-height: 1.45; letter-spacing: -0.01em; margin: 0 0 18px; }
.pg-quote footer { padding: 0; font-size: 13.5px; color: var(--paper-faint); }
.pg-bars { display: grid; gap: 14px; }
.pg-bar { display: grid; grid-template-columns: 150px 1fr 70px; gap: 14px; align-items: center; font-size: 13.5px; color: var(--paper-dim); }
.pg-bar-track { height: 10px; border-radius: 99px; background: var(--glass-bg-strong); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.pg-bar-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #9149ff, #f036e1); transform-origin: left; transform: scaleX(0); transition: transform 1.2s cubic-bezier(.16,1,.3,1); }
.pg-bar-fill.before { background: var(--paper-faint); }
.is-in .pg-bar-fill { transform: scaleX(var(--v, 1)); }
.pg-bar b { color: var(--paper); font-family: 'JetBrains Mono', monospace; font-weight: 500; text-align: right; }
@media (max-width: 560px) { .pg-bar { grid-template-columns: 1fr 60px; } .pg-bar-track { grid-column: 1 / -1; grid-row: 2; } }

/* ---------- Plantillas ---------- */
.pg-shot { border-radius: 18px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0,0,0,.6), inset 0 0 0 1px var(--line); background: var(--ink-2); }
.pg-shot-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--glass-bg-strong); border-bottom: 1px solid var(--line); }
.pg-shot-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.pg-shot-bar span { margin-left: 10px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--paper-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-shot img { display: block; width: 100%; height: auto; }
.pg-shots { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 22px; align-items: end; }
.pg-shots .phone { border-radius: 28px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0,0,0,.6), inset 0 0 0 6px #1b1520; padding: 6px; background: #1b1520; }
.pg-shots .phone img { border-radius: 22px; display: block; width: 100%; height: auto; }
@media (max-width: 760px) { .pg-shots { grid-template-columns: 1fr; } .pg-shots .phone { max-width: 260px; } }
.pg-swatches { display: flex; gap: 8px; }
.pg-swatches i { width: 28px; height: 28px; border-radius: 9px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }

/* ---------- Microapps ---------- */
.pg-app-ui { border-radius: 22px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); background: var(--glass-bg); }
.pg-app-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: 13px; }
.pg-app-top b { font-weight: 600; }
.pg-app-body { padding: 18px; display: grid; gap: 10px; }
.pg-app-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--glass-bg-strong); box-shadow: inset 0 0 0 1px var(--line); font-size: 13.5px; }
.pg-app-row span { color: var(--paper-dim); }
.pg-dot { width: 8px; height: 8px; border-radius: 50%; background: #5ed29c; display: inline-block; animation: pulse 3s ease-in-out infinite; }
.pg-dot.warn { background: #f5b84b; } .pg-dot.off { background: var(--paper-faint); animation: none; }

/* ---------- Utilidades ---------- */
.pg-center { text-align: center; }
.pg-mt { margin-top: 32px; }
.pg-muted { color: var(--paper-dim); }
.pg-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 760px) { .pg-two { grid-template-columns: 1fr; } }
.pg-sticky { position: sticky; top: 110px; }
@media (max-width: 900px) { .pg-sticky { position: static; } }
.pg-kicker { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--paper-faint); }

@media print {
  .nav-wrap, .mobile-overlay, .wa-float, .pg-footer, .backdrop, .grain, .cookie-banner, .pg-no-print { display: none !important; }
  .pg-r { opacity: 1 !important; transform: none !important; }
  body { background: #fff !important; color: #111 !important; }
}

/* Figura del hero en servicios */
.pg-svc-fig { margin: 0 0 -56px 48px; border-radius: 24px; overflow: hidden; aspect-ratio: 4/3; box-shadow: 0 30px 60px -30px rgba(0,0,0,.6), inset 0 0 0 1px var(--line); }
.pg-svc-fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-svc-fig + .pg-fact { position: relative; margin-right: 40px; }
@media (max-width: 960px) { .pg-svc-fig { margin: 0 0 -40px 24px; } .pg-svc-fig + .pg-fact { margin-right: 16px; } }
@media (max-width: 480px) { .pg-svc-fig { margin: 0 0 -28px 0; } .pg-svc-fig + .pg-fact { margin-right: 0; } }
.pg-svc-fig + .pg-mock-wrap { position: relative; margin-right: 40px; }
@media (max-width: 960px) { .pg-svc-fig + .pg-mock-wrap { margin-right: 16px; } }
@media (max-width: 480px) { .pg-svc-fig + .pg-mock-wrap { margin-right: 0; } }
.pg-bar-group { display: grid; gap: 8px; margin-bottom: 22px; }
.pg-visit .hero-ctas { flex-wrap: wrap; }
article.pg-card:hover { transform: none; }

/* Planes */
.pg-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.pg-plan { padding: 30px; border-radius: 26px; display: flex; flex-direction: column; gap: 14px; }
.pg-plan h2 { margin: 0; font-size: 34px; font-weight: 500; letter-spacing: -0.03em; }
.pg-plan > p { margin: 0; font-size: 15px; line-height: 1.6; }
.pg-plan.hl { background: radial-gradient(120% 90% at 100% 0%, rgba(240,54,225,0.16), transparent 60%), radial-gradient(120% 100% at 0% 100%, rgba(145,73,255,0.18), transparent 65%), var(--glass-bg-strong); box-shadow: inset 0 0 0 1px rgba(240,54,225,.35), 0 30px 60px -30px rgba(145,73,255,.45); }
.pg-plan-foot { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.pg-plan-foot span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--paper-faint); }
@media (max-width: 980px) { .pg-plans { grid-template-columns: 1fr; } }
.pg-tpl-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 10px; }
.pg-tpl-actions .btn { padding: 11px 16px; font-size: 13.5px; }

/* ---------- Guías (artículos) ---------- */
.pg-h1-article { font-size: clamp(34px, 4.2vw, 60px); }
.pg-byline { margin: 22px 0 0; font-size: 13px; color: var(--paper-faint); line-height: 1.6; }
.pg-article-fig { margin: 0; border-radius: 24px; overflow: hidden; aspect-ratio: 4/3; box-shadow: 0 30px 60px -30px rgba(0,0,0,.6), inset 0 0 0 1px var(--line); }
.pg-article-fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-article-grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 56px; align-items: start; padding-top: 24px; padding-bottom: 24px; }
.pg-toc { position: sticky; top: 110px; padding: 20px 0; border-top: 1px solid var(--line); }
.pg-toc ol { list-style: none; counter-reset: t; margin: 14px 0 20px; padding: 0; display: grid; gap: 2px; }
.pg-toc li { counter-increment: t; }
.pg-toc ol a { display: grid; grid-template-columns: 26px 1fr; gap: 4px; padding: 7px 0; color: var(--paper-dim); text-decoration: none; font-size: 13.5px; line-height: 1.4; transition: color .2s; }
.pg-toc ol a::before { content: counter(t, decimal-leading-zero); font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--paper-faint); padding-top: 2px; }
.pg-toc ol a:hover { color: var(--paper); }
.pg-toc-cta { width: 100%; justify-content: center; }
.pg-article-body { max-width: 760px; min-width: 0; }
.pg-article-body .pg-answer { margin-bottom: 22px; }
.pg-keypoints { margin-bottom: 40px; }
.pg-article-sec { padding-top: 12px; scroll-margin-top: 110px; }
.pg-article-sec h2 { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.15; letter-spacing: -0.022em; font-weight: 600; margin: 36px 0 16px; text-wrap: balance; }
.pg-article-sec h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.012em; margin: 28px 0 10px; }
.pg-article-sec p, .pg-article-sec li { font-size: 17px; line-height: 1.75; color: var(--paper-dim); }
.pg-article-sec p { margin: 0 0 18px; }
.pg-article-sec ul, .pg-article-sec ol { margin: 0 0 20px; padding-left: 22px; }
.pg-article-sec li { margin-bottom: 8px; }
.pg-article-sec li::marker { color: #f036e1; }
.pg-article-sec b, .pg-article-sec strong { color: var(--paper); font-weight: 600; }
.pg-article-sec a { color: var(--paper); text-decoration: underline; text-decoration-color: rgba(240,54,225,.6); text-underline-offset: 3px; }
.pg-article-sec a:hover { text-decoration-color: #f036e1; }
.pg-article-sec blockquote { margin: 24px 0; padding: 18px 22px; border-left: 3px solid #f036e1; background: var(--glass-bg); border-radius: 0 16px 16px 0; color: var(--paper); font-size: 17px; }
.pg-article-sec blockquote p { color: var(--paper); margin: 0; }
.pg-tbl { overflow-x: auto; margin: 8px 0 24px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line); -webkit-overflow-scrolling: touch; }
.pg-article-sec table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14.5px; }
.pg-article-sec tr:last-child td { border-bottom: 0; }
.pg-article-sec th, .pg-article-sec td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.5; }
.pg-article-sec th { font-weight: 600; color: var(--paper); background: var(--glass-bg); }
.pg-article-sec td { color: var(--paper-dim); }
@media (max-width: 1000px) { .pg-article-grid { grid-template-columns: 1fr; gap: 8px; } .pg-toc { position: static; } .pg-toc ol { display: none; } .pg-toc .pg-kicker { display: none; } .pg-toc-cta { width: auto; } .pg-toc { border-top: 0; padding: 0; } }
@media (max-width: 560px) { .pg-article-sec p, .pg-article-sec li { font-size: 16px; } }
.pg-app-row > span { white-space: nowrap; flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; }
.pg-app-row > b { font-weight: 600; min-width: 0; }
@media (max-width: 420px) { .pg-app-row { flex-wrap: wrap; row-gap: 4px; } }
.pg-stats:has(> div:only-child) { max-width: 420px; }
@media (max-width: 560px) { .pg-answer { padding: 20px; } .pg-answer p { font-size: 16.5px; } }
/* Objetivos táctiles cómodos en celular y tablet */
@media (max-width: 1100px) {
  .pg .theme-toggle, .pg a.lang-toggle { width: 42px; height: 42px; }
  .nav > .nav-tools .theme-toggle, .nav > .nav-tools .lang-toggle { width: 42px; height: 42px; }
  .pg-tpl-pages a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 6px; }
}

/* =====================================================================
   CAPA PREMIUM (2026-10) — páginas generadas. Tokens en styles.css
   (--ease-out, --ease-spring, --shell-bg, --shell-line, --hi, --hairline-grad…).
   ===================================================================== */
@media print { .mm-js .pg-r, .mm-js .pg-r > * { opacity: 1 !important; transform: none !important; filter: none !important; } .pg-progress { display: none !important; } }

/* Entrada del hero al cargar: SOLO transform (el texto es visible desde el primer pintado,
   no retrasa el LCP ni se queda oculto si la animación no corre). */
@keyframes mmRiseSoft { from { transform: translate3d(0, 14px, 0); } to { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .mm-js .pg-hero-txt > * { animation: mmRiseSoft .9s cubic-bezier(.16,1,.3,1) both; }
  .mm-js .pg-hero-txt > :nth-child(2) { animation-delay: .05s; }
  .mm-js .pg-hero-txt > :nth-child(3) { animation-delay: .1s; }
  .mm-js .pg-hero-txt > :nth-child(n+4) { animation-delay: .15s; }
  .mm-js .pg-hero-aside { animation: mmRiseSoft 1s cubic-bezier(.16,1,.3,1) .1s both; }
}

/* Migas */
.pg-crumbs { margin-top: 30px; }
.pg-crumbs ol { font-size: 12px; letter-spacing: .01em; }

/* Hero */
.pg-hero { padding: clamp(36px, 5vw, 64px) 0 clamp(40px, 5vw, 72px); }
.pg-hero-row { gap: clamp(36px, 5vw, 72px); }
.pg-h1 { font-size: clamp(40px, 5.6vw, 86px); line-height: .98; letter-spacing: -0.045em; margin: 26px 0 26px; }
.pg-h1-article { font-size: clamp(36px, 4.4vw, 64px); line-height: 1.02; }
.pg-lead { font-size: clamp(16px, 1.25vw, 19px); line-height: 1.62; max-width: 580px; }
.pg-hero .hero-ctas { margin-top: 34px; }
.pg-hero-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 24px; max-width: 620px; margin-top: 44px; padding-top: 26px; border-top: 0; background: var(--hairline-grad) left top / 100% 1px no-repeat; }
.pg-hero-stats div { min-width: 0; }
.pg-hero-stats dt { font-family: 'JetBrains Mono', monospace; font-weight: 400; font-size: clamp(22px, 1.9vw, 26px); letter-spacing: -0.05em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pg-hero-stats dd { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; margin-top: 10px; line-height: 1.45; }
@media (max-width: 560px) { .pg-hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Panel de datos (doble bisel) */
.pg-fact.glass {
  border-radius: 24px; padding: 24px 26px 20px;
  box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 var(--hi), 0 0 0 8px var(--shell-bg), var(--shadow-card);
  outline: 1px solid var(--shell-line); outline-offset: 8px;
}
.pg-fact-head { font-size: 10.5px; letter-spacing: .2em; padding-bottom: 4px; }
.pg-fact dl > div { border-top: 0; background: linear-gradient(90deg, var(--line-strong), var(--line) 60%, transparent) left top / 100% 1px no-repeat; }
.pg-fact .mono, .pg-clock { font-variant-numeric: tabular-nums; }
.pg-svc-fig, .pg-article-fig { border-radius: 26px; box-shadow: inset 0 0 0 1px var(--line), 0 0 0 7px var(--shell-bg), var(--shadow-card); outline: 1px solid var(--shell-line); outline-offset: 7px; }

/* Ritmo de secciones + separador con degradado */
.pg-sec { padding: clamp(40px, 5.2vw, 76px) 0; }
.pg-sec + .pg-sec { padding-top: clamp(40px, 5.2vw, 76px); }
.pg-sec + .pg-sec::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(1200px, calc(100% - 40px)); height: 1px; background: var(--hairline-grad); pointer-events: none;
}
.pg-hero + .pg-sec, .pg-crumbs + .pg-sec { padding-top: clamp(24px, 3vw, 40px); }
.pg-sec-cta::before { display: none; }
.pg-sec-cta { padding-top: clamp(24px, 3vw, 40px) !important; }
.pg .sec-head { margin-bottom: clamp(36px, 4.5vw, 56px); }
.pg-h2 { font-size: clamp(34px, 4.4vw, 64px); line-height: 1; letter-spacing: -0.042em; margin-top: 18px; }
.pg-h2.sm { font-size: clamp(30px, 3.4vw, 50px); }
@media (max-width: 760px) { .pg-sec, .pg-sec + .pg-sec { padding: 52px 0; } .pg-hero + .pg-sec, .pg-crumbs + .pg-sec { padding-top: 16px; } }

/* Respuesta directa */
.pg-answer.glass {
  border-radius: 22px; padding: 24px 28px;
  box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 var(--hi), 0 0 0 6px var(--shell-bg), var(--shadow-card);
  outline: 1px solid var(--shell-line); outline-offset: 6px; margin-bottom: 48px;
}
.pg-answer-q { font-size: 10.5px; letter-spacing: .2em; }

/* Íconos */
.pg-ic { box-shadow: inset 0 0 0 1px var(--line-strong), inset 0 1px 0 var(--hi); }

/* Filas con divisores */
.pg-rows li { border-top: 0; background: linear-gradient(90deg, var(--line-strong), var(--line) 55%, transparent) left top / 100% 1px no-repeat; padding: 26px 0; }

/* Doble bisel en tarjetas */
.pg-bento { gap: 24px; }
.pg-cards { gap: 28px; }
.pg-stats { gap: 24px; }
.pg-plans { gap: 28px; }
.pg-two { gap: 24px; }
:is(.pg-bento-card, .pg-card, .pg-stats > div, .pg-plan, .pg-panel, .pg-quote).glass {
  box-shadow: inset 0 0 0 1px var(--line), 0 0 0 var(--bz, 6px) var(--shell-bg), var(--shadow-card);
  outline: 1px solid var(--shell-line); outline-offset: var(--bz, 6px);
}
.pg-plan, .pg-panel { --bz: 8px; }
.pg-plan.hl { outline-color: rgba(240,54,225,0.42); box-shadow: inset 0 0 0 1px rgba(240,54,225,.38), 0 0 0 8px rgba(240,54,225,0.05), 0 40px 80px -40px rgba(145,73,255,.5); }
:is(.pg-bento-card, .pg-card).glass:focus-visible { outline-color: #f036e1; }
.pg-bento-card { border-radius: 22px; padding: 30px; transition: transform .6s var(--ease-spring), background-color .4s var(--ease-out); }
a.pg-bento-card:hover { transform: translateY(-4px); }
.pg-bento-card.big { border-radius: 26px; }
.pg-bento-card.big h3 { font-size: clamp(26px, 2.4vw, 34px); letter-spacing: -0.035em; line-height: 1.08; }
.pg-bento-card h3 { letter-spacing: -0.025em; }
.pg-bento-card small, .pg-card-body small, .pg-kicker { font-size: 10.5px; letter-spacing: .2em; }

/* Tarjeta con imagen: la foto va dentro de su propia bandeja (padding + radio concéntrico) */
.pg-card { border-radius: 24px; transition: transform .6s var(--ease-spring), background-color .4s var(--ease-out); }
.pg-card:hover { transform: translateY(-4px); }
.pg-card:has(> .pg-card-media) { padding: 6px; }
.pg-card-media { border-radius: 18px; box-shadow: inset 0 0 0 1px var(--line); }
.pg-card:has(> .pg-card-media) .pg-card-body { padding: 18px 18px 20px; }
.pg-card-body h3 { letter-spacing: -0.022em; }
.pg-card-metric b, .pg-stats dt, .pg-case-kpis b { font-family: 'JetBrains Mono', monospace; font-weight: 400; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.pg-stats > div { border-radius: 20px; padding: 26px; }
.pg-stats dt { font-size: clamp(28px, 2.8vw, 40px); }
.pg-case-kpis { border-top: 0; border-bottom: 0; background: var(--hairline-grad) left top / 100% 1px no-repeat, var(--hairline-grad) left bottom / 100% 1px no-repeat; }
.pg-case-kpis b { font-size: clamp(32px, 3.6vw, 48px); }

/* "Ver más": flecha dentro de su círculo */
.pg-more { gap: 12px; font-size: 13px; letter-spacing: -0.005em; padding-top: 10px; }
.pg-more svg {
  width: 30px; height: 30px; padding: 8px; border-radius: 50%; box-sizing: border-box; flex-shrink: 0;
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: transform .55s var(--ease-spring), background-color .3s var(--ease-out), color .3s;
}
a:hover > .pg-more, a:hover .pg-more { gap: 12px; }
a:hover .pg-more svg { transform: translate(2px, -1px) scale(1.05); background: linear-gradient(135deg, #f036e1, #9149ff); color: #fff; box-shadow: none; }

/* Reflector en tarjetas (puntero fino) */
@media (hover: hover) and (pointer: fine) {
  :is(.pg-bento-card, .pg-card, .pg-plan, .pg-stats > div, .pg-panel).glass::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 1;
    background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(240,54,225,0.8), rgba(145,73,255,0.38) 38%, transparent 68%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: 0; transition: opacity .45s var(--ease-out);
  }
  :is(.pg-bento-card, .pg-card, .pg-plan, .pg-stats > div, .pg-panel).glass:hover::after { opacity: 1; }
}
.pg-card.glass, .pg-panel.glass, .pg-plan.glass { position: relative; }

/* Pasos */
.pg-steps { border-top: 0; background: var(--hairline-grad) left top / 100% 1px no-repeat; }
.pg-step-n { display: inline-grid; place-items: center; min-width: 34px; height: 24px; padding: 0 8px; border-radius: 999px; font-size: 11px; color: var(--paper);
  background: linear-gradient(135deg, rgba(240,54,225,0.22), rgba(145,73,255,0.22)); box-shadow: inset 0 0 0 1px var(--line-strong); }
html[data-theme="light"] .pg-step-n { color: var(--paper); }

/* Chips */
.pg-chips a { border-radius: 16px; padding: 12px 16px; min-height: 44px; justify-content: center; box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 var(--hi);
  transition: background-color .3s var(--ease-out), transform .5s var(--ease-spring), box-shadow .3s var(--ease-out); }
.pg-chips a:hover { transform: translateY(-2px); }

/* FAQ estática */
.pg-faq-a { padding-top: 16px; font-size: 15px; }
.pg-faq summary { min-height: 32px; }

/* Formularios */
.pg-input { height: 50px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line-strong); transition: box-shadow .3s var(--ease-out), background-color .3s var(--ease-out); }
.pg-input:focus { box-shadow: inset 0 0 0 1.5px rgba(240,54,225,0.75), 0 0 0 4px rgba(240,54,225,0.14); }
.pg-field.invalid .pg-input { box-shadow: inset 0 0 0 1.5px #ff7a8a, 0 0 0 4px rgba(255,122,138,0.12); }
.pg-filter button { min-height: 40px; transition: background-color .3s var(--ease-out), color .3s, transform .5s var(--ease-spring); }
.pg-filter button.on { box-shadow: 0 10px 24px -12px rgba(240,54,225,0.6), inset 0 1px 0 rgba(255,255,255,0.3); }
.pg-panel { border-radius: 24px; }

/* Tabla */
.pg-table-wrap { border-radius: 22px; box-shadow: inset 0 0 0 1px var(--line), 0 0 0 6px var(--shell-bg); outline: 1px solid var(--shell-line); outline-offset: 6px; }

/* Cita */
.pg-quote { --bz: 7px; border-radius: 24px; }

/* CTA final */
.pg-cta-h { font-size: clamp(32px, 4.2vw, 58px); letter-spacing: -0.042em; line-height: 1; text-wrap: balance; }
.pg-cta .banner-ill .logo-mono { filter: drop-shadow(0 24px 48px rgba(240,54,225,0.35)); }

/* Footer */
.pg-foot-contact a, .pg-foot-contact span { transition: color .3s var(--ease-out); }
.pg-foot-contact svg { opacity: .7; }

/* Barra de progreso de lectura (guías) */
.pg-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 130; pointer-events: none; }
.pg-progress span {
  display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, #9149ff, #f036e1); box-shadow: 0 0 14px rgba(240,54,225,0.55);
}
@supports (animation-timeline: scroll()) {
  .pg-progress span { animation: pgProgress auto linear both; animation-timeline: scroll(root block); }
}
@keyframes pgProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Guías: índice lateral */
.pg-toc { border-top: 0; background: var(--hairline-grad) left top / 100% 1px no-repeat; }
.pg-toc ol a { transition: color .3s var(--ease-out), transform .5s var(--ease-spring); }
.pg-toc ol a:hover { transform: translateX(3px); }
.pg-article-sec blockquote { border-left: 0; border-radius: 18px; box-shadow: inset 2px 0 0 #f036e1, inset 0 0 0 1px var(--line); }

/* Tacto */
@media (max-width: 760px) {
  .pg-bento-card { padding: 24px; }
  .pg-answer.glass { padding: 20px; }
}

/* ---------- Promo 2026: tarjeta de precio (promo-pagina-web.html) ---------- */
.pg-price.glass { --bz: 8px; padding: clamp(24px, 3vw, 34px); border-radius: 28px; max-width: 440px; margin-left: auto;
  outline: 1px solid rgba(240,54,225,0.42); outline-offset: 8px;
  box-shadow: inset 0 0 0 1px rgba(240,54,225,.38), 0 0 0 8px rgba(240,54,225,0.05), 0 40px 80px -40px rgba(145,73,255,.5); }
.pg-price-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.pg-price-tag { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #fff; padding: 5px 12px; border-radius: 999px; background: linear-gradient(135deg, #f036e1, #9149ff); }
.pg-price-valid { font-size: 12.5px; color: var(--paper-faint); }
.pg-price-amount { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; font-size: clamp(52px, 7vw, 72px); font-weight: 500; letter-spacing: -0.05em; line-height: 1; margin: 22px 0 8px; color: var(--paper); display: flex; align-items: baseline; gap: 4px; }
.pg-price-cur { font-size: .5em; color: var(--paper-dim); align-self: flex-start; margin-top: .25em; }
.pg-price-code { font-size: 14px; letter-spacing: .14em; color: var(--paper-faint); margin-left: 8px; }
.pg-price-sub { margin: 0 0 20px; color: var(--paper-dim); font-size: 15px; }
.pg-price .pg-checks { margin: 0 0 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.pg-price-btn { width: 100%; justify-content: center; }
.pg-price-fine { display: block; margin-top: 14px; font-size: 12.5px; color: var(--paper-faint); line-height: 1.5; text-align: center; }
@media (max-width: 900px) { .pg-price.glass { margin: 8px auto 0; max-width: none; } }

/* Aviso de promo reutilizable (precios, cotizador) */
.pg-promo { display: flex; align-items: center; gap: 14px 22px; flex-wrap: wrap; padding: 18px 22px; border-radius: 22px; text-decoration: none; color: var(--paper);
  background: linear-gradient(135deg, rgba(240,54,225,.12), rgba(145,73,255,.12)); box-shadow: inset 0 0 0 1px rgba(240,54,225,.35); transition: box-shadow .3s cubic-bezier(.16,1,.3,1), transform .3s cubic-bezier(.16,1,.3,1); }
.pg-promo:hover { box-shadow: inset 0 0 0 1px rgba(240,54,225,.6); }
.pg-promo:active { transform: scale(.99); }
.pg-promo b { font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 22px; letter-spacing: -0.03em; }
.pg-promo span { color: var(--paper-dim); font-size: 14.5px; flex: 1 1 260px; }
.pg-promo .pg-more { flex: none; color: var(--paper); display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }

/* Promos con regalo (promociones.js) */
.pg-promo-name { font-size: clamp(30px, 3.4vw, 40px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; margin: 22px 0 6px; color: var(--paper); }
.pg-gifts { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 8px; }
.pg-gifts li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: linear-gradient(135deg, rgba(240,54,225,.10), rgba(145,73,255,.10)); box-shadow: inset 0 0 0 1px rgba(240,54,225,.28); }
.pg-gifts li span:nth-child(2) { flex: 1; font-size: 14.5px; color: var(--paper); }
.pg-gifts li b { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #f79bf0; white-space: nowrap; }
html[data-theme="light"] .pg-gifts li b { color: #b01aa3; }
.pg-gift-ic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #f036e1, #9149ff); color: #fff; flex: none; }

/* ---------- Hub de herramientas: tarjetas gráficas ---------- */
.pg-toolgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.pg-toolcard { --bz: 6px; display: flex; flex-direction: column; border-radius: 26px; padding: 8px; text-decoration: none; color: var(--paper); transition: transform .5s cubic-bezier(.16,1,.3,1); }
.pg-toolcard:hover { transform: translateY(-4px); }
.pg-toolcard-art { position: relative; border-radius: 20px; aspect-ratio: 12 / 7; display: grid; place-items: center; overflow: hidden; color: var(--paper);
  background: radial-gradient(120% 90% at 20% 0%, rgba(240,54,225,.16), transparent 60%), radial-gradient(100% 90% at 100% 100%, rgba(145,73,255,.18), transparent 60%), rgba(255,255,255,.025);
  box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 rgba(255,255,255,.06); }
html[data-theme="light"] .pg-toolcard-art { background: radial-gradient(120% 90% at 20% 0%, rgba(240,54,225,.12), transparent 60%), radial-gradient(100% 90% at 100% 100%, rgba(145,73,255,.14), transparent 60%), rgba(255,255,255,.6); }
.pg-toolcard-art .tart { width: 86%; height: auto; transition: transform .7s cubic-bezier(.16,1,.3,1); }
.pg-toolcard:hover .tart { transform: scale(1.04); }
.pg-toolcard-body { padding: 18px 14px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pg-toolcard-body small { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--paper-faint); }
.pg-toolcard-body h3 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.pg-toolcard-body p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--paper-dim); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pg-toolcard-body .pg-more { margin-top: auto; padding-top: 8px; }
.pg-toolcard.big { grid-column: span 2; grid-row: span 2; }
.pg-toolcard.big .pg-toolcard-art { aspect-ratio: auto; flex: 1; min-height: 300px; }
.pg-toolcard.big .tart { width: 70%; max-width: 520px; }
.pg-toolcard.big h3 { font-size: clamp(24px, 2.4vw, 32px); }
.pg-toolcard.big .pg-toolcard-body { flex: none; }
.pg-toolcard.big p { -webkit-line-clamp: 4; font-size: 15px; }
@media (max-width: 1000px) { .pg-toolgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pg-toolcard.big { grid-column: span 2; grid-row: auto; } .pg-toolcard.big .pg-toolcard-art { min-height: 240px; } }
@media (max-width: 600px) { .pg-toolgrid { grid-template-columns: minmax(0, 1fr); gap: 18px; } .pg-toolcard.big { grid-column: auto; } .pg-toolcard.big .pg-toolcard-art { min-height: 0; aspect-ratio: 12 / 7; } .pg-toolcard.big .tart { width: 86%; } }
/* Movimiento sutil de las ilustraciones */
@media (prefers-reduced-motion: no-preference) {
  .tart-float { animation: tartFloat 5s cubic-bezier(.45,0,.55,1) infinite; animation-delay: calc(var(--i, 0) * -1.2s); }
  .tart-dot { animation: tartPulse 2.4s cubic-bezier(.45,0,.55,1) infinite; animation-delay: calc(var(--i, 0) * .12s); }
  .pg-toolcard:hover .tart-draw, .pg-toolcard.is-in .tart-draw { stroke-dasharray: 100; animation: tartDraw 1.6s cubic-bezier(.16,1,.3,1) both; }
  .tart-bar { transform-box: fill-box; transform-origin: bottom; }
  .pg-toolcard:hover .tart-bar { animation: tartBar .9s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(var(--i, 0) * 60ms); }
}
@keyframes tartFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes tartPulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes tartDraw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes tartBar { from { transform: scaleY(.2); } to { transform: scaleY(1); } }
.pg-filter button { min-height: 44px; }