/* Shared visual language for the five navigation pages. Game screens are separate. */
.subpage { background:#0b0e14; }
.subpage main { background:radial-gradient(ellipse at 90% 0,rgba(255,140,66,.07),transparent 38%); }
.page-intro { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:64px; align-items:center; padding:80px 0 64px; }
.page-intro h1,.subpage .projects-hero h1 { max-width:820px; font-size:clamp(2.25rem,4.6vw,4.3rem); font-weight:800; line-height:1.08; letter-spacing:-.045em; margin:18px 0 24px; }
.page-intro-copy { font-size:1.08rem; line-height:1.8; max-width:640px; color:var(--text-secondary); margin-bottom:28px; }
.page-actions { display:flex; gap:12px; flex-wrap:wrap; }
.intro-aside { padding:32px; border-left:1px solid #3b414b; }
.intro-aside h2 { font-size:1.6rem; line-height:1.35; }
.intro-aside p { margin:16px 0 0; color:var(--text-secondary); line-height:1.8; }
.services-section { padding-bottom:32px; }
.subpage .card-product,.subpage .dev-card,.subpage .game-card,.subpage .contact-card { background:var(--surface); border:1px solid var(--border-color) !important; border-radius:20px; box-shadow:none; backdrop-filter:none; }
.subpage .card-product:hover,.subpage .dev-card:hover,.subpage .game-card:hover,.subpage .contact-card:hover,.subpage .project-detail-card:hover { transform:translateY(-3px); box-shadow:none; border-color:#68513f !important; }
.service-grid .card-product { padding:32px !important; }
.service-grid h4 { font-size:1.5rem; margin:24px 0 16px; }
.service-grid p { min-height:66px; line-height:1.7; }
.service-grid ul { line-height:2.2; }
.service-grid .product-icon-box,.service-grid .check-web,.service-grid .check-python { color:var(--venus-orange); }
.service-grid .product-icon-box { background:rgba(255,140,66,.1); }
.subpage .step-item { text-align:left; padding:26px !important; }
.subpage .step-item h5 { font-size:1.08rem; line-height:1.45; }
.subpage .step-number { opacity:.12; font-size:2.7rem; }
.subpage .accordion-item { background:var(--surface); border:1px solid var(--border-color); border-radius:12px !important; overflow:hidden; margin-bottom:12px; }
.subpage .accordion-button { background:var(--surface); color:#f3f5f7 !important; min-height:64px; box-shadow:none; }
.subpage .accordion-button:not(.collapsed) { background:#202630; color:var(--venus-orange) !important; }
.subpage .accordion-button::after { filter:brightness(0) invert(1); }
.subpage .accordion-body { line-height:1.8; }
.subpage .form-container { padding:36px; border:1px solid var(--border-color); border-radius:20px; box-shadow:none !important; background:transparent; }
.subpage .dev-section { padding:0 0 64px; min-height:0; background:transparent; }
.subpage #dev-canvas { display:none; }
.team-monogram { font:800 clamp(2rem,4vw,3.6rem)/1.2 'Exo 2',sans-serif; letter-spacing:-.04em; }
.team-monogram span { color:var(--venus-orange); padding:0 6px; }
.subpage .dev-card { padding:32px !important; }
.profile-avatar { width:72px; height:72px; display:grid; place-items:center; font-size:1.5rem; font-weight:800; border-radius:16px; background:rgba(255,140,66,.12); color:var(--venus-orange); margin-bottom:28px; }
.subpage .dev-card .exo-title-30 { font-size:1.7rem; margin:12px 0; }
.subpage .dev-card p:not(.eyebrow) { line-height:1.8; }
.subpage .skill-badge { border-color:#454d5a; background:#202630; color:#d7dde7; border-radius:8px; margin:4px 8px 4px 0; padding:7px 12px; }
.subpage-cta { border:1px solid var(--border-color); border-radius:20px; padding:40px; display:flex; gap:32px; justify-content:space-between; align-items:center; background:var(--surface); }
.subpage-cta p { color:var(--text-secondary); max-width:660px; margin-bottom:0; line-height:1.8; }
.subpage-cta .eyebrow { color:var(--venus-orange); margin-bottom:14px; }
.subpage-cta .btn { flex-shrink:0; }
.subpage .projects-hero { padding:80px 0 48px; }
.subpage .projects-hero::after,.subpage::before { display:none; }
.subpage .hero-pill { background:transparent; border:none; padding:0; color:var(--venus-orange); font-size:.75rem; letter-spacing:.13em; }
.subpage .projects-summary-card { background:transparent; border:none; border-left:1px solid #3b414b; border-radius:0; box-shadow:none; padding:32px; }
.project-jump-links { display:flex; gap:12px; flex-wrap:wrap; padding-bottom:32px; }
.project-jump-links a { text-decoration:none; color:#d7dde7; padding:12px 16px; border:1px solid var(--border-color); border-radius:10px; font-size:.86rem; }
.project-jump-links a:hover { color:var(--venus-orange); border-color:#68513f; }
.subpage .project-detail-card { background:var(--surface); box-shadow:none; border-color:var(--border-color); padding:32px; }
.subpage .meta-box { background:transparent; border:none; border-bottom:1px solid var(--border-color); border-radius:0; padding:0 0 16px; }
.subpage .project-description { font-size:1rem; line-height:1.8; }
.subpage .cta-panel { border-radius:20px; box-shadow:none; background:var(--surface); }
.subpage #arcade-section { padding:0 0 64px; min-height:0; background:transparent; }
.subpage #arcade-section>.container { padding-top:0 !important; }
.subpage #arcade-section::before,.subpage #arcade-section::after,.subpage .grid-bg { display:none; }
.arcade-symbol { color:var(--venus-orange); font-size:5rem; line-height:1.1; }
.subpage .game-card { display:flex; flex-direction:column; }
.subpage .game-icon { height:110px; font-size:2.8rem; background:linear-gradient(135deg,rgba(255,140,66,.08),transparent); justify-content:flex-start; padding-left:28px; }
.subpage .game-card .p-4 { padding:28px !important; display:flex; flex-direction:column; flex:1; }
.subpage .game-card h3 { font-size:1.3rem; }
.subpage .game-card p { line-height:1.7; flex:1; margin-bottom:24px; }
.subpage .game-card:hover .game-icon i { transform:none; filter:none; }
.subpage .btn-play,.subpage .btn-play:hover { color:#0b0e14; box-shadow:none; }
.subpage .contact-card { align-items:flex-start; text-align:left; padding:28px; }
.subpage .contact-card p { overflow-wrap:anywhere; margin-bottom:0; }
.subpage .icon-circle { width:52px; height:52px; font-size:1.5rem; color:var(--venus-orange); background:rgba(255,140,66,.1); }
.contact-section { padding-bottom:72px; }
/* Explicit states prevent Bootstrap from clearing the custom button background. */
.subpage .btn-whatsapp { background:#25d366; border:1px solid #25d366; color:#0b0e14; opacity:1; visibility:visible; }
.subpage .btn-whatsapp:hover,.subpage .btn-whatsapp:focus-visible,.subpage .btn-whatsapp:active { background:#20bd5a; border-color:#20bd5a; transform:none; color:#0b0e14; opacity:1; visibility:visible; box-shadow:none; }
.service-grid .btn-java,.service-grid .btn-python,.service-grid .btn-web { background:transparent; border-color:#8b6043; color:var(--venus-orange) !important; }
.service-grid .btn-java:hover,.service-grid .btn-python:hover,.service-grid .btn-web:hover,
.service-grid .btn-java:focus-visible,.service-grid .btn-python:focus-visible,.service-grid .btn-web:focus-visible { background:var(--venus-orange) !important; border-color:var(--venus-orange); color:#0b0e14 !important; }
.profile-terminal { margin:24px 0; min-width:0; }
.profile-terminal .terminal-header { align-items:center; padding:12px 16px; border-color:#343d49; }
.terminal-filename { margin-left:auto; color:#9ea9ba; font:400 .75rem 'JetBrains Mono',monospace; }
.profile-terminal .terminal-body { padding:20px; border-color:#343d49; font-size:.8rem; line-height:1.8; overflow-wrap:anywhere; }
.profile-terminal .code-keyword { color:#79b8ff; }
.profile-terminal .code-string { color:#ffad76; }
.profile-terminal .code-comment { color:#8b9bb0; }
.subpage :focus-visible { outline:2px solid var(--venus-orange); outline-offset:4px; }
@media(max-width:991.98px) { .page-intro { gap:32px; padding-top:56px; } .intro-aside { padding:24px; } .subpage-cta { flex-direction:column; align-items:flex-start; } }
@media(max-width:767.98px) { .page-intro { grid-template-columns:1fr; padding:40px 0; gap:24px; } .intro-aside { border-left:0; border-top:1px solid var(--border-color); padding:24px 0 0; } .page-actions .btn { flex:1 1 auto; } .subpage .projects-hero { padding-top:40px; } .subpage .projects-summary-card { border-left:0; border-top:1px solid var(--border-color); padding:24px 0; } .subpage .project-detail-card,.subpage .form-container,.subpage-cta { padding:22px; } .subpage .project-story { grid-template-columns:1fr; } .project-jump-links a { flex:1 1 44%; } }
@media(prefers-reduced-motion:reduce) { .subpage .card-product,.subpage .dev-card,.subpage .game-card,.subpage .contact-card { transition:none; } }

/* Web-design service page shares the site's dark and orange palette. */
.web-section { padding:32px 0; scroll-margin-top:120px; }
.web-section h2 { font:800 clamp(1.5rem,3vw,2.3rem)/1.2 'Exo 2',sans-serif; margin-bottom:24px; letter-spacing:-.025em; }
.web-section p { color:var(--text-secondary); line-height:1.85; max-width:900px; }
.web-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.web-card { border:1px solid var(--border-color); background:var(--surface); border-radius:20px; padding:28px; }
.web-card h3,.web-project h3 { font-size:1.25rem; margin:20px 0 14px; }
.web-card p { margin:0; }
.web-number { color:var(--venus-orange); font-weight:600; }
.web-pricing { border-block:1px solid var(--border-color); margin-top:32px; padding:40px 0; }
.web-project { color:#f3f5f7; text-decoration:none; min-width:0; }
.web-project img { width:100%; height:auto; border:1px solid var(--border-color); border-radius:12px; }
.web-project:hover,.web-service-link { color:var(--venus-orange); }
.web-faq details { border-bottom:1px solid var(--border-color); padding:20px 0; }
.web-faq summary { cursor:pointer; font-weight:600; line-height:1.6; }
.web-faq details p { margin:16px 0 0; }
.web-service-link { text-align:center; font-size:.9rem; text-underline-offset:4px; }
@media(max-width:767.98px) { .web-grid { grid-template-columns:1fr; } .web-section { padding:24px 0; } }

.service-process { grid-template-columns:repeat(4,minmax(0,1fr)); }
.service-grid .card-product { display:flex; flex-direction:column; }
@media(max-width:991.98px) { .service-process { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:767.98px) { .service-process { grid-template-columns:1fr; } }