:root{
  --ec-bg: #0f172a;
  --ec-card: #111827;
  --ec-text: #e5e7eb;
  --ec-muted: #9ca3af;
  --ec-brand1: #0c8f5d;
  --ec-brand2: #19b394;
  --ec-ring: rgba(25,179,148,.35);
  --ec-shadow: rgba(0,0,0,.35);
}

@media (prefers-color-scheme: light){
  :root{
    --ec-bg: #f8fafc;
    --ec-card: #ffffff;
    --ec-text: #0f172a;
    --ec-muted: #475569;
    --ec-shadow: rgba(2,6,23,.12);
  }
}

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}

body {
  background-color: var(--ec-bg);
  font-family: 'Segoe UI', Roboto, sans-serif;
  margin: 0;
  padding: 0;
}

.ec4{
  background: linear-gradient(120deg, var(--ec-bg), #0b1225 35%, var(--ec-bg));
  border-radius: 18px;
  padding: 2.25rem 1.25rem;
  position: relative;
  overflow: hidden;
  color: var(--ec-text);
  box-shadow: 0 25px 60px var(--ec-shadow);
  max-width: 1100px;
  margin: 40px auto;
}

.ec4::before{
  content:"";
  position:absolute;
  inset:-60%;
  background: conic-gradient(from 0deg,
    transparent 0 270deg, rgba(25,179,148,.28) 270deg 360deg);
  filter: blur(52px);
  animation: ec-rotate 22s linear infinite;
}
@keyframes ec-rotate{ to{ transform: rotate(1turn); } }

.ec4 .ec4-head{ position: relative; margin-bottom: 1.25rem; text-align:center; }
.ec4 .ec4-title{
  font-size: clamp(1.4rem, 1.2rem + 1vw, 2rem);
  font-weight: 800;
  letter-spacing:.3px;
  background: linear-gradient(90deg, var(--ec-brand1), var(--ec-brand2));
  -webkit-background-clip: text;
  color: transparent;
}
.ec4 .ec4-sub{ color: var(--ec-muted); margin-top: .35rem; }

.ec4-grid{
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  justify-content: center;
}

.ec4-card{
  background: linear-gradient(180deg, var(--ec-card), color-mix(in srgb, var(--ec-card) 80%, black 20%));
  border: 1px solid color-mix(in srgb, var(--ec-card) 80%, white 20%);
  border-radius: 16px;
  padding: 1.15rem .95rem;
  box-shadow: 0 10px 24px var(--ec-shadow);
  transform: translateY(6px) scale(.985);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  opacity:0;
  animation: ec-in .6s ease forwards;
}

.ec4-card:nth-child(1){ animation-delay:.10s; }
.ec4-card:nth-child(2){ animation-delay:.22s; }
.ec4-card:nth-child(3){ animation-delay:.34s; }
.ec4-card:nth-child(4){ animation-delay:.46s; }

@keyframes ec-in{
  from{ opacity:0; transform: translateY(14px) scale(.985); }
  to  { opacity:1; transform: translateY(6px) scale(.985); }
}

.ec4-card:hover{
  transform: translateY(0) scale(1.02);
  border-color: var(--ec-brand2);
  box-shadow: 0 18px 40px rgba(25,179,148,.25);
}

.ec4-ic{
  width: 44px; height: 44px;
  border-radius: 12px;
  display:grid; place-items:center;
  font-size: 22px;
  background: radial-gradient(120% 120% at 20% 20%, var(--ec-brand2), var(--ec-brand1));
  color: white;
  box-shadow: 0 10px 20px rgba(25,179,148,.35);
  animation: ec-float 4s ease-in-out infinite;
}
@keyframes ec-float{ 50%{ transform: translateY(-6px);} }

.ec4-h{ margin-top: .85rem; font-weight: 800; letter-spacing:.2px; }
.ec4-p{ color: var(--ec-muted); margin-top:.35rem; line-height:1.35rem; }

.ec4-chip{
  display:inline-block;
  margin-top:.6rem;
  font-size:.82rem;
  font-weight:700;
  background: linear-gradient(90deg, var(--ec-brand1), var(--ec-brand2));
  color:white;
  padding:.28rem .55rem;
  border-radius:999px;
  box-shadow: 0 8px 18px rgba(25,179,148,.30);
}

/* Modal emergente */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: grid;
  place-items: center;
  z-index: 1000;
}

.modal {
  background: var(--ec-card);
  color: var(--ec-text);
  padding: 1.5rem;
  border-radius: 16px;
  width: 90%;
  max-width: 420px;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0,0,0,.45);
  animation: modalIn 0.4s ease;
}

.modal h3 {
  font-weight: 800;
  color: var(--ec-brand2);
  margin-bottom: .6rem;
}

.modal button {
  margin-top: 1rem;
  background: linear-gradient(90deg, var(--ec-brand1), var(--ec-brand2));
  border: none;
  color: #fff;
  font-weight: 600;
  padding: .5rem 1.2rem;
  border-radius: 8px;
  cursor: pointer;
}
.modal button:hover {
  opacity: 0.9;
}

@keyframes modalIn {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}