/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jan 30 2026 | 20:55:03 */
/* =========================
   Clamp global de párrafos
   Hello Elementor + fondos blancos
   ========================= */

/* Limitar solo el contenido real (evita header/footer/menús) */
:where(.site-main, .elementor-location-single, .elementor-location-archive) 
:where(.entry-content, .elementor-widget-text-editor, .elementor-post__content, .elementor-widget-container) p {

  /* Desktop por defecto */
  --clamp-lines: 5;
  --clamp-lh: 1.6;
  --fade-size: 2.2em;

  position: relative;
  line-height: calc(var(--clamp-lh) * 1em);
}

/* Tablet */
@media (max-width: 1024px) {
  :where(.site-main, .elementor-location-single, .elementor-location-archive) 
  :where(.entry-content, .elementor-widget-text-editor, .elementor-post__content, .elementor-widget-container) p {
    --clamp-lines: 5;
    --fade-size: 2.0em;
  }
}

/* Móvil */
@media (max-width: 767px) {
  :where(.site-main, .elementor-location-single, .elementor-location-archive) 
  :where(.entry-content, .elementor-widget-text-editor, .elementor-post__content, .elementor-widget-container) p {
    --clamp-lines: 4;
    --fade-size: 1.8em;
  }
}

/* Solo se colapsa si el JS detecta overflow */
p.is-clampable.is-collapsed {
  overflow: hidden;
  max-height: calc(var(--clamp-lines) * var(--clamp-lh) * 1em);
}

/* Degradado inferior (fondo blanco liso) */
p.is-clampable.is-collapsed::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--fade-size);
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
}

/* Expandido */
p.is-clampable.is-expanded {
  overflow: visible;
  max-height: none;
}

/* Botón */
.clamp-toggle {
  display: inline-block;
  margin-top: 0.35em;
  font: inherit;
  padding: 0;
  border: 0;
  background: transparent;
  text-decoration: underline;
  cursor: pointer;
}
.clamp-toggle{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin-top: .35em;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
}

.clamp-toggle:hover{
  /* usa el color global primario de Elementor si existe */
  color: var(--e-global-color-primary, #1a73e8);
}
