/* =========================================================================
   NUTECH — Operativa (/operativa/)
   Se carga después de styles.css y servicios.css. Agrega la tabla de contraste,
   las capturas del panel y el gráfico de adopción.
   ========================================================================= */

.metrics .sv-corte{margin:0;padding:12px var(--gutter) 16px;text-align:center;max-width:none;font-size:14px;color:var(--ink-soft)}
.sv-corte{margin-top:20px;max-width:none;font-size:14px;color:var(--ink-soft)}

/* Dos formas de contratar */
.sv-contraste{
  width:100%;border-collapse:separate;border-spacing:0;overflow:hidden;
  border:1px solid var(--line);border-radius:12px;background:var(--surface-raise);
}
.sv-contraste th{
  padding:16px 24px;text-align:left;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);background:var(--surface-warm);border-bottom:1px solid var(--line);
}
.sv-contraste th:last-child{color:var(--ink);box-shadow:inset 0 -3px 0 var(--brand-yellow)}
.sv-contraste td{width:50%;padding:18px 24px;border-top:1px solid var(--line);font-size:16px;color:var(--ink-soft);vertical-align:top}
.sv-contraste tbody tr:first-child td{border-top:0}
.sv-contraste td:last-child{color:var(--ink);font-weight:600;border-left:1px solid var(--line)}
@media (max-width:640px){.sv-contraste th,.sv-contraste td{padding:12px 14px}}

/* Capturas del panel (recortadas, sin nombres) */
.sv-capturas{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start}
.sv-captura{margin:0;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:var(--surface-raise);box-shadow:var(--shadow-sm)}
.sv-captura img{width:100%;height:auto;background:var(--surface-dark)}
.sv-captura figcaption{padding:14px 18px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-soft)}
@media (max-width:900px){.sv-capturas{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.sv-capturas{grid-template-columns:1fr}}

/* Tarjetas en dos columnas (Qué gana quien nos contrata) */
.caps--2{grid-template-columns:repeat(2,1fr)}
@media (max-width:640px){.caps--2{grid-template-columns:1fr}}

/* Texto junto a una figura */
.sv-h2{margin:14px 0 16px;font-size:clamp(28px,3.4vw,44px)}
.sv-p{margin-top:12px}

/* =========================================================================
   Aspecto oscuro de la landing de producción, con los tokens del sitio:
   portada con la ventana del panel, bandas oscuras que alternan con las claras,
   comparativa en dos columnas con líneas finas y barras que crecen al aparecer.
   Sin fuentes nuevas ni esquinas rectas: las del sistema de diseño.
   ========================================================================= */

/* Fondo con luz de marca, sin foto (no hay fotos de Nutech verificadas para esta página) */
.media-section--cine .bg{
  background:
    radial-gradient(70% 60% at 82% 18%,color-mix(in srgb,var(--brand-yellow) 14%,transparent),transparent 70%),
    radial-gradient(55% 50% at 8% 100%,color-mix(in srgb,var(--brand-lime) 9%,transparent),transparent 72%),
    var(--surface-dark);
}
.media-section--cine .veil{display:none}

/* Portada: texto y ventana del panel */
/* La portada tiene que caber en una pantalla. Con la columna de texto angosta,
   el titular se iba a cuatro líneas y los botones y los datos se apilaban:
   en un portátil (1280×720, 1366×768) la sección se pasaba del alto. El
   texto gana ancho, el titular también se mide contra el alto (svh) y la
   captura del panel no pasa de la mitad de la pantalla. */
.sv-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,3.6vw,56px);align-items:center}
.sv-hero-grid .hero-inner h1{font-size:clamp(30px,min(3.9vw,7.4svh),60px)}
@media (max-width:1080px){.sv-hero-grid{grid-template-columns:minmax(0,1fr)}}

.sv-ventana{
  margin:0;padding:8px;border:1px solid color-mix(in srgb,var(--on-media) 16%,transparent);border-radius:14px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--on-media) 10%,transparent),color-mix(in srgb,var(--on-media) 2%,transparent));
  box-shadow:var(--shadow-lg);
}
.sv-ventana-pantalla{overflow:hidden;border-radius:8px;background:var(--surface-dark)}
.sv-ventana-barra{
  display:flex;align-items:center;gap:12px;padding:8px 12px;
  border-bottom:1px solid color-mix(in srgb,var(--on-media) 12%,transparent);
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--on-media-soft);
}
.sv-puntos{display:inline-flex;gap:6px}
.sv-puntos i{width:8px;height:8px;border-radius:50%;background:color-mix(in srgb,var(--on-media) 26%,transparent)}
.sv-ventana-titulo{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:480px){.sv-puntos{display:none}.sv-ventana-barra{letter-spacing:.08em}}
.sv-ventana-corte{white-space:nowrap;color:var(--brand-lime-soft)}
.sv-ventana img{display:block;width:100%;height:auto;max-height:48svh;object-fit:cover;object-position:top center}
.sv-ventana figcaption{padding:10px 6px 2px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--on-media-soft)}

/* Bandas oscuras: una idea por pantalla */
.sv-oscuro{position:relative;isolation:isolate;overflow:hidden;background:var(--surface-dark);color:var(--on-media)}
.sv-oscuro::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 55% at 88% 0%,color-mix(in srgb,var(--brand-yellow) 9%,transparent),transparent 72%),
    radial-gradient(50% 50% at 0% 100%,color-mix(in srgb,var(--brand-lime) 6%,transparent),transparent 72%);
}
.sv-oscuro .eyebrow{color:var(--on-media-soft)}
.sv-oscuro h2{color:var(--on-media)}
.sv-oscuro p{color:var(--on-media-soft)}
.sv-pantalla{min-height:min(100svh,880px);display:flex;align-items:center}
.sv-pantalla > .wrap{width:100%}
@media (max-width:860px){.sv-pantalla{min-height:auto}}

/* Comparativa: dos columnas con líneas finas; la de Nutech, con el filo amarillo */
.sv-oscuro .sv-contraste{border:0;border-radius:0;background:none;overflow:visible;border-collapse:collapse}
.sv-oscuro .sv-contraste th{
  padding:20px 32px 16px 0;background:none;border-bottom:0;
  border-top:2px solid color-mix(in srgb,var(--on-media) 24%,transparent);color:var(--on-media-soft);
}
.sv-oscuro .sv-contraste th:last-child{padding:20px 0 16px 32px;border-top-color:var(--brand-yellow);color:var(--on-media);box-shadow:none}
.sv-oscuro .sv-contraste td{padding:18px 32px 18px 0;border-top:1px solid color-mix(in srgb,var(--on-media) 14%,transparent);color:var(--on-media-soft)}
.sv-oscuro .sv-contraste td:last-child{position:relative;padding:18px 0 18px 32px;border-left:0;color:var(--on-media)}
.sv-oscuro .sv-contraste td:last-child::before{content:"";position:absolute;left:0;top:calc(18px + .65em);width:6px;height:6px;background:var(--brand-yellow)}
@media (max-width:640px){
  .sv-oscuro .sv-contraste th,.sv-oscuro .sv-contraste td{padding-right:14px}
  .sv-oscuro .sv-contraste th:last-child,.sv-oscuro .sv-contraste td:last-child{padding-left:20px;padding-right:0}
}

/* Tarjetas sobre fondo oscuro */
.sv-oscuro .cap{background:color-mix(in srgb,var(--on-media) 5%,transparent);border-color:color-mix(in srgb,var(--on-media) 16%,transparent)}
.sv-oscuro .cap:hover{border-color:var(--brand-yellow);box-shadow:none}
.sv-oscuro .cap h3{color:var(--on-media)}
.sv-oscuro .cap p{color:var(--on-media-soft)}
.sv-oscuro .cap .ico{
  background:color-mix(in srgb,var(--brand-yellow) 14%,transparent);
  border-color:color-mix(in srgb,var(--brand-yellow) 36%,transparent);color:var(--brand-yellow);
}

/* Registros por semana: barras verticales que crecen al aparecer. El texto es HTML y queda
   alineado debajo, en diez columnas iguales. */
.sv-split--grafico{grid-template-columns:.8fr 1.2fr}
@media (max-width:900px){.sv-split--grafico{grid-template-columns:minmax(0,1fr)}}
.sv-adopcion{margin:0}
.sv-adopcion figcaption{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 16px;
  margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid color-mix(in srgb,var(--on-media) 16%,transparent);
  font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--on-media-soft);
}
.sv-adopcion figcaption b{font-size:20px;letter-spacing:.02em;font-variant-numeric:tabular-nums;color:var(--brand-yellow)}
.sv-barras{display:block;width:100%;height:clamp(220px,30vw,340px);border-bottom:2px solid color-mix(in srgb,var(--on-media) 24%,transparent)}
.sv-guias line{stroke:color-mix(in srgb,var(--on-media) 14%,transparent);stroke-width:1}
.sv-barras rect{fill:var(--brand-yellow);transform-box:fill-box;transform-origin:50% 100%}
html.js .sv-adopcion:not(.is-in) .sv-barras rect{transform:scaleY(0)}
.sv-adopcion.is-in .sv-barras rect{animation:sv-crece .9s var(--ease-out) both}
.sv-barras rect:nth-of-type(2){animation-delay:.09s}
.sv-barras rect:nth-of-type(3){animation-delay:.18s}
.sv-barras rect:nth-of-type(4){animation-delay:.27s}
.sv-barras rect:nth-of-type(5){animation-delay:.36s}
.sv-barras rect:nth-of-type(6){animation-delay:.45s}
.sv-barras rect:nth-of-type(7){animation-delay:.54s}
.sv-barras rect:nth-of-type(8){animation-delay:.63s}
.sv-barras rect:nth-of-type(9){animation-delay:.72s}
.sv-barras rect:nth-of-type(10){animation-delay:.81s}
@keyframes sv-crece{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.sv-eje{display:grid;grid-template-columns:repeat(10,1fr);margin:10px 0 0;padding:0;list-style:none;text-align:center}
.sv-eje li{display:grid;gap:2px}
.sv-eje b{font-size:14px;font-variant-numeric:tabular-nums;color:var(--on-media)}
.sv-eje span{font-size:12px;color:var(--on-media-soft)}
.sv-eje .sv-ultima b{color:var(--brand-yellow)}
.sv-eje-pie{margin-top:12px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--on-media-soft)}

/* Con «reducir movimiento» las barras aparecen ya crecidas */
@media (prefers-reduced-motion:reduce){
  .sv-barras rect{animation:none!important;transform:none!important}
}