/* partials/modulos.html */
/* ============================================================
   RAÍZ DEL MÓDULO
   ============================================================ */
.xmod{
  /* ---- tipografía ---- */
  --titulo: 12px;
  --titulo-item: 13px;        /* nombre del servicio en la grilla */
  --cuerpo: 12px;

  /* ---- grilla ---- */
  --cols: 3;                  /* columnas de servicios (lo fija el script) */
  --col-panel: 27%;           /* ancho de la columna del beige */
  --gap-col: 3.4%;            /* separación entre columnas */
  --gap-fila: 26px;
  --gap-titulo: 30px;
  --gap-bloques: 72px;        /* aire entre Servicios y la banda de cifras */
  --margen: 2.2%;             /* margen lateral del contenido = grilla de casos */
  --sangria: 0px;             /* sangría extra del título "Servicios .X" */

  /* ---- foto del servicio ---- */
  --foto-ratio: 3 / 2;
  --foto-alto: 190px;         /* techo del alto de la foto */
  --foto-radio: 0px;
  --foto-gap: 14px;           /* foto → número */
  --foto-apagada: .45;        /* opacidad de las otras al hacer hover */

  /* ---- panel beige (solo texto) ---- */
  --panel-alto: 300px;        /* alto fijo del beige, no de la sección */
  --panel-radio: 20px;
  --panel-padding: 34px 30px;

  /* ---- ficha móvil ---- */
  --ficha-radio: 20px;
  --ficha-padding: 28px 22px 30px;
  --linea-movil: block;       /* none = móvil sin la línea descriptiva */

  /* ---- cifras ---- */
  --cx-num: 62px;             /* tamaño de los números */
  --cx-vel: 20s;              /* vuelta del carrusel de logos */
  --cx-logo: 22px;            /* techo de alto de los logos */
  --cx-gap: 92px;             /* separación entre cifras */
  --cx-ancho: 200px;          /* ancho máximo de cada cifra (limita la nota) */
  --cx-logo-invert: 1;        /* 1 = invierte los logos para el fondo negro · 0 = los deja tal cual */

  /* ---- bandas de fondo completo ---- */
  --banda-y: 40px;            /* aire abajo del beige (Diagnóstico) */
  --cx-arriba: 54px;          /* alto del negro sobre los números */
  --cx-abajo:  44px;          /* alto del negro bajo la franja de clientes */
  --negro:      #14110F;      /* fondo de la banda de cifras */
  --cx-blanco:  #F7F5F4;      /* textos sobre negro */
  --cx-acento:  #C4714F;      /* terracota aclarado: legible sobre negro */
  --cx-gris:    rgba(247,245,244,.58);
  --cx-linea:   rgba(247,245,244,.20);
  --banda-junta: 64px;        /* aire arriba del beige (costura negro / beige) */
  --dx-alto: auto;            /* auto = lo calcula el script · o un valor fijo: 210px */

  /* ---- color ---- */
  --acento:   #722B1A;
  --tinta:    #14110F;
  --gris:     #726C66;      /* 4.5:1 sobre el beige — mínimo legible */
  --beige:    #F3F2F1;
  --foto-bg:  #EDEBE9;
  --hairline: rgba(20,17,15,.12);

  box-sizing: border-box;
  width: 100%;
  padding: 0 var(--margen);   /* el contenido respeta el margen; las bandas no */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--tinta);
  -webkit-font-smoothing: antialiased;
}
.xmod *, .xmod *::before, .xmod *::after{ box-sizing: border-box; }

/* ============================================================
   BLOQUE 1 — SERVICIOS
   ============================================================ */
.xmod .sx-titulo{
  font-family: 'Syne', sans-serif;
  font-size: var(--titulo);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--acento);
  margin: 0 0 var(--gap-titulo);
  padding-left: var(--sangria);
}

.xmod .sx-stack{ display: block; }

/* la grilla usa todo el ancho: panel + N columnas iguales */
.xmod .sx-grid{
  display: grid;
  grid-template-columns: var(--col-panel) repeat(var(--cols), 1fr);
  column-gap: var(--gap-col);
  row-gap: var(--gap-fila);
  align-items: start;
}

.xmod .sx-panel-cel{
  grid-column: 1;
  display: flex;
  align-items: flex-start;    /* flex-start · center · stretch */
  align-self: stretch;
}
.xmod .sx-panel{
  position: relative;
  width: 100%;
  height: var(--panel-alto);
}
.xmod .sx-capa{
  position: absolute;
  inset: 0;
  background: var(--beige);
  border-radius: var(--panel-radio);
  padding: var(--panel-padding);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .32s ease, transform .32s ease;
  pointer-events: none;
}
.xmod .sx-capa.on{ opacity: 1; transform: none; }

.xmod .sx-capa-top,
.xmod .sx-capa-bot{ flex: 0 0 auto; }

.xmod .sx-capa-num{
  display: block;
  font-family: 'Syne', sans-serif;
  font-size: var(--cuerpo);
  font-weight: 600;
  letter-spacing: .05em;
  line-height: 1.2;
  color: var(--acento);
  margin-bottom: 14px;
}
.xmod .sx-capa h3{
  font-family: 'Syne', sans-serif;
  font-size: var(--titulo);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.35;
  margin: 0;
  color: var(--tinta);
}
.xmod .sx-capa-bot::before{
  content: '';
  display: block;
  height: 1px;
  background: var(--hairline);
  margin-bottom: 18px;
}
.xmod .sx-capa p{
  font-size: var(--cuerpo);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: .004em;
  margin: 0;
  color: var(--tinta);
}
.xmod .sx-capa p.sx-incluye{ margin-top: 15px; font-weight: 500; }

.xmod .sx-capa.sx-base{ justify-content: flex-end; }
.xmod .sx-base-t{
  font-family: 'Syne', sans-serif;
  font-size: var(--titulo);
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 12px;
}
.xmod .sx-base-h{
  font-size: var(--cuerpo);
  line-height: 1.3;
  color: var(--gris);
  margin: 0;
}

/* ---------- los seis servicios: foto + nombre ---------- */
.xmod .sx-item{
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.xmod .sx-item:focus{ outline: none; }

/* el hueco de la foto se reserva siempre: sin URL queda el gris,
   así el layout no salta mientras cargan las imágenes */
.xmod .sx-foto{
  aspect-ratio: var(--foto-ratio);
  max-height: var(--foto-alto);   /* techo: la foto no crece más */
  width: 100%;
  border-radius: var(--foto-radio);
  overflow: hidden;
  background: var(--foto-bg);
  margin-bottom: var(--foto-gap);
  transition: opacity .3s ease;
}
.xmod .sx-foto img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.xmod .sx-grid.hay .sx-item:not(.act) .sx-foto{ opacity: var(--foto-apagada); }

.xmod .sx-info{
  display: grid;
  grid-template-columns: 1fr 22px;
  align-items: start;
  gap: 10px;
}

.xmod .sx-num{
  display: block;
  font-size: var(--cuerpo);
  font-weight: 400;
  letter-spacing: .05em;
  line-height: 1.2;
  margin-bottom: 7px;
  transition: color .25s ease;
}
.xmod .sx-nombre{
  display: block;
  font-family: 'Syne', sans-serif;
  font-size: var(--titulo-item);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.24;
  transition: color .25s ease;
}

/* la línea descriptiva se oculta en escritorio: la cuenta el panel */
.xmod .sx-linea{
  display: none;
  font-size: var(--cuerpo);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: .004em;
  margin-top: 6px;
  transition: color .25s ease;
}

/* el (+) que gira a (x) */
.xmod .sx-mas{
  position: relative;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  justify-self: end;
  transition: transform .34s cubic-bezier(.4,0,.2,1);
}
.xmod .sx-mas::before,
.xmod .sx-mas::after{
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  background: var(--tinta);
  transition: background .25s ease;
}
.xmod .sx-mas::before{ width: 22px; height: 1px; transform: translate(-50%,-50%); }
.xmod .sx-mas::after { width: 1px; height: 22px; transform: translate(-50%,-50%); }

.xmod .sx-item.act .sx-nombre,
.xmod .sx-item.act .sx-num{ color: var(--acento); }
.xmod .sx-item.act .sx-mas{ transform: rotate(45deg); }
.xmod .sx-item.act .sx-mas::before,
.xmod .sx-item.act .sx-mas::after{ background: var(--acento); }
.xmod .sx-grid.hay .sx-item:not(.act) .sx-num,
.xmod .sx-grid.hay .sx-item:not(.act) .sx-linea{ color: var(--gris); }
.xmod .sx-item:focus-visible .sx-nombre{ color: var(--acento); }
.xmod .sx-item:focus-visible .sx-foto{ outline: 1px solid var(--acento); outline-offset: 3px; }

/* ---------- fichas móviles: ocultas en desktop ---------- */
.xmod .sx-fichas{ display: none; }

/* ============================================================
   BLOQUE 2 — CIFRAS
   ============================================================ */
/* la banda sangra a los dos lados con un fondo de 100vw detrás del
   contenido: el texto sigue alineado con la grilla del sitio.
   Requiere que el marco del widget en Readymag NO tenga overflow oculto. */
.xmod .cx-wrap{
  position: relative;
  width: 100%;
  margin-top: var(--gap-bloques);
  padding: var(--cx-arriba) 0 var(--cx-abajo);
  color: var(--cx-blanco);
}
.xmod .cx-wrap::before{
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 100vw;
  max-width: 100vw;
  transform: translateX(-50%);
  background: var(--negro);
  z-index: 0;
}
.xmod .cx-wrap > *{ position: relative; z-index: 1; }

/* --- números --- */
/* el grupo va centrado en la banda, con la misma separación entre
   cifras; text-align: left si las prefieres alineadas a la izquierda */
.xmod .cx-nums{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  column-gap: var(--cx-gap);
  row-gap: 30px;
  margin-bottom: 44px;
}
.xmod .cx-num{
  flex: 0 0 auto;
  max-width: var(--cx-ancho);
  text-align: center;
  cursor: default;
}
.xmod .cx-n{
  display: block;
  font-family: 'Syne', sans-serif;
  font-size: var(--cx-num);
  font-weight: 600;
  line-height: .9;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
  transition: color .25s ease;
}
.xmod .cx-num:hover .cx-n{ color: var(--cx-acento); }
.xmod .cx-lb{
  display: block;
  font-family: 'Syne', sans-serif;
  font-size: var(--titulo-item);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.24;
  margin-top: 14px;
}
.xmod .cx-nt{
  display: block;
  font-size: var(--cuerpo);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: .004em;
  color: var(--cx-gris);
  margin-top: 6px;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity .28s ease, transform .28s ease;
}
.xmod .cx-num:hover .cx-nt{ opacity: 1; transform: none; }

/* --- franja de clientes --- */
.xmod .cx-rail{
  border-top: 1px solid var(--cx-linea);
  border-bottom: 1px solid var(--cx-linea);
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 14px 0;
  overflow: hidden;
}
.xmod .cx-rail-t{
  font-family: 'Syne', sans-serif;
  font-size: var(--titulo);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.3;
  color: var(--cx-acento);
  flex: 0 0 auto;
  white-space: nowrap;
}
.xmod .cx-mask{
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg,transparent 0,#000 26px,#000 calc(100% - 40px),transparent 100%);
          mask-image: linear-gradient(90deg,transparent 0,#000 26px,#000 calc(100% - 40px),transparent 100%);
}
.xmod .cx-track{
  display: flex;
  align-items: center;
  width: max-content;
  animation: cx-slide var(--cx-vel) linear infinite;
}
.xmod .cx-mask:hover .cx-track{ animation-play-state: paused; }
.xmod .cx-logo{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 30px;
  opacity: .5;
  transition: opacity .22s ease;
}
.xmod .cx-logo:hover{ opacity: 1; }
.xmod .cx-logo img{
  width: auto;
  max-height: var(--cx-logo);
  display: block;
  /* los logos oscuros se invierten para leerse sobre el negro */
  filter: grayscale(1) brightness(0) invert(var(--cx-logo-invert));
  transition: opacity .22s ease;
}
.xmod .cx-wm{
  font-family: 'Syne', sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1;
  white-space: nowrap;
}
@keyframes cx-slide{
  from{ transform: translate3d(0,0,0); }
  to  { transform: translate3d(-50%,0,0); }
}

/* ============================================================
   BLOQUE 3 — DIAGNÓSTICO
   ============================================================ */
.xmod .dx-wrap{
  --dx-fondo: var(--beige);      /* mismo beige del panel de servicios */
  --dx-tinta: var(--tinta);
  --texto-2:  #4A4441;           /* texto secundario */
  --texto-3:  var(--gris);       /* etiquetas y pasos */
  --linea:    var(--hairline);
  --borde:    rgba(20,17,15,.22);
  position:relative;
  width:100%;
  margin-top: 0;                              /* pegado a la banda de cifras */
  padding: var(--banda-junta) 0 var(--banda-y);
  /* el alto lo fija el script y no vuelve a cambiar; el bloque
     completo se centra dentro de ese alto */
  display:flex;
  align-items:center;
}
/* misma técnica que la banda de cifras: fondo de 100vw detrás */
.xmod .dx-wrap::before{
  content:'';
  position:absolute;
  top:0; bottom:0;
  left:50%;
  width:100vw;
  max-width:100vw;
  transform:translateX(-50%);
  background:var(--dx-fondo);
  z-index:0;
}
.xmod .dx-card{
  position:relative;
  z-index:1;
  width:100%;
  background:none;
  border-radius:0;
  padding:0;
  display:flex;
  flex-direction:column;
}
.xmod .dx-top{display:flex; justify-content:space-between; align-items:baseline; gap:24px}
.xmod .dx-head{min-width:0}
.xmod .dx-label{
  font-family:'Syne',sans-serif;
  font-weight:500;
  font-size:14px;
  letter-spacing:0.01em;
  color:var(--acento);
  margin:0;
}
.xmod .dx-label span{color:var(--texto-3)}

/* bajada: explica en una línea qué es el test */
.xmod .dx-bajada{
  font-size:13px;
  line-height:1.45;
  color:var(--texto-2);
  max-width:34em;
  margin:9px 0 0;
}
/* en el resultado la bajada no se lee, pero conserva su espacio:
   así la banda beige nunca cambia de alto */
.xmod.dx-fin .dx-bajada{visibility:hidden}

.xmod .dx-step{
  font-family:'Syne',sans-serif;
  font-weight:500;
  font-size:14px;
  letter-spacing:0.06em;
  color:var(--texto-3);
  margin:0;
  flex:0 0 auto;
  white-space:nowrap;
}
.xmod .dx-track{
  position:relative;
  height:1px;
  background:var(--linea);
  margin:16px 0 0;
}
.xmod .dx-fill{
  position:absolute;
  inset:0 auto 0 0;
  width:0%;
  background:var(--acento);
  transition:width .45s cubic-bezier(.2,.7,.3,1);
}

/* el stage ocupa lo que ocupa: el alto fijo vive en .dx-wrap, así el
   aire sobrante se reparte arriba y abajo del bloque completo. */
.xmod .dx-stage{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding:26px 0 0;
  transition:opacity .22s ease,transform .22s ease;
}
.xmod .dx-stage.dx-out{opacity:0; transform:translateY(-6px)}
.xmod .dx-quiz,
.xmod .dx-res{display:flex; flex-direction:column; align-items:flex-start}
.xmod .dx-q{
  font-size:16px;
  font-weight:400;
  line-height:1.22;
  letter-spacing:-0.01em;
  color:var(--dx-tinta);
  max-width:30em;
  margin:0 0 10px;
}
.xmod .dx-hint{
  font-size:13px;
  line-height:1.5;
  color:var(--texto-3);
  max-width:32em;
  margin:0;
  min-height:1.5em;          /* la aclaración no mueve los botones */
}
.xmod .dx-opts{display:flex; gap:12px; margin-top:22px}
.xmod .dx-opt{
  font-family:inherit;
  font-size:14px;
  color:var(--texto-2);
  background:transparent;
  border:0.5px solid var(--borde);
  border-radius:999px;
  padding:13px 40px;
  cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.xmod .dx-opt:hover{border-color:var(--acento); color:var(--acento)}
.xmod .dx-opt:focus-visible{outline:2px solid var(--acento); outline-offset:3px}
.xmod .dx-opt[aria-pressed="true"]{background:var(--acento); border-color:var(--acento); color:#F7F5F4}
.xmod .dx-back{
  font-family:inherit;
  font-size:13px;
  color:var(--texto-3);
  background:transparent;
  border:none;
  padding:0;
  margin-top:20px;
  cursor:pointer;
  visibility:hidden;         /* hidden, no display: reserva su espacio */
  align-self:flex-start;
  border-bottom:0.5px solid transparent;
}
.xmod .dx-back.dx-on{visibility:visible}
.xmod .dx-back:hover{color:var(--texto-2); border-bottom-color:var(--linea)}

/* ---- resultado comprimido para caber en el alto de la pregunta ---- */
.xmod .dx-eyebrow{
  font-family:'Syne',sans-serif;
  font-weight:500;
  font-size:13px;
  letter-spacing:0.06em;
  color:var(--texto-3);
  margin:0 0 8px;
}
.xmod .dx-verdict{
  font-family:'Syne',sans-serif;
  font-weight:500;
  font-size:18px;
  line-height:1.15;
  letter-spacing:-0.02em;
  color:var(--dx-tinta);
  margin:0 0 10px;
  max-width:30em;
}
.xmod .dx-text{
  font-size:12.5px;
  line-height:1.5;
  color:var(--texto-2);
  max-width:58em;            /* más ancho = menos líneas = menos alto */
  margin:0 0 18px;
}
.xmod .dx-actions{display:flex; align-items:center; gap:22px; flex-wrap:wrap}
.xmod .dx-wa{
  font-family:inherit;
  font-size:14px;
  color:#F7F5F4;
  background:var(--acento);
  border-radius:999px;
  padding:12px 30px;
  text-decoration:none;
  transition:transform .18s ease;
}
.xmod .dx-wa:active{transform:scale(.98)}
.xmod .dx-again{
  font-family:inherit;
  font-size:13px;
  color:var(--texto-3);
  background:transparent;
  border:none;
  border-bottom:0.5px solid var(--linea);
  padding:2px 0;
  cursor:pointer;
}
.xmod .dx-again:hover{color:var(--texto-2)}
.xmod .dx-hide{display:none !important}

/* ============================================================
   INTERMEDIO — dos columnas de servicios
   ============================================================ */
.xmod.sx-med{
  --col-panel: 30%;
  --gap-col: 4%;
  --gap-fila: 22px;
  --foto-alto: 165px;
  --panel-alto: 280px;
  --titulo-item: 12px;
  --panel-padding: 28px 24px;
  --gap-bloques: 76px;
  --cx-num: 50px;
  --cx-gap: 58px;
  --banda-y: 36px;
  --banda-junta: 52px;
  --cx-arriba: 130px;
  --cx-abajo:  108px;
}
.xmod.sx-med .cx-nums{ row-gap: 26px; margin-bottom: 38px; }
.xmod.dx-w-md .dx-card{padding:0}
.xmod.dx-w-md .dx-q{font-size:17px}
.xmod.dx-w-md .dx-stage{padding-top:30px}

/* ============================================================
   MÓVIL — SERVICIOS: la ficha reemplaza la lista
   ============================================================ */
.xmod.sx-mini{ --gap-bloques: 56px; --titulo-item: 13px; --foto-ratio: 16 / 10; --foto-alto: 260px; --cx-num: 42px; --cx-gap: 30px; --cx-ancho: 150px; --banda-y: 32px; --banda-junta: 44px; --cx-arriba: 96px; --cx-abajo: 80px; --margen: 5%; }
.xmod.sx-mini .sx-titulo{ margin-bottom: 24px; padding-left: 0; }
.xmod.sx-mini .sx-panel-cel{ display: none; }
.xmod.sx-mini .sx-nombre br{ display: none; }
.xmod.sx-mini .sx-linea{ display: var(--linea-movil); }

.xmod.sx-mini .sx-stack{ position: relative; }

.xmod.sx-mini .sx-grid{
  grid-template-columns: 1fr;
  row-gap: 34px;
}
.xmod.sx-mini .sx-item{
  grid-column: 1 !important;
  grid-row: auto !important;
}

/* la ficha flota SOBRE el servicio que tocaste.
   Al estar fuera del flujo, el alto del bloque no cambia nunca. */
.xmod.sx-mini .sx-fichas{
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}
.xmod.sx-mini .sx-ficha{
  position: absolute;
  left: 0; right: 0; top: 0;
  background: var(--beige);
  border-radius: var(--ficha-radio);
  padding: var(--ficha-padding);
  box-shadow: 0 16px 44px rgba(20,17,15,.13);
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity .24s ease, transform .24s ease;
}
.xmod.sx-mini .sx-ficha.on{
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.xmod .sx-f-num{
  display: block;
  font-family: 'Syne', sans-serif;
  font-size: var(--cuerpo);
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--acento);
  margin-bottom: 12px;
}
.xmod .sx-f-tit{
  font-family: 'Syne', sans-serif;
  font-size: var(--titulo);
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 16px;
  padding-right: 34px;
}
.xmod .sx-f-p{
  font-size: var(--cuerpo);
  line-height: 1.4;
  margin: 0;
}
.xmod .sx-f-p.sx-incluye{ margin-top: 14px; font-weight: 500; }

.xmod .sx-cerrar{
  position: absolute;
  top: 24px;
  right: 20px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.xmod .sx-cerrar::before,
.xmod .sx-cerrar::after{
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 20px; height: 1px;
  background: var(--acento);
}
.xmod .sx-cerrar::before{ transform: translate(-50%,-50%) rotate(45deg); }
.xmod .sx-cerrar::after { transform: translate(-50%,-50%) rotate(-45deg); }

/* ============================================================
   MÓVIL — CIFRAS
   ============================================================ */
.xmod.sx-mini .cx-nums{ row-gap: 26px; margin-bottom: 32px; }
.xmod.sx-mini .cx-nt{ opacity: 1; transform: none; }   /* sin hover: siempre visible */
.xmod.sx-mini .cx-rail{
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 0;
}
.xmod.sx-mini .cx-mask{ width: 100%; flex: 0 0 auto; }
.xmod.sx-mini .cx-logo{ padding: 0 20px; }
.xmod.sx-mini .cx-wm{ font-size: 16px; }

/* ============================================================
   MÓVIL — DIAGNÓSTICO
   ============================================================ */
.xmod.dx-w-sm .dx-card{padding:0}
.xmod.dx-w-sm .dx-bajada{font-size:12.5px; max-width:100%; margin-top:8px}
.xmod.dx-w-sm .dx-stage{padding-top:26px}
.xmod.dx-w-sm .dx-q{font-size:17px; line-height:1.35; max-width:100%}
.xmod.dx-w-sm .dx-hint{font-size:12px; max-width:100%}
.xmod.dx-w-sm .dx-opts{gap:10px; margin-top:24px; align-self:stretch}
.xmod.dx-w-sm .dx-opt{flex:1; padding:14px 0; text-align:center}
.xmod.dx-w-sm .dx-back{margin-top:22px}
.xmod.dx-w-sm .dx-eyebrow{font-size:12px; margin-bottom:8px}
.xmod.dx-w-sm .dx-verdict{font-size:17px; margin-bottom:10px}
.xmod.dx-w-sm .dx-text{font-size:12.5px; line-height:1.45; margin-bottom:18px}
.xmod.dx-w-sm .dx-actions{flex-direction:column; align-items:stretch; gap:12px; align-self:stretch}
.xmod.dx-w-sm .dx-wa{text-align:center}
.xmod.dx-w-sm .dx-again{align-self:center}

@media (prefers-reduced-motion: reduce){
  .xmod *{ transition: none !important; }
  .xmod .cx-track{ animation: none !important; }
  .xmod .cx-nt{ opacity: 1; transform: none; }
}

/* partials/metodo.html */
.mx-metodo, .mx-metodo *, .mx-metodo *::before, .mx-metodo *::after{
  box-sizing:border-box; margin:0; padding:0;
}

.mx-metodo{
  /* ---- tipografía ---- */
  --titulo: 14px;
  --cuerpo: 12px;

  /* ---- color ---- */
  --acento:   #722B1A;
  --tinta:    #14110F;
  --gris:     #9A948E;
  --hairline: rgba(20,17,15,.12);

  /* ---- geometría ---- */
  --gap-col:  6.35%;
  --gap-head: 40px;

  width:100%;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--tinta);
  background:#fff;
  -webkit-font-smoothing:antialiased;
  padding:4px 0 8px;
}

/* ---------- encabezado ---------- */
.mx-metodo .mx-head{ margin-bottom:var(--gap-head); }

.mx-metodo .mx-kicker{
  display:block;
  font-family:'Syne',sans-serif;
  font-size:var(--titulo);
  font-weight:600;
  letter-spacing:0;
  line-height:1.35;
  color:var(--acento);
  margin-bottom:8px;
}

.mx-metodo .mx-bajada{
  font-size:var(--cuerpo);
  font-weight:400;
  line-height:1.3;
  letter-spacing:.004em;
  color:var(--gris);
}

/* ---------- línea de avance ---------- */
.mx-metodo .mx-linea{
  position:relative;
  height:1px;
  background:var(--hairline);
  margin-bottom:24px;
}
.mx-metodo .mx-avance{
  position:absolute; left:0; top:0;
  height:1px; width:0;
  background:var(--acento);
  transition:width .55s cubic-bezier(.22,.61,.36,1);
}

/* ---------- las cuatro fases ---------- */
.mx-metodo .mx-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  column-gap:var(--gap-col);
}

.mx-metodo .mx-fase{
  transition:opacity .4s ease;
  cursor:default;
}
.mx-metodo .mx-fase:focus{ outline:none; }

.mx-metodo .mx-num{
  display:block;
  font-family:'Syne',sans-serif;
  font-size:var(--cuerpo);
  font-weight:600;
  letter-spacing:.05em;
  line-height:1.2;
  color:var(--gris);
  margin-bottom:14px;
  transition:color .35s ease;
}

.mx-metodo .mx-nombre{
  font-family:'Syne',sans-serif;
  font-size:var(--titulo);
  font-weight:600;
  letter-spacing:0;
  line-height:1.35;
  color:var(--tinta);
  margin-bottom:12px;
  min-height:2.7em;   /* dos líneas: alinea las bajadas aunque "punto X" baje */
}

.mx-metodo .mx-texto{
  font-size:var(--cuerpo);
  font-weight:400;
  line-height:1.3;
  letter-spacing:.004em;
  color:var(--tinta);
  opacity:0;
  transform:translateY(5px);
  transition:opacity .32s ease, transform .32s ease;
}

/* ---------- estado activo ---------- */
.mx-metodo.mx-listo .mx-fase.on .mx-num{ color:var(--acento); }
.mx-metodo.mx-listo .mx-fase.on .mx-texto{ opacity:1; transform:none; }
.mx-metodo.mx-listo .mx-grid:hover .mx-fase:not(.on){ opacity:.38; }

/* ---------- tablet ---------- */
.mx-metodo.mx-w-md .mx-grid{
  grid-template-columns:repeat(2,1fr);
  row-gap:36px;
}

/* ---------- phone: todo abierto, sin hover ---------- */
.mx-metodo.mx-w-sm .mx-head{ margin-bottom:28px; }
.mx-metodo.mx-w-sm .mx-linea{ display:none; }
.mx-metodo.mx-w-sm .mx-grid{ grid-template-columns:1fr; column-gap:0; }
.mx-metodo.mx-w-sm .mx-fase{
  padding:20px 0;
  border-top:1px solid var(--hairline);
}
.mx-metodo.mx-w-sm .mx-fase:last-child{ border-bottom:1px solid var(--hairline); }
.mx-metodo.mx-w-sm .mx-num{ color:var(--acento); margin-bottom:10px; }
.mx-metodo.mx-w-sm .mx-nombre{ margin-bottom:9px; min-height:0; }
.mx-metodo.mx-w-sm .mx-texto{ opacity:1; transform:none; }
.mx-metodo.mx-w-sm .mx-grid:hover .mx-fase:not(.on){ opacity:1; }

@media (prefers-reduced-motion:reduce){
  .mx-metodo *{ transition-duration:.01ms !important; }
}

/* partials/blog-strip.html */
.nxmod{
  /* ---- tipografía ---- */
  --titulo: 13px;
  --titulo-item: 15px;
  --cuerpo: 12px;

  /* ---- grilla ---- */
  --cols: 4;
  --gap-col: 3.4%;
  --gap-fila: 40px;
  --gap-titulo: 30px;
  --sangria: 0px;

  /* ---- foto ---- */
  --foto-ratio: 3 / 2;
  --foto-alto: 170px;         /* techo del alto de la foto */
  --foto-radio: 4px;
  --foto-gap: 16px;
  --foto-apagada: .45;

  /* ---- color ---- */
  --acento:   #722B1A;
  --tinta:    #14110F;
  --gris:     #9A948E;
  --foto-bg:  #EDEBE9;
  --hairline: rgba(20,17,15,.12);

  box-sizing: border-box;
  width: 100%;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--tinta);
  -webkit-font-smoothing: antialiased;
}
.nxmod *, .nxmod *::before, .nxmod *::after{ box-sizing: border-box; }

/* ---------- encabezado ---------- */
.nxmod .nx-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 var(--gap-titulo);
  padding: 0 var(--sangria);
}
.nxmod .nx-titulo{
  font-family: 'Syne', sans-serif;
  font-size: var(--titulo);
  font-weight: 600;
  color: var(--acento);
  margin: 0;
}
/* ---------- ver todos ---------- */
.nxmod .nx-todos{
  flex: 0 0 auto;
  font-size: var(--cuerpo);
  letter-spacing: .02em;
  line-height: 1.2;
  color: var(--gris);
  text-decoration: none;
  transition: color .25s ease;
}
.nxmod .nx-todos:hover,
.nxmod .nx-todos:focus-visible{ color: var(--acento); outline: none; }

/* ---------- grilla ---------- */
.nxmod .nx-grid{
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  column-gap: var(--gap-col);
  row-gap: var(--gap-fila);
  align-items: start;
}

.nxmod .nx-nota{
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.nxmod .nx-nota.nx-quieta{ cursor: default; }

/* el hueco de la foto se reserva siempre: sin URL queda el gris,
   así el layout no salta mientras cargan las imágenes */
.nxmod .nx-foto{
  aspect-ratio: var(--foto-ratio);
  max-height: var(--foto-alto);
  width: 100%;
  border-radius: var(--foto-radio);
  overflow: hidden;
  background: var(--foto-bg);
  margin-bottom: var(--foto-gap);
  transition: opacity .3s ease;
}
.nxmod .nx-foto img{
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}
.nxmod .nx-grid.nx-hay .nx-nota:not(.nx-act) .nx-foto{ opacity: var(--foto-apagada); }

.nxmod .nx-meta{
  display: block;
  font-size: var(--cuerpo);
  letter-spacing: .04em;
  line-height: 1.2;
  color: var(--gris);
  margin-bottom: 8px;
  transition: color .25s ease;
}
.nxmod .nx-tit{
  display: block;
  font-family: 'Syne', sans-serif;
  font-size: var(--titulo-item);
  font-weight: 600;
  line-height: 1.26;
  margin: 0 0 8px;
  transition: color .25s ease;
}
.nxmod .nx-bajada{
  display: block;
  font-size: var(--cuerpo);
  line-height: 1.4;
  color: var(--gris);
  margin: 0;
  transition: color .25s ease;
}
.nxmod .nx-nota.nx-act .nx-tit,
.nxmod .nx-nota.nx-act .nx-meta{ color: var(--acento); }
.nxmod .nx-nota:focus-visible{ outline: none; }
.nxmod .nx-nota:focus-visible .nx-tit{ color: var(--acento); }
.nxmod .nx-nota:focus-visible .nx-foto{ outline: 1px solid var(--acento); outline-offset: 3px; }

/* ---------- intermedio · dos columnas ---------- */
.nxmod.nx-med{
  --gap-col: 3%;
  --gap-fila: 34px;
  --foto-alto: 200px;
  --titulo-item: 14px;
  --cuerpo: 11.5px;
}

/* ---------- móvil ---------- */
.nxmod.nx-mini{
  --gap-fila: 34px;
  --foto-ratio: 16 / 10;
  --foto-alto: 240px;
  --gap-titulo: 24px;
  --sangria: 0px;
}

@media (prefers-reduced-motion: reduce){
  .nxmod *{ transition: none !important; }
}

/* partials/instagram.html */
.sx-ig{
  /* ---- tipografía ---- */
  --titulo: 13px;
  --cuerpo: 12px;

  /* ---- grilla ---- */
  --cols: 4;
  --gap: 14px;
  --radio: 10px;

  /* ---- color ---- */
  --acento:   #722B1A;
  --tinta:    #14110F;
  --gris:     #9A948E;
  --beige:    #F3F2F1;
  --hairline: rgba(20,17,15,.12);

  box-sizing: border-box;
  width: 100%;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--tinta);
  -webkit-font-smoothing: antialiased;
}
.sx-ig *, .sx-ig *::before, .sx-ig *::after{ box-sizing: border-box; }

/* ---------- encabezado ---------- */
.sx-ig .sx-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.sx-ig .sx-head-t{
  font-family: 'Syne', sans-serif;
  font-size: var(--titulo);
  font-weight: 600;
  color: var(--acento);
  margin: 0;
}
.sx-ig .sx-head-a{
  font-size: var(--cuerpo);
  color: var(--gris);
  text-decoration: none;
  transition: color .25s ease;
  white-space: nowrap;
}
.sx-ig .sx-head-a:hover{ color: var(--acento); }
.sx-ig .sx-head-a span{
  display: inline-block;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.sx-ig .sx-head-a:hover span{ transform: translateX(4px); }

/* ---------- grilla ---------- */
.sx-ig .sx-feed{
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: var(--gap);
}

.sx-ig .sx-post{
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--beige);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.sx-ig .sx-post img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity .5s ease, transform .6s cubic-bezier(.4,0,.2,1);
}
.sx-ig .sx-post img.ok{ opacity: 1; transform: none; }
.sx-ig .sx-post:hover img{ transform: scale(1.04); }

/* velo + signo, mismo lenguaje que Servicios .X */
.sx-ig .sx-velo{
  position: absolute;
  inset: 0;
  background: rgba(114,43,26,.82);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.sx-ig .sx-post:hover .sx-velo,
.sx-ig .sx-post:focus-visible .sx-velo{ opacity: 1; }

.sx-ig .sx-fecha{
  position: absolute;
  left: 14px;
  bottom: 12px;
  right: 14px;
  font-size: 11px;
  letter-spacing: .04em;
  color: #fff;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}
.sx-ig .sx-post:hover .sx-fecha,
.sx-ig .sx-post:focus-visible .sx-fecha{ opacity: 1; transform: none; }

/* marca de video */
.sx-ig .sx-play{
  position: absolute;
  top: 12px; right: 12px;
  width: 0; height: 0;
  border-left: 9px solid #fff;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.35));
  pointer-events: none;
}

/* ---------- esqueleto de carga ---------- */
.sx-ig .sx-skel{
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radio);
  background: var(--beige);
  overflow: hidden;
}
.sx-ig .sx-skel::after{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
  transform: translateX(-100%);
  animation: sx-brillo 1.5s infinite;
}
@keyframes sx-brillo{ to{ transform: translateX(100%); } }

/* ---------- error ---------- */
.sx-ig .sx-error{
  grid-column: 1 / -1;
  padding: 26px 0;
  border-top: 1px solid var(--hairline);
  font-size: var(--cuerpo);
  color: var(--gris);
}
.sx-ig .sx-error a{ color: var(--acento); text-decoration: none; }
.sx-ig .sx-error a:hover{ text-decoration: underline; }

/* ---------- móvil: el widget se pone .sx-mini solo ---------- */
.sx-ig.sx-mini{ --cols: 2; --gap: 10px; }
.sx-ig.sx-mini .sx-head{ margin-bottom: 16px; }

@media (prefers-reduced-motion: reduce){
  .sx-ig *{ transition: none !important; animation: none !important; }
}