/* Versión 2: la radiografía, el carrusel de testimonios con banderas, los caminos y los productos diferenciados. Se carga después de pro.css. */

/* ── La placa de rayos X ── */
.rx-placa{position:relative;border-radius:10px;overflow:hidden;background:radial-gradient(ellipse at 50% 45%,#0b2433 0%,#06141d 55%,#02080c 100%);
  box-shadow:0 50px 100px rgba(0,0,0,.6),0 0 0 1px rgba(143,220,255,.22),inset 0 0 120px rgba(0,0,0,.65)}
.rx-placa::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;background:radial-gradient(ellipse at 50% 50%,transparent 55%,rgba(0,0,0,.55) 100%)}
.rx-placa .grano{opacity:.12}
.rx-svg{display:block;width:100%;height:auto;position:relative;z-index:1}
.rx-cab{position:absolute;z-index:3;top:12px;left:16px;right:16px;display:flex;justify-content:space-between;gap:12px;font:500 11px/1.3 var(--mono);letter-spacing:.1em;color:#8fdcff;text-transform:uppercase;pointer-events:none}
.rx-cab b{color:#ff6b82;font-weight:500}
.rx-scan{animation:rxscan 5.5s cubic-bezier(.45,0,.55,1) infinite}
@keyframes rxscan{0%{transform:translateY(0)}70%{transform:translateY(700px)}100%{transform:translateY(700px)}}
.rx-flujo{animation:rxflujo 1.6s linear infinite}
@keyframes rxflujo{to{stroke-dashoffset:-32}}
.rx-pt{opacity:0;animation:rxpt .6s cubic-bezier(.3,1.6,.5,1) forwards;animation-delay:var(--d)}
@keyframes rxpt{from{opacity:0}to{opacity:1}}
.rx-halo{fill:none;stroke:#ff3b5c;stroke-width:2;transform-origin:center;transform-box:fill-box;animation:rxhalo 1.8s ease-out infinite}
@keyframes rxhalo{0%{transform:scale(1);opacity:.9}100%{transform:scale(2.6);opacity:0}}
.rx-trazo{animation:rxprende 1.4s ease-out both}
@keyframes rxprende{from{opacity:0}to{opacity:1}}
.rx-leyenda{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px 22px}
.rx-leyenda li{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;font-size:16px;color:var(--suave)}
.rx-leyenda li b{width:28px;height:28px;border-radius:50%;background:#ff3b5c;color:#fff;display:grid;place-items:center;font:900 13px/1 var(--ultra);box-shadow:0 0 16px rgba(255,59,92,.55)}
.rx-leyenda li strong{display:block;font:900 14px/1.2 var(--ultra);text-transform:uppercase;color:var(--papel);margin-bottom:2px}
.rx-nota{font:500 11px/1.4 var(--mono);color:var(--muted);letter-spacing:.08em;text-transform:uppercase}

/* ── Banderas ── */
.bandera{display:inline-block;width:22px;height:15px;border-radius:2px;overflow:hidden;vertical-align:-2px;box-shadow:0 0 0 1px rgba(255,255,255,.18)}
.bandera svg{display:block;width:100%;height:100%}

/* ── Carrusel de testimonios ── */
.carrusel{position:relative}
.carrusel .pista{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 48px)/4);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:8px;scrollbar-width:none}
.carrusel .pista::-webkit-scrollbar{display:none}
.carrusel .testi{scroll-snap-align:start}
.carrusel .flechas{display:flex;gap:10px;justify-content:flex-end;align-items:center}
.carrusel .flechas span{font:500 12px/1 var(--mono);color:var(--muted);letter-spacing:.08em;margin-right:auto}
.carrusel .flecha{width:52px;height:52px;border-radius:50%;border:1.5px solid rgba(242,241,238,.4);background:transparent;color:var(--papel);display:grid;place-items:center;cursor:pointer;transition:background .2s,border-color .2s,transform .2s}
.carrusel .flecha:hover{background:var(--rojo);border-color:var(--rojo);transform:translateY(-2px)}
.carrusel .flecha:disabled{opacity:.3;pointer-events:none}
.carrusel .flecha svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.testi.ancho video{object-fit:contain;background:#0b0d0e}
.testi .ed{justify-self:start;font:500 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--azul);border:1px solid rgba(127,180,230,.35);border-radius:3px;padding:5px 7px}
.testi cite{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center}

/* ── Franja de países ── */
.paises2{border-block:1px solid var(--rule);background:var(--negro);overflow:hidden}
.paises2 .in{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;padding-block:18px}
.paises2 .ante{color:var(--muted)}
.paises2 b{font:900 13px/1.2 var(--ultra);text-transform:uppercase;letter-spacing:.02em;display:inline-flex;gap:8px;align-items:center}

/* ── «¿Por dónde empiezo?» ── */
.caminos{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ruta{position:relative;overflow:hidden;border-radius:12px;padding:24px 22px 22px;text-decoration:none;color:var(--papel);display:grid;gap:16px;align-content:space-between;min-height:250px;isolation:isolate;
  background:linear-gradient(160deg,#1d2429 0%,#121619 70%);border:1px solid var(--rule);transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s}
.ruta::before{content:"";position:absolute;inset:-40% -40% auto auto;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(127,180,230,.28),transparent 70%);z-index:-1;transition:transform .5s}
.ruta:hover{transform:translateY(-6px);border-color:rgba(127,180,230,.55);box-shadow:0 30px 60px rgba(0,0,0,.45)}
.ruta:hover::before{transform:scale(1.3)}
.ruta .n{font:500 12px/1 var(--mono);color:var(--azul);letter-spacing:.12em}
.ruta svg{width:54px;height:54px;stroke:var(--papel);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ruta .si{font-size:18px;line-height:1.35}
.ruta .va{display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid rgba(242,241,238,.14);padding-top:14px;font:900 14px/1.15 var(--ultra);text-transform:uppercase}
.ruta .va i{font-style:normal;width:34px;height:34px;border-radius:50%;background:var(--papel);color:var(--carbon);display:grid;place-items:center;transition:transform .3s,background .3s}
.ruta:hover .va i{transform:translateX(4px);background:var(--rojo);color:#fff}
.ruta.rx{background:linear-gradient(160deg,#0f2a38 0%,#081820 70%);border-color:rgba(143,220,255,.35)}
.ruta.rx::before{background:radial-gradient(circle,rgba(143,220,255,.35),transparent 70%)}
.ruta.pw{background:linear-gradient(160deg,#2a1a1d 0%,#151012 70%)}
.ruta.pw::before{background:radial-gradient(circle,rgba(224,16,52,.32),transparent 70%)}
.otra-ruta{margin-top:18px;font-size:16px;color:var(--suave)}
.otra-ruta a{color:var(--papel);font-family:var(--ultra);font-weight:900;text-transform:uppercase;font-size:13px;letter-spacing:.04em;text-decoration:none;border-bottom:2px solid var(--rojo);padding-bottom:2px;margin-left:6px}

/* ── Productos en tres niveles ── */
.nivel{display:grid;gap:16px}
.nivel + .nivel{margin-top:44px}
.nivel > h3{font:500 12px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--azul);margin:0;display:flex;gap:14px;align-items:center}
.nivel > h3::after{content:"";flex:1;height:1px;background:var(--rule)}
.destacado{display:grid;grid-template-columns:1.05fr .95fr;border-radius:14px;overflow:hidden;border:1px solid rgba(224,16,52,.5);background:linear-gradient(135deg,#1c1013 0%,#0e1114 60%);box-shadow:0 40px 90px rgba(0,0,0,.45)}
.destacado .arte{position:relative;background:#06141d;min-height:300px;border-right:1px solid rgba(143,220,255,.18)}
.destacado .arte .rx-svg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.destacado .info{padding:clamp(24px,4vw,40px);display:grid;gap:16px;align-content:center}
.destacado .marca{justify-self:start;background:var(--rojo);color:#fff;font:900 11px/1 var(--ultra);letter-spacing:.08em;text-transform:uppercase;padding:7px 10px}
.destacado h3{font:900 clamp(28px,3.4vw,40px)/1 var(--ultra);text-transform:uppercase;letter-spacing:-.03em;margin:0}
.destacado p{font-size:17px;color:var(--suave)}
.destacado .precio b{font:900 44px/1 var(--ultra);letter-spacing:-.03em}
.destacado .precio{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.destacado .precio span{font-size:14px;color:var(--muted)}

.prods{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.prod2{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--rule);background:#121518;display:grid;grid-template-rows:150px 1fr;min-width:0;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s}
.prod2:hover{transform:translateY(-5px);box-shadow:0 28px 60px rgba(0,0,0,.45);border-color:rgba(127,180,230,.45)}
.prod2 .arte{position:relative;overflow:hidden;display:grid;place-items:center}
.prod2 .arte svg{width:100%;height:100%}
.prod2 .info{padding:24px;display:grid;gap:12px;grid-template-rows:auto auto 1fr auto auto}
.prod2 .tipo{font:500 11px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--azul)}
.prod2 h4{font:900 23px/1 var(--ultra);text-transform:uppercase;letter-spacing:-.02em;margin:0}
.prod2 p{font-size:15px;color:var(--suave)}
.prod2 .precio{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;border-top:1px solid var(--rule);padding-top:14px}
.prod2 .precio b{font:900 30px/1 var(--ultra);letter-spacing:-.03em}
.prod2 .precio span{font-size:13px;color:var(--muted)}
.prod2.c1 .arte{background:linear-gradient(rgba(127,180,230,.10) 1px,transparent 1px) 0 0/22px 22px,linear-gradient(90deg,rgba(127,180,230,.10) 1px,transparent 1px) 0 0/22px 22px,#0f1c26}
.prod2.c2 .arte{background:radial-gradient(circle at 70% 30%,#2b2a1c,#14140f)}
.prod2.c3 .arte{background:radial-gradient(circle at 30% 40%,#3a1219,#170b0e)}
.aprender{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.mini{border-radius:12px;border:1px dashed rgba(242,241,238,.25);background:rgba(22,26,28,.6);padding:22px;display:grid;grid-template-columns:56px 1fr auto;gap:18px;align-items:center;min-width:0}
.mini svg{width:56px;height:56px;stroke:var(--papel);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.mini b{font:900 18px/1.1 var(--ultra);text-transform:uppercase;display:block}
.mini p{font-size:14px;color:var(--muted)}

/* ── Para quién ── */
.para3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.para3 > div{border-radius:10px;padding:26px;display:grid;gap:14px;align-content:start}
.para3 .si{background:rgba(30,158,94,.08);border:1px solid rgba(30,158,94,.4)}
.para3 .si h3{color:#7fdcab}
.para3 .no{background:var(--panel);border:1px solid var(--rule)}
.para3 h3{font:900 19px/1.1 var(--ultra);text-transform:uppercase;margin:0}
.para3 p{color:var(--suave)}
.para3 svg{width:44px;height:44px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ── Pasos de tres ── */
.pasos3{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:s}
.pasos3 li{counter-increment:s;position:relative;border:1px solid var(--rule);background:linear-gradient(180deg,var(--panel2),var(--panel));border-radius:12px;padding:28px 24px;display:grid;gap:14px;align-content:start;min-width:0}
.pasos3 li::before{content:counter(s,decimal-leading-zero);font:900 54px/1 var(--ultra);color:rgba(127,180,230,.22);letter-spacing:-.04em}
.pasos3 b{font:900 22px/1.05 var(--ultra);text-transform:uppercase}
.pasos3 p{font-size:16px;color:var(--suave)}

@media (max-width:1100px){
  .carrusel .pista{grid-auto-columns:calc((100% - 32px)/3)}
  .caminos{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .destacado{grid-template-columns:1fr}
  .destacado .arte{min-height:220px;border-right:none;border-bottom:1px solid rgba(143,220,255,.18)}
  .prods,.para3,.pasos3{grid-template-columns:1fr}
  .aprender{grid-template-columns:1fr}
  .carrusel .pista{grid-auto-columns:calc((100% - 16px)/2)}
  .rx-leyenda{grid-template-columns:1fr}
}
@media (max-width:560px){
  .caminos{grid-template-columns:1fr}
  .carrusel .pista{grid-auto-columns:82%}
  .mini{grid-template-columns:44px 1fr}
  .mini .btn{grid-column:1/3}
  .rx-cab{font-size:9px}
}
@media (prefers-reduced-motion:reduce){
  .rx-pt{opacity:1}
  .rx-scan{display:none}
}