/* Ensutex · 05-oct: one compact, scroll-led design guide and measured mobile process media. */
:root { --gd-ink:#171514; --gd-paper:#fff; --gd-muted:#bcb8b5; --gd-red:#e20613; }
/* Home gallery: keep a legible caption and the measured source background per client design. */
#mockups-resumen .ens-gallery__item{display:flex;flex-direction:column;aspect-ratio:auto;height:clamp(365px,34vw,420px);background:var(--g-lamina,#e6e3de)}
#mockups-resumen .ens-gallery__item img{flex:1 1 auto;min-height:0;height:0;padding:5%;background:var(--g-lamina,#e6e3de)}
#mockups-resumen .ens-gallery__caption{display:block;flex:none;min-height:48px;padding:11px 14px;background:#141312;color:#fff;text-align:left;font:600 14px/1.3 var(--mk-body,'Archivo',sans-serif)}
#mockups-resumen .ens-gallery__dialog{--g-lamina:#e6e3de}
#mockups-resumen .ens-gallery__dialog img{background:var(--g-lamina,#e6e3de)}
#mockups-resumen .ens-home-mockups__head h2{font-family:var(--mk-display,'Anton',sans-serif)!important;letter-spacing:.005em!important;text-transform:uppercase!important}
#mockups-resumen .ens-gallery__offer{display:flex;width:min(calc(100% - 48px),76rem);align-items:center;justify-content:space-between;gap:24px;margin:22px auto 0;padding:18px 0 0;border-top:1px solid rgba(255,255,255,.2)}
#mockups-resumen .ens-gallery__offer p{max-width:62ch;margin:0;color:#f1efed;font:400 15px/1.5 var(--mk-body,'Archivo',sans-serif)}
#mockups-resumen .ens-gallery__offer strong{font-weight:700;color:#fff}
#mockups-resumen .ens-gallery__offer a{display:inline-flex;min-height:46px;align-items:center;justify-content:center;gap:9px;padding:10px 18px;border-radius:999px;background:#e20613;color:#fff;text-decoration:none;white-space:nowrap;font:700 14px/1.2 var(--mk-body,'Archivo',sans-serif)}
@media(max-width:767px){#mockups-resumen .ens-gallery__item{height:clamp(370px,116vw,440px)}#mockups-resumen .ens-gallery__caption{min-height:46px;padding:10px 12px;font-size:14px}#mockups-resumen .ens-gallery__offer{align-items:stretch;flex-direction:column;width:calc(100% - 48px);gap:14px}#mockups-resumen .ens-gallery__offer a{width:100%}}

/* The Klarna-inspired scene is a single panel; document scrolling advances the three topics. */
html body[data-ens-page="guide-design"] #main-content[data-guia="diseno"] {
  padding-top:80px; background:#fff; color:var(--gd-ink); overflow:clip;
}
@media(max-width:767px){html body[data-ens-page="guide-design"] #main-content[data-guia="diseno"]{padding-top:64px}}
.gd-wrap{width:min(1180px,calc(100% - 48px));margin-inline:auto}
.gd-intro{width:min(1180px,calc(100% - 48px));margin:0 auto;padding:30px 0 22px}
.gd-eyebrow{margin:0 0 10px;color:#8d1d22;font:700 12px/1.2 var(--mk-body,'Archivo',sans-serif);letter-spacing:.12em;text-transform:uppercase}
.gd-intro h1,.gd-terms h2,.gd-bases h2,.gd-faq h2{margin:0;color:var(--gd-ink);font:400 clamp(36px,6vw,64px)/1.02 var(--mk-display,'Anton',sans-serif);text-transform:uppercase;letter-spacing:.005em}
.gd-intro>p:last-child{margin:12px 0 0;color:#56514e;font:400 17px/1.5 var(--mk-body,'Archivo',sans-serif)}
.gd-scroll{width:min(1180px,calc(100% - 48px));margin:0 auto 34px}
.gd-stage{position:relative}
.gd-panel{position:relative;display:grid;grid-template-columns:minmax(270px,.78fr) minmax(0,1.22fr);gap:clamp(26px,5vw,72px);align-items:center;min-height:405px;padding:clamp(24px,4vw,48px);border-radius:26px;background:#141312;color:#fff}
.gd-panel__side>.gd-eyebrow{color:#e76b70}
.gd-panel h2{max-width:9ch;margin:0;font:400 clamp(31px,4.1vw,48px)/1.04 var(--mk-display,'Anton',sans-serif);text-transform:uppercase;letter-spacing:.005em}
.gd-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin-top:28px}
.gd-tabs button{min-height:46px;padding:7px 5px;border:1px solid #575250;border-radius:10px;color:#cbc7c4;text-align:left;font:600 13px/1.1 var(--mk-body,'Archivo',sans-serif);cursor:pointer}
.gd-tabs button span{display:block;margin-top:3px}
.gd-tabs button[aria-selected="true"]{background:#fff;color:#171514;border-color:#fff}
.gd-tabs button:focus-visible,.gd-button:focus-visible{outline:3px solid #ef777d;outline-offset:3px}
.gd-topics{min-width:0}
.gd-topic{padding:5px 0 20px}
.gd-topic__step{margin:0 0 12px;color:#ff888d;font:700 13px/1.3 var(--mk-body,'Archivo',sans-serif);letter-spacing:.09em;text-transform:uppercase}
.gd-topic h3{max-width:22ch;margin:0 0 12px;color:#fff;font:500 clamp(23px,3vw,34px)/1.2 var(--mk-body,'Archivo',sans-serif);text-wrap:balance}
.gd-topic h3 strong{font-weight:750;color:#fff}
.gd-topic>p:last-child{max-width:46ch;margin:0;color:#d4d0cd;font:400 16px/1.5 var(--mk-body,'Archivo',sans-serif);text-wrap:pretty}
.gd-panel__actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px}
.gd-button{display:inline-flex;min-height:46px;align-items:center;justify-content:center;gap:10px;padding:11px 17px;border-radius:999px;text-decoration:none;font:700 14px/1.2 var(--mk-body,'Archivo',sans-serif)}
.gd-button--primary{background:var(--gd-red);color:#fff}
.gd-button--quiet{border:1px solid #686360;color:#fff}
.gd-markers{display:none}
.gd-scroll.gd-scroll-js .gd-stage{height:calc(var(--gd-panel-height, 405px) + 56svh)}
.gd-scroll.gd-scroll-js .gd-panel{position:sticky;top:88px;min-height:0;height:var(--gd-panel-height,405px);z-index:1}
.gd-scroll.gd-scroll-js .gd-topics{position:relative;min-height:0}
.gd-scroll.gd-scroll-js .gd-topic{animation:gd-topic-in .25s ease both}
.gd-scroll.gd-scroll-js .gd-topic[hidden]{display:none!important}
.gd-scroll.gd-scroll-js .gd-markers{display:block;position:absolute;left:0;right:0;top:var(--gd-panel-height,405px);height:56svh;pointer-events:none}
.gd-markers i{position:absolute;left:0;width:1px;height:1px;top:0}
.gd-markers i:nth-child(2){top:50%}.gd-markers i:nth-child(3){top:100%}
@keyframes gd-topic-in{from{opacity:.35;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(max-width:767px){html.gd-cta-visible .floating-widgets.ens-chat-widgets #chatbot-trigger,html.gd-cta-visible .floating-widgets.ens-chat-widgets #chatbot-cta{visibility:hidden!important;pointer-events:none!important}}

.gd-terms{padding:52px 0;background:#f5f4f2}
.gd-terms h2,.gd-bases h2,.gd-faq h2{font-size:clamp(32px,4vw,46px)}
.gd-terms__lead,.gd-bases__lead{max-width:66ch;margin:12px 0 22px;color:#56514e;font:400 16px/1.5 var(--mk-body,'Archivo',sans-serif)}
.gd-terms__rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;border:0}
.gd-terms__rows article{display:grid;grid-template-columns:1fr;align-content:start;gap:12px;padding:18px;border:1px solid #dedbd8;border-radius:16px;background:#fff}
.gd-terms__rows article>span{color:#bb161f;font:400 20px/1 var(--mk-display,'Anton',sans-serif)}
.gd-terms__rows h3{margin:0 0 5px;font:700 17px/1.3 var(--mk-body,'Archivo',sans-serif)}
.gd-terms__rows p,.gd-terms__note{max-width:80ch;margin:0;color:#514c49;font:400 15px/1.55 var(--mk-body,'Archivo',sans-serif)}
.gd-terms__note{margin-top:18px;padding:15px 17px;border-left:3px solid var(--gd-red);background:#fff;color:#292624}
.gd-bases{padding:54px 0;background:#fff;scroll-margin-top:90px}
.gd-bases__empty{display:flex;max-width:700px;align-items:center;justify-content:space-between;gap:20px;margin-top:24px;padding:22px;border:1px solid #dedbd8;border-radius:18px;background:#faf9f8}
.gd-bases__empty p{max-width:42ch;margin:0;color:#4f4b48;font:500 16px/1.45 var(--mk-body,'Archivo',sans-serif)}
.gd-bases__rail-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:20px 0 12px;color:#5d5854;font:700 13px/1.2 var(--mk-body,'Archivo',sans-serif)}
.gd-bases__controls{display:flex;gap:8px}
.gd-bases__controls button{display:grid;width:42px;height:42px;place-items:center;border:1px solid #d8d5d2;border-radius:50%;background:#fff;color:#171514;font:700 20px/1 var(--mk-body,'Archivo',sans-serif);cursor:pointer;transition:background-color .18s ease,color .18s ease,border-color .18s ease}
.gd-bases__controls button:hover:not(:disabled){border-color:#171514;background:#171514;color:#fff}
.gd-bases__controls button:disabled{opacity:.38;cursor:default}
.gd-bases__controls button:focus-visible{outline:3px solid #e20613;outline-offset:3px}
.gd-bases__grid{display:flex;gap:14px;margin-top:0;padding:2px 2px 12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#aaa transparent;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y}
.gd-bases__grid::-webkit-scrollbar{height:6px}.gd-bases__grid::-webkit-scrollbar-thumb{border-radius:999px;background:#aaa}
.gd-bases__grid:focus-visible{outline:3px solid #e20613;outline-offset:3px}
.gd-bases__status{flex:0 0 100%;margin:18px 0;padding:18px;border:1px solid #dedbd8;border-radius:14px;background:#faf9f8;color:#514c49;font:500 15px/1.5 var(--mk-body,'Archivo',sans-serif)}
.gd-bases__fallback{margin:12px 0 0;color:#514c49;font:500 15px/1.5 var(--mk-body,'Archivo',sans-serif)}
.gd-bases__fallback a{color:#a5141c;font-weight:700;text-underline-offset:3px}
.gd-base-card{flex:0 0 calc((100% - 42px)/4);min-width:0;overflow:hidden;border:1px solid #dedbd8;border-radius:20px;background:#fff;scroll-snap-align:start}
.gd-base-card__visual{box-sizing:border-box;display:grid;place-items:center;height:360px;overflow:hidden;padding:8px;background:var(--base-bg,#f5f5f5)}
.gd-base-card__visual img{display:block;min-width:0;min-height:0;max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain;object-position:center}
.gd-base-card__visual{cursor:zoom-in}
.gd-base-card__visual:focus-visible{outline:3px solid #e20613;outline-offset:2px}
.gd-base-card__body{display:grid;gap:6px;padding:15px 16px 16px}
.gd-base-card__body>span{color:#7c262a;font:700 12px/1.2 var(--mk-body,'Archivo',sans-serif);letter-spacing:.1em;text-transform:uppercase}
.gd-base-card__body h3{min-height:2.6em;margin:0;color:#171514;font:700 16px/1.3 var(--mk-body,'Archivo',sans-serif);text-wrap:balance}
.gd-base-card__body a{display:flex;min-height:44px;align-items:center;justify-content:space-between;gap:8px;margin-top:4px;padding:9px 13px;border-radius:999px;background:#e20613;color:#fff;text-decoration:none;font:700 14px/1.2 var(--mk-body,'Archivo',sans-serif)}
.gd-faq{padding:50px 0 62px;background:#f5f4f2}
.gd-faq__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:22px}
.gd-faq__grid article{padding:17px;border:1px solid #dedbd8;border-radius:16px;background:#fff}
.gd-faq__grid h3{margin:0 0 8px;font:700 16px/1.3 var(--mk-body,'Archivo',sans-serif)}
.gd-faq__grid p{margin:0;color:#56514e;font:400 14px/1.5 var(--mk-body,'Archivo',sans-serif)}
.gd-footer-actions{display:flex;align-items:center;gap:20px;margin-top:24px}
.gd-footer-actions>a:last-child{font:600 14px/1.3 var(--mk-body,'Archivo',sans-serif);text-underline-offset:4px}

@media(max-width:899px){.gd-terms__rows{grid-template-columns:1fr}.gd-terms__rows article{grid-template-columns:32px minmax(0,1fr);gap:10px;padding:15px}}
@media(min-width:768px) and (max-width:1099px){.gd-base-card{flex-basis:calc((100% - 14px)/2)}.gd-base-card__visual{height:360px}}
@media(max-width:767px){.gd-intro,.gd-wrap,.gd-scroll{width:calc(100% - 32px)}.gd-intro{padding:25px 0 18px}.gd-intro h1{font-size:39px}.gd-panel{display:block;min-height:0;padding:20px 16px;border-radius:20px}.gd-panel h2{max-width:14ch;font-size:30px}.gd-tabs{margin-top:18px}.gd-tabs button{min-height:48px;font-size:12px}.gd-topics{margin-top:20px}.gd-topic{padding-bottom:10px}.gd-topic h3{font-size:22px}.gd-topic>p:last-child{font-size:15px}.gd-panel__actions{align-items:stretch;flex-direction:column}.gd-button{width:100%;min-height:46px}.gd-scroll.gd-scroll-js .gd-panel{top:72px;height:auto;min-height:430px;padding:18px 16px}.gd-scroll.gd-scroll-js .gd-stage{height:calc(var(--gd-panel-height,430px) + 56svh)}.gd-scroll.gd-scroll-js .gd-markers{top:var(--gd-panel-height,430px)}.gd-terms,.gd-bases,.gd-faq{padding:38px 0}.gd-terms h2,.gd-bases h2,.gd-faq h2{font-size:34px}.gd-terms__rows article{grid-template-columns:32px minmax(0,1fr);gap:10px;padding:15px}.gd-terms__rows h3{font-size:16px}.gd-terms__rows p,.gd-terms__note{font-size:14px}.gd-bases__empty{align-items:stretch;flex-direction:column;padding:17px}.gd-bases__grid{gap:12px;padding:2px 24px 12px;scroll-padding-inline:24px}.gd-base-card{flex:0 0 min(calc(100vw - 88px),330px);scroll-snap-align:start} .gd-base-card__visual{height:360px}.gd-base-card__body{padding:13px}.gd-faq__grid{grid-template-columns:1fr;gap:10px}.gd-footer-actions{align-items:stretch;flex-direction:column;gap:14px}}
@media(min-width:768px) and (max-width:1023px){.gd-panel{grid-template-columns:minmax(220px,.75fr) minmax(0,1.25fr);gap:24px;padding:28px}.gd-panel h2{font-size:36px}}
@media(prefers-reduced-motion:reduce){.gd-scroll.gd-scroll-js .gd-stage{height:auto!important}.gd-scroll.gd-scroll-js .gd-panel{position:relative;top:auto;height:auto!important;min-height:0!important}.gd-scroll.gd-scroll-js .gd-topic[hidden]{display:block!important}.gd-markers{display:none!important}.gd-topic{animation:none!important}}

/* Las reglas particulares de las dos guías respetan el mismo ritmo y encuadre. */
@media (max-width: 767px) {
  .gd-terms__rows article {
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: start;
    gap: 8px;
    padding: 12px 0;
    border: 0;
    border-bottom: 1px solid #dedbd8;
    border-radius: 0;
    background: transparent;
  }
  .gd-terms__rows article > span { padding-top: 2px; font-size: 18px; }
  .gd-terms__rows h3 { margin-bottom: 3px; font-size: 16px; line-height: 1.3; text-wrap: balance; }
  .gd-terms__rows p, .gd-terms__note { font-size: 14px; line-height: 1.42; text-wrap: pretty; }
  .gd-bases__grid { gap: 12px; padding-inline: 20px; scroll-padding-inline: 20px; }
  .gd-base-card { flex-basis: min(calc(100vw - 72px), 320px); }
  .gd-base-card__visual { height: 360px; }
  .gd-footer-actions { margin-top: 20px; }
  .gd-footer-actions > a:first-child { width: 100%; min-height: 48px; }
}

/* En 768–950 px de alto el cuarto paso rozaba el borde de la escena. Se
   conserva la escala de letra y se comprimen el aire y la lámina para que
   también entren juntas la prenda y la acción final. */
@media(min-width:900px) and (min-height:740px) and (max-height:950px){
 html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-escena{padding-top:clamp(6px,1.1svh,14px);padding-bottom:clamp(8px,1.2svh,16px)}
 html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cab{margin-bottom:clamp(6px,1.2svh,14px)}
 html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cab .seo-tema{margin-bottom:clamp(4px,.9svh,10px)!important}
 html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cab h2{font-size:clamp(30px,min(4vw,5.2svh),48px)!important;max-width:none!important}
 html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cuerpo{--p-renglon:46px;--p-subida:12px;row-gap:4px}
 html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-lamina{align-self:center;height:min(62svh,560px)!important}
 html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-etiqueta{margin-bottom:clamp(2px,.6svh,8px)}
 html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-bajada{margin-bottom:clamp(6px,1.2svh,14px)}
 html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-puntos{gap:clamp(4px,.8svh,8px)}
 html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-puntos li{font-size:18px;padding-left:22px}
 html.proceso-js body.ensutex-home:not(.mf):not(.rx) #proceso .proceso-cta{margin-top:clamp(6px,1.2svh,14px);min-height:clamp(40px,7svh,48px)}
}

/* Mobile fit: keep the process image large, and keep the design guide scene compact. */
@media(max-width:767px){
 .gd-panel{padding:15px 14px}
 .gd-panel h2{max-width:16ch;font-size:25px;line-height:1.02}
 .gd-tabs{gap:5px;margin-top:11px}
 .gd-tabs button{min-height:42px;padding:5px 3px;border-radius:9px;text-align:center;font-size:11px;line-height:1}
 .gd-tabs button span{margin-top:2px}
 .gd-topics{margin-top:12px}
 .gd-topic{padding:0 0 4px}
 .gd-topic__step{margin-bottom:6px;font-size:11px}
 .gd-topic h3{margin-bottom:7px;font-size:20px;line-height:1.16}
 .gd-topic>p:last-child{font-size:14px;line-height:1.4}
 .gd-panel__actions{align-items:center;flex-direction:row;gap:8px;margin-top:8px}
 .gd-panel__actions .gd-button--primary{flex:1 1 auto;width:auto;min-width:0;min-height:44px;padding:9px 11px;font-size:13px}
 .gd-panel__actions .gd-button--quiet{flex:none;width:auto;min-height:36px;padding:5px 2px;border:0;font-size:12px;white-space:nowrap}
 .gd-scroll.gd-scroll-js .gd-panel{top:64px;height:auto;min-height:0;padding:15px 14px}
 .gd-scroll.gd-scroll-js .gd-stage{height:calc(var(--gd-panel-height,390px) + 56svh)}
 .gd-scroll.gd-scroll-js .gd-markers{top:var(--gd-panel-height,390px)}
}

/* 06-oct (tarde) · Guía de diseño: letra legible en pestañas y botones.
   Medido: pestañas a 11 px y botones a 12–13 px en celular. Pestañas a 14 px centradas (número arriba en 12 px);
   el botón principal a todo el ancho y el secundario como enlace de 15 px debajo. */
html body .gd-tabs button{display:flex!important;flex-direction:column;align-items:center!important;justify-content:center!important;gap:2px;text-align:center!important;font:600 12px/1.15 var(--mk-body,'Archivo',sans-serif)!important;letter-spacing:.04em}
html body .gd-tabs button span{margin-top:0!important;font-size:14px!important;font-weight:700;letter-spacing:0}
@media(max-width:767px){
 html body .gd-tabs button{min-height:48px!important;padding:6px 4px!important}
 html body .gd-panel__actions{flex-direction:column!important;align-items:stretch!important;gap:4px!important}
 html body .gd-panel__actions .gd-button--primary{width:100%!important;flex:none!important}
 html body .gd-panel__actions .gd-button--quiet{width:100%!important;min-height:44px!important;border:0!important;font-size:15px!important;text-decoration:underline!important;text-underline-offset:4px}
 html body .gd-topic>p:last-child{font-size:15px!important;line-height:1.45!important}
 html body .gd-topic h3{font-size:21px!important}
}

/* 06-oct · Carlitos: «ojo con la fuente de letra que se está usando en las pestañas de guías porque es otra, no es
   la del inicio». Los subtítulos de la guía iban en Archivo minúscula; en el inicio ese nivel es Anton en
   mayúscula. Se igualan: lámina negra (los 3 temas) y condiciones de la propuesta. El énfasis en Anton no es
   negrita (tiene un solo grosor): va en rojo claro sobre negro. */
html body .gd-topic h3{max-width:20ch!important;font:400 clamp(26px,2.6vw,38px)/1.02 var(--mk-display,'Anton',sans-serif)!important;letter-spacing:.005em;text-transform:uppercase}
html body .gd-topic h3 strong{font-weight:400!important;color:var(--mk-rojo-claro,#FF5A64)!important}
html body .gd-terms__rows h3{font:400 20px/1.1 var(--mk-display,'Anton',sans-serif)!important;letter-spacing:.005em;text-transform:uppercase;margin-bottom:6px!important}
@media(max-width:767px){
 html body .gd-topic h3{font-size:26px!important;line-height:1.02!important}
 html body .gd-terms__rows h3{font-size:19px!important}
}
html body .gd-topic__step{font-size:12px!important;letter-spacing:.08em}
