/* The Webcam Show - capa de plantilla.
   Estructura de página, reconciliación con el markup que emite el core de
   Joomla (mensajes, formularios, migas, paginación de extensiones) y puente
   con Bootstrap para todo lo que todavía no tiene override propio.
   Todo valor sale de un token de tokens.css. */

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface-base);
  color: var(--ink-primary);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 22px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; }

a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--brand-hover); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

hr { border: 0; border-top: 1px solid var(--border-subtle); margin: var(--space-8) 0; }

::selection { background: var(--brand-soft); color: var(--ink-primary); }

.tws-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.tws-skip {
  position: absolute; left: var(--space-4); top: -100px; z-index: 100;
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  background: var(--brand); color: var(--on-brand); text-decoration: none;
}
.tws-skip:focus { top: var(--space-4); color: var(--on-brand); }

/* ---------- Estructura de página ---------- */

.tws-shell { display: flex; flex-direction: column; min-height: 100vh; }

.tws-wrap {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-4);
}
@media (min-width: 768px) { .tws-wrap { padding-inline: var(--space-6); } }

.tws-header { position: sticky; top: 0; z-index: 40; background: var(--surface-base); }
.tws-header .tws-navbar { max-width: 1200px; margin-inline: auto; }

.tws-body { flex: 1; padding-block: var(--space-8) var(--space-16); }

.tws-cols { display: grid; gap: var(--space-8); }
@media (min-width: 1024px) {
  .tws-cols { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: var(--space-10); }
  .tws-cols[data-side="left"] { grid-template-columns: minmax(300px, 1fr) minmax(0, 2fr); }
  .tws-cols[data-side="left"] .tws-main { order: 2; }
  .tws-cols[data-side="none"] { grid-template-columns: minmax(0, 1fr); }
}
.tws-main { min-width: 0; display: flex; flex-direction: column; gap: var(--space-8); }
.tws-side { min-width: 0; display: flex; flex-direction: column; gap: var(--space-6); }
@media (min-width: 1024px) { .tws-side { position: sticky; top: 104px; align-self: start; } }

.tws-strip { padding-block: var(--space-6); }
.tws-strip + .tws-strip { padding-top: 0; }

.tws-footer {
  background: var(--surface-sunken);
  border-top: 1px solid var(--border-subtle);
  padding-block: var(--space-12) var(--space-8);
  color: var(--ink-secondary);
}
.tws-footer-grid { display: grid; gap: var(--space-8); }
@media (min-width: 768px) { .tws-footer-grid { grid-template-columns: repeat(4, 1fr); } }
.tws-footer a { color: var(--ink-secondary); text-decoration: none; }
.tws-footer a:hover { color: var(--brand); text-decoration: underline; }
.tws-footer-legal {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-subtle);
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  justify-content: space-between; align-items: center;
  color: var(--ink-muted);
}

/* Rejilla de tarjetas del home y de los listados */
.tws-grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 640px)  { .tws-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .tws-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tws-grid[data-cols="2"] { grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 640px) { .tws-grid[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tws-stack { display: flex; flex-direction: column; gap: var(--space-3); }

.tws-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-4); margin-bottom: var(--space-5);
  padding-bottom: var(--space-3); border-bottom: 2px solid var(--brand);
}
.tws-section-head h2 { margin: 0; }
.tws-section-head a { text-decoration: none; }

/* ---------- Navegación móvil ---------- */

.tws-navbar-toggle { display: inline-flex; }
@media (min-width: 1024px) { .tws-navbar-toggle { display: none; } }

@media (max-width: 1023px) {
  .tws-navbar-nav {
    position: fixed; inset: 0 0 0 auto; width: min(320px, 86vw);
    background: var(--surface-overlay); box-shadow: var(--shadow-lg);
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    padding: var(--space-16) var(--space-4) var(--space-6);
    transform: translateX(100%); transition: transform 200ms cubic-bezier(0.2, 0, 0, 1);
    z-index: 50; overflow-y: auto;
  }
  .tws-navbar-nav[data-open="true"] { transform: translateX(0); }
  .tws-navbar-link { padding: var(--space-3) var(--space-4); }
}
@media (prefers-reduced-motion: reduce) {
  .tws-navbar-nav { transition-duration: 1ms; }
}

/* ---------- Migas de pan ---------- */

.tws-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: 0; margin: 0 0 var(--space-6); list-style: none; color: var(--ink-muted); }
.tws-breadcrumb li { display: flex; align-items: center; gap: var(--space-2); }
.tws-breadcrumb a { color: var(--ink-secondary); text-decoration: none; }
.tws-breadcrumb a:hover { color: var(--brand); }
.tws-breadcrumb [aria-current="page"] { color: var(--ink-primary); }

/* ---------- Cuerpo de artículo generado por el editor ---------- */

.tws-prose { max-width: 720px; color: var(--ink-primary); font-family: var(--font-serif); font-size: 18px; line-height: 30px; }
.tws-prose > * + * { margin-top: var(--space-6); }
.tws-prose h2 { font-family: var(--font-sans); font-size: 26px; line-height: 32px; font-weight: 700; letter-spacing: -0.01em; margin-top: var(--space-10); }
.tws-prose h3 { font-family: var(--font-sans); font-size: 21px; line-height: 28px; font-weight: 600; margin-top: var(--space-8); }
.tws-prose h4 { font-family: var(--font-sans); font-size: 18px; line-height: 24px; font-weight: 600; }
.tws-prose p { margin-block: 0; }
.tws-prose a { color: var(--brand); }
.tws-prose ul, .tws-prose ol { padding-left: var(--space-6); }
.tws-prose li + li { margin-top: var(--space-2); }
.tws-prose img { border-radius: var(--radius-lg); display: block; }
.tws-prose figure { margin: var(--space-8) 0; }
.tws-prose figcaption { font-family: var(--font-sans); font-size: 13px; line-height: 18px; color: var(--ink-muted); margin-top: var(--space-2); }
.tws-prose blockquote {
  margin: var(--space-8) 0; padding-left: var(--space-6);
  border-left: 3px solid var(--accent); font-size: 24px; line-height: 34px; font-style: italic;
}
.tws-prose table { width: 100%; border-collapse: collapse; font-family: var(--font-sans); font-size: 15px; }
.tws-prose th, .tws-prose td { text-align: left; padding: var(--space-3); border-bottom: 1px solid var(--border-subtle); }
.tws-prose th { color: var(--ink-secondary); font-weight: 600; }
.tws-prose code { font-family: var(--font-mono); font-size: 0.9em; background: var(--surface-sunken); padding: 0 var(--space-1); border-radius: var(--radius-xs); }
.tws-prose pre { background: var(--surface-sunken); padding: var(--space-4); border-radius: var(--radius-md); overflow-x: auto; }
.tws-prose hr { margin: var(--space-10) 0; }

/* ---------- Mensajes del sistema de Joomla ---------- */

joomla-alert {
  display: block;
  padding: var(--space-4);
  margin-bottom: var(--space-6);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface-overlay);
  color: var(--ink-primary);
  font-size: 15px;
}
joomla-alert[type="success"] { background: var(--success-soft); border-color: var(--success); }
joomla-alert[type="info"]    { background: var(--brand-soft); border-color: var(--brand-border); }
joomla-alert[type="warning"] { background: var(--warning-soft); border-color: var(--warning); }
joomla-alert[type="danger"]  { background: var(--danger-soft); border-color: var(--danger); }
joomla-alert .joomla-alert__close { color: inherit; }

/* ---------- Puente con Bootstrap / markup del core ---------- */
/* Lo que todavía no pasa por un override (com_users, com_contact, extensiones
   de terceros) adopta aquí los tokens, para que nada del sitio se quede con el
   look de Cassiopeia.
   Todo el bloque va dentro de :where(), que tiene especificidad cero: así las
   clases de los componentes del sistema siempre ganan y el puente solo pinta
   lo que nadie más está pintando. */

:where(.btn) {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 40px; padding: 0 var(--space-4);
  font-family: var(--font-sans); font-size: 15px; line-height: 20px; font-weight: 600;
  border: 1px solid transparent; border-radius: var(--radius-md);
  cursor: pointer; text-decoration: none;
  transition: background-color 120ms cubic-bezier(0.2, 0, 0, 1), border-color 120ms cubic-bezier(0.2, 0, 0, 1);
}
:where(.btn-primary) { background: var(--brand); color: var(--on-brand); }
:where(.btn-primary:hover) { background: var(--brand-hover); color: var(--on-brand); }
:where(.btn-secondary, .btn-outline-primary, .btn-outline-secondary) {
  background: transparent; color: var(--ink-primary); border-color: var(--border-strong);
}
:where(.btn-secondary:hover, .btn-outline-primary:hover, .btn-outline-secondary:hover) {
  background: var(--surface-raised); color: var(--ink-primary); border-color: var(--ink-muted);
}
:where(.btn-danger) { background: transparent; color: var(--danger); border-color: var(--danger); }
:where(.btn-link) { background: transparent; color: var(--brand); border-color: transparent; }
:where(.btn-sm) { min-height: 32px; padding: 0 var(--space-3); border-radius: var(--radius-sm); }
:where(.btn-lg) { min-height: 48px; padding: 0 var(--space-6); }
:where(.btn:disabled, .btn.disabled) { opacity: var(--opacity-disabled); cursor: not-allowed; }

:where(.form-control, .form-select, .inputbox, input[type="text"], input[type="email"],
input[type="password"], input[type="search"], input[type="url"], input[type="tel"], textarea, select) {
  width: 100%; min-height: 40px; padding: var(--space-3);
  font-family: var(--font-sans); font-size: 15px; line-height: 22px;
  color: var(--ink-primary); background: var(--surface-sunken);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
}
:where(.form-control, textarea, input)::placeholder { color: var(--ink-muted); }
:where(.form-control, .form-select, textarea, select, input):focus {
  outline: 2px solid var(--focus-ring); outline-offset: 2px; border-color: var(--focus-ring);
}
:where(.form-control.is-invalid, .invalid) { border-color: var(--danger); background: var(--danger-soft); }
:where(label, .control-label) { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink-primary); }
:where(.form-check-input) { accent-color: var(--brand); width: 18px; height: 18px; }

:where(.card) {
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  color: var(--ink-primary);
}
:where(.card-body) { padding: var(--space-4); }

:where(.alert) { padding: var(--space-4); border-radius: var(--radius-lg); border: 1px solid var(--border-default); background: var(--surface-overlay); }
:where(.alert-success) { background: var(--success-soft); border-color: var(--success); color: var(--ink-primary); }
:where(.alert-warning) { background: var(--warning-soft); border-color: var(--warning); color: var(--ink-primary); }
:where(.alert-danger) { background: var(--danger-soft); border-color: var(--danger); color: var(--ink-primary); }

:where(.pagination) { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); list-style: none; padding: 0; margin: var(--space-8) 0 0; }
:where(.pagination .page-link) {
  min-width: 40px; height: 40px; padding: 0 var(--space-2);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: var(--radius-md);
  background: transparent; color: var(--ink-secondary); text-decoration: none;
  font-family: var(--font-sans); font-size: 15px; font-weight: 500;
}
:where(.pagination .page-link:hover) { background: var(--surface-raised); color: var(--ink-primary); }
:where(.pagination .page-item.active .page-link) { background: var(--brand); color: var(--on-brand); }
:where(.pagination .page-item.disabled .page-link) { opacity: var(--opacity-disabled); pointer-events: none; }

/* ---------- Conmutador de tema ---------- */

.tws-theme-toggle { position: relative; }
html[data-theme="dark"]  .tws-theme-toggle [data-icon="sun"]  { display: block; }
html[data-theme="dark"]  .tws-theme-toggle [data-icon="moon"] { display: none; }
html[data-theme="light"] .tws-theme-toggle [data-icon="sun"]  { display: none; }
html[data-theme="light"] .tws-theme-toggle [data-icon="moon"] { display: block; }

/* ---------- Puerta de edad ---------- */

.tws-agegate {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-6); background: var(--scrim);
}
.tws-agegate[hidden] { display: none; }
.tws-agegate-box {
  max-width: 440px; width: 100%;
  background: var(--surface-overlay); border: 1px solid var(--border-default);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
  padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-4);
}
.tws-agegate-actions { display: flex; gap: var(--space-3); margin-top: var(--space-2); }

/* ---------- Impresión ---------- */

@media print {
  .tws-header, .tws-side, .tws-footer, .tws-adslot, .tws-ticker { display: none !important; }
  body { background: #ffffff; color: #000000; }
  .tws-prose { max-width: none; }
}

/* ---------- Correcciones 1.1.1 -> 1.1.2 ---------- */
/* .tws-shell es flex en columna: sin min-width:0 sus hijos crecen hasta el ancho
   natural de su contenido (la cinta de titulares) y desbordan en móvil. */
.tws-shell > * { min-width: 0; max-width: 100%; }
.tws-header, .tws-ticker { min-width: 0; }
.tws-ticker { overflow: hidden; }

/* Por debajo de 640px el buscador se encoge en vez de empujar la barra. */
@media (max-width: 639px) {
  .tws-navbar { gap: var(--space-3); padding-inline: var(--space-4); }
  .tws-navbar-actions { flex: 1 1 auto; min-width: 0; justify-content: flex-end; }
  .tws-navbar-actions .tws-finder,
  .tws-navbar-actions .tws-search { flex: 1 1 auto; min-width: 0; }
  .tws-ticker-date { display: none; }
}

/* Historia principal en móvil: el texto no cabe sobre una imagen 3:2 de 390px,
   así que pasa debajo de la imagen en vez de recortarse por arriba. */
@media (max-width: 639px) {
  .tws-featured { background: #0d0b14; }
  .tws-featured-media { aspect-ratio: 16 / 9; }
  .tws-featured-body { position: relative; padding: var(--space-5); }
}

/* Logo más grande en la barra (34px por defecto en components.css). */
.tws-navbar-logo { height: 68px; width: auto; }
@media (max-width: 639px) { .tws-navbar-logo { height: 46px; width: auto; } }

/* ---------- Bloques de portada estilo thewebcam.show (2026-09-25) ---------- */
.tws-home-h1 { text-align: center; margin: 0; font-size: clamp(1.35rem, 2.4vw, 2rem); line-height: 1.2; }

.tws-bannerrow { max-width: 1200px; margin-inline: auto; padding: var(--space-4) var(--space-4) 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.tws-bannerrow .tws-adslot { flex: 1 1 480px; max-width: 728px; }
.tws-social { display: flex; gap: var(--space-2); }
.tws-social a { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-raised); color: var(--ink-secondary); border: 1px solid var(--border-subtle); }
.tws-social a:hover { color: #fff; background: var(--brand); border-color: var(--brand); }
.tws-social svg { width: 18px; height: 18px; fill: currentColor; }

.tws-tabset { position: relative; }
.tws-tabset > input { position: absolute; opacity: 0; pointer-events: none; }
.tws-tabs-bar { display: flex; gap: var(--space-1); flex-wrap: wrap; border-bottom: 2px solid var(--brand); margin-bottom: var(--space-5); }
.tws-tabs-bar label { cursor: pointer; padding: var(--space-2) var(--space-4); font-weight: 700; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-secondary); background: var(--surface-raised); border-radius: var(--radius-md) var(--radius-md) 0 0; }
.tws-tabs-panel { display: none; }
.tws-tabset > input.t-a:checked ~ .tws-tabs-panel.p-a,
.tws-tabset > input.t-b:checked ~ .tws-tabs-panel.p-b,
.tws-tabset > input.t-c:checked ~ .tws-tabs-panel.p-c { display: block; }
.tws-tabset > input.t-a:checked ~ .tws-tabs-bar .l-a,
.tws-tabset > input.t-b:checked ~ .tws-tabs-bar .l-b,
.tws-tabset > input.t-c:checked ~ .tws-tabs-bar .l-c { background: var(--brand); color: #fff; }
.tws-tabset > input:focus-visible ~ .tws-tabs-bar { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.tws-videos { display: grid; gap: var(--space-5); grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 640px) { .tws-videos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .tws-videos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tws-video { display: block; text-decoration: none; color: inherit; }
.tws-video-media { display: block; position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-sunken); }
.tws-video-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.tws-video:hover .tws-video-media img { transform: scale(1.04); }
.tws-video-play { position: absolute; left: 50%; top: 50%; width: 58px; height: 40px; margin: -20px 0 0 -29px; border-radius: 12px; background: #ff0033; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.tws-video-play::after { content: ""; border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent #fff; margin-left: 3px; }
.tws-video-dur { position: absolute; right: 8px; bottom: 8px; background: rgba(0,0,0,.78); color: #fff; font-size: .75rem; font-weight: 700; padding: 2px 6px; border-radius: 4px; font-variant-numeric: tabular-nums; }
.tws-video-title { margin: var(--space-3) 0 0; font-size: 1rem; line-height: 1.3; }
.tws-video-meta { color: var(--ink-muted); font-size: .8rem; margin-top: var(--space-1); }

/* Creatividades Bantokens (AdSlot). Escalan con su contenedor: cqw = 1% del ancho del slot. */
.tws-bt { container-type: inline-size; width: 100%; }
.tws-bt-ad { position: relative; overflow: hidden; display: flex; color: #fff; text-decoration: none; background: linear-gradient(180deg, #00489A 0%, #00356F 100%); font-family: Arial, Helvetica, sans-serif; }
.tws-bt-ad:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.tws-bt-ad img { display: block; max-width: none; }
.tws-bt-coin { position: absolute; height: auto; pointer-events: none; }
.tws-bt-num { color: #fdba02; font-weight: 700; }

/* Leaderboard 728x90 */
.tws-bt-lb { max-width: 728px; }
.tws-bt-lb .tws-bt-ad { aspect-ratio: 728 / 90; align-items: center; gap: 3cqw; padding-left: 3.85cqw; border-radius: var(--radius-md); }
.tws-bt-lb .tws-bt-logo { height: 5.5cqw; width: auto; position: relative; z-index: 1; }
.tws-bt-lb .tws-bt-claim { position: relative; z-index: 1; display: flex; align-items: baseline; gap: 1.4cqw; line-height: 1; font-size: 2.75cqw; }
.tws-bt-lb .tws-bt-num { font-size: 4.1cqw; }
.tws-bt-lb .c1 { left: 78.8%; top: 37.8%; width: 4.7%; }
.tws-bt-lb .c2 { left: 84.1%; top: 13.3%; width: 8.8%; }
.tws-bt-lb .c3 { left: 94%; top: -15.6%; width: 5.8%; }
.tws-bt-lb .c4 { left: 94.8%; top: 60%; width: 6.3%; }

/* Móvil: el leaderboard pasa a franja compacta legible (nada por debajo de 12px). */
@container (max-width: 560px) {
  .tws-bt-lb .tws-bt-ad { aspect-ratio: auto; min-height: 76px; padding: 14px 72px 14px 16px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; }
  .tws-bt-lb .tws-bt-logo { height: 24px; }
  .tws-bt-lb .tws-bt-claim { font-size: 15px; gap: 6px; }
  .tws-bt-lb .tws-bt-num { font-size: 22px; }
  .tws-bt-lb .c1, .tws-bt-lb .c3, .tws-bt-lb .c4 { display: none; }
  .tws-bt-lb .c2 { left: auto; right: 12px; top: 50%; width: 52px; transform: translateY(-50%); }
}

/* Rectángulo 350x250 */
.tws-bt-rect { max-width: 350px; }
.tws-bt-rect .tws-bt-ad { aspect-ratio: 350 / 250; flex-direction: column; justify-content: space-between; padding: 6.3cqw 6.9cqw; border-radius: var(--radius-lg); }
.tws-bt-rect .tws-bt-logo { width: 57%; height: auto; position: relative; z-index: 1; }
.tws-bt-rect .tws-bt-copy { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 1.7cqw; max-width: 62%; }
.tws-bt-rect .tws-bt-title { margin: 0; font-size: max(18px, 7.4cqw); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; color: #fff; }
.tws-bt-rect .tws-bt-sub { margin: 0; font-size: max(12px, 3.7cqw); line-height: 1.4; color: #e5f1ff; }
.tws-bt-rect .tws-bt-cta { position: relative; z-index: 1; align-self: flex-start; background: #fdba02; color: #171200; font-weight: 700; font-size: max(12px, 4cqw); padding: 2.9cqw 5.1cqw; border-radius: 999px; }
.tws-bt-rect .c1 { left: 84.6%; top: 17.6%; width: 16.6%; }
.tws-bt-rect .c2 { left: 68%; top: 38.4%; width: 27.4%; }
.tws-bt-rect .c3 { left: 85.7%; top: 78.4%; width: 12.6%; }

/* Portadas con titular integrado: el destacado va apilado (imagen 16:9 + texto debajo) en todos los anchos. */
.tws-featured { background: #0d0b14; }
.tws-featured-media { aspect-ratio: 16 / 9; }
.tws-featured-media img { object-fit: contain; background: #0a0f1e; }
.tws-featured-scrim { display: none; }
.tws-featured-body { position: relative; padding: var(--space-6); }
.tws-featured-title { max-width: 28ch; }

/* Canal de YouTube (mod_feed tws:youtube) */
.tws-videos-more { margin: var(--space-4) 0 0; }
.tws-videos-more a { color: var(--brand); font-weight: 600; }
.tws-videos .tws-video-media img { aspect-ratio: 16 / 9; object-fit: cover; }
/* Figuras del texto original de los artículos */
.tws-figure { margin: var(--space-6) 0; }
.tws-figure img { width: 100%; height: auto; border-radius: var(--radius-lg); display: block; }
.tws-figure figcaption { margin-top: var(--space-2); color: var(--ink-muted); font-size: 13px; line-height: 18px; }
/* Separación entre párrafos del cuerpo (la regla p{margin-block:0} anulaba el ritmo vertical) */
.tws-prose > * + p, .tws-prose > p + * { margin-top: var(--space-6); }
.tws-prose > * + h2 { margin-top: var(--space-10); }
.tws-prose > * + h3 { margin-top: var(--space-8); }

/* Logo 1:1 (lockup principal registrado). Original en tema claro, invertido en oscuro. */
.tws-navbar-logo { height: 72px; width: auto; }
@media (max-width: 639px) { .tws-navbar-logo { height: 56px; } }
.tws-logo-dark { display: none; }
[data-theme="dark"] .tws-logo-light { display: none; }
[data-theme="dark"] .tws-logo-dark { display: block; }

/* Banners: el hover global de enlaces (color de marca) no debe teñir el texto del creativo. */
.tws-bt-ad, .tws-bt-ad:hover, .tws-bt-ad:focus, .tws-bt-ad:visited { color: #fff; text-decoration: none; }
.tws-bt-ad:hover { filter: brightness(1.08); }
.tws-bt-ad:hover .tws-bt-num { color: #fdba02; }