:root{
  --pm-green:#22c55e;
  --pm-blue:#2563eb;
  --pm-pink:#ec4899;
  --pm-yellow:#facc15;

  --pm-dark:#0b1220;
  --pm-card:#0f1a33cc;
  --pm-border:#ffffff1f;
  --pm-text:#eaf0ff;
  --pm-muted:#bcd0ff;

  --radius:18px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  color:var(--pm-text);
  background: var(--pm-dark);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

/* Fondo con imagen + overlay */
.pm-bg{
  min-height:100vh;
  background:
    linear-gradient(120deg, #0b1220ee, #0b1220aa),
    url("https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=2000&q=70");
  background-size: cover;
  background-position:center;
  background-attachment: fixed;
}

.pm-bg.alt{
  background:
    linear-gradient(120deg, #0b1220ee, #0b1220aa),
    url("https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=2000&q=70");
  background-size: cover;
  background-position:center;
  background-attachment: fixed;
}

/* Navbar */
.pm-nav{
  background: linear-gradient(90deg, #0b1220f2, #0b1220e6);
  border-bottom:1px solid var(--pm-border);
}
.pm-brand{
  display:flex!important;
  align-items:center;
  gap:10px;
  font-weight:800;
  letter-spacing:.5px;
}
.pm-brand .thin{ font-weight:300; opacity:.9; }
.pm-dot{
  width:12px; height:12px; border-radius:50%;
  background: conic-gradient(from 180deg, var(--pm-green), var(--pm-blue), var(--pm-pink), var(--pm-yellow), var(--pm-green));
  box-shadow:0 0 0 4px #ffffff14;
}
nav ul a{ color:var(--pm-text)!important; opacity:.95; }
nav ul a:hover{ opacity:1; }

/* Botones */
.pm-btn{
  background: linear-gradient(90deg, var(--pm-blue), var(--pm-pink))!important;
  border-radius:999px!important;
  box-shadow:none!important;
}
.pm-btn-outline{
  border:1px solid var(--pm-border);
  border-radius:999px;
  padding:0 16px;
}
.pm-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px;
  border:1px solid var(--pm-border);
  border-radius:999px;
  background:#ffffff10;
}

/* Hero */
.pm-hero{
  padding:72px 0 36px;
}
.pm-hero h1{
  font-size: clamp(2.0rem, 2.7vw, 3rem);
  margin: 0 0 10px;
  line-height:1.1;
}
.pm-hero p{
  color:var(--pm-muted);
  font-size:1.08rem;
  margin: 0 0 22px;
}

/* Secciones */
.pm-section{
  padding:46px 0;
}
.pm-title{
  display:flex; align-items:center; gap:10px;
  font-size:1.4rem;
  margin:0 0 14px;
}
.pm-title::before{
  content:"";
  width:10px; height:26px; border-radius:999px;
  background: linear-gradient(180deg, var(--pm-green), var(--pm-yellow));
}
.pm-sub{
  color:var(--pm-muted);
  margin:0 0 24px;
}

/* Cards */
.pm-card{
  background: var(--pm-card);
  border:1px solid var(--pm-border);
  border-radius: var(--radius);
  overflow:hidden;
  backdrop-filter: blur(10px);
}
.pm-card .pm-card-content{ padding:18px; }
.pm-card h5{ margin:0 0 8px; font-weight:700; }
.pm-card p{ margin:0; color:var(--pm-muted); }

.pm-grid{
  display:grid;
  gap:16px;
  grid-template-columns: repeat(12, 1fr);
}
.pm-col-4{ grid-column: span 4; }
.pm-col-6{ grid-column: span 6; }
.pm-col-3{ grid-column: span 3; }
.pm-col-12{ grid-column: span 12; }

@media (max-width: 992px){
  .pm-col-4,.pm-col-6,.pm-col-3{ grid-column: span 12; }
  .pm-bg,.pm-bg.alt{ background-attachment: scroll; }
}

/* Imágenes */
.pm-img{
  width:100%;
  height:220px;
  object-fit: cover;
  display:block;
}
.pm-badge{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--pm-border);
  background:#ffffff10;
  color:var(--pm-text);
  font-size:.85rem;
}

/* Footer */
.pm-footer{
  border-top:1px solid var(--pm-border);
  background: linear-gradient(180deg, #0b1220, #070b14);
  padding:24px 0;
  color:var(--pm-muted);
}
.pm-footer a{ color:var(--pm-text); }

/* Inputs Materialize en oscuro */
.input-field input, .input-field textarea{
  color: var(--pm-text)!important;
}
.input-field input:focus, .input-field textarea:focus{
  border-bottom: 1px solid var(--pm-yellow)!important;
  box-shadow: 0 1px 0 0 var(--pm-yellow)!important;
}
.input-field label{ color:#cfe0ff!important; }
.input-field label.active{ color: var(--pm-yellow)!important; }