/* Cardio Corazón — ajustes propios sobre el tema.
 *
 * Feature 002-copy-seo-cardiologia, fase 2.
 *
 * La plantilla usaba etiquetas de encabezado como recurso visual: los números de
 * los contadores venían dentro de <h1> y los antetítulos de sección dentro de <h6>.
 * Eso dejaba 9 <h1> en la portada y 11 en la página institucional, y un documento
 * sin jerarquía posible.
 *
 * Estas clases separan las dos cosas: la etiqueta pasa a ser la que corresponde por
 * significado, y la clase conserva la tipografía del nivel que se veía antes.
 * Toda la tipografía del tema viene de variables CSS, así que replicarla es exacto.
 */

.cc-t-h1,
.cc-t-h2,
.cc-t-h3,
.cc-t-h4,
.cc-t-h5,
.cc-t-h6 {
  font-style: normal;
  text-decoration: none;
}

.cc-t-h1 {
  font-family: var(--theme-font-h1_font-family);
  font-size: var(--theme-font-h1_font-size);
  font-weight: var(--theme-font-h1_font-weight);
  font-style: var(--theme-font-h1_font-style);
  line-height: var(--theme-font-h1_line-height);
  text-decoration: var(--theme-font-h1_text-decoration);
  text-transform: var(--theme-font-h1_text-transform);
  letter-spacing: var(--theme-font-h1_letter-spacing);
  margin-top: var(--theme-font-h1_margin-top);
  margin-bottom: var(--theme-font-h1_margin-bottom);
}

.cc-t-h2 {
  font-family: var(--theme-font-h2_font-family);
  font-size: var(--theme-font-h2_font-size);
  font-weight: var(--theme-font-h2_font-weight);
  font-style: var(--theme-font-h2_font-style);
  line-height: var(--theme-font-h2_line-height);
  text-decoration: var(--theme-font-h2_text-decoration);
  text-transform: var(--theme-font-h2_text-transform);
  letter-spacing: var(--theme-font-h2_letter-spacing);
  margin-top: var(--theme-font-h2_margin-top);
  margin-bottom: var(--theme-font-h2_margin-bottom);
}

.cc-t-h3 {
  font-family: var(--theme-font-h3_font-family);
  font-size: var(--theme-font-h3_font-size);
  font-weight: var(--theme-font-h3_font-weight);
  font-style: var(--theme-font-h3_font-style);
  line-height: var(--theme-font-h3_line-height);
  text-decoration: var(--theme-font-h3_text-decoration);
  text-transform: var(--theme-font-h3_text-transform);
  letter-spacing: var(--theme-font-h3_letter-spacing);
  margin-top: var(--theme-font-h3_margin-top);
  margin-bottom: var(--theme-font-h3_margin-bottom);
}

.cc-t-h4 {
  font-family: var(--theme-font-h4_font-family);
  font-size: var(--theme-font-h4_font-size);
  font-weight: var(--theme-font-h4_font-weight);
  font-style: var(--theme-font-h4_font-style);
  line-height: var(--theme-font-h4_line-height);
  text-decoration: var(--theme-font-h4_text-decoration);
  text-transform: var(--theme-font-h4_text-transform);
  letter-spacing: var(--theme-font-h4_letter-spacing);
  margin-top: var(--theme-font-h4_margin-top);
  margin-bottom: var(--theme-font-h4_margin-bottom);
}

.cc-t-h5 {
  font-family: var(--theme-font-h5_font-family);
  font-size: var(--theme-font-h5_font-size);
  font-weight: var(--theme-font-h5_font-weight);
  font-style: var(--theme-font-h5_font-style);
  line-height: var(--theme-font-h5_line-height);
  text-decoration: var(--theme-font-h5_text-decoration);
  text-transform: var(--theme-font-h5_text-transform);
  letter-spacing: var(--theme-font-h5_letter-spacing);
  margin-top: var(--theme-font-h5_margin-top);
  margin-bottom: var(--theme-font-h5_margin-bottom);
}

.cc-t-h6 {
  font-family: var(--theme-font-h6_font-family);
  font-size: var(--theme-font-h6_font-size);
  font-weight: var(--theme-font-h6_font-weight);
  font-style: var(--theme-font-h6_font-style);
  line-height: var(--theme-font-h6_line-height);
  text-decoration: var(--theme-font-h6_text-decoration);
  text-transform: var(--theme-font-h6_text-transform);
  letter-spacing: var(--theme-font-h6_letter-spacing);
  margin-top: var(--theme-font-h6_margin-top);
  margin-bottom: var(--theme-font-h6_margin-bottom);
}

/* El color de los encabezados lo fija el tema con
 * `h1, h1 a, … h6, h6 a { color: var(--theme-color-title) }`.
 * Al dejar de ser encabezados, estos elementos heredarían el color del texto
 * normal; se lo devolvemos. */
.cc-t-h1,
.cc-t-h2,
.cc-t-h3,
.cc-t-h4,
.cc-t-h5,
.cc-t-h6,
.cc-t-h1 a,
.cc-t-h2 a,
.cc-t-h3 a,
.cc-t-h4 a,
.cc-t-h5 a,
.cc-t-h6 a {
  color: var(--theme-color-title);
}

.cc-t-h1 a:hover,
.cc-t-h2 a:hover,
.cc-t-h3 a:hover,
.cc-t-h4 a:hover,
.cc-t-h5 a:hover,
.cc-t-h6 a:hover {
  color: var(--theme-color-link);
}

/* El tema anula el margen superior del primer encabezado de un contenedor y
 * muestra en bloque los enlaces que cuelgan de uno. Mismo trato. */
.cc-t-h1:first-child,
.cc-t-h2:first-child,
.cc-t-h3:first-child,
.cc-t-h4:first-child,
.cc-t-h5:first-child,
.cc-t-h6:first-child {
  margin-top: 0;
}

.cc-t-h1 > a,
.cc-t-h2 > a,
.cc-t-h3 > a,
.cc-t-h4 > a,
.cc-t-h5 > a,
.cc-t-h6 > a {
  display: block;
}

/* ------------------------------------------------------------------------
 * Feature 004-montaje-blog-cardiologia
 * ------------------------------------------------------------------------ */

/* Las miniaturas de las tarjetas del blog.
 *
 * El tema pinta la miniatura con `.post_layout_classic .post_featured img
 * { width: 100% }` dentro de un contenedor `inline-block`, que se encoge hasta
 * el ancho de su contenido. Antes de que la imagen cargue ese ancho es cero,
 * asi que la tarjeta no reserva sitio y la pagina salta cuando la miniatura
 * llega. En /blog-grid/ eso son cuarenta saltos.
 *
 * Con el contenedor en bloque y la proporcion declarada, el hueco queda
 * reservado desde el primer pintado. */
.posts_container .post_item .post_featured.with_thumb,
.related_wrap .post_featured.with_thumb {
  display: block;
}

.posts_container .post_item .post_featured.with_thumb img,
.related_wrap .post_featured.with_thumb img {
  aspect-ratio: 410 / 230;
  height: auto;
  object-fit: cover;
}

/* Los enlaces de la barra lateral del blog.
 *
 * El complemento los pinta con el color de los titulos y sin subrayado, de modo
 * que no se distinguen de un texto cualquiera. Se les devuelve el color de
 * enlace del tema. */
.sidebar_inner .trx-addons-list-item > a {
  color: var(--theme-color-link);
}

.sidebar_inner .trx-addons-list-item > a:hover {
  color: var(--theme-color-hover);
}

/* El paginador del blog en pantallas angostas.
 *
 * Las casillas del tema miden 50 px y, con cinco páginas más las dos flechas,
 * suman 386 px sobre los 350 disponibles en un teléfono: la flecha de
 * «siguiente» cae sola a una segunda fila. Bajarlas a 46 px con menos separación
 * deja las siete en una línea y mantiene el área de toque por encima del mínimo
 * recomendado de 44 px. */
@media (max-width: 479px) {
  .navigation.pagination .nav-links {
    gap: 4px;
  }

  .navigation.pagination .nav-links .page-numbers {
    width: 2.875rem;
    height: 2.875rem;
    line-height: 2.75rem;
  }
}

/* ------------------------------------------------------------------------
 * Feature 005-iconografia-cardiologia
 * ------------------------------------------------------------------------ */

/* Los iconos del catalogo propio, en `wp-content/uploads/iconos/`.
 *
 * Se insertan siempre como <img> con `width` y `height` iguales al tamano de
 * presentacion: asi el hueco queda reservado desde el primer pintado y la
 * pagina no salta cuando el archivo llega. El archivo que se sirve es del doble
 * de lado, para que se vea nitido en pantallas de alta densidad.
 *
 * Dos maneras de colocarlos, y ninguna pagina mezcla las dos en el mismo bloque:
 *   .cc-icono--arriba  encabeza una seccion, sobre su antetitulo
 *   .cc-icono--lado    abre un parrafo, con el texto corrido a la derecha */

.cc-icono {
  display: inline-block;
  /* El tamano lo trae cada icono en una variable propia. No se usa `auto`: un
   * <img> con ancho automatico se pinta al tamano del archivo, que es el doble
   * del de presentacion para que se vea nitido en pantallas de alta densidad. */
  width: var(--cc-icono-tam, 3rem);
  height: var(--cc-icono-tam, 3rem);
  max-width: 100%;
  object-fit: contain;
  vertical-align: middle;
  flex: none;
}

/* El icono que encabeza una seccion. Al ser inline-block hereda el
 * `text-align` del contenedor, asi que se centra solo en las secciones
 * centradas y queda a la izquierda en las alineadas a la izquierda. */
.cc-icono--arriba {
  margin: 0 0 1.125rem;
}

/* El icono que abre un parrafo.
 *
 * Rejilla de dos columnas en vez de flex: un bloque de texto puede tener varios
 * parrafos, y con flex cada uno seria una columna. Asi el icono ocupa la
 * primera columna y todo el texto se apila en la segunda. */
.cc-icono-fila {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 1.25rem;
  align-items: start;
}

.cc-icono-fila > .cc-icono--lado {
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: start;
  margin-top: 0.25rem;
}

.cc-icono-fila > *:not(.cc-icono) {
  grid-column: 2;
  margin-top: 0;
}

/* El icono en la misma linea que un titulo, dentro de texto corrido. */
.cc-icono-titulo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.cc-icono--titulo {
  flex: none;
}

/* Los iconos que reemplazan a los del tema van dentro de la caja que el tema ya
 * les tenia hecha. Esa caja estaba medida para su propio dibujo, asi que hay que
 * dejarla crecer o el icono se desborda sobre el texto de al lado. */
.elementor-icon .cc-icono,
.elementor-icon-box-icon .cc-icono,
.trx-addons-icon-list-icon .cc-icono {
  max-width: none;
}

/* Estas dos reglas llevan `!important` a proposito.
 *
 * El constructor de paginas emite sus estilos con selectores de cinco clases
 * (`.elementor-43 .elementor-element.elementor-element-281c741a
 * .trx-addons-list-items .trx-addons-icon-wrapper`), y ademas los repite por
 * cada pagina que use el widget. No hay forma razonable de ganarles por
 * especificidad sin encadenar clases falsas, y el objetivo es justamente
 * anularlos: la caja y el disco de color estaban hechos para el dibujo de la
 * plantilla, no para estos iconos. */
.trx-addons-list-items .trx-addons-icon-list-icon.cc-lista,
.trx-addons-list-items .trx-addons-icon-wrapper.cc-lista-caja {
  width: auto !important;
  height: auto !important;
  min-width: 0;
  line-height: 0;
}

/* El disco de color estaba para el tilde blanco de la plantilla. Los iconos del
 * catalogo traen su propio color y encima de ese disco quedan tenidos de azul. */
.trx-addons-list-items .trx-addons-icon-wrapper.cc-lista-caja {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  margin-right: 0.625rem;
}

/* En pantallas angostas el icono que abre un parrafo pasa arriba del texto:
 * una columna de 40 px menos de ancho deja el parrafo demasiado angosto. */
@media (max-width: 767px) {
  .cc-icono-fila {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 1rem;
  }

  .cc-icono-fila > .cc-icono--lado {
    grid-row: auto;
  }

  .cc-icono-fila > *:not(.cc-icono) {
    grid-column: 1;
  }
}

/* El isologo en la cabecera y en el pie.
 *
 * El logo del tema era apaisado (66 x 36) y el constructor de paginas le fijo
 * `max-height: 36px` en cada una de las plantillas de cabecera y pie. El isologo
 * propio es un sello circular: a 36 px de alto queda del tamano de un boton y el
 * nombre en arco es una mancha. Sube a 52 px, que es lo que admite la cabecera
 * de 64 px sin apretarse.
 *
 * Lleva `!important` porque esa regla del tema se emite con tres clases de
 * especificidad y repetida por cada plantilla; no hay forma de ganarle por
 * especificidad sin encadenar clases falsas. */
.logo_image {
  max-height: 52px !important;
  width: auto;
  height: auto;
}

/* En pantallas angostas la cabecera se comprime y el logo baja con ella. */
@media (max-width: 767px) {
  .logo_image {
    max-height: 44px !important;
  }
}

/* Página del Dr. Daniel Jiménez: foto de perfil al costado de la biografía.
 *
 * La maqueta original dejaba la mitad izquierda vacía y el texto alineado a
 * la derecha. Esa mitad ahora lleva su foto, a tamaño grande, como en el
 * sitio anterior del doctor: imagen a la izquierda y texto a la derecha,
 * ambos alineados arriba.
 *
 * Los dos contenedores del constructor que quedan dentro de la columna de
 * texto traen `align-self: flex-end`, un `padding-left` y anchos propios
 * pensados para el diseño anterior; acá se neutralizan para que el texto
 * ocupe toda su columna. */
.cc-perfil-row {
  display: flex;
  align-items: flex-start;
  gap: 3.5rem;
  width: 100%;
}

.cc-perfil-foto {
  flex: 0 0 44%;
  max-width: 44%;
}

.cc-perfil-foto-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 24px;
}

.cc-perfil-texto {
  flex: 1 1 auto;
  min-width: 0;
}

.cc-perfil-texto > .e-con {
  --width: 100%;
  --align-self: stretch;
  --padding-left: 0px;
  --padding-right: 0px;
  width: 100%;
  max-width: 100%;
  align-self: stretch;
}

/* El icono decorativo que abre la biografía sobraba junto a la foto. */
.cc-perfil-texto .cc-icono--arriba {
  display: none;
}

@media (max-width: 1024px) {
  .cc-perfil-row {
    gap: 2.5rem;
  }

  .cc-perfil-foto {
    flex: 0 0 40%;
    max-width: 40%;
  }
}

@media (max-width: 767px) {
  .cc-perfil-row {
    flex-direction: column;
    gap: 1.75rem;
  }

  .cc-perfil-foto {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
  }
}

/* Página del Dr. Daniel Jiménez: títulos y certificaciones.
 *
 * Sección propia, centrada y con el ancho de contenido del tema (1290px),
 * porque va fuera de los contenedores del constructor. Tres tarjetas por
 * fila en escritorio, dos en tablet y una en teléfono. Cada tarjeta abre el
 * certificado completo en una pestaña nueva. */
.cc-certificados {
  display: block;
  width: 100%;
  padding: 3.5rem 0 4.5rem;
  background-color: var(--theme-color-bg_color_2, #F1F3F6);
}

.cc-certificados-inner {
  max-width: var(--container-max-width, 1100px);
  margin: 0 auto;
  padding: 0 20px;
}

.cc-certificados-titulo {
  text-align: center;
  margin: 0 0 1rem;
  color: var(--theme-color-title, #0B1D3A);
  /* el tema corta palabras a la mitad en pantallas angostas */
  hyphens: none;
  word-break: normal;
  overflow-wrap: break-word;
}

.cc-certificados-intro {
  max-width: 860px;
  margin: 0 auto 2.5rem;
  text-align: center;
  color: var(--theme-color-text, #596B88);
}

.cc-certificados-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.cc-certificado-item {
  display: block;
  padding: 14px;
  border-radius: 16px;
  background-color: #FFFFFF;
  box-shadow: 0 6px 24px rgba(11, 29, 58, 0.10);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  /* los diplomas vienen verticales y los cursos apaisados: cada tarjeta se
   * ajusta a su propia imagen en vez de estirarse hasta la más alta de la fila */
  align-self: start;
}

.cc-certificado-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(11, 29, 58, 0.18);
}

.cc-certificado-item img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

@media (max-width: 1024px) {
  .cc-certificados-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

@media (max-width: 600px) {
  .cc-certificados {
    padding: 2.5rem 0 3rem;
  }

  .cc-certificados-titulo {
    font-size: 1.6rem;
    line-height: 1.25;
  }

  .cc-certificados-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

/* Las fichas de los especialistas traen el <h1> en la cabecera y el <h2> de la
 * biografía arranca pegado abajo; los dos títulos se leían como un solo bloque.
 *
 * Los dos abren la página y forman una sola entrada, así que van centrados. El
 * <h2> vive en un contenedor al que la plantilla le da el 85 % del ancho, de
 * modo que centrar el texto sin tocar el ancho lo dejaría centrado sobre otro
 * eje que el <h1>. El ancho viene por variable y con tres clases de
 * especificidad, de ahí el `!important`. */
.elementor-4401 .elementor-element-5c8e37c5,
.elementor-4402 .elementor-element-5c8e37c5 {
  margin-top: 0.75rem;
  --width: 100% !important;
  text-align: center;
}

/* En teléfono el tema partía el apellido a la mitad («Dra. Virginia Ra-mos»). */
.elementor-page-4401 .trx-addons-post-title,
.elementor-page-4402 .trx-addons-post-title {
  hyphens: none;
  word-break: normal;
  overflow-wrap: break-word;
  text-align: center;
}

/* Video de la portada — reemplaza la imagen de la sección «Nuestro enfoque».
 *
 * Se reproduce en silencio y en bucle, porque ningún navegador permite
 * reproducción automática con sonido. Por eso el video está pensado para
 * entenderse mudo: los textos en pantalla llevan el mensaje completo y la
 * voz en off es una capa que se suma cuando el visitante la pide.
 *
 * Hay dos montajes distintos, no un recorte del mismo: el panorámico de
 * escritorio (1920×960) es ilegible en un teléfono, así que en móvil se
 * sirve una versión vertical (810×900) con el texto rediagramado.
 */

.cc-video {
  position: relative;
  margin: 10px 0 22px;
  line-height: 0;
}

.cc-video__player {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  border-radius: 15px;
  background-color: var(--theme-color-bg_color_2, #f1f3f6);
  /* Relieve y aura azul: el bloque tiene que leerse como algo vivo y no
   * como la foto que habia antes. El halo respira despacio, al ritmo del
   * video, no como un aviso parpadeante.
   *
   * La seccion es blanca de punta a punta, asi que el azul va fuerte: un
   * halo tenue se perdia contra el fondo. Son cinco capas: el brillo
   * interior del borde, el filo azul, la sombra que apoya el bloque, el
   * aura cercana y una difusa que tine el blanco alrededor. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 0 0 1px rgba(30, 76, 138, 0.34),
    0 26px 60px -22px rgba(11, 29, 58, 0.55),
    0 0 56px 8px rgba(30, 76, 138, 0.45),
    0 0 120px 28px rgba(30, 76, 138, 0.22);
  animation: cc-video-aureola 4.6s ease-in-out infinite;
}

@keyframes cc-video-aureola {
  0%,
  100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.65),
      0 0 0 1px rgba(30, 76, 138, 0.30),
      0 26px 58px -22px rgba(11, 29, 58, 0.52),
      0 0 52px 6px rgba(30, 76, 138, 0.42),
      0 0 110px 24px rgba(30, 76, 138, 0.20);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.65),
      0 0 0 1px rgba(30, 76, 138, 0.52),
      0 28px 64px -22px rgba(11, 29, 58, 0.58),
      0 0 86px 16px rgba(30, 76, 138, 0.62),
      0 0 150px 38px rgba(30, 76, 138, 0.34);
  }
}

/* El botón nace en el centro del video y con un aura que late, porque el
 * visitante tiene que entender que ahí hay algo para apretar: el video se
 * reproduce en silencio y sin ese gesto nunca escucharía la voz en off.
 * Apenas se usa, se retira a la esquina y deja de llamar la atención. */

.cc-video__sonido {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 112px;
  height: 112px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--theme-color-link, #1e4c8a);
  color: #ffffff;
  font-family: var(--theme-font-button_font-family, Montserrat, sans-serif);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 12px 34px rgba(11, 29, 58, 0.26);
  transform: translate(-50%, -50%);
  animation: cc-video-latido 2.6s ease-in-out infinite;
}

/* Triángulo de "reproducir": lo primero que se ve es un botón de play, para
 * que se entienda de entrada que ahí hay un video. Al activarlo pasa a un
 * ícono de parlante, porque a partir de ahí lo que hace es silenciar. */
.cc-video__sonido-icono {
  width: 32px;
  height: 32px;
  flex: none;
}

.cc-video__sonido-icono--play {
  width: 42px;
  height: 42px;
  margin-left: 5px; /* el triángulo pesa a la izquierda: se recentra a ojo */
}

.cc-video__sonido-icono--parlante {
  display: none;
  width: 22px;
  height: 22px;
}

.cc-video__sonido.es-compacto .cc-video__sonido-icono--play {
  display: none;
}

.cc-video__sonido.es-compacto .cc-video__sonido-icono--parlante {
  display: block;
}

/* El texto nace oculto (el círculo de play ya se explica solo) y solo se
 * muestra cuando el botón se achica a píldora, junto al ícono de parlante. */
.cc-video__sonido-txt {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Dos anillos con distinto retardo: uno solo se lee como un parpadeo. */
.cc-video__sonido::before,
.cc-video__sonido::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--theme-color-link, #1e4c8a);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: cc-video-aura 2.6s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
}

.cc-video__sonido::after {
  animation-delay: 1.3s;
}

@keyframes cc-video-latido {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.04);
  }
}

@keyframes cc-video-aura {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  75%,
  100% {
    transform: scale(1.45);
    opacity: 0;
  }
}

.cc-video__sonido:hover,
.cc-video__sonido:focus-visible {
  color: #ffffff;
  background-color: var(--theme-color-hover, #0b1d3a);
}

/* Ya cumplió: a la esquina, chico, quieto y otra vez con texto (ahora el
 * ícono es un parlante, así que la palabra vuelve a hacer falta). */
.cc-video__sonido.es-compacto {
  left: auto;
  top: auto;
  right: 16px;
  bottom: 16px;
  width: auto;
  height: auto;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 12px;
  font-size: 14px;
  transform: none;
  box-shadow: none;
  opacity: 0.92;
  animation: none;
}

.cc-video__sonido.es-compacto::before,
.cc-video__sonido.es-compacto::after {
  display: none;
}

.cc-video__sonido.es-compacto .cc-video__sonido-icono--parlante {
  width: 17px;
  height: 17px;
}

.cc-video__sonido.es-compacto .cc-video__sonido-txt {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .cc-video__player {
    border-radius: 12px;
  }

  .cc-video__sonido {
    width: 88px;
    height: 88px;
  }

  .cc-video__sonido-icono--play {
    width: 34px;
    height: 34px;
    margin-left: 4px;
  }

  .cc-video__sonido.es-compacto {
    right: 12px;
    bottom: 12px;
    padding: 9px 14px;
    font-size: 13px;
  }
}

/* Quien pidió menos animación no recibe ni latido ni aura. */
@media (prefers-reduced-motion: reduce) {
  .cc-video__player,
  .cc-video__sonido {
    animation: none;
  }

  .cc-video__sonido::before,
  .cc-video__sonido::after {
    display: none;
  }
}

/* ------------------------------------------------------------------------
 * /nosotros/ — alineacion
 * ------------------------------------------------------------------------ */

/* Las fotos de los dos cardiologos, en /nosotros/ y en la portada.
 *
 * El tema las pinta con `object-fit: fill` y sin proporcion declarada, asi que
 * cada tarjeta toma el alto de su archivo: los originales son 900x1124 y
 * 900x1186, y las dos fichas quedaban corridas 20 px una de otra, con el nombre
 * y el cargo a distinta altura. Con la proporcion fija las dos miden igual y el
 * recorte lo resuelve el navegador. */
.trx-addons-tm-image img {
  aspect-ratio: 4 / 5;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Las tarjetas de equipo arrancan todas arriba, aunque el cargo de una ocupe
 * dos lineas y el de la otra una. */
.trx-addons-team-columns .trx-addons-team-item,
.trx-addons-team-wrap .trx-addons-team-item {
  align-self: start;
}

/* La seccion «Quiénes somos».
 *
 * La plantilla la traia en dos columnas que no se hablaban: el titulo encajonado
 * en 406 px a la izquierda, y a la derecha los dos parrafos metidos cada uno en
 * su propia caja, separados por una linea horizontal que no dividia nada. Cada
 * columna empezaba y terminaba a su propia altura.
 *
 * Queda apilado y en una sola columna de lectura: antetitulo, titulo, y los dos
 * parrafos seguidos como un solo bloque de texto.
 *
 * El constructor de paginas no declara `flex-direction` ni el relleno como
 * propiedades, sino como variables (`flex-direction: var(--flex-direction)`),
 * asi que se redefinen las VARIABLES: el resto de su sistema sigue funcionando.
 * El `!important` es porque las emite con tres clases de especificidad. */
.elementor-element-a58bd9a {
  --flex-direction: column !important;
  --gap: 40px 40px !important;
  --row-gap: 40px !important;
  --column-gap: 40px !important;
  --container-widget-width: 100% !important;
  --container-widget-height: initial !important;
  --container-widget-flex-grow: 0 !important;
  --container-widget-align-self: initial !important;
}

/* Los dos bloques son contenedores hijos de un flex en columna: sin ancho
 * declarado se encogen a su contenido en vez de ocupar la fila. El ancho maximo
 * es el mismo para el titulo y para el texto, de modo que comparten el eje, y
 * los dos van centrados en la pagina. */
.elementor-element-fae2c00,
.elementor-element-fe27f60 {
  width: 100%;
  max-width: 800px;
  margin-inline: auto;
  text-align: center;
}

/* La foto del isologo en la recepcion, que encabeza «Quiénes somos». Comparte el
 * ancho del texto para que la seccion tenga un solo eje. */
.cc-foto-seccion {
  display: block;
  width: 100%;
  height: auto;
  max-width: 800px;
  margin: 0 auto 3rem;
  border-radius: 1rem;
}

/* Los dos parrafos, uno detras del otro, como un solo bloque. */
.elementor-element-fe27f60 {
  --flex-direction: column !important;
  --gap: 0px 0px !important;
  --row-gap: 0px !important;
  --column-gap: 0px !important;
  margin-top: 0;
}

/* La linea y el hueco que la plantilla le ponia a cada parrafo eran un recurso
 * de la maqueta original, y aca partian en dos un texto que se lee de corrido. */
.elementor-element-4b7337a,
.elementor-element-cf71fa9 {
  border-top: none !important;
  padding-top: 0 !important;
  width: 100%;
}

.elementor-element-cf71fa9 {
  margin-top: 1.25rem;
}

/* Con las imagenes decorativas fuera, la seccion no necesita los 150 px de aire
 * que tenia arriba y abajo para separarse de ellas. */
.elementor-element-7c6ba20 {
  --padding-top: 100px !important;
  --padding-bottom: 90px !important;
}

@media (max-width: 767px) {
  .elementor-element-a58bd9a {
    --gap: 32px 32px !important;
    --row-gap: 32px !important;
  }
}

/* Las dos fichas de cardiologos de /nosotros/.
 *
 * La rejilla del tema es de cuatro columnas y el centro tiene dos especialistas,
 * asi que las fichas quedaban apretadas contra el margen izquierdo con media
 * pantalla vacia al lado, debajo de un titulo centrado. Con dos columnas
 * centradas y mas anchas el bloque queda equilibrado, y el cargo de la doctora
 * entra en una sola linea. Las fotos son de 900 px de ancho, de modo que a 420
 * siguen sobradas de resolucion. */
/* La rejilla del constructor se configura por variable, no por propiedad
 * (`grid-template-columns: var(--e-con-grid-template-columns)`), asi que se
 * redefine la variable y no la propiedad: asi el resto del sistema del tema
 * sigue funcionando igual. El `!important` es por lo mismo de siempre, que la
 * declaracion original viene con tres clases de especificidad. */
.elementor-element-6ae233d8 {
  --e-con-grid-template-columns: repeat(2, minmax(0, 420px)) !important;
}

/* El centrado no se puede pasar por variable: `--grid-justify-content` la
 * declara el constructor con mas peso, asi que aca va la propiedad directa. */
.elementor-element-6ae233d8 > .e-con-inner {
  justify-content: center !important;
  column-gap: 3.75rem;
}

@media (max-width: 767px) {
  .elementor-element-6ae233d8 {
    --e-con-grid-template-columns: minmax(0, 1fr) !important;
  }

  .elementor-element-6ae233d8 > .e-con-inner {
    row-gap: 2.5rem;
  }
}

/* La seccion «Dos cardiologos internistas».
 *
 * El titulo salia desde el margen izquierdo, el parrafo empezaba a media pagina
 * y las dos fichas iban centradas: tres alineaciones distintas apiladas. Se
 * centran las tres sobre el mismo eje, como la seccion de arriba.
 *
 * El prefijo `.elementor-34` no es decorativo: estos dos identificadores de
 * maqueta tambien existen en las dos fichas de especialistas, que salieron de
 * la misma plantilla. Sin el prefijo, la regla centraba tambien la biografia
 * del cardiologo, que son cinco parrafos de texto corrido. */
.elementor-34 .elementor-element-5c8e37c5,
.elementor-34 .elementor-element-65f53d63 {
  width: 100%;
  max-width: 980px;
  margin-inline: auto;
  text-align: center;
  padding-left: 0;
}

.elementor-34 .elementor-element-65f53d63 {
  max-width: 800px;
}

/* Las fichas de los dos cardiologos, en /nosotros/ y en la portada.
 *
 * El nombre y el cargo venian alineados a la izquierda, debajo de un antetitulo
 * y un titulo centrados. Van al mismo eje que el resto de la seccion. */
.elementor-34 .elementor-element-6ae233d8 .trx-addons-tm-wrapper,
.elementor-47 .elementor-element-d43e5dd .trx-addons-tm-wrapper {
  text-align: center !important;
}

/* ------------------------------------------------------------------------
 * Portada — la seccion «Quién lo atiende»
 * ------------------------------------------------------------------------ */

/* El icono del antetitulo.
 *
 * El widget se encoge hasta el ancho de su contenido y el contenedor lo centra,
 * pero por dentro alinea al inicio: el icono, de 72 px, se pegaba al borde
 * izquierdo de una caja de 156 px y quedaba 42 px a la izquierda del texto que
 * venia a encabezar. Es la unica seccion del sitio donde pasa. */
.elementor-47 .elementor-element-2d4832d {
  text-align: center;
}

/* El titulo entraba a la fuerza en 650 px y se partia en cuatro renglones. Con
 * el mismo ancho que en /nosotros/ se lee en dos. */
.elementor-47 .elementor-element-d74ad36 {
  width: 100% !important;
  max-width: 980px !important;
}

/* La rejilla de las fichas es de tres columnas y el centro tiene dos
 * especialistas: las dos quedaban contra el margen izquierdo, con un tercio de
 * la seccion vacio al lado y el titulo centrado encima. Dos columnas centradas,
 * de la misma medida que en /nosotros/, para que las dos paginas muestren las
 * mismas fichas al mismo tamano.
 *
 * La rejilla se configura por variable, no por propiedad, asi que se redefine
 * la variable; el `!important` es porque el constructor la emite con tres
 * clases de especificidad. */
.elementor-47 .elementor-element-d43e5dd {
  --e-con-grid-template-columns: repeat(2, minmax(0, 420px)) !important;
  justify-content: center;
  column-gap: 3.75rem;
}

@media (max-width: 767px) {
  .elementor-47 .elementor-element-d43e5dd {
    --e-con-grid-template-columns: minmax(0, 1fr) !important;
  }

  .elementor-47 .elementor-element-d43e5dd {
    row-gap: 2.5rem;
  }
}

/* ------------------------------------------------------------------------
 * Estudios — el bloque de precio y su llamada a la accion
 * ------------------------------------------------------------------------ */

/* El bloque con el precio se sumo a la maqueta sin estilo propio, de modo que
 * ocupaba los 1290 px de la seccion mientras el antetitulo, el titulo y el
 * boton iban centrados en 550. Y como no dejaba aire debajo, el boton quedaba
 * a la altura del ultimo renglon: parecia caido dentro de la frase en vez de
 * ser la llamada a la accion de la seccion.
 *
 * Con la misma medida centrada que el resto, los cuatro elementos comparten un
 * solo eje y el boton se lee donde tiene que leerse. */
.cc-precio {
  width: 100%;
  max-width: 800px !important;
  margin-inline: auto;
  margin-bottom: 2.25rem !important;
  text-align: center;
}

/* ------------------------------------------------------------------------
 * /nosotros/ — la foto de la seccion «Tres cosas que definen la consulta»
 * ------------------------------------------------------------------------ */

/* En escritorio la foto es una columna del 40 % que se estira hasta el alto de
 * la caja de al lado, y queda bien. Al apilarse, en cambio, pasa a ocupar todo
 * el ancho con un alto fijo de 250 px: una franja apaisada de la que solo se ve
 * una banda de la fotografia. Cuadrada se ve la escena completa.
 *
 * El alto minimo viene por variable y con tres clases de especificidad, asi que
 * se anula la variable; la proporcion es una propiedad que el tema no declara. */
@media (max-width: 767px) {
  .elementor-34 .elementor-element-828c1ff {
    --min-height: 0px !important;
    aspect-ratio: 1 / 1;
  }
}

/* ------------------------------------------------------------------------
 * Cabecera fija en tableta y telefono
 * ------------------------------------------------------------------------
 *
 * El tema trae una sola fila fija, y esta oculta por debajo de 1280 px: en el
 * telefono habia que volver hasta arriba de todo para abrir el menu. La fila
 * de tableta y telefono es otra (`elementor-hidden-desktop`) y venia suelta.
 *
 * No sirve `position: sticky`: se pega solo mientras su contenedor este a la
 * vista, y el <header> mide 184 px, asi que la barra se iba con el a los dos
 * dedos de scroll. Va fija, y el <header> compensa con un relleno del mismo
 * alto para que nada salte al quedar la fila fuera del flujo. Los dos valores
 * salen de la misma variable justamente para que no se puedan desincronizar.
 *
 * El fondo se declara aca porque en la portada la fila es transparente: sin
 * esto, el contenido se leeria por debajo de la barra al desplazarse. El
 * blanco es el que ya se ve detras de la cabecera en todas las paginas. */

:root {
  --cc-cabecera-fija: 83px;
}

@media (max-width: 767px) {
  :root {
    --cc-cabecera-fija: 75px;
  }
}

@media (max-width: 1279px) {
  header.top_panel > .elementor > .e-con.e-parent.elementor-hidden-desktop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    min-height: var(--cc-cabecera-fija);
    background-color: var(--theme-color-bg_color, #fff);
    box-shadow:
      0 1px 0 rgba(11, 29, 58, 0.08),
      0 8px 20px -12px rgba(11, 29, 58, 0.3);
  }

  header.top_panel {
    padding-top: var(--cc-cabecera-fija);
  }

  /* Un enlace a un ancla dejaba su destino tapado por la barra. */
  :target {
    scroll-margin-top: calc(var(--cc-cabecera-fija) + 12px);
  }
}

/* ------------------------------------------------------------------------
 * Boton de WhatsApp
 * ------------------------------------------------------------------------
 *
 * WhatsApp es el canal principal del consultorio y el sitio no tenia ni un
 * enlace. Va fijo, en las 56 paginas y en los dos tamanos, en el verde de la
 * marca (#25D366) para que se reconozca sin leer nada.
 *
 * El boton de «volver arriba» del tema vive en esa misma esquina: se lo sube
 * por encima del de WhatsApp y se alinean sus centros. Se toca solo el estado
 * `.show`, que es el visible, asi que su animacion de entrada sigue igual. */

.cc-whatsapp {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 8050;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background-color: #25d366;
  color: #fff;
  box-shadow:
    0 10px 26px -8px rgba(11, 29, 58, 0.45),
    0 0 0 1px rgba(11, 29, 58, 0.06);
  transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.cc-whatsapp:hover,
.cc-whatsapp:focus-visible {
  background-color: #1fb457;
  color: #fff;
  transform: translateY(-2px);
  box-shadow:
    0 14px 30px -8px rgba(11, 29, 58, 0.5),
    0 0 0 1px rgba(11, 29, 58, 0.06);
}

.cc-whatsapp__icono {
  display: block;
  width: 30px;
  height: 30px;
  fill: currentColor;
}

body .trx_addons_scroll_to_top.show {
  right: 30px;
  bottom: 92px;
}

@media (max-width: 767px) {
  .cc-whatsapp {
    right: 16px;
    bottom: 16px;
    width: 54px;
    height: 54px;
  }

  .cc-whatsapp__icono {
    width: 28px;
    height: 28px;
  }

  body .trx_addons_scroll_to_top.show {
    right: 22px;
    bottom: 84px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc-whatsapp {
    transition: none;
  }

  .cc-whatsapp:hover,
  .cc-whatsapp:focus-visible {
    transform: none;
  }
}

/* ==========================================================================
   Hero de la portada con video de fondo a sangre completa
   El video ocupa todo el bloque (también detrás de la cabecera, que es
   transparente en la portada). Una capa azul oscura por encima garantiza
   el contraste del texto blanco; es más densa a la izquierda, donde va el H1.
   ========================================================================== */
.cc-hero-con-video {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: min(100svh, 960px);
}
.elementor-47 .elementor-element.cc-hero-con-video:not(.elementor-motion-effects-element-type-background) {
  background-color: #0b1d3a;
}
.cc-hero-video {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.cc-hero-video__player {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cc-hero-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11, 29, 58, 0.6) 0, rgba(11, 29, 58, 0) 220px),
    linear-gradient(90deg, rgba(11, 29, 58, 0.86) 0%, rgba(11, 29, 58, 0.62) 42%, rgba(11, 29, 58, 0.2) 100%);
}
.cc-hero-con-video h1,
.cc-hero-con-video h1 *,
.cc-hero-con-video .elementor-element-11ee84bf .elementor-heading-title {
  color: #fff;
}
.cc-hero-con-video h1 .elementor-repeater-item-544a2ae,
.cc-hero-con-video h1 .elementor-repeater-item-544a2ae * {
  color: #9cc3f5;
}
.cc-hero-con-video h1 { text-shadow: 0 2px 24px rgba(11, 29, 58, 0.35); }

@media (min-width: 1280px) {
  /* El H1 crecía sin techo (7.3% del ancho de la ventana): en monitores
     anchos se volvía gigante y cada palabra caía en su propia línea. Se le
     pone un tope; tablet y celular ya estaban bien y no se tocan. */
  .elementor-47 .elementor-element.elementor-element-51db2969 .trx-addons-advanced-title {
    font-size: clamp(40px, 4.4vw, 74px);
  }
}
/* Sin la foto, la columna derecha solo sostiene las dos tarjetas (van en
   position:absolute), así que se estira a todo el alto del hero. */
.cc-hero-con-video > .elementor-element-1d1e89d6 { align-self: stretch; }

@media (max-width: 767px) {
  .cc-hero-con-video { min-height: 0; }
  /* El video con inset:0 ignora el padding del bloque y arranca en el borde
     real de arriba, quedando tapado por la cabecera fija (blanca, encima).
     Se recorta solo arriba, para que empiece justo debajo de ella; abajo se
     deja como estaba (hasta el borde real del bloque) para que se una sin
     franja con la sección siguiente. */
  .cc-hero-video {
    top: var(--cc-cabecera-fija);
  }
  .cc-hero-video::after {
    background: linear-gradient(180deg, rgba(11, 29, 58, 0.78) 0%, rgba(11, 29, 58, 0.55) 60%, rgba(11, 29, 58, 0.75) 100%);
  }
  .cc-hero-con-video > .elementor-element-1d1e89d6 { min-height: 240px; }
  /* Las tarjetitas quedaban pegadas al borde de abajo del video: un poco de
     aire para que no se vean al ras. */
  .elementor-47 .elementor-element.elementor-element-40a3a4c3 { bottom: 24px; }
}

/* Cabecera de escritorio de la portada: mientras está transparente sobre el
   video, el menú y el teléfono van en blanco. Al hacer scroll la fila recibe
   .sc_layouts_row_fixed_on (fondo blanco) y vuelve a sus colores normales. */
@media (min-width: 1280px) {
  body.page-id-47 header.top_panel .sc_layouts_row_fixed:not(.sc_layouts_row_fixed_on) .trx-addons-menu-link:not(.trx-addons-submenu-link),
  body.page-id-47 header.top_panel .sc_layouts_row_fixed:not(.sc_layouts_row_fixed_on) a[href^="tel:"],
  body.page-id-47 header.top_panel .sc_layouts_row_fixed:not(.sc_layouts_row_fixed_on) a[href^="tel:"] *,
  body.page-id-47 header.top_panel .sc_layouts_row_fixed:not(.sc_layouts_row_fixed_on) .trx-addons-menu-link:not(.trx-addons-submenu-link) * {
    color: #fff;
    fill: currentColor;
  }
}

/* Tarjetas "Estudios / Especialistas" del hero de la portada, a mitad de
   tamaño (las dictaba el tamaño de fuente de H1 del tema, muy grande para
   este lugar). El contenedor está en position:absolute con bottom/right:0,
   así que se ancla ahí al achicarlo, sin dejar huecos. */
.elementor-47 .elementor-element.elementor-element-40a3a4c3 {
  transform: scale(0.5);
  transform-origin: right bottom;
}


/* Tarjetas Duracion/Resultados de los estudios: la imagen se apoya abajo para que queden alineadas */
.elementor-element.elementor-element-ddf593,
.elementor-element.elementor-element-4315db20{margin-top:auto;}


/* ==========================================================================
   Hero de Nosotros: el bloque del H1 pasa a ser un hero a todo el ancho con
   las fotos del consultorio de fondo. Cada foto se ve 2 segundos, entra con un
   fundido y se acerca despacio (efecto Ken Burns). El JS de la pagina solo
   alterna las clases es-activa / es-saliente; el movimiento es CSS.
   ========================================================================== */
.elementor-element.elementor-element-6e3dba2.cc-hero-nosotros {
  --padding-top: 0px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  justify-content: center;
  min-height: clamp(440px, 72svh, 760px);
  background-color: #0b1d3a;
}
/* El contenedor interno crece a todo el alto: el H1 se centra dentro de el.
   Las reglas llevan mas especificidad porque las de la plantilla (img con
   height:auto, justify-content del contenedor) les ganaban. */
.elementor-element.elementor-element-6e3dba2.cc-hero-nosotros > .e-con-inner {
  --justify-content: center;
  justify-content: center;
  padding-inline: 20px;
}
.cc-hero-slides {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.cc-hero-nosotros .cc-hero-slides .cc-hero-slides__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease;
}
.cc-hero-nosotros .cc-hero-slides .cc-hero-slides__img.es-activa { opacity: 1; z-index: 2; }
.cc-hero-nosotros .cc-hero-slides .cc-hero-slides__img.es-saliente { z-index: 1; }
.cc-hero-nosotros .cc-hero-slides .cc-hero-slides__img.es-activa,
.cc-hero-nosotros .cc-hero-slides .cc-hero-slides__img.es-saliente {
  animation: cc-hero-zoom 3s linear forwards;
}
@keyframes cc-hero-zoom {
  from { transform: scale(1); }
  to { transform: scale(1.12); }
}
.cc-hero-slides::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(180deg, rgba(11, 29, 58, 0.55) 0%, rgba(11, 29, 58, 0.4) 50%, rgba(11, 29, 58, 0.7) 100%);
}
.cc-hero-nosotros h1 {
  color: #fff;
  text-shadow: 0 2px 24px rgba(11, 29, 58, 0.45);
}
@media (max-width: 767px) {
  .elementor-element.elementor-element-6e3dba2.cc-hero-nosotros {
    min-height: clamp(320px, 58svh, 520px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cc-hero-nosotros .cc-hero-slides .cc-hero-slides__img.es-activa,
  .cc-hero-nosotros .cc-hero-slides .cc-hero-slides__img.es-saliente { animation: none; }
}


/* ==========================================================================
   Nombre del doctor junto al isologo, en las dos cabeceras (escritorio y
   tablet/celular). Va como <span> fuera del enlace del logo: es texto de
   marca, no un heading, asi que no toca la jerarquia de titulos.
   ========================================================================== */
header.top_panel .elementor-widget-trx_sc_layouts_logo .elementor-widget-container {
  display: flex;
  align-items: center;
}
.cc-marca-nombre {
  margin-left: 12px;
  color: var(--theme-color-text_dark, #0b1d3a);
  font-family: var(--theme-font-button_font-family, Montserrat, sans-serif);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Portada: mientras la cabecera de escritorio esta transparente sobre el
   video, el nombre va en blanco como el menu. */
body.page-id-47 header.top_panel .sc_layouts_row_fixed:not(.sc_layouts_row_fixed_on) .cc-marca-nombre {
  color: #fff;
}
@media (max-width: 767px) {
  .cc-marca-nombre {
    margin-left: 10px;
    font-size: 13px;
    letter-spacing: 0.02em;
  }
}


/* ==========================================================================
   Contacto: en lugar del formulario (el sitio no usa correo), una tarjeta que
   lleva directo a WhatsApp con el mensaje ya escrito. El chat de muestra es
   decorativo (aria-hidden); el enlace real es el boton.
   ========================================================================== */
.cc-contacto-wa { width: 100%; }
.cc-contacto-wa__tarjeta {
  padding: clamp(24px, 3vw, 40px);
  border-radius: 24px;
  background: #fff;
  box-shadow:
    0 24px 60px -28px rgba(11, 29, 58, 0.35),
    0 0 0 1px rgba(11, 29, 58, 0.06);
}
.cc-contacto-wa__etiqueta {
  display: inline-block;
  margin: 0 0 14px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #e7f8ee;
  color: #15803d;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cc-contacto-wa__titulo {
  margin: 0 0 12px;
  color: #0b1d3a;
  font-size: clamp(26px, 2.4vw, 36px);
  line-height: 1.15;
}
.cc-contacto-wa__texto {
  margin: 0 0 24px;
  color: #4a5568;
  font-size: 17px;
  line-height: 1.6;
}
.cc-contacto-wa__chat {
  margin: 0 0 24px;
  overflow: hidden;
  border-radius: 18px;
  background: #efeae2;
}
.cc-contacto-wa__chat-cabecera {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #075e54;
  color: #fff;
}
.cc-contacto-wa__avatar {
  width: 40px;
  height: 40px;
  padding: 4px;
  border-radius: 50%;
  background: #fff;
  object-fit: contain;
}
.cc-contacto-wa__chat-cabecera strong { display: block; font-size: 15px; line-height: 1.2; }
.cc-contacto-wa__chat-cabecera small { display: block; font-size: 13px; opacity: 0.8; }
.cc-contacto-wa__chat-cuerpo {
  display: flex;
  justify-content: flex-end;
  padding: 22px 16px 26px;
}
.cc-contacto-wa__burbuja {
  position: relative;
  max-width: 88%;
  margin: 0;
  padding: 10px 14px 18px;
  border-radius: 12px 0 12px 12px;
  background: #d9fdd3;
  color: #111b21;
  font-size: 16px;
  line-height: 1.45;
  box-shadow: 0 1px 1px rgba(11, 29, 58, 0.12);
}
.cc-contacto-wa__visto {
  position: absolute;
  right: 10px;
  bottom: 3px;
  color: #53bdeb;
  font-size: 12px;
  letter-spacing: -2px;
}
.cc-contacto-wa__boton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 18px 24px;
  border-radius: 14px;
  background: #15803d;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 14px 30px -14px rgba(21, 128, 61, 0.8);
  transition: background-color 0.25s ease, transform 0.25s ease;
}
.cc-contacto-wa__boton:hover,
.cc-contacto-wa__boton:focus-visible {
  background: #116631;
  color: #fff;
  transform: translateY(-2px);
}
.cc-contacto-wa__icono { width: 26px; height: 26px; fill: currentColor; flex: none; }
.cc-contacto-wa__nota {
  margin: 16px 0 0;
  color: #4a5568;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}
.cc-contacto-wa__nota a { font-weight: 700; }
@media (max-width: 767px) {
  .cc-contacto-wa__texto { font-size: 16px; }
  .cc-contacto-wa__boton { font-size: 17px; padding: 16px 18px; }
}


/* El nombre va dentro del enlace del logo: tocarlo lleva al inicio. El enlace
   pone isologo y nombre en fila. */
header.top_panel a.sc_layouts_logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}