/* Bolboreta Labs — Portada: estilos propios */

/* Ola de color en el título del hero: un violeta recorre las letras de izquierda a derecha
   (cada letra pasa a violeta y vuelve a negro). Arranca al terminar la animación de entrada. Ajustes: */
:root {
    --hero-wave-color: #9f3cff;  /* color de la ola */
    --hero-wave-cycle: 5s;       /* cada cuánto se repite la ola */
    --hero-wave-step: .12s;      /* retardo entre una letra y la siguiente */
    --hero-wave-delay: 1s;       /* espera tras la animación de entrada antes de la primera ola */
}
@keyframes hero-wave {
    0%, 20%, 100% { color: var(--tp-common-black); }
    10% { color: var(--hero-wave-color); }
}
.tp-hero-title.hero-wave-on .hero-wave-char {
    animation: hero-wave var(--hero-wave-cycle) ease-in-out infinite;
    animation-delay: calc(var(--hero-wave-delay) + var(--hero-wave-i, 0) * var(--hero-wave-step));
}
@media (prefers-reduced-motion: reduce) {
    .tp-hero-title.hero-wave-on .hero-wave-char { animation: none; }
}



/* ===== Hero de portada: base (palabra Poppins a todo el ancho, textos, accesos, slide de palabras) ===== */
.w3-word { font-family: var(--tp-ff-poppins); font-weight: 800; font-size: calc((100vw - 70px) * 0.1724); /* igual que el ajuste por JS: sin salto al cargar */ line-height: .8; letter-spacing: -.02em; text-transform: uppercase; color: #000; white-space: nowrap; margin: 0; text-align: center; }
.w3-claim { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: #000; margin: 0; }
.w3-sent { font-size: 17px; line-height: 1.4; font-weight: 500; letter-spacing: -.01em; color: #000; margin: 0; }
.w3-n { color: #9f3cff; font-size: 11px; letter-spacing: .14em; font-weight: 700; }
.w3-acc { list-style: none; margin: 0; padding: 0; }
.w3-acc a { color: #000; }
.w3-acc i { font-style: normal; }
.w3-acc a:hover b { color: #9f3cff; }
.w3-acc b { transition: color .3s ease; }
.hero-in { opacity: 1; transform: none; transition: opacity .75s ease var(--d, 0s), transform .75s ease var(--d, 0s); } /* visible desde el primer pintado (bajo la cortina del preloader) */
body.hero-pre .hero-in { opacity: 0; transform: translateY(22px); transition: none; }   /* estado inicial de la entrada, aplicado al abrirse la cortina */
body.hero-ready .hero-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .hero-in { transition: none; } }

/* marco de luz: rectángulo fino bajo la cabecera, marcas de esquina y un destello violeta que recorre todo el perímetro */
.w3-frame { position: absolute; left: 24px; right: 24px; top: 112px; bottom: 24px; pointer-events: none; }
.w3-frame-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.w3-frame-line { fill: none; stroke: rgba(0,0,0,.16); stroke-width: 1; }
.w3-frame-light { fill: none; stroke: #9f3cff; stroke-width: 2; stroke-linecap: round; animation: w3-run 8s linear infinite; }
.w3-frame-glow { fill: none; stroke: #9f3cff; stroke-width: 6; stroke-linecap: round; opacity: .18; animation: w3-run 8s linear infinite; }
@keyframes w3-run { to { stroke-dashoffset: calc(-1 * var(--w3-per, 4000px)); } }
.w3-c { position: absolute; width: 12px; height: 12px; border: 2px solid #000; }
.w3-c-tl { left: -1px; top: -1px; border-right: 0; border-bottom: 0; } .w3-c-tr { right: -1px; top: -1px; border-left: 0; border-bottom: 0; }
.w3-c-bl { left: -1px; bottom: -1px; border-right: 0; border-top: 0; } .w3-c-br { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }
@media (prefers-reduced-motion: reduce) { .w3-frame-light, .w3-frame-glow { animation: none; } }

/* cartel a pantalla completa: escenario dentro del marco, esquinas y palabra centrada */
.w3-poster { position: relative; height: 100vh; min-height: 620px; }
.w3-stage { position: absolute; left: 24px; right: 24px; top: 112px; bottom: 24px; display: flex; flex-direction: column; justify-content: center; padding: 0 48px; }
.w3-corner { position: absolute; }
.w3-tl { left: 30px; top: 26px; } .w3-tr { right: 30px; top: 26px; } .w3-bl { left: 30px; bottom: 26px; max-width: 420px; } .w3-br { right: 30px; bottom: 24px; }
.w3-meta { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: #000; }

/* cabecera «claim + botón» y tres columnas de accesos (22 y 24) */
.w3-split-head { padding-top: 150px; display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
.w3-split-sent { font-size: 28px; line-height: 1.2; max-width: 620px; margin-top: 14px; }
.w3-cols3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.w3-col { display: block; position: relative; border-top: 1px solid rgba(0,0,0,.2); padding: 16px 40px 0 0; color: #000; }
.w3-col b { display: block; font-size: 24px; font-weight: 600; letter-spacing: -.02em; margin: 8px 0 6px; transition: color .3s ease; }
.w3-col small { display: block; font-size: 14px; color: #666; }
.w3-col i { position: absolute; right: 0; top: 16px; font-style: normal; font-size: 18px; }
.w3-col:hover b { color: #9f3cff; }

/* slide horizontal de palabras (Thunder de contorno) */
.w3-slide { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.w3-slide-track { list-style: none; margin: 0; padding: 0; display: flex; gap: .5em; width: max-content; animation: w3-slide 90s linear infinite; }
.w3-slide-track li { font-family: var(--tp-ff-thunder-bold); text-transform: uppercase; line-height: .9; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(0,0,0,.14); }
@keyframes w3-slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .w3-slide-track { animation: none; } }
@media (max-width: 991px) {
    .w3-frame, .w3-stage { left: 12px; right: 12px; top: 100px; bottom: 12px; } .w3-stage { padding: 0 16px; }
    .w3-tl, .w3-bl { left: 18px; } .w3-tr, .w3-br { right: 18px; } .w3-tl, .w3-tr { top: 16px; } .w3-bl { bottom: 78px; max-width: 80%; } .w3-br { left: 18px; right: auto; bottom: 16px; } .w3-meta.w3-tr { display: none; }   /* móvil: sin meta arriba-dcha.; frase sobre el botón */
    .w3-poster { min-height: 0; }
}


/* Hero: las palabras pasan por detrás: slide horizontal de contorno gris en la franja de la palabra, tapado por las letras sólidas */
.w3-behind { position: relative; height: 100vh; min-height: 640px; display: flex; flex-direction: column; overflow: hidden; }
.w3-behind .w3-split-head { flex: 0 0 auto; }
.w3-behind-mid { position: relative; flex: 1 1 auto; display: flex; align-items: center; }
.w3-slide-behind { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 0; }
.w3-slide-behind .w3-slide-track li { font-size: 14vw; }
.w3-behind-word { position: relative; z-index: 1; width: 100%; }
.w3-behind-foot { flex: 0 0 auto; padding-bottom: 40px; }
@media (max-width: 991px) { .w3-behind { min-height: 0; } .w3-behind .w3-split-head { padding-top: 118px; flex-direction: column; gap: 14px; } .w3-split-sent { font-size: 18px; } .w3-slide-behind .w3-slide-track li { font-size: 22vw; } .w3-cols3 { grid-template-columns: 1fr; gap: 6px; } .w3-col { padding-top: 8px; } .w3-col b { font-size: 18px; margin: 2px 0; } .w3-col small { display: none; } .w3-col i { top: 8px; } .w3-behind-foot { padding-bottom: 16px; } }


/* Hero: luz violeta «Snake» por toda la primera pantalla (lienzo entre el slide de contorno y los textos).  */
.w3-snake { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.w3-behind .w3-split-head, .w3-behind-foot { position: relative; z-index: 2; }
.w3-behind-word { z-index: 2; }


/* Hero: línea de comandos que se escribe sola bajo la palabra */
.w3-term { margin: 22px 0 0; font: 500 20px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #000; letter-spacing: -.01em; text-align: left; }
.w3-term-p { color: #9f3cff; }
.w3-term-c { display: inline-block; width: 11px; height: 22px; background: #9f3cff; vertical-align: -4px; margin-left: 3px; animation: w3-blink 1s steps(1) infinite; }
@keyframes w3-blink { 50% { opacity: 0; } }
@media (max-width: 991px) { .w3-term { font-size: 15px; margin-top: 14px; } .w3-term-c { width: 9px; height: 17px; } }


/* Indicador de scroll: rueda de texto violeta, fija abajo a la derecha, siempre visible */
.back-to-top-wrapper { display: none !important; }   /* la rueda hace también de «volver arriba»: se retira el botón de la plantilla */


/* «Tres formas de aportar valor»: base común de las alternativas */
.tf-sec { background: #000; color: #fff; }
.tf-intro p { font-size: 22px; line-height: 1.4; letter-spacing: -.02em; }
.tf-h-small { font-size: 40px !important; }
.tf-num { display: block; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .14em; color: rgba(255,255,255,.5); }
.tf-title { font-family: var(--tp-ff-thunder-semibold); font-weight: 500; color: #9f3dff; font-size: clamp(36px, 3.6vw, 54px); line-height: 1; letter-spacing: -.01em; margin: 0; }
.tf-lead { color: #fff; font-size: 21px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; margin: 0 0 14px; }
.tf-p { color: #909090; font-size: 19px; line-height: 1.5; margin: 0 0 12px; } .tf-p:last-child { margin-bottom: 0; }
@media (max-width: 991px) { .tf-intro p { font-size: 18px; } }


/* Tres formas de aportar valor: paneles horizontales (diseño de la prueba 75) */

.tf-hz { --tf-pad: 90px; position: relative; padding: 0 0 0 var(--tf-pad); overflow: hidden; }   /* ancho completo con margen a la izquierda: más recorrido */
.tf-hz-bar { height: 2px; background: rgba(255,255,255,.12); margin-bottom: 44px; margin-left: calc(-1 * var(--tf-pad)); }   /* la barra ocupa el ancho total, sin el margen */ .tf-hz-bar b { display: block; height: 100%; width: 0; background: #9f3dff; }
.tf-track { display: flex; gap: 40px; will-change: transform; }
.tf-hpanel { position: relative; flex: 0 0 min(44vw, 620px); padding: 40px 36px 40px 0; border-left: 1px solid rgba(255,255,255,.12); padding-left: 32px; overflow: hidden; }
.tf-ghost { position: absolute; right: 10px; top: -10px; font-family: var(--tp-ff-poppins); font-weight: 800; font-size: 220px; line-height: 1; letter-spacing: -.05em; color: rgba(255,255,255,.07); pointer-events: none; }
.tf-hpanel .tf-title { margin: 12px 0 16px; position: relative; } .tf-hpanel .tf-lead, .tf-hpanel .tf-p { position: relative; }
@media (max-width: 991px) { .tf-track { flex-direction: column; gap: 20px; } .tf-hpanel { flex: none; padding: 24px 0 24px 20px; } .tf-ghost { font-size: 120px; } .tf-hz-bar { display: none; } }


/* «Cómo trabajamos»: las fichas se abren con el scroll (clase .is-open), no al pasar el ratón.
   El estado abierto copia el hover de la plantilla; el hover queda anulado mientras la ficha no esté abierta. */
.tp-experience-inner.is-open::before { top: auto; bottom: 0; height: 100%; background-color: var(--tp-common-white); }
.tp-experience-inner.is-open .tp-experience-content p { opacity: 1; visibility: visible; }
.tp-experience-inner.is-open .tp-experience-title { transform: translateY(0); color: var(--tp-common-black); }
.tp-experience-inner:not(.is-open):hover::before { height: 40%; background-color: transparent; }
.tp-experience-inner:not(.is-open):hover .tp-experience-content p { opacity: 0; visibility: hidden; }
.tp-experience-inner:not(.is-open):hover .tp-experience-title { transform: translateY(85px); color: var(--tp-common-white); }
@media (prefers-reduced-motion: reduce) { .tp-experience-inner::before, .tp-experience-content p, .tp-experience-title { transition: none !important; } }