/* ══════════════════════════════════════════════════════════════
   ADNIUS · LA BARRA Y EL PIE UNICOS DE LAS LANDINGS · v2 PANTALLAS GRANDES (27/09/2026)
   v2: los logos (34, 30 y 26px) y demas medidas pasan a rem para que
   la barra y el pie crezcan parejo en pantallas grandes (ver
   PANTALLAS-GRANDES.md). Hasta 1600px se ve exactamente igual.

   Se encola en las seis landings y en la pagina de gracias, desde
   adnius_enqueue_nav() en functions.php, despues de header.css y
   despues del CSS de la landing.

   Desde el 17/09/2026 la barra (.prog + .hdr) y el pie (.foot) ya no
   viven copiados en el modulo Code de cada landing: viven UNA sola vez
   en el Custom Header y el Custom Footer de la plantilla unica del
   Theme Builder ("Specific Pages: Website Promo, And N More"). Los
   siete modulos Code se quedaron solo con el cuerpo y su barra pegada.

   ESTE ARCHIVO ES EL UNICO DUEÑO DE LA FORMA DE LA BARRA Y DEL PIE.
   Al principio se penso dejar la forma en el CSS de cada landing, pero
   promo.css se monto de un prototipo anterior con otro molde (.mark y
   .top en la barra, .row y .set en el pie, la cinta con un <i>) y en
   /website-promo/ la barra y el pie salieron crudos. La forma de abajo
   es el molde de las otras cinco (brand, emails, redes, SEO, YouTube),
   copiada tal cual, y va colgada de .et-l--header y .et-l--footer, los
   envoltorios que Divi le pone a los dos layouts de la plantilla: asi
   gana a cualquier regla vieja de una landing y no toca nada del
   cuerpo (SEO usa .foot tambien dentro de sus tarjetas .plan).
   Las reglas de barra y pie que quedan en las seis hojas de landing
   ya no pintan nada y se pueden borrar en una pasada de limpieza.

   Lo que trae, por secciones:
     1. El lienzo: las dos secciones de Divi negras y sin relleno.
     2. La cinta de progreso y la barra.
     3. El boton de la barra: "Talk to us" en todas, "Lock in $499" en
        promo. Los dos textos van en el marcado y aqui se enseña uno u
        otro segun la clase del body.
     4. El pie.
     5. La pagina de gracias no lleva barra ni pie: se esconden ahi.
     6. Cada pagina esconde en el pie el enlace a ella misma.

   Las variables de color y tipografia las declara header.css en :root
   para todo el sitio. --pad y --line las declara cada landing y promo
   no trae --line: por eso llevan valor de respaldo.
   ══════════════════════════════════════════════════════════════ */


/* ══════════════════ 1 · EL LIENZO ══════════════════
   Una seccion de Divi nace blanca, con relleno arriba y abajo, y su
   fila mide el 80% con tope de 1080px. Las landings nuevas anulan eso
   con su reset por clase del body, pero promo y SEO lo resolvieron en
   el panel de Divi y ese panel no alcanza a la plantilla: en promo el
   pie salio metido en una caja de 1080px. Se anula aqui para los dos
   layouts de la plantilla, en las siete paginas. El fondo negro va
   tambien en el panel de Divi, Background Color 000000, para poder
   editar en el builder. */

.et-l--header .et_pb_section,
.et-l--footer .et_pb_section{background-color:#000}

.et-l--header .et_pb_section,
.et-l--header .et_pb_row,
.et-l--header .et_pb_column,
.et-l--header .et_pb_module,
.et-l--header .et_pb_code_inner,
.et-l--footer .et_pb_section,
.et-l--footer .et_pb_row,
.et-l--footer .et_pb_column,
.et-l--footer .et_pb_module,
.et-l--footer .et_pb_code_inner{
  padding:0;
  margin:0;
  gap:0;
  width:100%;
  max-width:none;
}


/* ══════════════════ 2 · LA CINTA Y LA BARRA ══════════════════
   El JS de cada landing es quien mueve esto, por los ids prog y hdr:
   le escribe el ancho a #prog al bajar y le pone a #hdr la clase on
   (o solid, en promo) pasado el primer tramo. Por eso las dos clases
   pintan igual. */

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

.et-l--header .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,clamp(1.5rem,5vw,5rem));
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .5s ease,backdrop-filter .5s ease,border-color .5s ease;
}
.et-l--header .hdr.on,
.et-l--header .hdr.solid{
  background:rgba(0,0,0,.72);
  -webkit-backdrop-filter:blur(0.875rem);backdrop-filter:blur(0.875rem);
  border-bottom-color:var(--line,rgba(255,255,255,.1));
}

/* El logo enlaza al inicio. line-height:0 quita el espacio de linea
   base que un <a> mete debajo de la imagen; sin eso la barra crece
   unos pixeles. */
.et-l--header .hdr .home{display:block;line-height:0;flex:none;border:0;text-decoration:none}
.et-l--header .hdr .logo{
  display:block;height:2.125rem;width:auto;max-width:none;
  transition:opacity .35s ease;
}
.et-l--header .hdr .home:hover .logo{opacity:.82}

@media (max-width:520px){
  .et-l--header .hdr .logo{height:1.625rem}
}


/* ══════════════════ 3 · EL BOTON ══════════════════
   La pildora amarilla del sitio, completa y no solo el ajuste de
   tamaño, porque promo.css no trae la clase .btn. */

.et-l--header .hdr .btn{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--display);font-weight:600;font-size:.8rem;
  text-decoration:none;white-space:nowrap;
  padding:.62rem 1.3rem;border:0;border-radius:999px;
  background:var(--yellow);color:var(--black);
  transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease;
}
.et-l--header .hdr .btn:hover{transform:translateY(-2px);box-shadow:0 0.75rem 2.5rem rgba(255,198,0,.3)}

@media (max-width:520px){
  .et-l--header .hdr .btn{padding:.55rem 1rem;font-size:.72rem}
}

/* Dos textos en el marcado, uno visible */
.et-l--header .hdr .btn .t-lock{display:none}
.adn-promo .et-l--header .hdr .btn .t-talk{display:none}
.adn-promo .et-l--header .hdr .btn .t-lock{display:inline}


/* ══════════════════ 4 · EL PIE ══════════════════
   font-weight:inherit y margin:0 a proposito: promo.css todavia les
   pone peso 300 y un margen arriba, y asi el pie sale igual en las
   siete. */

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


/* ══════════════════ 5 · LA PAGINA DE GRACIAS ══════════════════
   No lleva barra ni pie: la barra no tiene a donde llevar y el
   prototipo de gracias cierra con el ADNIUS grande, sin pie.
   Aprobado por Jhoger el 17/09/2026. */

.adn-ty .et-l--header,
.adn-ty .et-l--footer{display:none}


/* ══════════════════ 6 · EL ENLACE PROPIO ══════════════════
   Ninguna pagina se enlaza a si misma en el pie. Es lo que hacia cada
   prototipo por su cuenta. */

.adn-promo .foot .lk a[href="/website-promo/"],
.adn-seo .foot .lk a[href="/advanced-seo/"],
.adn-emails .foot .lk a[href="/business-emails/"],
.adn-social .foot .lk a[href="/social-media-plans/"],
.adn-youtube .foot .lk a[href="/youtube-management/"],
.adn-brand .foot .lk a[href="/logo-brand/"]{display:none}