/*
Theme Name:     Mesaux Child Theme
Theme URI:      n/a
Template:       kadence
Author:         MESAUX
Author URI:     n/a
Description:    Tema hijo de Kadence
Version:        1.0.0
License:        GNU General Public License v3.0 (or later)
License URI:    https://www.gnu.org/licenses/gpl-3.0.html
*/
.planes-precios-crm .wompi-big-number {
font-size: 2em; 
color: #007934;
font-family: 'Akren', sans-serif;
}
.dev-web-landing .wompi-big-number {
font-size: 2.5em; 
color: #673de6;
font-family: 'Akren', sans-serif;
text-align: center;
margin: 0;
padding: 0;
}
.dev-web-hero .wompi-big-number {
font-size: 14px; 
color: #362077;
font-family: poppins;
font-weight: 600;
text-align: left;
padding: 0;
margin: 0;
}
.crm-hero .wompi-big-number {
font-size: 14px; 
color: #007934;
font-family: poppins;
font-weight: 600;
text-align: left;
padding: 0;
margin: 0;
}
.crm-table .wompi-big-number {
font-size: 14px; 
color: #050505;
font-family: poppins;
font-weight: 600;
text-align: center;
padding: 0;
margin: 0;
}
.ia-hero .wompi-big-number {
font-size: 14px; 
color: #323a49;
font-family: poppins;
font-weight: 600;
text-align: left;
padding: 0;
margin: 0;
}
.ia-mantenimiento-card .wompi-big-number {
font-size: 40px; 
color: #323a49;
font-family: poppins;
font-weight: 600;
text-align: left;
padding: 0;
margin: 0;
}
.devweb-planes-card .wompi-big-number {
font-size: 35px; 
color: #673de6;
font-family: poppins;
font-weight: 600;
text-align: left;
padding: 0;
margin: 0;
}
.diseno-hero .wompi-big-number {
font-size: 14px; 
color: #ff441f;
font-family: poppins;
font-weight: 600;
text-align: left;
padding: 0;
margin: 0;
}
.marketing-hero .wompi-big-number {
font-size: 14px; 
color: #c8005f;
font-family: poppins;
font-weight: 600;
text-align: left;
padding: 0;
margin: 0;
}
.softwareacademico-hero .wompi-big-number {
font-size: 14px; 
color: #880000;
font-family: poppins;
font-weight: 600;
text-align: left;
padding: 0;
margin: 0;
}
.diseno-planes-card .wompi-big-number {
font-size: 35px; 
color: #ff441f;
font-family: poppins;
font-weight: 600;
text-align: left;
padding: 0;
margin: 0;
}
.video-youtube-moodle {
  border-radius: 30px;
  overflow: hidden;
  max-width: 100%;
}

.video-youtube-moodle iframe {
  width: 100%;
  height: 315px;
  border: none;
}
.video-youtube-moodle {
  position: relative;
  padding-top: 56.25%;
  border-radius: 30px;
  overflow: hidden;
}

.video-youtube-moodle iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/*HEADER - TAB - SOLUCIONES DIGITALES */
/* --- 1. Inteligencia Artificial (Tab 1) --- */
.wp-block-kadence-header .kt-tabs-title-list li#tab-inteligenciaartificial a.kt-tab-title,
.wp-block-kadence-header .kt-tabs-content-wrap div.kt-tabs-accordion-title-1 a.kt-tab-title {
    background-color: transparent !important;
    color: #323a49 !important;
    transition: background-color 0.3s ease;
    border-color: #323a49 !important;
}
.wp-block-kadence-header .kt-tabs-title-list li#tab-inteligenciaartificial:hover a.kt-tab-title,
.wp-block-kadence-header .kt-tabs-content-wrap div.kt-tabs-accordion-title-1:hover a.kt-tab-title {
    background: linear-gradient(135deg, #323a49,#647491) !important;
    color: #ffffff !important;
    border-color: transparent !important;
}
.wp-block-kadence-header .kt-tabs-title-list li#tab-inteligenciaartificial.kt-tab-title-active a.kt-tab-title,
.wp-block-kadence-header .kt-tabs-content-wrap div.kt-tabs-accordion-title-1.kt-tab-title-active a.kt-tab-title {
    background: linear-gradient(135deg, #647491,#323a49) !important;
    border-color: transparent !important;
    color: #ffffff !important;
}

/* --- 2. Desarrollo Web (Tab 2) --- */
.wp-block-kadence-header .kt-tabs-title-list li#tab-desarrolloweb a.kt-tab-title,
.wp-block-kadence-header .kt-tabs-content-wrap div.kt-tabs-accordion-title-2 a.kt-tab-title {
    background-color: transparent !important;
    color: #673de6 !important;
    transition: background-color 0.3s ease;
    border-color: #673de6 !important;
}
.wp-block-kadence-header .kt-tabs-title-list li#tab-desarrolloweb:hover a.kt-tab-title,
.wp-block-kadence-header .kt-tabs-content-wrap div.kt-tabs-accordion-title-2:hover a.kt-tab-title {
    background: linear-gradient(135deg, #362077,#673de6) !important;
    color: #ffffff !important;
    border-color: transparent !important;
}
.wp-block-kadence-header .kt-tabs-title-list li#tab-desarrolloweb.kt-tab-title-active a.kt-tab-title,
.wp-block-kadence-header .kt-tabs-content-wrap div.kt-tabs-accordion-title-2.kt-tab-title-active a.kt-tab-title {
    background: linear-gradient(135deg, #673de6,#362077) !important;
    border-color: transparent !important;
    color: #ffffff !important;
}

/* --- 3. Marketing Digital (Tab 3) --- */
.wp-block-kadence-header .kt-tabs-title-list li#tab-marketingdigital a.kt-tab-title,
.wp-block-kadence-header .kt-tabs-content-wrap div.kt-tabs-accordion-title-3 a.kt-tab-title {
    background-color: transparent !important;
    color: #c8005f !important;
    transition: background-color 0.3s ease;
    border-color: #c8005f !important;
}
.wp-block-kadence-header .kt-tabs-title-list li#tab-marketingdigital:hover a.kt-tab-title,
.wp-block-kadence-header .kt-tabs-content-wrap div.kt-tabs-accordion-title-3:hover a.kt-tab-title {
    background: linear-gradient(135deg, #700035,#c8005f) !important;
    color: #ffffff !important;
    border-color: transparent !important;
}
.wp-block-kadence-header .kt-tabs-title-list li#tab-marketingdigital.kt-tab-title-active a.kt-tab-title,
.wp-block-kadence-header .kt-tabs-content-wrap div.kt-tabs-accordion-title-3.kt-tab-title-active a.kt-tab-title {
    background: linear-gradient(135deg, #c8005f,#700035) !important;
    border-color: transparent !important;
    color: #ffffff !important;
}

/* --- 4. Diseño Gráfico (Tab 4) --- */
.wp-block-kadence-header .kt-tabs-title-list li#tab-diseogrfico a.kt-tab-title,
.wp-block-kadence-header .kt-tabs-content-wrap div.kt-tabs-accordion-title-4 a.kt-tab-title {
    background: transparent !important;
    color: #ff441f !important;
    transition: background 0.3s ease, color 0.3s ease;
    border-color: #ff441f !important;
}
.wp-block-kadence-header .kt-tabs-title-list li#tab-diseogrfico:hover a.kt-tab-title,
.wp-block-kadence-header .kt-tabs-content-wrap div.kt-tabs-accordion-title-4:hover a.kt-tab-title {
    background: linear-gradient(135deg, #d22300, #ff441f) !important;
    color: #ffffff !important;
    border-color: transparent !important; /* Ajusté a transparente por consistencia */
}
.wp-block-kadence-header .kt-tabs-title-list li#tab-diseogrfico.kt-tab-title-active a.kt-tab-title,
.wp-block-kadence-header .kt-tabs-content-wrap div.kt-tabs-accordion-title-4.kt-tab-title-active a.kt-tab-title {
    background: linear-gradient(135deg, #ff441f, #d22300) !important;
    border-color: transparent !important;
    color: #ffffff !important;
}

/* --- 5. Moodle (Tab 5) --- */
.wp-block-kadence-header .kt-tabs-title-list li#tab-moodle a.kt-tab-title,
.wp-block-kadence-header .kt-tabs-content-wrap div.kt-tabs-accordion-title-5 a.kt-tab-title {
    background-color: transparent !important;
    color: #f98012 !important;
    transition: background-color 0.3s ease;
    border-color: #f98012 !important;
}
.wp-block-kadence-header .kt-tabs-title-list li#tab-moodle:hover a.kt-tab-title,
.wp-block-kadence-header .kt-tabs-content-wrap div.kt-tabs-accordion-title-5:hover a.kt-tab-title {
    background: linear-gradient(135deg, #cc6505,#f98012) !important;
    color: #ffffff !important;
    border-color: transparent !important;
}
.wp-block-kadence-header .kt-tabs-title-list li#tab-moodle.kt-tab-title-active a.kt-tab-title,
.wp-block-kadence-header .kt-tabs-content-wrap div.kt-tabs-accordion-title-5.kt-tab-title-active a.kt-tab-title {
    background: linear-gradient(135deg, #f98012,#cc6505) !important;
    border-color: transparent !important;
    color: #ffffff !important;
}

/* --- 6. Plataforma Educativa (Tab 6) --- */
.wp-block-kadence-header .kt-tabs-title-list li#tab-plataformaeducativa a.kt-tab-title,
.wp-block-kadence-header .kt-tabs-content-wrap div.kt-tabs-accordion-title-6 a.kt-tab-title {
    background-color: transparent !important;
    color: #d40000 !important;
    transition: background-color 0.3s ease;
    border-color: #d40000 !important;
}
.wp-block-kadence-header .kt-tabs-title-list li#tab-plataformaeducativa:hover a.kt-tab-title,
.wp-block-kadence-header .kt-tabs-content-wrap div.kt-tabs-accordion-title-6:hover a.kt-tab-title {
    background: linear-gradient(135deg, #880000,#d40000) !important;
    color: #ffffff !important;
    border-color: transparent !important;
}
.wp-block-kadence-header .kt-tabs-title-list li#tab-plataformaeducativa.kt-tab-title-active a.kt-tab-title,
.wp-block-kadence-header .kt-tabs-content-wrap div.kt-tabs-accordion-title-6.kt-tab-title-active a.kt-tab-title {
    background: linear-gradient(135deg, #d40000,#880000) !important;
    border-color: transparent !important;
    color: #ffffff !important;
}
/* --- 7. CRM (Tab 7) --- */
.wp-block-kadence-header .kt-tabs-title-list li#tab-crm a.kt-tab-title,
.wp-block-kadence-header .kt-tabs-content-wrap div.kt-tabs-accordion-title-6 a.kt-tab-title {
    background-color: transparent !important;
    color: #36a21d !important;
    transition: background-color 0.3s ease;
    border-color: #36a21d !important;
}
.wp-block-kadence-header .kt-tabs-title-list li#tab-crm:hover a.kt-tab-title,
.wp-block-kadence-header .kt-tabs-content-wrap div.kt-tabs-accordion-title-6:hover a.kt-tab-title {
    background: linear-gradient(135deg, #007934,#36a21d) !important;
    color: #ffffff !important;
    border-color: transparent !important;
}
.wp-block-kadence-header .kt-tabs-title-list li#tab-crm.kt-tab-title-active a.kt-tab-title,
.wp-block-kadence-header .kt-tabs-content-wrap div.kt-tabs-accordion-title-6.kt-tab-title-active a.kt-tab-title {
    background: linear-gradient(135deg, #36a21d,#007934) !important;
    border-color: transparent !important;
    color: #ffffff !important;
}
/* 1. Forzar transparencia absoluta en el contenedor maestro */
.wp-block-kadence-header {
    background-color: transparent !important;
    background: transparent !important;
}

/* 2. Efecto Vidrio (Glassmorphism) aplicado a la fila visual y sus transiciones */
.wp-block-kadence-header .wp-block-kadence-header-row {
    background: rgba(255, 255, 255, 1) !important; /* Blanco al 8% para el efecto esmerilado premium */
    backdrop-filter: blur(15px) !important; /* Desenfoque exacto para que se vea elegante */
    -webkit-backdrop-filter: blur(15px) !important; /* Soporte para Apple/Safari */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important; /* Sombra sutil para separar del fondo */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; /* Borde de cristal perimetral */
    border-radius: 16px !important; /* Curvatura estilo cápsula */
    transition: all 0.3s ease-in-out !important; /* Animación fluida al hacer scroll */
}

/* 3. Forzar transparencia SOLO en los contenedores internos para que no tapen el cristal */
.wp-block-kadence-header .kadence-header-row-inner,
.wp-block-kadence-header .wp-block-kadence-header-section {
    background-color: transparent !important;
    background: transparent !important;
}

/* 4. Comportamiento cuando haces scroll (Estado Sticky Flotante) */
.is-sticky .wp-block-kadence-header-row {
    margin-top: 20px !important; /* Despega el header de la parte superior */
    max-width: 95% !important; /* Lo comprime a los lados para dar efecto píldora flotante */
    margin-left: auto !important;
    margin-right: auto !important;
}
/* =========================================
   SISTEMA DE DISEÑO MESAUX - BLOG
========================================= */
.mesaux-articulo {
  --mx-color-primario: #000000; /* Negro/Oscuro Mesaux */
  --mx-color-texto: #374151;
  --mx-color-fondo-caja: #F3F4F6;
  --mx-color-borde: #D1D5DB; /* Oscurecido ligeramente para garantizar visibilidad */
  font-family: inherit;
  display: block;
}

/* Tipografía Base */
.mesaux-articulo h2 { font-size: 2rem; color: var(--mx-color-primario); margin: 2rem 0 1rem; font-weight: 700; line-height: 1.2; }
.mesaux-articulo h3 { font-size: 1.5rem; color: var(--mx-color-primario); margin: 1.5rem 0 0.75rem; font-weight: 600; }
.mesaux-articulo p { font-size: 1.125rem; color: var(--mx-color-texto); line-height: 1.7; margin-bottom: 1.5rem; }

/* Caja de Respuesta Directa (AIO Extract) */
.mesaux-articulo .mx-caja-respuesta {
  background-color: var(--mx-color-fondo-caja);
  border-left: 4px solid var(--mx-color-primario);
  padding: 1.5rem;
  margin-bottom: 2rem;
  border-radius: 0 0.5rem 0.5rem 0;
}
.mesaux-articulo .mx-caja-respuesta p { margin-bottom: 0; font-weight: 500; }

/* Listas con Checkmarks */
.mesaux-articulo ul.mx-lista-check { list-style: none; padding-left: 0; margin-bottom: 2rem; }
.mesaux-articulo ul.mx-lista-check li { position: relative; padding-left: 2.25rem; margin-bottom: 1rem; font-size: 1.125rem; color: var(--mx-color-texto); line-height: 1.6; }
.mesaux-articulo ul.mx-lista-check li::before {
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%23111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>');
  position: absolute; left: 0; top: 0.15rem;
}

/* Tablas Modernas (Versión Forzada con !important) */
.mesaux-articulo .mx-tabla-responsive { 
  overflow-x: auto; 
  margin-bottom: 3rem !important; 
  border-radius: 0.5rem; 
  border: 1px solid var(--mx-color-borde) !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}
.mesaux-articulo table.mx-tabla { 
  width: 100% !important; 
  border-collapse: collapse !important; 
  text-align: left; 
  margin-bottom: 0; 
}
.mesaux-articulo table.mx-tabla th,
.mesaux-articulo table.mx-tabla td { 
  border: 1px solid var(--mx-color-borde) !important; 
  padding: 1.2rem 1rem !important; 
}
.mesaux-articulo table.mx-tabla th { 
  background-color: var(--mx-color-fondo-caja) !important; 
  color: var(--mx-color-primario) !important; 
  font-weight: 700 !important; 
  border-bottom: 2px solid var(--mx-color-primario) !important; 
}
.mesaux-articulo table.mx-tabla td { 
  color: var(--mx-color-texto); 
  font-size: 1.05rem; 
  vertical-align: top !important; 
}
.mesaux-articulo table.mx-tabla tbody tr:nth-child(even) {
  background-color: #F9FAFB !important;
}

/* Imágenes de Ancho Completo (Full-width) */
.mesaux-articulo figure.mx-imagen-full { margin: 2.5rem 0; width: 100%; display: block; }
.mesaux-articulo figure.mx-imagen-full img { width: 100%; height: auto; border-radius: 0.5rem; display: block; object-fit: cover; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }