/*
Theme Name: Manivela
Theme URI: https://manivela.com.mx
Author: Manivela
Author URI: https://manivela.com.mx
Description: Tema de bloques de Manivela, identidad 2026. Somos la base del movimiento.
Version: 1.0.1
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.1
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: manivela
*/
body{margin:0;background:#1F1D21}
html{color-scheme:dark;scroll-padding-top:88px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
::selection{background:#6600DD;color:#FFFFFF}
a{color:#C4A3FF;text-underline-offset:0.22em;text-decoration-thickness:1px}a:hover{color:#FFFFFF}
a,button,summary{touch-action:manipulation;-webkit-tap-highlight-color:rgba(196,163,255,0.18)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid #C4A3FF;outline-offset:3px}
.mv-num{font-variant-numeric:tabular-nums}
.mv-skip{position:absolute;left:16px;top:12px;z-index:60;background:#FFFFFF;color:#1F1D21;padding:12px 18px;font-weight:600;text-decoration:none}
.mv-skip:not(:focus){clip-path:inset(50%);width:1px;height:1px;padding:0;overflow:hidden;white-space:nowrap}
.mv-logos{grid-template-columns:repeat(4,minmax(0,1fr)) !important}
.mv-headcta{white-space:nowrap}
@media (max-width:760px){.mv-logos{grid-template-columns:repeat(2,minmax(0,1fr)) !important}.mv-fcols{justify-content:flex-start !important}}
@media (max-width:640px){.mv-headcta{padding:0 14px !important;font-size:14px !important}}
/* Áreas táctiles de 44 px en pantallas táctiles */
@media (pointer:coarse),(max-width:760px){.mv-head a[aria-label],footer a,#contacto a:not(.mv-btn),#blog a.mv-ul{display:inline-flex !important;align-items:center;min-height:44px;padding-top:0 !important;padding-bottom:0 !important}footer ul{gap:0 !important}a[aria-label$=": ir a su sitio"],#blog a:not(.mv-blogrow){display:inline-flex !important;align-items:center;min-height:44px}}
/* Filas del blog con portada: 5 columnas en escritorio, apiladas en celular */
.mv-blogrow{grid-template-columns:auto minmax(96px, 120px) minmax(200px, 260px) minmax(0, 1fr) auto !important}
@media (max-width:760px){.mv-blogrow{grid-template-columns:minmax(0, 1fr) auto !important;gap:12px 16px !important}.mv-blogrow>span[aria-hidden]:first-child{display:none !important}.mv-blogrow>span:nth-child(2),.mv-blogrow>img{grid-column:1 / -1}}
.mv-head{position:sticky;top:0;z-index:30}
.mv-prog{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:#6600DD;transform-origin:0 50%;transform:scaleX(0)}

/* Enlaces y botones: sobrios, sin brillos */
.mv-ul{background-image:linear-gradient(currentColor,currentColor);background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;transition:background-size 420ms cubic-bezier(0.2,0.7,0.1,1)}
.mv-ul:hover{background-size:100% 1px}
.mv-btn{transition:background-color 220ms ease-out,color 220ms ease-out,border-color 220ms ease-out,transform 160ms ease-out}
.mv-btn:active,.mv-lot:active,.mv-pause:active{transform:scale(0.97)}
.mv-btn .mv-ar{display:inline-block;transition:transform 320ms cubic-bezier(0.2,0.7,0.1,1)}
.mv-btn:hover .mv-ar{transform:translate3d(5px,0,0)}
.mv-btn-v:hover{background:#4E00AA !important}
.mv-btn-l:hover{background:#FFFFFF !important;color:#1F1D21 !important;border-color:#FFFFFF !important}
.mv-btn-w:hover{background:#1F1D21 !important;color:#FFFFFF !important}
.mv-pause:hover{color:#FFFFFF !important;border-color:rgba(255,255,255,0.6) !important}

/* Isotipo del hero: las 4 piezas se ensamblan y luego trabajan como levas */
.mv-pc{transform-box:fill-box;transform-origin:50% 100%;transition:transform 700ms cubic-bezier(0.2,0.7,0.1,1)}
html.mv-js .mv-iso .mv-pc{opacity:0;transform:translate3d(0,90px,0)}
html.mv-js .mv-iso.is-in .mv-pc{opacity:1;transform:none;transition:opacity 600ms ease-out,transform 1100ms cubic-bezier(0.2,0.7,0.1,1);transition-delay:calc(var(--i) * 140ms + 250ms)}
.mv-iso[data-t="0"] .mv-pg:nth-of-type(1) .mv-pc,.mv-iso[data-t="1"] .mv-pg:nth-of-type(2) .mv-pc,.mv-iso[data-t="2"] .mv-pg:nth-of-type(3) .mv-pc,.mv-iso[data-t="3"] .mv-pg:nth-of-type(4) .mv-pc{transform:translate3d(0,-26px,0) !important;transition:transform 700ms cubic-bezier(0.2,0.7,0.1,1) !important}
.mv-tl{transition:color 400ms ease-out,border-color 400ms ease-out}
.mv-iso[data-t="0"] ~ .mv-tls .mv-tl:nth-child(1),.mv-iso[data-t="1"] ~ .mv-tls .mv-tl:nth-child(2),.mv-iso[data-t="2"] ~ .mv-tls .mv-tl:nth-child(3),.mv-iso[data-t="3"] ~ .mv-tls .mv-tl:nth-child(4){color:#FFFFFF !important;border-color:#6600DD !important}

/* Revelado al hacer scroll */
html.mv-js .mv-rv{opacity:0;transform:translate3d(0,18px,0);transition:opacity 800ms cubic-bezier(0.2,0.7,0.1,1),transform 900ms cubic-bezier(0.2,0.7,0.1,1);transition-delay:var(--d,0ms)}
html.mv-js .mv-rv.is-in{opacity:1;transform:none}
.mv-mask{overflow:hidden;padding-bottom:0.08em}
.mv-mask>span{display:block}
html.mv-js .mv-mask>span{transform:translate3d(0,108%,0);transition:transform 1100ms cubic-bezier(0.2,0.7,0.1,1);transition-delay:var(--d,0ms)}
html.mv-js .mv-mask.is-in>span{transform:none}

/* Filas tipo índice */
.mv-row{transition:background-color 300ms ease-out}
.mv-row .mv-ar{display:inline-block;transition:transform 380ms cubic-bezier(0.2,0.7,0.1,1)}
.mv-row:hover .mv-ar{transform:translate3d(6px,0,0)}
.mv-row-l:hover{background:#F5EFFD}
.mv-row-d:hover{background:#2A282D}
.mv-sysrow{display:grid;grid-template-columns:56px 200px minmax(0,1fr) minmax(0,1.15fr) 210px 32px;gap:12px 32px;align-items:center}
.mv-blogrow{display:grid;grid-template-columns:150px minmax(0,1fr) 32px;gap:8px 32px;align-items:baseline}
@media (max-width:1100px){.mv-sysrow{grid-template-columns:44px minmax(0,1fr) 32px}.mv-sysrow>.mv-c-desc,.mv-sysrow>.mv-c-title,.mv-sysrow>.mv-c-price{grid-column:2 / 3}}
@media (max-width:640px){.mv-blogrow{grid-template-columns:minmax(0,1fr) 32px}.mv-blogrow>.mv-c-date{grid-column:1 / -1}.mv-navlink{display:none !important}}

/* Logos de clientes: neutros, color al pasar */
.mv-logo img{filter:grayscale(1);opacity:0.62;transition:filter 400ms ease-out,opacity 400ms ease-out}
.mv-logo:hover img{filter:none;opacity:1}

/* Método: línea de progreso ligada al scroll */
.mv-step .mv-pcs path{transition:fill 500ms ease-out}
.mv-step.is-on .mv-pcs path.mv-me{fill:#6600DD}
.mv-step .mv-stn{transition:color 500ms ease-out}
.mv-step.is-on .mv-stn{color:#FFFFFF}

/* Preguntas */
.mv-q::-webkit-details-marker{display:none}
.mv-q .mv-x{transition:transform 400ms cubic-bezier(0.2,0.7,0.1,1)}
details[open] .mv-q .mv-x{transform:rotate(45deg)}
.mv-faq{transition:border-color 300ms ease-out}

.mv-lot{transition:transform 120ms ease-out}
.mv-lot:active{transform:scale(0.96)}
.mv-marq-track{animation:mvmarq 60s linear infinite}
[data-paused="true"] .mv-marq-track{animation-play-state:paused}
@keyframes mvmarq{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* Grecas: circuito de la nueva imagen */
.mv-greca{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.mv-chip{position:absolute;right:max(clamp(20px, 4vw, 56px), calc((100% - 1360px) / 2 + 56px));top:clamp(88px, 11vw, 160px);width:150px;height:150px;box-sizing:border-box;background:#4E00AA;border:2px solid #C4A3FF;display:flex;align-items:center;justify-content:center}
@media (max-width:760px){.mv-chip{display:none}}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.mv-marq-track{animation:none}
html.mv-js .mv-rv,html.mv-js .mv-mask>span,html.mv-js .mv-rule,html.mv-js .mv-iso .mv-pc{opacity:1 !important;transform:none !important;transition:none !important}
.mv-ul,.mv-btn .mv-ar,.mv-row .mv-ar,.mv-pc,.mv-tl{transition:none !important}
}
/* Animación completa (solicitada): respiración, barrido de botones, nodos del núcleo y pie */
.mv-cta{position:relative;overflow:hidden}
.mv-cta::after{content:"";position:absolute;top:0;bottom:0;left:0;width:45%;background:linear-gradient(105deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.38) 50%,rgba(255,255,255,0) 100%);transform:translate3d(-120%,0,0);pointer-events:none}
.mv-cta:hover::after{animation:mvsweep 900ms cubic-bezier(0.23,1,0.32,1)}
@keyframes mvsweep{to{transform:translate3d(240%,0,0)}}
.mv-breathe{animation:mvbreathe 3.2s ease-in-out infinite}
@keyframes mvbreathe{0%,100%{box-shadow:0 10px 34px -10px rgba(102,0,221,0.85)}50%{box-shadow:0 14px 48px -6px rgba(102,0,221,1)}}
.mv-core{transform-box:fill-box;transform-origin:center;animation:mvcore 3s ease-in-out infinite}
@keyframes mvcore{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.mv-rv.is-in .mv-node{transform-box:fill-box;transform-origin:center;animation:mvpop 700ms cubic-bezier(0.23,1,0.32,1) both}
.mv-rv.is-in .mv-node:nth-of-type(2){animation-delay:120ms}
.mv-rv.is-in .mv-node:nth-of-type(3){animation-delay:240ms}
.mv-rv.is-in .mv-node:nth-of-type(4){animation-delay:360ms}
@keyframes mvpop{from{opacity:0;transform:scale(0.6)}to{opacity:1;transform:scale(1)}}
.mv-card{will-change:transform}
.mv-count{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.mv-cta::after,.mv-breathe,.mv-core,.mv-rv.is-in .mv-node{animation:none !important}.mv-cta::after{display:none}}

/* ===== Movimiento v2: grecas y scroll ===== */
.mv-pg{transform-box:fill-box;will-change:transform}
#inicio h1 .mv-mask{will-change:transform}
.mv-rule-g{display:block}
.mv-row,.mv-blogrow{position:relative}
.mv-row::after,.mv-blogrow::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:#6600DD;transform:scaleX(0);transform-origin:0 50%;opacity:0;pointer-events:none}
html.mv-js .mv-row.is-in::after,html.mv-js .mv-blogrow.is-in::after{animation:mvsweepline 1400ms cubic-bezier(0.23,1,0.32,1) var(--d,0ms) both}
@keyframes mvsweepline{0%{transform:scaleX(0);opacity:1}55%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
html.mv-js .mv-blogrow img{clip-path:inset(0 100% 0 0);transition:clip-path 1100ms cubic-bezier(0.77,0,0.175,1) 120ms}
html.mv-js .mv-blogrow.is-in img{clip-path:inset(0 0 0 0)}
html.mv-js .mv-logo.mv-rv{transform:translate3d(0,0,0) scale(0.96)}
html.mv-js .mv-logo.mv-rv.is-in{transform:none}
.mv-floor{position:relative;height:clamp(220px,30vw,440px);background:#FFFFFF;overflow:hidden}
.mv-floor canvas{position:absolute;inset:0;width:100%;height:100%;display:block;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 30%);mask-image:linear-gradient(to bottom,transparent 0,#000 30%)}
@media (pointer:fine){html{overscroll-behavior:none}}
@media (hover:none){.mv-row:hover,.mv-blogrow:hover{background:transparent !important}}
@media (prefers-reduced-motion:reduce){.mv-row::after,.mv-blogrow::after{display:none}html.mv-js .mv-blogrow img{clip-path:none !important;transition:none !important}.mv-pg,#inicio h1 .mv-mask{transform:none !important;opacity:1 !important}.mv-btn:active{transform:none}}

/* ===== Integración con WordPress ===== */
body{margin:0;background:#1F1D21;color:#FFFFFF;font-family:"Manrope",system-ui,sans-serif}
.wp-site-blocks{padding:0}
.wp-site-blocks>*{margin-block-start:0;margin-block-end:0}
.mv-head-wrap{position:sticky;top:0;z-index:30}
.admin-bar .mv-head-wrap{top:var(--wp-admin--admin-bar--height,32px)}
.mv-head-wrap .mv-head{position:relative !important}
.mv-head-wrap>.mv-skip{position:absolute}

/* Blog en la portada: últimas entradas reales */
.mv-blog-sec{background:#1F1D21;color:#FFFFFF;box-sizing:border-box;display:flex;flex-direction:column;gap:32px;
  padding-top:clamp(40px,5vw,64px);padding-bottom:clamp(88px,10vw,144px);
  padding-left:max(clamp(20px,4vw,56px),calc((100% - 1360px) / 2 + clamp(20px,4vw,56px)));
  padding-right:max(clamp(20px,4vw,56px),calc((100% - 1360px) / 2 + clamp(20px,4vw,56px)))}
.mv-blog-sec>*{margin:0}
.mv-blog-list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,0.16)}
.mv-blog-list>li{position:relative;display:grid;grid-template-columns:150px minmax(0,1fr) 32px;gap:8px 32px;align-items:baseline;padding:28px 8px;margin:0;border-bottom:1px solid rgba(255,255,255,0.16);transition:background-color 300ms ease-out}
.mv-blog-list>li:hover{background:#2A282D}
.mv-blog-list>li::after{content:"→";font-size:22px;color:#C4A3FF;transition:transform 380ms cubic-bezier(0.2,0.7,0.1,1)}
.mv-blog-list>li:hover::after{transform:translate3d(6px,0,0)}
.mv-blog-list .mv-c-date{margin:0;font-family:"Atkinson Hyperlegible Mono",ui-monospace,monospace;font-size:13px;color:#A3A1A8}
.mv-blog-list .mv-btitle{margin:0;font-size:clamp(19px,1.8vw,26px);line-height:1.25;font-weight:700;letter-spacing:-0.02em}
.mv-blog-list .mv-btitle a{color:#FFFFFF;text-decoration:none}
.mv-blog-list .mv-btitle a::after{content:"";position:absolute;inset:0}
.mv-blog-list .mv-btitle a:focus-visible{outline:none}
.mv-blog-list>li:focus-within{outline:2px solid #C4A3FF;outline-offset:-2px}
.mv-noposts{color:#A3A1A8;margin:24px 0 0}
@media (max-width:640px){.mv-blog-list>li{grid-template-columns:minmax(0,1fr) 32px}.mv-blog-list .mv-c-date{grid-column:1 / -1}}

/* Páginas internas y entradas: lectura sobre blanco */
.mv-page{background:#FFFFFF;color:#1F1D21;box-sizing:border-box;padding:clamp(64px,8vw,120px) clamp(20px,4vw,56px) clamp(88px,10vw,144px);min-height:60vh}
.mv-page a{color:#6600DD}
.mv-page a:hover{color:#4E00AA}
.mv-page-kicker{font-family:"Atkinson Hyperlegible Mono",ui-monospace,monospace;font-size:13px;letter-spacing:0.12em;text-transform:uppercase;color:#6E6E6E}
.mv-page-title{font-size:clamp(36px,5vw,72px);line-height:1.02;font-weight:800;letter-spacing:-0.04em;margin:0 0 40px;text-wrap:balance}
.mv-page .wp-block-post-content{font-size:18px;line-height:1.7}
.mv-page .wp-block-post-content h2{font-size:clamp(26px,2.6vw,36px);line-height:1.15;font-weight:800;letter-spacing:-0.03em;margin-top:2em}
.mv-page .wp-block-post-content h3{font-size:22px;font-weight:800;letter-spacing:-0.02em;margin-top:1.6em}
.mv-page .wp-block-post-content img{height:auto;max-width:100%}
.mv-light .mv-blog-list{border-top-color:#1F1D21}
.mv-light .mv-blog-list>li{border-bottom-color:#E2E1E6}
.mv-light .mv-blog-list>li:hover{background:#F5EFFD}
.mv-light .mv-blog-list>li::after{color:#6600DD}
.mv-light .mv-blog-list .mv-c-date{color:#6E6E6E}
.mv-light .mv-blog-list .mv-btitle a{color:#1F1D21}
.mv-page .wp-block-query-pagination{margin-top:32px;font-weight:600}
@media (pointer:coarse),(max-width:760px){.mv-blog-sec a.mv-ul{display:inline-flex !important;align-items:center;min-height:44px}}