/* ============================================================
   MK EMPRESARIAL — V7 · estética del mockup
   Carga después de v5/v6 y los redefine.

   Valores medidos sobre el PNG de referencia:
     acento dorado  #F8D080   (sat 90%, luz 74%, hue 40)
     azul de fondo  #06121E → #0C1828
     fondo claro    #F6F8FB
   ============================================================ */

:root{
  /* Tipografía: el mockup usa sans pesada en titulares, no serif */
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --serif:"Inter",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --hand:"Caveat","Segoe Script",cursive;

  /* Dorado del mockup */
  --gold-line:#F0C063;
  --gold-2:#F8D080;
  --gold:#8A6420;

  --ink:#0A1726;
  --ink-2:#0F2236;
  --bg-soft:#F6F8FB;

  /* Acentos de icono, medidos del mockup */
  --ic-azul:#1F58E0;
  --ic-magenta:#C2189C;
  --ic-oro:#F0A81E;
  --ic-verde:#18A558;
  --ic-rojo:#E0332B;
}

/* ============================================================
   Tipografía — sans pesada
   ============================================================ */
h1,h2,h3,h4{
  font-family:var(--sans);
  font-weight:800;
  letter-spacing:-.035em;
  font-variation-settings:normal;
}
h1{font-size:clamp(2.5rem,5.6vw,4.2rem);line-height:1.02;letter-spacing:-.042em}
h2{font-size:clamp(1.9rem,4vw,3rem);line-height:1.06;letter-spacing:-.038em}
h3{font-size:clamp(1.05rem,1.9vw,1.2rem);font-weight:700;letter-spacing:-.022em}

/* El fragmento dorado del titular */
.hero h1 em,.oro{font-style:normal;color:var(--gold-2)}

/* Anotación manuscrita */
.mano{
  font-family:var(--hand);
  font-weight:600;
  font-size:clamp(1.5rem,3vw,2.1rem);
  line-height:1.1;
  letter-spacing:0;
  color:#fff;
  transform:rotate(-7deg);
  display:inline-block;
}
.mano--oscura{color:var(--ink)}
/* Subrayado curvo dibujado a mano */
.mano::after{
  content:"";display:block;height:14px;margin-top:2px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' fill='none'%3E%3Cpath d='M4 11c38-7 96-9 140-4 18 2 34 5 52 9' stroke='%23F0C063' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") left center/contain no-repeat;
}

/* ============================================================
   Botones — cápsula dorada
   ============================================================ */
.btn{
  font-weight:700;
  border-radius:var(--r-pill);
  letter-spacing:-.01em;
}
.btn--light,
.hero .btn--light,
.sec--dark .btn--light{
  --btn-bg:var(--gold-2);
  --btn-fg:var(--ink);
  box-shadow:0 2px 4px rgba(10,23,38,.14),0 10px 26px rgba(240,192,99,.28);
}
.btn--light:hover,
.hero .btn--light:hover,
.sec--dark .btn--light:hover{--btn-bg:#F0C063}
.hdr .btn{background:var(--gold-2);color:var(--ink)}
.hdr .btn:hover{background:#F0C063}

/* ============================================================
   HERO — oscuro, foto fundida por la derecha
   ============================================================ */
.hero{
  background:linear-gradient(104deg,#06121E 0%,#0A1726 42%,#112A40 100%);
  position:relative;
  overflow:hidden;
  /* El hero del mockup ocupa casi toda la ventana: se le da altura
     mínima en vez de solo padding, para que no dependa del largo
     del texto. */
  min-height:min(88vh,860px);
  display:flex;
  align-items:center;
  padding:clamp(128px,13vw,190px) 0 clamp(88px,10vw,140px);
}
.hero::before{background-image:none}
.hero > .wrap{width:100%}

/* La foto ocupa la mitad derecha y se funde hacia el texto */
.hero__foto{
  position:absolute;inset:0 0 0 auto;
  width:min(58%,860px);
  z-index:0;
  pointer-events:none;
}
.hero__foto img{width:100%;height:100%;object-fit:cover;object-position:42% 30%}
.hero__foto::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(94deg,#06121E 2%,rgba(8,18,30,.82) 20%,rgba(8,18,30,.30) 48%,rgba(8,18,30,.06) 78%,transparent 100%);
}
@media(max-width:900px){
  .hero__foto{width:100%;opacity:.3}
  .hero__foto::after{background:linear-gradient(180deg,rgba(6,18,30,.72),rgba(6,18,30,.94))}
}

.hero__in{position:relative;z-index:2}
.hero .wrap{position:relative;z-index:2}
.hero h1{color:#fff;max-width:13ch}
.hero__sub{color:#C5D3E2;max-width:44ch;font-size:clamp(1.02rem,1.9vw,1.16rem)}

/* Antetítulo en versalitas */
.hero__kicker{
  display:block;
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#93A9C0;
  margin-bottom:var(--s-5);
}

/* Chips de confianza con check en círculo */
.hero__micro span{gap:9px}
.hero__micro span::before{
  content:"";width:17px;height:17px;flex:0 0 17px;
  border:1.5px solid rgba(255,255,255,.5);border-radius:50%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3'%3E%3Cpath d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E") center/10px no-repeat;
}
.hero__micro .dot{display:none}

/* Anotación manuscrita sobre la foto */
.hero__nota{
  position:absolute;z-index:3;
  right:clamp(16px,3vw,52px);top:clamp(120px,15vw,186px);
  max-width:210px;text-align:right;
}
@media(max-width:900px){.hero__nota{display:none}}

/* Tarjeta flotante con mini-gráfico */
.hero__card{
  position:absolute;z-index:3;right:clamp(12px,4vw,70px);bottom:clamp(16px,4vw,56px);
  display:flex;align-items:flex-end;gap:14px;
  padding:16px 20px;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(8px);
  border-radius:16px;
  box-shadow:0 4px 12px rgba(10,23,38,.16),0 20px 44px rgba(10,23,38,.22);
  max-width:260px;
}
.hero__card p{font-size:.84rem;line-height:1.35;color:var(--ink);font-weight:600;margin:0}
.hero__card b{display:block;font-weight:800}
.hero__card svg{flex:0 0 46px}
@media(max-width:900px){.hero__card{display:none}}

/* ============================================================
   FRANJA DE PÚBLICOS
   ============================================================ */
.publicos{background:#fff;border-bottom:1px solid var(--line);padding:clamp(28px,3.4vw,44px) 0}
.publicos__t{
  font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--slate-2);margin-bottom:var(--s-5);
}
.publicos__lista{
  display:grid;gap:var(--s-5) var(--s-4);
  grid-template-columns:repeat(2,1fr);
  align-items:center;
}
@media(min-width:760px){.publicos__lista{grid-template-columns:repeat(5,1fr)}}
.publicos__i{display:flex;align-items:center;gap:12px;font-size:.88rem;line-height:1.3;color:var(--ink);font-weight:600}
.publicos__i svg{flex:0 0 26px;color:var(--ink)}
.publicos__nota{
  font-family:var(--hand);font-size:1.3rem;line-height:1.15;color:var(--ink);
  transform:rotate(-6deg);text-align:center;
}

/* ============================================================
   CARRUSEL — ¿Qué quieres mejorar hoy?
   ============================================================ */
.mejorar{background:#fff;padding:clamp(48px,6vw,84px) 0}
.mejorar__grid{display:grid;gap:clamp(24px,4vw,56px);align-items:start}
@media(min-width:960px){.mejorar__grid{grid-template-columns:.8fr 2.2fr}}
.mejorar h2{max-width:11ch}
.mejorar__sub{color:var(--slate);font-size:.95rem;margin-top:var(--s-4);max-width:32ch}

.mejorar__pista{
  display:grid;grid-auto-flow:column;grid-auto-columns:clamp(196px,21vw,248px);
  gap:var(--s-3);overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:var(--s-3);scrollbar-width:thin;
}
.mejorar__c{scroll-snap-align:start;text-decoration:none;color:inherit;display:block}
.mejorar__c figure{margin:0;border-radius:16px;overflow:hidden;aspect-ratio:4/5;background:var(--bg-soft)}
.mejorar__c img{width:100%;height:100%;object-fit:cover}
.mejorar__c h3{margin-top:var(--s-4);font-size:.92rem;font-weight:700}
.mejorar__c svg{margin-top:var(--s-3);width:30px;height:30px;color:var(--ink);
  border:1.5px solid var(--line);border-radius:50%;padding:7px;transition:all .2s var(--ease)}
.mejorar__c:hover svg{background:var(--ink);color:#fff;border-color:var(--ink)}

.mejorar__nav{display:flex;gap:var(--s-2);margin-top:var(--s-5)}
.mejorar__nav button{
  width:38px;height:38px;border-radius:50%;
  border:1.5px solid var(--line);background:#fff;cursor:pointer;
  display:grid;place-items:center;color:var(--ink);
  transition:all .2s var(--ease);
}
.mejorar__nav button:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ============================================================
   ANTES / DESPUÉS — dos paneles en cuña divergente
   La separación se abre hacia abajo: el panel izquierdo cae y el
   derecho sube. El transform-origin va en el extremo opuesto.
   ============================================================ */
.contraste{position:relative;background:#fff;padding:0;overflow:hidden}
.contraste__grid{display:grid;gap:0}
@media(min-width:900px){.contraste__grid{grid-template-columns:1fr 1fr}}

.contraste__p{position:relative;min-height:clamp(400px,46vw,580px);overflow:hidden;display:flex;align-items:center}
.contraste__p img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.contraste__in{position:relative;z-index:2;padding:clamp(28px,4vw,52px)}

/* Panel izquierdo: oscuro, cae hacia la derecha */
.contraste__p--mal{background:var(--ink)}
.contraste__p--mal img{opacity:.5;object-position:70% 50%}
.contraste__p--mal::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(97deg,rgba(10,23,38,.94) 32%,rgba(10,23,38,.45) 72%,transparent);
}
/* Panel derecho: claro, sube */
.contraste__p--bien{background:#F5F1E8}
.contraste__p--bien img{opacity:.92;object-position:36% 46%}
.contraste__p--bien::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(266deg,rgba(248,245,238,.95) 30%,rgba(248,245,238,.35) 70%,transparent);
}
.contraste__p--bien .contraste__in{margin-left:auto;text-align:right;padding-right:clamp(34px,5vw,74px)}

@media(min-width:900px){
  /* La rotación descubre las esquinas: hace falta escalar lo
     suficiente para que los paneles sigan cubriendo su mitad, y la
     sección recorta lo que sobra. */
  .contraste__p--mal{transform:rotate(-1.7deg) scale(1.09);transform-origin:left center}
  .contraste__p--bien{transform:rotate(-1.7deg) scale(1.09);transform-origin:right center}
  /* El contenido se contrarrota para que el texto quede recto */
  .contraste__p--mal .contraste__in{transform:rotate(1.7deg)}
  .contraste__p--bien .contraste__in{transform:rotate(1.7deg)}
}

.contraste__t{font-family:var(--hand);font-size:clamp(1.7rem,3.4vw,2.5rem);line-height:1.05;
  font-weight:600;letter-spacing:0;margin-bottom:var(--s-5)}
.contraste__p--mal .contraste__t{color:#fff}
.contraste__p--bien .contraste__t{color:var(--ink)}

.contraste ul{display:grid;gap:var(--s-3);margin:0;padding:0;list-style:none}
.contraste li{display:flex;align-items:center;gap:11px;font-size:clamp(.92rem,1.6vw,1.02rem);font-weight:600}
.contraste__p--mal li{color:#EAF0F7}
.contraste__p--bien li{color:var(--ink);flex-direction:row-reverse}
.contraste li::before{
  content:"";flex:0 0 21px;width:21px;height:21px;border-radius:50%;
  background-position:center;background-repeat:no-repeat;background-size:11px;
}
.contraste__p--mal li::before{
  background-color:var(--ic-rojo);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E");
}
.contraste__p--bien li::before{
  background-color:var(--ic-verde);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E");
}

/* La flecha dorada que cruza de un panel al otro */
.contraste__flecha{
  position:absolute;z-index:5;left:50%;top:56%;
  width:clamp(90px,13vw,190px);transform:translate(-50%,-50%);
  pointer-events:none;
}
@media(max-width:899px){.contraste__flecha{display:none}}

/* ============================================================
   SERVICIOS — entrada en diagonal, iconos de color
   ============================================================ */
.soluciones{
  background:#fff;
  position:relative;
  padding-top:clamp(56px,7vw,110px);
  margin-top:-42px;
  clip-path:polygon(0 42px,100% 0,100% 100%,0 100%);
}
.soluciones__head{display:grid;gap:var(--s-4);margin-bottom:clamp(32px,4vw,56px)}
@media(min-width:900px){
  .soluciones__head{grid-template-columns:1fr auto;align-items:end}
}
.soluciones h2{max-width:16ch;color:var(--ink)}
.soluciones__k{
  font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--slate-2);margin-bottom:var(--s-4);display:block;
}
.soluciones__link{
  color:var(--ic-azul);font-weight:600;font-size:.94rem;text-decoration:none;
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
}
.soluciones__link:hover{text-decoration:underline}

.grid-5{gap:var(--s-4)}
.dcard{
  border-radius:18px;
  border:1px solid #EDF0F4;
  box-shadow:0 1px 2px rgba(10,23,38,.04),0 8px 24px rgba(10,23,38,.05);
  padding:clamp(20px,2.4vw,28px);
  text-align:center;
}
@media(min-width:1000px){.dcard{grid-template-columns:1fr;justify-items:center}}
.dcard:hover{border-color:#DCE2EA;transform:translateY(-3px);
  box-shadow:0 2px 6px rgba(10,23,38,.06),0 18px 40px rgba(10,23,38,.10)}
.dcard::after{display:none}
.dcard__ico{width:clamp(46px,4.4vw,58px);height:clamp(46px,4.4vw,58px);margin-bottom:var(--s-5)}
.dcard h3{
  font-family:var(--sans);font-size:1.02rem;font-weight:800;
  letter-spacing:-.02em;text-transform:none;color:var(--ink);
}
.dcard p{margin-top:var(--s-2);font-size:.86rem;line-height:1.45;color:var(--slate)}
.dcard__link{
  margin-top:var(--s-4);width:34px;height:34px;padding:0;
  border:1.5px solid var(--line);border-radius:50%;
  display:grid;place-items:center;color:var(--ic-azul);font-size:0;
  transition:all .2s var(--ease);
}
.dcard__link::before{content:"→";font-size:15px;line-height:1}
.dcard:hover .dcard__link{background:var(--ic-azul);color:#fff;border-color:var(--ic-azul)}

/* ============================================================
   TESTIMONIOS EN VÍDEO
   ============================================================ */
.historias{background:#fff;padding:clamp(48px,6vw,90px) 0}
.historias__grid{display:grid;gap:clamp(24px,3.4vw,48px)}
@media(min-width:960px){.historias__grid{grid-template-columns:.75fr 2.25fr}}
.historias h2{max-width:11ch}
.historias__link{
  display:inline-flex;align-items:center;gap:8px;margin-top:var(--s-5);
  color:var(--ic-azul);font-weight:600;font-size:.94rem;text-decoration:none;
}
.historias__link:hover{text-decoration:underline}
.historias__pista{display:grid;gap:var(--s-4)}
@media(min-width:640px){.historias__pista{grid-template-columns:repeat(3,1fr)}}
.historia figure{
  position:relative;margin:0;border-radius:14px;overflow:hidden;
  aspect-ratio:4/3;background:var(--ink);
}
.historia img{width:100%;height:100%;object-fit:cover;opacity:.88}
.historia__play{
  position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(10,23,38,.18);border:0;cursor:pointer;
}
.historia__play span{
  width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.94);
  display:grid;place-items:center;
  box-shadow:0 4px 14px rgba(10,23,38,.28);
  transition:transform .2s var(--ease-out);
}
.historia__play:hover span{transform:scale(1.08)}
.historia__play svg{width:15px;height:15px;color:var(--ink);margin-left:2px}
.historia p{margin-top:var(--s-4);font-size:.92rem;line-height:1.45;color:var(--ink);font-weight:600}
.historia cite{display:block;margin-top:var(--s-2);font-size:.8rem;color:var(--slate-2);font-style:normal}

/* Estado vacío: sin testimonios reales todavía */
.historias--vacia .historia figure{background:var(--bg-soft);border:1px dashed #D6DDE6}
.historias--vacia .historia figure::after{
  content:"Pendiente de grabación";
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:.8rem;color:var(--slate-2);font-weight:600;
}

/* ============================================================
   CIERRE — onda + fondo oscuro
   ============================================================ */
.sec--dark.final-wrap{position:relative;padding-top:clamp(68px,8vw,120px)}
.onda{display:block;width:100%;height:auto;margin-bottom:-1px;color:#fff}

/* ============================================================
   FOOTER — claro
   ============================================================ */
.ftr{background:#fff;color:var(--ink);border-top:1px solid var(--line);padding-top:clamp(40px,5vw,64px)}
.ftr a{color:var(--slate)}
.ftr a:hover{color:var(--ink)}
.ftr__nombre{font-family:var(--sans);font-weight:800;color:var(--ink)}
.ftr__claim{font-family:var(--sans);color:var(--slate);font-weight:500}
.ftr__tit{color:var(--ink);font-weight:700}
.ftr__legal{border-top:1px solid var(--line);color:var(--slate-2)}
.ftr__legal a{color:var(--slate-2)}

/* ============================================================
   Ajustes de la cápsula del nav sobre hero oscuro
   ============================================================ */
@media(min-width:1000px){
  .hdr__in{background:rgba(255,255,255,.96)}
  .hdr .nav__lista a[aria-current]{color:var(--ink);position:relative}
  .hdr .nav__lista a[aria-current]::after{
    content:"";position:absolute;left:12px;right:12px;bottom:2px;height:2.5px;
    background:var(--gold-2);border-radius:2px;
  }
}

/* ============================================================
   Responsive
   ============================================================ */
@media(max-width:899px){
  .contraste__p--bien .contraste__in{margin-left:0;text-align:left}
  .contraste__p--bien li{flex-direction:row}
}

/* ============================================================
   Correcciones tras la inspección del render
   ============================================================ */

/* Las tarjetas de servicio deben alinear título, texto y flecha
   aunque el copy tenga distinto número de líneas. */
.grid-5{align-items:stretch}
.dcard{display:flex;flex-direction:column;align-items:center}
.dcard > div{display:flex;flex-direction:column;align-items:center;flex:1;width:100%}
.dcard p{flex:1}
@media(min-width:1000px){
  .dcard{grid-template-columns:none}
}

/* El sistema gráfico del logo (v5/v6) no aplica al home nuevo: dejaba
   cuñas y bloques sueltos sobre las secciones rediseñadas. Se anula
   en todas ellas, no solo en las que se detectaron a simple vista. */
.mk-edge::before,
.mk-climb::before{content:none}
.hero.mk-diag::before{content:""}   /* la K del hero sí se conserva */

/* La pista del carrusel se recorre con las flechas: la barra nativa
   sobra y ensuciaba el bloque. */
.mejorar__pista{scrollbar-width:none;-ms-overflow-style:none;padding-bottom:0}
.mejorar__pista::-webkit-scrollbar{display:none}

/* Tarjetas anchas: con 5 estrechas apenas había recorrido y las
   flechas parecían no responder. */
.mejorar__pista{gap:var(--s-4)}

/* `img,svg{height:auto}` de la hoja base aplastaba estos iconos a la
   altura del viewBox. Hay que fijar la caja en el propio elemento. */
svg.dcard__ico,
.dcard .dcard__ico{
  width:clamp(46px,4.4vw,56px);
  height:clamp(46px,4.4vw,56px);
  flex:0 0 auto;
  margin-bottom:var(--s-5);
}