.elementor-kit-5{--e-global-color-primary:#3D7068;--e-global-color-secondary:#1C1C1C;--e-global-color-text:#F7F6F2;--e-global-color-accent:#EFEDE7;--e-global-color-e7730e4:#9A9A8E;--e-global-color-061f439:#E5E4DE;--e-global-color-f08e23a:#FFFFFF;--e-global-typography-primary-font-family:"Playfair Display";--e-global-typography-primary-font-weight:300;--e-global-typography-primary-line-height:1.1px;--e-global-typography-primary-letter-spacing:-0.02em;--e-global-typography-secondary-font-family:"Space Grotesk";--e-global-typography-secondary-font-size:16px;--e-global-typography-secondary-font-weight:300;--e-global-typography-secondary-line-height:1.7px;--e-global-typography-text-font-family:"Space Mono";--e-global-typography-text-font-size:10px;--e-global-typography-text-font-weight:400;--e-global-typography-text-text-transform:uppercase;--e-global-typography-text-letter-spacing:0.32em;background-color:var( --e-global-color-text );--e-page-transition-entrance-animation:e-page-transition-fade-out-down;--e-page-transition-exit-animation:e-page-transition-fade-in-down;--e-page-transition-animation-duration:1000ms;--e-preloader-delay:600ms;--e-preloader-color:var( --e-global-color-primary );--e-preloader-size:20px;}.elementor-kit-5 e-page-transition{background-color:transparent;background-image:linear-gradient(180deg, var( --e-global-color-primary ) 0%, #1C1C1C 73%);}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ─────────────────────────────────────────────
   CLUTE INSTITUTE · HERO — Mesh + Tipografía
   Estrategia: .elementor-kit-5es con prefijo .e-hero-*
   para no colisionar con Elementor nativo.
   ───────────────────────────────────────────── */

/* == TOKENS (sólo los que usa el hero) ======= */
:root {
  --ci-bg-dark:    #1c1c1c;
  --ci-cream:      #f7f6f2;
  --ci-accent:     #3d7068;
  --ci-f-serif:    'Playfair Display', Georgia, serif;
  --ci-f-sans:     'Space Grotesk', system-ui, sans-serif;
  --ci-f-mono:     'Space Mono', 'Courier New', monospace;
  --ci-ease:       cubic-bezier(0.22, 1, 0.36, 1);
}

/* == MESH BACKGROUND (pseudo-elementos en la sección) == */
/*
   Aplica la clase CSS "e-hero-section" a la Sección
   de Elementor que envuelve el hero desde el panel.
*/
.e-hero-section {
  position: relative;
  overflow: hidden;
}

/* El mesh va como ::before y ::after del wrapper interno
   que Elementor genera: .elementor-section-wrap  o
   directamente sobre .e-hero-section              */
.e-hero-section::before,
.e-hero-section::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(90px);
  z-index: 0;
  animation: ci-mesh 30s linear infinite;
}

.e-hero-section::before {
  width: 55vw;
  height: 55vw;
  top: -15%;
  left: -8%;
  background: rgba(61, 112, 104, 0.22);
}

.e-hero-section::after {
  width: 45vw;
  height: 45vw;
  bottom: 8%;
  right: -8%;
  background: rgba(61, 112, 104, 0.14);
  animation-direction: reverse;
  animation-duration: 24s;
}

@keyframes ci-mesh {
  0%   { transform: rotate(0deg)   scale(1);   }
  50%  { transform: rotate(180deg) scale(1.2); }
  100% { transform: rotate(360deg) scale(1);   }
}

/* Asegura que el contenido quede sobre el mesh */
.e-hero-section > .elementor-container {
  position: relative;
  z-index: 2;
}

/* == EYEBROW ================================= */
/*
   Añade la clase "ci-eyebrow" al widget Texto/Encabezado
   que tiene el texto tipo etiqueta ("Research · Community…").
*/
.ci-eyebrow,
.ci-eyebrow * {
  font-family: var(--ci-f-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.42em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.38) !important;
  line-height: 1.4 !important;
}

/* == TÍTULO HERO ============================== */
/*
   Añade la clase "ci-hero-title" al widget Encabezado
   principal del hero.
*/
.ci-hero-title,
.ci-hero-title .elementor-heading-title {
  font-family: var(--ci-f-serif) !important;
  font-size: clamp(3.2rem, 9vw, 7.5rem) !important;
  font-weight: 300 !important;
  line-height: 0.92 !important;
  letter-spacing: -0.02em !important;
  color: var(--ci-cream) !important;
}

/* Las partes en itálica (em) dentro del título */
.ci-hero-title em,
.ci-hero-title .elementor-heading-title em {
  font-style: italic !important;
  color: rgba(247, 246, 242, 0.52) !important;
}

/* == SUBTÍTULO HERO =========================== */
/*
   Añade la clase "ci-hero-sub" al widget de párrafo/texto.
*/
.ci-hero-sub,
.ci-hero-sub .elementor-widget-container,
.ci-hero-sub p {
  font-family: var(--ci-f-sans) !important;
  font-size: 1.05rem !important;
  color: rgba(247, 246, 242, 0.48) !important;
  max-width: 460px !important;
  line-height: 1.6 !important;
  margin-inline: auto !important;
}


/* ─────────────────────────────────────────────
   CLUTE INSTITUTE · FOOTER
   Efecto glow mesh + blockquote editorial
   Prefijo: ci-footer-* → no colisiona con
   Elementor ni con el CSS hero ya cargado.
   ───────────────────────────────────────────── */

/* == SECCIÓN FOOTER ========================== */
/*
   Aplica la clase CSS "e-footer-section" a la
   Sección de Elementor que actúa como footer.
*/
.e-footer-section {
  position: relative;
  overflow: hidden;
  background: #1c1c1c;
  border-radius: 4rem 4rem 0 0;
}

/* Glow mesh: elipse verde centrada en la parte superior */
.e-footer-section::before {
  content: '';
  position: absolute;
  top: -15%;
  left: 50%;
  transform: translateX(-50%);
  width: 560px;
  height: 360px;
  background: radial-gradient(
    ellipse,
    rgba(61, 112, 104, 0.18) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}

/* El contenido queda sobre el glow */
.e-footer-section > .elementor-container {
  position: relative;
  z-index: 2;
}

/* == BLOCKQUOTE ============================== */
/*
   Aplica la clase "ci-footer-quote" al widget
   Encabezado o Texto enriquecido que contiene
   la cita "The local is / the universal."
*/
.ci-footer-quote,
.ci-footer-quote .elementor-heading-title,
.ci-footer-quote .elementor-widget-container {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: clamp(2rem, 4.5vw, 3.5rem) !important;
  font-weight: 300 !important;
  line-height: 1.1 !important;
  color: #f7f6f2 !important;
  max-width: 760px !important;
  margin-bottom: 0 !important; /* el spacing lo maneja el padding de la columna */
}

/* La parte em/itálica: "the universal." */
.ci-footer-quote em,
.ci-footer-quote .elementor-heading-title em {
  font-style: italic !important;
  color: rgba(247, 246, 242, 0.38) !important;
}

/* == LÍNEA SEPARADORA (opcional) ============= */
/*
   Aplica la clase "ci-footer-scanline" a un
   widget Divisor de Elementor.
*/
.ci-footer-scanline .elementor-divider-separator {
  border-color: rgba(229, 228, 222, 0.12) !important;
  border-width: 1px !important;
}

/* == RESPONSIVE ============================== */
@media (max-width: 768px) {
  .e-footer-section {
    border-radius: 2rem 2rem 0 0;
  }
  .ci-footer-quote,
  .ci-footer-quote .elementor-heading-title {
    font-size: clamp(1.6rem, 7vw, 2.4rem) !important;
  }
}




/* ─────────────────────────────────────────────
   CLUTE INSTITUTE · POSTS SECTION
   Prefijo: ci-posts-* y ci-card-*
   No colisiona con hero (ci-hero-*),
   footer (ci-footer-*) ni Elementor nativo.
   ───────────────────────────────────────────── */

/* == SECTION HEADER ========================== */
/*
   Aplica "ci-posts-header" a la fila/columna
   que contiene el eyebrow + título + btn "View all".
   Recomendado: un widget HTML o una Inner Section.
*/
.ci-posts-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: 28px;
  border-bottom: 1px solid #e5e4de;
  margin-bottom: 32px;
}

/* Eyebrow "Latest edition" */
.ci-posts-eyebrow,
.ci-posts-eyebrow p,
.ci-posts-eyebrow * {
  font-family: 'Space Mono', 'Courier New', monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  color: #9a9a8e !important;
  margin-bottom: 8px !important;
}

/* Título de sección */
.ci-posts-title,
.ci-posts-title .elementor-heading-title {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem) !important;
  font-weight: 300 !important;
  line-height: 1.1 !important;
  color: #1c1c1c !important;
}

.ci-posts-title em,
.ci-posts-title .elementor-heading-title em {
  font-style: italic !important;
  color: #9a9a8e !important;
}

/* == POST CARD ================================ */
/*
   Aplica "ci-card" a cada widget o contenedor
   de Elementor que actúe como tarjeta de artículo.
*/
.ci-card {
  background: #ffffff;
  border: 1px solid #e5e4de;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow  600ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 300ms cubic-bezier(0.22, 1, 0.36, 1);
  cursor: pointer;
}

.ci-card:hover {
  transform: translateY(-14px) scale(1.015);
  box-shadow: 0 20px 48px rgba(61, 112, 104, 0.12);
  border-color: rgba(61, 112, 104, 0.3);
}

/* == IMAGEN DE CARD — orb + grayscale ========= */
/*
   Aplica "ci-card__img-wrap" al contenedor de imagen.
   Elementor: Inner Section o widget Imagen dentro de ci-card.
*/
.ci-card__img-wrap {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #e5e4de;
}

.ci-card__img-wrap img,
.ci-card__img-wrap .elementor-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1000ms cubic-bezier(0.22, 1, 0.36, 1);
  filter: grayscale(25%);
}

.ci-card:hover .ci-card__img-wrap img,
.ci-card:hover .ci-card__img-wrap .elementor-image img {
  transform: scale(1.06);
  filter: grayscale(0%);
}

/* Orb glow verde sobre la imagen */
.ci-card__orb {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
}

.ci-card__orb::after {
  content: '';
  width: 55%;
  height: 55%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(61, 112, 104, 0.3) 0%,
    transparent 70%
  );
  filter: blur(20px);
}

/* Línea scanline inferior en imagen */
.ci-card__scanline {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: #e5e4de;
  z-index: 2;
}

/* Pill "Read article →" que aparece en hover */
.ci-card__pill {
  position: absolute;
  bottom: 14px;
  right: 14px;
  z-index: 3;
  background: #ffffff;
  color: #1c1c1c;
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid #e5e4de;
  opacity: 0;
  transform: translateY(7px);
  transition: opacity 300ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.ci-card:hover .ci-card__pill {
  opacity: 1;
  transform: translateY(0);
}

/* == BODY DE LA CARD ========================= */
.ci-card__body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

/* Meta: categoría + fecha */
.ci-card__meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ci-card__cat,
.ci-card__cat * {
  font-family: 'Space Mono', monospace !important;
  font-size: 9px !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  color: #3d7068 !important;
  border: 1px solid rgba(61, 112, 104, 0.3) !important;
  padding: 2px 8px !important;
  background: transparent !important;
}

.ci-card__date,
.ci-card__date * {
  font-family: 'Space Mono', monospace !important;
  font-size: 9px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #9a9a8e !important;
}

/* Divider animado que se expande en hover */
.ci-card__divider {
  width: 100%;
  height: 1px;
  background: #e5e4de;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ci-card:hover .ci-card__divider {
  transform: scaleX(1);
}

/* Título del artículo */
.ci-card__title,
.ci-card__title .elementor-heading-title {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 1.2rem !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  color: #1c1c1c !important;
  transition: color 300ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.ci-card:hover .ci-card__title,
.ci-card:hover .ci-card__title .elementor-heading-title {
  color: #3d7068 !important;
}

/* Extracto */
.ci-card__excerpt,
.ci-card__excerpt p {
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  font-size: 0.85rem !important;
  color: #9a9a8e !important;
  line-height: 1.65 !important;
}

/* Footer de card: autor + btn */
.ci-card__footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid #e5e4de;
}

.ci-card__author,
.ci-card__author * {
  font-family: 'Space Mono', monospace !important;
  font-size: 9px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #9a9a8e !important;
}

/* == CARD DESTACADA (featured) ================ */
/*
   Aplica ADEMÁS "ci-card--featured" a la card
   principal que ocupa todo el ancho.
   Funciona junto con ci-card.
*/
.ci-card--featured {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  flex-direction: unset !important;
}

.ci-card--featured .ci-card__img-wrap {
  aspect-ratio: unset !important;
  height: 100% !important;
  min-height: 340px !important;
}

.ci-card--featured .ci-card__body {
  padding: 36px !important;
  justify-content: center !important;
}

.ci-card--featured .ci-card__title,
.ci-card--featured .ci-card__title .elementor-heading-title {
  font-size: clamp(1.4rem, 2.5vw, 2rem) !important;
}

/* == GRID DE CARDS (stagger vertical) ========= */
/*
   Aplica "ci-posts-grid" al contenedor padre
   que envuelve todas las ci-card.
   El stagger solo funciona con el .elementor-kit-5 :nth-child
   sobre hijos directos.
*/
.ci-posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  align-items: start;
}

@media (min-width: 900px) {
  .ci-posts-grid > .ci-card:nth-child(even):not(.ci-card--featured) {
    margin-top: 36px;
  }
}

/* == RESPONSIVE =============================== */
@media (max-width: 768px) {
  .ci-card--featured {
    grid-template-columns: 1fr !important;
  }
  .ci-card--featured .ci-card__img-wrap {
    min-height: 220px !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
  }
  .ci-posts-grid {
    grid-template-columns: 1fr !important;
  }
  .ci-posts-grid > .ci-card:nth-child(even) {
    margin-top: 0 !important;
  }
  .ci-posts-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}

/* == REDUCED MOTION ========================== */
@media (prefers-reduced-motion: reduce) {
  .ci-card,
  .ci-card__img-wrap img,
  .ci-card__pill,
  .ci-card__divider,
  .ci-card__title {
    transition: none !important;
    animation: none !important;
  }
}/* End custom CSS */