/* Estilo "pop": tarjetas pastel, fichas flotantes y cinta continua (inspirado en patrones habituales de SaaS, con arte propio) */
:root { --p-blue: #dbe7ff; --p-fuchsia: #ffd9ee; --p-green: #d4f4dc; --p-yellow: #fff0b3; --p-ink: #14213d; }
[data-theme="blue"] { --pc: var(--p-blue); --pc-d: #2b59d9; }
[data-theme="fuchsia"] { --pc: var(--p-fuchsia); --pc-d: #c02a86; }
[data-theme="green"] { --pc: var(--p-green); --pc-d: #14793a; }
[data-theme="yellow"] { --pc: var(--p-yellow); --pc-d: #8a6200; }

/* Fichas flotantes en el hero */
.hero { position: relative; }
.hero-tiles { position: absolute; inset: 0; max-height: 640px; pointer-events: none; overflow: hidden; }
.hero-tile { position: absolute; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: var(--pc); color: var(--pc-d); box-shadow: 0 8px 22px rgba(20, 33, 61, .10); animation: tile-float 7s ease-in-out infinite; }
.hero-tile.l1 { left: 9%; top: 24%; --r: -8deg; } .hero-tile.l2 { left: 4%; top: 48%; --r: 6deg; animation-delay: -2s; } .hero-tile.l3 { left: 13%; top: 68%; --r: -4deg; animation-delay: -4s; }
.hero-tile.r1 { right: 9%; top: 22%; --r: 8deg; animation-delay: -1s; } .hero-tile.r2 { right: 4%; top: 46%; --r: -6deg; animation-delay: -3s; } .hero-tile.r3 { right: 13%; top: 66%; --r: 5deg; animation-delay: -5s; }
@keyframes tile-float { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-12px) rotate(calc(var(--r, 0deg) * -1)); } }
@media (max-width: 1240px) { .hero-tiles { display: none; } }

/* Cinta continua */
.marquee { padding: 8px 0 36px; overflow: hidden; }
.marquee-title { text-align: center; color: var(--text-3); font-size: .8125rem; margin: 0 0 16px; }
.marquee-track { display: flex; width: max-content; animation: marquee 38s linear infinite; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-group { display: flex; gap: 12px; list-style: none; margin: 0; padding: 0 6px; }
.marquee-group li { white-space: nowrap; padding: 10px 18px; border-radius: 999px; background: var(--bg-2); font-weight: 500; font-size: .9375rem; color: var(--text); }
.marquee-group li:nth-child(4n+1) { background: var(--p-blue); } .marquee-group li:nth-child(4n+2) { background: var(--p-green); } .marquee-group li:nth-child(4n+3) { background: var(--p-yellow); } .marquee-group li:nth-child(4n) { background: var(--p-fuchsia); }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; mask-image: none; -webkit-mask-image: none; } .marquee-group[aria-hidden] { display: none; } .hero-tile { animation: none; } }

/* Tarjetas pastel */
.pc-grid4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.pc { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 32px; border-radius: 28px; background: var(--pc); color: var(--p-ink); overflow: hidden; transition: transform .35s var(--spring, ease); }
.pc:hover { transform: translateY(-4px); }
.pc-eyebrow { font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--pc-d); }
.pc h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.1; letter-spacing: -.03em; margin: 0; max-width: 18ch; }
.pc h3 a { color: inherit; } .pc h3 a:hover { text-decoration: none; }
.pc p { margin: 0; max-width: 46ch; font-size: 1rem; line-height: 1.5; color: rgba(20, 33, 61, .78); }
.pc-cta { margin-top: auto; font-weight: 700; color: var(--pc-d); }
.pc-art { min-height: 150px; display: grid; place-items: center; margin-block: 6px; }
@media (max-width: 760px) { .pc-grid4 { grid-template-columns: 1fr; } .pc { padding: 24px; border-radius: 22px; } }

/* Ilustraciones de las tarjetas */
.pc-browser { position: relative; width: min(100%, 320px); height: 150px; border-radius: 14px; background: #fff; box-shadow: 0 12px 30px rgba(20, 33, 61, .16); padding: 28px 14px 12px; transform: rotate(-2deg); }
.pc-browser i { position: absolute; top: 10px; width: 8px; height: 8px; border-radius: 50%; background: #ff6b6b; } .pc-browser i:nth-child(1) { left: 12px; } .pc-browser i:nth-child(2) { left: 26px; background: #ffd166; } .pc-browser i:nth-child(3) { left: 40px; background: #06d6a0; }
.pc-browser b { display: block; height: 38px; border-radius: 8px; background: #0b3dff; margin-bottom: 8px; }
.pc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .pc-grid u { height: 46px; border-radius: 8px; background: #ffe14d; } .pc-grid u:nth-child(2) { background: #ff7ab6; } .pc-grid u:nth-child(3) { background: #5ce1e6; }
.pc-pay { display: flex; gap: 12px; } .pc-pay span { display: grid; place-items: center; min-width: 76px; height: 76px; padding: 0 10px; border-radius: 20px; background: #fff; box-shadow: 0 10px 24px rgba(20, 33, 61, .14); font-size: 1.7rem; font-weight: 700; } .pc-pay span:nth-child(2) { transform: translateY(-10px) rotate(4deg); } .pc-pay span:nth-child(1) { transform: rotate(-5deg); }
.pc-doc { position: relative; width: 170px; padding: 18px; border-radius: 14px; background: #fff; box-shadow: 0 12px 30px rgba(20, 33, 61, .16); transform: rotate(3deg); }
.pc-doc b { font-size: .75rem; letter-spacing: .1em; color: var(--p-ink); } .pc-doc i { display: block; height: 8px; margin-top: 10px; border-radius: 4px; background: #e5e7ee; } .pc-doc i.s { width: 60%; }
.pc-doc em { position: absolute; right: -14px; bottom: 14px; padding: 4px 12px; border-radius: 999px; background: #14793a; color: #fff; font-style: normal; font-size: .75rem; font-weight: 800; transform: rotate(-8deg); }
.pc-stack { position: relative; width: 240px; height: 140px; } .pc-stack i { position: absolute; width: 150px; height: 112px; border-radius: 16px; background: var(--c); box-shadow: 0 12px 26px rgba(20, 33, 61, .2); } .pc-stack i:nth-child(1) { left: 0; top: 18px; transform: rotate(-9deg); } .pc-stack i:nth-child(2) { left: 46px; top: 0; transform: rotate(2deg); } .pc-stack i:nth-child(3) { left: 90px; top: 22px; transform: rotate(10deg); }

/* ===== /servicios ===== */
.gig-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 auto 28px; }
.gig-filters button { padding: 10px 20px; border: 0; border-radius: 999px; background: var(--bg-2); color: var(--text); font: inherit; font-weight: 600; font-size: .9375rem; cursor: pointer; transition: background .2s, color .2s, transform .2s; }
.gig-filters button:hover { transform: translateY(-1px); background: #e8e8ed; }
.gig-filters button[aria-selected="true"] { background: var(--p-ink); color: #fff; }
.gig-empty { text-align: center; color: var(--text-2); }
.gig-card[hidden] { display: none; }
.gig-card { background: var(--pc, #fff); border-radius: 28px; box-shadow: none; padding: 10px; }
.gig-card:hover { box-shadow: 0 18px 40px rgba(20, 33, 61, .14); }
.gig-card .gig-cover { border-radius: 20px; }
.gig-card .gig-body { padding: 16px 10px 10px; }
.gig-card .gig-avatar { background: #fff; }
.gig-card h3 { color: var(--p-ink); }
.gig-card:hover h3 { color: var(--pc-d); }
.gig-card .gig-pay { background: #fff; color: var(--pc-d); }
.gig-card .gig-foot { border-top-color: rgba(20, 33, 61, .12); }
.gig-card .gig-from b { color: var(--p-ink); }
.gig-tag { background: var(--p-ink); color: #fff; }
.gigs-hero { position: relative; }
.gig-page .gig-steps li { background: var(--pc); color: var(--p-ink); border-radius: 22px; }
.gig-page .gig-steps li::before { background: var(--pc-d); }
.gig-page .gig-steps span { color: rgba(20, 33, 61, .75); }
.gig-page .tier-table thead th.is-mid { background: var(--pc-d); }
.gig-page .tier-table thead th { background: var(--pc); color: var(--p-ink); }
.gig-page .tier-table { border-radius: 18px; overflow: hidden; }
.gig-order { border-radius: 28px; box-shadow: 0 0 0 1px var(--line-2), 0 24px 50px rgba(20, 33, 61, .12); }
.gig-tabs { background: var(--pc, var(--bg-2)); }
.gig-tabs button[aria-selected="true"] { border-bottom-color: var(--pc-d, var(--blue)); }
.gig-feats li::before { color: var(--pc-d, var(--green)); }
.gig-hero-cover { border-radius: 28px; }

/* ===== Página del cliente ===== */
.qhero { background: linear-gradient(180deg, #eef3ff 0%, #fff 100%); }
.qhero .timeline { gap: 8px; }
.qhero .timeline li { padding: 10px 14px; border-radius: 999px; background: #fff; color: var(--text-3); text-align: center; box-shadow: 0 0 0 1px var(--line-2); transition: transform .2s; }
.qhero .timeline li::before { display: none; }
.qhero .timeline li.done { background: var(--p-green); color: #14793a; box-shadow: none; }
.qhero .timeline li.done::after { content: ' ✓'; }
.qhero .timeline li.current { background: var(--p-ink); color: #fff; font-weight: 700; box-shadow: 0 8px 20px rgba(20, 33, 61, .25); transform: translateY(-2px); }
@media (max-width: 560px) { .qhero .timeline li { text-align: left; border-radius: 16px; } }
.quote-layout .panel[data-theme] { background: var(--pc); color: var(--p-ink); border-radius: 28px; box-shadow: none; }
.quote-layout .panel[data-theme] .muted, .quote-layout .panel[data-theme] p { color: rgba(20, 33, 61, .78); }
.quote-layout .panel[data-theme] .eyebrow { color: var(--pc-d); }
.quote-layout .panel[data-theme] .status-icon { background: #fff; }
.quote-layout .panel.is-key[data-theme] { box-shadow: 0 0 0 2px rgba(20, 33, 61, .08), 0 18px 40px rgba(20, 33, 61, .10); }
.quote-layout .panel.is-msg { padding: clamp(24px, 4vw, 40px); }
.quote-layout .pay-option { background: #fff; border-radius: 22px; box-shadow: 0 8px 22px rgba(20, 33, 61, .08); }
.quote-layout .pay-option h3 { color: var(--p-ink); }
.quote-layout .pay-option .muted { color: var(--text-2); }
.quote-layout .doc { border-radius: 28px; border-top: 6px solid var(--p-blue); }
.quote-layout .doc-buttons .btn { border-radius: 999px; }
.quote-layout .totals dd.grand, .quote-layout .totals dt.grand { color: var(--p-ink); }
.quote-layout .alert { border-radius: 18px; }
.quote-layout .alert-success { background: var(--p-green); } .quote-layout .alert-info { background: var(--p-blue); color: #1a3a8f; } .quote-layout .alert-warn { background: var(--p-yellow); }
.quote-layout .celebrate { border-radius: 28px; background: var(--p-green); }
.qhero { position: relative; } .qhero > .container { position: relative; }

/* Cabeceras bajas (servicios, página del cliente): menos fichas y pegadas a los bordes para no pisar el texto */
.gigs-hero .hero-tile.l3, .gigs-hero .hero-tile.r3, .qhero .hero-tile.l3, .qhero .hero-tile.r3 { display: none; }
.gigs-hero .hero-tile.l1, .qhero .hero-tile.l1 { left: 3%; top: 14%; } .gigs-hero .hero-tile.l2, .qhero .hero-tile.l2 { left: 6%; top: 52%; }
.gigs-hero .hero-tile.r1, .qhero .hero-tile.r1 { right: 3%; top: 12%; } .gigs-hero .hero-tile.r2, .qhero .hero-tile.r2 { right: 6%; top: 50%; }
@media (max-width: 1360px) { .gigs-hero .hero-tiles { display: none; } }
@media (max-width: 1200px) { .qhero .hero-tiles { display: none; } }
.gig-page .tier-table thead th.is-mid, .gig-page .tier-table thead th.is-mid b { color: #fff; }

.pc-wide { flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; }
.pc-wide > div:first-child { display: grid; gap: 14px; max-width: 56ch; }
@media (max-width: 760px) { .pc-wide { flex-direction: column; align-items: flex-start; } }