/* MetalCut Pro — capa de la marca nueva para las páginas interiores (blog, contacto, legales, 404).
   Se carga DESPUÉS del <style> de cada página: cambia colores, tipografía, barra superior y pie,
   sin tocar el contenido. La home (index.html) no la usa: trae sus propios estilos. */

/* Tipografía: las familias viejas apuntan a las fuentes nuevas, así cada regla de la página
   hereda la marca sin reescribirla. */
@font-face{font-family:'Bebas Neue';src:url(fonts/Archivo-700.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url(fonts/Archivo-600.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Outfit';src:url(fonts/HankenGrotesk-400.woff2) format('woff2');font-weight:100 450;font-display:swap}
@font-face{font-family:'Outfit';src:url(fonts/HankenGrotesk-500.woff2) format('woff2');font-weight:451 550;font-display:swap}
@font-face{font-family:'Outfit';src:url(fonts/HankenGrotesk-600.woff2) format('woff2');font-weight:551 900;font-display:swap}
@font-face{font-family:'Archivo';src:url(fonts/Archivo-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Hanken';src:url(fonts/HankenGrotesk-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Hanken';src:url(fonts/HankenGrotesk-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'DM Mono';src:url(fonts/DMMono-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'DM Mono';src:url(fonts/DMMono-500.woff2) format('woff2');font-weight:500;font-display:swap}

/* Colores: siempre claros, iguales a la home, con o sin el tema guardado del visitante. */
:root,:root[data-theme="light"],:root[data-theme="dark"],[data-theme="light"]{
  --bg:#fbfbf9!important;--bg2:#ffffff!important;--bg3:#f5f3ee!important;
  --text:#1d1d1b!important;--text-dim:#686860!important;--muted:#686860!important;
  --border:#e4e2dc!important;--card-bg:#ffffff!important;
  --steel:#e65e32!important;--steel-light:#c94f28!important;
  --amber:#e65e32!important;--amber-dim:rgba(230,94,50,.1)!important;
  --green:#1f7a4d!important;
  --mc-ink:#1d1d1b;--mc-muted:#686860;--mc-line:#e4e2dc;--mc-bg:#fbfbf9;--mc-accent:#e65e32;
}
html,body{background:var(--mc-bg)!important;color:var(--mc-ink)}
body{font-family:Hanken,'Outfit',Arial,sans-serif}
h1,h2,h3,h1 *,h2 *,h3 *{letter-spacing:-.035em!important}

/* Barra superior (misma que la home) */
.mc-top{position:sticky;top:0;z-index:100;background:rgba(251,251,249,.94);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--mc-line)}
.mc-top-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;max-width:1300px;margin:0 auto;padding:14px 4%}
.mc-links{display:flex;gap:20px}.mc-links a{font:400 13px Hanken,Arial,sans-serif;color:var(--mc-ink);text-decoration:none}.mc-links a:hover{color:var(--mc-accent)}
.mc-brand{font:700 15px Archivo,Arial,sans-serif;letter-spacing:.06em;color:var(--mc-ink)!important;text-decoration:none}.mc-brand span{color:var(--mc-accent)}
.mc-right{justify-self:end;display:flex;align-items:center;gap:14px}
.mc-pill{background:#1d1d1f;color:#fff!important;text-decoration:none;border-radius:999px;padding:8px 15px;font:600 12.5px Hanken,Arial,sans-serif}.mc-pill:hover{background:#000}
.mc-menu{background:none;border:0;font-size:20px;cursor:pointer;color:var(--mc-ink);padding:0}
.mc-panel{position:absolute;right:4%;top:56px;display:flex;flex-direction:column;gap:2px;min-width:220px;padding:10px;background:#fff;border:1px solid var(--mc-line);box-shadow:0 18px 40px -18px #0004}
.mc-panel[hidden]{display:none}
.mc-panel a{padding:10px 12px;font:400 15px Hanken,Arial,sans-serif;color:var(--mc-ink);text-decoration:none;border-radius:6px}.mc-panel a:hover{background:var(--mc-bg)}
.mc-panel .mc-pill{margin-top:6px;text-align:center;font-size:14px}
.mc-stub{display:none!important}
@media(max-width:760px){.mc-links,.mc-right .mc-pill{display:none}.mc-top-in{grid-template-columns:1fr auto 1fr}}

/* Las páginas dejaban espacio para su barra fija vieja; la nueva va en el flujo. */
body{padding-top:0!important}

/* Pie (mismo que la home) */
.mc-foot{background:var(--mc-bg);border-top:1px solid var(--mc-line);padding:34px 4% 26px;font:13px Hanken,Arial,sans-serif;color:var(--mc-muted);margin-top:60px}
.mc-foot a{color:var(--mc-muted);text-decoration:none}.mc-foot a:hover{color:var(--mc-ink)}
.mc-foot-top,.mc-foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;max-width:1300px;margin:0 auto}
.mc-foot-top{padding-bottom:22px;border-bottom:1px solid var(--mc-line)}.mc-foot-bottom{padding-top:18px;font-size:12px}
.mc-foot-nav{display:flex;gap:22px;flex-wrap:wrap}

/* Detalles de las páginas viejas que quedaban oscuros */
body::before{display:none!important}                       /* cuadrícula de plano del contacto */
.btn-primary,.btn-submit{background:#1d1d1f!important;color:#fff!important;border-radius:999px!important;border:0!important}
.btn-primary:hover,.btn-submit:hover{background:#000!important}
.skip-link{color:#fff!important}

/* ================================================================
   Estilo de la home aplicado a cada tipo de página
   ================================================================ */
html body main{max-width:none}

/* ---- Artículos del blog ---- */
html body .back-link{display:inline-block;margin:36px 0 0 max(16px,calc((100% - 760px)/2));font:12px 'DM Mono',monospace;letter-spacing:1.4px;text-transform:uppercase;color:var(--mc-muted)!important;text-decoration:none}
html body .back-link:hover{color:var(--mc-accent)!important}
html body .blog-post{max-width:760px!important;margin:0 auto!important;padding:24px 16px 40px!important;background:none!important;border:0!important}
html body .blog-post>header{text-align:center;padding:5vh 0 44px;margin-bottom:40px;border-bottom:1px solid var(--mc-line)}
html body .blog-category{display:inline-block;margin-bottom:16px;padding:0!important;background:none!important;border:0!important;font:11px 'DM Mono',monospace!important;letter-spacing:1.6px!important;text-transform:uppercase;color:var(--mc-accent)!important}
html body .blog-post h1{margin:0!important;font:700 clamp(38px,5vw,68px)/1 Archivo,Arial,sans-serif!important;letter-spacing:-.045em!important;text-transform:none!important;color:var(--mc-ink)!important}
html body .blog-meta{margin-top:18px!important;font:11px 'DM Mono',monospace!important;letter-spacing:1.2px!important;text-transform:uppercase;color:#8a8a86!important}
html body .blog-post p,html body .blog-post li{font:400 18px/1.7 Hanken,Arial,sans-serif!important;color:#3a3a36!important}
html body .blog-post h2{margin:52px 0 14px!important;font:700 clamp(26px,2.6vw,34px)/1.1 Archivo,Arial,sans-serif!important;text-transform:none!important;color:var(--mc-ink)!important}
html body .blog-post h3{margin:34px 0 10px!important;font:700 21px/1.2 Archivo,Arial,sans-serif!important;text-transform:none!important;color:var(--mc-ink)!important}
html body .blog-post strong{color:var(--mc-ink)!important}
html body .blog-post ul{padding-left:1.1em!important}
html body .blog-post li{margin:6px 0!important}
html body .blog-post li::marker{color:var(--mc-accent)}
html body .blog-post a{color:var(--mc-ink)!important;text-decoration:underline;text-decoration-color:var(--mc-accent);text-underline-offset:4px}
html body .blog-cta{margin:56px 0!important;padding:34px 30px!important;background:#fff!important;border:1px solid var(--mc-line)!important;border-radius:0!important;text-align:center}
html body .blog-cta p{margin:0!important;font-size:18px!important}
html body .blog-cta a{display:inline-block;margin-top:16px;background:#1d1d1f;color:#fff!important;text-decoration:none!important;border-radius:999px;padding:12px 22px;font:600 15px Hanken,Arial,sans-serif!important}
html body .related-posts{margin-top:40px!important;padding:0!important;background:none!important;border:0!important;border-top:2px solid var(--mc-ink)!important;border-radius:0!important}
html body .related-posts h2{margin:18px 0 10px!important;font:11px 'DM Mono',monospace!important;letter-spacing:1.6px!important;text-transform:uppercase!important;color:var(--mc-accent)!important}
html body .related-posts ul{list-style:none!important;padding:0!important}
html body .related-posts li{border-bottom:1px solid var(--mc-line)!important;margin:0!important}
html body .related-posts li a{display:block;padding:16px 0;font:700 20px/1.25 Archivo,Arial,sans-serif!important;text-decoration:none!important;letter-spacing:-.02em}
html body .related-posts li a:hover{color:var(--mc-accent)!important}

/* ---- Páginas legales ---- */
html body .page-hero{text-align:center;padding:9vh 16px 6vh!important;background:none!important;border:0!important;border-bottom:1px solid var(--mc-line)!important}
html body .page-hero::before,html body .page-hero::after{display:none!important}
html body .page-hero-label{margin-bottom:14px!important;font:11px 'DM Mono',monospace!important;letter-spacing:1.6px!important;text-transform:uppercase;color:var(--mc-accent)!important}
html body .page-hero h1{margin:0!important;font:700 clamp(44px,6vw,96px)/.96 Archivo,Arial,sans-serif!important;letter-spacing:-.05em!important;text-transform:none!important;color:var(--mc-ink)!important}
html body .page-hero-meta{justify-content:center;margin-top:20px!important;gap:22px!important;font:11px 'DM Mono',monospace!important;letter-spacing:1.2px!important;text-transform:uppercase;color:#8a8a86!important}
html body .legal-wrap{max-width:760px!important;margin:0 auto!important;padding:56px 16px 40px!important}
html body .legal-section{padding:0 0 34px!important;margin:0 0 34px!important;background:none!important;border:0!important;border-bottom:1px solid var(--mc-line)!important;border-radius:0!important}
html body .section-num{margin-bottom:8px!important;font:11px 'DM Mono',monospace!important;letter-spacing:1.6px!important;text-transform:uppercase;color:var(--mc-accent)!important}
html body .legal-section h2{margin:0 0 12px!important;font:700 clamp(24px,2.4vw,30px)/1.1 Archivo,Arial,sans-serif!important;text-transform:none!important;color:var(--mc-ink)!important}
html body .legal-section p,html body .legal-section li{font:400 16.5px/1.7 Hanken,Arial,sans-serif!important;color:#3a3a36!important}
html body .legal-section a{color:var(--mc-ink)!important;text-decoration-color:var(--mc-accent)!important}
html body .simple-box,html body .highlight-box,html body .disclaimer-box,html body .toc{background:#fff!important;border:1px solid var(--mc-line)!important;border-left:3px solid var(--mc-accent)!important;border-radius:0!important;padding:22px 24px!important}
html body .toc-title{font:11px 'DM Mono',monospace!important;letter-spacing:1.6px!important;text-transform:uppercase;color:var(--mc-accent)!important}
html body .toc a{color:var(--mc-ink)!important}

/* ---- Contacto ---- */
html body .contact-hero{text-align:center;padding:9vh 16px 5vh!important;background:none!important}
html body .contact-hero h1{margin:0!important;font:700 clamp(46px,6.4vw,104px)/.96 Archivo,Arial,sans-serif!important;letter-spacing:-.05em!important;text-transform:none!important;color:var(--mc-ink)!important}
html body .contact-hero h1 em{font-style:normal!important;color:#8a8a86!important}
html body .contact-hero p{margin:18px auto 0!important;max-width:560px;font:400 18px/1.5 Hanken,Arial,sans-serif!important;color:var(--mc-muted)!important}
html body .contact-card,html body .contact-info,html body .contact-box{background:#fff!important;border:1px solid var(--mc-line)!important;border-radius:0!important;box-shadow:none!important}
html body .contact-card h3,html body .contact-info h3{font:700 26px Archivo,Arial,sans-serif!important;letter-spacing:-.03em!important;text-transform:none!important;color:var(--mc-ink)!important}
html body .form-label{font:11px 'DM Mono',monospace!important;letter-spacing:1.3px!important;text-transform:uppercase;color:var(--mc-muted)!important}
html body .form-input,html body .form-select{background:var(--mc-bg)!important;border:1px solid var(--mc-line)!important;border-radius:8px!important;color:var(--mc-ink)!important;font:400 16px Hanken,Arial,sans-serif!important}
html body .form-input:focus,html body .form-select:focus{border-color:var(--mc-ink)!important;box-shadow:0 0 0 3px rgba(29,29,27,.08)!important;outline:0}
html body .btn-submit{width:100%;padding:15px 20px!important;font:600 16px Hanken,Arial,sans-serif!important}
html body .info-icon{background:#fff1ea!important;color:var(--mc-accent)!important;border:0!important}
html body .field-hint,html body .response-note{color:#8a8a86!important}

/* ---- 404 ---- */
html body .nf-code{font:11px 'DM Mono',monospace!important;letter-spacing:1.6px!important;text-transform:uppercase;color:var(--mc-accent)!important}
html body .nf-title{font:700 clamp(46px,6.4vw,104px)/.96 Archivo,Arial,sans-serif!important;letter-spacing:-.05em!important;text-transform:none!important;color:var(--mc-ink)!important}
html body .nf-text{color:var(--mc-muted)!important;font:400 18px/1.5 Hanken,Arial,sans-serif!important}
html body .nf-links a{border-radius:999px!important;border:1px solid var(--mc-line)!important;background:#fff!important;color:var(--mc-ink)!important;padding:11px 20px!important;font:600 14px Hanken,Arial,sans-serif!important;text-decoration:none}
html body .nf-links a.primary{background:#1d1d1f!important;border-color:#1d1d1f!important;color:#fff!important}

/* Contacto: la columna derecha con aire y sin estirarse hasta abajo */
html body .contact-info{padding:40px 36px!important;align-self:start}
html body .contact-container{align-items:start!important}
html body .info-icon{font-size:16px!important;font-family:Hanken,Arial,sans-serif!important}
html body .built-by{background:var(--mc-bg)!important;border:0!important;border-top:2px solid var(--mc-ink)!important;border-radius:0!important;margin:30px 0 0!important;padding:22px 0 0!important}
html body .info-divider{background:var(--mc-line)!important}

/* ---- Contacto, versión 2 (estilo del formulario de José): título a la izquierda,
        datos en una columna y el formulario en un panel gris a la derecha ---- */
html body .ct{max-width:1300px;margin:0 auto;padding:0 4% 40px}
html body .ct-hero{padding:9vh 0 6vh}
html body .ct-kicker{margin:0 0 18px;font:11px 'DM Mono',monospace;letter-spacing:2px;color:var(--mc-muted)}
html body .ct-hero h1{margin:0;font:700 clamp(46px,6vw,96px)/.96 Archivo,Arial,sans-serif!important;letter-spacing:-.05em!important;color:var(--mc-ink)!important}
html body .ct-hero p{margin:20px 0 0;font:400 18px Hanken,Arial,sans-serif;color:var(--mc-muted)}
html body .ct-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:6vw;align-items:start}
html body .ct-side h2,html body .ct-panel h2{margin:0 0 22px;font:700 clamp(30px,2.8vw,40px)/1 Archivo,Arial,sans-serif!important;letter-spacing:-.04em!important;color:var(--mc-ink)!important}
html body .ct-big{display:block;margin:0 0 12px;font:400 clamp(19px,1.6vw,23px) Hanken,Arial,sans-serif;color:var(--mc-ink);text-decoration:none}
html body .ct-big span,html body .ct-small span{color:var(--mc-accent)}
html body .ct-big:hover{color:var(--mc-accent)}
html body .ct-dl{display:grid;grid-template-columns:110px 1fr;gap:14px 20px;margin:34px 0 30px;font:14.5px/1.55 Hanken,Arial,sans-serif}
html body .ct-dl dt{color:var(--mc-muted)}html body .ct-dl dd{margin:0;color:var(--mc-ink)}
html body .ct-small{display:inline-block;font:14px Hanken,Arial,sans-serif;color:var(--mc-ink);text-decoration:none;border-bottom:1px solid var(--mc-ink);padding-bottom:3px}
html body .ct-panel{background:#f3f2ee!important;border:0!important;border-radius:0!important;padding:34px 32px 30px!important;box-shadow:none!important}
html body .ct-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px 16px}
html body .ct-fields .ct-full{grid-column:1/-1}
html body .ct .form-group{margin:0!important}
html body .ct .form-label{display:block;margin:0 0 7px!important;font:500 13px Hanken,Arial,sans-serif!important;letter-spacing:0!important;text-transform:none!important;color:var(--mc-ink)!important}
html body .ct .form-input,html body .ct .form-select{width:100%;background:#fff!important;border:1px solid #d9d7d0!important;border-radius:6px!important;padding:12px 14px!important;font:400 16px Hanken,Arial,sans-serif!important;color:var(--mc-ink)!important}
html body .ct textarea.form-input{min-height:130px;resize:vertical}
html body .ct .field-hint{margin:14px 0 18px!important;font:13px/1.5 Hanken,Arial,sans-serif!important;color:#8a8a86!important}
html body .ct .btn-submit{width:100%;margin-top:18px;padding:15px 20px!important;border-radius:6px!important;font:600 16px Hanken,Arial,sans-serif!important}
@media(max-width:860px){html body .ct-grid{grid-template-columns:1fr;gap:48px}html body .ct-fields{grid-template-columns:1fr}html body .ct-panel{padding:26px 20px!important}}

/* Log in (app) en la barra */
.mc-login{font:400 13px Hanken,Arial,sans-serif;color:var(--mc-ink);text-decoration:none}.mc-login:hover{color:var(--mc-accent)}
@media(max-width:760px){.mc-login{display:none}}

/* Barra única de las páginas interiores (igual a la home) */
.mc-top-in{grid-template-columns:auto 1fr auto!important;gap:24px;max-width:1360px!important}
.mc-top .mc-links{justify-content:center;gap:30px}
.mc-top .mc-links a,.mc-right a.mc-login,.mc-right a.mc-req{font:13px 'DM Mono',monospace!important;letter-spacing:.6px;color:#4a4a45!important;text-decoration:none}
.mc-right a.mc-login{letter-spacing:2px!important;color:var(--mc-ink)!important}
.mc-top .mc-links a:hover,.mc-right a:hover{color:var(--mc-accent)!important}
.mc-top .mc-menu{display:none}
@media(max-width:900px){.mc-top .mc-links,.mc-right .mc-login,.mc-right .mc-req{display:none!important}.mc-top .mc-menu{display:block}.mc-top-in{grid-template-columns:1fr auto!important}}

/* ===== Pie oscuro con "Get in touch" que se revela al llegar al final (como la web anterior) ===== */
main{position:relative;z-index:1;background:var(--bg,var(--mc-bg,#fbfbf9))}
.end-block{position:sticky;bottom:0;z-index:0;background:#1d1d1b;color:#f3f1ec;font-family:Hanken,'Hanken Grotesk',Arial,sans-serif}
.marquee{display:block;overflow:hidden;padding:26px 0 30px;border-bottom:1px solid rgba(243,241,236,.1);text-decoration:none}
.marquee-track{display:flex;width:max-content;animation:mq-slide 34s linear infinite}
.marquee span{font:700 clamp(56px,8vw,128px)/1 Archivo,Arial,sans-serif;letter-spacing:-.05em;color:#f3f1ec;padding:0 .12em;white-space:nowrap;transition:color .3s}
.marquee i{font-style:normal;font:400 clamp(56px,8vw,128px)/1 Archivo,Arial,sans-serif;color:rgba(243,241,236,.16);padding:0 .22em}
.marquee:hover span,.marquee:focus-visible span{color:#e65e32}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes mq-slide{to{transform:translateX(-50%)}}
.ef{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;max-width:1240px;margin:0 auto;padding:56px 4% 44px}
.ef-brand p{margin:18px 0 0;max-width:300px;font-size:14px;line-height:1.6;color:#a9a79f}
.ef-h{margin:0 0 12px;font:11px 'DM Mono',Mono,monospace;letter-spacing:1.8px;text-transform:uppercase;color:#e65e32}
.ef-col{display:flex;flex-direction:column;gap:3px;font-size:14px}
.ef-col a{color:#f3f1ec;text-decoration:none;padding:4px 0}.ef-col a:hover{color:#e65e32}
.ef-col span{color:#6f6d66;padding:4px 0}
.ef-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;max-width:1240px;margin:0 auto;padding:22px 4% 28px;border-top:1px solid rgba(243,241,236,.1);font:11px 'DM Mono',Mono,monospace;letter-spacing:1px;color:#8a8880}
.ef-money b{color:#5fcf95;font-weight:400}.ef-money a{color:#f3f1ec;display:inline-block;padding:5px 0}
.ef-top{display:grid;place-items:center;width:40px;height:40px;border:1px solid rgba(243,241,236,.25);border-radius:999px;color:#f3f1ec;text-decoration:none;font-size:16px}.ef-top:hover{border-color:#e65e32;color:#e65e32}
@media(max-width:900px){.end-block{position:relative}.ef{grid-template-columns:1fr 1fr}.ef-brand{grid-column:1/-1}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* En las páginas interiores el pie va normal: el efecto de cortina es solo de la home */
.end-block{position:relative!important}

/* Efecto de la web anterior: una capa barre el botón de izquierda a derecha al pasar el mouse,
   y los cuatro puntos giran un cuarto de vuelta. */
.pill,.btn-main,.btn-notify,.pill-line,.mc-pill,.btn-submit,.btn-primary,.blog-cta a,.nf-links a,.ct .btn-submit{position:relative;overflow:hidden;isolation:isolate;z-index:0;transition:color .6s cubic-bezier(.6,.5,0,1),box-shadow .6s}
.pill::before,.btn-main::before,.btn-notify::before,.pill-line::before,.mc-pill::before,.btn-submit::before,.btn-primary::before,.blog-cta a::before,.nf-links a::before{content:"";position:absolute;inset:0;z-index:-1;background:#e65e32;transform:scaleX(0);transform-origin:left center;transition:transform .6s cubic-bezier(.6,.5,0,1)}
.pill:hover::before,.btn-main:hover::before,.btn-notify:hover::before,.pill-line:hover::before,.mc-pill:hover::before,.btn-submit:hover::before,.btn-primary:hover::before,.blog-cta a:hover::before,.nf-links a:hover::before{transform:scaleX(1)}
.pill:hover,.btn-main:hover,.mc-pill:hover,.btn-submit:hover,.btn-primary:hover,.blog-cta a:hover{background:#1d1d1f!important;color:#fff!important}
.btn-main:hover span{color:#fff}
/* botones de línea: barren en tinta y el texto queda blanco */
.btn-notify::before,.pill-line::before,.nf-links a:not(.primary)::before{background:#1d1d1f}
.btn-notify:hover,.pill-line:hover,.nf-links a:not(.primary):hover{background:transparent!important;color:#fff!important}
.btn-notify:hover span{color:#e65e32}
.pill-watch:hover .play{background:#fff;color:#e65e32}
/* los cuatro puntos */
.dots{display:inline-block;width:11px;height:11px;position:relative;flex:none;margin-right:10px;vertical-align:-1px;transition:transform .45s cubic-bezier(.19,1,.22,1)}
.dots::before{content:"";position:absolute;left:0;top:0;width:4px;height:4px;background:currentColor;box-shadow:7px 0 0 currentColor,0 7px 0 currentColor,7px 7px 0 currentColor}
a:hover>.dots,button:hover>.dots{transform:rotate(90deg)}
@media(prefers-reduced-motion:reduce){.dots,.pill::before,.btn-main::before,.btn-notify::before,.pill-line::before,.mc-pill::before,.btn-submit::before,.btn-primary::before,.blog-cta a::before,.nf-links a::before{transition:none}}

/* Regla de José para los botones: el negro se barre a blanco (texto negro) y el blanco a negro (texto blanco) */
.pill::before,.btn-main::before,.mc-pill::before,.btn-submit::before,.btn-primary::before,.blog-cta a::before,.nf-links a.primary::before,.nav-btn-dark::before,.mc-login::before{background:#fff!important}
.pill:hover,.btn-main:hover,.mc-pill:hover,.btn-submit:hover,.btn-primary:hover,.blog-cta a:hover,.nf-links a.primary:hover,.nav-btn-dark:hover,.mc-login:hover{color:#1d1d1b!important;box-shadow:inset 0 0 0 1.5px #1d1d1b}
.btn-main:hover span,.pill:hover .dots{color:#1d1d1b}
/* barra: Request access blanco y LOG IN negro, los dos como botón */
.nav-btn,.nav-r a.nav-btn,.mc-right a.mc-req,.mc-right a.mc-login{display:inline-flex;align-items:center;gap:8px;padding:9px 16px!important;border-radius:4px;font:12.5px 'DM Mono',Mono,monospace!important;letter-spacing:1px!important;text-decoration:none;position:relative;overflow:hidden;isolation:isolate;z-index:0;transition:color .6s cubic-bezier(.6,.5,0,1)}
.nav-btn-light,.mc-right a.mc-req{background:#fff;color:#1d1d1b!important;box-shadow:inset 0 0 0 1.5px #1d1d1b}
.nav-btn-dark,.mc-right a.mc-login{background:#1d1d1b;color:#fff!important;box-shadow:inset 0 0 0 1.5px #1d1d1b}
.nav-btn::before,.mc-right a.mc-req::before,.mc-right a.mc-login::before{content:"";position:absolute;inset:0;z-index:-1;transform:scaleX(0);transform-origin:left center;transition:transform .6s cubic-bezier(.6,.5,0,1)}
.nav-btn-light::before,.mc-right a.mc-req::before{background:#1d1d1b}
.nav-btn:hover::before,.mc-right a.mc-req:hover::before,.mc-right a.mc-login:hover::before{transform:scaleX(1)}
.nav-btn-light:hover,.mc-right a.mc-req:hover{color:#fff!important}
.nav-r{gap:10px!important}.mc-right{gap:10px!important}
/* botón del video como el de antes: rectángulo gris oscuro, triángulo naranja a la izquierda */
.pill-watch{display:inline-flex!important;align-items:center;justify-content:space-between;gap:48px;min-width:250px;padding:20px 26px!important;border-radius:2px!important;background:#393a35!important;color:#fff;font:600 17px Hanken,Arial,sans-serif!important}
.pill-watch .play{width:auto!important;height:auto!important;background:none!important;color:#ff8c63!important;font-size:15px!important;padding:0!important}
.pill-watch:hover .play{color:#e65e32!important}

/* Botones de la barra en pastilla (redondos). El único rectangular es el del video, para que resalte. */
.nav-btn,.nav-r a.nav-btn,.mc-right a.mc-req,.mc-right a.mc-login{border-radius:999px!important;padding:9px 18px!important;font:600 13px Hanken,'Hanken Grotesk',Arial,sans-serif!important;letter-spacing:0!important}

/* Arreglo del barrido: el borde va como border (queda por fuera de la capa que barre),
   no como sombra interior, que la capa tapaba y dejaba rayitas en las curvas. */
.pill,.btn-main,.mc-pill,.btn-submit,.btn-primary,.blog-cta a,.nf-links a.primary,.nav-btn-dark,.mc-right a.mc-login{border:1.5px solid #1d1d1b!important;box-shadow:none!important}
.pill:hover,.btn-main:hover,.mc-pill:hover,.btn-submit:hover,.btn-primary:hover,.blog-cta a:hover,.nf-links a.primary:hover,.nav-btn-dark:hover,.mc-right a.mc-login:hover{box-shadow:none!important}
.nav-btn-light,.mc-right a.mc-req,.btn-notify,.pill-line{border:1.5px solid #1d1d1b!important;box-shadow:none!important}
.pill-watch{border-color:#393a35!important}
.pill::before,.btn-main::before,.mc-pill::before,.btn-submit::before,.btn-primary::before,.blog-cta a::before,.nf-links a::before,.nav-btn::before,.mc-right a.mc-req::before,.mc-right a.mc-login::before,.btn-notify::before,.pill-line::before{border-radius:inherit}

/* Símbolo del logo en los botones de acceso: las barras suben una tras otra al pasar el mouse */
.dots.mark{width:auto;height:auto;margin-right:12px;vertical-align:middle;display:inline-flex}
.dots.mark::before{display:none}
.dots.mark svg{display:block;overflow:visible}
.dots.mark rect{transition:transform .8s cubic-bezier(.19,1,.22,1)}
a:hover>.dots.mark,button:hover>.dots.mark{transform:none}
a:hover>.dots.mark rect:nth-child(1){transform:translateY(-4px)}
a:hover>.dots.mark rect:nth-child(2){transform:translateY(-4px);transition-delay:.15s}
a:hover>.dots.mark rect:nth-child(3){transform:translateY(-4px);transition-delay:.3s}

/* Todos los botones en pastilla (el único rectangular es el del video) */
.btn,.btn-main,.btn-notify,.btn-watch{border-radius:999px!important}
.btn-main,.btn-notify{padding:13px 22px!important;gap:14px!important;justify-content:center!important}