/* @KID:WEB_FE_CSS_CCM_WEB · el aspecto de la web: tokens en :root, las piezas ccm-marco, ccm-caja y ccm-titulo, las portadas de los vídeos y el móvil de la portada (ver ccm-web.php) */

/* ── Tokens: lo que se cambia para afinar ─────────────────────────────────────────────────────────────────────────────── */
:root {
  /* Margen lateral de las cajas: llegan hasta donde empieza y acaba el texto de la portada («El Centre Cristià de Mallorca es
     una iglesia evangélica…», JC 06-10). Esto es lo aproximado, para que no salte al cargar; lo exacto lo pone ccm-web.js
     midiendo ese texto (en una línea mide 1981 px; partido, sus líneas empiezan a unos 74 px del borde). */
  --ccm-margen: 74px;
  --ccm-ancho-max: 1981px;
  --ccm-caja-fondo: #fcfcfc;               /* casi blanco (JC 06-10: «más cercano al blanco que al gris, con muy poca diferencia»; antes #f8f8f8) */
  --ccm-caja-borde: #d6d6d6;
  --ccm-caja-radio: 5px;
  --ccm-caja-relleno: 13px;
  --ccm-separa: 30px;                      /* del título de una sección a su caja */
  --ccm-titulo-letra: Roboto, sans-serif;
  --ccm-titulo-tam: 36px;
  --ccm-titulo-alto: 1;
  --ccm-titulo-color: #000;
  /* Las portadas de los vídeos dentro de su caja (JC 06-10: «más margen en sus lados para que se achiquen un poco y se separen
     un poco más una de otra»): 58 px a cada lado y 36 px entre las dos a 1440 de pantalla. Solo en el ordenador. */
  --ccm-video-lado: clamp(24px, 4vw, 80px);
  --ccm-video-separa: clamp(20px, 2.5vw, 48px);
}
@media (max-width: 767px) {
  :root { --ccm-margen: 12px; --ccm-caja-relleno: 15px 15px 5px; --ccm-separa: 16px; --ccm-titulo-tam: 26px; --ccm-titulo-alto: 1.2; }
}

/* ── El marco: los márgenes laterales. Va en el contenedor de fuera; lo de dentro ocupa el resto (y como mucho --ccm-ancho-max).
   Con propiedades y no con las variables de Elementor: así no importa lo que quede puesto en el panel de Elementor. ─────── */
.ccm-marco, .e-con.ccm-marco {
  box-sizing: border-box;
  padding-inline: max(var(--ccm-margen), calc((100% - var(--ccm-ancho-max)) / 2));
}

/* ── La caja: el recuadro gris de las secciones de la portada ─────────────────────────────────────────────────────────── */
.ccm-caja, .e-con.ccm-caja {
  box-sizing: border-box;
  width: 100%;
  padding: var(--ccm-caja-relleno);
  background: var(--ccm-caja-fondo);
  border: 1px solid var(--ccm-caja-borde);
  border-radius: var(--ccm-caja-radio);
}
.e-con.ccm-caja { --width: 100%; }

/* ── El título de sección («Próximos eventos»): el mismo que los títulos de Elementor de la portada ──────────────────── */
.ccm-titulo.ccm-titulo {
  margin: 0; padding: 0; max-width: none;
  font-family: var(--ccm-titulo-letra); font-size: var(--ccm-titulo-tam); font-weight: 400; font-style: normal;
  line-height: var(--ccm-titulo-alto); letter-spacing: 1px; word-spacing: 0; text-transform: none; text-align: center;
  color: var(--ccm-titulo-color);
}

/* ── Las portadas de los vídeos de las predicaciones (Premium Addons, dos por caja): en rejilla, con aire a los lados y entre
   ellas. El mapa de las congregaciones se quitó el 06-10 (JC; cambios/quita_mapa.php). ──────────────────────────────── */
@media (min-width: 768px) {
  .ccm-caja .premium-video-box-playlist-container {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--ccm-video-separa); row-gap: var(--ccm-video-separa);
    margin: 0 !important; padding-inline: var(--ccm-video-lado);
  }
  .ccm-caja .premium-video-box-playlist-container > .premium-video-box-container { width: auto !important; max-width: none !important; padding: 0 !important; margin: 0 !important; }
}

/* ── Las páginas de las sedes (cambios/sedes_cajas.php, JC 06-10): «Visítanos» y el mapa van en una caja; el texto, con aire
   respecto al filo de la caja. ─────────────────────────────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .e-con.ccm-visitanos > .e-con:first-child { padding: 28px 32px !important; }
}
/* «Visítanos / Te esperamos», en el centro de su mitad de la caja (JC 06-10: «debe estar centrado, no arriba a la izquierda») */
.e-con.ccm-visitanos > .e-con:first-child { justify-content: center !important; align-items: center !important; text-align: center; }
.e-con.ccm-visitanos > .e-con:first-child .elementor-heading-title { text-align: center !important; }

/* «Últimas predicaciones» y sus botones en una línea (JC 06-10; cambios/sedes_juntas.php pone ccm-cab-fila y mete los botones
   dentro): como «Próximos eventos», el título en el centro y los botones a su derecha; en la tableta, juntos y centrados (a
   768 px la rejilla dejaba el botón en dos líneas y fuera de la caja); en el móvil, el título y debajo los botones. */
.e-con.ccm-cab-fila { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; gap: 12px 20px !important; padding-bottom: var(--ccm-separa) !important; }
.e-con.ccm-cab-fila > .elementor-widget { width: auto !important; max-width: 100%; margin: 0 !important; }
.e-con.ccm-cab-fila > .e-con.ccm-cab-botones { width: auto !important; flex: 0 0 auto; flex-wrap: nowrap !important; gap: 10px !important; margin: 0 !important; padding: 0 !important; background: none !important; }
.e-con.ccm-cab-fila > .e-con.ccm-cab-botones > .elementor-widget { margin: 0 !important; padding: 0 !important; }
.e-con.ccm-cab-fila .ccm-cab-botones .elementor-button { white-space: nowrap; }
@media (min-width: 1025px) {
  .e-con.ccm-cab-fila { display: grid !important; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: 20px !important; }
  .e-con.ccm-cab-fila > .elementor-widget { grid-column: 2; }
  .e-con.ccm-cab-fila > .e-con.ccm-cab-botones { grid-column: 3; justify-self: start; }
}
@media (max-width: 767px) {
  .e-con.ccm-cab-fila { flex-direction: column !important; gap: 10px !important; padding-left: 12px !important; padding-right: 12px !important; }
  .e-con.ccm-cab-fila > .elementor-widget, .e-con.ccm-cab-fila > .e-con.ccm-cab-botones { align-self: center !important; }
}

/* «Ver más» de las sedes con el borde de «Link Bosquejos» (1 px; JC 06-10). En el móvil ya lo tenía. */
.ccm-sede .elementor-button { border-width: 1px !important; }

/* ── El logo del menú: 40 px y no 50, con 5 px arriba y abajo, para que no toque los filos de la barra (JC 06-10). La barra
   sigue midiendo lo mismo (50 px). El widget es el 10ef5d00 de la cabecera de Elementor. ─────────────────────────────── */
.elementor-location-header .elementor-element-10ef5d00 .elementor-widget-container { padding-block: 5px !important; }
.elementor-location-header .elementor-element-10ef5d00 a { display: block; width: max-content; margin-inline: auto; }
.elementor-location-header .elementor-element-10ef5d00 img { display: block; width: 40px !important; height: 40px !important; margin-inline: auto; object-fit: contain; }

/* ── El menú cuando baja con la página (JC 06-10: «el fondo es totalmente transparente… que se pueda diferenciar que es un
   menú»). Elementor le pone a la barra fija un blanco al 51 %; al bajar, el texto de la página se leía a través. Solo cuando
   ya va pegada arriba (elementor-sticky--active): en lo alto de la página se queda como estaba. ───────────────────────── */
.elementor-location-header > .e-con.elementor-sticky--active {
  background-color: rgba(255, 255, 255, .94) !important;
  -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 1px 0 rgba(15, 23, 42, .08), 0 6px 18px rgba(15, 23, 42, .08);
}

/* ── El iPhone subraya con puntos lo que cree que es una dirección («Carrer Vicenç Ensenyat, 57», «Alcudia»). Lo apaga la
   etiqueta format-detection de ccm-web.php; esto es por si alguna versión lo convierte en enlace igualmente. ───────────── */
a[x-apple-data-detectors], a[href^="x-apple-data-detectors:"] {
  color: inherit !important; text-decoration: none !important; font: inherit !important; pointer-events: none;
}

/* ── El móvil (JC 06-10, desde el teléfono) ────────────────────────────────────────────────────────────────────────────
   Las clases ccm-botonera, ccm-sedes y ccm-sede las pone el guion cambios/portada_movil.php en el panel de Elementor.
   Los !important son contra las reglas propias de cada elemento (.elementor-2761 .elementor-element-xxx …), que pesan más. */
@media (max-width: 767px) {
  /* El menú, un poco separado de la barra de direcciones. Las dos copias: la fija y el hueco que deja debajo. */
  .elementor-location-header > .e-con { padding-top: 8px; }

  /* Las portadas de YouTube enteras. El truco del alto 0 y el relleno del 56,25 % (16:9) y no aspect-ratio: en WebKit
     (el iPhone) el aspect-ratio del plugin dejaba la caja más baja que la imagen y la recortaba. */
  .premium-video-box-container > .premium-video-box-trigger { aspect-ratio: auto !important; height: 0 !important; padding-bottom: 56.25% !important; }

  /* Predicaciones Palma: Español, Inglés, Ruso y Link Bosquejos en una sola línea (caben de 340 px en adelante). */
  .e-con.ccm-botonera { flex-wrap: nowrap !important; justify-content: center; align-items: center !important; gap: 5px; padding-left: 6px !important; padding-right: 6px !important; }
  .ccm-botonera > .elementor-widget-button { flex: 0 1 auto; min-width: 0; width: auto; margin: 0; padding: 0 !important; }
  .ccm-botonera > .elementor-widget > .elementor-widget-container { padding: 0 !important; margin: 0 !important; }
  .ccm-botonera .elementor-button { border-width: 1px !important; width: auto !important; min-width: 0 !important; padding: 7px !important; font-size: 11px !important; letter-spacing: 0 !important; line-height: 1.2 !important; white-space: nowrap; }
  .ccm-botonera .elementor-button .elementor-button-content-wrapper { gap: 4px; }
  .ccm-botonera .elementor-button-icon svg, .ccm-botonera .elementor-button-icon i { width: 11px; height: 11px; font-size: 11px; }

  /* Una iglesia, cuatro congregaciones: una sede por fila, las cuatro seguidas, y cada una en una sola línea: el nombre, la
     dirección y «Ver más» con su icono (JC 06-10, tercera vuelta: el diseño original, sin colores). La columna del nombre
     es fija para que las direcciones empiecen a la misma altura en las cuatro. */
  .e-con.ccm-sedes { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 6px; padding-top: 0 !important; }
  .e-con.ccm-sedes > .e-con.ccm-sede {
    display: grid !important; grid-template-columns: 74px minmax(0, 1fr) auto; align-items: center; gap: 8px;
    width: auto !important; min-width: 0; min-height: 0 !important; margin: 0 !important; padding: 10px !important; align-self: stretch !important;
    background: #fff; border: 1px solid var(--ccm-caja-borde); border-radius: var(--ccm-caja-radio);
  }
  .ccm-sede > .elementor-widget { width: auto !important; min-width: 0; margin: 0 !important; padding: 0 !important; }
  .ccm-sede > .elementor-widget-heading .elementor-heading-title { font-size: 13px !important; line-height: 1.3 !important; letter-spacing: 0 !important; text-align: left; white-space: nowrap; }
  .ccm-sede > .elementor-widget-text-editor { text-align: left; }
  .ccm-sede > .elementor-widget-text-editor, .ccm-sede > .elementor-widget-text-editor * { font-size: 13px !important; line-height: 1.35 !important; margin: 0 !important; }
  .ccm-sede .elementor-button { border-width: 1px !important; width: auto !important; min-width: 0 !important; padding: 5px 8px !important; font-size: 12px !important; line-height: 1.2 !important; white-space: nowrap; }
  .ccm-sede .elementor-button .elementor-button-content-wrapper { gap: 5px; }
  .ccm-sede .elementor-button-icon svg, .ccm-sede .elementor-button-icon i { width: 13px; height: 13px; font-size: 13px; }
}