/* ==========================================================================
   CHUBUT EXPLORERS · eclipse.css
   Estilos de la página dedicada al Eclipse Solar Anular 2027 (eclipse.html)
   ========================================================================== */

.eclipsepage { padding-top: var(--alto-header); background: var(--crema); }

/* ----------  HERO  ---------- */
.ecl-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 38%, rgba(217,154,78,.28), transparent 45%),
    linear-gradient(180deg, #0a1124 0%, #11203c 60%, #15233f 100%);
  color: #fff;
  padding: clamp(40px, 7vw, 80px) 24px clamp(48px, 7vw, 80px);
}
.ecl-hero__stars {
  position: absolute; inset: 0;
  background:
    radial-gradient(1px 1px at 12% 20%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 32% 50%, #fff, transparent),
    radial-gradient(1px 1px at 52% 16%, #fff, transparent),
    radial-gradient(1px 1px at 70% 40%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 85% 24%, #fff, transparent),
    radial-gradient(1px 1px at 22% 70%, #fff, transparent),
    radial-gradient(1px 1px at 62% 78%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 90% 66%, #fff, transparent);
  opacity: .5;
  animation: ce-twinkle 5s ease-in-out infinite;
}
.ecl-hero__inner { position: relative; max-width: 900px; margin: 0 auto; text-align: center; }
.ecl-hero__inner .sec-hero__back { margin-bottom: 22px; }
.ecl-hero__eyebrow { color: var(--ambar-claro); font-weight: 700; letter-spacing: 3px; font-size: 13px; text-transform: uppercase; margin: 0 0 16px; }
.ecl-hero__title {
  font-weight: 900;
  font-size: clamp(40px, 8vw, 84px);
  line-height: .95;
  margin: 0 0 20px;
}
.ecl-hero__title span {
  display: block;
  background: linear-gradient(90deg, #f2b65a, #e07b39);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ecl-hero__lead { color: #cfd8ea; font-size: clamp(16px, 2.2vw, 21px); max-width: 60ch; margin: 0 auto 32px; line-height: 1.55; }
.ecl-hero__lead strong { color: #fff; }

/* Cuenta regresiva */
.ecl-count { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 32px; }
.ecl-count__box {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px;
  padding: 16px 10px;
  min-width: 84px;
}
.ecl-count__box b { font-family: var(--fuente-titulos); font-weight: 900; font-size: clamp(28px, 4vw, 40px); display: block; line-height: 1; color: #fff; }
.ecl-count__box span { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: #9fb0cc; margin-top: 6px; display: block; }
.ecl-hero__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ----------  BLOQUES DE CONTENIDO  ---------- */
.ecl-bloque { padding: clamp(48px, 7vw, 80px) 24px; }
.ecl-bloque--alt { background: var(--crema-2); }
.ecl-wrap { max-width: 820px; margin: 0 auto; }
.ecl-h2 { font-weight: 800; font-size: clamp(26px, 4vw, 40px); color: var(--verde-bosque); line-height: 1.1; margin: 0 0 20px; }
.ecl-h3 { font-weight: 800; font-size: clamp(19px, 2.4vw, 23px); color: var(--verde-bosque); margin: 0 0 10px; }
.ecl-text { color: #3c443a; font-size: 17px; line-height: 1.7; margin: 0 0 18px; }
.ecl-text:last-child { margin-bottom: 0; }
.ecl-text strong { color: var(--verde-bosque); }
.ecl-destacado {
  font-family: var(--fuente-titulos);
  font-weight: 800;
  font-size: clamp(19px, 2.6vw, 26px);
  color: var(--ambar);
  line-height: 1.25;
  margin: 8px 0 0;
}

/* Imagen dentro de bloque */
.ecl-img { width: 100%; border-radius: 16px; margin: 26px 0 8px; box-shadow: var(--sombra-card); display: block; }
.ecl-img--diagrama { background: #000; padding: 18px; }
.ecl-figcap { color: var(--texto-suave); font-size: 13.5px; text-align: center; margin: 8px 0 0; }

/* ----------  RECUADRO DE DATOS  ---------- */
.ecl-datos {
  background: linear-gradient(160deg, #15233f, #0e1a30);
  border-radius: 20px;
  padding: clamp(26px, 4vw, 40px);
  box-shadow: 0 16px 44px rgba(10,18,40,.3);
}
.ecl-datos__head { text-align: center; margin-bottom: 26px; }
.ecl-datos__sub { color: var(--ambar-claro); font-size: 14px; letter-spacing: 1px; margin: 8px 0 0; }
.ecl-datos__grid { margin: 0 0 26px; display: flex; flex-direction: column; gap: 0; }
.ecl-datos__fila {
  display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
  padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.1);
}
.ecl-datos__fila dt { color: #9fb0cc; font-size: 14px; flex: none; }
.ecl-datos__fila dd { margin: 0; text-align: right; color: #fff; font-weight: 700; font-size: 16px; }
.ecl-datos__fila dd span { display: block; color: #8294b3; font-weight: 400; font-size: 12.5px; margin-top: 2px; max-width: 42ch; margin-left: auto; }
.ecl-datos__fila--max { background: rgba(217,154,78,.12); border-radius: 10px; padding: 14px 14px; border-bottom: none; }
.ecl-datos__fila--max dt, .ecl-datos__fila--max dd { color: var(--ambar-claro); }
.ecl-datos__fila--max dd { color: #fff; }
.ecl-datos__nums { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ecl-datos__num { background: rgba(255,255,255,.06); border-radius: 12px; padding: 18px; text-align: center; }
.ecl-datos__num b { font-family: var(--fuente-titulos); font-weight: 900; font-size: clamp(26px, 4vw, 34px); color: var(--ambar-claro); display: block; line-height: 1; }
.ecl-datos__num span { color: #9fb0cc; font-size: 12.5px; margin-top: 8px; display: block; letter-spacing: .4px; }

/* ----------  LISTAS  ---------- */
.ecl-lista { list-style: none; padding: 0; margin: 0 0 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.ecl-lista li { display: flex; gap: 9px; align-items: flex-start; color: #3c443a; font-size: 16px; line-height: 1.45; }
.ecl-lista li::before { content: "✓"; color: var(--verde-bosque-claro); font-weight: 800; flex: none; }

/* ----------  ALERTA DE SEGURIDAD  ---------- */
.ecl-alerta {
  display: flex; gap: 18px; align-items: flex-start;
  background: #fdecea;
  border: 2px solid var(--rojo-error);
  border-radius: 16px;
  padding: 24px;
  margin: 8px 0 30px;
}
.ecl-alerta__icono { font-size: 34px; line-height: 1; flex: none; }
.ecl-alerta__title { color: var(--rojo-error); font-weight: 800; font-size: 20px; margin: 0 0 8px; }
.ecl-alerta__text { color: #5a2a24; font-size: 16px; line-height: 1.6; margin: 0; }
.ecl-alerta__text strong { color: var(--rojo-error); }

/* Anteojos a la venta */
.ecl-anteojos {
  background: #fff;
  border: 1px solid #e7e1d4;
  border-radius: 16px;
  padding: clamp(22px, 3vw, 32px);
  box-shadow: var(--sombra-card);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.ecl-anteojos__media { width: 100%; }
.ecl-anteojos img { max-width: 280px; }

/* Recuadro "NO hacer" */
.ecl-no {
  background: #fff7ee;
  border-left: 4px solid var(--ambar);
  border-radius: 0 12px 12px 0;
  padding: 24px;
  margin: 30px 0 0;
}
.ecl-lista--no { grid-template-columns: 1fr; gap: 14px; }
.ecl-lista--no li { font-size: 15.5px; }
.ecl-lista--no li::before { content: "✕"; color: var(--rojo-error); }

@media (max-width: 560px) {
  .ecl-datos__nums { grid-template-columns: 1fr; }
}