/*
Theme Name: IA Para Todos (Astra Child)
Template: astra
Description: Tema hijo de Astra con la identidad visual de IA Para Todos (colores, tipografia, tarjetas, FAQ, modo oscuro).
Version: 1.0.0
Author: IA Para Todos
*/

:root {
  --bg: #ffffff;
  --bg-alt: #f6f6fc;
  --bg-elevated: #ffffff;
  --bg-code: #f1f1f8;
  --text: #14141f;
  --text-muted: #5b5f70;
  --text-faint: #8a8ea1;
  --border: #e7e8f2;
  --border-strong: #d5d7e5;

  --primary: #5b3bff;
  --primary-dark: #4529d6;
  --primary-light: #efecff;
  --accent: #00c2a8;
  --accent-light: #e2fbf6;
  --warn: #ff8a3d;
  --warn-light: #fff1e4;

  --gradient: linear-gradient(135deg, #5b3bff 0%, #8b3bff 50%, #00c2a8 120%);
  --gradient-text: linear-gradient(90deg, #5b3bff 0%, #9b3bff 60%, #00c2a8 100%);

  --shadow-sm: 0 1px 2px rgba(20, 20, 31, 0.06);
  --shadow-md: 0 8px 24px rgba(20, 20, 31, 0.08);
  --shadow-lg: 0 20px 48px rgba(20, 20, 31, 0.14);
  --shadow-glow: 0 0 0 1px rgba(91, 59, 255, 0.08), 0 8px 24px rgba(91, 59, 255, 0.16);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;

  --font-heading: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

:root[data-theme="dark"] {
  --bg: #0c0d14;
  --bg-alt: #12131c;
  --bg-elevated: #1a1c28;
  --bg-code: #1f2130;
  --text: #eef0fa;
  --text-muted: #a2a6bd;
  --text-faint: #6d7189;
  --border: #262838;
  --border-strong: #34364a;
  --primary: #9a86ff;
  --primary-dark: #b7a7ff;
  --primary-light: #201d40;
  --accent: #3fe4cb;
}

body, .site, .ast-separate-container {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
}
h1, h2, h3, h4, .entry-title, .site-title { font-family: var(--font-heading); }
a { color: var(--primary); }

/* ---- Reused design system from the static site (cards, hero, article, FAQ, etc.) ---- */

.container { max-width: 1160px; margin: 0 auto; padding: 0 24px; }

.hero-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--primary-light); color: var(--primary); font-size: 0.8rem; font-weight: 700; padding: 8px 16px; border-radius: 999px; margin-bottom: 22px; }
.gradient-text { background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { font-size: 1.15rem; color: var(--text-muted); }

.btn { display: inline-flex; align-items: center; gap: 8px; justify-content: center; background: var(--gradient); color: #fff !important; padding: 14px 26px; border-radius: 999px; font-weight: 700; font-size: 0.96rem; border: none; cursor: pointer; box-shadow: var(--shadow-glow); text-decoration: none; }
.btn-ghost { background: transparent; color: var(--text) !important; border: 1px solid var(--border-strong); box-shadow: none; }

.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 26px; margin: 20px 0; }
.post-card { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--bg-elevated); }
.post-card-top { height: 6px; background: var(--gradient); }
.post-card-body { padding: 24px 24px 26px; }
.card-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--primary-light); color: var(--primary); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.card-icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; }
.post-card .tag { font-size: 0.74rem; font-weight: 700; color: var(--primary); text-transform: uppercase; display: block; margin-bottom: 8px; }
.read-more { font-weight: 700; font-size: 0.9rem; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }

.callout { background: var(--primary-light); border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent); border-radius: var(--radius-md); padding: 22px 26px; margin: 28px 0; }
.callout h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 1rem; color: var(--primary); }

.faq-list { border-top: 1px solid var(--border); margin-top: 20px; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-question { width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 20px 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-weight: 700; font-size: 1rem; color: var(--text); }
.faq-question svg { width: 18px; height: 18px; flex-shrink: 0; transition: transform .2s ease; color: var(--primary); }
.faq-item.open .faq-question svg { transform: rotate(45deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.faq-answer p { color: var(--text-muted); padding-bottom: 20px; }

.related-posts { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--border); }

.author-box { margin: 44px 0 8px; padding: 26px; background: var(--bg-alt); border-radius: var(--radius-md); display: flex; gap: 18px; align-items: flex-start; border: 1px solid var(--border); }
.author-box .avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--gradient); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.2rem; flex-shrink: 0; }

.ad-slot { max-width: 780px; margin: 36px auto; text-align: center; }
.ad-placeholder { background: repeating-linear-gradient(45deg, var(--bg-alt), var(--bg-alt) 10px, var(--border) 10px, var(--border) 20px); border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); min-height: 90px; display: flex; align-items: center; justify-content: center; color: var(--text-faint); font-size: 0.85rem; }

.toc-mobile summary { cursor: pointer; font-weight: 700; padding: 14px 18px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-elevated); list-style: none; }
.toc-mobile summary::-webkit-details-marker { display: none; }
.toc-mobile ul { list-style: none; margin: 0; padding: 14px 18px; }

.values-grid, .contact-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin: 28px 0; }
.value-card, .contact-info-card { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 22px; background: var(--bg-elevated); }

.newsletter { background: var(--gradient); color: #fff; border-radius: var(--radius-lg); padding: 48px; text-align: center; }
.newsletter input[type=email] { flex: 1; min-width: 220px; padding: 13px 18px; border-radius: 999px; border: none; font-size: 1rem; }
.newsletter form { display: flex; gap: 10px; max-width: 440px; margin: 0 auto; flex-wrap: wrap; justify-content: center; }
.newsletter button { padding: 13px 26px; border-radius: 999px; border: none; background: var(--text); color: #fff; font-weight: 700; cursor: pointer; }

/* Floating widgets injected via functions.php (theme toggle, cookie banner, back-to-top, progress bar) */
.progress-bar { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: var(--gradient); z-index: 9999; }
.theme-toggle-floating {
  position: fixed; top: 90px; right: 20px; z-index: 999; width: 44px; height: 44px; border-radius: 50%;
  background: var(--bg-elevated); border: 1px solid var(--border-strong); color: var(--text);
  display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-md);
}
.theme-toggle-floating .sun { display: none; }
:root[data-theme="dark"] .theme-toggle-floating .sun { display: block; }
:root[data-theme="dark"] .theme-toggle-floating .moon { display: none; }

.back-to-top { position: fixed; bottom: 26px; right: 26px; width: 46px; height: 46px; border-radius: 50%; background: var(--bg-elevated); border: 1px solid var(--border-strong); color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transform: translateY(10px); transition: all .2s ease; z-index: 150; }
.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }

.cookie-banner { position: fixed; bottom: 16px; left: 16px; right: 16px; max-width: 640px; margin: 0 auto; background: var(--bg-elevated); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 20px 22px; display: none; align-items: center; gap: 18px; z-index: 200; flex-wrap: wrap; }
.cookie-banner.visible { display: flex; }
.cookie-banner .cookie-actions { display: flex; gap: 10px; margin-left: auto; }
.cookie-banner button { padding: 10px 18px; border-radius: 999px; border: none; font-weight: 700; cursor: pointer; font-size: 0.86rem; }
.cookie-accept { background: var(--gradient); color: #fff; }
.cookie-reject { background: transparent; color: var(--text); border: 1px solid var(--border-strong) !important; }


.faq-question:focus,
.faq-question:active,
.faq-question:hover {
	  background: none !important;
	  color: var(--text) !important;
	  box-shadow: none !important;
	  outline: none !important;
}

:root[data-theme="dark"] .ast-article-inner,
:root[data-theme="dark"] .comment-respond 
{
	  background: var(--bg-elevated) !important;
	  color: var(--text) !important;
	
}

:root[data-theme="dark"] .ast-article-inner .entry-title,
:root[data-theme="dark"] .ast-article-inner .entry-title a,
:root[data-theme="dark"] .ast-article-inner h1,
:root[data-theme="dark"] .ast-article-inner h2,
:root[data-theme="dark"] .ast-article-inner h3{
	  color: var(--text) !important;
	
}

/* Blue corporate palette override + Plus Jakarta Sans headings */
:root {
	  --primary: #2563eb;
	  --primary-dark: #1d4ed8;
	  --primary-light: #eff6ff;
	  --accent: #0ea5e9;
	  --accent-light: #e0f2fe;
	  --gradient: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
	  --gradient-text: linear-gradient(90deg, #1d4ed8 0%, #2563eb 55%, #0ea5e9 100%);
	  --font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	
}

:root[data-theme="dark"] {
	  --primary: #60a5fa;
	  --primary-dark: #93c5fd;
	  --primary-light: #17233f;
	  --accent: #38bdf8;
	  --accent-light: #123047;
	  --gradient: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
	  --gradient-text: linear-gradient(90deg, #60a5fa 0%, #3b82f6 55%, #38bdf8 100%);
	
}

/* Scroll reveal animation */
.iapt-reveal {
	  opacity: 0;
	  transform: translateY(18px);
	  transition: opacity .6s ease, transform .6s ease;
	
}
.iapt-reveal-visible { opacity: 1; transform: translateY(0); }

/* Hero layout (missing from reused subset) */
.hero{position:relative;padding:84px 0 70px;overflow:hidden;}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;}
.hero-blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.35;z-index:0;}
.blob-1{width:420px;height:420px;background:var(--primary);top:-120px;right:-80px;}
.blob-2{width:300px;height:300px;background:var(--accent);bottom:-100px;right:220px;}
.hero-illustration{position:relative;z-index:1;width:100%;height:auto;max-width:480px;margin:0 auto;display:block;}
.hero-illustration .node{fill:var(--bg-elevated);stroke:var(--primary);stroke-width:1.6;}
.hero-illustration .node-accent{fill:var(--accent);stroke:none;}
.hero-illustration .edge{stroke:var(--border-strong);stroke-width:1.4;}
.hero-illustration .edge-glow{stroke:var(--primary);stroke-width:1.4;opacity:.55;}
.hero-illustration .pulse{animation:iaptPulse 2.6s ease-in-out infinite;}
.hero-illustration .float-1{animation:iaptFloat 5s ease-in-out infinite;}
.hero-illustration .float-2{animation:iaptFloat 6.5s ease-in-out infinite .6s;}
.hero-illustration .float-3{animation:iaptFloat 5.8s ease-in-out infinite 1.2s;}
@keyframes iaptFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
@keyframes iaptPulse{0%,100%{opacity:.5;}50%{opacity:1;}}
@media (max-width:980px){.hero-grid{grid-template-columns:1fr;}.hero-illustration{max-width:340px;}}

/* Hide redundant page title on the custom Home page */
.page-id-121 .entry-header,
.page-id-121 .page-header,
.page-id-121 .entry-title{display:none;}

/* Fix Astra entry-content heading/text color in dark mode */
:root[data-theme="dark"] .entry-content h1,
:root[data-theme="dark"] .entry-content h2,
:root[data-theme="dark"] .entry-content h3,
:root[data-theme="dark"] .entry-content h4,
:root[data-theme="dark"] .entry-content p,
:root[data-theme="dark"] .entry-content li{color:var(--text);}
:root[data-theme="dark"] .entry-content .gradient-text{color:transparent;}