/*
Theme Name:   Metra
Theme URI:    https://metra.com.co
Description:  Tema hijo de Hello Elementor para Metra. Tokens de marca, header con mega-menú, footer y botón de WhatsApp en código (sin Elementor Pro).
Author:       Metra
Template:     hello-elementor
Version:      1.14.1
Text Domain:  metra
*/

/* ============ Fuente (Inter variable, autoalojada) ============ */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/inter-latin-wght-normal.woff2") format("woff2-variations"),
       url("assets/fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============ Tokens (docs/diseno/01-design-tokens.md, sección 9.3) ============ */
:root {
  /* marca (manual) */
  --mt-color-navy: #0C3044; --mt-color-navy-deep: #0D1A2A;
  --mt-color-turquoise: #1BFDE2; --mt-color-turquoise-hover: #00BBBE;
  --mt-color-magenta: #FF3BE6; --mt-color-magenta-start: #EF00E8;
  --mt-color-white: #FFFFFF;
  /* ampliación aprobada */
  --mt-color-navy-raised: #14425C;
  --mt-color-ocean: #0B5F8F; --mt-color-ocean-hover: #08486E;
  --mt-color-teal-deep: #08716E;
  --mt-color-mist: #EEF5F9; --mt-color-tint: #DCEAF2;
  --mt-color-slate: #4A6171;
  --mt-color-text-muted-on-dark: #B4CCDA; --mt-color-sky: #7CC4EE;
  --mt-color-border-strong: #6A8596; --mt-color-border: #D3E0E8;
  --mt-color-success: #0F7B4A; --mt-color-error: #B42318;
  --mt-color-warning: #8A4B00; --mt-color-warning-bg: #FFF4D6;
  /* roles */
  --mt-color-text: var(--mt-color-navy);
  --mt-color-bg: var(--mt-color-white);
  --mt-color-bg-alt: var(--mt-color-mist);
  /* degradados */
  --mt-grad-dark: linear-gradient(160deg, #0D1A2A 0%, #0C3044 100%);
  --mt-grad-turq: linear-gradient(90deg, #00BBBE 0%, #1BFDE2 100%);
  --mt-grad-magenta: linear-gradient(90deg, #EF00E8 0%, #FF3BE6 100%);
  /* espaciado, forma, movimiento */
  --mt-space-1: .25rem; --mt-space-2: .5rem; --mt-space-3: .75rem; --mt-space-4: 1rem;
  --mt-space-5: 1.5rem; --mt-space-6: 2rem; --mt-space-7: 3rem; --mt-space-8: 4rem;
  --mt-space-9: 6rem; --mt-space-10: 8rem;
  --mt-section-y: 4rem; --mt-gutter: 1.25rem; --mt-gap: 1rem;
  --mt-radius-sm: 4px; --mt-radius-md: 8px; --mt-radius-lg: 12px; --mt-radius-full: 999px;
  --mt-shadow-sm: 0 1px 2px rgba(13,26,42,.10);
  --mt-shadow-md: 0 4px 16px rgba(13,26,42,.14);
  --mt-shadow-lg: 0 12px 32px rgba(13,26,42,.20);
  --mt-duration-fast: 120ms; --mt-duration-base: 200ms; --mt-duration-slow: 320ms;
  --mt-ease: cubic-bezier(.2,0,0,1);
  --mt-header-h: 64px;
  --mt-container: 1200px;
  /* tipografía */
  --mt-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mt-text-display: clamp(2.125rem, 1.4rem + 3vw, 3.375rem);
  --mt-text-h2: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
  --mt-text-h3: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  --mt-text-h4: clamp(1.19rem, 1.1rem + 0.35vw, 1.375rem);
  --mt-text-lead: clamp(1.125rem, 1.02rem + 0.4vw, 1.375rem);
  --mt-text-body: clamp(1rem, 0.95rem + 0.15vw, 1.125rem);
  --mt-text-small: clamp(0.875rem, 0.85rem + 0.1vw, 1rem);
}
@media (min-width: 768px)  { :root { --mt-section-y: 5rem; --mt-gutter: 2rem; --mt-gap: 1.5rem; } }
@media (min-width: 1025px) { :root { --mt-section-y: 6rem; --mt-gutter: 2.5rem; --mt-header-h: 72px; } }

/* ============ Base ============ */
html { scroll-padding-top: calc(var(--mt-header-h) + 16px); }
body {
  margin: 0;
  font-family: var(--mt-font);
  font-size: var(--mt-text-body);
  line-height: 1.6;
  font-weight: 400;
  color: var(--mt-color-text);
  background: var(--mt-color-bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--mt-font); font-weight: 800; color: var(--mt-color-navy); }
h1 { font-size: var(--mt-text-display); line-height: 1.1; letter-spacing: -.02em; }
h2 { font-size: var(--mt-text-h2); line-height: 1.2; letter-spacing: -.02em; }
h3 { font-size: var(--mt-text-h3); line-height: 1.25; letter-spacing: -.02em; }
h4 { font-size: var(--mt-text-h4); line-height: 1.3; font-weight: 700; }
main a:not([class]) {
  color: var(--mt-color-ocean);
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px;
}
main a:not([class]):hover { color: var(--mt-color-ocean-hover); text-decoration-thickness: 2px; }

/* Foco visible (WCAG 2.4.7 / 2.4.11) */
:focus-visible { outline: 3px solid var(--mt-color-ocean); outline-offset: 2px; }
.mt-dark :focus-visible, .mt-header :focus-visible, .mt-footer :focus-visible { outline-color: #fff; }

.mt-skip {
  position: absolute; left: 8px; top: -100px; z-index: 1000;
  background: var(--mt-color-navy-deep); color: var(--mt-color-turquoise);
  padding: 12px 16px; border-radius: var(--mt-radius-md); font-weight: 700;
}
.mt-skip:focus { top: 8px; }
.mt-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.mt-container { width: 100%; max-width: var(--mt-container); margin: 0 auto; padding: 0 var(--mt-gutter); box-sizing: border-box; }

/* ============ Botones ============ */
.mt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: 0 24px; box-sizing: border-box;
  font: 700 1rem/1.1 var(--mt-font); text-decoration: none;
  border: 2px solid transparent; border-radius: var(--mt-radius-md); cursor: pointer;
  transition: background-color var(--mt-duration-base) var(--mt-ease), color var(--mt-duration-base) var(--mt-ease), border-color var(--mt-duration-base) var(--mt-ease);
}
.mt-btn--sm { min-height: 44px; padding: 0 16px; }
/* sobre claro */
.mt-btn--primary { background: var(--mt-color-ocean); color: #fff; box-shadow: var(--mt-shadow-sm); }
.mt-btn--primary:hover { background: var(--mt-color-ocean-hover); color: #fff; }
.mt-btn--secondary { background: transparent; color: var(--mt-color-ocean); border-color: var(--mt-color-ocean); }
.mt-btn--secondary:hover { background: var(--mt-color-mist); }
/* sobre oscuro */
.mt-dark .mt-btn--primary, .mt-btn--on-dark { background: var(--mt-color-turquoise); color: var(--mt-color-navy); box-shadow: none; }
.mt-dark .mt-btn--primary:hover, .mt-btn--on-dark:hover { background: var(--mt-color-turquoise-hover); color: var(--mt-color-navy); }
.mt-dark .mt-btn--secondary { color: var(--mt-color-turquoise); border-color: var(--mt-color-turquoise); }
.mt-dark .mt-btn--secondary:hover { background: rgba(27,253,226,.12); }

/* ============ Header ============ */
.mt-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--mt-color-navy-deep); color: #fff;
  border-bottom: 1px solid var(--mt-color-navy-raised);
}
.mt-header__bar { display: flex; align-items: center; gap: var(--mt-space-5); height: var(--mt-header-h); }
.mt-header__logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.mt-header__logo img { display: block; height: 36px; width: auto; }
.mt-header__actions { display: flex; align-items: center; gap: var(--mt-space-3); margin-left: auto; }

/* CTA: etiqueta por ancho */
.mt-cta .mt-cta-short { display: inline; }
.mt-cta .mt-cta-mid, .mt-cta .mt-cta-full { display: none; }
@media (min-width: 480px)  { .mt-cta .mt-cta-short { display: none; } .mt-cta .mt-cta-mid { display: inline; } }
@media (min-width: 1025px) { .mt-cta .mt-cta-mid { display: none; } .mt-cta .mt-cta-full { display: inline; } }
/* Un solo primario por viewport: contorno por defecto; relleno si no hay otro primario visible */
.mt-header .mt-cta { background: transparent; color: var(--mt-color-turquoise); border-color: var(--mt-color-turquoise); box-shadow: none; }
.mt-header .mt-cta:hover { background: rgba(27,253,226,.12); }
body:not(.has-page-cta) .mt-header .mt-cta,
body.has-page-cta:not(.is-page-cta-visible) .mt-header .mt-cta { background: var(--mt-color-turquoise); color: var(--mt-color-navy); }
body:not(.has-page-cta) .mt-header .mt-cta:hover,
body.has-page-cta:not(.is-page-cta-visible) .mt-header .mt-cta:hover { background: var(--mt-color-turquoise-hover); }

/* Menú */
.mt-nav { display: none; }
.mt-nav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: var(--mt-space-2); }
.mt-nav a, .mt-nav__toggle {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; padding: 0 12px;
  color: #fff; font: 600 1rem/1 var(--mt-font); text-decoration: none; background: none; border: 0; cursor: pointer;
  border-bottom: 3px solid transparent; box-sizing: border-box;
}
.mt-nav a:hover, .mt-nav__toggle:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.mt-nav [aria-current="page"], .mt-nav .current-menu-item > a, .mt-nav .current-menu-ancestor > .mt-nav__toggle { border-bottom-color: var(--mt-color-turquoise); }
.mt-nav__toggle svg { width: 12px; height: 12px; transition: transform var(--mt-duration-base) var(--mt-ease); }
.mt-nav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Mega-menú */
.mt-mega { position: relative; }
.mt-mega__panel {
  position: absolute; left: 0; top: 100%; z-index: 110;
  width: min(1200px, calc(100vw - 2 * var(--mt-gutter))); box-sizing: border-box;
  background: #fff; color: var(--mt-color-navy); border: 1px solid var(--mt-color-border);
  border-radius: 0 0 var(--mt-radius-lg) var(--mt-radius-lg); box-shadow: var(--mt-shadow-md);
}
.mt-mega__panel[hidden] { display: none; }
.mt-mega__groups { list-style: none; margin: 0; padding: var(--mt-space-6); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--mt-space-6); }
.mt-mega__group { border-top: 3px solid var(--mt-color-ocean); padding-top: var(--mt-space-3); }
.mt-mega__group:nth-child(2) { border-top-color: var(--mt-color-turquoise-hover); }
.mt-mega__group:nth-child(3) { border-top-color: var(--mt-color-navy-raised); }
.mt-mega__group:nth-child(4) { border-top-color: var(--mt-color-ocean-hover); }
.mt-mega__group:nth-child(5) { border-top-color: var(--mt-color-teal-deep); }
.mt-mega__group:nth-child(6) { border-top-color: var(--mt-color-sky); }
.mt-mega__title { margin: 0 0 var(--mt-space-2); font: 800 .875rem/1.3 var(--mt-font); text-transform: uppercase; letter-spacing: .08em; color: var(--mt-color-teal-deep); }
.mt-mega__list { list-style: none; margin: 0; padding: 0; }
.mt-mega .mt-mega__list a, .mt-mega__all a {
  display: flex; align-items: center; min-height: 44px; padding: 0 4px; color: var(--mt-color-navy);
  font-weight: 600; border: 0; text-decoration: none;
}
.mt-mega .mt-mega__list a:hover { color: var(--mt-color-ocean-hover); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.mt-mega__all a { color: var(--mt-color-ocean); text-decoration: underline; text-underline-offset: 3px; }
.mt-mega__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--mt-space-4); flex-wrap: wrap; padding: 0 var(--mt-space-6); min-height: 56px; background: var(--mt-color-mist); border-radius: 0 0 var(--mt-radius-lg) var(--mt-radius-lg); }
.mt-mega .mt-mega__foot a { color: var(--mt-color-ocean); min-height: 44px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; border: 0; padding: 0; }

/* Botón hamburguesa (padding 0: Hello Elementor da 8px 16px a todo <button> y aplasta el icono) */
.mt-burger { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; background: none; border: 2px solid var(--mt-color-navy-raised); border-radius: var(--mt-radius-md); color: #fff; cursor: pointer; }
.mt-burger svg { width: 22px; height: 22px; flex: none; }
.mt-burger:hover, .mt-burger:focus { background: var(--mt-color-navy-raised); color: #fff; }
/* Neutraliza hover/focus rosa de los <button> de Hello en los botones propios */
.mt-nav__toggle:hover, .mt-nav__toggle:focus { background: none; color: #fff; }
.mt-footer__cookies:hover, .mt-footer__cookies:focus { background: none; color: #fff; }

/* Móvil / tablet (<= 1024): panel completo bajo el header */
@media (max-width: 1024px) {
  .mt-nav {
    position: fixed; left: 0; right: 0; top: var(--mt-header-h); z-index: 105;
    max-height: calc(100dvh - var(--mt-header-h)); overflow-y: auto;
    background: var(--mt-color-navy-deep); padding: var(--mt-space-4) var(--mt-gutter) var(--mt-space-8);
  }
  .mt-nav[hidden] { display: none; }
  .mt-nav.is-open { display: block; }
  .mt-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .mt-nav a, .mt-nav__toggle { width: 100%; min-height: 48px; justify-content: space-between; border-bottom: 1px solid var(--mt-color-navy-raised); }
  .mt-mega__panel { position: static; width: auto; border: 0; box-shadow: none; border-radius: 0; background: var(--mt-color-navy-raised); color: #fff; }
  .mt-mega__groups { display: block; padding: var(--mt-space-3) var(--mt-space-4); }
  .mt-mega__group { margin-bottom: var(--mt-space-4); border-top-color: var(--mt-color-turquoise); }
  .mt-mega__title { color: var(--mt-color-text-muted-on-dark); }
  .mt-mega .mt-mega__list a, .mt-mega__all a, .mt-mega .mt-mega__foot a { color: #fff; border: 0; min-height: 48px; }
  .mt-mega__foot { background: transparent; padding: 0 var(--mt-space-4); }
}
@media (min-width: 1025px) {
  .mt-nav { display: block; }
  .mt-burger { display: none; }
}
/* Móvil estrecho: logo + CTA + botón de menú deben caber en 375-390 px (verificado en navegador) */
@media (max-width: 479px) {
  .mt-header__bar { gap: 12px; }
  .mt-header__logo img { height: 28px; }
  .mt-header__actions { gap: 8px; }
  .mt-header .mt-cta { padding: 0 12px; font-size: .875rem; }
}

/* ============ Footer ============ */
.mt-footer { background: var(--mt-grad-dark); color: #fff; padding: var(--mt-space-8) 0 calc(var(--mt-space-8) + 24px); margin-top: 0; border-top: 1px solid var(--mt-color-navy-raised); }
.mt-footer a { color: #fff; }
.mt-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.mt-footer__grid { display: grid; grid-template-columns: 1fr; gap: var(--mt-space-7); }
@media (min-width: 768px)  { .mt-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1025px) { .mt-footer__grid { grid-template-columns: 1.1fr 1.6fr 1fr 1fr; } }
.mt-footer__logo img { display: block; height: 40px; width: auto; margin-bottom: var(--mt-space-4); }
.mt-footer__tag { color: var(--mt-color-text-muted-on-dark); margin: 0 0 var(--mt-space-4); font-size: var(--mt-text-small); }
.mt-footer__contact { list-style: none; margin: 0; padding: 0; font-size: var(--mt-text-small); }
.mt-footer__contact li { margin-bottom: 0; }
.mt-footer__contact a, .mt-footer__legal a { display: inline-flex; align-items: center; min-height: 44px; }
.mt-footer__title { margin: 0 0 var(--mt-space-3); font: 800 .875rem/1.3 var(--mt-font); text-transform: uppercase; letter-spacing: .08em; color: var(--mt-color-turquoise); }
.mt-footer ul.mt-footer__menu { list-style: none; margin: 0; padding: 0; }
.mt-footer__menu li a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--mt-text-small); }
.mt-footer__menu ul { list-style: none; margin: 0; padding: 0; }
.mt-footer__menu--cols { columns: 1; }
@media (min-width: 768px) { .mt-footer__menu--cols { columns: 2; column-gap: var(--mt-space-6); } }
.mt-footer__menu--cols > li { break-inside: avoid; }
.mt-footer__menu--cols > li > a { font-weight: 700; color: var(--mt-color-text-muted-on-dark); }
.mt-footer__legal { margin-top: var(--mt-space-8); padding-top: var(--mt-space-5); border-top: 1px solid var(--mt-color-navy-raised); display: flex; flex-wrap: wrap; gap: var(--mt-space-3) var(--mt-space-5); align-items: center; font-size: var(--mt-text-small); color: var(--mt-color-text-muted-on-dark); }
.mt-footer__legal ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--mt-space-1) var(--mt-space-5); }
.mt-footer__legal a { color: #fff; }
.mt-footer__cookies { background: none; border: 0; padding: 0; min-height: 44px; color: #fff; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ============ WhatsApp ============ */
.mt-whatsapp {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 90;
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: var(--mt-radius-full);
  background: var(--mt-color-navy); color: #fff; border: 2px solid #fff; box-shadow: var(--mt-shadow-md);
  transition: background-color var(--mt-duration-base) var(--mt-ease), transform var(--mt-duration-base) var(--mt-ease);
}
.mt-whatsapp:hover { background: var(--mt-color-navy-raised); transform: scale(1.04); }
.mt-whatsapp:focus-visible { outline: 3px solid var(--mt-color-ocean); outline-offset: 4px; }
.mt-whatsapp svg { width: 28px; height: 28px; fill: currentColor; }
@media print { .mt-whatsapp, .mt-header { display: none; } }

/* ============ Movimiento reducido ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .mt-whatsapp:hover { transform: none; }
}

/* Utilidad: banda oscura con degradado (para el contenido de Elementor) */
.mt-grad-dark { background: var(--mt-grad-dark); color: #fff; }

/* ======================================================================
   v1.1.0 - Iconos, movimiento y detalles de marca
   Las clases (mt-ico-*, mt-hero, mt-list-*, mt-arrow) se crean como clases
   globales en Elementor y aquí se les da el aspecto. Elementor usa el nombre
   de la clase tal cual (.elementor .mt-card), así que este CSS las alcanza.
   ====================================================================== */

/* --- Antetítulo con barra de acento --- */
.mt-eyebrow::before {
  content: ""; display: inline-block; width: 1.5rem; height: 3px; margin-right: .6rem; vertical-align: middle;
  border-radius: 2px; background: linear-gradient(90deg, var(--mt-ocean), var(--mt-turquoise-hover));
}
.mt-eyebrow-dark::before { background: linear-gradient(90deg, var(--mt-turquoise-hover), var(--mt-turquoise)); }

/* --- Tarjetas: barra superior que crece, elevación al pasar --- */
.mt-card, .mt-link-card { position: relative; overflow: hidden; transition: transform var(--mt-duration-base) var(--mt-ease), box-shadow var(--mt-duration-base) var(--mt-ease), border-color var(--mt-duration-base) var(--mt-ease); }
.mt-card::after, .mt-link-card::after {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px; transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, var(--mt-ocean), var(--mt-turquoise-hover)); transition: transform var(--mt-duration-slow) var(--mt-ease);
}
.mt-card:hover, .mt-link-card:hover { transform: translateY(-4px); box-shadow: var(--mt-shadow-md); border-color: var(--mt-color-ocean); }
.mt-card:hover::after, .mt-link-card:hover::after { transform: scaleX(1); }

/* --- Iconos en baldosa (se ponen sobre el título de la tarjeta) --- */
.mt-ico::before {
  content: ""; display: block; width: 52px; height: 52px; margin-bottom: .9rem; border-radius: 14px;
  background-color: var(--mt-tint); background-repeat: no-repeat; background-position: center; background-size: 28px;
  transition: transform var(--mt-duration-base) var(--mt-ease);
}
.mt-card:hover .mt-ico::before { transform: scale(1.08) rotate(-4deg); }
.mt-ico-plan::before      { background-image: url("assets/icons/plan.svg"); }
.mt-ico-sliders::before   { background-image: url("assets/icons/sliders.svg"); }
.mt-ico-code::before      { background-image: url("assets/icons/code.svg"); }
.mt-ico-link::before      { background-image: url("assets/icons/link.svg"); }
.mt-ico-shield::before    { background-image: url("assets/icons/shield.svg"); }
.mt-ico-filecheck::before { background-image: url("assets/icons/filecheck.svg"); }
.mt-ico-target::before    { background-image: url("assets/icons/target.svg"); }
.mt-ico-chart::before     { background-image: url("assets/icons/chart.svg"); }
.mt-ico-store::before     { background-image: url("assets/icons/store.svg"); }

/* --- Listas con marcador de estado (verde = bien, ámbar = señal, rojo = error) --- */
.mt-list-check ul, .mt-list-alert ul, .mt-list-x ul { list-style: none; margin: 0; padding: 0; }
.mt-list-check li, .mt-list-alert li, .mt-list-x li { position: relative; padding-left: 2.1rem; margin: 0 0 .85rem; }
.mt-list-check li::before, .mt-list-alert li::before, .mt-list-x li::before {
  content: ""; position: absolute; left: 0; top: .2em; width: 1.4rem; height: 1.4rem; background-repeat: no-repeat; background-position: center; background-size: contain;
}
.mt-list-check li::before { background-image: url("assets/icons/check.svg"); }
.mt-list-alert li::before { background-image: url("assets/icons/alert.svg"); }
.mt-list-x li::before     { background-image: url("assets/icons/x.svg"); }

/* --- Chips de herramientas --- */
.mt-chip { display: inline-flex; align-items: center; transition: transform var(--mt-duration-base) var(--mt-ease), background-color var(--mt-duration-base) var(--mt-ease); }
.mt-chip::before { content: ""; width: .5rem; height: .5rem; margin-right: .6rem; border-radius: 50%; background: var(--mt-turquoise); }
.mt-chip:hover { transform: translateY(-2px); background-color: #1B587A; }

/* --- Pasos: el número se resalta al pasar --- */
.mt-card:hover .mt-step-num { background-color: var(--mt-color-ocean); color: #fff; }
.mt-step-num { transition: background-color var(--mt-duration-base) var(--mt-ease), color var(--mt-duration-base) var(--mt-ease); }

/* --- Botones con flecha --- */
.mt-btn-primary { display: inline-flex; align-items: center; gap: .6rem; transition: background-color var(--mt-duration-base) var(--mt-ease), transform var(--mt-duration-fast) var(--mt-ease); }
.mt-btn-primary::after {
  content: ""; width: 1.1em; height: 1.1em; background-color: currentColor; transition: transform var(--mt-duration-base) var(--mt-ease);
  -webkit-mask: url("assets/icons/arrow.svg") center / contain no-repeat; mask: url("assets/icons/arrow.svg") center / contain no-repeat;
}
.mt-btn-primary:hover::after { transform: translateX(4px); }
.mt-btn-primary:active { transform: translateY(1px); }

/* --- Enlace "Ver ..." de las tarjetas relacionadas --- */
.mt-arrow::after { content: "\2192"; display: inline-block; margin-left: .4rem; transition: transform var(--mt-duration-base) var(--mt-ease); }
.mt-link-card:hover .mt-arrow::after { transform: translateX(5px); }
.mt-link-card .mt-arrow { color: var(--mt-color-ocean); font-weight: 700; }

/* --- Hero y bandas con líneas de circuito + símbolo real de la marca --- */
.mt-hero, .mt-circuit { position: relative; overflow: hidden; }
.mt-hero .mt-inner, .mt-circuit .mt-inner { position: relative; z-index: 1; }
/* el texto del hero deja libre el lado del símbolo */
.elementor .mt-hero .mt-inner > * { max-width: 40rem; }
.mt-circuit::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("assets/img/circuit-clean.svg") center / cover no-repeat; opacity: .9;
  /* los circuitos viven en los bordes y se desvanecen hacia el centro, donde va el texto */
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.85) 12%, rgba(0,0,0,0) 36%, rgba(0,0,0,0) 64%, rgba(0,0,0,.85) 86%, #000 100%);
  mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.85) 12%, rgba(0,0,0,0) 36%, rgba(0,0,0,0) 64%, rgba(0,0,0,.85) 86%, #000 100%);
}
.mt-hero::after {
  content: ""; position: absolute; top: 50%; transform: translateY(-50%); pointer-events: none;
  right: max(2.5rem, calc((100% - 1200px) / 2 + 2.5rem)); width: min(27vw, 400px); aspect-ratio: 667 / 558;
  background: url("assets/img/hero-symbol.png") center / contain no-repeat;
}
@media (max-width: 1179px) { .mt-hero::after { display: none; } }
@media (max-width: 767px) { .mt-circuit::before { opacity: .55; } }

/* --- Aparición al hacer scroll (solo con JS y movimiento permitido; ver metra.js) --- */
.has-js .mt-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--mt-ease), transform .6s var(--mt-ease); }
.has-js .mt-reveal.is-in { opacity: 1; transform: none; }
.has-js .mt-reveal.is-in.mt-card:hover, .has-js .mt-reveal.is-in.mt-link-card:hover { transform: translateY(-4px); }
.has-js .mt-reveal.is-done { transition: transform var(--mt-duration-base) var(--mt-ease), box-shadow var(--mt-duration-base) var(--mt-ease), border-color var(--mt-duration-base) var(--mt-ease), opacity var(--mt-duration-base) var(--mt-ease); }
@media (prefers-reduced-motion: reduce) {
  .has-js .mt-reveal { opacity: 1; transform: none; }
  .mt-card:hover, .mt-link-card:hover, .mt-chip:hover { transform: none; }
}

/* --- Acordeón de preguntas frecuentes: indicador que gira (nativo <details>, sin JS) --- */
.mt-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; list-style: none; cursor: pointer; }
.mt-faq-item summary::-webkit-details-marker { display: none; }
.mt-faq-item summary::after {
  content: ""; flex: none; width: 1.5rem; height: 1.5rem; background-color: var(--mt-color-ocean);
  -webkit-mask: url("assets/icons/chevron.svg") center / contain no-repeat; mask: url("assets/icons/chevron.svg") center / contain no-repeat;
  transition: transform var(--mt-duration-base) var(--mt-ease);
}
.mt-faq-item[open] summary::after { transform: rotate(180deg); }
.mt-faq-item summary:hover .mt-faq-q { color: var(--mt-color-ocean); }
.mt-faq-item summary:focus-visible { outline: 3px solid var(--mt-color-ocean); outline-offset: 2px; border-radius: 4px; }

/* ======================================================================
   v1.2.0 - Mega-menú por defecto, enlaces en tarjetas, estados, proyectos
   ====================================================================== */
/* Título de grupo del mega-menú cuando es enlace (menú por defecto) */
.mt-mega .mt-mega__title a { display: inline; min-height: 0; padding: 0; border: 0; color: var(--mt-color-teal-deep); font: inherit; text-decoration: none; }
.mt-mega .mt-mega__title a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1024px) { .mt-mega .mt-mega__title a { color: var(--mt-color-text-muted-on-dark); } }

/* Lista de enlaces dentro de una tarjeta (servicios por categoría) */
.mt-linklist ul { list-style: none; margin: 0; padding: 0; }
.mt-linklist li { margin: 0 0 .35rem; }
.mt-linklist a { font-weight: 600; }
.mt-linklist .mt-more a { font-weight: 700; }
.mt-linklist .mt-more a::after { content: " \2192"; }

/* Tarjetas oscuras (sobre banda oscura) */
.mt-card-dark { position: relative; overflow: hidden; transition: transform var(--mt-duration-base) var(--mt-ease), box-shadow var(--mt-duration-base) var(--mt-ease); }
.mt-card-dark:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0, 0, 0, .35); }
.mt-card-dark::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px; transform: scaleX(0); transform-origin: left; background: var(--mt-grad-turq); transition: transform var(--mt-duration-slow) var(--mt-ease); }
.mt-card-dark:hover::after { transform: scaleX(1); }

/* Etiqueta de estado de proyecto (con forma, no solo color) */
.mt-status { display: inline-flex; align-items: center; gap: .45rem; align-self: flex-start; padding: .25rem .7rem; border: 1px solid currentColor; border-radius: 999px; font: 700 .8125rem/1.2 var(--mt-font); background: #fff; }
.mt-status::before { content: ""; width: .55rem; height: .55rem; background: currentColor; }
.mt-status-dev { color: var(--mt-color-warning); }
.mt-status-dev::before { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); border-radius: 1px; }
.mt-status-beta { color: var(--mt-color-teal-deep); }
.mt-status-beta::before { border-radius: 50%; background: linear-gradient(90deg, currentColor 50%, transparent 50%); box-shadow: inset 0 0 0 1px currentColor; }
.mt-status-live { color: var(--mt-color-success); }
.mt-status-live::before { border-radius: 50%; }

/* Contacto junto al formulario */
.mt-contact-list ul { list-style: none; margin: 0; padding: 0; }
.mt-contact-list li { margin: 0 0 .6rem; }
.mt-contact-list a { color: var(--mt-turquoise); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.mt-contact-list a:hover { color: #fff; }

/* Iconos de la home */
.mt-ico-eye::before { background-image: url("assets/icons/eye.svg"); }
.mt-ico-bolt::before { background-image: url("assets/icons/bolt.svg"); }
.mt-ico-sync::before { background-image: url("assets/icons/sync.svg"); }
.mt-ico-pulse::before { background-image: url("assets/icons/pulse.svg"); }
.mt-ico-trend::before { background-image: url("assets/icons/trend.svg"); }
.mt-ico-database::before { background-image: url("assets/icons/database.svg"); }
.mt-ico-spark::before { background-image: url("assets/icons/spark.svg"); }
.mt-ico-users::before { background-image: url("assets/icons/users.svg"); }
.mt-ico-diff::before { background-image: url("assets/icons/diff.svg"); }
.mt-ico-clock::before { background-image: url("assets/icons/clock.svg"); }
.mt-ico-search::before { background-image: url("assets/icons/search.svg"); }

/* Enlaces dentro de bandas oscuras: turquesa (la regla genérica de main a:not([class]) los pinta Océano, ilegible sobre marino) */
main .mt-band-dark a:not([class]), main .mt-card-dark a:not([class]), main .mt-contact-list a:not([class]) { color: var(--mt-color-turquoise); }
main .mt-band-dark a:not([class]):hover, main .mt-card-dark a:not([class]):hover, main .mt-contact-list a:not([class]):hover { color: #fff; }

/* ======================================================================
   v1.3.0 - Formulario del prediagnóstico (Contact Form 7)
   Pensado para una superficie clara (tarjeta blanca). Etiquetas visibles,
   bordes de campo con contraste >= 3:1, errores con icono y texto.
   ====================================================================== */
.mt-form { display: flex; flex-direction: column; gap: 1.25rem; color: var(--mt-color-navy); font-family: var(--mt-font); font-size: 1rem; line-height: 1.5; }
.mt-form p { margin: 0; }
.mt-form br { display: none; }
.mt-form__intro { color: var(--mt-color-slate); font-size: var(--mt-text-small); }
.mt-field { display: flex; flex-direction: column; gap: .4rem; border: 0; padding: 0; margin: 0; min-width: 0; }
.mt-field label, .mt-field legend { padding: 0; font-weight: 700; color: var(--mt-color-navy); }
.mt-hint { color: var(--mt-color-slate); font-size: .875rem; }
.mt-form .wpcf7-form-control-wrap { display: block; }
.mt-form input[type="text"], .mt-form input[type="email"], .mt-form input[type="tel"], .mt-form input[type="url"], .mt-form select, .mt-form textarea {
  width: 100%; box-sizing: border-box; min-height: 48px; padding: .7rem .9rem; margin: 0;
  font: 400 1rem/1.4 var(--mt-font); color: var(--mt-color-navy); background: #fff;
  border: 2px solid var(--mt-color-border-strong); border-radius: var(--mt-radius-sm);
  transition: border-color var(--mt-duration-fast) var(--mt-ease), box-shadow var(--mt-duration-fast) var(--mt-ease);
}
.mt-form textarea { min-height: 8rem; resize: vertical; }
.mt-form input:hover, .mt-form select:hover, .mt-form textarea:hover { border-color: var(--mt-color-ocean); }
.mt-form input:focus-visible, .mt-form select:focus-visible, .mt-form textarea:focus-visible { outline: 3px solid var(--mt-color-ocean); outline-offset: 2px; border-color: var(--mt-color-ocean); }

/* casillas y opciones */
.mt-form .wpcf7-list-item { display: block; margin: 0 0 .45rem; }
.mt-form .wpcf7-list-item label { display: flex; align-items: center; gap: .6rem; font-weight: 400; cursor: pointer; }
.mt-form input[type="checkbox"], .mt-form input[type="radio"] { flex: none; width: 1.25rem; height: 1.25rem; min-height: 0; margin: 0; accent-color: var(--mt-color-ocean); }
.mt-form fieldset .wpcf7-checkbox { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .2rem 1rem; }
.mt-field--consent .wpcf7-list-item label { align-items: flex-start; font-size: .9375rem; color: var(--mt-color-slate); }
.mt-field--consent input[type="checkbox"] { margin-top: .15rem; }
.mt-field--consent a, main .mt-band-dark .mt-form a:not([class]) { color: var(--mt-color-ocean); text-decoration: underline; text-underline-offset: 3px; }
main .mt-band-dark .mt-form a:not([class]):hover { color: var(--mt-color-ocean-hover); }

/* envío */
.mt-form__submit { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.mt-form input[type="submit"].mt-btn { cursor: pointer; }
.mt-form .wpcf7-spinner { margin: 0; }

/* errores: icono + texto + borde (nunca solo color) */
.mt-form input.wpcf7-not-valid, .mt-form select.wpcf7-not-valid, .mt-form textarea.wpcf7-not-valid { border-color: var(--mt-color-error); }
.mt-form .wpcf7-not-valid-tip { display: block; margin-top: .35rem; color: var(--mt-color-error); font-size: .9375rem; font-weight: 600; }
.mt-form .wpcf7-not-valid-tip::before {
  content: ""; display: inline-block; width: 1.1em; height: 1.1em; margin-right: .4em; vertical-align: -.2em;
  background: url("assets/icons/x.svg") center / contain no-repeat;
}
.wpcf7 form .wpcf7-response-output { margin: 1rem 0 0; padding: .9rem 1rem; border: 2px solid var(--mt-color-border-strong); border-radius: var(--mt-radius-md); font-weight: 600; }
.wpcf7 form.sent .wpcf7-response-output { border-color: var(--mt-color-success); color: var(--mt-color-success); background: #E3F4EB; }
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.spam .wpcf7-response-output { border-color: var(--mt-color-error); color: var(--mt-color-error); background: #FDECEA; }

/* ======================================================================
   v1.4.0 - Páginas de servicio más visuales
   Esquema "qué es", etiquetas del héroe, fichas con icono (señales, éxito,
   errores), línea de tiempo del proceso y llamada destacada.
   Las clases son globales en Elementor (sin estilos propios); aquí se les da el aspecto.
   ====================================================================== */

/* --- Héroe: etiquetas con icono --- */
.elementor .mt-hero-tags { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.75rem; }
.elementor .mt-tag {
  display: inline-flex; align-items: center; gap: .5rem; margin: 0; padding: .4rem .9rem;
  border: 1px solid rgba(124, 196, 238, .4); border-radius: 999px; background: rgba(255, 255, 255, .06);
  color: #fff; font: 600 .875rem/1.2 var(--mt-font);
}
.mt-tag::before { content: ""; flex: none; width: 1.05rem; height: 1.05rem; background-color: var(--mt-color-turquoise); }
.mt-tag-cat::before  { -webkit-mask: url("assets/icons/plan.svg") center / contain no-repeat;  mask: url("assets/icons/plan.svg") center / contain no-repeat; }
.mt-tag-free::before { -webkit-mask: url("assets/icons/spark.svg") center / contain no-repeat; mask: url("assets/icons/spark.svg") center / contain no-repeat; }
.mt-tag-who::before  { -webkit-mask: url("assets/icons/users.svg") center / contain no-repeat; mask: url("assets/icons/users.svg") center / contain no-repeat; }

/* --- Qué es: texto + esquema de flujo --- */
.elementor .mt-two { display: grid !important; grid-template-columns: 1fr; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .elementor .mt-two { grid-template-columns: 1.1fr .9fr; gap: 3.5rem; } }
.elementor .mt-stack2 { display: grid !important; gap: 1rem; align-content: center; justify-items: start; }
.elementor .mt-flow {
  display: grid !important; align-content: start; counter-reset: mtn; position: relative; overflow: hidden;
  padding: 1.75rem !important; border-radius: 16px; background: var(--mt-grad-dark); box-shadow: var(--mt-shadow-md);
}
.elementor .mt-flow-title { display: block; margin: 0 0 1.25rem; font: 800 .8125rem/1.2 var(--mt-font); letter-spacing: .1em; text-transform: uppercase; color: var(--mt-color-turquoise); }
.elementor .mt-flow-node {
  position: relative; display: block; margin: 0; padding: .85rem 1rem .85rem 3.5rem;
  border: 1px solid var(--mt-color-navy-raised); border-radius: 12px; background: rgba(255, 255, 255, .05);
  color: var(--mt-color-text-muted-on-dark); font: 400 .9375rem/1.4 var(--mt-font); counter-increment: mtn;
}
.mt-flow-node strong { display: block; font-weight: 800; font-size: 1.0625rem; color: #fff; }
.mt-flow-node span { display: block; }
.mt-flow-node + .mt-flow-node { margin-top: 1.5rem; }
.mt-flow-node::before {
  content: counter(mtn); position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--mt-color-turquoise); color: var(--mt-color-navy); font: 800 .875rem/1 var(--mt-font);
}
.mt-flow-node:not(:last-child)::after {
  content: ""; position: absolute; left: calc(1rem + .85rem - 1px); top: 100%; width: 2px; height: 1.5rem;
  background: linear-gradient(var(--mt-color-turquoise-hover), var(--mt-color-turquoise));
}

/* --- Fichas con icono: señales (alerta), éxito (check), errores (x) --- */
.elementor .mt-signals, .elementor .mt-wins, .elementor .mt-misses { display: grid !important; grid-template-columns: 1fr; gap: 1rem; margin-top: 1.5rem; }
@media (min-width: 768px) { .elementor .mt-signals, .elementor .mt-wins, .elementor .mt-misses { grid-template-columns: repeat(2, 1fr); } }
.elementor .mt-signal, .elementor .mt-win, .elementor .mt-miss {
  position: relative; display: block; margin: 0; padding: 1.1rem 1.25rem 1.1rem 4.1rem; border-radius: 12px;
  color: var(--mt-color-navy); font: 500 1rem/1.5 var(--mt-font);
  transition: transform var(--mt-duration-base) var(--mt-ease), box-shadow var(--mt-duration-base) var(--mt-ease);
}
.elementor .mt-signal, .elementor .mt-win { background: var(--mt-color-mist); border: 1px solid var(--mt-color-tint); }
.elementor .mt-miss { background: #fff; border: 1px solid var(--mt-color-border); }
.mt-signal:hover, .mt-win:hover, .mt-miss:hover { transform: translateY(-2px); box-shadow: var(--mt-shadow-sm); }
.mt-signal::before, .mt-win::before, .mt-miss::before {
  content: ""; position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%);
  width: 2rem; height: 2rem; background-repeat: no-repeat; background-position: center; background-size: contain;
}
.mt-signal::before { background-image: url("assets/icons/alert.svg"); }
.mt-win::before    { background-image: url("assets/icons/check.svg"); }
.mt-miss::before   { background-image: url("assets/icons/x.svg"); }
@media (prefers-reduced-motion: reduce) { .mt-signal:hover, .mt-win:hover, .mt-miss:hover { transform: none; } }

/* --- Llamada destacada (nota bajo el éxito) --- */
.elementor .mt-callout {
  display: block; margin: 1.5rem 0 0; padding: 1rem 1.25rem; border-left: 4px solid var(--mt-color-ocean);
  border-radius: 0 12px 12px 0; background: var(--mt-color-mist); color: var(--mt-color-navy); font: 600 1rem/1.5 var(--mt-font);
}

/* --- Línea de tiempo del proceso --- */
.elementor .mt-timeline { display: grid !important; grid-template-columns: 1fr; gap: 0; margin-top: 2rem; }
.elementor .mt-step { position: relative; display: grid !important; align-content: start; gap: .35rem; margin: 0; padding: .25rem 0 2rem 4.25rem !important; }
.elementor .mt-tl-num {
  position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 3rem; height: 3rem; margin: 0;
  border-radius: 50%; color: #fff; font: 800 1.0625rem/1 var(--mt-font);
  background: linear-gradient(135deg, var(--mt-color-ocean), var(--mt-color-teal-deep));
  box-shadow: 0 0 0 6px var(--mt-color-mist); transition: transform var(--mt-duration-base) var(--mt-ease);
}
.mt-step:last-child .mt-tl-num { background: linear-gradient(135deg, var(--mt-color-ocean), var(--mt-color-turquoise-hover)); }
.mt-step:hover .mt-tl-num { transform: scale(1.1); }
.mt-step:not(:last-child)::before {
  content: ""; position: absolute; left: calc(1.5rem - 1px); top: 3rem; bottom: 0; width: 2px;
  background: linear-gradient(var(--mt-color-ocean), var(--mt-color-tint));
}
@media (min-width: 1025px) {
  .elementor .mt-timeline { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 1.5rem; }
  .elementor .mt-step { padding: 4.25rem 0 0 !important; }
  .mt-step:not(:last-child)::before {
    left: 3.5rem; right: -1.5rem; top: calc(1.5rem - 1px); bottom: auto; width: auto; height: 2px;
    background: linear-gradient(90deg, var(--mt-color-ocean), var(--mt-color-tint));
  }
}
@media (prefers-reduced-motion: reduce) { .mt-step:hover .mt-tl-num { transform: none; } }

/* --- Herramientas: chips con icono sobre banda con circuitos --- */
.elementor .mt-tools .mt-chip::before {
  width: 1rem; height: 1rem; margin-right: .6rem; border-radius: 0; background: var(--mt-color-turquoise);
  -webkit-mask: url("assets/icons/sliders.svg") center / contain no-repeat; mask: url("assets/icons/sliders.svg") center / contain no-repeat;
}

/* --- v1.4.1: FAQ en móvil. El contenedor del icono nativo de Elementor ocupaba ~200 px y dejaba la pregunta en una columna angosta; el chevron es el ::after del summary --- */
.mt-faq-item summary > :nth-child(2) { display: none !important; }
.mt-faq-item summary > :first-child { flex: 1 1 auto !important; min-width: 0 !important; }

/* ======================================================================
   v1.4.6 - Capturas de pantalla de los proyectos
   ====================================================================== */
.elementor .mt-shot-wrap { display: grid !important; gap: .85rem; justify-items: center; }
.elementor .mt-shot {
  display: block !important; width: 100% !important; max-width: 62rem; height: auto !important; margin: 0;
  border: 1px solid var(--mt-color-border); border-radius: 14px; box-shadow: var(--mt-shadow-md); background: var(--mt-color-navy-deep);
}
.elementor .mt-shot-cap { margin: 0; text-align: center; color: var(--mt-color-slate); font: 400 .9375rem/1.5 var(--mt-font); }

/* --- v1.4.9: línea de tiempo con 7 o más pasos. El título más largo ("Descubrimiento") se salía de su columna y chocaba con el siguiente --- */
@media (min-width: 1025px) {
  .elementor .mt-step h3 { overflow-wrap: anywhere; }
  .elementor .mt-timeline:has(.mt-step:nth-child(7)) { gap: 1rem; }
  .elementor .mt-timeline:has(.mt-step:nth-child(7)) .mt-step h3 { font-size: 1.0625rem; }
  .mt-timeline:has(.mt-step:nth-child(7)) .mt-step:not(:last-child)::before { right: -1rem; }
}

/* ======================================================================
   v1.6.0 - Blog (Recursos): índice, archivos y artículo
   Clases propias (.mt-p*, .mt-pcard, .mt-prose…): no dependen de Elementor.
   ====================================================================== */
.mt-is-blog main { font-family: var(--mt-font); color: var(--mt-color-text); }
.mt-phero { background: var(--mt-grad-dark); color: #fff; padding: 3.5rem 0 3rem; }
.mt-pinner { position: relative; z-index: 1; }
.mt-phero .mt-pinner > * { max-width: 50rem; }
.mt-pcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.5rem; padding: 0; font-size: .9375rem; color: var(--mt-color-text-muted-on-dark); }
.mt-pcrumbs li + li::before { content: "/"; margin-right: .4rem; opacity: .6; }
.mt-pcrumbs a { color: var(--mt-color-turquoise); text-decoration: none; }
.mt-pcrumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.mt-pcrumbs [aria-current] { color: #fff; }
.mt-peyebrow { display: flex; align-items: center; gap: .75rem; margin: 0 0 1rem; font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mt-color-turquoise); }
.mt-peyebrow::before { content: ""; width: 1.75rem; height: 2px; background: var(--mt-color-turquoise); }
.mt-pcat { display: inline-block; margin: 0 0 1rem; padding: .3rem .8rem; border: 1px solid rgba(27,253,226,.5); border-radius: var(--mt-radius-full); font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mt-color-turquoise); text-decoration: none; }
.mt-pcat:hover { background: rgba(27,253,226,.12); }
.mt-ph1 { margin: 0 0 1rem; font: 800 var(--mt-text-display)/1.1 var(--mt-font); letter-spacing: -.02em; color: #fff; }
.mt-ph2 { margin: 0 0 1.5rem; font: 800 var(--mt-text-h2)/1.15 var(--mt-font); letter-spacing: -.01em; color: var(--mt-color-navy); }
.mt-on-dark { color: #fff; }
.mt-plead { margin: 0 0 1.5rem; font: 400 var(--mt-text-lead)/1.55 var(--mt-font); }
.mt-on-dark-muted { color: var(--mt-color-text-muted-on-dark); }
.mt-pmeta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 1.5rem 0 0; font-size: .9375rem; color: var(--mt-color-text-muted-on-dark); }
.mt-avatar { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--mt-color-turquoise); color: var(--mt-color-navy-deep); font-size: .8125rem; font-weight: 800; }
.mt-avatar--lg { width: 3.5rem; height: 3.5rem; font-size: 1.0625rem; flex: none; }

.mt-pband { padding: 3.5rem 0; background: #fff; }
.mt-pband--mist { background: var(--mt-color-mist); }
.mt-pband--dark { background: var(--mt-grad-dark); color: #fff; position: relative; overflow: hidden; }
.mt-pband--dark .mt-pinner > * { max-width: 40rem; }

/* Cabecera: imagen destacada que sobresale del hero */
.mt-pcover { position: relative; z-index: 2; margin-top: -1.25rem; }
.mt-pcover figure { margin: 0 auto; max-width: 62rem; }
.mt-pcover img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; box-shadow: var(--mt-shadow-lg); background: var(--mt-color-navy-deep); }

/* Artículo */
.mt-playout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; padding-top: 2.5rem; padding-bottom: 3.5rem; }
@media (min-width: 1025px) {
  .mt-playout { grid-template-columns: minmax(0, 44rem) 19rem; justify-content: center; gap: 4rem; padding-top: 3rem; }
  .mt-pside { align-self: start; position: sticky; top: calc(var(--mt-header-h) + 1.5rem); }
  .mt-toc-m { display: none; }
}
@media (max-width: 1024px) { .mt-pside { display: none; } }
.mt-resumen { margin: 0 0 2rem; padding: 1.1rem 1.25rem; background: var(--mt-color-mist); border-left: 4px solid var(--mt-color-ocean); border-radius: 0 var(--mt-radius-md) var(--mt-radius-md) 0; }
.mt-resumen strong { display: block; margin-bottom: .35rem; font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mt-color-ocean); }
.mt-resumen p { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--mt-color-navy); }

.mt-prose { font: 400 var(--mt-text-body)/1.75 var(--mt-font); color: #1f3a4d; }
.mt-prose > * + * { margin-top: 1.1em; }
.mt-prose h2 { margin-top: 2.4em; margin-bottom: .2em; font: 800 clamp(1.5rem, 1.25rem + 1vw, 1.875rem)/1.2 var(--mt-font); color: var(--mt-color-navy); scroll-margin-top: calc(var(--mt-header-h) + 1.5rem); }
.mt-prose h3 { margin-top: 1.8em; font: 700 1.3125rem/1.3 var(--mt-font); color: var(--mt-color-navy); scroll-margin-top: calc(var(--mt-header-h) + 1.5rem); }
.mt-prose p { margin-bottom: 0; }
.mt-prose a { color: var(--mt-color-ocean); text-decoration: underline; text-underline-offset: 3px; }
.mt-prose a:hover { color: var(--mt-color-ocean-hover); }
.mt-prose ul, .mt-prose ol { padding-left: 1.4em; }
.mt-prose li + li { margin-top: .4em; }
.mt-prose blockquote { margin-left: 0; padding: .2rem 0 .2rem 1.1rem; border-left: 4px solid var(--mt-color-turquoise-hover); color: var(--mt-color-slate); }
.mt-prose code { padding: .12em .4em; border-radius: var(--mt-radius-sm); background: var(--mt-color-mist); font-size: .92em; }
.mt-prose pre { padding: 1rem 1.25rem; overflow-x: auto; border-radius: var(--mt-radius-md); background: var(--mt-color-navy-deep); color: #d8f7f2; font-size: .9375rem; line-height: 1.6; }
.mt-prose pre code { padding: 0; background: none; color: inherit; }
.mt-prose img { max-width: 100%; height: auto; border-radius: var(--mt-radius-md); }
.mt-prose table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.mt-prose th, .mt-prose td { padding: .6rem .75rem; border: 1px solid var(--mt-color-border); text-align: left; }
.mt-prose th { background: var(--mt-color-mist); }

.mt-ptags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2.25rem; }
.mt-ptags a { padding: .3rem .75rem; border-radius: var(--mt-radius-full); background: var(--mt-color-mist); color: var(--mt-color-ocean); font-size: .9rem; font-weight: 600; text-decoration: none; }
.mt-ptags a:hover { background: var(--mt-color-tint); }
.mt-share { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--mt-color-border); font-size: .9375rem; color: var(--mt-color-slate); }
.mt-share a, .mt-copy { padding: .4rem .9rem; border: 1px solid var(--mt-color-border-strong); border-radius: var(--mt-radius-full); background: #fff; color: var(--mt-color-navy); font: 600 .9rem var(--mt-font); text-decoration: none; cursor: pointer; }
.mt-share a:hover, .mt-copy:hover { border-color: var(--mt-color-ocean); color: var(--mt-color-ocean); }
.mt-author { display: flex; gap: 1rem; align-items: flex-start; margin-top: 2rem; padding: 1.25rem; background: var(--mt-color-mist); border-radius: 14px; }
.mt-author p { margin: 0; }
.mt-author__name { font-weight: 800; color: var(--mt-color-navy); }
.mt-author__bio { margin-top: .25rem !important; font-size: .9375rem; line-height: 1.55; color: var(--mt-color-slate); }
.mt-svc { margin-top: 2.5rem; }
.mt-svc h2 { margin: 0 0 1rem; font: 800 1.375rem/1.2 var(--mt-font); color: var(--mt-color-navy); }
.mt-svc__grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.mt-svc__item { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem; border: 1px solid var(--mt-color-border); border-radius: var(--mt-radius-lg); color: var(--mt-color-navy); font-weight: 700; text-decoration: none; transition: border-color var(--mt-duration-base) var(--mt-ease), transform var(--mt-duration-base) var(--mt-ease); }
.mt-svc__item span:last-child { color: var(--mt-color-ocean); font-size: .9rem; white-space: nowrap; }
.mt-svc__item:hover { border-color: var(--mt-color-ocean); transform: translateY(-2px); }

/* Tabla de contenidos */
.mt-toc__t { margin: 0 0 .75rem; font-size: .8125rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mt-color-slate); }
.mt-toc ol, .mt-toc-m ol { list-style: none; margin: 0; padding: 0; }
.mt-toc li { margin: 0; }
.mt-toc a { display: block; padding: .4rem 0 .4rem .9rem; border-left: 2px solid var(--mt-color-border); color: var(--mt-color-slate); font-size: .9375rem; line-height: 1.4; text-decoration: none; }
.mt-toc a:hover { color: var(--mt-color-ocean); border-left-color: var(--mt-color-ocean); }
.mt-toc a.is-active { color: var(--mt-color-navy); font-weight: 700; border-left-color: var(--mt-color-turquoise-hover); }
.mt-toc .lvl3 a { padding-left: 1.8rem; font-size: .875rem; }
.mt-sidecta { margin-top: 1.5rem; padding: 1.25rem; border-radius: 14px; background: var(--mt-grad-dark); color: #fff; }
.mt-sidecta p { margin: 0 0 .85rem; font-weight: 700; line-height: 1.35; }
.mt-toc-m { margin: 0 0 1.5rem; border: 1px solid var(--mt-color-border); border-radius: var(--mt-radius-lg); }
.mt-toc-m summary { padding: .85rem 1rem; font-weight: 700; cursor: pointer; color: var(--mt-color-navy); }
.mt-toc-m ol { padding: 0 1rem 1rem; }
.mt-toc-m a { display: block; padding: .35rem 0; color: var(--mt-color-ocean); text-decoration: none; }
.mt-toc-m .lvl3 a { padding-left: 1rem; }

/* Índice y archivos */
.mt-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.mt-chipf { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .95rem; border: 1px solid var(--mt-color-border-strong); border-radius: var(--mt-radius-full); color: var(--mt-color-navy); font-weight: 600; font-size: .9375rem; text-decoration: none; }
.mt-chipf span { padding: 0 .4rem; border-radius: var(--mt-radius-full); background: var(--mt-color-mist); font-size: .8125rem; color: var(--mt-color-slate); }
.mt-chipf:hover { border-color: var(--mt-color-ocean); color: var(--mt-color-ocean); }
.mt-chipf.is-active { background: var(--mt-color-navy); border-color: var(--mt-color-navy); color: #fff; }
.mt-chipf.is-active span { background: rgba(255,255,255,.18); color: #fff; }
.mt-more { margin: 3rem 0 1.25rem; }
.mt-pgrid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.mt-pcard { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--mt-color-border); border-radius: 14px; background: #fff; color: var(--mt-color-navy); text-decoration: none; transition: transform var(--mt-duration-base) var(--mt-ease), box-shadow var(--mt-duration-base) var(--mt-ease), border-color var(--mt-duration-base) var(--mt-ease); }
.mt-pcard:hover { transform: translateY(-3px); box-shadow: var(--mt-shadow-md); border-color: var(--mt-color-ocean); }
.mt-pcard__img img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.mt-pcard__ph { display: block; aspect-ratio: 16 / 9; background: var(--mt-grad-dark); }
.mt-pcard__body { display: flex; flex-direction: column; gap: .5rem; padding: 1.25rem; flex: 1; }
.mt-pcard__cat { font-size: .8125rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mt-color-ocean); }
.mt-pcard__title { font: 800 1.1875rem/1.3 var(--mt-font); }
.mt-pcard__excerpt { font-size: .9375rem; line-height: 1.55; color: var(--mt-color-slate); }
.mt-pcard__meta { margin-top: auto; padding-top: .5rem; font-size: .8125rem; color: var(--mt-color-slate); }
.mt-pcard--featured { margin-bottom: 1rem; }
@media (min-width: 900px) {
  .mt-pcard--featured { flex-direction: row; align-items: stretch; }
  .mt-pcard--featured .mt-pcard__img { flex: 0 0 55%; }
  .mt-pcard--featured .mt-pcard__img img, .mt-pcard--featured .mt-pcard__ph { height: 100%; aspect-ratio: auto; min-height: 20rem; }
  .mt-pcard--featured .mt-pcard__body { justify-content: center; padding: 2rem; gap: .75rem; }
  .mt-pcard--featured .mt-pcard__title { font-size: 1.75rem; }
  .mt-pcard--featured .mt-pcard__excerpt { font-size: 1.0625rem; }
}
.mt-pager { display: flex; gap: .5rem; margin-top: 2.5rem; }
.mt-pager a, .mt-pager span { min-width: 2.5rem; padding: .5rem .8rem; border: 1px solid var(--mt-color-border-strong); border-radius: var(--mt-radius-md); text-align: center; text-decoration: none; color: var(--mt-color-navy); font-weight: 600; }
.mt-pager span { background: var(--mt-color-navy); border-color: var(--mt-color-navy); color: #fff; }
@media (prefers-reduced-motion: reduce) { .mt-pcard, .mt-svc__item { transition: none; } .mt-pcard:hover, .mt-svc__item:hover { transform: none; } }

/* --- v1.6.1: el estilo global "main a:not([class])" ganaba a los enlaces sin clase del blog; alineación de portada --- */
main .mt-pcrumbs a { color: var(--mt-color-turquoise); text-decoration: none; }
main .mt-pcrumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
main .mt-toc a { color: var(--mt-color-slate); text-decoration: none; }
main .mt-toc a:hover { color: var(--mt-color-ocean); }
main .mt-toc a.is-active { color: var(--mt-color-navy); }
main .mt-toc-m a { color: var(--mt-color-ocean); text-decoration: none; }
main .mt-pcover figure { max-width: 67rem; }
@media (min-width: 1025px) { .mt-post .mt-phero .mt-container { max-width: calc(67rem + 2 * var(--mt-gutter)); } }
main .mt-ptags a { color: var(--mt-color-ocean); text-decoration: none; }
main .mt-share a { color: var(--mt-color-navy); text-decoration: none; }
main .mt-share a:hover { color: var(--mt-color-ocean); }

/* --- v1.7.0: cabecera del artículo en dos columnas (texto + portada); sin imagen grande debajo --- */
.mt-phero .mt-pinner > .mt-phero__grid { max-width: none; }
.mt-phero__grid { display: grid; gap: 2rem; align-items: center; }
.mt-phero__text > * { max-width: 40rem; }
.mt-post .mt-ph1 { font-size: clamp(1.875rem, 1.35rem + 2vw, 2.75rem); }
.mt-phero__img { margin: 0; }
.mt-phero__img img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; box-shadow: var(--mt-shadow-lg); border: 1px solid rgba(27,253,226,.18); background: var(--mt-color-navy-deep); }
@media (min-width: 1025px) {
  .mt-phero__grid { grid-template-columns: minmax(0, 1fr) 27rem; gap: 3.5rem; }
  .mt-post .mt-phero .mt-container { max-width: var(--mt-container); }
}
@media (max-width: 1024px) { .mt-phero__img { max-width: 32rem; } }
.mt-post .mt-phero { padding-bottom: 3rem; }

/* --- v1.7.5: migas de pan en una sola línea; el último elemento (título largo) se recorta con puntos suspensivos --- */
.mt-pcrumbs ol { flex-wrap: nowrap; }
.mt-pcrumbs li { flex: none; white-space: nowrap; }
.mt-pcrumbs li:last-child { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Antispam: campo trampa fuera de pantalla (no display:none, para que los robots lo vean) */
.mt-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* 404 */
.mt-404-links { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }