/* Tarjetas (rejilla reutilizable) */
.me-cards__grid {
  --me-cols: 1;
  display: grid;
  grid-template-columns: repeat(var(--me-cols), minmax(0, 1fr));
  gap: var(--me-space-gap);
}
/* Columnas por defecto si Elementor aún no escribió su CSS (ej. vista sin caché) */
@media (min-width: 768px)  { .me-cards__grid { --me-cols: 2; } }
@media (min-width: 1025px) { .me-cards__grid { --me-cols: 3; } }

.me-card {
  position: relative;
  display: flex; flex-direction: column;
  min-width: 0;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border-radius: var(--me-radius);
  background: var(--me-color-blanco);
  border: 1px solid var(--me-color-border);
  color: var(--me-color-text);
  text-decoration: none;
  transition: transform var(--me-dur) var(--me-ease), box-shadow var(--me-dur) var(--me-ease), border-color var(--me-dur) var(--me-ease);
}
.me-section--gris .me-card { border-color: transparent; }
/* Acento del isotipo arriba de cada tarjeta */
.me-cards__grid > .me-card { border-top: 6px solid var(--me-acc, var(--me-color-cta)); } /* gana al border-color transparente de las secciones grises */
.me-cards--logo .me-cards__grid > .me-card { border-top-width: 1px; border-top-color: var(--me-color-border); }
a.me-card:hover { transform: translateY(-4px); box-shadow: var(--me-shadow-lift); border-color: transparent; text-decoration: none; }
a.me-card:hover .me-card__more svg { transform: translateX(4px); }
a.me-card:focus-visible { outline-offset: 4px; }

.me-card__body { display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.me-card__title { margin: 0; font-size: var(--me-fs-h3); line-height: 1.3; text-wrap: pretty; }
.me-card__text { margin: 0; color: var(--me-color-muted); font-size: .9375rem; }
.me-card__tag { align-self: flex-start; }
.me-card__more { margin-top: auto; padding-top: .5rem; }

/* Icono */
.me-card__icon {
  display: inline-grid; place-items: center;
  width: 3.5rem; height: 3.5rem; margin-bottom: 1.25rem;
  border-radius: var(--me-radius);
  background: var(--me-acc-suave, var(--me-color-bg-alt)); color: var(--me-acc-tinta, var(--me-color-negro));
  transition: background var(--me-dur) var(--me-ease);
}
.me-card__icon svg { width: 1.75rem; height: 1.75rem; }
a.me-card:hover .me-card__icon { background: var(--me-acc); color: var(--me-color-negro); }
.me-card__icon--sm { width: 2.5rem; height: 2.5rem; margin-bottom: 1rem; border-radius: var(--me-radius-sm); }
.me-card__icon--sm svg { width: 1.25rem; height: 1.25rem; }

.me-card__num {
  display: inline-grid; place-items: center; align-self: flex-start;
  min-width: 2.75rem; height: 2.75rem; margin-bottom: 1rem; padding: 0 .5rem;
  border-radius: var(--me-radius-sm); background: var(--me-acc-suave, var(--me-color-bg-alt));
  font-family: var(--me-font-body); font-weight: var(--me-fw-bold); font-size: 1rem; line-height: 1;
  color: var(--me-acc-tinta, var(--me-color-text));
}

/* Con foto arriba: la foto sangra hasta el borde de la tarjeta */
.me-cards--foto .me-card { padding: 0; overflow: hidden; border-top: 0; }
.me-cards--foto .me-card__body { border-top: 6px solid var(--me-acc, var(--me-color-cta)); }
.me-cards--foto .me-card__media { aspect-ratio: 16 / 11; border-radius: 0; border: 0; }
.me-cards--foto .me-card__media img { height: 100%; transition: transform .6s var(--me-ease); }
.me-cards--foto a.me-card:hover .me-card__media img { transform: scale(1.04); }
.me-cards--foto .me-ph.me-card__media { border-bottom: 1px dashed var(--me-color-border-strong); background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(0, 0, 0, .035) 14px 28px), var(--me-color-gris-claro); }
.me-cards--foto .me-card__body { padding: clamp(1.25rem, 2.5vw, 1.75rem); }

/* Etiqueta */
.me-cards--pill .me-card__tag { background: var(--me-acc-suave); border-color: transparent; color: var(--me-acc-tinta); }

/* Logos */
.me-cards--logo .me-card { align-items: center; text-align: center; }
.me-cards--logo .me-card__media { display: grid; place-items: center; width: 100%; aspect-ratio: 3 / 1.4; margin-bottom: 1rem; background: transparent; }
.me-cards--logo .me-card__media img { width: auto; height: auto; max-width: 70%; max-height: 90px; object-fit: contain; }
.me-cards--logo .me-ph { aspect-ratio: 3 / 1.4; margin-bottom: 1rem; }
.me-cards--logo .me-card__body { align-items: center; }

.me-cards__nota { max-width: 70ch; }
.me-head--center ~ .me-cards__nota { margin-inline: auto; text-align: center; }
.me-cards__cta { margin-top: var(--me-space-block); }

/* Mancha de puntos animados detrás de las tarjetas (opción del widget, Decoración).
   El lienzo sobresale alrededor de la grilla y se desvanece antes de su borde. */
.me-cards__wrap { position: relative; }
.me-cards--puntos { overflow: hidden; }
.me-cards--puntos .me-cards__grid { position: relative; z-index: 1; }
.me-cards__puntos {
  position: absolute; z-index: 0; pointer-events: none;
  /* arriba poco: no pisa el antetítulo; abajo, lo que mide el padding de la sección (menos un
     margen), así se desvanece antes del borde y no queda cortada en línea recta. */
  inset: -50px -150px calc(-1 * var(--me-space-section) + 8px);
}
.me-cards__puntos .me-puntos {
  display: block; width: 100%; height: 100%;
  -webkit-mask-image: radial-gradient(ellipse 46% 42% at 48% 50%, black 64%, transparent 100%), radial-gradient(ellipse 24% 24% at 76% 34%, black 50%, transparent 100%), radial-gradient(ellipse 26% 20% at 30% 80%, black 50%, transparent 100%), radial-gradient(ellipse 20% 18% at 22% 22%, black 45%, transparent 100%), radial-gradient(ellipse 22% 16% at 68% 84%, black 45%, transparent 100%);
  mask-image: radial-gradient(ellipse 46% 42% at 48% 50%, black 64%, transparent 100%), radial-gradient(ellipse 24% 24% at 76% 34%, black 50%, transparent 100%), radial-gradient(ellipse 26% 20% at 30% 80%, black 50%, transparent 100%), radial-gradient(ellipse 20% 18% at 22% 22%, black 45%, transparent 100%), radial-gradient(ellipse 22% 16% at 68% 84%, black 45%, transparent 100%);
}
/* "Líneas de solución" (tarjetas con foto): la mancha se carga hacia la esquina inferior
   izquierda (pedido del equipo). */
.me-cards--foto .me-cards__puntos .me-puntos {
  -webkit-mask-image: radial-gradient(ellipse 40% 38% at 40% 58%, black 64%, transparent 100%), radial-gradient(ellipse 22% 24% at 24% 72%, black 50%, transparent 100%), radial-gradient(ellipse 24% 20% at 56% 80%, black 50%, transparent 100%), radial-gradient(ellipse 18% 16% at 20% 30%, black 45%, transparent 100%), radial-gradient(ellipse 20% 14% at 70% 84%, black 40%, transparent 100%);
  mask-image: radial-gradient(ellipse 40% 38% at 40% 58%, black 64%, transparent 100%), radial-gradient(ellipse 22% 24% at 24% 72%, black 50%, transparent 100%), radial-gradient(ellipse 24% 20% at 56% 80%, black 50%, transparent 100%), radial-gradient(ellipse 18% 16% at 20% 30%, black 45%, transparent 100%), radial-gradient(ellipse 20% 14% at 70% 84%, black 40%, transparent 100%);
}
@media (max-width: 767px) { .me-cards__puntos { inset: -40px -40px calc(-1 * var(--me-space-section) + 8px); } }
/* Si debajo de las tarjetas hay una nota (p. ej. "Financiable con recursos PIE…") o un botón, la
   mancha no baja hasta el borde de la sección: termina poco después de las tarjetas y se desvanece
   antes del texto, que así se lee limpio (19-oct, pedido del equipo). */
.me-cards__wrap:has(~ :is(.me-cards__nota, .me-cards__cta)) .me-cards__puntos { bottom: -1rem; }

/* Mancha en el espacio de ARRIBA de la sección (opción "Mancha en el espacio de arriba", 1-oct):
   rellena el margen blanco entre esta sección y la anterior. Forma orgánica e irregular: 6 lóbulos
   elípticos de distinto tamaño, a distintas alturas y desplazados entre sí, que se desvanecen antes
   del borde del lienzo (nunca un corte recto). Sube 40 px sobre el borde de la sección (por eso la
   sección recorta solo a los lados: overflow-x: clip) y no baja hasta las tarjetas. */
.me-cards--mancha-arriba { position: relative; overflow-x: clip; overflow-y: visible; }
.me-cards--mancha-arriba > .me-container { position: relative; z-index: 1; }
.me-cards__mancha-arriba { display: none; }
@media (min-width: 768px) {
  .me-cards__mancha-arriba {
    display: block; position: absolute; z-index: 0; pointer-events: none;
    top: -40px; height: calc(var(--me-space-section) + 3.5rem + 40px); width: min(46%, 640px);
  }
  .me-cards__mancha-arriba--derecha { right: 2%; }
  .me-cards__mancha-arriba--izquierda { left: 2%; transform: scaleX(-1); }   /* la misma forma, en espejo */
  .me-cards__mancha-arriba .me-puntos {
    display: block; width: 100%; height: 100%;
    -webkit-mask-image: radial-gradient(ellipse 30% 28% at 42% 46%, black 55%, transparent 100%), radial-gradient(ellipse 22% 27% at 68% 58%, black 50%, transparent 100%), radial-gradient(ellipse 16% 20% at 85% 32%, black 45%, transparent 100%), radial-gradient(ellipse 15% 21% at 18% 64%, black 42%, transparent 100%), radial-gradient(ellipse 13% 15% at 54% 80%, black 40%, transparent 100%), radial-gradient(ellipse 11% 13% at 28% 24%, black 35%, transparent 100%);
    mask-image: radial-gradient(ellipse 30% 28% at 42% 46%, black 55%, transparent 100%), radial-gradient(ellipse 22% 27% at 68% 58%, black 50%, transparent 100%), radial-gradient(ellipse 16% 20% at 85% 32%, black 45%, transparent 100%), radial-gradient(ellipse 15% 21% at 18% 64%, black 42%, transparent 100%), radial-gradient(ellipse 13% 15% at 54% 80%, black 40%, transparent 100%), radial-gradient(ellipse 11% 13% at 28% 24%, black 35%, transparent 100%);
  }
}

/* Fondo en los colores del logo (opción "Tarjetas con fondo en los colores del logo", 15-oct).
   Texto e iconos en negro: el blanco no da contraste sobre estos colores. El manual reserva
   estos colores para el logo: validar con el cliente.
   Orden distinto al de la cinta de arriba y con rojo en vez de naranjo (pedido del equipo, 15-oct). */
.me-cards--color .me-cards__grid > :nth-child(4n+1) { --me-card-bg: var(--me-logo-verde); }
.me-cards--color .me-cards__grid > :nth-child(4n+2) { --me-card-bg: var(--me-logo-amarillo); }
.me-cards--color .me-cards__grid > :nth-child(4n+3) { --me-card-bg: var(--me-logo-celeste); }
.me-cards--color .me-cards__grid > :nth-child(4n+4) { --me-card-bg: var(--me-logo-rojo); }
.me-cards--color .me-cards__grid > .me-card { background: var(--me-card-bg, var(--me-color-blanco)); border: 0; color: var(--me-color-negro); }
.me-cards--color .me-card__title,
.me-cards--color .me-card__text,
.me-cards--color .me-card__more { color: var(--me-color-negro); }
.me-cards--color .me-card__icon,
.me-cards--color .me-card__num { background: rgb(255 255 255 / .45); color: var(--me-color-negro); }
.me-cards--color a.me-card:hover .me-card__icon { background: var(--me-color-blanco); color: var(--me-color-negro); }
.me-cards--color .me-card__more svg { color: var(--me-color-negro); }
/* Texto en negro translúcido: toma un poco del color de la tarjeta (pedido del equipo, 29-oct). */
.me-cards--color :is(.me-card__title, .me-card__more, .me-card__more svg, .me-card__num) { color: rgb(0 0 0 / .78); }
.me-cards--color .me-card__text { color: rgb(0 0 0 / .7); }
/* Variante "Naranjo en vez de amarillo, icono al lado" (29-oct, Espacios Educativos › Laboratorios).
   El texto blanco que tuvo al principio se cambió el mismo día por el negro translúcido de arriba;
   la clase conserva el nombre para no tocar las páginas que ya la usan. */
.me-cards--color.me-cards--color-blanco .me-cards__grid > :nth-child(4n+2) { --me-card-bg: var(--me-logo-naranjo); }
/* En esa variante, con icono, el icono va a la izquierda del texto en vez de encima: la tarjeta
   queda ~25 % más baja (pedido del equipo, 29-oct). */
.me-cards--color-blanco.me-cards--icono .me-cards__grid > .me-card { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1.25rem; align-items: start; padding-block: 2.2rem; }
.me-cards--color-blanco.me-cards--icono .me-card__icon { margin-bottom: 0; }
.me-cards--color-blanco.me-cards--icono .me-card__body { height: 100%; }

/* Foto a toda la tarjeta con texto encima (opción "Foto a toda la tarjeta con texto encima",
   19-oct, propuesta C para "Líneas de solución"): la imagen llena la tarjeta y un degradado del
   color de acento oscuro (tinta: azul, naranjo, verde…) sube desde abajo; el texto va en blanco
   encima (≥4,5:1 sobre la tinta). */
.me-cards--superpuesta .me-cards__grid > .me-card {
  justify-content: flex-end; min-height: clamp(22rem, 32vw, 27rem);
  border: 0; background: var(--me-acc-tinta, var(--me-color-negro)); color: var(--me-color-blanco);
}
.me-cards--superpuesta .me-card__media { position: absolute; inset: 0; z-index: 0; aspect-ratio: auto; height: 100%; }
.me-cards--superpuesta .me-card__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, var(--me-acc-tinta) 0%, color-mix(in srgb, var(--me-acc-tinta) 80%, transparent) 38%, transparent 72%);
}
.me-cards--superpuesta .me-card__body { position: relative; z-index: 1; flex: 0 0 auto; border-top: 0; }
.me-cards--superpuesta :is(.me-card__title, .me-card__text, .me-card__more) { color: var(--me-color-blanco); }
.me-cards--superpuesta .me-card__more svg { color: var(--me-color-blanco); }
.me-cards--superpuesta a.me-card:hover .me-card__media img { transform: scale(1.06); }
/* Opción "Degradado de color más corto" (29-oct, Productos destacados del home): el mismo
   degradado, con las paradas un 40 % más abajo (38 % → 22.8 %, 72 % → 43.2 %). La clase conserva
   el nombre de su primera versión (sombra neutra). */
.me-cards--superpuesta.me-cards--neutra .me-card__media::after {
  background: linear-gradient(to top, var(--me-acc-tinta) 0%, color-mix(in srgb, var(--me-acc-tinta) 80%, transparent) 22.8%, transparent 43.2%);
}
/* Encuadre "Acercar y subir la parte de abajo" (por foto): la imagen crece un 35 % y se ancla
   abajo, así lo que estaba tapado por el texto sube a la zona libre de la tarjeta. */
.me-cards--superpuesta .me-card--foto-abajo .me-card__media img {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 135%;
  object-fit: cover; object-position: 30% 100%;
}

/* Una sola tarjeta (p. ej. Recursos Didácticos › Laboratorios móviles, 22-oct): mantiene el ancho
   de una columna y queda centrada en vez de pegada a la izquierda. */
.me-cards__grid:has(> .me-card:only-child) {
  grid-template-columns: minmax(0, calc((100% - (var(--me-cols) - 1) * var(--me-space-gap)) / var(--me-cols)));
  justify-content: center;
}

/* Galería de fotos (estilo "galeria", 22-oct): fotos de ejemplo de proyectos, no tarjetas.
   Imagen limpia (sin degradado ni texto encima), leyenda debajo y clic para ampliar. */
.me-galeria__item { margin: 0; min-width: 0; position: relative; }
/* Etiqueta sobre la foto (2-nov): "Antes" en blanco y "Después" en el verde del logo. */
.me-galeria__etiqueta {
  position: absolute; z-index: 1; top: .9rem; left: .9rem; pointer-events: none;
  padding: .35rem .8rem; border-radius: 999px;
  background: var(--me-color-blanco); color: rgb(0 0 0 / .78);
  font-size: .8125rem; font-weight: var(--me-fw-bold); letter-spacing: .02em;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .14);
}
.me-galeria__etiqueta--despues { background: var(--me-logo-verde); }
.me-galeria__link {
  display: block; overflow: hidden; border-radius: var(--me-radius);
  background: var(--me-color-bg-alt); cursor: zoom-in;
}
.me-galeria__link img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.me-galeria__link:focus-visible { outline-offset: 4px; }
.me-galeria__leyenda { display: grid; gap: .15rem; margin-top: .75rem; line-height: 1.35; }
.me-galeria__titulo { font-weight: var(--me-fw-semibold); color: var(--me-color-text); }
.me-galeria__texto { font-size: .875rem; color: var(--me-color-muted); }
/* Una sola foto: centrada con el ancho de una columna, igual que las tarjetas. */
.me-cards__grid:has(> .me-galeria__item:only-child) {
  grid-template-columns: minmax(0, calc((100% - (var(--me-cols) - 1) * var(--me-space-gap)) / var(--me-cols)));
  justify-content: center;
}
/* Sin la mancha de puntos detrás: la leyenda va sobre el fondo y los puntos la ensuciaban. */
.me-cards--galeria .me-cards__puntos { display: none; }

/* Carrusel de fotos (estilo "carrusel", 29-oct): solo imágenes en una fila que se desliza.
   Se ven tantas fotos como columnas; las flechas (carrusel.js) avanzan de a una. */
.me-carrusel { position: relative; }
.me-carrusel__pista.me-cards__grid {
  grid-template-columns: none; grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--me-cols) - 1) * var(--me-space-gap)) / var(--me-cols));
  overflow: hidden; touch-action: pan-y; user-select: none;
}
/* Todas las fotos se desplazan juntas con translate (carrusel.js lleva la cuenta). Es "translate"
   y no "transform" porque transform lo usa la animación de entrada (.me-reveal). */
.me-carrusel__item { min-width: 0; translate: var(--me-carrusel-x, 0px) 0; }
.me-carrusel__pista.is-animando > .me-carrusel__item { transition: translate .45s var(--me-ease), opacity .6s var(--me-ease), transform .6s var(--me-ease); }
.me-carrusel__item img { -webkit-user-drag: none; }
/* Video en el carrusel (2-nov): mismo recuadro que las fotos, con un botón de "play" encima;
   el clic lo abre grande con sonido (.me-video-modal). */
.me-galeria__link--video { position: relative; width: 100%; padding: 0; border: 0; font: inherit; cursor: pointer; }
.me-galeria__link--video video { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; pointer-events: none; }
.me-galeria__play {
  position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; translate: -50% -50%;
  border-radius: 50%; background: rgb(255 255 255 / .9); box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
  transition: scale var(--me-dur) var(--me-ease);
}
.me-galeria__play::after {           /* triángulo */
  content: ""; position: absolute; left: 54%; top: 50%; translate: -50% -50%;
  border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent var(--me-color-negro);
}
.me-galeria__link--video:hover .me-galeria__play,
.me-galeria__link--video:focus-visible .me-galeria__play { scale: 1.08; }

/* Visor de video (carrusel.js): grande, con sonido y controles; Esc o clic fuera lo cierra. */
.me-video-modal { padding: 0; border: 0; background: transparent; max-width: min(92vw, 1100px); max-height: 90vh; overflow: visible; }
.me-video-modal::backdrop { background: rgb(0 0 0 / .82); }
.me-video-modal video { display: block; max-width: min(92vw, 1100px); max-height: 85vh; width: auto; height: auto; border-radius: var(--me-radius); background: #000; }
.me-video-modal__cerrar {
  position: absolute; right: 0; top: -3rem; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; border-radius: 50%;
  background: var(--me-color-blanco); color: var(--me-color-negro); font-size: 1.5rem; line-height: 1; cursor: pointer;
}
/* Sin animación de entrada en las fotos del carrusel: las que están fuera de la ventana no se
   "revelaban" hasta entrar y aparecían a medio desvanecer al avanzar. */
.me-js .me-carrusel__item.me-reveal { opacity: 1; transform: none; }
.me-js .me-carrusel__item.me-reveal :is(.me-card__media, .me-galeria__link) img { transform: none; }
@media (prefers-reduced-motion: reduce) { .me-carrusel__pista.is-animando > .me-carrusel__item { transition-duration: .01s; } }
.me-carrusel__btn {
  position: absolute; top: 50%; z-index: 2; translate: 0 -50%;
  display: grid; place-items: center; width: 3rem; height: 3rem; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  background: var(--me-color-cta); color: var(--me-color-blanco); box-shadow: var(--me-shadow-lift);
  transition: background var(--me-dur) var(--me-ease), scale var(--me-dur) var(--me-ease);
}
.me-carrusel__btn:hover { scale: 1.08; }
.me-carrusel__btn:focus-visible { outline-offset: 3px; }
.me-carrusel__btn svg { width: 1.35rem; height: 1.35rem; }
.me-carrusel__btn--prev { left: -1.5rem; }
.me-carrusel__btn--prev svg { rotate: 180deg; }
.me-carrusel__btn--next { right: -1.5rem; }
.me-carrusel.is-estatico :is(.me-carrusel__btn, .is-copia) { display: none; }   /* copias del bucle: ver carrusel.js */
@media (max-width: 767px) {
  .me-carrusel__btn { width: 2.5rem; height: 2.5rem; }
  .me-carrusel__btn--prev { left: .5rem; }
  .me-carrusel__btn--next { right: .5rem; }
}
.me-cards--carrusel .me-cards__puntos { display: none; }