/* a:escala — estilos compartidos */

/* Tipografía: Helvetica Neue si el equipo la tiene (Mac, iPhone, iPad); si no, Inter.
   Se usa local() con el nombre exacto de cada peso y NO se nombra "Helvetica" a secas:
   en Windows ese nombre se sustituye por Arial y Inter nunca llegaría a cargarse.
   Inter (variable) se descarga solo cuando hace falta. */
@font-face{font-family:"AE Sans";font-style:normal;font-weight:200;font-display:swap;
  src:local("Helvetica Neue UltraLight"),local("HelveticaNeue-UltraLight"),url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format("woff2")}
@font-face{font-family:"AE Sans";font-style:normal;font-weight:300;font-display:swap;
  src:local("Helvetica Neue Light"),local("HelveticaNeue-Light"),url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format("woff2")}
@font-face{font-family:"AE Sans";font-style:normal;font-weight:400;font-display:swap;
  src:local("Helvetica Neue"),local("HelveticaNeue"),url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format("woff2")}
@font-face{font-family:"AE Sans";font-style:normal;font-weight:700;font-display:swap;
  src:local("Helvetica Neue Bold"),local("HelveticaNeue-Bold"),url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format("woff2")}

:root{
  --ink:#0f0f0f; --mut:#8a8a8a; --soft:#b8b8b8; --line:#e4e4e4; --bg:#fff; --fill:#fafafa;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Roboto Mono",monospace;
  --sans:"AE Sans",Arial,sans-serif;
  --ancho:1120px;
  --rojo:#D8261C;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-synthesis:none;overflow-x:clip;margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

/* regla superior (ticks): corre suave, como un dial girando */
.ruler{position:relative;height:14px;width:100%;opacity:.85;overflow:hidden;
  background:
    linear-gradient(90deg,#111 0 1px,transparent 1px) 0 0/24px 14px repeat-x,
    linear-gradient(90deg,#111 0 1px,transparent 1px) 0 0/12px 8px repeat-x;
  animation:dial 3.2s linear infinite}
/* aguja fija en el centro, en el rojo de la marca */
.ruler::after{content:"";position:absolute;left:50%;top:0;width:2px;height:14px;margin-left:-1px;background:var(--rojo)}
@keyframes dial{to{background-position:24px 0,24px 0}}
@media (prefers-reduced-motion:reduce){.ruler{animation:none}}

.wrap{width:min(var(--ancho),100%);margin:0 auto;padding:0 22px}

/* etiquetas en mono (el "sistema de medida") */
.label{font-family:var(--mono);font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--mut)}

/* menú */
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 0;
  border-bottom:1px solid var(--line)}
.nav .marca img{width:108px}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:28px;
  font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase}
.nav ul a{text-decoration:none;color:var(--ink);padding:4px 0;border-bottom:1px solid transparent}
.nav ul a:hover,.nav ul a[aria-current]{border-bottom-color:var(--ink)}

/* línea de marca */
.lema{text-align:center;padding:72px 0 56px}
.lema img{width:min(300px,64vw);margin:0 auto 14px}
.lema p{margin:0;font-family:var(--mono);font-size:12px;letter-spacing:.3em;text-transform:uppercase;
  padding-left:.3em}

/* video */
.video{position:relative;aspect-ratio:16/9;background:var(--fill);border:1px solid var(--line);
  overflow:hidden;border-radius:2px}
.video img{width:100%;height:100%;object-fit:cover}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:transparent;border:0;cursor:pointer;padding:0}
.video .play span{width:78px;height:78px;border-radius:50%;background:rgba(255,255,255,.92);
  display:flex;align-items:center;justify-content:center;transition:transform .2s}
.video .play span::after{content:"";margin-left:5px;border-style:solid;border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent var(--ink)}
.video .play:hover span{transform:scale(1.06)}
.video .aviso{position:absolute;left:14px;top:12px;font-family:var(--mono);font-size:10px;
  letter-spacing:.24em;text-transform:uppercase;background:#fff;padding:5px 8px}

/* home: la imagen del último capítulo es un link al capítulo */
a.video.enlace{display:block}
a.video.enlace img{transition:transform .5s}
a.video.enlace:hover img{transform:scale(1.02)}

/* capítulo: al reproducir, el video ocupa todo el ancho de la pantalla */
.capitulo.viendo{grid-template-columns:1fr}
.video.grande{width:100vw;margin-left:calc(50% - 50vw);aspect-ratio:auto;
  height:min(56.25vw,calc(100vh - 14px));background:#000;border:0;border-radius:0}

/* portada del último capítulo (home) */
.portada{display:grid;grid-template-columns:1.6fr 1fr;gap:40px;align-items:end;padding-bottom:80px}
.portada h2{font-weight:300;font-size:clamp(34px,4.4vw,52px);line-height:1.05;margin:14px 0 18px;letter-spacing:-.01em}
.portada h2 b{font-weight:700;display:block}
.portada p{margin:0 0 28px;color:#333}

.boton{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.28em;
  text-transform:uppercase;text-decoration:none;color:#fff;background:var(--ink);padding:14px 22px}
.boton:hover{background:#333}

/* secciones */
.seccion{padding:72px 0;border-top:1px solid var(--line)}
.seccion > .label{display:block;margin-bottom:28px}

/* grilla de capítulos */
.grilla{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.card{text-decoration:none;display:block}
.card .thumb{aspect-ratio:16/9;background:var(--fill);border:1px solid var(--line);overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.card:hover .thumb img{transform:scale(1.03)}
.card h3{font-size:19px;font-weight:300;margin:14px 0 4px;line-height:1.25}
.card h3 b{font-weight:700}
.card.proximo{pointer-events:none}
.card.proximo .thumb{background:
  repeating-linear-gradient(90deg,#d9d9d9 0 1px,transparent 1px 12px) bottom/100% 8px no-repeat,var(--fill)}
.card.proximo h3{color:#9a9a9a}

/* índice de capítulos (home) */
ol.indice{list-style:none;margin:18px 0 0;padding:0;border-top:1px solid var(--ink)}
.indice li{border-bottom:1px solid var(--line)}
.indice li > a,.indice li > .fila{display:grid;grid-template-columns:64px minmax(0,1fr) 260px 140px;
  gap:24px;align-items:baseline;padding:22px 0;text-decoration:none;color:inherit}
.indice .n{font-family:var(--mono);font-size:12px;color:var(--mut)}
.indice .t{font-size:clamp(20px,2.2vw,28px);font-weight:300;letter-spacing:-.01em}
.indice .t b{font-weight:700;margin-right:.35em}
.indice .q{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.indice .e{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;text-align:right}
.indice a:hover{background:rgba(216,38,28,.05)}
.indice a:hover .e{color:var(--rojo)}
.indice a .e::after{content:" →"}

/* acerca breve */
.breve{max-width:680px}
.breve p{font-size:21px;font-weight:300;line-height:1.5;margin:0 0 22px}
.link{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;text-decoration:none;
  border-bottom:1px solid var(--ink);padding-bottom:3px}

/* página de capítulo */
.cabecera .quien{margin:18px 0 0;font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--mut)}
.cabecera{padding:64px 0 40px}
.cabecera h1{font-weight:300;font-size:clamp(40px,6vw,76px);line-height:1;margin:14px 0 0;letter-spacing:-.015em}
.cabecera h1 b{font-weight:700}
.cabecera h1 .sep{color:var(--soft);font-weight:200;margin:0 .15em}

.capitulo{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:56px;padding-bottom:88px}
.gancho{font-size:22px;font-weight:300;line-height:1.45;margin:36px 0 48px}
.ejes{list-style:none;margin:0;padding:0;counter-reset:eje}
.ejes li{counter-increment:eje;display:grid;grid-template-columns:48px 1fr;padding:22px 0;border-top:1px solid var(--line)}
.ejes li::before{content:counter(eje,decimal-leading-zero);font-family:var(--mono);font-size:12px;color:var(--mut);padding-top:4px}
.ejes h3{margin:0 0 6px;font-size:18px;font-weight:700}
.ejes p{margin:0;color:#333}

.lateral{font-size:15px;line-height:1.6}
.lateral .bloque{padding:24px 0;border-top:1px solid var(--ink)}
.lateral .bloque + .bloque{border-top-color:var(--line)}
.lateral .label{display:block;margin-bottom:14px}
.lateral h4{margin:0;font-size:17px}
.lateral .meta{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--mut);margin:4px 0 14px}
.lateral p{margin:0 0 12px;color:#333}
.lateral dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 16px}
.lateral dt{font-family:var(--mono);font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.12em;padding-top:3px}
.lateral dd{margin:0}
.logo-sponsor{display:flex;align-items:center;min-height:40px;margin:4px 0 18px;text-decoration:none;
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--soft)}
.logo-sponsor img{height:34px;width:auto}
.puntos{list-style:none;margin:0 0 16px;padding:0}
.puntos li{position:relative;padding:3px 0 3px 16px}
.puntos li::before{content:"";position:absolute;left:0;top:.8em;width:5px;height:5px;border-radius:50%;background:var(--ink)}
.puntos a{text-decoration:none;border-bottom:1px solid var(--line)}
.puntos a:hover{border-bottom-color:var(--ink)}
.lateral .nota{font-size:13px;color:var(--mut);line-height:1.5;margin:0}
.pend{}
/* resaltado de marcador en rojo */
.resalte{background:linear-gradient(transparent 58%,rgba(216,38,28,.22) 58%);text-decoration:none;padding:0 2px}
.resalte:hover{background:rgba(216,38,28,.22)}

/* texto largo (acerca) */
.texto{max-width:720px;padding:64px 0 96px}
.texto h1{font-weight:300;font-size:clamp(36px,5vw,60px);line-height:1.05;margin:14px 0 40px}
.texto p{font-size:21px;font-weight:300;line-height:1.55;margin:0 0 24px}

/* frase destacada (acerca): marcador rojo, como "hace cosas" de la home */
.texto p.destacado{font-weight:400;margin-top:36px}
.texto p.destacado span{background:linear-gradient(transparent 58%,rgba(216,38,28,.22) 58%);
  padding:0 .15em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* marcas (acerca) */
.marcas{border-top:1px solid var(--line);padding:56px 0 96px}
.marcas ul{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:18px 56px}
.marcas li{font-size:26px;font-weight:700;letter-spacing:-.01em}
.marcas li small{display:block;font-family:var(--mono);font-size:10px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-top:6px;max-width:240px;line-height:1.5}
.marcas ul{align-items:flex-start}
.marcas a{text-decoration:none}
.marcas a:hover{text-decoration:underline}
.texto{padding-bottom:64px}

.remate,.texto p.remate,.cierre p.remate{font-size:23px;font-weight:700;letter-spacing:-.01em;margin-top:34px;color:var(--ink)}
.remate::before{content:"";display:block;width:34px;height:2px;background:var(--rojo);margin-bottom:16px}
.cierre .remate::before{margin-left:auto;margin-right:auto}

/* footer */
footer{border-top:1px solid var(--line);padding:40px 0 28px;font-family:var(--mono);font-size:11px;letter-spacing:.12em}
footer .fila{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-end}
footer ul{list-style:none;margin:0;padding:0;display:flex;gap:24px;flex-wrap:wrap;text-transform:uppercase;letter-spacing:.2em}
footer a{text-decoration:none}
footer a:hover{text-decoration:underline}
footer .firma{color:var(--soft)}
/* link discreto a las pruebas de diseño */
footer .pruebas{display:inline-block;margin-top:16px;font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:#dcdcdc;text-decoration:none}
footer .pruebas:hover{color:var(--mut)}
footer .contacto{font-family:var(--sans);font-size:15px;letter-spacing:0;margin:10px 0 0}

@media (max-width:860px){
  .indice li > a,.indice li > .fila{grid-template-columns:40px 1fr auto;gap:14px}
  .indice .q{display:none}
  .portada,.capitulo{grid-template-columns:1fr;gap:32px}
  .grilla{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  body{font-size:16px}
  .nav{flex-direction:column;align-items:flex-start;gap:16px}
  .nav ul{gap:18px;letter-spacing:.16em}
  .grilla{grid-template-columns:1fr}
  .lema{padding:44px 0 36px}
  .seccion{padding:52px 0}
  .gancho,.breve p,.texto p{font-size:19px}
}