/* ==========================================================
   PC al Toque · Acabado premium común (todas las páginas)
   Va justo después de styles.css. Misma paleta; más aire,
   líneas finas, sombras en capas y movimiento sutil.
   El inicio tiene además su propia capa (premium4.css).
   ========================================================== */
:root {
  --pg-ink: #0d1538;
  --pg-soft: #4a5578;
  --pg-hair: rgba(13, 21, 56, .09);
  --pg-sh-1: 0 1px 2px rgba(13, 21, 56, .05), 0 8px 24px rgba(13, 21, 56, .06);
  --pg-sh-2: 0 2px 4px rgba(13, 21, 56, .05), 0 24px 56px rgba(20, 32, 95, .16);
  --pg-grad: linear-gradient(100deg, #2f6bff 0%, #6d4aff 100%);
  --pg-ease: cubic-bezier(.2, .8, .2, 1);
}
::selection { background: #2f6bff; color: #fff; }

/* Barra de progreso de lectura (la crea common.js) */
.p4-progress { position: fixed; z-index: 90; left: 0; top: 0; height: 3px; width: 100%; background: var(--pg-grad); transform-origin: left; transform: scaleX(var(--sp, 0)); pointer-events: none; }

/* ---------- Encabezado ---------- */
.store-header { background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px); box-shadow: 0 1px 0 var(--pg-hair), 0 14px 36px rgba(20, 32, 95, .06); }
.store-search { transition: box-shadow .25s, border-color .25s; }
.store-search:focus-within { box-shadow: 0 0 0 4px rgba(47, 107, 255, .14); }
.store-action, .cart-link { transition: transform .25s var(--pg-ease), box-shadow .25s; }
.store-action:hover { transform: translateY(-1px); }

/* ---------- Botones ---------- */
.btn { position: relative; overflow: hidden; border-radius: 14px; letter-spacing: -.005em; transition: transform .25s var(--pg-ease), box-shadow .25s, background .25s, border-color .25s, color .25s; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--primary { background-image: var(--pg-grad); box-shadow: 0 1px 0 rgba(255, 255, 255, .28) inset, 0 12px 28px rgba(47, 107, 255, .3); }
.btn--primary:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, .28) inset, 0 18px 38px rgba(47, 107, 255, .4); }
.btn--primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%); transform: translateX(-120%); pointer-events: none; }
.btn--primary:hover::after { transform: translateX(120%); transition: transform .7s ease; }
.btn--ghost { box-shadow: var(--pg-sh-1); }

/* ---------- Secciones (el inicio usa su propia capa) ---------- */
body:not([data-page="inicio"]) .section { padding-block: clamp(52px, 6.5vw, 84px); }
body:not([data-page="inicio"]) .section--tight { padding-block: clamp(36px, 4.5vw, 56px); }
body:not([data-page="inicio"]) .section--alt { background-image: radial-gradient(900px 360px at 50% 0%, #e9efff 0%, transparent 70%), linear-gradient(180deg, #f7f9ff 0%, #fff 100%); }
body:not([data-page="inicio"]) .section--soft { background-image: linear-gradient(180deg, #fff 0%, #f6f8fe 100%); }
body:not([data-page="inicio"]) .section + .section { border-top: 1px solid var(--pg-hair); }
body:not([data-page="inicio"]) .section__head h1 { font-size: clamp(34px, 4.8vw, 54px); line-height: 1.04; letter-spacing: -.035em; }
body:not([data-page="inicio"]) .section__head h2 { font-size: clamp(28px, 3.8vw, 42px); line-height: 1.1; letter-spacing: -.03em; }
body:not([data-page="inicio"]) .section__lead { font-size: clamp(16.5px, 1.6vw, 18.5px); line-height: 1.6; color: var(--pg-soft); }
body:not([data-page="inicio"]) .eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 6px 14px 6px 10px; border-radius: 999px; border: 1px solid var(--pg-hair); background: #fff; box-shadow: var(--pg-sh-1); font-size: 11.5px; letter-spacing: .16em; }
body:not([data-page="inicio"]) .eyebrow::before { content: ""; flex: 0 0 8px; width: 8px; height: 8px; margin: 0; border-radius: 50%; background: var(--pg-grad); box-shadow: 0 0 0 3px rgba(47, 107, 255, .14); }

/* ---------- Tarjetas ---------- */
body:not([data-page="inicio"]) :is(.service, .explainer, .build-step, .guide-box, .buy-list, .budget, .help-cta, .contact-form, .quick-start) { border: 1px solid var(--pg-hair); box-shadow: var(--pg-sh-1); }
body:not([data-page="inicio"]) :is(.service, .explainer, .tip) { transition: transform .35s var(--pg-ease), box-shadow .35s, border-color .35s; }
body:not([data-page="inicio"]) :is(.service, .explainer):hover { transform: translateY(-6px); box-shadow: var(--pg-sh-2); border-color: rgba(47, 107, 255, .3); }
body:not([data-page="inicio"]) .service__photo img, body:not([data-page="inicio"]) .tip__photo img { transition: transform .6s var(--pg-ease); }
body:not([data-page="inicio"]) .service:hover .service__photo img, body:not([data-page="inicio"]) .tip:hover .tip__photo img { transform: scale(1.05); }

/* ---------- Pie ---------- */
.footer { position: relative; background-image: radial-gradient(720px 320px at 88% 0%, rgba(109, 74, 255, .32) 0%, transparent 65%), radial-gradient(620px 320px at 0% 100%, rgba(47, 107, 255, .26) 0%, transparent 65%), linear-gradient(180deg, #070c33 0%, #050823 100%); }
.footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(143, 176, 255, .55), transparent); }
.footer a { transition: color .2s, transform .2s; }
.footer__col a:hover { color: #fff; transform: translateX(3px); }
.footer__col a { display: inline-block; }

/* ---------- Aparición suave ---------- */
@keyframes pg-up { from { opacity: 0; transform: translateY(22px); } }
.pg-on .pg-rv:not(.pg-seen) { opacity: 0; }
.pg-on .pg-rv.pg-seen { animation: pg-up .6s var(--pg-ease) var(--pd, 0ms) backwards; }

html.gg-calm .pg-rv { opacity: 1 !important; animation: none !important; }
html.gg-calm .btn--primary::after { display: none; }
@media (prefers-reduced-motion: reduce) { .pg-rv { opacity: 1 !important; animation: none !important; } .btn, .service, .explainer { transition: none; } }

/* ---------- Encabezado: botones del marketplace de técnicos ---------- */
.m-head-cta { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 12px; background: var(--pg-grad); color: #fff !important; font: 800 14.5px var(--font); white-space: nowrap; box-shadow: 0 10px 22px rgba(47, 107, 255, .3); transition: transform .2s; }
.m-head-cta:hover { transform: translateY(-1px); }
.m-head-link { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 12px; border-radius: 12px; color: var(--pg-ink) !important; font: 800 14px var(--font); white-space: nowrap; }
.m-head-link:hover, .m-head-link.is-current { background: #eef2fd; }
.m-head-cta svg, .m-head-link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.m-head-link svg { color: #2f6bff; }
.store-header__actions { gap: 6px; }
@media (max-width: 860px) { .m-head-link span { display: none; } .m-head-link { padding: 0 10px; } }
@media (max-width: 520px) { .m-head-link { display: none; } .m-head-cta { min-height: 40px; padding: 0 12px; font-size: 13.5px; } .store-header__actions .cart-link > span:last-child { display: none; } }
@media (max-width: 420px) { .m-cta-x { display: none; } .m-head-cta { padding: 0 12px; } }

/* ---------- Marca: PC al Toque ("al" en cursiva, como en la portada) ---------- */
.logo span i { font-family: "Palatino Linotype", "Book Antiqua", Palatino, "Iowan Old Style", Georgia, serif; font-style: italic; font-weight: 400; font-size: 1.08em; letter-spacing: 0; margin: 0 .05em; color: #6d4aff; }
.footer .logo span i, .footer--store .logo span i { color: #ffc533; }

/* ---------- Clases de PC (clases.html) ---------- */
.services--clases { grid-template-columns: repeat(3, 1fr); }
.services--clases .service__icon { margin-top: 0; }
.clases-nota { max-width: 62em; margin: 28px auto 0; font-size: 15px; line-height: 1.6; text-align: center; color: var(--text-soft); }
.clases-nota a { font-weight: 800; color: var(--blue-deep, #1d4ed8); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 960px) { .services--clases { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .services--clases { grid-template-columns: 1fr; } }