/* ============================================================
   Portada de videodjralph.com
   Estilo: editorial, tipografia grande, bordes de 1px, esquinas a 0.
   Azul electrico en dos tonos del mismo matiz:
     --azul   #1F7AFF  rellenos y tipografia grande
     --claro  #66B2FF  textos pequenos sobre negro (contraste 8,8)
   El segundo existe por legibilidad: el azul fuerte sobre negro da 4,1
   y el minimo legible en texto pequeno es 4,5.
   ============================================================ */

.vdjr{
  --negro:#0a0a0a;
  --hueso:#edeae3;
  --gris:#9d9a92;
  --grisTexto:#b5b1a8;
  --azul:#1f7aff;
  --claro:#66b2ff;
  --linea:rgba(237,234,227,.2);
  --margen:34px;
  background:var(--negro);
  color:var(--hueso);
  font-family:Archivo,system-ui,-apple-system,sans-serif;
  overflow-x:hidden;
}
.vdjr *{box-sizing:border-box}
.vdjr img{display:block;max-width:100%}
.vdjr a{color:var(--claro);text-decoration:none}
.vdjr a:hover{color:#fff}
.vdjr h1,.vdjr h2,.vdjr h3{font-family:'Archivo Black',Archivo,sans-serif;text-transform:uppercase;margin:0}

.vdjr-grano{
  position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}
.vdjr-grano--claro{opacity:.28;mix-blend-mode:multiply}

.vdjr-etiqueta{
  font-family:'Space Mono',ui-monospace,monospace;font-size:11px;letter-spacing:2.2px;
  text-transform:uppercase;color:var(--gris);margin:0 0 18px;
}
.vdjr-etiqueta--azul{color:var(--claro)}
.vdjr-azul{color:var(--azul)}

.vdjr-h2{font-size:clamp(34px,5vw,72px);line-height:.92;letter-spacing:-2.2px}
.vdjr-h2--grande{font-size:clamp(38px,6.2vw,88px);letter-spacing:-3px}

/* ── Botones ───────────────────────────────────────────────── */
.vdjr-botones{display:flex;gap:12px;flex-wrap:wrap;margin:0}
.vdjr-btn{
  display:inline-block;border:1px solid rgba(237,234,227,.4);color:var(--hueso);
  font-family:'Space Mono',ui-monospace,monospace;font-weight:700;font-size:13px;
  letter-spacing:1.6px;text-transform:uppercase;padding:17px 25px;
  transition:background .25s,color .25s,border-color .25s;
}
.vdjr-btn:hover{background:var(--hueso);color:var(--negro);border-color:var(--hueso)}
.vdjr-btn--lleno{background:var(--azul);color:var(--negro);border-color:var(--azul);font-weight:700}
.vdjr-btn--negro{background:var(--negro);color:var(--hueso);border-color:var(--negro)}
.vdjr-btn--linea{border-color:var(--negro);color:var(--negro)}
.vdjr-btn--linea:hover,.vdjr-btn--negro:hover{background:var(--hueso);color:var(--negro);border-color:var(--negro)}

/* ── Hero ──────────────────────────────────────────────────── */
.vdjr-hero{position:relative;min-height:640px;display:flex;border-bottom:1px solid var(--linea);overflow:hidden}
.vdjr-hero__fondo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 72%;filter:contrast(1.05) saturate(1.1);opacity:.72}
.vdjr-hero__velo{position:absolute;inset:0;background:linear-gradient(100deg,rgba(10,10,10,.97) 0%,rgba(10,10,10,.82) 46%,rgba(10,10,10,.28) 100%)}
.vdjr-hero__cuerpo{position:relative;width:100%;padding:62px var(--margen) 38px;display:flex;flex-direction:column;justify-content:space-between;gap:38px}
.vdjr-hero__alto{display:flex;gap:26px;align-items:flex-start}
.vdjr-vertical{
  font-family:'Space Mono',ui-monospace,monospace;font-size:11px;letter-spacing:2.4px;
  color:var(--claro);writing-mode:vertical-rl;text-transform:uppercase;margin:4px 0 0;flex-shrink:0;
}
.vdjr-titular{font-size:clamp(44px,8.2vw,118px);line-height:.88;letter-spacing:-.035em}
.vdjr-titular span{display:block}
.vdjr-hero__bajo{display:flex;align-items:flex-end;justify-content:space-between;gap:44px;flex-wrap:wrap}
.vdjr-entradilla{margin:0;font-size:18px;line-height:1.62;color:var(--grisTexto);max-width:520px}

@keyframes vdjrRasga{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.vdjr-rasga{animation:vdjrRasga 1.05s cubic-bezier(.76,0,.24,1) both}
.vdjr-r1{animation-delay:.1s}
.vdjr-r2{animation-delay:.2s}

/* ── Cinta ─────────────────────────────────────────────────── */
.vdjr-cinta{background:var(--hueso);color:var(--negro);padding:13px 0;overflow:hidden;border-bottom:1px solid var(--linea)}
.vdjr-cinta__pista{display:flex;width:200%;animation:vdjrCinta 26s linear infinite}
.vdjr-cinta__grupo{display:flex;gap:26px;padding-right:26px;white-space:nowrap;font-family:'Archivo Black',sans-serif;font-size:15px;letter-spacing:1px;text-transform:uppercase}
@keyframes vdjrCinta{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── Ahora mismo ───────────────────────────────────────────── */
.vdjr-ahora{border-bottom:1px solid var(--linea)}
.vdjr-ahora__titulo{display:flex;justify-content:space-between;padding:26px var(--margen) 18px;margin:0}
.vdjr-ahora__rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.vdjr-celda{border-top:1px solid var(--linea);border-right:1px solid var(--linea);padding:26px 30px 30px;transition:background .3s}
.vdjr-celda:hover{background:#121212}
.vdjr-celda--destaca{background:#101010}
.vdjr-celda__foto{display:block;aspect-ratio:1/1;overflow:hidden;border:1px solid rgba(237,234,227,.16);margin-bottom:18px;position:relative}
.vdjr-celda--destaca .vdjr-celda__foto{aspect-ratio:1/1;background:#0a0a0a}
.vdjr-celda--destaca .vdjr-celda__foto img{object-fit:contain}
.vdjr-celda__foto img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.16,.84,.44,1)}
.vdjr-celda__foto:hover img{transform:scale(1.06)}
.vdjr-celda__titulo{font-size:21px;line-height:1.15;margin:0 0 10px}
.vdjr-celda__titulo a{color:var(--hueso)}
.vdjr-celda__pie{font-size:14px;color:var(--gris);margin:0;line-height:1.6}
.vdjr-celda__enlace{margin:18px 0 0;font-family:'Space Mono',ui-monospace,monospace;font-size:12px;letter-spacing:1.6px;text-transform:uppercase;font-weight:700}
.vdjr-fecha{font-family:'Archivo Black',sans-serif;font-size:clamp(42px,5vw,62px);line-height:.9;letter-spacing:-2px;margin:0}
.vdjr-fecha__mes{font-family:'Space Mono',ui-monospace,monospace;font-size:13px;letter-spacing:3px;color:var(--gris);margin:6px 0 18px}
.vdjr-play{width:58px;height:58px;border:1px solid var(--hueso);background:rgba(10,10,10,.5);color:var(--hueso);display:flex;align-items:center;justify-content:center;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.vdjr-play--grande{position:static;transform:none;width:132px;height:132px;flex-shrink:0;transition:background .25s,color .25s}
.vdjr-play--grande:hover{background:var(--hueso);color:var(--negro)}

/* ── Servicios ─────────────────────────────────────────────── */
.vdjr-servicios{border-bottom:1px solid var(--linea)}
.vdjr-servicios__cabeza{padding:62px var(--margen) 34px;display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap}
.vdjr-servicios__nota{margin:0;font-size:16px;line-height:1.7;color:var(--gris);max-width:340px}
.vdjr-fila{
  display:grid;grid-template-columns:78px 1fr 1.2fr 130px 44px;align-items:center;gap:24px;
  padding:26px var(--margen);border-top:1px solid var(--linea);color:var(--hueso);
  transition:background .3s,padding-left .3s;
}
.vdjr-fila:last-of-type{border-bottom:1px solid var(--linea)}
.vdjr-fila:hover{background:var(--azul);padding-left:calc(var(--margen) + 12px);color:var(--negro)}
.vdjr-fila:hover .vdjr-fila__n,.vdjr-fila:hover .vdjr-fila__d,.vdjr-fila:hover .vdjr-fila__f{color:var(--negro)}
.vdjr-fila__n{font-family:'Space Mono',ui-monospace,monospace;font-size:12px;letter-spacing:1.6px;color:var(--claro)}
.vdjr-fila__t{font-family:'Archivo Black',sans-serif;font-size:clamp(22px,2.6vw,34px);letter-spacing:-1px;text-transform:uppercase}
.vdjr-fila__d{font-size:15px;line-height:1.6;color:var(--gris)}
.vdjr-fila__img{height:62px;overflow:hidden;border:1px solid rgba(237,234,227,.16)}
.vdjr-fila__img img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.vdjr-fila__f{font-size:26px;text-align:right;color:var(--claro);transition:transform .3s}
.vdjr-fila:hover .vdjr-fila__f{transform:translateX(12px)}

/* ── La diferencia (inversa) ───────────────────────────────── */
.vdjr-inversa{position:relative;background:var(--hueso);color:var(--negro);padding:72px var(--margen);border-bottom:1px solid var(--linea)}
.vdjr-inversa__cuerpo{position:relative}
.vdjr-inversa .vdjr-etiqueta{color:#77726a}
.vdjr-inversa .vdjr-h2{margin-bottom:52px}
.vdjr-tres{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));border-top:1px solid var(--negro)}
.vdjr-tres>div{padding:30px 30px 0 0;border-right:1px solid rgba(10,10,10,.22)}
.vdjr-tres>div:last-child{border-right:0;padding-right:0}
.vdjr-tres h3{font-size:26px;line-height:1.1;margin:0 0 12px}
.vdjr-tres p{font-size:15.5px;line-height:1.7;color:#3a382f;margin:0}
.vdjr-letra{font-family:'Space Mono',ui-monospace,monospace;font-size:11px;letter-spacing:1.8px;color:#0b5ed0;margin:0 0 14px}

/* ── Como se reserva ───────────────────────────────────────── */
.vdjr-pasos{padding:66px var(--margen);border-bottom:1px solid var(--linea)}
.vdjr-pasos__cabeza{margin-bottom:44px}
.vdjr-pasos__lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));border-top:1px solid var(--linea)}
.vdjr-paso{padding:30px 28px 34px 0;border-right:1px solid var(--linea);transition:background .3s}
.vdjr-paso:last-child{border-right:0}
.vdjr-paso:hover{background:#111}
.vdjr-paso__n{display:block;font-family:'Archivo Black',sans-serif;font-size:46px;line-height:1;letter-spacing:-2px;color:var(--azul);margin-bottom:16px}
.vdjr-paso__t{font-size:20px;line-height:1.16;margin:0 0 10px}
.vdjr-paso__d{font-size:15px;line-height:1.7;color:var(--grisTexto);margin:0}
.vdjr-pasos__pie{margin:34px 0 0;padding-top:22px;border-top:1px solid var(--linea);font-size:15px;line-height:1.7;color:var(--gris);max-width:760px}

/* ── Noticias ──────────────────────────────────────────────── */
.vdjr-noticias{padding:62px var(--margen);border-bottom:1px solid var(--linea)}
.vdjr-noticias__cabeza{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:34px;flex-wrap:wrap}
.vdjr-noticias__cabeza a{font-family:'Space Mono',ui-monospace,monospace;font-size:12px;letter-spacing:1.6px;text-transform:uppercase;font-weight:700}
.vdjr-noticias__rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px}
.vdjr-noticia__foto{display:block;height:170px;overflow:hidden;border:1px solid rgba(237,234,227,.16);margin-bottom:16px}
.vdjr-noticia__foto img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.16,.84,.44,1)}
.vdjr-noticia__foto:hover img{transform:scale(1.06)}
.vdjr-noticia h3{font-size:19px;line-height:1.2}
.vdjr-noticia h3 a{color:var(--hueso)}

/* ── Videobook ─────────────────────────────────────────────── */
.vdjr-videobook{position:relative;min-height:420px;overflow:hidden;border-bottom:1px solid var(--linea)}
.vdjr-videobook .vdjr-hero__fondo{opacity:.35}
.vdjr-videobook__cuerpo{position:relative;min-height:420px;padding:var(--margen);display:flex;flex-direction:column;justify-content:space-between;gap:30px}
.vdjr-videobook__bajo{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap}

/* ── Cierre ────────────────────────────────────────────────── */
.vdjr-cierre{position:relative;background:var(--azul);color:var(--negro);padding:76px var(--margen)}
.vdjr-cierre__cuerpo{position:relative}
.vdjr-cierre .vdjr-etiqueta{color:rgba(10,10,10,.75)}
.vdjr-cierre .vdjr-h2{margin-bottom:30px;max-width:1150px}
.vdjr-cierre__texto{margin:0 0 34px;font-size:18px;line-height:1.65;max-width:640px}

/* ── Movil ─────────────────────────────────────────────────── */
@media (max-width:980px){
  .vdjr{--margen:16px}
  .vdjr-hero{min-height:auto}
  .vdjr-hero__cuerpo{padding:34px var(--margen) 30px;gap:26px}
  .vdjr-hero__alto{gap:14px}
  .vdjr-vertical{writing-mode:horizontal-tb;margin:0 0 10px}
  .vdjr-hero__bajo{flex-direction:column;align-items:stretch;gap:22px}
  .vdjr-botones{flex-direction:column}
  .vdjr-btn{text-align:center;padding:18px 16px}
  .vdjr-celda{border-right:0}
  .vdjr-fila{grid-template-columns:30px 1fr 62px 24px;gap:14px;min-height:88px;padding:18px var(--margen)}
  .vdjr-fila:hover{padding-left:var(--margen)}
  .vdjr-fila__d{display:none}
  .vdjr-fila__img{height:62px}
  .vdjr-fila__f{font-size:22px}
  .vdjr-tres>div{padding:22px 0;border-right:0;border-top:1px solid rgba(10,10,10,.22)}
  .vdjr-tres{border-top:1px solid var(--negro)}
  .vdjr-paso{border-right:0;padding:24px 0 26px}
  .vdjr-paso:not(:first-child){border-top:1px solid var(--linea)}
  .vdjr-paso__n{font-size:38px}
  .vdjr-play--grande{width:96px;height:96px}
  .vdjr-videobook__cuerpo{min-height:320px}
  .vdjr-videobook{min-height:320px}
}

@media (prefers-reduced-motion:reduce){
  .vdjr-rasga,.vdjr-cinta__pista{animation:none}
  .vdjr-rasga{clip-path:none}
}

/* ── Tipografias, al final y con !important ─────────────────
   El CSS heredado del sitio fuerza Heebo sobre h1/h2/h3 y body con
   !important. Estas reglas lo revierten solo dentro de la portada,
   sin tocar el resto de la web. */
.vdjr,.vdjr p,.vdjr a,.vdjr span,.vdjr dd,.vdjr li,.vdjr div{
  font-family:Archivo,system-ui,-apple-system,sans-serif!important;
}
.vdjr h1,.vdjr h2,.vdjr h3,
.vdjr .vdjr-fila__t,.vdjr .vdjr-fecha,.vdjr .vdjr-fecha span,
.vdjr .vdjr-cinta__grupo,.vdjr .vdjr-cinta__grupo span,
.vdjr .vdjr-ficha__lista dt{
  font-family:'Archivo Black',Archivo,sans-serif!important;
}
.vdjr .vdjr-etiqueta,.vdjr .vdjr-vertical,.vdjr .vdjr-btn,
.vdjr .vdjr-fila__n,.vdjr .vdjr-letra,.vdjr .vdjr-fecha__mes,
.vdjr .vdjr-celda__enlace,.vdjr .vdjr-celda__enlace a,
.vdjr .vdjr-noticias__cabeza a{
  font-family:'Space Mono',ui-monospace,monospace!important;
}

/* ── Color de los titulares ────────────────────────────────
   El CSS heredado del sitio pinta todos los h1/h2/h3 de #333,
   que sobre negro da 1,57 de contraste: ilegible. Se corrige
   solo dentro de la portada. */
.vdjr h1,.vdjr h2,.vdjr h3{color:var(--hueso)!important}
.vdjr .vdjr-azul{color:var(--azul)!important}
.vdjr .vdjr-celda__titulo a,.vdjr .vdjr-noticia h3 a{color:var(--hueso)!important}
.vdjr .vdjr-celda__titulo a:hover,.vdjr .vdjr-noticia h3 a:hover{color:var(--claro)!important}
.vdjr-inversa h2,.vdjr-inversa h3{color:var(--negro)!important}
.vdjr-cierre h2{color:var(--negro)!important}
.vdjr-fila:hover .vdjr-fila__t{color:var(--negro)!important}
.vdjr-pasos__intro{margin:22px 0 0;font-size:18px;line-height:1.7;color:var(--grisTexto);max-width:660px}
.vdjr-paso__t{min-height:2.4em}
@media (max-width:980px){.vdjr-paso__t{min-height:0}}

/* El titulo de cada fila heredaba el azul de enlace: toda la fila es un <a>. */
.vdjr a.vdjr-fila{color:var(--hueso)}
.vdjr .vdjr-fila__t{color:var(--hueso)}
.vdjr a.vdjr-fila:hover,.vdjr a.vdjr-fila:hover .vdjr-fila__t{color:var(--negro)}
.vdjr-videobook .vdjr-hero__fondo{filter:grayscale(1) contrast(1.3);opacity:.35;object-position:center 50%}

.vdjr-cifras{padding:60px var(--margen);border-bottom:1px solid var(--linea)}
.vdjr-cifras__rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));border-top:1px solid var(--linea)}
.vdjr-cifras__item{padding:28px 28px 0 0;border-right:1px solid var(--linea)}
.vdjr-cifras__item:last-child{border-right:0;padding-right:0}
.vdjr-cifras__n{font-family:'Archivo Black',sans-serif;font-size:clamp(24px,2.6vw,34px);line-height:1.08;letter-spacing:-1px;color:var(--azul);margin:0 0 10px;text-transform:uppercase}
.vdjr-cifras__d{font-size:14.5px;line-height:1.6;color:var(--hueso);opacity:.8;margin:0}
@media (max-width:780px){
  .vdjr-cifras{padding:44px var(--margen)}
  .vdjr-cifras__item{padding:22px 0;border-right:0;border-top:1px solid var(--linea)}
  .vdjr-cifras__item:first-child{border-top:0}
}