/* ============================================================
   niddo · tienda
   Los colores y las medidas salen de la maqueta demos/tienda.html.
   Si hay que cambiar la marca, se cambia acá arriba y baja a todo.
   ============================================================ */

:root{
  --nd-blue:#7E96C4;
  --nd-blue-dk:#5D74A0;
  --nd-blue-soft:#E8EDF7;
  --nd-pink:#F3A8B8;
  --nd-pink-dk:#E0879B;
  --nd-pink-soft:#FCE6EB;
  --nd-cream:#FDF7F3;
  --nd-bg:#FFFFFF;
  --nd-border:#EAEEF6;
  --nd-ink:#37405A;
  --nd-muted:#8791AB;
  --nd-ok:#3FA987;
  --nd-warn:#D89127;
  --nd-danger:#D96461;
  --nd-radius:14px;
  --nd-shadow:0 2px 14px rgba(94,116,160,.09);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Segoe UI',system-ui,-apple-system,Roboto,sans-serif;
  color:var(--nd-ink);background:var(--nd-bg);
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased
}

/* ---- El pie siempre abajo ----

   Con poco contenido -una ficha que no existe, un carrito vacio- el pie
   quedaba pegado al contenido y dejaba un hueco blanco hasta el borde de la
   ventana. La columna flexible empuja el pie al fondo cuando sobra lugar, y lo
   deja correr normalmente cuando la pagina es larga.

   El flex va tambien en el form porque WebForms mete un <form> entre el body y
   el contenido: sin eso la cadena se corta y el main nunca crece.

   Se usa 100dvh y no 100vh por el navegador del telefono: con 100vh la barra
   de direcciones que aparece y desaparece deja el pie fuera de la pantalla. */
body{min-height:100dvh;display:flex;flex-direction:column}
body>form{flex:1 0 auto;display:flex;flex-direction:column;min-height:0}
main{flex:1 0 auto}
footer{flex-shrink:0}

@supports not (min-height:100dvh){
  body{min-height:100vh}
}
a{color:inherit;text-decoration:none;cursor:pointer}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer}

.wrap{max-width:1220px;margin:0 auto;padding:0 22px}
/* Paginas de un solo formulario. Sin esto la tarjeta se queda pegada a
   la izquierda del ancho completo y sobran 600 px de pantalla vacia a la
   derecha; asi el titulo y la tarjeta comparten una columna centrada.
   Los 664 px son los 620 de la tarjeta mas el padding del wrap. */
.wrap.angosto{max-width:664px}
.mut{color:var(--nd-muted)}
.neg{color:var(--nd-danger)}
.pos{color:var(--nd-ok)}
.nowrap{white-space:nowrap}
.right{text-align:right}
.center{text-align:center}

/* ============ Barra de aviso ============ */
.topstrip{
  background:linear-gradient(90deg,var(--nd-blue),var(--nd-pink));color:#fff;text-align:center;
  padding:8px 16px;font-size:.8rem;font-weight:600;letter-spacing:.3px
}

/* ============ Encabezado ============ */
header{position:sticky;top:0;z-index:900;background:#fff;border-bottom:1px solid var(--nd-border)}
.hd{display:flex;align-items:center;gap:26px;padding:16px 0}
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo-txt{font-size:1.75rem;font-weight:800;letter-spacing:-1px;color:var(--nd-blue-dk);line-height:1}

/* El isotipo va como SVG en linea: los colores se resuelven con estas clases,
   asi el mismo marcado sirve sobre fondo claro y sobre fondo oscuro. */
.logo-mark{height:34px;width:auto;flex-shrink:0;overflow:visible}
.lg-antifaz{fill:var(--nd-blue-soft);stroke:var(--nd-blue)}
.lg-trazo{stroke:var(--nd-blue)}
.lg-cara{stroke:var(--nd-blue)}
.lg-rosa{fill:var(--nd-pink)}

/* El antifaz respira y los destellos titilan. */
.logo-mark .lg-antifaz,.logo-mark .lg-cara{transform-box:fill-box;transform-origin:center}
.logo-mark{animation:nd-breathe 4.5s ease-in-out infinite;transition:transform .25s}
.logo-mark .lg-rosa:nth-of-type(2){animation:nd-twinkle 2.8s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.logo-mark .lg-rosa:nth-of-type(3){animation:nd-twinkle 2.8s ease-in-out 1.4s infinite;transform-box:fill-box;transform-origin:center}
/* Al pasar el mouse se frena la animacion: si no, el transform no se llega a ver. */
.logo:hover .logo-mark{animation-play-state:paused;transform:scale(1.07) rotate(-2deg)}

@media (prefers-reduced-motion:reduce){
  .logo-mark,.logo-mark .lg-rosa{animation:none}
}
@keyframes nd-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@keyframes nd-twinkle{
  0%,100%{opacity:.2;transform:scale(.6) rotate(0deg)}
  50%    {opacity:1;transform:scale(1) rotate(45deg)}
}
/* Si el sistema pide menos movimiento, queda quieto. */
@media (prefers-reduced-motion:reduce){
  .logo-mark,.logo-moon,.logo-spark{animation:none}
}

nav.main-nav{display:flex;gap:22px;font-size:.9rem;font-weight:600;flex:1}
nav.main-nav a{padding:6px 0;border-bottom:2px solid transparent;color:#5A6580;transition:.15s}
nav.main-nav a:hover{color:var(--nd-blue-dk)}
nav.main-nav a.on{color:var(--nd-blue-dk);border-bottom-color:var(--nd-blue)}

.hd-actions{display:flex;align-items:center;gap:10px}
.search{position:relative;display:flex;align-items:center;gap:8px;background:var(--nd-cream);
  border:1px solid var(--nd-border);border-radius:22px;padding:7px 14px;width:230px}
.search input{border:0;background:transparent;outline:none;font-size:.85rem;width:100%;color:var(--nd-ink)}
.sugg{position:absolute;top:calc(100% + 8px);left:0;right:0;background:#fff;border:1px solid var(--nd-border);
  border-radius:var(--nd-radius);box-shadow:var(--nd-shadow);overflow:hidden;z-index:950}
.sugg a{display:flex;gap:10px;align-items:center;padding:9px 12px;font-size:.85rem;border-bottom:1px solid var(--nd-border)}
.sugg a:last-child{border-bottom:0}
.sugg a:hover{background:var(--nd-cream)}
.sugg img{width:34px;height:34px;object-fit:cover;border-radius:8px}

.icon-btn{position:relative;width:38px;height:38px;border-radius:50%;border:1px solid var(--nd-border);
  background:#fff;display:flex;align-items:center;justify-content:center;color:var(--nd-blue-dk);
  font-size:1.05rem;transition:.15s}
.icon-btn:hover{background:var(--nd-blue-soft);border-color:var(--nd-blue)}
.dot{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;border-radius:9px;
  background:var(--nd-pink-dk);color:#fff;font-size:.65rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;padding:0 5px}
.burger{display:none}

/* Panel de cuenta */
.acct-wrap{position:relative}
.acct{position:absolute;top:calc(100% + 10px);right:0;width:250px;background:#fff;
  border:1px solid var(--nd-border);border-radius:var(--nd-radius);box-shadow:var(--nd-shadow);
  padding:14px;z-index:950}
.acct h4{margin:0 0 4px;font-size:.95rem}
.acct p{margin:0 0 12px;font-size:.82rem;color:var(--nd-muted)}
.acct a.row{display:flex;align-items:center;gap:9px;padding:8px 0;font-size:.86rem;border-top:1px solid var(--nd-border)}
.acct a.row:hover{color:var(--nd-blue-dk)}

/* Cajón lateral para el celular

   Se esconde con visibility y no con display: asi la entrada puede animarse,
   y visibility:hidden lo saca igual del recorrido con Tab -que es lo que un
   display:none daba gratis y una simple opacidad:0 perderia-. */
.drawer-bg{position:fixed;inset:0;background:rgba(55,64,90,.42);z-index:980;
  opacity:0;visibility:hidden;transition:opacity .26s ease,visibility .26s}
.drawer-bg.abierto{opacity:1;visibility:visible}

.drawer{position:fixed;top:0;left:0;bottom:0;width:290px;background:#fff;z-index:990;
  padding:22px;overflow-y:auto;box-shadow:4px 0 22px rgba(55,64,90,.15);
  transform:translateX(-100%);visibility:hidden;
  transition:transform .26s cubic-bezier(.4,.2,.2,1),visibility .26s}
.drawer.abierto{transform:none;visibility:visible}

/* El buscador de adentro ocupa todo el ancho y no se esconde nunca: en un
   celular es el unico que queda. */
.search-cajon{width:100%;margin-bottom:6px}
.search-cajon .sugg{max-height:300px;overflow-y:auto}
.drawer h4{margin:22px 0 8px;font-size:.72rem;text-transform:uppercase;letter-spacing:.7px;color:var(--nd-muted)}
.drawer a.row{display:block;padding:10px 0;font-size:.95rem;font-weight:600;border-bottom:1px solid var(--nd-border)}

/* ============ Botones ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid var(--nd-border);background:#fff;color:var(--nd-ink);
  border-radius:22px;padding:10px 20px;font-size:.88rem;font-weight:600;transition:.15s}
.btn:hover{border-color:var(--nd-blue);background:var(--nd-blue-soft)}
.btn-primary{background:var(--nd-blue-dk);border-color:var(--nd-blue-dk);color:#fff}
.btn-primary:hover{background:#4E6390;border-color:#4E6390;color:#fff}
.btn-pink{background:var(--nd-pink-dk);border-color:var(--nd-pink-dk);color:#fff}
.btn-pink:hover{background:#D2758A;border-color:#D2758A;color:#fff}
.btn-block{width:100%}
.btn-sm{padding:6px 14px;font-size:.8rem}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* ============ Avisos ============ */
.alert{display:flex;gap:10px;align-items:flex-start;border-radius:var(--nd-radius);
  padding:12px 16px;font-size:.88rem;margin:0 0 16px;border:1px solid}
/* Un aviso que se prende y se apaga desde JavaScript se esconde con el atributo
   hidden, que vale display:none. Pero esa regla es del navegador y el
   display:flex de arriba le gana por especificidad: sin esto queda un cartel
   vacio y de color ocupando lugar, como si algo hubiera fallado. */
.alert[hidden]{display:none}
.a-ok{background:#EEF8F4;border-color:#BFE5D6;color:#2C7A62}
.a-warn{background:#FDF5E8;border-color:#F0DCB6;color:#9A6A18}
.a-danger{background:#FDEDED;border-color:#F3C9C8;color:#A94442}
.a-info{background:var(--nd-blue-soft);border-color:#C9D6EC;color:var(--nd-blue-dk)}

/* ============ Portada ============ */
.hero{background:linear-gradient(140deg,var(--nd-cream),var(--nd-blue-soft));padding:56px 0}
.hero-in{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.hero h1{margin:0 0 12px;font-size:2.7rem;line-height:1.12;letter-spacing:-1.2px;color:var(--nd-blue-dk)}
.hero p{margin:0 0 22px;font-size:1.05rem;color:#5A6580;max-width:460px}
.hero-art{aspect-ratio:4/3;border-radius:26px;background:#fff;box-shadow:var(--nd-shadow);
  overflow:hidden;display:flex;align-items:center;justify-content:center}
/* La foto entra entera, no recortada para llenar el marco. Con cover, una
   prenda apaisada perdia la parte de arriba y la de abajo y se veia agrandada.
   El padding evita que quede pegada a los bordes redondeados. */
.hero-art img{width:100%;height:100%;object-fit:contain;padding:18px;box-sizing:border-box}

.sec{padding:46px 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px}
.sec-head h2{margin:0;font-size:1.5rem;letter-spacing:-.5px;color:var(--nd-blue-dk)}
.sec-head p{margin:4px 0 0;font-size:.9rem;color:var(--nd-muted)}

/* ============ Grilla de productos ============ */
.grid{display:grid;gap:20px}
.grid-prod{grid-template-columns:repeat(4,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}

.card-prod{border:1px solid var(--nd-border);border-radius:var(--nd-radius);overflow:hidden;
  background:#fff;transition:.18s;position:relative;display:flex;flex-direction:column}
.card-prod:hover{box-shadow:var(--nd-shadow);transform:translateY(-2px)}
.card-prod .foto{aspect-ratio:1;background:var(--nd-cream);overflow:hidden;position:relative}
/* Entera tambien en la grilla. Con cover quedaba pareja y prolija, pero le
   cortaba los bordes a cada prenda: en una tienda de ropa, ver la prenda
   completa gana sobre que la grilla quede milimetrica. Casi no se nota porque
   las fotos vienen cuadradas y con fondo blanco. */
.card-prod .foto img{width:100%;height:100%;object-fit:contain;background:#fff;transition:.3s}
.card-prod:hover .foto img{transform:scale(1.04)}
.card-prod .cuerpo{padding:14px;display:flex;flex-direction:column;gap:6px;flex:1}
.card-prod .nombre{font-weight:600;font-size:.94rem;line-height:1.3}
.card-prod .talles{font-size:.76rem;color:var(--nd-muted)}
.card-prod .precio{margin-top:auto;display:flex;align-items:baseline;gap:8px;padding-top:6px}
.card-prod .precio strong{font-size:1.12rem;color:var(--nd-blue-dk)}
.card-prod .precio s{font-size:.85rem;color:var(--nd-muted)}

.tag{position:absolute;top:10px;left:10px;background:var(--nd-pink-dk);color:#fff;
  border-radius:12px;padding:3px 10px;font-size:.7rem;font-weight:700;letter-spacing:.3px}
.tag-sin{background:#9AA3BC}

/* "Nuevo" en el celeste de la marca: se distingue de la promo, que va en rosa,
   sin pelearle la atencion. La promo es la que tiene que saltar. */
.tag-nuevo{background:var(--nd-blue-dk)}
.fav-btn{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;
  border:0;background:rgba(255,255,255,.92);color:var(--nd-muted);display:flex;
  align-items:center;justify-content:center;font-size:.95rem;transition:.15s}
.fav-btn:hover{color:var(--nd-pink-dk)}
.fav-btn.on{color:var(--nd-pink-dk)}

/* ============ Filtros del catálogo ============ */
.cat-layout{display:grid;grid-template-columns:236px 1fr;gap:30px;align-items:start}
/* La columna de filtros se queda fija al scrollear, y si ella misma no entra en
   la pantalla scrollea por su cuenta. Sin esto, con muchas categorias o muchos
   talles, lo de abajo -incluido el boton de aplicar- quedaba fuera de la
   pantalla y no habia forma de llegar: la columna estaba fija, asi que bajar la
   pagina no la movia.

   El 96px es el alto del encabezado pegajoso; el 24 deja aire abajo. */
.filtros{border:1px solid var(--nd-border);border-radius:var(--nd-radius);padding:18px;
         position:sticky;top:96px;
         max-height:calc(100vh - 96px - 24px);overflow-y:auto;
         overscroll-behavior:contain;scrollbar-width:thin}

/* La barra de scroll, discreta: aparece igual en Chrome, que no hace caso de
   scrollbar-width. */
.filtros::-webkit-scrollbar{width:6px}
.filtros::-webkit-scrollbar-thumb{background:var(--nd-border);border-radius:3px}
.filtros::-webkit-scrollbar-thumb:hover{background:#C9D2E4}
.filtros h4{margin:0 0 10px;font-size:.74rem;text-transform:uppercase;letter-spacing:.7px;color:var(--nd-muted)}
.filtros .bloque{padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--nd-border)}
.filtros .bloque:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.filtros label{display:flex;align-items:center;gap:8px;font-size:.87rem;padding:4px 0}

/* Las categorias tienen madres e hijas: "Niña" cuelga de Invierno, de Verano y
   de Ropa Interior. Sin distinguirlas se leian tres "Niña" iguales y no habia
   forma de saber cual era cual. */
.filtros .cat-n0{font-weight:600;margin-top:8px}
.filtros .cat-n0:first-child{margin-top:0}

/* La linea a la izquierda ata la hija con su madre mejor que la sangria sola,
   que a dos niveles se confunde con un renglon que envuelve. El arbol llega a
   tres: Pijamas > Invierno > Niña. */
.filtros .cat-n1,.filtros .cat-n2{border-left:1px solid var(--nd-border)}
.filtros .cat-n1{margin-left:12px;padding-left:12px;font-size:.85rem}
.filtros .cat-n2{margin-left:26px;padding-left:12px;font-size:.83rem;color:var(--nd-muted)}

/* La flecha de "hay mas adentro". Apagada hasta que se mira: es una pista,
   no un boton -lo que se toca sigue siendo el interruptor-. */
.filtros .cat-flecha{font-size:.7rem;color:var(--nd-muted);margin-left:2px}
.filtros .cat-sin-hijas{display:none}

.barra-orden{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--nd-blue-soft);
  color:var(--nd-blue-dk);border-radius:16px;padding:4px 12px;font-size:.79rem;font-weight:600}

.inp{width:100%;border:1px solid var(--nd-border);border-radius:10px;padding:9px 12px;
  font-size:.88rem;font-family:inherit;color:var(--nd-ink);background:#fff;outline:none}
.inp:focus{border-color:var(--nd-blue)}
.inp-sm{padding:6px 10px;font-size:.82rem}
select.inp{cursor:pointer}
textarea.inp{resize:vertical;min-height:70px}
.lbl{display:block;font-size:.78rem;font-weight:600;color:var(--nd-muted);margin-bottom:5px}
/* El dia pactado del envio en moto, debajo de la direccion de entrega. */
.entrega-dia{margin-top:4px;font-weight:600}
.field{margin-bottom:14px}
.campo-error .inp{border-color:var(--nd-danger)}

.pager{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:30px}
.pager .num{width:34px;height:34px;border-radius:10px;border:1px solid var(--nd-border);
  display:inline-flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:600}
.pager .num.on{background:var(--nd-blue-dk);border-color:var(--nd-blue-dk);color:#fff}

/* ============ Ficha del producto ============ */
.prod{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.prod-fotos .principal{aspect-ratio:1;border-radius:var(--nd-radius);overflow:hidden;background:var(--nd-cream)}
/* Entera. Aca es donde mas importa: es la foto que alguien abre para mirar la
   prenda, y donde estaba la guia de talles cortada de los costados. */
.prod-fotos .principal img{width:100%;height:100%;object-fit:contain;background:#fff}
.prod-fotos .miniaturas{display:flex;gap:10px;margin-top:12px}
.prod-fotos .miniaturas a{width:70px;height:70px;border-radius:10px;overflow:hidden;
  border:2px solid transparent;background:var(--nd-cream)}
.prod-fotos .miniaturas a.on{border-color:var(--nd-blue)}
.prod-fotos .miniaturas img{width:100%;height:100%;object-fit:contain;background:#fff}

.prod-info h1{margin:0 0 6px;font-size:1.85rem;letter-spacing:-.7px;line-height:1.2}
.prod-precio{display:flex;align-items:baseline;gap:12px;margin:16px 0}
.prod-precio strong{font-size:2rem;color:var(--nd-blue-dk);letter-spacing:-1px}
.prod-precio s{font-size:1.05rem;color:var(--nd-muted)}

.talles{display:flex;flex-wrap:wrap;gap:9px;margin:10px 0 4px}
.talle{min-width:52px;border:1.5px solid var(--nd-border);border-radius:11px;background:#fff;
  padding:9px 12px;font-size:.9rem;font-weight:600;color:var(--nd-ink);text-align:center;transition:.15s}
.talle:hover{border-color:var(--nd-blue)}
.talle.on{border-color:var(--nd-blue-dk);background:var(--nd-blue-soft);color:var(--nd-blue-dk)}
.talle.sin{opacity:.4;text-decoration:line-through;cursor:not-allowed}

/* El - y el + de la cantidad, en la ficha y en el carrito.

   La regla apuntaba a `.cant button`, pero los dos controles son LinkButton
   y ASP.NET los emite como <a>: la regla no agarraba ninguno y quedaban del
   tamano del signo, 10x23 px. En el celular es el control principal de la
   linea del carrito y habia que apuntarle a un renglon de 10 px de ancho.

   44x44 es la medida que recomienda WCAG para algo que se toca con el dedo.
   Van los dos selectores, <a> y <button>, para que la regla sobreviva si
   alguna vez el marcado cambia de uno al otro. */
.cant{display:inline-flex;align-items:center;border:1px solid var(--nd-border);border-radius:11px;overflow:hidden}

.cant a,
.cant button{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;flex-shrink:0;
  border:0;background:#fff;
  font-size:1.15rem;line-height:1;color:var(--nd-blue-dk);
  text-decoration:none;cursor:pointer;user-select:none;
  -webkit-tap-highlight-color:transparent}

.cant a:hover,
.cant button:hover{background:var(--nd-blue-soft)}

/* Que el dedo vea que lo apreto: en el celular no hay hover y sin esto el
   boton no da ninguna senal hasta que vuelve el postback. */
.cant a:active,
.cant button:active{background:var(--nd-blue-soft);transform:scale(.92)}

.cant input{width:52px;height:44px;border:0;border-left:1px solid var(--nd-border);
  border-right:1px solid var(--nd-border);text-align:center;font-size:.95rem;font-family:inherit;outline:none}

/* El outline:none de arriba deja el campo sin foco visible para quien navega
   con el teclado. El anillo va por dentro porque el contenedor recorta. */
.cant input:focus-visible{box-shadow:inset 0 0 0 2px var(--nd-blue-dk)}

.beneficios{border-top:1px solid var(--nd-border);margin-top:24px;padding-top:18px;display:grid;gap:12px}
.beneficio{display:flex;gap:11px;align-items:flex-start;font-size:.86rem}
.beneficio i{color:var(--nd-blue);font-size:1.1rem;margin-top:1px}

/* ============ Carrito y checkout ============ */
.compra{display:grid;grid-template-columns:1fr 340px;gap:30px;align-items:start}
.linea{display:grid;grid-template-columns:88px 1fr auto;gap:16px;padding:16px 0;border-bottom:1px solid var(--nd-border)}
.linea .foto{width:88px;height:88px;border-radius:11px;overflow:hidden;background:var(--nd-cream)}
.linea .foto img{width:100%;height:100%;object-fit:cover}
.linea .nombre{font-weight:600;font-size:.95rem}
.linea .meta{font-size:.81rem;color:var(--nd-muted)}

.resumen{border:1px solid var(--nd-border);border-radius:var(--nd-radius);padding:20px;
  position:sticky;top:96px;background:#fff}
.resumen h3{margin:0 0 14px;font-size:1.05rem}
.resumen .fila{display:flex;justify-content:space-between;gap:12px;padding:6px 0;font-size:.9rem}
.resumen .total{border-top:1px solid var(--nd-border);margin-top:10px;padding-top:12px;
  font-size:1.15rem;font-weight:700;color:var(--nd-blue-dk)}
.resumen .ahorro{color:var(--nd-ok);font-weight:600}

.pasos{display:flex;gap:6px;margin-bottom:26px;font-size:.82rem;flex-wrap:wrap}
.paso{display:flex;align-items:center;gap:7px;color:var(--nd-muted)}
.paso .n{width:24px;height:24px;border-radius:50%;background:var(--nd-border);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700}
.paso.on{color:var(--nd-blue-dk);font-weight:600}
.paso.on .n{background:var(--nd-blue-dk)}
.paso.hecho .n{background:var(--nd-ok)}
.paso .sep{color:var(--nd-border);margin:0 4px}

.opcion{display:flex;gap:12px;align-items:flex-start;border:1.5px solid var(--nd-border);
  border-radius:var(--nd-radius);padding:14px;margin-bottom:10px;transition:.15s}
.opcion:hover{border-color:var(--nd-blue)}
.opcion.on{border-color:var(--nd-blue-dk);background:var(--nd-blue-soft)}
.opcion .titulo{font-weight:600;font-size:.92rem}
.opcion .detalle{font-size:.81rem;color:var(--nd-muted)}
.opcion .precio{margin-left:auto;font-weight:700;color:var(--nd-blue-dk);white-space:nowrap}

/* ============ Tablas simples ============ */
.tbl{width:100%;border-collapse:collapse;font-size:.88rem}
.tbl th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.6px;
  color:var(--nd-muted);padding:9px 10px;border-bottom:1px solid var(--nd-border)}
.tbl td{padding:11px 10px;border-bottom:1px solid var(--nd-border)}
.tbl td.num,.tbl th.num{text-align:right}

.badge{display:inline-block;border-radius:11px;padding:2px 10px;font-size:.73rem;font-weight:700}
/* El chip de seguimiento es un <a>: sin esto hereda el subrayado y el color
   de enlace y deja de leerse como chip. */
a.badge{text-decoration:none}
a.badge:hover{filter:brightness(.95)}
.b-ok{background:#E4F4EE;color:#2C7A62}
.b-warn{background:#FBF0DC;color:#9A6A18}
.b-info{background:var(--nd-blue-soft);color:var(--nd-blue-dk)}
.b-mute{background:#EFF1F6;color:#6C7793}
.b-pink{background:var(--nd-pink-soft);color:var(--nd-pink-dk)}

/* ============ Estados vacíos ============ */
.vacio{text-align:center;padding:56px 20px;color:var(--nd-muted)}
.vacio i{font-size:2.4rem;display:block;margin-bottom:12px;color:var(--nd-border)}
.vacio h3{margin:0 0 6px;color:var(--nd-ink);font-size:1.15rem}

/* ============ Caja centrada (login, registro) ============ */
.caja{max-width:420px;margin:52px auto;border:1px solid var(--nd-border);
  border-radius:var(--nd-radius);padding:30px;box-shadow:var(--nd-shadow)}
.caja h1{margin:0 0 6px;font-size:1.5rem;color:var(--nd-blue-dk)}
.caja p.sub{margin:0 0 22px;font-size:.88rem;color:var(--nd-muted)}

/* ============ Pie ============ */
footer{background:var(--nd-cream);border-top:1px solid var(--nd-border);margin-top:56px;padding:44px 0 26px}

/* Una seccion con fondo propio al final de la pagina llega pegada al pie.
   El margen de arriba del pie separa el contenido suelto, pero entre dos
   bloques de color deja una banda blanca que se lee como un error. */
.sec-tono{background:var(--nd-blue-soft)}
main:has(.sec-tono:last-child) + footer{margin-top:0}
.foot-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.foot-cols h4{margin:0 0 12px;font-size:.76rem;text-transform:uppercase;letter-spacing:.7px;color:var(--nd-muted)}
.foot-cols a{display:block;padding:4px 0;font-size:.87rem;color:#5A6580}
.foot-cols a:hover{color:var(--nd-blue-dk)}
.foot-bottom{border-top:1px solid var(--nd-border);margin-top:32px;padding-top:18px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.8rem;color:var(--nd-muted)}

/* ============ Ventana modal ============ */
.modal-bg{position:fixed;inset:0;background:rgba(55,64,90,.45);z-index:1000;
  display:flex;align-items:center;justify-content:center;padding:20px}
.modal{background:#fff;border-radius:18px;max-width:560px;width:100%;max-height:86vh;
  overflow-y:auto;padding:26px}
.modal h3{margin:0 0 4px;font-size:1.2rem;color:var(--nd-blue-dk)}
.modal .cerrar{float:right;border:0;background:transparent;font-size:1.3rem;color:var(--nd-muted)}

/* ============ Celular ============ */
@media (max-width:960px){
  .hero-in{grid-template-columns:1fr}
  .grid-prod{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .cat-layout{grid-template-columns:1fr}
  /* En una sola columna no hay nada fijo: los filtros son un bloque mas de la
     pagina y se scrollean con ella. Dejarles alto maximo ahi seria meter un
     scroll adentro de otro. */
  .filtros{position:static;max-height:none;overflow:visible}
  .prod{grid-template-columns:1fr;gap:26px}
  .compra{grid-template-columns:1fr}
  .resumen{position:static}
  .foot-cols{grid-template-columns:1fr 1fr}
  nav.main-nav{display:none}
  .search{width:150px}

  /* En el celular la cabecera se arma en tres columnas: el menu a la
     izquierda, el logo al medio y las acciones a la derecha.

     Van tres columnas y no un flex porque el logo tiene que quedar centrado
     respecto de la PANTALLA, no del espacio que sobra. Con flex, el logo se
     corre hacia el lado que tenga menos botones, y se nota. Con 1fr a cada
     lado, el centro es el centro aunque a la derecha haya tres iconos y a la
     izquierda uno solo. */
  .hd{display:grid;grid-template-columns:1fr auto 1fr;gap:12px}
  .burger{display:flex;justify-self:start}
  .hd .logo{justify-self:center}
  .hd-actions{justify-self:end}
}
@media (max-width:560px){
  .hero h1{font-size:2rem}
  /* Los productos se quedan en dos columnas: una sola deja fotos enormes y
     obliga a recorrer el catalogo entero a fuerza de scroll. */
  .grid-2,.grid-3{grid-template-columns:1fr}
  .grid-prod{gap:12px}
  .card-prod .cuerpo{padding:11px}
  .search{display:none}
  .search-cajon{display:flex}
  .foot-cols{grid-template-columns:1fr}
  .linea{grid-template-columns:64px 1fr;gap:12px}
  .linea .foto{width:64px;height:64px}
}

/* Pantallas muy angostas (un iPhone SE viejo mide 320).
   El logo mas los cuatro botones del encabezado no entran, y el sobrante
   arrastraba la pagina entera de costado en todas las secciones. */
@media (max-width:380px){
  .wrap{padding:0 14px}
  .hd{gap:12px}
  .logo-txt{font-size:1.4rem}
  .hd-actions{gap:6px}
  .icon-btn{width:34px;height:34px;font-size:.95rem}
}

/* ---- Paginas legales (Terminos, Privacidad) ---- */
.legal { max-width: 760px; }
.legal section { margin-bottom: 34px; scroll-margin-top: 90px; }
.legal h3 {
  font-size: 1.15rem;
  color: var(--nd-blue-dk);
  margin: 0 0 12px;
}
.legal p { margin: 0 0 12px; line-height: 1.7; }
.legal ul { margin: 0 0 12px; padding-left: 20px; line-height: 1.7; }
.legal li { margin-bottom: 6px; }
.legal a { color: var(--nd-blue-dk); font-weight: 600; }

/* ---- Interruptor booleano ----

   Un si/no se lee mejor como interruptor que como casilla: la casilla del
   navegador obliga a leer la etiqueta para saber que significa estar tildado,
   y el interruptor muestra el estado por la posicion.

   Se estiliza el <input> que renderiza asp:CheckBox, no un marcado propio: asi
   sigue siendo un checkbox de verdad -viaja en el postback, se opera con la
   barra espaciadora y el lector de pantalla lo anuncia bien-. */
.sw{display:inline-flex;align-items:center;gap:10px}

.sw input[type=checkbox]{
  appearance:none;-webkit-appearance:none;
  flex:none;margin:0;width:42px;height:24px;border-radius:12px;
  background:var(--nd-border);cursor:pointer;position:relative;
  transition:background .22s ease}

/* La perilla */
.sw input[type=checkbox]::after{
  content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;
  border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(38,45,66,.28);
  transition:transform .22s cubic-bezier(.4,.2,.2,1)}

.sw input[type=checkbox]:checked{background:var(--nd-blue)}
.sw input[type=checkbox]:checked::after{transform:translateX(18px)}

.sw input[type=checkbox]:hover:not(:disabled){filter:brightness(.97)}
.sw input[type=checkbox]:focus-visible{outline:2px solid var(--nd-blue-dk);outline-offset:2px}
.sw input[type=checkbox]:disabled{opacity:.5;cursor:not-allowed}

.sw label{cursor:pointer;user-select:none;line-height:1.3}

@media (prefers-reduced-motion:reduce){
  .sw input[type=checkbox],.sw input[type=checkbox]::after{transition:none}
}
/* ---- Zona de subida (arrastrar y soltar) ----

   El <input type=file> del navegador no se puede estilar, asi que se lo tapa
   con esta zona y se lo deja transparente encima: el clic sigue cayendo en el
   input de verdad, sin JavaScript que lo simule.

   Arrastrar y soltar tambien termina asignandole los archivos a ese mismo
   input, para que el postback de WebForms los reciba igual que siempre. */
.dz{
  position:relative;border:2px dashed var(--nd-border);border-radius:12px;
  background:#FBFCFE;padding:26px 20px;text-align:center;
  transition:border-color .18s,background .18s;cursor:pointer}
.dz:hover{border-color:var(--nd-blue);background:var(--nd-blue-soft)}

/* Mientras se arrastra algo encima */
.dz.dz-encima{border-color:var(--nd-blue);background:var(--nd-blue-soft);border-style:solid}

/* El input real: cubre toda la zona pero no se ve */
.dz-input{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;cursor:pointer}

.dz-cara{display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.dz-ico{font-size:1.9rem;color:var(--nd-blue)}
.dz-txt{display:flex;flex-direction:column;gap:2px;font-size:.88rem}
.dz-txt strong{color:var(--nd-ink);font-weight:700}
.dz-txt span{color:var(--nd-muted);font-size:.8rem}

/* Los archivos elegidos, para que se vea que la seleccion quedo hecha */
.dz-lista{
  display:flex;flex-wrap:wrap;gap:6px;justify-content:center;
  margin-top:14px;pointer-events:none}
.dz-lista:empty{display:none}
.dz-chip{
  display:inline-flex;align-items:center;gap:6px;
  background:#fff;border:1px solid var(--nd-border);border-radius:16px;
  padding:4px 11px;font-size:.76rem;color:var(--nd-ink);max-width:220px}
.dz-chip i{color:var(--nd-blue);flex:none}
.dz-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dz-chip .dz-peso{color:var(--nd-muted);flex:none}

@media (prefers-reduced-motion:reduce){ .dz{transition:none} }

/* ---- Desplegable buscable ----

   A partir de seis opciones el desplegable del navegador obliga a recorrer la
   lista a ojo. Este lo reemplaza por un boton que abre un panel con buscador.

   El <select> original sigue en el DOM, solo oculto: es el que viaja en el
   postback y el que dispara el AutoPostBack. Aca solo se lo maneja. */
.bs{position:relative;display:block}
.bs-oculto{position:absolute;opacity:0;pointer-events:none;width:0;height:0}

.bs-boton{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  width:100%;text-align:left;font-family:inherit;cursor:pointer}
.bs-valor{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bs-valor.bs-vacio{color:var(--nd-muted)}
.bs-flecha{font-size:.7rem;color:var(--nd-muted);flex:none;transition:transform .18s}
.bs-abierto .bs-flecha{transform:rotate(180deg)}

.bs-panel{
  display:none;position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:1300;
  background:#fff;border:1px solid var(--nd-border);border-radius:10px;
  box-shadow:0 10px 30px rgba(38,45,66,.16);overflow:hidden}
.bs-abierto .bs-panel{display:block}

.bs-buscar{
  display:flex;align-items:center;gap:8px;padding:9px 12px;
  border-bottom:1px solid var(--nd-border);color:var(--nd-muted)}
.bs-buscar input{
  border:0;outline:none;background:transparent;width:100%;
  font-family:inherit;font-size:.85rem;color:var(--nd-ink)}

.bs-lista{max-height:260px;overflow-y:auto;padding:4px}
.bs-op{padding:8px 11px;border-radius:7px;font-size:.86rem;cursor:pointer;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bs-op:hover,.bs-op.bs-marcada{background:var(--nd-blue-soft)}
.bs-op.bs-sel{color:var(--nd-blue-dk);font-weight:700}
.bs-op.bs-off{display:none}

.bs-nada{display:none;padding:14px 12px;text-align:center;font-size:.83rem;color:var(--nd-muted)}

@media (prefers-reduced-motion:reduce){ .bs-flecha{transition:none} }

/* ---- Tablas angostas ----
   La guía de talles y el resumen del pedido tienen columnas fijas que no
   entran en un celular. Se les da scroll propio para que la que se corra sea
   la tabla y no la página entera. */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;min-width:0}
.tbl-wrap .tbl{min-width:420px}

/* Un item de grilla no baja de lo que mide su contenido mas angosto salvo que
   se le diga. Sin esto la tabla de arriba estira su columna y con ella la
   pagina entera, que era justo lo que el scroll propio venia a evitar. */
.cat-layout>*,.compra>*,.prod>*{min-width:0}

/* ---- Foco visible ----
   El navegador dibuja un contorno por su cuenta, pero se pierde encima de los
   bordes redondeados. Este se ve igual en todos. */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,.talle:focus-visible,.btn:focus-visible{
  outline:2px solid var(--nd-blue-dk);outline-offset:2px;border-radius:6px}

@media (prefers-reduced-motion:reduce){
  .drawer,.drawer-bg{transition:none}
  .card-prod,.card-prod .foto img{transition:none}
  .card-prod:hover{transform:none}
  .card-prod:hover .foto img{transform:none}
}

/* ---- Boton de arrepentimiento ----
   Angosto y centrado como el resto de las cajas de formulario: es un tramite
   corto y no gana nada por ocupar toda la pantalla. */
.arrep{max-width:620px}
.arrep-form{border:1px solid var(--nd-border);border-radius:var(--nd-radius);padding:24px;background:#fff}

/* La trampa para bots. Fuera de la pantalla y no display:none: hay bots que
   saltean lo que esta oculto con display, y asi igual lo encuentran y lo
   completan, que es justamente lo que queremos. */
.trampa{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}
.arrep-fila{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.arrep-fila>*{min-width:0}
.arrep .opc{font-weight:500;color:var(--nd-muted);text-transform:none;letter-spacing:0}
.arrep-nota{margin:16px 0 0;font-size:.79rem;color:var(--nd-muted);line-height:1.6}
.arrep-nota a{color:var(--nd-blue-dk);font-weight:600}

.arrep-listo{text-align:center;border:1px solid var(--nd-border);border-radius:var(--nd-radius);
  padding:40px 26px;background:#fff}
.arrep-listo i{font-size:2.6rem;color:var(--nd-ok);display:block;margin-bottom:14px}
.arrep-listo h3{margin:0 0 10px;font-size:1.3rem;color:var(--nd-blue-dk)}
.arrep-listo p{margin:0 0 10px;font-size:.92rem;line-height:1.6}
.arrep-listo .btn{margin-top:14px}

@media (max-width:560px){ .arrep-fila{grid-template-columns:1fr} }

/* =========================================================================
   Avisos flotantes y estados de espera
   -------------------------------------------------------------------------
   Los avisos de "se guardó" aparecían como un bloque arriba de la pantalla.
   El problema no era estético: en una pantalla larga el aviso quedaba fuera de
   la vista y la acción parecía no haber hecho nada. Este entra deslizándose
   desde el borde, donde el ojo lo agarra, y se va solo.

   Los de error NO se van solos: hay algo que leer y algo que corregir.
   ========================================================================= */

.nd-avisos{
  position:fixed;z-index:2000;right:18px;bottom:18px;
  display:flex;flex-direction:column;gap:10px;
  width:min(360px,calc(100vw - 36px));
  pointer-events:none}

.nd-aviso{
  pointer-events:auto;
  display:flex;align-items:flex-start;gap:11px;
  padding:13px 15px;border-radius:12px;
  background:#fff;border:1px solid var(--nd-border);
  box-shadow:0 8px 28px rgba(38,45,66,.16);
  font-size:.86rem;line-height:1.5;color:var(--nd-ink);
  /* Entra desde afuera del borde derecho */
  transform:translateX(calc(100% + 24px));opacity:0;
  transition:transform .34s cubic-bezier(.16,1,.3,1),opacity .24s ease}

.nd-aviso.nd-entra{transform:none;opacity:1}
.nd-aviso.nd-sale{transform:translateX(calc(100% + 24px));opacity:0}

/* Un filete al costado en vez de teñir todo el fondo: el texto se lee igual
   de bien y el color no compite con el resto de la pantalla. */
.nd-aviso::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:4px;
  border-radius:12px 0 0 12px;background:var(--nd-muted)}
.nd-aviso{position:relative;overflow:hidden}

.nd-aviso i.nd-ico{font-size:1.05rem;flex:none;margin-top:1px}
.nd-aviso .nd-texto{flex:1;min-width:0;word-wrap:break-word}

.nd-aviso .nd-cerrar{
  flex:none;border:0;background:transparent;cursor:pointer;padding:0 0 0 4px;
  color:var(--nd-muted);font-size:1rem;line-height:1;opacity:.7}
.nd-aviso .nd-cerrar:hover{opacity:1}

.nd-aviso.nd-ok::before{background:var(--nd-ok)}
.nd-aviso.nd-ok i.nd-ico{color:var(--nd-ok)}
.nd-aviso.nd-error::before{background:var(--nd-danger)}
.nd-aviso.nd-error i.nd-ico{color:var(--nd-danger)}
.nd-aviso.nd-alerta::before{background:var(--nd-warn)}
.nd-aviso.nd-alerta i.nd-ico{color:var(--nd-warn)}
.nd-aviso.nd-info::before{background:var(--nd-blue)}
.nd-aviso.nd-info i.nd-ico{color:var(--nd-blue-dk)}

/* En el celular va arriba: abajo lo tapa el teclado, y el pulgar lo roza al
   hacer scroll. */
@media (max-width:560px){
  .nd-avisos{right:12px;left:12px;bottom:auto;top:12px;width:auto}
  .nd-aviso{transform:translateY(-140%)}
  .nd-aviso.nd-entra{transform:none}
  .nd-aviso.nd-sale{transform:translateY(-140%)}
}

/* ---------- Botón trabajando ----------
   No se deshabilita el botón: un <button disabled> no viaja en el postback y
   WebForms se queda sin saber cuál se apretó. Se le tapan los clics con CSS,
   que consigue lo mismo sin romper el envío. */
.nd-trabajando{position:relative;pointer-events:none;opacity:.75}
.nd-trabajando > *{visibility:hidden}

.nd-trabajando::after{
  content:'';position:absolute;top:50%;left:50%;
  width:15px;height:15px;margin:-8px 0 0 -8px;
  border:2px solid currentColor;border-right-color:transparent;
  border-radius:50%;animation:nd-girar .6s linear infinite}

@keyframes nd-girar{to{transform:rotate(360deg)}}

/* ---------- Barra de progreso de la página ----------
   Mientras el servidor piensa. Es lo único que distingue "lo apreté y está
   cargando" de "lo apreté y no pasó nada". */
.nd-progreso{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:2100;
  background:transparent;pointer-events:none;overflow:hidden;
  opacity:0;transition:opacity .2s}
.nd-progreso.nd-activa{opacity:1}
.nd-progreso::after{
  content:'';position:absolute;top:0;left:0;height:100%;width:40%;
  background:linear-gradient(90deg,transparent,var(--nd-blue-dk),transparent);
  animation:nd-avanzar 1.1s ease-in-out infinite}

@keyframes nd-avanzar{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(350%)}
}

@media (prefers-reduced-motion:reduce){
  .nd-aviso{transition:opacity .2s ease}
  .nd-aviso,.nd-aviso.nd-entra,.nd-aviso.nd-sale{transform:none}
  .nd-trabajando::after,.nd-progreso::after{animation:none}
  .nd-progreso::after{width:100%;background:var(--nd-blue-dk);opacity:.5}
}

/* ---- Líneas del carrito con problemas de stock ----
   Agregar al carrito no aparta unidades, así que una prenda se puede agotar
   mientras está ahí. La línea no se saca: se apaga. Un carrito que se vacía
   solo deja a la gente pensando que se rompió algo. */
.linea.sin-stock{opacity:.55}
.linea.sin-stock .foto img{filter:grayscale(1)}
.linea.sin-stock .nombre{color:var(--nd-muted)}

/* El precio tachado dice, sin leer nada, que esa plata no se va a cobrar. */
.linea.sin-stock .right{text-decoration:line-through;color:var(--nd-muted)}
.linea.sin-stock .right>div{color:var(--nd-muted)!important}

.stock-aviso{
  display:inline-flex;align-items:center;gap:6px;margin-top:6px;
  font-size:.79rem;font-weight:600;color:var(--nd-danger)}
.stock-aviso.stock-poco{color:var(--nd-warn);font-weight:500}

.linea.poco-stock .stock-aviso{color:var(--nd-warn)}

/* Un botón apagado tiene que verse apagado: sin esto queda igual que uno vivo
   y el clic no hace nada, que se lee como que la página falló. */
.btn:disabled,.btn[disabled]{opacity:.45;cursor:not-allowed}

/* =========================================================================
   Campos de fecha
   -------------------------------------------------------------------------
   El input de fecha nativo se ve distinto en cada navegador y no se parece en
   nada al resto de los campos. Se lo reviste sin reemplazarlo: sigue siendo un
   input[type=date], asi que conserva el teclado, el calendario del sistema y
   lo que ya sepa hacer el navegador en un celular.

   El truco es el indicador: en vez de esconderlo y dibujar un icono al lado
   -que despues no abre nada al hacerle click-, se lo estira sobre el icono
   propio y se lo deja invisible. El click sigue llegando al control de verdad.

   Lo unico que no se puede estilar es el calendario que se despliega: eso es
   ventana del navegador, no del documento. Reemplazarlo pedia un calendario
   propio, con su teclado y su accesibilidad, para ganar poco.
   ========================================================================= */
.inp[type="date"],
.inp[type="datetime-local"],
.inp[type="month"],
.inp[type="time"] {
    position: relative;
    padding-right: 34px;
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px 16px;
    /* Calendario dibujado a mano: sin esto habria que servir un archivo mas
       para un icono que aparece en trece campos. */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236B7280' stroke-width='1.4' stroke-linecap='round'%3E%3Crect x='1.8' y='3' width='12.4' height='11.2' rx='2'/%3E%3Cpath d='M1.8 6.6h12.4M5.2 1.6v2.6M10.8 1.6v2.6'/%3E%3C/svg%3E");
}

.inp[type="date"]:hover,
.inp[type="datetime-local"]:hover,
.inp[type="month"]:hover,
.inp[type="time"]:hover {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231B86EA' stroke-width='1.4' stroke-linecap='round'%3E%3Crect x='1.8' y='3' width='12.4' height='11.2' rx='2'/%3E%3Cpath d='M1.8 6.6h12.4M5.2 1.6v2.6M10.8 1.6v2.6'/%3E%3C/svg%3E");
}

/* Invisible y estirado sobre el icono: el click abre el calendario nativo. */
.inp[type="date"]::-webkit-calendar-picker-indicator,
.inp[type="datetime-local"]::-webkit-calendar-picker-indicator,
.inp[type="month"]::-webkit-calendar-picker-indicator,
.inp[type="time"]::-webkit-calendar-picker-indicator {
    position: absolute;
    right: 0;
    width: 34px;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
}

/* Los tres pedazos -dia, mes, anio- se seleccionan por separado; sin esto el
   resaltado lo pone el navegador con su propio azul. */
.inp[type="date"]::-webkit-datetime-edit,
.inp[type="datetime-local"]::-webkit-datetime-edit { padding: 0; }

.inp[type="date"]::-webkit-datetime-edit-fields-wrapper { padding: 0; }

.inp[type="date"]::-webkit-datetime-edit-day-field:focus,
.inp[type="date"]::-webkit-datetime-edit-month-field:focus,
.inp[type="date"]::-webkit-datetime-edit-year-field:focus {
    background: rgba(27, 134, 234, .14);
    color: inherit;
    border-radius: 3px;
    outline: none;
}

/* Un campo de fecha vacio muestra dd/mm/aaaa en negro pleno y parece cargado.
   Atenuarlo lo deja leerse como lo que es: un lugar donde falta escribir. */
.inp[type="date"]:not(:focus):in-range::-webkit-datetime-edit-year-field,
.inp[type="date"]:not(:focus):in-range::-webkit-datetime-edit-month-field,
.inp[type="date"]:not(:focus):in-range::-webkit-datetime-edit-day-field,
.inp[type="date"]:not(:focus):in-range::-webkit-datetime-edit-text { opacity: 1; }

.inp[type="date"]:invalid::-webkit-datetime-edit { opacity: .45; }

/* Cotizador de envío en la ficha del producto */
.cotizador { margin-top: 22px; padding: 14px 16px; border: 1px solid var(--nd-line, #E6E8EF); border-radius: 12px; }
.cotizador-titulo { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-weight: 600; }
.cotizador-titulo .lbl { margin: 0; font-weight: 600; }
.cotizador-fila { display: flex; gap: 8px; }
.cotizador-fila .inp { flex: 1; min-width: 0; }
.cotizador-opciones { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cotizador-opciones li { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.cotizador-opciones em { font-style: normal; opacity: .65; font-size: .88em; }
.cotizador-nota { margin: 10px 0 0; font-size: .86rem; opacity: .7; }

/* Filtro de talles del catálogo */
.talles-filtro { display: flex; flex-wrap: wrap; gap: 6px; }
.talle-chip {
    display: inline-block; min-width: 34px; padding: 5px 9px;
    border: 1px solid var(--nd-line, #E6E8EF); border-radius: 8px;
    text-align: center; font-size: .88rem; text-decoration: none; color: inherit;
}
.talle-chip:hover { border-color: var(--nd-pink-dk, #D4739A); }
.talle-chip.on {
    background: var(--nd-pink-dk, #D4739A); border-color: var(--nd-pink-dk, #D4739A);
    color: #fff; font-weight: 600;
}

/* ---- accesos legales destacados del pie ----------------------------------
   La Resolucion 424/2020 pide que el boton de arrepentimiento ocupe "un lugar
   destacado, en cuanto a visibilidad y tamano". Como un renglon mas entre los
   otros cinco enlaces legales no lo era, se lo saca de la lista y se lo muestra
   como un boton con borde. El libro de quejas va igual pero mas tenue: la
   Disposicion 4054/2025 pide que sea visible, no que compita con el otro. */
.foot-legal{display:flex;flex-direction:column;gap:8px;margin:0 0 14px}
.foot-legal a{
  display:flex;align-items:center;gap:8px;padding:9px 12px;
  font-size:.86rem;font-weight:600;line-height:1.25;
  border-radius:10px;border:1.5px solid var(--nd-blue-dk);
  color:var(--nd-blue-dk);background:var(--nd-blue-soft)
}
.foot-legal a:hover{background:var(--nd-blue-dk);color:#fff}
.foot-legal a i{font-size:1rem;flex:none}
.foot-legal a.tenue{
  border-color:var(--nd-border);background:transparent;color:#5A6580;font-weight:500
}
.foot-legal a.tenue:hover{border-color:var(--nd-blue-dk);background:transparent;color:var(--nd-blue-dk)}


/* El bloque que carga la tanda siguiente del catálogo. Centrado y con aire
   arriba: es el final de la grilla, no una fila más. */
.mas-prod{display:flex;flex-direction:column;align-items:center;gap:8px;
          margin:28px 0 8px;text-align:center}
.mas-prod p{margin:0;font-size:.82rem}


/* =========================================================================
   El carrusel de la portada
   -------------------------------------------------------------------------
   Se desliza con scroll y scroll-snap, no moviendo la pista con transform.
   Así el dedo en el celular lo arrastra solo —sin escuchar ni un evento—, el
   teclado y el lector de pantalla lo recorren como lo que es, y si el
   JavaScript no llega a correr sigue siendo un carrusel que se puede usar:
   nada más que sin flechas automáticas.
   ========================================================================= */
/* La franja donde vive: separada del hero, a lo ancho de la página. */
.sec-carr{padding:28px 0 4px}

.carr{position:relative;width:100%}

.carr-pista{display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;
            scroll-snap-type:x mandatory;scroll-behavior:smooth;
            -webkit-overflow-scrolling:touch;scrollbar-width:none;
            padding-bottom:4px}
.carr-pista::-webkit-scrollbar{display:none}

/* Tres a la vez. El gap se descuenta del ancho para que entren justas. */
.carr-item{flex:0 0 calc((100% - 28px) / 3);scroll-snap-align:start;
           display:block;position:relative;
           background:#fff;border-radius:18px;overflow:hidden;
           box-shadow:var(--nd-shadow)}

/* La foto entra ENTERA, no recortada para llenar el marco. Con cover, una foto
   apaisada perdía la parte de arriba y la de abajo: se veía agrandada y
   cortada. El fondo blanco de la tarjeta rellena lo que sobra. */
/* Apaisada y no cuadrada: con tres columnas a lo ancho, un cuadrado da una
   tarjeta de casi quinientos pixeles de alto y el carrusel se come media
   pantalla. Un banner se lee de un vistazo, no se recorre. */
.carr-item img{width:100%;aspect-ratio:4/3;object-fit:contain;display:block;
               background:#fff}

/* Las que llevan a un producto se agrandan apenas al pasar por encima: es la
   señal de que son tocables. Las que no llevan a ningún lado no se mueven,
   porque prometerían algo que no pasa. */
a.carr-item img{transition:transform .35s ease}
a.carr-item:hover img{transform:scale(1.03)}

.carr-flecha{position:absolute;top:50%;transform:translateY(-50%);
             width:38px;height:38px;border-radius:50%;border:0;
             background:rgba(255,255,255,.92);color:var(--nd-blue-dk);
             box-shadow:0 2px 10px rgba(23,31,51,.18);
             display:flex;align-items:center;justify-content:center;
             cursor:pointer;font-size:1.1rem;opacity:0;transition:opacity .2s}
.carr-antes{left:-8px}
.carr-luego{right:-8px}

/* Aparecen al acercarse, y siempre que el teclado las enfoque: si solo
   aparecieran con el mouse, quien navega con Tab no las encontraría nunca. */
.carr:hover .carr-flecha,
.carr-flecha:focus-visible{opacity:1}

.carr-puntos{display:flex;justify-content:center;gap:6px;margin-top:12px}
.carr-puntos button{width:8px;height:8px;padding:0;border:0;border-radius:50%;
                    background:#C9D2E4;cursor:pointer;transition:.2s}
.carr-puntos button.on{background:var(--nd-blue);width:20px;border-radius:99px}

/* Menos columnas a medida que hay menos lugar: tres tarjetas en un celular
   serían tres estampillas. */
@media (max-width:900px){
  .carr-item{flex:0 0 calc((100% - 14px) / 2)}
}

/* En el celular, una sola y sin flechas: se desliza con el dedo y los puntitos
   ya dicen cuántas hay. */
@media (max-width:600px){
  .carr-item{flex:0 0 100%}
  .carr-flecha{display:none}
}

@media (prefers-reduced-motion:reduce){
  .carr-pista{scroll-behavior:auto}
  a.carr-item img{transition:none}
  a.carr-item:hover img{transform:none}
}

/* =========================================================================
   Las dos pantallas de aviso: el 404 y el error
   -------------------------------------------------------------------------
   Estaban copiadas de la pantalla de login del panel y se habían quedado con
   sus clases —login-page, login-card, login-brand, sb-name, mono—, que viven
   en la hoja del panel y no en esta. Como una clase que no existe no da error,
   las dos páginas se dibujaban sin nada: el texto arriba a la izquierda, sin
   centrar y sin tarjeta. Nadie lo vio porque son las dos pantallas que uno
   espera no ver nunca.
   ========================================================================= */
.pag-aviso{min-height:100vh;margin:0;display:flex;align-items:center;
           justify-content:center;padding:24px;
           background:linear-gradient(160deg,var(--nd-cream),var(--nd-blue-soft))}

.aviso{width:100%;max-width:520px;background:#fff;border:1px solid var(--nd-border);
       border-radius:20px;padding:32px;box-shadow:var(--nd-shadow);text-align:center}

.aviso-marca{margin:0 0 18px}

/* El código del problema: monoespaciado porque se copia y se pega en un
   correo o se busca en el registro del servidor, y ahí un 0 y una O no se
   pueden confundir. */
.aviso-codigo{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
              font-size:.95rem;color:var(--nd-ink)}

/* Los botones van centrados como el resto de la tarjeta: alineados a la
   izquierda debajo de texto centrado se notaba el desfasaje apenas la ventana
   era mas ancha que los dos botones juntos. */
.aviso-botones{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}

@media (max-width:480px){
  .aviso{padding:24px 18px;border-radius:16px}
}


/* =========================================================================
   Agrandar la foto del producto
   -------------------------------------------------------------------------
   La foto de la ficha entra en un cuadrado y con object-fit:contain, asi que
   una prenda con un estampado chico se ve chica. Tocarla la abre a pantalla
   completa.

   Lo que se abre es la foto que esta puesta en ese momento, no la primera: las
   miniaturas cambian el src de la misma etiqueta.
   ========================================================================= */
.prod-fotos .principal{cursor:zoom-in}

/* La lupita avisa que se puede tocar. En un celular no hay puntero, asi que es
   la unica pista: por eso se ve siempre y no solo al pasar por encima. */
.principal{position:relative}
.principal .lupa-pista{position:absolute;right:10px;bottom:10px;
  width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.92);
  color:var(--nd-blue-dk);display:flex;align-items:center;justify-content:center;
  font-size:.9rem;box-shadow:0 2px 8px rgba(23,31,51,.18);pointer-events:none}

.lupa{position:fixed;inset:0;z-index:2000;background:rgba(23,31,51,.88);
  display:flex;align-items:center;justify-content:center;padding:24px;
  opacity:0;transition:opacity .18s ease}
.lupa.on{opacity:1}

/* Llena el espacio en vez de quedarse en el tamaño del archivo. Con solo
   max-width la foto salía a 500 px -lo que mide el archivo- adentro de una
   ficha donde ya se veía a 588: tocar para agrandar la achicaba.

   El tope de 1200 es para no estirar una foto chica hasta que se deshaga; con
   las que hay hoy, de 500 px, se agranda alrededor de 1,8 veces. Más detalle
   que ese no hay: habría que subir fotos más grandes. */
.lupa img{width:100%;height:100%;max-width:1200px;max-height:1200px;
  object-fit:contain;border-radius:10px;background:#fff}

.lupa-cerrar{position:absolute;top:16px;right:16px;width:40px;height:40px;
  border:0;border-radius:50%;background:rgba(255,255,255,.92);color:var(--nd-ink);
  font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center}

@media (prefers-reduced-motion:reduce){
  .lupa{transition:none}
}

/* Compartir una prenda. Deliberadamente discreto: es una accion secundaria al
   lado de "Agregar al carrito", y dos botones grandes ahi compiten con el que
   importa. */
.compartir { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.compartir-t { font-size: .8rem; font-weight: 600; color: var(--nd-muted);
  text-transform: uppercase; letter-spacing: .04em; margin-right: 2px; }
.comp-b { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--nd-border);
  border-radius: 999px; background: #fff; padding: 7px 14px; font-size: .84rem; font-weight: 600;
  color: var(--nd-ink); font-family: inherit; cursor: pointer; transition: .15s; }
.comp-b:hover { border-color: var(--nd-blue); background: var(--nd-blue-soft); color: var(--nd-blue-dk); }

/* El "Limpiar filtros", pegado arriba del panel de filtros.
   El panel tiene scroll propio, asi que sticky lo deja a la vista sin importar
   cuanto se haya bajado. El fondo no es decorativo: sin el, las categorias se
   leen por debajo del boton al scrollear. */
.filtros-tope { position: sticky; top: -18px; z-index: 2; background: #fff;
  margin: -18px -18px 14px; padding: 18px 18px 12px;
  border-bottom: 1px solid var(--nd-border); }
.filtros-tope .btn { width: 100%; justify-content: center; }

/* Los tres dias que puede elegir el comprador para el envio en moto.
   Chips y no un calendario: son tres opciones, y un calendario obligaria a
   buscar entre treinta dias los unicos tres que sirven. */
.dias { display: flex; gap: 10px; flex-wrap: wrap; }
.dia { flex: 1; min-width: 118px; display: flex; flex-direction: column; align-items: center;
  gap: 2px; border: 1.5px solid var(--nd-border); border-radius: var(--nd-radius);
  padding: 12px 10px; background: #fff; text-align: center; transition: .15s; }
.dia:hover { border-color: var(--nd-blue); }
.dia.on { border-color: var(--nd-blue-dk); background: var(--nd-blue-soft); }
.dia-nombre { font-weight: 600; font-size: .92rem; color: var(--nd-ink); }
.dia-fecha { font-size: .8rem; color: var(--nd-muted); }
.dia.on .dia-nombre { color: var(--nd-blue-dk); }