/* ===========================================================================
   encuentro.css — Sub-marca "Encuentro con las Ciencias"
   ---------------------------------------------------------------------------
   Implementa el Design System propio del Encuentro (handoff de Claude Design)
   SOLO para la página y la sección del Encuentro. Todo va bajo el scope `.ec`
   para no afectar al resto del sitio (que usa el DS principal eco-*).
   Tokens --ec-* tomados de colors_and_type.css del handoff.
   Fuentes (Newsreader serif · Plus Jakarta wordmark · JetBrains Mono) se cargan
   por <link> solo en las páginas que las usan.
   =========================================================================== */
:root {
  --ec-deep-sea: #0D2B45;
  --ec-ocean:    #0F5C7D;
  --ec-slate:    #5B6770;
  --ec-cyan:     #00A4B8;
  --ec-shallow:  #6ED3E0;
  --ec-cyan-soft:#C7EEF2;
  --ec-foam:     #EAF6F8;
  --ec-shell:    #FFFFFF;
  --ec-graphite: #2A3845;
  --ec-pewter:   #5B6770;
  --ec-mist:     #C9D2D8;
  --ec-cloud:    #E4E9EC;
  --ec-coral:    #E07856;
  --ec-algae:    #2B8C7A;

  --ec-font-editorial: "Newsreader", "Iowan Old Style", Georgia, serif;
  --ec-font-wordmark:  "Plus Jakarta Sans", "Helvetica Neue", system-ui, sans-serif;
  --ec-font-body:      "Manrope", "Helvetica Neue", system-ui, sans-serif;
  --ec-font-mono:      "JetBrains Mono", ui-monospace, monospace;

  --ec-ease-tide: cubic-bezier(.16, .84, .34, 1);
  --ec-radius-md: 14px;
  --ec-radius-lg: 22px;
  --ec-radius-xl: 32px;
  --ec-border-subtle: var(--ec-cloud);
}

/* ---- Scope base ---------------------------------------------------------- */
.ec { background: var(--ec-foam); color: var(--ec-graphite); font-family: var(--ec-font-body); }
.ec *, .ec *::before, .ec *::after { box-sizing: border-box; }
.ec a { text-decoration: none; }
.ec-container { max-width: 1200px; margin: 0 auto; padding-inline: clamp(20px, 5vw, 28px); }

.ec-eyebrow {
  font-family: var(--ec-font-body); font-size: 12px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ec-cyan); margin: 0;
}
.ec-title {
  font-family: var(--ec-font-editorial); font-weight: 700;
  font-size: clamp(30px, 4vw, 50px); line-height: 1.06; letter-spacing: -0.02em;
  color: var(--ec-deep-sea); margin: 0; max-width: 760px; text-wrap: balance;
}
.ec-lead { font-size: 18px; line-height: 1.6; color: var(--ec-graphite); max-width: 660px; margin: 0; }
.ec-serif-quote { font-family: var(--ec-font-editorial); font-style: italic; font-weight: 500; }

/* ---- Botones ------------------------------------------------------------- */
.ec-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--ec-font-body); font-weight: 600; font-size: 15px;
  padding: 13px 24px; border-radius: 999px; cursor: pointer; border: 1px solid transparent;
  transition: transform var(--ec-ease-tide) .18s, box-shadow .18s var(--ec-ease-tide), background .18s var(--ec-ease-tide);
}
.ec-btn svg { width: 16px; height: 16px; }
.ec-btn--primary { background: var(--ec-cyan); color: #fff; box-shadow: 0 4px 12px rgba(0,164,184,.35); }
.ec-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,164,184,.45); }
.ec-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.ec-btn--ghost:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.7); }
.ec-btn--ocean { background: var(--ec-ocean); color: #fff; }
.ec-btn--ocean:hover { transform: translateY(-1px); background: #0c6e96; }

/* ---- Hero ---------------------------------------------------------------- */
.ec-hero {
  position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(180deg, var(--ec-deep-sea) 0%, #0F4D6E 55%, var(--ec-ocean) 100%);
  padding: clamp(56px,7vw,84px) 0 clamp(96px,12vw,150px);
}
.ec-hero__inner { position: relative; z-index: 2; }
.ec-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ec-shallow); padding: 6px 14px; margin: 0;
  background: rgba(110,211,224,.12); border: 1px solid rgba(110,211,224,.35); border-radius: 999px;
}
.ec-hero__eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ec-shallow); }
.ec-wordmark {
  font-family: var(--ec-font-wordmark); font-weight: 800;
  line-height: .98; letter-spacing: -0.035em; color: #fff;
}
.ec-hero h1 { font-size: clamp(46px, 7vw, 92px); margin: 22px 0 14px; max-width: 900px; }
.ec-hero h1 .accent { color: var(--ec-shallow); }
.ec-hero__sub {
  font-family: var(--ec-font-editorial); font-style: italic; font-weight: 400;
  font-size: clamp(18px,2.4vw,23px); color: rgba(255,255,255,.82); max-width: 640px; line-height: 1.45; margin: 0;
}
.ec-hero__meta { display: flex; flex-wrap: wrap; gap: 22px 40px; margin-top: 34px; }
.ec-hero__meta .m { display: flex; flex-direction: column; gap: 4px; }
.ec-hero__meta .label { font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ec-shallow); }
.ec-hero__meta .value { font-family: var(--ec-font-editorial); font-weight: 600; font-size: 18px; color: #fff; }
.ec-hero__cta { display: flex; gap: 12px; margin-top: 36px; flex-wrap: wrap; }
.ec-hero__iso {
  position: absolute; right: clamp(-40px, -2vw, 0px); top: clamp(40px, 6vw, 70px);
  width: clamp(180px, 28vw, 360px); height: auto; opacity: .9; z-index: 1;
  filter: drop-shadow(0 16px 40px rgba(0,0,0,.35)); pointer-events: none;
}
.ec-hero__waves { position: absolute; left: 0; right: 0; bottom: -1px; height: 120px; z-index: 1; pointer-events: none; display: block; width: 100%; }
.ec-bubble { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; }
@media (max-width: 900px) { .ec-hero__iso { opacity: .35; } }

/* ---- Secciones ----------------------------------------------------------- */
.ec-section { padding: clamp(56px,8vw,90px) 0; }
.ec-section--surface { background: var(--ec-shell); border-top: 1px solid var(--ec-border-subtle); border-bottom: 1px solid var(--ec-border-subtle); }
.ec-section__head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 40px; }

/* ---- Stats --------------------------------------------------------------- */
.ec-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ec-stat__value { font-family: var(--ec-font-editorial); font-weight: 700; font-size: clamp(32px,4vw,46px); line-height: 1; color: var(--ec-deep-sea); letter-spacing: -0.02em; }
.ec-stat__label { font-size: 13.5px; color: var(--ec-pewter); margin-top: 8px; line-height: 1.4; }
.ec-on-dark .ec-stat__value { color: #fff; }
.ec-on-dark .ec-stat__label { color: rgba(255,255,255,.7); }
@media (max-width: 720px) { .ec-stats { grid-template-columns: repeat(2, 1fr); gap: 24px 18px; } }

/* ---- Ediciones / ejes ---------------------------------------------------- */
.ec-grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.ec-eje {
  position: relative; overflow: hidden; background: #fff;
  border: 1px solid var(--ec-border-subtle); border-radius: var(--ec-radius-lg);
  padding: 28px 26px 30px; display: flex; flex-direction: column; gap: 12px; min-height: 220px;
  transition: transform .25s var(--ec-ease-tide), box-shadow .25s var(--ec-ease-tide);
}
.ec-eje:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -16px rgba(13,43,69,.22); }
.ec-eje__num { font-family: var(--ec-font-mono); font-size: 12px; font-weight: 500; color: var(--ec-cyan); letter-spacing: 0.1em; }
.ec-eje h3 { font-family: var(--ec-font-editorial); font-weight: 600; font-size: 21px; color: var(--ec-deep-sea); margin: 0; line-height: 1.2; }
.ec-eje p { font-size: 14.5px; color: var(--ec-graphite); line-height: 1.55; margin: 0; }
.ec-eje__blob {
  position: absolute; right: -36px; bottom: -36px; width: 130px; height: 130px;
  background: radial-gradient(circle at 30% 30%, var(--ec-shallow), var(--ec-cyan));
  border-radius: 62% 38% 55% 45% / 50% 56% 44% 50%; opacity: .16;
}
.ec-eje__tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.ec-eje__tags span { font-size: 11px; padding: 4px 10px; border-radius: 999px; background: var(--ec-cyan-soft); color: var(--ec-ocean); font-weight: 500; }

/* ---- Instituciones (chips estilo ponente) -------------------------------- */
.ec-orgs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.ec-org { background: #fff; border: 1px solid var(--ec-border-subtle); border-radius: var(--ec-radius-md); padding: 18px; display: flex; align-items: center; gap: 12px; }
.ec-org__badge { width: 42px; height: 42px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--ec-ocean), var(--ec-cyan)); color: #fff; font-family: var(--ec-font-editorial); font-weight: 600; font-size: 14px; }
.ec-org__name { font-family: var(--ec-font-editorial); font-weight: 600; font-size: 15px; color: var(--ec-deep-sea); line-height: 1.2; }
.ec-org__sub { font-size: 12px; color: var(--ec-pewter); }

/* ---- Lista de ficha ------------------------------------------------------ */
.ec-fichalist { display: grid; gap: 0; }
.ec-fichalist > div { padding: 14px 0; border-bottom: 1px solid var(--ec-border-subtle); }
.ec-fichalist .k { font-family: var(--ec-font-mono); font-size: 12px; letter-spacing: .04em; color: var(--ec-cyan); text-transform: uppercase; }
.ec-fichalist .v { font-weight: 600; color: var(--ec-deep-sea); margin-top: 3px; }

/* ---- Galería de memoria gráfica ------------------------------------------ */
.ec-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.ec-figure { margin: 0; }
.ec-figure__media { position: relative; overflow: hidden; border-radius: var(--ec-radius-md); aspect-ratio: 4/3; background: var(--ec-deep-sea); }
.ec-figure__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.05) contrast(1.05); transition: transform .5s var(--ec-ease-tide); }
.ec-figure__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,43,69,.05), rgba(13,43,69,.28)); }
.ec-figure:hover .ec-figure__media img { transform: scale(1.05); }
.ec-figure figcaption { font-size: 13px; color: var(--ec-pewter); margin-top: 8px; line-height: 1.4; }
.ec-span2 { grid-column: span 2; }
@media (max-width: 520px) { .ec-span2 { grid-column: span 1; } }

/* ---- Bloque CTA navy (glass) --------------------------------------------- */
.ec-cta {
  position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(135deg, var(--ec-deep-sea), var(--ec-ocean));
  border-radius: var(--ec-radius-xl); padding: clamp(36px,5vw,56px);
  display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px,4vw,50px); align-items: center;
}
.ec-cta::before { content: ""; position: absolute; right: -120px; bottom: -120px; width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(110,211,224,.4), transparent 70%); border-radius: 50%; }
.ec-cta__copy { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 16px; }
.ec-cta__copy h2 { font-family: var(--ec-font-editorial); font-weight: 700; font-size: clamp(28px,3.4vw,40px); line-height: 1.06; letter-spacing: -0.02em; color: #fff; margin: 0; }
.ec-cta__copy p { font-size: 16px; color: rgba(255,255,255,.84); line-height: 1.55; margin: 0; }
.ec-cta__panel { position: relative; z-index: 2; background: rgba(255,255,255,.06); border: 1px solid rgba(110,211,224,.25);
  backdrop-filter: blur(8px); border-radius: var(--ec-radius-lg); padding: 26px; display: flex; flex-direction: column; gap: 14px; }
.ec-cta__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.ec-cta__list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: rgba(255,255,255,.88); line-height: 1.45; }
.ec-cta__list li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ec-shallow); margin-top: 7px; flex: none; }
@media (max-width: 860px) { .ec-cta { grid-template-columns: 1fr; } }

/* Bloque de detalle del 4.º Encuentro: dos columnas → una en móvil/tablet */
@media (max-width: 860px) { [data-ec-detail] { grid-template-columns: 1fr !important; } }

/* ---- Teaser para la home ------------------------------------------------- */
.ec-teaser { position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(150deg, var(--ec-deep-sea) 0%, #0F4D6E 60%, var(--ec-ocean) 100%); }
.ec-teaser__inner { position: relative; z-index: 2; padding: clamp(56px,8vw,88px) 0; }
.ec-teaser__lockup { display: flex; align-items: center; gap: 16px; }
.ec-teaser__lockup img { width: 64px; height: 64px; }
.ec-teaser .ec-wordmark { font-size: clamp(28px,4vw,40px); }
.ec-teaser .ec-wordmark .accent { color: var(--ec-shallow); }

/* ---- Reproductor de audio (entrevista) ----------------------------------- */
.ec-audio { width: 100%; margin-top: 18px; height: 46px; border-radius: 999px; }
.ec-audio::-webkit-media-controls-panel { background: rgba(255,255,255,.92); }

/* ---- Divisor de ola reutilizable ----------------------------------------- */
.ec-wavetop { display: block; width: 100%; height: 80px; }

@media (prefers-reduced-motion: reduce) {
  .ec-figure__media img, .ec-eje, .ec-btn { transition: none; }
}