/* kjv-movil.css · 9-nov (Motor 1) · teléfono primero: cada sección en una columna, centrada y sin encimarse.
   Se carga al final para mandar sobre kjv-v4 / kjv-x / kjv-x2. Solo afecta < 820px salvo lo marcado «todas». */

/* el nombre en texto de la portada es solo para teléfono (en computadora ya está la firma) */
@media (min-width:820px){#intro .mv-name{display:none!important}}

/* (la portada de Servicios con el avatar al centro vive en kjv-svc3.css) */

/* todas: guía ligero en las páginas sin el script del avatar (kit, Clevk) */
.mv-guide{position:fixed;right:max(6px,1vw);bottom:0;z-index:60;width:calc(var(--gh,190px) * .3);height:var(--gh,190px);opacity:0;transition:opacity .4s;pointer-events:none}
.mv-guide.on{opacity:1}
.mv-guide-av{position:absolute;inset:0;pointer-events:auto;display:block}
.mv-guide-av img{height:100%;width:auto;display:block;margin-left:auto;filter:drop-shadow(0 14px 24px rgba(0,0,0,.4))}
.mv-guide-say{position:absolute;right:calc(100% - 6px);bottom:calc(var(--gh,190px) * .62);margin:0;min-width:170px;max-width:240px;padding:10px 13px;border-radius:16px 16px 4px 16px;background:rgba(6,26,19,.95);
  border:1px solid rgba(212,175,55,.6);color:#F7F1E6;font:500 12.5px/1.4 var(--body,system-ui,sans-serif);box-shadow:0 14px 30px rgba(0,0,0,.35);opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s;pointer-events:none}
.mv-guide.talk .mv-guide-say{opacity:1;transform:none}
.mv-guide-say b{display:block;color:#D4AF37;font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:3px}
.mv-guide-say span{display:block}
@media (max-width:819px){.mv-guide{--gh:118px}.mv-guide-say{min-width:min(52vw,190px);max-width:min(64vw,230px);font-size:12px;padding:8px 11px}}
@media (prefers-reduced-motion:reduce){.mv-guide,.mv-guide-say{transition:none}}

/* todas: menú → tienda · el botón «Comprar · US$12» en su propia fila, centrado y legible (dueño 10-nov) */
#menu .x-card.x-kit{grid-template-columns:62px minmax(0,1fr)!important;row-gap:10px!important;align-items:center}
#menu .x-card.x-kit .x-buy{grid-column:1/-1!important;justify-self:center!important;align-self:center!important;padding:10px 22px!important;font-size:12.5px!important;white-space:nowrap}

/* puntos de los carruseles (genérico) */
.svc-studio .mv-dots{display:flex;justify-content:center;gap:7px;margin:8px 0 4px}
.svc-studio .mv-dots i{width:7px;height:7px;border-radius:50%;background:rgba(212,175,55,.3);transition:background .3s,transform .3s}
.svc-studio .mv-dots i.on{background:#D4AF37;transform:scale(1.25)}
:root[data-theme="light"] .svc-studio .mv-dots i{background:rgba(122,91,12,.25)}
:root[data-theme="light"] .svc-studio .mv-dots i.on{background:#7A5B0C}

/* todas: Precios · los beneficios de cada tarjeta aparecen rápido (antes uno a uno con retraso) */
.xp-cards.x-al li{transition-duration:.3s,.35s!important;transition-delay:calc(var(--i,0) * 30ms)!important}

/* todas: Sobre mí · la pose de presentar es vertical (el recuadro era cuadrado para el retrato anterior) */
.xa-hero .xa-av.x-hav.about{aspect-ratio:auto!important;width:min(34vw,460px)!important;height:min(calc(100svh - 110px),820px)!important;align-self:end}

/* todas: pop-up «¿Quieres la guía?» junto al avatar de cada click to call (10-nov, dueño) */
.x-fin-guia{position:absolute;z-index:6;left:calc(50% + min(8vw,118px));top:1%;width:min(220px,20vw);display:flex;flex-direction:column;gap:5px;padding:12px 14px 12px;
  border-radius:18px 18px 18px 4px;background:rgba(6,26,19,.94);border:1px solid rgba(212,175,55,.6);color:#F7F1E6;box-shadow:0 18px 40px rgba(0,0,0,.4);
  font:500 12.5px/1.35 var(--body,system-ui);text-align:left;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  opacity:0;transform:translateY(8px) scale(.96);transition:opacity .5s ease .9s,transform .5s ease .9s}
.x-fin.x-on .x-fin-guia{opacity:1;transform:none}
.x-fin-guia b{color:#D4AF37;font-size:12.5px;letter-spacing:.02em}
.x-fin-guia .x-fin-guia-d{margin:0;color:rgba(247,241,230,.86)}
.x-fin-guia a{margin-top:2px;display:inline-flex;justify-content:center;padding:8px 10px;border-radius:99px;background:#D4AF37;color:#061A13;font-weight:700;text-decoration:none;font-size:12px}
.x-fin-guia a:hover{filter:brightness(1.08)}
.x-fin-guia .x-fin-guia-free{background:none;border:0;padding:2px 0 0;color:rgba(247,241,230,.8);font:600 11.5px/1.2 var(--body,system-ui);text-decoration:underline;cursor:pointer}
@media (max-width:819px){.x-fin-guia{padding:9px 10px!important;gap:4px!important;font-size:11px!important;border-radius:16px 16px 4px 16px}.x-fin-guia .x-fin-guia-d{display:none}.x-fin-guia a{font-size:11px;padding:7px 8px}}
@media (prefers-reduced-motion:reduce){.x-fin-guia{transition:none;opacity:1;transform:none}}
/* cierre: la pose de cuerpo entero necesita alto, no un cuadrado; siempre centrado */
@media (min-width:820px){.x-fin-av.x-fin-full{height:min(74vh,660px)!important;width:min(26vw,380px)!important;aspect-ratio:auto!important;justify-self:center!important}}

/* todas: HYBRID002 · las 6 familias son clasificación interna; no se listan en la portada */
#services .svh-fams{display:none!important}

/* todas: un solo botón de precios en «Tres pasos» (los dos iban a pricing.html) */
#ladder > p.x-more{display:none!important}

/* todas: portafolio · cada logo dentro de su marco y todos alineados al mismo lado (inicio del texto) */
.xo-logo{max-width:100%;box-sizing:border-box;overflow:hidden}
.xo-logo img{max-width:100%!important;min-width:0}
.xo-s[data-side="r"] .xo-logo.two{margin-left:0!important}
.xo-logo.two{width:auto!important;max-width:min(460px,100%)}

@keyframes mvShow{to{opacity:1;transform:none;filter:none}}
@media (max-width:819px){
  /* 0 · títulos: en teléfono no se deshacen en polvo al subir (se perdían mientras se leía la sección)
        y, si su animación de entrada no llega a correr, aparecen solos a los 2 s (nunca quedan invisibles) */
  .xk.gone .xk-c{opacity:1!important;transform:none!important;filter:none!important}
  .xk.x-wipe.gone .xk-w::after{display:none!important}
  .xk:not(.x-on) .xk-c{animation:mvShow .5s ease 2s forwards!important}
  /* barrido dorado: las letras siempre visibles; la barra sigue cruzando por encima como entrada */
  .xk.x-wipe .xk-c{opacity:1!important;animation:none!important}

  /* 1 · barra superior opaca: el contenido ya no pasa por detrás del logo y los botones */
  .top{background:linear-gradient(180deg,rgba(6,26,19,.96) 70%,rgba(6,26,19,0));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  :root[data-theme="light"] .top{background:linear-gradient(180deg,rgba(250,247,238,.96) 70%,rgba(250,247,238,0))}

  /* 2 · el número de capítulo («11 · La convicción») se encimaba sobre el título: fuera en teléfono */
  .ch .ch-kick{display:none!important}

  /* 3 · cada capítulo en una sola columna, centrado */
  section.ch{flex-direction:column!important;flex-wrap:nowrap!important;align-items:center!important}
  section.ch > .in{width:100%!important;max-width:560px!important;margin-left:auto!important;margin-right:auto!important}
  section.ch > p.x-more,section.ch .xl-more,section.ch .cta{display:flex;justify-content:center;width:100%;text-align:center}
  section.ch header{align-items:center;text-align:center}

  /* 4 · portada: avatar arriba → firma → título → explicación → botones, todo en una pantalla */
  body.v4 #intro.hero4{padding:calc(76px + env(safe-area-inset-top,0px)) 18px 20px!important;min-height:100svh!important;justify-content:flex-start!important}
  /* orden del dueño (9-nov, 2.ª ronda): frase → nombre → avatar → firma → explicación → botones */
  #intro.hero4 > .in{display:contents!important}
  #intro.hero4{align-items:center!important;gap:8px!important}
  #intro .h4-title{order:1!important}
  #intro .mv-name{order:2;margin:0;font:600 11px/1.2 var(--body,system-ui);letter-spacing:.32em;text-transform:uppercase;color:#D4AF37;text-align:center}
  :root[data-theme="light"] #intro .mv-name{color:#7A5B0C}
  #intro .x-hav,#intro .x-hav.cv{order:3!important}
  #intro .hero-sig{order:4!important}
  #intro .lead{order:5!important}
  #intro .cta{order:6!important}
  #intro .x-hav,#intro .x-hav.cv{flex:none!important;position:relative!important;width:min(64vw,270px)!important;height:min(33svh,290px)!important;margin:0 auto!important;top:auto!important;left:auto!important;transform:none!important}
  #intro.hero4 > .in{order:1;gap:10px!important;padding:0!important;min-height:0!important;align-items:center!important;text-align:center!important}
  #intro .h4-side,#intro .lens-p{display:contents!important}
  #intro .hero-sig{order:0;display:flex;justify-content:center;margin:0}
  #intro .hero-sig .sigmark{--sig-h:34px}
  #intro .h4-title{order:1;margin:0!important;font-size:clamp(34px,10vw,44px)!important;line-height:1.02!important;text-align:center!important}
  #intro .h4-title .h4-l,#intro .h4-title .h4-r{display:block;text-align:center!important;transform:none!important}
  #intro .h4-title .xk-c{opacity:1!important;animation:none!important}
  #intro .h4-title .xk-w::after{display:none!important}
  #intro .x-wel-cv{display:none!important}
  #intro .lead{order:2;margin:0!important;font-size:15px!important;line-height:1.45!important;text-align:center!important;max-width:34ch}
  #intro .cta{order:3;flex-direction:row!important;flex-wrap:wrap;gap:10px!important;justify-content:center!important;margin:4px 0 0!important}
  #intro .cta .btn{flex:1 1 150px;justify-content:center;min-height:46px;padding:12px 14px!important;font-size:14px}

  /* 3b · subtítulos dorados (eyebrows) largos: más chicos, centrados, sin la raya decorativa que los empujaba */
  section .eyebrow,section .x-eyebrow,section [class*="kick"]:not(.ch-kick){letter-spacing:.16em!important;font-size:10.5px!important;line-height:1.55!important;flex-wrap:wrap!important;justify-content:center!important;text-align:center!important;max-width:100%}
  section .eyebrow::before,section .eyebrow::after{display:none!important}

  /* 7 · Servicios: los tres pasos en una fila de tres tarjetas (nombre visible completo) y todo en una pantalla */
  #services.svh4{padding-top:72px!important;padding-bottom:28px!important;min-height:100svh;justify-content:center}
  #services header h2{margin:10px 0 8px!important}
  #services header .lead{margin-top:8px!important;font-size:15px!important;line-height:1.45!important}
  #services .svh-steps{flex-direction:row!important;gap:8px!important;margin:18px 0 16px!important}
  #services .svh-steps li{flex:1 1 0!important;min-width:0;flex-direction:column!important;align-items:center!important;text-align:center;padding:12px 3px!important;border:1px solid rgba(212,175,55,.35);border-radius:14px;gap:4px}
  #services .svh-steps li::before,#services .svh-steps li::after{display:none!important}
  #services .svh-steps li > span{font-size:clamp(11px,3.15vw,14px)!important;line-height:1.15;white-space:nowrap;letter-spacing:-.01em;word-break:normal;overflow-wrap:normal}
  #services .svh-steps li small{font-size:9.5px!important;letter-spacing:.06em!important;line-height:1.25}
  #services .svh-fams{gap:6px!important;margin-bottom:14px!important}
  #services .svh-fams a{padding:8px 11px!important;font-size:12px!important}
  #services .x-more{margin:0!important}

  /* 8 · Precios: las cuatro tarjetas en un carrusel que se desliza de lado (una tarjeta por vista, centrada);
        un solo botón abajo: «Todos los precios y la calculadora» */
  #ladder.ladder4{padding-top:70px!important;padding-bottom:24px!important}
  #ladder header .eyebrow{font-size:10.5px!important}
  #ladder header h2{font-size:clamp(30px,8.6vw,38px)!important;margin:8px 0 6px!important;line-height:1.05!important}
  #ladder header .lead{font-size:14px!important;line-height:1.4!important;margin-top:6px!important}
  #ladder .xl-opts{flex-direction:row!important;flex-wrap:wrap;justify-content:center;gap:8px 14px!important;margin:12px 0 10px!important}
  #ladder .xl-opts .xp-sw{width:auto!important;font-size:12.5px!important}
  #ladder .xp-cards{display:flex!important;grid-template-columns:none!important;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;gap:12px!important;padding:6px 7vw 10px!important;margin:0 -18px!important;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  #ladder .xp-cards::-webkit-scrollbar{display:none}
  #ladder .xp-card{flex:0 0 84%!important;max-width:340px;scroll-snap-align:center;grid-row:auto!important;display:flex!important;flex-direction:column;gap:6px;padding:18px 16px!important;text-align:center}
  #ladder .xp-card{gap:3px!important;padding:14px 14px!important}
  #ladder .xp-card h3{font-size:19px!important;margin:0!important}
  #ladder .xp-card .xp-promise{font-size:13.5px!important;margin:0!important;line-height:1.25!important}
  #ladder .xp-card .xp-for{font-size:10px!important;margin:2px 0 0!important}
  #ladder .xp-card ul{text-align:left;font-size:12.5px!important;line-height:1.28!important;margin:4px 0 2px!important}
  #ladder .xp-card ul li{padding-top:3px!important;padding-bottom:3px!important;margin:0!important}
  #ladder .xp-card .xp-price{margin:2px 0 0!important}
  #ladder .xp-card .xp-price b{font-size:36px!important;line-height:1!important}
  #ladder .xp-card .xp-sub{font-size:11.5px!important;margin:0!important}
  #ladder .xp-card .m2g-chip{margin-top:4px!important}
  /* en teléfono la tarjeta muestra lo esencial; los extras (+) siguen en «Todos los precios» */
  #ladder .xp-card li.xp-plus,#ladder .xp-card .xp-for,#ladder header .lead{display:none!important}
  #ladder .xp-card{height:auto!important;align-self:flex-start}
  #ladder.ladder4{padding-top:64px!important;padding-bottom:14px!important}
  #ladder .xp-cards{align-items:flex-start!important;padding-bottom:4px!important}
  #ladder .xl-opts{flex-wrap:nowrap!important;gap:10px!important;margin:8px 0 6px!important}
  #ladder .xl-opts .xp-sw{font-size:11px!important;gap:6px!important;white-space:nowrap}
  #ladder .x-note{font-size:10.5px!important;line-height:1.3!important;margin:6px 0 0!important}
  #ladder .xp-card > a,#ladder .xp-card .xp-cta{margin-top:auto!important;align-self:stretch;justify-content:center}
  #ladder .mv-dots{display:flex;justify-content:center;gap:7px;margin:6px 0 10px}
  #ladder .mv-dots i{width:7px;height:7px;border-radius:50%;background:rgba(212,175,55,.3);transition:background .3s,transform .3s}
  #ladder .mv-dots i.on{background:#D4AF37;transform:scale(1.25)}
  #ladder .xl-more{margin:4px 0 0!important}
  #ladder .xl-more a{width:100%;max-width:340px;justify-content:center;min-height:50px;padding:12px 16px!important}
  #ladder .x-note{text-align:center;font-size:12px!important}

  /* 9 · Cómo vendo: los 5 pasos en una pantalla; solo el paso activo abre su explicación */
  #method .in{padding-top:70px!important}
  #method header h2{font-size:clamp(28px,8vw,36px)!important;margin:8px 0 6px!important}
  #method header .lead{font-size:14px!important;line-height:1.4!important;margin-top:4px!important}
  #method .sys-steps{gap:6px!important}
  #method .sys-s{padding:9px 12px!important;flex-wrap:wrap;align-items:baseline;gap:2px 8px!important;justify-content:center;text-align:center}
  #method .sys-s b{font-size:15px!important;line-height:1.25!important;flex:1 1 100%}
  #method .sys-s .sys-tag{font-size:11.5px!important}
  #method.sell4{min-height:0!important;height:auto!important;padding-top:0!important;padding-bottom:16px!important}
  #method .in{position:relative!important;top:auto!important;min-height:100svh!important;height:auto!important;justify-content:center!important}
  #method .sys-s .sys-d{flex:1 1 100%;font-size:12.5px!important;line-height:1.32!important;opacity:.85}
  #method .sys-s{opacity:1!important;visibility:visible!important}
  #method .sys-s.now{left:0!important;width:100%!important;transform:none!important}
  #method .sys-meter{margin-top:10px!important;padding:0 6px;gap:8px}
  #method .sys-meter span{font-size:9.5px!important;letter-spacing:.12em!important;white-space:nowrap}
  #method .sys-meter i{flex:1 1 auto;min-width:40px}

  /* 10 · Quién soy (cinco lugares): globo más bajo y textos compactos para que todo quede en una pantalla */
  #about.world4{padding-top:66px!important;padding-bottom:12px!important}
  #about .w-head h2{font-size:clamp(28px,8vw,36px)!important;margin:6px 0 4px!important;line-height:1.05!important}
  #about .w-head .lead,#about .w-head p{font-size:13.5px!important;margin:2px 0 0!important;line-height:1.35!important}
  #about .x-mw-box{height:270px!important;max-height:34svh}
  #about .x-mw-ph{width:118px!important;height:auto!important;aspect-ratio:3/2}
  #about .x-mw-now{margin-top:4px!important;transform:scale(.86);transform-origin:center top}
  #about .w-story{font-size:14px!important;line-height:1.35!important;margin:0!important}
  #about .w-stops{margin:6px 0 4px!important}
  #about .w-lesson{font-size:13px!important;line-height:1.35!important;margin:6px 0!important;padding-left:10px!important}
  #about .w-more{font-size:12.5px!important;gap:4px 10px!important;margin-top:6px!important}
  #about .w-more *{font-size:inherit}
  #about .w-more dt,#about .w-more b{font-size:10px!important}
  #about .w-more a,#about .w-more .btn{padding:9px 14px!important;font-size:13px!important}
  /* estudios e idiomas ya están en el CV y en «La historia completa»: en teléfono queda solo el botón */
  #about .w-more .facts{display:none!important}
  #about .w-more{display:flex!important;justify-content:center}
  #about .w-story{font-size:13.5px!important}
  #about .w-head{padding-top:0!important;margin-top:0!important}

  /* 11 · portafolio en teléfono: marcos de logo del mismo alto, a la izquierda, con el logo contenido */
  #work .xo-logo{height:56px!important;padding:9px 16px!important;margin:0 0 12px!important}
  #work .xo-logo img{height:100%!important;width:auto!important;max-width:100%!important;object-fit:contain}
  #work .xo-logo.two{height:64px!important;min-height:0!important;padding:8px 16px!important;gap:10px!important}
  #work .xo-logo.two img{height:44px!important;max-width:calc(50% - 16px)!important}

  /* 12 · ORIGEN en teléfono: las seis letras caben en el ancho y se encienden una por una al bajar
        (la que toca en oro y grande, las ya vistas en crema, las que faltan apagadas); el nombre del paso va debajo */
  #origen .xg{width:100%!important;overflow-x:clip}
  #origen .xg-pin{width:100%!important;justify-content:center!important;gap:14px!important;padding:70px 18px 24px!important;box-sizing:border-box}
  #origen .xg-head{width:100%!important;text-align:center}
  #origen .xg-word{width:100%!important;max-width:100%!important;gap:0!important;justify-content:space-between!important;transform:none!important;margin:0!important}
  #origen .xg-word b{flex:1 1 0!important;min-width:0;width:auto!important;justify-content:center;align-items:center}
  #origen .xg-word b small{display:none!important}
  #origen .xg-word b i{font-size:clamp(40px,14vw,64px)!important;line-height:1!important;opacity:.22;transform:translateY(10px) scale(.86);transition:opacity .45s,transform .55s cubic-bezier(.3,1.4,.5,1),color .45s;display:inline-block}
  #origen .xg-word b:has(~ b.on) i{opacity:.8;transform:none;color:#F7F1E6}
  #origen .xg-word b.on i{opacity:1!important;transform:scale(1.14)!important;color:#D4AF37!important;text-shadow:0 0 22px rgba(212,175,55,.45)}
  /* tema claro: letras vistas en verde oscuro, la actual en oro oscuro, las que faltan en verde suave (antes no se veían) */
  :root[data-theme="light"] #origen .xg-word b i{color:#0F6B45!important;opacity:.22}
  :root[data-theme="light"] #origen .xg-word b:has(~ b.on) i{color:#0F3D2B!important;opacity:.85}
  :root[data-theme="light"] #origen .xg-word b.on i{color:#9C7A1E!important;text-shadow:0 0 18px rgba(156,122,30,.3)}
  #ladder .xp-card,#horizon .dr-row > .door4{transition:opacity .35s,transform .35s}
  #ladder .xp-card:not(.mv-on),#horizon .dr-row > .door4:not(.mv-on){opacity:.28;transform:scale(.94)}
  #origen .xg-step{width:100%!important;max-width:100%!important;left:auto!important;text-align:center}
  #origen .xg-step h3{font-size:26px!important}
  #origen .xg-step p{font-size:14.5px!important;line-height:1.4!important}
  #origen .xg-bar{width:70%!important;margin:0 auto!important;left:auto!important}
  #origen .xg-foot{width:100%!important;left:auto!important;text-align:center;font-size:11px!important;padding:0 6px;white-space:normal!important}
  #origen .xg-foot *{white-space:normal!important;animation:none!important;transform:none!important}

  /* 13 · Cierre (click to call): firma y redes sin encimarse, los dos lemas lado a lado,
        el avatar de cuerpo completo debajo y el botón de agenda visible; todo en una pantalla */
  /* 10-nov (dueño): igual en TODAS las páginas: «Personas primero» → el avatar (centrado) → «Impacto siempre» → «Agenda 20 minutos»,
     y el pop-up pequeño «¿Quieres la guía?» a la derecha del avatar */
  .x-fin{min-height:100svh}
  .x-fin .x-fin-p{padding:0 0 64px!important;min-height:calc(100svh - 24px);box-sizing:border-box}
  .x-fin .x-tab.t{display:none!important}
  .x-fin .x-fin-firma{position:relative!important;top:auto!important;left:auto!important;display:block;width:132px!important;height:auto!important;margin:18px auto 6px!important;transform:none!important}
  .x-fin .x-fin-soc{position:relative!important;top:auto!important;left:auto!important;right:auto!important;justify-content:center!important;gap:8px!important;margin:0 auto 8px!important;transform:none!important}
  .x-fin .x-fin-soc a{width:36px!important;height:36px!important}
  .x-fin .x-fin-logos{margin:0!important;padding:0 10px!important;transform:scale(.86);transform-origin:center top}
  .x-fin .x-fin-stage{display:grid!important;grid-template-columns:1fr!important;grid-template-rows:auto auto auto!important;gap:6px!important;padding:0 12px!important;align-items:start!important;justify-items:center!important;margin-top:0!important;position:relative}
  .x-fin .x-fin-side.l{grid-area:1/1/2/2!important;align-items:center!important;text-align:center!important}
  .x-fin .x-fin-av,.x-fin .x-fin-av.x-fin-full{grid-area:2/1/3/2!important;position:relative!important;left:auto!important;transform:none!important;width:min(56vw,240px)!important;height:min(40svh,350px)!important;margin:2px auto 0!important;justify-self:center!important}
  .x-fin .x-fin-side.r{grid-area:3/1/4/2!important;align-items:center!important;text-align:center!important}
  .x-fin .x-fin-side{position:relative!important;left:auto!important;right:auto!important;top:auto!important;transform:none!important;width:auto!important;min-width:0;gap:8px!important;display:flex!important;flex-direction:column!important}
  .x-fin .x-fin-side .x-fin-w{font-size:clamp(26px,7.6vw,32px)!important;line-height:1.02!important;margin:0!important}
  .x-fin .x-fin-side .x-fin-write{font-size:13px!important}
  .x-fin .x-fin-side .x-fin-book,.x-fin .x-fin-side a.solid{padding:13px 22px!important;font-size:12.5px!important;letter-spacing:.08em!important;white-space:nowrap}
  .x-fin .x-fin-glow{left:50%!important;transform:translateX(-50%)!important;top:auto!important;bottom:0!important;width:280px!important;height:280px!important}
  .x-fin .x-tab.b{position:absolute!important}
  .x-fin .x-fin-guia{grid-area:2/1/3/2!important;justify-self:end!important;align-self:center!important;position:relative!important;left:auto!important;top:auto!important;right:-4px;
    width:min(40vw,156px)!important;margin:0!important;z-index:6}

  /* 14 · Hacia dónde vamos: los proyectos en carrusel deslizable (uno por vista) */
  #horizon.doors4{padding-top:68px!important;padding-bottom:20px!important}
  #horizon header h2{font-size:clamp(28px,8vw,36px)!important;margin:8px 0 6px!important}
  #horizon header .lead{font-size:14px!important;line-height:1.4!important;margin-top:4px!important}
  #horizon .dr-row{display:flex!important;grid-template-columns:none!important;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;gap:12px!important;padding:6px 7vw 8px!important;margin:12px -18px 0!important;scrollbar-width:none;align-items:flex-start}
  #horizon .dr-row::-webkit-scrollbar{display:none}
  #horizon .dr-row > .door4{flex:0 0 84%!important;max-width:340px;scroll-snap-align:center;margin:0!important}
  #horizon .flowline{margin:8px 0 10px!important;font-size:12px!important}
  #horizon .mv-dots,#gift .mv-dots{display:flex;justify-content:center;gap:7px;margin:4px 0 8px}
  #horizon .mv-dots i{width:7px;height:7px;border-radius:50%;background:rgba(212,175,55,.3);transition:background .3s,transform .3s}
  #horizon .mv-dots i.on{background:#D4AF37;transform:scale(1.25)}

  /* 15 · La carta y El regalo: más compactos */
  #letter.letter{padding-top:66px!important;padding-bottom:16px!important}
  #letter .in p,#letter .in li{font-size:15px!important;line-height:1.45!important}
  #gift.gift4{padding-top:66px!important;padding-bottom:16px!important}
  #gift h2{font-size:clamp(28px,8vw,36px)!important;margin:6px 0!important}
  #gift ol li,#gift ul li{font-size:13px!important;padding-top:2px!important;padding-bottom:2px!important;line-height:1.3!important}
  #gift .gift-in{gap:10px!important}
  #gift .gift-photo{width:100%!important;max-width:none!important;height:110px!important;margin:0!important;border-radius:14px;overflow:hidden}
  #gift .gift-photo img{width:100%!important;height:100%!important;object-fit:cover;object-position:50% 30%}
  #gift .gift-body{width:100%!important;max-width:100%!important;text-align:center}
  #gift .gift-list{font-size:13px!important;margin:6px 0!important;text-align:left;display:inline-block}
  #gift .lead{font-size:14px!important;line-height:1.4!important;margin:4px 0!important}
  #gift .nform{gap:8px!important;margin-top:6px!important}
  #gift .nform input{min-height:44px!important;padding:10px 12px!important}
  #gift .nform .fine,#gift .nform small{font-size:11px!important;line-height:1.3!important}

  /* 17 · Mi trabajo: cada sitio (logo, texto, vista y botones) en una pantalla */
  #work .xo-s{padding-top:56px!important;padding-bottom:12px!important;min-height:0!important}
  #work .xo-txt .xo-w{font-size:14px!important;line-height:1.4!important;margin:4px 0!important}
  #work .xo-txt .xo-t{margin:4px 0 2px!important}
  #work .xo-demo{margin-top:10px!important}
  #work .xo-view{height:min(34svh,300px)!important}
  #work .xo-cta{margin-top:8px!important;gap:8px!important;justify-content:center}
  #work .xo-cta .btn{flex:1 1 0;justify-content:center;padding:11px 10px!important;font-size:13px!important}

  /* 18 · Booking Setup: la laptop y el teléfono del demo caben completos en el ancho */
  #booking .xb2-stage{grid-template-columns:minmax(0,1fr)!important;justify-items:center!important;gap:18px!important}
  #booking .xb2-lap{width:100%!important;max-width:100%!important;min-width:0!important;justify-self:stretch}
  #booking .xb2-scr,#booking .xb2-base,#booking .xb2-cta{max-width:100%!important;min-width:0!important}
  #booking .xb2-view{max-width:100%!important;overflow:hidden}
  #booking .xb2-view .xb2-shot{width:100%!important;max-width:100%!important;left:0!important;margin:0!important;transform:none}
  #booking .xb2-bar{min-width:0!important;max-width:100%!important;overflow:hidden}
  #booking .xb2-bar span,#booking .xb2-bar b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #booking .xb2-phone{width:min(300px,84vw)!important;max-width:84vw!important;min-width:0!important;justify-self:center!important;margin:0 auto!important;left:auto!important;transform:none!important}
  #booking .xb2-phone .xb-app{min-width:0!important;max-width:100%!important}
  #booking .xb2-phone .xb-step{left:14px!important;right:14px!important;width:auto!important;max-width:calc(100% - 28px)!important}
  #booking .xb-slots{grid-template-columns:1fr 1fr!important}
  #booking .xb-slots .xb-o{min-width:0!important;width:auto!important}

  /* 19 · menú: una columna del ancho del teléfono; el botón de cerrar siempre visible; tarjetas debajo de los enlaces */
  #menu.x-menu{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto!important;grid-auto-rows:auto!important;align-content:start!important;overflow-y:auto!important;overflow-x:hidden!important;padding:16px 18px calc(24px + env(safe-area-inset-bottom,0px))!important;gap:16px!important;box-sizing:border-box;width:100vw!important;max-width:100vw!important}
  #menu .x-m-top{grid-column:1!important;grid-row:auto!important;width:100%!important;max-width:100%!important;justify-content:space-between!important}
  #menu .x-m-top .x-m-x{position:relative!important;right:auto!important;left:auto!important}
  #menu .x-m-links{grid-column:1!important;grid-row:auto!important;order:1;width:100%!important;max-width:100%!important;margin:0!important}
  #menu .x-m-links a{font-size:clamp(26px,8vw,34px)!important;padding-left:0!important}
  #menu .x-m-cards{grid-column:1!important;grid-row:auto!important;order:2;width:100%!important;max-width:100%!important;flex-direction:row!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px!important;padding-bottom:4px;scrollbar-width:none}
  #menu .x-m-cards::-webkit-scrollbar{display:none}
  #menu .x-m-cards > .x-card{flex:0 0 78%!important;max-width:300px;scroll-snap-align:start}
  #menu .x-m-cards > details{flex:0 0 100%!important}
  #menu .x-m-foot{grid-column:1!important;grid-row:auto!important;order:3;width:100%!important;max-width:100%!important;flex-wrap:wrap!important;gap:10px!important}
  #menu .x-m-soc{flex-wrap:wrap!important;gap:8px 14px!important;max-width:100%!important}

  /* 20 · Sobre mí · los cinco lugares: cada lugar es una pantalla exacta con su imagen (efecto) y su frase juntas */
  .xh .xh-p{min-height:100svh!important;height:100svh!important;box-sizing:border-box;padding:76px 18px 18px!important;grid-template-rows:auto auto!important;align-content:center!important;gap:14px!important}
  .xh .xh-img{height:42svh!important;min-height:0!important;max-height:42svh!important;aspect-ratio:auto!important;overflow:hidden;border-radius:18px}
  .xh .xh-img img,.xh .xh-img canvas,.xh .xh-img video{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover}
  .xh .xh-txt{padding:0!important}
  .xh .xh-txt h3,.xh .xh-txt h2{font-size:clamp(30px,9vw,40px)!important;margin:2px 0!important}
  .xh .xh-txt p{font-size:14.5px!important;line-height:1.4!important;margin:4px 0!important}

  /* 21 · Sobre mí · Personas / Soluciones / Impacto: la escena de partículas arriba y la tarjeta compacta abajo, sin taparse */
  .x-how2 .x-lab-st .x-lab-cv{transform:translateY(-4svh) scale(.9);transform-origin:50% 40%}
  .x-how2 .x-lab-st ol > li{bottom:12px!important;top:auto!important;max-height:none!important;overflow:visible!important;padding:12px 14px!important}
  .x-how2 .x-lab-st ol > li .x-hp,.x-how2 .x-lab-st ol > li .x-hl{font-size:13px!important;line-height:1.35!important;margin:3px 0!important}
  .x-how2 .x-lab-st ol > li .x-hproof{font-size:11.5px!important;margin-top:6px!important}
  .x-how2 .x-lab-st ol > li h3{font-size:16px!important;margin:2px 0 4px!important}
  .x-how2 .x-lab-st ol > li h3,.x-how2 .x-lab-st ol > li b:first-child{font-size:22px!important;line-height:1.05!important}
  .x-how2 .x-lab-st ol > li p{font-size:13px!important;line-height:1.35!important;margin:4px 0!important}
  .x-how2 .x-lab-st ol > li ul{margin:4px 0!important}
  .x-how2 .x-lab-st ol > li ul li{font-size:12.5px!important;line-height:1.3!important;padding:2px 0 2px 18px!important}
  /* 21b · dueño 10-nov (video WA0000): la tarjeta NUNCA se corta; en pantallas bajas el texto se compacta y la escena sube y se encoge */
  @media (max-height:700px){
    .x-how2 .x-lab-st .x-lab-cv{transform:translateY(-11svh) scale(.72)!important}
    .x-how2 .x-lab-st ol > li{bottom:8px!important;padding:9px 12px!important}
    .x-how2 .x-lab-st ol > li h3,.x-how2 .x-lab-st ol > li b:first-child{font-size:19px!important}
    .x-how2 .x-lab-st ol > li .x-hp,.x-how2 .x-lab-st ol > li .x-hl,.x-how2 .x-lab-st ol > li p{font-size:12.2px!important;line-height:1.28!important;margin:2px 0!important}
    .x-how2 .x-lab-st ol > li ul li{font-size:11.8px!important;line-height:1.25!important;padding:1px 0 1px 16px!important}
    .x-how2 .x-lab-st ol > li .x-hproof{font-size:11px!important;margin-top:4px!important}
  }


  /* 24 · CV en teléfono (dueño 10-nov): igual que la portada → «Contrátame» → avatar → firma → el rol → botones; luego roles y números */
  #pagetop.x-cv3 .x-cv3-l{display:contents!important}
  #pagetop.x-cv3 .cvh-back{order:0;flex-direction:row!important;justify-content:center;gap:14px;flex-wrap:wrap;padding-top:72px!important;height:auto!important}
  #pagetop.x-cv3 .cvh-who{order:1;text-align:center;margin:4px 0 0!important}
  #pagetop.x-cv3 h1{order:2;text-align:center;margin:4px 0 0!important}
  #pagetop.x-cv3 .x-hav.cv{order:3!important;height:min(40svh,360px)!important;width:min(62vw,280px)!important;margin:8px auto 0!important}
  #pagetop.x-cv3 .cv-firma{order:4!important;margin:2px auto 0!important;width:150px!important;height:auto!important}
  #pagetop.x-cv3 .cvh-role{order:5;text-align:center;margin:6px 0 0!important;font-size:15px!important;line-height:1.45!important}
  #pagetop.x-cv3 .x-cv3-l > .cta{order:6;justify-content:center!important;flex-wrap:wrap;gap:10px!important;margin:12px 0 0!important}
  #pagetop.x-cv3 .x-cv3-r{order:7!important;margin-top:22px!important}

  /* 26 · Precios · calculadora: en una columna el formulario ya no se queda pegado arriba (se encimaba con los resultados) */
  .xc > .xc-box{position:relative!important;top:auto!important}
  .xc{row-gap:14px!important}

  /* 25 · Sobre mí: la pose de presentar en la portada, completa */
  .xa-hero .xa-av.x-hav.about{position:relative!important;width:min(70vw,300px)!important;height:min(46svh,420px)!important;margin:0 auto!important;left:auto!important;transform:none!important}

  /* 22 · Precios (página): la tabla comparativa se desliza de lado con la primera columna fija */
  .xt-wrap{overflow-x:auto!important;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;max-width:100%;border-radius:12px}
  .xt-wrap .xt{font-size:12.5px!important;min-width:560px}
  .xt-wrap .xt th:first-child,.xt-wrap .xt td:first-child{position:sticky;left:0;z-index:1;background:#0B2A1F;min-width:112px;max-width:130px}
  :root[data-theme="light"] .xt-wrap .xt th:first-child,:root[data-theme="light"] .xt-wrap .xt td:first-child{background:#FBF8F0}
  #ladder .xl-opts{flex-wrap:wrap!important}

  /* 16 · carta de entrada: centrada en el alto VISIBLE del teléfono (sin contar la barra del navegador) */
  .x-in{top:0!important;bottom:auto!important;height:100vh;height:100dvh!important}
  .x-in .x-in-c{margin-top:-4dvh}

  /* 6 · capa flotante ordenada: guía pequeño abajo a la derecha, su globo solo unos segundos,
        «subir» y «silenciar» abajo a la izquierda; sin la píldora «¿Guía gratis?» (ya está junto a cada botón de agenda) */
  .x-guide.x-g3{--gh:118px!important;right:2px!important}
  .x-guide-say{right:calc(var(--gh) * .5)!important;bottom:calc(var(--gh) * .78)!important;min-width:0!important;max-width:min(62vw,230px)!important;font-size:12.5px!important;padding:8px 11px!important;transition:opacity .45s,transform .45s}
  .x-guide-say:not(.mini).mv-off{opacity:0!important;transform:translateY(6px) scale(.96)!important;pointer-events:none!important}
  .x-guide-say.mini{display:none!important}
  .m2g-t{display:none!important}
  #toTop.totop{right:auto!important;left:12px!important;bottom:calc(12px + env(safe-area-inset-bottom,0px))!important;width:40px!important;height:40px!important}
  #chat .gav-mute{position:fixed!important;left:60px!important;right:auto!important;top:auto!important;bottom:calc(20px + env(safe-area-inset-bottom,0px))!important;transform:none!important}
}
/* 10-nov: globo de la guía gratis al final del Kit/guía (se puede tocar) */
.mv-guide.gift .mv-guide-say{pointer-events:auto}
.mv-guide-gift{display:block;color:inherit;text-decoration:none}
.mv-guide-gift b{text-transform:none!important;letter-spacing:.01em!important;font-size:12.5px!important}
.mv-guide-gift span{color:#D4AF37;font-weight:700;margin-top:2px}
body:has(.k-sticky) .mv-guide{bottom:72px}
@media (max-width:1180px){body:has(.mv-guide) .a11y-tras-faq{padding-bottom:170px!important}}

/* 25 · Sobre mí en teléfono (dueño 10-nov, video WA0000): todo centrado; la firma mucho más visible y al centro */
@media (max-width:819px){
  .xa-hero .xa-side,.xa-hero .xa-side.l,.xa-hero .xa-side.r{text-align:center!important;align-items:center!important;justify-items:center!important}
  .xa-hero .xa-side > *{margin-left:auto!important;margin-right:auto!important;text-align:center!important}
  .xa-hero .xa-side.l > img{display:block!important;width:min(84vw,340px)!important;max-width:none!important;height:auto!important;margin:2px auto 10px!important;filter:brightness(1.18) drop-shadow(0 0 12px rgba(212,175,55,.38))}
  .xa-hero .xa-side .xa-scroll{display:flex!important;justify-content:center!important;width:max-content!important}
  .xa-hero .xa-side b{display:block;text-align:center!important}
}

/* 26 · Precios en teléfono y tablet (dueño 10-nov, video WA0000): «Ver los 8 entregables» ya no se monta sobre «Agendar el diagnóstico»:
   el enlace va arriba y el botón debajo, en la misma fila; los botones de las demás tarjetas quedan alineados abajo */
@media (max-width:899px){
  .xp-cards.x-al > .xp-card > .x-btn{align-self:end!important}
  .xp-cards.x-al > .xp-card:has(> .xp-more) > .xp-more{align-self:start!important;justify-self:center;margin:0!important;position:relative;z-index:2}
  .xp-cards.x-al > .xp-card:has(> .xp-more) > .x-btn{margin-top:34px!important}
}

/* 11-nov 19:5x Motor 2 (lanzamiento): a 320 px las tarjetas de «lo que te llevas» (precios) se salían 7 px: columna sin mínimo */
@media (max-width:400px){.xd-grid{grid-template-columns:minmax(0,1fr)!important}.xd-c{min-width:0;padding:16px 14px 18px}.xd-c *{overflow-wrap:anywhere}}
/* 11-nov 19:5x Motor 2 (lanzamiento): a 320 px «Resultados» (h1 de es/pricing, 46 px) se salía 6 px */
@media (max-width:360px){.xp-hero .x-h1{font-size:min(46px,12.4vw)!important}}