/* Source-of-truth styles copied from proyectos.html; enqueued on its matching template only. */

    :root{color-scheme:dark;--bg:#11111b;--panel:#191827;--text:#f5f3fa;--muted:#b9b6c5;--line:rgba(255,255,255,.14);--cyan:#2dd9ce;--purple:#8b59ed;--magenta:#ee35a7;--pink:#f41463;--display:'Jost',Arial,sans-serif;--max:1160px}
    *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.65 'Inter',Arial,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit}.wrap{width:min(var(--max),calc(100% - 48px));margin-inline:auto}
    .announcement{background:#172d25;color:#f8f6ec;text-align:center;padding:9px 20px;font-size:11px;letter-spacing:.12em;text-transform:uppercase}.announcement b{color:#d6ff68;font-weight:600}.header{position:sticky;top:0;z-index:20;background:rgba(17,17,27,.76);border-bottom:1px solid var(--line);backdrop-filter:blur(18px) saturate(140%)}.header.scrolled{background:rgba(17,17,27,.9)}.nav{height:78px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:10px}.brand-logo{display:block;width:164px;height:auto;filter:brightness(0) invert(1)}.mobile-toggle{display:none;border:0;background:none;padding:10px;color:var(--text);font-size:22px;cursor:pointer}.nav-links.open{display:flex}.nav-links{display:flex;align-items:center;gap:26px;font:500 16px 'Inter',Arial,sans-serif}.nav-links>a:not(.button){color:#d2cfdb}.nav-links>a:not(.button):hover{color:#d6ff68}.nav-links>a.active,.nav-links>a[aria-current="page"]{color:#d6ff68;font-weight:600}.button,.button.dark{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:12px 24px;border:1px solid rgba(244,20,99,.45);border-radius:12px;background:linear-gradient(135deg,rgba(244,20,99,.22) 0%,rgba(238,53,167,.1) 100%);color:#fff;font-weight:700;white-space:nowrap;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 8px 24px rgba(244,20,99,.18),inset 0 1px 0 rgba(255,255,255,.25);transition:transform .25s ease,background .25s ease,border-color .25s ease,box-shadow .25s ease}.button:hover,.button.dark:hover{transform:translateY(-2px);background:linear-gradient(135deg,#f41463 0%,#ee35a7 100%);border-color:#f41463;box-shadow:0 12px 32px rgba(244,20,99,.4),0 0 20px rgba(238,53,167,.35);color:#fff}.button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s ease}.button:hover svg{transform:translate(3px,-3px)}.project-arrow svg,.link-arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
    /* Hero Projects */
    .hero-projects{position:relative;overflow:hidden;padding:170px 0 60px;background:radial-gradient(ellipse 55% 85% at 5% 15%,rgba(45,217,206,.12),transparent 70%),radial-gradient(ellipse 50% 80% at 95% 30%,rgba(139,89,237,.14),transparent 70%),var(--bg)}
    .eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--pink);font-size:13.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;margin-bottom:14px}
    .eyebrow:before{content:"";width:24px;height:1px;background:currentColor}
    .hero-projects h1{max-width:980px;margin:0 0 20px;font:700 clamp(50px,7vw,84px)/1.01 var(--display);letter-spacing:-.05em;text-transform:uppercase}
    .hero-projects h1 em{font-style:normal;background:linear-gradient(95deg,var(--cyan) 10%,var(--purple) 55%,var(--magenta) 95%);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block}
    .hero-projects p.lede{max-width:740px;margin:0 0 32px;color:#cfcbdb;font-size:19px;line-height:1.75}
    .hero-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
    .btn-secondary{display:inline-flex;align-items:center;gap:9px;padding:12px 22px;border:1px solid rgba(255,255,255,.2);border-radius:9px;background:rgba(255,255,255,.04);color:#f5f3fa;font-weight:600;transition:background .2s ease,border-color .2s ease,transform .2s ease}
    .btn-secondary:hover{background:rgba(255,255,255,.08);border-color:var(--cyan);color:var(--cyan);transform:translateY(-2px)}
    .btn-secondary svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.8;fill:none}
    /* Trust Stats Strip */
    .stats-strip{border-block:1px solid var(--line);background:rgba(21,20,35,.6);padding:34px 0;margin-top:50px}
    .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
    .stat-item{text-align:left;border-left:2px solid rgba(45,217,206,.4);padding-left:18px}
    .stat-num{font:700 36px/1 var(--display);color:#ffffff;letter-spacing:-.03em}
    .stat-num span{color:var(--cyan)}
    .stat-label{display:block;margin-top:6px;color:var(--muted);font-size:14px;line-height:1.4}
    .portfolio{padding:20px 0 110px}.filter-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 32px}.filter-label{margin-right:8px;color:#c1becb;font-size:16px;font-weight:600}.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;padding:8px 4px 18px}.project-image{position:relative;overflow:hidden;aspect-ratio:1.72;border-radius:17px 17px 0 0;background:#1c1b2b}.project-image:after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(15,14,24,.46));pointer-events:none}.project-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .65s cubic-bezier(.2,.7,.2,1)}.project-card:hover .project-image img{transform:scale(1.035)}.project-tag{position:absolute;z-index:3;top:16px;left:16px;padding:7px 11px;border:1px solid rgba(255,255,255,.24);border-radius:999px;background:rgba(17,17,27,.73);color:var(--cyan);font-size:14px;font-weight:600;backdrop-filter:blur(9px)}.project-body{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:23px 24px 25px}.project-body h2{margin:0;font:600 30px/1.15 'Jost',Arial,sans-serif;letter-spacing:-.025em}.project-body p{margin:7px 0 0;color:var(--muted);font-size:16px}.empty-state{display:none;padding:36px;text-align:center;color:var(--muted);font-size:17px}

    /* Border Glow para proyectos y CTA en proyectos.html (React Bits) */
    .project-card,
    .portfolio-cta {
      --edge-proximity: 0;
      --cursor-angle: 45deg;
      --edge-sensitivity: 30;
      --color-sensitivity: calc(var(--edge-sensitivity) + 20);
      --glow-padding: 34px;
      --cone-spread: 25;
      --card-bg: #151423;
      --glow-color: hsl(176deg 85% 76% / 100%);
      --glow-color-60: hsl(176deg 85% 76% / 60%);
      --glow-color-50: hsl(176deg 85% 76% / 50%);
      --glow-color-30: hsl(176deg 85% 76% / 30%);
      --glow-color-20: hsl(176deg 85% 76% / 20%);
      --gradient-one: radial-gradient(at 80% 55%, #8b59ed 0, transparent 50%);
      --gradient-two: radial-gradient(at 69% 34%, #ee35a7 0, transparent 50%);
      --gradient-three: radial-gradient(at 8% 6%, #2dd9ce 0, transparent 50%);
      --gradient-four: radial-gradient(at 41% 38%, #8b59ed 0, transparent 50%);
      --gradient-five: radial-gradient(at 86% 85%, #ee35a7 0, transparent 50%);
      --gradient-six: radial-gradient(at 82% 18%, #2dd9ce 0, transparent 50%);
      --gradient-seven: radial-gradient(at 51% 4%, #ee35a7 0, transparent 50%);
      --gradient-base: linear-gradient(135deg, #2dd9ce 0%, #8b59ed 50%, #ee35a7 100%);

      position: relative;
      isolation: isolate;
      overflow: visible !important;
      border: 1px solid rgba(255, 255, 255, 0.13) !important;
      border-radius: var(--border-radius) !important;
      background-color: var(--card-bg) !important;
      transform: translate3d(0, 0, 0.01px);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
      transition: transform 0.28s ease, box-shadow 0.28s ease;
    }

    .project-card {
      --border-radius: 18px;
    }

    .portfolio-cta {
      --border-radius: 20px;
      --glow-color: hsl(324deg 86% 64% / 100%);
      --glow-color-60: hsl(324deg 86% 64% / 60%);
      --glow-color-50: hsl(324deg 86% 64% / 50%);
      --glow-color-30: hsl(324deg 86% 64% / 30%);
      --glow-color-20: hsl(324deg 86% 64% / 20%);
    }

    .project-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35), 0 0 28px rgba(45, 217, 206, 0.12);
    }

    .portfolio-cta:hover {
      box-shadow: 0 22px 50px rgba(0, 0, 0, 0.38), 0 0 32px rgba(238, 53, 167, 0.14);
    }

    .project-card > :not(.edge-light),
    .portfolio-cta > :not(.edge-light) {
      position: relative;
      z-index: 2;
    }

    .project-card::before,
    .project-card > .edge-light,
    .portfolio-cta::before,
    .portfolio-cta > .edge-light {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      transition: opacity 0.25s ease-out;
    }

    .project-card::before,
    .portfolio-cta::before {
      z-index: 1;
      border: 1px solid transparent;
      background:
        linear-gradient(var(--card-bg) 0 100%) padding-box,
        linear-gradient(rgba(255, 255, 255, 0) 0% 100%) border-box,
        var(--gradient-one) border-box,
        var(--gradient-two) border-box,
        var(--gradient-three) border-box,
        var(--gradient-four) border-box,
        var(--gradient-five) border-box,
        var(--gradient-six) border-box,
        var(--gradient-seven) border-box,
        var(--gradient-base) border-box;
      opacity: calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
      -webkit-mask-image: conic-gradient(
        from var(--cursor-angle) at center,
        black calc(var(--cone-spread) * 1%),
        transparent calc((var(--cone-spread) + 15) * 1%),
        transparent calc((100 - var(--cone-spread) - 15) * 1%),
        black calc((100 - var(--cone-spread)) * 1%));
      mask-image: conic-gradient(
        from var(--cursor-angle) at center,
        black calc(var(--cone-spread) * 1%),
        transparent calc((var(--cone-spread) + 15) * 1%),
        transparent calc((100 - var(--cone-spread) - 15) * 1%),
        black calc((100 - var(--cone-spread)) * 1%));
    }

    .project-card > .edge-light,
    .portfolio-cta > .edge-light {
      inset: calc(var(--glow-padding) * -1);
      z-index: 3;
      border-radius: calc(var(--border-radius) + var(--glow-padding));
      -webkit-mask-image: conic-gradient(
        from var(--cursor-angle) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%
      );
      mask-image: conic-gradient(
        from var(--cursor-angle) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%
      );
      opacity: calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)));
      mix-blend-mode: plus-lighter;
    }

    .project-card > .edge-light::before,
    .portfolio-cta > .edge-light::before {
      content: "";
      position: absolute;
      inset: var(--glow-padding);
      border-radius: var(--border-radius);
      box-shadow:
        inset 0 0 0 1px var(--glow-color),
        inset 0 0 2px 0 var(--glow-color-60),
        inset 0 0 5px 0 var(--glow-color-50),
        inset 0 0 14px 0 var(--glow-color-30),
        0 0 2px 0 var(--glow-color-60),
        0 0 5px 0 var(--glow-color-50),
        0 0 15px 0 var(--glow-color-30),
        0 0 35px 2px var(--glow-color-20);
    }

    .project-card:not(:hover)::before,
    .project-card:not(:hover) > .edge-light,
    .portfolio-cta:not(:hover)::before,
    .portfolio-cta:not(:hover) > .edge-light {
      opacity: 0;
      transition: opacity 0.65s ease;
    }

    /* 1. Botón con flecha: Cyan con Glassmorphism */
    .project-card .project-arrow {
      flex: 0 0 48px;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, rgba(45, 217, 206, 0.2) 0%, rgba(45, 217, 206, 0.08) 100%);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(45, 217, 206, 0.45);
      color: #2dd9ce;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 4px 16px rgba(0, 0, 0, 0.28);
      transition: transform 0.28s ease, background 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease, color 0.28s ease;
      pointer-events: auto;
    }

    .project-card .project-arrow svg {
      display: block;
      width: 20px;
      height: 20px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      filter: drop-shadow(0 0 6px rgba(45, 217, 206, 0.55));
      transition: filter 0.25s ease;
    }

    .project-card:hover .project-arrow {
      background: linear-gradient(135deg, rgba(45, 217, 206, 0.42) 0%, rgba(45, 217, 206, 0.18) 100%);
      border-color: rgba(45, 217, 206, 0.85);
      color: #ffffff;
      transform: scale(1.1);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 0 12px rgba(45, 217, 206, 0.3),
        0 0 24px rgba(45, 217, 206, 0.5),
        0 8px 24px rgba(0, 0, 0, 0.35);
    }

    .project-card:hover .project-arrow svg {
      transform: none;
      filter: drop-shadow(0 0 8px rgba(45, 217, 206, 0.9));
    }

    /* 2. Filtros con iconos inline de Lucide */
    .filter-button {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      min-height: 44px;
      padding: 9px 17px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.035);
      color: #e9e6f0;
      font: 500 15px 'Inter', Arial, sans-serif;
      cursor: pointer;
      transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    }

    .filter-button svg {
      width: 17px;
      height: 17px;
      stroke: currentColor;
      stroke-width: 1.8;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex-shrink: 0;
      transition: transform 0.2s ease;
    }

    .filter-button:hover {
      transform: translateY(-1px);
      border-color: rgba(72, 216, 209, 0.65);
      background: rgba(72, 216, 209, 0.1);
      color: var(--cyan);
    }

    .filter-button:hover svg {
      transform: scale(1.1);
    }

    .filter-button[aria-pressed="true"] {
      border-color: #35ded5;
      background: linear-gradient(135deg, rgba(45, 217, 206, 0.22) 0%, rgba(45, 217, 206, 0.08) 100%);
      color: #3bf1e8;
      box-shadow:
        0 0 0 1px rgba(53, 222, 213, 0.4),
        0 0 16px rgba(45, 217, 206, 0.5),
        0 0 32px rgba(45, 217, 206, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
    }

    .filter-button[aria-pressed="true"] svg {
      filter: drop-shadow(0 0 6px rgba(45, 217, 206, 0.75));
    }

    .filter-button[aria-pressed="true"]:hover {
      box-shadow:
        0 0 0 1px rgba(53, 222, 213, 0.6),
        0 0 20px rgba(45, 217, 206, 0.65),
        0 0 38px rgba(45, 217, 206, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);
    }

    /* 3. Call to Action con magenta y border glow */
    .portfolio-cta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
      margin-top: 60px;
      padding: 38px 42px;
      background: radial-gradient(ellipse at 100% 0%, rgba(238, 53, 167, 0.14), transparent 50%),
                  radial-gradient(ellipse at 0% 100%, rgba(139, 89, 237, 0.12), transparent 50%),
                  #151423 !important;
    }

    .cta-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 12px;
      font: 700 11.5px 'Inter', Arial, sans-serif;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: #f41463;
    }

    .cta-kicker svg {
      width: 16px;
      height: 16px;
      stroke: #ee35a7;
      fill: none;
      stroke-width: 2;
      filter: drop-shadow(0 0 6px rgba(238, 53, 167, 0.55));
    }

    .portfolio-cta h2 {
      margin: 0;
      font: 600 clamp(26px, 3.2vw, 36px) / 1.18 'Jost', Arial, sans-serif;
      letter-spacing: -0.03em;
      text-transform: uppercase;
    }

    .portfolio-cta h2 .text-magenta {
      font-style: normal;
      background: linear-gradient(95deg, #f41463 0%, #ee35a7 52%, #b850ea 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      display: inline-block;
    }

    .portfolio-cta p {
      margin: 10px 0 0;
      color: #c8c5d1;
      font-size: 16px;
      line-height: 1.6;
      max-width: 580px;
    }

    .cta-button {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: 15px 26px;
      border-radius: 12px;
      background: linear-gradient(135deg, rgba(244, 20, 99, 0.22) 0%, rgba(238, 53, 167, 0.1) 100%);
      border: 1px solid rgba(244, 20, 99, 0.45);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      color: #ffffff;
      font: 700 15px 'Inter', Arial, sans-serif;
      white-space: nowrap;
      box-shadow: 0 8px 24px rgba(244, 20, 99, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.25);
      transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
    }

    .cta-button:hover {
      transform: translateY(-2px);
      background: linear-gradient(135deg, #f41463 0%, #ee35a7 100%);
      border-color: #f41463;
      box-shadow: 0 12px 32px rgba(244, 20, 99, 0.4), 0 0 20px rgba(238, 53, 167, 0.35);
      color: #ffffff;
    }

    .cta-button svg {
      width: 18px;
      height: 18px;
      stroke: currentColor;
      stroke-width: 2;
      fill: none;
      transition: transform 0.25s ease;
    }

    .cta-button:hover svg {
      transform: translate(3px, -3px);
    }
    .footer{padding:38px 0 26px;border-top:1px solid var(--line);background:#0e0e17}.footer-row{display:flex;align-items:center;justify-content:space-between;gap:20px;color:#a5a2b0;font-size:14px}.footer-logo img{width:150px;height:auto;filter:brightness(0) invert(1)}
    @media(max-width:900px){
      .stats-grid{grid-template-columns:repeat(2,1fr);gap:20px}
    }
    @media(max-width:760px){
      .wrap{width:min(var(--max),calc(100% - 36px))}
      .nav{height:68px}
      .brand-logo{width:142px}
      .mobile-toggle{display:grid;place-items:center}
      .nav-links{display:none;position:absolute;top:calc(100% + 1px);left:0;right:0;align-items:stretch;gap:0;padding:10px 18px 18px;background:rgba(17,17,27,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(18px)}
      .nav-links.open{display:flex;flex-direction:column}
      .nav-links>a:not(.button){padding:12px 4px}
      .nav-links .button{margin-top:8px;min-height:46px;padding:9px 12px;font-size:14px}
      .hero-projects{padding:148px 0 40px}
      .portfolio{padding-bottom:76px}
      .project-grid{gap:15px}
      .project-body{padding:19px}
      .project-body h2{font-size:25px}
      .project-arrow{flex-basis:40px;width:40px;height:40px}
      .portfolio-cta{align-items:flex-start;flex-direction:column;padding:24px}
      .footer-row{align-items:flex-start;flex-direction:column}
    }
    @media(max-width:680px){
      .hero-projects{padding:140px 0 46px}
      .hero-projects h1{font-size:clamp(42px,12vw,64px)}
      .hero-projects p.lede{font-size:16.5px}
      .stats-grid{grid-template-columns:1fr}
    }
    @media(max-width:560px){
      .filter-bar{gap:8px;margin-bottom:22px}
      .filter-label{width:100%;margin-bottom:3px}
      .filter-button{min-height:42px;padding:8px 12px;font-size:15px}
      .project-grid{grid-template-columns:1fr}
      .project-image{aspect-ratio:1.45}
      .project-body h2{font-size:27px}
      .portfolio-cta{margin-top:36px}
    }
    @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}
  


  .announcement{display:flex;min-height:46px;height:auto;align-items:center;justify-content:center;padding:9px 18px;background:linear-gradient(100deg,#cd1049,#a20e58);color:#fff;text-align:center;font:700 clamp(10px,1vw,12px)/1.35 'Jost',Arial,sans-serif;letter-spacing:.035em;text-transform:uppercase;white-space:normal;text-wrap:balance}
  .announcement b{color:#ffe7a6;font-weight:700}
  .header,.site-header{position:fixed;z-index:30;top:46px;left:0;right:0;width:100%;background:transparent;border:0;backdrop-filter:none;-webkit-backdrop-filter:none;transition:top .28s ease,background .28s ease,backdrop-filter .28s ease,box-shadow .28s ease}
  .header.scrolled,.site-header.scrolled{top:0;background:rgba(20,19,32,.78);backdrop-filter:blur(18px) saturate(145%);-webkit-backdrop-filter:blur(18px) saturate(145%);border-bottom:1px solid rgba(255,255,255,.12);box-shadow:0 8px 28px rgba(5,4,14,.16)}
  .brand-logo,.site-header .logo img{filter:brightness(0) invert(1)}
  @media(max-width:620px){.hero-projects,.intro{padding-top:148px}.announcement{min-height:42px;padding:8px 12px;font-size:10px;letter-spacing:.025em}.header,.site-header{top:42px}.header.scrolled,.site-header.scrolled{top:0}}
  @media(prefers-reduced-motion:reduce){.header,.site-header{transition:none}}