/* =====================================================================
   Santiago - correcciones de diseño confirmadas visualmente (previsualización)
   Este fichero se carga en las 13 páginas mediante un <link> antes de </head>.
   Cada bloque va comentado con el número de arreglo del informe.
   ===================================================================== */

/* -------------------------------------------------------------------
   FIX 1: aviso de error rojo "invalid domain" tapando el botón de WhatsApp.
   Investigado: no es JoinChat, es el badge de Google reCAPTCHA v3 (usado en
   los formularios) mostrando "ERROR for site owner: Invalid domain for site
   key" porque el dominio de esta previsualización no coincide con el
   dominio real registrado en la site key. El badge de reCAPTCHA cae justo
   encima del botón flotante de WhatsApp (ambos anclados abajo-derecha).
   Se oculta solo el badge; el botón de WhatsApp (elemento distinto, clase
   .joinchat) no se toca y sigue siendo clicable.
   ------------------------------------------------------------------- */
.grecaptcha-badge {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* -------------------------------------------------------------------
   FIX 2: letter-spacing negativo en títulos pega las palabras en móvil.
   Los H1/H2/H3 heredan --e-global-typography-*-letter-spacing:-2px (o -1px)
   desde .elementor-kit-31, definido igual en las 13 páginas. En escritorio
   no se nota, pero a tamaño de fuente móvil junta las letras/palabras.
   Se suaviza solo en móvil, sin tocar el valor de escritorio.
   ------------------------------------------------------------------- */
@media (max-width: 767px) {
  .elementor-kit-31 {
    --e-global-typography-primary-letter-spacing: -0.5px !important;
    --e-global-typography-583e54c-letter-spacing: -0.5px !important;
    --e-global-typography-5d167aa-letter-spacing: -0.5px !important;
    --e-global-typography-a435f28-letter-spacing: -0.5px !important;
    --e-global-typography-d3dae9a-letter-spacing: -0.5px !important;
  }
}

/* -------------------------------------------------------------------
   FIX 3: tarjeta "¿Necesitas más ayuda?" tapa contenido en móvil.
   Causa: el contenedor de la tarjeta lleva margin-top:-10em (pensado para
   solapar ligeramente con la sección anterior en escritorio). En móvil la
   sección anterior es más corta y esos -10em (160px) hacen que la tarjeta
   se coma el botón "Unirme al grupo gratis" (adolescentes) o el final de
   la lista de servicios (coaching, ansiedad). Mismo patrón, IDs distintos
   por página. Se anula el solape solo en móvil.
   [2026-07-17] Añadidos adicciones/terapia-de-pareja/terapia-con-ninos:
   el FIX 10 (ancho completo del bloque "¡Únete al programa!") cambió la
   altura de la sección anterior en esas tres páginas, así que el mismo
   solape que antes caía en hueco vacío ahora tapa texto/botón de verdad
   (en adicciones una frase, en terapia-de-pareja el botón "Reservar mi
   plaza"). Mismo parche, mismo riesgo cero.
   ------------------------------------------------------------------- */
@media (max-width: 767px) {
  .elementor-element-13ee636f > .elementor-element-populated,   /* adolescentes */
  .elementor-element-7196b500 > .elementor-element-populated,   /* coaching */
  .elementor-element-75366aee > .elementor-element-populated,   /* ansiedad */
  .elementor-element-77207d35 > .elementor-element-populated,   /* adicciones */
  .elementor-element-d3cfc40 > .elementor-element-populated,    /* terapia-de-pareja */
  .elementor-element-5d1c5c4 > .elementor-element-populated {   /* terapia-con-ninos */
    margin-top: 0 !important;
  }
}

/* -------------------------------------------------------------------
   FIX 5: página /cursos/ - la cinta/botón "Unirme" de cada tarjeta del
   Loop Grid queda oculto detrás de la imagen de la fila siguiente.
   Causa: los items del grid (.e-loop-item > .e-parent, contenedor flex
   column) se estiran (align-items:stretch, comportamiento por defecto de
   CSS grid) hasta igualar la altura de fila más alta, dejando un hueco
   enorme entre el título y el botón, que acaba pintado debajo de la
   siguiente fila. Se fuerza cada tarjeta a su altura natural.
   Solo existe en /cursos/ (comprobado, .e-loop-item no aparece en otras
   páginas), así que es seguro aplicarlo de forma global.
   ------------------------------------------------------------------- */
.elementor-loop-container.elementor-grid > .e-loop-item {
  align-self: start !important;
  height: auto !important;
}
.e-loop-item .e-parent,
.e-loop-item .e-con-inner,
.e-loop-item .e-con-inner > .elementor-widget {
  height: auto !important;
  min-height: 0 !important;
}

/* -------------------------------------------------------------------
   FIX 8: foto circular de /quien-soy/ con esquinas negras.
   La foto de origen (romina-ranieri.jpg, servida desde romina-ranieri.com)
   tiene fondo negro sólido alrededor del recorte circular en vez de
   transparencia; el CSS original solo redondeaba 10px (rectángulo
   redondeado), dejando ver el cuadrado negro. Se fuerza un recorte
   circular real (aspect-ratio 1:1 + object-fit:cover + border-radius:50%)
   que recorta el negro sobrante, con un color de fondo de respaldo suave
   por si quedara algún borde.
   ------------------------------------------------------------------- */
.elementor-element-5b9f9aff img {
  aspect-ratio: 1 / 1 !important;
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  background-color: #F8F8F8;
}

/* -------------------------------------------------------------------
   FIX 6: carrusel de testimonios (home, programa-fin-de-la-ansiedad,
   terapia-con-ninos). Estructura genérica reutilizada por site-fixes.js,
   que decide qué contenido envolver en cada página sin tocar los
   textos/vídeos originales.
   ------------------------------------------------------------------- */
.rr-carousel {
  position: relative;
  padding: 0 34px;
}
.rr-carousel-track {
  display: flex;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.rr-carousel-slide {
  flex: 0 0 100%;
  max-width: 100%;
  display: none;
  box-sizing: border-box;
}
.rr-carousel-slide.is-active {
  display: block;
}
/* Carrusel de vídeos verticales (programa-fin-de-la-ansiedad): sin este
   límite de ancho, un vídeo grabado en formato retrato ocupaba el 100% del
   contenedor y su altura (proporcional al ancho) se disparaba a >2000px. */
.rr-carousel--video .rr-carousel-track {
  max-width: 420px;
  margin: 0 auto;
}
/* Los vídeos son grabaciones verticales de móvil (~9:16); se limita su
   altura para que quepan cómodamente en una tarjeta de carrusel. */
.rr-carousel--video video {
  max-height: 60vh !important;
  width: auto !important;
  max-width: 100% !important;
  display: block;
  margin: 0 auto;
}
.rr-carousel--video .e-hosted-video,
.rr-carousel--video .elementor-wrapper {
  width: auto !important;
  max-width: 100%;
  text-align: center;
}
.rr-carousel--video.rr-carousel {
  padding: 0 50px;
}
/* Las flechas se posicionan en % del contenedor completo (full width), así
   que para el carrusel de vídeo (pista centrada y estrecha) se recalculan
   pegadas a los bordes de esa pista de 420px en vez de a los del contenedor. */
.rr-carousel--video .rr-carousel-arrow.rr-prev { left: calc(50% - 260px); }
.rr-carousel--video .rr-carousel-arrow.rr-next { right: calc(50% - 260px); }
@media (max-width: 480px) {
  .rr-carousel--video .rr-carousel-track { max-width: 280px; }
  .rr-carousel--video.rr-carousel { padding: 0 40px; }
  .rr-carousel--video .rr-carousel-arrow.rr-prev { left: calc(50% - 170px); }
  .rr-carousel--video .rr-carousel-arrow.rr-next { right: calc(50% - 170px); }
}
.rr-testimonio-slide {
  display: none;
  margin: 0;
  padding: 28px 30px;
  background: #F8F8F8;
  border-radius: 10px;
  font-style: italic;
  font-size: 18px;
  line-height: 1.6;
  color: #333333;
  box-sizing: border-box;
}
.rr-testimonio-slide.is-active {
  display: block;
}
.rr-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: #822576;
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  opacity: 0.92;
  padding: 0;
}
.rr-carousel-arrow:hover {
  opacity: 1;
  background: #54194C;
}
.rr-carousel-arrow.rr-prev { left: 0; }
.rr-carousel-arrow.rr-next { right: 0; }
.rr-carousel-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
}
.rr-carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: #DCDCDE;
  cursor: pointer;
  padding: 0;
}
.rr-carousel-dot.is-active {
  background: #822576;
}
@media (max-width: 480px) {
  .rr-carousel { padding: 0 26px; }
  .rr-carousel-arrow { width: 34px; height: 34px; font-size: 14px; }
  .rr-testimonio-slide { font-size: 16px; padding: 22px 20px; }
}

/* Home: widget video-playlist reconvertido en carrusel (ver site-fixes.js).
   Se oculta la lista vertical de pestañas nativa (Tamara/Xavi + contador de
   vídeos) porque su función la cubren ahora los puntos indicadores. */
.e-tabs.rr-carousel-active .e-tabs-header,
.e-tabs.rr-carousel-active .e-tabs-items-wrapper {
  display: none !important;
}
.e-tabs.rr-carousel-active .e-tabs-content-wrapper.rr-carousel {
  padding: 0 34px;
}
.e-tabs.rr-carousel-active .rr-carousel-dots {
  padding-bottom: 20px;
}
@media (max-width: 480px) {
  .e-tabs.rr-carousel-active .e-tabs-content-wrapper.rr-carousel {
    padding: 0 26px;
  }
}

/* -------------------------------------------------------------------
   FIX 7: popup de newsletter se abre a la vez que el aviso de cookies
   (manual-del-vacio-a-la-plenitud, programa-fin-de-la-ansiedad,
   programa-por-fin-libre). site-fixes.js añade la clase rr-hold-popup al
   body en cuanto arranca la página y la retira solo cuando el banner de
   cookies ya no está visible (o pasa un tiempo máximo de seguridad),
   momento en el que el popup -si Elementor ya decidió mostrarlo- aparece.
   ------------------------------------------------------------------- */
body.rr-hold-popup .dialog-widget,
body.rr-hold-popup .elementor-popup-modal,
body.rr-hold-popup [id^="elementor-popup-modal-"] {
  display: none !important;
}

/* Estilo del popup homogeneizado con los botones/colores del resto del sitio
   (antes: enlace rojo #f40045 y botón negro #0c0c0c, sin relación con la marca) */
#elementor-popup-modal-1325 .elementor-divider__text,
#elementor-popup-modal-1355 .elementor-divider__text,
#elementor-popup-modal-1318 .elementor-divider__text {
  color: #822576 !important;
}
#elementor-popup-modal-1325 .elementor-field-group.e-form__buttons .elementor-button,
#elementor-popup-modal-1355 .elementor-field-group.e-form__buttons .elementor-button,
#elementor-popup-modal-1318 .elementor-field-group.e-form__buttons .elementor-button,
#elementor-popup-modal-1325 .elementor-button[type="submit"],
#elementor-popup-modal-1355 .elementor-button[type="submit"],
#elementor-popup-modal-1318 .elementor-button[type="submit"] {
  background-color: #822576 !important;
  border-color: #822576 !important;
}
#elementor-popup-modal-1325 .elementor-button[type="submit"]:hover,
#elementor-popup-modal-1355 .elementor-button[type="submit"]:hover,
#elementor-popup-modal-1318 .elementor-button[type="submit"]:hover {
  background-color: #54194C !important;
}
/* Cruz de cerrar: más grande y fácil de pulsar en móvil */
#elementor-popup-modal-1325 .dialog-close-button,
#elementor-popup-modal-1355 .dialog-close-button,
#elementor-popup-modal-1318 .dialog-close-button {
  width: 34px !important;
  height: 34px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
@media (max-width: 767px) {
  #elementor-popup-modal-1325 .dialog-close-button,
  #elementor-popup-modal-1355 .dialog-close-button,
  #elementor-popup-modal-1318 .dialog-close-button {
    width: 46px !important;
    height: 46px !important;
    top: 4px !important;
    right: 4px !important;
  }
  #elementor-popup-modal-1325 .dialog-close-button svg,
  #elementor-popup-modal-1355 .dialog-close-button svg,
  #elementor-popup-modal-1318 .dialog-close-button svg,
  #elementor-popup-modal-1325 .dialog-close-button i,
  #elementor-popup-modal-1355 .dialog-close-button i,
  #elementor-popup-modal-1318 .dialog-close-button i {
    font-size: 22px !important;
    width: 22px !important;
    height: 22px !important;
  }
}

/* -------------------------------------------------------------------
   FIX 9: columna "¿A quién está dirigido? / ¿Qué incluye? / Objetivos"
   (mitad izquierda, junto a la tarjeta de precio) en escritorio queda con
   padding desigual: 1em a la izquierda pero 6em a la derecha. El texto se
   ve apretado en una franja estrecha con un hueco vacío enorme a la
   derecha, en vez de aprovechar el ancho de la columna. En tablet/móvil ya
   existe una regla correcta y simétrica (2em en los 4 lados) para el mismo
   bloque; aquí se aplica ese mismo valor también en escritorio. Se repite
   en 8 secciones (7 páginas de servicio + la portada, cada una con su
   propio ID de columna al ser copias independientes en Elementor).
   ------------------------------------------------------------------- */
.elementor-element-2e5e680 > .elementor-element-populated,     /* ansiedad */
.elementor-element-25eff7e3 > .elementor-element-populated,    /* adolescentes */
.elementor-element-c57516b > .elementor-element-populated,     /* terapia-de-pareja */
.elementor-element-30e89420 > .elementor-element-populated,    /* terapia-con-ninos */
.elementor-element-287c4784 > .elementor-element-populated,    /* coaching */
.elementor-element-5759e6c6 > .elementor-element-populated,    /* adicciones */
.elementor-element-7569acf4 > .elementor-element-populated,    /* portada */
.elementor-element-42a42de > .elementor-element-populated {    /* portada */
  padding: 3em 2em 3em 2em !important;
}

/* -------------------------------------------------------------------
   FIX 10: bloque morado "¡Únete al programa!" (título + texto + tarjeta
   de precio con "¿A quién está dirigido?") no ocupa el 100% del ancho,
   ni en escritorio ni en móvil, y deja huecos en blanco a los lados.
   Causa real: por un fallo de migración del contenido, este bloque quedó
   pegado dentro del campo de texto enriquecido del widget "Descripción"
   (un widget de texto normal, con ancho de lectura limitado) en vez de
   vivir como su propio bloque a ancho completo, tal y como está en
   romina-ranieri.com/club-alta-frecuencia/ (la referencia). Mover el
   bloque de sitio en el HTML es delicado (podría descolocar el orden con
   las Preguntas Frecuentes, que están en el mismo cajón de texto); en su
   lugar se le da ancho de pantalla completo por CSS sin tocar su
   posición. Los otros elementos de ese mismo cajón de texto (Descripción,
   testimonios, Preguntas Frecuentes) se quedan con su ancho de lectura
   normal, tal cual estaban.

   Revisión 2026-07-16 en el resto de páginas de servicio: la clase
   "elementor-element-493222f" (y su hermana "5c5e52d6") son el mismo
   bloque plantilla reutilizado por Elementor, así que esta misma regla
   ya se aplica sin cambios adicionales en adicciones, adolescentes,
   terapia-de-pareja y programa-por-fin-libre (comparten literalmente el
   mismo nombre de clase, aunque el contenido de dentro sea distinto en
   cada una) — verificado visualmente a 1920px y 390px, sin huecos ni
   scroll horizontal. El resto de páginas (manual-del-vacio-a-la-plenitud,
   programa-fin-de-la-ansiedad, coaching, ansiedad y la portada) NO
   tienen este bug: o no tienen este bloque, o el contenedor ya está
   migrado correctamente como bloque propio a ancho completo (no quedó
   pegado dentro del widget de texto), así que no necesitan ninguna regla
   nueva aquí.
   ------------------------------------------------------------------- */
.elementor-element-493222f,     /* compartido: terapia-con-ninos / adicciones / adolescentes / terapia-de-pareja / programa-por-fin-libre — título + texto intro */
.elementor-element-5c5e52d6 {   /* compartido: terapia-con-ninos / programa-por-fin-libre — tarjetas + precio */
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}