/*
 * adaptador.css — puente entre el DOM de Elementor y el CSS de Cardia.
 *
 * Se carga ENTRE el CSS de Elementor y el del template:
 *   Elementor -> adaptador -> main.css -> sisgenyca.css
 * Asi gana a Elementor y pierde ante el template, que es justo lo que
 * se quiere. Por eso aqui no hace falta ni un !important.
 *
 * El CSS del template espera <div class="col-xl-4"> y <h2 class="header-xl">.
 * Elementor envuelve todo en .e-con / .elementor-widget y le impone sus
 * propias medidas (--width:100%, padding, display:flex). Estas reglas
 * devuelven el control al CSS del template.
 *
 */

/* ── 0a. Elementor impone flex-column a TODO contenedor ────────
 * `.e-con.e-flex` (dos clases) declara display:flex y
 * --flex-direction:column, y eso gana a cualquier regla del template,
 * que usa una sola clase. Se neutraliza aqui con la misma especificidad
 * y las excepciones reales van en adaptador-flex.css, generado a partir
 * del propio CSS del template.
 */
.e-con.e-flex:where(.sg-x) {
  display: block;
  --display: block;
  --flex-direction: row;
  --justify-content: flex-start;
  --align-items: stretch;
  --gap: 0px;
  --row-gap: 0px;
  --column-gap: 0px;
  --padding-top: 0px; --padding-bottom: 0px;
  --padding-left: 0px; --padding-right: 0px;
  --width: auto;
}

/* ── 0. Todo contenedor del tema deja de ser un flex de Elementor ──
 * Elementor pone --flex-direction:column, --width:100%, gap y padding
 * en TODO contenedor. Se anulan aqui para que mande el CSS del
 * template; donde el template quiera flex, lo dira el.
 */
/* Elementor fija --flex-direction en `.e-con.e-flex` (dos clases), asi
   que hay que igualar esa especificidad para poder anularlo. */
.e-con:where(.sg-x) {
  /* :where() no suma especificidad: estas reglas ganan al CSS de
     Elementor (carga antes) y pierden ante el del template (carga
     despues). Sin eso, el adaptador tapaba .sg-hero-actions y demas. */
  display: block;
  width: auto;
  max-width: none;
  --width: auto;
  /* OJO: `unset` en una variable CSS significa HEREDAR, y aqui heredaba
     el `column` del contenedor padre. Hay que fijar el valor por
     defecto de flex, que es `row`; el template lo cambia donde toca. */
  --flex-direction: row;
  --justify-content: flex-start;
  --align-items: stretch;
  --gap: 0px;
  --row-gap: 0px;
  --column-gap: 0px;
  --padding-top: 0px; --padding-bottom: 0px;
  --padding-left: 0px; --padding-right: 0px;
  padding: 0;
  gap: 0;
}
.e-con:where(.sg-x) > .e-con-inner { display: contents; }

/* ── 1. Contenedores de Elementor como <div> normales ───────── */
.e-con:where(.row),
.e-con:where(.container),
.e-con:where(.container-fluid),
.e-con:where([class*="col-"]),
.e-con:where(.sg-caja) {
  padding: 0;
  --padding-top: 0; --padding-bottom: 0;
  --padding-left: 0; --padding-right: 0;
  gap: initial;
  --gap: initial;
  --row-gap: 0px; --column-gap: 0px;
  align-content: initial;
}

/* Su envoltorio interno desaparece: los hijos pasan a ser hijos
   directos, que es lo que espera el grid de Bootstrap. */
.e-con:where(.row) > .e-con-inner,
.e-con:where(.container) > .e-con-inner,
.e-con:where(.container-fluid) > .e-con-inner,
.e-con:where([class*="col-"]) > .e-con-inner,
.e-con:where(.sg-caja) > .e-con-inner {
  display: contents;
}

/* Elementor pone --flex-direction:column en todo contenedor; una .row
   de Bootstrap es horizontal y con envoltura. */
.e-con:where(.row) {
  display: flex;
  flex-direction: row;
  --flex-direction: row;
  flex-wrap: wrap;
  --flex-wrap: wrap;
  align-items: initial;
  --align-items: initial;
}

/* .container y .container-fluid traen su ancho y su centrado de
   Bootstrap; Elementor solo debe dejar de imponer los suyos. */
.e-con:where(.container),
.e-con:where(.container-fluid) {
  display: block;
  width: 100%;
  --width: 100%;
  margin-left: auto;
  margin-right: auto;
}
/* Las dos llevan el mismo canalón de Bootstrap: sin él, .container-fluid
   quedaba 24px más ancho que en el React. */
.e-con:where(.container),
.e-con:where(.container-fluid) {
  padding-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
  padding-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
}

/* ── 2. Anchos de columna ────────────────────────────────────
 * Elementor pone --width:100% en cada contenedor hijo y gana a
 * Bootstrap porque su hoja carga después. Se reponen aquí los anchos
 * reales, con el mismo corte de breakpoint que Bootstrap 5.
 */
/* Bootstrap es «mobile first»: por debajo de su breakpoint, TODA columna
   ocupa el ancho completo (`.row > * { width: 100% }`). Sin esta base,
   una .col-lg-6 se quedaba sin ancho en tableta y dos tarjetas se
   colocaban en la misma fila, donde el React apila. */
.e-con:where([class*="col-"]) { width: 100%; --width: 100%; flex: 0 0 auto; max-width: 100%; }
.e-con:where(.col-12) { width: 100%; --width: 100%; flex: 0 0 auto; max-width: 100%; }
.e-con:where(.col-3) { width: 25%; --width: 25%; flex: 0 0 auto; max-width: 25%; }
.e-con:where(.col-4) { width: 33.333333%; --width: 33.333333%; flex: 0 0 auto; max-width: 33.333333%; }
.e-con:where(.col-6) { width: 50%; --width: 50%; flex: 0 0 auto; max-width: 50%; }
@media (min-width: 576px) {
  .e-con:where(.col-sm-6) { width: 50%; --width: 50%; flex: 0 0 auto; max-width: 50%; }
}
@media (min-width: 768px) {
  .e-con:where(.col-md-4) { width: 33.333333%; --width: 33.333333%; flex: 0 0 auto; max-width: 33.333333%; }
  .e-con:where(.col-md-6) { width: 50%; --width: 50%; flex: 0 0 auto; max-width: 50%; }
}
@media (min-width: 992px) {
  .e-con:where(.col-lg-3) { width: 25%; --width: 25%; flex: 0 0 auto; max-width: 25%; }
  .e-con:where(.col-lg-4) { width: 33.333333%; --width: 33.333333%; flex: 0 0 auto; max-width: 33.333333%; }
  .e-con:where(.col-lg-5) { width: 41.666667%; --width: 41.666667%; flex: 0 0 auto; max-width: 41.666667%; }
  .e-con:where(.col-lg-6) { width: 50%; --width: 50%; flex: 0 0 auto; max-width: 50%; }
  .e-con:where(.col-lg-7) { width: 58.333333%; --width: 58.333333%; flex: 0 0 auto; max-width: 58.333333%; }
  .e-con:where(.col-lg-8) { width: 66.666667%; --width: 66.666667%; flex: 0 0 auto; max-width: 66.666667%; }
}
@media (min-width: 1200px) {
  .e-con:where(.col-xl-3) { width: 25%; --width: 25%; flex: 0 0 auto; max-width: 25%; }
  .e-con:where(.col-xl-4) { width: 33.333333%; --width: 33.333333%; flex: 0 0 auto; max-width: 33.333333%; }
  .e-con:where(.col-xl-5) { width: 41.666667%; --width: 41.666667%; flex: 0 0 auto; max-width: 41.666667%; }
  .e-con:where(.col-xl-6) { width: 50%; --width: 50%; flex: 0 0 auto; max-width: 50%; }
  .e-con:where(.col-xl-7) { width: 58.333333%; --width: 58.333333%; flex: 0 0 auto; max-width: 58.333333%; }
  .e-con:where(.col-xl-8) { width: 66.666667%; --width: 66.666667%; flex: 0 0 auto; max-width: 66.666667%; }
  .e-con:where(.col-xl-10) { width: 83.333333%; --width: 83.333333%; flex: 0 0 auto; max-width: 83.333333%; }
}
/* Las columnas llevan el gutter de Bootstrap. */
.e-con:where([class*="col-"]) {
  padding-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
  padding-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
}

/* ── 3. Cajas del tema (.ta-feature-one-item, .pricing-item…) ──
 * Son contenedores de Elementor con la clase del tema: se les quitan
 * las medidas de Elementor y el CSS del template hace el resto.
 */
.e-con:where(.sg-caja) {
  display: block;
  width: 100%;
  --width: 100%;
}

/* ── 4. Widgets: que la clase del tema llegue al elemento real ── */
.elementor-widget.sg-t,
.elementor-widget.sg-i,
.elementor-widget.sg-img,
.elementor-widget.sg-btn,
.elementor-widget.sg-plain {
  width: auto;
  max-width: none;
}
/* Un botón no se estira al ancho de su columna: en el React es
   `inline-flex` dentro de un bloque. (.sg-wa-btn sí ocupa todo el ancho,
   y lo hace con su propia regla del template.) */
.e-con > .elementor-widget.sg-btn .elementor-button,
.e-con > .elementor-widget.sg-plain .elementor-button { align-self: flex-start; }

/* El div del widget desaparece: las clases del template (.ta-button-01,
   .sg-wa-btn, .sg-results-btn…) viajan en él Y en el <a> de dentro, de
   modo que la píldora se pintaba DOS veces, una dentro de otra, y el
   botón salía ~60% más alto y más ancho que en el React. Con
   `display: contents` manda el enlace, que es lo que el React tiene. */
.elementor-widget.sg-btn,
.elementor-widget.sg-plain {
  display: contents;
}
.sg-t > .elementor-widget-container,
.sg-img > .elementor-widget-container,
.sg-btn > .elementor-widget-container,
.sg-plain > .elementor-widget-container {
  display: contents;
}
.elementor-widget.sg-t .elementor-heading-title,
.elementor-widget.sg-t p {
  /* El kit de Elementor pinta los titulares con `.elementor-widget-heading
     .elementor-heading-title` (dos clases). Se sube a TRES para ganarle,
     pero SIN !important: asi reglas del template como
     `.service-one-item .info h3 { color: var(--white) }` siguen mandando. */
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  line-height: inherit;
  margin: 0;
}


/* ── 5. Iconos ──────────────────────────────────────────────── */
.sg-i .elementor-icon {
  font-size: inherit;
  color: inherit;
  padding: 0;
  background: none;
  border: 0;
  line-height: inherit;
}
.sg-i .elementor-icon i { width: auto; height: auto; }

/* ── 6. Imágenes ────────────────────────────────────────────── */
.sg-img img { max-width: 100%; height: auto; }
.sg-img figure { margin: 0; }

/* ── 7. Botones ─────────────────────────────────────────────── */
.elementor-widget.sg-btn .elementor-button,
.elementor-widget.sg-plain .elementor-button {
  all: unset;
  cursor: pointer;
}
.elementor-widget.sg-btn .elementor-button-content-wrapper,
/* `display: contents` no basta: Elementor le fija un tamaño propio al
   envoltorio y el <strong> del enlace sale a 16px en vez de heredar. */
.elementor-widget.sg-plain .elementor-button-content-wrapper {
  display: contents;
  font-size: inherit;
  /* Elementor también le fija el color aquí; sin heredarlo, el icono
     dentro del enlace sale gris en vez del color del propio enlace. */
  color: inherit;
}
/* Elementor envuelve el rotulo en <span class="elementor-button-text">
   y le pone su propio color; sin esto el texto sale oscuro sobre el
   fondo azul y no se lee. */
.elementor-widget.sg-btn .elementor-button-text,
.elementor-widget.sg-plain .elementor-button-text { color: inherit !important; font-size: inherit; }

/* ── 8. La marquesina tiene que recortar ────────────────────── */
.e-con:where(.marquee-right),
.e-con:where(.marquee-left) { overflow: hidden; width: 100%; }

/* ── Botones del template sobre el <a> de Elementor ───────────
 * El template estiliza `.ta-button-01` / `.ta-button-02`, pero esa
 * clase va en el widget y quien pinta el botón es el <a> de dentro.
 * Se le pasan aquí las MISMAS declaraciones del CSS original
 * (main.css), apuntando a las variables de la paleta para que sigan
 * ligadas a los colores globales.
 */
.elementor-widget.sg-btn .elementor-button {
  all: unset;
  line-height: 1;
  text-decoration: none;
  display: inline-flex;
  border: none;
  cursor: pointer;
  align-items: center;
  gap: 0.75rem;
  border-radius: 10px;
  font-family: var(--body-font);
  font-weight: 600;
  font-size: 14px;
  padding: 1rem 1rem 1rem 20px;
  transition: background-color 0.3s, color 0.3s;
}
.sg-btn.ta-button-01 .elementor-button {
  background-color: var(--theme);
  color: var(--header) !important;
}
.sg-btn.ta-button-01 .elementor-button:hover {
  background-color: var(--black);
  color: var(--white);
}
.sg-btn.ta-button-02 .elementor-button {
  background-color: var(--black);
  color: var(--white) !important;
}
.sg-btn.ta-button-02 .elementor-button:hover {
  background-color: var(--theme);
  color: var(--header);
}
/* La flecha, dentro del círculo de 25px (.button__icon-wrapper). */
.elementor-widget.sg-btn .elementor-button-icon {
  flex-shrink: 0;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  margin: 0;
}
.sg-btn.ta-button-01 .elementor-button-icon { background: var(--header); color: var(--white); }
.sg-btn.ta-button-02 .elementor-button-icon { background: var(--white); color: var(--black); }
.elementor-widget.sg-btn .elementor-button-icon svg { width: 10px; height: 11px; fill: currentColor; }
.elementor-widget.sg-btn .elementor-button-content-wrapper { display: inline-flex; align-items: center; gap: 0.75rem; }

/* Solo el TITULAR ocupa el ancho dentro de un encabezado centrado. El
   pill `.sub-title` es `width: fit-content` y si se estira ocupa toda
   la franja. */
.center-sub-main-header > .elementor-widget.sg-t:not(.sub-title) { width: 100%; }

/* Variante clara del hero (.sg-hero-btn-light en sisgenyca.css). */
.sg-btn.sg-hero-btn-light .elementor-button {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #fff !important;
}
.sg-btn.sg-hero-btn-light .elementor-button:hover {
  background: #fff;
  color: var(--header);
}

/* ══ CABECERA ═══════════════════════════════════════════════
 * El menú lo pinta el widget Nav Menu de Elementor (editable desde
 * Apariencia > Menús), pero el diseño es el del template. Se le pasan
 * las mismas declaraciones que main.css aplica a `.nav-menu > li > a`.
 */
/* El menú ocupa toda la altura de la barra, como `.nav-menu > li
   { height: 100% }`: de ahí cuelga el subrayado rosa del hover, que va
   pegado abajo. Sin esto la lista medía 13px y la línea salía bajo el
   texto. */
.main-nav .elementor-widget.sg-nav { align-self: stretch; }
.main-nav .elementor-widget.sg-nav > .elementor-widget-container,
.sg-nav .elementor-nav-menu--main,
.sg-nav .elementor-nav-menu--main .elementor-nav-menu,
.sg-nav .elementor-nav-menu--main .elementor-nav-menu > li,
.sg-nav .elementor-nav-menu--main .elementor-nav-menu > li > a { height: 100%; }

/* OJO: solo el menú de ESCRITORIO (`--main`). El desplegable móvil usa
   el mismo `ul.elementor-nav-menu`, y con estas reglas los nueve ítems
   se apilaban en una fila de 15px de alto: el menú se abría, pero no se
   veía nada. */
.sg-nav .elementor-nav-menu--main .elementor-nav-menu {
  display: flex;
  align-items: center;
}
.sg-nav .elementor-nav-menu--main .elementor-nav-menu > li > a {
  display: flex;
  align-items: center;
  gap: 5px;
  /* Valores finales del template (sisgenyca.css, tres tramos):
     >=1700 -> 11px/14.5px · 1600-1699 -> 12px · 1200-1599 -> 9px/13px.
     El peso efectivo es 500, no el 600/700 de main.css. */
  padding: 0 11px;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  font-family: var(--header-font);
  /* !important: la tipografía del widget genera
     `.elementor-47 .elementor-element-xxxx .elementor-item` (cuatro
     clases) con el color global, y dejaba el menú gris en vez del azul
     marino del template. */
  color: var(--header) !important;
  white-space: nowrap;
  background: none;
  line-height: 1;
}
.sg-nav .elementor-nav-menu--main .elementor-nav-menu > li > a:hover,
.sg-nav .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item-active {
  color: var(--theme);
  background: none;
}
.sg-nav .elementor-nav-menu--main .elementor-nav-menu > li > a .sub-arrow i,
.sg-nav .elementor-nav-menu--main .elementor-nav-menu > li > a .fa-chevron-down {
  font-size: 10px;
  opacity: 0.5;
}
/* La flecha del submenú es un <span class="sub-arrow"> aparte, con
   márgenes propios; en el React el chevron va dentro del enlace. */
.sg-nav .elementor-nav-menu--main .elementor-nav-menu > li > a .sub-arrow {
  margin: 0;
  padding: 0;
  width: auto;
  line-height: 1;
}
@media (min-width: 1600px) and (max-width: 1699px) {
  .sg-nav .elementor-nav-menu--main .elementor-nav-menu > li > a { padding: 0 12px; }
}
@media (min-width: 1200px) and (max-width: 1599px) {
  .sg-nav .elementor-nav-menu--main .elementor-nav-menu > li > a { font-size: 13px !important; padding: 0 9px; }
}

/* La hamburguesa es la del template: cuadrado rosa de 56px, y NO se ve
   en escritorio (.header-actions .hamburger { display:none } ≥1200). */
.sg-nav .elementor-menu-toggle {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  background: var(--theme);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sg-nav .elementor-menu-toggle:hover { background: var(--header); }
.sg-nav .elementor-menu-toggle i,
.sg-nav .elementor-menu-toggle svg { color: var(--white); fill: var(--white); font-size: 22px; }

/* Pro Elements solo trae CSS para los modificadores --dropdown-mobile y
   --dropdown-tablet. Con el breakpoint `laptop` no existe ninguna regla
   y se pintan a la vez el menú de escritorio y la hamburguesa. */
@media (max-width: 1199px) {
  .elementor-nav-menu--dropdown-laptop .elementor-nav-menu--main { display: none; }

  /* La hamburguesa vive DENTRO del widget de menú, y el template esconde
     `.main-nav` entera por debajo de 1200 (`display: none !important`):
     el icono se quedaba sin dibujar y en móvil no había forma de abrir
     el menú. En el React el botón está en `.header-actions`, así que
     aquí el contenedor se deja visible pero sin ocupar hueco, y se
     coloca DESPUÉS del buscador, en el mismo sitio y el mismo orden. */
  /* Cuatro clases: adaptador-flex.css copia del template
     `.main-nav { display: none !important }` y se emite DESPUÉS. */
  .header-main .e-con.e-flex.main-nav {
    display: flex !important;
    flex: 0 0 auto;
    justify-content: flex-end;
    order: 3;
  }
  .e-con.header-actions { order: 2; }
  .e-con.site-logo { order: 1; }

  /* El widget del menú se estira a toda la barra para que el subrayado
     del escritorio cuelgue abajo; aquí dentro solo queda la
     hamburguesa, y estirado la dejaba pegada al techo. */
  .main-nav .elementor-widget.sg-nav { align-self: center; }
  .main-nav .elementor-widget.sg-nav > .elementor-widget-container { height: auto; }
}
@media (min-width: 1200px) {
  .elementor-nav-menu--dropdown-laptop .elementor-menu-toggle,
  .elementor-nav-menu--dropdown-laptop .elementor-nav-menu--dropdown { display: none; }
}

/* La navegación ocupa el hueco libre y se centra, como .main-nav. */
.e-con.main-nav { flex: 1 1 0%; justify-content: center; }

/* El buscador es el elemento flexible del centro de la barra
   (.sg-topsearch { flex: 1 1 260px; max-width: 420px }). */
.e-con.sg-topsearch {
  flex: 1 1 260px;
  max-width: 420px;
  width: auto;
  /* sin esto el contenedor se estira a los 50px de la barra y la píldora
     queda descentrada respecto al React, donde mide 34px. */
  align-self: center;
  align-items: center;
}

/* Buscador de la barra superior: píldora con la lupa dentro. */
.sg-topsearch .elementor-widget-search-form,
.sg-topsearch .elementor-widget-search-form > .elementor-widget-container,
.sg-topsearch .elementor-search-form { width: 100%; }
.sg-topsearch .elementor-search-form__container {
  border-radius: 30px;
  height: 34px;
  min-height: 34px;
  align-items: center;
}
.sg-topsearch input[type="search"] {
  width: 100%;
  height: 34px;
  border-radius: 30px;
  border: 1px solid var(--theme);
  background: var(--white);
  padding: 0 14px 0 36px;
  font-size: 13px;
  color: var(--header);
}
/* La lupa va DENTRO de la píldora, a 14px del borde izquierdo, como en
   el React (`.sg-topsearch i { position:absolute; left:14px }`). La skin
   «minimal» de Elementor la pone como un hermano en el flujo, y el campo
   arrancaba después: el icono quedaba pisando el borde. */
.sg-topsearch .elementor-search-form__container { position: relative; }
.sg-topsearch .elementor-search-form__icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 13px;
  height: 13px;
  min-width: 0;
  padding: 0;
  color: var(--theme);
  font-size: 13px;
  line-height: 1;
  pointer-events: none;
  z-index: 1;
}
.sg-topsearch .elementor-search-form__icon svg { width: 13px; height: 13px; fill: var(--theme); }

/* «Resultados online»: píldora azul con texto BLANCO.
   La clase del template viaja en el div del widget, y el template la
   pinta como si fuera el propio <a>: se suman dos cajas y el botón sale
   más alto y más ancho. El div se anula y manda el enlace. */
.elementor-widget.sg-results-btn .elementor-button {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--header);
  color: #fff;
  border-radius: 30px;
  padding: 7px 18px;
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
}
.elementor-widget.sg-results-btn .elementor-button:hover { background: var(--theme); }
/* El rótulo va en <span class="elementor-button-text">, asi que la regla
   del template (.sg-results-btn span) lo aligera entero: «Resultados»
   debe seguir en 600 y solo «online» en 400. */
.elementor-widget.sg-results-btn .elementor-button .elementor-button-text { font-weight: 600; opacity: 1; }
.elementor-widget.sg-results-btn .elementor-button .elementor-button-text > span { font-weight: 400; opacity: 0.9; }

/* Redes: el icono va dentro del enlace, que es el círculo. */
.ta-socials .elementor-widget.sg-red .elementor-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--white);
  color: var(--header);
  font-size: 12px;
  cursor: pointer;
  transition: color 0.14s, background 0.14s;
}
.ta-socials .elementor-widget.sg-red .elementor-button:hover {
  background: var(--theme);
  color: var(--white);
}

/* La X no existe en la versión de Font Awesome del template; el React la
   resuelve con un SVG. En un botón de Elementor el rótulo pasa por
   wp_kses_post, que descarta <svg>, así que se pinta como máscara. */
i.sg-icon-x {
  display: inline-block;
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z'/></svg>") no-repeat center / contain;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z'/></svg>") no-repeat center / contain;
}

/* Botón redondo de búsqueda de la barra principal (#searchToggle). */
.header-actions .elementor-widget.sg-search-toggle .elementor-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #FBF3F6;
  color: var(--header);
  font-size: 15px;
  cursor: pointer;
  transition: all 0.4s ease-in-out;
}
.header-actions .elementor-widget.sg-search-toggle .elementor-button:hover {
  background: var(--theme);
  color: var(--white);
}

/* ══ ICONOS DENTRO DE LAS TARJETAS ══════════════════════════
 * El template los quiere centrados, en 22px y azules
 * (.sg-fa-icon { color: var(--header) !important; font-size: 22px }).
 * Elementor escribe color y tamaño propios en un <style> del head, que
 * gana a cualquier hoja externa: hay que forzar la herencia.
 */
.elementor-widget.sg-i { display: contents; }
.sg-i i { color: inherit; font-size: inherit; line-height: inherit; }


/* ── Listas con icono (`<ul class="feature">`) ────────────────
 * El widget icon-list emite <ul><li><span icon><span text>, la misma
 * forma que el template espera. Solo hay que quitarle los estilos
 * propios de Elementor para que mande `.feature li`.
 */
.sg-lista .elementor-icon-list-items {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* El React escribe `<li><i/> texto</li>`: el icono va EN LÍNEA con el
   texto, que al partirse en varias líneas vuelve al margen izquierdo.
   Con `display: flex` el icono formaba una columna y el texto quedaba
   sangrado, que es lo que se veía distinto en las listas largas. */
.sg-lista .elementor-icon-list-item {
  display: block;
}
.sg-lista .elementor-icon-list-item > a { display: contents; }
.sg-lista .elementor-icon-list-icon {
  display: inline;
  margin-right: 6px;
}
.sg-lista .elementor-icon-list-text { display: inline; }
.sg-lista .elementor-icon-list-icon i {
  /* `.feature li i { color: var(--theme) }` y el tamano es el del texto:
     heredarlo de un contenedor grande los volvia enormes. */
  color: var(--theme);
  font-size: 1em;
  width: auto;
  height: auto;
}
.sg-lista .elementor-icon-list-icon svg {
  width: 1em;
  height: 1em;
  fill: var(--theme);
}
.sg-lista .elementor-icon-list-text {
  color: inherit;
  font: inherit;
  padding: 0;
}

/* ── Tarjeta de área (.service-one-item) ──────────────────────
 * Todo el bloque es el enlace, así que el <a> de Elementor no debe
 * pintar nada ni romper la caja.
 */
.e-con:where(.service-one-item) > a,
a.e-con:where(.service-one-item) { color: inherit; text-decoration: none; }
.service-one-item .sg-i .elementor-icon i { font-size: 34px !important; color: var(--white) !important; }
.service-one-item .arrow .sg-i .elementor-icon i { font-size: 22px !important; color: var(--white) !important; }
.service-one-item .info .serial { color: rgba(255,255,255,0.6); font-size: 14px; }


/* Donde el template pinta el texto en blanco, la clase va en el <h3> o
   el <span>; aqui hay que llevarla al widget que los envuelve, porque
   el color se hereda desde ahi. */
.service-one-item .info .sg-t,
.service-one-item .info .elementor-widget { color: var(--white); }
.service-one-item .icon .service-icon .sg-i,
.service-one-item .icon .service-icon { color: var(--white); font-size: 34px; }
.ta-process-one .sg-steps .sg-t,
.center-sub-main-header.service-one-header .sg-t,
.center-sub-main-header.ta-process-one .sg-t { color: var(--white); }

/* El icono del círculo rosa va en blanco (.service-one-item .icon
   .service-icon i { color: var(--white) }); el widget de texto de
   Elementor impone el color del kit, así que hay que forzarlo. */
.service-one-item .icon .service-icon i { color: var(--white) !important; font-size: 34px !important; }

/* ── Pestañas ─────────────────────────────────────────────────
 * El template usa <li> dentro de .ta-tab-nav; aquí son contenedores,
 * así que se les pasa el mismo comportamiento visual.
 */
.ta-tab-nav .sg-tab-btn { cursor: pointer; }
.ta-tab-content .ta-tab-pane { display: none; }
.ta-tab-content .ta-tab-pane.active { display: block; }

/* Retrato circular de la sección de VPH. */
.ta-facilities-one-right .sg-redonda img { border-radius: 50%; }


/* ── Lista de la tarjeta de precios ───────────────────────────
 * `.pricing-item .header-content .feature li` pone el texto a la
 * izquierda y la marca a la derecha, en verde. El widget icon-list
 * emite el icono primero, así que se le da la vuelta con `order`.
 */
.pricing-item .sg-lista .elementor-icon-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 0.5rem;
}
.pricing-item .sg-lista .elementor-icon-list-icon { order: 2; }
.pricing-item .sg-lista .elementor-icon-list-text { order: 1; }
.pricing-item .sg-lista .elementor-icon-list-icon i { color: #008000; }

/* ── Acordeón de preguntas frecuentes ─────────────────────────
 * El template usa `.ta-faq-item-wrap .faq-item`; el widget Accordion
 * de Elementor tiene su propio marcado, así que se le pasan aquí los
 * mismos valores del template.
 */
.sg-faq .elementor-accordion-item {
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-bottom: 14px;
  background: var(--white);
  overflow: hidden;
}
.sg-faq .elementor-tab-title {
  padding: 18px 22px;
  background: var(--white);
}
.sg-faq .elementor-tab-title a,
.sg-faq .elementor-tab-title .elementor-accordion-title {
  font-family: var(--header-font);
  /* Valores medidos en el React sobre .faq-item .heading h2.header-sm:
     sisgenyca.css baja el tamaño y el peso de .header-sm. */
  font-size: 17px;
  font-weight: 500;
  color: var(--header) !important;
  line-height: 26px;
}
/* El chevron SOLO aparece en la pregunta abierta: el template lo esconde
   con `.faq-item .heading i { display: none }`. */
.elementor-widget.sg-faq .elementor-accordion .elementor-accordion-icon { display: none; }
.elementor-widget.sg-faq .elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon {
  display: flex;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--theme);
  color: var(--white);
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: 15px;
}
.sg-faq .elementor-tab-title.elementor-active .elementor-accordion-icon i {
  color: var(--white);
  font-size: 15px;
}
.sg-faq .elementor-tab-content {
  padding: 0 22px 18px;
  border: 0;
  color: var(--text);
  font-family: var(--body-font);
  font-size: 15px;
  line-height: 26px;
}

/* El rótulo del botón vive en un <span> al que el template aplica
   `span { color: var(--text) }`. Se fuerza el color del botón a todo
   lo que haya dentro, con especificidad suficiente. */
.elementor-widget.sg-btn.ta-button-01 .elementor-button,
.elementor-widget.sg-btn.ta-button-01 .elementor-button * { color: var(--header) !important; }
.elementor-widget.sg-btn.ta-button-02 .elementor-button,
.elementor-widget.sg-btn.ta-button-02 .elementor-button * { color: var(--white) !important; }
.elementor-widget.sg-btn.sg-hero-btn-light .elementor-button,
.elementor-widget.sg-btn.sg-hero-btn-light .elementor-button * { color: #fff !important; }

.elementor-widget.sg-btn.ta-button-01 .elementor-button-icon { background: var(--header); }
.elementor-widget.sg-btn.ta-button-01 .elementor-button-icon svg { fill: var(--white) !important; }
.elementor-widget.sg-btn.ta-button-02 .elementor-button-icon { background: var(--white); }
.elementor-widget.sg-btn.ta-button-02 .elementor-button-icon svg { fill: var(--black) !important; }
.elementor-widget.sg-btn.sg-hero-btn-light .elementor-button-icon { background: #fff; }
.elementor-widget.sg-btn.sg-hero-btn-light .elementor-button-icon svg { fill: var(--header) !important; }

/* ── Pie ──────────────────────────────────────────────────────
 * Las columnas de enlaces y los datos de contacto salen del widget
 * icon-list; el template los estiliza como `<ul class="footer-links">`.
 */
.sg-lista-plana .elementor-icon-list-items { display: flex; flex-direction: column; }
.sg-lista-plana .elementor-icon-list-item { gap: 0; }
.sg-lista-plana .elementor-icon-list-icon { display: none; }
.footer-links .elementor-icon-list-icon { display: none; }
.footer-links .elementor-icon-list-items { list-style: none; margin: 0; padding: 0; }
.footer-links .elementor-icon-list-item { display: block; margin-bottom: 8px; }
.footer-links .elementor-icon-list-item a { color: var(--white); transition: 0.3s; }
.footer-links .elementor-icon-list-item a:hover { color: var(--theme); }
.footer-links .elementor-icon-list-text { color: inherit; font: inherit; padding: 0; }

/* El separador del pie es un <hr> de 1px con 75px de margen arriba y
   abajo (.footer-hr). El widget Divider mete su propio relleno y el
   margen inferior se pierde: la caja medía 31px en vez de 1. */
/* `.e-con .elementor-widget.elementor-widget { margin-block-end: 0 }`
   (tres clases) anula el margen inferior de TODO widget: hay que
   igualar esa especificidad y usar la misma propiedad lógica.
   Cada separador lleva el margen que le da el template. */
.e-con .elementor-widget.footer-hr {
  margin-block-start: 75px;
  margin-block-end: 75px;
}
.e-con .elementor-widget.about-two-hr {
  margin-block-start: 25px;
  margin-block-end: 25px;
}
@media (max-width: 767px) {
  .e-con .elementor-widget.about-two-hr {
    margin-block-start: 15px;
    margin-block-end: 15px;
  }
}
.elementor-widget.sg-hr .elementor-divider { padding: 0; line-height: 0; font-size: 0; }
.elementor-widget.sg-hr .elementor-divider-separator { margin: 0; }

/* Redes del pie: círculo blanco con el icono rosa. */
.social-icon .elementor-widget.sg-red .elementor-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--white);
  color: var(--theme);
  font-size: 15px;
  cursor: pointer;
  transition: color 0.14s, background 0.14s;
}
.social-icon .elementor-widget.sg-red .elementor-button:hover {
  background: var(--theme);
  color: var(--white);
}


/* El SVG de X, al tamaño que le da el template (14px en los dos sitios). */
.sg-icon-x { width: 14px; height: 14px; display: block; }

/* El título de columna del pie lleva su separación del template
   (.foo-head { margin-bottom: 45px }); Elementor la anulaba. */
.ta-footer-wrapper .elementor-widget.foo-head { margin-bottom: 45px; }
.footer-links .elementor-icon-list-item a { font-weight: 600; }

/* ── Formulario ───────────────────────────────────────────────
 * El React no pinta etiquetas: cada campo lleva solo su placeholder
 * (Widgets.tsx). Elementor añade un <label> encima de cada uno, así que
 * se ocultan y los inputs recogen el estilo global del template.
 */
.contact-form-one .elementor-field-label,
.contact-page-one .elementor-field-label { display: none; }

.contact-form-one .elementor-form-fields-wrapper,
.contact-page-one .elementor-form-fields-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
  margin: 0;
  align-items: flex-start;
}
.contact-form-one .elementor-field-group,
.contact-page-one .elementor-field-group {
  padding: 0;
  margin: 0;
  flex: 1 1 100%;
  max-width: 100%;
}
.contact-form-one .elementor-field-group.elementor-col-50,
.contact-page-one .elementor-field-group.elementor-col-50 {
  flex: 1 1 calc(50% - 10px);
  max-width: calc(50% - 10px);
}
.contact-form-one .elementor-field-textual,
.contact-page-one .elementor-field-textual {
  background: var(--body);
  color: var(--header);
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 15px;
  font-family: var(--body-font);
  font-size: 16px;
  width: 100%;
  height: auto;
}
.contact-form-one textarea.elementor-field-textual,
.contact-page-one textarea.elementor-field-textual { min-height: 150px; }

/* Paciente / Convenio institucional: dos tarjetas seleccionables
   (.sg-radio-group en sisgenyca.css). */
/* Solo los RADIO se pintan como tarjetas; una casilla de aceptación es
   una casilla normal, como en el React. */
.contact-form-one .elementor-field-type-radio .elementor-field-subgroup,
.contact-page-one .elementor-field-type-radio .elementor-field-subgroup {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  width: 100%;
}
.contact-form-one .elementor-field-type-radio .elementor-field-subgroup .elementor-field-option,
.contact-page-one .elementor-field-type-radio .elementor-field-subgroup .elementor-field-option {
  flex: 1 1 200px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--white);
  cursor: pointer;
  font-weight: 600;
  color: var(--header);
}
.contact-form-one .elementor-field-type-radio .elementor-field-subgroup .elementor-field-option:has(input:checked),
.contact-page-one .elementor-field-type-radio .elementor-field-subgroup .elementor-field-option:has(input:checked) {
  border-color: var(--theme);
  background: var(--transparent);
  color: var(--theme);
}
.contact-form-one .elementor-field-subgroup input,
.contact-page-one .elementor-field-subgroup input {
  accent-color: var(--theme);
  width: 18px;
  height: 18px;
}
/* El React pone un icono delante de cada opción (<i class="fa-light
   fa-user"> y fa-hospital). Las opciones de un campo radio de Elementor
   son texto plano, así que el icono se pinta desde el CSS con el mismo
   glifo de Font Awesome. */
.sg-form-cotizacion .elementor-field-subgroup .elementor-field-option label::before {
  font-family: "Font Awesome 6 Pro";
  font-weight: 300;
  margin-right: 8px;
  display: inline-block;
}
.sg-form-cotizacion .elementor-field-subgroup .elementor-field-option:first-child label::before { content: "\f007"; }
.sg-form-cotizacion .elementor-field-subgroup .elementor-field-option:nth-child(2) label::before { content: "\f0f8"; }
/* El rótulo va en negrita, como .sg-radio-group label.
   El peso lleva !important porque la tipografía del widget genera
   `.elementor-47 .elementor-element-xxxx .elementor-field-subgroup label`
   (cuatro clases) y se imprime después de esta hoja. */
.contact-form-one .elementor-field-subgroup .elementor-field-option > label,
.contact-page-one .elementor-field-subgroup .elementor-field-option > label {
  font-weight: 700 !important;
  font-size: 15px;
  color: inherit;
  cursor: pointer;
}

/* El botón de envío es el .ta-button-01 del template. */
.contact-form-one .elementor-widget .elementor-button,
.contact-page-one .elementor-widget .elementor-button {
  background: var(--theme);
  color: var(--header) !important;
  border-radius: 10px;
  padding: 1rem 1rem 1rem 20px;
  font-family: var(--body-font);
  font-weight: 600;
  font-size: 14px;
  border: 0;
}
.contact-form-one .elementor-widget .elementor-button:hover,
.contact-page-one .elementor-widget .elementor-button:hover { background: var(--black); color: var(--white) !important; }

/* ── Acordeón, con la caja del template (.faq-item) ─────────── */
.sg-faq .elementor-accordion-item {
  background: var(--white);
  border: 0;
  border-radius: 20px;
  padding: 18px 20px;
  margin-bottom: 15px;
}
.sg-faq .elementor-accordion-item:last-child { margin-bottom: 0; }
.sg-faq .elementor-tab-title { padding: 0; background: none; }
.sg-faq .elementor-tab-content { padding: 12px 0 0; }

/* ── Botón de WhatsApp (.sg-wa-btn) ───────────────────────────
 * Es un enlace del template, no un `.ta-button-0X`: lleva su propio
 * fondo azul, texto blanco y el icono de WhatsApp.
 */
.elementor-widget.sg-wa-btn .elementor-button {
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--header);
  color: #fff !important;
  border-radius: 30px;
  padding: 13px 30px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
}
.elementor-widget.sg-wa-btn .elementor-button:hover { background: #25d366; }
.elementor-widget.sg-wa-btn .elementor-button * { color: #fff !important; }
.elementor-widget.sg-wa-btn .elementor-button i { font-size: 20px; }
.pricing-item .sg-wa-wrap { margin-top: auto; width: 100%; }

/* Las marcas de la tarjeta de precios van EN LA MISMA LÍNEA que el
   texto y en verde (.pricing-item .header-content .feature li i). */
.pricing-item .sg-lista .elementor-icon-list-item {
  flex-wrap: nowrap;
}
.pricing-item .sg-lista .elementor-icon-list-text { flex: 1 1 auto; }
.pricing-item .sg-lista .elementor-icon-list-icon { flex: 0 0 auto; }
.pricing-item .sg-lista .elementor-icon-list-icon i { color: #008000 !important; }

/* La flecha del botón es un SVG blanco sobre círculo: hay que pintarla
   del color del círculo contrario, o se ve un punto en blanco. */

.elementor-widget.sg-btn.ta-button-01 .elementor-button-icon svg path { fill: var(--white) !important; }
.elementor-widget.sg-btn.ta-button-02 .elementor-button-icon svg path { fill: var(--black) !important; }
.elementor-widget.sg-btn.sg-hero-btn-light .elementor-button-icon svg path { fill: var(--header) !important; }

/* ── Listas de pestañas ───────────────────────────────────────
 * El template las estiliza sobre `li`; aquí cada botón es un
 * contenedor con la clase `sg-tab-btn`. Se le pasan las mismas
 * declaraciones que main.css aplica a `.ta-case-one-list li` y a
 * `.ta-facilities-list li`.
 */
.ta-case-one-list .sg-tab-btn {
  padding: 25px 27px;
  border: 1px solid var(--border);
  border-radius: 15px;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ta-case-one-list .sg-tab-btn:last-child { margin-bottom: 0; }
.ta-case-one-list .sg-tab-btn.active { background: var(--white); }
.ta-case-one-list .sg-tab-btn .text { display: flex; flex-direction: column; gap: 0.2rem; }
.ta-case-one-list .sg-tab-btn .text .sg-t p { text-transform: uppercase; }
.ta-case-one-list .sg-tab-btn .arrow i { color: var(--header); font-size: 22px; }
.ta-case-one-list .sg-tab-btn.active .arrow i { color: var(--theme); }

.ta-facilities-list { margin: 20px 0; display: flex; flex-wrap: wrap; gap: 1rem; }
.ta-facilities-list .sg-tab-btn {
  /* `.ta-facilities-list li` es `display:inline-block`: son píldoras
     una al lado de otra, no bandas de ancho completo. */
  display: inline-block;
  width: auto;
  flex: 0 0 auto;
  background: var(--transparent);
  border-radius: 6px;
  padding: 7px 19px;
  color: var(--header);
  transition: 0.3s;
  cursor: pointer;
}
.ta-facilities-list .sg-tab-btn .elementor-widget { width: auto; }
.ta-facilities-list .sg-tab-btn:hover,
.ta-facilities-list .sg-tab-btn.active { background: var(--theme); color: var(--header); }

/* `[hidden]` no basta: Elementor declara `display:flex` en el grupo de
   campo y gana al valor por defecto del atributo. */
.elementor-field-group[hidden] { display: none !important; }

/* El «404» va en rosa, como en el React (style inline del componente). */
.sg-404 .elementor-heading-title { color: var(--theme); }

/* ── Entrada del blog (single-publicacion) ───────────────────
 * Reproduce los estilos en linea de Publicaciones.tsx:
 * la linea de datos en rosa y negrita, el extracto en <strong>
 * y la separacion entre parrafos del cuerpo (mb-20 en el React).
 */
.sg-pub-meta { color: var(--theme); font-weight: 700; }
.sg-pub-meta i { margin-right: 4px; }
.sg-pub-extracto { font-weight: 700; }
.sg-pub-cuerpo p { margin-bottom: 20px; }
.sg-pub-cuerpo p:last-child { margin-bottom: 0; }
/* El React pinta la imagen con `img-fluid w-100`: ocupa todo el ancho
   de la caja y la altura la recorta `.sg-ref-img img { max-height }`.
   El widget de imagen, en cambio, se encoge al tamaño del archivo. */
.service-single-thumb .elementor-widget.sg-img { width: 100%; }
.service-single-thumb .sg-img img { border-radius: 20px; width: 100%; }

/* ── Sección «Aliados de…» (ta-testimonial-one) ──────────────
 * El React pone el tamaño del icono en línea (96px) y las estrellas
 * viven en .rating; el carrusel del template no lleva paginación.
 */
.testi-one-left .sg-fa-icon { font-size: 96px; color: var(--header); line-height: 1; }
.testi-one-left .sg-fa-icon i { font-size: inherit; color: inherit; }
.testi-content .rating { display: flex; gap: 4px; color: #FFA800; font-size: 14px; }
/* Puntos del carrusel de especialidades: el React no los pinta, pero
   sin ellos no se ve que hay más testimonios detrás. */
.sg-testi-slider .sg-testi-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}
.sg-testi-slider .sg-testi-dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: rgba(22, 51, 83, 0.2);
  cursor: pointer;
  transition: all 0.3s;
}
.sg-testi-slider .sg-testi-dots button.is-active {
  width: 26px;
  background: var(--theme);
}

/* ── Tarjetas de área (ta-service-one) ───────────────────────
 * El número lleva delante una línea de 60px (un <svg> en el React)
 * y la flecha es de 23px en blanco.
 */
.service-one-item .serial::before {
  content: "";
  display: inline-block;
  width: 60px;
  height: 1px;
  margin-right: 8px;
  vertical-align: middle;
  background: var(--white);
  opacity: 0.2;
}
.service-one-item .arrow i { font-size: 23px; color: var(--white); }
.service-one-item:hover .arrow i { color: var(--theme); }

/* La flecha del botón de envío va en el círculo azul de .ta-button-01
   (el widget Form no lleva las clases sg-btn). */
.contact-form-one .elementor-button-icon,
.contact-page-one .elementor-button-icon {
  background: var(--header);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.75rem;
}
/* El archivo SVG de la flecha lleva `fill="#163353"` en su <path>: sin
   pintar también el path, la flecha salía azul marino sobre el círculo
   azul marino y el botón parecía tener un punto vacío. */
.contact-form-one .elementor-button-icon svg,
.contact-page-one .elementor-button-icon svg { width: 10px; height: 11px; }
.contact-form-one .elementor-button-icon svg,
.contact-form-one .elementor-button-icon svg path,
.contact-page-one .elementor-button-icon svg,
.contact-page-one .elementor-button-icon svg path { fill: var(--white) !important; }
.contact-form-one .elementor-widget .elementor-button,
.contact-page-one .elementor-widget .elementor-button { display: inline-flex; align-items: center; }

/* Los márgenes inferiores que el template da a un widget con UNA sola
   clase (.mb-10, .mb-50, .sg-hero-text…) los repone adaptador-flex.css:
   Elementor los anula con `.e-con .elementor-widget.elementor-widget`. */

/* Tarjeta de análisis sin imagen: el React solo pinta .sg-test-img
   cuando el análisis trae una (`{item.img && …}`). El contenedor del
   widget se queda igualmente y dejaba un hueco de ~245px. */
/* (la regla generada en adaptador-flex.css es .e-con.e-flex:where(.sg-x)
   .sg-test-img, tres clases: hay que igualarla para poder ocultarla) */
.e-con.e-flex.sg-test-img:not(:has(img)) { display: none; }

/* Lista de viñetas del contenido: el template separa cada <li> 16px
   (.ser-single-feaure li), pero el widget Icon List trae su propia
   regla con más peso y las dejaba pegadas. */
.sg-lista.ser-single-feaure .elementor-icon-list-items > .elementor-icon-list-item {
  margin-bottom: 16px;
}
.sg-lista.ser-single-feaure .elementor-icon-list-items > .elementor-icon-list-item:last-child {
  margin-bottom: 0;
}

/* Número del paso: círculo rosa con la cifra en azul (.sg-step .n).
   El widget hereda el blanco de .sg-step y la cifra se perdía. */
.sg-step .elementor-widget.n,
.sg-step .elementor-widget.n p { color: var(--header); }

/* ── Tamaño del texto en móvil ────────────────────────────────
 * El template baja el cuerpo a 14px por debajo de 768 (`body, p, li`),
 * pero el kit de Elementor escribe el tamaño sobre `.elementor-kit-N`
 * (una clase) y gana a `body` (un elemento): en el móvil todo el sitio
 * salía un punto más grande que el React, y cada párrafo ocupaba una
 * línea de más.
 */
@media (max-width: 767px) {
  body[class*="elementor-kit"] { font-size: 14px; line-height: 24px; }
}

/* ── Fichas de sede (.sg-sedes) ──────────────────────────────
 * El template pinta `.sg-sedes li a`; aquí cada ficha es un contenedor
 * con un botón dentro. La activa lleva el fondo rosa que el React
 * aplica con un estilo en línea.
 */
.sg-sedes .elementor-widget.sg-sede-enlace .elementor-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 30px;
  background: var(--white);
  color: var(--header);
  font-weight: 700;
  box-shadow: var(--box-shadow);
  cursor: pointer;
  transition: all 0.3s;
}
.sg-sedes .elementor-widget.sg-sede-enlace .elementor-button i { color: var(--theme); }
.sg-sedes .elementor-widget.sg-sede-enlace .elementor-button:hover,
.sg-sedes .sg-sede-item.is-active .elementor-widget.sg-sede-enlace .elementor-button {
  background: var(--theme);
  color: var(--white);
}
.sg-sedes .elementor-widget.sg-sede-enlace .elementor-button:hover i,
.sg-sedes .sg-sede-item.is-active .elementor-widget.sg-sede-enlace .elementor-button i { color: var(--white); }

/* Los desplegables ya traen su flecha como fondo (la del template);
   Elementor añade otra en `.select-caret-down-wrapper` y se veían dos. */
.contact-form-one .select-caret-down-wrapper,
.contact-page-one .select-caret-down-wrapper,
.sg-form-cotizacion .select-caret-down-wrapper { display: none; }

/* ── Migas de la cabecera interna ────────────────────────────
 * El template las maqueta como `.ta-breadcrumb ul { display:flex }`,
 * y aquí no hay <ul>: son contenedores. Sin esto cada miga caía en su
 * propia línea («Inicio /» ⏎ «Análisis /» ⏎ «Fertilidad…»).
 */
.e-con.sg-crumbs {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  width: auto;
  padding: 5px 0;
}
.e-con.sg-crumb {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  width: auto;
}
.sg-crumb .sg-i i { font-size: 16px; }

/* ── Paneles NIPT: todos los «Consultar» a la misma altura ───
 * La tarjeta es una columna flexible; el botón se empuja al fondo para
 * que quede al mismo nivel en las cuatro, tengan el texto que tengan.
 */
/* El div del widget es `display: contents`, así que el margen tiene que
   ir en el propio enlace: es él quien es hijo flexible de la tarjeta. */
.sg-panel .elementor-widget.sg-wa-btn .elementor-button { margin-top: auto; }

/* Los enlaces de una lista heredan el color de su widget: si no, se
   quedan con el color global de Elementor y las tarjetas de contacto
   —texto azul marino sobre tarjeta azul marino— se volvían ilegibles.
   El template las marca con `.text-white`, que va en el widget. */
/* Lleva !important porque la tipografía del widget genera una regla de
   cuatro clases (`.elementor-47 .elementor-element-xxxx .elementor-icon-
   list-text`) que se imprime después de esta hoja. */
.elementor-widget.sg-lista .elementor-icon-list-item,
.elementor-widget.sg-lista .elementor-icon-list-item > a,
.elementor-widget.sg-lista .elementor-icon-list-item > a:hover,
.elementor-widget.sg-lista .elementor-icon-list-text { color: inherit !important; }

/* Submenú: el template lo pinta en azul marino (`.nav-menu .sub-menu >
   li > a`). Elementor escribe el color global del kit sobre una regla de
   cuatro clases, así que hace falta !important, igual que en el menú. */
.sg-nav .elementor-nav-menu--dropdown a,
.sg-nav .elementor-nav-menu--dropdown a:focus,
.sg-nav .elementor-nav-menu .sub-menu a { color: var(--header) !important; }
.sg-nav .elementor-nav-menu--dropdown a:hover,
.sg-nav .elementor-nav-menu .sub-menu a:hover { color: var(--theme) !important; }

/* ── Menú desplegable (móvil y tableta) ──────────────────────
 * Mismos valores que `.mob-nav` del template: una fila por enlace, con
 * separador, y el submenú indentado debajo de su padre.
 */
/* El panel del React es rosa palo, con sombra (.mobile-drawer). */
.sg-nav .elementor-nav-menu--dropdown {
  background: #FBF3F6;
  box-shadow: 0 20px 60px rgba(26, 26, 46, 0.15);
}
.sg-nav .elementor-nav-menu--dropdown .elementor-nav-menu { display: block; }
.sg-nav .elementor-nav-menu--dropdown .elementor-nav-menu li { display: block; width: 100%; }
.sg-nav .elementor-nav-menu--dropdown .elementor-nav-menu > li { border-bottom: 1px solid var(--border); }
.sg-nav .elementor-nav-menu--dropdown .elementor-nav-menu > li:last-child { border-bottom: none; }
.sg-nav .elementor-nav-menu--dropdown a.elementor-item,
.sg-nav .elementor-nav-menu--dropdown a.elementor-sub-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  font-size: 16px;
  font-weight: 500;
  font-family: var(--header-font);
  color: var(--header) !important;
  white-space: normal;
  background: none;
}
.sg-nav .elementor-nav-menu--dropdown a.elementor-sub-item {
  padding-left: 30px;
  font-size: 15px;
  font-weight: 400;
  color: var(--text) !important;
}
.sg-nav .elementor-nav-menu--dropdown a.elementor-item:hover,
.sg-nav .elementor-nav-menu--dropdown a.elementor-sub-item:hover { color: var(--theme) !important; }

/* El icono del menú móvil es el del React: cuatro formas (tres cuadrados
   redondeados y un círculo), no las tres rayas de Elementor. Se pinta
   como máscara para no tocar el marcado del widget. */
.sg-nav .elementor-menu-toggle i,
.sg-nav .elementor-menu-toggle svg { display: none; }
.sg-nav .elementor-menu-toggle::before {
  content: "";
  width: 22px;
  height: 22px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'><path d='M19.4716 0H14.6316C13.9606 0 13.3171 0.266553 12.8426 0.74102C12.3681 1.21549 12.1016 1.859 12.1016 2.53V7.37C12.1016 7.70224 12.167 8.03123 12.2941 8.33819C12.4213 8.64514 12.6077 8.92404 12.8426 9.15898C13.0775 9.39391 13.3564 9.58027 13.6634 9.70741C13.9703 9.83456 14.2993 9.9 14.6316 9.9H19.4716C19.8038 9.9 20.1328 9.83456 20.4398 9.70741C20.7467 9.58027 21.0256 9.39391 21.2606 9.15898C21.4955 8.92404 21.6818 8.64514 21.809 8.33819C21.9361 8.03123 22.0016 7.70224 22.0016 7.37V2.53C22.0016 1.859 21.735 1.21549 21.2606 0.74102C20.7861 0.266553 20.1426 0 19.4716 0ZM19.8016 7.37C19.8031 7.41375 19.7956 7.45735 19.7796 7.49808C19.7635 7.53881 19.7393 7.57581 19.7083 7.60676C19.6774 7.63772 19.6404 7.66197 19.5997 7.67801C19.5589 7.69405 19.5153 7.70153 19.4716 7.7H14.6316C14.5878 7.70153 14.5442 7.69405 14.5035 7.67801C14.4628 7.66197 14.4258 7.63772 14.3948 7.60676C14.3638 7.57581 14.3396 7.53881 14.3236 7.49808C14.3075 7.45735 14.3 7.41375 14.3016 7.37V2.53C14.3 2.48625 14.3075 2.44265 14.3236 2.40192C14.3396 2.36119 14.3638 2.32419 14.3948 2.29324C14.4258 2.26228 14.4628 2.23803 14.5035 2.22199C14.5442 2.20595 14.5878 2.19846 14.6316 2.2H19.4716C19.5153 2.19846 19.5589 2.20595 19.5997 2.22199C19.6404 2.23803 19.6774 2.26228 19.7083 2.29324C19.7393 2.32419 19.7635 2.36119 19.7796 2.40192C19.7956 2.44265 19.8031 2.48625 19.8016 2.53V7.37Z' fill='black'/><path d='M7.37001 12.1001H2.53C2.19776 12.1001 1.86877 12.1655 1.56181 12.2927C1.25486 12.4198 0.975953 12.6062 0.741021 12.8411C0.506088 13.076 0.319729 13.355 0.192585 13.6619C0.0654403 13.9689 0 14.2979 0 14.6301V19.4701C0 20.1411 0.266553 20.7846 0.741021 21.2591C1.21549 21.7335 1.859 22.0001 2.53 22.0001H7.37001C7.70225 22.0001 8.03125 21.9347 8.3382 21.8075C8.64515 21.6804 8.92406 21.494 9.15899 21.2591C9.39392 21.0241 9.58028 20.7452 9.70743 20.4383C9.83457 20.1313 9.90001 19.8023 9.90001 19.4701V14.6301C9.90001 14.2979 9.83457 13.9689 9.70743 13.6619C9.58028 13.355 9.39392 13.076 9.15899 12.8411C8.92406 12.6062 8.64515 12.4198 8.3382 12.2927C8.03125 12.1655 7.70225 12.1001 7.37001 12.1001ZM7.70001 19.4701C7.70155 19.5138 7.69406 19.5574 7.67802 19.5982C7.66198 19.6389 7.63773 19.6759 7.60677 19.7069C7.57582 19.7378 7.53882 19.7621 7.49809 19.7781C7.45736 19.7941 7.41376 19.8016 7.37001 19.8001H2.53C2.48625 19.8016 2.44265 19.7941 2.40192 19.7781C2.36119 19.7621 2.32419 19.7378 2.29324 19.7069C2.26228 19.6759 2.23803 19.6389 2.22199 19.5982C2.20595 19.5574 2.19847 19.5138 2.2 19.4701V14.6301C2.19847 14.5863 2.20595 14.5427 2.22199 14.502C2.23803 14.4613 2.26228 14.4243 2.29324 14.3933C2.32419 14.3624 2.36119 14.3381 2.40192 14.3221C2.44265 14.306 2.48625 14.2986 2.53 14.3001H7.37001C7.41376 14.2986 7.45736 14.306 7.49809 14.3221C7.53882 14.3381 7.57582 14.3624 7.60677 14.3933C7.63773 14.4243 7.66198 14.4613 7.67802 14.502C7.69406 14.5427 7.70155 14.5863 7.70001 14.6301V19.4701Z' fill='black'/><path d='M7.37001 0H2.53C1.859 0 1.21549 0.266553 0.741021 0.74102C0.266553 1.21549 0 1.859 0 2.53V7.37C0 7.70224 0.0654403 8.03123 0.192585 8.33819C0.319729 8.64514 0.506088 8.92404 0.741021 9.15898C1.21549 9.63344 1.859 9.9 2.53 9.9H7.37001C7.70225 9.9 8.03125 9.83456 8.3382 9.70741C8.64515 9.58027 8.92406 9.39391 9.15899 9.15898C9.39392 8.92404 9.58028 8.64514 9.70743 8.33819C9.83457 8.03123 9.90001 7.70224 9.90001 7.37V2.53C9.90001 2.19776 9.83457 1.86876 9.70743 1.56181C9.58028 1.25486 9.39392 0.975952 9.15899 0.74102C8.92406 0.506087 8.64515 0.319729 8.3382 0.192585C8.03125 0.0654402 7.70225 0 7.37001 0ZM7.70001 7.37C7.70155 7.41375 7.69406 7.45735 7.67802 7.49808C7.66198 7.53881 7.63773 7.57581 7.60677 7.60676C7.57582 7.63772 7.53882 7.66197 7.49809 7.67801C7.45736 7.69405 7.41376 7.70153 7.37001 7.7H2.53C2.48625 7.70153 2.44265 7.69405 2.40192 7.67801C2.36119 7.66197 2.32419 7.63772 2.29324 7.60676C2.26228 7.57581 2.23803 7.53881 2.22199 7.49808C2.20595 7.45735 2.19847 7.41375 2.2 7.37V2.53C2.19847 2.48625 2.20595 2.44265 2.22199 2.40192C2.23803 2.36119 2.26228 2.32419 2.29324 2.29324C2.32419 2.26228 2.36119 2.23803 2.40192 2.22199C2.44265 2.20595 2.48625 2.19846 2.53 2.2H7.37001C7.41376 2.19846 7.45736 2.20595 7.49809 2.22199C7.53882 2.23803 7.57582 2.26228 7.60677 2.29324C7.63773 2.32419 7.66198 2.36119 7.67802 2.40192C7.69406 2.44265 7.70155 2.48625 7.70001 2.53V7.37Z' fill='black'/><path d='M17.0516 12.1001C16.0726 12.1001 15.1155 12.3904 14.3015 12.9343C13.4875 13.4782 12.853 14.2513 12.4784 15.1558C12.1037 16.0603 12.0057 17.0556 12.1967 18.0158C12.3877 18.976 12.8591 19.858 13.5514 20.5503C14.2437 21.2425 15.1257 21.714 16.0859 21.905C17.0461 22.096 18.0414 21.998 18.9459 21.6233C19.8504 21.2486 20.6234 20.6142 21.1674 19.8002C21.7113 18.9861 22.0016 18.0291 22.0016 17.0501C21.9987 15.7382 21.4762 14.4808 20.5485 13.5531C19.6209 12.6255 18.3635 12.103 17.0516 12.1001ZM17.0516 19.8001C16.5077 19.8001 15.976 19.6388 15.5238 19.3366C15.0715 19.0345 14.719 18.605 14.5109 18.1025C14.3028 17.6 14.2483 17.047 14.3544 16.5136C14.4605 15.9801 14.7224 15.4901 15.107 15.1056C15.4916 14.721 15.9816 14.459 16.5151 14.3529C17.0485 14.2468 17.6015 14.3013 18.104 14.5094C18.6065 14.7176 19.0359 15.07 19.3381 15.5223C19.6403 15.9745 19.8016 16.5062 19.8016 17.0501C19.8016 17.7794 19.5118 18.4789 18.9961 18.9946C18.4804 19.5104 17.7809 19.8001 17.0516 19.8001Z' fill='black'/></svg>") no-repeat center / contain;
  mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'><path d='M19.4716 0H14.6316C13.9606 0 13.3171 0.266553 12.8426 0.74102C12.3681 1.21549 12.1016 1.859 12.1016 2.53V7.37C12.1016 7.70224 12.167 8.03123 12.2941 8.33819C12.4213 8.64514 12.6077 8.92404 12.8426 9.15898C13.0775 9.39391 13.3564 9.58027 13.6634 9.70741C13.9703 9.83456 14.2993 9.9 14.6316 9.9H19.4716C19.8038 9.9 20.1328 9.83456 20.4398 9.70741C20.7467 9.58027 21.0256 9.39391 21.2606 9.15898C21.4955 8.92404 21.6818 8.64514 21.809 8.33819C21.9361 8.03123 22.0016 7.70224 22.0016 7.37V2.53C22.0016 1.859 21.735 1.21549 21.2606 0.74102C20.7861 0.266553 20.1426 0 19.4716 0ZM19.8016 7.37C19.8031 7.41375 19.7956 7.45735 19.7796 7.49808C19.7635 7.53881 19.7393 7.57581 19.7083 7.60676C19.6774 7.63772 19.6404 7.66197 19.5997 7.67801C19.5589 7.69405 19.5153 7.70153 19.4716 7.7H14.6316C14.5878 7.70153 14.5442 7.69405 14.5035 7.67801C14.4628 7.66197 14.4258 7.63772 14.3948 7.60676C14.3638 7.57581 14.3396 7.53881 14.3236 7.49808C14.3075 7.45735 14.3 7.41375 14.3016 7.37V2.53C14.3 2.48625 14.3075 2.44265 14.3236 2.40192C14.3396 2.36119 14.3638 2.32419 14.3948 2.29324C14.4258 2.26228 14.4628 2.23803 14.5035 2.22199C14.5442 2.20595 14.5878 2.19846 14.6316 2.2H19.4716C19.5153 2.19846 19.5589 2.20595 19.5997 2.22199C19.6404 2.23803 19.6774 2.26228 19.7083 2.29324C19.7393 2.32419 19.7635 2.36119 19.7796 2.40192C19.7956 2.44265 19.8031 2.48625 19.8016 2.53V7.37Z' fill='black'/><path d='M7.37001 12.1001H2.53C2.19776 12.1001 1.86877 12.1655 1.56181 12.2927C1.25486 12.4198 0.975953 12.6062 0.741021 12.8411C0.506088 13.076 0.319729 13.355 0.192585 13.6619C0.0654403 13.9689 0 14.2979 0 14.6301V19.4701C0 20.1411 0.266553 20.7846 0.741021 21.2591C1.21549 21.7335 1.859 22.0001 2.53 22.0001H7.37001C7.70225 22.0001 8.03125 21.9347 8.3382 21.8075C8.64515 21.6804 8.92406 21.494 9.15899 21.2591C9.39392 21.0241 9.58028 20.7452 9.70743 20.4383C9.83457 20.1313 9.90001 19.8023 9.90001 19.4701V14.6301C9.90001 14.2979 9.83457 13.9689 9.70743 13.6619C9.58028 13.355 9.39392 13.076 9.15899 12.8411C8.92406 12.6062 8.64515 12.4198 8.3382 12.2927C8.03125 12.1655 7.70225 12.1001 7.37001 12.1001ZM7.70001 19.4701C7.70155 19.5138 7.69406 19.5574 7.67802 19.5982C7.66198 19.6389 7.63773 19.6759 7.60677 19.7069C7.57582 19.7378 7.53882 19.7621 7.49809 19.7781C7.45736 19.7941 7.41376 19.8016 7.37001 19.8001H2.53C2.48625 19.8016 2.44265 19.7941 2.40192 19.7781C2.36119 19.7621 2.32419 19.7378 2.29324 19.7069C2.26228 19.6759 2.23803 19.6389 2.22199 19.5982C2.20595 19.5574 2.19847 19.5138 2.2 19.4701V14.6301C2.19847 14.5863 2.20595 14.5427 2.22199 14.502C2.23803 14.4613 2.26228 14.4243 2.29324 14.3933C2.32419 14.3624 2.36119 14.3381 2.40192 14.3221C2.44265 14.306 2.48625 14.2986 2.53 14.3001H7.37001C7.41376 14.2986 7.45736 14.306 7.49809 14.3221C7.53882 14.3381 7.57582 14.3624 7.60677 14.3933C7.63773 14.4243 7.66198 14.4613 7.67802 14.502C7.69406 14.5427 7.70155 14.5863 7.70001 14.6301V19.4701Z' fill='black'/><path d='M7.37001 0H2.53C1.859 0 1.21549 0.266553 0.741021 0.74102C0.266553 1.21549 0 1.859 0 2.53V7.37C0 7.70224 0.0654403 8.03123 0.192585 8.33819C0.319729 8.64514 0.506088 8.92404 0.741021 9.15898C1.21549 9.63344 1.859 9.9 2.53 9.9H7.37001C7.70225 9.9 8.03125 9.83456 8.3382 9.70741C8.64515 9.58027 8.92406 9.39391 9.15899 9.15898C9.39392 8.92404 9.58028 8.64514 9.70743 8.33819C9.83457 8.03123 9.90001 7.70224 9.90001 7.37V2.53C9.90001 2.19776 9.83457 1.86876 9.70743 1.56181C9.58028 1.25486 9.39392 0.975952 9.15899 0.74102C8.92406 0.506087 8.64515 0.319729 8.3382 0.192585C8.03125 0.0654402 7.70225 0 7.37001 0ZM7.70001 7.37C7.70155 7.41375 7.69406 7.45735 7.67802 7.49808C7.66198 7.53881 7.63773 7.57581 7.60677 7.60676C7.57582 7.63772 7.53882 7.66197 7.49809 7.67801C7.45736 7.69405 7.41376 7.70153 7.37001 7.7H2.53C2.48625 7.70153 2.44265 7.69405 2.40192 7.67801C2.36119 7.66197 2.32419 7.63772 2.29324 7.60676C2.26228 7.57581 2.23803 7.53881 2.22199 7.49808C2.20595 7.45735 2.19847 7.41375 2.2 7.37V2.53C2.19847 2.48625 2.20595 2.44265 2.22199 2.40192C2.23803 2.36119 2.26228 2.32419 2.29324 2.29324C2.32419 2.26228 2.36119 2.23803 2.40192 2.22199C2.44265 2.20595 2.48625 2.19846 2.53 2.2H7.37001C7.41376 2.19846 7.45736 2.20595 7.49809 2.22199C7.53882 2.23803 7.57582 2.26228 7.60677 2.29324C7.63773 2.32419 7.66198 2.36119 7.67802 2.40192C7.69406 2.44265 7.70155 2.48625 7.70001 2.53V7.37Z' fill='black'/><path d='M17.0516 12.1001C16.0726 12.1001 15.1155 12.3904 14.3015 12.9343C13.4875 13.4782 12.853 14.2513 12.4784 15.1558C12.1037 16.0603 12.0057 17.0556 12.1967 18.0158C12.3877 18.976 12.8591 19.858 13.5514 20.5503C14.2437 21.2425 15.1257 21.714 16.0859 21.905C17.0461 22.096 18.0414 21.998 18.9459 21.6233C19.8504 21.2486 20.6234 20.6142 21.1674 19.8002C21.7113 18.9861 22.0016 18.0291 22.0016 17.0501C21.9987 15.7382 21.4762 14.4808 20.5485 13.5531C19.6209 12.6255 18.3635 12.103 17.0516 12.1001ZM17.0516 19.8001C16.5077 19.8001 15.976 19.6388 15.5238 19.3366C15.0715 19.0345 14.719 18.605 14.5109 18.1025C14.3028 17.6 14.2483 17.047 14.3544 16.5136C14.4605 15.9801 14.7224 15.4901 15.107 15.1056C15.4916 14.721 15.9816 14.459 16.5151 14.3529C17.0485 14.2468 17.6015 14.3013 18.104 14.5094C18.6065 14.7176 19.0359 15.07 19.3381 15.5223C19.6403 15.9745 19.8016 16.5062 19.8016 17.0501C19.8016 17.7794 19.5118 18.4789 18.9961 18.9946C18.4804 19.5104 17.7809 19.8001 17.0516 19.8001Z' fill='black'/></svg>") no-repeat center / contain;
}
/* Con el menú abierto, la X de cerrar. */
.sg-nav .elementor-menu-toggle.elementor-active::before {
  -webkit-mask: none;
  mask: none;
  background: none;
  content: "\00d7";
  font-size: 30px;
  line-height: 22px;
  font-weight: 300;
}