/* AUTHOR + DĀNA BLOCKS
   Ajuste responsive del cierre editorial de los posts */
@media (max-width:768px){

  .kp-author-block h6,
  .kp-dana-block h6{
    font-size:20px !important;
    line-height:1.35 !important;
  }

  .kp-author-block p,
  .kp-dana-block p{
    font-size:15px !important;
    line-height:1.65 !important;
  }

  .kp-dana-button h6{
    font-size:20px !important;
    line-height:1.3 !important;
  }

  .kp-dana-block{
    margin-top:48px !important;
  }
}
/* HUB LINKS
   Links finales de los hubs */
.kp-hub-links a{
  font-style:italic;
}

@media (max-width:768px){
  .kp-hub-links li,
  .kp-hub-links a{
    font-size:16px !important;
    line-height:1.65;
  }
}
/* =========================================================
   FLOAT BOX EDITORIAL
   Caja flotante a la derecha del contenido
   Generada por [kpbox type="video|audio|pdf|link"]
   En desktop flota a la derecha y sobresale del margen.
   En mobile ocupa el ancho completo y deja de flotar.
========================================================= */
.kp-float-box{
  float:right;
  width:55%;
  max-width:600px;
  background:var(--extra-color-3);
  padding:20px;
  margin:20px -325px 24px 36px;
  box-sizing:border-box;
  position:relative;
  font-family:"Fira Sans", sans-serif;
  cursor:pointer;
  transition:transform .18s ease;
}
/* Offset vertical en desktop
   Mantiene el comportamiento original del sistema */
@media (min-width:1000px){
  .kp-float-box{
    margin-top:calc(20px + var(--kp-y,0px));
  }
}
/* Versión inline: no flota, se centra en el contenido
   Activar con layout="inline" en el shortcode */
.kp-float-box.kp-inline{
  float:none;
  width:100%;
  max-width:640px;
  margin:28px auto 36px auto;
  clear:both;
}
/* Mobile: sin float, ancho completo
   Excluye .kp-inline para que mantenga su centrado */
@media (max-width:999px){
  .kp-float-box:not(.kp-inline){
    float:none;
    width:100%;
    max-width:100%;
    margin:18px 0;
  }
}
/* =========================================================
   FLOAT BOX LINK
   El enlace envuelve todo el bloque sin estilos visibles
   para que el hover se gestione desde las clases internas
========================================================= */
.kp-block-link{
  display:block;
  text-decoration:none !important;
  color:inherit !important;
  cursor:pointer;
  box-shadow:none !important;
  background:none !important;
}
.kp-block-link:hover{
  text-decoration:none !important;
  box-shadow:none !important;
}
/* Neutraliza pseudoelementos que Salient pueda inyectar */
.kp-block-link:before,
.kp-block-link:after{
  display:none !important;
  content:none !important;
}
/* =========================================================
   VIDEO THUMBNAIL
   Imagen de previsualización del vídeo de YouTube
   en los float boxes de type="video"
========================================================= */
.kp-video-thumb{
  margin-bottom:4px;
  overflow:hidden;
  border-radius:2px;
}
.kp-video-thumb img{
  width:100%;
  display:block;
  transition:transform .35s ease,filter .35s ease;
}
/* =========================================================
   FLOAT BOX TYPOGRAPHY
   Estilos de texto dentro de los float boxes
   Compatibles con nombres antiguos (kp-float-box-*) y nuevos (kp-box-*)
========================================================= */
/* Título principal */
.kp-float-box-title,
.kp-box-title{
  font-size:22px;
  font-weight:700;
  letter-spacing:.04em;
  line-height:1.25;
  margin-bottom:6px;
}
/* Duración / tiempo */
.kp-float-box-time,
.kp-box-time{
  font-size:18px;
  font-weight:300;
  opacity:.75;
  margin-bottom:14px;
}
/* Subtítulo */
.kp-float-box-subtitle,
.kp-box-subtitle{
  font-size:18px;
  margin-bottom:6px;
}
/* Descripción corta */
.kp-float-box-desc,
.kp-box-desc{
  font-size:16px;
  line-height:1.5;
  margin-bottom:14px;
}
/* =========================================================
   FLOAT BOX ACTIONS
   Contenedor de botones de acción dentro del float box
   type="audio" → dos botones: play + descarga
   type="video|pdf|link" → botón único dentro del enlace
   gap:14px separa visualmente el reproducir del descargar
========================================================= */
.kp-audio-play,
.kp-box-actions{
  display:inline-flex;
  align-items:center;
  gap:14px;
  color:var(--secondary-text-color);
}
/* =========================================================
   ICONS
   Iconos circulares de acción
   kp-icon-play     → triángulo de reproducción
   kp-icon-download → flecha de descarga
   kp-icon-link     → flecha de enlace externo
========================================================= */
/* Base común para play y descarga */
.kp-icon-play,
.kp-icon-download,
.kp-play-icon,
.kp-download-icon,
.kp-audio-icon{
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--extra-color-1);
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:background .2s ease;
}
/* Triángulo de play */
.kp-icon-play:after,
.kp-play-icon:after{
  content:'';
  border-left:8px solid white;
  border-top:5px solid transparent;
  border-bottom:5px solid transparent;
  margin-left:2px;
}
/* Flecha de descarga */
.kp-icon-download:after,
.kp-download-icon:after{
  content:"↓";
  color:white;
  font-size:15px;
  line-height:1;
}
/* Nota musical — compatibilidad con kpaudio antiguo */
.kp-audio-icon:after{
  content:"♪";
  color:white;
  font-size:14px;
  line-height:1;
}
/* Icono de enlace externo — flecha horizontal */
.kp-icon-link,
.kp-link-icon{
  width:18px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
/* Línea horizontal */
.kp-icon-link:after,
.kp-link-icon:after{
  content:"";
  display:block;
  width:12px;
  height:2px;
  background:var(--extra-color-1);
}
/* Punta de flecha */
.kp-icon-link:before,
.kp-link-icon:before{
  content:"";
  position:absolute;
  right:2px;
  top:50%;
  width:7px;
  height:7px;
  border-top:2px solid var(--extra-color-1);
  border-right:2px solid var(--extra-color-1);
  transform:translateY(-50%) rotate(45deg);
}

/* Icono auriculares — botón Escuchar en type="video"
   Construido con CSS puro para mantener estética flat del sistema */
.kp-icon-headphones{
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--extra-color-1);
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:background .2s ease;
}

.kp-ap-trigger:hover .kp-icon-headphones{
  background:var(--secondary-text-color);
}

/* Arco superior de los auriculares */
.kp-icon-headphones:before{
  content:'';
  position:absolute;
  top:5px;
  left:6.5px;
  width:11px;
  height:10px;
  border:2px solid white;
  border-bottom:none;
  border-radius:8px 8px 0 0;
}

/* Almohadillas — dos rectángulos pequeños */
.kp-icon-headphones:after{
  content:'';
  position:absolute;
  bottom:7px;
  left:6.5px;
  width:4px;
  height:5px;
  background:white;
  border-radius:1px;
  box-shadow:11px 0 0 white;
}

/* Estado reproduciendo — negro */
.kp-box-video.kp-playing .kp-ap-trigger .kp-icon-headphones{
  background:var(--secondary-text-color);
}

/* Estado pausado — negro */
.kp-box-video.kp-paused .kp-ap-trigger .kp-icon-headphones{
  background:var(--secondary-text-color);
}

/* =========================================================
   ACTION LABEL
   Texto del botón de acción con subrayado animado
   Usado por todos los tipos de float box
   font-weight:300 para coincidir con el peso tipográfico
   general de Salient/Fira Sans
========================================================= */
.kp-action-label,
.kp-play-label{
  font-size:17px;
  font-style:italic;
  font-weight:300;
  position:relative;
  color:var(--secondary-text-color);
  z-index:1;
}
/* Subrayado base (línea fina) */
.kp-action-label:after,
.kp-play-label:after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:1.5px;
  background:color-mix(in srgb,var(--extra-color-1) 50%,transparent);
  transition:height .25s ease,background .25s ease;
  z-index:-1;
}
/* =========================================================
   FLOAT BOX HOVER
   Estados de hover para type="video|pdf|link"
   El hover actúa sobre toda la caja a través de kp-block-link
========================================================= */
/* El subrayado del texto se expande como highlight */
.kp-block-link:hover .kp-action-label:after,
.kp-block-link:hover .kp-play-label:after{
  height:8px;
  background:color-mix(in srgb,var(--extra-color-1) 30%,transparent);
}
/* Los iconos circulares cambian a color oscuro */
.kp-block-link:hover .kp-icon-play,
.kp-block-link:hover .kp-icon-download,
.kp-block-link:hover .kp-play-icon,
.kp-block-link:hover .kp-download-icon,
.kp-block-link:hover .kp-audio-icon{
  background:var(--secondary-text-color);
}
/* El icono de enlace cambia a color oscuro */
.kp-block-link:hover .kp-icon-link:after,
.kp-block-link:hover .kp-link-icon:after{
  background:var(--secondary-text-color);
}
.kp-block-link:hover .kp-icon-link:before,
.kp-block-link:hover .kp-link-icon:before{
  border-color:var(--secondary-text-color);
}
/* El texto del botón cambia al color de acento */
.kp-block-link:hover .kp-box-actions,
.kp-block-link:hover .kp-audio-play{
  color:var(--extra-color-1);
}
/* =========================================================
   AUDIO BOX HOVER
   Para type="audio" el hover actúa sobre cada botón
   individualmente, no sobre toda la caja
========================================================= */
/* El trigger de reproducir es un span, sin estilos nativos */
.kp-ap-trigger{
  display:inline-flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
}
/* El enlace de descarga: reset de estilos de enlace */
.kp-ap-download{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none !important;
  color:inherit;
  box-shadow:none !important;
}
/* Hover sobre el icono play del audio */
.kp-ap-trigger:hover .kp-icon-play{
  background:var(--secondary-text-color);
}
/* Estado pausado — el círculo se pone negro, icono sigue siendo play */
.kp-box-audio.kp-paused .kp-ap-trigger .kp-icon-play{
  background:var(--secondary-text-color);
}

/* Alineado y gap entre botones Ver y Escuchar en type="video" */
.kp-box-video .kp-box-actions{
  display:flex;
  align-items:center;
  gap:30px;
}

.kp-box-video .kp-box-actions .kp-block-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
}

/* Hover sobre el icono de descarga del audio */
.kp-ap-download:hover .kp-icon-download{
  background:var(--secondary-text-color);
}
/* Hover: subrayado del label se expande */
.kp-ap-trigger:hover .kp-action-label:after,
.kp-ap-download:hover .kp-action-label:after{
  height:8px;
  background:color-mix(in srgb,var(--extra-color-1) 30%,transparent);
}
/* Estado reproduciendo — círculo negro con icono de pausa */
.kp-box-audio.kp-playing .kp-ap-trigger .kp-icon-play{
  background:var(--secondary-text-color);
}

/* =========================================================
   VIDEO OVERLAY
   Popup de vídeo a pantalla completa
   Se activa al hacer clic en un float box con type="video"
   Incluye: fade de entrada, borde dorado, botón de cierre
========================================================= */
/* Fondo oscuro con fade in */
.kp-video-overlay{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,.85);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
  cursor:pointer;
  animation:kp-fade-in .25s ease;
}
@keyframes kp-fade-in{
  from{ opacity:0; }
  to{ opacity:1; }
}
/* Contenedor del iframe con ratio 16:9 y borde dorado */
.kp-video-wrapper{
  width:90%;
  max-width:900px;
  aspect-ratio:16/9;
  position:relative;
  border:2px solid var(--extra-color-1);
  animation:kp-scale-in .25s ease;
}
@keyframes kp-scale-in{
  from{ transform:scale(.96); }
  to{ transform:scale(1); }
}
.kp-video-wrapper iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}
/* Botón de cierre — X en esquina superior derecha */
.kp-video-close{
  position:absolute;
  top:-16px;
  right:-16px;
  width:32px;
  height:32px;
  background:var(--extra-color-1);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:16px;
  color:white;
  line-height:1;
  z-index:1;
  transition:background .2s ease;
}
.kp-video-close:hover{
  background:var(--secondary-text-color);
}
/* Bloquea el scroll del fondo mientras el vídeo está abierto */
body.kp-video-open{
  overflow:hidden;
}
/* =========================================================
   EDITORIAL FLOAT IMAGE
   Imagen flotante editorial dentro del contenido
   Generada por [kpbox type="image"]
   Reemplaza el antiguo shortcode [kpimage]
========================================================= */
.kp-image-float{
  float:right;
  width:55%;
  max-width:600px;
  margin:16px -325px 18px 40px;
  box-sizing:border-box;
}
.kp-image-float img{
  width:100%;
  height:auto;
  display:block;
  border-radius:4px;
  box-shadow:none;
}
/* Pie de foto */
.kp-image-float figcaption{
  font-size:14px;
  line-height:1.4;
  margin-top:8px;
  opacity:.8;
  text-align:center;
  font-style:italic;
}
/* Versión inline centrada */
.kp-image-float.kp-inline{
  float:none;
  width:100%;
  max-width:640px;
  margin:28px auto 36px auto;
  clear:both;
}
/* Mobile: sin float, centrada
   Excluye .kp-inline para que mantenga su centrado */
@media (max-width:999px){
  .kp-image-float:not(.kp-inline){
    float:none;
    width:100%;
    max-width:100%;
    margin:18px 0;
  }
}
/* Mobile pequeño: centrado para imágenes con ancho fijo */
@media (max-width:600px){
  .kp-image-float{
    float:none !important;
    display:block;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}
.kp-image-float.no-shadow img{
  box-shadow:none;
}


/* =========================================================
   BLOG "EN ESTA PÁGINA" INDEX v2
   Navegación colapsable por secciones dentro de un post
========================================================= */
.jump-index{
  margin-bottom:20px;
}
.jump-toggle{
  display:flex;
  justify-content:flex-start;
  align-items:center;
  gap:8px;
  width:100%;
  background:none;
  border:none;
  padding:8px 0;
  cursor:pointer;
}
.jump-toggle:focus,
.jump-toggle:focus-visible{
  outline:none;
  color:inherit;
}
.jump-toggle:hover .jump-label,
.jump-toggle:hover .jump-arrow{
  opacity:1;
}
.jump-label{
  font-size:14px;
  font-style:italic;
  font-family:"Noto Sans", sans-serif;
  font-weight:500;
  opacity:0.5;
  color:var(--secondary-text-color);
  -webkit-tap-highlight-color:transparent;
}
.jump-arrow{
  font-size:16px;
  font-weight:300;
  opacity:0.5;
  color:var(--secondary-text-color);
  transition:all 0.25s ease;
  display:inline-block;
}
.jump-arrow.open{
  transform:rotate(-180deg);
}
.jump-list{
  overflow:hidden;
  max-height:0;
  opacity:0;
}
.jump-list.open{
  max-height:800px;
  opacity:1;
}
.jump-list.animated{
  transition:max-height 0.3s ease, opacity 0.25s ease;
}
.jump-list a{
  display:block !important;
  font-size:15px;
  line-height:1.6;
  color:var(--secondary-text-color);
  text-decoration:none;
  font-weight:400;
  opacity:0.5;
  padding:5px 0;
  transition:opacity 0.18s ease, color 0.18s ease;
}
.jump-list a:last-child{
  margin-bottom:8px;
}
.jump-list a:hover{
  opacity:1;
  color:var(--secondary-text-color);
  text-decoration:none;
}
.jump-list a.active{
  font-weight:700;
  opacity:1;
  color:var(--secondary-text-color);
}
.vc_row{
  scroll-margin-top:40px;
}


/* =========================================================
   KARUNAPURA AUDIO PLAYER — BARRA INFERIOR
   Aparece al pulsar Reproducir en un [kpbox type="audio"]
   Flota en la parte inferior de la pantalla
   El audio viene de YouTube de forma invisible
========================================================= */
/* Contenedor del player de YouTube — completamente oculto */
.kp-ap-yt-container{
  position:absolute;
  left:-9999px;
  top:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}
/* Barra inferior flotante
   display:none por defecto, se activa con clase .active
   Fondo ligeramente más blanco que el crema base */
.kp-audio-bar{
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  background:color-mix(in srgb, var(--extra-color-3) 15%, white);
  border-top:2px solid var(--extra-color-1);
  box-sizing:border-box;
  display:none;
  z-index:9998;
  font-family:"Fira Sans", sans-serif;
  animation:kp-slide-up .25s ease;
}
/* La barra se muestra cuando tiene clase .active */
.kp-audio-bar.active{
  display:block;
}
/* Animación de entrada desde abajo */
@keyframes kp-slide-up{
  from{ transform:translateY(100%); }
  to{ transform:translateY(0); }
}


/* =========================================================
   DESKTOP
   Título + cruz arriba, play + barra abajo
========================================================= */
@media (min-width:601px){

  .kp-audio-bar-inner{
    width:100%;
    max-width:1000px;
    margin:0 auto;
    padding:8px 24px 10px;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    gap:6px;
  }

  /* Fila superior — título + cruz */
  .kp-bar-top-row{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    width:100%;
    gap:16px;
  }

  .kp-bar-info{
    flex:1;
    min-width:0;
    overflow:hidden;
  }

  .kp-bar-title{
    font-size:20px;
    font-weight:600;
    color:var(--secondary-text-color);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .kp-bar-subtitle{
    font-size:17px;
    color:var(--primary-text-color);
    opacity:.6;
    margin-top:1px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  /* Cruz */
  .kp-bar-close{
    background:none;
    border:none;
    cursor:pointer;
    font-size:26px;
    font-weight:900;
    color:var(--primary-text-color);
    opacity:.6;
    padding:0;
    line-height:1;
    transition:opacity .2s ease;
    flex-shrink:0;
  }

  .kp-bar-close:hover{
    opacity:1;
  }

  /* Fila inferior — play + barra */
  .kp-bar-bottom-row{
    display:flex;
    align-items:center;
    gap:16px;
    width:100%;
  }

  /* Botón play/pausa */
  .kp-bar-btn{
    width:44px;
    height:44px;
    border-radius:50%;
    background:var(--extra-color-1);
    border:none;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    transition:background .2s ease;
    -webkit-appearance:none;
    appearance:none;
    box-shadow:none !important;
    outline:none;
    padding:0;
  }

  .kp-bar-btn:hover{
    background:var(--secondary-text-color);
  }

  /* Triángulo de play */
  .kp-bar-play-icon{
    width:0;
    height:0;
    border-left:14px solid white;
    border-top:9px solid transparent;
    border-bottom:9px solid transparent;
    margin-left:3px;
  }

  /* Barra de progreso */
  .kp-bar-progress-wrap{
    flex:1;
    min-width:0;
  }
}

/* =========================================================
   MOBILE
   Título + cruz arriba, play + barra abajo
========================================================= */
@media (max-width:600px){

  .kp-audio-bar-inner{
    display:block;
    padding:12px 16px;
    width:100%;
    box-sizing:border-box;
  }

  /* Fila superior — título + cruz */
  .kp-bar-top-row{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    width:100%;
    margin-bottom:10px;
  }

  .kp-bar-info{
    overflow:hidden;
    flex:1;
    min-width:0;
  }

  .kp-bar-title{
    font-size:18px;
    font-weight:600;
    color:var(--secondary-text-color);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .kp-bar-subtitle{
    font-size:15px;
    color:var(--primary-text-color);
    opacity:.6;
    margin-top:2px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  /* Cruz arriba a la derecha */
  .kp-bar-close{
    background:none !important;
    border:none !important;
    box-shadow:none !important;
    -webkit-appearance:none !important;
    appearance:none !important;
    cursor:pointer;
    font-size:22px;
    font-weight:900;
    opacity:0.7;
    color:var(--secondary-text-color);
    padding:0 0 0 12px;
    line-height:1;
    flex-shrink:0;
  }

  /* Fila inferior — play + barra */
  .kp-bar-bottom-row{
    display:flex;
    align-items:center;
    gap:12px;
    width:100%;
  }

  /* Botón play */
  .kp-bar-btn{
    width:44px !important;
    height:44px !important;
    border-radius:50% !important;
    background:var(--extra-color-1) !important;
    border:none !important;
    cursor:pointer;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex-shrink:0;
    transition:background .2s ease;
    -webkit-appearance:none !important;
    appearance:none !important;
    box-shadow:none !important;
    outline:none !important;
    padding:0 !important;
  }

  /* Triángulo de play */
  .kp-bar-play-icon{
    width:0;
    height:0;
    border-left:15px solid white;
    border-top:9px solid transparent;
    border-bottom:9px solid transparent;
    margin-left:3px;
    display:block;
  }

  /* Barra de progreso */
  .kp-bar-progress-wrap{
    flex:1;
    min-width:0;
  }
}


/* =========================================================
   ELEMENTOS COMUNES
   Válidos para desktop y mobile
========================================================= */
/* Icono pausa — dos barras verticales */
.kp-bar-pause-icon{
  display:flex;
  gap:4px;
}
.kp-bar-pause-icon:before,
.kp-bar-pause-icon:after{
  content:'';
  display:block;
  width:3px;
  height:14px;
  background:white;
  border-radius:2px;
}
/* Barra de progreso — fondo */
.kp-bar-bar{
  position:relative;
  height:5px;
  background:rgba(0,0,0,0.12);
  border-radius:3px;
  cursor:pointer;
}
/* Barra de progreso — relleno */
.kp-bar-fill{
  height:100%;
  width:0%;
  background:var(--extra-color-1);
  border-radius:3px;
  transition:width .3s linear;
}
/* Punto deslizador — siempre visible */
.kp-bar-thumb{
  position:absolute;
  top:50%;
  left:0%;
  transform:translate(-50%,-50%);
  width:14px;
  height:14px;
  background:var(--extra-color-1);
  border:2px solid white;
  border-radius:50%;
  box-shadow:0 1px 3px rgba(0,0,0,0.2);
  transition:left .3s linear;
}
/* Fila de tiempos: tiempo actual y duración total */
.kp-bar-times{
  display:flex;
  justify-content:space-between;
  margin-top:5px;
}
/* Tiempo actual y total */
.kp-bar-current,
.kp-bar-total{
  font-size:12px;
  color:var(--primary-text-color);
  opacity:.6;
  font-family:monospace;
}