/**
 * templates/child-theme-base/css/style.css — Wizard-System v0.7.0
 *
 * CSS principal del child theme genérico. Estrategia de cascada:
 *
 *   1. SCOPE CONTEXTUAL obligatorio en todos los selectores wizard-*:
 *      NO: .wizard-home-hero { }
 *      SÍ: .wizard-site-main .wizard-home-hero { }  ← más específico que Kadence
 *
 *   2. !important quirúrgico solo donde Kadence sobrescribe con certeza:
 *      font-family en body/headings, color de enlaces, background body.
 *
 *   3. RESET SELECTIVO de Kadence al inicio.
 *
 *   4. Variables CSS siempre (--color-*, --font-*). Fallbacks razonables.
 *
 * Orden de carga: kadence-global → wizard-child-css (prioridad 20 en WP).
 */


/* ===========================================================================
   0. RESET SELECTIVO DE KADENCE
   =========================================================================== */

body {
  background: var(--color-bg, #F4F6F8);
  color: var(--color-ink, #0D1B2A);
  font-family: var(--font-body, system-ui, sans-serif) !important;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body h1, body h2, body h3,
body h4, body h5, body h6 {
  font-family: var(--font-headings, serif) !important;
  color: var(--color-ink, #0D1B2A);
  font-weight: 700;
  line-height: 1.2;
  margin-top: 0;
}

body a {
  color: var(--color-primary, #C04000);
  text-decoration: none;
  transition: color 0.2s ease, opacity 0.2s ease;
}
body a:hover, body a:focus-visible {
  color: var(--color-primary, #C04000);
  opacity: 0.8;
}

/* Kadence añade padding/margin al #main que rompe el layout del wizard */
body .wizard-site-main {
  margin: 0;
  padding: 0;
  max-width: none;
}
body .wizard-site-main .content-area {
  margin: 0;
  padding: 0;
}


/* ===========================================================================
   1. BASE
   =========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
img, video { max-width: 100%; height: auto; display: block; }
html { scroll-behavior: smooth; }
::selection { background: var(--color-primary, #C04000); color: #fff; }

.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: -60px; left: 0;
  background: var(--color-primary, #C04000);
  color: #fff !important;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  z-index: 200;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 0; }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ===========================================================================
   2. FRONT-PAGE (front-page.php)
   =========================================================================== */

.wizard-site-main .wizard-home-hero {
  padding: clamp(4rem, 10vw, 7rem) clamp(1rem, 4vw, 2rem);
  max-width: 1100px;
  margin: 0 auto;
  animation: fadeInUp 0.6s ease-out both;
}
.wizard-site-main .wizard-home-hero-inner { max-width: 720px; }
/* Con imagen: ver sección 13 (P_HERO) */

.wizard-site-main .wizard-home-hero-tag {
  display: block;
  color: var(--color-primary, #C04000);
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 1.25rem;
}
.wizard-site-main .wizard-home-hero-h1 {
  font-size: clamp(2rem, 5vw, 3.5rem) !important;
  line-height: 1.1;
  color: var(--color-ink, #0D1B2A);
  margin: 0 0 1.25rem;
}
.wizard-site-main .wizard-home-hero-paragraph {
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  color: var(--color-ink, #0D1B2A);
  opacity: 0.8;
  margin: 0 0 2rem;
  max-width: 580px;
  line-height: 1.65;
}
.wizard-site-main .wizard-home-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 2rem;
  background: var(--color-primary, #C04000);
  color: #fff !important;
  border-radius: var(--card-radius, 8px);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none !important;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.wizard-site-main .wizard-home-hero-cta:hover,
.wizard-site-main .wizard-home-hero-cta:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  filter: brightness(1.05);
  color: #fff !important;
}

/* Hero Gutenberg (wp:group con background-image — P4 fix) */
.wizard-site-main .wp-block-group.wizard-home-hero-gb {
  position: relative;
  background-size: cover !important;
  background-position: center center !important;
  min-height: 520px;
  display: flex;
  align-items: center;
  padding: 5rem 1.5rem;
}
.wizard-site-main .wp-block-group.wizard-home-hero-gb::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 0;
  pointer-events: none;
}
.wizard-site-main .wizard-home-hero-gb__inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  width: 100%;
}
.wizard-site-main .wizard-home-hero-gb .wizard-home-hero-h1,
.wizard-site-main .wizard-home-hero-gb .wizard-home-hero-paragraph,
.wizard-site-main .wizard-home-hero-gb .wizard-home-hero-tag {
  color: #fff;
}

.wizard-site-main .wizard-home-placeholder {
  padding: 4rem 1.5rem;
  text-align: center;
  color: var(--color-ink, #0D1B2A);
  opacity: 0.5;
}

/* Secciones */
.wizard-site-main .wizard-home-sections {
  padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 4vw, 2rem);
  max-width: 1200px;
  margin: 0 auto;
}
.wizard-site-main .wizard-home-section { margin-bottom: clamp(2rem, 5vw, 4rem); }
.wizard-site-main .wizard-home-section-inner { max-width: 100%; }
.wizard-site-main .wizard-home-section-title {
  font-size: clamp(1.5rem, 3vw, 2.25rem) !important;
  color: var(--color-ink, #0D1B2A);
  margin: 0 0 1.5rem;
}
.wizard-site-main .wizard-home-section-content {
  max-width: 70ch;
  margin-bottom: 2rem;
  opacity: 0.85;
  line-height: 1.7;
}
.wizard-site-main .wizard-home-section-items {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  list-style: none;
  padding: 0; margin: 0;
}
@media (min-width: 640px) {
  .wizard-site-main .wizard-home-section-items { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .wizard-site-main .wizard-home-section-items { grid-template-columns: repeat(3, 1fr); }
}

.wizard-site-main .wizard-home-section-item {
  background: rgba(0,0,0,0.025);
  padding: 1.5rem;
  border-radius: var(--card-radius, 12px);
  border: 1px solid rgba(0,0,0,0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.wizard-site-main .wizard-home-section-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.08);
}
.wizard-site-main .wizard-home-section-item-title {
  font-size: 1.15rem !important;
  color: var(--color-ink, #0D1B2A);
  margin: 0 0 0.5rem;
}
.wizard-site-main .wizard-home-section-item-desc {
  color: var(--color-ink, #0D1B2A);
  opacity: 0.75;
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}
.wizard-site-main .wizard-home-section-item-link {
  display: inline-flex;
  align-items: center;
  margin-top: 1rem;
  color: var(--color-primary, #C04000) !important;
  font-weight: 500;
  font-size: 0.9rem;
  text-decoration: none;
  gap: 0.25rem;
  transition: gap 0.2s ease;
}
.wizard-site-main .wizard-home-section-item-link:hover { gap: 0.5rem; }


/* ===========================================================================
   3. PAGE (page.php)
   =========================================================================== */

.wizard-site-main .wizard-page-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 4vw, 2rem);
}
.wizard-site-main .wizard-page-header { margin-bottom: 2rem; }
.wizard-site-main .wizard-page-title {
  font-size: clamp(1.75rem, 4vw, 2.75rem) !important;
  color: var(--color-ink, #0D1B2A);
  margin: 0 0 1rem;
  line-height: 1.15;
}
.wizard-site-main .wizard-page-content {
  max-width: 72ch;
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--color-ink, #0D1B2A);
}
.wizard-site-main .wizard-page-content p { margin: 0 0 1.25em; }


/* ===========================================================================
   4. BLOG INDEX (home.php)
   =========================================================================== */

.wizard-site-main .wizard-blog-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 4vw, 2rem);
}
.wizard-site-main .wizard-blog-header {
  margin-bottom: 2.5rem;
  border-bottom: 2px solid var(--color-muted, #DDE3EA);
  padding-bottom: 1.5rem;
}
.wizard-site-main .wizard-blog-title {
  font-size: clamp(1.75rem, 4vw, 2.5rem) !important;
  color: var(--color-ink, #0D1B2A);
  margin: 0;
}
.wizard-site-main .wizard-blog-posts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 640px) {
  .wizard-site-main .wizard-blog-posts { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .wizard-site-main .wizard-blog-posts { grid-template-columns: repeat(3, 1fr); }
}
.wizard-site-main .wizard-blog-post {
  background: var(--color-bg, #fff);
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: var(--card-radius, 12px);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.wizard-site-main .wizard-blog-post:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.08);
}
.wizard-site-main .wizard-blog-post-thumb img {
  width: 100%; height: 200px; object-fit: cover;
}
.wizard-site-main .wizard-blog-post-title {
  font-size: 1.2rem !important;
  margin: 1rem 1.25rem 0.5rem;
  line-height: 1.3;
}
.wizard-site-main .wizard-blog-post-title a { color: var(--color-ink, #0D1B2A) !important; }
.wizard-site-main .wizard-blog-post-title a:hover { color: var(--color-primary, #C04000) !important; }
.wizard-site-main .wizard-blog-post-meta {
  padding: 0 1.25rem;
  font-size: 0.85rem;
  color: var(--color-ink, #0D1B2A);
  opacity: 0.6;
  margin-bottom: 0.5rem;
}
.wizard-site-main .wizard-blog-post-cats {
  color: var(--color-primary, #C04000) !important;
  font-size: 0.8rem;
}
.wizard-site-main .wizard-blog-post-excerpt {
  padding: 0 1.25rem 1.25rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-ink, #0D1B2A);
  opacity: 0.8;
}
.wizard-site-main .wizard-blog-empty {
  text-align: center; padding: 4rem 1.5rem; opacity: 0.5;
}


/* ===========================================================================
   5. SINGLE POST (single.php)
   =========================================================================== */

.wizard-site-main .wizard-single-container {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 4vw, 2rem);
}
.wizard-site-main .wizard-single-header { margin-bottom: 2rem; }
.wizard-site-main .wizard-single-title {
  font-size: clamp(1.75rem, 4vw, 2.75rem) !important;
  color: var(--color-ink, #0D1B2A);
  margin: 0 0 1rem; line-height: 1.15;
}
.wizard-site-main .wizard-single-meta {
  font-size: 0.875rem;
  color: var(--color-ink, #0D1B2A);
  opacity: 0.6;
  display: flex; gap: 1rem; flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.wizard-site-main .wizard-single-thumb {
  margin-bottom: 2rem;
  border-radius: var(--card-radius, 12px);
  overflow: hidden;
}
.wizard-site-main .wizard-single-cats {
  color: var(--color-primary, #C04000) !important;
  font-size: 0.8rem;
}
.wizard-site-main .wizard-single-content {
  font-size: 1.05rem; line-height: 1.8;
  color: var(--color-ink, #0D1B2A);
}
.wizard-site-main .wizard-single-content p { margin: 0 0 1.5em; }
.wizard-site-main .wizard-single-footer {
  margin-top: 2rem; padding-top: 1.5rem;
  border-top: 1px solid var(--color-muted, #DDE3EA);
  font-size: 0.875rem; color: var(--color-ink, #0D1B2A); opacity: 0.7;
}
.wizard-site-main .wizard-single-tags-label { font-weight: 600; }
.wizard-site-main .wizard-single-nav {
  display: flex; justify-content: space-between; gap: 1rem;
  margin-top: 3rem; padding-top: 2rem;
  border-top: 1px solid var(--color-muted, #DDE3EA);
}
.wizard-site-main .wizard-prev a,
.wizard-site-main .wizard-next a {
  font-weight: 500; font-size: 0.9rem;
  color: var(--color-primary, #C04000) !important;
}


/* ===========================================================================
   6. INDEX FALLBACK (index.php)
   =========================================================================== */

.wizard-site-main .wizard-index-container {
  max-width: 1100px; margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 4vw, 2rem);
}
.wizard-site-main .wizard-index-header { margin-bottom: 2rem; }
.wizard-site-main .wizard-index-title {
  font-size: clamp(1.5rem, 3vw, 2.25rem) !important;
  color: var(--color-ink, #0D1B2A); margin: 0;
}
.wizard-site-main .wizard-index-posts { display: grid; gap: 2rem; }
.wizard-site-main .wizard-index-post {
  padding: 1.5rem;
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: var(--card-radius, 12px);
}
.wizard-site-main .wizard-index-post-title {
  font-size: 1.2rem !important; margin: 0 0 0.75rem;
}
.wizard-site-main .wizard-index-post-title a { color: var(--color-ink, #0D1B2A) !important; }
.wizard-site-main .wizard-index-post-title a:hover { color: var(--color-primary, #C04000) !important; }
.wizard-site-main .wizard-index-post-thumb { margin-bottom: 1rem; border-radius: var(--card-radius, 12px); overflow: hidden; }
.wizard-site-main .wizard-index-post-thumb img { width: 100%; height: 180px; object-fit: cover; }
.wizard-site-main .wizard-index-post-excerpt { font-size: 0.95rem; opacity: 0.8; line-height: 1.6; }
.wizard-site-main .wizard-singular-title {
  font-size: clamp(1.75rem, 4vw, 2.75rem) !important; margin: 0 0 1.5rem;
}
.wizard-site-main .wizard-singular-content { max-width: 72ch; margin: 0 auto; }
.wizard-site-main .wizard-no-results {
  text-align: center; padding: 4rem 1.5rem; opacity: 0.5;
}


/* ===========================================================================
   7. ARCHIVE (archive.php)
   =========================================================================== */

.wizard-site-main .wizard-archive-container {
  max-width: 1100px; margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 4vw, 2rem);
}
.wizard-site-main .wizard-archive-header {
  margin-bottom: 2rem;
  border-bottom: 2px solid var(--color-muted, #DDE3EA);
  padding-bottom: 1.5rem;
}
.wizard-site-main .wizard-archive-title {
  font-size: clamp(1.5rem, 3vw, 2.25rem) !important;
  color: var(--color-ink, #0D1B2A); margin: 0 0 0.5rem;
}
.wizard-site-main .wizard-archive-description { font-size: 1rem; opacity: 0.7; margin: 0; }
.wizard-site-main .wizard-archive-posts { display: grid; gap: 1.5rem; }
.wizard-site-main .wizard-archive-post {
  padding: 1rem;
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: var(--card-radius, 12px);
  transition: box-shadow 0.2s ease;
}
.wizard-site-main .wizard-archive-post:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
.wizard-site-main .wizard-archive-post-title {
  font-size: 1.1rem !important; margin: 0 0 0.5rem;
}
.wizard-site-main .wizard-archive-post-title a { color: var(--color-ink, #0D1B2A) !important; }
.wizard-site-main .wizard-archive-post-title a:hover { color: var(--color-primary, #C04000) !important; }
.wizard-site-main .wizard-archive-post-thumb { flex-shrink: 0; }
.wizard-site-main .wizard-archive-post-thumb img {
  width: 140px; height: 100px; object-fit: cover;
  border-radius: calc(var(--card-radius, 12px) - 4px);
}
.wizard-site-main .wizard-archive-post-meta { font-size: 0.8rem; opacity: 0.6; margin-bottom: 0.5rem; }
.wizard-site-main .wizard-archive-post-excerpt { font-size: 0.9rem; opacity: 0.8; line-height: 1.6; }
.wizard-site-main .wizard-archive-empty { text-align: center; padding: 4rem 1.5rem; opacity: 0.5; }


/* ===========================================================================
   8. 404 (404.php)
   =========================================================================== */

.wizard-site-main .wizard-404-container {
  max-width: 600px; margin: 0 auto;
  padding: clamp(3rem, 8vw, 6rem) clamp(1rem, 4vw, 2rem);
  text-align: center;
}
.wizard-site-main .wizard-404-header { margin-bottom: 2rem; }
.wizard-site-main .wizard-404-code {
  font-size: clamp(5rem, 15vw, 9rem) !important;
  font-weight: 700;
  color: var(--color-primary, #C04000);
  line-height: 1; margin: 0 0 0.25rem;
}
.wizard-site-main .wizard-404-subtitle {
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  color: var(--color-ink, #0D1B2A); margin: 0;
}
.wizard-site-main .wizard-404-body { color: var(--color-ink, #0D1B2A); opacity: 0.8; }
.wizard-site-main .wizard-404-body p { margin-bottom: 2rem; }
.wizard-site-main .wizard-404-actions { margin-bottom: 2rem; }
.wizard-site-main .wizard-404-home-link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: var(--color-primary, #C04000);
  color: #fff !important;
  border-radius: var(--card-radius, 8px);
  font-weight: 600; text-decoration: none !important;
  transition: filter 0.2s ease;
}
.wizard-site-main .wizard-404-home-link:hover { filter: brightness(1.08); }
.wizard-site-main .wizard-404-search { margin-top: 2rem; }
.wizard-site-main .wizard-404-search-title { font-size: 1.1rem !important; margin-bottom: 1rem; }


/* ===========================================================================
   9. PAGINACIÓN
   =========================================================================== */

.wizard-site-main .nav-links,
.wizard-site-main .page-numbers {
  display: flex; gap: 0.5rem; flex-wrap: wrap;
  justify-content: center; margin: 2rem 0;
  list-style: none; padding: 0;
}
.wizard-site-main .page-numbers a,
.wizard-site-main .page-numbers .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.5rem; height: 2.5rem; padding: 0 0.75rem;
  border: 1px solid var(--color-muted, #DDE3EA);
  border-radius: var(--input-radius, 8px);
  color: var(--color-ink, #0D1B2A) !important;
  font-weight: 500;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.wizard-site-main .page-numbers a:hover,
.wizard-site-main .page-numbers .current {
  background: var(--color-primary, #C04000);
  border-color: var(--color-primary, #C04000);
  color: #fff !important;
}


/* ===========================================================================
   10. WP-BLOCK OVERRIDES
   =========================================================================== */

.wizard-site-main .wp-block-button__link,
.wizard-site-main .button,
.wizard-site-main button[type="submit"] {
  background: var(--color-primary, #C04000);
  color: #fff !important;
  border-radius: var(--card-radius, 8px);
  padding: 0.85rem 1.75rem;
  font-weight: 600;
  font-family: var(--font-body, system-ui) !important;
  border: none; cursor: pointer;
  transition: filter 0.2s ease, transform 0.2s ease;
}
.wizard-site-main .wp-block-button__link:hover,
.wizard-site-main .button:hover,
.wizard-site-main button[type="submit"]:hover {
  filter: brightness(1.08); transform: translateY(-1px);
}
.wizard-site-main .wp-block-image {
  border-radius: var(--card-radius, 12px); overflow: hidden;
}


/* ===========================================================================
   11. UTILIDADES
   =========================================================================== */

.wizard-sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ===========================================================================
   12. STICKY FOOTER (P_STICKY)
   =========================================================================== */

html, body {
  height: 100%;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body .wizard-site-header { flex-shrink: 0; }

body .wizard-site-main,
body main,
body #page {
  flex: 1 0 auto;
}

body .wizard-site-footer {
  flex-shrink: 0;
  margin-top: auto;
}


/* ===========================================================================
   13. HERO CON IMAGEN (P_HERO — front-page.php)
   =========================================================================== */

/* Estado base sin imagen: diseño plano actual */
.wizard-site-main .wizard-home-hero {
  padding: clamp(4rem, 10vw, 7rem) clamp(1rem, 4vw, 2rem);
  max-width: 1100px;
  margin: 0 auto;
}

/* Estado con imagen: overlay + texto blanco */
.wizard-site-main .wizard-home-hero.wizard-home-hero--has-image {
  max-width: 100%;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(5rem, 12vw, 8rem) clamp(1rem, 4vw, 2rem);
  position: relative;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.wizard-site-main .wizard-home-hero.wizard-home-hero--has-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(13, 27, 42, 0.5);
  z-index: 0;
}

.wizard-site-main .wizard-home-hero.wizard-home-hero--has-image .wizard-home-hero-inner {
  position: relative;
  z-index: 1;
}

.wizard-site-main .wizard-home-hero.wizard-home-hero--has-image .wizard-home-hero-h1,
.wizard-site-main .wizard-home-hero.wizard-home-hero--has-image .wizard-home-hero-paragraph,
.wizard-site-main .wizard-home-hero.wizard-home-hero--has-image .wizard-home-hero-tag {
  color: var(--color-white, #fff);
}

.wizard-site-main .wizard-home-hero.wizard-home-hero--has-image .wizard-home-hero-cta {
  background: var(--color-primary, #C04000);
  color: var(--color-white, #fff) !important;
  border: 2px solid transparent;
}

.wizard-site-main .wizard-home-hero.wizard-home-hero--has-image .wizard-home-hero-cta:hover {
  background: transparent;
  border-color: var(--color-white, #fff);
  color: var(--color-white, #fff) !important;
}


/* ===========================================================================
   14. TIPOGRAFÍA MEJORADA (P_TIPOGRAFIA — DEC-C)
   =========================================================================== */

/* Headings globales con font-family Barlow */
.wizard-site-main h1,
.wizard-site-main h2,
.wizard-site-main h3,
.wizard-site-main h4,
.wizard-site-main h5,
.wizard-site-main h6 {
  font-family: var(--font-headings, 'Barlow', system-ui, sans-serif) !important;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-ink, #0D1B2A);
  margin-top: 0;
}

/* Body con Inter */
.wizard-site-main,
.wizard-site-main p,
.wizard-site-main li,
.wizard-site-main td {
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
  line-height: 1.65;
}

/* Enlace global: primary, hover accent */
.wizard-site-main a {
  color: var(--color-primary, #C04000);
  transition: color 150ms ease;
}
.wizard-site-main a:hover {
  color: var(--color-accent, #0077A8);
}


/* ===========================================================================
   15. PALETA CON CONFIANZA (P_PALETA — DEC-A)
   =========================================================================== */

/* Sección hero: H2 secciones accent (trust, destacados) */
.wizard-site-main .wizard-home-section--trust .wizard-home-section-title,
.wizard-site-main .wizard-home-section--destacados .wizard-home-section-title {
  color: var(--color-accent, #0077A8);
}

/* Botones en Gutenberg: ya existía, añadir border-transition */
.wizard-site-main .wp-block-button__link {
  transition: filter 0.2s ease, transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  border: 2px solid var(--color-primary, #C04000);
}

/* Outline style buttons (is-style-outline de /drones) */
.wizard-site-main .wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent !important;
  color: var(--color-primary, #C04000) !important;
  border: 2px solid var(--color-primary, #C04000) !important;
}
.wizard-site-main .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--color-primary, #C04000) !important;
  color: var(--color-white, #fff) !important;
  transform: translateY(-1px);
}


/* ===========================================================================
   16. ALTERNANCIA DE FONDOS (P_ALTERNANCIA)
   =========================================================================== */

/* Home sections: impares blanco, pares bg-soft */
.wizard-site-main .wizard-home-section:nth-of-type(odd) {
  background: var(--bg-section-1, var(--color-white, #fff));
}
.wizard-site-main .wizard-home-section:nth-of-type(even) {
  background: var(--bg-section-2, var(--color-bg, #F4F6F8));
}

.wizard-site-main .wizard-home-section {
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1rem, 4vw, 2rem);
  margin-bottom: 0 !important;
}

/* Separadores entre secciones */
.wizard-site-main .wizard-home-section + .wizard-home-section {
  border-top: 1px solid var(--color-muted, #DDE3EA);
}

/* Ancho máximo del contenido de sección */
.wizard-site-main .wizard-home-section-inner {
  max-width: 1200px;
  margin: 0 auto;
}


/* ===========================================================================
   17. CARDS CON SOMBRAS Y HOVER (P_CARDS)
   =========================================================================== */

/* Grid de categorías y productos en /drones */
.wizard-site-main .wizard-catalog-categories-grid .wp-block-column,
.wizard-site-main .wizard-catalog-featured-grid .wp-block-column {
  background: var(--color-white, #fff);
  border-radius: var(--card-radius, 12px);
  padding: 1.5rem;
  box-shadow: 0 2px 12px rgba(13, 27, 42, 0.06);
  border: 1px solid rgba(13, 27, 42, 0.05);
  transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease;
}

.wizard-site-main .wizard-catalog-categories-grid .wp-block-column:hover,
.wizard-site-main .wizard-catalog-featured-grid .wp-block-column:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(13, 27, 42, 0.12);
  border-color: var(--color-primary, #C04000);
}

/* Imágenes dentro de cards */
.wizard-site-main .wizard-catalog-categories-grid .wp-block-image img,
.wizard-site-main .wizard-catalog-featured-grid .wp-block-image img {
  border-radius: 8px;
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

/* Items de secciones en home: hover mejorado */
.wizard-site-main .wizard-home-section-item {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.wizard-site-main .wizard-home-section-item:hover {
  border-color: var(--color-accent, #0077A8);
}


/* ===========================================================================
   18. DECORATIVOS SUTILES (P_DECORATIVOS)
   =========================================================================== */

/* Línea vertical 4px junto a H2 de sección */
.wizard-site-main .wizard-home-section-title {
  position: relative;
  padding-left: 1.25rem;
}
.wizard-site-main .wizard-home-section-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  bottom: 0.2em;
  width: 4px;
  background: var(--color-primary, #C04000);
  border-radius: 2px;
}

/* Títulos accent: línea en accent */
.wizard-site-main .wizard-home-section--trust .wizard-home-section-title::before,
.wizard-site-main .wizard-home-section--destacados .wizard-home-section-title::before {
  background: var(--color-accent, #0077A8);
}

/* Numeración 01/02/03 en grid de categorías (/drones) */
.wizard-site-main .wizard-catalog-categories-grid {
  counter-reset: cat-counter;
}
.wizard-site-main .wizard-catalog-categories-grid .wp-block-column {
  counter-increment: cat-counter;
  position: relative;
}
.wizard-site-main .wizard-catalog-categories-grid .wp-block-column::after {
  content: counter(cat-counter, decimal-leading-zero);
  position: absolute;
  top: 12px;
  right: 16px;
  font-family: var(--font-headings, 'Barlow', system-ui, sans-serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-muted, #DDE3EA);
  line-height: 1;
  pointer-events: none;
}


/* ===========================================================================
   19. FOOTER LOGO (P_LOGO_FOOTER)
   =========================================================================== */

body .wizard-footer-logo {
  margin-bottom: 0.75rem;
}

body .wizard-footer-logo .wizard-logo {
  height: var(--logo-footer-height, 36px);
  width: auto;
  display: block;
}

/* El color de primer span del SVG (role=bg) hereda del footer text */
body .wizard-site-footer .wizard-footer-logo .wizard-logo text tspan:first-child {
  fill: var(--footer-text, var(--color-bg, #F4F6F8)) !important;
}