/*
Theme Name: Ingenieria Electrica Child
Version: 3.3.1
*/

:root{
  --clr-accent : #d72924;
  --clr-bg     : #111;
  --clr-text   : #f5f5f5;
  --hdr-bg     : #202020;
  --card-bg    : #222;

  /* ----- Fuentes globales ----- */
  --ff-base    : 'Roboto', sans-serif;           /* Texto de párrafos */
  --ff-heading : 'Roboto Slab', serif;           /* Títulos principales */
  --ff-subhead : 'Roboto Condensed', sans-serif; /* Subtítulos / secciones */
}

.scheme-light{
  --clr-bg   : #f6f7fa;
  --clr-text : #1c1c1c;
  --hdr-bg   : #ffffff;
  --card-bg  : #ffffff;
}

/* Aplicar base */
body {
  background: var(--clr-bg);
  color: var(--clr-text);
  font-family: var(--ff-base);
  margin: 0;
  line-height: 1.6;
}

/* Encabezados grandes */
h1, h2, h3, h4, .featured-slide h2 {
  font-family: var(--ff-heading);
  margin: 0;
}

/* Subtítulos azules, tipo Premises o secciones */
.premise-title,
h2.premise,
h3.premise {
  font-family: var(--ff-subhead);
}

a {
  color: var(--clr-accent);
}
a:hover {
  text-decoration: underline;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: auto;
  padding: 0 1.5rem;
}

/* ================= HEADER ================= */
.site-header{position:sticky;top:0;z-index:1000;background:var(--hdr-bg);color:var(--clr-text);border-bottom:1px solid rgba(0,0,0,.1);padding:0.15rem 0;}
.site-header .container{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;}
.branding{flex:0 0 auto;display:flex;align-items:center;gap:1rem;flex-direction:row;text-align:left;}
.branding img{max-height:36px;}

.primary-nav{margin-left:auto;order:1;}
.primary-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:1.25rem;}
.primary-nav a{color:var(--clr-text);font-weight:600;}

.search-toggle{order:2;background:none;border:none;width:32px;height:32px;cursor:pointer;color:var(--clr-text);font-size:1.3rem;display:flex;align-items:center;justify-content:center;}
.scheme-toggle{order:3;background:none;border:none;width:32px;height:32px;cursor:pointer;color:var(--clr-text);font-size:1.25rem;display:flex;align-items:center;justify-content:center;}
.nav-toggle{order:4;background:none;border:none;width:32px;height:32px;cursor:pointer;position:relative;color:var(--clr-text);}
.nav-toggle span,.nav-toggle::before,.nav-toggle::after{content:'';position:absolute;left:6px;right:6px;height:3px;background:currentColor;border-radius:2px;transition:.25s;}
.nav-toggle span{top:50%;transform:translateY(-50%);} .nav-toggle::before{top:9px;} .nav-toggle::after{bottom:9px;}
body.menu-open .nav-toggle span{transform:scaleX(0);} body.menu-open .nav-toggle::before{transform:translateY(9px) rotate(45deg);}body.menu-open .nav-toggle::after{transform:translateY(-9px) rotate(-45deg);}
@media(max-width:768px){.primary-nav{display:none;}}

/* ============ HERO ============ */
.hero{position:relative;text-align:center;color:#fff;background:#1e1e1e;margin-bottom:1rem;padding:2.5rem 0;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.hero::before{content:'';position:absolute;inset:0;background:url('https://images.unsplash.com/photo-1581092334063-0e09b27b01f2?auto=format&fit=crop&w=1600&q=60') center/cover no-repeat;opacity:.15;z-index:-1;}
.btn-cta{display:inline-block;padding:.75rem 1.5rem;border-radius:4px;background:var(--clr-accent);color:#fff;font-weight:600;} .btn-cta:hover{opacity:.85;}

/* ============ SLIDER ============ */
.featured-slider{overflow:hidden;padding:1rem 0;margin-bottom:1rem;}
.featured-slide{height:clamp(220px,28vw,340px);background:var(--bg) center/cover no-repeat;position:relative;border-radius:12px;margin-right:20px;overflow:hidden;flex:0 0 100%;}
.slide-overlay{position:absolute;inset:0;background:rgba(0,0,0,.55);display:flex;flex-direction:column;justify-content:flex-end;padding:1.5rem;transition:.3s;}
.featured-slide:hover .slide-overlay{background:rgba(0,0,0,.35);} .slide-overlay h2{font-size:1.8rem;margin:0 0 .5rem;} .slide-overlay p{max-width:80%;}

/* ============ HOME 2:1 COLUMNS ============ */
.container.home-columns{display:grid !important;grid-template-columns:2fr 1fr;gap:2rem;position:relative;}
.container.home-columns::before{content:'';position:absolute;left:calc(66.666% - 1rem);top:0;bottom:0;width:1px;background:rgba(255,255,255,.08);}
.container.home-columns:has(.posts-right:empty)::before{display:none;}
.posts-col{display:flex;flex-direction:column;gap:1.5rem;}
.card-left,.card-right{border-radius:12px;background: var(--card-bg);overflow:hidden;display:flex;flex-direction:column;}
.card-thumb{width:100%;height:100%;overflow:hidden;}
.card-left .card-thumb{height:260px;}
.card-right .card-thumb{height:340px;}
.card-thumb img{width:100%;height:100%;object-fit:cover;object-position:center;}
.card-right .card-thumb img{height:340px;object-fit:cover;}
.card-body{padding:1rem;}
@media(max-width:768px){.container.home-columns{grid-template-columns:1fr;} .container.home-columns::before{display:none;}}

/* ====== HAMBURGER PANEL ====== */
.secondary-nav.panel{position:fixed;top:0;right:-100%;bottom:0;width:70%;max-width:320px;z-index:999;background:linear-gradient(var(--hdr-bg),#1a1a1a);display:flex;flex-direction:column;padding:4rem 2rem;gap:1.2rem;transition:right .3s ease;}
.secondary-nav.panel.open{right:0;}
.secondary-nav.panel a{color:var(--clr-text);font-weight:600;font-size:1.1rem;}
.menu-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:998;}
.menu-overlay.show{opacity:1;pointer-events:auto;}

/* ====== SEARCH WIDGETS OFF ====== */
.widget_search,.search-form,form.search-form,.sidebar-home .search-form{display:none !important;}

/* ====== FLOATING SEARCH BAR ====== */
#header-search{position:fixed;top:-120px;left:0;right:0;background:var(--hdr-bg);padding:0.8rem 1.2rem;display:flex;justify-content:center;transition:top .35s ease;z-index:1001;}
#header-search.visible{top:0;}
#header-search .search-field{width:100%;max-width:600px;padding:0.6rem 0.9rem;border-radius:6px;border:none;background:#222;color:#fff;font-size:1rem;}
/* ====== Contact Form – diseño en columna ====== */
.contact-form{
  max-width:600px;
  margin:2rem auto;
  display:grid;            /* fuerza cuadrícula, NO flex horizontal */
  gap:1rem;
}

.contact-form label{
  display:block;
  font-weight:600;
}

.contact-form input,
.contact-form textarea{
  width:100%;
  padding:.6rem;
  border:1px solid #ccc;
  border-radius:4px;
  background:#fff;
  color:#000;
}

@media (max-width:480px){
  .contact-form{
    gap:.75rem;            /* un poco menos espacio en móviles */
  }
}
/* Layout en 2 columnas */
.articles-layout {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}
.articles-layout > .wp-block-column:first-child { flex: 2; }
.articles-layout > .wp-block-column:last-child {
  flex: 1;
  border-left: 1px solid #ddd;
  padding-left: 1rem;
}

/* ===== Tarjetas de artículos ===== */
.article-card{
  background: var(--card-bg, #fff);        /* usa variable */
  border: 1px solid var(--card-border, #e0e0e0);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  transition: .25s ease;
}

.article-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
}

.article-card img{
  width:100%;
  height:auto;
  display:block;
  border-radius:8px;
  object-fit:cover;
}

/* Breadcrumbs */
.breadcrumbs {
  font-size: 0.85rem;
  margin: 0.25rem 0 1.5rem;
}
.breadcrumbs a {
  color: var(--clr-accent, #0073aa);
  text-decoration: none;
}
.breadcrumbs a:hover {
  text-decoration: underline;
}

/* Paginación */
.wp-block-query-pagination {
  margin-top: 2rem;
}
.wp-block-query-pagination a {
  padding: .5rem .75rem;
  margin: 0 .2rem;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  text-decoration: none;
}
.wp-block-query-pagination .current {
  background: var(--clr-accent, #0073aa);
  color: #fff;
  border-color: var(--clr-accent, #0073aa);
}

.plantilla1-entry {
  display: grid;
  grid-template-columns: 2.5fr 1fr;
  gap: 2.5rem;
  max-width: 1200px;
  margin: 2rem auto;
  padding: 0 1rem;
}
.plantilla1-article {
  background: var(--card-bg, #fff);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.07);
  padding: 2rem;
}
.plantilla1-header {
  margin-bottom: 2rem;
}
.plantilla1-thumb img {
  width: 100%;
  border-radius: 12px;
  margin-bottom: 1.5rem;
}
.plantilla1-sidebar {
  background: var(--card-bg, #fff);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.07);
  padding: 1.5rem;
}
@media (max-width: 900px) {
  .plantilla1-entry { grid-template-columns: 1fr; }
  .plantilla1-sidebar { margin-top: 2rem; }
}

/* TOC - Tabla de Contenido */
.iepro-toc-box {
  background: #f4f8fb;
  border-left: 4px solid #0073aa;
  padding: 1rem 1.2rem;
  margin-bottom: 2rem;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.iepro-toc-box strong {
  font-size: 1.1rem;
  display: block;
  margin-bottom: 0.5rem;
  color: #333;
}

.iepro-toc-box ul {
  margin: 0;
  padding-left: 1rem;
  list-style-type: disc;
}

.iepro-toc-box li {
  margin-bottom: 0.4rem;
}

.iepro-toc-box li a {
  color: #0073aa;
  text-decoration: none;
}

.iepro-toc-box li a:hover {
  text-decoration: underline;
}
/* === Forzar fondo transparente en TOC sin importar el modo === */
.iepro-toc-box {
  background-color: transparent !important;
  border-left: 3px solid var(--clr-accent, #0073aa);
  padding-left: 1rem;
  margin-bottom: 2rem;
  color: inherit;
}

/* Título del TOC */
.iepro-toc-box strong {
  font-size: 1.1rem;
  font-weight: 600;
  display: block;
  margin-bottom: 0.5rem;
  color: inherit;
}

/* Enlaces del TOC */
.iepro-toc-box li a {
  color: var(--clr-link, #0073aa);
  text-decoration: none;
  transition: color 0.2s ease;
}

.iepro-toc-box li a:hover {
  text-decoration: underline;
}

/* Subniveles visuales */
.iepro-toc-box ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.iepro-toc-box li {
  margin-bottom: 0.3rem;
  font-size: 1rem;
}

.iepro-toc-box li.toc-level-3 {
  margin-left: 1.2rem;
  font-size: 0.95rem;
}

.iepro-toc-box li.toc-level-4 {
  margin-left: 2rem;
  font-size: 0.9rem;
  opacity: 0.85;
}

/* Fix para encabezados ocultos por header fijo */
.entry-content h2,
.entry-content h3,
.entry-content h4 {
  scroll-margin-top: 100px;
}

/* Scroll suave al hacer clic */
html {
  scroll-behavior: smooth;
}

/* === Estilos Página de Cursos con soporte para tema claro y oscuro === */

.curso-container {
  max-width: 1200px;
  margin: 4rem auto;
  padding: 0 1rem;
  color: var(--clr-text);
  background-color: var(--clr-bg);
}

.titulo-cursos {
  font-size: 2.2rem;
  text-align: center;
  margin-bottom: 0.5rem;
  font-family: var(--ff-heading);
  color: var(--clr-text);
}

.subtitulo-cursos {
  font-size: 1.1rem;
  text-align: center;
  color: rgba(255,255,255,0.6); /* modo oscuro por defecto */
  margin-bottom: 2rem;
}

.scheme-light .subtitulo-cursos {
  color: rgba(0,0,0,0.5); /* modo claro */
}

.curso-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

.curso-card {
  background: var(--card-bg);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  transition: transform 0.2s, background 0.3s;
}

.curso-card:hover {
  transform: translateY(-4px);
}

.curso-card a {
  color: inherit;
  text-decoration: none;
  display: block;
  height: 100%;
}

.curso-imagen img {
  width: 100%;
  display: block;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.scheme-light .curso-imagen img {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.curso-contenido {
  padding: 1rem;
}

.curso-titulo {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
  color: var(--clr-text);
  font-family: var(--ff-heading);
}

.curso-extracto {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 1rem;
}

.scheme-light .curso-extracto {
  color: rgba(0, 0, 0, 0.7);
}

.btn-curso {
  background: var(--clr-accent);
  color: white;
  padding: 8px 14px;
  border-radius: 6px;
  font-weight: bold;
  display: inline-block;
  font-family: var(--ff-base);
  transition: background 0.3s;
}

.btn-curso:hover {
  background: #b4221f; /* versión más oscura de tu rojo */
}

.curso-container {
  padding: 2rem 1rem;
  max-width: 1200px;
  margin: auto;
}

.titulo-cursos, .subtitulo-cursos {
  text-align: center;
  color: var(--clr-text);
}

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

.curso-card {
  background-color: var(--card-bg);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: transform 0.2s;
}

.curso-card:hover {
  transform: translateY(-5px);
}

.curso-imagen img {
  width: 100%;
  height: auto;
  display: block;
}

.curso-contenido {
  padding: 1rem;
}

.curso-titulo {
  font-family: var(--ff-heading);
  font-size: 1.2rem;
  color: var(--clr-text);
  margin: 0 0 0.5rem;
}

.curso-extracto {
  font-size: 0.95rem;
  color: var(--clr-text);
}

.btn-curso {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.4rem 0.8rem;
  background-color: var(--clr-accent);
  color: #fff;
  border-radius: 5px;
  font-size: 0.9rem;
  text-align: center;
}
.breadcrumbs {
  font-size: 0.95rem;
  margin: 0.5rem 0 1.5rem 0;
  padding: 0.5rem 0;
  background: none;
  color: var(--clr-text, #222);
}

.breadcrumbs a {
  color: var(--clr-accent, #0073aa);
  text-decoration: underline;
  font-weight: 600;
  transition: color 0.2s;
}

.breadcrumbs a:hover {
  color: #b4221f; /* o el color que prefieras para hover */
  text-decoration: underline;
}

.entry-title .entry-date {
  font-size: 0.9em;
  color: #666;
  margin-left: 8px;
  font-weight: normal;
}

.plantilla1-entry {
  display: flex;
  gap: 2rem;
}

.col-3-4 {
  width: 75%;
}

.col-1-4 {
  width: 25%;
  padding-left: 1rem;
  border-left: 1px solid #ccc;
}

.sidebar-right .widget {
  margin-bottom: 1.5rem;
}

.sidebar-msg {
  font-style: italic;
  color: #777;
  font-size: 14px;
}

/* ───── Estilos para Plantilla Artículos Técnicos (page-articulos-tecnicos.php) ───── */

.articulos-tecnicos-grid {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 2rem;
  margin: 2rem auto;
  max-width: 1200px;
  padding: 0 1rem;
}

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

/* Tarjetas de Artículos */
.card-entrada {
  background-color: var(--fondo-tarjeta, #fff);
  border: 1px solid #ddd;
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.card-entrada:hover {
  transform: translateY(-5px);
}

.card-entrada img {
  width: 100%;
  height: auto;
  display: block;
}

.card-entrada .contenido-card {
  padding: 1rem;
}

.card-entrada h2 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.card-entrada h2 a {
  text-decoration: none;
  color: #333;
}

.card-entrada p {
  font-size: 0.95rem;
  color: #555;
}

/* Sidebar personalizado */
.sidebar-articulos {
  padding: 1rem;
  background: #f9f9f9;
  border-radius: 10px;
}

/* Responsive layout */
@media (max-width: 768px) {
  .articulos-tecnicos-grid {
    grid-template-columns: 1fr;
  }

  .sidebar-articulos {
    margin-top: 2rem;
  }
}

/* ───── Colores para modo oscuro en Artículos Técnicos ───── */
body.dark-mode .articulos-tecnicos-grid {
  background-color: #121212;
}

body.dark-mode .card-entrada {
  background-color: #1e1e1e !important;
  border-color: #333 !important;
  box-shadow: 0 2px 6px rgba(255, 255, 255, 0.05);
}

body.dark-mode .card-entrada h2 a,
body.dark-mode .card-entrada p {
  color: #ddd !important;
}

body.dark-mode .card-entrada h2 a:hover {
  color: #4da9ff !important;
}

body.dark-mode .sidebar-articulos {
  background-color: #1e1e1e !important;
  border: 1px solid #333 !important;
  color: #ddd !important;
}

body.dark-mode .sidebar-articulos * {
  color: #ddd !important;
  background-color: transparent !important;
  border-color: #444 !important;
}

body.dark-mode .sidebar-articulos a {
  color: #4da9ff !important;
}

body.dark-mode .sidebar-articulos a:hover {
  color: #81c3ff !important;
  text-decoration: underline;
}

.iepro-card {
  background-color: var(--card-bg, #fff);
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  overflow: hidden;
  transition: transform 0.2s ease, background-color 0.3s ease;
}
.scheme-dark .iepro-card {
  --card-bg: #1c1c1c;
}
.scheme-light .iepro-card {
  --card-bg: #ffffff;
}
.iepro-card:hover {
  transform: translateY(-4px);
}

.sidebar-articulos {
  background-color: var(--sidebar-bg, #f8f8f8);
  padding: 1rem;
  border-radius: 8px;
}

.scheme-dark .sidebar-articulos {
  --sidebar-bg: #1c1c1c;
}
.iepro-card-excerpt {
  color: var(--excerpt-color);
  font-size: 0.95rem;
  line-height: 1.5;
  margin-top: 0.5rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Muestra solo 3 líneas */
  -webkit-box-orient: vertical;
}

.scheme-light .iepro-card-excerpt {
  --excerpt-color: #333;
}

.scheme-dark .iepro-card-excerpt {
  --excerpt-color: #ccc;
}

/* Asegura que el título y la miga de pan estén en bloque y uno debajo del otro */
.titulo-articulos {
  display: block;
  margin-bottom: 0.3em;
}

.breadcrumb-articulos {
  display: block;
  clear: both;
  margin-bottom: 1em;
  font-size: 0.9em;
  color: #666;
}

/* Opcional: si usas Flex en .contenido-articulos, fuerza columna */
.contenido-articulos {
  display: flex;
  flex-direction: column;
}

/* Grilla para las entradas en la página Artículos Técnicos */
.articulos-tecnicos-grid {
  display: grid;
  grid-template-columns: 3fr 1fr; /* 3/4 contenido - 1/4 sidebar */
  gap: 2rem;
  align-items: start;
}

.contenido-articulos {
  display: flex;
  flex-direction: column;
}

.contenido-articulos > .loop-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
}

.sidebar-articulos {
  background-color: var(--iepro-bg-sidebar, #f5f5f5);
  padding: 1rem;
  border-radius: 8px;
}

/* Espaciado interno dentro de la tarjeta */
.iepro-card-content {
  padding: 1rem 1.25rem;
}

/* Mejora visual para el título y extracto */
.iepro-card-title {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
  line-height: 1.4;
}

.iepro-card-excerpt {
  margin: 0;
  color: #555;
  line-height: 1.5;
}

.iepro-card-thumb {
  width: 100%;
  height: auto;
  overflow: hidden;
}

.iepro-card-thumb img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover; /* o contain si prefieres ver todo el contenido */
}

/* ─── Estilos para las tarjetas de artículos ─── */
.iepro-card {
  background-color: var(--clr-bg, #fff);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 8px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s;
}

.iepro-card:hover {
  transform: translateY(-4px);
}

.iepro-card-link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

.iepro-card-thumb img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

.iepro-card-content {
  padding: 1rem 1.25rem;
}

.iepro-card-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
  color: var(--clr-text, #222);
}

.iepro-card-excerpt {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--clr-text, #444);
}

.scheme-dark .iepro-card {
  background-color: #1a1a1a;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.05);
}

.scheme-dark .iepro-card-title,
.scheme-dark .iepro-card-excerpt {
  color: #f0f0f0;
}

/* Estilo base del contenedor de widgets */
.widget-area .iepro-widget-box {
  background-color: #f9f9f9;
  padding: 1.5rem;
  border-radius: 0.75rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

/* Soporte para modo oscuro */
.scheme-dark .widget-area .iepro-widget-box {
  background-color: #1e1e1e !important;
  color: #e0e0e0 !important;
}

.scheme-dark .widget-area .iepro-widget-box .widget,
.scheme-dark .widget-area .iepro-widget-box .widget * {
  color: #e0e0e0 !important;
}

.scheme-dark .widget-area input,
.scheme-dark .widget-area select,
.scheme-dark .widget-area textarea {
  background-color: #2a2a2a !important;
  color: #ffffff !important;
  border: 1px solid #444 !important;
}

/* Asegura el ancho consistente del sidebar */
.sidebar-right {
  width: 100%;
  box-sizing: border-box;
}

/* Widget contenedor: fondo, bordes y paddings */
.iepro-widget-box {
  background-color: #f9f9f9;
  padding: 1.5rem;
  border-radius: 0.75rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  width: 100%;
}

/* En modo oscuro: colores adaptados */
.scheme-dark .iepro-widget-box {
  background-color: #1e1e1e !important;
  color: #e0e0e0 !important;
}

/* Evita que el contenido interno colapse o cambie tamaño */
.iepro-widget-box .widget {
  width: 100%;
  margin-bottom: 1.5rem;
}

/* Ajustes visuales para inputs y formularios en modo oscuro */
.scheme-dark .iepro-widget-box input,
.scheme-dark .iepro-widget-box select,
.scheme-dark .iepro-widget-box textarea {
  background-color: #2a2a2a !important;
  color: #ffffff !important;
  border: 1px solid #444 !important;
  width: 100%;
  padding: 0.5rem;
}

/* Evita que los textos se encimen o compriman */
.iepro-widget-box *,
.iepro-widget-box *:before,
.iepro-widget-box *:after {
  box-sizing: border-box;
}

.single-post .col-3-4 {
  width: 75% !important;
}

.single-post .col-1-4 {
  width: 25% !important;
}

body {
  font-family: var(--ff-base);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-heading);
}

/* =========================================
   ESTILOS PARA EL FOOTER MEJORADO
   ========================================= */

/* --- Zona Superior (Widgets) --- */
.footer-widget-area {
    margin-top: 3rem; /* <-- AÑADIDO: Espacio superior para separar del contenido */
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* <-- AÑADIDO: Línea divisoria sutil */
    padding: 3.5rem 0;
    background: linear-gradient(145deg, #23272d 0%, #1a1c20 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.scheme-light .footer-widget-area {
    border-bottom-color: rgba(0,0,0,0.1);
}

.footer-widgets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.footer-widget .widget-title {
    font-family: var(--ff-heading);
    color: var(--clr-text);
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.footer-widget, .footer-widget a {
    color: var(--clr-text);
    opacity: 0.8;
    text-decoration: none;
}
.footer-widget a:hover {
    opacity: 1;
    text-decoration: underline;
}
.footer-widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* --- Zona Inferior (Copyright Bar) --- */
.sub-footer {
    background: var(--hdr-bg);
    padding: 1.2rem 0;
}

.sub-footer-columns {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.sub-footer-left {
    flex: 1 1 300px;
    text-align: left;
    font-size: 0.9rem;
}
.sub-footer-left a {
    margin-right: 1rem;
}

.sub-footer-center {
    flex: 1 1 300px;
    text-align: center;
    font-size: 0.9rem;
    opacity: 0.7;
}

.sub-footer-right {
    flex: 1 1 300px;
    text-align: right;
}

.footer-social {
    display: inline-flex;
    gap: 0.8rem;
}
.footer-social svg {
    width: 1.3rem;
    height: 1.3rem;
    fill: currentColor;
    transition: opacity 0.3s, transform 0.3s;
}
.footer-social a:hover svg { 
    opacity: 0.75;
    transform: scale(1.1);
}

@media (max-width: 768px) {
    .sub-footer-left, .sub-footer-center, .sub-footer-right {
        text-align: center;
        flex-basis: 100%;
    }
}

/* =========================================
   ESTILOS PARA WIDGETS DE FOOTER PERSONALIZADOS (v2 - Con Color Moderno)
   ========================================= */

/* --- Columna 1: Lista de Categorías como Etiquetas --- */
.widget-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.widget-tag {
    display: inline-block;
    padding: 0.4rem 0.8rem;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    font-size: 0.85rem;
    transition: background-color 0.3s, border-color 0.3s;
}
.scheme-light .widget-tag {
    background-color: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
}

.widget-tag:hover {
    background-color: var(--clr-accent);
    border-color: var(--clr-accent);
    color: #fff !important;
    opacity: 1;
}

/* --- Columna 2: Widget de Newsletter Moderno --- */
.newsletter-widget p {
    margin-bottom: 1rem;
    font-size: 0.9rem;
}
.newsletter-form {
    display: flex;
    gap: 0.5rem;
}
.newsletter-form input[type="email"] {
    flex-grow: 1;
    padding: 0.6rem 0.9rem;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(0,0,0,0.2);
    color: var(--clr-text);
    min-width: 0;
}
.scheme-light .newsletter-form input[type="email"] {
    border-color: rgba(0,0,0,0.2);
    background-color: #fff;
}
.newsletter-form button {
    padding: 0.6rem 1rem;
    border: none;
    background-color: var(--clr-accent);
    color: #fff;
    font-weight: bold;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s;
}
.newsletter-form button:hover {
    background-color: #b4221f;
}

/* --- Columna 3: Widget de Redes Sociales --- */
.social-widget p {
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

/* --- MEJORA DE COLOR: Títulos de Widgets con Gradiente --- */
.footer-widget .widget-title {
    display: inline-block; /* Importante para que el gradiente se ajuste al texto */
    font-family: var(--ff-heading);
    margin-bottom: 1rem;
    font-size: 1.2rem;
    /* La magia del texto con gradiente */
    background: linear-gradient(90deg, var(--clr-accent), #ff5733);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}


/* --- MEJORA DE COLOR: Zona Superior de Widgets con Fondo de Gradiente --- */
.footer-widget-area {
    padding: 3.5rem 0;
    /* Fondo con gradiente sutil en lugar de color plano */
    background: linear-gradient(145deg, #23272d 0%, #1a1c20 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.scheme-light .footer-widget-area {
    border-bottom-color: rgba(0,0,0,0.1);
    /* Mantenemos el fondo oscuro en modo claro para que el footer destaque */
    background: linear-gradient(145deg, #23272d 0%, #1a1c20 100%);
}

/* --- Forzamos el texto de los widgets a ser claro cuando el fondo es oscuro en modo claro --- */
.scheme-light .footer-widget,
.scheme-light .footer-widget a {
    color: #ffffff;
    opacity: 0.8;
}

/* =========================================
   ESTILOS PARA PÁGINA DE ARTÍCULOS TÉCNICOS (EEP Style)
   ========================================= */

/* Encabezado de la página */
.titulo-articulos { margin-bottom: 0.5rem; }
.breadcrumb-articulos { margin-bottom: 2rem; font-size: 0.9rem; opacity: 0.7; }

/* Contenedor de la cuadrícula de tarjetas */
.loop-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
}

/* Tarjeta de artículo individual (EEP Card) */
.eep-card {
    background-color: var(--card-bg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.scheme-light .eep-card {
    border-color: rgba(0,0,0,0.1);
}

.eep-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.eep-card__thumb a {
    display: block;
    height: 200px; /* Altura fija para la imagen */
}

.eep-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.eep-card__content {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Permite que el contenido ocupe el espacio restante */
}

.eep-card__category {
    color: var(--clr-accent);
    font-weight: bold;
    font-size: 0.8rem;
    text-transform: uppercase;
    text-decoration: none;
    margin-bottom: 0.5rem;
}

.eep-card__title {
    font-size: 1.3rem;
    line-height: 1.4;
    margin: 0 0 0.75rem 0;
}
.eep-card__title a {
    color: var(--clr-text);
    text-decoration: none;
}
.eep-card__title a:hover {
    color: var(--clr-accent);
}

.eep-card__meta {
    font-size: 0.85rem;
    color: var(--clr-text);
    opacity: 0.7;
    margin-bottom: 1rem;
}
.eep-card__separator {
    margin: 0 0.25rem;
}

.eep-card__excerpt {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--clr-text);
    opacity: 0.9;
    margin-top: auto; /* Empuja el extracto hacia abajo si el espacio lo permite */
}

/* =========================================
   ESTILOS PARA CABECERAS DE PÁGINA TIPO CANVAS (What If y Artículos Técnicos)
   ========================================= */

/* El bloque de cabecera "Canvas Moderno" */
.page-canvas-header {
    padding: 4rem 2rem;
    text-align: center;
    margin-bottom: 2.5rem;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    color: #fff; 
}

/* --- El Canvas Atrevido --- */
.page-canvas-header::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1;
    /* Capa 1: Fondo semi-transparente para dejar ver la imagen detrás */
    background-color: rgba(17, 21, 28, 0.65); /* Negro con 65% de opacidad */
    /* Capa 2: Patrón de rejilla técnica (Blueprint) */
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
    background-size: 30px 30px;
}

/* Capa de gradiente animado */
.page-canvas-header::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 2;
    background: radial-gradient(circle at 20% 25%, var(--clr-accent) 0%, rgba(215, 41, 36, 0) 25%),
                radial-gradient(circle at 80% 75%, #4a90e2 0%, rgba(74, 144, 226, 0) 25%);
    background-size: 200% 200%;
    animation: moveGradient 15s ease infinite alternate;
}

/* Animación que mueve el gradiente */
@keyframes moveGradient {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
}

/* El contenido de texto, por encima de todo */
.page-canvas-title,
.page-canvas-subtitle,
.page-canvas-breadcrumbs {
    position: relative;
    z-index: 3;
}

.page-canvas-title {
    font-size: 3rem;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
    margin: 0 0 0.5rem 0;
    color: #fff; /* Aseguramos color blanco por defecto */
}

.page-canvas-subtitle {
    font-size: 1.2rem;
    opacity: 0.9;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.7;
    text-shadow: 0 1px 5px rgba(0,0,0,0.5);
    color: #fff; /* Aseguramos color blanco por defecto */
}

.page-canvas-breadcrumbs {
    color: #fff;
    opacity: 0.8;
}

.page-canvas-breadcrumbs a {
    color: #fff;
    text-decoration: underline;
}

/* Detalle del icono '?' para las tarjetas en la página What If */
.page-template-page-what-if-php .eep-card {
    position: relative;
}
.page-template-page-what-if-php .eep-card::before {
    content: '?';
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
    background-color: var(--clr-accent);
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.1rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

/* ... (El resto de tus estilos para "What If" continúan aquí) ... */

/* =========================================
   ESTILO FINAL Y ROBUSTO PARA TÍTULOS DE WIDGETS EN FOOTER
   ========================================= */
.footer-widget .widget-title {
    color: var(--clr-accent); /* Usamos el color de acento de la marca */
    font-family: var(--ff-heading);
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

/* =========================================
   ESTILOS PARA PÁGINA DE CONTACTO MODERNA
   ========================================= */

/* Hub de Recursos */
.contact-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 3rem 0;
}

.hub-card {
    background-color: var(--card-bg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.scheme-light .hub-card {
    border-color: rgba(0,0,0,0.1);
}

.hub-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    border-color: var(--clr-accent);
}

.hub-card__icon svg {
    width: 48px;
    height: 48px;
    color: var(--clr-accent);
    margin-bottom: 1rem;
}

.hub-card__title {
    font-size: 1.4rem;
    color: var(--clr-text);
    margin: 0 0 0.5rem 0;
}

.hub-card__desc {
    font-size: 0.95rem;
    color: var(--clr-text);
    opacity: 0.7;
    line-height: 1.6;
    margin: 0;
}

/* Wrapper del Formulario */
.contact-form-wrapper {
    max-width: 800px;
    margin: 4rem auto;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.scheme-light .contact-form-wrapper {
    border-top-color: rgba(0,0,0,0.1);
}

.contact-form-wrapper h2 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 2rem;
}

/* Formulario Moderno */
.modern-contact-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.modern-contact-form .form-row {
    display: flex;
    flex-direction: column;
}

.modern-contact-form .form-full-width {
    grid-column: 1 / -1; /* Ocupa todo el ancho */
}

.modern-contact-form label {
    margin-bottom: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
}

.modern-contact-form input,
.modern-contact-form textarea {
    background-color: var(--card-bg);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 6px;
    padding: 0.8rem 1rem;
    color: var(--clr-text);
    font-size: 1rem;
    font-family: var(--ff-base);
}
.scheme-light .modern-contact-form input,
.scheme-light .modern-contact-form textarea {
    border-color: rgba(0,0,0,0.2);
}

.modern-contact-form button {
    width: auto;
    padding-left: 2rem;
    padding-right: 2rem;
    justify-self: center; /* Centra el botón */
}

/* Avisos de Éxito / Error */
.notice-success,
.notice-error {
    padding: 1rem 1.5rem;
    border-radius: 6px;
    margin-bottom: 2rem;
}
.notice-success {
    background-color: rgba(40, 167, 69, 0.2);
    border: 1px solid rgba(40, 167, 69, 0.5);
    color: #a7d9b4;
}
.scheme-light .notice-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}
.notice-error {
    background-color: rgba(220, 53, 69, 0.2);
    border: 1px solid rgba(220, 53, 69, 0.5);
    color: #f1b0b7;
}
.scheme-light .notice-error {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}
.notice-error ul {
    margin: 0;
    padding-left: 1.2rem;
}

/* =============================================================================
   ACCESIBILIDAD WEB - LECTORES DE PANTALLA
   ============================================================================= */

/* Clase para texto solo visible para lectores de pantalla */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Mostrar el texto cuando se enfoca con teclado (opcional) */
.sr-only-focusable:focus {
    position: static !important;
    width: auto !important;
    height: auto !important;
    padding: 0.25rem 0.5rem !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
    background-color: var(--clr-accent) !important;
    color: white !important;
    text-decoration: none !important;
    border-radius: 3px !important;
}