/* =====================================================
   PÁGINA DE PROYECTOS
   Portafolio filtrable por categoría y línea de tiempo del proceso.
===================================================== */

body {
          font-family: 'Manrope', -apple-system, 'Segoe UI', sans-serif;
          -webkit-font-smoothing: antialiased;
          color: var(--text);
          background: transparent;
        }

summary::marker {
          display: none;
          content: "";
        }

/* Service card system — uniform in light, visible in dark */
        .jd-card {
          position: relative;
          display: flex;
          flex-direction: column;
          background: var(--card-bg);
          border: 1px solid var(--card-bd);
          border-radius: 22px;
          overflow: hidden;
          box-shadow: var(--card-sh);
          transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.32s ease, border-color 0.32s ease;
        }

.jd-card:hover {
          transform: translateY(-6px);
          border-color: var(--border-hover);
          box-shadow: var(--card-sh-h);
        }

.jd-card__media {
          position: relative;
          aspect-ratio: 4 / 3;
          display: flex;
          align-items: center;
          justify-content: center;
          background: var(--media-bg);
          border-bottom: 1px solid var(--media-bd);
          overflow: hidden;
        }

.jd-card__media img {
          width: 88%;
          height: auto;
          display: block;
          mix-blend-mode: multiply;
          transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
        }

.jd-card:hover .jd-card__media img {
          transform: scale(1.045);
        }

.jd-card__media span svg {
          stroke: var(--accent);
        }

/* ============ FONDO GLOBAL: AMBIENT + GRID TÉCNICO ============ */
        body::before {
          content: "";
          position: fixed;
          inset: 0;
          z-index: -2;
          pointer-events: none;
          background:
            radial-gradient(1000px 680px at 84% -8%, var(--ambient-1), transparent 58%),
            radial-gradient(760px 620px at -10% 38%, var(--ambient-2), transparent 60%),
            var(--bg);
        }

/* ============ TRANSICIÓN SUAVE ENTRE TEMAS ============ */
        html.theme-anim,
        html.theme-anim *,
        html.theme-anim *::before,
        html.theme-anim *::after {
          transition: background-color .45s ease, background .45s ease, border-color .45s ease, color .3s ease, fill .3s ease, box-shadow .45s ease !important;
        }

/* ============ TOGGLE DE TEMA ============ */
        [data-theme-toggle] {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 44px;
          height: 44px;
          border-radius: 11px;
          flex-shrink: 0;
          border: 1.5px solid var(--border);
          background: rgba(var(--surface-rgb), 0.5);
          color: var(--text);
          cursor: pointer;
          padding: 0;
          position: relative;
          overflow: hidden;
          transition: border-color .2s ease, background .2s ease, transform .2s ease, color .2s ease;
        }

/* ============ IMG HERO — CLARO/OSCURO ============ */
        .jd-hero-img-dark {
          display: none !important;
        }

@keyframes jdFloat {

          0%,
          100% {
            transform: translateY(0px);
          }

          50% {
            transform: translateY(-16px);
          }
        }

@keyframes jdMarquee {
          from {
            transform: translateX(0);
          }

          to {
            transform: translateX(-50%);
          }
        }

@keyframes jdPulse {

          0%,
          100% {
            opacity: 0.55;
          }

          50% {
            opacity: 0.9;
          }
        }

@media (max-width: 940px) {
          [data-desktop-nav] {
            display: none !important;
          }

          [data-nav-cta] {
            display: none !important;
          }

          [data-hamburger] {
            display: inline-flex !important;
          }

          [data-nav-toggle] {
            display: none !important;
          }
        }

/* ============ PORTFOLIO — COMPONENTES ============ */
        .pf-eyebrow {
          display: inline-flex; align-items: center; gap: 9px;
          font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
          color: var(--accent);
          padding: 7px 14px; border-radius: 999px;
          background: rgba(var(--accent-rgb), 0.09);
          border: 1px solid rgba(var(--accent-rgb), 0.22);
        }

.pf-eyebrow::before {
          content: ""; width: 6px; height: 6px; border-radius: 50%;
          background: var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.18);
          animation: jdPulse 2.6s ease-in-out infinite;
        }

/* Chips */
        .pf-chip {
          display: inline-flex; align-items: center;
          font-size: 12px; font-weight: 700; letter-spacing: 0.01em;
          color: var(--text-soft);
          padding: 6px 12px; border-radius: 999px;
          background: var(--surface); border: 1px solid var(--border);
          white-space: nowrap;
        }

.pf-chip--accent {
          color: var(--accent);
          background: rgba(var(--accent-rgb), 0.08);
          border-color: rgba(var(--accent-rgb), 0.22);
        }

/* Browser mockup */
        .pf-browser {
          position: relative; border-radius: 16px; overflow: hidden;
          background: var(--card-bg); border: 1px solid var(--card-bd);
          box-shadow: var(--card-sh);
          transition: transform 0.4s cubic-bezier(0.22,0.61,0.36,1), box-shadow 0.4s ease, border-color 0.4s ease;
        }

.pf-browser__bar {
          display: flex; align-items: center; gap: 8px;
          height: 40px; padding: 0 14px;
          background: linear-gradient(180deg, rgba(var(--surface-rgb),0.9), rgba(var(--surface-rgb),0.7));
          border-bottom: 1px solid var(--border);
        }

.pf-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

.pf-url {
          flex: 1; margin-left: 8px; height: 22px; border-radius: 7px;
          display: flex; align-items: center; gap: 7px; padding: 0 12px;
          background: rgba(var(--shadow-rgb), 0.05); border: 1px solid var(--border);
          font-size: 11.5px; font-weight: 600; color: var(--text-muted);
          overflow: hidden; white-space: nowrap;
        }

.pf-browser__view {
          position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--surface);
        }

.pf-browser__view img {
          position: absolute; inset: 0; width: 100%; height: 100%;
          object-fit: cover; object-position: top center; display: block;
          transition: transform 3.6s cubic-bezier(0.22,0.61,0.36,1);
        }

/* Phone mockup */
        .pf-phone {
          position: relative; width: 100%; aspect-ratio: 9 / 19.3;
          border-radius: 30px; padding: 7px;
          background: linear-gradient(160deg, #2a2833, #17161d);
          box-shadow: 0 24px 55px -18px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(255,255,255,0.08);
        }

.pf-phone__screen {
          position: relative; width: 100%; height: 100%; border-radius: 23px; overflow: hidden;
          background: var(--surface);
        }

.pf-phone__screen img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }

.pf-phone__notch {
          position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
          width: 42%; height: 18px; border-radius: 0 0 12px 12px; background: #17161d; z-index: 2;
        }

/* Project card */
        .pf-card {
          position: relative; display: flex; flex-direction: column;
          background: var(--card-bg); border: 1px solid var(--card-bd);
          border-radius: 22px; overflow: hidden; box-shadow: var(--card-sh);
          transition: transform 0.4s cubic-bezier(0.22,0.61,0.36,1), box-shadow 0.4s ease, border-color 0.4s ease, opacity 0.45s ease;
        }

.pf-card:hover {
          transform: translateY(-7px);
          border-color: var(--border-hover);
          box-shadow: var(--card-sh-h);
        }

.pf-card__shot {
          position: relative; overflow: hidden; aspect-ratio: 16 / 10;
          background: var(--surface); border-bottom: 1px solid var(--border);
        }

.pf-card__shot img {
          position: absolute; inset: 0; width: 100%; height: 100%;
          object-fit: cover; object-position: top center; display: block;
          transition: transform 4s cubic-bezier(0.22,0.61,0.36,1);
        }

.pf-card:hover .pf-card__shot img { transform: scale(1.06); }

.pf-card__chrome {
          position: absolute; top: 0; left: 0; right: 0; height: 30px; z-index: 2;
          display: flex; align-items: center; gap: 6px; padding: 0 12px;
          background: linear-gradient(180deg, rgba(10,9,14,0.55), rgba(10,9,14,0));
        }

.pf-card__overlay {
          position: absolute; inset: 0; z-index: 3;
          display: flex; align-items: flex-end; padding: 16px;
          background: linear-gradient(0deg, rgba(10,9,14,0.82) 0%, rgba(10,9,14,0.15) 45%, rgba(10,9,14,0) 70%);
          opacity: 0; transition: opacity 0.4s ease;
        }

.pf-card:hover .pf-card__overlay { opacity: 1; }

.pf-visit {
          display: inline-flex; align-items: center; gap: 8px;
          font-size: 13px; font-weight: 800; color: #fff;
          padding: 10px 16px; border-radius: 10px;
          background: rgba(var(--accent-rgb), 0.95);
          box-shadow: 0 10px 24px rgba(0,0,0,0.35);
          transform: translateY(8px); transition: transform 0.4s cubic-bezier(0.22,0.61,0.36,1);
        }

.pf-card:hover .pf-visit { transform: translateY(0); }

.pf-card__body { display: flex; flex-direction: column; gap: 12px; padding: 22px 22px 24px; flex: 1; }

/* Filter bar */
        .pf-filter { display: flex; flex-wrap: wrap; gap: 10px; }

.pf-filter-btn {
          font-family: inherit; cursor: pointer;
          font-size: 13.5px; font-weight: 700; color: var(--text-muted);
          padding: 10px 18px; border-radius: 999px;
          background: transparent; border: 1px solid var(--border);
          transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease, transform 0.15s ease;
        }

.pf-filter-btn:hover { color: var(--text); border-color: var(--border-hover); }

.pf-filter-btn[aria-pressed="true"] {
          color: #fff; background: var(--accent);
          border-color: var(--accent);
          box-shadow: 0 8px 20px rgba(var(--accent-rgb), 0.28);
        }

.pf-card.is-hidden { display: none; }

/* Stat number */
        .pf-stat-num {
          font-size: clamp(30px, 4vw, 44px); font-weight: 800; letter-spacing: -0.02em;
          line-height: 1; color: var(--text);
          background: linear-gradient(120deg, var(--accent), var(--accent-hover));
          -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
        }

/* Featured layout */
        .pf-featured { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: clamp(28px, 4vw, 60px); align-items: center; }

.pf-featured.is-reverse .pf-featured__visual { order: 2; }

.pf-featured__visual { position: relative; }

.pf-featured__phone {
          position: absolute; right: -14px; bottom: -34px; width: 26%; min-width: 116px; z-index: 4;
        }

@media (max-width: 860px) {
          .pf-featured { grid-template-columns: 1fr; gap: 30px; }
          .pf-featured.is-reverse .pf-featured__visual { order: 0; }
          .pf-featured__phone { width: 30%; right: 8px; bottom: -24px; }
        }