/* =============================================================================
   CAPA DE CSS BASE — Migración de tema Bridge → Hello Elementor
   Xygeni WordPress · actualizado 2026-08-26
   -----------------------------------------------------------------------------
   Repone el CSS base que aportaba el tema Bridge y que Hello Elementor NO trae.
   Valores MEDIDOS sobre el render real de Bridge (getComputedStyle), no a ojo.
   Validado: con esta capa, páginas como /about/ o /resources/articles/* quedan
   PIXEL A PIXEL como con Bridge (sin editar página por página).

   Dónde pegarlo (elige UNO, ambos independientes del tema):
     · Elementor → Ajustes del sitio → CSS personalizado   (recomendado)
     · WPCode → snippet CSS global
   NO usar Apariencia → Personalizar → CSS adicional (se guarda por tema).
   ============================================================================= */

/* =============================================================================
   XYGENI · Fuentes self-hosted (servidas desde tu dominio, no desde Google)
   Preparado 2026-08-27 · Actualizado 2026-09-07 (fuente base -> Red Hat Text)
   -----------------------------------------------------------------------------
   Fuente base del sitio: Red Hat Text.
   Familias mantenidas (4): Red Hat Text, Saira, Saira Semi Condensed, Saira Condensed.
   Reasignaciones aplicadas (por BD, ver fonts-replace-PROD.sh):
     Red Hat Text/Roboto/Inter/Red Hat Text/Poppins/Red Hat Text -> Red Hat Text
     Saira Semi Condensed -> Saira Semi Condensed · Saira -> Saira

   CÓMO USAR:
   1. Sube los .woff2 (12 ficheros) a:  /wp-content/uploads/fonts/
      (usa exactamente los nombres de los src de abajo).
   2. Pega este CSS en Elementor → Ajustes del sitio → CSS personalizado
      (o en un snippet CSS global de WPCode).
   3. En Elementor → Ajustes del sitio → Tipografía, pon la fuente base = Inter.
   4. Deja "Google Fonts" de Elementor en OFF.
   Los font-family coinciden con los nombres que ya usa Elementor, así que las
   fuentes globales y por-widget seguirán funcionando, pero servidas en local.
   Ruta raíz-relativa (empieza por /) → robusta en Kinsta en cualquier página.
   ============================================================================= */

/* ---------- Red Hat Text (fuente base) ---------- */
@font-face {
  font-family: "Red Hat Text";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/wp-content/uploads/fonts/red-hat-text-v19-latin_latin-ext-regular.woff2") format("woff2");
}

@font-face {
  font-family: "Red Hat Text";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/wp-content/uploads/fonts/red-hat-text-v19-latin_latin-ext-500.woff2") format("woff2");
}

@font-face {
  font-family: "Red Hat Text";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/wp-content/uploads/fonts/red-hat-text-v19-latin_latin-ext-600.woff2") format("woff2");
}

@font-face {
  font-family: "Red Hat Text";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/wp-content/uploads/fonts/red-hat-text-v19-latin_latin-ext-600.woff2") format("woff2");
}

/* ---------- SAIRA ---------- */
@font-face {
  font-family: "Saira";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/wp-content/uploads/fonts/saira-400.woff2") format("woff2");
}

@font-face {
  font-family: "Saira";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/wp-content/uploads/fonts/saira-700.woff2") format("woff2");
}

/* ---------- SAIRA SEMI CONDENSED ---------- */
@font-face {
  font-family: "Saira Semi Condensed";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/wp-content/uploads/fonts/saira-semicondensed-400.woff2") format("woff2");
}

@font-face {
  font-family: "Saira Semi Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/wp-content/uploads/fonts/saira-semicondensed-600.woff2") format("woff2");
}

@font-face {
  font-family: "Saira Semi Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/wp-content/uploads/fonts/saira-semicondensed-700.woff2") format("woff2");
}

/* Saira Semi Condensed NO tiene cursivas en Google Fonts (solo pesos normales).
   Si algún widget pide italic, el navegador la sintetiza desde la regular. */

/* ---------- SAIRA CONDENSED ---------- */
@font-face {
  font-family: "Saira Condensed";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/wp-content/uploads/fonts/saira-condensed-400.woff2") format("woff2");
}

@font-face {
  font-family: "Saira Condensed";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/wp-content/uploads/fonts/saira-condensed-800.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/wp-content/uploads/fonts/jetbrains-mono-v24-latin-regular.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/wp-content/uploads/fonts/jetbrains-mono-v24-latin-700.woff2") format("woff2");
}

/* === Resto de base que daba Bridge ========================================== */

/* ANCHO DE CONTENIDO — Bridge forzaba 1434px; el Kit de Elementor está en el
   default 1140px. Además de fijarlo en Ajustes del sitio → Diseño → Content Width
   = 1434, esta regla lo garantiza para las secciones "boxed" heredadas. */
.elementor-section.elementor-section-boxed > .elementor-container {
  max-width: 1434px;
}

/* Color de texto por defecto (Bridge #818181; Hello #333) */
body {
  color: #818181;
}

/* Listas de contenido (Hello mete 40px de sangría; Bridge menos) */
.elementor-widget-text-editor ul,
.elementor-widget-text-editor ol,
.elementor-widget-html ul,
.elementor-widget-html ol,
.entry-content ul,
.entry-content ol {
  padding-left: 18px;
  margin: 0 0 16px;
}

/* Tablas HTML: sin bordes grises de celda, fuente 14px */
.elementor-widget-text-editor table,
.elementor-widget-html table,
.entry-content table {
  font-size: 14px;
  margin-bottom: 0;
}

.elementor-widget-text-editor table td,
.elementor-widget-text-editor table th,
.elementor-widget-html table td,
.elementor-widget-html table th,
.entry-content table td,
.entry-content table th {
  border: 0 none;
}

code,
kbd,
samp {
  font-family: "JetBrains Mono", monospace;
}

/* ================================================================
   Bridge Custom CSS → filtrado para Hello Elementor
   REVISAR antes de aplicar. Solo reglas que NO usan clases Qode.
   Origen: 144 reglas · descartadas (Qode/Bridge): 109 · candidatas: 35
   La paleta de color de marca NO va aquí: va en Elementor → Colores globales.
   ================================================================ */

body {
  counter-reset: section;
}

.widget #searchform {
  background-color: transparent;
  border-bottom: 1px solid #333;
  position: relative;
}

.widget #searchform:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1px;
  height: 10px;
  background-color: #333;
}

.widget.widget_search form input[type="text"],
.widget.widget_search form input[type="text"]::placeholder {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #ffffff;
}

.widget.widget_search form input[type="text"] {
  padding: 0 10px;
  height: 28px;
}

.widget.widget_search form input[type="submit"] {
  height: 28px;
  line-height: 28px;
  font-size: 12px;
  color: #fff;
}

aside.sidebar .widget.widget_categories h5 {
  margin-bottom: 18px;
}

aside.sidebar .widget.widget_categories ul li {
  padding: 6px 0 7px;
}

aside.sidebar .widget.widget_categories ul li a {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #737373;
}

aside.sidebar .widget.widget_media_image h5 {
  margin-bottom: 33px;
}

aside.sidebar .widget.widget_text h5 {
  margin-bottom: 24px;
}

aside.sidebar .widget.widget_tag_cloud h5 {
  margin-bottom: 22px;
}

.price_in_table {
  text-align: left;
}

.price_in_table .price {
  font-size: 55px;
  font-weight: 500;
  letter-spacing: -0.025em;
}

.price_in_table .value {
  font-size: 30px;
  top: 5px;
}

.price_in_table .mark {
  display: none;
}

.right_side_menu_opened .wrapper,
.right_side_menu_opened footer.uncover {
  left: 0;
}

.comment-form {
  display: flex;
  flex-direction: column;
}

.comment-form .three_columns {
  order: -1;
}

#respond input[type="text"],
#respond input[type="email"],
#respond textarea {
  background-color: transparent;
  border-bottom: 1px solid #333;
  padding: 2px 0;
  margin: 0 0 40px;
  color: #737373;
  font-size: 18px;
  line-height: 28px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0px;
  text-transform: none;
}

#respond textarea {
  height: 150px;
  margin-bottom: 20px;
}

#respond input[type="text"]:focus,
#respond input[type="email"]:focus,
#respond textarea:focus {
  color: #fff;
  border-color: #f57d05;
}

.comment-form .three_columns > .column1,
.comment-form .three_columns > .column2,
.comment-form .three_columns > .column3 {
  width: 100%;
}

.comment-form .three_columns > .column1 > .column_inner,
.comment-form .three_columns > .column2 > .column_inner,
.comment-form .three_columns > .column3 > .column_inner {
  padding: 0;
}

div.comment_form form p.form-submit,
div.comment_holder .comment p.form-submit {
  margin: 22px 0 0;
  text-align: left;
}

div.comment_form {
  margin: 0 0 120px;
}

.title .text_above_title {
  margin-bottom: 0;
}

.title.title_size_small h1 {
  line-height: 1.15em;
}

aside.sidebar .widget.widget_categories {
  margin: 0 0 55px;
}

aside.sidebar .widget.widget_tag_cloud {
  margin: 0 0 53px;
}

aside.sidebar .widget.widget_media_image {
  margin: 0 0 62px;
}

aside.sidebar .widget.widget_text {
  margin: 0 0 64px;
}

/* Clase CSS Optimizada para Conversión */
.button_primary {
  background: linear-gradient(90deg, #ffffff 0%, #e8e8e8 100%) !important;
  border: none !important;
  border-radius: 12px !important;
  color: #000000 !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0.5px !important;
  transition: all 0.3s ease !important;
}

.button_primary:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.1) !important;
  color: #000000 !important;
}

/* Reservar el alto de las miniaturas del blog → elimina el CLS del post destacado */
.elementor-posts .elementor-post__thumbnail {
  aspect-ratio: 700 / 366; /* ratio real de la imagen */
  overflow: hidden;
}

.elementor-posts .elementor-post__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* rellena sin deformar (recorta si hace falta) */
  display: block;
}

/* CORRECTED */
/* Global */
/* THIS IS FOR NEW WEBSITE*/

::selection {
  background: rgba(245, 125, 5, 0.3);
  color: inherit;
}

/* To prevent freezed scroll problems from the Bridge theme smooth scroll default behavior */

html,
body {
  scroll-behavior: auto !important;
}

/* end */

/* To prevent gray color for links and green on hover from Bridge theme */

a,
p a {
  color: #ff7802;
}

a:hover,
p a:hover {
  color: #ff7802;
  text-decoration: underline;
}

/* end */

html,
body {
  scroll-behavior: auto !important;
}

/* end */

.elementor-widget-container p {
  font-family: inherit;
}

.elementor-widget-n-menu .e-n-menu[data-layout="dropdown"] .e-n-menu-toggle[aria-expanded="true"] + .e-n-menu-wrapper {
  background-color: #010326 !important;
}

/*END*/

.gglobe {
  /*background-image: ;*/
  height: 24px !important;
  width: 24px !important;
}

.gsatelites {
  position: relative;
  z-index: 9999999999;
}

/* Price Pricing Page */

.recommended-alert {
  padding-top: 3px !important;
  padding-bottom: 3px !important;
}

.recommended-alert-disabled {
  padding-top: 3px !important;
  padding-bottom: 3px !important;
}

.recommended-alert-disabled::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.5); /* Capa blanca translúcida para efecto "deshabilitado" */
  z-index: 10;
}

.plan-disabled {
  position: relative;
  background-color: rgba(0, 0, 0, 0.1); /* Capa gris translúcida */
  opacity: 0.5; /* Todo el contenedor se ve más claro */
  pointer-events: none; /* Deshabilita todos los eventos dentro del contenedor */
}

.plan-disabledd .plan-button {
  background-color: #007bff; /* Puedes cambiar el color si lo prefieres más claro */
  opacity: 0.5; /* Botón más claro */
  cursor: not-allowed; /* Cursor indica que no se puede interactuar */
}

.plan-disabled::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.5); /* Capa blanca translúcida para efecto "deshabilitado" */
  z-index: 10;
}

.xygeni-pricing .elementor-widget-container .e-n-tabs .e-n-tabs-heading .e-n-tab-title {
  padding-left: 1% !important;
  padding-right: 1% !important;
  padding-top: 1% !important;
  padding-bottom: 1% !important;
}

.compare-plan-line {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.compare-plan-line .e-con-inner {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.compare-line-container {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.compare-line-container-block {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.product-line-plan {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.compare-plan-icon {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.line-func .e-con-inner {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  padding-left: 0px !important;
  padding-right: 0px !important;
}

/* CODE BLOCKS (Elementor Code Highlight) -  global size
--------------------------------------------------------------------*/

.elementor-widget-code-highlight pre[class*="language-"],
.elementor-widget-code-highlight code[class*="language-"] {
  font-size: 14px !important;
}

/* TOC (Table of contents)
--------------------------------------------------------------------*/

.elementor-toc__body .elementor-toc__list-wrapper li + li {
  margin-top: 0 !important;
}

/* POST LIST
--------------------------------------------------------------------*/

.elementor-post__thumbnail__link:hover + .elementor-post__text,
.elementor-post__text a:hover {
  text-decoration: underline !important;
}

.elementor-post__thumbnail__link:hover + .elementor-post__text,
.elementor-post__text a:hover {
  text-decoration: underline !important;
}

.e-loop__load-more {
  margin-bottom: 40px;
}

.e-loop__load-more .elementor-button {
  border-radius: 16px;
  color: #fff !important;
  font-weight: 600;
  letter-spacing: 0;
}

.e-loop__load-more .elementor-button:hover {
  background-color: #d76400 !important;
}

/* CARD */

.xy-post-card {
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 9px;
}

.xy-post-card:hover {
  background-color: #f0f6ff;
}

.xy-post-card__image {
  position: relative;
}

.xy-post-card__badge {
  position: absolute;
  margin: 12px;
  right: 0;
  top: 0;
}

.xy-post-card__badge a {
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 999px;
  padding: 0 1.2em;
  background-color: var(--e-global-color-accent);
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  height: 24px;
  transition:
    bacground-color ease-in-out 0.1s,
    color ease-in-out 0.1s;
}

.xy-post-card__badge a:hover {
  background-color: #fff;
  color: var(--e-global-color-secondary) !important;
  text-decoration: none !important;
}

.xy-post-card__title {
  margin: 4px 0 0 0;
}

.xy-post-card__title .elementor-heading-title {
  font-family: "Saira Semi Condensed", Sans-serif !important;
  font-size: 25px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  font-style: normal !important;
  text-decoration: none !important;
  line-height: 26px !important;
  letter-spacing: -0.3px !important;
  line-height: 1.15 !important;
  color: var(--e-global-color-secondary) !important;
}

.xy-post-card__content {
  height: 100%;
  padding: 0 30px;
}

.xy-post-card__desc {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.xy-post-card__meta {
  border-top: 1px solid #eaeaea !important;
  margin-bottom: 0 !important;
  padding: 15px 30px !important;
}

.xy-post-card__meta .elementor-icon-list-text,
.xy-post-card__reading-time {
  font-size: 13px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  font-style: normal !important;
  text-decoration: none !important;
  line-height: 9px !important;
  letter-spacing: 0px !important;
  word-spacing: 0px !important;
  color: #767676 !important;
  line-height: 1.45 !important;
}

.xy-post-card__author .elementor-icon-list-item a .elementor-icon-list-text {
  display: inline-block;
  max-width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.xy-post-card__author .elementor-icon-list-item a:hover .elementor-icon-list-text,
.xy-post-card__author .elementor-icon-list-item a:focus .elementor-icon-list-text {
  text-decoration: underline !important;
  color: #333 !important;
}

.xy-post-card__author .elementor-icon-list-item a .elementor-icon-list-text,
.xy-post-card__reading-time,
.xy-post-card__divider {
  font-size: 12px !important;
  color: #999 !important;
  text-align: right;
}

.xy-post-card__divider {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 3px;
  height: 3px;
  border-radius: 100%;
  background-color: #aaa;
}

/* POST DETAIL
--------------------------------------------------------------------*/

.blog-content .blog-content__main .e-con-inner {
  gap: 0;
  padding: 0;
}

.blog-content .blog-content__main .elementor-element,
.blog-content .blog-content__main .elementor-element-populated {
  padding: 0 !important;
}

.blog-content code,
.blog-content kbd,
.blog-content samp {
  font-size: 96%;
  line-height: 1;
  opacity: 0.7;
}

.blog-content h2,
.blog-content h3,
.blog-content h4,
.blog-content h5,
.blog-content h6 {
  font-family: "Saira Semi Condensed", sans-serif;
  letter-spacing: -0.03em !important;
}

.blog-content h2 {
  font-size: 30px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  font-style: normal !important;
  text-transform: capitalize;
  line-height: 1.1em !important;
  word-spacing: 0px !important;
  color: black !important;
  text-align: left !important;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

.blog-content h3 {
  font-size: 24px !important;
  text-transform: none !important;
  margin-top: 1.5em !important;
  margin-bottom: 0.5rem !important;
  font-weight: 800 !important;
  line-height: 24px !important;
  color: #473bf0 !important;
}

.blog-content h3 a {
  font-size: 24px !important;
  text-transform: none !important;
  margin-top: 1.5em !important;
  margin-bottom: 0.5rem !important;
  font-weight: 800 !important;
  line-height: 24px !important;
  color: #ff7802 !important;
}

.blog-content h4 {
  font-size: 22px !important;
  text-transform: none !important;
  margin-top: 1.5em !important;
  margin-bottom: 0.5rem !important;
  font-weight: 600 !important;
  line-height: 24px !important;
  color: black !important;
}

.blog-content h4 a {
  font-size: 22px !important;
  color: #ff7802 !important;
}

.blog-content h5 {
  font-size: 20px !important;
  text-transform: none !important;
  margin-top: 0.5rem !important;
  margin-bottom: 1rem !important;
  font-weight: 600 !important;
  line-height: 24px !important;
  color: black !important;
}

.blog-content h5 a {
  font-size: 20px !important;
  color: #ff7802 !important;
}

.blog-content h6 {
  font-size: 22px !important;
  text-transform: none !important;
  margin-top: 0.5rem !important;
  margin-bottom: 1rem !important;
  font-weight: 600 !important;
  line-height: 24px !important;
  color: #473bf0 !important;
}

.blog-content h6 a {
  color: #ff7802 !important;
}

.blog-content p a,
.blog-content ul li a,
.blog-content ol li a,
.blog-content dl a {
  font-weight: 600 !important;
}

.blog-content p,
.blog-content ul li,
.blog-content dt,
.blog-content dd {
  font-size: 17px !important;
  line-height: 1.6 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.blog-content * + p,
.blog-content * + ul,
.blog-content * + ol,
.blog-content * + dl {
  margin-top: 1em !important;
}

.blog-content .blog-content__main *:has(.xyg-tldr-section) + *:not(:has(h2)) {
  margin-top: 1.25em !important;
}

.blog-content h2 + p,
.blog-content h2 + ul,
.blog-content h2 + ol,
.blog-content h2 + dl,
.blog-content h3 + p,
.blog-content h3 + ul,
.blog-content h3 + ol,
.blog-content h3 + dl {
  margin-top: 0 !important;
}

.blog-content dd,
dl,
dt,
li,
ol,
ul {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  font-size: 100% !important;
  vertical-align: baseline !important;
  background: transparent !important;
}

.blog-content ul li {
  /*  display: list-item !important;*/
  text-align: -webkit-match-parent !important;
  list-style-type: disc !important;
}

.blog-content ul {
  margin-left: 5% !important;
}

.blog-content ol li:before {
  content: none !important;
  position: unset !important;
}

.blog-content ol li {
  position: unset !important;
}

.blog-content li + li {
  margin-top: 0.5em !important;
}

.blog-content li + li:has(p) {
  margin-top: 0 !important;
}

/* MEGA MENU
--------------------------------------------------------------------*/

.xy-mega-menu-item-append,
.xy-mega-menu-item-append small {
  display: block;
}

.xy-mega-menu-item-append small {
  font-weight: 400 !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  color: #ddd;
}

.xy-mega-menu .e-n-menu-title-container > span {
  font-weight: 600 !important;
}

.xy-mega-menu .elementor-icon-list-text {
  font-weight: 600 !important;
}

/* SPECIAL BOXES
--------------------------------------------------------------------*/

/* IMAGE OPACITY ON HOVER (LINKS) */

.xy-box--hovered-img:hover,
.xy-box--hovered-img:focus {
  text-decoration: none;
}

.xy-box--hovered-img img {
  opacity: 0.9;
  transition: opacity 0.15s ease-in-out;
}

.xy-box--hovered-img:hover img {
  opacity: 1;
}

/*End Pricing Page*/

ul li {
  list-style: none;
}

/* Desactivar el ::marker */
.elementor-widget-table-of-contents li::marker {
  content: "";
}

.code-element-py {
  width: 38vw !important;
}

.token {
  font-size: 16px !important;
}

.h1-product h1 {
  font-size: 38px !important;
  line-height: 50px !important;
}

.top-banner-alert-section div {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

.coi-blog li {
  display: list-item !important;
  /*text-align: -webkit-match-parent !important;*/
  list-style-type: none !important;
}

.elementskit-navbar-nav > li:hover > a {
  color: #ff7802 !important;
  /*  background-color: blue !important; */
  font-weight: 900 !important;
  text-underline-offset: 8px !important;
  text-decoration: underline !important;
}

.latestpost img {
  height: 250px !important;
}

.latestpost .elementskit-single-meta {
  background-color: black !important;
}

.menu-button-login a {
  padding-left: 20px !important;
  padding-right: 20px !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  font-size: 14px !important;
}

.menu-button-book a {
  padding-left: 20px !important;
  padding-right: 20px !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  font-size: 14px !important;
}

/* --- Qi Blocks · info-box (replicated so the plugin can be removed) ---
   Only used on the SSCS glossary (post type: docs). Base copied from
   qi-blocks/assets/dist/info-box.css + brand title colour
   (65/66 boxes use Xygeni orange). */

.qi-block-info-box {
  background-color: #f9f9f9;
  display: flex;
  flex-direction: column;
  padding: 30px;
  position: relative;
}

.qi-block-info-box .qodef-m-subtitle {
  margin: 0 0 0.5em;
}

.qi-block-info-box .qodef-m-title {
  margin: 0 0 0.5em;
  color: #ff7802;
}

/* orange title (brand) */

.qi-block-info-box .qodef-m-title a {
  color: inherit;
  display: block;
}

.qi-block-info-box .qodef-m-content {
  position: relative;
}

.qi-block-info-box .qodef-m-content .qodef-m-text {
  margin: 0 0 0.5em;
}

/* XYGENI · Blog category select (paste into site-custom.css, near the .xybs-* search styles)
----------------------------------------------------------------------------------------------------*/

.xy-catnav {
  display: flex;
  align-items: center;
  min-width: 220px;
}
.xy-catnav__label {
  font-size: 14px;
  font-weight: 600;
  color: #4a4a4a;
}
.xy-catnav__select {
  appearance: none;
  -webkit-appearance: none;
  background-color: #fff;
  /* custom chevron (inline SVG, no external asset) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23010024' d='M6 8 0 2 1.4.6 6 5.2 10.6.6 12 2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  border: 1.5px solid #ccc;
  border-radius: 14px;
  padding: 12px 16px;
  height: 66px;
  font-size: 15px;
  color: #1a1a1a;
  cursor: pointer;
  min-width: 220px;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.xy-catnav__select:hover {
  border-color: #ff7802;
}
.xy-catnav__select:focus {
  outline: none;
  border-color: #ff7802;
  box-shadow: 0 0 0 3px rgba(255, 120, 2, 0.18);
}

/* CSS FOR POSTS SEARCH */

.xybs-wrap {
  position: relative;
  margin: 0 0 8px 0;
  font-family: inherit;
  text-align: left;
}

.xybs-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1.5px solid #ccc;
  border-radius: 14px;
  padding: 12px 16px;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}

.xybs-box:focus-within {
  border-color: #ff7802;
  box-shadow: 0 0 0 4px rgba(255, 120, 2, 0.12);
}

.xybs-ico {
  color: #9799c0;
  flex: 0 0 auto;
}

.xybs-box:focus-within .xybs-ico {
  color: #ff7802;
}

.xybs-input {
  flex: 1 1 auto;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 16px;
  color: #0d0f2b;
  border: none;
  min-width: 0;
  padding: 0;
  line-height: 1.4;
  border: none !important;
}

.xybs-input:focus,
.xybs-input:focus-visible {
  border: none !important;
  outline: none !important;
}

.xybs-input::placeholder {
  color: #9799c0;
}

.xybs-input::-webkit-search-cancel-button {
  display: none;
}

.xybs-clear {
  display: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: #9799c0;
  cursor: pointer;
  padding: 0;
  flex: 0 0 auto;
}

/* El aspa es un SVG (centrado perfecto, sin depender de métricas de fuente). */
.xybs-clear svg {
  width: 11px;
  height: 11px;
  display: block;
}

.xybs-clear:hover {
  color: #030a8c;
  background-color: #f4f4f4 !important;
}

.xybs-wrap.xybs-filled .xybs-clear {
  display: inline-flex;
}

.xybs-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 60;
  background: #fff;
  border: 1px solid #ececf4;
  border-radius: 14px;
  box-shadow: 0 18px 50px -12px rgba(3, 10, 140, 0.28);
  overflow: hidden;
}

.xybs-list {
  list-style: none;
  margin: 0;
  padding: 6px;
  max-height: 60vh;
  overflow-y: auto;
}

.xybs-item {
  margin: 0;
}

.xybs-item > a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: #0d0f2b;
  font-size: 15px;
  line-height: 1.35;
}

.xybs-item > a:hover,
.xybs-item.is-active > a {
  background: #f4f5ff;
  color: #030a8c;
}

.xybs-item .xybs-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff7802;
  opacity: 0.85;
}

.xybs-state {
  padding: 16px 14px;
  color: #6b6d90;
  font-size: 14px;
  text-align: center;
}

.xybs-all {
  display: block;
  padding: 13px 16px;
  border-top: 1px solid #ececf4;
  background: #fbfbff;
  color: #030a8c;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  text-align: center;
}

.xybs-all:hover {
  background: #f4f5ff;
  color: #ff7802;
}

.xybs-spin {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid #e4e4ee;
  border-top-color: #ff7802;
  border-radius: 50%;
  animation: xybs-rot 0.6s linear infinite;
  vertical-align: -3px;
  margin-right: 8px;
}

/* TEXT BLOCK LAST-UNIQUE PARAGRAPH 
---------------------------------------------------*/

.elementor-widget-text-editor p:last-child {
  margin: 0;
}

/* ===========================================
   XY DARK THEME  (centralizado en el child theme)
   Todo cuelga de .xy-dark-theme -> se asigna por página
   con el plugin "Custom Body Class" (campo = xy-dark-theme).
   Cambios vs. el CSS por-página original:
     · Selectores prefijados con .xy-dark-theme (aísla a páginas oscuras).
     · !important eliminado SOLO en 'margin' -> los márgenes por-widget
       de Elementor vuelven a mandar. Se conserva en fondo/color/gradiente.
   Fuente Saira Semi Condensed: se carga desde functions.php del child
   theme (wp_enqueue_style), NO con @import.
   =========================================== */

.xy-dark-theme .transform-up-20 {
  transform: translateY(-20px);
}

.xy-dark-theme .transform-up-30 {
  transform: translateY(-30px);
}

.xy-dark-theme .transform-up-40 {
  transform: translateY(-40px);
}

.xy-dark-theme .transform-up-50 {
  transform: translateY(-50px);
}

.xy-dark-theme .transform-up-60 {
  transform: translateY(-60px);
}

/* ===========================================
   VARIABLES CSS PARA REUTILIZACIÓN
   =========================================== */
.xy-dark-theme {
  --primary: #ff7802;
  --warning: #fab267;
  --success: #28ca42;
  --accent: #00d4ff;
  --text-secondary: #888888;
  --border-subtle: rgba(255, 255, 255, 0.1);
  --bg-darker: #000214;
  --blue-primary: #60a5fa;
  --blue-secondary: #0099ff;
  --blue-dark: #0066ff;
  --orange-primary: #f77f00;
  --orange-secondary: #e17055;
}

/* ===========================================
   BODY Y ESTILOS BASE
   =========================================== */
body.xy-dark-theme {
  background: #000326 !important;
  margin: 0;
  padding: 0;
}

/* ===========================================
   HERO SECTION Y ELEMENTOS PRINCIPALES
   =========================================== */
.xy-dark-theme .hero_text p {
  font-size: calc(2.7vw + 0.8rem) !important;
  line-height: 1.1em !important;
}

.xy-dark-theme .hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 6rem 2rem 4rem;
  overflow: hidden;
}

.xy-dark-theme .mesh-gradient {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  opacity: 0.4;
  background:
    radial-gradient(circle at 20% 50%, rgba(255, 120, 2, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(71, 59, 240, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(0, 212, 255, 0.05) 0%, transparent 50%);
  animation: drift 25s ease-in-out infinite;
}

@keyframes drift {
  0%,
  100% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.1);
  }
}

.xy-dark-theme .container {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  position: relative;
  z-index: 1;
}

/* ===========================================
   TÍTULOS Y TEXTO CON GRADIENTES
   =========================================== */

/* H-TITLE - Título principal con máxima especificidad */
body.xy-dark-theme .h-title,
body.xy-dark-theme h1.h-title,
body.xy-dark-theme h2.h-title,
body.xy-dark-theme h3.h-title,
body.xy-dark-theme .elementor-heading-title.h-title,
body.xy-dark-theme .elementor-widget-heading .h-title,
body.xy-dark-theme .entry-content .h-title,
body.xy-dark-theme .post-content .h-title,
body.xy-dark-theme article .h-title,
body.xy-dark-theme .elementor-element .h-title,
.xy-dark-theme .h-title.gradient-text,
.xy-dark-theme .gradient-text.h-title {
  font-family: "Saira Semi Condensed", "Arial Narrow", sans-serif !important;
  font-size: 3.75rem !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  text-align: center !important;
  background: linear-gradient(to right, var(--blue-primary), #ffffff) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  display: block !important;
  position: relative !important;
  z-index: 10 !important;
  text-decoration: none !important;
  text-shadow: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Títulos regulares */
.xy-dark-theme h1 {
  font-size: clamp(3rem, 8vw, 5rem);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
}

/* Clases de gradiente */
.xy-dark-theme .gradient-text {
  background: linear-gradient(135deg, #ffffff 0%, #888888 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.xy-dark-theme .highlight {
  background: linear-gradient(135deg, #473bf0 0%, #00d4ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.xy-dark-theme .highlight2 {
  background: linear-gradient(135deg, var(--orange-primary) 0%, var(--warning) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.xy-dark-theme .subheadline {
  font-size: 1.25rem;
  color: var(--text-secondary);
  max-width: 600px;
  margin-bottom: 3rem;
  line-height: 1.8;
}

/* ===========================================
   BOTONES OPTIMIZADOS
   =========================================== */

/* Base común para todos los botones */
.xy-dark-theme .btn,
.xy-dark-theme .button_primary,
.xy-dark-theme .button_primaryF,
.xy-dark-theme .btn-primary .elementor-button {
  border: none !important;
  border-radius: 12px !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: -0.2px !important;
  transition: all 0.15s ease !important;
  padding: 1rem 2rem !important;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none !important;
  cursor: pointer;
}

/* Botón blanco */
.xy-dark-theme .button_primary,
.xy-dark-theme .btn-primary .elementor-button {
  background: linear-gradient(90deg, #ffffff 0%, #e8e8e8 100%) !important;
  color: #000000 !important;
}

.xy-dark-theme .button_primary:hover,
.xy-dark-theme .btn-primary .elementor-button:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.1) !important;
  color: #000000 !important;
}

/* Botón azul */
.xy-dark-theme .button_primaryF {
  background: linear-gradient(135deg, var(--blue-secondary) 0%, var(--blue-dark) 100%) !important;
  color: #ffffff !important;
}

.xy-dark-theme .button_primaryF:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.1) !important;
  color: #ffffff !important;
}

/* CTA principal con efecto de brillo */
.xy-dark-theme .primary-cta {
  background: var(--primary);
  color: white;
  box-shadow: 0 0 40px rgba(255, 120, 2, 0.3);
}

.xy-dark-theme .primary-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 60px rgba(255, 120, 2, 0.5);
}

.xy-dark-theme .secondary-cta {
  background: rgba(255, 255, 255, 0.05);
  color: white;
  border: 1px solid var(--border-subtle);
}

.xy-dark-theme .secondary-cta:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

.xy-dark-theme .cta-group {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 5rem;
}

/* ===========================================
   EFECTOS DE BRILLO PARA IMÁGENES
   =========================================== */

/* Brillo sutil */
.xy-dark-theme .bright_image_subtlexxxxx {
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.3)) drop-shadow(0 0 12px rgba(255, 255, 255, 0.15));
  transition: all 0.3s ease;
}

/* Brillo sutil - menos brillante */
.xy-dark-theme .bright_image_subtle {
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.15)) drop-shadow(0 0 12px rgba(255, 255, 255, 0.08));
  transition: all 0.3s ease;
}

.xy-dark-theme .bright_image_subtle:hover {
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.4)) drop-shadow(0 0 16px rgba(255, 255, 255, 0.2));
  transform: scale(1.01);
}

/* Brillo muy sutil - NUEVA CLASE con brillo más débil */
.xy-dark-theme .bright_image_very_subtle {
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.15)) drop-shadow(0 0 6px rgba(255, 255, 255, 0.08));
  transition: all 0.3s ease;
}

.xy-dark-theme .bright_image_very_subtle:hover {
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.2)) drop-shadow(0 0 8px rgba(255, 255, 255, 0.1));
  transform: scale(1.005);
}

/* Brillo medio */
.xy-dark-theme .bright_image_medium {
  filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0.35)) drop-shadow(0 0 14px rgba(255, 255, 255, 0.18))
    drop-shadow(0 0 20px rgba(255, 255, 255, 0.08));
  transition: all 0.3s ease;
}

.xy-dark-theme .bright_image_medium:hover {
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.45)) drop-shadow(0 0 18px rgba(255, 255, 255, 0.25))
    drop-shadow(0 0 26px rgba(255, 255, 255, 0.12));
  transform: scale(1.015);
}

/* ===========================================
   BADGES Y ELEMENTOS MENORES
   =========================================== */

.xy-dark-theme .badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(255, 120, 2, 0.1);
  border: 1px solid rgba(255, 120, 2, 0.2);
  border-radius: 100px;
  font-size: 0.875rem;
  color: var(--primary);
  margin-bottom: 2rem;
}

.xy-dark-theme .pulse {
  width: 8px;
  height: 8px;
  background: var(--primary);
  border-radius: 50%;
  animation: pulse 2s ease-out infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 120, 2, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(255, 120, 2, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 120, 2, 0);
  }
}

.xy-dark-theme .time {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

/* ===========================================
   PRODUCT PREVIEW Y TERMINAL
   =========================================== */

.xy-dark-theme .product-preview {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  backdrop-filter: blur(40px);
  overflow: hidden;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.xy-dark-theme .terminal-header {
  background: rgba(255, 255, 255, 0.05);
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 1px solid var(--border-subtle);
}

.xy-dark-theme .terminal-header span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
}

.xy-dark-theme .terminal-header span:nth-child(1) {
  background: #ff5f57;
}

.xy-dark-theme .terminal-header span:nth-child(2) {
  background: #ffbd2e;
}

.xy-dark-theme .terminal-header span:nth-child(3) {
  background: var(--success);
}

.xy-dark-theme .terminal-header code {
  margin-left: auto;
  font-family: "JetBrains Mono", Monaco, monospace;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.xy-dark-theme .terminal-content {
  padding: 2rem;
  font-family: "JetBrains Mono", Monaco, monospace;
  font-size: 0.875rem;
  line-height: 1.6;
  min-height: 400px;
}

/* Animaciones del terminal */
.xy-dark-theme .scan-output {
  animation: typewriter 2s steps(30) forwards;
}

@keyframes typewriter {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

.xy-dark-theme .scan-line {
  margin: 0.5rem 0;
  opacity: 0;
  animation: fadeIn 0.5s forwards;
}

.xy-dark-theme .scan-line:nth-child(1) {
  animation-delay: 0.5s;
}

.xy-dark-theme .scan-line:nth-child(2) {
  animation-delay: 1s;
}

.xy-dark-theme .scan-line:nth-child(3) {
  animation-delay: 1.5s;
}

.xy-dark-theme .scan-line:nth-child(4) {
  animation-delay: 2s;
}

.xy-dark-theme .scan-line:nth-child(5) {
  animation-delay: 2.5s;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

/* Colores de estado */
.xy-dark-theme .success {
  color: var(--success);
}

.xy-dark-theme .warning {
  color: var(--warning);
}

.xy-dark-theme .error {
  color: #ef4444;
}

.xy-dark-theme .info {
  color: var(--accent);
}

/* ===========================================
   FEATURES SECTION
   =========================================== */

.xy-dark-theme .features {
  padding: 6rem 2rem;
  background: var(--bg-darker);
}

.xy-dark-theme .section-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 4rem;
}

.xy-dark-theme .section-label {
  color: var(--primary);
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}

.xy-dark-theme .section-title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  margin-bottom: 1rem;
}

.xy-dark-theme .feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

.xy-dark-theme .feature-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 2rem;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}

.xy-dark-theme .feature-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}

.xy-dark-theme .feature-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 120, 2, 0.3);
  transform: translateY(-2px);
}

.xy-dark-theme .feature-card:hover::before {
  opacity: 1;
}

.xy-dark-theme .feature-icon {
  width: 48px;
  height: 48px;
  background: rgba(255, 120, 2, 0.1);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
}

.xy-dark-theme .feature-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.xy-dark-theme .feature-description {
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ===========================================
   TARJETA DE PREVENCIÓN DE CÓDIGO MALICIOSO
   =========================================== */

/* Tarjeta principal */
.xy-dark-theme .malicious-code-card {
  background: rgba(255, 255, 255, 0.03) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 20px !important;
  padding: 32px !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.xy-dark-theme .malicious-code-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.05) 0%, transparent 50%) !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
  pointer-events: none !important;
}

.xy-dark-theme .malicious-code-card:hover {
  transform: translateY(-8px) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;
  background: rgba(239, 68, 68, 0.02) !important;
}

.xy-dark-theme .malicious-code-card:hover::before {
  opacity: 1 !important;
}

/* Icono de seguridad */
.xy-dark-theme .security-icon {
  width: 64px !important;
  height: 64px !important;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  border-radius: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 24px !important;
  transition: transform 0.3s ease !important;
}

.xy-dark-theme .malicious-code-card:hover .security-icon {
  transform: scale(1.1) rotate(5deg) !important;
}

.xy-dark-theme .security-icon i,
.xy-dark-theme .security-icon svg {
  font-size: 32px !important;
  width: 32px !important;
  height: 32px !important;
  color: white !important;
  fill: currentColor !important;
}

/* Títulos con degradados específicos */
.xy-dark-theme .security-title,
.xy-dark-theme .elementor-heading-title.security-title {
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  text-align: left !important;
  background: linear-gradient(to right, var(--blue-primary), #ffffff) !important;
  -webkit-background-clip: text !important;
  -moz-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

.xy-dark-theme .security-title2,
.xy-dark-theme .elementor-heading-title.security-title2 {
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  text-align: left !important;
  background: linear-gradient(to right, #cbd5e1, #a5b4fc) !important;
  -webkit-background-clip: text !important;
  -moz-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* Descripción de seguridad */
.xy-dark-theme .security-description-text,
.xy-dark-theme .elementor-text-editor .security-description-text {
  font-size: 19px !important;
  color: #d5d5d5 !important;
  line-height: 1.1em !important;
  text-align: left !important;
  font-weight: normal !important;
}

/* Lista de características de seguridad */
.xy-dark-theme .security-features {
  list-style: none !important;
  padding: 0 !important;
  margin: 0;
}

.xy-dark-theme .security-features li {
  display: flex !important;
  align-items: center !important;
  font-size: 14px !important;
  color: rgba(255, 255, 255, 0.8) !important;
  margin-bottom: 12px;
  padding: 0 !important;
  list-style: none !important;
}

.xy-dark-theme .security-features li::before {
  content: "🛡️" !important;
  margin-right: 12px !important;
  font-size: 16px !important;
}

.xy-dark-theme .security-features li.with-check::before {
  content: "✓" !important;
  color: var(--primary) !important;
  font-weight: bold !important;
  margin-right: 12px !important;
  font-size: 16px !important;
}

/* Resetear estilos de Elementor para la tarjeta */
.xy-dark-theme .malicious-code-card * {
  box-sizing: border-box !important;
}

.xy-dark-theme .malicious-code-card .elementor-widget-container {
  margin: 0;
  padding: 0 !important;
}

/* ===========================================
   RESPONSIVE DESIGN
   =========================================== */

/* Tablets */
@media (max-width: 1024px) {
  body.xy-dark-theme .h-title,
  body.xy-dark-theme .elementor-heading-title.h-title {
    font-size: 3rem !important;
    margin-bottom: 1.25rem;
  }

  .xy-dark-theme .bright_image_subtle,
  .xy-dark-theme .bright_image_very_subtle,
  .xy-dark-theme .bright_image_medium {
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.25)) drop-shadow(0 0 8px rgba(255, 255, 255, 0.1));
  }
}

/* Móviles */
@media (max-width: 768px) {
  .xy-dark-theme .nav-menu {
    display: none;
  }

  .xy-dark-theme h1 {
    font-size: 2.5rem;
  }

  body.xy-dark-theme .h-title,
  body.xy-dark-theme .elementor-heading-title.h-title {
    font-size: 2.5rem !important;
    margin-bottom: 1rem;
    line-height: 1.2 !important;
  }

  .xy-dark-theme .feature-grid {
    grid-template-columns: 1fr;
  }

  .xy-dark-theme .bright_image_subtle:hover,
  .xy-dark-theme .bright_image_very_subtle:hover,
  .xy-dark-theme .bright_image_medium:hover {
    transform: scale(1.005);
  }

  .xy-dark-theme .cta-group {
    flex-direction: column;
    align-items: center;
  }

  .xy-dark-theme .btn,
  .xy-dark-theme .button_primary,
  .xy-dark-theme .button_primaryF {
    width: 100%;
    max-width: 300px;
    justify-content: center;
  }
}

/* Móviles pequeños */
@media (max-width: 480px) {
  body.xy-dark-theme .h-title,
  body.xy-dark-theme .elementor-heading-title.h-title {
    font-size: 2rem !important;
    margin-bottom: 0.5rem;
    line-height: 1.3 !important;
  }

  .xy-dark-theme .hero {
    padding: 4rem 1rem 2rem;
  }

  .xy-dark-theme .features {
    padding: 4rem 1rem;
  }

  /* Responsive para tarjeta de seguridad */
  .xy-dark-theme .malicious-code-card {
    padding: 24px !important;
  }

  .xy-dark-theme .security-title,
  .xy-dark-theme .security-title2 {
    font-size: 20px !important;
  }

  .xy-dark-theme .security-description-text {
    font-size: 17px !important;
  }

  .xy-dark-theme .security-icon {
    width: 56px !important;
    height: 56px !important;
  }

  .xy-dark-theme .security-icon i,
  .xy-dark-theme .security-icon svg {
    font-size: 28px !important;
    width: 28px !important;
    height: 28px !important;
  }
}

@keyframes xybs-rot {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 600px) {
  .xybs-wrap {
    margin-left: 16px;
    margin-right: 16px;
  }

  .xybs-input {
    font-size: 16px;
  }
}

@media screen and (min-width: 1911px) {
}

@media screen and (max-width: 1910px) and (min-width: 1025px) {
  .use-case-column-right {
    margin-right: 40px !important;
    width: 42% !important;
  }

  .use-case-column-left {
    margin-left: 20px !important;
    width: 52% !important;
  }

  .xyn-platform-sqr {
    margin-top: 30px !important;
    padding-top: 10px !important;
    padding-bottom: 1px !important;
  }

  .xyn-security-platform-section {
    padding-right: 6% !important;
    padding-left: 6% !important;
  }

  .xyn-title-1 h1 {
    font-size: 46px !important;
    line-height: 52px !important;
  }

  .xyn-title-2 h2 {
    font-size: 46px !important;
    line-height: 50px !important;
  }

  .platform_block_area h2 {
    font-size: 25px !important;
    line-height: 30px !important;
  }

  .xyn-paragraph-h1 p {
    line-height: 24px !important;
  }

  /* banner webinar */

  .webinar-banner {
    padding-left: 100px !important;
    padding-right: 100px !important;
  }

  .banner-webinar-col-izq div {
    margin-right: 20px !important;
  }

  /*use cases*/
  .xyn-usecase-title div {
    padding-top: 10px !important;
  }

  .slide-book-demo {
    margin-top: 20px !important;
  }

  /* Banner CTA */

  .banner-div {
    margin-left: 50px !important;
    margin-right: 50px !important;
  }

  .banner-tittle h2 {
    font-size: 24px !important;
  }

  .banner-desc h2 {
    font-size: 18px !important;
    margin-top: 20px !important;
    line-height: 24px !important;
  }

  .xyn-security-platform-section {
    /*max-width:800px !important;*/
  }

  /* Platform Overivew Section */

  .panel {
    padding-left: 50px;
    padding-right: 50px;
  }

  .xyg-overivew-function-inner-1 {
    padding-top: 50px !important;
  }

  .platform-overview-icon-image img {
    max-width: 90px;
  }

  .platform_overview_area h2 {
    font-size: 25px !important;
    line-height: 30px !important;
  }

  .platform_overview_subtitle-1 h2 {
    font-size: 30px !important;
    line-height: 40px !important;
  }

  .xyn-paragraph-h1 {
    font-size: 16px !important;
  }

  .xyn-paragraph-2 {
    font-size: 15px !important;
    line-height: 24px !important;
    margin-top: 0px !important;
  }

  .xyg_screen-h1 {
    max-width: 790px !important;
  }

  /*images of screens */
  .xyg_screen-overview {
    max-width: 510px !important;
  }

  .xyg_screen-platform-l {
    max-width: 480px !important;
    margin-left: 60px !important;
  }

  .xyg_screen-platform-r {
    max-width: 480px !important;
  }

  .xyg_screen-overview-left {
    max-width: 510px !important;
    margin-left: 260px;
  }

  .xyg_screen-overview-2 {
    max-width: 510px !important;
  }

  .xyn-buttons-section {
    padding-right: 6% !important;
    padding-left: 6% !important;
  }

  .buttons1 a {
    font-size: 15px !important;
  }

  .buttons2 a {
    font-size: 15px !important;
  }

  .buttons3 a {
    font-size: 15px !important;
  }

  .buttons4 a {
    font-size: 15px !important;
  }

  .xyn-platform-overview-icon {
    max-width: 40px;
    margin-top: 5px;
    margin-right: 15px;
  }
}

@media screen and (max-width: 1439px) {
  .xyg_screen-platform-l {
    max-width: 360px !important;
    margin-left: -10px !important;
  }

  .xyg_screen-platform-r {
    max-width: 360px !important;
    /*  margin-right: 10px !important;
    margin-left: -50px !important;
*/
  }

  .webinar-banner {
    padding-left: 50px !important;
    padding-right: 50px !important;
  }

  .banner-webinar-col-izq div {
    margin-right: 20px !important;
  }

  .banner-webinar-title h2 {
    font-size: 24px !important;
    line-height: 28px !important;
  }

  .banner-webinar-desc h2 {
    font-size: 20px !important;
    line-height: 24px !important;
  }

  .banner-webinar-bullets li {
    font-size: 14px !important;
    line-height: 18px !important;
  }
}

@media screen and (max-width: 1023px) {
  /* Price Pricing Page */

  /* End Pricing Page */
  .panel {
    padding-left: 20px;
    padding-right: 20px;
  }

  .buttons4 a {
    font-size: 16px !important;
  }

  /* Banner CTA*/

  .banner-div {
    margin-left: 20px !important;
    margin-right: 20px !important;
  }

  .banner-button a {
    width: 100% !important;
    text-align: center !important;
  }

  /* Webinar Banner */

  .webinar-banner {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .banner-webinar-col-izq div {
    margin-right: 0px !important;
  }

  .menu-column-c {
    width: 65% !important;
  }

  .code-element-py {
    width: 85vw !important;
  }

  .token {
    font-size: 14px !important;
  }
}

@media screen and (min-width: 1920px) {
  .xyn-title-1 {
    font-size: 52px !important;
    line-height: 40px !important;
  }

  .platform_block_area h2 {
    font-size: 30px !important;
    line-height: 40px !important;
  }

  .platform_overview_area h2 {
    font-size: 30px !important;
    line-height: 40px !important;
  }

  .platform_overview_subtitle-1 h2 {
    font-size: 30px !important;
    line-height: 40px !important;
  }

  .xyn-paragraph-h1 {
    font-size: 18px !important;
  }

  .xyn-paragraph-2 {
    font-size: 16px !important;
    line-height: 24px !important;
  }

  .xyg-overivew-function-inner-1 {
    padding-top: 80px !important;
  }

  .xyg_screen-h1 {
    max-width: 790px !important;
  }

  .xyg_screen-overview {
    max-width: 790px !important;
  }

  .xyg_screen-platform-l {
    max-width: 790px !important;
    margin-left: -150px !important;
  }

  .xyg_screen-platform-r {
    max-width: 790px !important;
  }

  .xyg_screen-overview-left {
    max-width: 790px !important;
  }

  .xyg_screen-overview-2 {
    max-width: 790px !important;
  }

  /* Platform Overivew Section */

  .xyn-platform-overview-icon {
    max-width: 43px;
    margin-top: 9px;
    margin-right: 16px;
  }
}

@media screen and (min-width: 1024px) and (max-width: 1550px) {
  .elementor-25 .elementor-element.elementor-element-d10ade5 .elementskit-navbar-nav > li > a {
    font-size: 16px !important;
  }

  .menu-column-l {
    width: 10% !important;
  }

  .menu-column-c {
    width: 72% !important;
    margin-left: -020px;
  }

  .menu-column-c a {
    font-size: 14px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .menu-column-r {
    width: 25% !important;
  }

  .menu-button-login a {
    padding-left: 18px !important;
    padding-right: 18px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    font-size: 12px !important;
  }

  .menu-button-book a {
    padding-left: 18px !important;
    padding-right: 18px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    font-size: 12px !important;
  }

  banner-alert-column-r {
    margin-right: 0px !important;
  }
}

@media screen and (min-width: 1024px) and (max-width: 1195px) {
  .elementor-25 .elementor-element.elementor-element-d10ade5 .elementskit-navbar-nav > li > a {
    font-size: 14px !important;
  }

  .menu-column-l {
    width: 10% !important;
  }

  .menu-column-c {
    width: 70% !important;
    margin-left: -020px;
  }

  .menu-column-c a {
    font-size: 14px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .menu-column-r {
    width: 28% !important;
  }
}

/* Clase button_primary solo para dispositivos móviles */
@media (max-width: 768px) {
  .button_primary {
    width: 250px !important;
    padding-top: 10px !important;
    padding-bottom: 13px !important;
  }
}

/* O si prefieres un breakpoint más específico para móviles pequeños: */
@media (max-width: 480px) {
  .button_primary {
    width: 250px !important;
    padding-top: 10px !important;
    padding-bottom: 13px !important;
  }
}

/* O para un rango específico de móviles (recomendado): */
@media (max-width: 767px) {
  .button_primary {
    width: 250px !important;
    padding-top: 10px !important;
    padding-bottom: 13px !important;
  }
}