/* Capa de movimiento · jesuselpsicologo.com
   Hilo narrativo: el cliente es el protagonista (camino del héroe, Joseph Campbell) y Jesús el mentor.
   Cada movimiento cumple una de las tres funciones de Cicerón: enseñar (docere), agradar (delectare)
   o mover a la acción (movere). Solo transform, opacity y clip-path. */
:root{
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);
}

/* ---------- Pulido general ---------- */
/* Feedback al pulsar (delectare): el botón "se hunde" como uno físico */
.btn{transition:transform 160ms var(--ease-out),background .15s,box-shadow .15s,color .15s}
.btn:active{transform:scale(.97)}
/* En pantallas táctiles el :hover se dispara al tocar: sin elevación fantasma */
@media (hover:none),(pointer:coarse){
  .card:hover,.scard:hover,.facet:hover,.reveal.in.card:hover,.reveal.in.scard:hover,.reveal.in.facet:hover{transform:none}
}
/* El pulso de WhatsApp llama la atención tres veces y luego descansa */
.wa-float{animation-iteration-count:3}

/* "Esto es para ti si…": cada situación aparece y se marca (identificación con el punto de partida) */
.js-mo .fy-card .ticks li{opacity:0;transform:translateY(8px);transition:opacity 300ms var(--ease-out),transform 300ms var(--ease-out);transition-delay:calc(var(--i,0) * 70ms)}
.js-mo .fy-card .ticks li:before{transform:rotate(-45deg) scale(.6);opacity:0;transition:transform 300ms var(--ease-out),opacity 200ms var(--ease-out);transition-delay:calc(var(--i,0) * 70ms + 140ms)}
.js-mo .fy-card .ticks.on li{opacity:1;transform:none}
.js-mo .fy-card .ticks.on li:before{transform:rotate(-45deg) scale(1);opacity:1}

/* ---------- Tu camino (camino del héroe) ---------- */
.camino{position:relative;background:linear-gradient(180deg,var(--paper) 0%,var(--teal-l) 100%)}
.camino-top{display:grid;gap:28px;align-items:center}
@media (min-width:860px){.camino-top{grid-template-columns:1.1fr .9fr;gap:48px}}
.camino-video{position:relative;margin:0;border-radius:var(--radius);overflow:hidden;background:var(--navy);box-shadow:0 24px 50px rgba(30,35,43,.22);aspect-ratio:1/1;max-width:440px;width:100%;justify-self:center}
.camino-video video{display:block;width:100%;height:100%;object-fit:cover}
.mo-video-btn{position:absolute;right:12px;top:12px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.16);cursor:pointer;display:grid;place-items:center;transition:background-color 200ms ease,transform 160ms var(--ease-out)}
.mo-video-btn:active{transform:scale(.94)}
.mo-video-btn:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.mo-video-btn:hover{background:rgba(255,255,255,.28)}}
.mo-video-btn span{width:12px;height:14px;border-left:4px solid #fff;border-right:4px solid #fff}
.mo-video-btn.parado span{width:0;height:0;border-left:13px solid #fff;border-right:0;border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:4px}
.camino-steps{list-style:none;display:grid;gap:28px;margin:44px 0 0;position:relative;padding-left:46px}
.camino-steps:before,.camino-steps:after{content:"";position:absolute;left:17px;top:8px;bottom:8px;width:2px;border-radius:2px}
.camino-steps:before{background:rgba(30,35,43,.12)}
.camino-steps:after{background:linear-gradient(#9AA6B8,var(--teal) 45%,var(--teal) 70%,var(--cta));transform-origin:top;transform:scaleY(0);transition:transform 1200ms var(--ease-in-out)}
.camino-steps.on:after{transform:scaleY(1)}
.camino-step{position:relative}
.camino-dot{position:absolute;z-index:1;left:-46px;top:0;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font:600 14px "Sora",system-ui,sans-serif;background:var(--paper);color:var(--muted);border:2px solid var(--line);transition:background-color 300ms ease,color 300ms ease,border-color 300ms ease,transform 300ms var(--ease-out)}
.camino-step h3{font-size:19px;margin-bottom:4px}
.camino-step p{color:var(--muted);max-width:44ch}
.camino-step .rol{display:inline-block;font:600 12px "Sora",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-d);margin-bottom:6px}
.js-mo .camino-step h3,.js-mo .camino-step p,.js-mo .camino-step .rol{opacity:0;transform:translateY(10px);transition:opacity 400ms var(--ease-out),transform 400ms var(--ease-out);transition-delay:calc(var(--i,0) * 260ms + 120ms)}
.js-mo .camino-dot{transition-delay:calc(var(--i,0) * 260ms)}
.camino-steps.on .camino-step h3,.camino-steps.on .camino-step p,.camino-steps.on .camino-step .rol{opacity:1;transform:none}
.camino-steps.on .camino-dot{background:var(--teal);color:#fff;border-color:var(--teal)}
.camino-steps.on .camino-step:nth-of-type(1) .camino-dot{background:#7C889B;border-color:#7C889B}
.camino-steps.on .camino-step:last-child .camino-dot{background:var(--cta);border-color:var(--cta)}
.camino-cta{margin-top:30px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.js-mo .camino-cta{opacity:0;transform:translateY(10px);transition:opacity 400ms var(--ease-out) 1300ms,transform 400ms var(--ease-out) 1300ms}
.camino-steps.on ~ .camino-cta{opacity:1;transform:none}

@media (min-width:860px){
  .camino-steps{grid-template-columns:repeat(4,1fr);gap:24px;padding-left:0;padding-top:56px}
  .camino-steps:before,.camino-steps:after{left:18px;right:18px;top:17px;bottom:auto;width:auto;height:2px}
  .camino-steps:after{transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,#9AA6B8,var(--teal) 45%,var(--teal) 70%,var(--cta))}
  .camino-steps.on:after{transform:scaleX(1)}
  .camino-dot{left:0;top:-56px}
}

/* ---------- Antes / después (storydoing: la persona lo comprueba con su mano) ---------- */
.ad{margin-top:56px;display:grid;gap:22px;align-items:center}
@media (min-width:860px){.ad{grid-template-columns:5fr 6fr;gap:44px}}
.ad h3{font-size:22px;margin-bottom:8px}
.ad-copy p{color:var(--muted)}
.ad-copy small{display:block;margin-top:10px;color:var(--muted);font-size:13px}
.ad-box{position:relative;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);box-shadow:0 14px 34px rgba(30,35,43,.08);padding:18px 22px 24px}
.ad-switch{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;background:var(--paper-2);border-radius:999px;padding:4px;margin-bottom:16px}
.ad-switch button{position:relative;z-index:1;font:600 14px "Sora",system-ui,sans-serif;border:0;background:none;padding:8px 18px;border-radius:999px;cursor:pointer;color:var(--muted);transition:color 250ms ease,transform 160ms var(--ease-out)}
.ad-switch button:active{transform:scale(.97)}
.ad-switch button[aria-pressed="true"]{color:#fff}
.ad-switch button:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
/* La píldora se desliza a la opción elegida (estado legible de un vistazo) */
.ad-pill{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:#5B6172;transition:transform 250ms var(--ease-in-out),background-color 250ms ease}
.ad-box[data-v="despues"] .ad-pill{transform:translateX(100%);background:#355574}
.ad-panes{display:grid}
.ad-pane{grid-area:1/1;transition:opacity 250ms var(--ease-out),filter 250ms ease,transform 250ms var(--ease-out)}
.ad-pane h4{font:600 17px "Sora",system-ui,sans-serif;color:var(--head);margin-bottom:2px}
.ad-pane .meta{font-size:14px;color:var(--muted);margin-bottom:10px}
.ad-pane ul{padding-left:18px;font-size:15px;line-height:1.55;display:grid;gap:6px}
.ad-antes{color:var(--muted)}
.ad-despues b{color:var(--ink);font-weight:700;background:linear-gradient(rgba(200,165,90,.38),rgba(200,165,90,.38)) no-repeat 0 88%/0% 38%;transition:background-size 500ms var(--ease-out) 150ms}
.ad-box[data-v="despues"] .ad-despues b{background-size:100% 38%}
/* Un fundido con un leve desenfoque: se lee como una transformación del mismo texto, no como dos textos que se cruzan.
   Todas las versiones ocupan la misma celda, así la tarjeta no cambia de alto al pasar de una a otra. */
.ad-pane{opacity:0;filter:blur(2px);transform:translateY(6px);visibility:hidden;transition:opacity 250ms var(--ease-out),filter 250ms ease,transform 250ms var(--ease-out),visibility 0s linear 250ms}
.ad-box[data-p="operario"][data-v="antes"] .ad-antes[data-p="operario"],.ad-box[data-p="operario"][data-v="despues"] .ad-despues[data-p="operario"],.ad-box[data-p="it"][data-v="antes"] .ad-antes[data-p="it"],.ad-box[data-p="it"][data-v="despues"] .ad-despues[data-p="it"],.ad-box[data-p="rrhh"][data-v="antes"] .ad-antes[data-p="rrhh"],.ad-box[data-p="rrhh"][data-v="despues"] .ad-despues[data-p="rrhh"],.ad-box[data-p="direccion"][data-v="antes"] .ad-antes[data-p="direccion"],.ad-box[data-p="direccion"][data-v="despues"] .ad-despues[data-p="direccion"]{opacity:1;filter:none;transform:none;visibility:visible;transition:opacity 300ms var(--ease-out) 80ms,filter 300ms ease 80ms,transform 300ms var(--ease-out) 80ms,visibility 0s}
/* Selector de perfiles */
.ad-perfiles{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 16px;padding-bottom:16px;border-bottom:1px solid var(--line)}
@media (min-width:600px){.ad-perfiles{grid-template-columns:repeat(4,auto);justify-content:start}}
.ad-perfiles button{font:600 14px "Sora",system-ui,sans-serif;text-align:left;border:1.5px solid var(--line);background:var(--card);color:var(--head);border-radius:12px;padding:10px 14px;min-height:44px;cursor:pointer;transition:background-color 200ms ease,border-color 200ms ease,color 200ms ease,transform 160ms var(--ease-out)}
.ad-perfiles button:active{transform:scale(.97)}
.ad-perfiles button:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.ad-perfiles button:hover{border-color:var(--teal)}}
.ad-perfiles button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
:root[data-theme="dark"] .ad-perfiles button[aria-pressed="true"]{background:#355574;border-color:#355574}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ad-perfiles button[aria-pressed="true"]{background:#355574;border-color:#355574}}

/* ---------- Movimiento reducido: estados finales, sin desplazamientos ---------- */
@media (prefers-reduced-motion:reduce){
  .js-mo .fy-card .ticks li,.js-mo .fy-card .ticks li:before,.js-mo .camino-step h3,.js-mo .camino-step p,.js-mo .camino-step .rol,.js-mo .camino-cta{opacity:1!important;transform:none!important}
  .js-mo .fy-card .ticks li:before{transform:rotate(-45deg)!important}
  .camino-steps:after{transform:none!important}
  .ad-despues b{background-size:100% 38%}
  .camino-dot{background:var(--teal);color:#fff;border-color:var(--teal)}
}

/* Corrección: las tarjetas ocultas del carrusel de Encaja desbordaban 10px a la derecha en móvil (la página bailaba de lado) */
.enc-sec{overflow-x:clip}

/* ---------- Portada: vídeo de Jesús leyendo y corrigiendo el CV sobre la foto ---------- */
.hero-photo{position:relative}
.hero2 .hero-photo .cut.hero-video,.hero-video{position:absolute;left:0;top:0;width:100%;height:auto;aspect-ratio:900/928;object-fit:cover;z-index:2;opacity:0;transition:opacity 600ms ease}
.hero2 .hero-photo .cut.hero-video.lista,.hero-video.lista{opacity:1}
.hero-video.lista{opacity:1}
@media (prefers-reduced-motion:reduce){.hero-video{display:none!important}}

/* Corrección: el enlace a Encaja de la portada era amarillo sobre blanco y casi no se leía en modo claro */
:root[data-theme="light"] .enc-hint{color:var(--teal-d)}
:root[data-theme="light"] .enc-hint:hover{border-color:var(--teal-d)}