/* ============================================================
   BLOG · 03-destacados  (#destacados)  — prefijo bd
   «Pila de pruebas de imprenta»: panel de video (lectora de noche) + 4 guías en portada.
   Base (sin JS / ?reduce): póster + rejilla 2×2 (celular: apiladas).
   .is-live (lo pone destacados.js): escritorio = texto a la izquierda + pila que rota;
   celular = imagen arriba con el título encima + carrusel de 4 tarjetas.
   ============================================================ */
#destacados{position:relative;overflow:clip;isolation:isolate;background:var(--ink);color:var(--cream)}
#destacados .bd-defs{position:absolute;width:0;height:0;overflow:hidden}
#destacados .bd-gl{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Encabezado ---------- */
#destacados .bd-head{position:relative;z-index:2;margin-bottom:clamp(28px,4vw,56px)}
#destacados .bd-head__title{margin-top:18px;max-width:14ch}
#destacados .bd-head__lead{margin-top:18px;max-width:52ch}

/* ---------- Panel (marco de hilo dorado) ---------- */
#destacados .bd-panel{position:relative;width:min(92vw,1720px);margin-inline:auto;border-radius:var(--r);overflow:hidden;isolation:isolate;
  background:radial-gradient(120% 90% at 78% 30%,rgba(216,166,70,.16),transparent 60%),linear-gradient(160deg,var(--ink-3),var(--ink) 70%);
  transform-origin:50% 0}
#destacados .bd-media{position:absolute;inset:0;z-index:-1;overflow:hidden;
  background:radial-gradient(70% 80% at 80% 30%,rgba(216,166,70,.22),transparent 65%),linear-gradient(150deg,#0d1b28,#05090f 70%)}
#destacados .bd-media picture{display:contents}
#destacados .bd-media__img,#destacados .bd-media__video{position:absolute;top:0;left:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 35%;
  user-select:none;-webkit-user-drag:none;pointer-events:none;color:transparent;font-size:0}
#destacados .bd-media__video{opacity:0;transition:opacity 1.4s var(--ease)}
#destacados .bd-media.is-video .bd-media__video{opacity:1}
#destacados .bd-media__shade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,9,15,.55),rgba(5,9,15,.82) 40%,rgba(5,9,15,.9))}
#destacados .bd-frame{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:visible}
#destacados .bd-frame rect{x:.5px;y:.5px;width:calc(100% - 1px);height:calc(100% - 1px);rx:calc(var(--r) - .5px);fill:none;stroke:rgba(216,166,70,.42);stroke-width:1;
  stroke-dasharray:1 0}
#destacados .bd-stage{position:relative;padding:clamp(28px,4vw,64px)}

/* ---------- Guías (base: tarjetas) ---------- */
#destacados .bd-copy{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
#destacados .bd-art{position:relative;display:flex;flex-direction:column;min-width:0;border:1px solid var(--hair);border-radius:var(--r);overflow:hidden;
  background:rgba(5,9,15,.78);transition:border-color .5s var(--ease)}
#destacados .bd-art:hover,#destacados .bd-art:focus-within{border-color:rgba(216,166,70,.6)}
#destacados .bd-art__cover{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--ink-3);pointer-events:none}
#destacados .bd-art__cover img,#destacados .bd-proof__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none;
  filter:grayscale(1) sepia(.35) contrast(1.05) brightness(.8);transition:filter 1s var(--ease),transform 1.2s var(--ease)}
#destacados .bd-art__tint,#destacados .bd-proof__tint{position:absolute;inset:0;pointer-events:none;background:linear-gradient(150deg,#C9A050,#7a5a22);mix-blend-mode:color;opacity:.85;transition:opacity 1s var(--ease)}
/* «revelado»: color real al foco/hover (escritorio) o al centrarse (celular, .is-act); queda un velo de oro para que las 4 se lean como una edición */
/* revelado con tope: color atenuado (saturación .55 + velo sepia/oro), nunca color pleno → ninguna portada rompe el oro sobre tinta */
#destacados .bd-art:hover .bd-art__cover img,#destacados .bd-art:focus-within .bd-art__cover img,#destacados .bd-art.is-act .bd-art__cover img{filter:saturate(.55) sepia(.32) contrast(1.03) brightness(.88)}
#destacados .bd-art:hover .bd-art__tint,#destacados .bd-art:focus-within .bd-art__tint,#destacados .bd-art.is-act .bd-art__tint{opacity:.4}
/* [24] proveedores: la foto del almacén es naranja-rojo → velo de oro más denso al revelar */
#destacados [data-slug^="como-pagar-a-proveedores"].bd-art:is(:hover,:focus-within,.is-act) .bd-art__cover img,
#destacados [data-slug^="como-pagar-a-proveedores"].bd-proof.is-top .bd-proof__img img{filter:saturate(.4) sepia(.5) hue-rotate(-6deg) contrast(1.04) brightness(.84)}
#destacados [data-slug^="como-pagar-a-proveedores"].bd-art:is(:hover,:focus-within,.is-act) .bd-art__tint,
#destacados [data-slug^="como-pagar-a-proveedores"].bd-proof.is-top .bd-proof__tint{opacity:.55}
#destacados .bd-art:hover .bd-art__cover img{transform:scale(1.03)}

/* [22] tarjeta: la portada original es magenta/naranja (identidad vieja) → se sustituye por la tarjeta negra con canto de oro (assets/img/gen/tarjeta-mesa) */
#destacados [data-slug^="tarjeta-para-empresas"] .bd-art__cover,
#destacados [data-slug^="tarjeta-para-empresas"] .bd-proof__img{background:#120d06 url(../../../assets/img/gen/tarjeta-mesa-768.webp) 70% 60%/cover no-repeat;
  background-image:image-set(url(../../../assets/img/gen/tarjeta-mesa-768.webp) 1x,url(../../../assets/img/gen/tarjeta-mesa-1024.webp) 2x)}
#destacados [data-slug^="tarjeta-para-empresas"] .bd-art__cover img,
#destacados [data-slug^="tarjeta-para-empresas"] .bd-proof__img img{display:none}
/* [5] patrimonio: la portada trae «INFLATION» abajo → encuadre alto que deja fuera la palabra */
#destacados [data-slug^="como-proteger-tu-patrimonio"] .bd-art__cover img,
#destacados [data-slug^="como-proteger-tu-patrimonio"] .bd-proof__img img{object-position:50% 0;transform-origin:50% 0;transform:scale(1.45)}
#destacados [data-slug^="como-proteger-tu-patrimonio"]:hover .bd-art__cover img{transform:scale(1.5)}

#destacados .bd-art__body{display:flex;flex-direction:column;flex:1;padding:clamp(20px,2vw,30px)}
#destacados .bd-art__folio{display:none;margin:0}
#destacados .bd-art__cat{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin:0;font:700 .78rem/1.3 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-2)}
#destacados .bd-art__cat i{width:18px;height:1px;background:var(--hair)}
#destacados .bd-art__tomo{color:var(--cream-2)}
#destacados .bd-art__title{margin:16px 0 0;font:600 clamp(1.5rem,2vw,2rem)/1.08 var(--serif);letter-spacing:-.015em;color:var(--cream);text-wrap:balance}
#destacados .bd-art__title{transition:color .4s}
#destacados .bd-art:hover .bd-art__title{color:var(--gold-2)}
/* toda la tarjeta es el objetivo táctil: un enlace de área (aria-hidden, tabindex -1); el único enlace real es el botón */
#destacados .bd-art__hit{position:absolute;inset:0;z-index:1;border-radius:inherit;-webkit-tap-highlight-color:transparent}
#destacados .bd-art__cta{position:relative;z-index:2}
#destacados .bd-art__body{position:relative;pointer-events:none}
#destacados .bd-art__cta{pointer-events:auto}
/* contador en la esquina de cada portada: «01 / 04» */
#destacados .bd-art__badge{position:absolute;top:10px;right:10px;z-index:1;display:inline-flex;align-items:baseline;gap:4px;padding:5px 10px;border-radius:999px;
  background:rgba(5,9,15,.74);border:1px solid rgba(216,166,70,.45);font-size:.78rem;line-height:1.2;color:var(--cream-2)}
#destacados .bd-art__badge b{color:var(--gold-2);font-size:.9rem}
#destacados .bd-art__badge i{font-style:normal;color:var(--mute)}
#destacados .bd-art__desc{margin:14px 0 0;color:var(--cream-2);line-height:1.6;font-size:.98rem;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
#destacados .bd-art__toc{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
#destacados .bd-art__toc-h{margin:0 0 10px;font:700 .74rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-2)}
#destacados .bd-art__toc ol{list-style:none;margin:0;padding:0;display:grid;gap:7px;counter-reset:bdt}
#destacados .bd-art__toc li{position:relative;padding-left:34px;counter-increment:bdt;color:var(--cream-2);font-size:.93rem;line-height:1.4}
#destacados .bd-art__toc li:before{content:counter(bdt,decimal-leading-zero);position:absolute;left:0;top:.12em;font:800 .72rem/1.4 var(--sans);letter-spacing:.06em;color:var(--gold);font-variant-numeric:tabular-nums}
#destacados .bd-art__foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px 22px;margin-top:auto;padding-top:24px}
#destacados .bd-art__time{display:flex;align-items:center;gap:9px;margin:0;font-size:.9rem;color:var(--cream-2)}
#destacados .bd-art__time svg{width:18px;height:18px;fill:none;stroke:var(--gold-2);stroke-width:1.4;stroke-linecap:round}
#destacados .bd-art__time b{color:var(--cream);font-size:1rem}
#destacados .bd-art__cta{min-height:48px}

@media (min-width:900px){#destacados:not(.is-live) .bd-art__cover{aspect-ratio:2/1}}
/* pila y controles: solo con JS vivo */
#destacados .bd-pile,#destacados .bd-ctrl{display:none}

/* ============================================================
   CELULAR (< 900): imagen vertical arriba con el título encima
   ============================================================ */
@media (max-width:899px){
  #destacados{padding-top:0}
  #destacados .bd-head{display:flex;flex-direction:column;justify-content:flex-end;min-height:48svh;min-height:max(48svh,330px);padding-top:calc(var(--nav-h) + 24px);padding-bottom:22px;margin-bottom:0}
  #destacados .bd-head__title{font-size:clamp(2.6rem,12.5vw,4.2rem)}
  #destacados .bd-head__lead{font-size:1rem}
  #destacados .bd-panel{position:static;width:auto;border-radius:0;overflow:visible;background:none}
  #destacados .bd-media{bottom:auto;height:calc(max(48svh,330px) + 110px);z-index:0}
  #destacados .bd-media__img,#destacados .bd-media__video{object-position:30% 18%}
  #destacados .bd-media__shade{background:linear-gradient(180deg,rgba(5,9,15,.55) 0%,rgba(5,9,15,.08) 26%,rgba(5,9,15,.35) 52%,rgba(5,9,15,.92) 78%,var(--ink) 100%)}
  #destacados .bd-frame{display:none}
  #destacados .bd-stage{position:relative;z-index:1;padding:8px var(--gut) 0}
  #destacados .bd-copy{grid-template-columns:minmax(0,1fr)}
  #destacados .bd-art__title{font-size:1.5rem;line-height:1.12}
  #destacados .bd-art__desc{font-size:.97rem}
  #destacados .bd-art__toc{display:none}
  #destacados .bd-art__foot{flex-direction:column;align-items:stretch;gap:10px;padding-top:14px}
  #destacados .bd-art__cta{width:100%}
  #destacados .bd-art__cat{font-size:.76rem}
}

/* ============================================================
   VIVO · CELULAR — carrusel de 4 tarjetas (receta anti-troll)
   ============================================================ */
@media (max-width:899px){
  /* fila de arriba: puntos + contador · carrusel · fila de abajo: pista + ⏸ + flechas  → todo cabe en ~85svh */
  #destacados.is-live .bd-stage{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"dots count" "view view" "hint btns";
    align-items:center;gap:6px 10px;padding:4px 0 0}
  #destacados.is-live .bd-view{grid-area:view;min-width:0}
  #destacados.is-live .bd-ctrl{display:contents}
  #destacados.is-live .bd-dots{grid-area:dots;padding-left:var(--gut);min-width:0}
  #destacados.is-live .bd-count{grid-area:count;padding-right:var(--gut)}
  #destacados.is-live .bd-hint{grid-area:hint;padding-left:var(--gut);min-width:0}
  #destacados.is-live .bd-btns{grid-area:btns;padding-right:var(--gut);gap:6px}
  #destacados.is-live .bd-dot{min-width:44px}
  #destacados.is-live .bd-arrow{width:44px;height:44px}
  #destacados.is-live .bd-play{width:44px;padding:0}
  #destacados.is-live .bd-play span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  #destacados.is-live .bd-hint__d{display:none}
  /* un solo contador: el de la fila de puntos (el de la portada sobra en el carrusel) */
  #destacados.is-live .bd-art__badge{display:none}
  /* bucle visual: clones a los lados para que SIEMPRE asome una vecina (también tras la 04) */
  #destacados .bd-art--clone .bd-art__cta{pointer-events:none}

  #destacados.is-live .bd-copy{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);
    padding:4px var(--gut) 8px;overscroll-behavior-x:contain;touch-action:pan-x pan-y;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  #destacados.is-live .bd-copy::-webkit-scrollbar{display:none}
  #destacados.is-live .bd-art{flex:0 0 min(78vw,440px);scroll-snap-align:start;scroll-snap-stop:always;border-color:rgba(216,166,70,.34)}
  #destacados.is-live .bd-art.is-act{border-color:rgba(216,166,70,.75);box-shadow:0 24px 60px -30px rgba(216,166,70,.35)}
  /* tarjeta compacta: portada 16:9 (≤ 30svh), título 3 líneas, extracto 2 */
  #destacados.is-live .bd-art__cover{aspect-ratio:16/9;max-height:30svh}
  #destacados.is-live .bd-art__body{padding:14px 16px 16px}
  #destacados.is-live .bd-art__title{margin-top:10px;font-size:clamp(1.22rem,5.2vw,1.35rem);line-height:1.14;
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
  #destacados.is-live .bd-art__desc{margin-top:8px;font-size:.92rem;line-height:1.5;-webkit-line-clamp:2}
  #destacados.is-live .bd-art__foot{padding-top:12px;gap:8px}
  #destacados.is-live .bd-art__time{font-size:.84rem}
  #destacados.is-live .bd-art__cta{min-height:48px;padding:.8em 1.4em}
  /* +40 px: el eyebrow cae bajo el mentón de la lectora (fondo de ciudad / hombro), no sobre la cara */
  #destacados.is-live .bd-head{min-height:calc(max(42svh,300px) + 40px);padding-bottom:16px}
  #destacados.is-live .bd-media{height:calc(max(42svh,300px) + 130px)}
}

/* ============================================================
   VIVO · ESCRITORIO — texto a la izquierda + pila de pruebas
   ============================================================ */
@media (min-width:900px){
  #destacados.is-live .bd-panel{height:clamp(580px,min(86vh,100vh - 150px),1000px);height:clamp(580px,min(86svh,100svh - 150px),1000px)}
  #destacados.is-live .bd-media__img,#destacados.is-live .bd-media__video{width:118%;object-position:50% 32%}
  #destacados.is-live .bd-media__shade{background:
    linear-gradient(90deg,rgba(5,9,15,.96) 0%,rgba(5,9,15,.9) 30%,rgba(5,9,15,.62) 46%,rgba(5,9,15,.18) 64%,rgba(5,9,15,0) 80%),
    linear-gradient(0deg,rgba(5,9,15,.85) 0%,rgba(5,9,15,0) 26%),
    linear-gradient(180deg,rgba(5,9,15,.45) 0%,rgba(5,9,15,0) 22%)}
  #destacados.is-live .bd-stage{height:100%;display:grid;grid-template-columns:minmax(0,44%) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;
    column-gap:clamp(24px,4vw,72px);padding:clamp(30px,4.6vh,60px) clamp(32px,4.4vw,72px) clamp(18px,2.6vh,30px)}
  #destacados.is-live .bd-view{grid-area:1/1;min-height:0;display:flex;align-items:center}
  #destacados.is-live .bd-copy{display:grid;grid-template-columns:minmax(0,1fr);width:100%}
  #destacados.is-live .bd-art{grid-area:1/1;border:0;border-radius:0;background:none;overflow:visible;align-self:center}
  #destacados.is-live .bd-art:not(.is-act):not(.is-out){visibility:hidden}
  #destacados.is-live .bd-art.is-out{pointer-events:none}
  #destacados.is-live .bd-art__cover{display:none}
  #destacados.is-live .bd-art__body{padding:0}
  #destacados.is-live .bd-art__hit,#destacados.is-live .bd-art__badge{display:none}
  #destacados.is-live .bd-art__body{pointer-events:auto}
  #destacados.is-live .bd-art__folio{display:flex;align-items:flex-start;gap:10px;margin:0 0 clamp(10px,2vh,22px)}
  #destacados.is-live .bd-art__no{font:700 .78rem/1 var(--sans);letter-spacing:.2em;color:var(--gold-2);padding-top:.7em}
  #destacados.is-live .bd-art__nn{font:500 italic clamp(3rem,7vh,5.4rem)/.82 var(--serif);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px var(--gold);
    font-variant-numeric:lining-nums}
  #destacados.is-live .bd-art__title{margin-top:clamp(12px,2vh,20px);font-size:clamp(1.8rem,1.3vw + 1.7vh,3rem);line-height:1.04;max-width:20ch}
  #destacados.is-live .bd-art__desc{max-width:52ch;margin-top:clamp(10px,1.8vh,18px)}
  #destacados.is-live .bd-art__toc{margin-top:clamp(14px,2.4vh,26px);padding-top:clamp(12px,1.8vh,18px);max-width:52ch}
  #destacados.is-live .bd-art__toc li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #destacados.is-live .bd-art__foot{justify-content:flex-start;padding-top:clamp(16px,3vh,30px);margin-top:0}

  /* ---------- Pila de pruebas de imprenta ---------- */
  #destacados.is-live .bd-pile{grid-area:1/2;display:grid;place-items:center;min-height:0;perspective:1600px;padding-right:clamp(0px,11vw,220px)}
  #destacados.is-live .bd-pile__in{position:relative;height:min(70%,560px);aspect-ratio:4/5.15}
  #destacados .bd-proof{position:absolute;inset:0;transform-origin:50% 62%;will-change:transform;touch-action:none;cursor:pointer}
  #destacados .bd-proof.is-top{cursor:grab}
  #destacados .bd-proof.is-drag{cursor:grabbing}
  #destacados .bd-proof__sheet{position:absolute;inset:0;display:flex;flex-direction:column;padding:6.5% 7% 5.5%;border-radius:5px;color:#16120b;
    background:
      radial-gradient(130% 90% at 18% 0%,rgba(255,255,255,.55),transparent 55%),
      linear-gradient(165deg,#F7F0E3 0%,#EDE3D0 55%,#DFD1B7 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 1px 0 rgba(0,0,0,.25),12px 26px 34px -16px rgba(0,0,0,.65),40px 70px 110px -40px rgba(0,0,0,.9);
    transition:box-shadow .8s var(--ease)}
  #destacados .bd-proof.is-top .bd-proof__sheet{box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 0 0 1px rgba(216,166,70,.55),12px 26px 34px -16px rgba(0,0,0,.65),48px 80px 120px -40px rgba(0,0,0,.92)}
  #destacados .bd-proof__crop{position:absolute;width:16px;height:16px;border:0 solid rgba(216,166,70,.85)}
  #destacados .bd-proof__crop--tl{left:-11px;top:-11px;border-right-width:1px;border-bottom-width:1px}
  #destacados .bd-proof__crop--tr{right:-11px;top:-11px;border-left-width:1px;border-bottom-width:1px}
  #destacados .bd-proof__crop--bl{left:-11px;bottom:-11px;border-right-width:1px;border-top-width:1px}
  #destacados .bd-proof__crop--br{right:-11px;bottom:-11px;border-left-width:1px;border-top-width:1px}
  #destacados .bd-proof__top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:0 0 6%;padding-bottom:4%;border-bottom:1px solid rgba(22,18,11,.18);
    font:700 .66rem/1.2 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#6d5524}
  #destacados .bd-proof__top b{font-size:.8rem;letter-spacing:.04em;color:#16120b}
  #destacados .bd-proof__img{position:relative;display:block;flex:1;min-height:0;overflow:hidden;border-radius:2px;background:#2a2418;box-shadow:inset 0 0 0 1px rgba(22,18,11,.2)}
  #destacados .bd-proof.is-top .bd-proof__img img{filter:saturate(.55) sepia(.32) contrast(1.03) brightness(.9)}
  #destacados .bd-proof.is-top .bd-proof__tint{opacity:.38}
  /* capas de verdad: cada prueba de atrás más oscura y con su sombra larga escalonada; un hilo oscuro separa los cantos */
  #destacados .bd-proof__sheet:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:#0b0a07;opacity:0;transition:opacity .9s var(--ease)}
  #destacados .bd-proof[data-s="1"] .bd-proof__sheet:after{opacity:.1}
  #destacados .bd-proof[data-s="2"] .bd-proof__sheet:after{opacity:.2}
  #destacados .bd-proof[data-s="3"] .bd-proof__sheet:after{opacity:.3}
  #destacados .bd-proof[data-s="1"] .bd-proof__sheet{box-shadow:inset 0 0 0 1px rgba(22,18,11,.28),-4px -3px 14px -4px rgba(0,0,0,.55),18px 34px 44px -16px rgba(0,0,0,.6),56px 90px 120px -40px rgba(0,0,0,.85)}
  #destacados .bd-proof[data-s="2"] .bd-proof__sheet{box-shadow:inset 0 0 0 1px rgba(22,18,11,.3),-4px -3px 14px -4px rgba(0,0,0,.55),24px 42px 52px -16px rgba(0,0,0,.55),70px 110px 130px -40px rgba(0,0,0,.8)}
  #destacados .bd-proof[data-s="3"] .bd-proof__sheet{box-shadow:inset 0 0 0 1px rgba(22,18,11,.32),-4px -3px 14px -4px rgba(0,0,0,.55),30px 50px 60px -16px rgba(0,0,0,.5),84px 130px 140px -40px rgba(0,0,0,.75)}
  /* pestaña índice en el canto derecho (fija por prueba, escalonada): de cada prueba de atrás asoma su «Nº 0X» */
  #destacados .bd-proof__tab{position:absolute;top:6%;right:-25px;z-index:-1;display:flex;align-items:center;justify-content:center;width:26px;padding:12px 0;
    border-radius:0 5px 5px 0;writing-mode:vertical-rl;font:800 .75rem/1 var(--sans);letter-spacing:.14em;color:#2a1f0a;white-space:nowrap;
    background:linear-gradient(90deg,#B98A33,#E9C677 40%,#D8A646);box-shadow:inset 1px 0 0 rgba(22,18,11,.3),8px 10px 18px -8px rgba(0,0,0,.7)}
  #destacados .bd-proof[data-i="2"] .bd-proof__tab{top:26%}
  #destacados .bd-proof[data-i="3"] .bd-proof__tab{top:46%}
  #destacados .bd-proof[data-i="4"] .bd-proof__tab{top:66%}
  #destacados .bd-proof:not(.is-top) .bd-proof__tab{background:linear-gradient(90deg,#8f6a27,#C9A050 45%,#B88E3E)}
  #destacados .bd-proof__cat{display:flex;align-items:center;gap:7px;margin:7% 0 0;font:800 .64rem/1.25 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#7a5a1c}
  #destacados .bd-proof__cat .bd-gl{width:15px;height:15px;stroke-width:1.5}
  #destacados .bd-proof__bar{display:flex;justify-content:space-between;align-items:center;margin:5% 0 0;padding-top:5%;border-top:1px solid rgba(22,18,11,.14);
    font-size:.72rem;color:#5d4a26}
  #destacados .bd-proof__sw{display:flex;gap:3px}
  #destacados .bd-proof__sw i{width:11px;height:11px;border-radius:1px}
  #destacados .bd-proof__sw i:nth-child(1){background:#05090F}
  #destacados .bd-proof__sw i:nth-child(2){background:#10273A}
  #destacados .bd-proof__sw i:nth-child(3){background:#A77927}
  #destacados .bd-proof__sw i:nth-child(4){background:#F4D58A}
  /* canto de oro líquido: barrido que recorre el borde (máscara del contorno) */
  #destacados .bd-proof__edge{position:absolute;inset:-2px;border-radius:7px;padding:2.5px;pointer-events:none;opacity:0;
    background:linear-gradient(105deg,transparent 0 36%,#A77927 43%,#F7E2A8 49%,#FFF6DA 50.5%,#D8A646 54%,#A77927 58%,transparent 65% 100%) no-repeat;
    background-size:320% 100%;background-position:var(--bd-sw,100%) 0;
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
    filter:drop-shadow(0 0 6px rgba(244,213,138,.7))}

  /* ---------- Controles ---------- */
  #destacados.is-live .bd-ctrl{grid-column:1/-1;grid-row:2;display:flex;align-items:center;gap:clamp(16px,2vw,32px);padding-top:clamp(12px,2vh,20px);border-top:1px solid rgba(243,234,219,.14)}
  #destacados.is-live .bd-hint{order:3;margin-left:auto}
  #destacados.is-live .bd-btns{order:4}
  #destacados.is-live .bd-hint__m{display:none}
}

/* escritorio: cabecera compacta en una franja (eyebrow + título | lead) para que el panel entero quepa con ella en un viewport */
@media (min-width:900px){
  #destacados{padding-top:clamp(56px,6vw,104px)}
  #destacados .bd-head{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:end;column-gap:clamp(32px,5vw,96px);margin-bottom:clamp(18px,2.6vh,30px)}
  #destacados .bd-head__eyebrow{grid-column:1/-1}
  #destacados .bd-head__title{margin-top:12px;max-width:none;font-size:clamp(2.6rem,4.4vw,4.6rem);white-space:nowrap}
  #destacados .bd-head__lead{margin:0;justify-self:end;max-width:44ch;text-align:right;padding-bottom:.35em}
}

/* escritorio bajo (1280×720, portátiles): todo cabe sin recortar */
@media (min-width:900px) and (max-height:820px){
  #destacados.is-live .bd-art__folio{margin-bottom:8px}
  #destacados.is-live .bd-art__nn{font-size:clamp(2.6rem,7vh,3.4rem)}
  #destacados.is-live .bd-art__title{margin-top:10px;font-size:clamp(1.45rem,.9vw + 1.9vh,2.2rem)}
  #destacados.is-live .bd-art__desc{-webkit-line-clamp:2;font-size:.94rem;line-height:1.5}
  #destacados.is-live .bd-art__toc{margin-top:12px;padding-top:10px}
  #destacados.is-live .bd-art__toc-h{margin-bottom:6px}
  #destacados.is-live .bd-art__toc ol{gap:3px}
  #destacados.is-live .bd-art__toc li{font-size:.86rem}
  #destacados.is-live .bd-art__foot{padding-top:14px}
  #destacados.is-live .bd-art__cta{min-height:46px;padding:.85em 1.5em}
  #destacados .bd-proof__top{margin-bottom:4%}
}

/* controles comunes */
#destacados .bd-dots{list-style:none;display:flex;gap:4px;margin:0;padding:0}
#destacados .bd-dot{position:relative;display:grid;align-content:center;justify-items:start;gap:7px;min-width:48px;min-height:44px;padding:4px 4px;border:0;background:none;
  color:var(--mute);cursor:pointer;transition:color .4s}
#destacados .bd-dot span{font-size:.8rem;letter-spacing:.06em}
#destacados .bd-dot i{display:block;width:100%;height:2px;border-radius:2px;background:rgba(243,234,219,.2);overflow:hidden}
#destacados .bd-dot b{display:block;height:100%;background:var(--gold-grad);transform:scaleX(0);transform-origin:0 50%}
#destacados .bd-dot:hover{color:var(--cream)}
#destacados .bd-dot.is-on{color:var(--gold-2)}
#destacados .bd-dot.is-on i{background:rgba(216,166,70,.3)}
#destacados .bd-count{display:flex;align-items:baseline;gap:6px;margin:0;font-size:.95rem;color:var(--mute)}
#destacados .bd-count b{color:var(--cream);font-size:1.15rem}
#destacados .bd-btns{display:flex;align-items:center;gap:8px}
#destacados .bd-play,#destacados .bd-arrow{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;
  border:1px solid var(--line-2);border-radius:999px;background:rgba(5,9,15,.55);color:var(--cream);cursor:pointer;
  transition:border-color .4s,color .4s,background-color .4s}
#destacados .bd-play{padding:0 16px 0 12px;font-size:.8rem;font-weight:600;letter-spacing:.06em}
#destacados .bd-arrow{width:48px;height:48px}
#destacados .bd-play svg,#destacados .bd-arrow svg{width:20px;height:20px}
#destacados .bd-play svg,#destacados .bd-arrow svg{flex:none;transform:none!important;stroke-dasharray:none}
#destacados .bd-play:hover,#destacados .bd-arrow:hover{border-color:var(--gold-2);background:var(--gold-2);color:#1a1204}
#destacados .bd-play:focus-visible,#destacados .bd-arrow:focus-visible,#destacados .bd-dot:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px;border-radius:999px}
#destacados .bd-art__cta:focus-visible{outline-offset:4px;border-radius:999px}
#destacados .bd-media__video[hidden]{display:none}
#destacados .bd-play__b,#destacados .bd-play__tb{display:none}
#destacados .bd-play[aria-pressed="true"] .bd-play__a,#destacados .bd-play[aria-pressed="true"] .bd-play__ta{display:none}
#destacados .bd-play[aria-pressed="true"] .bd-play__b{display:inline}
#destacados .bd-play[aria-pressed="true"] .bd-play__tb{display:inline}
#destacados .bd-hint{display:flex;align-items:center;gap:10px;margin:0;font-size:.8rem;letter-spacing:.06em;color:var(--mute);transition:opacity .8s var(--ease)}
#destacados .bd-hint svg{width:30px;height:12px;flex:none;color:var(--gold)}
#destacados .bd-hint.is-used{opacity:0}

/* gama baja: sin desenfoques ni sombras costosas */
#destacados.bd--low .bd-proof__edge{filter:none}
#destacados.bd--low .bd-proof__sheet{box-shadow:0 1px 0 rgba(0,0,0,.25),14px 30px 40px -18px rgba(0,0,0,.8)}

@media (prefers-reduced-motion:reduce){
  #destacados .bd-art__cover img,#destacados .bd-proof__img img{transition:none}
}
/* integrador: archivo ya abre con su propio aire; evita un vacío doble entre secciones */
#destacados{padding-bottom:calc(var(--sec-y)*.6)}
