.op-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.op-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 40px;
  border: 1px solid #2f4f920d;
  background-color: #2f4f920d;
  color: var(--e-global-color-primary);
  font-family: var(--e-global-typography-secondary-font-family), sans-serif;
  font-size: 14px;
  line-height: 1;
  font-weight: 600;
}
.op-pill i {
  color: var(--e-global-color-primary);
  font-size: 13px;
}

.op-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.op-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 40px;
  border: 1px solid #2f4f920d;
  background-color: #2f4f920d;
  color: var(--e-global-color-primary);
  font-family: var(--e-global-typography-secondary-font-family), sans-serif;
  font-size: 14px;
  line-height: 1;
  font-weight: 600;
}
.op-pill i {
  color: var(--e-global-color-primary);
  font-size: 13px;
}

/* Alcance: solo el cuerpo del post */
.elementor-widget-theme-post-content h2,
.elementor-widget-theme-post-content h3 {
  color: var(--e-global-color-primary);
  font-family: var(--e-global-typography-primary-font-family), sans-serif;
}

/* Blockquote con borde azul del diseño */
.elementor-widget-theme-post-content blockquote {
  background: var(--e-global-color-surface-alt, #f2f5fa);
  border-left: 4px solid var(--e-global-color-accent);
  border-radius: 8px;
  padding: 18px 24px;
  font-style: italic;
  margin: 24px 0;
}

/* Listas con check */
.elementor-widget-theme-post-content ul {
  list-style: none;
  padding-left: 0;
}

.elementor-widget-theme-post-content ul li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 12px;
}

.elementor-widget-theme-post-content ul li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.6em; /* centra el círculo con la primera línea */
  transform: translateY(-50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: var(--e-global-color-secondary); /* hereda el Kit */
}

/* Tabla de frecuencia */
.elementor-widget-theme-post-content table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--e-global-color-border);
  border-radius: 12px;
  overflow: hidden;
}
.elementor-widget-theme-post-content tr:nth-child(even) {
  background: var(--e-global-color-surface-alt, #f2f5fa);
}
.elementor-widget-theme-post-content td {
  padding: 12px 16px;
}

/* ==========================================================================
   Systems & Services - clases reutilizables para Elementor
   Se asignan en Advanced > CSS Classes de cada widget.
   ========================================================================== */

/* .ss-logo - Logo del concepto (PNG oscuro) con mezcla "screen", igual que el
   demo (.brand img). El widget Image no tiene control de blend mode.
   Uso: logo del header, del panel movil y del footer. */
.ss-logo img {
  mix-blend-mode: screen;
}

/* .ss-arrow - Flecha de los botones (icono SVG). En el demo es un glifo de 16px
   que fija la altura de linea en 24px (boton de 58px de alto). El widget Button
   no tiene control de tamano de icono (queda en 1em).
   Uso: botones del hero, destacado y CTA. */
.ss-arrow .elementor-button-icon {
  display: inline-flex;
  align-items: center;
  height: 24px;
}
.ss-arrow .elementor-button-icon svg {
  width: 13px;
  height: 13px;
}
/* Evita el espacio de linea base bajo el boton (inline-block) dentro del widget. */
.ss-arrow .elementor-button {
  vertical-align: top;
  line-height: 24px !important;
}

/* .ss-hero - Overlay de los heros (demo: .hero-shade). El container conserva su
   overlay nativo (2 paradas) como respaldo editable; esta clase lo reemplaza por
   el del demo: 3 paradas horizontales + degradado vertical inferior.
   Especificidad .elementor .elementor-element.e-con para ganarle al CSS del
   control nativo sin !important. Aplica tambien con video de fondo.
   Uso: CSS Classes del container hero (home e internas). */
.elementor .elementor-element.e-con.ss-hero::before,
.elementor
  .elementor-element.e-con.ss-hero
  > .elementor-background-video-container::before {
  background-image:
    linear-gradient(90deg, #000000e0 0%, #00000094 42%, #00000014 74%),
    linear-gradient(#0000 55%, #00000094);
}
@media (max-width: 1024px) {
  .elementor .elementor-element.e-con.ss-hero::before,
  .elementor
    .elementor-element.e-con.ss-hero
    > .elementor-background-video-container::before {
    background-image: linear-gradient(90deg, #000000e0, #00000047);
  }
}

/* .ss-form - Formulario sobre fondo oscuro (demo: .form). Colores, tipografias,
   gaps, bordes y boton van en los controles nativos del widget Form; aqui solo
   lo que el widget no ofrece.
   Uso: CSS Classes del widget Form (Contact). */
.ss-form .elementor-field-group .elementor-field-textual,
.ss-form .elementor-field-group .elementor-select-wrapper select {
  min-height: 0;
  padding: 12px 0;
  line-height: 1.2;
  transition: border-color 0.2s;
}
/* Boton con ancho minimo del demo (.button: min-width 220px); el texto y la
   flecha se separan con el control nativo "Content Align: space-between". */
.ss-form .e-form__buttons .elementor-button {
  min-width: 220px;
}
.ss-form .elementor-field-group textarea.elementor-field {
  min-height: 120px;
}
.ss-form .elementor-field-group .elementor-field::placeholder {
  color: var(--e-global-color-white50);
}
.ss-form .elementor-field-group .elementor-field:focus {
  outline: 0;
  box-shadow: none;
  border-bottom-color: var(--e-global-color-white);
}
.ss-form .elementor-select-wrapper select option {
  background: var(--e-global-color-primary);
  color: var(--e-global-color-white);
}
.ss-form .elementor-message.elementor-help-inline {
  margin-top: 8px;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ss-form .elementor-message-success,
.ss-form .elementor-message-danger {
  padding: 18px 20px;
  border: 1px solid var(--e-global-color-line);
  font-size: 12px;
  letter-spacing: 0.1em;
}
.ss-form .elementor-message::before {
  display: none;
}

/* .ss-header - Header sticky con blur (plantilla Header Global de Elementor).
   El container tiene position: fixed (control nativo) y la clase ss-header.
   assets/js/header.js le agrega .is-scrolled al pasar 40px de scroll.
   El prefijo .elementor .elementor-element.e-con sube la especificidad para
   ganarle al CSS que genera Elementor sin usar !important. */
.elementor .elementor-element.e-con.ss-header {
  transition: min-height 0.35s ease;
  /* background-color: rgba(16, 21, 22, 0.1); */
}

/* Capa de blur en ::before y no en el container: backdrop-filter en el container
   encerraria al Off-Canvas (position: fixed) dentro de la caja del header. */
.elementor .elementor-element.e-con.ss-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: rgba(16, 21, 22, 0.65); /* Ink Soft al 65% */
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.elementor .elementor-element.e-con.ss-header.is-scrolled::before {
  opacity: 1;
}

/* El mix-blend-mode de .ss-logo convierte al header en grupo aislado y anula el
   backdrop-filter. En el header no tiene efecto visible (se mezcla contra
   transparente), asi que se desactiva solo en este logo. */
.ss-header > .e-con-inner > .ss-logo img {
  mix-blend-mode: normal;
}

/* Compacto: 98 -> 76px (tablet/mobile 82 -> 64px) y logo proporcional */
.elementor .elementor-element.e-con.ss-header.is-scrolled {
  --min-height: 76px;
}
.elementor .ss-header .ss-logo img {
  transition:
    width 0.35s ease,
    height 0.35s ease;
}
.elementor .ss-header.is-scrolled .ss-logo img {
  width: 140px;
  /* height: 60px; */
}
@media (max-width: 1024px) {
  .elementor .elementor-element.e-con.ss-header.is-scrolled {
    --min-height: 64px;
  }
  .elementor .ss-header.is-scrolled .ss-logo img {
    width: 162px;
    height: 56px;
  }
}
@media (max-width: 767px) {
  .elementor .ss-header.is-scrolled .ss-logo img {
    width: 150px;
    height: 52px;
  }
}

/* Barra de admin de WordPress (solo con sesion iniciada) */
body.admin-bar .elementor .elementor-element.e-con.ss-header {
  top: 32px;
}
@media (max-width: 782px) {
  body.admin-bar .elementor .elementor-element.e-con.ss-header {
    top: 46px;
  }
}

/* .ss-systems - Lista "Systems integrated" de la plantilla Single de proyectos
   (demo: .systems-list). La genera el shortcode [ss_project_systems] del child
   theme (inc/project-systems.php), porque Elementor no recorre una relacion de ACF.
   Lineas entre celdas: fondo Line + gap de 1px, como en el demo. */
.ss-systems {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--e-global-color-line);
  border: 1px solid var(--e-global-color-line);
}
.ss-systems a {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: baseline;
  gap: 16px;
  height: 100%;
  padding: 30px 28px;
  background: var(--e-global-color-primary);
  color: var(--e-global-color-white);
  transition: background 0.25s;
}
.ss-systems a:hover {
  background: #39494a;
}
.ss-systems i {
  font-family: "Public Sans", sans-serif;
  font-size: 10px;
  font-style: normal;
  letter-spacing: 0.2em;
  color: var(--e-global-color-slate);
}
.ss-systems span {
  font-family: "Cinzel Decorative", Georgia, serif;
  font-size: 22px;
  line-height: normal;
}
.ss-systems b {
  font-family: "Public Sans", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--e-global-color-slate);
}
@media (max-width: 1024px) {
  .ss-systems {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 767px) {
  .ss-systems {
    grid-template-columns: 1fr;
  }
}

/* .ss-project-card - Tarjeta de proyecto (Loop Item "Loop Project Card").
   Zoom de la foto al pasar sobre la tarjeta (demo: .project-card:hover
   .project-media). Elementor no permite animar un hijo desde el hover del
   contenedor padre. El fondo del hover va en el control nativo del container. */
.ss-project-card .elementor-widget-image {
  overflow: hidden;
}
.ss-project-card .elementor-widget-image img {
  display: block;
  transition: transform 0.5s;
}
.ss-project-card:hover .elementor-widget-image img {
  transform: scale(1.02);
}

@media (prefers-reduced-motion: reduce) {
  .ss-project-card .elementor-widget-image img {
    transition: none;
  }
  .elementor .elementor-element.e-con.ss-header,
  .elementor .elementor-element.e-con.ss-header::before,
  .elementor .ss-header .ss-logo img {
    transition: none;
  }
}

/* ============================================================
   TIPOGRAFIA - Cinzel Decorative sin ligaduras
   La fuente une pares como TH / CT en los titulares.
   Uso: titulares y textos que usan la serif de display.
   ============================================================ */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.elementor-nav-menu a,
.ss-systems span {
  font-variant-ligatures: none;
  -webkit-font-feature-settings: "liga" 0, "dlig" 0, "hlig" 0, "clig" 0;
  font-feature-settings: "liga" 0, "dlig" 0, "hlig" 0, "clig" 0;
}

/* ============================================================
   MEGA MENU - panel translucido con blur
   El fondo semitransparente (#101516C7) se define en el control
   "Content > Background" del widget Mega Menu del Header Global.
   Aqui solo va el desenfoque: Elementor no tiene control nativo
   para backdrop-filter.
   El blur va sobre el propio panel, no sobre un ancestro: poner
   backdrop-filter en el container del header atraparia al
   Off-Canvas (position: fixed). Ver bloque .ss-header.
   ============================================================ */
.ss-header .e-n-menu-content > .e-con {
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  backdrop-filter: blur(20px) saturate(120%);
}
/* Si algun descendiente usara mix-blend-mode el grupo se aisla y
   el blur desaparece sin avisar. */
.ss-header .e-n-menu-content > .e-con img {
  mix-blend-mode: normal;
}

@media (max-width: 1024px) {
  .ss-header .e-n-menu-content > .e-con {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ============================================================
   TITULOS DE TARJETA ENLAZADOS (.ss-card-title)
   Las tarjetas de servicio de Home y del indice llevan el H3
   enlazado ademas del boton "Explore". Un enlace que se ve igual
   que el texto normal no invita a pulsarlo, asi que se subraya
   al pasar por encima y al enfocar con teclado.
   ============================================================ */
.ss-card-title a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.25s;
}
.ss-card-title a:hover,
.ss-card-title a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
}
.ss-card-title a:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .ss-card-title a {
    transition: none;
  }
}