/* ══════════════════════════════════════════════════════════════
   CASOS REALES · rotador de clientes · sección del Home
   Todo scopeado bajo .nc-root para no tocar nada del sitio.

   La rotación es CSS pura: los tres casos y las tres barras cuelgan de la
   misma vuelta de 19,5s y entran con su retardo. Si el JS no corre (o está
   bloqueado), la sección rota igual. El JS solo agrega el salto al hacer clic.

   Este CSS viene del embed, así que el canvas del Designer no lo pinta:
   se ve en Preview y publicado.
   ══════════════════════════════════════════════════════════════ */
.nc-root{
  --ink:#25213A; --ink-2:#4E4768; --mut:#8A83A0;
  --line:rgba(37,33,58,.11); --line-soft:rgba(37,33,58,.06);
  --purple:#472F68; --brand:#7B5EA7; --wash:#F7F5FB;
  --paso:6.5s;                    /* cuánto dura cada cliente */
  --vuelta:19.5s;                 /* 3 × paso */
  color:var(--ink);
  font-family:Monasans,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
}
.nc-root *,.nc-root *::before,.nc-root *::after{ box-sizing:border-box; }
.nc-root img{ display:block; max-width:100%; }

/* ── cabecera ── */
.nc-cab{ display:flex; justify-content:space-between; align-items:end; gap:48px; margin-bottom:40px; }
.nc-eyebrow{ font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color:var(--brand); margin:0; }
/* mismas métricas que .heading-style-h2 del sitio */
/* el color va explícito en cada uno: una regla del sitio sobre h2/p le gana al
   color heredado de .nc-root, por más que la herencia sea la correcta */
.nc-h2{ font-size:clamp(30px,3.4vw,44px); font-weight:400; letter-spacing:-.03em;
  line-height:1.1; margin:16px 0 0; text-wrap:balance; color:var(--ink); }
.nc-lead{ font-size:17px; line-height:1.6; color:var(--mut); margin:14px 0 0; max-width:44ch; }

/* ── selector de clientes ── */
.nc-tabs{ display:flex; gap:26px; align-items:center; flex:none; }
.nc-tabs button{ appearance:none; background:none; border:0; cursor:pointer; font:inherit;
  padding:0; display:flex; flex-direction:column; gap:12px; align-items:center; width:104px; }
.nc-tabs .nc-logo{ height:22px; width:auto; filter:grayscale(1); opacity:.5; }
.nc-tabs button:hover .nc-logo{ opacity:.8; }
.nc-tabs .nc-track{ width:100%; height:2px; background:var(--line); border-radius:2px; overflow:hidden; }
.nc-tabs .nc-fill{ display:block; height:100%; background:var(--purple);
  transform:scaleX(0); transform-origin:left center; }

/* ── la escena: los tres casos ocupan la MISMA celda de grilla, así el alto lo
      manda el más alto y no hay salto al cambiar de cliente ── */
.nc-escena{ display:grid; padding-top:44px; border-top:1px solid var(--line); }
.nc-panel{ grid-area:1/1; opacity:0; }
.nc-cuerpo{ display:grid; grid-template-columns:320px 1fr 216px; gap:52px; align-items:stretch; }

.nc-foto{ position:relative; aspect-ratio:1/1; border-radius:12px; overflow:hidden;
  background:var(--wash); }
.nc-foto > img{ width:100%; height:100%; object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.75,.3,1); }
.nc-escena:hover .nc-foto > img{ transform:scale(1.055); }
.nc-marca{ position:absolute; left:14px; bottom:14px; background:rgba(255,255,255,.94);
  border-radius:8px; padding:8px 12px; display:flex; align-items:center;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  box-shadow:0 6px 18px -8px rgba(20,10,40,.45); }
.nc-marca img{ height:19px; width:auto; }

.nc-texto{ display:flex; flex-direction:column; }
/* la bandera es el país de origen del cliente, no un adorno: va en la línea de
   identidad, del alto de la mayúscula y con un aro para que no flote */
.nc-idn{ display:flex; align-items:center; gap:9px; margin:0;
  font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--mut); }
.nc-flag{ width:21px; height:15px; border-radius:3px; overflow:hidden; flex:none;
  box-shadow:0 0 0 1px rgba(37,33,58,.14) inset; display:block; }
.nc-flag img,.nc-flag svg{ display:block; width:100%; height:100%; object-fit:cover;
  transform:scale(1.06); }
.nc-decl{ font-size:clamp(20px,2.05vw,26px); font-weight:400; line-height:1.36;
  letter-spacing:-.018em; margin:14px 0 0; text-wrap:pretty; color:var(--ink); }
.nc-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:26px; }
.nc-chips i{ font-style:normal; font-size:12px; color:var(--mut); border:1px solid var(--line);
  border-radius:999px; padding:3px 10px; }

.nc-rail{ display:flex; flex-direction:column; justify-content:space-between;
  padding-left:40px; border-left:1px solid var(--line); }
.nc-cifra{ font-size:clamp(28px,2.9vw,36px); font-weight:350; letter-spacing:-.035em;
  line-height:1; font-variant-numeric:tabular-nums; margin:0; color:var(--ink); }
.nc-cifra-lbl{ font-size:13.5px; line-height:1.45; color:var(--mut); margin:10px 0 0; max-width:27ch; }

/* ══ el reloj ══ */
@keyframes nssEscena{
  0%{opacity:0} 2.2%{opacity:1} 31.1%{opacity:1} 33.33%{opacity:0} 100%{opacity:0}
}
@keyframes nssAvance{
  0%{transform:scaleX(0)} 33.33%{transform:scaleX(1)}
  33.34%{transform:scaleX(0)} 100%{transform:scaleX(0)}
}
@keyframes nssActivo{
  0%{filter:none;opacity:1} 33.32%{filter:none;opacity:1}
  33.33%{filter:grayscale(1);opacity:.5} 100%{filter:grayscale(1);opacity:.5}
}
.nc-panel        { animation:nssEscena var(--vuelta) linear var(--d) infinite; }
.nc-tabs .nc-fill{ animation:nssAvance var(--vuelta) linear var(--d) infinite; }
.nc-tabs .nc-logo{ animation:nssActivo var(--vuelta) step-end var(--d) infinite; }
.nc-panel:nth-child(1),
.nc-tabs button:nth-child(1) .nc-fill,
.nc-tabs button:nth-child(1) .nc-logo{ --d:0s; }
.nc-panel:nth-child(2),
.nc-tabs button:nth-child(2) .nc-fill,
.nc-tabs button:nth-child(2) .nc-logo{ --d:var(--paso); }
.nc-panel:nth-child(3),
.nc-tabs button:nth-child(3) .nc-fill,
.nc-tabs button:nth-child(3) .nc-logo{ --d:calc(var(--paso) * 2); }

/* el mouse encima congela la vuelta entera: barra, cambio de cliente y logo */
.nc-root:hover .nc-panel,
.nc-root:hover .nc-fill,
.nc-root:hover .nc-logo{ animation-play-state:paused; }

/* ── movimiento reducido: se queda en el primer caso, sin rotación ni zoom ── */
@media (prefers-reduced-motion: reduce){
  .nc-panel,.nc-tabs .nc-fill,.nc-tabs .nc-logo{ animation:none !important; }
  .nc-panel:nth-child(1){ opacity:1; }
  .nc-panel:nth-child(2),.nc-panel:nth-child(3){ display:none; }
  .nc-tabs button:nth-child(1) .nc-fill{ transform:scaleX(1); }
  .nc-tabs button:nth-child(1) .nc-logo{ filter:none; opacity:1; }
  .nc-escena:hover .nc-foto > img{ transform:none; }
}

@media (max-width:991px){
  .nc-cab{ display:block; }
  .nc-lead{ margin-top:12px; }
  .nc-tabs{ margin-top:26px; gap:14px; }
  .nc-tabs button{ width:auto; flex:1; }
  .nc-escena{ padding-top:30px; }
  .nc-cuerpo{ grid-template-columns:1fr; gap:28px; }
  .nc-foto{ aspect-ratio:5/4; }
  .nc-rail{ padding-left:0; border-left:0; padding-top:26px;
    border-top:1px solid var(--line); flex-direction:row; gap:28px; }
  .nc-rail > div{ flex:1; }
}