/* ============================================================
   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}

.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}
.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}

.cant{display:inline-flex;align-items:center;border:1px solid var(--nd-border);border-radius:11px;overflow:hidden}
.cant button{width:36px;height:38px;border:0;background:#fff;font-size:1.05rem;color:var(--nd-blue-dk)}
.cant button:hover{background:var(--nd-blue-soft)}
.cant input{width:44px;height:38px;border:0;border-left:1px solid var(--nd-border);
  border-right:1px solid var(--nd-border);text-align:center;font-size:.92rem;font-family:inherit;outline:none}

.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}
.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}
.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); }