/* Generated by scripts/build-critical-css.cjs. Edit the source files. */
/* Source: ux-refresh.css */
/* Ensutex UX refresh · 2026-08-21
Capa acotada para navegación, catálogo móvil y lectura progresiva de guías. */
/* ---------- Navegación: buscar por prenda + elegir por cantidad ---------- */
.ens-nav-panel {
width: min(23rem, calc(100vw - 2rem)) !important;
padding: .8rem !important;
}
.ens-nav-discovery {
display: grid;
gap: .75rem;
}
.ens-nav-discovery__group {
display: grid;
gap: .55rem;
}
.ens-nav-discovery__group + .ens-nav-discovery__group {
padding-top: .75rem;
border-top: 1px solid rgba(255, 255, 255, .1);
}
.ens-nav-discovery__label {
margin: 0;
color: #87ceeb;
font-size: .66rem;
font-weight: 850;
letter-spacing: .12em;
line-height: 1.25;
text-transform: uppercase;
}
.ens-product-finder {
display: grid;
grid-template-columns: minmax(0, 1fr) 2.85rem;
gap: .45rem;
}
.ens-product-finder input {
width: 100%;
min-width: 0;
min-height: 2.85rem;
padding: .72rem .8rem;
border: 1px solid rgba(255, 255, 255, .18);
border-radius: .75rem;
background: #191816;
color: #fff;
font: inherit;
font-size: .82rem;
}
.ens-product-finder input::placeholder { color: #aaa5a0; }
.ens-product-finder input:focus-visible {
outline: 3px solid rgba(226, 6, 19, .45);
outline-offset: 1px;
border-color: #e20613;
}
.ens-product-finder button {
display: grid;
min-width: 2.85rem;
min-height: 2.85rem;
place-items: center;
border: 1px solid #e20613;
border-radius: .75rem;
background: #e20613;
color: #0c0c0b;
font-size: 1.2rem;
font-weight: 900;
}
.ens-nav-chips,
.ens-nav-quantity,
.ens-nav-utility {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: .45rem;
}
.ens-nav-utility { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ens-nav-chips a,
.ens-nav-quantity a,
.ens-nav-utility a {
display: flex !important;
min-width: 0;
min-height: 2.75rem;
align-items: center;
justify-content: center;
padding: .55rem .45rem !important;
border: 1px solid rgba(255, 255, 255, .13);
border-radius: .68rem;
background: #171614;
color: #edecec !important;
font-size: .72rem !important;
font-weight: 750;
line-height: 1.25;
text-align: center;
}
.ens-nav-quantity a { color: #87ceeb !important; }
.ens-nav-chips a:hover,
.ens-nav-chips a:focus-visible,
.ens-nav-quantity a:hover,
.ens-nav-quantity a:focus-visible,
.ens-nav-utility a:hover,
.ens-nav-utility a:focus-visible {
border-color: #e20613;
background: rgba(226, 6, 19, .13);
color: #fff !important;
}
@media (max-width: 1023px) {
body.menu-open .floating-widgets {
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
.ensutex-site-nav #mobileDrawer {
max-height: calc(100svh - 4rem);
overflow-y: auto;
overscroll-behavior: contain;
}
.ensutex-site-nav #mobileDrawer > div { gap: .6rem !important; }
.ensutex-site-nav #mobileDrawer .mobile-catalog-primary {
min-height: 3.85rem !important;
padding: .8rem 1rem !important;
}
.ensutex-site-nav #mobileDrawer .ens-mobile-discovery {
display: grid !important;
grid-template-columns: 1fr !important;
gap: .75rem !important;
padding: .8rem !important;
}
.ensutex-site-nav #mobileDrawer .ens-mobile-discovery a {
min-height: 2.85rem !important;
padding: .55rem .4rem !important;
}
}
/* ---------- Menú: dos columnas limpias dentro de "Catálogo y precios" ---------- */
.ens-nav-discovery__cols {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .75rem;
}
.ens-nav-discovery__cols .ens-nav-discovery__group + .ens-nav-discovery__group {
padding-top: 0;
border-top: 0;
}
.ens-nav-search {
padding-bottom: .7rem;
border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.ens-nav-discovery__cols .ens-nav-chips,
.ens-nav-discovery__cols .ens-nav-quantity {
grid-template-columns: minmax(0, 1fr);
}
.ens-nav-discovery__cols .ens-nav-chips a,
.ens-nav-discovery__cols .ens-nav-quantity a {
justify-content: flex-start;
text-align: left;
}
/* El buscador del menú vive sólo en escritorio. */
@media (max-width: 1023px) {
.ens-nav-search {
display: none !important;
}
.ens-nav-discovery__cols {
grid-template-columns: minmax(0, 1fr);
}
}
/* ---------- Menú: «Mi cotización», la utilidad con su contador ---------- */
/* 29-sep (P15): el contador lee el borrador real (ver ux-refresh.js: quoteCount) y
se ve igual en el panel de escritorio y en el acordeón del celular. Con la
cotización vacía el número es un 0 apagado: informa sin gritar. */
.ens-nav-quote__link {
display: flex !important;
min-height: 2.9rem;
align-items: center;
justify-content: space-between;
gap: .6rem;
padding: .55rem .75rem !important;
border: 1px solid rgba(255, 255, 255, .16);
border-radius: .68rem;
background: #171614;
color: #edecec !important;
font-size: .78rem !important;
font-weight: 800;
line-height: 1.25;
}
.ens-nav-quote__link:hover,
.ens-nav-quote__link:focus-visible {
border-color: #e20613;
background: rgba(226, 6, 19, .13);
color: #fff !important;
}
.ens-nav-quote__contador {
display: inline-flex;
min-width: 1.55rem;
height: 1.55rem;
align-items: center;
justify-content: center;
padding: 0 .4rem;
border-radius: 999px;
background: #e20613;
color: #fff;
font-size: .72rem;
font-weight: 850;
line-height: 1;
}
/* El 0 apagado sigue siendo legible: medido el 29-sep en el navegador, el primer
intento —una pastilla clara sobre el panel blanco— daba 1,68:1 (exige 4,5:1).
Ahora es una pastilla neutra con tinta oscura, 5,5:1 sobre el panel claro. */
.ens-nav-quote__contador.is-vacio {
background: #E7E4E0;
color: #5E5A56;
}
/* ---------- Menú: "Nuestras marcas" ---------- */
.ens-nav-brands-panel {
width: min(26rem, calc(100vw - 2rem)) !important;
}
/* Los paneles del menú nacen cerrados SIN depender de Tailwind. En la portada
tailwind-build.css se carga recién cuando el visitante interactúa (o a los
15 s), y mientras tanto sus clases `invisible opacity-0` no existían: el
panel de marcas quedaba abierto encima del hero al entrar. Se abre igual con
el mouse encima o con el foco dentro, como antes. */
.ens-nav-panel {
visibility: hidden;
opacity: 0;
pointer-events: none;
}
.group:hover > .ens-nav-panel,
.group:focus-within > .ens-nav-panel {
visibility: visible;
opacity: 1;
pointer-events: auto;
}
.ens-nav-brands__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .5rem;
}
.ens-nav-brand {
display: grid !important;
min-width: 0;
min-height: 4.6rem;
align-content: start;
gap: .3rem;
padding: .7rem .75rem !important;
border: 1px solid rgba(255, 255, 255, .13);
border-radius: .7rem;
background: #171614;
color: #edecec !important;
white-space: normal;
}
.ens-nav-brand strong {
color: #87ceeb;
font-size: .82rem;
letter-spacing: .02em;
white-space: normal;
}
.ens-nav-brand span {
color: #d2d0cd;
font-size: .72rem;
font-weight: 600;
line-height: 1.32;
text-align: left;
white-space: normal;
overflow-wrap: break-word;
}
.ens-nav-brand:hover,
.ens-nav-brand:focus-visible {
border-color: #e20613;
background: rgba(226, 6, 19, .13);
color: #fff !important;
}
/* Las guías y las páginas de producto usan su propia barra: mismo ítem,
con la forma de píldora oscura que ya tienen. */
.guide-nav__brands {
position: relative;
display: inline-flex;
}
.guide-nav__brands-trigger {
display: inline-flex;
min-height: 2.45rem;
align-items: center;
gap: .35rem;
padding: .52rem .92rem;
border: 0;
border-radius: 999px;
color: rgba(255, 255, 255, .72);
font: inherit;
font-size: .75rem;
font-weight: 550;
white-space: nowrap;
}
.guide-nav__brands-trigger:hover,
.guide-nav__brands-trigger:focus-visible,
.guide-nav__brands.is-open .guide-nav__brands-trigger {
background: rgba(255, 255, 255, .09);
color: #fff;
}
.guide-nav__chevron {
width: .42rem;
height: .42rem;
flex: 0 0 auto;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg) translateY(-1px);
}
.guide-nav__brands-menu {
position: absolute;
top: calc(100% + .6rem);
right: 0;
z-index: 5;
display: grid;
width: min(22rem, calc(100vw - 2rem));
gap: .3rem;
padding: .55rem;
border: 1px solid rgba(255, 255, 255, .12);
border-radius: .9rem;
background: rgba(12, 11, 10, .97);
box-shadow: 0 22px 60px rgba(0, 0, 0, .34);
visibility: hidden;
opacity: 0;
pointer-events: none;
transform: translateY(-.3rem);
transition: opacity 180ms cubic-bezier(0.22, 1, 0.36, 1),
transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
visibility 0s linear 180ms;
}
.guide-nav__brands:hover .guide-nav__brands-menu,
.guide-nav__brands:focus-within .guide-nav__brands-menu,
.guide-nav__brands.is-open .guide-nav__brands-menu {
visibility: visible;
opacity: 1;
pointer-events: auto;
transform: translateY(0);
transition-delay: 0s;
}
.guide-nav .guide-nav__brands-menu a {
display: grid !important;
min-height: 0;
align-content: start;
gap: .2rem;
padding: .6rem .7rem !important;
border-radius: .65rem;
color: #e9e8e7 !important;
font-size: .84rem;
}
.guide-nav .guide-nav__brands-menu a strong {
color: #87ceeb;
font-size: .84rem;
white-space: normal;
}
.guide-nav .guide-nav__brands-menu a span {
color: #ceccc9;
font-size: .7rem;
font-weight: 500;
line-height: 1.3;
white-space: normal;
overflow-wrap: break-word;
}
.guide-nav .guide-nav__brands-menu a:hover,
.guide-nav .guide-nav__brands-menu a:focus-visible {
background: rgba(255, 255, 255, .08);
color: #fff !important;
}
.guide-nav .guide-mobile-brands {
display: grid;
gap: .2rem;
margin-top: .35rem;
padding-top: .5rem;
border-top: 1px solid rgba(255, 255, 255, .1);
}
.guide-nav .guide-mobile-brands__label {
padding: 0 .8rem;
color: #87ceeb;
font-size: .64rem;
font-weight: 850;
letter-spacing: .12em;
text-transform: uppercase;
}
.guide-nav .guide-mobile-nav .guide-mobile-brands a,
.guide-nav .guide-mobile-nav .guide-mobile-brands a:last-child {
justify-content: flex-start;
margin-top: 0;
background: transparent;
color: #e9e8e7;
}
/* ---------- Cajón móvil: acordeón de catálogo + tarjetas de marca ---------- */
@keyframes ensDrawerIn {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
.ensutex-site-nav #mobileDrawer:not(.hidden) {
animation: ensDrawerIn 200ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.mobile-catalog-accordion {
display: grid;
gap: .5rem;
}
.ensutex-site-nav #mobileDrawer .mobile-catalog-primary {
display: flex !important;
width: 100%;
align-items: center;
justify-content: space-between;
gap: .6rem;
text-align: left;
}
.mobile-catalog-chevron {
width: .5rem;
height: .5rem;
flex: 0 0 auto;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg) translateY(-1px);
transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mobile-catalog-accordion.is-open .mobile-catalog-chevron {
transform: rotate(-135deg) translateY(-1px);
}
.ensutex-site-nav #mobileDrawer .mobile-catalog-submenu {
overflow: hidden;
transition: height 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ensutex-site-nav #mobileDrawer .mobile-catalog-submenu[hidden] {
display: none !important;
}
.mobile-drawer-label {
margin: .35rem 0 0;
padding: 0 .25rem;
color: #87ceeb;
font-size: .64rem;
font-weight: 850;
letter-spacing: .12em;
text-transform: uppercase;
}
.mobile-brands {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .5rem;
}
.mobile-brand-card {
display: grid !important;
min-width: 0;
min-height: 4.7rem;
align-content: start;
gap: .25rem;
padding: .6rem .65rem !important;
border: 1px solid rgba(255, 255, 255, .14);
border-radius: .7rem;
background: #151413;
color: #edecec !important;
font-size: .82rem !important;
white-space: normal;
}
.mobile-brand-card strong {
color: #fff;
font-size: .84rem;
font-weight: 850;
white-space: normal;
}
.mobile-brand-card span {
color: #c4c0bd;
font-size: .68rem;
font-weight: 600;
line-height: 1.3;
text-align: left;
white-space: normal;
overflow-wrap: break-word;
}
.mobile-brand-card:hover,
.mobile-brand-card:focus-visible {
border-color: #e20613;
background: rgba(226, 6, 19, .12);
}
@media (prefers-reduced-motion: reduce) {
.ensutex-site-nav #mobileDrawer:not(.hidden) {
animation: none;
}
.ensutex-site-nav #mobileDrawer .mobile-catalog-submenu,
.mobile-catalog-chevron {
transition: none;
}
}
/* ---------- Recorrido compartido: la selección acompaña entre páginas ---------- */
.ens-journey-strip {
position: sticky;
top: 5rem;
z-index: 42;
width: 100%;
padding: .7rem clamp(.8rem, 3vw, 1.5rem);
border-bottom: 1px solid rgba(135, 206, 235, .2);
background: rgba(10, 9, 8, .96);
color: #fff;
box-shadow: 0 12px 30px rgba(0, 0, 0, .2);
backdrop-filter: blur(14px);
}
.ens-journey-strip[hidden] { display: none !important; }
/* La cotización acompaña el recorrido, pero se aparta durante el scroll hacia
abajo y vuelve al subir. Así no se convierte en una capa fija sobre tablas. */
.ens-journey-strip { transition: opacity 180ms ease, transform 240ms ease; }
html body.ens-scroll-down .ens-journey-strip {
opacity: 0 !important;
pointer-events: none !important;
transform: translateY(calc(-100% - 1rem)) !important;
visibility: hidden !important;
}
html body.ens-scroll-down :is(.qc-summary-bar, #sticky-cta-mobile.is-visible) {
opacity: 0 !important;
pointer-events: none !important;
translate: 0 135% !important;
visibility: hidden !important;
}
html body.ens-scroll-down :is(.ens-journey-strip, .qc-summary-bar, #sticky-cta-mobile):focus-within {
opacity: 1 !important;
pointer-events: auto !important;
translate: none !important;
transform: none !important;
visibility: visible !important;
}
.ens-journey-strip__inner {
display: flex;
width: min(100%, 76rem);
min-width: 0;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-inline: auto;
}
.ens-journey-strip__copy {
display: grid;
min-width: 0;
gap: .15rem;
font-family: var(--ens-font-body-family);
}
.ens-journey-strip__eyebrow {
color: #87ceeb;
font-size: .62rem;
font-weight: 850;
letter-spacing: .1em;
line-height: 1.25;
text-transform: uppercase;
}
.ens-journey-strip__copy strong {
overflow: hidden;
font-size: .86rem;
line-height: 1.3;
text-overflow: ellipsis;
white-space: nowrap;
}
.ens-journey-strip__copy > span:last-child {
color: #c4c1be;
font-size: .68rem;
line-height: 1.3;
}
.ens-journey-strip__action {
display: inline-flex;
min-width: max-content;
min-height: 2.75rem;
align-items: center;
justify-content: center;
padding: .65rem 1rem;
border: 1px solid #e20613;
border-radius: 999px;
background: #e20613;
color: #0c0c0b;
font: 850 .75rem/1.2 var(--ens-font-body-family);
text-decoration: none;
/* 04-oct · Faltaba: el color saltaba del rojo al celeste de golpe, sin transición (medido: 0 s), y al
apretarlo no pasaba nada. La tira de pasos está en todas las páginas legales y en la de pedidos. */
transition: background-color 180ms ease, transform 90ms linear;
}
.ens-journey-strip__action:hover { background: #87ceeb; }
.ens-journey-strip__action:active { transform: scale(.97); }
.ens-journey-strip__action:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (max-width: 560px) {
.ens-journey-strip { top: 5rem; padding: .6rem .75rem; }
.ens-journey-strip__inner { gap: .65rem; }
.ens-journey-strip__eyebrow { display: none; }
.ens-journey-strip__copy strong { max-width: 55vw; font-size: .76rem; }
.ens-journey-strip__action { min-height: 2.75rem; padding-inline: .78rem; font-size: .69rem; }
}
/* ---------- Catálogo: jerarquía de telas y galerías táctiles ---------- */
.ens-fabric-decision-guide {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: .65rem;
width: min(100%, 58rem);
margin: 0 auto 1.5rem;
}
.ens-fabric-decision-guide > div {
display: grid;
gap: .2rem;
min-width: 0;
padding: .85rem 1rem;
border: 1px solid #e0dedc;
border-radius: 1rem;
background: rgba(255, 255, 255, .72);
color: #5c5853;
font-size: .74rem;
line-height: 1.4;
}
.ens-fabric-decision-guide strong { color: #1a1817; font-size: .8rem; }
#telas .ens-fabric-choice-card > .mb-6 { margin-bottom: .8rem !important; }
#telas .ens-fabric-short {
margin: .65rem 0 0;
padding: .75rem .85rem;
border-inline-start: 3px solid #e20613;
border-radius: .65rem;
background: #f6f5f4;
color: #423e3a;
font-size: .8rem;
font-weight: 700;
line-height: 1.5;
}
.ens-fabric-details {
width: 100%;
margin-top: .85rem;
overflow: clip;
border: 1px solid #e0dedc;
border-radius: 1rem;
background: #fff;
}
.ens-fabric-details > summary {
display: flex;
min-height: 3rem;
align-items: center;
justify-content: space-between;
gap: .75rem;
padding: .8rem .9rem;
cursor: pointer;
color: #1a1817;
font-size: .76rem;
font-weight: 850;
line-height: 1.35;
list-style: none;
}
.ens-fabric-details > summary::-webkit-details-marker { display: none; }
.ens-fabric-details > summary::after {
content: "+";
display: grid;
flex: 0 0 1.8rem;
width: 1.8rem;
height: 1.8rem;
place-items: center;
border-radius: 50%;
background: #e1f0f7;
color: #e20613;
font-size: 1rem;
}
.ens-fabric-details[open] > summary::after { content: "−"; }
.ens-fabric-details__body { display: grid; gap: .8rem; padding: 0 .9rem .9rem; }
.ens-fabric-details__body > p { margin: 0; color: #68635e; font-size: .8rem; line-height: 1.55; }
#telas .fabric-content .ens-fabric-details .grid.grid-cols-2.gap-4.text-xs {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
margin-top: 0 !important;
}
#telas .fabric-variant-grid,
#telas .fabric-touch-guide,
#telas .fabric-polerones-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.ens-warm-fabric-actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .65rem;
margin-top: .85rem;
}
.ens-warm-fabric-actions button {
display: grid;
min-height: 3.25rem;
gap: .12rem;
place-content: center;
padding: .65rem .8rem;
border: 1px solid #d5d2d0;
border-radius: .8rem;
background: #fff;
color: #2b2826;
cursor: pointer;
font: inherit;
text-align: center;
transition: border-color .18s ease, background-color .18s ease, color .18s ease, transform .18s ease;
}
.ens-warm-fabric-actions button:hover { border-color: #e20613; transform: translateY(-1px); }
.ens-warm-fabric-actions button:focus-visible { outline: 3px solid #87ceeb; outline-offset: 2px; }
.ens-warm-fabric-actions button[aria-pressed="true"] {
border-color: #e20613;
background: #e1f0f7;
color: #e20613;
box-shadow: inset 0 0 0 1px #e20613;
}
.ens-warm-fabric-actions button[aria-pressed="true"]::after {
content: "✓ Elegida";
color: #e20613;
font-size: .62rem;
font-weight: 850;
}
.ens-warm-fabric-actions strong { font-size: .82rem; }
.ens-warm-fabric-actions span { font-size: .7rem; }
.ens-mobile-swipe-hint { display: none; }
.ens-swipe-gallery {
overscroll-behavior-inline: contain;
scroll-padding-inline: .5rem;
}
@media (max-width: 767px) {
body[data-ens-page="catalog"] #caminos,
body[data-ens-page="catalog"] #catalogo,
body[data-ens-page="catalog"] #promociones,
body[data-ens-page="catalog"] .catalog-equipment,
body[data-ens-page="catalog"] #telas,
body[data-ens-page="catalog"] #cotizador-express {
padding-block: 2.75rem !important;
}
body[data-ens-page="catalog"] #caminos .text-center,
body[data-ens-page="catalog"] #catalogo .mb-14,
body[data-ens-page="catalog"] #telas > div > .text-center {
margin-bottom: 1.5rem !important;
}
body[data-ens-page="catalog"] #catalogo .catalog-intro { margin-bottom: 1.5rem !important; }
body[data-ens-page="catalog"] #telas > div > .flex.justify-center.border-b { margin-bottom: 1.25rem !important; }
body[data-ens-page="catalog"] #telas .mt-16 { margin-top: 1.75rem !important; padding: 1rem !important; }
.ens-fabric-decision-guide {
grid-template-columns: 1fr;
gap: .45rem;
margin-bottom: 1rem;
}
.ens-fabric-decision-guide > div {
grid-template-columns: minmax(6.6rem, .8fr) minmax(0, 1.2fr);
align-items: center;
padding: .65rem .75rem;
}
#telas .ens-fabric-choice-card { padding: .9rem !important; }
#telas .ens-fabric-choice-card h3 { font-size: 1.25rem !important; }
#telas .ens-fabric-short { padding: .65rem .75rem; font-size: .76rem; }
#telas .ens-fabric-details { margin-top: .65rem; }
#telas .ens-fabric-details__body { padding: 0 .7rem .7rem; }
#telas .fabric-content .ens-fabric-details .grid.grid-cols-2.gap-4.text-xs {
grid-template-columns: 1fr !important;
gap: .55rem !important;
padding: .7rem !important;
}
#telas .fabric-variant-grid,
#telas .fabric-touch-guide { grid-template-columns: 1fr !important; }
.ens-warm-fabric-actions { gap: .45rem; }
.ens-warm-fabric-actions button { min-height: 3rem; padding-inline: .45rem; }
.ens-mobile-swipe-hint {
display: flex;
align-items: center;
justify-content: center;
gap: .35rem;
margin: .15rem 0 .55rem;
color: #6e6863;
font-size: .68rem;
font-weight: 750;
line-height: 1.3;
}
.ens-mobile-swipe-hint::before,
.ens-mobile-swipe-hint::after { content: "↔"; color: #e20613; }
/* La pista vive en fondos claros y oscuros. Sobre el bloque negro de
equipaciones (#080807) el gris daba 3.56:1; ahí se aclara al blanco
translúcido que ya usa ese bloque para su texto secundario. No cambia
tamaño, texto ni la versión clara. */
.catalog-equipment .ens-mobile-swipe-hint { color: rgba(255, 255, 255, .72); }
#packs.ens-swipe-gallery,
.catalog-equipment__grid.ens-swipe-gallery,
#telas #content-poleras > .ens-swipe-gallery {
display: flex !important;
grid-template-columns: none !important;
gap: .75rem !important;
margin-inline: -.15rem;
padding: .1rem .15rem .8rem !important;
overflow-x: auto !important;
overflow-y: visible !important;
scroll-snap-type: x mandatory;
scrollbar-width: thin;
-webkit-overflow-scrolling: touch;
}
#packs.ens-swipe-gallery > [data-pack-id],
.catalog-equipment__grid.ens-swipe-gallery > .equipment-card,
#telas #content-poleras > .ens-swipe-gallery > div {
flex: 0 0 88% !important;
width: 88% !important;
min-width: 0 !important;
scroll-snap-align: center;
}
#telas .fabric-polerones-grid {
display: flex !important;
grid-template-columns: none !important;
gap: .7rem;
overflow-x: auto;
padding: .1rem .1rem .7rem;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
#telas .fabric-polerones-grid figure {
flex: 0 0 84%;
scroll-snap-align: center;
}
#telas .fabric-polerones-grid img { aspect-ratio: 4 / 3 !important; }
}
/* ---------- Catálogo móvil: H1, video y luego contenido/decisión ---------- */
@media (max-width: 767px) {
body[data-ens-page="catalog"] .catalog-page-hero {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
gap: 1rem !important;
min-height: 0 !important;
/* 29-sep · El canto del hero en celular: 1rem → 1.5rem (16 → 24 px). Aquí y no en
`.catalog-page-hero__layout`, que queda en `display: contents` (abajo) y por eso su
padding no hace nada: este es el único valor que fija el margen lateral del hero.
Motivo: el criterio E03 del ecosistema pide «margen lateral ≥ 24 px en celular» para
el copy del hero, y la bajada era la ÚNICA pieza pegada al canto — insignia 54/69,
h1 50/56 y CTA 64/79 px, cada uno por su propio ancho, y la bajada a 16. Medido en
360 y 390 antes y después. */
padding: 5.25rem 1.5rem 2rem !important;
/* 29-sep · Aquí vivía un `background: #000 !important` que contradecía la decisión
vigente: el hero del catálogo es GRIS desde el 29-sep (Carlitos: «reemplazar el blanco
por un gris medio semejante al fondo del video»). No se cambió por criterio: se midió
que la línea estaba MUERTA en los nueve anchos del rango y del borde (360, 390, 414,
480, 540, 640, 700, 767 y 768): el fondo computado salía `rgba(0,0,0,0)` en todos y el
píxel pintado sobre el hero, `#f4f3f1` en todos. El gris lo pone
`catalogo-un-camino.css` con `html body .catalog-page-hero.catalog-page-hero--claro.cat-heroe`
—especificidad (0,3,2) con `!important`—, que le gana a esta regla (0,2,1). O sea: el
negro no se veía y esta hoja sólo dejaba escrito lo contrario de lo que pasa. Si algún
día se borra el gradiente de allá, el hero NO debe volver a negro: el fondo correcto es
`--mk-bg` (#F4F3F1, marca.css), el mismo del body y de la sección de abajo. */
}
body[data-ens-page="catalog"] .catalog-page-hero__layout,
body[data-ens-page="catalog"] .catalog-page-hero__copy {
display: contents !important;
}
body[data-ens-page="catalog"] .catalog-page-hero__copy h1 {
position: relative;
z-index: 2;
grid-row: 1;
max-width: 12ch;
margin: .35rem auto .15rem !important;
color: #fff;
font-size: clamp(2.55rem, 12vw, 3.45rem) !important;
line-height: .92 !important;
text-align: center;
text-wrap: balance;
}
body[data-ens-page="catalog"] .catalog-page-hero .ens-hero-video {
position: relative !important;
inset: auto !important;
z-index: 1;
grid-row: 2;
width: 100% !important;
height: auto !important;
aspect-ratio: 16 / 9;
border: 1px solid rgba(135, 206, 235, .14);
border-radius: 1rem;
object-fit: cover !important;
object-position: center !important;
background: #080807 !important;
}
body[data-ens-page="catalog"] .catalog-page-hero .ens-hero-scrim { display: none !important; }
body[data-ens-page="catalog"] .catalog-hero-badge {
position: relative;
z-index: 2;
grid-row: 3;
justify-self: center;
margin: 0 !important;
}
body[data-ens-page="catalog"] .catalog-page-hero__copy > p {
position: relative;
z-index: 2;
grid-row: 4;
max-width: 34rem;
margin: 0 auto;
color: #e0dedc;
line-height: 1.55;
text-align: center;
}
body[data-ens-page="catalog"] .catalog-page-hero .cta-flow {
position: relative;
z-index: 2;
grid-row: 5;
display: grid !important;
width: 100%;
max-width: 34rem;
margin: .15rem auto 0 !important;
}
/* El globo proactivo cubría H2 y CTA; el botón circular de ayuda se conserva. */
body #chatbot-cta.ens-chat-prompt.chatbot-cta-fixed { display: none !important; }
}
/* Estado perceptible mientras se prepara la siguiente foto del carrusel. */
#catalogo .catalog-product-stage.is-media-loading {
background: linear-gradient(110deg, #0e0e0d 20%, #22201e 42%, #0e0e0d 64%);
background-size: 220% 100%;
animation: ens-catalog-media-loading 1.1s linear infinite;
}
#catalogo .catalog-product-stage.is-media-error::after {
content: "Imagen temporalmente no disponible";
position: absolute;
inset: auto 1rem 1rem;
z-index: 2;
color: #e4e3e2;
font-size: .72rem;
font-weight: 750;
text-align: center;
}
@keyframes ens-catalog-media-loading { to { background-position: -220% 0; } }
/* ---------- Guías: lectura progresiva ---------- */
.guide-deep-dive,
.guide-size-table {
margin: 1.2rem 0 0;
overflow: clip;
border: 1px solid var(--guide-line, #e3e2e1);
border-radius: 1.15rem;
background: #fff;
box-shadow: 0 16px 44px rgba(30, 28, 26, .05);
}
.guide-deep-dive > summary,
.guide-size-table > summary {
display: flex;
min-height: 3.7rem;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: .95rem 1.05rem;
cursor: pointer;
color: #1a1817;
font-size: .88rem;
font-weight: 800;
list-style: none;
}
.guide-deep-dive > summary::-webkit-details-marker,
.guide-size-table > summary::-webkit-details-marker { display: none; }
.guide-deep-dive > summary::after,
.guide-size-table > summary::after {
content: "+";
display: grid;
flex: 0 0 2rem;
width: 2rem;
height: 2rem;
place-items: center;
border-radius: 50%;
background: #e1f0f7;
color: #e20613;
font-size: 1.2rem;
}
.guide-deep-dive[open] > summary::after,
.guide-size-table[open] > summary::after { content: "−"; }
.guide-deep-dive__body { padding: 0 1rem 1rem; }
.guide-deep-dive__body > :first-child { margin-top: 0; }
.guide-size-table .guide-table-wrap { border: 0; border-top: 1px solid var(--guide-line, #e3e2e1); border-radius: 0; box-shadow: none; }
.guide-section--dark .guide-deep-dive {
border-color: #33302d;
background: #131210;
box-shadow: none;
}
.guide-section--dark .guide-deep-dive > summary { color: #fff; }
.guide-section--dark .guide-deep-dive > summary::after { background: rgba(226, 6, 19, .14); color: #87ceeb; }
@media (max-width: 680px) {
.guide-section { padding: 2.75rem 0; }
.guide-heading { margin-bottom: 1.25rem; }
.guide-heading h2 { font-size: clamp(2rem, 10.5vw, 3rem); }
.guide-answer { margin-bottom: 1rem; }
.guide-deep-dive__body { padding: 0 .65rem .65rem; }
}
@media (prefers-reduced-motion: reduce) {
#catalogo .catalog-product-stage.is-media-loading { animation: none; }
}
/* ---------- Guía de tallas: una decisión por lámina ---------- */
body[data-ens-page="guide-sizing"] .guide-story-steps li a {
display: grid;
grid-template-columns: 2rem minmax(0, 1fr);
gap: .75rem;
align-items: start;
color: inherit;
}
/* El enlace es la pieza interactiva completa; evita heredar la grilla de li previa. */
body[data-ens-page="guide-sizing"] .guide-story-steps li { display: block; }
body[data-ens-page="guide-sizing"] .guide-story-steps li a:hover,
body[data-ens-page="guide-sizing"] .guide-story-steps li a:focus-visible {
color: #fff;
}
body[data-ens-page="guide-sizing"] .guide-story-steps li a:focus-visible,
body[data-ens-page="guide-sizing"] .guide-table-picker button:focus-visible,
body[data-ens-page="guide-sizing"] .guide-next a:focus-visible,
body[data-ens-page="guide-sizing"] .guide-measure-card summary:focus-visible {
outline: 3px solid #87ceeb;
outline-offset: 3px;
}
body[data-ens-page="guide-sizing"] .guide-story-steps li span {
display: block;
margin-top: .15rem;
color: #bdbab6;
font-size: .76rem;
line-height: 1.45;
}
body[data-ens-page="guide-sizing"] .guide-measure-card > summary {
display: none;
}
body[data-ens-page="guide-sizing"] .guide-table-picker {
display: grid;
gap: .7rem;
margin: 0 0 1.1rem;
padding: 1.1rem;
border: 1px solid #87ceeb;
border-radius: 1.15rem;
background: #f5f4f3;
}
body[data-ens-page="guide-sizing"] .guide-table-picker > span {
color: #494642;
font-size: .75rem;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
body[data-ens-page="guide-sizing"] .guide-table-picker > div {
display: flex;
flex-wrap: wrap;
gap: .55rem;
}
body[data-ens-page="guide-sizing"] .guide-table-picker button {
min-height: 2.8rem;
padding: .65rem 1rem;
border: 1px solid #87ceeb;
border-radius: 999px;
background: #fff;
color: #282623;
font-size: .82rem;
font-weight: 800;
}
body[data-ens-page="guide-sizing"] .guide-table-picker button[aria-pressed="true"] {
border-color: #e20613;
background: #e20613;
color: #fff;
}
body[data-ens-page="guide-sizing"] .guide-table-picker p {
margin: 0;
color: #5c5854;
font-size: .84rem;
line-height: 1.5;
}
body[data-ens-page="guide-sizing"] .guide-next {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-top: 1.2rem;
padding-top: 1.1rem;
border-top: 1px solid var(--guide-line, #e3e2e1);
}
body[data-ens-page="guide-sizing"] .guide-next > span {
color: #76706a;
font-size: .84rem;
}
body[data-ens-page="guide-sizing"] .guide-next a {
display: inline-flex;
min-height: 2.75rem;
align-items: center;
gap: .45rem;
padding: .55rem .85rem;
border-radius: 999px;
background: #0c0b0a;
color: #fff;
font-size: .78rem;
font-weight: 800;
}
body[data-ens-page="guide-sizing"] .guide-next--dark { border-color: #34322f; }
body[data-ens-page="guide-sizing"] .guide-next--dark > span { color: #bdbab6; }
body[data-ens-page="guide-sizing"] .guide-next--dark a { background: #e20613; color: #0d0c0b; }
body[data-ens-page="guide-sizing"] .guide-slice-hint { display: none; }
/* ---------- Guía de diseño: relato corto, profundidad a demanda ---------- */
body[data-ens-page="guide-design"] .guide-design-steps li { display: block; }
body[data-ens-page="guide-design"] .guide-design-steps li a {
display: grid;
grid-template-columns: 2rem minmax(0, 1fr);
gap: .75rem;
align-items: start;
color: inherit;
}
body[data-ens-page="guide-design"] .guide-design-steps li a:hover,
body[data-ens-page="guide-design"] .guide-design-steps li a:focus-visible { color: #fff; }
body[data-ens-page="guide-design"] .guide-design-steps li span {
display: block;
margin-top: .15rem;
color: #bdbab6;
font-size: .76rem;
line-height: 1.45;
}
body[data-ens-page="guide-design"] .guide-design-slice-hint { display: none; }
body[data-ens-page="guide-design"] .guide-design-next {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-top: 1.2rem;
padding-top: 1.1rem;
border-top: 1px solid var(--guide-line, #e3e2e1);
}
body[data-ens-page="guide-design"] .guide-design-next > span {
color: #76706a;
font-size: .84rem;
}
body[data-ens-page="guide-design"] .guide-design-next a {
display: inline-flex;
min-height: 2.75rem;
align-items: center;
gap: .45rem;
padding: .55rem .85rem;
border-radius: 999px;
background: #0c0b0a;
color: #fff;
font-size: .78rem;
font-weight: 800;
}
body[data-ens-page="guide-design"] .guide-design-next--dark { border-color: #34322f; }
body[data-ens-page="guide-design"] .guide-design-next--dark > span { color: #bdbab6; }
body[data-ens-page="guide-design"] .guide-design-next--dark a { background: #e20613; color: #0d0c0b; }
body[data-ens-page="guide-design"] .guide-design-distribution {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: .8rem;
}
body[data-ens-page="guide-design"] .guide-design-distribution article {
min-width: 0;
padding: 1.15rem;
border: 1px solid var(--guide-line, #e3e2e1);
border-top: 2px solid #e20613;
border-radius: 0 0 1rem 1rem;
background: #fff;
}
body[data-ens-page="guide-design"] .guide-design-distribution b {
color: #e20613;
font-size: .7rem;
font-weight: 800;
letter-spacing: .11em;
text-transform: uppercase;
}
body[data-ens-page="guide-design"] .guide-design-distribution h3 {
margin: .65rem 0 .35rem;
font-size: 1.1rem;
letter-spacing: -.035em;
}
body[data-ens-page="guide-design"] .guide-design-distribution p {
margin: 0;
color: #6b6661;
font-size: .84rem;
line-height: 1.55;
}
body[data-ens-page="guide-design"] .guide-design-steps li a:focus-visible,
body[data-ens-page="guide-design"] .guide-design-next a:focus-visible {
outline: 3px solid #87ceeb;
outline-offset: 3px;
}
@media (max-width: 680px) {
body[data-ens-page="guide-sizing"] .guide-story-steps h2 { max-width: 11ch; }
body[data-ens-page="guide-sizing"] .guide-story-steps ol { gap: .35rem; }
body[data-ens-page="guide-sizing"] .guide-story-steps li { padding-block: .28rem; }
body[data-ens-page="guide-sizing"] .guide-story-steps li a { gap: .6rem; }
body[data-ens-page="guide-sizing"] .guide-story-steps li a b { width: 1.75rem; height: 1.75rem; }
body[data-ens-page="guide-sizing"] .guide-story-steps li span { font-size: .7rem; }
body[data-ens-page="guide-sizing"] .guide-measure-grid { gap: .75rem; }
body[data-ens-page="guide-sizing"] .guide-measure-card { border-radius: 1.2rem; }
body[data-ens-page="guide-sizing"] .guide-measure-card > summary {
display: grid;
min-height: 5.5rem;
grid-template-columns: 1fr auto;
column-gap: .7rem;
align-content: center;
padding: .9rem 1rem;
cursor: pointer;
list-style: none;
}
body[data-ens-page="guide-sizing"] .guide-measure-card > summary::-webkit-details-marker { display: none; }
body[data-ens-page="guide-sizing"] .guide-measure-card > summary span {
grid-column: 1;
color: #87ceeb;
font-size: .66rem;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
}
body[data-ens-page="guide-sizing"] .guide-measure-card > summary strong {
grid-column: 1;
margin-top: .18rem;
font-size: 1.35rem;
letter-spacing: -.04em;
}
body[data-ens-page="guide-sizing"] .guide-measure-card > summary small {
grid-column: 2;
grid-row: 1 / span 2;
align-self: center;
padding: .48rem .62rem;
border: 1px solid rgba(135, 206, 235, .45);
border-radius: 999px;
color: #e1f0f7;
font-size: .63rem;
font-weight: 800;
}
body[data-ens-page="guide-sizing"] .guide-measure-card[open] > summary small { font-size: 0; }
body[data-ens-page="guide-sizing"] .guide-measure-card[open] > summary small::after { content: "Ocultar"; font-size: .63rem; }
body[data-ens-page="guide-sizing"] .guide-measure-card figure { height: 20rem; }
body[data-ens-page="guide-sizing"] .guide-measure-card--hips figure { height: 19rem; }
body[data-ens-page="guide-sizing"] .guide-measure-card > div { padding: 1rem; }
body[data-ens-page="guide-sizing"] .guide-measure-card > div .guide-card__number,
body[data-ens-page="guide-sizing"] .guide-measure-card > div h3 { display: none; }
body[data-ens-page="guide-sizing"] .guide-measure-card ul { margin-top: 0; }
body[data-ens-page="guide-sizing"] .guide-table-picker { padding: 1rem; }
body[data-ens-page="guide-sizing"] .guide-table-picker > div { display: grid; grid-template-columns: repeat(3, 1fr); }
body[data-ens-page="guide-sizing"] .guide-table-picker button { min-width: 0; padding-inline: .45rem; }
body[data-ens-page="guide-sizing"] .guide-slice-hint {
display: flex;
align-items: center;
gap: .5rem;
margin: 0 0 .8rem;
color: #b3aeaa;
font-size: .78rem;
}
body[data-ens-page="guide-sizing"] .guide-slice-hint::before { content: "↔"; color: #87ceeb; font-size: 1.05rem; }
body[data-ens-page="guide-sizing"] .guide-process {
display: flex;
gap: .75rem;
overflow-x: auto;
padding: 0 .1rem .75rem;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
body[data-ens-page="guide-sizing"] .guide-process::-webkit-scrollbar { display: none; }
body[data-ens-page="guide-sizing"] .guide-process article {
flex: 0 0 81%;
min-height: 9.5rem;
scroll-snap-align: start;
}
body[data-ens-page="guide-sizing"] .guide-next { align-items: flex-start; flex-direction: column; gap: .7rem; }
body[data-ens-page="guide-sizing"] .guide-next a { width: 100%; justify-content: center; }
body[data-ens-page="guide-design"] .guide-design-steps h2 { max-width: 12ch; }
body[data-ens-page="guide-design"] .guide-design-steps ol { gap: .35rem; }
body[data-ens-page="guide-design"] .guide-design-steps li { padding-block: .28rem; }
body[data-ens-page="guide-design"] .guide-design-steps li a { gap: .6rem; }
body[data-ens-page="guide-design"] .guide-design-steps li a b { width: 1.75rem; height: 1.75rem; }
body[data-ens-page="guide-design"] .guide-design-steps li span { font-size: .7rem; }
body[data-ens-page="guide-design"] .guide-design-slice-hint {
display: flex;
align-items: center;
gap: .5rem;
margin: 0 0 .8rem;
color: #76706a;
font-size: .78rem;
}
body[data-ens-page="guide-design"] .guide-section--dark .guide-design-slice-hint { color: #b3aeaa; }
body[data-ens-page="guide-design"] .guide-design-slice-hint::before { content: "↔"; color: #e20613; font-size: 1.05rem; }
body[data-ens-page="guide-design"] .guide-section--dark .guide-design-slice-hint::before { color: #87ceeb; }
body[data-ens-page="guide-design"] .guide-design-slices,
body[data-ens-page="guide-design"] .guide-design-process,
body[data-ens-page="guide-design"] .guide-design-distribution {
display: flex;
gap: .75rem;
overflow-x: auto;
padding: 0 .1rem .75rem;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
body[data-ens-page="guide-design"] .guide-design-slices::-webkit-scrollbar,
body[data-ens-page="guide-design"] .guide-design-process::-webkit-scrollbar,
body[data-ens-page="guide-design"] .guide-design-distribution::-webkit-scrollbar { display: none; }
body[data-ens-page="guide-design"] .guide-design-slices > article,
body[data-ens-page="guide-design"] .guide-design-process > article,
body[data-ens-page="guide-design"] .guide-design-distribution > article {
flex: 0 0 82%;
min-height: 9.5rem;
scroll-snap-align: start;
}
body[data-ens-page="guide-design"] .guide-design-next {
align-items: flex-start;
flex-direction: column;
gap: .7rem;
}
body[data-ens-page="guide-design"] .guide-design-next a { width: 100%; justify-content: center; }
}
/* ---------- Coherencia transversal: tipografía, contención y cabeceras ----------
Ojo: aquí había una llave de cierre de más. El navegador descartaba por eso
la regla :root de abajo, --ens-font-ui quedaba vacía y buena parte del texto
de la portada caía en la letra por defecto del navegador (Times). */
:root { --ens-font-ui: 'Jost', system-ui, -apple-system, sans-serif; }
html { overflow-x: clip; }
body {
overflow-x: clip;
font-family: var(--ens-font-ui) !important;
}
button,
input,
select,
textarea { font-family: var(--ens-font-ui) !important; }
:where(h1, h2, h3, h4, p, li, summary, figcaption, .guide-card, .tl-card, .info-box, .toc, .product-landing__card) {
min-width: 0;
max-width: 100%;
}
:where(h1, h2, h3, h4, p, li, summary, figcaption, .guide-card, .tl-card, .info-box, .toc) {
overflow-wrap: break-word;
}
:where(h1, h2, h3) { text-wrap: balance; }
:where(p, li) { text-wrap: pretty; }
:where(img, video, svg, canvas, iframe) { max-inline-size: 100%; }
footer,
footer > *,
footer nav,
footer div { min-width: 0; max-width: 100%; }
footer a { overflow-wrap: break-word; }
/* La cabecera oscura del inicio se vuelve el lenguaje común de las páginas
que todavía usan la estructura Tailwind antigua (blog y comparativas). */
@media (min-width: 1024px) {
.ensutex-site-nav.ens-home-nav {
position: fixed !important;
inset: 0 0 auto !important;
z-index: 80 !important;
padding: .85rem clamp(1rem, 2.2vw, 2.6rem) !important;
border: 0 !important;
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
pointer-events: none;
font-family: var(--ens-font-ui);
}
.ens-home-nav > .max-w-7xl {
width: 100%;
max-width: none !important;
padding: 0 !important;
pointer-events: auto;
}
.ens-home-nav .h-20 { height: auto !important; }
.ensutex-site-nav.ens-home-nav .ensutex-brand-logo {
width: auto !important;
height: 2.25rem !important;
filter: brightness(0) invert(1) drop-shadow(0 8px 18px rgba(0, 0, 0, .38));
}
.ensutex-site-nav.ens-home-nav .ensutex-brand-text {
display: inline-flex !important;
min-height: 2.55rem;
align-items: center;
padding: .6rem 1rem;
border: 1px solid rgba(255, 255, 255, .12);
border-radius: 999px;
background: rgba(14, 14, 13, .84);
color: rgba(255, 255, 255, .76);
font-size: .6rem;
font-style: normal;
font-weight: 650;
letter-spacing: .145em;
backdrop-filter: blur(16px) saturate(130%);
}
.ens-home-nav .ensutex-nav-menu {
display: flex !important;
gap: .15rem !important;
padding: .25rem !important;
border: 1px solid rgba(255, 255, 255, .12);
border-radius: 999px;
background: rgba(14, 14, 13, .84);
box-shadow: 0 14px 42px rgba(0, 0, 0, .2);
backdrop-filter: blur(16px) saturate(130%);
}
.ens-home-nav .ensutex-nav-menu > a,
.ens-home-nav .ensutex-nav-menu > div > a {
display: inline-flex;
min-width: 0;
min-height: 2.45rem;
align-items: center;
padding: .52rem .9rem !important;
border-radius: 999px;
color: rgba(255, 255, 255, .76);
font-size: .75rem;
font-weight: 600;
line-height: 1.15;
white-space: nowrap;
}
.ens-home-nav .ensutex-nav-menu > a:hover,
.ens-home-nav .ensutex-nav-menu > div > a:hover {
background: rgba(255, 255, 255, .09);
color: #fff;
}
.ens-home-nav .ensutex-nav-menu > .ensutex-nav-cta {
border: 1px solid rgba(226, 6, 19, .58);
background: #0c0b0a;
color: #fff !important;
box-shadow: none;
}
}
/* Correcciones de interacción y densidad · catálogo + guías. */
@media (max-width: 1023px) {
/* .guide-nav no recibe eventos para no bloquear la página; el desplegable
sí debe recibirlos. Sin esto el menú se abría, pero sus enlaces quedaban
inaccesibles bajo la capa de navegación. */
.guide-nav { isolation: isolate; }
.guide-nav .guide-mobile-nav {
z-index: 2;
pointer-events: auto !important;
}
.guide-nav .guide-mobile-nav.is-open { display: grid !important; }
/* El último enlace es una acción de navegación, no un CTA verde aislado. */
.guide-nav .guide-mobile-nav a:last-child {
justify-content: flex-start;
margin-top: 0;
border: 1px solid rgba(255, 255, 255, .14);
background: rgba(255, 255, 255, .06);
color: #fff;
}
}
/* El bloque previo al producto se mantiene explicativo, pero no compite con
la exploración del catálogo. */
body[data-ens-page="catalog"] #catalogo {
padding-block: clamp(2.75rem, 5vw, 4.25rem) !important;
}
body[data-ens-page="catalog"] #catalogo > div > .mb-14 {
margin-bottom: 1.25rem !important;
padding-bottom: 1rem !important;
}
body[data-ens-page="catalog"] #catalogo .catalog-intro {
gap: .75rem;
margin-bottom: .85rem !important;
padding: .8rem 1rem !important;
}
body[data-ens-page="catalog"] #catalogo .catalog-intro > .w-12 {
width: 2.35rem !important;
height: 2.35rem !important;
}
body[data-ens-page="catalog"] #catalogo .catalog-intro h3 { margin-bottom: .2rem !important; }
body[data-ens-page="catalog"] #catalogo .catalog-intro p { line-height: 1.45; }
body[data-ens-page="catalog"] #catalogo > div > nav.mb-8 { margin-bottom: .75rem !important; }
body[data-ens-page="catalog"] #catalogo > div > nav.mb-8 > p { margin-bottom: .45rem !important; }
body[data-ens-page="catalog"] #catalogo .catalog-toolbar { margin-bottom: 1rem !important; }
@media (max-width: 767px) {
/* El CTA verde duplicaba la navegación y cubría acciones del catálogo. */
body[data-ens-page="catalog"] #sticky-cta-mobile { display: none !important; }
/* 01-oct-2026: la reserva se puso en 0 cuando la barra se apagó. Después
catalogo.html volvió a encenderla (display:flex + is-visible por JS), y con la
reserva en 0 la barra de 70px se comía la última línea del copyright: se midió
el solape (14px de 38px, a 360 y a 390) con el navegador, no se supuso.
Se devuelve la reserva que el propio catálogo ya declara en catalogo.css, que
es la que cubre barra + carrito flotante. Esta regla gana la cascada por
especificidad (body[attr].clase) y por !important, así que el valor de aquí es
el que manda: por eso el 0 anulaba también los 76/78/120px de los otros bundles. */
body[data-ens-page="catalog"].has-sticky-cta { padding-bottom: calc(7.5rem + env(safe-area-inset-bottom)) !important; }
/* El bundle anterior ocultaba esta sección mediante el selector adyacente.
Además desactivaba content-visibility y dejaba un bloque vacío al llegar
por scroll. */
body[data-ens-page="catalog"] #cotizador-express,
body[data-ens-page="catalog"] #cuidados-prenda {
content-visibility: visible !important;
contain: none !important;
}
body[data-ens-page="catalog"] #cotizador-express {
padding-block: 2.75rem !important;
}
body[data-ens-page="catalog"] #cotizador-box {
width: min(100% - 1.5rem, 38rem) !important;
margin-inline: auto !important;
padding: 1.5rem 1rem !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
}
body[data-ens-page="catalog"] #cuidados-prenda {
display: block !important;
padding-block: 2.75rem !important;
opacity: 1 !important;
transform: none !important;
}
body[data-ens-page="catalog"] #cuidados-prenda > div > .grid {
display: flex !important;
gap: .75rem !important;
overflow-x: auto !important;
padding: 0 .15rem .65rem !important;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
body[data-ens-page="catalog"] #cuidados-prenda > div > .grid::-webkit-scrollbar { display: none; }
body[data-ens-page="catalog"] #cuidados-prenda > div > .grid > div {
flex: 0 0 84%;
padding: 1.15rem !important;
scroll-snap-align: start;
}
body[data-ens-page="catalog"] #catalogo {
padding-block: 2.5rem !important;
}
body[data-ens-page="catalog"] #catalogo > div > .mb-14 {
margin-bottom: 1rem !important;
padding-bottom: .8rem !important;
}
body[data-ens-page="catalog"] #catalogo .catalog-intro { padding: .75rem !important; }
}
@media (min-width: 1024px) {
/* En las guías, la barra de accesos aparece justo bajo el hero. El asistente
queda por encima para no tapar ninguna opción durante ese cruce. */
body[data-ens-page="guide-design"] .floating-widgets,
body[data-ens-page="guide-sizing"] .floating-widgets,
body[data-ens-page="faq"] .floating-widgets {
bottom: calc(5.75rem + var(--ensutex-consent-offset, 0px)) !important;
}
}
/* Las guías y landings usan la misma geometría y las mismas etiquetas. */
.guide-nav,
.guide-nav__inner,
.guide-nav__links,
.guide-nav__cta,
.guide-menu,
.guide-mobile-nav { font-family: var(--ens-font-ui); }
.guide-nav__links a,
.guide-nav__cta { white-space: nowrap; }
.guide-menu {
min-height: 3.25rem;
align-items: center;
gap: .6rem;
padding: .72rem 1rem;
border-color: rgba(226, 6, 19, .5);
letter-spacing: .08em;
text-transform: uppercase;
}
.guide-menu::before {
content: '';
width: 1.2rem;
height: .9rem;
flex: 0 0 auto;
background: linear-gradient(#fff 0 0) top / 100% 2px no-repeat,
linear-gradient(#fff 0 0) center / 100% 2px no-repeat,
linear-gradient(#fff 0 0) bottom / 100% 2px no-repeat;
}
/* Algunas páginas parten sobre fondo claro: una sombra superior conserva el
logo blanco legible sin volver a la barra negra de ancho completo. */
.ensutex-fabric-guide .guide-nav,
.blog-editorial-body .ensutex-site-nav.ens-home-nav {
background: linear-gradient(180deg, rgba(7, 7, 7, .82), rgba(7, 7, 7, 0)) !important;
}
@media (max-width: 1023px) {
.blog-editorial-body .ens-home-nav button[aria-label*="menú" i],
.alternativas-retail-page .ens-home-nav button[aria-label*="menú" i] {
display: inline-flex;
min-width: 7rem;
min-height: 3.25rem;
align-items: center;
justify-content: center;
gap: .65rem;
border: 1px solid rgba(226, 6, 19, .5);
border-radius: 1rem;
background: rgba(12, 11, 10, .9);
}
}
@media (max-width: 1180px) {
.guide-nav__inner { grid-template-columns: minmax(0, 1fr) auto; }
.guide-nav__links,
.guide-nav__cta,
.guide-brand span { display: none; }
.guide-menu { display: inline-flex; }
}
/* Escala editorial legible: conserva presencia sin que las líneas se monten. */
.guide-hero h1 {
max-width: 13ch;
font-size: clamp(2.85rem, 5.35vw, 5.15rem);
line-height: .96;
letter-spacing: -.052em;
}
.faq-hub__hero h1 {
max-width: 13ch !important;
font-size: clamp(2.75rem, 5.2vw, 5rem) !important;
line-height: .96 !important;
letter-spacing: -.05em !important;
}
.privacy-page .page-header h1 {
font-size: clamp(2.75rem, 5.2vw, 5rem) !important;
line-height: .98 !important;
letter-spacing: -.045em !important;
}
.privacy-page .page-header {
background-image: linear-gradient(105deg, rgba(8, 8, 7, .97), rgba(10, 9, 8, .88)),
url('../images/optimized/general/fondodeinicio-1200.webp') !important;
background-position: center !important;
background-size: cover !important;
}
.guide-process article { min-width: 0; overflow: hidden; }
.guide-card :where(h3, p, li),
.guide-deep-dive :where(summary, p, li),
.product-landing__card :where(h3, p),
.tl-card :where(h3, p) { overflow-wrap: break-word; }
/* Franja visual reutilizable: dos escenas, deslizable en móvil. */
.ens-experience-strip {
width: min(1120px, calc(100% - 2rem));
margin: clamp(2rem, 5vw, 4rem) auto 1rem;
}
.ens-experience-strip__heading {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(16rem, .7fr);
gap: 1rem;
align-items: end;
margin-bottom: 1rem;
}
.ens-experience-strip__heading h2 {
margin: 0;
font-size: clamp(2rem, 4.2vw, 3.8rem);
line-height: .98;
letter-spacing: -.045em;
}
.ens-experience-strip__heading p { margin: 0; color: #6e6863; line-height: 1.6; }
.ens-experience-rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
.ens-experience-card {
position: relative;
min-width: 0;
min-height: 22rem;
margin: 0;
overflow: hidden;
border-radius: 1.4rem;
background: #0c0b0a;
color: #fff;
box-shadow: 0 20px 55px rgba(17, 16, 15, .12);
}
.ens-experience-card img { width: 100%; height: 100%; min-height: 22rem; object-fit: cover; }
.ens-experience-card::after { content: ''; position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, rgba(7, 7, 7, .94)); }
.ens-experience-card figcaption { position: absolute; z-index: 1; right: 1.2rem; bottom: 1.1rem; left: 1.2rem; }
.ens-experience-card figcaption span { display: block; margin-bottom: .35rem; color: #87ceeb; font-size: .67rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.ens-experience-card figcaption strong { display: block; font-size: clamp(1.25rem, 2.2vw, 1.8rem); line-height: 1.08; }
@media (max-width: 767px) {
.guide-hero h1,
.faq-hub__hero h1 {
max-width: 12ch !important;
font-size: clamp(2.35rem, 10.8vw, 3.3rem) !important;
line-height: .98 !important;
letter-spacing: -.045em !important;
}
.privacy-page .page-header h1 {
font-size: clamp(2.35rem, 11vw, 3.25rem) !important;
line-height: 1 !important;
}
.guide-hero__lead,
.faq-hub__hero p { font-size: 1rem; line-height: 1.55; }
.guide-mobile-nav {
top: 4.45rem;
max-height: calc(100svh - 5.25rem);
overflow-y: auto;
overscroll-behavior: contain;
}
.ens-experience-strip__heading { grid-template-columns: 1fr; }
.ens-experience-strip__heading h2 { font-size: clamp(2rem, 9.5vw, 2.8rem); }
.ens-experience-rail {
display: flex;
gap: .75rem;
margin-inline: -.15rem;
padding: .1rem .15rem .8rem;
overflow-x: auto;
overscroll-behavior-inline: contain;
scroll-snap-type: x mandatory;
scrollbar-width: thin;
-webkit-overflow-scrolling: touch;
}
.ens-experience-card { flex: 0 0 88%; min-height: 20rem; scroll-snap-align: center; }
.ens-experience-card img { min-height: 20rem; }
.ens-fabric-cards .grid.grid-cols-1 {
display: flex !important;
gap: .75rem !important;
overflow-x: auto;
padding: .1rem .1rem .8rem;
scroll-snap-type: x mandatory;
overscroll-behavior-inline: contain;
scrollbar-width: thin;
-webkit-overflow-scrolling: touch;
}
.ens-fabric-cards .grid.grid-cols-1 > .tl-card {
flex: 0 0 88%;
scroll-snap-align: center;
}
footer .flex.flex-wrap { padding-inline: 1rem; }
footer a { max-width: 100%; white-space: normal !important; }
}
/* ---------- Cierre de coherencia visual ----------
Una sola geometría de cabecera y contención real en pantallas pequeñas. */
@media (max-width: 1023px) {
.guide-nav,
.ensutex-site-nav.ens-home-nav {
width: 100% !important;
min-height: 4rem !important;
padding: 0 !important;
border-bottom: 1px solid rgba(255, 255, 255, .12) !important;
background: rgba(0, 0, 0, .92) !important;
box-shadow: 0 10px 32px rgba(0, 0, 0, .18);
backdrop-filter: blur(14px) saturate(125%) !important;
-webkit-backdrop-filter: blur(14px) saturate(125%) !important;
}
.guide-nav__inner,
.ens-home-nav > .max-w-7xl,
.ens-home-nav > .max-w-7xl > .h-20 {
width: 100% !important;
min-height: 4rem !important;
height: 4rem !important;
padding-inline: 1rem !important;
}
.guide-nav__inner { grid-template-columns: minmax(0, 1fr) auto; }
.guide-brand img,
.ensutex-site-nav.ens-home-nav .ensutex-brand-logo {
width: auto !important;
height: 2.1rem !important;
}
.guide-brand { min-height: 44px; }
.ensutex-site-nav.ens-home-nav #mobileMenuBtn,
.guide-nav .guide-menu,
.blog-editorial-body .ens-home-nav button[aria-label*="menú" i],
.alternativas-retail-page .ens-home-nav button[aria-label*="menú" i] {
display: inline-flex !important;
width: 5.55rem !important;
min-width: 5.55rem !important;
min-height: 2.75rem !important;
height: 2.75rem !important;
align-items: center;
justify-content: center;
gap: .45rem !important;
padding: .35rem .55rem !important;
border: 1px solid rgba(255, 255, 255, .18) !important;
border-radius: .375rem !important;
background: rgba(255, 255, 255, .06) !important;
color: #fff !important;
font-size: 1rem !important;
font-weight: 600 !important;
line-height: 1 !important;
letter-spacing: 0 !important;
text-transform: none !important;
box-shadow: none !important;
}
.ensutex-site-nav.ens-home-nav #mobileMenuBtn::after { display: none !important; content: none !important; }
.ensutex-site-nav.ens-home-nav #mobileMenuBtn .mobile-menu-label,
.ens-home-nav .mobile-menu-label { display: inline !important; text-transform: none !important; }
.guide-menu::before {
width: 1.2rem;
height: .92rem;
background: linear-gradient(#fff 0 0) top / 100% 2px no-repeat,
linear-gradient(#fff 0 0) center / 100% 2px no-repeat,
linear-gradient(#fff 0 0) bottom / 100% 2px no-repeat;
}
.guide-mobile-nav {
top: 4rem !important;
right: 0 !important;
left: 0 !important;
max-height: calc(100svh - 4rem);
padding: .75rem 1rem 1rem !important;
border-width: 1px 0 0 !important;
border-radius: 0 0 1rem 1rem !important;
background: rgba(9, 8, 8, .985) !important;
}
.ensutex-site-nav #mobileDrawer {
position: absolute !important;
inset: 4rem 0 auto !important;
width: 100% !important;
max-height: calc(100svh - 4rem) !important;
background: rgba(9, 8, 8, .985) !important;
}
}
@media (max-width: 767px) {
/* Tailwind no generó flex-wrap en el footer de inicio: era la causa del
ancho de 499 px dentro de una pantalla de 375 px. */
footer .flex.flex-wrap {
display: flex !important;
width: 100% !important;
flex-wrap: wrap !important;
justify-content: center !important;
column-gap: 1.15rem !important;
row-gap: .35rem !important;
padding-inline: 1rem !important;
}
footer .flex.flex-wrap > a {
flex: 0 1 auto;
min-width: 0 !important;
padding-inline: .2rem !important;
}
.guide-section,
.faq-hub__tools,
.product-landing__section,
.ensutex-fabric-guide main > section {
padding-block: 2.75rem !important;
}
.guide-anchor,
.faq-hub__anchors,
.product-landing__related,
.ens-fabric-decision-guide,
#telas [role="tablist"] {
overscroll-behavior-inline: contain;
scroll-snap-type: x proximity;
scrollbar-width: none !important;
-webkit-overflow-scrolling: touch;
}
.guide-anchor::-webkit-scrollbar,
.faq-hub__anchors::-webkit-scrollbar,
.product-landing__related::-webkit-scrollbar,
.ens-fabric-decision-guide::-webkit-scrollbar,
#telas [role="tablist"]::-webkit-scrollbar { display: none; }
.guide-anchor a,
.faq-hub__anchors a,
.product-landing__related a { scroll-snap-align: start; }
.guide-heading,
.product-landing__heading { margin-bottom: 1.15rem !important; }
.guide-heading h2,
.product-landing__heading h2,
.faq-hub__section h2 {
font-size: clamp(1.85rem, 8.5vw, 2.55rem) !important;
line-height: 1.02 !important;
letter-spacing: -.04em !important;
}
/* El resumen de telas se hojea; no obliga a bajar por tres bloques antes
de llegar a la decisión real. */
.ens-fabric-decision-guide {
display: flex !important;
gap: .65rem;
margin-inline: -.15rem;
padding: .1rem .15rem .65rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.ens-fabric-decision-guide > div {
display: grid;
grid-template-columns: 1fr;
flex: 0 0 78%;
align-content: center;
min-height: 4.5rem;
padding: .75rem .85rem;
scroll-snap-align: start;
}
#telas [role="tablist"] {
flex-wrap: nowrap !important;
justify-content: flex-start !important;
gap: .45rem !important;
padding: .2rem 0 .35rem !important;
overflow-x: auto;
scroll-snap-type: x proximity;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
#telas [role="tab"] {
flex: 0 0 auto;
min-height: 2.75rem;
padding: .55rem .7rem !important;
border: 1px solid #d8d6d3 !important;
border-radius: 999px;
background: #fff;
font-size: .76rem !important;
line-height: 1.2;
scroll-snap-align: start;
}
#telas [role="tab"][aria-selected="true"] {
border-color: #1a1817 !important;
background: #1a1817;
color: #fff !important;
}
#telas .fabric-content > .ens-fabric-choice-card,
#telas .fabric-content > div > .ens-fabric-choice-card {
border-radius: 1rem !important;
box-shadow: 0 12px 32px rgba(30, 28, 26, .08) !important;
}
}
/* El catálogo comparte la tipografía pública de Inicio. Evitamos depender de
la fuente por defecto del navegador si una hoja diferida tarda en cargar. */
body[data-ens-page="catalog"] {
--ens-font-ui: 'Jost', system-ui, -apple-system, sans-serif;
font-family: var(--ens-font-ui) !important;
}
/* El contenido comercial no queda esperando al motor de escritura: enlaces con hash y
usuarios con JS lento ven título y explicación al instante.
29-sep: esto valía para TODOS los viewports y sin condición, así que los títulos del
catálogo no animaban nunca —ni en celular ni en escritorio—, y era una de las causas
de «las animaciones no avanzan». Ahora es la salida de movimiento reducido, que es lo
que de verdad debe quedar quieto. Esta hoja la cargan las ocho páginas con [data-ty],
así que la regla llega a todas; el resto de los casos queda cubierto por el cerrojo
`ty-js` y el respaldo de 4,5 s, que muestran el texto si el motor no revela. */
@media (prefers-reduced-motion: reduce) {
html [data-ty] {
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
}
}
/* Catálogo mobile: síntesis con aire intermedio. La explicación orienta sin
convertirse en una portada nueva antes de los modelos. */
@media (max-width: 767px) {
#catalogo.ens-catalog-carousel-section {
padding-block: 3rem !important;
}
/* 29-sep · Un solo canto en el celular del catálogo: 24 px, que es lo que pide el
criterio E03 del ecosistema («margen lateral ≥ 24 px en celular»). Antes esta página
tenía DOS valores distintos: 20 px en #catalogo (esta regla, en 1.25rem) y los 16 px
que deja Tailwind (`px-4`) en todo el resto —promociones, telas, cotizador—, y al
corregir la bajada del hero quedó un tercero de 24 arriba. Medido a 360 px: 20, 16 y 24
en la misma pantalla.
El selector de #catalogo va PRIMERO y hay que dejarlo: su ID (100) le gana a la regla
general de abajo (clases), así que si alguien lo borra por «repetido», los 20 px
vuelven y el canto se parte otra vez. Se listan los contenedores CENTRADOS
(`max-w-7xl.mx-auto`) a propósito: los div a sangre de una sección —mosaicos, rieles—
no llevan esas clases y no deben recibir canto.
29-sep · El PIE entra por la tercera línea, y entra por una razón medida, no por
simetría: la bajada «Contigo en tu pasión — Santiago, Chile» es la única pieza que
quedaba a 16 px en toda la página. No es texto pegado al canto —`marca.css` pinta ese
`p` como cinta blanca (`.bg-zinc-900 :is(span,p):is(.tracking-…):not(.absolute)`) y su
texto va centrado, a ~110 px de cualquier borde— pero la cinta tenía 328 px de ancho
contra los 312 del resto, o sea la única banda más ancha que el canto nuevo.
Va SÓLO para la página del catálogo (`body[data-ens-page="catalog"]`) a propósito: este
pie es componente COMPARTIDO por todo el sitio, y la decisión de unificar el canto móvil
se tomó para esta página, que es la que el encargo pidió cerrar. Las otras páginas
conservan su canto y no se tocan desde acá. El contenedor es `max-w-3xl.mx-auto` (no
`max-w-7xl`): por eso el selector general de arriba no lo alcanzaba, y por eso la lista
lo nombra aparte en vez de aflojar el filtro y arrastrar divs a sangre. */
body[data-ens-page="catalog"] #catalogo.ens-catalog-carousel-section > div,
body[data-ens-page="catalog"] main > section:not(.catalog-page-hero) > div.max-w-7xl.mx-auto,
body[data-ens-page="catalog"] footer > div.max-w-3xl.mx-auto {
padding-inline: 1.5rem !important;
}
#catalogo > div > div:first-child {
display: block !important;
margin-bottom: 1.35rem !important;
padding-bottom: 1.25rem !important;
}
#catalogo > div > div:first-child > div:first-child > span {
margin-bottom: .4rem !important;
font-size: .62rem !important;
}
#catalogo h2 {
max-width: 12ch;
margin-bottom: .75rem !important;
font-size: clamp(2.2rem, 10.5vw, 2.75rem) !important;
line-height: 1 !important;
text-align: left !important;
}
#catalogo > div > div:first-child p {
max-width: 38rem;
font-size: .9rem !important;
line-height: 1.55 !important;
}
#catalogo nav[aria-label="Páginas por tipo de producto"] {
margin-bottom: 1.25rem !important;
}
#catalogo nav[aria-label="Páginas por tipo de producto"] > p {
margin-bottom: .65rem !important;
}
#catalogo nav[aria-label="Páginas por tipo de producto"] > div {
padding-bottom: .25rem !important;
scrollbar-width: none;
}
#catalogo nav[aria-label="Páginas por tipo de producto"] > div::-webkit-scrollbar {
display: none;
}
#catalogo nav[aria-label="Páginas por tipo de producto"] a {
min-height: 2.75rem !important;
padding: .65rem .85rem !important;
font-size: .78rem !important;
}
#catalogo .catalog-toolbar {
gap: .8rem !important;
margin-bottom: 1.25rem !important;
padding: 1rem !important;
}
#catalogo .catalog-search {
margin-bottom: .35rem !important;
}
#catalogo .catalog-search__input {
padding-left: 2.75rem !important;
border-color: #d2d0ce !important;
background: #fff !important;
box-shadow: 0 8px 24px rgba(30, 28, 26, .06) !important;
text-align: left !important;
}
#catalogo .catalog-search__icon {
width: 1rem;
height: 1rem;
display: block;
border: 2px solid #5e5a56;
border-radius: 50%;
font-size: 0;
}
#catalogo .catalog-search__icon::after {
content: '';
position: absolute;
right: -.35rem;
bottom: -.22rem;
width: .5rem;
height: 2px;
border-radius: 999px;
background: #5e5a56;
transform: rotate(45deg);
transform-origin: left center;
}
#catalogo .catalog-toolbar__filters {
min-height: 0 !important;
}
/* Los tres pasos, en una sola fila compacta: sin tarjetas altas. */
#catalogo .catalog-flow-roadmap {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: .35rem !important;
margin: .85rem 0 1.15rem !important;
}
#catalogo .catalog-flow-roadmap li {
min-width: 0 !important;
min-height: 0 !important;
padding: .45rem .5rem !important;
align-content: center;
border-radius: .7rem !important;
}
#catalogo .catalog-flow-roadmap li b {
width: 1.25rem !important;
height: 1.25rem !important;
font-size: .62rem !important;
}
#catalogo .catalog-flow-roadmap li span {
font-size: .68rem !important;
line-height: 1.3 !important;
}
#catalogo .catalog-flow-roadmap .roadmap-step--long {
display: none !important;
}
#catalogo .catalog-flow-roadmap .roadmap-step--short {
display: inline !important;
}
}
/* ---------- Catálogo: la fila de filtros es la que manda ----------
Esta capa carga al final, así que aquí queda el acabado definitivo de la
barra: filtros legibles, fila deslizable con snap y degradado sólo si
sobra contenido. Se evita el contenedor con forma de píldora para que el
buscador y los filtros compartan una sola superficie. */
#catalogo .catalog-toolbar__filters #cat-tabs {
display: flex !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
flex-wrap: nowrap !important;
justify-content: center !important;
justify-content: safe center !important;
overflow-x: auto !important;
overflow-y: hidden !important;
scroll-snap-type: x proximity;
scrollbar-width: none;
-ms-overflow-style: none;
-webkit-overflow-scrolling: touch;
}
#catalogo .catalog-toolbar__filters #cat-tabs::-webkit-scrollbar {
display: none;
}
#catalogo .catalog-toolbar__filters #cat-tabs .cat-tab {
display: inline-flex !important;
flex: 0 0 auto !important;
width: auto !important;
min-width: 0 !important;
min-height: 2.5rem !important;
align-items: center;
justify-content: center;
padding: .5rem .9rem !important;
font-size: .875rem !important;
font-weight: 750 !important;
letter-spacing: .01em !important;
white-space: nowrap;
scroll-snap-align: start;
}
@media (max-width: 1023px) {
#catalogo .catalog-toolbar__filters #cat-tabs .cat-tab {
min-height: 2.75rem !important;
padding: .5rem .85rem !important;
}
}
/* ---------- Catálogo: la barra de decisión ----------
El bloque anterior que vivía aquí (elegir "uno o pack") desapareció por
diseño; esta barra se queda con el buscador y las categorías, y viaja
pegada bajo el menú mientras se recorre #catalogo. */
body[data-ens-page="catalog"] #catalogo .catalog-toolbar {
position: sticky;
top: var(--ens-nav-height);
z-index: 40;
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
gap: .55rem !important;
width: 100%;
max-width: 74rem !important;
margin: 0 auto 1.5rem !important;
padding: .7rem .9rem !important;
border: 1px solid rgba(15, 14, 14, .09) !important;
border-radius: 1rem !important;
background: rgba(255, 255, 255, .95) !important;
box-shadow: 0 10px 26px rgba(15, 14, 14, .06) !important;
backdrop-filter: blur(10px) saturate(120%);
-webkit-backdrop-filter: blur(10px) saturate(120%);
transition: top 280ms ease, box-shadow 200ms cubic-bezier(.22, 1, .36, 1),
border-color 200ms cubic-bezier(.22, 1, .36, 1);
}
body.ens-primary-nav-hidden[data-ens-page="catalog"] #catalogo .catalog-toolbar {
top: 0 !important;
}
body[data-ens-page="catalog"] #catalogo .catalog-toolbar.is-stuck {
border-color: rgba(15, 14, 14, .16) !important;
box-shadow: 0 16px 34px rgba(15, 14, 14, .16) !important;
}
body[data-ens-page="catalog"] #catalogo .catalog-toolbar .catalog-search,
body[data-ens-page="catalog"] #catalogo .catalog-toolbar__filters {
grid-column: 1 / -1 !important;
}
body[data-ens-page="catalog"] #catalogo .catalog-toolbar__filters {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: .9rem !important;
padding: .6rem 0 0 !important;
border: 0 !important;
border-top: 1px solid rgba(15, 14, 14, .08) !important;
}
body[data-ens-page="catalog"] #catalogo .catalog-toolbar__shortcuts {
display: flex !important;
flex: 0 0 auto;
flex-direction: column;
align-items: flex-end;
gap: .1rem;
margin: 0;
}
body[data-ens-page="catalog"] #catalogo .catalog-toolbar__shortcuts a {
color: #e20613;
font-size: .78rem;
font-weight: 700;
line-height: 1.4;
text-decoration: underline;
text-underline-offset: 2px;
white-space: nowrap;
}
body[data-ens-page="catalog"] #catalogo .catalog-toolbar__shortcuts a:hover,
body[data-ens-page="catalog"] #catalogo .catalog-toolbar__shortcuts a:focus-visible {
color: #e20613;
}
@media (max-width: 1023px) {
body[data-ens-page="catalog"] #catalogo .catalog-toolbar {
margin-bottom: 1.15rem !important;
padding: .6rem .7rem !important;
border-radius: .9rem !important;
}
body[data-ens-page="catalog"] #catalogo .catalog-toolbar__filters {
flex-direction: column !important;
align-items: stretch !important;
gap: .5rem !important;
}
body[data-ens-page="catalog"] #catalogo .catalog-toolbar__shortcuts {
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 1.1rem;
padding-top: .5rem;
border-top: 1px solid rgba(15, 14, 14, .06);
}
}
/* Revisión 19-sep: el título del acordeón heredaba el estilo del antiguo subtítulo
(mayúsculas, 10px y espaciado ancho). Queda igual que los demás ítems del cajón. */
.ensutex-site-nav #mobileDrawer .mobile-catalog-accordion .mobile-catalog-primary > span:first-child {
display: inline !important;
max-width: none !important;
margin: 0 !important;
color: inherit !important;
font-size: 1.0625rem !important;
font-weight: 800 !important;
letter-spacing: 0 !important;
line-height: 1.3 !important;
text-align: left !important;
text-transform: none !important;
}
.mobile-drawer-label { font-size: .75rem; }
/* 25-sep · REBXN "próximamente": visible pero sin clic hasta que tenga modelos. */
.is-pronto { opacity: .62; cursor: default; pointer-events: none; }
.ens-door__cta.is-pronto { background: transparent !important; border: 1px dashed currentColor !important; color: inherit !important; box-shadow: none !important; }
/* Source: cta-ref.css */
/* ============================================================================
Línea de referencia bajo el CTA principal (ENCARGO-LIBRO-UX.md, regla 2)
Debajo del botón principal vive una línea corta y verdadera que dice qué gana
el cliente al apretarlo. No agranda el botón: es texto secundario de al menos
14 px, con el tono apagado propio de cada superficie.
El elemento se declara como … hermano del CTA.
Como mide el 100% del ancho, en una fila flexible con `flex-wrap: wrap` salta
sola al renglón siguiente; no necesita trucos.
========================================================================== */
.cta-ref {
display: block;
width: 100%;
margin-top: .5rem;
font-size: .875rem;
line-height: 1.4;
font-weight: 500;
text-align: center;
color: #555961;
}
/* ---------- Ensutex · home ---------- */
#hero-section .cta-ref {
/* Blanco neutro: era rgba(228,240,244) — un blanco teñido de cian, o sea
azul cielo en el chrome del hero. */
color: rgba(255, 255, 255, .84);
text-shadow: 0 1px 10px rgba(0, 0, 0, .7);
}
#proceso .cta-ref {
color: rgba(228, 234, 240, .78);
}
#cierre-equipo .cta-ref {
color: #555961;
text-align: left;
}
.ens-doors .cta-ref {
color: rgba(255, 255, 255, .72);
text-align: left;
/* Las dos puertas llevan líneas de largo distinto: reservar dos renglones
en ambas deja los botones parejos al pie de cada puerta. */
min-height: calc(1.4em * 2);
}
/* ---------- Marcas (ModoFan y REBXN) ---------- */
.b-actions .cta-ref,
.b-builder__nav .cta-ref,
.mf-cta__content .cta-ref,
.rx-join__inner .cta-ref {
color: var(--b-muted, rgba(245, 245, 245, .74));
font-size: .875rem;
}
/* La frase del cierre del camino vivo NO vive dentro de .b-actions: es hija
directa de .cv-estacion__cuerpo (ver «[data-cv] .cv-estacion--cierre > .cta-ref»
más abajo). Por eso no le llegaba ninguno de los tonos de arriba y caía en el
color base de la regla .cta-ref —#555961, un gris pensado para tarjeta CLARA—.
Sobre la tarjeta oscura del camino de ModoFan eso medía 2,62:1, y el control de
Carlitos lo marcaba como texto que no se lee. Se le da el tono apagado propio de
la marca, el mismo que ya usan sus hermanas dentro de .b-actions.
Solo ModoFan: REBXN tiene su propio bloque y no se toca. */
[data-cv-marca="modofan"] .cv-estacion__cuerpo > .cta-ref {
color: var(--mf-muted, rgba(245, 242, 255, .74));
-webkit-text-fill-color: var(--mf-muted, rgba(245, 242, 255, .74));
}
/* ---------- Catálogo ---------- */
.cta-flow .cta-ref {
color: #d4d4d8;
text-align: left;
}
.catalog-page-hero__copy .cta-ref {
color: rgba(228, 240, 244, .84);
}
/* ---------- Guías y preguntas ---------- */
.guide-actions .cta-ref {
color: #cbd1d8;
}
.guide-cta .cta-ref {
grid-column: 2;
justify-self: end;
width: auto;
max-width: 22rem;
margin-top: .6rem;
color: #bdc4cd;
text-align: right;
}
/* El pie de la guía ya trae su propio aire: la línea no suma otro renglón
grande. */
.guide-cta {
row-gap: .4rem;
}
/* ---------------------------------------------------------------------------
Cierre del camino: la línea vive fuera del contenedor flex del CTA, así no
altera la geometría del trazo ni la posición de Asu; se recorta el aire que
separa el botón del contenido siguiente.
------------------------------------------------------------------------- */
[data-cv] .cv-estacion--cierre > .cta-ref {
margin-top: 0;
}
/* Hero del home · celular: la pila de acciones es `column-reverse`; la línea
entra con orden 0 para quedar justo debajo del CTA (pegado al borde). */
@media (max-width: 767px) {
#hero-section.ens-motion-hero--video .ens-cinema-hero__inner {
padding-bottom: calc(.4rem + env(safe-area-inset-bottom)) !important;
}
#hero-section.ens-motion-hero--video .ens-motion-actions .cta-ref {
order: 0 !important;
margin: .45rem 0 0 !important;
font-size: .875rem !important;
text-align: center !important;
/* Blanco neutro: era rgba(232,244,248) — blanco teñido de cian. */
color: rgba(255, 255, 255, .88) !important;
text-shadow: 0 1px 10px rgba(0, 0, 0, .78) !important;
}
.guide-cta .cta-ref {
grid-column: 1;
justify-self: stretch;
max-width: none;
text-align: left;
}
}
/* Escritorio · home: la línea ocupa el renglón completo bajo los dos botones. */
@media (min-width: 1024px) {
#hero-section.ens-motion-hero--video .ens-motion-actions .cta-ref {
grid-column: 1 / -1;
order: 3;
margin-top: .1rem;
text-align: right;
}
}
/* Source: puertas-marca.css */
/* ================================================================
ENSUTEX · PUERTAS POR MARCA — portada
Tres entradas: Ensutex (equipos y agrupaciones), ModoFan (prenda
con tu referencia) y REBXN (conjuntos urbanos).
Reglas que manda DIRECCION_VISUAL_MARCAS.md:
- cada marca con su color; el degradado vive en el fondo de la
puerta, nunca en el texto ni en el boton completo;
- los logos de marca van siempre en blanco sobre fondo oscuro;
- el rojo de Ensutex queda reservado a la accion principal, por eso
las puertas usan el acento celeste del sitio.
No se agranda nada de lo que ya existia: la tipografia, los botones
y los espacios repiten la escala vigente del sistema.
================================================================ */
.ens-doors {
position: relative;
overflow: clip;
/* Mas apretado que el resto de las secciones a proposito: a 390x844
la seccion entera tiene que entrar sin cortar la tercera puerta. */
padding-block: clamp(2rem, 6vw, var(--space-section-md));
background:
radial-gradient(circle at 50% -10%, rgba(135, 206, 235, .16), transparent 55%),
linear-gradient(180deg, #080807, #0f0e0d);
color: #ffffff;
}
.ens-doors__head {
max-width: 46rem;
margin: 0 auto clamp(1.25rem, 3vw, 2.25rem);
text-align: center;
}
.ens-doors__title {
margin: 0;
font-size: clamp(1.6rem, 1.1rem + 2vw, 2.6rem);
font-weight: 900;
letter-spacing: -.02em;
line-height: 1.1;
}
.ens-doors__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
align-items: stretch;
gap: clamp(.65rem, 1.4vw, 1.1rem);
margin: 0;
padding: 0;
list-style: none;
}
/* ---------- La puerta ---------- */
.ens-door {
display: flex;
height: 100%;
min-width: 0;
flex-direction: column;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, .13);
border-radius: .95rem;
background: #0f0e0d;
transition:
transform 220ms var(--ens-ease),
border-color 220ms var(--ens-ease),
box-shadow 220ms var(--ens-ease);
}
/* El sello de marca: puro fondo, ningun texto encima del degradado. */
.ens-door__mark {
display: flex;
min-height: 3.25rem;
flex: 0 0 auto;
align-items: center;
justify-content: center;
padding: .7rem 1rem;
}
.ens-door__logo {
display: block;
width: auto;
max-width: 100%;
height: auto;
filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .45));
}
/* Altura optica por marca: la palabra de ModoFan es muy ancha, asi que
pide menos alto que el lockup de Ensutex o el imagotipo de REBXN. */
.ens-door--ensutex .ens-door__logo {
height: 2rem;
}
.ens-door--modofan .ens-door__logo {
height: 1.1rem;
}
.ens-door--rebxn .ens-door__logo {
height: 2rem;
}
.ens-door__body {
display: flex;
flex: 1 1 auto;
min-width: 0;
flex-direction: column;
gap: .3rem;
padding: .8rem .8rem .85rem;
}
.ens-door__name {
margin: 0;
color: #ffffff;
font-size: 1.05rem;
font-weight: 900;
letter-spacing: .01em;
line-height: 1.2;
}
.ens-door__for {
margin: 0;
color: rgba(255, 255, 255, .74);
font-size: .8rem;
font-weight: 600;
line-height: 1.35;
text-wrap: balance;
}
.ens-door__qty {
margin: 0;
font-size: .72rem;
font-weight: 850;
letter-spacing: .08em;
line-height: 1.35;
text-transform: uppercase;
}
.ens-door__cta {
display: inline-flex;
min-height: 2.75rem;
align-items: center;
justify-content: center;
gap: .4rem;
margin-top: auto;
padding: .7rem 1rem;
border: 1px solid rgba(255, 255, 255, .22);
border-radius: 999px;
background: #0c0b0a;
color: #ffffff;
font-size: .82rem;
font-weight: 900;
letter-spacing: .04em;
line-height: 1;
text-align: center;
text-decoration: none;
text-transform: uppercase;
transition: border-color 180ms var(--ens-ease), background-color 180ms var(--ens-ease);
}
.ens-door__cta svg {
flex: 0 0 auto;
width: 1rem;
height: 1rem;
}
/* ---------- Color por marca (solo fondos y detalles) ---------- */
.ens-door--ensutex .ens-door__mark {
background:
radial-gradient(circle at 22% 0%, rgba(135, 206, 235, .34), transparent 60%),
linear-gradient(135deg, #090808, #1b1a18 58%, #2e2b28);
box-shadow: inset 0 -1px 0 rgba(135, 206, 235, .34);
}
.ens-door--ensutex .ens-door__qty {
color: #87ceeb;
}
.ens-door--modofan .ens-door__mark {
background:
radial-gradient(circle at 78% 110%, rgba(23, 198, 192, .5), transparent 62%),
linear-gradient(135deg, #8b5cff, #6e4be0 52%, #17c6c0);
box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .26);
}
.ens-door--modofan .ens-door__body {
background: linear-gradient(180deg, #15102a, #0b0d11 72%);
}
.ens-door--modofan .ens-door__qty {
color: #cbb6ff;
}
.ens-door--rebxn .ens-door__mark {
background:
radial-gradient(circle at 82% 108%, rgba(61, 91, 255, .55), transparent 62%),
linear-gradient(135deg, #ff2bd6, #a64dff 54%, #3d5bff);
box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .26);
}
.ens-door--rebxn .ens-door__body {
background: linear-gradient(180deg, #0e0e12, #0b0d11 72%);
}
.ens-door--rebxn .ens-door__qty {
color: #ff9ae9;
}
.ens-door--ensutex .ens-door__cta:hover,
.ens-door--ensutex .ens-door__cta:focus-visible {
border-color: rgba(135, 206, 235, .6);
}
.ens-door--modofan .ens-door__cta:hover,
.ens-door--modofan .ens-door__cta:focus-visible {
border-color: rgba(139, 92, 255, .72);
}
.ens-door--rebxn .ens-door__cta:hover,
.ens-door--rebxn .ens-door__cta:focus-visible {
border-color: rgba(255, 43, 214, .7);
}
/* Hover solo donde hay puntero fino: en pantallas tactiles la tarjeta
no se eleva ni hace zoom. */
@media (hover: hover) and (pointer: fine) {
.ens-door:hover {
transform: translateY(-2px);
border-color: rgba(255, 255, 255, .26);
box-shadow: 0 10px 26px rgba(0, 0, 0, .42);
}
}
.ens-door:focus-within {
border-color: rgba(255, 255, 255, .3);
}
.ens-doors__note {
margin: clamp(.9rem, 2vw, 1.4rem) 0 0;
color: rgba(255, 255, 255, .68);
font-size: .74rem;
font-weight: 700;
letter-spacing: .04em;
line-height: 1.5;
text-align: center;
}
.ens-doors__note b {
color: #ffffff;
font-weight: 850;
}
/* ---------- Entrada escalonada (fade + 10px) ---------- */
/* .ens-doors--motion la agrega el JS solo si el movimiento esta
permitido; sin JS la seccion se ve completa desde el primer pintado. */
.ens-doors--motion .ens-door {
opacity: 0;
transform: translateY(10px);
}
.ens-doors--motion .ens-door--in {
opacity: 1;
transform: none;
transition:
opacity 220ms var(--ens-ease) var(--ens-door-delay, 0ms),
transform 220ms var(--ens-ease) var(--ens-door-delay, 0ms),
border-color 220ms var(--ens-ease),
box-shadow 220ms var(--ens-ease);
}
@media (prefers-reduced-motion: reduce) {
.ens-doors--motion .ens-door,
.ens-doors--motion .ens-door--in {
opacity: 1;
transform: none;
transition: none;
}
}
/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
.ens-doors__grid {
max-width: 34rem;
margin-inline: auto;
}
}
/* Una columna: la puerta deja de ser tarjeta ancha y se vuelve una
fila compacta con su sello al costado, para que las tres entren. */
@media (max-width: 767px) {
.ens-doors__grid {
grid-template-columns: minmax(0, 1fr);
/* Las dos puertas tienen que seguir midiendo lo mismo de alto. En celular
cada una va en su propia fila, así que la altura la decidía el texto:
con la tipografía nueva (Jost) la línea de para quién de ModoFan pasa a
dos renglones y la de REBXN a uno, y las tarjetas quedaban dispares
(162 y 142px). Con las filas igualadas, la que más pide manda y las dos
quedan parejas, sin tocar tamaños de letra ni de botón. */
grid-auto-rows: 1fr;
gap: .5rem;
max-width: none;
}
.ens-door {
flex-direction: row;
}
.ens-door__mark {
width: 5.6rem;
min-height: 100%;
padding: .7rem .55rem;
}
/* La palabra de ModoFan es la mas ancha: su sello pide un poco mas. */
.ens-door--modofan .ens-door__mark {
width: 6.6rem;
}
.ens-door__logo {
max-height: 1.9rem;
}
.ens-door__body {
gap: .22rem;
padding: .7rem .8rem;
}
.ens-door__name {
font-size: 1rem;
}
.ens-door__for {
font-size: .78rem;
}
.ens-door__cta {
min-height: 2.6rem;
margin-top: .5rem;
}
}
/* Al final de la portada solo quedan ModoFan y REBXN: dos columnas y un
ancho contenido, para que no quede un hueco donde iba la tercera. */
.ens-doors--final .ens-doors__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
max-width: 820px;
margin-inline: auto;
}
@media (max-width: 767px) {
.ens-doors--final .ens-doors__grid { grid-template-columns: minmax(0, 1fr); }
}
/* Source: hero-movil.css */
/* ============================================================================
HERO DEL HOME EN CELULAR · composición vertical de conversión
Encargo ENCARGO-HERO-MOVIL.md
Todo lo de este archivo vive dentro de @media (max-width: 767px):
el escritorio no cambia ni un píxel. Se carga al final en index.html.
Orden de la pantalla: aviso SEO → título → bajada corta → aire con la
prenda de fondo → CTA principal y enlace secundario en la zona del pulgar.
========================================================================== */
/* La imagen vertical de fondo solo existe en celular. */
/* La imagen va dentro de un que en escritorio entrega un pixel vacío
(así no se descarga donde no se ve). El no debe crear caja propia:
la regla del hero que pone position:relative a sus hijos lo encerraría. */
#hero-section > .ens-hero-movil__marco { display: contents; position: static !important; }
.ens-hero-movil__fondo { display: none; }
/* La bajada corta solo existe en celular: en escritorio manda la larga. */
.ens-lead-corto { display: none; }
@media (max-width: 767px) {
/* ── 1. Fondo vertical a sangre ─────────────────────────────────────────── */
/* 04-oct · El aviso de privacidad (position: fixed, abajo) tapaba el CTA del
héroe al 100% en la primera visita. En vez de flotar sobre el contenido, el
aviso "reserva" su alto: el héroe se encoge por `--ensutex-consent-offset`
(el alto del aviso + 16px, que fija analytics-loader.js) y el CTA queda justo
por encima. Con el consentimiento ya decidido el offset vuelve a 0px y el
héroe recupera la pantalla completa: es un ajuste temporal, no de diseño. */
#hero-section.ens-motion-hero--video {
min-height: calc(100svh - var(--nav-height-mobile, 64px) - var(--ensutex-consent-offset, 0px));
padding-top: var(--nav-height-mobile, 64px);
padding-bottom: 0;
flex-direction: column;
background: #0d0c0b !important;
overflow: hidden;
}
#hero-section .ens-hero-movil__fondo {
position: absolute !important;
inset: 0 !important;
z-index: 0 !important;
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
object-fit: cover !important;
object-position: center 42% !important;
pointer-events: none !important;
}
/* 30-sep · Carlitos: «el video del home está como pausado … por lo menos en versión mobile».
En celular el héroe es una imagen (hero-inicio-movil.webp, el primer cuadro del video) con el video
vertical encima: hero-inicio-movil.webm/.mp4, 720×1290, la polera que gira. Ocupa EXACTAMENTE la
misma caja que la imagen (cover, misma posición), va por encima de ella y por debajo del degradado.
Nace transparente y aparece con un fundido corto cuando de verdad empieza a reproducirse (la clase
--activo la pone el script que está junto al