/* Páginas de producto de software (/condominio y /gym): estilos compartidos.
   Cada página define su paleta con variables en una clase de tema (.tema-condominio, .tema-gym):
     --p-acento        color principal del producto (bordes y brillos)
     --p-acento-claro  versión clara para textos sobre fondo oscuro
     --p-btn           relleno de los botones principales      --p-sobre  texto sobre el botón
     --p-fondo         tinte de las tarjetas                   --p-borde  borde de las tarjetas
     --p-hero-1/2      brillos de fondo de la portada
     --mk-*            colores de las maquetas (pantallas de ejemplo): primario, fondo claro y tinta
   Las maquetas son HTML y CSS (no capturas): usan unidades de contenedor (cqw) para escalar con su tamaño. */
::selection { background: var(--p-acento); color: #04110f; }
.pd-grad { background: linear-gradient(100deg, var(--p-acento-claro) 0%, var(--p-acento) 60%, var(--p-acento-claro) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.pd-eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-family: 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--p-acento-claro); padding: .4rem .85rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--p-acento) 45%, transparent); background: color-mix(in srgb, var(--p-acento) 10%, transparent); }
.pd-h2 { font-family: 'Geist', sans-serif; font-weight: 600; color: #fff; letter-spacing: -0.02em; line-height: 1.1; text-wrap: balance; }
/* botones */
.pd-btn { background: var(--p-btn); color: var(--p-sobre); box-shadow: 0 8px 28px color-mix(in srgb, var(--p-acento) 28%, transparent), inset 0 1px 0 rgba(255,255,255,.25); transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out), filter .2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .pd-btn:hover { filter: brightness(1.08); box-shadow: 0 10px 38px color-mix(in srgb, var(--p-acento) 45%, transparent), inset 0 1px 0 rgba(255,255,255,.3); } }
.pd-btn:active { transform: scale(.97); transition: transform .1s var(--ease-out); }
.pd-btn-sec { border: 1px solid rgba(255,255,255,.22); color: #fff; background: rgba(255,255,255,.04); transition: transform .2s var(--ease-out), border-color .2s var(--ease-out), background-color .2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .pd-btn-sec:hover { border-color: var(--p-acento); background: color-mix(in srgb, var(--p-acento) 10%, transparent); } }
.pd-btn-sec:active { transform: scale(.97); transition: transform .1s var(--ease-out); }
/* portada */
.pd-hero-bg { background: radial-gradient(ellipse 70% 60% at 78% 30%, var(--p-hero-1), transparent 70%), radial-gradient(ellipse 50% 50% at 90% 70%, var(--p-hero-2), transparent 70%), radial-gradient(ellipse 60% 50% at 0% 0%, var(--p-fondo), transparent 70%); }
.pd-visual { position: relative; padding: 0 0 1.5rem; }
.pd-visual::before { content: ''; position: absolute; inset: 8% 4% 4%; background: radial-gradient(closest-side, color-mix(in srgb, var(--p-acento) 20%, transparent), transparent 72%); filter: blur(24px); pointer-events: none; }
.pd-laptop { position: relative; width: 90%; }
.pd-laptop-screen { border: 9px solid #15171d; border-bottom-width: 11px; border-radius: 16px 16px 5px 5px; background: #0b0c10; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.07); }
.pd-laptop-base { height: 12px; margin: 0 -4%; border-radius: 0 0 16px 16px; background: linear-gradient(#30333d, #15171d); box-shadow: 0 16px 34px rgba(0,0,0,.55); }
.pd-phone { position: relative; width: min(236px, 68%); margin: 0 auto; border: 7px solid #0b0c10; border-radius: 34px; overflow: hidden; background: #0b0c10; box-shadow: 0 30px 70px rgba(0,0,0,.7), 0 0 0 1.5px rgba(255,255,255,.13), 0 0 70px color-mix(in srgb, var(--p-acento) 18%, transparent); }
@media (min-width: 768px) { .pd-phone-sobre { position: absolute; right: 0; bottom: -8px; width: 31%; margin: 0; } }
/* datos de confianza */
.pd-dato { display: flex; align-items: flex-start; gap: .85rem; }
.pd-dato-ico { flex: none; width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; border-radius: .8rem; color: var(--p-acento-claro); background: color-mix(in srgb, var(--p-acento) 12%, transparent); border: 1px solid color-mix(in srgb, var(--p-acento) 30%, transparent); }
/* tarjetas */
.pd-card { background: linear-gradient(180deg, var(--p-fondo), rgba(13,14,18,.92)); border: 1px solid var(--p-borde); border-radius: 22px; }
.pd-card-flat { background: #0D0E12; border: 1px solid #1F232B; border-radius: 22px; }
/* pestañas */
.pd-tab { min-height: 52px; padding: .5rem .55rem; text-align: center; line-height: 1.2; border-radius: 12px; border: 1px solid transparent; font-family: 'Space Grotesk', sans-serif; font-size: .8rem; font-weight: 500; color: #94a3b8; transition: color .25s var(--ease-out), background-color .25s var(--ease-out), border-color .25s var(--ease-out); }
@media (min-width: 640px) { .pd-tab { min-height: 46px; padding: .55rem 1.15rem; font-size: .9rem; white-space: nowrap; } }
@media (hover: hover) and (pointer: fine) { .pd-tab:hover { color: #fff; } }
.pd-tab[aria-selected="true"] { color: var(--p-acento-claro); background: color-mix(in srgb, var(--p-acento) 16%, transparent); border-color: color-mix(in srgb, var(--p-acento) 45%, transparent); font-weight: 600; }
.pd-panel[hidden] { display: none; }
.pd-panel:not([hidden]) { animation: pdIn .4s var(--ease-out); }
@keyframes pdIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.pd-beneficio { display: flex; align-items: flex-start; gap: .9rem; font-size: 1.05rem; line-height: 1.45; color: #e2e8f0; }
.pd-check { flex: none; width: 1.55rem; height: 1.55rem; margin-top: .05rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--p-acento) 45%, transparent); background: color-mix(in srgb, var(--p-acento) 14%, transparent); position: relative; }
.pd-check::after { content: ''; position: absolute; left: 36%; top: 22%; width: 22%; height: 44%; border: solid var(--p-acento-claro); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.pd-linea { font-family: 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 600; padding: .25rem .6rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); white-space: nowrap; }
/* calculadora */
.pd-range { accent-color: var(--p-acento); height: 44px; cursor: pointer; background: transparent; }
.pd-opcion { position: relative; display: block; cursor: pointer; }
.pd-opcion input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.pd-opcion span { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: .5rem 1.4rem; border-radius: .9rem; border: 1px solid rgba(255,255,255,.15); color: #cbd5e1; font-family: 'Space Grotesk', sans-serif; font-weight: 600; transition: border-color .2s var(--ease-out), background-color .2s var(--ease-out), color .2s var(--ease-out); }
.pd-opcion input:checked + span { border-color: var(--p-acento); background: color-mix(in srgb, var(--p-acento) 16%, transparent); color: var(--p-acento-claro); }
.pd-opcion input:focus-visible + span { outline: 2px solid var(--acento-1); outline-offset: 2px; }
/* comparación */
.pd-cmp { border-collapse: collapse; }
.pd-cmp-head { padding: 1.1rem 1.5rem; font-family: 'Space Grotesk', sans-serif; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: #94a3b8; font-weight: 600; background: rgba(255,255,255,.02); width: 36%; }
.pd-cmp-head-prod { color: var(--p-acento-claro); background: color-mix(in srgb, var(--p-acento) 9%, transparent); }
.pd-cmp-th { padding: 1.25rem 1.5rem; font-family: 'Space Grotesk', sans-serif; font-weight: 600; color: #fff; width: 28%; vertical-align: top; border-top: 1px solid #1F232B; }
.pd-cmp-hoy, .pd-cmp-prod { padding: 1.25rem 1.5rem; vertical-align: top; border-top: 1px solid #1F232B; line-height: 1.5; }
.pd-cmp-hoy { color: #94a3b8; }
.pd-cmp-prod { color: #f1f5f9; background: color-mix(in srgb, var(--p-acento) 6%, transparent); }
@media (max-width: 767px) {
  .pd-cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pd-cmp, .pd-cmp tbody, .pd-cmp tr, .pd-cmp th, .pd-cmp td { display: block; width: 100%; }
  .pd-cmp tr { border-top: 1px solid #1F232B; padding: 1.1rem 0; } .pd-cmp tr:first-child { border-top: 0; }
  .pd-cmp-th { border: 0; padding: .1rem 1.25rem .5rem; } .pd-cmp-hoy, .pd-cmp-prod { border: 0; padding: .6rem 1.25rem; }
  .pd-cmp td::before { content: attr(data-label); display: block; font-family: 'Space Grotesk', sans-serif; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; margin-bottom: .2rem; color: #94a3b8; }
  .pd-cmp-prod::before { color: var(--p-acento-claro); }
}
/* ventana de ejemplo de la dirección propia */
.pd-ventana { border-radius: 18px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); background: #0b0c10; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.pd-barra { display: flex; align-items: center; gap: .75rem; padding: .7rem .9rem; background: #15171d; border-bottom: 1px solid rgba(255,255,255,.06); }
.pd-puntos { display: inline-flex; gap: .35rem; } .pd-puntos i { width: .6rem; height: .6rem; border-radius: 999px; background: #2a2d36; }
.pd-url { flex: 1; min-width: 0; padding: .4rem .8rem; border-radius: 999px; background: #0b0c10; color: #cbd5e1; font-size: .8rem; font-family: 'Space Grotesk', sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-pantalla { padding: 2.2rem 1.5rem 2rem; text-align: center; color: var(--mk-tinta); background: var(--mk-fondo); }
.pd-emblema { width: 4.2rem; height: 4.2rem; margin: 0 auto .9rem; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--mk-primario); color: #fff; border: 3px solid var(--mk-borde-emb, var(--p-acento)); font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.3rem; }
.pd-pantalla .nombre { font-family: 'Geist', sans-serif; font-weight: 700; font-size: 1.35rem; }
.pd-pantalla .sub { margin-bottom: 1.25rem; font-size: .85rem; color: #4b5563; }
.pd-pantalla .campo { max-width: 17rem; margin: 0 auto .75rem; padding: .8rem 1rem; border-radius: .8rem; background: #fff; border: 1px solid rgba(0,0,0,.15); color: #6b7280; text-align: left; font-size: .9rem; }
.pd-pantalla .boton { max-width: 17rem; margin: 0 auto; padding: .85rem 1rem; border-radius: .8rem; background: var(--mk-primario); color: #fff; font-weight: 600; font-size: .9rem; }
.pd-pantalla .ayuda { margin-top: 1rem; font-size: .78rem; color: #4b5563; }

/* ================= Maquetas: pantallas de ejemplo en HTML y CSS ================= */
.mk { container-type: inline-size; font-family: 'Geist', sans-serif; color: var(--mk-tinta); }
.mk * { box-sizing: border-box; }
.mk-tel { background: var(--mk-fondo); aspect-ratio: 9 / 19.5; padding: 5cqw 5cqw 0; font-size: 4.4cqw; line-height: 1.25; display: flex; flex-direction: column; gap: 3.5cqw; overflow: hidden; }
.mk-barra { display: flex; align-items: center; gap: 3cqw; font-weight: 700; font-size: 4.6cqw; }
.mk-barra small { display: block; font-weight: 500; font-size: 3.1cqw; color: #4b5563; }
.mk-emb { flex: none; width: 9.5cqw; height: 9.5cqw; border-radius: 50%; background: var(--mk-primario); color: #fff; font-size: 3.5cqw; display: flex; align-items: center; justify-content: center; font-weight: 700; border: .5cqw solid var(--mk-borde-emb, var(--p-acento)); }
.mk-tarjeta { background: #fff; border-radius: 3.5cqw; padding: 4cqw; box-shadow: 0 .4cqw 1.2cqw rgba(0,0,0,.1); }
.mk-destacado { border-radius: 4cqw; padding: 5cqw; background: var(--mk-primario); color: #fff; }
.mk-etq { font-size: 3cqw; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.mk-grande { font-size: 9.5cqw; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }
.mk-peq { font-size: 3.3cqw; color: #4b5563; }
.mk-destacado .mk-peq, .mk-destacado .mk-etq { color: #fff; }
.mk-fila { display: flex; justify-content: space-between; gap: 2cqw; padding: 2.1cqw 0; border-top: 1px solid rgba(0,0,0,.08); font-size: 3.9cqw; }
.mk-fila:first-child { border-top: 0; }
.mk-fila b { font-weight: 700; }
.mk-boton { background: var(--mk-primario); color: #fff; text-align: center; border-radius: 3cqw; padding: 3.4cqw; font-weight: 700; }
.mk-pastilla { display: inline-block; padding: .8cqw 2.4cqw; border-radius: 99px; font-size: 3cqw; font-weight: 700; background: var(--mk-ok-fondo, #dcfce7); color: var(--mk-ok, #166534); }
.mk-pastilla.malo { background: #fee2e2; color: #991b1b; } .mk-pastilla.aviso { background: #fef3c7; color: #92400e; }
.mk-nav { margin-top: auto; margin-left: -5cqw; margin-right: -5cqw; display: grid; grid-template-columns: repeat(4, 1fr); padding: 2.6cqw 2cqw 3.4cqw; background: #fff; border-top: 1px solid rgba(0,0,0,.08); text-align: center; font-size: 2.9cqw; color: #6b7280; }
.mk-nav span:first-child { color: var(--mk-primario); font-weight: 700; }
.mk-qr { width: 46cqw; height: 46cqw; margin: 0 auto; background: conic-gradient(from 0deg, #111 0 25%, #fff 0 50%, #111 0 75%, #fff 0) 0 0 / 6.5cqw 6.5cqw; border: 2.4cqw solid #fff; outline: .6cqw solid #111; border-radius: 1.5cqw; position: relative; }
.mk-qr::before, .mk-qr::after { content: ''; position: absolute; width: 11cqw; height: 11cqw; border: 2cqw solid #111; background: #fff; box-shadow: inset 0 0 0 1.6cqw #fff, inset 0 0 0 4cqw #111; }
.mk-qr::before { left: 0; top: 0; } .mk-qr::after { right: 0; top: 0; }
/* laptop: panel de administración */
.mk-lap { background: var(--mk-fondo); aspect-ratio: 16 / 10; display: grid; grid-template-columns: 17cqw 1fr; font-size: 1.35cqw; line-height: 1.3; overflow: hidden; }
.mk-lado { background: var(--mk-primario); color: #fff; padding: 2.2cqw 1.6cqw; display: flex; flex-direction: column; gap: .9cqw; }
.mk-lado b { font-size: 1.5cqw; margin-bottom: 1.2cqw; display: flex; align-items: center; gap: .8cqw; }
.mk-lado span { padding: .9cqw 1.1cqw; border-radius: .8cqw; font-size: 1.3cqw; }
.mk-lado span.on { background: rgba(255,255,255,.18); font-weight: 700; }
.mk-main { padding: 2.2cqw 2.4cqw; display: flex; flex-direction: column; gap: 1.6cqw; min-width: 0; }
.mk-titulo { font-size: 2cqw; font-weight: 800; }
.mk-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2cqw; }
.mk-kpi { background: #fff; border-radius: 1cqw; padding: 1.3cqw 1.5cqw; box-shadow: 0 .2cqw .6cqw rgba(0,0,0,.08); }
.mk-kpi small { display: block; font-size: 1.05cqw; color: #4b5563; } .mk-kpi strong { display: block; font-size: 2.3cqw; font-weight: 800; letter-spacing: -.02em; }
.mk-kpi strong.mal { color: #c2410c; } .mk-kpi strong.bien { color: var(--mk-primario); }
.mk-dos { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.2cqw; min-height: 0; }
.mk-panel { background: #fff; border-radius: 1cqw; padding: 1.4cqw 1.6cqw; box-shadow: 0 .2cqw .6cqw rgba(0,0,0,.08); min-width: 0; }
.mk-panel h5 { font-size: 1.3cqw; font-weight: 700; margin-bottom: 1cqw; }
.mk-barras { display: flex; align-items: flex-end; gap: .7cqw; height: 9cqw; }
.mk-barras i { flex: 1; border-radius: .4cqw .4cqw 0 0; background: var(--mk-primario); opacity: .9; }
.mk-barras i.b { background: var(--mk-acento-claro, #c9a227); }
.mk-tabla div { display: flex; justify-content: space-between; gap: 1cqw; padding: .75cqw 0; border-top: 1px solid rgba(0,0,0,.07); font-size: 1.2cqw; }
.mk-tabla div:first-child { border-top: 0; }
.mk-tabla b { font-weight: 700; }
/* miniaturas de «Cómo funciona» */
.mk-paso { aspect-ratio: 1.85 / 1; background: var(--mk-fondo); padding: 4.5cqw 5cqw; font-size: 3.3cqw; line-height: 1.3; overflow: hidden; display: flex; flex-direction: column; gap: 2.5cqw; justify-content: center; }
.mk-paso .mk-tarjeta { padding: 2.6cqw 3.4cqw; }
.mk-paso .mk-fila { font-size: 3.2cqw; padding: 1.5cqw 0; }
.mk-codigo { display: flex; justify-content: center; gap: 2cqw; } .mk-codigo i { width: 8cqw; height: 10cqw; border-radius: 1.6cqw; background: #fff; border: .4cqw solid rgba(0,0,0,.15); display: flex; align-items: center; justify-content: center; font-style: normal; font-weight: 800; font-size: 5cqw; color: var(--mk-primario); }
.mk-minikpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; } .mk-minikpis .mk-tarjeta { padding: 2.4cqw; } .mk-minikpis small { display: block; font-size: 2.6cqw; color: #4b5563; } .mk-minikpis strong { display: block; font-size: 6cqw; font-weight: 800; letter-spacing: -.02em; }
.mk-dos { flex: 1; }
.mk-main > .mk-panel { flex: 1; }
.mk-barras { height: 13cqw; }
.mk-tabla div { padding: 1cqw 0; }