/*
Theme Name: Be-skiller 2026
Author: Giuseppe Colonna
Author URI: https://www.giuseppe-colonna.com/
Description: Duetto Design responsive theme
Version: 1.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/



/* ─────────────────────────────────────────────────────
SKIP LINK CSS  (add to your theme stylesheet)
───────────────────────────────────────────────────── */
.skip-link.screen-reader-text {position: absolute;left: -9999px;top: auto;width: 1px;height: 1px;overflow: hidden;z-index: -999;}
.skip-link.screen-reader-text:focus {position: fixed;top: 0;left: 0;width: auto;height: auto;padding: .75rem 1.5rem;background: #000;color: #fff;font-size: 1rem;font-weight: 700;text-decoration: none;z-index: 9999;outline: 3px solid #fff;outline-offset: 2px;}
.skip-link:focus:not(:focus-visible) {display: none;}
.skip-link {position: absolute;top: -100px;left: 0;background: var(--dark);color: #fff;padding: 8px 16px;z-index: 1000;text-decoration: none;transition: top 0.4s ease;}
.skip-link:focus {top: 0;}
/**/


.is-position-sticky {top: var(--navbar-height)}

.hero-text {
  font-size: clamp(3.5rem, 2rem + 6vw, 8.75rem) !important;
  /* letter-spacing: clamp(-2px, -0.25vw, -0.5rem); */
}

.z-1 {z-index: 1;}
.z-2 {z-index: 2;}

#masthead {height: var(--navbar-height);}
.brand-footer svg {
    width: 100%;
    height: auto;
}


.footer-navigation.fs-6 * {line-height: 1.6rem;}

body, p, .fs-p {
    font-display: swap;
    -webkit-font-smoothing: antialiased;
    letter-spacing: 0;
    line-height: 1.5;
}
strong, b,
h1 strong, .fs-1 strong,
h2 strong, .fs-2 strong,
h3 strong, .fs-3 strong,
h4 strong, .fs-4 strong,
h5 strong, .fs-5 strong,
h6 strong, .fs-6 strong {
    -webkit-font-smoothing: antialiased;
    font-weight: 700 !important;
}

p strong, p b {
    font-weight: 700 !important;
}

h1, .fs-1,
h2, .fs-2,
h3, .fs-3,
h4, .fs-4,
h5, .fs-5,
h6, .fs-6 {
    -webkit-font-smoothing: antialiased;
}

.display-1, .has-display-1-font-size {letter-spacing: clamp(-0.08em, -0.15vw, -0.03em);}
h1, .fs-1, .has-h-1-font-size {letter-spacing: clamp(-0.06em, -0.12vw, -0.025em);}
h2, .fs-2, .has-h-2-font-size {letter-spacing: clamp(-0.05em, -0.1vw, -0.02em);}
h3, .fs-3, .has-h-3-font-size {letter-spacing: clamp(-0.04em, -0.08vw, -0.015em);}
h4, .fs-4, .has-h-4-font-size {letter-spacing: clamp(-0.03em, -0.06vw, -0.01em);}
h5, .fs-5, .has-h-5-font-size {letter-spacing: clamp(-0.02em, -0.04vw, -0.005em);}
h6, .fs-6, .has-h-6-font-size {letter-spacing: clamp(-0.01em, -0.02vw, 0);}

.fs-huge {font-size: clamp(3.5rem, 2rem + 6vw, 8.75rem) !important;}
.fs-huge {font-size: 14vw !important;display: block;line-height: 1;transform:translateY(100%) ;}
.huge-title-wrap {overflow: hidden;}
.huge-title-container { overflow: hidden; }



/* Default link style */
a {text-decoration: none;}
p a {text-decoration: underline;
    text-decoration-color: currentColor;
    text-decoration-style: solid;
    text-decoration-thickness: 1px;
    text-underline-offset: 25%;
    color: currentColor;
    opacity: .8;
}

/* Hover style */
p a:hover {
    opacity: 1;
    text-decoration: underline;
    text-decoration-style: dashed;
    text-decoration-thickness: 1px;
}

p.has-regular-font-size a {
    padding-bottom: calc(0.26rem - 2px);
}

.icon-in {
    width: 22px !important;
    height: 22px !important;
    border-radius: 0 !important;
}

.wp-block-button__link,
.navigation-cta a {
  transition: background-color 300ms ease-in-out,
              color 300ms ease-in-out;
}
.wp-block-button__link:hover,
.navigation-cta a:hover {
  background-color: var(--dark);
  color: var(--wp--preset--color--base);
}

.navigation-cta {
  padding: 15px 0;
}


.wp-block-embed iframe {
    max-width: 100%;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

.playbook-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 8px; /* opzionale */
}

.playbook-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* HERO SECTION */
.hero-section {position: relative; min-height: 65vh;background-color: var(--dark);}
.hero-section-content {position: relative;z-index:3; padding:calc(var(--navbar-height)*1.12) 0}
.hero-img,.hero-section::after {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;z-index:1}
.hero-section::after {content:"";z-index:2;background: linear-gradient(to bottom, #2e344a 0%, #2e344a52 50%, var(--base) 100%);}
.justmobi-deco {
    position: absolute;top: 0;right: 0;
    width: 70%;
    height: 50vh;object-fit: contain;object-position: top right;
}

@media screen and (max-width: 480px) {
  .hero-section {min-height: 45vh;}
}

/* POST CONTENT */
@media screen and (min-width: 480px) {
  .post--inner-content > *:not(.wp-block-image) {
    padding-left: 6rem;
}
}

/* BUTTON */
.advanced-btn {display: flex;align-items: center;justify-content: start;cursor: pointer;}
.advanced-btn--button {display: inline-block;height: var(--btn-height);border-radius: 0vw;padding: 0 calc(var(--btn-height)/2);line-height: calc(var(--btn-height)/1);} 
.advanced-btn--arrow {display: flex;align-items: center;justify-content: center;width: var(--btn-height);height: var(--btn-height);border-radius: 50%;transition: all 250ms ease-in-out;}
.advanced-btn--arrow::before {content: "";display: inline-block;width: 19px;height: 18px;background-image: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 18'>\<polygon fill='currentColor' points='10.6 17.8 9.9 17.2 17.1 9.5 .8 9.5 .8 8.5 17.1 8.5 9.9 .8 10.6 .2 18.9 9 10.6 17.8'/>\</svg>");background-repeat: no-repeat;background-size: contain;}
.btn-arrow-end {scale: 0;width: 0;}
.btn-arrow-start {scale: 1;}

.advanced-btn:hover .btn-arrow-end,
a:hover .advanced-btn .btn-arrow-end {scale: 1;width: var(--btn-height);}
.advanced-btn:hover .btn-arrow-start,
a:hover .advanced-btn .btn-arrow-start {scale: 0;width: 0;}

.btn.btn-dark:hover {opacity: 0.8;}
.btn.btn-primary:hover {opacity: 0.8;}

/* GENERAL STYLE */
.partners-logos img.w-100 {
  max-width: 85% !important;
  width: 85% !important;
}

/* DRAWER */
/* Overlay */
.offCanvasDrawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 999;
}

/* Drawer base */
.offCanvasDrawer {
  position: fixed;
  top: 0;
  max-width: 600px;
  width: 100%;
  height: 100%;
  background: #fff;
  padding: 1.5rem;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
  z-index: 1000;
}

/* Left drawer */
.offCanvasDrawer-left {
  left: 0;
  transform: translateX(-100%);
}

/* Right drawer */
.offCanvasDrawer-right {
  right: 0;
  transform: translateX(100%);
}

/* Active states */
.offCanvasDrawer.active {
  transform: translateX(0);
}

.offCanvasDrawer-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* Close button */
.offCanvasDrawer-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  position: absolute;
  top: 10px;
  right: 15px;
  cursor: pointer;
}

/* SWIPER NAV */
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after,
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {content: '';}
.swiper-button-next .arrow {transform: rotate(-90deg);}
.swiper-button-prev .arrow {transform: rotate(90deg);}

@media screen and (min-width: 782px) {

}

/* MEDIA TEXT */
.wp-block-media-text>.wp-block-media-text__content {
    padding: 8%;
}

.wp-block-media-text__media img, .wp-block-media-text__media video {
    max-height: 475px !important;
    object-fit: contain;
}

/* CONTACT FORM */
.wpcf7 form p {margin-bottom: 0 !important;}
.wpcf7 form label, .wpcf7 form input, .wpcf7 form textarea {
    width: 100%;
    max-height: 120px;
}

.wpcf7 form input, .wpcf7 form textarea {
    width: 100%;
    font-size: var(--wp--preset--font-size--paragraph);
    font-family: var(--wp--preset--font-family--sans-serif);
    margin: .75rem 0;
    padding: .75rem;
    background-color: transparent;
    border: 1px solid var(--base);
    color: currentColor;
    border-radius: 4px;
}

.wpcf7 form input::placeholder, .wpcf7 form textarea::placeholder {
    color: var(--base);
}

.wpcf7 form select.wpcf7-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    font-size: var(--wp--preset--font-size--paragraph);
    font-family: var(--wp--preset--font-family--sans-serif);
    margin: .75rem 0;
    padding: .75rem;
    background-color: transparent;
    border: 1px solid var(--base);
    color: var(--base);
    border-radius: 4px;
    cursor: pointer;
}

.wpcf7 form input:-webkit-autofill {
    -webkit-text-fill-color: var(--base) !important;
    box-shadow: 0 0 0px 1000px transparent inset !important;
    background-color: transparent !important;
    transition: background-color 5000s ease-in-out 0s; /* hack to suppress yellow bg */
}

.wpcf7 form input[type=checkbox] {
    width: auto;
    margin-right: .35rem;
    margin-bottom: 0 !important;
}
.wpcf7-list-item { margin: 0;}

.wpcf7 form input[type=submit] {
    background-color: var(--primary) !important;
    color: white !important;
    border: 0 solid transparent !important;
    width: auto;
    display: inline-block;
    padding: 1rem 2rem;
      border-radius: 4px;
    width: 100%;
}
.wpcf7-spinner {display: block;background-color: var(--secondary);}

/* "Área de interés" + "Teams meeting" checkboxes (CF7 fields
   checkbox-area-de-interes y checkbox-474, página Contacto): tarjetas en
   grid de 2 columnas en escritorio, 1 en móvil. */
.wpcf7-form-control-wrap[data-name="checkbox-area-de-interes"] .wpcf7-form-control,
.wpcf7-form-control-wrap[data-name="checkbox-otras-soluciones"] .wpcf7-form-control,
.wpcf7-form-control-wrap[data-name="checkbox-474"] .wpcf7-form-control,
.wpcf7-form-control-wrap[data-name="acceptance-gdpr"] .wpcf7-form-control {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: .75rem 0;
}

.wpcf7-form-control-wrap[data-name="checkbox-area-de-interes"] .wpcf7-list-item,
.wpcf7-form-control-wrap[data-name="checkbox-otras-soluciones"] .wpcf7-list-item {
    width: calc(50% - 6px);
}

.wpcf7-form-control-wrap[data-name="checkbox-474"] .wpcf7-list-item,
.wpcf7-form-control-wrap[data-name="acceptance-gdpr"] .wpcf7-list-item {
    width: 100%;
}

.wpcf7-form-control-wrap[data-name="checkbox-area-de-interes"] .wpcf7-list-item label,
.wpcf7-form-control-wrap[data-name="checkbox-otras-soluciones"] .wpcf7-list-item label,
.wpcf7-form-control-wrap[data-name="checkbox-474"] .wpcf7-list-item label,
.wpcf7-form-control-wrap[data-name="acceptance-gdpr"] .wpcf7-list-item label {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--border-color, #E3E3DF);
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.3;
    transition: border-color .2s ease, background-color .2s ease;
}

.wpcf7-form-control-wrap[data-name="checkbox-area-de-interes"] .wpcf7-list-item label:hover,
.wpcf7-form-control-wrap[data-name="checkbox-otras-soluciones"] .wpcf7-list-item label:hover,
.wpcf7-form-control-wrap[data-name="checkbox-474"] .wpcf7-list-item label:hover,
.wpcf7-form-control-wrap[data-name="acceptance-gdpr"] .wpcf7-list-item label:hover {
    border-color: var(--primary, #F68B29);
}

.wpcf7-form-control-wrap[data-name="checkbox-area-de-interes"] .wpcf7-list-item:has(input:checked) label,
.wpcf7-form-control-wrap[data-name="checkbox-otras-soluciones"] .wpcf7-list-item:has(input:checked) label,
.wpcf7-form-control-wrap[data-name="checkbox-474"] .wpcf7-list-item:has(input:checked) label
.wpcf7-form-control-wrap[data-name="acceptance-gdpr"] .wpcf7-list-item:has(input:checked) label {
  border-color: var(--primary, #F68B29);
  background-color: color-mix(in srgb, var(--primary, #F68B29) 10%, white);
  color: var(--dark);
}

.wpcf7-form-control-wrap[data-name="checkbox-area-de-interes"] input[type="checkbox"],
.wpcf7-form-control-wrap[data-name="checkbox-otras-soluciones"] input[type="checkbox"],
.wpcf7-form-control-wrap[data-name="checkbox-474"] input[type="checkbox"],
.wpcf7-form-control-wrap[data-name="acceptance-gdpr"] input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin: 0 !important;
    border: 2px solid var(--base);
    border-radius: 6px;
    cursor: pointer;
    color: currentColor;
    transition: background-color .2s ease, border-color .2s ease;
}

.wpcf7-form-control-wrap[data-name="checkbox-area-de-interes"] input[type="checkbox"]::after,
.wpcf7-form-control-wrap[data-name="checkbox-otras-soluciones"] input[type="checkbox"]::after,
.wpcf7-form-control-wrap[data-name="checkbox-474"] input[type="checkbox"]::after,
.wpcf7-form-control-wrap[data-name="cacceptance-gdpr"] input[type="checkbox"]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 13px no-repeat;
    opacity: 0;
    transform: scale(.6);
    transition: opacity .15s ease, transform .15s ease;
}

.wpcf7-form-control-wrap[data-name="checkbox-area-de-interes"] input[type="checkbox"]:checked,
.wpcf7-form-control-wrap[data-name="checkbox-otras-soluciones"] input[type="checkbox"]:checked,
.wpcf7-form-control-wrap[data-name="checkbox-474"] input[type="checkbox"]:checked,
.wpcf7-form-control-wrap[data-name="acceptance-gdpr"] input[type="checkbox"]:checked {
    background-color: var(--primary, #F68B29);
    border-color: var(--primary, #F68B29);
}

.wpcf7-form-control-wrap[data-name="checkbox-area-de-interes"] input[type="checkbox"]:checked::after,
.wpcf7-form-control-wrap[data-name="checkbox-otras-soluciones"] input[type="checkbox"]:checked::after,
.wpcf7-form-control-wrap[data-name="checkbox-474"] input[type="checkbox"]:checked::after,
.wpcf7-form-control-wrap[data-name="acceptance-gdpr"] input[type="checkbox"]:checked::after  {
    opacity: 1;
    transform: scale(1);
}

.wpcf7-form-control-wrap[data-name="checkbox-area-de-interes"] .wpcf7-list-item-label,
.wpcf7-form-control-wrap[data-name="checkbox-otras-soluciones"] .wpcf7-list-item-label,
.wpcf7-form-control-wrap[data-name="checkbox-474"] .wpcf7-list-item-label,
.wpcf7-form-control-wrap[data-name="acceptance-gdpr"] .wpcf7-list-item-label {
    color: currentColor;
}

@media screen and (max-width: 767px) {
    .wpcf7-form-control-wrap[data-name="checkbox-area-de-interes"] .wpcf7-list-item,
    .wpcf7-form-control-wrap[data-name="checkbox-otras-soluciones"] .wpcf7-list-item,
    .wpcf7-form-control-wrap[data-name="checkbox-474"] .wpcf7-list-item,
    .wpcf7-form-control-wrap[data-name="acceptance-gdpr"] .wpcf7-list-item  {
        width: 100%;
    }
}


.nav-menu-highlight {
    border-top: 1px solid var(--border-color);
    padding-top: .35rem; margin-top: .35rem;
}
.nav-menu-highlight a:hover {
    background-color: var(--primary);
    color: var(--base) !important;
}

@media screen and (max-width: 781px) {
  .wpcf7 form input[type=submit] { width: 100%;}
}

*:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 0px;
}

.bs-footer-logo {
    max-width: 148px;
    width: 100%;
    height: auto;
    margin-bottom: 1rem;
}

.menu-coming-soon-item a {
    pointer-events: none;
    color: lightgray !important;
}

.menu-coming-soon-item a:hover {
    pointer-events: none;
    background-color: lightgray !important;
    color: gray !important;
}

.ul-footer-menu {
    list-style: none;
    padding-left: 0;
    margin-bottom: 2.4rem;
}

.ul-footer-menu li {
    margin-bottom: 0.5rem;
}

.ul-legal-menu li {display: inline-block; margin-right: .5rem; margin-bottom: 0.5rem;}

.footer-menu-wrapper {
  border-left: 1px solid var(--base);
  border-right: 1px solid var(--base);
}

.site-branding-footer img {
    max-width: 248px;
    width: 100%;
    height: auto;
    margin-bottom: 1rem;
}

@media screen and (max-width: 991px) {
  .ul-footer-menu {
    text-align: center;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #F4F4F11A;
}

.footer-menu-wrapper {
  border: 0px !important;
}

footer .col-lg-6.text-right,
footer .col-lg-5,
footer .col-lg-2.fs-small,
#legal-menu {
  text-align: center !important;}
}

footer .col-lg-2.fs-small {
  line-height: 1.6;
}

/* @media screen and (max-width: 680px) {
  .ul-footer-menu {
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-direction: column;
}
  .ul-footer-menu li {
    display: block;
}
} */

main#content ul {
  list-style: none; /* remove default marker */
  padding-left: 2rem;
}

main#content ul li {
  position: relative;
}

main#content ul li::before {
    content: "";
    position: absolute;
    left: -2rem;
    top: 0.4em;
    width: 15px;
    height: 8px;
    border-left: 3px solid var(--primary);
    border-bottom: 3px solid var(--primary);
    transform: rotate(-45deg);
}

main#content .not-included li {
  list-style: none;
  position: relative;
}

main#content .not-included li::before,
main#content .not-included li::after {
  content: "";
  position: absolute;
  left: -2rem;
  top: 0.65em;
  width: 12px;
  height: 2px;
  background-color: rgb(129, 129, 129) !important;
  border: none;
}

/* first line */
.not-included li::before {
  transform: rotate(45deg) !important;
}

/* second line */
.not-included li::after {
  transform: rotate(-45deg) !important;
}

#cmplz-document p, #cmplz-document li, #cmplz-document td, .editor-styles-wrapper .cmplz-unlinked-mode p, .editor-styles-wrapper .cmplz-unlinked-mode li, .editor-styles-wrapper .cmplz-unlinked-mode td {
    font-size: var(--wp--preset--font-size--paragraph) !important;
    line-height: 1.35;
}

/* DD LANDING */
.icon-individuell-size {
    width: 62px !important;
    height: 62px !important;
    border-radius: 100vw !important;
}

/* DD FOOTER */

.dd-footer {
  border-top-left-radius: 100vw;
  border-top-right-radius: 100vw;
  overflow: hidden;
  min-height: 65vw;
}

.icon-instagram {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 26 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip-ig)'%3E%3Cpath d='M19.478 0L5.69 0.003C2.683 0.276 0.274 2.681 0.003 5.69L0 19.429C0.214 22.446 2.583 24.849 5.566 25.212H19.648C19.991 25.127 20.34 25.084 20.682 24.99C22.743 24.426 24.423 22.741 24.99 20.682C25.084 20.34 25.126 19.991 25.212 19.648V5.566C24.958 2.666 22.367 0.189 19.478 0ZM22.654 19.33C22.487 21.082 21.082 22.486 19.33 22.654H5.885C4.137 22.491 2.723 21.081 2.561 19.331L2.569 5.795C2.766 4.137 4.095 2.786 5.753 2.578L19.377 2.564C21.104 2.749 22.495 4.153 22.654 5.885V19.33Z' fill='black'/%3E%3Cpath d='M11.9081 6.31889C7.44215 6.69589 4.96415 11.7169 7.01815 15.6109C9.62615 20.5569 17.1921 19.7959 18.6881 14.3789C19.9211 9.91589 16.4751 5.93289 11.9081 6.31889ZM16.2271 13.6909C15.4521 16.5949 11.5231 17.2889 9.65415 14.9939C7.87015 12.8029 9.17915 9.17289 12.0551 8.87889C14.8851 8.58989 16.9691 10.9069 16.2261 13.6899L16.2271 13.6909Z' fill='black'/%3E%3Cpath d='M18.7013 5.03699C17.1203 5.26199 17.3683 7.76699 19.0773 7.57899C20.7133 7.39899 20.4623 4.78599 18.7013 5.03699Z' fill='black'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip-ig'%3E%3Crect width='25.212' height='25.212' fill='black'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 26 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip-ig)'%3E%3Cpath d='M19.478 0L5.69 0.003C2.683 0.276 0.274 2.681 0.003 5.69L0 19.429C0.214 22.446 2.583 24.849 5.566 25.212H19.648C19.991 25.127 20.34 25.084 20.682 24.99C22.743 24.426 24.423 22.741 24.99 20.682C25.084 20.34 25.126 19.991 25.212 19.648V5.566C24.958 2.666 22.367 0.189 19.478 0ZM22.654 19.33C22.487 21.082 21.082 22.486 19.33 22.654H5.885C4.137 22.491 2.723 21.081 2.561 19.331L2.569 5.795C2.766 4.137 4.095 2.786 5.753 2.578L19.377 2.564C21.104 2.749 22.495 4.153 22.654 5.885V19.33Z' fill='black'/%3E%3Cpath d='M11.9081 6.31889C7.44215 6.69589 4.96415 11.7169 7.01815 15.6109C9.62615 20.5569 17.1921 19.7959 18.6881 14.3789C19.9211 9.91589 16.4751 5.93289 11.9081 6.31889ZM16.2271 13.6909C15.4521 16.5949 11.5231 17.2889 9.65415 14.9939C7.87015 12.8029 9.17915 9.17289 12.0551 8.87889C14.8851 8.58989 16.9691 10.9069 16.2261 13.6899L16.2271 13.6909Z' fill='black'/%3E%3Cpath d='M18.7013 5.03699C17.1203 5.26199 17.3683 7.76699 19.0773 7.57899C20.7133 7.39899 20.4623 4.78599 18.7013 5.03699Z' fill='black'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip-ig'%3E%3Crect width='25.212' height='25.212' fill='black'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.dd-social-icon-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background-color: var(--dark);
    margin:0;
    margin-left: .25rem;
    color: #fff;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.toTheTop {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background-color: #04090d70;
    border:1px solid #DEDAD7;
    position: fixed;
    z-index: 999;
    right: var(--wp--preset--spacing--global-padding);
    bottom: var(--wp--preset--spacing--global-padding);
    transition: all 600ms ease-in-out;
    opacity: 0;
}

.toTheTop span {
    display: inline-block;
    width: 8px;
    height: 8px;
    border: 1px solid white;
    border-bottom: 0px;
    border-left: 0;
    transform: rotate(-45deg);
}

.isActive {
    opacity: 1;
}

/* =========================================================
   SINGLE PLAYBOOK (single-playbook.php)
   Solo lo que no cubre ya el framework (grid, btn, figure-square,
   playbook-embed). El resto de la plantilla usa clases existentes:
   .row/.col-lg-*, .btn*, .border, .rounded, .fs-*, spacing utilities, etc.
   ========================================================= */

/* Compensa la cabecera fija + la sub-nav sticky al saltar a una sección
   (anclas #pb-*, scrollIntoView() del scrollspy). */
.playbook-section-block {
    scroll-margin-top: 150px;
}

/* "← Volver" - mismo estilo que .bs-formacion-header-back (bloque ACF
   "Be-skiller Formacion Header" en fleeex-custom-blocks). */
.pb-back {
    display: inline-block;
    margin-bottom: 16px;
    text-decoration: none;
}

/* SINGLE BLOG - categorías en el hero: mismo estilo que .bs-blog-tema
   (bloque ACF "bs-blog-list" en fleeex-custom-blocks). */
.bs-blog-tema {
	display: inline-flex;
	align-items: center;
	gap: .6em;
}

.bs-blog-tema::before {
	content: "";
	width: .6em;
	height: .6em;
	border-radius: 50%;
	background: #e8913f;
	flex-shrink: 0;
}

.bs-blog-tema a {
	color: inherit;
	text-decoration: none;
}

/* Resumen ejecutivo: tarjeta oscura a dos columnas (texto + qué aprenderás
   y datos rápidos). Fondo a sangre y divisor interno: no encaja en el grid
   con gutters de .row/.col-lg-*, así que es su propio layout. */
.pb-exec {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    background: var(--dark);
    color: var(--base, #fff);
    overflow: hidden;
}
.pb-exec-main {
    padding: 48px;
}
.pb-exec-main .pb-section-label {
    color: var(--primary);
}
/* .pb-exec-main p {
    font-size: 28px;
    line-height: 1.35;
    font-weight: 600;
} */
.pb-exec-side {
    padding: 48px;
    border-left: 1px solid rgba(255, 255, 255, .12);
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.pb-exec-side .pb-section-label {
    color: rgba(255, 255, 255, .65);
}
.pb-exec-side ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pb-exec-side li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 14px;
    line-height: 1.45;
}
.pb-exec-side li::before {
    content: "";
    width: 6px;
    height: 6px;
    margin-top: 6px;
    background: var(--primary);
    flex-shrink: 0;
}
.pb-exec-facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px 20px;
    font-size: 15px;
}
.pb-exec-facts dt {
    color: rgba(255, 255, 255, .65);
}
.pb-exec-facts dd {
    margin: 0;
    font-weight: 700;
}
@media screen and (max-width: 991px) {
    .pb-exec {
        grid-template-columns: 1fr;
    }
    .pb-exec-side {
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, .12);
    }
    .pb-exec-main,
    .pb-exec-side {
        padding: 28px;
    }
    .pb-exec-main p {
        font-size: 21px;
    }
}

/* Marcador cuadrado del tema (ACF "tema"), enlace a su archivo */
.pb-cat {
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: inherit;
    text-decoration: none;
}
.pb-cat::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--primary);
    margin-right: 8px;
    flex-shrink: 0;
}

/* Pills de metadatos en el hero: lectura, duración de vídeo, nº de pasos */
.pb-badge {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 14px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
}

/* Portada alternativa cuando el Playbook no tiene imagen destacada:
   caja cuadrada con el símbolo del marco de trabajo (ACF "portada_glyph") */
.pb-cover {
    position: relative;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--soft, #F0F5F5);
    border: 1px solid var(--border-color);
}
.pb-cover svg {
    width: 55%;
    height: auto;
    color: var(--dark);
}
.pb-cover-mark {
    position: absolute;
    top: 16px;
    left: 16px;
    font-family: var(--head, inherit);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
}

/* Navegación interna a las 7 secciones del Playbook: sticky bajo la cabecera
   fija, con estado activo (.on) llevado por el scrollspy del script al
   final del archivo. */
.pb-subnav {
    position: sticky;
    top: var(--navbar-height);
    z-index: 10;
    background: #fff;
    overflow-x: auto;
    scrollbar-width: none;
}

.admin-bar .pb-subnav {
    top: calc(var(--navbar-height) + 32px);
}
.pb-subnav::-webkit-scrollbar {
    display: none;
}
.pb-subnav a {
    display: inline-flex;
    align-items: center;
    padding: 4px 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--muted, inherit);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
}
.pb-subnav a:hover {
    color: var(--dark);
}
.pb-subnav a.on {
    color: var(--dark);
    border-bottom-color: var(--primary);
}

/* Eyebrow que abre cada sección numerada (Resumen, Ideas, Marco...) */
.pb-section-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted, #4A5458);
}
/* Badge numerado ("03", "05"...) al inicio del eyebrow */
.pb-section-label b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    background: var(--dark);
    color: var(--base);
    font-size: 12px;
    letter-spacing: normal;
    text-transform: none;
    border-radius: 2px;
}

/* Numeración pequeña dentro de cada tarjeta de "Ideas clave" */
.pb-idea-n {
    font-size: 12px;
    font-weight: 700;
    color: var(--muted, #4A5458);
    text-transform: uppercase;
}

/* Tarjetas de "Aplicación práctica": icono + lista con marcador cuadrado */
.pb-apply-col h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.pb-apply-col .pb-ic {
    display: flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    background: var(--soft, #F0F5F5);
    border-radius: 4px;
    flex-shrink: 0;
}
.pb-apply-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.pb-apply-col li {
    display: flex;
    gap: 10px;
    line-height: 1.5;
}
.pb-apply-col li::before {
    content: "";
    width: 6px;
    height: 6px;
    margin-top: 8px;
    background: var(--primary);
    flex-shrink: 0;
}

/* Caja del caso breve, al cierre de "Aplicación práctica" */
.pb-case {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 24px;
    align-items: center;
    background: #F5F5F5;
    border: 1px solid #E0E0E0;
}
@media screen and (max-width: 991px) {
    .pb-case {
        grid-template-columns: 1fr;
    }
}

/* Enlaces a recursos relacionados (podcasts, formaciones, otros Playbooks) */
.pb-res-item {
    padding: 14px 0;
    border-top: 1px solid var(--border-color);
    border-radius: 0;
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}
.pb-res-item:hover {
    border-color: var(--dark);
}
.pb-res-type {
    color: var(--muted, #4A5458);
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* "Marco de trabajo": selector de pasos (cuadrados numerados unidos por una
   línea) + panel de detalle a dos columnas. El paso activo se controla con
   el pequeño script al final de single-playbook.php. */
.pb-fw {
    background: var(--soft, #F0F5F5);
}
.pb-fw-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 20px;
}
.pb-fw-steps::before {
    content: "";
    position: absolute;
    top: 27px;
    left: 12.5%;
    right: 12.5%;
    height: 2px;
    background: var(--primary);
}
.pb-fw-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: inherit;
}
.pb-fw-num {
    display: flex;
    width: 56px;
    height: 56px;
    align-items: center;
    justify-content: center;
    background: var(--base, #fff);
    border: 2px solid var(--dark);
    font-weight: 800;
    font-size: 18px;
    transition: var(--transition);
}
.pb-fw-step.is-active .pb-fw-num {
    background: var(--dark);
    color: var(--base, #fff);
}
.pb-fw-name {
    font-size: 16px;
}
.pb-fw-short {
    font-size: 14px;
    line-height: 1.45;
    color: var(--muted, #4A5458);
    max-width: 220px;
}
.pb-fw-detail {
    margin-top: 36px;
    padding: 28px 32px;
    background: var(--base, #fff);
    border-radius: var(--border-radius);
}
/* .row sets display:flex, which otherwise beats the [hidden] attribute
   (same specificity, but the framework's author rule loads after the
   browser's UA stylesheet) — this wins on specificity instead. */
.pb-fw-detail[hidden] {
    display: none;
}
.pb-fw-detail ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pb-fw-detail li {
    display: flex;
    gap: 10px;
    line-height: 1.45;
}
.pb-fw-detail li::before {
    content: "";
    width: 6px;
    height: 6px;
    margin-top: 7px;
    background: var(--primary);
    flex-shrink: 0;
}

@media screen and (max-width: 767px) {
    .pb-fw-steps {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .pb-fw-steps::before {
        top: 28px;
        bottom: 28px;
        left: 27px;
        right: auto;
        width: 2px;
        height: auto;
    }
    .pb-fw-step {
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 16px;
        padding: 10px 0;
    }
    .pb-fw-short {
        display: none;
    }
}

/* =========================================================
   SINGLE PODCAST (single-podcast.php)
   Comparte varias clases con single-playbook.php (.pb-cat, .pb-badge,
   .pb-section-label, .pb-res-item, .playbook-section-block): mismo
   lenguaje visual, misma familia de episodios/recursos. Aquí solo lo
   propio del artículo editorial: avatar, tipografía del contenido,
   índice lateral y la tarjeta CTA oscura.
   ========================================================= */

/* Etiqueta "CONVERSACIÓN + ARTÍCULO" junto a la categoría */
.pd-tag-outline {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 10px;
    border: 1px solid var(--dark);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    border-radius: 4px;
}

/* Iniciales del invitado, en círculo */
.pd-avatar {
    display: flex;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--soft, #F0F5F5);
    border: 1px solid var(--border-color);
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

/* Tipografía del artículo: el propio post_content (títulos, párrafos,
   el vídeo de YouTube embebido como wp:embed) ya es la pieza editorial. */
.pd-article-head {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}
.pd-article h2,
.pd-article h3 {
    /* Offset para los enlaces del "Índice del artículo": que el título no
       quede pegado (o tapado) por la cabecera fija al saltar a su ancla. */
    scroll-margin-top: calc(var(--navbar-height) + 24px);
}
.pd-article h2 {
    margin: 44px 0 14px;
    font-size: 26px;
    line-height: 1.25;
    font-weight: 700;
}
.pd-article h3 {
    margin: 36px 0 12px;
    font-size: 21px;
    line-height: 1.3;
    font-weight: 700;
}
.pd-article p {
    font-size: 17px;
    line-height: 1.7;
}
.pd-article blockquote {
    margin: 24px 0;
    padding: 20px 24px;
    border-left: 3px solid var(--primary);
    background: var(--soft, #F0F5F5);
    font-size: 18px;
    font-style: italic;
}
.pd-article .wp-block-embed {
    margin: 0 0 8px;
}

/* Barra lateral: pila de tarjetas con la misma altura de "respiro" */
.pd-side {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: sticky;
    top: calc(var(--navbar-height) + 24px);
}

/* "En este episodio": misma marca cuadrada naranja que .pb-exec-side li */
.pd-learn {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pd-learn li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 14px;
    line-height: 1.45;
}
.pd-learn li::before {
    content: "";
    width: 6px;
    height: 6px;
    margin-top: 6px;
    background: var(--primary);
    flex-shrink: 0;
}

/* Índice del artículo: enlaces a los h2/h3 reales del contenido */
.pd-toc {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pd-toc a {
    font-size: 14px;
    line-height: 1.4;
    color: inherit;
    text-decoration: none;
}
.pd-toc a:hover {
    text-decoration: underline;
}

/* Tarjeta CTA oscura hacia formaciones relacionadas */
.pd-cta {
    background: var(--dark);
    color: var(--base, #fff);
}
.pd-cta p {
    color: rgba(255, 255, 255, .65);
}

/* Lista de formaciones relacionadas (campo bidireccional con el CPT
   formacion) dentro de la tarjeta CTA, cuando no está vacía. */
.pd-cta-formaciones {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pd-cta-formaciones li {
    border-top: 1px solid rgba(255, 255, 255, .15);
    padding-top: 10px;
}
.pd-cta-formaciones li:first-child {
    border-top: 0;
    padding-top: 0;
}
.pd-cta-formaciones a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--base, #fff);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
}
.pd-cta-formaciones a:hover {
    color: var(--primary, #F68B29);
}
.pd-cta-formaciones a::after {
    content: "→";
    flex-shrink: 0;
}

/* Tarjetas "descubre también" (Podcast / Playbooks) en single-blog.php */
.bs-discover-card {
    background: var(--base, #F4F4F1);
    color: inherit;
    text-decoration: none;
    transition: background .25s ease;
}
.bs-discover-card:hover {
    background: #E7E7E2;
}
.bs-discover-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--dark);
    color: #fff;
}
.bs-discover-arrow {
    transition: transform .25s ease;
}
.bs-discover-card:hover .bs-discover-arrow {
    transform: translateX(3px);
}

/* Miniatura pequeña en "Episodios relacionados" */
.pd-rel-thumb {
    width: 110px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 4px;
}
.pd-rel-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media screen and (max-width: 991px) {
    .pd-side {
        position: static;
        margin-top: 32px;
    }
}

/* ─────────────────────────────────────────────────────
APRENDER / ENSEÑAR — highlight que rota entre las tres
frases en bucle infinito (3 s cada una, ciclo de 9 s).
Un único @keyframes: cada elemento arranca desfasado
con un animation-delay negativo, así nunca hay dos
frases a opacidad 1 a la vez y el bucle no salta.
───────────────────────────────────────────────────── */
@keyframes bs-aprender-turno {
    0%, 28%      { opacity: 1; }
    33.33%, 95%  { opacity: 0.25; }
    100%         { opacity: 1; }
}

#aprender-a-ensenar,
#aprender-a-aprender,
#ensenar-a-aprender {
    animation: bs-aprender-turno 6s ease-in-out infinite;
}

/* paso 1 */
#aprender-a-ensenar  { animation-delay: 0s; }
/* paso 2 */
#aprender-a-aprender { animation-delay: -2s; }
/* paso 3 */
#ensenar-a-aprender  { animation-delay: -4s; }

@media (prefers-reduced-motion: reduce) {
    #aprender-a-ensenar,
    #aprender-a-aprender,
    #ensenar-a-aprender {
        animation: none;
        opacity: 1;
    }
}