/* ============================================================
   Marketing Ultra — Home (plantilla canvas, sin Elementor)
   Scoped bajo body.mku-home. Solo se encola en la home (home-mku.php).
   Diseño: "Marketing Ultra home definitiva" (Claude Design).
   ============================================================ */

/* ---------- fuentes self-host (subset latin; Sora y JetBrains son variables) ---------- */
@font-face{ font-family:"DumbnerdMKU"; src:url("fonts/dumbnerd.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Sora"; src:url("fonts/sora-latin.woff2") format("woff2"); font-weight:400 800; font-style:normal; font-display:swap; }
@font-face{ font-family:"JetBrains Mono"; src:url("fonts/jetbrainsmono-latin.woff2") format("woff2"); font-weight:400 700; font-style:normal; font-display:swap; }
@font-face{ font-family:"Permanent Marker"; src:url("fonts/permanentmarker-latin.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }

:root{
  --teal-50:#E9F8F9; --teal-100:#CAE6E8; --teal-500:#3AA6B9; --teal-700:#1F6F7C; --teal-900:#0E3B43;
  --lime-500:#3CE595; --lime-600:#20C078; --lime-700:#168A55;
  --yellow-400:#F4D818; --yellow-600:#B89E00;
  --ink-900:#0F172A; --ink-700:#2A3344; --ink-500:#454F5E; --ink-300:#8B95A7; --ink-200:#C7CDD7; --ink-100:#E8EBF0; --ink-50:#F4F6F9;
  --paper:#FFFFFF; --night:#181823;
  --holo:linear-gradient(110deg, #168A55 0%, #3CE595 14%, #7CF5C8 26%, #F4D818 38%, #3AA6B9 52%, #6FE3F0 64%, #9DB4FF 76%, #3CE595 88%, #168A55 100%);
  --f-display:"DumbnerdMKU", system-ui, sans-serif; --f-sans:"Sora", system-ui, sans-serif;
  --f-title:"Sora", system-ui, sans-serif;
  --f-mono:"JetBrains Mono", ui-monospace, monospace;
}

/* ---------- reset/base propio (canvas: no dependemos de Astra) ---------- */
body.mku-home *{ box-sizing:border-box; }
body.mku-home{ margin:0; overflow-x:clip; background:var(--paper); color:var(--ink-900);
  font-family:var(--f-sans); -webkit-font-smoothing:antialiased; font-size:16px; line-height:1.6; }
html{ scroll-behavior:smooth; }
/* height:auto evita distorsión cuando el width lo controla el CSS (splash/mascota);
   las imágenes con object-fit definen su propia height en reglas más específicas. */
body.mku-home img{ max-width:100%; display:block; height:auto; }
body.mku-home a{ color:inherit; }
body.mku-home .wrap{ max-width:1200px; margin:0 auto; padding-left:clamp(20px,5vw,56px); padding-right:clamp(20px,5vw,56px); }

/* offset solo si hay admin bar */

/* ---------- atoms ---------- */
body.mku-home .kicker{ font-family:var(--f-mono); font-size:clamp(12px,1.4vw,14px); letter-spacing:.16em; text-transform:uppercase; display:inline-flex; align-items:center; gap:10px; color:var(--teal-700); }
body.mku-home .kicker .dot{ width:8px; height:8px; border-radius:50%; background:var(--lime-500); flex:none; }
body.mku-home .h2{ font-family:var(--f-title); font-weight:800; line-height:1.08; letter-spacing:-.02em; margin:0; font-size:clamp(32px,4.8vw,54px); }
body.mku-home .lead{ font-size:clamp(17px,1.8vw,20px); color:var(--ink-500); }
body.mku-home .pill{ font-family:var(--f-mono); font-size:13px; padding:8px 16px; border-radius:999px; font-weight:600; }

body.mku-home .btn{ display:inline-flex; align-items:center; gap:12px; font-family:var(--f-sans); font-weight:800; font-size:clamp(16px,1.8vw,19px); padding:15px 30px; border-radius:999px; cursor:pointer; text-decoration:none; transition:transform .12s ease, box-shadow .12s ease; }
body.mku-home .btn-lime{ background:var(--lime-500); color:var(--ink-900); border:2.5px solid var(--lime-700); box-shadow:0 5px 0 0 var(--lime-700); }
body.mku-home .btn-lime:hover{ transform:translateY(-2px); box-shadow:0 7px 0 0 var(--lime-700); }
body.mku-home .btn-lime:active{ transform:translateY(3px); box-shadow:0 2px 0 0 var(--lime-700); }
body.mku-home .btn-ghost{ background:transparent; color:var(--ink-900); border:2px solid var(--ink-900); }
body.mku-home .btn-ghost:hover{ background:var(--ink-900); color:#fff; }

body.mku-home section{ position:relative; }
body.mku-home .pad{ padding-top:clamp(44px,5.5vw,78px); padding-bottom:clamp(44px,5.5vw,78px); }
body.mku-home .shead{ text-align:center; max-width:60ch; margin:0 auto clamp(30px,4vw,44px); }
body.mku-home .shead .kicker{ justify-content:center; }
body.mku-home .shead h2{ margin:14px 0 12px; }
body.mku-home .shead .lead{ margin:0 auto; }

/* ============ NAV ============ */
/* selector de idioma (Polylang, markup propio) */

/* ============ HERO ============ */
body.mku-home .hero{ position:relative; overflow:hidden; background:linear-gradient(180deg, var(--teal-50) 0%, #ECF9FA 28%, #F3FBFC 60%, #FAFEFE 84%, var(--paper) 100%); color:var(--ink-900); }
body.mku-home .hero .grid{ position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:clamp(24px,4vw,56px); padding-top:clamp(32px,5vw,60px); padding-bottom:clamp(44px,6vw,80px); }
body.mku-home .hero .kicker{ color:var(--teal-700); }
body.mku-home .hero .wm{ font-family:var(--f-display); text-transform:uppercase; line-height:.80; margin:18px 0 0; }
body.mku-home .hero .wm .l{ display:block; }
body.mku-home .hero .wm .seg{ display:inline-block; position:relative; font-size:clamp(42px,10.5vw,120px); color:var(--ink-900); z-index:0; }
body.mku-home .hero .wm .t2{ margin-left:.08em; }   /* respiro quirúrgico E→T (Dumbnerd solapa la T sobre la E) */
body.mku-home .hero .wm .seg::before{ content:attr(data-t); position:absolute; left:0; right:0; top:0; text-align:inherit; transform:translate(.05em,.058em); z-index:-1; pointer-events:none;
  background:var(--holo); background-size:320% 100%; background-position:0% 0;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  animation:wmholo 11s ease-in-out infinite alternate; }
@keyframes wmholo{ from{ background-position:0% 0; } to{ background-position:100% 0; } }
body.mku-home .hero .wm .by{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; font-family:var(--f-sans); text-transform:none; font-weight:600; font-size:clamp(16px,2vw,21px); color:var(--ink-500); margin-top:clamp(16px,2.2vw,26px); }
body.mku-home .hero .wm .by b{ font-family:"Permanent Marker", var(--f-display), cursive; font-weight:400; font-size:clamp(28px,4vw,42px); line-height:.9; color:var(--ink-900); transform:rotate(-2deg); display:inline-block; }
body.mku-home .hero .lede{ font-size:clamp(17px,2vw,20px); line-height:1.5; max-width:44ch; color:var(--ink-500); margin:clamp(20px,3vw,28px) 0; }
body.mku-home .hero .lede b{ font-weight:700; color:var(--ink-700); }
body.mku-home .hero .pills{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:clamp(24px,3vw,32px); }
body.mku-home .hero .pill{ background:#fff; border:1.5px solid var(--ink-100); color:var(--ink-700); font-family:var(--f-mono); font-weight:600; font-size:13px; letter-spacing:.08em; text-transform:uppercase; padding:8px 15px; display:inline-flex; align-items:center; gap:8px; }
body.mku-home .hero .pill::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--dot,var(--lime-500)); flex:none; }
body.mku-home .hero .body{ position:relative; z-index:3; }
body.mku-home .hero .figure{ position:relative; z-index:1; display:flex; align-items:center; justify-content:center; min-width:0; }
body.mku-home .hero .figure .splash{ position:absolute; width:135%; max-width:820px; left:50%; top:50%; transform:translate(-50%,-50%); opacity:.6; pointer-events:none; z-index:0; }
body.mku-home .hero .figure .mascot-wrap{ position:relative; display:block; width:min(100%,430px); aspect-ratio:1/1; filter:drop-shadow(0 16px 26px rgba(31,111,124,.22)); }
body.mku-home .hero .figure .mascot-wrap > *{ position:absolute; inset:0; width:100%; height:100%; display:block; }
body.mku-home .hero .figure .mascot{ z-index:2; }
body.mku-home .hero .figure .mk-logo{ z-index:4; pointer-events:none; }
body.mku-home .hero .figure .holo-frame, body.mku-home .hero .figure .holo-frame-front{ pointer-events:none; background:var(--holo); background-size:320% 100%; background-position:0% 0; animation:wmholo 11s ease-in-out infinite alternate; }
body.mku-home .hero .figure .holo-frame{ z-index:1; -webkit-mask:url("brand/marco-home.png") center/100% 100% no-repeat; mask:url("brand/marco-home.png") center/100% 100% no-repeat; }
body.mku-home .hero .figure .holo-frame-front{ z-index:3; -webkit-mask:url("brand/marco-front-mask.png") center/100% 100% no-repeat; mask:url("brand/marco-front-mask.png") center/100% 100% no-repeat; }

/* ============ ABOUT ============ */
body.mku-home .about .grid{ display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(28px,5vw,60px); align-items:stretch; }
body.mku-home .about .photo{ position:relative; align-self:stretch; }
body.mku-home .about .photo .frame{ position:relative; z-index:1; height:100%; border-radius:24px; overflow:hidden; border:5px solid var(--ink-900); background:linear-gradient(160deg,#CFF3DD,#E9F8F9); }
body.mku-home .about .photo::after{ content:""; position:absolute; inset:0; z-index:0; border-radius:24px; transform:translate(16px,16px); background:var(--holo); background-size:320% 100%; animation:wmholo 11s ease-in-out infinite alternate; }
body.mku-home .about .photo .frame img{ width:100%; height:100%; object-fit:cover; object-position:50% 42%; display:block; }
body.mku-home .about .photo .badge{ position:absolute; right:-18px; top:-18px; width:120px; height:120px; background:var(--yellow-400); border-radius:20px; border:4px solid var(--ink-900); box-shadow:6px 6px 0 0 rgba(15,23,42,.18); display:grid; place-items:center; transform:rotate(-6deg); z-index:3; }
body.mku-home .about .photo .badge img{ width:100%; height:100%; object-fit:cover; object-position:50% 24%; border-radius:15px; }
body.mku-home .about .photo .badge .lbl{ position:absolute; bottom:-9px; left:50%; transform:translateX(-50%) rotate(-6deg); background:var(--ink-900); color:#fff; font-family:var(--f-mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; padding:3px 8px; border-radius:999px; white-space:nowrap; }

/* ===== Carta interactiva sustituyendo la foto del about (mu-carta) ===== */
/* clases explícitas (sin :has) para que LiteSpeed UCSS no se cargue las reglas */
body.mku-home .about .grid--carta{ align-items:start; }
body.mku-home .about .photo--carta{ align-self:start; }
body.mku-home .about .photo--carta::after{ content:none !important; } /* sin sombra/fondo holo debajo de la carta */
body.mku-home .about .photo--carta .frame--carta{ height:auto; border:0; background:transparent; overflow:visible; border-radius:0; box-shadow:none; }
body.mku-home .about .photo--carta .frame--carta .carta-frame{ display:block; width:100%; aspect-ratio:760 / 1060; border:0; background:transparent; }
body.mku-home .about .text{ display:flex; flex-direction:column; }
body.mku-home .about .body{ max-width:50ch; }
body.mku-home .about .body p{ margin:0 0 16px; color:var(--ink-700); font-size:clamp(16px,1.7vw,18px); }
body.mku-home .about .body b{ color:var(--ink-900); }
body.mku-home .about .cta{ margin:6px 0 24px; }
body.mku-home .about .video{ position:relative; margin-top:auto; border-radius:18px; overflow:hidden; border:3px solid var(--ink-900); box-shadow:10px 10px 0 0 var(--teal-500); cursor:pointer; aspect-ratio:16/9; background:var(--ink-900); }
body.mku-home .about .video .thumb{ width:100%; height:100%; object-fit:cover; }
body.mku-home .about .video .play{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; }
body.mku-home .about .video .play .disc{ width:74px; height:74px; border-radius:50%; background:rgba(255,255,255,.92); display:grid; place-items:center; box-shadow:0 8px 22px rgba(0,0,0,.3); transition:transform .15s ease; }
body.mku-home .about .video:hover .play .disc{ transform:scale(1.08); }
body.mku-home .about .video .play .disc::after{ content:""; width:0; height:0; border-style:solid; border-width:13px 0 13px 22px; border-color:transparent transparent transparent var(--ink-900); margin-left:5px; }
body.mku-home .about .video .vtag{ position:absolute; left:14px; top:14px; z-index:3; background:var(--yellow-400); color:var(--ink-900); font-family:var(--f-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; padding:5px 11px; border-radius:999px; }
/* embed Presto revelado por el facade */
body.mku-home .about .video .embed{ position:absolute; inset:0; z-index:5; display:none; }
body.mku-home .about .video.is-playing .embed{ display:block; }
body.mku-home .about .video.is-playing .play,
body.mku-home .about .video.is-playing .thumb,
body.mku-home .about .video.is-playing .vtag{ display:none; }
body.mku-home .about .video .embed iframe,
body.mku-home .about .video .embed video{ width:100%; height:100%; border:0; display:block; }

/* ============ MARCAS ============ */
body.mku-home .marcas{ padding-top:clamp(40px,5vw,64px); padding-bottom:clamp(60px,7vw,96px); }
body.mku-home .marcas .cap{ text-align:center; color:var(--ink-500); font-family:var(--f-mono); font-size:13px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:28px; }
body.mku-home .marcas .strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
body.mku-home .marcas .logoslot{ background:var(--ink-50); border:1px solid var(--ink-100); border-radius:14px; height:100px; width:100%; display:flex; align-items:center; justify-content:center; padding:18px; }
body.mku-home .marcas .logoslot img{ max-height:100%; max-width:100%; width:auto; height:auto; object-fit:contain; mix-blend-mode:multiply; }

/* ============ EJES ============ */
body.mku-home .ejes{ background:var(--ink-50); }
body.mku-home .ejes .cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
body.mku-home .ecard{ position:relative; border:1px solid var(--ink-100); border-radius:22px; padding:32px 28px 30px; background:var(--paper); display:flex; flex-direction:column; transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease; overflow:hidden; }
body.mku-home .ecard::before{ content:""; position:absolute; left:0; right:0; top:0; height:5px; background:var(--accent); }
body.mku-home .ecard:hover{ transform:translateY(-6px); border-color:var(--accent); box-shadow:0 18px 38px rgba(15,23,42,.10); }
body.mku-home .ecard .ic{ width:64px; height:64px; border-radius:18px; display:grid; place-items:center; background:color-mix(in srgb, var(--accent) 16%, white); border:1px solid color-mix(in srgb, var(--accent) 36%, white); }
body.mku-home .ecard .ic img{ width:40px; height:40px; image-rendering:pixelated; }
body.mku-home .ecard .n{ position:absolute; right:24px; top:22px; font-family:var(--f-mono); font-size:13px; color:var(--ink-300); letter-spacing:.08em; }
body.mku-home .ecard h3{ font-family:var(--f-title); font-weight:800; font-size:clamp(21px,2.2vw,26px); margin:20px 0 12px; line-height:1.15; letter-spacing:-.02em; }
body.mku-home .ecard p{ margin:0; color:var(--ink-500); font-size:16px; }
body.mku-home .ecard .more{ margin-top:22px; font-family:var(--f-mono); font-size:13px; font-weight:600; color:var(--ink-700); display:inline-flex; align-items:center; gap:6px; text-decoration:none; }
body.mku-home .ecard .more:hover{ color:var(--ink-900); }

/* ============ BLOG ============ */
body.mku-home .blog{ background:var(--paper); }
body.mku-home .blog .cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
body.mku-home .bcard{ background:var(--paper); border:2px solid var(--ink-100); border-radius:20px; overflow:hidden; text-decoration:none; color:var(--ink-900); display:flex; flex-direction:column; transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
body.mku-home .bcard:hover{ transform:translateY(-5px); border-color:var(--ink-900); box-shadow:10px 10px 0 0 var(--lime-500); }
body.mku-home .bcard .cover{ position:relative; width:100%; aspect-ratio:16/9; background:var(--ink-100); overflow:hidden; }
body.mku-home .bcard .cover::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:var(--holo); background-size:320% 100%; mix-blend-mode:soft-light; opacity:0; animation:wmholo 11s ease-in-out infinite alternate; transition:opacity .25s ease; }
body.mku-home .bcard:hover .cover::after{ opacity:1; }
body.mku-home .bcard .cover img{ display:block; width:100%; height:100%; object-fit:cover; }
body.mku-home .bcard .body{ display:flex; flex-direction:column; gap:11px; padding:20px 22px 22px; flex:1; }
body.mku-home .bcard .tag{ align-self:flex-start; font-family:var(--f-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--teal-700); background:var(--teal-50); border:1px solid var(--teal-100); padding:4px 10px; border-radius:999px; }
body.mku-home .bcard h3{ font-family:var(--f-title); font-weight:800; font-size:19px; line-height:1.26; letter-spacing:-.01em; margin:2px 0 0; }
body.mku-home .bcard .more{ margin-top:auto; font-family:var(--f-mono); font-size:13px; font-weight:600; color:var(--lime-700); display:inline-flex; align-items:center; gap:6px; padding-top:8px; }

/* ============ LINKEDIN — cajones del diseño aplicados a nuestro feed propio ============ */
body.mku-home .linkedin{ background:var(--teal-50); border-top:1px solid var(--teal-100); border-bottom:1px solid var(--teal-100); }
/* el feed (shortcode mu_linkedin_feed) hace de rejilla de cajones */
body.mku-home .linkedin .mu-li-feed{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:start; max-width:none; margin:0; padding:0; }
/* cada tarjeta = el "cajón" blanco del diseño */
body.mku-home .linkedin .mu-li-card{ background:#fff; border:1px solid var(--teal-100); border-radius:16px; box-shadow:0 14px 34px rgba(31,111,124,.10); padding:22px; min-height:480px; transition:transform .15s ease, box-shadow .15s ease; }
body.mku-home .linkedin .mu-li-card:hover{ transform:translateY(-4px); box-shadow:0 20px 42px rgba(31,111,124,.18); }
body.mku-home .linkedin .mu-li-card__name{ font-family:var(--f-title); font-weight:700; }
body.mku-home .linkedin .mu-li-card__body p{ font-size:.9rem; color:var(--ink-700); }
/* imagen de tarjeta: caja con aspect-ratio (las URLs licdn caducan; sin depender de width/height remoto) */
body.mku-home .linkedin .mu-li-card__img{ width:100%; aspect-ratio:1.91/1; object-fit:cover; border-radius:10px; }
body.mku-home .linkedin .mu-li-card__vidwrap{ aspect-ratio:1.91/1; border-radius:10px; overflow:hidden; }
body.mku-home .linkedin .mu-li-card__vidwrap .mu-li-card__img{ height:100%; aspect-ratio:auto; }
body.mku-home .linkedin .mu-li-card__placeholder{ aspect-ratio:1.91/1; border-radius:10px; background:linear-gradient(135deg,#f0f7fa 0%,#e1eff5 100%); display:flex; align-items:center; justify-content:center; margin-bottom:.75rem; opacity:.6; }
body.mku-home .linkedin .mu-li-card__cta{ color:#0a66c2; }
body.mku-home .linkedin .foot{ text-align:center; margin-top:clamp(32px,4vw,46px); }
/* fallback cuando el feed está vacío */
body.mku-home .linkedin .li-fallback{ text-align:center; background:#fff; border:1px dashed var(--teal-100); border-radius:16px; padding:48px 24px; color:var(--ink-500); }

/* ============ QUOTE ============ */
body.mku-home .quote{ background:var(--ink-900); color:#fff; overflow:hidden; text-align:center; }
body.mku-home .quote .inner{ position:relative; z-index:2; }
body.mku-home .quote .splash{ position:absolute; z-index:1; width:520px; max-width:78%; left:50%; top:50%; transform:translate(-50%,-50%); opacity:.18; pointer-events:none; }
body.mku-home .quote .mark{ font-family:var(--f-title); font-weight:800; color:var(--yellow-400); font-size:84px; line-height:.6; }
body.mku-home .quote p{ font-family:var(--f-title); font-weight:800; font-size:clamp(26px,4.2vw,46px); line-height:1.18; margin:10px auto 22px; max-width:24ch; letter-spacing:-.02em; }
body.mku-home .quote .who{ font-family:var(--f-mono); font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--lime-500); }

/* ============ FOOTER ============ */

/* ============ RESPONSIVE ============ */
@media (max-width:900px){
  body.mku-home .hero .grid{ grid-template-columns:1fr; text-align:center; }
  body.mku-home .hero .figure{ order:-1; }
  body.mku-home .hero .wm .by, body.mku-home .hero .kicker, body.mku-home .hero .pills{ justify-content:center; }
  /* pills en UNA sola línea en móvil (que "Jaleíto" no caiga) */
  body.mku-home .hero .pills{ flex-wrap:nowrap; gap:10px; }
  body.mku-home .hero .lede{ margin-left:auto; margin-right:auto; }
  body.mku-home .hero .figure .mascot-wrap{ width:min(74vw,340px); }
  body.mku-home .hero .wm{ white-space:nowrap; }
  body.mku-home .hero .wm .l{ display:inline-block; }
  body.mku-home .hero .wm .seg{ font-size:min(8.6vw,58px); }
  body.mku-home .hero .wm .l + .l{ margin-left:.26em; }
  body.mku-home .hero .wm .by{ white-space:nowrap; flex-wrap:nowrap; gap:8px; }
  body.mku-home .hero .wm .by{ gap:6px; }
  body.mku-home .hero .wm .by b{ font-size:min(3.9vw,30px); }
  body.mku-home .about .grid{ grid-template-columns:1fr; }
  body.mku-home .about .photo{ max-width:400px; margin:0 auto; }
  body.mku-home .about .photo::after{ transform:translate(11px,11px); }
  body.mku-home .about .photo .badge{ width:84px; height:84px; right:14px; top:-14px; }
  body.mku-home .about .photo .badge .lbl{ font-size:8px; bottom:-8px; }
  body.mku-home .ejes .cards, body.mku-home .blog .cards{ grid-template-columns:1fr; }
  body.mku-home .linkedin .mu-li-feed{ grid-template-columns:1fr; }
  /* móvil: solo la primera tarjeta de LinkedIn */
  body.mku-home .linkedin .mu-li-card:not(:first-child){ display:none; }
  body.mku-home .linkedin .mu-li-card{ min-height:0; }
  /* CTA "¿Quieres conocerme mejor?" centrado en móvil */
  body.mku-home .about .cta{ text-align:center; }
  body.mku-home .marcas .strip{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:520px){
  body.mku-home .marcas .strip{ grid-template-columns:repeat(2,1fr); gap:12px; }
  body.mku-home .about .video .play .disc{ width:60px; height:60px; }
  /* pills más compactas para garantizar una sola línea en pantallas estrechas */
  body.mku-home .hero .pills{ gap:7px; }
  body.mku-home .hero .pill{ padding:7px 11px; font-size:12px; letter-spacing:.04em; }
  /* footer recogido: marca arriba (ancho completo) + Navega/Sígueme en 2 columnas */
}

/* ============ MOTION GUARD ============ */
@media (prefers-reduced-motion: reduce){
  body.mku-home .hero .wm .seg::before,
  body.mku-home .hero .figure .holo-frame,
  body.mku-home .hero .figure .holo-frame-front,
  body.mku-home .about .photo::after,
  body.mku-home .bcard .cover::after{ animation:none; background-position:50% 0; }
  html{ scroll-behavior:auto; }
}