/* ============================================================
   MIND & LEAN — CSS COMPLETO (reemplaza TODO tu CSS adicional)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* Variables de marca */
:root{
  --ml-navy:#0A3D82; --ml-navy-deep:#072A5C; --ml-ink:#08183A;
  --ml-teal:#007280; --ml-teal-bright:#16B6C4;
  --ml-paper:#F2F6FB; --ml-grey:#647689; --ml-line:#D8E2EE;
}

/* ---------- TIPOGRAFÍA BASE ---------- */
.ml-hero, .ml-band, .ml-sec, .ml-cta-sec{
  font-family:'Poppins',system-ui,sans-serif;
}
.ml-hero h1, .ml-hero h2, .ml-band h2, .ml-sec h2, .ml-sec h3, .ml-cta-sec h2{
  font-weight:600; letter-spacing:-.02em; line-height:1.14;
}

/* ---------- ETIQUETA (eyebrow) ---------- */
.ml-eyebrow{
  font-family:'JetBrains Mono',monospace; font-size:.72rem !important;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ml-teal) !important;
  font-weight:500; margin-bottom:.4rem !important;
}
.ml-band .ml-eyebrow, .ml-cta-sec .ml-eyebrow{ color:var(--ml-teal-bright) !important; }
.ml-eyebrow::before{
  content:""; display:inline-block; width:26px; height:2px;
  background:var(--ml-teal); vertical-align:middle; margin-right:10px;
}
.ml-band .ml-eyebrow::before,
.ml-team .ml-eyebrow::before,
.ml-cta-sec .ml-eyebrow::before{ background:var(--ml-teal-bright); }

.ml-mono{ font-family:'JetBrains Mono',monospace; }

/* ---------- HERO ---------- */
.ml-hero{
  background:#060A14 !important; color:#fff !important;
  padding:80px 28px !important;
}
.ml-hero h1{ font-size:clamp(2rem,4.5vw,3.3rem) !important; color:#fff !important; margin:.3rem 0 0 !important;}
.ml-hero .ml-accent{ color:var(--ml-teal-bright); }
.ml-hero p{ color:#c3d3e8 !important; font-weight:300; font-size:1.1rem; }
.ml-hero .wp-block-button__link{
  background:var(--ml-teal) !important; color:#fff !important;
  border-radius:2px !important; font-weight:500; padding:14px 26px !important;
}
.ml-hero figure{ margin:0; }
.ml-hero img{ border-radius:8px; border:1px solid rgba(255,255,255,.12); }
.ml-hero .wp-block-columns{ align-items:center; }

/* ---------- BANDA OSCURA (problema) ---------- */
.ml-band{ background:var(--ml-navy) !important; color:#fff !important; padding:78px 28px !important; }
.ml-band h2{ color:#fff !important; }
.ml-band p{ color:#bccfe6 !important; font-weight:300; }
.ml-band .wp-block-column{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  padding:24px 22px; border-radius:6px;
}
.ml-band .wp-block-column strong{ color:var(--ml-teal-bright); font-family:'JetBrains Mono',monospace; font-size:1.25rem; }

/* ---------- SECCIONES CLARAS ---------- */
.ml-sec{ padding:78px 28px !important; }
.ml-sec.ml-alt{ background:#fff !important; border-top:1px solid var(--ml-line); border-bottom:1px solid var(--ml-line); }
.ml-sec h2{ font-size:clamp(1.6rem,3vw,2.3rem) !important; color:var(--ml-ink) !important; }
.ml-sec > .wp-block-group__inner-container > p,
.ml-sec p.ml-lead{ color:var(--ml-grey) !important; font-weight:300; font-size:1.05rem; }

/* ---------- TARJETAS (filosofía / metodología) ---------- */
.ml-cards .wp-block-column{
  background:#fff; border:1px solid var(--ml-line); border-radius:8px;
  padding:26px; box-shadow:0 1px 0 rgba(10,61,130,.02);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ml-cards .wp-block-column:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 36px -22px rgba(10,61,130,.45);
  border-color:var(--ml-teal);
}
.ml-cards .wp-block-column h3{ color:var(--ml-navy) !important; font-size:1.12rem !important; margin:.2rem 0 .5rem !important; }
.ml-cards .wp-block-column p{ color:var(--ml-grey) !important; font-weight:300; font-size:.95rem; }
.ml-cards .wp-block-column .ml-tag{
  font-family:'JetBrains Mono',monospace; font-size:.7rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ml-teal); font-weight:500;
}

/* ---------- FASES ---------- */
.ml-phases .wp-block-column{ border-top:3px solid var(--ml-teal); padding-top:18px; }
.ml-phases .wp-block-column .ml-tag{ font-family:'JetBrains Mono',monospace; font-size:.72rem; color:var(--ml-teal); letter-spacing:.1em; }
.ml-phases .wp-block-column h3{ color:var(--ml-navy) !important; font-size:1.05rem !important; margin:.4rem 0 .4rem !important; }
.ml-phases .wp-block-column p{ color:var(--ml-grey) !important; font-weight:300; font-size:.9rem; }

/* ---------- CASO DESTACADO ---------- */
.ml-case{
  background:linear-gradient(160deg,#0A3D82,#072A5C) !important; color:#fff !important;
  border-radius:10px; padding:38px !important;
}
.ml-case h3{ color:#fff !important; font-size:1.6rem !important; margin:.3rem 0 .2rem !important; }
.ml-case .ml-tag{ color:var(--ml-teal-bright); font-family:'JetBrains Mono',monospace; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; }
.ml-case p{ color:#cdddf0 !important; font-weight:300; }
.ml-case .ml-metrics{ display:flex; gap:32px; flex-wrap:wrap; margin:18px 0; }
.ml-case .ml-metrics .v{ font-family:'JetBrains Mono',monospace; font-size:1.8rem; font-weight:600; color:#fff; display:block; }
.ml-case .ml-metrics .k{ font-size:.78rem; color:#9fb3cc; }
.ml-mini{ background:#fff; border:1px solid var(--ml-line); border-radius:8px; padding:24px; }
.ml-mini h3{ color:var(--ml-navy) !important; font-size:1.12rem !important; }
.ml-mini .ml-tag{ color:var(--ml-teal); font-family:'JetBrains Mono',monospace; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; }
.ml-mini p{ color:var(--ml-grey) !important; font-weight:300; font-size:.9rem; }

/* ---------- GALERÍA EN TERRENO ---------- */
.ml-gallery figure{ margin:0; border-radius:8px; overflow:hidden; border:1px solid var(--ml-line); }
.ml-gallery img{ width:100%; height:230px; object-fit:cover; display:block; transition:transform .5s ease; }
.ml-gallery figure:hover img{ transform:scale(1.06); }
.ml-gallery .wp-block-column > p{ color:var(--ml-navy) !important; font-weight:500; font-size:.95rem; margin-top:10px; }

/* ---------- RESULTADOS ---------- */
.ml-results .wp-block-column{ border-bottom:1px solid var(--ml-line); padding:14px 0; }
.ml-results strong{ color:var(--ml-navy); }
.ml-results p{ color:var(--ml-grey) !important; font-weight:300; }

/* ---------- EQUIPO ---------- */
.ml-team{ background:var(--ml-navy) !important; color:#fff !important; padding:78px 28px !important; }
.ml-team h2{ color:#fff !important; }
.ml-team .ml-eyebrow{ color:var(--ml-teal-bright) !important; }
.ml-team .wp-block-column{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  border-radius:8px; padding:28px !important;
}
.ml-team .wp-block-column figure{ margin:0 0 14px; }
.ml-team .wp-block-column img{ width:84px; height:84px; border-radius:50%; object-fit:cover; transition:transform .3s ease; }
.ml-team .wp-block-column:hover img{ transform:scale(1.05); }
.ml-team h3{ color:#fff !important; font-size:1.18rem !important; margin:.2rem 0 .2rem !important; }
.ml-team .ml-role{ color:var(--ml-teal-bright) !important; font-family:'JetBrains Mono',monospace; font-size:.74rem; letter-spacing:.05em; text-transform:uppercase; }
.ml-team p{ color:#bccfe6 !important; font-weight:300; font-size:.95rem; }

/* ---------- CTA ---------- */
.ml-cta-sec{ padding:70px 28px !important; }
.ml-cta-sec .wp-block-group{ background:var(--ml-navy-deep) !important; border-radius:10px; padding:48px !important; }
.ml-cta-sec h2{ color:#fff !important; }
.ml-cta-sec p{ color:#bccfe6 !important; font-weight:300; }
.ml-cta-sec .wp-block-button__link{
  background:var(--ml-teal) !important; color:#fff !important;
  border-radius:2px !important; padding:14px 26px !important;
  transition:transform .2s ease, background .2s ease;
}
.ml-hero .wp-block-button__link:hover,
.ml-cta-sec .wp-block-button__link:hover{ transform:translateY(-2px); background:#005f6b !important; }

/* ---------- MÁRGENES LATERALES (contenido centrado) ---------- */
.ml-hero > *,
.ml-band > *,
.ml-sec > *,
.ml-team > *,
.ml-cta-sec > *{
  max-width:1180px; margin-left:auto !important; margin-right:auto !important;
}

/* ============================================================
   ENCABEZADO (normal, no fijo)
   ============================================================ */
.ml-header{
  background:var(--ml-navy-deep) !important;
  padding:14px 28px !important;
}
.ml-header-row{ max-width:1180px; margin:0 auto !important; align-items:center; gap:18px; }
.ml-brand{ font-family:'Poppins',sans-serif; font-weight:600; font-size:1.2rem; color:#fff !important; margin:0 !important; }
.ml-brand .ml-amp{ color:var(--ml-teal-bright); }
.ml-brand-sub{ font-family:'JetBrains Mono',monospace; font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:#9fb3cc; margin-left:8px; }
.ml-nav-wrap{ align-items:center; gap:26px; }
.ml-nav{ margin:0 !important; display:flex; gap:24px; flex-wrap:wrap; }
.ml-nav a{ color:#d6e1f0 !important; font-size:.9rem; font-weight:400; text-decoration:none; font-family:'Poppins',sans-serif; transition:color .2s ease; }
.ml-nav a:hover{ color:#fff !important; }
.ml-header .wp-block-button__link{
  background:var(--ml-teal) !important; color:#fff !important;
  border-radius:2px !important; padding:10px 20px !important; font-size:.85rem;
  transition:transform .2s ease, background .2s ease;
}
.ml-header .wp-block-button__link:hover{ background:#005f6b !important; transform:translateY(-2px); }

/* ============================================================
   PIE DE PÁGINA
   ============================================================ */
.ml-footer{ background:var(--ml-ink) !important; color:#a9bdd6 !important; padding:54px 28px 28px !important; }
.ml-footer-inner{ max-width:1180px; margin:0 auto !important; }
.ml-footer .ml-brand{ color:#fff !important; font-size:1.3rem; margin-bottom:12px !important; }
.ml-footer .ml-foot-h{ font-family:'JetBrains Mono',monospace; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:#6b85a8 !important; margin-bottom:10px !important; }
.ml-footer p, .ml-footer a{ color:#a9bdd6 !important; font-weight:300; font-size:.9rem; }
.ml-footer a{ text-decoration:none; transition:color .2s ease; }
.ml-footer a:hover{ color:#fff !important; }
.ml-footer .ml-foot-bottom{ border-top:1px solid rgba(255,255,255,.08); margin-top:32px !important; padding-top:18px !important; font-size:.8rem !important; color:#6b85a8 !important; }

/* ============================================================
   ANIMACIONES (solo CSS)
   ============================================================ */
@keyframes mlFadeUp{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: no-preference){
  .ml-hero{ animation:mlFadeUp .9s ease both; }
}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .ml-cards .wp-block-column,
    .ml-phases .wp-block-column,
    .ml-gallery .wp-block-column,
    .ml-results .wp-block-column,
    .ml-team .wp-block-column,
    .ml-case,
    .ml-mini{
      animation:mlFadeUp .8s ease both;
      animation-timeline:view();
      animation-range:entry 0% entry 45%;
    }
  }
}

/* ============================================================
   RESPONSIVE (móvil)
   ============================================================ */
@media(max-width:781px){
  .ml-hero, .ml-band, .ml-sec, .ml-team, .ml-cta-sec,
  .ml-header, .ml-footer{ padding-left:20px !important; padding-right:20px !important; }
  .ml-header-row{ justify-content:center; text-align:center; }
}
/* ====== CIFRAS DEL CASO (métricas +85% / POD / OBEYA) ====== */
/* Pega esto AL FINAL de tu CSS adicional */

.ml-metrics{ gap:18px !important; margin:14px 0 6px !important; }
.ml-metrics .wp-block-column{
  background:transparent !important; border:0 !important; padding:0 !important;
  flex-basis:auto !important;
}
.ml-mval{
  font-family:'JetBrains Mono',monospace !important;
  font-size:1.7rem !important; font-weight:600 !important;
  color:#fff !important; margin:0 !important; line-height:1.1 !important;
}
.ml-mkey{
  font-size:.76rem !important; color:#9fb3cc !important;
  font-weight:300 !important; margin:.25rem 0 0 !important;
}
/* Intento final: encabezado fijo */
header.wp-block-template-part{
  position: sticky !important;
  top: 0;
  z-index: 9999;
}
/* ====== Iluminar TODAS las tarjetas al pasar el mouse ====== */
.ml-band .wp-block-column,
.ml-mini,
.ml-case,
.ml-team .wp-block-column{
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

/* Tarjetas claras (Casos chicas) */
.ml-mini:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 36px -22px rgba(10,61,130,.45);
  border-color: var(--ml-teal);
}

/* Tarjeta destacada (San Eugenio) */
.ml-case:hover{
  transform: translateY(-4px);
  box-shadow: 0 22px 44px -20px rgba(0,0,0,.5);
}

/* Tarjetas oscuras (Problema y Equipo) */
.ml-band .wp-block-column:hover,
.ml-team .wp-block-column:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 36px -20px rgba(0,0,0,.4);
  border-color: var(--ml-teal-bright);
}
/* ====== Iluminar las fases (Cómo trabajamos) ====== */
.ml-phases .wp-block-column{
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  border-radius: 8px;
  padding: 18px 16px !important;
}
.ml-phases .wp-block-column:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 36px -22px rgba(10,61,130,.45);
  background: #fff;
  border-top-color: var(--ml-teal);
}
/* Foto del caso al lado, subida hasta el título */
.ml-case img{
  width: 200px !important;
  height: auto;
  float: right;
  margin: -56px 0 16px 22px;
  border-radius: 6px;
}
/* ====== ELEVAR + ILUMINAR — todas las tarjetas ====== */

/* Transición suave para todas */
.ml-cards .wp-block-column,
.ml-phases .wp-block-column,
.ml-team .wp-block-column,
.ml-band .wp-block-column,
.ml-case,
.ml-mini{
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

/* --- Tarjetas claras (fondo blanco): Metodología, Casos, Fases --- */
.ml-cards .wp-block-column:hover,
.ml-phases .wp-block-column:hover,
.ml-mini:hover,
.ml-case:hover{
  transform: translateY(-6px);
  border-color: #007280;
  box-shadow:
    0 18px 40px -18px rgba(10,61,130,.45),   /* elevación */
    0 0 22px rgba(0,114,128,.40);            /* halo teal = iluminado */
}

/* --- Tarjetas oscuras (fondo navy): Problema, Equipo --- */
.ml-band .wp-block-column:hover,
.ml-team .wp-block-column:hover{
  transform: translateY(-6px);
  border-color: #2dd4bf;
  box-shadow:
    0 18px 40px -18px rgba(0,0,0,.45),
    0 0 26px rgba(45,212,191,.45);           /* halo teal brillante */
}
/* ====== Gráfico del hero — movimiento dinámico (solo CSS) ====== */
@keyframes mlFloat{
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-14px); }
  100% { transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference){
  .ml-hero img{
    animation: mlFloat 5s ease-in-out infinite;
    will-change: transform;
  }
}

/* ====== Gráfico del hero — acercar al pasar el mouse ====== */
.ml-hero img{
  transition: transform .35s ease;
}
.ml-hero img:hover{
  transform: scale(1.06);
}
/* ====== Gráfico del hero — acercar al pasar el mouse (v2) ====== */

/* Cancela cualquier animación/flotado previo en la imagen del hero */
.ml-hero img,
.ml-hero figure img,
.ml-hero .wp-block-image img{
  animation: none !important;
  transition: transform .35s ease !important;
  transform-origin: center center;
}

/* Acercar al pasar el mouse */
.ml-hero img:hover,
.ml-hero figure img:hover,
.ml-hero .wp-block-image img:hover{
  transform: scale(1.06) !important;
}
/* ====== Fix móvil: foto del caso de éxito no se superpone ====== */
@media (max-width: 781px){
  .ml-case img,
  .ml-case figure,
  .ml-case .wp-block-image{
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 16px 0 !important;
    display: block !important;
  }
  /* Por si el texto quedaba al lado: que use todo el ancho */
  .ml-case{ overflow: hidden; }
}
/* Solo tarjetas pequeñas dentro de columnas */
.wp-block-columns .wp-block-column .wp-block-group.has-background:not(:has(.wp-block-group.has-background)) {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.wp-block-columns .wp-block-column .wp-block-group.has-background:not(:has(.wp-block-group.has-background)):hover {
  transform: scale(1.04);
  box-shadow: 0 16px 32px rgba(0, 114, 128, 0.25);
}
/* Logo del encabezado: reducir y pegar a la izquierda */
.ml-logo-header img {
    max-width: 160px;      /* sube/baja este número para el tamaño */
    height: auto;
    display: block;
    margin: 0 auto 0 0;    /* lo empuja al extremo izquierdo */
}

/* Por si el bloque trae alineación centrada que lo separa del borde */
.ml-logo-header {
    text-align: left;
    margin-left: 0;
}
/* Logo del encabezado: reducir y pegar a la izquierda */
.ml-logo-header img {
    max-width: 160px !important;
    width: 160px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto 0 0 !important;
}

.ml-logo-header,
.ml-logo-header figure {
    text-align: left !important;
    margin-left: 0 !important;
}