/* cm-fx — capa de micro-interacciones para camilomahecha.com */
:root{--cm-accent:#ffd300;--cm-ink:#020202}

/* Barra de progreso de lectura */
.cm-progress{position:fixed;top:0;left:0;right:0;height:3px;background:var(--cm-accent);transform:scaleX(0);transform-origin:0 50%;z-index:10000;pointer-events:none}

/* Cursor personalizado (solo mouse) */
.cm-cursor,.cm-dot{position:fixed;top:0;left:0;pointer-events:none;z-index:10001;border-radius:50%;opacity:0;transition:opacity .3s}
.cm-cursor{width:38px;height:38px;margin:-19px 0 0 -19px;border:1.5px solid #fff;mix-blend-mode:difference;display:flex;align-items:center;justify-content:center;transition:width .35s cubic-bezier(.2,.8,.2,1),height .35s cubic-bezier(.2,.8,.2,1),margin .35s cubic-bezier(.2,.8,.2,1),background .25s,opacity .3s}
.cm-dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:#fff;mix-blend-mode:difference}
.cm-cursor-on .cm-cursor,.cm-cursor-on .cm-dot{opacity:1}
.cm-cursor.is-link{width:64px;height:64px;margin:-32px 0 0 -32px;background:#fff}
.cm-cursor.is-view{width:96px;height:96px;margin:-48px 0 0 -48px;background:var(--cm-accent);border-color:var(--cm-accent);mix-blend-mode:normal}
.cm-cursor .cm-cursor-label{font:600 12px/1 "ArticulatCF-DemiBold",Inter,sans-serif;letter-spacing:.08em;color:var(--cm-ink);opacity:0;transform:scale(.6);transition:opacity .25s,transform .35s cubic-bezier(.2,.8,.2,1)}
.cm-cursor.is-view .cm-cursor-label{opacity:1;transform:scale(1)}
.cm-cursor .cm-cursor-label,.cm-cursor .cm-cursor-arrow{position:absolute}
.cm-cursor .cm-cursor-arrow{width:26px;height:26px;color:var(--cm-ink);opacity:0;transform:translateY(-8px) scale(.5);transition:opacity .25s,transform .35s cubic-bezier(.2,.8,.2,1)}
.cm-cursor.is-down{width:84px;height:84px;margin:-42px 0 0 -42px;background:var(--cm-accent);border-color:var(--cm-accent);mix-blend-mode:normal}
.cm-cursor.is-down .cm-cursor-arrow{opacity:1;transform:none;animation:cmBob 1.3s ease-in-out .35s infinite}
@keyframes cmBob{50%{transform:translateY(5px)}}
.cm-cursor.is-press{width:30px;height:30px;margin:-15px 0 0 -15px}
.cm-cursor.is-press.is-down,.cm-cursor.is-press.is-view{width:72px;height:72px;margin:-36px 0 0 -36px}
.cm-cursor.is-view~.cm-dot,.cm-cursor.is-down~.cm-dot,.cm-cursor.is-link~.cm-dot{opacity:0}
@media (hover:hover) and (pointer:fine){html.cm-cursor-on,html.cm-cursor-on *{cursor:none!important}}
.cm-scrolldown{cursor:pointer}

/* Lista de marcas: se llenan con el scroll (el gris tapa el degradado) */
.cm-fill .cm-w{white-space:nowrap}
.cm-fill .cm-c{-webkit-text-fill-color:rgb(214,217,221)}

/* Hobbies: pósters colgados */
.cm-hang{transform-origin:50% 0;transform:rotate(var(--rest,0deg));transition:transform 1.2s cubic-bezier(.3,1.5,.4,1)}
.cm-hang.cm-hang-pre{transform:rotate(var(--from,0deg)) translateY(40px)}
.cm-hang-in{transform-origin:50% 0;will-change:transform;transition:filter .45s}
.cm-hang.is-on{transform:rotate(0deg) translateY(-8px);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.cm-hang.is-on .cm-hang-in{filter:drop-shadow(0 26px 30px rgba(0,0,0,.22))}

/* Tarjetas de proyecto: tilt 3D + zoom suave */
.cm-tilt{transition:transform .6s cubic-bezier(.2,.8,.2,1);transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);will-change:transform}
.cm-tilt.is-hover{transition:transform .15s linear}
.cm-tilt img{transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .6s}
.cm-tilt.is-hover img{transform:scale(1.035)}
.cm-tilt-clip{overflow:hidden}

/* Títulos letra por letra */
.cm-split{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em;margin-bottom:-.06em}
.cm-char{display:inline-block;transform:translateY(105%) rotate(4deg);opacity:0;animation:cmUp .9s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--d,0ms) + var(--i) * 32ms);transition:transform .35s cubic-bezier(.3,1.6,.5,1),color .2s}
.cm-char.cm-done{animation:none;transform:none;opacity:1}
.cm-char.cm-done:hover{transform:translateY(-.12em) rotate(-4deg);color:var(--cm-ink)}
@keyframes cmUp{to{transform:none;opacity:1}}

/* Links del menú: subrayado que se desliza + efecto magnético */
.semplice-navbar nav.standard ul li a span{position:relative}
.semplice-navbar nav.standard ul li a span::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:100% 50%;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.semplice-navbar nav.standard ul li a:hover span::after{transform:scaleX(1);transform-origin:0 50%}
.cm-magnetic{transition:transform .5s cubic-bezier(.2,.8,.2,1);will-change:transform}

/* CTA "Click to copy": barrido amarillo al pasar el mouse */
.copy-button{background:linear-gradient(var(--cm-accent),var(--cm-accent)) no-repeat 0 92%/0% .32em;transition:background-size .6s cubic-bezier(.2,.8,.2,1)}
.copy-button:hover{background-size:100% .32em}

/* Contador */
.cm-count{font-variant-numeric:tabular-nums}

/* Logo: pequeño giro al pasar el mouse */
.semplice-navbar .logo a{display:inline-block;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.semplice-navbar .logo a:hover{transform:rotate(-8deg) scale(1.06)}

/* Accesibilidad: sin movimiento si el usuario lo pide */
@media (prefers-reduced-motion:reduce){
  .cm-char{animation:none;transform:none;opacity:1}
  .cm-cursor.is-down .cm-cursor-arrow{animation:none}
  .cm-tilt,.cm-tilt img,.cm-magnetic,.semplice-navbar .logo a{transition:none!important;transform:none!important}
}
@media (hover:none),(pointer:coarse){.cm-cursor,.cm-dot{display:none}}

/* Quotes de liderazgo dentro de cada caso */
.cm-lead{margin-top:2.6rem}
.cm-quote{position:relative;margin:0;padding:1.6rem 0 0 3.4rem;border-top:1.5px solid #020202}
.cm-quote-mark{position:absolute;left:0;top:1.1rem;font:900 4.4rem/1 "Acumin-Pro-Black",sans-serif;color:var(--cm-accent)}
.cm-quote blockquote{margin:0}
.cm-quote p{margin:0;font-family:"Acumin-Pro-Semibold",sans-serif!important;font-size:1.78rem!important;line-height:1.28!important;color:#020202;letter-spacing:-.005em}
.cm-quote mark{background:linear-gradient(var(--cm-accent),var(--cm-accent)) no-repeat 0 88%/0% .38em;color:inherit;transition:background-size 1.1s cubic-bezier(.2,.8,.2,1) .25s}
.cm-quote.in mark{background-size:100% .38em}
.cm-quote.pre{opacity:0;transform:translateY(18px)}
.cm-quote{transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
@media (max-width:900px){.cm-quote{padding-left:2.6rem}.cm-quote-mark{font-size:3.4rem}.cm-quote p{font-size:1.4rem!important}}

/* About: sección AI interactiva */
.cm-ai-sec{padding-block:2rem 7rem}
.cm-ai{--ink:#020202;--soft:#ecece9;--line:#dcdcd8;--mut:#6b6c68;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:2rem;margin-top:3.2rem;align-items:stretch}
.cm-ai-tabs{display:flex;flex-direction:column;gap:0;border-top:1.5px solid var(--ink)}
.cm-ai-tab{all:unset;cursor:pointer;position:relative;display:grid;grid-template-columns:2.4rem 1fr;gap:.2rem .6rem;padding:1.15rem .2rem 1.25rem;border-bottom:1px solid var(--line);color:var(--mut);transition:color .25s}
.cm-ai-tab .n{grid-row:1/span 2;font:700 .85rem/1.6 "Acumin-Pro-Bold",sans-serif}
.cm-ai-tab .t{font:600 1.25rem/1.25 "ArticulatCF-DemiBold",sans-serif;color:inherit}
.cm-ai-tab .d{grid-column:2;font:400 .95rem/1.45 "ArticulatCF-Normal",sans-serif;max-height:0;overflow:hidden;opacity:0;transition:max-height .45s cubic-bezier(.2,.8,.2,1),opacity .35s}
.cm-ai-tab .bar{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink);transform-origin:0 50%;transform:scaleX(0)}
.cm-ai-tab[aria-selected="true"]{color:var(--ink)}
.cm-ai-tab[aria-selected="true"] .n{color:var(--ink)}
.cm-ai-tab[aria-selected="true"] .d{max-height:4rem;opacity:1}
.cm-ai-tab:hover{color:var(--ink)}
.cm-ai-tab:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.cm-ai-stage{position:relative;min-height:30rem;background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 30px 60px -40px rgba(0,0,0,.35);border:1px solid var(--line)}
.cm-ai-panel{position:absolute;inset:0;padding:2rem;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1.2rem}
.cm-ai-panel[hidden]{display:none!important}
.cm-ai-panel.enter{animation:cmPanel .5s cubic-bezier(.2,.8,.2,1)}
@keyframes cmPanel{from{opacity:0;transform:translateY(12px)}}
.cm-badge{margin:0;font:600 .85rem/1 "ArticulatCF-DemiBold",sans-serif;background:var(--ink);color:#fff;padding:.6rem .9rem;border-radius:999px;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
.cm-badge.on{opacity:1;transform:none}
.cm-badge::before{content:"✓ ";color:var(--cm-accent)}
/* demo 1: plugin */
.cm-win{width:min(100%,34rem);background:var(--soft);border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.cm-win-bar{display:flex;align-items:center;gap:.35rem;padding:.6rem .8rem;background:#fff;border-bottom:1px solid var(--line);font:600 .8rem "ArticulatCF-DemiBold",sans-serif;color:var(--mut)}
.cm-win-bar i{width:.6rem;height:.6rem;border-radius:50%;background:var(--line)}
.cm-win-bar span{margin-left:.5rem}
.cm-tools{display:grid;grid-template-columns:1.1fr 1fr;gap:1rem;padding:1rem}
.cm-layers{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.cm-layers li{font:500 .95rem/1 "ArticulatCF-Medium",monospace;background:#fff;border-radius:8px;padding:.6rem .7rem;border:1px solid var(--line);transition:background .3s,border-color .3s}
.cm-layers li::before{content:"▢ ";color:var(--mut)}
.cm-layers li.done{border-color:var(--ink)}
.cm-layers li.flash{background:var(--cm-accent)}
.cm-actions{display:grid;gap:.45rem;align-content:start}
.cm-actions button{all:unset;text-align:center;font:600 .85rem/1 "ArticulatCF-DemiBold",sans-serif;padding:.7rem;border-radius:999px;border:1.5px solid var(--ink);color:var(--ink);transition:transform .15s,background .2s}
.cm-actions .cm-run{background:var(--ink);color:#fff}
.cm-actions .cm-run.press{transform:scale(.94);background:var(--cm-accent);color:var(--ink)}
.cm-status{margin:.3rem 0 0;font:500 .8rem/1.3 "ArticulatCF-Normal",sans-serif;color:var(--mut)}
/* prompt (demos 2 y 3) */
.cm-prompt{width:min(100%,34rem);display:flex;align-items:center;gap:.6rem;background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:.75rem 1.1rem;font:500 1rem/1.3 "ArticulatCF-Medium",sans-serif;color:var(--ink);min-height:3rem}
.cm-spark{color:var(--ink);background:var(--cm-accent);border-radius:50%;width:1.6rem;height:1.6rem;display:grid;place-items:center;font-size:.8rem;flex:none}
.cm-caret{width:2px;height:1.1rem;background:var(--ink);animation:cmBlink 1s steps(1) infinite}
@keyframes cmBlink{50%{opacity:0}}
/* demo 2: phone */
.cm-phone{position:relative;width:9.5rem;height:16rem;border-radius:1.6rem;border:.45rem solid var(--ink);background:#fff;overflow:hidden}
.cm-screens{display:flex;height:100%;transition:transform .6s cubic-bezier(.7,0,.2,1)}
.cm-scr{flex:0 0 100%;padding:1rem .7rem;display:flex;flex-direction:column;gap:.5rem;opacity:0;transition:opacity .4s}
.cm-scr.on{opacity:1}
.cm-scr b{font:700 .85rem "Acumin-Pro-Bold",sans-serif}
.cm-scr .blk{display:block;width:100%;flex:none;height:1.6rem;border-radius:.4rem;background:var(--soft)}
.cm-scr .blk.pcard{height:2.6rem;background:linear-gradient(135deg,#020202,#4f5b6b)}
.cm-scr .blk.pcard.palt{background:linear-gradient(135deg,#a2a2a0,#dcdcd8)}
.cm-scr .blk.pcheck{height:3.6rem;width:3.6rem!important;border-radius:50%;margin:1rem auto;background:var(--cm-accent);display:grid;place-items:center;font-style:normal;font-weight:700;font-size:1.4rem}
.cm-scr .blk.pcta{margin-top:auto;height:1.9rem;background:var(--ink);border-radius:999px}
.cm-tap{position:absolute;left:50%;bottom:1.1rem;width:1.4rem;height:1.4rem;margin-left:-.7rem;border-radius:50%;background:rgba(255,211,0,.85);opacity:0;transform:scale(.4)}
.cm-tap.go{animation:cmTap .5s ease-out}
@keyframes cmTap{30%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.8)}}
/* demo 3: grid */
.cm-grid{display:grid;grid-template-columns:repeat(3,4.6rem);gap:.7rem}
.cm-grid .blk{position:relative;display:block;width:4.6rem;height:4.6rem;border-radius:12px;background:var(--soft);overflow:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.cm-grid .blk::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.8) 50%,transparent 80%);transform:translateX(-100%);animation:cmShim 1.1s infinite}
.cm-grid .blk::after{content:"";position:absolute;inset:22%;opacity:0;transform:scale(.6) rotate(-10deg);transition:opacity .4s,transform .5s cubic-bezier(.3,1.6,.5,1)}
.cm-grid .blk.gen::before{display:none}
.cm-grid .blk.gen::after{opacity:1;transform:none}
.cm-grid .s1::after{background:#020202;border-radius:50%}
.cm-grid .s2::after{background:var(--cm-accent);clip-path:polygon(50% 0,100% 100%,0 100%)}
.cm-grid .s3::after{background:#4f5b6b;border-radius:6px;transform:rotate(45deg) scale(.8)}
.cm-grid .s4::after{background:linear-gradient(135deg,var(--cm-accent),#020202);border-radius:50% 50% 0 50%}
.cm-grid .s5::after{background:#a2a2a0;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.cm-grid .s6::after{border:.45rem solid #020202;border-radius:50%;background:transparent}
.cm-grid .blk.pick{transform:scale(1.12);box-shadow:0 0 0 2px #020202,0 12px 24px -10px rgba(0,0,0,.4)}
.cm-grid .blk.dim{opacity:.35}
@keyframes cmShim{to{transform:translateX(100%)}}
/* demo 4: affinity board */
.cm-board{position:relative;width:min(100%,36rem);height:17rem;display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
.cm-col{border:1.5px dashed var(--line);border-radius:12px;padding:.6rem;transition:border-color .4s,background .4s}
.cm-col b{font:700 .8rem "Acumin-Pro-Bold",sans-serif;letter-spacing:.08em;text-transform:uppercase;opacity:0;transition:opacity .4s}
.cm-board.sorted .cm-col{border-color:#020202;border-style:solid;background:#fbfbf8}
.cm-board.sorted .cm-col b{opacity:1}
.cm-note{position:absolute;left:0;top:0;width:calc((100% - 1.6rem) / 3 - 1.2rem);font:500 .8rem/1.25 "ArticulatCF-Medium",sans-serif;background:#fff6c2;padding:.5rem .55rem;border-radius:6px;box-shadow:0 6px 14px -8px rgba(0,0,0,.35);transition:transform .8s cubic-bezier(.3,1.3,.5,1)}
@media (max-width:900px){
  .cm-ai{grid-template-columns:1fr;gap:1.2rem}
  .cm-ai-tabs{flex-direction:row;overflow-x:auto;border-top:0;gap:.5rem;scrollbar-width:none;padding-bottom:.2rem}
  .cm-ai-tabs::-webkit-scrollbar{display:none}
  .cm-ai-tab{flex:0 0 auto;grid-template-columns:auto auto;border:1.5px solid var(--line);border-radius:999px;padding:.6rem .9rem}
  .cm-ai-tab .n{grid-row:auto}
  .cm-ai-tab .d{display:none}
  .cm-ai-tab[aria-selected="true"]{border-color:var(--ink);background:var(--ink);color:#fff}
  .cm-ai-tab[aria-selected="true"] .n{color:var(--cm-accent)}
  .cm-ai-tab .bar{left:1rem;right:1rem;bottom:.25rem;height:2px;background:var(--cm-accent)}
  .cm-ai-stage{min-height:29rem}
  .cm-ai-panel{padding:1.2rem}
  .cm-tools{grid-template-columns:1fr}
  .cm-actions{grid-template-columns:1fr 1fr 1fr}
  .cm-actions .cm-status{grid-column:1/-1}
  .cm-board{height:19rem}
  .cm-note{font-size:.7rem}
}

/* blindaje contra los estilos globales de Semplice (p, li) */
#content-holder .cm-ai-panel>*{flex:none}
#content-holder .cm-ai p,#content-holder .cm-ai li{letter-spacing:0;text-transform:none}
#content-holder .cm-ai .cm-layers li{font:500 15px/1.1 "ArticulatCF-Medium",sans-serif!important;padding:9px 11px!important;margin:0!important;list-style:none}
#content-holder .cm-ai .cm-status{font:400 13px/1.35 "ArticulatCF-Normal",sans-serif!important;margin:4px 0 0!important}
#content-holder .cm-ai .cm-badge{font:600 13px/1 "ArticulatCF-DemiBold",sans-serif!important;margin:0!important;padding:10px 14px!important}
#content-holder .cm-ai .cm-prompt{font-size:15px}
#content-holder .cm-ai .cm-note{font:500 12.5px/1.25 "ArticulatCF-Medium",sans-serif!important}
#content-holder .cm-ai .cm-actions button{font:600 13px/1.1 "ArticulatCF-DemiBold",sans-serif!important}
@media (max-width:900px){#content-holder .cm-ai .cm-actions button{font-size:11.5px!important;padding:9px 4px!important}#content-holder .cm-ai .cm-ai-tab .t{font-size:15px!important}#content-holder .cm-ai .cm-note{font-size:11px!important}#content-holder .cm-ai .cm-layers li{font-size:13px!important;padding:7px 9px!important}}
@media (prefers-reduced-motion:reduce){.cm-grid .blk::before,.cm-caret{animation:none}.cm-quote,.cm-quote.pre{opacity:1;transform:none}}