/* ==========================================================================
   Merkhet — sistema visual Modernist
   Tokens tomados del handoff (design/_ds/.../styles.css) y de la maqueta.
   Regla de oro: cero radios, reglas de 2px, todo alineado a la izquierda,
   un unico acento rojo. Fotografia A COLOR por decision del cliente.
   ========================================================================== */

:root{
  --mk-bg:#f3f2f2;
  --mk-surface:#eae9e9;
  --mk-text:#201e1d;
  --mk-accent:#ec3013;
  --mk-divider:rgba(32,30,29,.4);

  --mk-n100:#f8f4f4;
  --mk-n200:#eae7e7;
  --mk-n300:#d7d3d3;
  --mk-n400:#bab6b6;
  --mk-n500:#9b9797;
  --mk-n600:#7d7979;
  --mk-n700:#605d5d;
  --mk-n800:#444141;
  --mk-n900:#201e1d;

  --mk-a100:#fff2ef;
  --mk-a200:#ffe0d9;
  --mk-a300:#ffc4b8;
  --mk-a400:#ff9783;
  --mk-a500:#ff563c;
  --mk-a600:#dd2b0f;
  --mk-a700:#ae1800;
  --mk-a800:#7c1405;
  --mk-a900:#4d170e;

  --mk-font:"Archivo",system-ui,-apple-system,Segoe UI,sans-serif;

  --mk-max:none;
  --mk-pad:clamp(20px,5vw,80px);
  --mk-rule:2px solid var(--mk-divider);
}

/* — base — */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--mk-bg);color:var(--mk-text);
  font-family:var(--mk-font);font-size:17px;line-height:1.65;font-weight:400;
  text-wrap:pretty;-webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
figure{margin:0}
h1,h2,h3,h4,h5,h6{font-family:var(--mk-font);font-weight:800;margin:0}
p{margin:0 0 12px}
a{color:var(--mk-a700);text-underline-offset:3px}
a:hover{color:var(--mk-accent)}
::selection{background:var(--mk-a200)}
:focus{outline:none}
:focus-visible{outline:2px solid var(--mk-accent);outline-offset:2px}

/* Nada redondeado en ninguna parte. Regla del sistema.
   Se excluye la barra de administracion de WordPress, que no es el sitio. */
body *:not(#wpadminbar):not(#wpadminbar *){border-radius:0}

.mk-wrap{max-width:var(--mk-max);margin:0 auto;padding-left:var(--mk-pad);padding-right:var(--mk-pad)}
.mk-skip{position:absolute;left:-9999px;top:0;background:var(--mk-accent);color:#fff;padding:12px 18px;z-index:100}
.mk-skip:focus{left:0}

/* — kicker / etiqueta superior — */
.mk-kicker{
  display:block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mk-a700);font-weight:600;margin:0 0 16px;
}

/* — titulares — */
.mk-h1{font-size:clamp(29px,3.9vw,50px);line-height:1.06;letter-spacing:-.03em;margin:0 0 16px;margin-left:-.058em}
.mk-h2{font-size:clamp(24px,2.7vw,34px);line-height:1.12;letter-spacing:-.02em;margin:0 0 16px}
.mk-h2-lg{font-size:clamp(25px,2.9vw,36px);line-height:1.1;letter-spacing:-.025em;margin:0 0 32px;max-width:22ch}
.mk-intro{font-size:17px;line-height:1.6;color:var(--mk-n800);max-width:800px;margin:0}
.mk-body{font-size:15.5px;line-height:1.6;color:var(--mk-n800);max-width:54ch}

/* — botones — */
.btn{
  display:inline-flex;align-items:center;justify-content:flex-start;gap:8px;
  font-family:var(--mk-font);font-weight:800;font-size:14px;line-height:1.2;
  padding:12px 18px;border:2px solid transparent;cursor:pointer;text-decoration:none;
  background:transparent;color:var(--mk-text);transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.btn-primary{background:var(--mk-accent);color:#fff;border-color:var(--mk-accent)}
.btn-primary:hover{background:var(--mk-a600);border-color:var(--mk-a600);color:#fff}
.btn-ghost{border-color:var(--mk-text);color:var(--mk-text)}
.btn-ghost:hover{background:var(--mk-text);color:var(--mk-bg)}
.btn-light{border-color:var(--mk-bg);color:var(--mk-bg)}
.btn-light:hover{background:var(--mk-bg);color:var(--mk-text)}
.btn[disabled],.btn.is-disabled{opacity:.45;pointer-events:none}

/* — cuadrado rojo de 8px, la vineta del sistema — */
.mk-sq{display:block;width:8px;height:8px;background:var(--mk-accent)}

/* ==========================================================================
   Barra superior
   ========================================================================== */
.mk-topbar{
  background:var(--mk-n900);color:var(--mk-n200);font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid var(--mk-n800);
}
.mk-topbar .mk-wrap{padding-top:10px;padding-bottom:10px;display:flex;flex-wrap:wrap;gap:8px 28px;align-items:center}
.mk-topbar a{color:var(--mk-n200);text-decoration:none;overflow-wrap:anywhere}
.mk-topbar a:hover{color:var(--mk-accent)}
.mk-topbar__addr{display:flex;align-items:center;gap:10px}
.mk-topbar__hours{margin-left:auto;color:var(--mk-n400)}

/* ==========================================================================
   Cabecera
   ========================================================================== */
.mk-header{position:sticky;top:0;z-index:40;background:var(--mk-n900);border-bottom:2px solid var(--mk-accent)}
.mk-header .mk-wrap{display:flex;align-items:center;gap:32px;min-height:104px}
.mk-logo{display:flex;align-items:center;gap:14px;height:74px;text-decoration:none}
.mk-logo img{height:74px;width:auto;object-fit:contain}
.mk-logo__bar{width:8px;height:52px;background:var(--mk-accent);display:block}
.mk-logo__txt{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.mk-logo__name{font-weight:800;font-size:30px;letter-spacing:-.03em;line-height:1;color:var(--mk-bg)}
.mk-logo__sub{font-weight:600;font-size:11px;letter-spacing:.28em;line-height:1;color:var(--mk-n400)}

.mk-nav{margin-left:auto;display:flex;align-items:center;gap:clamp(12px,1.8vw,26px)}
.mk-nav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:clamp(12px,1.8vw,26px)}
.mk-nav li{position:relative;flex:none}
.mk-nav a{
  display:block;padding:6px 0;font-size:13px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;white-space:nowrap;color:var(--mk-n300);text-decoration:none;
}
.mk-nav a:hover{color:var(--mk-bg)}
.mk-nav .current-menu-item>a,
.mk-nav .current_page_item>a,
.mk-nav .current-menu-ancestor>a,
.mk-nav .current_page_ancestor>a{color:var(--mk-a400)}

/* submenu de Services */
.mk-nav .sub-menu{
  display:none;position:absolute;top:100%;left:0;min-width:290px;
  background:var(--mk-n900);border:2px solid var(--mk-accent);border-top:0;
  flex-direction:column;align-items:stretch;gap:0;padding:6px 0;z-index:50;
}
.mk-nav li:hover>.sub-menu,.mk-nav li:focus-within>.sub-menu{display:flex}
.mk-nav .sub-menu a{padding:10px 18px;letter-spacing:.06em;white-space:normal}
.mk-nav .sub-menu a:hover{background:var(--mk-n800);color:var(--mk-bg)}

.mk-burger{display:none;background:none;border:2px solid var(--mk-n700);color:var(--mk-bg);padding:9px;cursor:pointer;margin-left:auto}
.mk-burger svg{display:block}

/* ==========================================================================
   Slider de portada
   ========================================================================== */
.mk-hero{position:relative;background:var(--mk-n900);min-height:320px;display:flex;align-items:center;overflow:hidden}
.mk-hero__media{position:absolute;inset:0;opacity:0;transition:opacity 900ms ease;animation:mk-zoom 28s ease-in-out infinite alternate}
.mk-hero__media.is-active{opacity:1}
.mk-hero__media img{width:100%;height:100%;object-fit:cover}
.mk-hero__veil{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(32,30,29,.90) 0%,rgba(32,30,29,.74) 46%,rgba(32,30,29,.15) 100%)}
.mk-hero__inner{position:relative;display:grid;width:100%;max-width:var(--mk-max);margin:0 auto;
  padding:clamp(18px,2vw,28px) var(--mk-pad) clamp(20px,2.2vw,30px);pointer-events:none}
.mk-hero__kicker{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mk-a400);font-weight:600;margin-bottom:12px}
.mk-hero__title{font-weight:800;font-size:clamp(24px,3.2vw,40px);line-height:1.08;letter-spacing:-.03em;
  margin:0 0 12px;margin-left:-.058em;max-width:32ch;color:var(--mk-bg)}
.mk-hero__title span{display:block}
.mk-hero__text{font-size:15px;line-height:1.5;max-width:700px;margin:0 0 20px;color:var(--mk-n300)}
.mk-hero__cta{display:flex;flex-wrap:wrap;gap:10px;pointer-events:auto}
/* Las tres apiladas en la misma celda: la altura la marca la mas larga y el texto no salta. */
.mk-hero__slide{grid-area:1/1;visibility:hidden}
.mk-hero__slide.is-active{visibility:visible}

.mk-hero__ctrl{position:absolute;right:var(--mk-pad);bottom:clamp(20px,3vw,32px);display:flex;gap:10px;align-items:center;z-index:2}
.mk-hero__count{font-weight:800;font-size:13px;letter-spacing:.08em;color:var(--mk-bg);margin-right:6px}
.mk-hero__arrow{width:34px;height:34px;border:2px solid rgba(243,242,242,.5);background:none;color:var(--mk-bg);
  cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.mk-hero__arrow:hover{border-color:var(--mk-accent);color:var(--mk-accent)}
.mk-hero__arrow+.mk-hero__arrow{margin-right:6px}
.mk-hero__dot{width:28px;height:6px;border:0;padding:0;cursor:pointer;background:rgba(243,242,242,.45);transition:background 300ms ease}
.mk-hero__dot.is-active{background:var(--mk-accent)}

@keyframes mk-zoom{from{transform:scale(1)}to{transform:scale(1.07)}}
@keyframes mk-rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* aparicion al hacer scroll */
[data-rise]{opacity:0}
[data-rise].is-in{animation:mk-rise .9s ease both}

/* ==========================================================================
   Fila de cuatro servicios
   ========================================================================== */
.mk-quad{border-bottom:var(--mk-rule)}
.mk-quad__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.mk-quad__cell{display:block;text-decoration:none;color:var(--mk-text);border-right:var(--mk-rule);padding:20px}
.mk-quad__cell:first-child{padding-left:0}
.mk-quad__cell:last-child{border-right:0;padding-right:0}
.mk-quad__cell:hover{background:var(--mk-surface);color:var(--mk-text)}
.mk-quad__cell .mk-sq{margin-bottom:12px}
.mk-quad__name{display:block;font-weight:800;font-size:15px;letter-spacing:-.01em}

/* ==========================================================================
   Lista numerada de servicios
   ========================================================================== */
.mk-numrow{display:grid;grid-template-columns:minmax(56px,90px) minmax(0,400px) minmax(0,1fr);
  gap:14px clamp(24px,4vw,56px);align-items:baseline;padding:22px 0;border-top:var(--mk-rule)}
.mk-numrow:last-of-type{border-bottom:var(--mk-rule)}
.mk-numrow__n{font-weight:800;font-size:15px;margin:0;color:var(--mk-accent)}
.mk-numrow__t{font-weight:800;font-size:21px;line-height:1.2;letter-spacing:-.015em;margin:0}
.mk-numrow__d{font-size:15.5px;line-height:1.55;margin:0;color:var(--mk-n800);max-width:58ch}

/* ==========================================================================
   Secciones a dos columnas
   ========================================================================== */
.mk-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(24px,4vw,64px);align-items:start}
.mk-two--center{align-items:center;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.mk-surface{background:var(--mk-surface);border-top:var(--mk-rule)}
.mk-sec{max-width:var(--mk-max);margin:0 auto;padding:clamp(40px,5vw,64px) var(--mk-pad)}
.mk-sec--top{min-height:320px;display:flex;flex-direction:column;justify-content:center;padding:clamp(24px,3vw,32px) var(--mk-pad);border-bottom:var(--mk-rule)}
/* La linea frontera la pone la banda, de borde a borde. Se anula la del primer bloque de abajo para no doblarla. */
.mk-sec--top+section>.mk-svc:first-child,.mk-sec--top+section>.mk-row:first-child,
.mk-sec--top+section>.mk-qa:first-child,.mk-sec--top+section>.mk-block:first-child,
.mk-sec--top+section .mk-prose>.mk-block:first-child{border-top:0}
.mk-sec--tight{padding:0 var(--mk-pad) clamp(40px,5vw,64px)}

/* ==========================================================================
   The sequence
   ========================================================================== */
.mk-steps{border-top:var(--mk-rule);border-bottom:var(--mk-rule)}
.mk-steps__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:26px clamp(20px,3vw,40px)}
.mk-step{border-top:2px solid var(--mk-text);padding-top:18px}
.mk-step__n{font-weight:800;font-size:13px;letter-spacing:.1em;margin:0 0 10px;color:var(--mk-accent)}
.mk-step__t{font-weight:800;font-size:19px;margin:0 0 8px;letter-spacing:-.01em}
.mk-step__d{font-size:15px;margin:0;color:var(--mk-n800)}

/* ==========================================================================
   Franja de Careers
   ========================================================================== */
.mk-strip{background:var(--mk-surface);border-bottom:var(--mk-rule)}
.mk-strip .mk-wrap{padding-top:22px;padding-bottom:22px;display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center}
.mk-strip__t{font-weight:800;font-size:16px;letter-spacing:-.01em;margin:0}
.mk-strip__d{font-size:15px;margin:0;color:var(--mk-n800)}
.mk-strip__cta{margin-left:auto}

/* ==========================================================================
   Formularios
   ========================================================================== */
.mk-form{display:grid;gap:14px}
.mk-field label,.mk-field>span{display:block;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mk-n700);font-weight:600;margin-bottom:6px}
.mk-input,.mk-form input[type=text],.mk-form input[type=email],.mk-form input[type=tel],.mk-form textarea{
  width:100%;font-family:var(--mk-font);font-size:14px;line-height:1.4;color:var(--mk-text);
  background:#fff;border:2px solid var(--mk-text);padding:11px 13px;
}
.mk-form textarea{resize:vertical;min-height:112px}
.mk-input::placeholder,.mk-form textarea::placeholder{color:var(--mk-n500)}
.mk-input:focus-visible{outline:2px solid var(--mk-accent);outline-offset:2px}
.mk-form .wpcf7-submit{
  font-family:var(--mk-font);font-weight:800;font-size:14px;padding:12px 18px;
  background:var(--mk-accent);color:#fff;border:2px solid var(--mk-accent);cursor:pointer;
}
.mk-form .wpcf7-submit:hover{background:var(--mk-a600);border-color:var(--mk-a600)}

/* bloques Office / Direct / Hours */
.mk-datablock{border-top:2px solid var(--mk-text);padding-top:12px}
.mk-datablock__k{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mk-a700);margin:0 0 6px}
.mk-datablock__v{font-size:15.5px;margin:0;color:var(--mk-n900);overflow-wrap:anywhere}
.mk-datablock__v a{color:var(--mk-text);text-decoration:none}
.mk-datastack{display:grid;gap:16px;max-width:44ch}

/* ==========================================================================
   Mapa
   ========================================================================== */
.mk-map{border-top:var(--mk-rule);position:relative}
.mk-map iframe{display:block;width:100%;height:clamp(260px,32vw,380px);border:0}
.mk-map__tag{position:absolute;left:0;bottom:0;background:var(--mk-accent);color:var(--mk-bg);padding:14px 20px;max-width:320px}
.mk-map__tag p{margin:0}
.mk-map__tag p:first-child{font-weight:800;font-size:15px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px}
.mk-map--sm iframe{height:240px}
.mk-map--sm{border:2px solid var(--mk-text);border-top:2px solid var(--mk-text)}

/* ==========================================================================
   Franja roja de cierre
   ========================================================================== */
.mk-close{background:var(--mk-accent);color:var(--mk-bg)}
.mk-close .mk-wrap{padding-top:clamp(30px,3.6vw,48px);padding-bottom:clamp(30px,3.6vw,48px)}
.mk-close__h{font-weight:800;font-size:clamp(24px,3vw,38px);line-height:1.1;letter-spacing:-.025em;
  margin:0 0 24px;margin-left:-.058em;max-width:24ch}
.mk-close__h span{display:block}
.mk-close__cta{display:flex;flex-wrap:wrap;gap:12px}

/* ==========================================================================
   Pie
   ========================================================================== */
.mk-footer{background:var(--mk-n900);color:var(--mk-n300)}
.mk-footer__grid{max-width:var(--mk-max);margin:0 auto;padding:clamp(10px,1.3vw,15px) var(--mk-pad);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px clamp(24px,3vw,44px)}
.mk-footer__logo{display:flex;align-items:center;gap:10px;margin:0 0 8px;text-decoration:none}
.mk-footer__logo img{height:30px;width:auto}
.mk-footer__logo .mk-logo__bar{width:6px;height:30px}
.mk-footer__logo .mk-logo__name{font-size:19px}
.mk-footer__logo .mk-logo__sub{font-size:8.5px;letter-spacing:.26em;color:var(--mk-n500)}
.mk-footer__desc{font-size:14.5px;margin:0;color:var(--mk-n400)}
.mk-footer__k{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mk-n500);margin:0 0 9px}
.mk-footer__list{list-style:none;margin:0;padding:0;display:grid;gap:2px;line-height:1.25}
.mk-footer__list a{color:var(--mk-n300);text-decoration:none;font-size:14.5px}
.mk-footer__list a:hover{color:var(--mk-bg)}
.mk-footer__office{font-size:14.5px;margin:0 0 6px;color:var(--mk-n300)}
.mk-footer__contact{font-size:14.5px;margin:0;overflow-wrap:anywhere}
.mk-footer__contact a{color:var(--mk-n300);text-decoration:none}
.mk-footer__contact a:hover{color:var(--mk-bg)}
.mk-footer__bar{border-top:1px solid var(--mk-n800)}
.mk-footer__bar .mk-wrap{padding-top:6px;padding-bottom:6px;display:flex;flex-wrap:wrap;gap:8px 28px;
  align-items:center;font-size:12px;color:var(--mk-n500)}
.mk-footer__bar a{color:var(--mk-n500);text-decoration:none}
.mk-footer__bar a:hover{color:var(--mk-n300)}
.mk-social{margin-left:auto;display:flex;gap:16px;align-items:center}
.mk-social a{color:var(--mk-n400);display:block;line-height:0}
.mk-social a:hover{color:var(--mk-bg)}

/* ==========================================================================
   Paginas interiores
   ========================================================================== */
/* bloque de servicio (pagina Services) */
.mk-svc{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(24px,4vw,56px);
  align-items:start;padding:clamp(28px,3.4vw,44px) 0;border-top:var(--mk-rule)}
.mk-svc__n{font-weight:800;font-size:15px;margin:0 0 10px;color:var(--mk-accent)}
.mk-svc__t{font-weight:800;font-size:clamp(26px,2.8vw,34px);line-height:1.12;letter-spacing:-.02em;margin:0 0 14px}
.mk-svc__d{font-size:15.5px;line-height:1.6;color:var(--mk-n800);max-width:54ch;margin:0 0 18px}
.mk-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.mk-list li{display:grid;grid-template-columns:8px 1fr;gap:12px;align-items:start;font-size:15.5px;color:var(--mk-n800)}
.mk-list li>span:first-child{display:block;width:8px;height:8px;background:var(--mk-accent);margin-top:8px}
.mk-media{background:var(--mk-surface);height:clamp(240px,26vw,340px);overflow:hidden}
.mk-media img{width:100%;height:100%;object-fit:cover}
.mk-media--wide{height:clamp(260px,30vw,420px)}
.mk-media--card{height:clamp(200px,22vw,260px)}
.mk-media--portrait{height:300px}

/* marcador de imagen mientras no haya foto */
.mk-slot{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  background:var(--mk-surface);border:2px dashed var(--mk-n400);color:var(--mk-n600);
  font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;text-align:center;padding:16px}
/* En el slider el hueco de foto no se anuncia: se funde con el fondo oscuro. */
.mk-hero .mk-slot{background:var(--mk-n900);border:0;font-size:0}

/* miga de pan de la pagina de servicio */
.mk-crumb{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:baseline;margin:0 0 20px;
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.mk-crumb a{color:var(--mk-n700);text-decoration:none}
.mk-crumb a:hover{color:var(--mk-accent)}
.mk-crumb__sep{color:var(--mk-n500)}
.mk-crumb__n{color:var(--mk-a700)}

/* cabecera de columna con regla negra */
.mk-colhead{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mk-a700);
  font-weight:600;margin:0 0 16px;border-top:2px solid var(--mk-text);padding-top:14px}

/* tarjetas separadas por 2px — el fondo del contenedor hace de rejilla.
   El flex-start es obligatorio: sin el, el navegador centra el contenido
   y los numeros dejan de alinearse cuando un titulo ocupa dos lineas. */
.mk-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2px;background:var(--mk-divider)}
.mk-tile{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;
  background:var(--mk-bg);padding:20px;text-decoration:none;color:var(--mk-text)}
.mk-tile:hover{background:var(--mk-a100);color:var(--mk-text)}
.mk-tile__n{display:block;font-weight:800;font-size:13px;color:var(--mk-accent);margin-bottom:10px}
.mk-tile__t{display:block;font-weight:800;font-size:16px;line-height:1.2;color:var(--mk-text);margin-bottom:6px}
.mk-tile__d{display:block;font-size:14.5px;color:var(--mk-n700)}

/* tres columnas de cierre (Careers) */
.mk-three{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(20px,3vw,40px)}
.mk-three__k{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mk-a700);margin:0 0 10px}
.mk-three__d{font-size:15px;line-height:1.6;margin:0;color:var(--mk-n800)}

/* where to next */
.mk-next{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0;border-top:var(--mk-rule)}
.mk-next__cell{display:block;text-decoration:none;color:var(--mk-text);padding:22px;border-right:var(--mk-rule)}
/* Mismo patron que .mk-quad__cell de la portada: 22px por dentro y solo
   los bordes de fuera a ras del margen de pagina. Antes el padding-left
   iba a 0 en TODAS las celdas, no solo en la primera, asi que de la
   segunda en adelante el texto quedaba pegado a la linea divisoria. */
.mk-next__cell:first-child{padding-left:0}
.mk-next__cell:last-child{border-right:0;padding-right:0}
.mk-next__cell:hover{background:var(--mk-surface)}
.mk-next__t{font-weight:800;font-size:19px;margin:10px 0 6px;letter-spacing:-.01em}
.mk-next__d{font-size:15px;margin:0;color:var(--mk-n800)}

/* tarjetas de portfolio */
.mk-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(24px,3vw,40px)}
.mk-card__k{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mk-a700);font-weight:600;margin:14px 0 8px}
.mk-card__t{font-weight:800;font-size:20px;line-height:1.2;letter-spacing:-.015em;margin:0 0 10px}
.mk-card__d{font-size:15px;line-height:1.55;margin:0;color:var(--mk-n800)}

/* equipo */
.mk-team{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(24px,3vw,40px);max-width:900px}
.mk-team__n{font-weight:800;font-size:20px;margin:14px 0 4px;letter-spacing:-.015em}
.mk-team__r{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mk-a700);margin:0 0 10px}
.mk-team__d{font-size:15px;line-height:1.55;margin:0;color:var(--mk-n800)}

/* filas de careers / faq */
.mk-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px clamp(24px,4vw,48px);
  align-items:center;padding:22px 0;border-top:var(--mk-rule)}
.mk-row:last-of-type{border-bottom:var(--mk-rule)}
.mk-row__t{font-weight:800;font-size:19px;margin:0 0 6px;letter-spacing:-.01em}
.mk-row__d{font-size:15px;margin:0;color:var(--mk-n800)}

.mk-qa{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,72ch);gap:14px clamp(24px,4vw,56px);
  align-items:start;padding:22px 0;border-top:var(--mk-rule)}
.mk-qa:last-of-type{border-bottom:var(--mk-rule)}
.mk-qa__q{font-weight:800;font-size:19px;line-height:1.25;letter-spacing:-.01em;margin:0}
.mk-qa__a{font-size:15.5px;line-height:1.6;margin:0;color:var(--mk-n800)}

/* tablas de licencias */
.mk-block{border-top:2px solid var(--mk-text);padding-top:16px;margin-bottom:clamp(28px,3.4vw,44px)}
.mk-tablewrap{overflow-x:auto}
.mk-table{width:100%;border-collapse:collapse;font-size:15px}
.mk-table th{
  text-align:left;font-weight:800;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mk-n700);padding:10px 16px 10px 0;border-bottom:var(--mk-rule);white-space:nowrap;
}
.mk-table td{padding:14px 16px 14px 0;border-bottom:1px solid var(--mk-n300);color:var(--mk-n800);vertical-align:top}
.mk-table td:first-child{color:var(--mk-text);font-weight:600}

/* privacy */
.mk-prose{max-width:900px}
.mk-prose h2{font-size:19px;letter-spacing:-.01em;margin:0 0 10px}
.mk-prose p{font-size:15.5px;line-height:1.6;color:var(--mk-n800);margin:0 0 12px}
.mk-prose .mk-block{padding-top:20px}
.mk-updated{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--mk-n600);margin:0 0 8px}

/* ==========================================================================
   Responsive
   ========================================================================== */
/* Texto corrido justificado, por decision del cliente (el handoff lo pedia a la izquierda).
   El guionado es obligatorio: sin el, justificar abre rios de espacios en columna estrecha. */
.mk-intro,.mk-hero__text,.mk-svc__d,.mk-card__d,.mk-team__d,.mk-qa__a,.mk-row__d,
.mk-three__d,.mk-footer__desc,.mk-prose p,.mk-block p{text-align:justify;hyphens:auto;-webkit-hyphens:auto}

@media (max-width:900px){
  .mk-burger{display:block}
  .mk-nav{
    display:none;position:absolute;top:100%;left:0;right:0;background:var(--mk-n900);
    border-bottom:2px solid var(--mk-accent);padding:14px var(--mk-pad) 22px;
    flex-direction:column;align-items:stretch;gap:0;
  }
  .mk-nav.is-open{display:flex}
  .mk-nav ul{flex-direction:column;align-items:stretch;gap:0}
  .mk-nav a{padding:13px 0;border-bottom:1px solid var(--mk-n800)}
  .mk-nav .sub-menu{display:flex;position:static;border:0;padding:0 0 0 18px;min-width:0}
  .mk-nav .btn{margin-top:14px;justify-content:center}
  .mk-header .mk-wrap{position:relative;min-height:84px;gap:16px}
  .mk-logo,.mk-logo img{height:56px}
  .mk-logo__name{font-size:24px}
  .mk-qa{grid-template-columns:1fr}
  .mk-row{grid-template-columns:1fr}
  .mk-quad__cell,.mk-quad__cell:first-child,.mk-quad__cell:last-child{border-right:0;border-bottom:var(--mk-rule);padding:18px 0}
  .mk-quad__grid>.mk-quad__cell:last-child{border-bottom:0}
  .mk-next__cell{border-right:0;border-bottom:var(--mk-rule);padding:20px 0}
  .mk-numrow{grid-template-columns:56px 1fr}
  .mk-numrow__d{grid-column:2}
  .mk-topbar__hours{margin-left:0}
}
@media (max-width:600px){
  .mk-hero__ctrl{position:static;padding:0 var(--mk-pad) 18px;justify-content:flex-start}
  .mk-hero{align-items:stretch;flex-direction:column;justify-content:flex-end}
}

/* area tactil minima */
@media (pointer:coarse){
  .btn,.mk-nav a,.mk-hero__arrow,.mk-footer__list a{min-height:44px;display:flex;align-items:center}
  .mk-hero__dot{min-height:44px;background-clip:content-box;padding:19px 0}
}

/* ==========================================================================
   Movimiento reducido — obligatorio por el handoff
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  [data-rise]{opacity:1 !important;transform:none !important}
  .mk-hero__media{animation:none !important}
}
/* ---------- Slider en claro ---------- */
.mk-hero{background:var(--mk-bg)}
.mk-hero .mk-slot{background:var(--mk-bg)}
.mk-hero__veil{
  background:linear-gradient(90deg,
    rgba(243,242,242,.94) 0%,
    rgba(243,242,242,.80) 46%,
    rgba(243,242,242,.10) 100%)}
.mk-hero__kicker{color:var(--mk-a700)}
.mk-hero__title{color:var(--mk-n900)}
.mk-hero__text{color:var(--mk-n700)}
.mk-hero__count{color:var(--mk-n900)}
.mk-hero__arrow{border-color:rgba(32,30,29,.45);color:var(--mk-n900)}
.mk-hero__arrow:hover{border-color:var(--mk-accent);color:var(--mk-accent)}
.mk-hero__dot{background:rgba(32,30,29,.30)}
.mk-hero__dot.is-active{background:var(--mk-accent)}

/* ==========================================================================
   Huecos de imagen: mas grandes y con la proporcion exacta del dibujo.
   El alto iba por clamp(), asi que la proporcion del hueco cambiaba con el
   ancho de la ventana y object-fit:cover recortaba un trozo distinto en cada
   pantalla. Medido en produccion a 1697px: servicios se comian 114px de alto,
   how-we-work 56px y portfolio 60px. Con aspect-ratio fija no recorta nunca.
   ========================================================================== */
.mk-media[style*="border-bottom"]{height:auto !important;aspect-ratio:2480 / 640;background:#FFFFFF}
.mk-two--center .mk-media{height:auto;aspect-ratio:1180 / 640;background:#FFFFFF}
.mk-media--card{height:auto;aspect-ratio:1200 / 860;background:#FFFFFF}
.mk-media img{object-fit:contain}

/* Slider: el gris por debajo de la imagen, no por encima. */
.mk-hero__veil{z-index:0}
.mk-hero__media{z-index:1}
.mk-hero__inner{z-index:2}
.mk-hero__media img{object-fit:contain}


/* ==========================================================================
   Esquema de color fijo: claro.
   Sin esto, Chrome con el sistema en modo oscuro aplica su "auto dark mode":
   no cambia el CSS (getComputedStyle sigue diciendo claro) pero al pintar
   INVIERTE las imagenes que detecta como dibujo de lineas. Los planos salian
   en negativo — fondo negro y trazos blancos — y el titular negro encima
   quedaba ilegible. Declarar color-scheme deja la pagina fuera de esa funcion.
   ========================================================================== */
:root{color-scheme:light}
html,body{color-scheme:light}


/* ==========================================================================
   Slider: separar el titular del dibujo.
   Al poner el gris DETRAS de la imagen se perdio lo unico que daba fondo
   limpio al texto, y el titular quedaba montado sobre la estructura.
   El velo vuelve por delante pero SOLO como desvanecido en la mitad
   izquierda: el titular se lee sobre fondo liso y el dibujo queda intacto
   a la derecha, sin lavar.
   ========================================================================== */
.mk-hero__veil{z-index:3;
  background:linear-gradient(90deg,
    #F3F2F2 0%,
    #F3F2F2 30%,
    rgba(243,242,242,0.90) 44%,
    rgba(243,242,242,0) 64%)}
.mk-hero__inner{z-index:4}

/* Boton de contorno: era claro para fondo negro, invisible sobre blanco. */
.mk-hero .btn-ghost{border-color:#201E1D;color:#201E1D}
.mk-hero .btn-ghost:hover{border-color:#EC3013;color:#EC3013}


/* ==========================================================================
   Slider: el texto no invade el dibujo, y el boton de contorno se ve.
   ========================================================================== */
/* La columna de texto se queda en la mitad izquierda: nunca pisa el dibujo. */
.mk-hero__slide{max-width:min(56%,700px)}
.mk-hero__title{max-width:18ch}
.mk-hero__text{max-width:100%}

/* El boton de contorno era claro (pensado para el slider negro) y sobre
   fondo blanco desaparecia. Con !important porque el color venia de una
   regla posterior en la hoja. */
.mk-hero .btn-ghost{
  border:2px solid #201E1D !important;
  color:#201E1D !important;
  background:transparent !important}
.mk-hero .btn-ghost:hover{
  border-color:#EC3013 !important;
  color:#EC3013 !important}

@media (max-width:900px){
  .mk-hero__slide{max-width:100%}
}


/* ==========================================================================
   Slider: el boton secundario "See what we do".
   El CTA del slider es <a class="btn btn-light">, NO .btn-ghost. Todas las
   reglas anteriores apuntaban a .mk-hero .btn-ghost — un selector que no
   casa con ningun elemento del hero — y por eso el boton seguia invisible
   por mucho !important que se le pusiera.
   .btn-light pinta borde y texto en var(--mk-bg), el gris claro del fondo:
   claro sobre claro. Sobre el slider en claro tiene que ir oscuro.
   ========================================================================== */
.mk-hero .btn-light{
  border-color:#201E1D !important;
  color:#201E1D !important;
  background:transparent !important}
.mk-hero .btn-light:hover{
  background:#201E1D !important;
  border-color:#201E1D !important;
  color:#F3F2F2 !important}


/* ==========================================================================
   Indice de servicios: recuadro mas grande y a la proporcion del dibujo.
   El hueco medía 733x340 (2.16:1) y la lamina 3.87:1, asi que la imagen
   entraba por el ancho y dejaba ~75 px de gris arriba y abajo. Ahora la
   lamina es de dos paneles a 2400x1263 (1.9:1) y el hueco va a esa misma
   proporcion: no queda banda. La columna de imagen crece de 1fr a 3/5 del
   ancho, que es el recuadro que pidio el dueño.
   El fondo blanco no es decorativo: si algun dia entra una imagen de otra
   proporcion, el sobrante se ve blanco como el papel del plano y no gris.
   ========================================================================== */
.mk-svc{grid-template-columns:2fr 3fr}
.mk-svc .mk-media{height:auto;aspect-ratio:2400 / 1263;background:#FFFFFF}

@media (max-width:900px){
  .mk-svc{grid-template-columns:1fr}
}


/* ==========================================================================
   Portada, seccion "How we work": el mismo recuadro que el indice de
   servicios. Iba a 729x395 y las de servicios a 880x463; con el reparto
   2fr/3fr queda en 875x475, que es el mismo tamaño.
   La regla base usa auto-fit para apilar en movil, asi que este reparto
   fijo solo se aplica de 901 px para arriba y el movil sigue igual.
   ========================================================================== */
@media (min-width:901px){
  .mk-two--center{grid-template-columns:2fr 3fr}
}

/* ==========================================================================
   Mapa de contacto: mas alto. El borde de los cuatro lados ya estaba en
   .mk-map--sm; lo que faltaba era el de arriba, que lo anulaba un
   style="border-top:0" en linea dentro de page.php. Se quita alli, en el
   origen, en vez de taparlo aqui con un !important.
   ========================================================================== */
.mk-map--sm iframe{height:320px}


/* ==========================================================================
   Slider: el dibujo no se transparenta por debajo del texto.
   El velo iba en porcentajes fijos (solido hasta el 30%, 0.90 en el 44%),
   asi que el trazo se colaba bajo el titular. Medido a 1697 px: la tinta
   empezaba en 681 px y el texto acababa en 780 — 99 px montados, y en otras
   anchuras el solape cambiaba.
   Ahora el fondo va cosido al bloque de texto: mide siempre lo que mide el
   texto, con un desvanecido de 48 px en su borde derecho. Sea cual sea el
   ancho de ventana, el dibujo no puede aparecer por debajo.
   ========================================================================== */
.mk-hero__slide{
  background:linear-gradient(90deg,
    #F3F2F2 0,
    #F3F2F2 calc(100% - 48px),
    rgba(243,242,242,0) 100%);
  padding-right:56px}

@media (max-width:900px){
  /* En movil el texto ocupa todo el ancho y el dibujo queda debajo, no
     detras: el fondo cosido sobra y el desvanecido solo cortaria palabras. */
  .mk-hero__slide{background:none;padding-right:0}
}


/* ==========================================================================
   Slider: titular y entradilla.
   1) El titular llevaba max-width:18ch, que lo partia en tres lineas por una
      medida arbitraria y no por como cae el texto. Fuera: el titular se
      acomoda solo al ancho del bloque.
   2) La entradilla sigue justificada, como el resto del sitio.
   ========================================================================== */
.mk-hero__title{max-width:none}
/* El justificado SE QUEDA: es decision suya, para que el bloque de texto
   no quede desigual por la derecha. Solo se corrige el titular. */


/* ==========================================================================
   Slider: el bloque de texto pasa de 700 a 780 px.
   Medido con la tipografia real (Archivo 800, 40px): la segunda linea del
   slide 01, "Surveyed to control. Permitted once.", mide 685 px. Con 700 de
   bloque quedaban 644 utiles y por eso caia a una tercera linea. Con 780
   quedan 724 y entra en dos, sin tocar el texto.
   ========================================================================== */
.mk-hero__slide{max-width:min(56%,780px)}


/* ==========================================================================
   Texto corrido: que llegue al borde de su columna.
   .mk-body iba topado a 54ch (479 px) dentro de una columna de 729, y
   .mk-numrow__d a 58ch (515 px). Sobraban 249 px de hueco a la derecha y el
   bloque se veia desigual. Ademas ninguna de las dos entraba en la regla de
   justificado, asi que quedaban en bandera mientras el resto iba justificado.
   El tope sube a 90ch: llena la columna a las anchuras de trabajo y sigue
   poniendo un limite en monitores muy grandes, donde una linea de 140
   caracteres seria ilegible.
   ========================================================================== */
/* .mk-numrow__d va sin tope: su celda de rejilla mide 920 px y con 90ch
   (799 px) sobraban 121. .mk-body si conserva el tope porque su columna es
   de 729 y el limite solo actua en monitores muy anchos. */
.mk-body{max-width:90ch}
.mk-numrow__d{max-width:none}
.mk-body,.mk-numrow__d{text-align:justify;hyphens:auto;-webkit-hyphens:auto}


/* ==========================================================================
   Uniformidad del logo: ENGINEERING mide exactamente lo que mide MERKHET.
   Medido en cabecera: MERKHET 152.53 px y ENGINEERING 111.78, o sea 40.75
   de menos. Un letter-spacing fijo no vale porque el logo sale a tres
   tamanos distintos (cabecera 30 px, movil 24, pie 19) y habria que calcular
   uno para cada uno.
   La solucion que cuadra siempre: la columna estira a lo ancho de la palabra
   mas larga y las letras de ENGINEERING se reparten ese ancho con
   space-between. Da uniformidad exacta a cualquier tamano, sin numeros
   magicos. Las letras van con aria-hidden y la palabra con aria-label para
   que un lector de pantalla siga leyendo "Engineering" y no letra a letra.
   ========================================================================== */
.mk-logo__txt{align-items:stretch}
.mk-logo__sub{display:flex;justify-content:space-between;letter-spacing:0}
.mk-logo__sub i{font-style:normal}




/* ==========================================================================
   Navegacion compacta: flecha, casa y flecha.
   Sin texto a proposito: el destino aparece al pasar el raton (title) y lo
   lee un lector de pantalla (aria-label). Dentro de un servicio las flechas
   van al servicio anterior y al siguiente; fuera, recorren el menu
   principal. Va alineada a la derecha, a la altura de la miga de pan.
   ========================================================================== */
/* Alto cero: el control flota sobre el hueco vacio que hay a la derecha
   de la miga de pan. Antes ocupaba su propia fila y empujaba toda la pagina
   unos 45 px hacia abajo, que es lo que se notaba como "la cinta crecio". */
.mk-pagenav{position:relative;height:0}
.mk-pagenav__wrap{position:absolute;top:clamp(14px,1.8vw,20px);left:0;right:0;
  display:flex;justify-content:flex-end;align-items:center;gap:10px;padding-top:0;
  /* El contenedor va de lado a lado aunque los botones esten a la derecha, y
     al ir por encima se comia el clic de la miga de pan que hay debajo:
     elementFromPoint devolvia este div y no el enlace. Solo los botones
     reciben raton; el resto de la franja deja pasar. */
  pointer-events:none}
.mk-pagenav__wrap a{pointer-events:auto}
.mk-pagenav a{display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;transition:background 200ms ease,color 200ms ease,border-color 200ms ease}
.mk-pagenav__arrow{width:34px;height:34px;color:var(--mk-n700);
  border:2px solid rgba(32,30,29,.28)}
.mk-pagenav__arrow:hover{border-color:var(--mk-accent);color:var(--mk-accent)}
.mk-pagenav__home{width:40px;height:40px;color:#fff;background:var(--mk-accent);
  border:2px solid var(--mk-accent)}
.mk-pagenav__home:hover{background:var(--mk-a600);border-color:var(--mk-a600)}

@media (max-width:700px){
  /* En movil el titular ocupa todo el ancho y chocaria con el control
     flotante, asi que aqui si vuelve a ser una fila propia. */
  .mk-pagenav{height:auto}
  .mk-pagenav__wrap{position:static;padding-top:14px;gap:8px}
  .mk-pagenav__arrow{width:30px;height:30px}
  .mk-pagenav__home{width:36px;height:36px}
}


/* ==========================================================================
   La miga de pan como vuelta al indice de servicios.
   El enlace a /services/ ya existia, pero pintado como un rotulo rojo de
   11 px nadie lo leia como "volver": el dueno entraba en un servicio y no
   encontraba la salida. Con un chevron delante y subrayado se lee como lo
   que es. No añade ni un pixel de alto, porque la miga ya estaba ahi.
   ========================================================================== */
.mk-crumb a{text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
.mk-crumb a::before{content:"\2039\00a0";font-weight:800}
.mk-crumb a:hover{color:var(--mk-accent)}


/* ==========================================================================
   Cabecera de pagina: la miga siempre a la misma altura.
   .mk-sec--top iba con justify-content:center dentro de un min-height de
   320 px, o sea el bloque centrado verticalmente. Como cada servicio tiene
   distinta cantidad de texto, el centro caia en otro sitio: la miga bailaba
   entre 211 y 240 px segun la pagina, y con ella todo lo de abajo.
   Medido en los cuatro servicios, el bloque mas alto (Civil & Structural,
   titular de 2 lineas y entradilla de 3) ocupa 279 px con su padding. Con
   360 de reserva y anclado arriba, los cuatro empiezan en el mismo pixel y
   la imagen tambien.
   ========================================================================== */
/* La portada se queda con su hero (380 px, lo que pide su contenido).
   Las otras doce paginas van a 350: la interior mas larga es Civil &
   Structural, que renderiza 343, asi que en 350 entran todas sin recortar
   nada y quedan iguales entre si.
   El anclaje arriba se mantiene: la miga de pan no se mueve al cambiar de
   pagina. */
.mk-sec--top{justify-content:flex-start;min-height:350px}

@media (max-width:700px){
  /* En movil el texto ocupa mas lineas y reservar 360 dejaria un hueco
     enorme: ahi la seccion vuelve a crecer con su contenido. */
  .mk-sec--top{min-height:0}
}

/* Boton de contacto directo. Cuadrado y en rojo, como el resto del sitio. */
.mk-wa{position:fixed;right:24px;bottom:52px;z-index:60;display:flex;align-items:center;justify-content:center;width:31px;height:31px;background:none;color:var(--mk-red,#EC3013);transition:transform .18s ease}
.mk-wa:hover{transform:scale(1.1)}
.mk-wa svg{width:31px;height:31px;fill:currentColor}
@media (max-width:600px){.mk-wa{right:16px;bottom:34px;width:28px;height:28px}.mk-wa svg{width:28px;height:28px}}


/* Retratos del equipo: las fotos son cuadradas, asi que el hueco tambien.
   Encajan exactas y sin franjas grises. Va al final para ganar al contain
   general, que existe para no recortar los dibujos tecnicos. */
.mk-media--portrait{height:auto;aspect-ratio:1 / 1;background:var(--mk-surface)}
.mk-media--portrait img{object-fit:cover;object-position:50% 30%}