/*
Theme Name: Pauta Digital Child
Template: astra
Version: 1.0.0
Description: Child theme de Pauta Digital — Dark Tech Minimalist
Author: Pauta Digital
*/

/* =========================================
   VARIABLES — SISTEMA VISUAL PAUTA DIGITAL
   ========================================= */
:root {
  --pd-bg:          #1C1C1C;
  --pd-surface:     #242424;
  --pd-surface-2:   #2A2A2A;
  --pd-border:      #2E2E2E;
  --pd-cyan:        #00E5FF;
  --pd-coral:       #FB4B4E;
  --pd-text:        #E3E2E3;
  --pd-text-muted:  rgba(227,226,227,0.55);
  --pd-text-hint:   rgba(227,226,227,0.30);
  --pd-radius-sm:   4px;
  --pd-radius-md:   8px;
  --pd-radius-lg:   12px;
  --pd-font-head:   'Space Grotesk', sans-serif;
  --pd-font-body:   'Inter', sans-serif;
  --pd-transition:  0.2s ease;
}

/* =========================================
   GOOGLE FONTS
   ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Inter:wght@400;500&display=swap');

/* =========================================
   RESET GLOBAL ASTRA
   ========================================= */
body {
  background-color: var(--pd-bg) !important;
  color: var(--pd-text) !important;
  font-family: var(--pd-font-body) !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  -webkit-font-smoothing: antialiased;
}

*, *::before, *::after {
  box-sizing: border-box;
}

a {
  color: var(--pd-cyan);
  text-decoration: none;
  transition: opacity var(--pd-transition);
}
a:hover { opacity: 0.75; }

img { max-width: 100%; height: auto; display: block; }

/* =========================================
   TIPOGRAFÍA
   ========================================= */
h1, h2, h3, h4, h5, h6,
.entry-title,
.ast-archive-title {
  font-family: var(--pd-font-head) !important;
  color: var(--pd-text) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(32px, 5vw, 56px) !important; font-weight: 700 !important; }
h2 { font-size: clamp(24px, 3.5vw, 38px) !important; font-weight: 700 !important; }
h3 { font-size: clamp(18px, 2.5vw, 24px) !important; font-weight: 500 !important; }
h4 { font-size: 18px !important; font-weight: 500 !important; }

p {
  font-family: var(--pd-font-body) !important;
  color: var(--pd-text-muted) !important;
  line-height: 1.7 !important;
}

/* Acento de sección tipo / TÍTULO */
.pd-section-label {
  font-family: var(--pd-font-body);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pd-cyan);
  margin-bottom: 1rem;
  display: block;
}

/* =========================================
   HEADER / NAVBAR
   ========================================= */
#masthead,
.site-header,
.ast-site-header-wrap {
  background-color: #161616 !important;
  border-bottom: 0.5px solid var(--pd-border) !important;
  box-shadow: none !important;
}

.ast-logo-title-wrap .site-title a,
.ast-site-identity .site-title a {
  font-family: var(--pd-font-head) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  color: var(--pd-text) !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Nav links */
.main-navigation a,
.ast-main-navigation a,
#site-navigation a {
  font-family: var(--pd-font-body) !important;
  font-size: 13px !important;
  color: var(--pd-text-muted) !important;
  letter-spacing: 0.03em;
  transition: color var(--pd-transition);
}
.main-navigation a:hover,
.ast-main-navigation a:hover,
#site-navigation a:hover {
  color: var(--pd-text) !important;
}

/* CTA header */
.ast-header-button-wrap a,
.menu-item.ast-menu-item-button a {
  background: var(--pd-cyan) !important;
  color: #1C1C1C !important;
  padding: 8px 20px !important;
  border-radius: var(--pd-radius-sm) !important;
  font-family: var(--pd-font-head) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  letter-spacing: 0.04em;
}

/* =========================================
   BOTONES GLOBALES
   ========================================= */
.ast-btn,
.wp-block-button__link,
button,
input[type="submit"],
.wpcf7-submit {
  font-family: var(--pd-font-head) !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  border-radius: var(--pd-radius-sm) !important;
  transition: all var(--pd-transition) !important;
  cursor: pointer !important;
}

/* Botón primario — cian */
.pd-btn-primary,
.wp-block-button.is-style-fill .wp-block-button__link {
  background: var(--pd-cyan) !important;
  color: #1C1C1C !important;
  border: none !important;
  padding: 12px 28px !important;
}
.pd-btn-primary:hover { opacity: 0.85 !important; }

/* Botón secundario — outline */
.pd-btn-secondary,
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent !important;
  color: var(--pd-cyan) !important;
  border: 1px solid var(--pd-cyan) !important;
  padding: 12px 28px !important;
}
.pd-btn-secondary:hover {
  background: rgba(0,229,255,0.08) !important;
}

/* Botón WhatsApp */
.pd-btn-whatsapp {
  background: #25D366 !important;
  color: #fff !important;
  border: none !important;
  padding: 14px 32px !important;
  font-size: 15px !important;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--pd-radius-sm) !important;
}

/* =========================================
   CARDS GENÉRICAS
   ========================================= */
.pd-card {
  background: var(--pd-surface);
  border: 0.5px solid var(--pd-border);
  border-radius: var(--pd-radius-lg);
  padding: 1.5rem;
  transition: border-color var(--pd-transition), transform var(--pd-transition);
}
.pd-card:hover {
  border-color: rgba(0,229,255,0.3);
  transform: translateY(-2px);
}

.pd-card-accent {
  border-left: 2px solid var(--pd-cyan);
  border-radius: 0 var(--pd-radius-lg) var(--pd-radius-lg) 0;
}

.pd-card-accent-coral {
  border-left: 2px solid var(--pd-coral);
  border-radius: 0 var(--pd-radius-lg) var(--pd-radius-lg) 0;
}

/* =========================================
   TAGS / BADGES
   ========================================= */
.pd-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--pd-radius-sm);
  font-size: 11px;
  font-family: var(--pd-font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pd-tag-cyan {
  background: rgba(0,229,255,0.1);
  color: var(--pd-cyan);
  border: 0.5px solid rgba(0,229,255,0.3);
}
.pd-tag-coral {
  background: rgba(251,75,78,0.1);
  color: var(--pd-coral);
  border: 0.5px solid rgba(251,75,78,0.3);
}
.pd-tag-neutral {
  background: rgba(227,226,227,0.08);
  color: var(--pd-text);
  border: 0.5px solid rgba(227,226,227,0.15);
}

/* =========================================
   BLOG — ARCHIVE Y POSTS
   ========================================= */
.ast-article-post,
.ast-archive-post,
.post {
  background: var(--pd-surface) !important;
  border: 0.5px solid var(--pd-border) !important;
  border-radius: var(--pd-radius-lg) !important;
  overflow: hidden;
  transition: border-color var(--pd-transition), transform var(--pd-transition);
  margin-bottom: 2rem !important;
}
.ast-article-post:hover,
.ast-archive-post:hover {
  border-color: rgba(0,229,255,0.3) !important;
  transform: translateY(-2px);
}

.entry-title a {
  color: var(--pd-text) !important;
  font-family: var(--pd-font-head) !important;
}
.entry-title a:hover { color: var(--pd-cyan) !important; }

.ast-post-meta-wrap,
.entry-meta,
.posted-on,
.byline {
  font-family: var(--pd-font-body) !important;
  font-size: 12px !important;
  color: var(--pd-text-hint) !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.entry-content p {
  font-family: var(--pd-font-body) !important;
  color: var(--pd-text-muted) !important;
  line-height: 1.7 !important;
}

/* =========================================
   SINGLE POST
   ========================================= */
.single .entry-content {
  max-width: 720px;
  margin: 0 auto;
}

.single .entry-content h2,
.single .entry-content h3 {
  margin-top: 2.5rem !important;
  margin-bottom: 1rem !important;
}

.single .entry-content blockquote {
  border-left: 2px solid var(--pd-cyan) !important;
  background: var(--pd-surface) !important;
  padding: 1.25rem 1.5rem !important;
  margin: 2rem 0 !important;
  border-radius: 0 var(--pd-radius-md) var(--pd-radius-md) 0 !important;
}

.single .entry-content code,
.single .entry-content pre {
  background: var(--pd-surface-2) !important;
  border: 0.5px solid var(--pd-border) !important;
  border-radius: var(--pd-radius-sm) !important;
  color: var(--pd-cyan) !important;
  font-size: 14px !important;
}

/* =========================================
   SIDEBAR
   ========================================= */
.widget,
.wp-block-widget-group {
  background: var(--pd-surface) !important;
  border: 0.5px solid var(--pd-border) !important;
  border-radius: var(--pd-radius-lg) !important;
  padding: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

.widget-title,
.widgettitle {
  font-family: var(--pd-font-head) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--pd-cyan) !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1rem !important;
}

/* =========================================
   FORMULARIOS
   ========================================= */
input[type="text"],
input[type="email"],
input[type="search"],
textarea,
select {
  background: var(--pd-surface-2) !important;
  border: 0.5px solid var(--pd-border) !important;
  border-radius: var(--pd-radius-sm) !important;
  color: var(--pd-text) !important;
  font-family: var(--pd-font-body) !important;
  padding: 10px 14px !important;
  width: 100% !important;
  transition: border-color var(--pd-transition) !important;
}
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
  border-color: var(--pd-cyan) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(0,229,255,0.1) !important;
}

/* =========================================
   FOOTER
   ========================================= */
#colophon,
.site-footer,
.ast-footer-overlay {
  background: #111111 !important;
  border-top: 0.5px solid var(--pd-border) !important;
  color: var(--pd-text-muted) !important;
}

.site-footer a {
  color: var(--pd-text-muted) !important;
}
.site-footer a:hover { color: var(--pd-cyan) !important; }

.ast-footer-copyright {
  font-family: var(--pd-font-body) !important;
  font-size: 12px !important;
  color: var(--pd-text-hint) !important;
  letter-spacing: 0.06em;
}

/* =========================================
   DIVISOR DECORATIVO
   ========================================= */
hr,
.wp-block-separator {
  border: none !important;
  border-top: 0.5px solid var(--pd-border) !important;
  margin: 3rem 0 !important;
}

/* =========================================
   UTILITARIOS
   ========================================= */
.pd-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.pd-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.pd-grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}

.pd-grid-4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem;
}

.pd-section {
  padding: 5rem 0;
}

.pd-text-center { text-align: center; }
.pd-mb-1 { margin-bottom: 1rem; }
.pd-mb-2 { margin-bottom: 2rem; }
.pd-mb-3 { margin-bottom: 3rem; }

/* =========================================
   RESPONSIVE
   ========================================= */
@media (max-width: 768px) {
  .pd-section { padding: 3rem 0; }
  h1 { font-size: 32px !important; }
  h2 { font-size: 26px !important; }
}