/* 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;
  gap: 10px;
  margin: 0;
  padding: 17px 30px;
  border: 0;
  border-radius: 12px;
  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;
}

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

/* 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: 12px;
  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 y quieto. */
.cc-video__sonido.es-compacto {
  left: auto;
  top: auto;
  right: 16px;
  bottom: 16px;
  padding: 10px 18px;
  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 {
  width: 17px;
  height: 17px;
}

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

  .cc-video__sonido {
    padding: 14px 22px;
    font-size: 16px;
  }

  .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;
  }
}