/* =====================================================================
   portadas-blog.css · portadas propias de los posts del blog de orama.ai
   (widgets orama_blog_grid, orama_blog_featured y orama_blog_related)

   - Pegar entero en el CSS adicional del tema (después de orama-paneles.css).
   - Todo va con el prefijo .ob-pt / .ob-pt-…: no toca ninguna regla del tema.
   - Cada portada es un <div class="ob-pt ob-pt--<post>"> con un único SVG
     (viewBox 240×150) que se escala entero: nada se mueve ni se solapa
     al cambiar el ancho de la tarjeta.
   - Estado por defecto = estado final (la portada se ve completa siempre).
     Al pasar el ratón por la tarjeta (.ob-card:hover / .ob-featured:hover),
     o al enfocarla con el teclado, la escena se vuelve a dibujar.
   - prefers-reduced-motion: sin animaciones, se queda el estado final.
   Variables del tema usadas (con valor de reserva): --orama-brand,
   --orama-brand-bright, --orama-brand-soft, --orama-surface, --orama-surface-2,
   --orama-bg-2, --orama-line, --orama-text, --orama-muted, --orama-faint,
   --orama-ease.
   ===================================================================== */

/* --- Contenedor: ocupa toda la .ob-cover y pone su propio fondo --- */
.ob-pt{position:absolute;inset:0;overflow:hidden;font-variant-numeric:tabular-nums;
  --ob-pt-gc:rgb(124 162 255 / .30);--ob-pt-gx:85%;--ob-pt-gy:12%;
  background:
    radial-gradient(circle at var(--ob-pt-gx) var(--ob-pt-gy),var(--ob-pt-gc) 0%,transparent 58%),
    radial-gradient(rgb(255 255 255 / .045) 1px,transparent 1px) 0 0/16px 16px,
    linear-gradient(160deg,var(--orama-surface,#15243F),var(--orama-bg-2,#0E1A30))}
.ob-pt--g{--ob-pt-gc:rgb(91 185 140 / .26)}
.ob-pt__svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
/* El tema añade su palabra suelta (.ob-cover__kw) y su forma (.ob-cover__shape):
   cuando hay portada propia, el widget ya no las pinta (ver INTEGRACION.md). */

/* --- Texto --- */
.ob-pt-l{fill:var(--orama-faint,#61748F);font-size:8.6px;font-weight:600;letter-spacing:.07em}
.ob-pt-t{fill:var(--orama-text,#EAF0FB);font-weight:700}
.ob-pt-m{fill:var(--orama-muted,#97A6C2);font-weight:500}
.ob-pt-k{fill:var(--orama-faint,#61748F);font-weight:500}
.ob-pt-mono{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace}

/* --- Colores (relleno ·f… / trazo ·s…) --- */
.ob-pt-fbr{fill:var(--orama-brand-bright,#7CA2FF)}
.ob-pt-fbd{fill:var(--orama-brand,#5486FF)}
.ob-pt-fso{fill:var(--orama-brand-soft,#A9C2FF)}
.ob-pt-fgr{fill:#5BB98C}
.ob-pt-fgl{fill:#9CCB9E}
.ob-pt-fre{fill:#F08AA8}
.ob-pt-fam{fill:#F1C27A}
.ob-pt-ftx{fill:var(--orama-text,#EAF0FB)}
.ob-pt-fs1{fill:var(--orama-surface,#15243F)}
.ob-pt-fs2{fill:var(--orama-surface-2,#1D3055)}
.ob-pt-fln{fill:rgb(124 162 255 / .10)}
.ob-pt-sbr{stroke:var(--orama-brand-bright,#7CA2FF)}
.ob-pt-sgr{stroke:#5BB98C}
.ob-pt-sre{stroke:#F08AA8}
.ob-pt-sam{stroke:#F1C27A}
.ob-pt-stx{stroke:var(--orama-text,#EAF0FB)}
.ob-pt-sln{stroke:rgb(124 162 255 / .28)}
.ob-pt-sfa{stroke:var(--orama-faint,#61748F)}
.ob-pt-nf{fill:none}
.ob-pt-rd{stroke-linecap:round;stroke-linejoin:round}

/* --- Cajas y pastillas (tarjetas de dentro del SVG) --- */
.ob-pt-box{fill:var(--orama-surface-2,#1D3055);stroke:rgb(124 162 255 / .26);stroke-width:.8}
.ob-pt-box2{fill:rgb(21 36 63 / .85);stroke:rgb(124 162 255 / .18);stroke-width:.8}
.ob-pt-pill{fill:rgb(84 134 255 / .16);stroke:rgb(124 162 255 / .5);stroke-width:.8}

/* --- Tarjeta flotante (equivalente SVG de .zz-chip) --- */
.ob-pt-chip{filter:drop-shadow(0 4px 5px rgb(0 0 0 / .45))}
.ob-pt-chip>rect:first-child{fill:var(--orama-surface-2,#1D3055);stroke:rgb(124 162 255 / .38);stroke-width:.7}
.ob-pt-chip .ob-pt-ct{fill:var(--orama-muted,#97A6C2);font-size:8.2px;font-weight:500}
.ob-pt-chip .ob-pt-ct tspan{fill:var(--orama-text,#EAF0FB);font-weight:700}
.ob-pt-ic{rx:3}
.ob-pt-ic.is-bad{fill:rgb(224 82 126 / .22)}.ob-pt-ig.is-bad{fill:#F08AA8}
.ob-pt-ic.is-ok{fill:rgb(119 163 121 / .26)}.ob-pt-ig.is-ok{fill:#9CCB9E}
.ob-pt-ic.is-br{fill:rgb(84 134 255 / .24)}.ob-pt-ig.is-br{fill:var(--orama-brand-bright,#7CA2FF)}
.ob-pt-ic.is-am{fill:rgb(224 176 90 / .2)}.ob-pt-ig.is-am{fill:#F1C27A}
.ob-pt-ig{font-size:7.4px;font-weight:800}

/* =====================================================================
   Animación (solo al pasar el ratón o enfocar la tarjeta)
   ===================================================================== */
.ob-pt-draw{stroke-dasharray:1;stroke-dashoffset:0}
.ob-pt-gy,.ob-pt-gyt,.ob-pt-gx,.ob-pt-sc{transform-box:fill-box}
.ob-pt-gy{transform-origin:50% 100%}
.ob-pt-gyt{transform-origin:50% 0}
.ob-pt-gx{transform-origin:0 50%}
.ob-pt-sc{transform-origin:50% 50%}
.ob-pt-ping{opacity:0;transform-box:fill-box;transform-origin:50% 50%}
.ob-pt-flow{stroke-dasharray:3 4}

:is(.ob-card:hover,.ob-card:focus-visible,.ob-featured:hover,.ob-featured:focus-visible,.ob-pt.is-play) .ob-pt-draw{animation:ob-pt-draw 1.1s var(--orama-ease,ease) var(--d,0s) both}
:is(.ob-card:hover,.ob-card:focus-visible,.ob-featured:hover,.ob-featured:focus-visible,.ob-pt.is-play) .ob-pt-gy,
:is(.ob-card:hover,.ob-card:focus-visible,.ob-featured:hover,.ob-featured:focus-visible,.ob-pt.is-play) .ob-pt-gyt{animation:ob-pt-gy .6s var(--orama-ease,ease) var(--d,0s) both}
:is(.ob-card:hover,.ob-card:focus-visible,.ob-featured:hover,.ob-featured:focus-visible,.ob-pt.is-play) .ob-pt-gx{animation:ob-pt-gx .7s var(--orama-ease,ease) var(--d,0s) both}
:is(.ob-card:hover,.ob-card:focus-visible,.ob-featured:hover,.ob-featured:focus-visible,.ob-pt.is-play) .ob-pt-sc{animation:ob-pt-sc .5s var(--orama-ease,ease) var(--d,0s) both}
:is(.ob-card:hover,.ob-card:focus-visible,.ob-featured:hover,.ob-featured:focus-visible,.ob-pt.is-play) .ob-pt-pop{animation:ob-pt-pop .45s var(--orama-ease,ease) var(--d,.5s) both}
:is(.ob-card:hover,.ob-card:focus-visible,.ob-featured:hover,.ob-featured:focus-visible,.ob-pt.is-play) .ob-pt-fade{animation:ob-pt-fade .6s ease var(--d,.2s) both}
:is(.ob-card:hover,.ob-card:focus-visible,.ob-featured:hover,.ob-featured:focus-visible,.ob-pt.is-play) .ob-pt-ping{animation:ob-pt-ping 1.6s ease-out var(--d,1s) infinite}
:is(.ob-card:hover,.ob-card:focus-visible,.ob-featured:hover,.ob-featured:focus-visible,.ob-pt.is-play) .ob-pt-flow{animation:ob-pt-flow .8s linear infinite}
:is(.ob-card:hover,.ob-card:focus-visible,.ob-featured:hover,.ob-featured:focus-visible,.ob-pt.is-play) .ob-pt-shift{animation:ob-pt-shift .9s var(--orama-ease,ease) var(--d,.2s) both}
:is(.ob-card:hover,.ob-card:focus-visible,.ob-featured:hover,.ob-featured:focus-visible,.ob-pt.is-play) .ob-pt-turn{animation:ob-pt-turn 1.1s var(--orama-ease,ease) var(--d,.2s) both}

@keyframes ob-pt-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes ob-pt-gy{from{transform:scaleY(.08);opacity:.4}to{transform:none;opacity:1}}
@keyframes ob-pt-gx{from{transform:scaleX(.05);opacity:.4}to{transform:none;opacity:1}}
@keyframes ob-pt-sc{from{transform:scale(.2);opacity:0}to{transform:none;opacity:1}}
@keyframes ob-pt-pop{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes ob-pt-fade{from{opacity:0}to{opacity:1}}
@keyframes ob-pt-ping{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(3)}}
@keyframes ob-pt-flow{to{stroke-dashoffset:-7}}
@keyframes ob-pt-shift{from{transform:translate(var(--dx,0px),var(--dy,0px));opacity:.35}to{transform:none;opacity:1}}
@keyframes ob-pt-turn{from{transform:rotate(var(--r0,-70deg))}to{transform:none}}

/* Accesibilidad: sin movimiento si el usuario lo pide; se ve el estado final */
@media (prefers-reduced-motion:reduce){
  .ob-pt *{animation:none!important;transition:none!important}
  .ob-pt-ping{opacity:0}
}

/* Portada dentro del post (widget orama_blog_post_hero, fondo al 18 %):
   solo el dibujo, sin textos ni tarjetas, para no competir con el H1. */
.ob-posthero__bg .ob-pt{background:none}
.ob-posthero__bg .ob-pt :is(text,.ob-pt-chip){display:none}