/* ==========================================================================
   Makeover Dental — Anatomias de Elena (12 paginas)
   1-ago-2026 · UI/UX CaliDevs
   TODO va scoped bajo .mk-e  -> imposible que toque las otras 43 paginas.
   NO vive en Additional CSS (ahi trabaja Karla). Se sirve por mu-plugin.
   ========================================================================== */

:root{
  --mk-accent:#74b9ff;
  --mk-ink:#191919;
  --mk-char:#292929;
  --mk-body:#5A5A5A;
  --mk-soft:#F7F9FB;
  --mk-navy:#121E41;
  --mk-link:#006FE0;
  --mk-line:#DCE3EC;      /* 1.53:1 — SOLO decorativo, nunca borde funcional */
  --mk-measure:600px;
}

/* --------------------------------------------------------------- base --- */
.mk-e{ overflow-x:clip; }
.mk-e .elementor-heading-title{ letter-spacing:-.01em; }
.mk-e p{ color:var(--mk-body); line-height:1.8; }
.mk-e a{ color:var(--mk-link); }
.mk-e .mk-lead .elementor-widget-container p{
  font-size:21px; line-height:1.6; color:var(--mk-char); max-width:var(--mk-measure);
}
.mk-e .mk-eyebrow .elementor-heading-title{
  font-size:13px; letter-spacing:.18em; text-transform:uppercase; font-weight:600;
}
.mk-e .mk-rule{ margin-block:6px 18px; }

/* medida de lectura: el texto largo NUNCA a todo lo ancho */
.mk-e .elementor-widget-text-editor .elementor-widget-container{ max-width:var(--mk-measure); }
.mk-e .mk-wide .elementor-widget-container{ max-width:none; }

/* --------------------------------------------------------- utilidades --- */
/* rejillas REALES de CSS Grid, sin depender del Grid Container de Elementor */
.mk-e.mk-g2 > .elementor-container,
.mk-e.mk-g3 > .elementor-container,
.mk-e.mk-g4 > .elementor-container{ display:grid; gap:28px 26px; align-items:start; }
.mk-e.mk-g2 > .elementor-container{ grid-template-columns:repeat(2,1fr); }
.mk-e.mk-g3 > .elementor-container{ grid-template-columns:repeat(3,1fr); }
.mk-e.mk-g4 > .elementor-container{ grid-template-columns:repeat(4,1fr); }
.mk-e[class*="mk-g"] > .elementor-container > .elementor-column{ width:auto!important; max-width:none; }

/* tarjeta */
.mk-e .mk-card > .elementor-widget-wrap{
  background:#fff; border:1px solid var(--mk-line); border-radius:4px;
  padding:30px 26px; height:100%;
}
.mk-e .mk-card-soft > .elementor-widget-wrap{
  background:var(--mk-soft); border-radius:4px; padding:30px 26px; height:100%;
}

/* imagenes: SIEMPRE encuadre horizontal, nunca el 20% de arriba */
.mk-e .elementor-widget-image img{
  width:100%; height:100%; object-fit:cover; object-position:center; display:block;
}
.mk-e .mk-ratio-wide img{ aspect-ratio:16/10; }
.mk-e .mk-ratio-portrait img{ aspect-ratio:4/5; }
/* encuadre fino: la unica foto donde se le ve la cara al Dr. Rafael es una
   panoramica de su clinica; el 44% lo deja centrado en el recorte 4:5 */
.mk-e .mk-pos-44 img{ object-position:44% center; }

/* --------------------------------------------------- 1. perfil (hero) --- */
.mk-e.mk-profile-hero{ background:var(--mk-soft); }
.mk-e.mk-profile-hero > .elementor-container{
  display:grid; grid-template-columns:38% 1fr; gap:54px; align-items:center;
}
.mk-e.mk-profile-hero > .elementor-container > .elementor-column{ width:auto!important; }
.mk-e.mk-profile-hero .elementor-widget-image img{
  aspect-ratio:4/5; border-radius:4px; max-width:420px;
}
.mk-e.mk-profile-hero h1.elementor-heading-title{ font-size:clamp(34px,4vw,52px); line-height:1.08; }
.mk-e.mk-profile-hero .mk-cedula .elementor-heading-title{
  font-size:14px; letter-spacing:.06em; color:var(--mk-char);
}

/* ------------------------------------------------ 2. banda de cifras --- */
.mk-e.mk-statband{ border-block:1px solid var(--mk-line); }
.mk-e .elementor-widget-counter .elementor-counter-number-wrapper{
  font-size:clamp(34px,4vw,52px); font-weight:700; color:var(--mk-ink); line-height:1;
}
.mk-e .elementor-widget-counter .elementor-counter-title{
  font-size:14px; letter-spacing:.04em; color:var(--mk-body); margin-top:10px; font-weight:500;
}
/* reserva de altura -> el counter anima al entrar y si no, genera CLS */
.mk-e .elementor-widget-counter .elementor-counter{ min-height:96px; }

/* ------------------------------------------------------- 3. historia --- */
.mk-e.mk-story .elementor-widget-text-editor .elementor-widget-container{ max-width:760px; }

/* ------------------------------------- 4. stepper numerado (protocolo) -- */
.mk-e.mk-steps-num .elementor-widget-wrap{ counter-reset:mkstep; }
.mk-e.mk-steps-num .elementor-widget-icon-box{
  position:relative; padding-left:86px; padding-bottom:40px;
}
.mk-e.mk-steps-num .elementor-widget-icon-box:last-child{ padding-bottom:0; }
.mk-e.mk-steps-num .elementor-widget-icon-box::before{
  counter-increment:mkstep;
  content:counter(mkstep,decimal-leading-zero);
  position:absolute; left:0; top:0;
  width:56px; height:56px; border-radius:50%;
  background:var(--mk-accent); color:var(--mk-ink);   /* 8.48:1 */
  font-size:18px; font-weight:700; letter-spacing:.02em;
  display:flex; align-items:center; justify-content:center;
}
.mk-e.mk-steps-num .elementor-widget-icon-box::after{
  content:""; position:absolute; left:27px; top:62px; bottom:6px; width:2px;
  background:var(--mk-line);
}
.mk-e.mk-steps-num .elementor-widget-icon-box:last-child::after{ display:none; }
.mk-e.mk-steps-num .elementor-icon-box-icon{ display:none!important; }
.mk-e.mk-steps-num .elementor-icon-box-wrapper{ text-align:left!important; }
.mk-e.mk-steps-num .elementor-icon-box-content{ text-align:left!important; }
.mk-e.mk-steps-num .elementor-icon-box-title{
  font-size:21px; color:var(--mk-ink); margin-bottom:8px; line-height:1.3; text-align:left;
}
.mk-e.mk-steps-num .elementor-icon-box-description{ max-width:var(--mk-measure); text-align:left; }

/* --------------------------------------------- 5. bento (tecnologia) ---
   REESCRITO 14-ago-2026 — Elena.
   Antes: las 5 tarjetas eran 5 cajas sueltas. Tres defectos encadenados:
   (a) grid-auto-rows:minmax(180px,auto) + un item con grid-row:span 2 →
       la fila 2 se medía corta y, con overflow:hidden en la tarjeta,
       el texto de "In-house laboratory" / "Planning software" se cortaba.
   (b) aspect-ratio en <img> SIN width:100% no se aplica: con width y height
       en auto el reemplazado usa su tamaño intrínseco. Por eso cada foto
       salía con su propio ratio (1024x681, 768x512, 768x432) y se leían
       como recortes sueltos en vez de un sistema.
   (c) la tarjeta grande no tenía de dónde sacar altura: se quedaba con un
       hueco blanco de ~180px bajo su texto mientras la columna derecha
       la rebasaba.

   Ahora: la altura la manda el CONTENIDO (rows auto), la foto ABSORBE el
   sobrante (flex:1 + object-fit:cover) y ninguna tarjeta recorta texto.
   Ratio base 3/2 — es el nativo de 4 de las 5 fotos (1024/681=1.503,
   768/512=1.5), así que cover no le quita nada a la imagen; sólo la 16:9
   (768x432) cede unos px arriba y abajo. Un ratio inventado (16/10, 16/11)
   obligaba a recortar las cinco.

   ⚠️ NO LLEVA EL PREFIJO .elementor-58703 — ES A PROPOSITO, NO LO "ARREGLES".
   La regla de la casa (scope por page-id) existe para el Customizer, donde 55
   paginas comparten un mismo CSS. Este archivo NO es ese: todo aqui ya cuelga
   de .mk-e, que el mu-plugin solo inyecta en las paginas de anatomia — nunca
   toca las otras 43. Y si el bento se reusa algun dia en otra pagina, amarrarlo
   al 58703 la dejaria sin reticula. Aprobado por Cali via coordinacion 14-ago.
   ---------------------------------------------------------------------- */

.mk-e.mk-bento > .elementor-container{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:auto;          /* la fila crece con su texto, no lo trunca */
  align-items:stretch;
  gap:20px;
}
.mk-e.mk-bento > .elementor-container > .elementor-column{
  width:auto!important;
  min-width:0;                  /* sin esto una foto ancha revienta la reja */
}
.mk-e.mk-bento > .elementor-container > .elementor-column:first-child{
  grid-column:span 2; grid-row:span 2;
}

/* la tarjeta: columna flex, la foto arriba y el texto pegado al pie */
.mk-e.mk-bento .elementor-widget-wrap{
  display:flex; flex-direction:column; flex-wrap:nowrap;
  background:#fff; border:1px solid var(--mk-line); border-radius:4px;
  overflow:hidden; height:100%; min-width:0;
}
.mk-e.mk-bento .elementor-widget-wrap > .elementor-widget{ margin-bottom:0; width:100%; }

/* Las CUATRO chicas: foto de alto FIJO a 3/2. Asi los titulos de una misma
   fila arrancan a la misma altura aunque un texto caiga a 3 renglones y el
   de al lado a 2. Alinear los titulos pesa mas a la vista que ahorrarse los
   ~20px de aire al pie de la tarjeta de texto corto. */
.mk-e.mk-bento .elementor-widget-image{ flex:0 0 auto; display:block; }
.mk-e.mk-bento .elementor-widget-image > .elementor-widget-container{ max-width:none; }
.mk-e.mk-bento .elementor-widget-image img{
  display:block; width:100%; height:auto;
  aspect-ratio:3/2; object-fit:cover; object-position:center;
}

/* La GRANDE es la excepcion, y a proposito: su foto SI absorbe el sobrante
   (flex:1) para igualar el alto de las dos filas de la derecha. Ahi es donde
   vivia el hueco blanco de ~180px. Sin esto, vuelve. */
.mk-e.mk-bento > .elementor-container > .elementor-column:first-child .elementor-widget-image{
  flex:1 1 auto; min-height:0; display:flex;
}
.mk-e.mk-bento > .elementor-container > .elementor-column:first-child .elementor-widget-image > .elementor-widget-container{
  flex:1 1 auto; min-height:0; display:flex;
}
.mk-e.mk-bento > .elementor-container > .elementor-column:first-child img{
  height:100%; min-height:320px; aspect-ratio:3/2;
}

/* el texto NUNCA se estira ni se recorta: toma lo suyo y ya */
.mk-e.mk-bento .elementor-widget-heading,
.mk-e.mk-bento .elementor-widget-text-editor{
  flex:0 0 auto; padding-inline:22px;
}
.mk-e.mk-bento .elementor-widget-heading{ padding-top:20px; padding-bottom:8px; }
.mk-e.mk-bento .elementor-widget-text-editor{ padding-bottom:22px; }
.mk-e.mk-bento .elementor-widget-text-editor .elementor-widget-container{ max-width:none; }
.mk-e.mk-bento .elementor-widget-text-editor p:last-child{ margin-bottom:0; }
.mk-e.mk-bento .elementor-heading-title{ font-size:19px; color:var(--mk-ink); }
.mk-e.mk-bento p{ font-size:15px; line-height:1.65; }

/* tablet: 2 columnas, la estrella ocupa el ancho completo de su fila */
@media (max-width:1024px) and (min-width:768px){
  .mk-e.mk-bento > .elementor-container{ grid-template-columns:repeat(2,1fr); }
  .mk-e.mk-bento > .elementor-container > .elementor-column:first-child{
    grid-column:span 2; grid-row:span 1;
  }
  .mk-e.mk-bento > .elementor-container > .elementor-column:first-child img{
    aspect-ratio:2/1; min-height:0;
  }
}

/* movil: 1 columna, todos los spans a 1, ratio unico para las cinco */
@media (max-width:767px){
  .mk-e.mk-bento > .elementor-container{ grid-template-columns:1fr; gap:22px; }
  .mk-e.mk-bento > .elementor-container > .elementor-column:first-child{
    grid-column:span 1; grid-row:span 1;
  }
  /* apiladas: la grande deja de absorber y se porta como las otras cuatro */
  .mk-e.mk-bento > .elementor-container > .elementor-column:first-child img{
    aspect-ratio:3/2; height:auto; min-height:0;
  }
  .mk-e.mk-bento > .elementor-container > .elementor-column:first-child .elementor-widget-image,
  .mk-e.mk-bento > .elementor-container > .elementor-column:first-child .elementor-widget-image > .elementor-widget-container{
    display:block; flex:0 0 auto;
  }
}


/* ---------------------------------------------------- 6. split-screen --- */
.mk-e.mk-split > .elementor-container{
  display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:stretch; max-width:none; width:100%;
}
.mk-e.mk-split > .elementor-container > .elementor-column{ width:auto!important; }
.mk-e.mk-split .mk-split-media .elementor-widget-wrap{ padding:0; height:100%; }
.mk-e.mk-split .mk-split-media .elementor-widget-image,
.mk-e.mk-split .mk-split-media .elementor-widget-image .elementor-widget-container{ height:100%; }
.mk-e.mk-split .mk-split-media img{ height:100%; min-height:460px; object-fit:cover; }
.mk-e.mk-split .mk-split-text > .elementor-widget-wrap{
  padding:70px 8vw 70px 60px; align-content:center;
}
.mk-e.mk-split h1.elementor-heading-title{ font-size:clamp(32px,3.6vw,46px); line-height:1.1; }

/* -------------------------------------------------------- 7. zigzag --- */
.mk-e.mk-zigzag > .elementor-container{
  display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center;
}
.mk-e.mk-zigzag > .elementor-container > .elementor-column{ width:auto!important; }
.mk-e.mk-zigzag-rev > .elementor-container > .elementor-column:first-child{ order:2; }
.mk-e.mk-zigzag .elementor-widget-image img{ aspect-ratio:4/3; border-radius:4px; }

/* --------------------------------------------------- 8. comparativa --- */
.mk-e.mk-compare > .elementor-container{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.mk-e.mk-compare > .elementor-container > .elementor-column{ width:auto!important; }
.mk-e.mk-compare .elementor-widget-wrap{
  background:#fff; border:1px solid var(--mk-line); border-radius:4px; padding:32px 28px; height:100%;
}
/* la PRIMERA columna es siempre la recomendada/positiva -> lleva el acento */
.mk-e.mk-compare .elementor-column:first-child .elementor-widget-wrap{ border-top:4px solid var(--mk-accent); }
.mk-e.mk-compare .elementor-column:last-child  .elementor-widget-wrap{ border-top:4px solid var(--mk-line); }
.mk-e.mk-compare .elementor-heading-title{ font-size:20px; }
/* la columna negativa en gris de cuerpo (6.90:1). El significado NO depende del
   color: cambia el glifo (palomita/tacha) y cambia el titulo. WCAG 1.4.1. */
.mk-e.mk-compare .elementor-column:last-child .elementor-widget-icon-list:not(.mk-chips) .elementor-icon-list-icon i{
  color:var(--mk-body);
}

/* -------------------------------------------------- 9. cita destacada --- */
.mk-e.mk-quote{ background:var(--mk-soft); }
.mk-e.mk-quote .elementor-widget-wrap{ max-width:860px; margin-inline:auto; text-align:center; }
.mk-e.mk-quote .mk-quote-text .elementor-heading-title{
  font-size:clamp(22px,2.6vw,32px); line-height:1.45; color:var(--mk-ink); font-weight:400;
}
.mk-e.mk-quote .elementor-widget-text-editor .elementor-widget-container{ max-width:none; }
.mk-e.mk-quote .mk-quote-by p{ font-size:14px; letter-spacing:.06em; text-transform:uppercase; }

/* ------------------------------------------------------ 10. chips/TOC --- */
.mk-e .mk-chips .elementor-icon-list-items{ display:flex; flex-wrap:wrap; gap:10px; }
.mk-e .mk-chips .elementor-icon-list-item{
  border:1px solid var(--mk-line); border-radius:999px; background:#fff;
}
.mk-e .mk-chips .elementor-icon-list-item > a,
.mk-e .mk-chips .elementor-icon-list-item > span{
  padding:12px 18px; min-height:44px; align-items:center;  /* area tactil */
  font-size:15px; color:var(--mk-link);
}
.mk-e .mk-chips .elementor-icon-list-item:hover{ border-color:var(--mk-accent); }
.mk-e .mk-chips .elementor-icon-list-icon i{ color:var(--mk-link); font-size:12px; }
.mk-e .mk-chips .elementor-icon-list-item a:focus-visible{
  outline:3px solid var(--mk-link); outline-offset:2px; border-radius:999px;
}

/* --------------------------------------------------- 11. icon-list gen --- */
.mk-e .elementor-widget-icon-list:not(.mk-chips) .elementor-icon-list-item{
  margin-bottom:12px; align-items:flex-start;
}
.mk-e .elementor-widget-icon-list:not(.mk-chips) .elementor-icon-list-icon{ margin-top:4px; }
.mk-e .elementor-widget-icon-list:not(.mk-chips) .elementor-icon-list-icon i{
  color:var(--mk-accent); font-size:15px;
}
.mk-e .elementor-widget-icon-list:not(.mk-chips) .elementor-icon-list-text{
  color:var(--mk-body); font-size:16px; line-height:1.6;
}
.mk-e.mk-checklist > .elementor-container{ display:grid; grid-template-columns:1fr 1fr; gap:12px 40px; }
.mk-e.mk-checklist > .elementor-container > .elementor-column{ width:auto!important; }

/* ------------------------------------------------------- 12. icon-box --- */
.mk-e .elementor-widget-icon-box:not(.mk-plain) .elementor-icon-box-icon i{
  color:var(--mk-accent); font-size:28px;
}
.mk-e .elementor-icon-box-title{ color:var(--mk-ink); font-size:19px; margin-bottom:8px; }
.mk-e .elementor-icon-box-description{ color:var(--mk-body); font-size:16px; line-height:1.7; }

/* ----------------------------------------------------- 13. image-box --- */
.mk-e .elementor-widget-image-box .elementor-image-box-img img{
  aspect-ratio:16/10; border-radius:4px;
}
.mk-e .elementor-widget-image-box .elementor-image-box-title{
  font-size:19px; color:var(--mk-ink); margin:16px 0 8px;
}
.mk-e .elementor-widget-image-box .elementor-image-box-description{ font-size:15px; line-height:1.7; }

/* ---------------------------------------------------------- 14. alert --- */
.mk-e .elementor-widget-alert .elementor-alert{
  border-left-width:4px; border-radius:3px; padding:22px 24px; background:var(--mk-soft);
  border-left-color:var(--mk-accent); color:var(--mk-char);
}
.mk-e .elementor-widget-alert .elementor-alert-title{
  font-size:17px; font-weight:600; color:var(--mk-ink); display:block; margin-bottom:6px;
}
.mk-e .elementor-widget-alert .elementor-alert-description{
  font-size:16px; line-height:1.7; color:var(--mk-body);
}

/* ------------------------------------------- 15. acordeon / pestanas --- */
.mk-e .elementor-widget-n-accordion .e-n-accordion-item{
  border-bottom:1px solid var(--mk-line); background:transparent;
}
.mk-e .elementor-widget-n-accordion .e-n-accordion-item-title{
  padding:22px 4px; cursor:pointer; min-height:44px;
}
.mk-e .elementor-widget-n-accordion .e-n-accordion-item-title-text{
  font-size:19px; color:var(--mk-ink); font-weight:500;
}
.mk-e .elementor-widget-n-accordion .e-n-accordion-item-title-icon i{ color:var(--mk-link); font-size:14px; }
.mk-e .elementor-widget-n-accordion summary:focus-visible{
  outline:3px solid var(--mk-link); outline-offset:-3px;
}
.mk-e .elementor-widget-n-tabs .e-n-tab-title{
  font-size:16px; padding:14px 22px; min-height:44px; color:var(--mk-char);
  border-bottom:3px solid transparent; background:transparent;
}
.mk-e .elementor-widget-n-tabs .e-n-tab-title[aria-selected="true"]{
  border-bottom-color:var(--mk-accent); color:var(--mk-ink); font-weight:600;
}
.mk-e .elementor-widget-n-tabs .e-n-tab-title:focus-visible{
  outline:3px solid var(--mk-link); outline-offset:-3px;
}
.mk-e .elementor-widget-n-tabs .e-n-tabs-content > .e-con{ padding-top:34px; }

/* --------------------------------------------------- 16. antes/despues --- */
.mk-e .mk-ba-slider .lte-before-after-sc,
.mk-e .mk-ba-slider img{ border-radius:4px; }
.mk-e .mk-ba-slider .lte-before-after-sc__handle,
.mk-e .mk-ba-slider [class*="handle"]{ min-width:44px; min-height:44px; }  /* area tactil */

/* ------------------------------------------------------- 17. galeria --- */
.mk-e .elementor-widget-image-gallery .gallery-item img{
  aspect-ratio:4/3; object-fit:cover; border-radius:4px; border:0!important;
}
.mk-e .elementor-widget-image-gallery .gallery-icon{ margin-bottom:6px; }
.mk-e .elementor-widget-image-gallery .gallery-caption{
  font-size:13px; color:var(--mk-body); line-height:1.5; margin-top:6px;
}

/* --------------------------------------------------------- 18. tabla --- */
.mk-e .mk-table table.lte-table{ width:100%; border-collapse:collapse; }
/* El tema pinta el <th> con fondo #74b9ff y texto BLANCO = 2.07:1, reprueba AA.
   Se invierte: tinta sobre fondo suave (17.58:1) y el acento queda de subrayado. */
.mk-e .mk-table table.lte-table thead th,
.mk-e .mk-table .lte-shadow-table table th{
  background:var(--mk-soft)!important; color:var(--mk-ink)!important;
  font-size:15px; font-weight:600; text-align:left; padding:14px 16px;
  border-bottom:3px solid var(--mk-accent);
}
.mk-e .mk-table table.lte-table tbody td,
.mk-e .mk-table .lte-shadow-table table td{
  padding:14px 16px; border-bottom:1px solid var(--mk-line);
  color:var(--mk-body); font-size:15px; background:transparent;
}

/* ----------------------------------------------------- 19. testimonio --- */
.mk-e .elementor-widget-testimonial .elementor-testimonial-content{
  font-size:17px; line-height:1.75; color:var(--mk-char);
}
.mk-e .elementor-widget-testimonial .elementor-testimonial-name{ color:var(--mk-ink); font-weight:600; }
.mk-e .elementor-widget-testimonial .elementor-testimonial-job{ color:var(--mk-body); font-size:14px; }

/* ---------------------------------------------------------- 20. mapa --- */
.mk-e .mk-map-embed iframe{ height:420px; border-radius:4px; }
.mk-e.mk-map > .elementor-container{ display:grid; grid-template-columns:1.4fr 1fr; gap:36px; align-items:center; }
.mk-e.mk-map > .elementor-container > .elementor-column{ width:auto!important; }

/* ----------------------------------------------------------- 21. CTA --- */
.mk-e.mk-cta{ background:var(--mk-navy); }
.mk-e.mk-cta .elementor-heading-title{ color:#fff; }
.mk-e.mk-cta p{ color:#D9E2F2; }
.mk-e.mk-cta .elementor-widget-text-editor .elementor-widget-container{ max-width:640px; }
/* especificidad 0,5,0 — le gana a la regla generica de icon-list (0,4,0).
   Sin esto el texto de lista sobre marino queda gris cuerpo = contraste reprobado. */
.mk-e.mk-cta .elementor-widget-icon-list:not(.mk-chips) .elementor-icon-list-text{ color:#D9E2F2; }
.mk-e.mk-cta .elementor-widget-icon-list:not(.mk-chips) .elementor-icon-list-icon i{ color:var(--mk-accent); }
.mk-e .mk-btn .elementor-button{
  background:var(--mk-accent); color:var(--mk-ink);      /* 8.48:1 */
  border-radius:3px; padding:17px 34px; font-size:14px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; min-height:48px;
}
.mk-e .mk-btn .elementor-button:hover{ background:#8fc7ff; color:var(--mk-ink); }
.mk-e .mk-btn-outline .elementor-button{
  background:transparent; color:#fff; border:1px solid rgba(255,255,255,.55);
}
.mk-e .mk-btn-outline .elementor-button:hover{ background:rgba(255,255,255,.1); color:#fff; }
.mk-e .mk-btn .elementor-button:focus-visible{ outline:3px solid #fff; outline-offset:3px; }
.mk-e.mk-cta .mk-btn-outline .elementor-button:focus-visible{ outline-color:var(--mk-accent); }

/* --------------------------------------------------- 22. banda a sangre --- */
.mk-e.mk-band{ background:var(--mk-soft); }
.mk-e.mk-band-navy{ background:var(--mk-navy); }
.mk-e.mk-band-navy .elementor-heading-title{ color:#fff; }
.mk-e.mk-band-navy p{ color:#D9E2F2; }
/* 0,5,0 para ganarle a la generica de icon-list */
.mk-e.mk-band-navy .elementor-widget-icon-list:not(.mk-chips) .elementor-icon-list-text{ color:#D9E2F2; }
.mk-e.mk-band-navy .elementor-widget-icon-list:not(.mk-chips) .elementor-icon-list-icon i{ color:var(--mk-accent); }
.mk-e.mk-band-navy .elementor-counter-number-wrapper{ color:#fff; }
.mk-e.mk-band-navy .elementor-counter-title{ color:#B9C7E0; }
/* el alert sobre marino tambien */
.mk-e.mk-band-navy .elementor-widget-alert .elementor-alert{ background:rgba(255,255,255,.07); }
.mk-e.mk-band-navy .elementor-widget-alert .elementor-alert-title{ color:#fff; }
.mk-e.mk-band-navy .elementor-widget-alert .elementor-alert-description{ color:#D9E2F2; }

/* =========================================================================
   MOVIL — 390px es el contrato, no un afterthought
   ========================================================================= */
@media (max-width:1024px){
  .mk-e[style*="background-attachment"],
  .mk-e .elementor-section{ background-attachment:scroll!important; }
}

@media (max-width:1024px) and (min-width:768px){
  .mk-e.mk-g4 > .elementor-container{ grid-template-columns:repeat(2,1fr); }
  .mk-e.mk-g3 > .elementor-container{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:767px){
  /* red de seguridad: si el JS de animaciones no carga, el contenido NO se queda invisible */
  .mk-e .elementor-invisible{ visibility:visible!important; animation:none!important; }

  .mk-e .elementor-section .elementor-container{ padding-inline:20px; }

  /* rejillas -> 1 columna, salvo las que se leen mejor a 2 */
  .mk-e.mk-g2 > .elementor-container,
  .mk-e.mk-g3 > .elementor-container,
  .mk-e.mk-g4 > .elementor-container,
  .mk-e.mk-compare > .elementor-container,
  .mk-e.mk-zigzag > .elementor-container,
  .mk-e.mk-map > .elementor-container,
  .mk-e.mk-checklist > .elementor-container{ grid-template-columns:1fr; gap:22px; }

  /* datos cortos: 2 columnas aguantan y evitan 8 pantallazos de scroll */
  .mk-e.mk-g-keep2 > .elementor-container{ grid-template-columns:repeat(2,1fr)!important; gap:18px 14px; }

  /* el zigzag: imagen SIEMPRE arriba, aunque la fila este invertida */
  .mk-e.mk-zigzag-rev > .elementor-container > .elementor-column:first-child{ order:0; }

  /* split: apilado, imagen arriba con altura minima (si no, colapsa a 0) */
  .mk-e.mk-split > .elementor-container{ grid-template-columns:1fr; }
  .mk-e.mk-split .mk-split-media img{ min-height:250px; aspect-ratio:16/10; }
  .mk-e.mk-split .mk-split-text > .elementor-widget-wrap{ padding:38px 20px 46px; }

  /* perfil */
  .mk-e.mk-profile-hero > .elementor-container{ grid-template-columns:1fr; gap:28px; }
  .mk-e.mk-profile-hero .elementor-widget-image img{ max-width:100%; aspect-ratio:4/5; }

  /* stepper: ya es vertical de nacimiento, solo achicar el badge */
  .mk-e.mk-steps-num .elementor-widget-icon-box{ padding-left:64px; padding-bottom:32px; }
  .mk-e.mk-steps-num .elementor-widget-icon-box::before{ width:44px; height:44px; font-size:15px; }
  .mk-e.mk-steps-num .elementor-widget-icon-box::after{ left:21px; top:50px; }
  .mk-e.mk-steps-num .elementor-icon-box-title{ font-size:18px; }

  /* cifras: 2x2, NUNCA 3 o 4 en fila (a 390px el numero baja a 20px) */
  .mk-e.mk-statband > .elementor-container{ display:grid; grid-template-columns:1fr 1fr; gap:26px 14px; }
  .mk-e.mk-statband > .elementor-container > .elementor-column{ width:auto!important; }
  .mk-e .elementor-widget-counter .elementor-counter-number-wrapper{ font-size:30px; }
  .mk-e .elementor-widget-counter .elementor-counter{ min-height:74px; }

  /* texto */
  .mk-e .mk-lead .elementor-widget-container p{ font-size:18px; }
  .mk-e.mk-quote .mk-quote-text .elementor-heading-title{ font-size:22px; }
  .mk-e h1.elementor-heading-title{ font-size:30px; line-height:1.15; }
  .mk-e h2.elementor-heading-title{ font-size:25px; }

  /* galeria a 2 columnas */
  .mk-e .elementor-widget-image-gallery .gallery{ display:grid!important; grid-template-columns:1fr 1fr; gap:10px; }
  .mk-e .elementor-widget-image-gallery .gallery-item{ width:auto!important; margin:0!important; }

  /* botones a ancho completo, apilados */
  .mk-e .mk-btn .elementor-button{ width:100%; justify-content:center; }
  .mk-e .mk-btn{ margin-bottom:12px; }

  /* mapa */
  .mk-e .mk-map-embed iframe{ height:260px; }

  /* Nested Tabs -> ACORDEON en movil.
     Elementor ya pone la clase .e-n-tabs-mobile y la variable
     --n-tabs-heading-display:contents, pero el TEMA pisa .e-n-tabs-heading con
     display:flex literal y la conversion nunca ocurre: tres pestanas con nombres
     largos terminan en dos renglones. Se restituye SOLO dentro de .mk-e. */
  .mk-e .elementor-widget-n-tabs.e-n-tabs-mobile .e-n-tabs-heading{
    display:var(--n-tabs-heading-display,contents)!important;
  }
  .mk-e .elementor-widget-n-tabs.e-n-tabs-mobile .e-n-tab-title{
    width:100%!important; justify-content:flex-start; text-align:left;
    padding:18px 4px; border-bottom:1px solid var(--mk-line); border-top:0;
  }
  .mk-e .elementor-widget-n-tabs.e-n-tabs-mobile .e-n-tab-title[aria-selected="true"]{
    border-bottom-color:var(--mk-accent);
  }

  /* tabla: que haga scroll ELLA, no la pagina */
  .mk-e .mk-table .elementor-widget-container{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .mk-e .mk-table table{ min-width:520px; }

  /* logos / tiras: 2 por fila, altura fija */
  .mk-e.mk-logos img{ max-height:38px; width:auto; }
}

/* respeta la preferencia del sistema */
@media (prefers-reduced-motion:reduce){
  .mk-e *{ animation:none!important; transition:none!important; }
}

/* =========================================================================
   AMPLIACION 3-ago-2026 — las 3 paginas nuevas
   Same Day Dental Crown (mk-rail) · PRF (mk-defn) · Concierge (mk-deskcard)
   Todo sigue con scope .mk-e. No toca ninguna de las 55 paginas anteriores.
   ========================================================================= */

/* ---------------------------------------------------------------- mk-rail --
   Riel horizontal de 5 etapas. Es la apertura de Same Day Dental Crown y no
   existe en ninguna otra pagina del sitio: sus vecinas de Rehabilitation abren
   todas con mk-sec-intro (texto + foto a la izquierda).
   El numero sale de un counter CSS: el iconbox no trae numeros y meter "1." a
   mano en el titulo lo dejaria en el lector de pantalla como parte del texto. */
.mk-e .mk-rail-head .elementor-heading-title{ font-size:22px; margin-top:26px; }

.mk-e.mk-rail > .elementor-container{
  display:grid; grid-template-columns:repeat(5,1fr); gap:0 26px;
  align-items:start; counter-reset:mkrail;
}
.mk-e.mk-rail > .elementor-container > .elementor-column{ width:auto!important; max-width:none; }
.mk-e.mk-rail .elementor-widget-icon-box{ position:relative; padding-top:66px; }
.mk-e.mk-rail .elementor-icon-box-icon{ display:none!important; }
.mk-e.mk-rail .elementor-widget-icon-box::before{
  counter-increment:mkrail; content:counter(mkrail);
  position:absolute; top:0; left:0; width:46px; height:46px; border-radius:50%;
  background:var(--mk-accent); color:var(--mk-ink);
  display:flex; align-items:center; justify-content:center;
  font-size:17px; font-weight:600; line-height:1; z-index:1;
}
/* el hilo que une una etapa con la siguiente */
.mk-e.mk-rail .elementor-widget-icon-box::after{
  content:""; position:absolute; top:22px; left:46px; right:-26px;
  height:2px; background:var(--mk-line);
}
.mk-e.mk-rail > .elementor-container > .elementor-column:last-child .elementor-widget-icon-box::after{
  display:none;
}
.mk-e.mk-rail .elementor-icon-box-wrapper,
.mk-e.mk-rail .elementor-icon-box-content{ text-align:left!important; }
.mk-e.mk-rail .elementor-icon-box-title{ font-size:17px; margin-bottom:7px; }
.mk-e.mk-rail .elementor-icon-box-description{
  font-size:14.5px; line-height:1.65; max-width:none;
}

/* ---------------------------------------------------------------- mk-defn --
   Ficha de definicion. Apertura de PRF. Una sigla que el paciente no ha oido
   nunca se presenta como entrada de diccionario, no como parrafo de venta. */
.mk-e.mk-defn, .mk-e.mk-defn2{ background:var(--mk-soft); }
.mk-e.mk-defn h1.elementor-heading-title{
  font-size:clamp(40px,5.4vw,68px); line-height:1; letter-spacing:.02em;
}
.mk-e.mk-defn2 > .elementor-container{ max-width:920px; }
.mk-e .mk-defn-card > .elementor-widget-wrap{
  background:#fff; border:1px solid var(--mk-line);
  border-left:5px solid var(--mk-accent);
  padding:38px 42px 34px; border-radius:4px;
}
.mk-e .mk-defn-term .elementor-heading-title{
  font-size:clamp(19px,2.1vw,25px); color:var(--mk-link);
  letter-spacing:-.01em; margin-bottom:14px;
}
.mk-e .mk-defn-body .elementor-widget-container{ max-width:66ch; }
.mk-e .mk-defn-body p{ font-size:17.5px; line-height:1.75; color:var(--mk-char); }
.mk-e .mk-defn-card .mk-chips{ margin-top:20px; }

/* ------------------------------------------------------------ mk-deskcard --
   Placa de recepcion. Apertura de Concierge. Lo primero que una pagina de
   concierge tiene que dar es alguien con quien hablar, no un parrafo.
   Los dos telefonos van a ancho completo A PROPOSITO, tambien en escritorio:
   son el area tactil mas grande de la pagina y el objetivo unico del bloque. */
.mk-e.mk-deskcard, .mk-e.mk-deskcard2{ background:var(--mk-soft); }
.mk-e.mk-deskcard2 > .elementor-container{ max-width:760px; }
.mk-e .mk-desk-card > .elementor-widget-wrap{
  background:#fff; border:1px solid var(--mk-line);
  border-top:5px solid var(--mk-accent);
  padding:42px 44px 36px; border-radius:4px;
  box-shadow:0 18px 46px rgba(18,30,65,.08);
}
.mk-e .mk-desk-card .elementor-heading-title{ font-size:21px; }
.mk-e .mk-desk-card .elementor-widget-text-editor{ margin-bottom:24px; }
.mk-e .mk-desk-card .mk-btn{ margin-bottom:12px; }
.mk-e .mk-desk-card .mk-btn .elementor-button{
  width:100%; justify-content:center; font-size:17px; padding:16px 22px;
  letter-spacing:.01em;
}
.mk-e .mk-desk-card .elementor-widget-icon-list{ margin-top:6px; }
.mk-e .mk-desk-card .elementor-widget-icon-list:first-of-type{ margin-top:22px; }
.mk-e .mk-desk-card .elementor-icon-list-text{ font-size:15px; line-height:1.6; }

/* boton fantasma para FONDO CLARO.
   mk-btn-outline es blanco sobre marino y aqui seria invisible.
   #191919 sobre blanco = 17.58:1 — AAA de sobra, borde y texto. */
.mk-e .mk-btn-ghost .elementor-button{
  background:transparent; color:var(--mk-ink);
  border:2px solid var(--mk-ink); box-shadow:none;
}
.mk-e .mk-btn-ghost .elementor-button:hover{ background:var(--mk-ink); color:#fff; }
.mk-e .mk-btn-ghost .elementor-button:focus-visible{
  outline:3px solid var(--mk-link); outline-offset:3px;
}
/* dentro de una tarjeta, el fantasma no se estira al ancho de la tarjeta */
.mk-e .mk-card .mk-btn-ghost .elementor-button{ width:auto; }

/* ============================ MOVIL / TABLET de las 3 nuevas ============= */

/* el riel a 3 columnas pierde el hilo (saltaria de renglon) */
@media (max-width:1199px) and (min-width:768px){
  .mk-e.mk-rail > .elementor-container{ grid-template-columns:repeat(3,1fr); gap:34px 26px; }
  .mk-e.mk-rail .elementor-widget-icon-box::after{ display:none; }
}

@media (max-width:767px){
  /* riel -> vertical, con el hilo ahora en vertical. Misma lectura que el
     stepper, que es la anatomia que mejor aguanta 390px. */
  .mk-e.mk-rail > .elementor-container{ grid-template-columns:1fr; gap:0; }
  .mk-e.mk-rail .elementor-widget-icon-box{
    padding-top:0; padding-left:64px; padding-bottom:30px; min-height:60px;
  }
  .mk-e.mk-rail .elementor-widget-icon-box::before{ width:44px; height:44px; font-size:15px; }
  .mk-e.mk-rail .elementor-widget-icon-box::after{
    top:50px; left:21px; right:auto; bottom:6px; width:2px; height:auto;
  }
  .mk-e.mk-rail > .elementor-container > .elementor-column:last-child
    .elementor-widget-icon-box{ padding-bottom:0; }
  .mk-e.mk-rail .elementor-icon-box-title{ font-size:18px; }
  .mk-e.mk-rail .elementor-icon-box-description{ font-size:15.5px; }
  .mk-e .mk-rail-head .elementor-heading-title{ font-size:20px; margin-top:20px; }

  /* ficha */
  .mk-e .mk-defn-card > .elementor-widget-wrap{ padding:26px 22px 24px; border-left-width:4px; }
  .mk-e.mk-defn h1.elementor-heading-title{ font-size:44px; }
  .mk-e .mk-defn-body p{ font-size:16.5px; }

  /* placa: la tarjeta respira menos, los telefonos siguen a ancho completo */
  .mk-e .mk-desk-card > .elementor-widget-wrap{ padding:28px 22px 26px; }
  .mk-e .mk-desk-card .elementor-heading-title{ font-size:19px; }
  .mk-e .mk-desk-card .mk-btn .elementor-button{ font-size:16px; padding:15px 16px; }
  /* la direccion completa es larga: que parta bien y no desborde */
  .mk-e .mk-desk-card .elementor-icon-list-text{ font-size:14.5px; word-break:break-word; }

  /* el fantasma dentro de tarjeta si se estira en movil (area tactil) */
  .mk-e .mk-card .mk-btn-ghost .elementor-button{ width:100%; }
}

/* ---- correcciones tras mirar las capturas (3-ago, misma sesion) ---------- */

/* Las tarjetas iban centradas mientras el H1 iba a la izquierda: se leia como
   un descuadre, no como una decision. Ahora las dos cuelgan del mismo margen. */
.mk-e.mk-defn2 > .elementor-container,
.mk-e.mk-deskcard2 > .elementor-container{ max-width:none; }
.mk-e .mk-defn-card{ max-width:880px; margin-right:auto; }
.mk-e .mk-desk-card{ max-width:720px; margin-right:auto; }

/* PRF es una entrada de diccionario: la sigla es el titulo, y hasta ahora salia
   MAS CHICA que un H1 normal del sitio, que es justo lo contrario de la idea. */
.mk-e.mk-defn .elementor-widget-heading h1.elementor-heading-title{
  font-size:clamp(54px,6.6vw,92px); line-height:.98; letter-spacing:.01em;
}

/* En una fila de 3 tarjetas con boton, los botones a distintas alturas se leen
   como error de maquetado. Clase NUEVA a proposito: no toco las 12 anteriores. */
.mk-e.mk-even > .elementor-container{ align-items:stretch; }
.mk-e.mk-even .mk-card > .elementor-widget-wrap{
  height:100%; display:flex; flex-direction:column;
}
.mk-e.mk-even .mk-card .elementor-widget-button{ margin-top:auto; }

@media (max-width:767px){
  .mk-e.mk-defn .elementor-widget-heading h1.elementor-heading-title{ font-size:52px; }
  .mk-e.mk-even .mk-card > .elementor-widget-wrap{ height:auto; }
}

/* ------------------------------- 58711 · border-crossing-guide, 3-up ---
   "Planning the return, not the departure": los 3 icon-box se apilaban y
   cada parrafo corria a todo el ancho (191 caracteres por linea; a esa
   medida el ojo pierde el renglon al saltar). Diagnostico de Miranda
   contra el JSON: la columna 263b8de tiene 6 hijos DIRECTOS (heading,
   divider, alert + los 3 icon-box), asi que basta CSS — sin tocar el arbol.
   Verificado con parseo de profundidad sobre el HTML servido: son 6.

   Doble scope a proposito: .elementor-58711 (una sola pagina) Y .mk-e
   (el contrato de este archivo). Cualquiera de los dos bastaria. */
@media (min-width:768px){
  .elementor-58711 .mk-e .elementor-element-263b8de > .elementor-widget-wrap{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    column-gap:28px; row-gap:26px;
    align-items:start;
  }
  /* titulo, regla y alert siguen cruzando de lado a lado */
  .elementor-58711 .mk-e .elementor-element-263b8de > .elementor-widget-wrap > .elementor-element-1f659f5,
  .elementor-58711 .mk-e .elementor-element-263b8de > .elementor-widget-wrap > .elementor-element-1296d7b,
  .elementor-58711 .mk-e .elementor-element-263b8de > .elementor-widget-wrap > .elementor-element-586d751{
    grid-column:1 / -1;
  }
  /* los widgets de Elementor traen margin-bottom propio; bajo grid el
     row-gap ya separa, y el margin lo desalinea. Fuera. */
  .elementor-58711 .mk-e .elementor-element-263b8de > .elementor-widget-wrap > .elementor-element{
    margin-bottom:0;
  }
}


/* ==========================================================================
   23. ALL-ON-4 / PRO ARCH (pagina 58664) — intro larga de dos columnas
   Elena · 14-ago-2026

   CONTEXTO: el texto del Dr. Rafael dejo la columna izquierda en 1772px y la
   foto en 677px -> 1095px de blanco muerto a la derecha (medido con CDP a
   1440). Ademas los <h3> del cuerpo salian a 48px: contra un H1 de 52px el
   subtitulo competia con el titulo.

   SCOPE: .elementor-58664 a proposito. Estas reglas SIRVEN igual para
   .mk-sec-intro / .mk-sec .mk-trazabilidad en las otras 11 paginas del molde,
   pero hoy NO se promueven: Cali solo va a mirar esta. Cuando la apruebe,
   promoverlas es borrar ".elementor-58664 " de cada selector — nada mas.

   NO usa .mk-e: esta pagina no pertenece a las anatomias, pertenece al
   design system .mk-sec (tokens --mk-* definidos en wp_custom_css 58819).
   Por eso var(--mk-t-h3), var(--mk-soft) y var(--mk-blue) resuelven aqui.
   -------------------------------------------------------------------------- */

/* -- 23.1 La foto acompana la lectura ------------------------------------ */
/* La columna de la foto YA se estira a la altura de la columna de texto
   (medido: wrapH 1772px en las dos). Asi que sticky basta: sin JS, sin tocar
   el _elementor_data y sin pedir una segunda imagen.
   El ancestro .lte-entry-content tiene overflow:clip — clip NO crea contenedor
   de scroll, asi que NO rompe sticky (hidden si lo romperia).
   top:96px = --mk-sec-y del sistema, y libra los 88px del header del tema. */
@media (min-width:1025px){
  .elementor-58664 .mk-sec-intro .elementor-widget.elementor-widget-image{
    position:sticky;
    top:96px;
    margin-bottom:0;              /* el kit mete 20px: le robaba recorrido */
  }
}

/* -- 23.2 Los subtitulos del cuerpo -------------------------------------- */
/* Los <h3> que van DENTRO del text-editor no los agarraba ninguna regla del
   sistema (la unica de h3 esta scoped a .mk-sec-steps), asi que heredaban los
   48px del tema. Aqui bajan al token: 26 / 23 / 21 segun ancho. */
.elementor-58664 .mk-sec-intro .elementor-widget.elementor-widget-text-editor .elementor-widget-container h3,
.elementor-58664 .mk-sec-intro .elementor-widget.mk-trazabilidad h3.elementor-heading-title{
  font-family:'Outfit',sans-serif;
  font-size:var(--mk-t-h3);
  font-weight:600;
  line-height:1.25;
  letter-spacing:-.01em;
  color:var(--mk-ink);            /* 17.58:1 sobre blanco y 16.7:1 sobre soft */
  max-width:var(--mk-measure);
  text-wrap:balance;
}
/* Ritmo: el h3 abre subseccion, asi que pide aire ARRIBA, no abajo. */
.elementor-58664 .mk-sec-intro .elementor-widget.elementor-widget-text-editor .elementor-widget-container h3{
  margin:44px 0 12px;
}
.elementor-58664 .mk-sec-intro .elementor-widget.elementor-widget-text-editor .elementor-widget-container > h3:first-child{
  margin-top:0;
}

/* -- 23.3 Trazabilidad = tarjeta, no encabezado suelto -------------------- */
/* Miranda dejo la clase mk-trazabilidad en DOS widgets hermanos (heading +
   text-editor). No se pueden envolver sin tocar el JSON, asi que se arma la
   tarjeta partida: el de arriba redondea arriba, el de abajo redondea abajo y
   entre los dos se mata el margen del kit para que no se vea la costura.

   POR QUE tarjeta y no dejarle el azul marino: dos h3 hermanos con dos colores
   distintos leen a error de maqueta. Que se distinga por CONTENEDOR y no por
   color del texto es mas claro, no depende del color para dar el significado
   (WCAG 1.4.1) y deja el bloque reutilizable en cualquier otra pagina. */
.elementor-58664 .mk-sec-intro .elementor-widget.mk-trazabilidad{
  background:var(--mk-soft);
  max-width:calc(var(--mk-measure) + 64px);  /* medida + los dos paddings:
                                                la tarjeta cierra justo donde
                                                cierran los parrafos de arriba */
  margin-bottom:0;                            /* fuera la costura de 20px */
}
.elementor-58664 .mk-sec-intro .elementor-widget.mk-trazabilidad.elementor-widget-heading{
  margin-top:48px;
  padding:32px 32px 0;
  border-radius:var(--mk-radius) var(--mk-radius) 0 0;
}
.elementor-58664 .mk-sec-intro .elementor-widget.mk-trazabilidad.elementor-widget-text-editor{
  padding:0 32px 32px;
  border-radius:0 0 var(--mk-radius) var(--mk-radius);
}
/* La reglita degradada del sistema (motivo del logo), reusada como firma del
   modulo: dice "esta es la misma familia" sin repetir el widget divider. */
.elementor-58664 .mk-sec-intro .elementor-widget.mk-trazabilidad.elementor-widget-heading .elementor-widget-container::before{
  content:'';
  display:block;
  width:48px;
  height:3px;
  border-radius:2px;
  margin:0 0 18px;
  background:linear-gradient(90deg,var(--mk-blue) 0%,var(--mk-cool) 100%);
}
/* Dentro de la tarjeta el h3 ya no necesita el aire de subseccion. */
.elementor-58664 .mk-sec-intro .elementor-widget.mk-trazabilidad h3.elementor-heading-title{
  margin:0 0 14px;
}
.elementor-58664 .mk-sec-intro .elementor-widget.mk-trazabilidad.elementor-widget-text-editor .elementor-widget-container p:last-child{
  margin-bottom:0;
}

@media (max-width:767px){
  .elementor-58664 .mk-sec-intro .elementor-widget.elementor-widget-text-editor .elementor-widget-container h3{
    margin:36px 0 10px;
  }
  .elementor-58664 .mk-sec-intro .elementor-widget.mk-trazabilidad.elementor-widget-heading{
    margin-top:36px;
    padding:24px 22px 0;
  }
  .elementor-58664 .mk-sec-intro .elementor-widget.mk-trazabilidad.elementor-widget-text-editor{
    padding:0 22px 24px;
  }
}

/* =========================================================================
   CTA DE CIERRE — WHATSAPP  ·  All-on-4 (pagina 58664)  ·  Elena, 14-ago-2026
   -------------------------------------------------------------------------
   POR QUE ESTE BLOQUE NO CUELGA DE .mk-e (leelo antes de "arreglarlo")

   La 58664 es una pagina de formato SERVICIO: sus 13 secciones cuelgan de
   .mk-sec, el sistema que vive en el wp_custom_css 58819 (Karla). Verificado
   en el HTML servido el 14-ago: en esta pagina hay CERO elementos .mk-e
   (los 9 aciertos de "mk-e" que salen al grepear son "mk-eyebrow").
   Si este bloque colgara de .mk-e se traeria la escala tipografica y el
   contenedor de las paginas de anatomia, que son OTROS -> se leeria como un
   banner pegado. Colgando de .mk-sec hereda gratis el contenedor de 1240px,
   el ritmo --mk-sec-y y la tipografia de la propia pagina; aqui abajo solo
   va la PIEL: fondo marino, colores sobre oscuro y el boton.

   ORDEN DE CARGA — dato medido, no supuesto
   En el HTML servido este archivo entra en el byte 25.965 y el
   <style id="wp-custom-css"> de Karla en el 31.181: KARLA VA DESPUES.
   A igualdad de especificidad gana ella. Por eso cada regla de abajo lleva
   UNA clase mas que la suya:
       H2       Karla (0,4,1)  ->  aqui (0,5,1)
       cuerpo   Karla (0,4,0)  ->  aqui (0,5,0)
       eyebrow  Karla (0,5,0)  ->  aqui (0,6,0)
   ⛔ No le quites clases "para limpiar": se apaga el bloque entero.

   CLASE NUEVA, SIN COLISION
   .mk-cta-wa da 0 coincidencias en el wp_custom_css 58819 y 0 en el HTML
   de las paginas servidas. --mk-navy y --mk-accent son tokens exclusivos
   de ESTE archivo (comprobado: Karla no los declara), asi que el orden de
   carga no los puede secuestrar.

   CONTRASTES (calculados, WCAG 2.2 AA)
     #FFFFFF sobre #121E41 ....... 17.07:1  ✅ titulo
     #D9E2F2 sobre #121E41 ....... 13.10:1  ✅ cuerpo
     #74B9FF sobre #121E41 ........ 8.23:1  ✅ eyebrow / detalle
     #121E41 sobre #74B9FF ........ 8.23:1  ✅ boton en reposo
     #121E41 sobre #8FC7FF ........ 9.58:1  ✅ boton en hover
   ⛔ El #74B9FF sigue PROHIBIDO como texto sobre blanco (2.07:1). Aqui pasa
      solo porque el fondo es marino.
   ========================================================================= */

/* ------------------------------------------------------------ la tarjeta --
   Radio 26px y margin 8px 0 = exactamente los de .mk-sec-ba, que ya es el
   vocabulario de "bloque redondeado incrustado" de esta pagina. Sin margin
   horizontal: el bloque va a sangre con las esquinas redondeadas, igual que
   .mk-sec-ba y .mk-sec-steps-head. Cero riesgo de desbordamiento. */
.elementor-section.elementor-element.mk-sec.mk-cta-wa{
  --wa-fg:#FFFFFF;
  --wa-muted:#D9E2F2;          /* mismo valor que ya usan .mk-cta y .mk-band-navy */
  --wa-cyan-hi:#8FC7FF;        /* idem: el hover del .mk-btn de este archivo */

  background-color:var(--mk-navy);
  background-image:none;
  border-radius:26px;
  margin:8px 0;
  padding-top:var(--mk-sec-y);
  padding-bottom:var(--mk-sec-y);
  text-align:center;
}

/* -------------------------------------------------------------- titulo ---
   (0,5,1) le gana al (0,4,1) de Karla. Solo cambia el COLOR: el tamano, la
   familia y el peso se heredan de la pagina — Cali pidio no tocar pesos. */
.mk-sec.mk-cta-wa .elementor-widget.elementor-widget-heading h2.elementor-heading-title{
  color:var(--wa-fg);
  max-width:900px;             /* ~45 caracteres por renglon = 2 lineas */
  margin-inline:auto;
}

/* --------------------------------------------------------------- cuerpo --
   (0,5,0). OJO: la regla de Karla pone max-width:600px pero NO centra la
   caja, asi que en un bloque centrado el texto se pegaba a la izquierda.
   El margin-inline:auto es lo que lo arregla. */
.mk-sec.mk-cta-wa .elementor-widget.elementor-widget-text-editor .elementor-widget-container,
.mk-sec.mk-cta-wa .elementor-widget.elementor-widget-text-editor .elementor-widget-container p{
  color:var(--wa-muted);
}
.mk-sec.mk-cta-wa .elementor-widget.elementor-widget-text-editor .elementor-widget-container{
  max-width:720px;
  margin-inline:auto;
  text-wrap:balance;           /* 4 lineas centradas parejas, sin viudas */
}

/* eyebrow — (0,6,0). Karla la pinta #006FE0, que sobre marino da 3.54:1 y
   REPRUEBA. Sobre marino la unica azul que pasa es el acento (8.23:1).
   Se deja lista aunque el bloque de hoy no lleve eyebrow: la piel va
   completa para que manana se pueda encender sin volver a auditar. */
.mk-sec.mk-cta-wa .elementor-widget.elementor-widget-heading.mk-eyebrow .elementor-heading-title{
  color:var(--mk-accent);
}

/* la reglita azul, si se usa, tambien se centra */
.mk-sec.mk-cta-wa .elementor-widget.elementor-widget-divider{ margin-inline:auto; }

/* ---- pie de horario: dato ya publicado en esta misma pagina, no copy nuevo */
.mk-sec.mk-cta-wa .elementor-widget.elementor-widget-text-editor.mk-wa-horario .elementor-widget-container,
.mk-sec.mk-cta-wa .elementor-widget.elementor-widget-text-editor.mk-wa-horario .elementor-widget-container p{
  color:var(--wa-muted);
  font-size:15px;
  line-height:1.6;
  opacity:.82;
}

/* --------------------------------------------------------------- boton ---
   Habla el idioma de boton del TEMA, no el del .mk-btn de este archivo.
   El .mk-btn de aqui es radio 3px + MAYUSCULAS + tracking; los botones
   reales de este sitio (submit del formulario, "Contact us" del pie) son
   pastilla de 64px, redonda, en caja de oracion. Usar el .mk-btn aqui
   habria sido justo el "banner pegado" que Cali pidio evitar.
   El peso 500 NO es invento: es el que ya declara el tema para .button,
   input[type=submit] y .lte-btn. Se iguala, no se cambia. */
.mk-sec.mk-cta-wa .elementor-widget-button .elementor-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  box-sizing:border-box;
  max-width:100%;                        /* candado anti-desbordamiento */
  min-height:56px;                       /* 2.5.8 Target Size, con holgura */
  padding:19px 34px;
  border:0;
  border-radius:64px;                    /* la pastilla del tema */
  background-color:var(--mk-accent);
  color:var(--mk-navy);
  font-size:17px;
  font-weight:500;
  line-height:1.3;
  letter-spacing:0;
  text-transform:none;                   /* el sitio NO usa mayusculas en botones */
  text-decoration:none;
  white-space:normal;                    /* que parta renglon antes que desbordar */
  transition:background-color .2s ease;
}
.mk-sec.mk-cta-wa .elementor-widget-button .elementor-button:hover,
.mk-sec.mk-cta-wa .elementor-widget-button .elementor-button:focus{
  background-color:var(--wa-cyan-hi);
  color:var(--mk-navy);
}
/* 2.4.11 + 2.4.13: anillo blanco de 3px sobre marino = 17:1, imposible perderlo */
.mk-sec.mk-cta-wa .elementor-widget-button .elementor-button:focus-visible{
  outline:3px solid var(--wa-fg);
  outline-offset:3px;
}
/* el texto del boton hereda; que no lo pise ningun color del kit */
.mk-sec.mk-cta-wa .elementor-widget-button .elementor-button .elementor-button-text{
  color:inherit;
}

/* ---- glifo de WhatsApp, en mascara CSS ----------------------------------
   Va aqui y NO como icono de Elementor a proposito: esta pagina carga
   fontawesome + fa-solid, pero NO carga fa-brands. Meter el icono desde el
   widget obligaria a encolar la fuente de marcas (~130 KB) por un solo
   glifo. La mascara pesa ~1 KB, va dentro de este archivo y se pinta con
   currentColor, asi que sigue al boton en hover sin una regla extra.
   Todo dentro de @supports: si el navegador no soporta mascaras no se
   dibuja NADA (nunca un cuadro cian), y el boton sigue diciendo
   "...on WhatsApp", que es lo que carga el significado. */
@supports ((-webkit-mask-image:url("")) or (mask-image:url(""))){
  .mk-sec.mk-cta-wa .elementor-widget-button .elementor-button::before{
    content:"";
    flex:0 0 auto;
    width:22px;
    height:22px;
    background-color:currentColor;
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-position:center;  mask-position:center;
    -webkit-mask-size:contain;     mask-size:contain;
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z'/%3E%3C/svg%3E");
            mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z'/%3E%3C/svg%3E");
  }
}

/* respeta la preferencia del sistema (el bloque viejo tiene scope .mk-e y
   NO cubre a .mk-cta-wa, por eso se repite aqui) */
@media (prefers-reduced-motion:reduce){
  .mk-sec.mk-cta-wa .elementor-widget-button .elementor-button{ transition:none; }
}

/* ------------------------------------------------- tablet y movil --------
   El contrato de esta pagina son 0 px de desbordamiento a 390 y a 1440.
   A 390 el contenedor del tema mide 86% = ~335 px: el boton en una sola
   linea no cabria, por eso a partir de 767 pasa a bloque de ancho completo
   (ademas es lo comodo para el pulgar) y el texto puede partir renglon. */
@media (max-width:1024px){
  .elementor-section.elementor-element.mk-sec.mk-cta-wa{
    border-radius:18px;
    /* AIRE LATERAL — no es capricho.
       A <=767 Karla pone --mk-gap:0 y el contenedor del tema se va casi a
       sangre. En las demas secciones no se nota porque son transparentes: el
       texto respira contra el fondo de la pagina. Aqui HAY fondo, asi que sin
       este padding el texto queda besando el borde redondeado de la tarjeta.
       Se vio en la captura de 390 y por eso existen estas dos lineas. */
    padding-left:32px;
    padding-right:32px;
  }
  .mk-sec.mk-cta-wa .elementor-widget.elementor-widget-heading h2.elementor-heading-title{
    max-width:620px;
  }
}
@media (max-width:767px){
  .elementor-section.elementor-element.mk-sec.mk-cta-wa{
    padding-left:24px;
    padding-right:24px;
  }
  /* El boton pasa a bloque de ancho completo: es lo comodo para el pulgar y
     ademas evita el desbordamiento. La etiqueta completa
     "Chat with a specialist on WhatsApp" mide ~250 px a 16 px y con el glifo
     no cabia en una linea -> partia en dos. Bajando a 15 px, con 16 px de
     padding y 10 px de hueco, quedan ~26 px de holgura y entra de un renglon.
     No se acorta el texto: el texto es el que dice a donde va el boton. */
  .mk-sec.mk-cta-wa .elementor-widget-button .elementor-button{
    display:flex;
    width:100%;
    gap:10px;
    padding:19px 16px;
    font-size:15px;
    text-align:center;
  }
  .mk-sec.mk-cta-wa .elementor-widget-button .elementor-button::before{
    width:20px; height:20px;
  }
  .mk-sec.mk-cta-wa .elementor-widget.elementor-widget-text-editor .elementor-widget-container{
    max-width:100%;
  }
}