/**

* Theme Name: Wavo Child

* Description: This is a child theme of Wavo, generated by Merlin WP.

* Author: <a href="http://ninetheme.com/about">Ninetheme</a>

* Template: wavo

* Version: 1.0.3

*/

/**


/* ====================== [ START @SELECTION global ] ====================== */
::selection {
  background-color: rgba(255, 255, 255, 0.1);
}
::-moz-selection {
  background-color: rgba(255, 255, 255, 0.1);
}
/* ====================== [ END @SELECTION global ] ====================== */




/* ====================== [ START @BODY bg-black ] ====================== */
body{
	background-color: #000 !important;
}
/* ====================== [ END @BODY bg-black ] ====================== */




/* ====================== [ START @NUM para setear Spline Sans Mono en ciertos textos ] ====================== */
.num {
  font-family: 'Spline Sans Mono', monospace, sans-serif;
}
/* ====================== [ END @NUM para setear IBM Plex Mono en los números ] ====================== */




/* ====================== [ START @HL-TEXT] ====================== */
.hl-text {
  color: #FFFFFFE6 !important;
}
/* ====================== [ END @HL-TEXT] ====================== */


/* ====================== [ START @TABLE OF CONTENTS ] ====================== */
#table-of-contents {
  position: fixed;
  top: 128px;
  right: 32px;
  width: 200px;
  background: #000;
  padding: 16px 16px 5px;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 0px;
  z-index:10;
  color: #FFFFFF8C;
  font-family: 'Helvetica Now Text', sans-serif;
}

#table-of-contents p {
  font-size: 16px;
  color: #FFFFFF;
  font-weight: 500;
}

#table-of-contents ul {
  list-style-type: none;
  padding-left: 0;
}

#table-of-contents ul li {
  margin-bottom: 5px;
  font-size: 14px;
}

#table-of-contents ul li a {
  text-decoration: none;
  transition: color 0.3s;
}

#table-of-contents ul li a:hover {
  color: #FFFFFF;
  font-weight: 400;
}

#table-of-contents ul li.active a {
  color: #FFFFFF;
  font-weight: 500;
}

@media (max-width: 768px) {
  #table-of-contents {
    display: none !important;
  }
}
/* ====================== [ END @TABLE OF CONTENTS ] ====================== */




/* ====================== [ START @BORDER-DVZ ] ====================== */
.border-dvz {
	border: 1px solid rgba(255, 255, 255, 0.10) !important;
	/*border: 1px solid transparent !important;
	border-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.15)) 1 !important; */
}

/*** Estilos para la @ARROW CARD */
.arrow-card {
    overflow: hidden; /* Oculta la parte de la imagen que se sale del contenedor */
    position: relative; /* Asegura que la imagen esté posicionada correctamente dentro del contenedor */
}
/* ====================== [ END @BORDER-DVZ ] ====================== */




/* ====================== [ START @ARROW-CARD ] ====================== */
.arrow-card svg {
    transition: transform 0.2s ease-in-out; /* Añade una transición suave con un retraso de 0.2s */
    position: relative; /* Permite mover el icono */
}

.arrow-card:hover svg {
    transform: translate(4px, -4px); /* Mueve el icono 8 píxeles hacia la derecha y hacia arriba */
}
/* ====================== [ END @ARROW-CARD ] ====================== */




/* ====================== [ START @LINKS con la clase underline-dvz ] ====================== */ 
/* 1) Reglas genéricas para todos los .underline-dvz */
.underline-dvz a,
a.underline-dvz {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: #fff;
  text-decoration: underline !important;
  text-decoration-thickness: 1.5px !important;
  text-underline-offset: 0.35em !important;
  text-decoration-color: #757a8a66 !important;
  transition: color 0.3s ease, text-decoration-color 0.3s ease;
}

/* 2) Pseudo-elemento ::after con el SVG por defecto (content-B) */
.underline-dvz a::after,
a.underline-dvz::after {
  content: "";
  display: inline-block;
  margin: 0 4px;
  width: 1em;
  height: 1em;
  background-repeat: no-repeat;
  background-size: 1em 1em;
  background-image: url("../../uploads/2024/08/icon-diagonal-arrow_content-b.svg");
  opacity: 1;
}

/* 3) Solo on-hover sobre el <a> */
.underline-dvz a:hover,
a.underline-dvz:hover {
  /* mantiene subrayado */
  text-decoration: underline !important;
  text-decoration-thickness: 1.5px !important;
  text-underline-offset: 0.35em !important;
  text-decoration-color: #757a8a66 !important;
  /* texto (y flecha) a blanco */
  color: #fff !important;
}

/* 4) Variantes: si el <a> lleva clase .arrow-contentA/C, cambiamos solo el SVG */
.underline-dvz a.arrow-contentA::after,
a.underline-dvz.arrow-contentA::after {
  background-image: url("../../uploads/2025/08/icon-diagonal-arrow_content-a.svg") !important;
}

.underline-dvz a.arrow-contentC::after,
a.underline-dvz.arrow-contentC::after {
  background-image: url("../../uploads/2025/08/icon-diagonal-arrow_content-c.svg") !important;
}

/* ====================== [ END @LINKS con la clase underline-dvz ] ====================== */




/* ====================== [ START @LINKS con la clase underline-dvz ] ======================

a.underline-dvz,
.underline-dvz a {
    position: relative; 
    text-decoration: none; 
    display: inline-block; 
    padding-bottom: 1px; 
}

a.underline-dvz::after,
.underline-dvz a::after {
    content: '';
    position: absolute;
    width: 100%; 
    height: 1.5px; 
    background-color: currentColor; 
    left: 0;
    bottom: -1px; 
    transition: width 0.3s ease; 
    z-index: 1; 
}

a.underline-dvz:hover::after,
.underline-dvz a:hover::after {
    width: 0; 
    transition: width 0s; 
    animation: underline-grow 0.3s ease forwards;
}

@keyframes underline-grow {
    0% {
        width: 0; 
    }
    100% {
        width: 100%; 
    }
}

====================== [ END @LINKS con la clase underline-dvz ] ====================== */




/* ====================== [ START @<UL> dentro de .ul-experience ] ====================== */
.ul-experience ul {
    margin: 0px;
}

.ul-experience li {
    margin-bottom: 12px; /* Espacio entre los elementos de la lista */
    line-height: 1.5; /* Espaciado entre líneas */
    position: relative; /* Necesario para el posicionamiento del pseudo-elemento */
    padding-left: 20px; /* Espacio a la izquierda para la viñeta personalizada */
}

/* Pseudo-elemento para crear viñetas personalizadas */
.ul-experience li::before {
	content: "\25AA\FE0E";
	position: absolute;
	left: 0;
	color: currentColor;
	/* Excluye Emoji poniendo fuentes de texto delante */
	font-family: "Helvetica Now Text", system-ui, -apple-system, "Segoe UI",
               Roboto, Helvetica, Arial, sans-serif;
}
/* ====================== [ END @<UL> dentro de .ul-experience ] ====================== */



/* ====================== [ START Animaciones de entrada del HERO home (textos) ] ====================== */

/* Para el H1 principal (son SVGs) */

.hero-word-img {
	overflow: hidden;
	display: inline-block;
}

.hero-word-img img { /* Aplica la animación a las imágenes dentro de .hero-word-img */
	display: block;
	width: 100%;
	height: auto;
	transform: translateY(100%);
	animation: slideUp 0.8s cubic-bezier(0.15, 0.8, 0.25, 1) forwards;
}

.hero-word-img1 img { animation-delay: 0.4s; } /* Aplicamos el delay a cada imagen usando las clases únicas */
.hero-word-img2 img { animation-delay: 0.6s; }
.hero-word-img3 img { animation-delay: 1.2s; }
.hero-word-img4 img { animation-delay: 1.3s; }
.hero-word-img5 img { animation-delay: 1.5s; }

@keyframes slideUp { /* Aseguramos la animación */
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}


/* Para los H2 de abajo */
.hero-word {
	overflow: hidden;
	display: inline-block;
}

.hero-word h2,
.hero-word img  {
	display: block;
	transform: translateY(100%);
	animation: slideUp 0.8s cubic-bezier(0.15, 0.8, 0.25, 1) forwards;
}

.hero-word h2,
.hero-word img  { animation-delay: 2s; }

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
/* ====================== [ END Animaciones de entrada del HERO home (textos) ] ====================== */




/* ====================== [ START back-to-top button ] ====================== */
.progress-wrap {
  position: fixed;
  bottom: 16px !important;
  right: 16px !important;
  height: 40px !important;
  width: 40px !important;
  cursor: pointer;
  display: block;
  border-radius: 50px;
  -webkit-box-shadow: inset 0 0 0 2px rgba(130, 130, 130, 0.3);
          box-shadow: inset 0 0 0 2px rgba(130, 130, 130, 0.3);
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(20px);
          transform: translateY(20px);
  -webkit-transition: all 400ms linear;
  transition: all 400ms linear;
}

/* estilos base para la flechita */
.progress-wrap::after {
  position: absolute;
  font-family: 'Font Awesome 5 Free';
  content: '\f077';
  text-align: center;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.9) !important;
  left: 0;
  top: 0;
  line-height: 40px !important;
  font-size: 14px !important;
  height: 40px !important;
  width: 40px !important;
  cursor: pointer;
  display: block;
  z-index: 1;
  -webkit-transition: all 400ms linear;
  transition: all 400ms linear;
}

.progress-wrap.active-progress {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.progress-wrap svg path {
  fill: none;
}

.progress-wrap svg.progress-circle path {
  stroke: #6c6d6d;
  stroke-width: 4;
  box-sizing: border-box;
  -webkit-transition: all 400ms linear;
  transition: all 400ms linear;
}

/* desktop custom styles */
@media (min-width: 1024px) {
  .progress-wrap {
    bottom: 40px !important;
    right: 40px !important;
    height: 56px !important;
    width: 56px !important;
  }
  .progress-wrap::after {
    line-height: 56px !important;
    font-size: 14px !important;
    height: 56px !important;
    width: 56px !important;
  }
}

/* ====================== [ END back-to-top button ] ====================== */




/* ====================== [ START .badge-dvz ] ====================== */

.badge-dvz{
  display:inline-block;
  padding:2px 4px;
  line-height:1;
  background: rgba(255,255,255,.10) !important;
  color:#FFFFFFCC !important;
}

/* ====================== [ END .badge-dvz ] ====================== */




/* ====================== [ START .bottom-fade-overlay ] ====================== */

.bottom-fade-overlay {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: clamp(50px, 12vh, 150px);
  pointer-events: none;
  z-index: 10; /* <= overlay se queda "detrás" del footer, que tiene un z-index: 20 */
  
  mask-image: linear-gradient(0deg, #000 8%, transparent);
  -webkit-mask-image: linear-gradient(0deg, #000 8%, transparent);

  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.18));
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* ====================== [ END .bottom-fade-overlay ] ====================== */




/* ====================== [ START #dvz-tooltip ] ====================== */

#dvz-tooltip {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 999999;
    padding: 12px;

    /* background */
    background: rgba(31, 31, 31, 0.6);
    backdrop-filter: blur(8px);
    background-clip: padding-box;
	
    /* stroke */
    border: 0.5px solid rgba(255, 255, 255, 0.1);
    border-radius: 0px;

    /* text */
    font-family: var(--e-global-typography-a03c848-font-family), Sans-serif;
    font-size: 12px;
    font-weight: var(--e-global-typography-a03c848-font-weight);
    line-height: var(--e-global-typography-a03c848-line-height);
    color: var(--e-global-color-e8943f2);

    white-space: nowrap;
    pointer-events: none;
}

/* ====================== [ END #dvz-tooltip ] ====================== */





/* ====================== [ START .dvz-all-articles ] ====================== */

.dvz-all-articles {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;

    --speed-track1: 48s;
    --speed-track2: 52s;

}

/* TITLE */
.dvz-center-title {
    position: absolute;
    z-index: 5;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--e-global-typography-a03c848-font-family), Sans-serif;
    font-size: var(--e-global-typography-a03c848-font-size);
    font-weight: var(--e-global-typography-a03c848-font-weight);
    line-height: var(--e-global-typography-a03c848-line-height);
    color: var(--e-global-color-8ec60ef);
    pointer-events: none;
    white-space: nowrap;
	
}

/* GRADIENTS */
.dvz-grad {
    position: absolute;
    z-index: 4;
    pointer-events: none;
	transition: background 0.3s ease;
}


.grad-left { left: 0; top: 0; width: 56px; height: 100%; background: linear-gradient(to right, #000 0%, #0000 100%); }
.grad-right { right: 0; top: 0; width: 56px; height: 100%; background: linear-gradient(to left, #000 0%, #0000 100%); }

/* gradients base: negro → transparente)  */
.dvz-grad.base.grad-left {
    background: linear-gradient(to right, #000 0%, #0000 100%);
}
.dvz-grad.base.grad-right {
    background: linear-gradient(to left, #000 0%, #0000 100%);
}

/* gradients hover: 0A0A0A → transparente */
.dvz-grad.hover {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.dvz-grad.hover.grad-left {
    background: linear-gradient(to right, #0A0A0A 0%, rgba(10,10,10,0) 100%);
}
.dvz-grad.hover.grad-right {
    background: linear-gradient(to left, #0A0A0A 0%, rgba(10,10,10,0) 100%);
}

/* :hover – hacemos aparecer los gradients hover suavemente */
#tooltip-medium-more:hover .dvz-grad.hover {
    opacity: 1;
}

/* Estos de la card 'Ver más artículos'. Controlamos su :hover aquí para asegurar consistencia con la transición de los gradients. */
#tooltip-medium-more {
    background-color: #000 !important;
    transition: background-color 0.3s ease;
}

#tooltip-medium-more:hover {
    background-color: #0A0A0A !important;
}



/* TRACKS */
.dvz-track {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}

.dvz-track.track-1 {
    margin-bottom: 10px;
}

/* INNER (A+B) */
.dvz-inner {
    display: inline-block;
    white-space: nowrap;
    will-change: transform;
}

/* ROW (7 items) */
.dvz-row {
    display: inline-block;
    white-space: nowrap;
}

/* ITEMS */
.dvz-item {
    width: 86px;
    height: 34px;
    padding: 8px;
    background: rgba(255,255,255,0.05);
    display: inline-flex;
    flex-direction: column;
    margin-right: 8px;
    box-sizing: border-box;
}

.dvz-title { width: 27px; height: 5px; margin-bottom: 4px; background: rgba(255,255,255,0.05); }
.dvz-line1 { width: 70px; height: 3px; margin-bottom: 3px; background: rgba(255,255,255,0.05); }
.dvz-line2 { width: 51px; height: 3px; background: rgba(255,255,255,0.05); }

/* ANIMATIONS */
.track-1 .dvz-inner { animation: dvz-right var(--speed-track1) linear infinite; }
.track-2 .dvz-inner { animation: dvz-left var(--speed-track2) linear infinite; }



/* KEYFRAMES */
@keyframes dvz-left {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@keyframes dvz-right {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

/* BREAKPOINT: Tablet y mobile */
@media (max-width: 1024px) {
   
}


/* ====================== [ END .dvz-all-articles ] ====================== */





/* ====================== [ START .floating-player ] ====================== */

.floating-player {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 330px;
  height: 56px;

  background: rgba(31, 31, 31, 0.6);
  backdrop-filter: blur(8px);

  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 56px;

  padding-left: 16px;
  padding-right: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  opacity: 0;
  pointer-events: none;
  transform-origin: center bottom;

  transition: opacity 0.35s ease, transform 0.35s ease;
  z-index: 9999;
}

/* Visible state (JS toggles this) */
.floating-player.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Hidden state before/after animation */
.floating-player.hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(10px);
}

/* Close button  */

.floating-close-btn {
  background: transparent;
  border: none;
  width: 24px;
  height: 24px;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.floating-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin: 0 12px;
}

/* Use exact slot 5 typography */
.floating-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

/* Progress reuse */

.floating-progress-block {
  margin-top: 0;  /* no gap above */
}

/* Play button reuse  */

.floating-play-btn {
  width: 32px !important;
  height: 32px !important;
}

@media (max-width: 1023px) {

  /* 1. Close button más pequeño */
  .floating-close-btn {
    width: 20px;
    height: 20px;
  }

  /* 2. Current time más compacto */
  .floating-current-time {
    min-width: 24px !important;
  }

  /* 3. Play button más pequeño */
  .floating-play-btn {
    width: 24px !important;
    height: 24px !important;
  }

  /* 4. Iconos internos reducidos */
  .floating-play-btn .slot5-play-icon,
  .floating-play-btn .slot5-pause-icon {
    width: 10px !important;
  }


  /* 5. Floating player más compacto */
  .floating-player {
    width: 206px;
    height: 40px;
    padding-right: 8px;
    bottom: 16px;
  }

  /* 6. Ocultar completamente el título */
  .floating-title {
    display: none !important;
  }

  /* 7. Ajuste de progress block */
  .slot5-progress-block {
    margin-top: 0px !important;
  }
}


/* ====================== [ END .floating-player ] ====================== */


body{
	background-color: #000;
}