/* Daemon4 · boceto Seonergy — plantilla de noticia (single.php en WordPress)
   Arquitectura y valores medidos del single post de Cortex
   (cortex.qodeinteractive.com/creative-design-and-advertising/), con la paleta
   de Daemon4 en lugar de la del tema (menta -> cian del boceto, rosa -> rojo
   #D8282F, morado -> tinta):
   - title area: banda de color a sangre por detras de la cabecera, palabra
     enorme al centro (120px/700, -0.06em) y formas de linea sueltas
   - contenido + lateral de widgets (305px): buscador subrayado, titulos de
     widget en color 21px/500, categorias en negrita 17px, etiquetas subrayadas
   - titulo del post pequeno (26px/500), cita en versalitas 15px/700
   - al pie: fecha en color + autor/categoria en gris; anterior · compartir */

/* barra de progreso de lectura */
.lectura{position:fixed;left:0;right:0;top:0;height:3px;z-index:80;pointer-events:none;}
.lectura span{display:block;height:100%;width:100%;background:var(--rojo);transform-origin:0 50%;transform:scaleX(0);}

/* ---------- banda de titulo ---------- */
/* a diferencia de Cortex, la banda empieza debajo de la cabecera: el logo es un
   JPG sobre blanco y con la cabecera transparente encima del cian el multiply
   lo tenia (la esfera salia cian y el «4» oscuro). El logo no se toca. */
.nt-banda{position:relative;overflow:hidden;background:#F2F2F2;color:var(--tinta);   /* pedido: gris claro en vez del cian */
  min-height:clamp(280px,32vw,440px);
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding-block:50px;}
.nt-banda-in{position:relative;z-index:2;}
.nt-banda-t{margin:0;font-size:clamp(64px,10vw,124px);font-weight:700;line-height:1;letter-spacing:-.06em;
  color:var(--tinta);text-shadow:-.035em -.035em 0 var(--rojo), .035em .035em 0 var(--cian);}
.nt-banda .migas{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 10px;margin-top:22px;
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta);}
.nt-banda .migas a{color:var(--tinta);text-decoration:none;opacity:.7;}
.nt-banda .migas a:hover{opacity:1;}
.nt-banda .migas span[aria-hidden]{opacity:.45;}
/* formas sueltas, como las del tema: tinta y rojo (el blanco no se ve sobre el gris);
   el JS las desplaza un poco con el raton */
.formas{position:absolute;inset:0;z-index:1;pointer-events:none;color:var(--tinta);}
.formas .f{position:absolute;transition:transform 600ms cubic-bezier(.2,.7,.3,1);}
.formas .bl{color:var(--rojo);}
.f1{width:clamp(70px,9vw,130px);left:4%;top:34%;}
.f2{width:clamp(48px,6.5vw,96px);left:27%;top:14%;}
.f3{width:34px;left:17%;bottom:14%;}
.f4{width:clamp(34px,3.6vw,52px);left:11%;top:10%;}
.f5{width:clamp(60px,7vw,100px);right:5%;bottom:12%;opacity:.8;}
.f6{width:clamp(44px,5vw,70px);right:18%;top:50%;}
.f7{width:clamp(30px,3.4vw,50px);right:9%;top:14%;}
.f8{width:28px;right:31%;bottom:18%;}
.f9{width:clamp(40px,4vw,60px);left:38%;bottom:10%;}
.f10{width:clamp(70px,8vw,110px);right:-1%;top:-6%;opacity:.9;}

/* ---------- contenido + lateral ---------- */
.nt-g{display:grid;grid-template-columns:minmax(0,1fr) 305px;gap:clamp(36px,4vw,56px);align-items:start;
  padding-block:clamp(56px,7vw,100px) clamp(64px,8vw,120px);}
.nt-foto{margin:0 0 34px;}
.nt-foto img{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;object-position:50% 45%;}
.nt-h1{font-size:clamp(22px,2vw,27px);font-weight:600;line-height:1.25;letter-spacing:-.02em;margin:0 0 18px;}
.nt-cuerpo{font-size:16px;line-height:1.66;color:var(--texto);}
.nt-cuerpo p{margin:0 0 1.15em;}
.nt-cuerpo strong{color:var(--tinta);font-weight:700;}
.nt-cuerpo a{color:var(--tinta);font-weight:600;text-decoration:none;border-bottom:2px solid var(--rojo);}
.nt-cuerpo a:hover{color:var(--rojo-tx);}
.nt-cuerpo h2{font-size:clamp(19px,1.6vw,22px);font-weight:600;line-height:1.3;letter-spacing:-.02em;margin:2em 0 .7em;}
.entradilla{font-size:17.5px;line-height:1.62;color:var(--tinta);}
.datos-feria{padding-left:18px;border-left:3px solid var(--cian);line-height:1.9;}
.firma{font-weight:700;color:var(--tinta);}

/* cita: versalitas en negrita con la comilla en color, sangrada (15px/700, -0.05em) */
.cita{position:relative;margin:1.6em 0 1.8em;padding-left:70px;}
.cita::before{content:"\201D";position:absolute;left:30px;top:-6px;font-size:44px;line-height:1;font-weight:800;color:var(--rojo);}
.cita p{margin:0;font-size:15px;line-height:1.73;font-weight:700;letter-spacing:-.05em;text-transform:uppercase;color:#6E6574;}

.fig{margin:2em 0;}
.fig img{width:100%;height:auto;background:#E9F0FC;}
.fig figcaption{margin-top:10px;font-size:13px;line-height:1.5;color:var(--texto);}

/* chat de ejemplo del asistente */
.chat{margin:2em 0;background:var(--tinta);color:#E7E2EC;padding:clamp(20px,2.6vw,30px);}
.chat-cab{display:flex;align-items:center;gap:10px;margin:0 0 18px;font-size:12px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--cian);}
.chat-punto{width:9px;height:9px;border-radius:50%;background:#3DDC84;box-shadow:0 0 0 4px rgba(61,220,132,.18);}
.chat-lista{list-style:none;margin:0;padding:0;display:grid;gap:12px;}
.chat-lista li{justify-self:end;max-width:86%;padding:12px 16px;background:#fff;color:var(--tinta);
  font-size:15px;line-height:1.45;font-weight:600;border-radius:14px 14px 3px 14px;min-height:1.45em;}
.chat-lista li.escribiendo::after{content:"";display:inline-block;width:2px;height:1.05em;margin-left:2px;
  vertical-align:-.15em;background:var(--rojo);animation:cursor 800ms steps(1) infinite;}
@keyframes cursor{50%{opacity:0}}
.chat-nota{margin:16px 0 0;font-size:12.5px;color:#A49DAE;}

/* datos al pie: fecha en color, autor y categoria en gris (12px/700 versalitas) */
.nt-info{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-top:44px;
  font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;line-height:25px;}
.nt-info p{margin:0;display:flex;flex-wrap:wrap;gap:0 14px;align-items:center;}
.nt-info time{color:var(--rojo-tx);}
.nt-info span,.nt-info a{color:#77717D;text-decoration:none;}
.nt-info a:hover{color:var(--tinta);}
.nt-info-b{color:var(--rojo-tx);}
.nt-info-b svg{width:14px;height:14px;margin-right:6px;}

/* anterior · compartir · todas */
.nt-nav{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center;margin-top:34px;
  padding-block:22px;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);}
.nt-prev,.nt-todas{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--tinta);}
.nt-todas{justify-content:flex-end;text-align:right;}
.nt-prev img{width:64px;height:64px;object-fit:cover;flex:none;filter:grayscale(1);transition:filter 260ms;}
.nt-prev:hover img{filter:none;}
.nt-prev span,.nt-todas span{font-size:14px;font-weight:600;line-height:1.35;letter-spacing:-.01em;}
.nt-prev small,.nt-todas small{display:flex;align-items:center;gap:6px;margin-bottom:3px;font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:#9A94A0;}
.nt-todas small{justify-content:flex-end;color:var(--rojo-tx);}
.nt-prev small svg,.nt-todas small svg{width:13px;height:13px;}
.nt-prev:hover span,.nt-todas:hover span{color:var(--rojo-tx);}
.compartir{text-align:center;position:relative;}
.compartir > span:first-child{display:block;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:#9A94A0;margin-bottom:6px;}
.compartir div{display:flex;gap:14px;justify-content:center;}
.compartir a,.compartir button{display:grid;place-items:center;width:22px;height:22px;padding:0;border:0;background:none;
  color:var(--rojo);cursor:pointer;transition:color 200ms,transform 200ms;}
.compartir a:hover,.compartir button:hover{color:var(--tinta);transform:translateY(-2px);}
.compartir svg{width:16px;height:16px;}
.copiado{position:absolute;left:50%;transform:translateX(-50%);top:calc(100% + 6px);font-size:12px;font-weight:600;
  color:var(--rojo-tx);white-space:nowrap;}

/* ---------- lateral de widgets ---------- */
.nt-lat{display:grid;gap:34px;}
.w-buscar{position:relative;}
.w-buscar input{width:100%;height:45px;padding:0 34px 0 0;border:0;border-bottom:2px solid var(--rojo);border-radius:0;
  background:transparent;font:inherit;font-size:17px;font-weight:700;color:var(--tinta);}
.w-buscar input::placeholder{color:var(--rojo-tx);opacity:1;}
.w-buscar input:focus{outline:none;border-color:var(--tinta);}
.w-buscar button{position:absolute;right:0;top:8px;width:28px;height:28px;padding:0;border:0;background:none;color:var(--rojo);cursor:pointer;}
.w-buscar button svg{width:22px;height:22px;}
.w-t{margin:0 0 15px;font-size:21px;font-weight:500;letter-spacing:-.01em;line-height:1.5;color:var(--rojo-tx);}
.w p{margin:0;font-size:15.5px;line-height:1.6;}
.w-cats{list-style:none;margin:0;padding:0;display:grid;gap:12px;}
.w-cats a{font-size:16px;font-weight:700;color:var(--tinta);text-decoration:none;transition:color 200ms;}
.w-cats a:hover{color:var(--rojo-tx);}
.w-cats span{font-size:14px;font-weight:600;color:#9A94A0;}
.w-tags{display:flex;flex-wrap:wrap;gap:10px 14px;}
.w-tags a{font-size:16px;font-weight:700;line-height:1.3;color:var(--tinta);text-decoration:none;
  border-bottom:2px solid #C6C1C8;transition:border-color 200ms;}
.w-tags a:hover{border-color:var(--rojo);}
.w-redes{display:flex;gap:16px;}
.w-redes a{color:var(--tinta);transition:color 200ms;}
.w-redes a:hover{color:var(--rojo);}
.w-redes svg{width:19px;height:19px;}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  .nt-g{grid-template-columns:1fr;}
  .nt-lat{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 40px;padding-top:20px;border-top:1px solid var(--linea);}
  .w-buscar{grid-column:1/-1;}
}
@media(max-width:620px){
  .nt-banda{min-height:0;padding-bottom:40px;}
  .formas .f5,.formas .f6,.formas .f9,.formas .f8{display:none;}
  .nt-foto img{aspect-ratio:8/5;}
  .cita{padding-left:44px;}
  .cita::before{left:6px;}
  .nt-nav{grid-template-columns:1fr;text-align:left;gap:18px;}
  .nt-todas{justify-content:flex-start;text-align:left;}
  .nt-todas small{justify-content:flex-start;}
  .compartir{text-align:left;}
  .compartir div{justify-content:flex-start;}
  .copiado{left:0;transform:none;}
  .nt-lat{grid-template-columns:1fr;}
}
@media(prefers-reduced-motion:reduce){
  .chat-lista li.escribiendo::after{animation:none;}
  .formas .f{transition:none;}
}