/* ══════════════════════════════════════════════════════════════
   ADNIUS · YOUTUBE MANAGEMENT · HOJA DE ESTILOS · v2 PANTALLAS GRANDES (27/09/2026)
   v2: medidas de px a rem para que la pagina crezca parejo en
   pantallas grandes (ver PANTALLAS-GRANDES.md), y el .wrap mide su
   tope SIN contar el margen de los lados, para que las secciones
   arranquen en la misma linea que el hero y el logo, igual que en
   SEO v14. Se quedan en px las rayas de 1px y 2px, las pildoras de
   999px, los breakpoints, lo que va en @keyframes y el texto de 13px
   dentro del dibujo SVG del reproductor de la anatomia (.mock .lbl).
   Pagina: /youtube-management/   ·   De adnius-youtube-v3.html

   Se encola SOLO en esa pagina, desde adnius_enqueue_landing() en
   functions.php, a prioridad 39. La pagina entra por la linea
   'youtube-management' del mapa adnius_landings(), que es tambien la
   que le pone al body la clase .adn-youtube.

   NO TRAE: las dos fuentes ni GSAP. Las fuentes las carga
   adnius_enqueue_header() y GSAP lo carga divifx_enqueue_motion(),
   los dos en todo el sitio.

   Todo lo que va desde aqui hasta el bloque "CONTRA DIVI" del final
   es el prototipo tal cual, con UNA excepcion marcada donde vive: el
   bloque .meth svg de la seccion 4, los iconos de los diez principios
   que Jhoger pidio al ver la pagina montada. Lo del final es lo otro
   que no existe en el prototipo, y existe porque el prototipo corria
   en una pagina en blanco y esto corre dentro de Divi.
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   ADNIUS · YOUTUBE MANAGEMENT · VERSION 3

   EL LENGUAJE VISUAL, Y POR QUE ES DISTINTO A LAS OTRAS CUATRO.

   Promo web       fotografia
   SEO avanzado    interfaz plana: buscadores, listas, reportes
   Correos         interfaz con profundidad: ventanas apiladas
   Redes           el feed vivo, vertical
   YouTube         EL MARCO APAISADO Y LA LINEA DE TIEMPO

   Redes es vertical porque el producto es vertical. Esta tiene que ser
   lo contrario y verse a un metro de distancia: todo aqui es 16:9, con
   barra de progreso, marcas de capitulo y miniaturas. Puesta al lado de
   la de redes, nadie confunde una con la otra.

   EL ROJO. Se usa en dos sitios y nada mas: el boton de reproducir del
   hero y el tramo ya visto de la barra. Es el elemento de interfaz mas
   reconocible que existe y con una sola aparicion la pagina ya dijo de
   que va. Repetirlo la convierte en una imitacion de YouTube.

   CERO FOTOGRAFIAS. Todo es SVG y HTML dibujado.
   ══════════════════════════════════════════════════════════════════ */

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

:root{
  --black:#000;
  --ink:#0a0a0a;
  --yellow:#ffc600;
  --red:#ff2d2d;
  --white:#fff;

  --display:'Hanken Grotesk',Helvetica,Arial,sans-serif;
  --body:'Inter',Helvetica,Arial,sans-serif;

  --pad:clamp(1.5rem,5vw,5rem);
  --line:rgba(255,255,255,.16);
}

body{background:var(--black);color:var(--white);font-family:var(--body);overflow-x:clip}
::selection{background:var(--yellow);color:var(--black)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img,svg{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--yellow);outline-offset:0.25rem;border-radius:0.1875rem}


/* ══════════════════ ESTRUCTURA ══════════════════ */

.sec{position:relative;padding:clamp(4rem,10vh,7.5rem) 0}
.wrap{max-width:calc(93.75rem + var(--pad) * 2);margin:0 auto;padding:0 var(--pad)}

.duo{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,6vw,6rem);align-items:center;
}
@media (max-width:900px){
  .duo{grid-template-columns:1fr;gap:2.6rem}
  .duo .art{order:-1}
}


/* ══════════════════ TIPOGRAFIA ══════════════════ */

.big{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.9rem,4.6vw,3.6rem);
  line-height:1.03;letter-spacing:-.035em;
}
.big em{font-style:normal;color:var(--yellow)}

.lede{
  font-weight:200;font-size:clamp(1rem,1.6vw,1.3rem);
  line-height:1.55;color:rgba(255,255,255,.75);max-width:46ch;
}
.body{
  font-weight:200;font-size:clamp(.95rem,1.3vw,1.06rem);
  line-height:1.65;color:rgba(255,255,255,.72);max-width:52ch;
}
.body + .body{margin-top:1.1rem}
.body b{color:rgba(255,255,255,.92);font-weight:500}

.big + .body,.big + .lede,.big + .sub{margin-top:clamp(1.2rem,2.4vw,1.9rem)}
.big.reveal-lines + .body,
.big.reveal-lines + .lede,
.big.reveal-lines + .sub{margin-top:clamp(1.4rem,2.8vw,2.2rem)}

.tag{
  display:flex;align-items:center;gap:.7rem;
  font-family:var(--display);font-weight:600;font-size:.82rem;
  letter-spacing:.01em;color:var(--yellow);margin-bottom:1.3rem;
}
.tag::before{content:'';width:1.6rem;height:1px;background:var(--yellow);flex:none}

/* El limite en ch va en el hijo, nunca en el contenedor: en el
   contenedor se mide contra los 16px del cuerpo y el titular se parte
   en cinco lineas con media pantalla vacia al lado. */
.shead{margin-bottom:clamp(2.4rem,5vh,3.6rem)}
.shead .big{max-width:24ch}
.shead .sub,
.shead .lede{
  font-weight:200;font-size:clamp(.95rem,1.35vw,1.1rem);line-height:1.55;
  color:rgba(255,255,255,.68);max-width:56ch;
}


/* ══════════════════ BOTONES ══════════════════ */

.btn{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--display);font-weight:600;font-size:.92rem;
  padding:1rem 2rem;border-radius:999px;
  background:var(--yellow);color:var(--black);
  transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 0.75rem 2.5rem rgba(255,198,0,.3)}
.btn::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.7) 50%,transparent 66%);
  background-size:260% 100%;background-position:150% 0;
  transition:background-position 1.1s cubic-bezier(.16,1,.3,1);
}
.btn:hover::after{background-position:-60% 0}

.ghost{
  position:relative;display:inline-block;
  font-size:.84rem;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.62);padding-bottom:.4rem;transition:color .35s ease;
}
.ghost::before,.ghost::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px}
.ghost::before{background:rgba(255,255,255,.24)}
.ghost::after{
  background:var(--yellow);transform:scaleX(0);transform-origin:left center;
  transition:transform .55s cubic-bezier(.16,1,.3,1);
}
.ghost:hover{color:var(--white)}
.ghost:hover::after{transform:scaleX(1)}

.acts{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}

.ink{
  stroke:var(--yellow);stroke-width:1.8;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.ink .dim{stroke:rgba(255,255,255,.45)}
.ink .fill{fill:var(--yellow);stroke:none}


/* ══════════════════ CINTA SUPERIOR ══════════════════ */

.prog{position:fixed;top:0;left:0;height:2px;width:0;background:var(--yellow);z-index:60}

.hdr{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem var(--pad);border-bottom:1px solid transparent;
  transition:background .5s ease,backdrop-filter .5s ease,border-color .5s ease;
}
.hdr.on{background:rgba(0,0,0,.72);backdrop-filter:blur(0.875rem);border-bottom-color:var(--line)}
.hdr .logo{height:2.125rem;width:auto}
.hdr .btn{padding:.62rem 1.3rem;font-size:.8rem}
@media (max-width:520px){
  .hdr .logo{height:1.625rem}
  .hdr .btn{padding:.55rem 1rem;font-size:.72rem}
}


/* ══════════════════ 1 · HERO: EL REPRODUCTOR ══════════════════
   Un marco 16:9 con la escena cambiando, la barra corriendo y las
   marcas de capitulo encendiendose al pasar el cabezal.

   Es el unico momento orquestado de la pagina, y es el producto
   funcionando: el empaque, los capitulos y la duracion son
   exactamente lo que la pagina vende mas abajo. */

.hero{
  position:relative;min-height:100svh;
  display:grid;align-items:center;
  padding:8rem var(--pad) 4rem;
  overflow:hidden;isolation:isolate;
}

.hero .grid{
  position:absolute;inset:-2px;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.11) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.11) 1px,transparent 1px);
  background-size:4rem 2.25rem;
  -webkit-mask-image:radial-gradient(ellipse 84% 84% at 54% 44%,#000 30%,transparent 88%);
          mask-image:radial-gradient(ellipse 84% 84% at 54% 44%,#000 30%,transparent 88%);
}
.hero .halo{
  position:absolute;left:68%;top:48%;z-index:0;pointer-events:none;
  width:min(61.25rem,112%);aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(255,198,0,.11),rgba(255,45,45,.05) 42%,transparent 68%);
}

.hero .in{
  position:relative;z-index:2;
  display:grid;grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr);
  gap:clamp(2.5rem,6vw,5rem);align-items:center;
  max-width:93.75rem;margin:0 auto;width:100%;
}
@media (max-width:980px){
  .hero{min-height:0;padding:7rem var(--pad) 3.5rem}
  .hero .in{grid-template-columns:1fr;gap:2.8rem}
}

.hero h1{
  font-family:var(--display);font-weight:800;
  font-size:clamp(2.5rem,6.2vw,4.6rem);
  line-height:.98;letter-spacing:-.045em;
}
.hero h1 em{font-style:normal;color:var(--yellow)}
.hero .claim{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.05rem,2vw,1.5rem);line-height:1.3;letter-spacing:-.02em;
  color:rgba(255,255,255,.9);margin:1.3rem 0 1rem;max-width:24ch;
}
.hero .lede{margin-bottom:2.1rem}
.hero .acts{margin-bottom:2.4rem}

.value{display:flex;align-items:center;gap:clamp(1rem,2.4vw,1.9rem);flex-wrap:wrap}
.value .n{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.2rem,2.2vw,1.7rem);letter-spacing:-.03em;color:var(--yellow);
}
.value .n span{
  display:block;font-family:var(--body);font-weight:200;font-size:.68rem;
  letter-spacing:.11em;text-transform:uppercase;
  color:rgba(255,255,255,.45);margin-top:.2rem;
}
.value .sep{width:1px;height:1.875rem;background:var(--line);flex:none}
.under{font-weight:200;font-size:.84rem;color:rgba(255,255,255,.44);margin-top:1.1rem}
.under b{color:rgba(255,255,255,.72);font-weight:400}


/* EL REPRODUCTOR ---------------------------------------------- */

.player{
  border:1px solid var(--line);border-radius:0.875rem;overflow:hidden;
  background:var(--ink);
  box-shadow:0 2.5rem 5.625rem -1.875rem rgba(0,0,0,.9);
}

/* El marco. aspect-ratio 16/9 no es decorativo: es la diferencia
   entera con la landing de redes, que es 4/5. */
.stage{position:relative;aspect-ratio:16/9;overflow:hidden;
  background:radial-gradient(ellipse 80% 70% at 50% 34%,rgba(255,198,0,.07),transparent 66%),rgba(255,255,255,.03)}
.stage svg.sc{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .7s ease}
.stage svg.sc.on{opacity:1}

/* La duracion, abajo a la derecha, como en cualquier miniatura */
.stage .dur{
  position:absolute;right:0.625rem;bottom:0.875rem;z-index:4;
  font-family:var(--body);font-weight:500;font-size:.68rem;letter-spacing:.02em;
  background:rgba(0,0,0,.75);color:#fff;padding:.2rem .42rem;border-radius:0.25rem;
}

.stage .go{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;
  width:3.875rem;height:2.75rem;border-radius:0.75rem;
  background:var(--red);display:grid;place-items:center;
  box-shadow:0 0.625rem 2.125rem rgba(255,45,45,.4);
}
.stage .go svg{width:1.25rem;height:1.25rem;fill:#fff;stroke:none;margin-left:2px;position:static}
.stage .go::after{
  content:'';position:absolute;inset:0;border-radius:0.75rem;
  border:1px solid rgba(255,45,45,.6);
  animation:ytRing 2.8s ease-out infinite;
}
@keyframes ytRing{
  0%      {transform:scale(1);opacity:.8}
  70%,100%{transform:scale(1.5);opacity:0}
}

/* LA BARRA. El tramo ya visto va en rojo y las marcas de capitulo se
   encienden cuando el cabezal las pasa. Es la unica pieza de la pagina
   que copia una interfaz real, y por eso no necesita rotulo. */
.bar{position:relative;height:0.1875rem;background:rgba(255,255,255,.18)}
.bar .seen{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--red)}
.bar .head{
  position:absolute;top:50%;left:0;width:0.6875rem;height:0.6875rem;border-radius:50%;
  background:var(--red);transform:translate(-50%,-50%) scale(0);
  transition:transform .3s ease;
}
.player:hover .bar .head{transform:translate(-50%,-50%) scale(1)}
.bar i{
  position:absolute;top:0;bottom:0;width:2px;
  background:rgba(255,255,255,.55);transform:scaleY(1);
  transition:background .3s ease,transform .3s ease;
}
.bar i.hit{background:var(--yellow);transform:scaleY(2.6)}

.meta{display:flex;align-items:flex-start;gap:.9rem;padding:1rem 1.1rem 1.15rem}
.meta .av{
  width:2.125rem;height:2.125rem;border-radius:50%;flex:none;
  background:linear-gradient(140deg,var(--yellow),#c99a00);
  display:grid;place-items:center;
  font-family:var(--display);font-weight:800;font-size:.86rem;color:#000;
}
.meta .tt{flex:1;min-width:0}
.meta .tt b{
  display:block;font-family:var(--display);font-weight:600;font-size:.95rem;
  letter-spacing:-.02em;color:rgba(255,255,255,.92);line-height:1.3;
  margin-bottom:.28rem;
}
.meta .tt span{font-weight:200;font-size:.74rem;color:rgba(255,255,255,.42)}

/* Los capitulos escritos, debajo del reproductor. El que ya vio la
   barra entiende de una que las marcas y estas lineas son lo mismo. */
.chaps{
  display:flex;gap:1px;background:var(--line);
  border-top:1px solid var(--line);
}
.chaps div{
  flex:1;background:var(--ink);padding:.7rem .8rem;
  transition:background .4s ease;
}
.chaps div.hit{background:rgba(255,198,0,.09)}
.chaps b{
  display:block;font-family:var(--body);font-weight:500;font-size:.64rem;
  letter-spacing:.04em;color:rgba(255,255,255,.4);margin-bottom:.2rem;
  transition:color .4s ease;
}
.chaps div.hit b{color:var(--yellow)}
.chaps span{
  display:block;font-weight:200;font-size:.72rem;line-height:1.3;
  color:rgba(255,255,255,.58);
}
@media (max-width:520px){
  .chaps div:nth-child(n+4){display:none}
  .meta .tt b{font-size:.86rem}
}


/* ══════════════════ 2 · EL CANAL ABANDONADO ══════════════════
   Un año entero de un canal real que se apago. Seis semanas con subidas
   y cuarenta y seis vacias.

   Es la seccion mas facil de la pagina: no hay que explicar nada. El
   que tiene un canal asi se reconoce solo, y ese es exactamente el
   cliente que buscamos. */

.dead{
  border:1px solid var(--line);border-radius:1rem;
  padding:clamp(1.4rem,3vw,2rem);background:var(--ink);
}
.dead .hd{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;margin-bottom:1.3rem;
}
.dead .hd b{
  font-family:var(--display);font-weight:700;font-size:.98rem;
  letter-spacing:-.02em;color:rgba(255,255,255,.9);
}
.dead .hd span{
  font-weight:200;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.36);
}

/* Cada casilla es una semana. 16:9 aplastado para que el año quepa y
   siga leyendose como video y no como calendario. */
.dead .yr{display:grid;grid-template-columns:repeat(26,1fr);gap:0.25rem}
@media (max-width:640px){ .dead .yr{grid-template-columns:repeat(13,1fr);gap:0.1875rem} }
.dead .yr i{
  aspect-ratio:16/9;border-radius:2px;
  background:rgba(255,255,255,.055);
  opacity:0;transform:scale(.4);
  transition:opacity .4s ease,transform .5s cubic-bezier(.16,1,.3,1);
}
.dead.filled .yr i{opacity:1;transform:none}
.dead .yr i.up{background:var(--yellow)}

.dead .lg{
  display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;
  margin-top:1.2rem;padding-top:1.1rem;border-top:1px solid var(--line);
}
.dead .lg span{
  display:flex;align-items:center;gap:.5rem;
  font-weight:200;font-size:.78rem;color:rgba(255,255,255,.5);
}
.dead .lg em{width:0.6875rem;height:0.4375rem;border-radius:1px;flex:none;font-style:normal}
.dead .lg em.a{background:var(--yellow)}
.dead .lg em.b{background:rgba(255,255,255,.1)}

.why{list-style:none;display:flex;flex-direction:column;gap:1.05rem;margin-top:.4rem}
.why li{
  position:relative;padding-left:1.6rem;
  font-weight:200;font-size:clamp(.95rem,1.3vw,1.05rem);line-height:1.55;
  color:rgba(255,255,255,.76);
}
.why li::before{
  content:'';position:absolute;left:0;top:.62em;
  width:0.5625rem;height:1px;background:var(--yellow);
}


/* ══════════════════ 3 · LA ANATOMIA DE UN VIDEO ══════════════════
   Un reproductor con siete puntos numerados y la lista al lado. El
   punto y su renglon se encienden juntos, uno tras otro.

   Es la seccion que sustituye a la rejilla de tarjetitas con icono que
   tendria cualquier agencia. Aqui el entregable se enseña montado
   sobre el sitio donde el cliente lo va a ver. */

.anat{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2rem,4.5vw,4rem);align-items:center;
}
@media (max-width:900px){ .anat{grid-template-columns:1fr;gap:2.4rem} }

.mock{
  position:relative;border:1px solid var(--line);border-radius:0.875rem;
  background:var(--ink);padding:clamp(.9rem,1.8vw,1.3rem);
}
.mock .frame{
  position:relative;aspect-ratio:16/9;border-radius:0.5625rem;overflow:hidden;
  background:radial-gradient(ellipse 78% 70% at 50% 36%,rgba(255,198,0,.07),transparent 64%),rgba(255,255,255,.04);
}
.mock .frame svg{position:absolute;inset:0;width:100%;height:100%}

/* Las chinchetas. Van en porcentaje sobre el marco, asi que se quedan
   pegadas a su sitio en cualquier ancho. */
.pin{
  position:absolute;z-index:5;width:1.5rem;height:1.5rem;border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--display);font-weight:800;font-size:.68rem;
  color:rgba(255,255,255,.55);
  background:rgba(0,0,0,.72);border:1px solid rgba(255,255,255,.28);
  transform:translate(-50%,-50%);
  transition:background .4s ease,border-color .4s ease,color .4s ease,box-shadow .5s ease;
}
.pin.on{
  background:var(--yellow);border-color:var(--yellow);color:#000;
  box-shadow:0 0 0 0.4375rem rgba(255,198,0,.16);
}

.mock .tl{position:relative;height:0.1875rem;margin:.9rem .2rem .55rem;background:rgba(255,255,255,.16);border-radius:2px}
.mock .tl i{position:absolute;top:-2px;bottom:-2px;width:2px;background:rgba(255,255,255,.5);border-radius:2px}
.mock .ttl{position:relative;height:0.5rem;border-radius:0.1875rem;background:rgba(255,255,255,.22);margin:0 .2rem .5rem;width:72%}

/* La duracion del video va escrita, no dibujada. Un rectangulo con tres
   rayitas adentro no dice catorce minutos; "14:26" si. */
.mock .lbl{
  fill:var(--yellow);stroke:none;
  font-family:var(--body);font-weight:500;font-size:13px;letter-spacing:.02em;
}
.mock .ttl.s{width:42%;background:rgba(255,255,255,.12)}

.parts{list-style:none;display:flex;flex-direction:column;gap:.15rem}
.parts li{
  display:flex;align-items:flex-start;gap:.9rem;
  padding:.72rem .8rem;border-radius:0.5625rem;
  border-left:2px solid transparent;
  transition:background .45s ease,border-color .45s ease;
}
.parts li.on{background:rgba(255,198,0,.06);border-left-color:var(--yellow)}
.parts li b{
  font-family:var(--display);font-weight:800;font-size:.7rem;
  color:rgba(255,255,255,.32);flex:none;width:1.1rem;margin-top:.16rem;
  transition:color .45s ease;
}
.parts li.on b{color:var(--yellow)}
.parts li span{
  font-weight:200;font-size:clamp(.9rem,1.25vw,1rem);line-height:1.5;
  color:rgba(255,255,255,.74);
}
.parts li.on span{color:rgba(255,255,255,.94)}


/* ══════════════════ 4 · EL METODO ══════════════════
   Diez principios sin numerar. No es una secuencia y numerarla seria
   mentir sobre el contenido.

   Va deliberadamente sobria: viene despues de dos secciones ruidosas y
   es la que tiene que leerse como oficio.

   DIVERGENCIA DECIDIDA (16/09/2026): el prototipo iba sin iconos y
   Jhoger los pidio al ver la pagina montada. Cada principio lleva uno
   encima del titulo, dibujado en el mismo trazo .ink del resto de la
   pagina. Los trazos van en el HTML del modulo Code; aqui solo el
   tamano, el aire y el grosor de linea. */

.meth{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:1rem;overflow:hidden}
@media (max-width:820px){ .meth{grid-template-columns:1fr} }
.meth div{
  background:var(--black);padding:clamp(1.4rem,2.6vw,1.9rem);
  transition:background .5s ease;
}
.meth div:hover{background:rgba(255,198,0,.035)}
.meth b{
  display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(1rem,1.55vw,1.12rem);letter-spacing:-.02em;
  color:var(--yellow);margin-bottom:.55rem;
}
.meth p{font-weight:200;font-size:clamp(.9rem,1.2vw,.99rem);line-height:1.6;color:rgba(255,255,255,.72)}

/* El icono de cada principio. El width y height del svg en el HTML son
   solo red de seguridad por si la hoja tarda: manda esto. El grosor es
   menor que el 1.8 de .ink porque a 24 unidades sobre 38px el trazo se
   escala x1.6 y con 1.8 quedaba pesado al lado del titulo. */
.meth svg{display:block;width:2.375rem;height:2.375rem;margin:0 0 1.05rem;stroke-width:1.5}
@media (max-width:820px){ .meth svg{width:2.125rem;height:2.125rem;margin-bottom:.9rem} }


/* ══════════════════ 5 · LA PUERTA DE LA MONETIZACION ══════════════════
   Los umbrales tal cual los publica YouTube, sin medidor de progreso.
   Un medidor implicaria que sabemos cuanto falta, y no lo sabemos. */

.gate{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,2vw,1.6rem)}
@media (max-width:820px){ .gate{grid-template-columns:1fr} }

.door{
  border:1px solid var(--line);border-radius:1rem;
  padding:clamp(1.5rem,3vw,2.1rem);background:var(--ink);
}
.door .lb{
  font-family:var(--display);font-weight:600;font-size:.68rem;
  letter-spacing:.15em;text-transform:uppercase;
  color:rgba(255,255,255,.4);margin-bottom:1.1rem;
}
.door .sub{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.8rem,3.4vw,2.5rem);line-height:1;letter-spacing:-.04em;
  color:var(--yellow);margin-bottom:.2rem;
}
.door .sub small{
  display:block;font-family:var(--body);font-size:.76rem;font-weight:300;
  letter-spacing:normal;color:rgba(255,255,255,.5);margin-top:.35rem;
}
.door .plus{
  margin-top:1.2rem;padding-top:1.1rem;border-top:1px solid var(--line);
  font-weight:200;font-size:.88rem;line-height:1.55;color:rgba(255,255,255,.66);
}
.door .or{
  display:flex;align-items:center;gap:.8rem;margin:.9rem 0;
  font-family:var(--display);font-weight:600;font-size:.66rem;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.3);
}
.door .or::before,.door .or::after{content:'';flex:1;height:1px;background:var(--line)}
.door .pth{font-weight:200;font-size:.92rem;line-height:1.5;color:rgba(255,255,255,.78)}
.door .pth b{color:var(--white);font-weight:500}

.stance{
  margin-top:clamp(1.4rem,3vh,2.2rem);
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:1rem;overflow:hidden;
}
@media (max-width:820px){ .stance{grid-template-columns:1fr} }
.stance div{background:var(--black);padding:clamp(1.4rem,2.6vw,1.8rem)}
.stance b{
  display:block;font-family:var(--display);font-weight:700;font-size:1.02rem;
  letter-spacing:-.02em;margin-bottom:.5rem;
}
.stance div:nth-child(1) b{color:var(--yellow)}
.stance div:nth-child(2) b{color:rgba(255,255,255,.86)}
.stance div:nth-child(3) b{color:var(--red)}
.stance p{font-weight:200;font-size:.94rem;line-height:1.6;color:rgba(255,255,255,.72)}

.cite{
  margin-top:1.2rem;font-weight:200;font-size:.75rem;
  color:rgba(255,255,255,.34);
}
.cite a{color:rgba(255,255,255,.5);border-bottom:1px solid rgba(255,255,255,.2)}
.cite a:hover{color:var(--yellow);border-bottom-color:var(--yellow)}


/* ══════════════════ 6 · LOS CUATRO PLANES ══════════════════
   Cada plan lleva su rejilla de marcos 16:9. La diferencia de volumen
   se VE antes de leer el numero, que es justo lo unico que los separa. */

.tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.9rem,1.6vw,1.3rem)}
@media (max-width:1100px){ .tiers{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .tiers{grid-template-columns:1fr} }

.tier{
  display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:1.125rem;
  padding:clamp(1.3rem,2.2vw,1.7rem);
  transition:border-color .5s ease,background .5s ease,transform .5s cubic-bezier(.16,1,.3,1);
}
.tier:hover{border-color:rgba(255,198,0,.34);transform:translateY(-0.25rem)}
/* El marcado es el de ENTRADA. Marcar el del medio es el truco de
   siempre para empujar hacia arriba; el destacado aqui es el que de
   verdad recomendamos para empezar. */
.tier.pick{border-color:rgba(255,198,0,.44);background:rgba(255,198,0,.04)}
.tier .badge{
  align-self:flex-start;margin-bottom:.9rem;
  font-family:var(--display);font-weight:700;font-size:.6rem;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--black);background:var(--yellow);
  padding:.3rem .7rem;border-radius:999px;
}
.tier h3{font-family:var(--display);font-weight:800;font-size:1.32rem;letter-spacing:-.03em;margin-bottom:.3rem}
.tier .sub{font-weight:200;font-size:.82rem;line-height:1.45;color:rgba(255,255,255,.55);margin-bottom:1.1rem;min-height:3.9em}

.tier .amt{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.8rem,3vw,2.4rem);line-height:1;letter-spacing:-.04em;
  color:var(--yellow);margin-bottom:.35rem;
}
/* El letter-spacing negativo del numero grande lo hereda el <small>
   como valor absoluto, y a 12px las letras se montan unas sobre otras.
   Se reinicia a mano. */
.tier .amt small{
  font-family:var(--body);font-size:.76rem;font-weight:300;
  letter-spacing:normal;color:rgba(255,255,255,.5);margin-left:.35rem;
}
.tier .rate{font-size:.72rem;font-weight:200;color:rgba(255,255,255,.4);margin-bottom:1.2rem}

.tier .mesh{display:grid;grid-template-columns:repeat(4,1fr);gap:0.25rem;margin-bottom:1.3rem}
.tier .mesh i{
  aspect-ratio:16/9;border-radius:2px;background:rgba(255,255,255,.07);
  opacity:0;transform:scale(.4);
  transition:opacity .4s ease,transform .5s cubic-bezier(.16,1,.3,1);
}
.tier.filled .mesh i{opacity:1;transform:none}
.tier .mesh i.v{background:var(--yellow)}

.tier ul{list-style:none;display:flex;flex-direction:column;gap:.6rem;flex:1}
.tier li{
  display:flex;align-items:flex-start;gap:.6rem;
  font-weight:200;font-size:.86rem;line-height:1.45;color:rgba(255,255,255,.75);
}
.tier li svg{width:0.8125rem;height:0.8125rem;flex:none;margin-top:.24rem;stroke:var(--yellow);stroke-width:2.2;fill:none}
.tier .go{margin-top:1.5rem}
.tier .go .btn{width:100%;justify-content:center;padding:.85rem 1rem;font-size:.86rem}

.allin{
  margin-top:clamp(1.6rem,3vh,2.4rem);
  border:1px solid var(--line);border-radius:1rem;
  padding:clamp(1.5rem,3vw,2.1rem);
  background:linear-gradient(130deg,rgba(255,198,0,.045),transparent 62%);
}
.allin b{
  display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(1.02rem,1.7vw,1.2rem);color:var(--yellow);margin-bottom:1rem;
}
.allin ul{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem 1.6rem}
@media (max-width:720px){ .allin ul{grid-template-columns:1fr} }
.allin li{
  display:flex;align-items:flex-start;gap:.6rem;
  font-weight:200;font-size:.92rem;line-height:1.45;color:rgba(255,255,255,.75);
}
.allin li svg{width:0.875rem;height:0.875rem;flex:none;margin-top:.22rem;stroke:var(--yellow);stroke-width:2.2;fill:none}
.allin .out{
  margin-top:1.3rem;padding-top:1.1rem;border-top:1px solid var(--line);
  font-weight:200;font-size:.88rem;line-height:1.6;color:rgba(255,255,255,.55);
}
.allin .out b{display:inline;font-size:inherit;color:rgba(255,255,255,.8);font-weight:500;margin:0}


/* ══════════════════ 7 · LAS CUATRO RUTAS ══════════════════ */

.routes{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.9rem,1.6vw,1.3rem)}
@media (max-width:1000px){ .routes{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .routes{grid-template-columns:1fr} }

.route{
  border:1px solid var(--line);border-radius:1rem;overflow:hidden;background:var(--ink);
  transition:transform .6s cubic-bezier(.16,1,.3,1),border-color .6s ease;
}
.route:hover{transform:translateY(-0.3125rem);border-color:rgba(255,198,0,.36)}
.route .demo{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  border-bottom:1px solid var(--line);
  background:radial-gradient(ellipse 88% 74% at 50% 32%,rgba(255,198,0,.06),transparent 66%),rgba(255,255,255,.03);
}
.route .demo svg{position:absolute;inset:0;width:100%;height:100%}
.route .txt{padding:clamp(1.1rem,2.2vw,1.5rem)}
.route .txt h3{
  font-family:var(--display);font-weight:700;font-size:1.02rem;
  letter-spacing:-.02em;margin-bottom:.5rem;
}
.route .txt p{font-weight:200;font-size:.88rem;line-height:1.58;color:rgba(255,255,255,.7)}

.oneapp{
  margin-top:clamp(1.4rem,3vh,2rem);
  border:1px solid var(--line);border-radius:1rem;
  padding:clamp(1.3rem,2.6vw,1.8rem);
  display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;
  background:linear-gradient(130deg,rgba(255,198,0,.04),transparent 60%);
}
.oneapp svg{width:1.375rem;height:1.375rem;flex:none;stroke:var(--yellow);stroke-width:1.8;fill:none}
.oneapp p{font-weight:200;font-size:clamp(.94rem,1.3vw,1.04rem);line-height:1.55;color:rgba(255,255,255,.78);flex:1;min-width:15rem}
.oneapp p b{color:var(--white);font-weight:500}


/* ══════════════════ 8 · PREGUNTAS ══════════════════ */

.qs{border-top:1px solid var(--line)}
.qrow{border-bottom:1px solid var(--line)}
.qbtn{width:100%;display:flex;align-items:center;gap:1.2rem;padding:clamp(1.1rem,2.4vh,1.5rem) 0;text-align:left}
.qbtn .qt{
  flex:1;font-family:var(--display);font-weight:600;
  font-size:clamp(.98rem,1.7vw,1.16rem);letter-spacing:-.02em;
  color:rgba(255,255,255,.85);transition:color .4s ease;
}
.qrow:hover .qt{color:var(--white)}
.qrow.open .qt{color:var(--yellow)}
.qbtn .pl{position:relative;width:0.875rem;height:0.875rem;flex:none;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.qbtn .pl::before,.qbtn .pl::after{
  content:'';position:absolute;left:0;top:0.4062rem;width:0.875rem;height:1px;
  background:rgba(255,255,255,.5);transition:background .4s ease;
}
.qbtn .pl::after{transform:rotate(90deg)}
.qrow.open .pl{transform:rotate(135deg)}
.qrow.open .pl::before,.qrow.open .pl::after{background:var(--yellow)}
.qbody{overflow:hidden;height:0}
.qbody p{
  padding:0 0 1.5rem;max-width:64ch;
  font-weight:200;font-size:clamp(.92rem,1.25vw,1.02rem);line-height:1.68;
  color:rgba(255,255,255,.72);
}


/* ══════════════════ 9 · FORMULARIO ══════════════════ */

.form{
  border:1px solid var(--line);border-radius:1.25rem;
  padding:clamp(1.8rem,4vw,3rem);
  background:linear-gradient(150deg,rgba(255,198,0,.04),transparent 55%);
}
.fgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem 1.4rem}
@media (max-width:720px){ .fgrid{grid-template-columns:1fr} }
.fld{display:flex;flex-direction:column}
.fld.wide{grid-column:1/-1}
.fld label{
  font-family:var(--display);font-weight:600;font-size:.7rem;
  letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.46);margin-bottom:.55rem;
}
.fld label .req{color:var(--yellow);margin-left:.25em}
.fld label .opt{color:rgba(255,255,255,.26);letter-spacing:.08em;margin-left:.5em}
.fld input,.fld textarea,.fld select{
  width:100%;font-family:var(--body);font-weight:300;font-size:.94rem;
  color:var(--white);background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.14);border-radius:0.375rem;padding:.95rem 1.05rem;
  transition:border-color .35s ease,background .35s ease;
}
.fld textarea{min-height:6.875rem;resize:vertical;line-height:1.6}
.fld input::placeholder,.fld textarea::placeholder{color:rgba(255,255,255,.3)}
.fld input:focus,.fld textarea:focus,.fld select:focus{
  outline:none;border-color:var(--yellow);background:rgba(255,255,255,.06);
}
.fld select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:2.6rem;
  background-image:linear-gradient(45deg,transparent 50%,rgba(255,255,255,.5) 50%),
                   linear-gradient(135deg,rgba(255,255,255,.5) 50%,transparent 50%);
  background-position:calc(100% - 1.1875rem) 50%,calc(100% - 0.8125rem) 50%;
  background-size:0.375rem 0.375rem,0.375rem 0.375rem;background-repeat:no-repeat;
}
.fld select option{background:#101010;color:#fff}

.consent{grid-column:1/-1;display:flex;align-items:flex-start;gap:.75rem;cursor:pointer;margin-top:.3rem}
.consent input{position:absolute;opacity:0;width:0;height:0}
.consent i{
  width:1.125rem;height:1.125rem;flex:none;margin-top:.1rem;
  border:1px solid rgba(255,255,255,.32);border-radius:0.25rem;
  transition:background .3s ease,border-color .3s ease;
}
.consent input:checked + i{background:var(--yellow);border-color:var(--yellow)}
.consent input:checked + i::after{
  content:'';display:block;width:0.3125rem;height:0.5625rem;margin:1px auto 0;
  border:solid var(--black);border-width:0 2px 2px 0;transform:rotate(42deg);
}
.consent input:focus-visible + i{outline:2px solid var(--yellow);outline-offset:0.1875rem}
.consent span{font-weight:300;font-size:.82rem;line-height:1.5;color:rgba(255,255,255,.55)}

.send{grid-column:1/-1;margin-top:.7rem;display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
.send .fine{font-weight:200;font-size:.78rem;color:rgba(255,255,255,.38);max-width:34ch}

.done{display:none;text-align:center;padding:clamp(2.5rem,6vh,4rem) 1rem}
.form.sent .fgrid{display:none}
.form.sent .done{display:block}
.done svg{width:3rem;height:3rem;margin:0 auto 1.4rem;stroke:var(--yellow);stroke-width:1.6;fill:none}
.done h3{font-family:var(--display);font-weight:700;font-size:1.5rem;letter-spacing:-.03em;margin-bottom:.8rem}
.done p{font-weight:200;font-size:.95rem;line-height:1.6;color:rgba(255,255,255,.68);max-width:46ch;margin:0 auto}


/* ══════════════════ TARJETAS DE TEXTO CLARO ══════════════════ */

.plain{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);
  border-radius:1rem;overflow:hidden;
}
@media (max-width:760px){ .plain{grid-template-columns:1fr} }
.plain div{background:var(--black);padding:clamp(1.5rem,3vw,2rem)}
.plain b{
  display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(1.02rem,1.6vw,1.15rem);letter-spacing:-.02em;
  color:var(--yellow);margin-bottom:.6rem;
}
.plain p{font-weight:300;font-size:clamp(.92rem,1.25vw,1rem);line-height:1.62;color:rgba(255,255,255,.8)}


/* ══════════════════ PIE Y BARRA PEGADA ══════════════════ */

.foot{
  border-top:1px solid var(--line);padding:clamp(2.5rem,5vh,3.5rem) var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
}
.foot img{height:1.875rem;width:auto;opacity:.75}
.foot .lk{display:flex;gap:1.6rem;flex-wrap:wrap}
.foot a{font-size:.82rem;color:rgba(255,255,255,.48);transition:color .35s ease}
.foot a:hover{color:var(--yellow)}
.foot .cr{font-size:.74rem;color:rgba(255,255,255,.3);width:100%}

.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:45;
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.85rem var(--pad);
  background:rgba(0,0,0,.86);backdrop-filter:blur(0.875rem);
  border-top:1px solid var(--line);
  transform:translateY(110%);transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.sticky.on{transform:none}
.sticky p{font-family:var(--display);font-weight:700;font-size:1rem;color:var(--yellow)}
.sticky p span{
  display:block;font-family:var(--body);font-weight:200;font-size:.66rem;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.44);margin-top:.15rem;
}
.sticky .btn{padding:.7rem 1.5rem;font-size:.84rem}
@media (max-width:420px){
  .sticky p{font-size:.9rem}
  .sticky .btn{padding:.6rem 1.1rem;font-size:.76rem}
}


/* ══════════════════ REVELADO ══════════════════
   OJO: con opacity:0 declarado aqui, un gsap.from() lee ESE cero como
   estado final y anima de cero a cero. El bloque no vuelve a aparecer
   nunca. Por eso la entrada usa fromTo con el destino escrito a mano. */
.fx{opacity:0}
.ln{display:block;will-change:transform;backface-visibility:hidden}
.lw{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.reveal-lines .ln{opacity:0}

@media (prefers-reduced-motion:reduce){
  .fx{opacity:1}
  .reveal-lines .ln{opacity:1;transform:none}
  *{transition-duration:.001ms !important;animation-duration:.001ms !important}
  .stage .go::after{display:none}
  .stage svg.sc{opacity:1}
}


/* ══════════════════════════════════════════════════════════════════
   ══════════════════════════════════════════════════════════════════

   DE AQUI EN ADELANTE, NADA DE ESTO ESTA EN EL PROTOTIPO

   Son las correcciones que hacen falta por estar dentro de Divi y no
   en una pagina en blanco. Cada una dice contra que pelea. Copiadas
   de css/social.css, que trae la version generica del bloque, con
   .adn-social cambiado por .adn-youtube.

   ══════════════════════════════════════════════════════════════════
   ══════════════════════════════════════════════════════════════════ */


/* ══════════════════ EL LIENZO DE DIVI ══════════════════
   La pagina entera vive dentro de UN modulo Code, dentro de una
   columna, dentro de una fila, dentro de una seccion. Cada una de esas
   cuatro capas trae de fabrica su propio relleno, su propio ancho
   maximo y, en Divi 5, su propio gap.

   Sumadas, meten la landing en una caja de 1080px centrada y con aire
   arriba y abajo: el hero deja de ser a sangre, el fondo negro se
   corta por los lados y las secciones quedan separadas por huecos que
   nadie declaro.

   SE ANULA AQUI Y NO EN EL PANEL DE DIVI A PROPOSITO. Si mañana se
   duplica la pagina, se rehace, o alguien toca un ajuste sin querer,
   esto sigue en pie. El panel se olvida, el archivo no.

   Es la contra del punto 0 del documento de contexto: Divi 5 le pone
   gap a todo lo que hace flex. */

.adn-youtube .et_pb_section,
.adn-youtube .et_pb_row,
.adn-youtube .et_pb_column,
.adn-youtube .et_pb_module,
.adn-youtube .et_pb_code_inner{
  padding:0;
  margin:0;
  gap:0;
  width:100%;
  max-width:none;
}


/* ══════════════════ LOS TITULARES CONTRA DIVI ══════════════════
   Divi le pone color:#333 a todos los titulares. En el prototipo eso
   no existia porque corria en una pagina en blanco donde nadie mas los
   tocaba, asi que la hoja los dejaba heredar el blanco del body.

   Montada dentro de Divi ese #333 gana y los titulares salen gris
   oscuro sobre negro. El <em> amarillo se ve intacto porque si declara
   color propio, y todo lo demas del titular queda apagado.

   POR QUE :where() Y NO UNA LISTA NORMAL.
   :where() vale CERO en especificidad, asi que la regla entera pesa lo
   que pesa .adn-youtube sola: 0,0,1,0.

     - Le gana a Divi, que es 0,0,0,1
     - Pierde contra las reglas propias de esta hoja, que son 0,0,1,1
       (.tier h3, .route .txt h3, .done h3 y las demas que si declaran
       color)

   Escrita como lista normal, esta regla iria de ultima en el archivo y
   les pisaria el color a todas esas. Con :where() conviven sin que
   importe el orden.

   Dos selectores por seguridad: .adn-youtube lo pone el body_class de
   functions.php, y .et_pb_code_inner es el contenedor que Divi genera
   alrededor del modulo. Si algun dia se cae uno, el otro sostiene. */

.adn-youtube       :where(h1,h2,h3,h4,h5,h6),
.et_pb_code_inner :where(h1,h2,h3,h4,h5,h6){
  color:var(--white);
}


/* ══════════════════ LOS CAMPOS CONTRA DIVI ══════════════════
   Mismo caso que los titulares: Divi le pone su color a los input, a
   los textarea y a los select, y le gana al color:var(--white) que ya
   declara este archivo mas arriba. Resultado: lo que la persona
   escribe sale gris oscuro sobre negro y casi no se lee.

   Aqui NO se usa :where() a proposito, al reves que en los titulares.
   Alli hacia falta perder contra las reglas propias del archivo; aqui
   hace falta GANARLE a Divi y no hay ninguna regla propia posterior
   con la que convivir.

   El autocompletado del navegador va aparte: Chrome pinta el campo con
   su propio amarillo del sistema y no se puede cambiar con background.
   La sombra interior gigante es el truco de siempre para taparlo. */

.adn-youtube .fld input,
.adn-youtube .fld textarea,
.adn-youtube .fld select,
.et_pb_code_inner .fld input,
.et_pb_code_inner .fld textarea,
.et_pb_code_inner .fld select{
  color:var(--white);
  -webkit-text-fill-color:var(--white);
}

.adn-youtube .fld input::placeholder,
.adn-youtube .fld textarea::placeholder,
.et_pb_code_inner .fld input::placeholder,
.et_pb_code_inner .fld textarea::placeholder{
  color:rgba(255,255,255,.3);
  -webkit-text-fill-color:rgba(255,255,255,.3);
}

.adn-youtube .fld input:-webkit-autofill,
.et_pb_code_inner .fld input:-webkit-autofill{
  -webkit-text-fill-color:var(--white);
  -webkit-box-shadow:0 0 0 1000px #0d0d0d inset;
  caret-color:var(--white);
}


/* ══════════════════ LA CASILLA DE CONSENTIMIENTO ══════════════════
   Divi le pone class="input" a las casillas de verificacion y las
   pinta. Aqui la casilla real esta escondida y lo que se ve es el <i>
   de al lado, asi que hay que asegurarse de que la de verdad siga
   invisible aunque Divi le declare tamaño o fondo. */

.adn-youtube .consent input,
.et_pb_code_inner .consent input{
  position:absolute;
  opacity:0;
  width:0;
  height:0;
  margin:0;
  padding:0;
  border:0;
}


/* ══════════════════ EL LOGO LLEVA AL INICIO ══════════════════
   DIVERGENCIA DECIDIDA DEL PROTOTIPO. NO REVERTIR.

   En el prototipo, lineas 860 y 1478, el logo es un <img> suelto, sin
   enlace. Se le da clic y no pasa nada, ni arriba ni en el pie.

   En el marcado de esta pagina los dos logos van envueltos en un <a>
   con clase .home. Estas reglas son para que el enlace no cambie nada
   de como se ve.

   line-height:0 quita el espacio de linea base que un <a> mete debajo
   de la imagen. Sin eso el header crece unos pixeles y la barra deja
   de coincidir con la del resto del sitio. */

.adn-youtube .hdr .home,
.adn-youtube .foot .home,
.et_pb_code_inner .hdr .home,
.et_pb_code_inner .foot .home{
  display:block;
  line-height:0;
  flex:none;
  border:0;
}

/* El pie pinta todos sus enlaces de gris y los amarillea al pasar el
   mouse. Al logo no le toca eso: es una imagen, no un texto. Lo que
   recibe es una subida leve de opacidad, que es la señal de que se
   puede pulsar. */
.adn-youtube .foot .home img,
.et_pb_code_inner .foot .home img{
  transition:opacity .35s ease;
}
.adn-youtube .foot .home:hover img,
.et_pb_code_inner .foot .home:hover img{
  opacity:1;
}

.adn-youtube .hdr .home img,
.et_pb_code_inner .hdr .home img{
  transition:opacity .35s ease;
}
.adn-youtube .hdr .home:hover img,
.et_pb_code_inner .hdr .home:hover img{
  opacity:.82;
}