/* ============================================================
   588.ª · héroe de rubro: inicial texturada + ilustración propia
   Solo se carga en las páginas de rubro (lo emite r588_assets()).
   Es el ÚNICO acento expresivo del portal sobrio (587): sin glow,
   radios ≤ 8 px, sombras cortas. Todo con prefijo r588.
   ============================================================ */
.r588-defs{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- título ---------- */
.r588-h1{--r588-tex:none}
.r588-h1::after{content:"";display:table;clear:both}
.r588-t{display:block}
/* relleno de la letra: textura (canvas) · sombra interior superior · degradado corporativo.
   Sobre el héroe oscuro: del aguamarina claro al turquesa y al azul (AA ≥ 3:1 de texto grande). */
.r588-t::first-letter,.r588-ini::before{
  background-image:var(--r588-tex),linear-gradient(180deg,rgba(0,32,58,.42) 0,rgba(0,32,58,0) 30%),linear-gradient(160deg,#effcfd 0%,#9fe7ee 34%,#2fc3cf 64%,#3b8cf2 100%);
  background-size:72px 72px,100% 100%,100% 100%;background-repeat:repeat,no-repeat,no-repeat}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .r588-t::first-letter{-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
}
.r588-t::first-letter{text-shadow:none;color:#9fe7ee;font-size:1.16em;line-height:.8;font-weight:800;padding-right:.01em}

/* placa con la inicial del rubro (decorativa: aria-hidden, la letra es content:attr) */
.r588-ini{position:relative;float:left;width:1.04em;height:1.04em;margin:.02em .24em 0 0;border-radius:8px;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,rgba(255,255,255,.10),rgba(255,255,255,.03));border:1px solid rgba(160,230,238,.26);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 -10px 18px rgba(0,16,40,.28)}
.r588-ini::after{content:"";position:absolute;inset:0;background-image:var(--r588-tex);background-size:72px 72px;opacity:.38;pointer-events:none}
.r588-ini::before{content:attr(data-l);position:relative;z-index:1;font:800 .9em/1 var(--display,'Bricolage Grotesque',sans-serif);letter-spacing:-.02em;
  color:#9fe7ee;text-shadow:none;filter:url(#r588-inset) drop-shadow(0 1px 0 rgba(0,10,30,.35))}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .r588-ini::before{-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
}
/* brillo una sola vez al cargar (sin bucles ni halos) */
@media (prefers-reduced-motion:no-preference){
  .r588-ini{background-image:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.16) 50%,transparent 60%),linear-gradient(150deg,rgba(255,255,255,.10),rgba(255,255,255,.03));
    background-size:250% 100%,100% 100%;background-position:120% 0,0 0;animation:r588Brillo 1.6s .5s cubic-bezier(.3,.6,.3,1) both}
}
@keyframes r588Brillo{to{background-position:-120% 0,0 0}}
/* el icono viejo ya no va en el título */
.r588-h1 .ph-h1-ico{display:none}

/* ---------- ilustración ---------- */
.r588-ilus{--r588-tex:none;position:relative;width:100%;max-width:470px;margin:0 auto}
.r588-ilus::before{content:"";position:absolute;left:9%;right:-3%;top:11%;bottom:-3%;border-radius:8px;
  background-image:var(--r588-tex),linear-gradient(140deg,rgba(11,182,196,.22),rgba(47,127,240,.12));background-size:72px 72px,100% 100%;
  border:1px solid rgba(160,230,238,.16)}
.r588-svg{position:relative;display:block;width:100%;height:auto;filter:drop-shadow(0 14px 24px rgba(0,10,30,.38))}
.r588-svg text{font-family:var(--body,'Manrope',sans-serif);font-weight:500}
/* paleta: navy · turquesa · azul + grises */
.r588-svg .p{fill:#f4f8fc}.r588-svg .w{fill:#fff}.r588-svg .l{fill:#e4edf6}
.r588-svg .n{fill:#002863}.r588-svg .wr{fill:#ff8a3d}.r588-svg .a{fill:#0bb6c4}.r588-svg .b{fill:#2f7ff0}
.r588-svg .sl{stroke:#d5e1ee;stroke-width:1}.r588-svg line.sl{fill:none}
.r588-svg .sa{stroke:#0bb6c4}.r588-svg .sb{stroke:#2f7ff0}.r588-svg .sn{stroke:#002863}.r588-svg .swl{stroke:rgba(255,255,255,.55)}
.r588-svg g.sb line{stroke:#002863;stroke-width:2}
.r588-svg text.t{fill:#33445e}.r588-svg text.m{fill:#6a7c97;letter-spacing:.04em}.r588-svg text.th{fill:#10203a;font-weight:700}
.r588-svg text.k{fill:#002863;font-weight:800;letter-spacing:-.01em}.r588-svg text.b{fill:#1f6fe0;font-weight:700}
.r588-svg text.wt{fill:#fff;font-weight:700}.r588-svg text.wm{fill:rgba(225,240,255,.78);letter-spacing:.04em}.r588-svg text.wk{fill:#fff;font-weight:800}
.r588-svg .ca{fill:#d9f4f6}.r588-svg .cat{fill:#06707a;font-weight:700}
.r588-svg .cw{fill:#ffe9da}.r588-svg .cwt{fill:#a4470c;font-weight:700}
.r588-svg .cl{fill:#e8eef6}.r588-svg .clt{fill:#3f5274;font-weight:700}
.r588-svg .cb{fill:#dde9fd}.r588-svg .cbt{fill:#1b5fc8;font-weight:700}
.r588-svg .cn{fill:#002863}.r588-svg .cnt{fill:#fff;font-weight:700}
.r588-svg .r588-flt{filter:drop-shadow(0 6px 10px rgba(0,30,70,.16))}

/* animación breve y útil: filas que entran, barras que crecen, trazos que se dibujan.
   Sin bucles salvo el punto «en vivo» (opacidad, sin halo). */
@media (prefers-reduced-motion:no-preference){
  .r588-svg .r588-f,.r588-svg .r588-flt{animation:r588Fila .55s cubic-bezier(.2,.7,.3,1) both;animation-delay:calc(var(--d,1)*110ms + 250ms)}
  .r588-svg .r588-b{transform-box:fill-box;transform-origin:left center;animation:r588Barra .9s cubic-bezier(.2,.7,.3,1) both;animation-delay:calc(var(--d,1)*120ms + 350ms)}
  .r588-svg .r588-v{transform-box:fill-box;transform-origin:center bottom;animation:r588Col .8s cubic-bezier(.2,.7,.3,1) both;animation-delay:calc(var(--d,1)*90ms + 300ms)}
  .r588-svg .r588-trazo,.r588-svg .r588-ecg{stroke-dasharray:600;stroke-dashoffset:600;animation:r588Trazo 1.6s .4s ease-out forwards}
  .r588-svg .r588-trazo[stroke-dasharray="5 4"]{stroke-dasharray:5 4;stroke-dashoffset:0;animation:r588Hormiga 1.2s linear infinite}
  .r588-svg .r588-anillo{animation:r588Anillo 1.4s .3s cubic-bezier(.2,.7,.3,1) both}
  .r588-svg .r588-pulso{animation:r588Pulso 2.4s ease-in-out infinite}
}
@keyframes r588Fila{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes r588Barra{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes r588Col{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes r588Trazo{to{stroke-dashoffset:0}}
@keyframes r588Hormiga{to{stroke-dashoffset:-18}}
@keyframes r588Anillo{from{stroke-dashoffset:327}}
@keyframes r588Pulso{50%{opacity:.35}}

/* ---------- celular: medir la caja, sin mínimos en px ---------- */
@media (max-width:900px){
  .ph-art .r588-ilus{max-width:min(420px,100%)}
}
@media (max-width:560px){
  .r588-ini{border-radius:6px}
  .ph-art .r588-ilus{max-width:100%}
  .r588-ilus::before{left:6%;right:-2%}
}

/* 597P (rendimiento): la «hormiga» de las líneas punteadas y el pulso se repiten unas veces y paran (antes infinite: repintado continuo). */
@media (prefers-reduced-motion:no-preference){
  .r588-svg .r588-trazo[stroke-dasharray="5 4"]{animation-iteration-count:5}
  .r588-svg .r588-pulso{animation-iteration-count:3}
}