/* Correcciones de encuadre revisadas en escritorio y móvil · 08-oct-2026. */

/* El detalle de pagos vive en Estimación, dentro del área que se desplaza.
   El pie reserva únicamente total y avance, dejando espacio para las telas. */
/* Titulos reales en Anton; etiquetas y acciones mantienen Archivo. */
html body:is([data-ens-page="guide-design"], [data-ens-page="guide-sizing"], [data-ens-page="faq"])
  #main-content#main-content :is(h1, h2, h3, h4, h5, h6, table caption),
html body[data-ens-page="faq"] #main-content .faq-hub__section details > summary {
  font-family: "Anton", sans-serif !important;
  font-weight: 400 !important;
}

/* Aire en la respuesta abierta, conservando la escala de lectura. */
html body[data-ens-page="faq"] #main-content .faq-hub__section details > summary {
  padding: 16px !important;
  line-height: 1.4 !important;
}

html body[data-ens-page="faq"] #main-content .faq-hub__section details > p {
  max-width: 72ch;
  margin: 0 !important;
  padding: 0 16px 20px !important;
  line-height: 1.6 !important;
}

html body[data-ens-page="faq"] #main-content .guide-heading > p,
html body[data-ens-page="guide-design"] #main-content#main-content :is(.gd-topic > p:last-child, .gd-terms__rows p, .gd-terms__note p, .gd-bases__lead) {
  line-height: 1.55 !important;
}

html body[data-ens-page="guide-design"] #main-content#main-content .gd-terms__rows h3 {
  margin-bottom: 10px !important;
}

/* Filas y notas de tallas con aire, manteniendo los datos publicados. */
html body[data-ens-page="guide-sizing"] #main-content#main-content :is(.gx-lead, .gx-regla-oro, .gx-tabla-nota, .gx-size-note) {
  line-height: 1.55 !important;
}

html body[data-ens-page="guide-sizing"] #main-content#main-content .gx-tabla :is(th, td) {
  padding: 10px 14px !important;
  line-height: 1.5 !important;
}

html body[data-ens-page="guide-sizing"] #main-content#main-content .gx-tabla tbody :is(th, td) {
  height: 44px !important;
}

html body #contacto .camino-tela__foto {
  display: block;
  width: 100%;
  height: clamp(100px, 15svh, 150px);
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 8px;
}

html body #contacto .quote-fabric-choice-note {
  display: block;
  margin-top: 6px;
  color: #625e5a;
  font-size: 14px;
  line-height: 1.4;
}

html body #contacto .camino-ensutex__title {
  font: 400 24px/1.15 var(--mk-display, "Anton", sans-serif) !important;
  text-transform: uppercase !important;
  margin: 0 0 12px !important;
}

html body #contacto .quote-fabric-samples {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

html body #contacto .quote-fabric-samples > span { min-width: 0; }

html body #contacto [data-path-screen="tallas"] .quote-payment-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 20px 0 0 !important;
  padding: 16px;
  border: 1px solid #e7e4e0;
  border-radius: 14px;
  background: #faf8f7;
}

html body #contacto [data-path-screen="tallas"] .quote-payment-summary .qps-fila {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px;
  font-size: 14px !important;
  line-height: 1.45;
}

html body #contacto [data-path-screen="tallas"] .qps-fila em {
  display: block;
  font-style: normal;
  color: #625e5a;
}

html body #contacto [data-path-screen="tallas"] .qps-fila strong {
  font-size: 20px !important;
  color: #171514;
}

html body #contacto [data-path-screen="tallas"] .qps-plazo {
  display: block;
  grid-column: 1 / -1;
  font-size: 14px !important;
}

@media (max-width: 767px) {
  html body #contacto [data-path-screen="tallas"] .quote-payment-summary {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Encadre del uniforme completo sin la franja negra de origen del video. */
html body[data-ens-page="faq"] .guide-media--portrait .guide-media__stage video {
  transform: scale(1.055);
  transform-origin: center;
}

@media (max-width: 899px) {
  html body[data-ens-page="faq"] .guide-media--portrait {
    width: min(100%, 256px) !important;
    justify-self: center;
  }
  html body[data-ens-page="faq"] .guide-media--portrait .guide-media__stage {
    aspect-ratio: 9 / 16;
  }
  html body[data-ens-page="faq"] .guide-media--portrait .guide-media__stage video {
    object-fit: contain;
  }
  html body[data-ens-page="guide-sizing"] .gx-hero__media {
    width: min(100%, 300px) !important;
    justify-self: center !important;
  }
}

/* Proceso: título alineado al eje de la imagen, escena con aire antes de entrar y
   todo el paso visible incluso en ventanas de escritorio bajas. El motor de scroll
   existente conserva el cambio sincronizado de imagen y copy en móvil. */
@media (min-width: 900px) {
  html body.ensutex-home:not(.mf):not(.rx) #proceso.proceso {
    margin-top: clamp(28px, 4svh, 48px) !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-escena {
    padding-inline: clamp(24px, 4vw, 64px) !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cab {
    width: min(100%, 1280px);
    align-items: flex-start;
    margin: 0 auto clamp(8px, 1.2svh, 14px);
    text-align: left;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cab .seo-tema {
    margin: 0 0 clamp(4px, .8svh, 8px) !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cab h2 {
    max-width: 24ch !important;
    font-size: clamp(28px, min(3.2vw, 5.4svh), 44px) !important;
    line-height: 1.02 !important;
    text-align: left;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cuerpo {
    --p-renglon: 42px;
    --p-subida: 8px;
    width: min(100%, 1280px);
    min-height: clamp(360px, 58svh, 520px);
    align-content: start;
    grid-template-rows: auto calc(4 * var(--p-renglon) + var(--p-subida)) auto auto auto minmax(0, 1fr);
    column-gap: clamp(28px, 4vw, 56px);
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-lamina {
    grid-row: 1 / -1;
    height: min(58svh, 520px) !important;
    min-height: 0;
    align-self: start;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-etiqueta {
    grid-row: 1;
    margin: 0 0 2px !important;
    font-size: 13px !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-titulo {
    grid-row: 2;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-bajada {
    grid-row: 3;
    margin-bottom: clamp(4px, .8svh, 9px) !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-puntos {
    grid-row: 4;
    gap: clamp(4px, .65svh, 8px) !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-puntos li {
    font-size: clamp(15px, 1.25vw, 18px) !important;
    line-height: 1.3 !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cta {
    grid-row: 5;
    margin-top: clamp(4px, .7svh, 8px) !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cuerpo::before {
    content: "";
    grid-column: 2;
    grid-row: 3 / 6;
    min-height: 0;
    border: 1px solid #e8e4e2;
    border-top: 3px solid #e20613;
    border-radius: 18px;
    background: #faf8f7;
    pointer-events: none;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-bajada {
    padding: 18px 24px 0;
    margin-inline: 0 !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-puntos {
    padding-inline: 24px;
    margin-inline: 0 !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-cta {
    margin-left: 24px !important;
    margin-bottom: 18px !important;
  }
}

/* Ventanas de escritorio muy bajas: conserva los cuatro pasos y el CTA dentro
   de la escena, reduciendo ritmo y tamaños de copy antes de permitir recortes. */
@media (min-width: 900px) and (max-height: 520px) {
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cuerpo {
    min-height: 0;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-lamina {
    height: min(58svh, 280px) !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-escena {
    padding-top: 4px !important;
    padding-bottom: 6px !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cab {
    margin-bottom: 4px !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cab .seo-tema {
    margin-bottom: 2px !important;
    padding-block: 4px;
    font-size: 11px !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cab h2 {
    font-size: clamp(23px, 2vw, 28px) !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cuerpo {
    --p-renglon: 28px;
    --p-subida: 6px;
    row-gap: 1px;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-titulo {
    font-size: clamp(22px, 1.8vw, 26px) !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-bajada {
    margin-bottom: 4px;
    font-size: 15px;
    line-height: 1.25;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-puntos {
    gap: 3px;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-puntos li {
    font-size: 14px !important;
    line-height: 1.25 !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cta {
    min-height: 36px;
    margin-top: 4px;
    padding-inline: 18px;
  }
}

/* Guías: texto y multimedia arrancan en el mismo eje. La altura del marco se
   adapta al formato real de cada video para no reservar un bloque vacío. */
@media (min-width: 900px) {
  html body[data-ens-page="guide-design"] main[data-guia="diseno"] .gd-intro {
    align-items: start !important;
    width: min(1080px, calc(100% - 96px)) !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    column-gap: clamp(24px, 2.6vw, 36px) !important;
    padding-top: clamp(28px, 4svh, 48px) !important;
  }

  html body[data-ens-page="guide-design"] .gd-intro__copy,
  html body[data-ens-page="guide-sizing"] .gx-hero__texto,
  html body[data-ens-page="faq"] .faq-hub__hero-grid > :first-child {
    align-self: start !important;
    margin-top: 0 !important;
  }

  html body[data-ens-page="guide-design"] .guide-media--design {
    align-self: start !important;
    justify-self: start !important;
    width: min(100%, 360px) !important;
  }

  html body[data-ens-page="guide-design"] .guide-media--design .guide-media__stage {
    width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: 3 / 4;
  }

  html body[data-ens-page="guide-sizing"] #main-content#main-content[data-guia="tallaje"] .gx-hero {
    align-items: start !important;
    width: min(1040px, calc(100% - 96px)) !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    column-gap: clamp(24px, 2.6vw, 36px) !important;
    padding-top: clamp(28px, 4svh, 48px) !important;
  }

  html body[data-ens-page="guide-sizing"] .gx-hero__media {
    align-self: start !important;
    justify-self: start !important;
    width: min(100%, 380px) !important;
  }

  html body[data-ens-page="guide-sizing"] .gx-hero__media .guide-media__stage {
    width: 100%;
    aspect-ratio: 1 / 1;
  }

  html body[data-ens-page="faq"] .faq-hub__hero {
    padding-top: clamp(6rem, 7vw, 7rem);
  }

  html body[data-ens-page="faq"] .faq-hub__hero-grid {
    align-items: start !important;
    width: min(1040px, calc(100% - 96px)) !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: clamp(24px, 2.6vw, 36px) !important;
  }

  html body[data-ens-page="faq"] .guide-media--portrait {
    align-self: start !important;
    justify-self: start !important;
    width: min(100%, 270px) !important;
  }

  html body[data-ens-page="faq"] .guide-media--portrait .guide-media__stage {
    width: 100%;
    max-height: none;
    aspect-ratio: 9 / 16;
  }

  html body[data-ens-page="faq"] .guide-media--portrait .guide-media__stage video {
    object-fit: contain;
  }

  /* El copy corto de diseño y tallas ocupa la columna hasta el CTA/dato útil.
     Así la altura visual de ambas columnas acompaña el marco de video. */
  html body[data-ens-page="guide-design"] .gd-intro__note,
  html body[data-ens-page="guide-sizing"] .gx-hero__note {
    box-sizing: border-box;
    max-width: 48ch;
    margin: clamp(14px, 1.6svh, 18px) 0 0;
    padding: 12px 16px;
    border-left: 3px solid #e20613;
    border-radius: 0 12px 12px 0;
    background: #f7f4f2;
    color: #514c49;
    font: 500 15px/1.4 var(--mk-body, "Archivo", sans-serif);
  }

  html body[data-ens-page="guide-design"] .gd-intro__note strong,
  html body[data-ens-page="guide-sizing"] .gx-hero__note strong {
    color: #171514;
    font-weight: 700;
  }

  html body[data-ens-page="guide-design"] .gd-intro__actions {
    margin-top: clamp(10px, 1.2svh, 14px);
  }
}

@media (max-width: 899px) {
  /* En móvil las columnas pasan a una secuencia natural y no reservan huecos;
     los mismos datos y acciones ya están en las secciones inmediatas de la guía. */
  html body[data-ens-page="guide-design"] .gd-intro__note,
  html body[data-ens-page="guide-design"] .gd-intro__actions,
  html body[data-ens-page="guide-sizing"] .gx-hero__note {
    display: none !important;
  }
}

/* El resumen persistente no pertenece a los héroes de consulta. Su estado y la
   selección guardada siguen intactos; se retira solo de estas páginas. */
html body:is([data-ens-page="guide-design"], [data-ens-page="guide-sizing"], [data-ens-page="faq"]) .ens-journey-strip {
  display: none !important;
}

/* En diseño, las opciones pertenecen a la muestra. Superponerlas al marco y
   mantener el pie accesible elimina dos filas vacías sin achicar la prenda. */
html body[data-ens-page="guide-design"] .guide-media--design {
  position: relative;
}

html body[data-ens-page="guide-design"] .guide-media--design .guide-media__choices {
  position: relative;
  margin-bottom: 10px;
}

html body[data-ens-page="guide-design"] .guide-media--design #gd-media-caption {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


/* Cotizador de escritorio: ventana amplia con pie de altura acotada. Solo la
   pantalla activa del flujo scrollea; el pie y el avance quedan siempre visibles. */
@media (min-width: 768px) {
  html body #contacto.cotiza-panel {
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    width: min(960px, calc(100vw - 48px)) !important;
    height: min(760px, calc(100dvh - 40px)) !important;
    max-height: calc(100dvh - 40px) !important;
    border-radius: 22px !important;
    translate: -50% 104%;
  }

  html body #contacto.cotiza-panel.is-open {
    translate: -50% -50%;
  }

  html body #contacto.cotiza-panel .cotiza-panel__cuerpo {
    padding: 16px 28px 0;
  }

  html body #contacto.cotiza-panel .camino-ensutex__nav {
    flex-wrap: wrap;
    gap: 8px 14px;
    padding: 12px 28px 18px !important;
  }

  html body #contacto.cotiza-panel .camino-ensutex__nav .quote-payment-summary {
    order: 0;
    flex: 1 1 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px 20px !important;
    width: 100%;
    margin: 0 !important;
  }

  html body #contacto.cotiza-panel .camino-ensutex__nav .quote-payment-summary .qps-fila {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 6px 12px;
    min-width: 0;
    font-size: 14px !important;
  }

  html body #contacto.cotiza-panel .camino-ensutex__nav .quote-payment-summary .qps-fila strong {
    white-space: nowrap;
    font-size: 15px !important;
  }

  html body #contacto.cotiza-panel .camino-ensutex__nav .quote-payment-summary .qps-plazo {
    grid-column: 1 / -1;
    margin-top: 0;
    font-size: 14px !important;
  }

  html body #contacto.cotiza-panel .camino-ensutex__nav .quote-payment-summary .qps-plazo strong {
    font-size: 14px !important;
  }

  html body #contacto.cotiza-panel .camino-ensutex__nav .quote-total span {
    font-size: 14px;
  }
}

@media (max-width: 767px) {
  html body #contacto.cotiza-panel {
    max-height: 96dvh;
  }
}

/* En desktop, las copias de los pasos inactivos no deben definir la altura de
   las filas del paso visible. Los cuatro títulos siguen a la vista; solo el
   contenido activo participa en el cálculo vertical. */
@media (min-width: 900px) {
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso
    .proceso-paso:not([data-estado="activo"])
    :is(.proceso-etiqueta, .proceso-bajada, .proceso-resumen-movil, .proceso-puntos, .proceso-cta) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    pointer-events: none;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso
    .proceso-paso[data-estado="activo"]
    :is(.proceso-etiqueta, .proceso-bajada, .proceso-resumen-movil, .proceso-puntos, .proceso-cta) {
    position: relative;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    pointer-events: auto;
  }
}

/* Escritorios bajos: compacta títulos y copy antes de que el CTA salga de la
   escena. La prenda conserva un marco visible y el paso activo mantiene todo
   su contenido. */
@media (min-width: 900px) and (max-height: 640px) {
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-escena {
    padding-top: 4px !important;
    padding-bottom: 6px !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cab {
    margin-bottom: 4px !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cab .seo-tema {
    margin-bottom: 1px !important;
    padding-block: 4px;
    font-size: 11px !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cab h2 {
    font-size: clamp(23px, 2vw, 28px) !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cuerpo {
    min-height: 0;
    --p-renglon: 26px;
    --p-subida: 6px;
    row-gap: 0;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-lamina {
    height: min(58svh, 330px) !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-titulo {
    font-size: clamp(19px, 1.55vw, 23px) !important;
    line-height: 1 !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-bajada {
    margin-bottom: 4px !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-puntos {
    gap: 3px !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-puntos li {
    font-size: 14px !important;
    line-height: 1.22 !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cta {
    min-height: 36px !important;
    margin-top: 4px !important;
    padding-inline: 18px !important;
  }
}

/* En tablet angosta la estimación vuelve a una columna: cada importe conserva
   su línea junto al texto y el pie no consume el alto de la lista de productos. */
@media (min-width: 768px) and (max-width: 959px) {
  html body #contacto.cotiza-panel .camino-ensutex__nav .quote-payment-summary {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 4px !important;
  }
}

/* La regla global del proceso usa un selector más específico. En ventanas
   cortas se compactan también sus márgenes y las filas del paso activo para
   que el CTA no quede debajo del borde visible. */
@media (min-width: 900px) and (max-height: 640px) {
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-cuerpo {
    --p-renglon: 22px;
    --p-subida: 4px;
    row-gap: 0 !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-titulo {
    font-size: clamp(19px, 1.55vw, 23px) !important;
    line-height: 1 !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-bajada {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-puntos {
    gap: 3px !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-puntos li {
    font-size: 14px !important;
    line-height: 1.2 !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso.proceso .proceso-cta {
    min-height: 36px !important;
    margin-top: 4px !important;
    padding-inline: 18px !important;
  }
}

/* Ventanas bajas: recupera área de selección reduciendo el marco y el pie sin
   convertir el resumen en una capa que tape los productos. */
@media (min-width: 768px) and (max-height: 650px) {
  html body #contacto.cotiza-panel {
    height: calc(100dvh - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
  }

  html body #contacto.cotiza-panel .cotiza-panel__cuerpo {
    padding: 8px 16px 0;
  }

  html body #contacto.cotiza-panel .camino-ensutex__nav {
    gap: 6px 10px;
    padding: 8px 16px 10px !important;
  }

  html body #contacto.cotiza-panel .camino-ensutex__nav .quote-payment-summary {
    gap: 3px 12px !important;
  }

  html body #contacto.cotiza-panel .camino-ensutex__nav .quote-payment-summary .qps-fila {
    font-size: 12px !important;
    line-height: 1.2;
  }

  html body #contacto.cotiza-panel .camino-ensutex__nav .quote-payment-summary .qps-fila strong,
  html body #contacto.cotiza-panel .camino-ensutex__nav .quote-payment-summary .qps-plazo,
  html body #contacto.cotiza-panel .camino-ensutex__nav .quote-payment-summary .qps-plazo strong {
    font-size: 12px !important;
  }
}

/* Diseño y pagos: una lámina de alto contraste con la secuencia completa. */
html body[data-ens-page="guide-design"] #main-content .gd-terms__note {
  box-sizing: border-box;
  display: grid;
  gap: 10px;
  margin-top: clamp(20px, 3vw, 32px) !important;
  padding: clamp(20px, 2.4vw, 30px) !important;
  border: 1px solid #242220 !important;
  border-left: 5px solid #e20613 !important;
  border-radius: 18px !important;
  background: #151413 !important;
  color: #fff !important;
  box-shadow: 0 16px 38px rgba(15, 14, 13, .12);
}

html body[data-ens-page="guide-design"] #main-content .gd-terms__note p {
  margin: 0 !important;
  color: rgba(255, 255, 255, .82) !important;
  font: 500 clamp(15px, 1.25vw, 18px)/1.55 var(--mk-body, "Archivo", sans-serif) !important;
}

html body[data-ens-page="guide-design"] #main-content .gd-terms__note strong {
  color: #fff !important;
  font-weight: 800 !important;
}

/* Desktop: el paso activo contiene su copia en una tarjeta que mide el texto.
   La imagen llena la columna y los bullets quedan centrados sin recortarse. */
@media (min-width: 900px) {
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cuerpo {
    --p-renglon: clamp(42px, 5svh, 48px);
    --p-subida: 14px;
    min-height: clamp(500px, 60svh, 560px) !important;
    grid-template-rows: auto calc(4 * var(--p-renglon) + var(--p-subida) + clamp(18px, 2.2svh, 26px)) minmax(min-content, 1fr) !important;
    align-content: stretch !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cab {
    margin-bottom: clamp(18px, 2.2svh, 26px) !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cab .seo-tema {
    margin-bottom: clamp(9px, 1.3svh, 14px) !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cab h2 {
    font-size: clamp(34px, 3.1vw, 46px) !important;
    line-height: 1.08 !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-titulo {
    font-size: clamp(30px, 2.8vw, 42px) !important;
    line-height: 1.04 !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cuerpo::before {
    content: none !important;
    display: none !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-detalle {
    box-sizing: border-box;
    grid-column: 2 !important;
    grid-row: 3 !important;
    display: grid !important;
    min-width: 0;
    min-height: min-content;
    align-content: center;
    justify-items: center;
    gap: clamp(8px, 1.1svh, 12px);
    padding: clamp(20px, 2.3vw, 32px);
    border: 1px solid #e8e4e2;
    border-top: 3px solid #e20613;
    border-radius: 20px;
    background: #faf8f7;
    text-align: center;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-paso:not([data-estado="activo"]) .proceso-detalle {
    visibility: hidden;
    pointer-events: none;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-paso[data-estado="activo"] .proceso-detalle {
    visibility: visible;
    pointer-events: auto;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-detalle > .proceso-bajada {
    grid-column: 1 !important;
    grid-row: auto !important;
    max-width: 40ch;
    margin: 0 !important;
    font-size: clamp(20px, 1.55vw, 23px) !important;
    line-height: 1.35 !important;
    text-align: center;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-detalle > .proceso-puntos {
    grid-column: 1 !important;
    grid-row: auto !important;
    width: min(100%, 43ch);
    margin: 0;
    text-align: left;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-detalle > .proceso-puntos li {
    font-size: clamp(16px, 1.22vw, 18px) !important;
    line-height: 1.42 !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-detalle > .proceso-cta {
    grid-column: 1 !important;
    grid-row: auto !important;
    justify-self: center;
    margin: 4px 0 0 !important;
  }
}

@media (min-width: 900px) and (max-height: 699px) {
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cuerpo {
    min-height: 0 !important;
    --p-renglon: clamp(26px, 4.2svh, 34px);
    --p-subida: 6px;
    grid-template-rows: auto calc(4 * var(--p-renglon) + var(--p-subida)) minmax(min-content, 1fr) !important;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-detalle {
    gap: 6px;
    padding: 14px 18px;
  }

  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-titulo {
    font-size: clamp(23px, 2.15vw, 31px) !important;
  }
}

@media (max-width: 899px) {
  html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-detalle {
    display: contents !important;
  }
}

/* El video FAQ conserva el cuadro completo en una tarjeta más compacta. */
@media (min-width: 900px) {
  html body[data-ens-page="faq"] .faq-hub__hero-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(260px, .72fr) !important;
    align-items: center !important;
  }

  html body[data-ens-page="faq"] .guide-media--portrait {
    width: min(100%, 330px) !important;
    justify-self: center !important;
  }
}

html body[data-ens-page="faq"] .guide-media--portrait .guide-media__stage {
  aspect-ratio: 9 / 13 !important;
  max-height: none !important;
}

html body[data-ens-page="faq"] .guide-media--portrait .guide-media__stage video {
  transform: none !important;
  object-fit: contain !important;
  object-position: center !important;
}

@media (max-width: 899px) {
  html body[data-ens-page="faq"] .guide-media--portrait {
    width: min(100%, 240px) !important;
    justify-self: center !important;
  }
}

/* La pasada incluida queda destacada y explica que todos los ajustes se agrupan en ella. */
html body[data-ens-page="guide-design"] #main-content .gd-terms__pass {
  display: grid;
  justify-items: start;
  gap: 8px;
  margin: 10px 0 12px;
  padding: 13px 14px;
  border: 1px solid #f0d1d2;
  border-left: 4px solid #e20613;
  border-radius: 12px;
  background: #fff5f5;
}
html body[data-ens-page="guide-design"] #main-content .gd-terms__pass > span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #e20613;
  color: #fff;
  font: 800 11px/1 var(--mk-body, "Archivo", sans-serif);
  letter-spacing: .045em;
}
html body[data-ens-page="guide-design"] #main-content .gd-terms__pass > p {
  margin: 0 !important;
  color: #302b29 !important;
  font: 600 15px/1.5 var(--mk-body, "Archivo", sans-serif) !important;
}
html body[data-ens-page="guide-design"] #main-content .gd-terms__timing {
  margin-top: 10px !important;
  color: #625d59 !important;
  font-size: 14px !important;
}

@media (max-width: 767px) {
  html.gd-terms-visible body[data-ens-page="guide-design"] .floating-widgets.ens-chat-widgets #chatbot-trigger,
  html.gd-terms-visible body[data-ens-page="guide-design"] .floating-widgets.ens-chat-widgets #chatbot-cta {
    visibility: hidden !important;
    pointer-events: none !important;
  }
}