/* Opten · Pieles: 6 texturas de marca. Base = textura pura; reglas por sección = velos y máscaras de lectura. */
.tx{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;contain:strict;background:#0B0F0D;--tk:1}
[data-motion=soft] .tx{--tk:1.9}
.tx *,.tx::before,.tx::after{animation-play-state:paused!important}
.tx.tx-run *,.tx.tx-run::before,.tx.tx-run::after{animation-play-state:running!important}
.tx canvas,.tx b{position:absolute;display:block}

/* 1 · SEDA — ondas satinadas en diagonal (shader WebGL; respaldo CSS) */
.tx-seda{background:radial-gradient(70% 60% at 92% 8%,rgba(187,255,59,.35),transparent 60%),radial-gradient(90% 80% at 80% 25%,rgba(0,168,107,.5),transparent 70%),linear-gradient(145deg,#0B0F0D 35%,#003822 70%,#00A86B)}
.tx-seda canvas{inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.6s ease}
.tx-seda.tx-ok canvas{opacity:1}

/* 2 · TRAMA — semitono que crece desde la esquina (canvas, se pinta una vez) */
.tx-trama canvas{inset:-3%;width:106%;height:106%;opacity:0;transition:opacity 1.2s ease;animation:txTrama calc(26s*var(--tk)) ease-in-out infinite alternate}
.tx-trama.tx-ok canvas{opacity:1}
@keyframes txTrama{from{transform:translate3d(-1.2%,1%,0)}to{transform:translate3d(1.2%,-1%,0)}}

/* 3 · BANDAS — curvas superpuestas que nacen de una esquina (SVG estático) */
.tx-bandas::before{content:"";position:absolute;inset:-4%;background:url(tx-bandas.svg) right bottom/cover no-repeat;transform-origin:100% 100%;animation:txBand calc(34s*var(--tk)) ease-in-out infinite alternate}
@keyframes txBand{from{transform:rotate(0) scale(1)}to{transform:rotate(-2.2deg) scale(1.035)}}

/* 4 · OLA — ola suave y difusa (CSS puro, sin blur) */
.tx-ola::before{content:"";position:absolute;left:-30%;right:-30%;top:-15%;bottom:-25%;background:radial-gradient(46% 17% at 43% 44%,#0B0F0D 40%,rgba(11,15,13,0) 100%),radial-gradient(16% 6% at 60% 55%,rgba(187,255,59,.32),rgba(187,255,59,0) 100%),radial-gradient(56% 20% at 50% 54%,rgba(0,168,107,.8),rgba(0,168,107,.28) 45%,rgba(0,56,34,0) 76%),radial-gradient(80% 42% at 58% 92%,rgba(0,56,34,.95),rgba(0,56,34,0) 76%);transform:rotate(-11deg);animation:txOla calc(28s*var(--tk)) ease-in-out infinite alternate}
@keyframes txOla{from{transform:rotate(-11deg) translate3d(-3%,2%,0)}to{transform:rotate(-6deg) translate3d(4%,-3%,0) scaleY(1.12)}}

/* 5 · NIVEL — curvas de nivel finas (SVG generado) */
.tx-nivel b{top:0;bottom:0;left:-5%;width:110%;opacity:0;transition:opacity 1.4s ease;animation:txNivel calc(38s*var(--tk)) ease-in-out infinite alternate}
.tx-nivel.tx-ok b{opacity:1}
.tx-nivel svg{width:100%;height:100%;max-width:none}
@keyframes txNivel{from{transform:translate3d(-2.5%,0,0)}to{transform:translate3d(2.5%,-1%,0)}}

/* 6 · BARRIDO — haz de luz diagonal (CSS puro) */
.tx-barrido{background:linear-gradient(118deg,#0B0F0D 18%,rgba(0,56,34,.9) 40%,#00573A 50%,rgba(0,56,34,.9) 60%,#0B0F0D 84%)}
.tx-barrido::before{content:"";position:absolute;top:-40%;bottom:-40%;left:0;width:55%;background:linear-gradient(90deg,rgba(0,168,107,0) 10%,rgba(0,168,107,.32) 40%,rgba(187,255,59,.6) 50%,rgba(0,168,107,.3) 60%,rgba(0,168,107,0) 90%);transform:translate3d(-120%,0,0) skewX(-30deg);animation:txSweep calc(12s*var(--tk)) cubic-bezier(.45,0,.2,1) infinite}
.tx-barrido::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 70% 30%,rgba(187,255,59,.14),transparent 70%)}
@keyframes txSweep{0%{transform:translate3d(-120%,0,0) skewX(-30deg)}70%,100%{transform:translate3d(260%,0,0) skewX(-30deg)}}

/* ---- Aplicación en la web: velos y máscaras para que el texto se lea ---- */
#inicio,#problema,#como,#diferencia,#proposito,#contacto{isolation:isolate}
#inicio .tx::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,15,13,.94) 0%,rgba(11,15,13,.78) 34%,rgba(11,15,13,.18) 68%,rgba(11,15,13,0)),linear-gradient(180deg,rgba(11,15,13,0) 72%,#0B0F0D)}
#problema .tx{opacity:.9;-webkit-mask:linear-gradient(180deg,transparent,#000 22%,#000 75%,transparent);mask:linear-gradient(180deg,transparent,#000 22%,#000 75%,transparent)}
#como .tx{background:none;opacity:.55;-webkit-mask:radial-gradient(95% 85% at 0% 100%,#000 25%,transparent 80%);mask:radial-gradient(95% 85% at 0% 100%,#000 25%,transparent 80%)}
#diferencia .tx{background:none;opacity:.5;-webkit-mask:radial-gradient(110% 95% at 88% 45%,#000 25%,transparent 82%);mask:radial-gradient(110% 95% at 88% 45%,#000 25%,transparent 82%)}
#proposito .tx{opacity:.8;-webkit-mask:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);mask:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent)}
#contacto .tx{background:none;opacity:.85;-webkit-mask:radial-gradient(120% 110% at 100% 100%,#000 30%,transparent 78%);mask:radial-gradient(120% 110% at 100% 100%,#000 30%,transparent 78%)}
@media (max-width:900px){
#inicio .tx::after{background:linear-gradient(180deg,rgba(11,15,13,.35) 0%,rgba(11,15,13,.62) 22%,rgba(11,15,13,.28) 40%,rgba(11,15,13,.88) 56%,#0B0F0D 70%)}
#como .tx{opacity:.38;-webkit-mask:radial-gradient(140% 32% at 0% 100%,#000 25%,transparent 85%);mask:radial-gradient(140% 32% at 0% 100%,#000 25%,transparent 85%)}
#contacto .tx{transform:scaleY(-1);-webkit-mask:radial-gradient(150% 42% at 100% 100%,#000 25%,transparent 80%);mask:radial-gradient(150% 42% at 100% 100%,#000 25%,transparent 80%)}#contacto .tx::before{background-size:auto 62%}
}