/* ============================================================
   Detalle · movimiento sutil, sombras y acabado (26-sep-2026)
   Se carga en el <head> de las 16 paginas. Todo el movimiento
   se apaga con prefers-reduced-motion. Sin JS, nada queda oculto:
   la aparicion al hacer scroll solo aplica a lo que detalle.js marca.
   ============================================================ */
:root{--tt-ease:cubic-bezier(.2,.7,.2,1);--tt-ease-out:cubic-bezier(.16,1,.3,1);interpolate-size:allow-keywords}
::selection{background:#1D1D1F;color:#FFFFFF}

@media (prefers-reduced-motion:no-preference){

  /* 1 · Entrada del hero: kicker, titular, texto y botones suben en cascada */
  @keyframes ttUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
  @keyframes ttPhoto{from{opacity:0;transform:scale(1.035)}to{opacity:1;transform:none}}
  main > :first-child :is(.kicker,.ac-kicker,.eyebrow,.crumbs):not(.reveal){animation:ttUp .9s var(--tt-ease-out) both}
  main > :first-child h1:not(.reveal){animation:ttUp 1s var(--tt-ease-out) .08s both}
  main > :first-child :is(.lead,.ac-lead,.hero-sub):not(.reveal){animation:ttUp 1s var(--tt-ease-out) .18s both}
  main > :first-child :is(.actions,.ac-actions,.hero-ctas,.hero-cta):not(.reveal){animation:ttUp 1s var(--tt-ease-out) .28s both}
  main > :first-child .note{animation:ttUp 1s var(--tt-ease-out) .36s both}
  main > :first-child :is(.portrait,.ac-portrait) img{animation:ttPhoto 1.6s var(--tt-ease-out) .1s both}

  /* 2 · Aparicion al hacer scroll (clases que pone detalle.js) */
  .tt-rv{opacity:0;transform:translateY(20px);transition:opacity .9s var(--tt-ease-out),transform .9s var(--tt-ease-out);transition-delay:var(--tt-d,0ms)}
  .tt-rv.tt-in{opacity:1;transform:none}

  /* 3 · Botones: se elevan un pixel y proyectan sombra suave */
  :is(.btn,.btn-solid,.btn-primary,.btn-light,.btn-outline,.u-btn,.u-btn--solid,.tt-cta,.ac-btn){
    transition:transform .3s var(--tt-ease),box-shadow .3s var(--tt-ease),background-color .2s,color .2s,border-color .2s !important}
  :is(.btn,.btn-solid,.btn-primary,.btn-light,.u-btn--solid,.tt-cta,.ac-btn):hover{transform:translateY(-1px) !important;
    box-shadow:0 1px 2px rgba(0,0,0,.08),0 12px 28px -12px rgba(0,0,0,.45) !important}
  :is(.btn,.btn-solid,.btn-primary,.btn-light,.btn-outline,.u-btn,.u-btn--solid,.tt-cta,.ac-btn):active{transform:translateY(0) scale(.98) !important;transition-duration:.08s !important}

  /* 4 · Tarjetas: se levantan al pasar el cursor */
  :is(#tc,body) main :is(.step,.card,.pain,.price-cell,.vs-col,.post-card,.rel-card,.tools a,.demo,.u-card,.tool,.feature,.medida,.fig){
    transition:transform .5s var(--tt-ease),box-shadow .5s var(--tt-ease),border-color .3s !important}
  :is(#tc,body) main :is(.step,.card,.pain,.price-cell,.vs-col,.post-card,.rel-card,.tools a,.u-card,.tool,.feature):hover{transform:translateY(-4px) !important}

  /* 5 · Fotos: respiran al pasar el cursor */
  .bio .photo img,.founder-media img,.demo .shot img{transition:transform 1.2s var(--tt-ease) !important}
  .bio .photo:hover img,.founder-media:hover img{transform:scale(1.025) !important}

  /* 6 · Preguntas frecuentes que abren con suavidad (navegadores recientes) */
  details::details-content{height:0;overflow:clip;transition:height .45s var(--tt-ease),content-visibility .45s allow-discrete}
  details[open]::details-content{height:auto}
  details summary::after{transition:transform .35s var(--tt-ease)}
  details[open] summary::after{transform:rotate(180deg)}

  /* 7 · Parallax del retrato del hero (valor que calcula detalle.js) */
  :is(.portrait,.ac-portrait){transform:translate3d(0,var(--tt-par,0px),0);will-change:transform}
}

/* ---------- Sombras en capas (sobre claro) ---------- */
:is(#tc,body) main :is(.step,.card,.pain,.price-cell,.vs-col,.post-card,.rel-card,.u-card,.tool,.feature,.medida):not(.faq){
  box-shadow:0 1px 1px rgba(0,0,0,.03),0 2px 6px -2px rgba(0,0,0,.05),0 18px 40px -26px rgba(0,0,0,.22) !important}
:is(#tc,body) main :is(.step,.card,.pain,.price-cell,.vs-col,.post-card,.rel-card,.u-card,.tool,.feature):hover{
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 18px -8px rgba(0,0,0,.10),0 34px 70px -34px rgba(0,0,0,.35) !important}
.bio .photo,.founder-media img,.portrait-card{box-shadow:0 2px 6px -2px rgba(0,0,0,.08),0 40px 80px -40px rgba(0,0,0,.45)}
.agenda{box-shadow:0 1px 1px rgba(0,0,0,.03),0 24px 60px -36px rgba(0,0,0,.3)}

/* ---------- Tarjetas en capitulos negros: filo de luz y foco que sigue al cursor ---------- */
.tt-spot{position:relative;isolation:isolate;overflow:hidden}
.tt-spot{box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 30px 60px -40px rgba(0,0,0,.9) !important}
.tt-spot::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .4s var(--tt-ease);
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(201,194,182,.13),transparent 60%)}
.tt-spot:hover::after{opacity:1}
.tt-spot:hover{border-color:rgba(201,194,182,.35) !important}

/* ---------- Nav: linea de luz bajo la pildora al hacer scroll ---------- */
:is(.top,.tt-top).scrolled :is(.wrap,.tt-bar){box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 18px 44px -18px rgba(0,0,0,.55) !important}

/* ---------- Parallax (27-sep-2026) ---------- */
@media (prefers-reduced-motion:no-preference){
  .tt-pv{translate:0 var(--pv,0px)}
}
/* la seccion que sigue al hero sube por encima como una hoja */
html body main > .tt-over{position:relative;z-index:3;margin-top:-28px !important;border-radius:28px 28px 0 0 !important;
  box-shadow:0 -22px 50px -30px rgba(0,0,0,.35)}
@media (max-width:700px){html body main > .tt-over{margin-top:-20px !important;border-radius:20px 20px 0 0 !important}}

/* ---------- Cierre (CTA final) con foto y capa oscura: no se confunde con el footer ---------- */
html :is(body#tc,body) :is(section.close,section.final,section#cierre){
  background-color:#050505 !important;
  background-image:linear-gradient(100deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.8) 45%,rgba(0,0,0,.58) 100%),url('/assets/tt-solucion.jpg') !important;
  background-size:cover !important;background-position:30% 50% !important;background-repeat:no-repeat !important;
  border-top:0 !important;box-shadow:inset 0 -1px 0 rgba(255,255,255,.08)}
html :is(body#tc,body) :is(section#invitar){
  background-image:linear-gradient(100deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.8) 45%,rgba(0,0,0,.55) 100%),url('/assets/tt-taller.jpg') !important;background-position:center !important}
@media (hover:hover) and (min-width:1024px) and (prefers-reduced-motion:no-preference){
  html :is(body#tc,body) :is(section.close,section.final,section#cierre,section#invitar){background-attachment:fixed !important}
}

/* ---------- Nav: desplegables de Automatizacion y Herramientas (27-sep-2026) ---------- */
html :is(body#tc,body) :is(header.top,header#ttTop) .tt-dd{position:relative;display:flex;align-items:center}
html :is(body#tc,body) :is(header.top,header#ttTop) .tt-caret{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.2;margin-left:3px;vertical-align:-1px;transition:transform .25s}
html :is(body#tc,body) :is(header.top,header#ttTop) .tt-dd:is(:hover,:focus-within) .tt-caret{transform:rotate(180deg)}
html :is(body#tc,body) :is(header.top,header#ttTop) .tt-dd-menu{position:absolute;top:calc(100% + 16px);left:50%;translate:-50% 8px;
  display:flex;flex-direction:column;min-width:270px;padding:8px;border-radius:18px;z-index:60;
  background:rgba(46,53,61,.97);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border:1px solid rgba(255,255,255,.10);box-shadow:0 26px 54px -20px rgba(0,0,0,.65);
  opacity:0;visibility:hidden;transition:opacity .2s,translate .25s,visibility .2s}
html :is(body#tc,body) :is(header.top,header#ttTop) .tt-dd-menu::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}
html :is(body#tc,body) :is(header.top,header#ttTop) .tt-dd:is(:hover,:focus-within) .tt-dd-menu{opacity:1;visibility:visible;translate:-50% 0}
html :is(body#tc,body) :is(header.top,header#ttTop) .tt-dd-menu a{display:flex !important;flex-direction:column;gap:2px;padding:10px 14px !important;border-radius:12px;
  color:#F5F5F7 !important;text-decoration:none !important;font-size:.92rem;font-weight:500;line-height:1.3;white-space:nowrap;transition:background .15s}
html :is(body#tc,body) :is(header.top,header#ttTop) .tt-dd-menu a:hover{background:rgba(255,255,255,.09)}
html :is(body#tc,body) :is(header.top,header#ttTop) .tt-dd-menu a small{font-size:.76rem;font-weight:400;color:rgba(245,245,247,.62)}
html :is(body#tc,body) :is(header.top,header#ttTop) nav .tt-dd > a{display:inline-flex !important;align-items:center;gap:3px;white-space:nowrap}
html :is(body#tc,body) :is(header.top,header#ttTop) nav .tt-dd > a .tt-caret{flex:none;margin:0 !important}

/* Sin parallax en paginas marcadas (blog): fondo del cierre fijo tambien apagado */
html body.no-parallax :is(section.close,section.final,section#cierre,section#invitar){background-attachment:scroll !important}