/*
Theme Name: PremierNetwork
Theme URI: https://www.premiernetwork.pe
Author: PremierNetwork
Author URI: https://www.premiernetwork.pe
Description: Tema personalizado para PREMIERNETWORK - Infraestructura de Red, Seguridad Perimetral y Monitoreo para empresas en Perú.
Version: 1.0.0
Requires at least: 5.8
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: premiernetwork
Tags: dark, business, technology, responsive, custom-menu, featured-images, full-width-template
*/

/* === VARIABLES === */
:root {
  --red: #E02020;
  --red-dark: #B01818;
  --red-glow: rgba(224,32,32,0.15);
  --bg: #0A0A0B;
  --bg2: #111114;
  --bg3: #181820;
  --surface: #1A1A22;
  --surface2: #22222C;
  --border: rgba(255,255,255,0.07);
  --border-red: rgba(224,32,32,0.3);
  --text: #F0EEE8;
  --text2: #9A98A0;
  --text3: #5A5862;
  --font-head: 'Rajdhani', sans-serif;
  --font-body: 'DM Sans', sans-serif;
}

/* === RESET === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.6; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--red); }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--red-dark); }

/* === NAV === */
.pn-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 5%; height: 68px;
  background: rgba(10,10,11,0.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}
.pn-nav-logo { font-family: var(--font-head); font-size: 22px; font-weight: 700; letter-spacing: 0.04em; color: var(--text); text-decoration: none; }
.pn-nav-logo span { color: var(--red); }
.pn-nav-links { display: flex; gap: 32px; list-style: none; align-items: center; }
.pn-nav-links a { font-size: 13.5px; font-weight: 400; letter-spacing: 0.04em; color: var(--text2); text-decoration: none; text-transform: uppercase; transition: color .2s; }
.pn-nav-links a:hover, .pn-nav-links a.current-menu-item { color: var(--text); }
.pn-nav-cta { background: var(--red) !important; color: #fff !important; padding: 9px 22px !important; border-radius: 3px; font-weight: 500 !important; }
.pn-nav-cta:hover { background: var(--red-dark) !important; }
.pn-mobile-btn { display: none; background: none; border: none; cursor: pointer; flex-direction: column; gap: 5px; padding: 4px; }
.pn-mobile-btn span { display: block; width: 24px; height: 2px; background: var(--text); border-radius: 2px; }
.pn-mobile-menu { display: none; position: fixed; top: 68px; left: 0; right: 0; background: rgba(10,10,11,0.98); backdrop-filter: blur(20px); padding: 24px 5% 32px; border-bottom: 1px solid var(--border); z-index: 999; flex-direction: column; }
.pn-mobile-menu.open { display: flex; }
.pn-mobile-menu a { display: block; padding: 14px 0; font-size: 15px; color: var(--text2); text-decoration: none; text-transform: uppercase; border-bottom: 1px solid var(--border); transition: color .2s; }
.pn-mobile-menu a:hover { color: var(--text); }
.pn-mobile-cta { margin-top: 20px; background: var(--red); color: #fff; text-align: center; padding: 14px; border-radius: 3px; font-weight: 500; }

/* === PAGE WRAPPER === */
#pn-content { padding-top: 68px; }

/* === HERO SECTIONS === */
.pn-page-hero { padding: 80px 5% 80px; background: var(--bg2); border-bottom: 1px solid var(--border); position: relative; overflow: hidden; }
.pn-page-hero-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,0.02) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,0.02) 1px,transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(ellipse 80% 100% at 20% 50%, black 30%, transparent 100%); }
.pn-page-hero-glow { position: absolute; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(224,32,32,0.07) 0%,transparent 70%); top: 50%; left: -100px; transform: translateY(-50%); pointer-events: none; }
.pn-page-hero-content { position: relative; z-index: 2; max-width: 760px; }
.pn-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text3); margin-bottom: 24px; }
.pn-breadcrumb a { color: var(--text3); text-decoration: none; transition: color .2s; }
.pn-breadcrumb a:hover, .pn-breadcrumb span { color: var(--red); }
.pn-page-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--red); border: 1px solid var(--border-red); padding: 6px 14px; border-radius: 2px; margin-bottom: 20px; }
.pn-page-tag::before { content: ''; width: 6px; height: 6px; background: var(--red); border-radius: 50%; animation: pndot 2s infinite; }
@keyframes pndot { 0%,100%{opacity:1}50%{opacity:.3} }
.pn-page-hero h1 { font-family: var(--font-head); font-size: clamp(36px,5vw,64px); font-weight: 700; line-height: 1.05; letter-spacing: -0.01em; color: var(--text); margin-bottom: 20px; }
.pn-page-hero h1 em { font-style: normal; color: var(--red); }
.pn-page-hero-sub { font-size: 18px; font-weight: 300; color: var(--text2); line-height: 1.7; max-width: 580px; margin-bottom: 36px; }

/* === BUTTONS === */
.pn-btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: 14px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; padding: 14px 28px; border-radius: 3px; border: none; cursor: pointer; transition: all .2s; }
.pn-btn-primary { background: var(--red); color: #fff; }
.pn-btn-primary:hover { background: var(--red-dark); color: #fff; transform: translateY(-1px); }
.pn-btn-ghost { background: transparent; color: var(--text2); border: 1px solid var(--border); }
.pn-btn-ghost:hover { border-color: rgba(255,255,255,.2); color: var(--text); }
.pn-btn-actions { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }

/* === SECTIONS === */
.pn-section { padding: 80px 5%; }
.pn-section-dark { background: var(--bg2); }
.pn-section-mid { background: var(--bg3); }
.pn-section-tag { display: inline-block; font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); margin-bottom: 14px; }
.pn-section-title { font-family: var(--font-head); font-size: clamp(26px,3.5vw,42px); font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; color: var(--text); margin-bottom: 14px; }
.pn-section-sub { font-size: 16px; font-weight: 300; color: var(--text2); max-width: 540px; line-height: 1.7; margin-bottom: 48px; }

/* === FEATURE GRID === */
.pn-feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 24px; }
.pn-feat-card { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 32px 28px; transition: border-color .3s; }
.pn-feat-card:hover { border-color: var(--border-red); }
.pn-feat-icon { width: 48px; height: 48px; border: 1px solid var(--border-red); border-radius: 4px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.pn-feat-icon svg { width: 22px; height: 22px; stroke: var(--red); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pn-feat-card h3 { font-family: var(--font-head); font-size: 19px; font-weight: 600; color: var(--text); margin-bottom: 10px; }
.pn-feat-card p { font-size: 14px; font-weight: 300; color: var(--text2); line-height: 1.7; }

/* === TWO COL === */
.pn-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.pn-two-col-text p { font-size: 15px; font-weight: 300; color: var(--text2); line-height: 1.8; margin-bottom: 20px; }
.pn-two-col-text ul { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; }
.pn-two-col-text ul li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; font-weight: 300; color: var(--text2); line-height: 1.6; }
.pn-two-col-text ul li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--red); flex-shrink: 0; margin-top: 8px; }

/* === TECH CARD === */
.pn-tech-card { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 28px; }
.pn-tech-card h4 { font-family: var(--font-head); font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.pn-tech-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.pn-tech-row:last-child { border-bottom: none; }
.pn-tech-name { color: var(--text2); }
.pn-tech-badge { font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--red); background: var(--red-glow); padding: 3px 10px; border-radius: 2px; }

/* === SPEC GRID === */
.pn-spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--border); border: 1px solid var(--border); margin-top: 48px; }
.pn-spec-item { background: var(--bg2); padding: 24px 28px; }
.pn-spec-label { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text3); margin-bottom: 8px; }
.pn-spec-val { font-family: var(--font-head); font-size: 20px; font-weight: 600; color: var(--text); }
.pn-spec-val em { color: var(--red); font-style: normal; }

/* === PROCESS GRID === */
.pn-process-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 0; border: 1px solid var(--border); margin-top: 48px; }
.pn-process-item { padding: 28px 24px; border-right: 1px solid var(--border); background: var(--surface); transition: background .3s; }
.pn-process-item:last-child { border-right: none; }
.pn-process-item:hover { background: var(--surface2); }
.pn-process-num { font-family: var(--font-head); font-size: 32px; font-weight: 700; color: var(--red); opacity: 0.4; line-height: 1; margin-bottom: 12px; }
.pn-process-item h4 { font-family: var(--font-head); font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.pn-process-item p { font-size: 13px; font-weight: 300; color: var(--text2); line-height: 1.6; }

/* === TIMELINE === */
.pn-timeline { display: flex; flex-direction: column; gap: 0; margin-top: 48px; border-left: 2px solid var(--border-red); padding-left: 32px; }
.pn-tl-item { position: relative; padding-bottom: 40px; }
.pn-tl-item:last-child { padding-bottom: 0; }
.pn-tl-dot { position: absolute; left: -41px; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--red); border: 3px solid var(--bg); }
.pn-tl-year { font-family: var(--font-head); font-size: 13px; font-weight: 600; color: var(--red); letter-spacing: 0.1em; margin-bottom: 6px; }
.pn-tl-title { font-family: var(--font-head); font-size: 18px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.pn-tl-desc { font-size: 14px; font-weight: 300; color: var(--text2); line-height: 1.6; max-width: 520px; }

/* === PROFILE CARDS === */
.pn-profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 24px; margin-top: 48px; }
.pn-profile-card { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 28px; text-align: center; transition: border-color .3s; }
.pn-profile-card:hover { border-color: var(--border-red); }
.pn-avatar { width: 72px; height: 72px; border-radius: 50%; background: var(--red); display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-size: 22px; font-weight: 700; color: #fff; margin: 0 auto 16px; }
.pn-profile-name { font-family: var(--font-head); font-size: 18px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.pn-profile-role { font-size: 13px; color: var(--red); margin-bottom: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.pn-profile-desc { font-size: 13px; font-weight: 300; color: var(--text2); line-height: 1.6; }
.pn-certs { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 14px; }
.pn-cert { font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text3); background: var(--bg2); border: 1px solid var(--border); padding: 3px 9px; border-radius: 2px; }

/* === CASE CARDS === */
.pn-case-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: 24px; margin-top: 48px; }
.pn-case-card { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 32px; transition: border-color .3s; }
.pn-case-card:hover { border-color: var(--border-red); }
.pn-case-industry { font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); margin-bottom: 12px; }
.pn-case-card h3 { font-family: var(--font-head); font-size: 20px; font-weight: 600; color: var(--text); margin-bottom: 12px; }
.pn-case-card p { font-size: 14px; font-weight: 300; color: var(--text2); line-height: 1.7; margin-bottom: 20px; }
.pn-case-metrics { display: flex; gap: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
.pn-case-num { font-family: var(--font-head); font-size: 28px; font-weight: 700; color: var(--red); display: block; }
.pn-case-label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text3); }

/* === BLOG CARDS === */
.pn-blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px,1fr)); gap: 24px; margin-top: 48px; }
.pn-blog-card { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; transition: border-color .3s; }
.pn-blog-card:hover { border-color: var(--border-red); }
.pn-blog-thumb { height: 180px; background: var(--bg3); display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--border); overflow: hidden; }
.pn-blog-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pn-blog-thumb svg { width: 40px; height: 40px; stroke: var(--border-red); fill: none; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.pn-blog-body { padding: 24px; }
.pn-blog-cat { font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); margin-bottom: 10px; }
.pn-blog-card h3 { font-family: var(--font-head); font-size: 18px; font-weight: 600; color: var(--text); line-height: 1.25; margin-bottom: 10px; }
.pn-blog-card p { font-size: 13px; font-weight: 300; color: var(--text2); line-height: 1.6; margin-bottom: 16px; }
.pn-blog-meta { font-size: 12px; color: var(--text3); display: flex; gap: 16px; }
.pn-blog-link { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--red); text-decoration: none; margin-top: 12px; }

/* === JOB CARDS === */
.pn-job-list { display: flex; flex-direction: column; gap: 16px; margin-top: 48px; }
.pn-job-card { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 28px 32px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; transition: border-color .3s; }
.pn-job-card:hover { border-color: var(--border-red); }
.pn-job-card h3 { font-family: var(--font-head); font-size: 20px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.pn-job-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.pn-job-tag { font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text3); background: var(--bg2); border: 1px solid var(--border); padding: 3px 10px; border-radius: 2px; }

/* === TESTIMONIALS === */
.pn-testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 24px; margin-top: 48px; }
.pn-testimonial { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 32px 28px; transition: border-color .3s; }
.pn-testimonial:hover { border-color: var(--border-red); }
.pn-stars { color: var(--red); font-size: 14px; margin-bottom: 20px; }
.pn-testimonial blockquote { font-size: 15px; font-weight: 300; color: var(--text2); line-height: 1.75; margin-bottom: 28px; font-style: italic; }
.pn-author { display: flex; align-items: center; gap: 12px; }
.pn-author-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--red); display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-size: 14px; font-weight: 700; color: #fff; flex-shrink: 0; }
.pn-author-name { font-size: 14px; font-weight: 500; color: var(--text); }
.pn-author-role { font-size: 12px; color: var(--text3); margin-top: 2px; }

/* === CTA STRIP === */
.pn-cta { background: var(--bg3); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 80px 5%; text-align: center; position: relative; overflow: hidden; }
.pn-cta::before { content: ''; position: absolute; bottom: -100px; left: 50%; transform: translateX(-50%); width: 700px; height: 400px; border-radius: 50%; background: radial-gradient(circle, rgba(224,32,32,.06) 0%, transparent 70%); pointer-events: none; }
.pn-cta .pn-section-sub { margin: 0 auto 32px; text-align: center; }
.pn-cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* === CONTACT FORM === */
.pn-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; margin-top: 48px; }
.pn-contact-info h3 { font-family: var(--font-head); font-size: 22px; font-weight: 600; color: var(--text); margin-bottom: 24px; }
.pn-contact-item { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 24px; }
.pn-contact-icon { width: 40px; height: 40px; flex-shrink: 0; background: var(--red-glow); border-radius: 4px; display: flex; align-items: center; justify-content: center; }
.pn-contact-icon svg { width: 18px; height: 18px; stroke: var(--red); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pn-contact-item h4 { font-size: 13px; font-weight: 500; color: var(--text); margin-bottom: 4px; }
.pn-contact-item p, .pn-contact-item a { font-size: 14px; font-weight: 300; color: var(--text2); text-decoration: none; }
.pn-form { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 36px; }
.pn-form-group { margin-bottom: 20px; }
.pn-form-group label { display: block; font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text3); margin-bottom: 8px; }
.pn-form-group input,
.pn-form-group textarea,
.pn-form-group select { width: 100%; background: var(--bg2); border: 1px solid var(--border); border-radius: 3px; padding: 12px 16px; font-family: var(--font-body); font-size: 14px; color: var(--text); transition: border-color .2s; outline: none; }
.pn-form-group input:focus,
.pn-form-group textarea:focus,
.pn-form-group select:focus { border-color: var(--border-red); }
.pn-form-group textarea { resize: vertical; min-height: 120px; }
.pn-form-group select option { background: var(--bg2); }

/* === FOOTER === */
.pn-footer { background: var(--bg); border-top: 1px solid var(--border); padding: 56px 5% 32px; }
.pn-footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; padding-bottom: 48px; border-bottom: 1px solid var(--border); }
.pn-footer-brand-logo { font-family: var(--font-head); font-size: 20px; font-weight: 700; letter-spacing: 0.04em; color: var(--text); text-decoration: none; display: inline-block; margin-bottom: 12px; }
.pn-footer-brand-logo span { color: var(--red); }
.pn-footer-brand p { font-size: 13px; font-weight: 300; color: var(--text3); line-height: 1.7; max-width: 260px; }
.pn-footer-col h5 { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text3); margin-bottom: 20px; }
.pn-footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.pn-footer-col ul a { font-size: 13px; color: var(--text2); text-decoration: none; transition: color .2s; }
.pn-footer-col ul a:hover { color: var(--text); }
.pn-footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.pn-footer-copy { font-size: 12px; color: var(--text3); }
.pn-footer-legal { display: flex; gap: 24px; }
.pn-footer-legal a { font-size: 12px; color: var(--text3); text-decoration: none; transition: color .2s; }
.pn-footer-legal a:hover { color: var(--text2); }

/* === ANIMATIONS === */
@keyframes pnFadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
.pn-page-hero-content > * { animation: pnFadeUp .6s ease both; }
.pn-page-hero-content > *:nth-child(1){animation-delay:.1s}
.pn-page-hero-content > *:nth-child(2){animation-delay:.2s}
.pn-page-hero-content > *:nth-child(3){animation-delay:.3s}
.pn-page-hero-content > *:nth-child(4){animation-delay:.4s}

/* === RESPONSIVE === */
@media(max-width:900px){
  .pn-nav-links{display:none}
  .pn-mobile-btn{display:flex}
  .pn-two-col{grid-template-columns:1fr}
  .pn-contact-grid{grid-template-columns:1fr}
  .pn-footer-top{grid-template-columns:1fr 1fr;gap:32px}
  .pn-footer-brand{grid-column:1/-1}
  .pn-spec-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
  .pn-section{padding:56px 5%}
  .pn-page-hero{padding:80px 5% 56px}
  .pn-process-grid{grid-template-columns:1fr}
  .pn-process-item{border-right:none;border-bottom:1px solid var(--border)}
  .pn-footer-top{grid-template-columns:1fr}
  .pn-footer-bottom{flex-direction:column;align-items:flex-start}
  .pn-job-card{flex-direction:column;align-items:flex-start}
}