.cd-section{
  padding:28px 0 58px;
}
.cd-card{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(230px,.78fr) minmax(0,1.9fr);
  gap:0;
  border:1px solid var(--line);
  border-radius:24px;
  background:var(--card);
}
.cd-intro{
  padding:30px 30px 28px;
  background:#1d2a4d;
  color:#fff;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:265px;
}
.cd-kicker{
  margin-bottom:7px;
  color:#ff9b42;
  font-size:12px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.cd-title{
  margin:0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:34px;
  line-height:1.05;
  font-weight:500;
}
.cd-place{
  margin-top:10px;
  color:rgba(255,255,255,.72);
  font-size:12px;
  line-height:1.45;
}
.cd-moon-details{margin-top:30px;min-width:0}
.cd-intro-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.cd-moon-symbol{
  width:62px;
  height:62px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:50%;
  display:grid;
  place-items:center;
}
.cd-moon-symbol svg{
  width:36px;
  height:36px;
  display:block;
}
.cd-moon-summary{
  text-align:right;
}
.cd-moon-summary strong{
  display:block;
  font-size:14px;
  font-weight:700;
}
.cd-moon-summary span{
  display:block;
  margin-top:2px;
  color:rgba(255,255,255,.7);
  font-size:11px;
}
.cd-moon-summary .cd-moon-light{white-space:nowrap}
.cd-moon-summary .cd-moon-light span{display:inline;margin:0}
.cd-moon-summary .cd-moon-note{font-size:11px}
.cd-moon-disclaimer{
  margin:16px 0 0;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.24);
  color:rgba(255,255,255,.7);
  font-size:11px;
  line-height:1.45;
}
.cd-data{
  padding:25px 28px 22px;
}
.cd-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--line);
}
.cd-metric{
  min-height:105px;
  padding:17px 18px 16px;
  background:var(--card);
}
.cd-metric-head{
  display:flex;
  align-items:center;
  gap:7px;
  margin-bottom:10px;
  color:var(--muted);
  font-size:10px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.cd-metric-head svg{
  width:14px;
  height:14px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.cd-metric--sunrise .cd-metric-head{color:var(--orange)}
.cd-metric--sunset .cd-metric-head{color:var(--violet)}
.cd-metric--dark .cd-metric-head{color:var(--blue)}
.cd-value{
  color:var(--ink);
  font-family:Georgia,"Times New Roman",serif;
  font-size:23px;
  line-height:1.05;
}
.cd-sub{
  margin-top:5px;
  color:var(--muted);
  font-size:11px;
  line-height:1.4;
}
.cd-phases{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  margin-top:14px;
  border:1px solid var(--line);
  border-radius:13px;
  overflow:hidden;
  background:var(--line);
}
.cd-phases--pending .cd-phase-event{visibility:hidden}
.cd-phase-event{
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 15px;
  min-width:0;
  background:var(--card);
}
.cd-phase-icon{
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  flex:0 0 28px;
  border:1px solid var(--line);
  border-radius:50%;
  color:var(--ink);
}
.cd-phase-icon svg{width:19px;height:19px;display:block}
.cd-phase-label{
  color:var(--muted);
  font-size:10px;
  text-transform:uppercase;
  font-weight:800;
  letter-spacing:.06em;
}
.cd-phase-value{margin-top:3px;color:var(--ink);font-size:12px;font-weight:600}
.cd-source{
  margin-top:11px;
  color:var(--muted);
  font-size:11px;
  text-align:right;
}
.cd-source a{
  color:var(--blue);
  text-decoration:underline;
  text-underline-offset:2px;
}
.cd-card[data-state="loading"] .cd-value,
.cd-card[data-state="loading"] [data-moon-phase]{
  opacity:.45;
}
.cd-card[data-state="error"] .cd-grid,
 .cd-card[data-state="error"] .cd-phases{
  display:none;
}
.cd-error{
  display:none;
  padding:22px;
  border:1px solid var(--line);
  border-radius:16px;
  color:var(--muted);
  font-size:13px;
}
.cd-card[data-state="error"] .cd-error{display:block}

html[data-theme="dark"] .cd-intro{
  background:#fbfbf8;
  color:#1d2a4d;
}
html[data-theme="dark"] .cd-intro .cd-kicker{
  color:#f58214;
}
html[data-theme="dark"] .cd-place,
html[data-theme="dark"] .cd-moon-disclaimer,
html[data-theme="dark"] .cd-moon-summary span{
  color:rgba(29,42,77,.68);
}
html[data-theme="dark"] .cd-moon-symbol{
  border-color:rgba(29,42,77,.22);
}
html[data-theme="dark"] .cd-moon-disclaimer{
  border-top-color:rgba(29,42,77,.24);
}
@media(max-width:850px){
  .cd-card{grid-template-columns:minmax(0,1fr)}
  .cd-intro{min-height:210px}
  .cd-data{min-width:0}
  .cd-intro-bottom{align-items:center}
  .cd-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .cd-section{padding-top:20px}
  .cd-intro{padding:24px 22px 22px}
  .cd-data{padding:20px}
  .cd-grid{grid-template-columns:1fr 1fr}
  .cd-metric{min-height:96px;padding:15px}
  .cd-value{font-size:20px}
  .cd-phases{grid-template-columns:1fr}
  .cd-phase-event{min-width:0}
  .cd-source{overflow-wrap:anywhere;text-align:right}
  .cd-source-item{display:block}
  .cd-source-separator{display:none}
}

@media(max-width:420px){.cd-phases{grid-template-columns:1fr}.cd-phase-event{padding:11px 13px}.cd-intro-bottom{gap:10px}}

/* Fondo oscuro compartido con la franja «Del archivo» de Próximo fenómeno. */
html[data-theme="dark"] .cd-phase-event{background:#111a2b}

html:not([data-theme="dark"]) .cd-phase-event{background:var(--paper)}


/* Solo el nombre enlaza al antecedente, como el lema de portada. */
.cd-title a{color:inherit;text-decoration:none}.cd-title a:hover,.cd-title a:focus-visible{color:var(--orange)}