/* Blog de ShoutAd — mismo lenguaje visual que la home */
:root{
  --tinta:#0c0e14; --tinta-suave:#5a6070; --tenue:#9aa0b0;
  --acento:#5b3df5; --acento-oscuro:#4429d6;
  --linea:rgba(12,14,20,0.10); --fondo:#ffffff; --fondo-alt:#f7f8fc;
  --display:"Space Grotesk","Helvetica Neue",Helvetica,sans-serif;
  --texto:"Instrument Sans","Helvetica Neue",Helvetica,sans-serif;
}
@font-face{font-family:"Space Grotesk";src:url("/assets/fonts/space-grotesk-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("/assets/fonts/space-grotesk-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("/assets/fonts/space-grotesk-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("/assets/fonts/instrument-sans-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("/assets/fonts/instrument-sans-600.woff2") format("woff2");font-weight:600;font-display:swap}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--fondo);color:var(--tinta);font-family:var(--texto);
  font-size:16.5px;line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:var(--acento);text-decoration:none}
a:hover{color:var(--acento-oscuro)}
h1,h2,h3{font-family:var(--display);letter-spacing:-0.03em;line-height:1.1;margin:0;text-wrap:balance}
p{margin:0}
.env{width:min(100%,1140px);margin-inline:auto;padding-inline:clamp(20px,5vw,40px)}

.cab{position:sticky;top:0;z-index:50;background:rgba(255,255,255,0.88);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--linea)}
.cab__fila{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:15px}
.marca{font-family:var(--display);font-size:19px;font-weight:700;letter-spacing:-0.03em;color:var(--tinta);white-space:nowrap}
.marca span{color:var(--tenue);font-weight:500}
.nav{display:flex;align-items:center;gap:clamp(14px,2vw,26px)}
.nav a{font-size:13.5px;color:var(--tinta-suave)}
.nav a:hover{color:var(--tinta)}
.nav .idioma{color:var(--acento);border:1px solid rgba(91,61,245,0.35);border-radius:999px;padding:5px 13px}
@media(max-width:700px){.nav a[data-sec]{display:none}}

.eyebrow{font-family:var(--display);font-size:11.5px;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--tenue);font-weight:600;margin:0}

.blog-hero{padding-block:clamp(56px,7vw,96px) clamp(28px,4vw,48px);
  background:linear-gradient(180deg,#f7f8fc 0%,#ffffff 100%);border-bottom:1px solid var(--linea)}
.blog-hero h1{font-size:clamp(34px,3vw + 18px,54px);margin-block:14px 18px}
.blog-hero p{color:var(--tinta-suave);max-width:62ch;font-size:17px}

.seccion{padding-block:clamp(40px,5vw,72px)}
.anio{font-family:var(--display);font-size:26px;color:var(--acento);
  margin-block:clamp(34px,4vw,52px) 12px;padding-bottom:8px;border-bottom:1px solid var(--linea)}
.anio:first-of-type{margin-top:0}
.listado{list-style:none;padding:0;margin:0}
.listado li{display:grid;gap:2px 24px;padding-block:13px;border-bottom:1px solid var(--linea);align-items:baseline}
@media(min-width:720px){.listado li{grid-template-columns:minmax(0,1fr) 190px}}
.listado a{color:var(--tinta);font-size:16.5px;line-height:1.45;text-wrap:pretty}
.listado a:hover{color:var(--acento)}
.listado span{font-size:13.5px;color:var(--tenue)}

.entrada{padding-block:clamp(40px,5vw,72px) clamp(48px,6vw,88px)}
.entrada h1{font-size:clamp(29px,2.4vw + 16px,44px);margin-block:10px 30px;max-width:23ch}
.entrada .eyebrow a{color:inherit}
.entrada .eyebrow a:hover{color:var(--acento)}
.cuerpo{max-width:66ch}
.cuerpo>*+*{margin-top:19px}
.cuerpo p{color:var(--tinta-suave);line-height:1.78}
.cuerpo strong{color:var(--tinta);font-weight:600}
.cuerpo h2,.cuerpo h3{font-family:var(--display);color:var(--tinta);margin-top:40px}
.cuerpo h2{font-size:26px}
.cuerpo h3{font-size:21px}
.cuerpo ul,.cuerpo ol{padding-left:22px;color:var(--tinta-suave)}
.cuerpo li+li{margin-top:8px}
.cuerpo li::marker{color:var(--acento)}
.cuerpo blockquote{margin:30px 0;padding:2px 0 2px 22px;border-left:3px solid var(--acento);
  font-family:var(--display);font-size:20px;line-height:1.45;color:var(--tinta)}
.cuerpo table{width:100%;border-collapse:collapse;font-size:14.5px}
.cuerpo th,.cuerpo td{padding:9px 11px;border-bottom:1px solid var(--linea);text-align:left}
.cuerpo iframe{max-width:100%;border:0}
.volver{margin-top:clamp(40px,5vw,64px);padding-top:22px;border-top:1px solid var(--linea);font-size:14px}

.pie{background:#0c0e14;color:#9ea3b4;padding-block:40px 52px;font-size:13.5px;margin-top:40px}
.pie a{color:#9ea3b4}
.pie a:hover{color:#fff}
.pie__fila{display:flex;flex-wrap:wrap;gap:14px 32px;justify-content:space-between;align-items:center}
.pie__legal{display:flex;flex-wrap:wrap;gap:20px}

.blog-hero__texto{color:var(--tinta-suave);max-width:62ch;font-size:17px}


/* ==========================================================================
   Adaptación a móvil del blog y de los artículos
   ========================================================================== */

/* Los vídeos venían de WordPress con ancho fijo (560 o 420 px) y se salían
   de la pantalla. Se ajustan al ancho disponible conservando la proporción. */
.cuerpo iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.cuerpo img    { max-width: 100%; height: auto; }

@media (max-width: 700px) {

  /* La marca completa no cabe junto al menú; se deja "ShoutAd." con el punto
     de color, igual que en el resto de la web. El punto se recrea aquí porque
     forma parte del <span> que se oculta. */
  .marca span { display: none; }
  .marca::after { content: "."; color: var(--acento); }

  .cab__fila { gap: 14px; padding-block: 12px; }
  .nav { gap: 16px; }

  /* El texto justificado que traían 55 artículos de WordPress abre huecos
     enormes entre palabras en una columna estrecha. */
  .cuerpo [style*="text-align: justify"],
  .cuerpo [style*="text-align:justify"] { text-align: left !important; }

  /* Las dos tablas del archivo son más anchas que la pantalla: se desplazan
     ellas solas en lugar de romper la página. */
  .cuerpo table { display: block; overflow-x: auto; white-space: nowrap; }

  /* Enlaces del pie: eran de 16 px de alto, imposibles de acertar con el dedo */
  .pie__fila a { display: inline-block; padding-block: 11px; }
  .pie__legal { gap: 8px 20px; }

  /* Citas y titulares, un punto más contenidos */
  .cuerpo blockquote { font-size: 18px; padding-left: 16px; margin-block: 24px; }
  .cuerpo h2 { font-size: 23px; margin-top: 34px; }
  .cuerpo h3 { font-size: 19px; }
}

/* Nada debe provocar desplazamiento horizontal */
html, body { overflow-x: hidden; }