/* ==========================================================================
   SAVTIA — portafolio
   Lo usan la portada (escenario, sección #portafolio) y /portafolio/
   (rejilla filtrable con fichas). Va después de styles.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Novedades del resto de la página
   -------------------------------------------------------------------------- */
.card__ctas { margin-top:auto; display:flex; flex-wrap:wrap; gap:10px 20px; }
.card__ctas .card__cta { margin-top:0; }

/* --------------------------------------------------------------------------
   Acento por proyecto
   -------------------------------------------------------------------------- */
[data-p="fapsito"]   { --pa:#F0C060; --pa-text:#8A6520; --pa-soft:rgba(240,192,96,.16); }
[data-p="agenda"]    { --pa:#C2185B; --pa-text:#AD1457; --pa-soft:rgba(194,24,91,.10); }
[data-p="papillapp"] { --pa:#D95F7B; --pa-text:#A8385A; --pa-soft:rgba(217,95,123,.12); }
[data-p="osario"]    { --pa:#E0A030; --pa-text:#855400; --pa-soft:rgba(224,160,48,.14); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [data-p="fapsito"]   { --pa-text:#F0C060; }
  :root:not([data-theme="light"]) [data-p="agenda"]    { --pa:#F06292; --pa-text:#F48FB1; --pa-soft:rgba(240,98,146,.14); }
  :root:not([data-theme="light"]) [data-p="papillapp"] { --pa:#F48FB1; --pa-text:#F7A8BC; --pa-soft:rgba(244,143,177,.14); }
  :root:not([data-theme="light"]) [data-p="osario"]    { --pa-text:#E8B04A; }
}
:root[data-theme="dark"] [data-p="fapsito"]   { --pa-text:#F0C060; }
:root[data-theme="dark"] [data-p="agenda"]    { --pa:#F06292; --pa-text:#F48FB1; --pa-soft:rgba(240,98,146,.14); }
:root[data-theme="dark"] [data-p="papillapp"] { --pa:#F48FB1; --pa-text:#F7A8BC; --pa-soft:rgba(244,143,177,.14); }
:root[data-theme="dark"] [data-p="osario"]    { --pa-text:#E8B04A; }

/* --------------------------------------------------------------------------
   Marco de navegador
   -------------------------------------------------------------------------- */
.browser {
  position:relative; border-radius:12px; overflow:hidden;
  background:var(--surf); border:1px solid var(--line-2);
  box-shadow:0 30px 60px -30px rgba(10,15,30,.45), 0 2px 6px rgba(10,15,30,.08);
}
.browser__bar {
  display:flex; align-items:center; gap:10px; height:34px; padding-inline:12px;
  background:var(--surf-2); border-bottom:1px solid var(--line);
}
.browser__dots { display:flex; gap:6px; flex:none; }
.browser__dots i { width:9px; height:9px; border-radius:50%; background:var(--line-2); }
.browser__dots i:first-child { background:#F87171; } .browser__dots i:nth-child(2) { background:#FBBF24; } .browser__dots i:nth-child(3) { background:#34D399; }
.browser__url {
  flex:1; min-width:0; height:22px; display:flex; align-items:center; gap:6px; padding-inline:10px;
  border-radius:999px; background:var(--surf); color:var(--muted);
  font-family:var(--mono); font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.browser__url svg { width:10px; height:10px; flex:none; }
.browser__screen { position:relative; aspect-ratio:16/10; overflow:hidden; background:#0d0d0d; }
.browser__screen img, .phone__screen img { width:100%; height:100%; object-fit:cover; object-position:top; }

/* --------------------------------------------------------------------------
   Marco de teléfono
   -------------------------------------------------------------------------- */
.phone {
  position:relative; width:100%; max-width:100%; aspect-ratio:585/1266;
  padding:7px; border-radius:34px; background:#0B0B0F;
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset, 0 34px 60px -24px rgba(10,15,30,.6);
}
.phone::before {
  content:""; position:absolute; z-index:2; top:14px; left:50%; width:30%; height:16px;
  transform:translateX(-50%); border-radius:999px; background:#0B0B0F;
}
.phone__screen { position:relative; width:100%; height:100%; border-radius:27px; overflow:hidden; background:#111; }

/* Pantallas que se cruzan (galerías con pestañas o automáticas) */
.screens { position:absolute; inset:0; }
.screens > * {
  position:absolute; inset:0; opacity:0; transform:scale(1.035);
  transition:opacity .55s var(--ease), transform .9s var(--ease);
}
.screens > .is-on { opacity:1; transform:none; }

/* --------------------------------------------------------------------------
   Estado de cada plataforma
   -------------------------------------------------------------------------- */
.plats { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.plat {
  display:inline-flex; align-items:center; gap:8px; min-height:34px; padding:6px 12px 6px 10px;
  border:1px solid var(--line-2); border-radius:999px; background:var(--surf);
  font-size:13px; line-height:1.2; color:var(--text);
}
.plat svg { width:15px; height:15px; flex:none; }
.plat small { font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.plat::before { content:""; width:7px; height:7px; border-radius:50%; flex:none; background:var(--muted); }
.plat[data-estado="vivo"]::before { background:#10B981; box-shadow:0 0 0 0 rgba(16,185,129,.55); animation:latido 2.2s infinite; }
.plat[data-estado="cerrada"]::before { background:#F59E0B; }
.plat[data-estado="pronto"]::before { background:transparent; border:1.5px dashed var(--muted); }
@keyframes latido { 70% { box-shadow:0 0 0 7px rgba(16,185,129,0); } 100% { box-shadow:0 0 0 0 rgba(16,185,129,0); } }

.stack { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.stack li { font-family:var(--mono); font-size:11.5px; padding:3px 9px; border-radius:6px; background:var(--pa-soft, var(--surf-2)); color:var(--text); }

.feats { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.feats li { position:relative; padding-left:28px; color:var(--muted); font-size:15px; line-height:1.5; }
.feats li b { color:var(--text); font-weight:600; }
.feats li::before {
  content:""; position:absolute; left:0; top:3px; width:18px; height:18px; border-radius:6px;
  background:var(--pa-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310B981' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/12px no-repeat;
}

.pmeta { font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--pa-text, var(--acc)); margin:0 0 10px; }

/* --------------------------------------------------------------------------
   Enlaces a cada trabajo
   -------------------------------------------------------------------------- */
.plinks { display:flex; flex-wrap:wrap; gap:10px; }
.plink {
  display:inline-flex; align-items:center; gap:10px; min-height:46px; padding:10px 16px;
  border-radius:var(--r-sm); border:1px solid var(--line-2); color:var(--text); background:var(--surf);
  text-decoration:none; font-size:14px; font-weight:500;
  transition:border-color .2s var(--ease), background-color .2s var(--ease), transform .2s var(--ease);
}
.plink small { display:block; font-family:var(--mono); font-size:11px; color:var(--muted); font-weight:400; }
.plink svg { width:16px; height:16px; flex:none; transition:transform .25s var(--ease); }
.plink:hover { border-color:var(--pa, var(--acc)); background:var(--pa-soft, var(--surf-2)); }
.plink:hover svg { transform:translate(2px,-2px); }
.plink--main { background:var(--text); color:var(--bg); border-color:var(--text); }
.plink--main small { color:color-mix(in srgb, var(--bg) 72%, transparent); }
.plink--main:hover { background:color-mix(in srgb, var(--text) 86%, var(--pa, var(--acc))); color:var(--bg); }

.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* --------------------------------------------------------------------------
   Maquetas de Fapsito (vista ilustrativa; el panel real es privado)
   Miden en em sobre un tamaño que sale del ancho del marco (cqi), así escalan
   igual que las capturas en cualquier tamaño de navegador o teléfono.
   -------------------------------------------------------------------------- */
.browser__screen, .phone__screen { container-type:inline-size; }

.mock-panel {
  position:absolute; inset:0; display:grid; grid-template-columns:4.33em 1fr;
  background:#0d0d0d; color:#ede7da; font-family:var(--body); font-size:12px; font-size:2.05cqi; line-height:1.3;
}
.mock-panel__side { display:flex; flex-direction:column; align-items:center; gap:1.17em; padding-top:1.33em; background:#171717; border-right:1px solid #2a2a2a; }
.mock-panel__side img { width:2.33em; height:2.33em; margin-bottom:.5em; }
.mock-panel__side i { width:1.67em; height:1.67em; border-radius:.5em; background:#2a2a2a; }
.mock-panel__side i.on { background:#f0c060; }
.mock-panel__main { padding:1.5em 1.83em; display:flex; flex-direction:column; gap:1em; min-width:0; }
.mp-h { margin:0; font-family:var(--display); font-size:1.5em; font-weight:700; letter-spacing:-.01em; line-height:1.15; }
.mp-h small { display:block; font-family:var(--mono); font-size:.56em; letter-spacing:.14em; text-transform:uppercase; color:#a8a29b; font-weight:400; margin-bottom:.3em; }
.mp-kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:.67em; }
.mp-kpis div { padding:.83em; border-radius:.67em; background:#171717; border:1px solid #2a2a2a; min-width:0; }
.mp-kpis b { display:flex; align-items:center; gap:.3em; font-family:var(--display); font-size:1.67em; line-height:1; }
.mp-kpis b img { width:.8em; height:.8em; }
.mp-kpis span { display:block; color:#a8a29b; font-size:.875em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mp-list { list-style:none; margin:0; padding:0; display:grid; gap:.5em; }
.mp-list li { display:grid; grid-template-columns:3.67em minmax(0,1fr) auto; align-items:center; gap:.67em; padding:.67em .83em; border-radius:.67em; background:#1f1f1f; }
.mp-list span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mp-list time { font-family:var(--mono); color:#f0c060; }
.mp-list em { font-style:normal; font-size:.83em; padding:.2em .7em; border-radius:999px; background:rgba(52,211,153,.15); color:#34d399; white-space:nowrap; }
.mp-list em.wait { background:rgba(251,191,36,.15); color:#fbbf24; }
.mp-bars { display:flex; align-items:flex-end; gap:.42em; height:3.83em; margin-top:auto; }
.mp-bars i { flex:1; height:var(--h); border-radius:.25em .25em 0 0; background:linear-gradient(#f0c060, rgba(240,192,96,.25)); transform-origin:bottom; }
.is-on .mp-bars i, .is-on.pfb-slide .mp-bars i { animation:crece .9s var(--ease) both; }
.is-on .mp-bars i:nth-child(2n) { animation-delay:.08s; } .is-on .mp-bars i:nth-child(3n) { animation-delay:.16s; }
@keyframes crece { from { transform:scaleY(.1); } }

/* Correo de confirmación y recordatorio, dentro de un teléfono */
.mock-mail { position:absolute; inset:0; padding:3.8em 1.17em 1.17em; background:#faf7f0; color:#111; font-size:12px; font-size:5cqi; line-height:1.3; display:flex; flex-direction:column; gap:.83em; }
.mm-app { font-family:var(--display); font-weight:700; font-size:1.42em; margin:0; }
.mm-card { padding:1em; border-radius:1.17em; background:#fff; box-shadow:0 8px 20px -12px rgba(0,0,0,.35); display:grid; gap:.5em; }
.is-on .mm-card { animation:llega .7s var(--ease) both; }
.is-on .mm-card + .mm-card { animation-delay:.25s; }
@keyframes llega { from { opacity:0; transform:translateY(-14px); } }
.mm-top { display:flex; align-items:center; gap:.67em; min-width:0; }
.mm-av { width:2.17em; height:2.17em; border-radius:50%; background:#111; display:grid; place-items:center; flex:none; }
.mm-av img { width:1.5em; height:1.5em; }
.mm-top b { font-size:1em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mm-top time { margin-left:auto; color:#6b6358; font-size:.83em; flex:none; }
.mm-subj { margin:0; font-weight:600; font-size:1.04em; }
.mm-body { margin:0; color:#4a4339; font-size:.92em; }
.mm-btn { justify-self:start; padding:.48em .95em; border-radius:999px; background:#111; color:#ede7da; font-size:.875em; font-weight:600; }

@media (prefers-reduced-motion: reduce) {
  .screens > * { transition:none; transform:none; }
  .plat[data-estado="vivo"]::before, .is-on .mp-bars i, .is-on .mm-card { animation:none; }
  .plink, .plink svg { transition:none; }
}

/* Portada · escenario del portafolio
   Cinta de tecnologías en movimiento, riel de proyectos, escenario fijo que
   cambia de proyecto con el scroll y pantallas que pasan solas. En móvil cada
   capítulo lleva su propia vista previa y el escenario no se muestra. */

/* ---- Cinta ---- */
.pfc-marquee {
  position:relative; z-index:1; margin-top:40px; padding-block:18px; overflow:hidden;
  border-block:1px dashed var(--line-2);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.pfc-marquee__track { display:flex; width:max-content; animation:pfcCinta 46s linear infinite; }
.pfc-marquee:hover .pfc-marquee__track { animation-play-state:paused; }
.pfc-marquee span { display:inline-flex; align-items:center; gap:18px; padding-right:18px; font-family:var(--display); font-weight:600; font-size:clamp(20px, 3vw, 30px); letter-spacing:-.01em; color:var(--muted); white-space:nowrap; }
.pfc-marquee span::after { content:""; width:8px; height:8px; rotate:45deg; background:var(--acc); opacity:.7; }
@keyframes pfcCinta { to { transform:translateX(-50%); } }

/* ---- Estructura ---- */
.pfc-wrap { margin-top:24px; }
.pfc-rail, .pfc-stage { display:none; }

@media (min-width:960px) {
  .pfc-wrap { display:grid; grid-template-columns:48px minmax(0,1.08fr) minmax(0,.92fr); gap:44px; align-items:start; }
  .pfc-rail, .pfc-stage { display:flex; }
}

/* ---- Riel ---- */
.pfc-rail {
  position:sticky; top:calc(50vh - 150px); flex-direction:column; align-items:center; gap:10px;
}
.pfc-rail::before { content:""; position:absolute; z-index:-1; top:22px; bottom:76px; left:50%; width:1px; background:var(--line-2); }
.pfc-rail a {
  position:relative; width:44px; height:44px; display:grid; place-items:center; border-radius:50%;
  border:1px solid var(--line-2); background:var(--bg); color:var(--muted); text-decoration:none;
  font-family:var(--mono); font-size:12px; transition:all .35s var(--ease);
}
.pfc-rail a span {
  position:absolute; left:calc(100% + 12px); padding:5px 10px; border-radius:6px; white-space:nowrap;
  background:var(--text); color:var(--bg); font-family:var(--body); font-size:12px; font-weight:500;
  opacity:0; translate:-6px 0; pointer-events:none; transition:opacity .25s var(--ease), translate .25s var(--ease);
}
.pfc-rail a:hover span, .pfc-rail a:focus-visible span { opacity:1; translate:0 0; }
.pfc-rail a:hover { color:var(--text); border-color:var(--pa); }
.pfc-rail a[aria-current="true"] { background:var(--pa); border-color:var(--pa); color:#111; transform:scale(1.12); box-shadow:0 0 0 6px var(--pa-soft); }
.pfc-pause {
  margin-top:18px; width:44px; height:44px; display:grid; place-items:center; border-radius:50%;
  border:1px dashed var(--line-2); background:transparent; color:var(--muted); cursor:pointer;
}
.pfc-pause svg { width:16px; height:16px; grid-area:1/1; }
.pfc-pause .i-play, .pfc-pause[aria-pressed="true"] .i-pause { display:none; }
.pfc-pause[aria-pressed="true"] .i-play { display:block; }
.pfc-pause:hover { color:var(--text); border-style:solid; }

/* ---- Escenario ---- */
.pfc-stage { position:sticky; top:84px; height:min(calc(100vh - 110px), 720px); min-height:520px; }
.pfc-counter {
  position:absolute; z-index:4; top:0; left:0; margin:0; display:flex; align-items:baseline; gap:8px;
  font-family:var(--mono); color:var(--muted); font-size:13px;
}
.pfc-counter b { display:inline-block; font-family:var(--display); font-size:56px; line-height:1; font-weight:700; color:var(--text); letter-spacing:-.03em; }
.pfc-counter b.flip { animation:pfcFlip .6s var(--ease); }
@keyframes pfcFlip { from { opacity:0; transform:translateY(60%); filter:blur(4px); } }

.pfc-scene { position:absolute; inset:0; isolation:isolate; visibility:hidden; transition:visibility 0s linear .5s; }
.pfc-scene.is-on { visibility:visible; transition:visibility 0s; }
.pfc-scene::before {
  content:""; position:absolute; z-index:-1; inset:6% -14% 0 -6%;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--pa) 34%, transparent), transparent);
  filter:blur(28px); opacity:0; transform:scale(.8); transition:opacity .9s var(--ease), transform 1.2s var(--ease);
}
.pfc-scene.is-on::before { opacity:1; transform:none; }

.pfc-browser {
  position:absolute; left:0; top:16%; width:86%;
  opacity:0; transform:translateY(50px) scale(.95) rotate(-1deg);
  transition:opacity .45s var(--ease), transform .8s var(--ease);
}
.pfc-phone {
  position:absolute; right:0; bottom:9%; width:28%;
  opacity:0; transform:translateY(90px) rotate(6deg);
  transition:opacity .45s var(--ease), transform .9s var(--ease);
}
.pfc-scene.is-on .pfc-browser { opacity:1; transform:none; transition-delay:.05s; }
.pfc-scene.is-on .pfc-phone   { opacity:1; transform:none; transition-delay:.2s; }

.pfc-foot { position:absolute; left:0; bottom:0; width:62%; opacity:0; transition:opacity .5s var(--ease) .3s; }
.pfc-scene.is-on .pfc-foot { opacity:1; }
.pfc-cap { margin:0 0 10px; font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--text); }
.pfc-steps { display:flex; gap:6px; }
.pfc-steps i { position:relative; flex:1; height:3px; border-radius:3px; background:var(--line-2); overflow:hidden; }
.pfc-steps i::after { content:""; position:absolute; inset:0; background:var(--pa); transform:scaleX(0); transform-origin:left; }
.pfc-steps i.is-done::after { transform:none; }
.pfc-steps i.is-now::after { animation:pfcPaso var(--dur, 3.6s) linear forwards; }
.pfc-stage.is-paused .pfc-steps i.is-now::after { animation:none; transform:none; }
@keyframes pfcPaso { to { transform:none; } }

/* ---- Capítulos ---- */
.pfc-ch { display:grid; gap:20px; padding-block:56px; border-top:1px dashed var(--line); scroll-margin-top:80px; }
.pfc-ch > * { margin:0; }
.pfc-title { font-size:34px; }
@media (min-width:768px) { .pfc-title { font-size:46px; } }
.pfc-lead { color:var(--muted); font-size:17px; }

@media (min-width:960px) {
  .pfc-ch { min-height:88vh; align-content:center; padding-block:80px; border-top:0; }
  .pfc-ch:first-child { min-height:70vh; align-content:start; padding-top:40px; }
  .pfc-ch > * { opacity:.28; transform:translateY(14px); transition:opacity .6s var(--ease), transform .7s var(--ease); }
  .pfc-ch.is-active > * { opacity:1; transform:none; }
  .pfc-ch.is-active > :nth-child(3) { transition-delay:.04s; } .pfc-ch.is-active > :nth-child(4) { transition-delay:.08s; }
  .pfc-ch.is-active > :nth-child(5) { transition-delay:.12s; } .pfc-ch.is-active > :nth-child(6) { transition-delay:.16s; }
  .pfc-ch.is-active > :nth-child(7) { transition-delay:.2s; }  .pfc-ch.is-active > :nth-child(8) { transition-delay:.24s; }
  .pfc-ch__media { display:none; }
}

/* Vista previa dentro del capítulo (móvil y tablet) */
.pfc-ch__media { position:relative; padding:0 17% 16% 0; margin-bottom:10px; isolation:isolate; }
.pfc-ch > * { min-width:0; }
.pfc-ch__media::before { content:""; position:absolute; z-index:-1; inset:0; background:radial-gradient(closest-side, color-mix(in srgb, var(--pa) 28%, transparent), transparent); filter:blur(20px); }
.pfc-ch__media .phone { position:absolute; right:0; bottom:0; width:30%; }
.pfc-ch__media .browser, .pfc-ch__media .phone { transition:translate .9s var(--ease), opacity .7s var(--ease); }
.pfc-ch__media .phone { transition-delay:.18s; }
.js-motion .pfc-ch__media:not([data-in]) .browser { translate:0 30px; opacity:0; }
.js-motion .pfc-ch__media:not([data-in]) .phone { translate:0 60px; opacity:0; }

@media (prefers-reduced-motion: reduce) {
  .pfc-marquee__track { animation:none; flex-wrap:wrap; width:auto; justify-content:center; }
  .pfc-marquee__track span:nth-child(n+16) { display:none; }
  .pfc-counter b.flip, .pfc-steps i.is-now::after { animation:none; }
  .pfc-browser, .pfc-phone, .pfc-scene::before, .pfc-foot, .pfc-ch > *, .pfc-ch__media .browser, .pfc-ch__media .phone, .pfc-rail a { transition:none; }
  .js-motion .pfc-ch__media .browser, .js-motion .pfc-ch__media .phone { translate:none; opacity:1; }
}

/* Portafolio completo (/portafolio/) · rejilla filtrable
   Rejilla de tarjetas de distinto tamaño, filtro con reacomodo animado,
   luz e inclinación bajo el puntero y ficha modal con galería. */

.pfb-bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 24px; margin:36px 0 22px; }
.pfb-filters {
  position:relative; display:flex; gap:2px; max-width:100%; padding:4px; overflow-x:auto; scrollbar-width:none;
  border-radius:999px; border:1px solid var(--line-2); background:var(--surf);
}
.pfb-filters::-webkit-scrollbar { display:none; }
.pfb-filters__pill { position:absolute; top:4px; bottom:4px; left:0; width:0; border-radius:999px; background:var(--acc); transition:transform .5s var(--ease), width .5s var(--ease); }
.pfb-filters button {
  position:relative; z-index:1; flex:none; display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 14px;
  border:0; border-radius:999px; background:transparent; color:var(--muted); font:500 14px/1 var(--body); cursor:pointer; white-space:nowrap;
  transition:color .3s var(--ease);
}
.pfb-filters button b { font-family:var(--mono); font-size:11px; font-weight:500; opacity:.7; }
.pfb-filters button:hover { color:var(--text); }
.pfb-filters button[aria-pressed="true"] { color:var(--on-acc); }
.pfb-count { margin:0; font-family:var(--mono); font-size:12px; color:var(--muted); }

/* ---- Rejilla ---- */
.pfb-grid { list-style:none; margin:0; padding:0; display:grid; gap:16px; grid-auto-flow:dense; }
.pfb-card[hidden], .pfb-filters button[hidden] { display:none; }
@media (min-width:700px) {
  .pfb-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .pfb-card--xl, .pfb-card--wide:last-child { grid-column:span 2; }
}
@media (min-width:1080px) {
  .pfb-grid { grid-template-columns:repeat(6, minmax(0,1fr)); gap:18px; }
  /* Sin modificador, una tarjeta ocupa un tercio. Ver README para sumar proyectos. */
  .pfb-card       { grid-column:span 2; }
  .pfb-card--xl   { grid-column:span 4; grid-row:span 2; }
  .pfb-card--tall { grid-column:span 2; grid-row:span 2; }
  .pfb-card--wide, .pfb-card--wide:last-child { grid-column:span 3; }
  .pfb-grid.is-filtered .pfb-card { grid-column:span 3; grid-row:auto; }
}

.pfb-in {
  position:relative; height:100%; display:flex; flex-direction:column; overflow:hidden; isolation:isolate;
  border:1px solid var(--line); border-radius:20px; background:var(--surf);
  transform:perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition:transform .5s var(--ease), border-color .3s var(--ease), box-shadow .4s var(--ease);
}
.pfb-in::after {
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none; opacity:0; transition:opacity .35s var(--ease);
  background:radial-gradient(420px circle at var(--x, 50%) var(--y, 30%), color-mix(in srgb, var(--pa) 22%, transparent), transparent 60%);
}
.pfb-in:hover { border-color:color-mix(in srgb, var(--pa) 60%, var(--line)); box-shadow:0 30px 60px -34px color-mix(in srgb, var(--pa) 60%, rgba(0,0,0,.5)); }
.pfb-in:hover::after { opacity:1; }

.pfb-media {
  position:relative; flex:1; min-height:230px; padding:26px 26px 0; overflow:hidden;
  background:radial-gradient(120% 90% at 30% 0%, color-mix(in srgb, var(--pa) 26%, transparent), transparent 70%), var(--surf-2);
}
.pfb-card--xl .pfb-media { min-height:320px; }
.pfb-media .browser { width:84%; transition:transform .7s var(--ease); transform-origin:bottom left; }
.pfb-media .phone { position:absolute; right:6%; bottom:-22%; width:23%; min-width:90px; transition:transform .7s var(--ease); }
.pfb-in:hover .pfb-media .browser { transform:translateY(-6px) scale(1.015); }
.pfb-in:hover .pfb-media .phone { transform:translateY(-18px) rotate(-3deg); }

.pfb-coin { position:absolute; z-index:2; top:14%; right:9%; width:64px; height:64px; animation:pfbFlota 5s ease-in-out infinite; filter:drop-shadow(0 12px 16px rgba(0,0,0,.35)); }
.pfb-coin { animation:pfbGira 3.6s linear infinite, pfbFlota 5s ease-in-out infinite; }
@keyframes pfbGira { to { rotate:y 360deg; } }
@keyframes pfbFlota { 50% { translate:0 -10px; } }

.pfb-media--fan { display:grid; place-items:end center; padding:28px 16px 0; min-height:300px; }
.pfb-media--fan .phone { position:relative; right:auto; bottom:-30px; width:48%; min-width:0; grid-area:1/1; }
.pfb-media--fan .phone:first-child { translate:-34% 6%; rotate:-9deg; }
.pfb-media--fan .phone:last-child  { translate:30% 0; rotate:7deg; }
.pfb-in:hover .pfb-media--fan .phone:first-child { transform:translate(-10px,-12px) rotate(-4deg); }
.pfb-in:hover .pfb-media--fan .phone:last-child  { transform:translate(10px,-18px) rotate(4deg); }

.pfb-body { position:relative; z-index:2; display:grid; gap:10px; padding:20px 22px 22px; background:var(--surf); border-top:1px solid var(--line); }
.pfb-body > * { margin:0; }
.pfb-body h3 { font-size:24px; }
.pfb-card--xl .pfb-body h3 { font-size:30px; }
.pfb-body > p:not(.pmeta) { color:var(--muted); font-size:15px; line-height:1.5; }
.pfb-body .pmeta { margin:0; }
.pfb-tags { list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.pfb-tags li { font-family:var(--mono); font-size:11px; padding:3px 9px; border-radius:999px; border:1px solid var(--line-2); color:var(--muted); }
.pfb-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.pfb-actions .plink { cursor:pointer; font-family:var(--body); }

/* ---- Ficha ---- */
html:has(.pfb-dlg[open]) { overflow:hidden; }
.pfb-dlg {
  width:min(1120px, calc(100% - 32px)); max-width:none; max-height:calc(100dvh - 40px); padding:0; overflow:auto; overscroll-behavior:contain;
  border:1px solid var(--line-2); border-radius:22px; background:var(--bg); color:var(--text);
  box-shadow:0 50px 120px -30px rgba(0,0,0,.65);
}
.pfb-dlg::backdrop { background:rgba(6,9,18,.62); backdrop-filter:blur(8px); }
.pfb-dlg[open] { animation:pfbIn .55s var(--ease); }
.pfb-dlg[open]::backdrop { animation:pfbFade .4s ease; }
.pfb-dlg.is-closing { animation:pfbOut .24s ease-in forwards; }
.pfb-dlg.is-closing::backdrop { animation:pfbFade .24s ease reverse forwards; }
@keyframes pfbIn { from { opacity:0; transform:translateY(28px) scale(.97); } }
@keyframes pfbOut { to { opacity:0; transform:translateY(16px) scale(.98); } }
@keyframes pfbFade { from { opacity:0; } }

.pfb-dlg__head {
  position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 20px; background:color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
.pfb-dlg__head h3 { margin:0; font-size:26px; }
.pfb-dlg__head .pmeta { margin-bottom:4px; }
.pfb-close { flex:none; width:44px; height:44px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--line-2); background:var(--surf); color:var(--text); cursor:pointer; transition:rotate .35s var(--ease), background-color .2s; }
.pfb-close svg { width:20px; height:20px; }
.pfb-close:hover { rotate:90deg; background:var(--surf-2); }

.pfb-dlg__grid { display:grid; gap:26px; padding:22px 20px 26px; }
.pfb-dlg__grid > *, .pfb-dlg__head > div { min-width:0; }
@media (min-width:900px) { .pfb-dlg__grid { grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:40px; padding:28px 32px 34px; } .pfb-dlg__head { padding:20px 32px; } }

.pfb-gal__stage {
  position:relative; aspect-ratio:16/11; border-radius:16px; overflow:hidden; touch-action:pan-y;
  background:radial-gradient(90% 80% at 50% 10%, color-mix(in srgb, var(--pa) 26%, transparent), transparent 70%), var(--surf-2);
}
.pfb-slide {
  position:absolute; inset:0; margin:0; display:grid; place-items:center; padding:5%;
  opacity:0; visibility:hidden; transform:translateX(var(--from, 30px)) scale(.98);
  transition:opacity .45s var(--ease), transform .6s var(--ease), visibility 0s linear .45s;
}
.pfb-slide.is-on { opacity:1; visibility:visible; transform:none; transition:opacity .45s var(--ease), transform .6s var(--ease), visibility 0s; }
.pfb-slide .browser { width:100%; }
.pfb-slide .phone { height:100%; width:auto; }
.pfb-doc { max-height:100%; width:auto; border-radius:8px; box-shadow:0 20px 40px -18px rgba(0,0,0,.5); }
.pfb-doc--wide { width:100%; height:auto; }

.pfb-thumbs { display:flex; gap:6px; margin-top:12px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
.pfb-thumbs button {
  flex:none; min-height:40px; padding:0 14px; border-radius:999px; border:1px solid var(--line-2); background:var(--surf);
  color:var(--muted); font:500 13px/1 var(--body); cursor:pointer; transition:all .25s var(--ease);
}
.pfb-thumbs button:hover { color:var(--text); border-color:var(--pa); }
.pfb-thumbs button[aria-pressed="true"] { background:var(--text); color:var(--bg); border-color:var(--text); }

.pfb-dlg__info { display:grid; gap:20px; align-content:start; }
.pfb-dlg__info > * { margin:0; }
.pfb-dlg__lead { font-size:17px; color:var(--muted); }

@media (max-width:699px) {
  .pfb-dlg { width:100%; max-height:94dvh; margin:auto 0 0; border-radius:22px 22px 0 0; border-bottom:0; }
  .pfb-dlg[open] { animation:pfbSheet .5s var(--ease); }
  .pfb-dlg.is-closing { animation:pfbSheetOut .26s ease-in forwards; }
  .pfb-gal__stage { aspect-ratio:4/5; }
  @keyframes pfbSheet { from { transform:translateY(100%); } }
  @keyframes pfbSheetOut { to { transform:translateY(100%); } }
}

@media (prefers-reduced-motion: reduce) {
  .pfb-in, .pfb-media .browser, .pfb-media .phone, .pfb-slide, .pfb-filters__pill { transition:none; }
  .pfb-coin, .pfb-dlg[open], .pfb-dlg[open]::backdrop, .pfb-dlg.is-closing { animation:none; }
}

/* ==========================================================================
   Piezas propias del sitio
   ========================================================================== */
.pfc-mas { display:flex; flex-direction:column; align-items:center; gap:14px; padding-top:48px; text-align:center; }
.pfc-mas p { margin:0; color:var(--muted); }
@media (min-width:960px) { .pfc-mas { padding-top:8px; } }

.pfb-page { border-top:none; padding-top:56px; }
@media (min-width:768px) { .pfb-page { padding-top:72px; } }
.pfb-page h1.title { font-size:40px; }
@media (min-width:768px) { .pfb-page h1.title { font-size:62px; } }
.migas { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 26px; padding:0; list-style:none; font-family:var(--mono); font-size:12px; color:var(--muted); }
.migas li + li::before { content:"/"; margin-right:8px; opacity:.6; }
.migas a { color:var(--muted); text-decoration:none; border-bottom:1px solid var(--line-2); }
.migas a:hover { color:var(--text); }
.cta-final { text-align:center; }
.cta-final .lead { margin-inline:auto; }
.cta-final .hero__actions { justify-content:center; }