/* Estafas: cabecera con mensaje falso y banderas rojas, tarjetas numeradas con acento */
html body .page-hero { isolation: isolate; padding-bottom: 56px; }
.page-hero::before { content:''; position:absolute; z-index:-1; left:50%; top:55%; width:min(900px,120vw); height:560px; transform:translate(-50%,-50%); background:radial-gradient(ellipse at center,rgba(239,68,68,.13),rgba(247,147,26,.08) 45%,transparent 66%); pointer-events:none; }
.page-hero h1 { background:linear-gradient(180deg,#fff 40%,#F7931A 150%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.page-hero h1 span { -webkit-text-fill-color:#F7931A; }

.es-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.es-scene { margin:44px auto 0; max-width:560px; text-align:left; }
.es-card { position:relative; padding:18px; border-radius:20px; border:1px solid rgba(255,255,255,.14); background:linear-gradient(160deg,#1a1a1a,#0c0c0c); box-shadow:0 30px 70px -20px rgba(0,0,0,.95),0 0 0 1px rgba(239,68,68,.12),inset 0 1px 0 rgba(255,255,255,.07); transform:perspective(900px) rotateX(3deg); animation:esFloat 6s ease-in-out infinite; }
@keyframes esFloat { 50% { transform:perspective(900px) rotateX(3deg) translateY(-8px); } }
.es-bar { display:flex; align-items:center; gap:10px; margin-bottom:12px; font-size:.85rem; }
.es-av { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:#3b3b3f; color:#fff; font-weight:800; }
.es-from { font-weight:700; color:#f5f5f7; }
.es-now { margin-left:auto; color:#8a8a90; font-family:'JetBrains Mono',monospace; font-size:.72rem; }
.es-msg { margin:0 0 16px; padding:14px 16px; border-radius:14px 14px 14px 4px; background:#222226; color:#e6e6ea; font-size:.98rem; line-height:1.5; max-width:none; text-align:left; }
.es-flags { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.es-flags li { display:inline-flex; align-items:center; gap:8px; padding:7px 12px 7px 8px; border-radius:999px; border:1px solid rgba(239,68,68,.5); background:rgba(239,68,68,.1); color:#ffb4ae; font-size:.82rem; font-weight:600; opacity:0; transform:translateY(8px) scale(.92); }
.es-flags b { width:20px; height:20px; border-radius:50%; display:grid; place-items:center; background:#EF4444; color:#fff; font-size:.72rem; }
.es-verdict { margin-top:14px; padding:10px 14px; border-radius:12px; background:rgba(239,68,68,.14); color:#ffd0cc; font-weight:700; font-size:.9rem; opacity:0; }
.es-on .es-flags li { animation:esPop .5s cubic-bezier(.2,.7,.2,1) calc(.5s + var(--i)*.55s) forwards; }
.es-on .es-verdict { animation:esPop .5s ease 2.3s forwards; }
@keyframes esPop { to { opacity:1; transform:none; } }

/* Tarjetas numeradas */
.hal { counter-reset:es; }
.hal-block { position:relative; overflow:hidden; background:linear-gradient(160deg,#1a1a1a,#0f0f0f); box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 14px 34px -14px rgba(0,0,0,.9); transition:transform .3s, border-color .3s, box-shadow .3s; }
.hal-block:hover { transform:translateY(-4px); border-color:rgba(247,147,26,.5); box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 26px 50px -16px rgba(0,0,0,.95); }
.hal-block:nth-of-type(-n+5) { counter-increment:es; padding-left:84px; border-left:3px solid #EF4444; }
.hal-block:nth-of-type(-n+5)::before { content:counter(es); position:absolute; left:22px; top:22px; width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:rgba(239,68,68,.14); border:1px solid rgba(239,68,68,.45); color:#ff8f86; font-family:'JetBrains Mono',monospace; font-weight:700; }
.hal-block:nth-of-type(1) { border-left-color:#F7931A; }
.hal-block:nth-of-type(1)::before { background:rgba(247,147,26,.14); border-color:rgba(247,147,26,.5); color:#F7931A; }
@media (max-width:600px) { .hal-block:nth-of-type(-n+5) { padding-left:20px; padding-top:72px; } .es-card { animation:none; } .es-scene { margin-top:32px; } }
@media (prefers-reduced-motion:reduce) {
  .es-card { animation:none; }
  .es-flags li, .es-verdict { opacity:1; transform:none; animation:none !important; }
  .hal-block { transition:none; }
}
