/*
  ZONA SUR vs ZONA NORTE - PREMIUM V3 (desde cero)
  Objetivo:
  - Mucho "respiro" entre bloques
  - Responsive fino: PC / Laptop / Móvil
  - Sin estilos inline
*/

.svsn3{
  --bg0:#070707;
  --bg1:#111111;
  --text:rgba(255,255,255,.88);
  --muted:rgba(255,255,255,.66);
  --line:rgba(255,255,255,.12);

  --gold:#D4AF37;
  --gold2:#FFD700;
  --blue:#38BDF8;
  --silver:#C0C0C0;
  --bronze:#CD7F32;

  position: relative;
  padding: clamp(4.5rem, 6vw, 7rem) 0;
  color: var(--text);
  background:
    radial-gradient(900px 520px at 12% 8%, rgba(212,175,55,.18), transparent 60%),
    radial-gradient(720px 480px at 88% 16%, rgba(56,189,248,.13), transparent 62%),
    linear-gradient(180deg, var(--bg0) 0%, var(--bg1) 55%, var(--bg0) 100%);
  overflow: hidden;
}

.svsn3::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.06;
  background-image: repeating-linear-gradient(45deg, transparent 0 28px, rgba(212,175,55,.30) 28px 29px);
  pointer-events:none;
}

.svsn3 .container{position:relative; z-index:1;}

/* Header */
.svsn3-header{
  text-align:center;
  margin-bottom: clamp(1.85rem, 2.4vw, 2.6rem);
}

.svsn3-chip{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.6rem 1.2rem;
  border-radius: 999px;
  font-weight: 950;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: .92rem;
  background: rgba(212,175,55,.10);
  border: 1px solid rgba(212,175,55,.30);
  color: var(--gold2);
}

.svsn3-title{
  margin: .85rem 0 .55rem;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  font-size: clamp(1.85rem, 3vw, 3.1rem); /* un poco más compacto */
  line-height: 1.06;
  background: linear-gradient(135deg, var(--gold2), var(--gold));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color: transparent;
}

.svsn3-sub{
  margin: 0 auto;
  max-width: 880px;
  color: var(--muted);
  line-height: 1.65;
  font-size: 1rem;
  font-weight: 650;
}

.svsn3-sub strong{color:#fff; font-weight: 950;}

/* Grid de series */
.svsn3-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(1.1rem, 1.6vw, 1.8rem);
  margin-bottom: clamp(2.25rem, 3vw, 3.25rem);
}

.svsn3-card{
  border-radius: 18px;
  padding: clamp(1.35rem, 2vw, 1.75rem);
  background: rgba(0,0,0,.55);
  border: 1px solid var(--line);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}

.svsn3-cardHead{
  margin-bottom: .95rem;
  text-align:left;
  min-height: 58px; /* asegura alineación entre cards aunque el subtítulo envuelva */
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:.25rem;
}

.svsn3-cardTitle{
  margin:0 0 .3rem;
  font-weight: 1000;
  letter-spacing: .9px;
  text-transform: uppercase;
  font-size: 1.05rem;
}

.svsn3-cardTitle[data-accent="gold"]{color: var(--gold2);} 
.svsn3-cardTitle[data-accent="blue"]{color: var(--blue);} 
.svsn3-cardTitle[data-accent="silver"]{color: var(--silver);} 
.svsn3-cardTitle[data-accent="bronze"]{color: var(--bronze);} 

.svsn3-cardSub{
  margin:0;
  color: rgba(255,255,255,.70);
  font-weight: 650;
  line-height: 1.25;
  font-size: .95rem;
  max-width: none;
}

/* Métricas (2 Sur / VS / 2 Norte) */
.svsn3-metrics{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1rem;
}

.svsn3-metric{
  border-radius: 14px;
  padding: 1rem .95rem;
  text-align:center;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  min-height: 104px;
  min-width: 0;
}

.svsn3-metricN{display:block; font-weight: 1000; font-size: 1.35rem; line-height:1; margin-bottom:.15rem; color:#fff; white-space: nowrap;}
.svsn3-metricL{display:block; font-weight: 950; text-transform: uppercase; letter-spacing:.6px; font-size: .82rem; color: rgba(255,255,255,.88); white-space: nowrap;} 
.svsn3-metricS{display:block; margin-top:.25rem; font-size:.88rem; color: rgba(255,255,255,.58); white-space: nowrap;} 

/* Summary */
.svsn3-summary{
  margin-top: 1.2rem;
  border-radius: 16px;
  padding: 1.15rem;
  background: rgba(212,175,55,.08);
  border: 1px solid rgba(212,175,55,.22);
}

.svsn3-summary[data-tone="silver"]{background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14);} 
.svsn3-summary[data-tone="blue"]{background: rgba(56,189,248,.10); border-color: rgba(56,189,248,.22);} 
.svsn3-summary[data-tone="bronze"]{background: rgba(205,127,50,.11); border-color: rgba(205,127,50,.24);} 

.svsn3-summaryTitle{
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .9px;
  color: var(--gold2);
  margin-bottom: .25rem;
}

.svsn3-summary[data-tone="silver"] .svsn3-summaryTitle{color: rgba(255,255,255,.85);} 
.svsn3-summary[data-tone="blue"] .svsn3-summaryTitle{color: rgba(56,189,248,.95);} 
.svsn3-summary[data-tone="bronze"] .svsn3-summaryTitle{color: rgba(205,127,50,.95);} 

.svsn3-summaryText{color: rgba(255,255,255,.74); font-weight: 650;}

/* Info / Participación */
.svsn3-info{
  border-radius: 18px;
  padding: clamp(1.6rem, 2.2vw, 2.1rem) clamp(1.35rem, 2vw, 1.85rem); /* +aire arriba */
  background: rgba(0,0,0,.52);
  border: 1px solid rgba(212,175,55,.22);
  margin: clamp(2.4rem, 3.2vw, 3.2rem) auto 0; /* lo baja un poco más */
  max-width: 980px; /* centra el bloque y evita que quede pegado a la orilla */
}

.svsn3-infoTitle{
  margin: .65rem 0 1.55rem; /* +aire respecto al borde superior */
  text-align:center;
  color: var(--gold2);
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 1.06rem;
}

.svsn3-infoGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1.05rem;
}

.svsn3-pill{
  border-radius: 16px;
  padding: 1.1rem 1rem;
  text-align:center;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
}

.svsn3-pillK{display:block; font-weight: 950; text-transform: uppercase; letter-spacing:.6px; color: rgba(255,255,255,.86); font-size:.82rem;}
.svsn3-pillV{display:block; margin-top:.35rem; font-weight: 1000; color: var(--gold2); font-size: 1.15rem;}

.svsn3-part{
  margin-top: 1.2rem;
  border-radius: 16px;
  padding: 1.25rem 1.15rem;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  text-align:center;
}

.svsn3-partTitle{color: var(--gold2); font-weight: 1000; text-transform: uppercase; letter-spacing: 1px; margin: 0 0 .6rem;}
.svsn3-partText{margin:0 auto 1rem; max-width: 900px; color: rgba(255,255,255,.74); line-height: 1.7; font-weight: 650;}
.svsn3-partMeta{margin: .9rem 0 0; color: rgba(212,175,55,.86); font-weight: 800;}

/* Responsive */
@media (max-width: 1280px){
  /* Laptop: un pelín más compacto en el header (para que el título no se sienta “pegado” a secciones vecinas) */
  .svsn3{ padding: clamp(4.05rem, 5.2vw, 6.3rem) 0; }
  .svsn3-header{ margin-bottom: clamp(1.55rem, 2.0vw, 2.15rem); }
  .svsn3-title{ font-size: clamp(1.72rem, 2.55vw, 2.65rem); margin: .75rem 0 .5rem; }

  .svsn3-grid{gap: 1.8rem;}

  /* Ajuste laptop: evita que el bloque del medio (VS/Enfrentamiento) se vea “corrido” */
  .svsn3-metrics{grid-template-columns: 1fr auto 1fr; gap: .9rem;}
  .svsn3-metric{padding: .95rem .85rem; min-height: 100px;}
  .svsn3-metricN{font-size: 1.25rem;}
}

@media (max-width: 980px){
  .svsn3-grid{grid-template-columns: 1fr;}
  .svsn3-infoGrid{grid-template-columns: 1fr;}
}

@media (max-width: 560px){
  .svsn3-metrics{grid-template-columns: 1fr;}
  .svsn3-metric{min-height: auto;}
}