/* ══════════════════════════════════════════════════════════════════════
   PERFILES — neo-brutalist aesthetic (gumroad/ifttt-inspired)
   Self-contained (no depende de app.css)
   ══════════════════════════════════════════════════════════════════════ */

:root{
  --cream:#FFFAF0;
  --cream-2:#FFF1D6;
  --ink:#000000;
  --ink-2:#1F1F1F;
  --ink-3:#555555;
  --ink-4:#888888;
  --pink:#FF90E8;
  --pink-soft:#FFDDF1;
  --yellow:#FFE45E;
  --yellow-soft:#FFF4B8;
  --mint:#7DDFC0;
  --mint-soft:#C4F0DF;
  --sky:#80B0F0;
  --sky-soft:#C7DCF7;
  --coral:#FF7A6B;
  --coral-soft:#FFCEC8;
  --lavender:#B5A4E8;
  --lavender-soft:#DCD2F2;
  --peach:#FFB07C;
  --peach-soft:#FFD9BC;
  /* compat aliases */
  --paper:var(--cream);
  --accent:var(--coral);
  --star-svg:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M16 0 Q17.5 14.5 32 16 Q17.5 17.5 16 32 Q14.5 17.5 0 16 Q14.5 14.5 16 0 Z' fill='black'/></svg>");
}
.sparkle{display:inline-block;width:1em;height:1em;background-color:currentColor;mask:var(--star-svg) no-repeat center / contain;-webkit-mask:var(--star-svg) no-repeat center / contain;vertical-align:-0.08em;flex-shrink:0}

*{margin:0;padding:0;box-sizing:border-box}
/* Anti double-tap-zoom en iOS: pinch sigue funcionando, solo desactiva el atajo de doble-tap. */
button,a,[role="button"],input,select,textarea,summary{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
html{background:var(--cream);scroll-behavior:smooth}
body{
  font-family:'Hanken Grotesk','Inter',sans-serif;
  font-weight:500;
  color:var(--ink);
  min-height:100vh;
  min-height:100dvh;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:'ss01','ss02','tnum';
  background:
    radial-gradient(ellipse 60% 35% at 12% 8%, rgba(255,144,232,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 55% 35% at 88% 14%, rgba(255,228,94,0.16) 0%, transparent 65%),
    radial-gradient(ellipse 70% 40% at 50% 100%, rgba(125,223,192,0.10) 0%, transparent 65%),
    var(--cream);
  background-attachment:fixed;
}

.app-container{
  max-width:1280px;margin:0 auto;
  padding:0 28px 40px;
  min-height:100vh;
  min-height:100dvh;
  display:flex;flex-direction:column;
}

/* ══ NAV ══ */
nav{
  display:flex;justify-content:space-between;align-items:center;
  padding:18px 0;
  border-bottom:2px solid var(--ink);
  margin-bottom:28px;
  position:sticky;top:0;background:var(--cream);z-index:20;
}
nav .brand{
  display:inline-flex;align-items:center;gap:0;
  font-weight:800;font-size:20px;letter-spacing:-0.6px;color:var(--ink);
  text-decoration:none;
}
nav .brand .pmark{display:none}
nav .brand .wm{font-size:20px;letter-spacing:-0.6px;color:var(--ink);font-weight:800}
nav .brand .wm::before{content:'poni'}
nav .brand .wm > *{display:none}
nav .brand .wm::after{content:'.social';color:var(--ink);font-weight:800}
nav .brand .sep{display:none}
nav .brand .chip{
  font-size:10px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--ink);margin-left:14px;
  padding:5px 10px;background:var(--yellow);border:2px solid var(--ink);
  box-shadow:2px 2px 0 var(--ink);
}
.nav-right{display:flex;align-items:center;gap:14px}
.nav-tagline{
  font-size:11px;font-weight:800;color:var(--ink-2);
  letter-spacing:1.6px;text-transform:uppercase;
}

/* ══ HERO ══ */
.ph-hero{
  padding:38px 36px 32px;
  background:var(--pink-soft);
  border:2.5px solid var(--ink);
  box-shadow:8px 8px 0 var(--ink);
  margin-bottom:30px;
  position:relative;
}
.ph-hero::after{
  content:'';position:absolute;top:-20px;right:-20px;
  width:120px;height:120px;border-radius:50%;
  background:var(--yellow);border:2.5px solid var(--ink);
  z-index:0;
}
.ph-hero > *{position:relative;z-index:1}
.ph-hero-label{
  display:inline-flex;align-items:center;gap:10px;
  font-size:11px;letter-spacing:2px;font-weight:800;
  color:var(--ink);margin-bottom:18px;text-transform:uppercase;
  padding:6px 14px;background:var(--cream);border:2px solid var(--ink);
  box-shadow:2.5px 2.5px 0 var(--ink);
}
.ph-hero-label::before{
  content:'';display:inline-block;width:1em;height:1em;
  background-color:currentColor;
  mask:var(--star-svg) no-repeat center / contain;
  -webkit-mask:var(--star-svg) no-repeat center / contain;
  vertical-align:-0.08em;
}
.ph-hero h1{
  font-size:clamp(40px,6.4vw,72px);
  font-weight:900;
  letter-spacing:-2.6px;line-height:0.96;
  margin-bottom:18px;color:var(--ink);
}
.ph-hero h1 em{
  font-family:'Fraunces',serif;font-style:italic;font-weight:800;
  color:var(--coral);
}
.ph-hero p{
  font-size:17px;color:var(--ink-2);
  line-height:1.55;max-width:680px;
  margin-bottom:24px;font-weight:500;
}
.ph-stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:14px;margin-top:18px;
}
.ph-stat{
  padding:18px 18px;
  background:var(--cream);
  border:2px solid var(--ink);
  box-shadow:3px 3px 0 var(--ink);
  font-size:10px;color:var(--ink-2);
  letter-spacing:1.6px;text-transform:uppercase;font-weight:800;
}
.ph-stat:nth-child(1) b{color:var(--coral)}
.ph-stat:nth-child(2) b{color:var(--ink)}
.ph-stat:nth-child(3) b{color:var(--ink)}
.ph-stat:nth-child(4) b{color:var(--ink)}
.ph-stat b{
  font-size:32px;font-weight:900;color:var(--ink);
  letter-spacing:-1.4px;display:block;
  text-transform:none;margin-bottom:6px;line-height:1;
}

/* ══ FILTERS ══ */
.ph-filters{
  display:flex;flex-wrap:wrap;gap:8px;
  margin:0 0 28px;align-items:center;
  padding:14px 18px;
  background:var(--cream);
  border:2px solid var(--ink);
  box-shadow:4px 4px 0 var(--ink);
}
.ph-filter-label{
  font-size:10px;letter-spacing:2px;text-transform:uppercase;
  color:var(--ink-2);font-weight:800;margin-right:8px;
}
.ph-filter-btn{
  padding:7px 13px;font-size:10px;font-weight:800;
  color:var(--ink);background:var(--cream);
  border:2px solid var(--ink);
  cursor:pointer;
  letter-spacing:1.6px;text-transform:uppercase;
  box-shadow:2.5px 2.5px 0 var(--ink);
  transition:transform 0.1s, box-shadow 0.1s, background 0.12s;
}
.ph-filter-btn:hover{transform:translate(-1px,-1px);box-shadow:3.5px 3.5px 0 var(--ink);background:var(--yellow-soft)}
.ph-filter-btn:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}
.ph-filter-btn.is-active{
  color:var(--ink);background:var(--coral);
  box-shadow:3px 3px 0 var(--ink);
}

/* ══ GRID ══ */
.ph-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  gap:22px;
  margin-bottom:60px;
}
.ph-card{
  background:var(--cream);
  border:2.5px solid var(--ink);
  box-shadow:6px 6px 0 var(--ink);
  padding:22px;
  text-decoration:none;color:var(--ink);
  display:flex;flex-direction:column;gap:14px;
  transition:transform 0.16s ease, box-shadow 0.16s ease;
  position:relative;
}
.ph-card:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--ink)}
.ph-card:active{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--ink)}
/* Color rotation for cards */
.ph-card:nth-child(7n+1){background:var(--cream)}
.ph-card:nth-child(7n+2){background:var(--pink-soft)}
.ph-card:nth-child(7n+3){background:var(--mint-soft)}
.ph-card:nth-child(7n+4){background:var(--yellow-soft)}
.ph-card:nth-child(7n+5){background:var(--lavender-soft)}
.ph-card:nth-child(7n+6){background:var(--sky-soft)}
.ph-card:nth-child(7n+7){background:var(--coral-soft)}

.ph-card-top{display:flex;align-items:flex-start;gap:14px}
.ph-card-face{
  image-rendering:pixelated;
  width:44px;height:60px;flex-shrink:0;
  border:2px solid var(--ink);
  background:var(--cream);
  padding:3px;box-shadow:2.5px 2.5px 0 var(--ink);
}
.ph-card-head{flex:1;min-width:0}
.ph-card-name{
  font-size:19px;font-weight:800;
  letter-spacing:-0.6px;line-height:1.15;
  color:var(--ink);margin-bottom:4px;
}
.ph-card-sub{
  font-size:11.5px;color:var(--ink-2);
  line-height:1.4;font-weight:500;
}
.ph-card-tags{
  display:flex;flex-wrap:wrap;gap:6px;
}
.ph-card-tag{
  font-size:9px;font-weight:800;
  padding:4px 10px;
  border:1.5px solid var(--ink);
  background:var(--cream);color:var(--ink);
  letter-spacing:1.4px;text-transform:uppercase;
}
.ph-card-tag.is-party{background:var(--lavender);color:var(--ink)}
.ph-card-tag.is-active{background:var(--mint);color:var(--ink)}
.ph-card-tag.is-dormant{background:var(--cream);color:var(--ink-3)}
.ph-card-foot{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:14px;
  border-top:2px dashed var(--ink);
  font-size:10px;color:var(--ink);
  letter-spacing:1.6px;font-weight:800;text-transform:uppercase;
}
.ph-card-arrow{
  font-size:18px;color:var(--ink);
  transition:transform 0.15s;font-weight:800;
}
.ph-card:hover .ph-card-arrow{transform:translateX(4px)}
.ph-empty{
  grid-column:1 / -1;
  padding:48px 20px;text-align:center;
  color:var(--ink-3);
  font-size:12px;font-weight:800;
  letter-spacing:2px;text-transform:uppercase;
}

/* ══ BACK HOME ══ */
.back-home{
  padding:40px 0 60px;text-align:center;
  border-top:2px solid var(--ink);
  margin-top:24px;
}
.back-home-link{
  font-size:12px;font-weight:800;
  letter-spacing:1.8px;color:var(--ink);
  text-decoration:none;text-transform:uppercase;
  padding:10px 20px;
  background:var(--cream);border:2px solid var(--ink);
  box-shadow:3px 3px 0 var(--ink);
  display:inline-block;
  transition:transform 0.1s, box-shadow 0.1s;
}
.back-home-link:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink);background:var(--yellow-soft)}

/* ══ RESPONSIVE ══ */
@media(max-width:900px){
  .ph-stats{grid-template-columns:repeat(2,1fr)}
  .ph-hero{padding:28px 24px}
}
@media(max-width:640px){
  .app-container{padding:0 16px max(32px,env(safe-area-inset-bottom));padding-top:max(0px,env(safe-area-inset-top))}
  nav{padding:14px 0;margin-bottom:20px}
  .nav-tagline{display:none}
  nav .brand .chip{display:none}
  .ph-hero h1{font-size:32px;letter-spacing:-1.2px}
  .ph-hero p{font-size:15px}
  .ph-grid{grid-template-columns:1fr;gap:16px}
  .ph-card-face{width:38px;height:52px}
  .ph-card-name{font-size:17px}
  .ph-filters{gap:8px;padding:12px 14px}
  .ph-filter-btn{padding:10px 14px;font-size:10.5px;min-height:40px;display:inline-flex;align-items:center}
  .ph-stats{grid-template-columns:1fr 1fr}
}
@media(max-width:400px){
  .ph-hero h1{font-size:28px}
  .ph-hero p{font-size:14.5px}
  .ph-card{padding:18px 16px 16px}
  .ph-card-name{font-size:16px}
}