/* ═══════════════════════════════════════════════════════════════════════════
   ITE · hoja de estilo de la TIENDA

   Ojo: esto NO es ite.com.uy. Aquella es la web institucional; esta es la
   tienda y tiene que vender. Por eso se abandonó el sistema Atlas de la v1
   (esquinas rectas, cero sombras, todo azul), que daba look de software
   sobrio y hacía que la tienda se viera "dura". El respaldo de esa versión
   está en `web-v1-atlas-20260819/`.

   Reglas de esta versión:
   · el navy #1A5B9A sigue siendo la MARCA — eso no se toca
   · el calor lo pone el naranja, y está RESERVADO: precio y compra final.
     Si el naranja aparece en todos lados deja de significar "acá se compra"
   · esquinas redondeadas y sombra real: profundidad, no borde hairline
   · Rubik para títulos y precios · Nunito Sans para leer
   · las dos tipografías van self-hosteadas (subset latino, 82 KB entre las
     dos). Nada de Google Fonts por CDN: si mañana cae, el sitio se rompe
   · #008EC2 NO se usa para texto de cuerpo (3,72:1, no pasa AA)
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face{
  font-family:'Rubik';
  src:url('../fonts/rubik-latin.woff2') format('woff2');
  font-weight:300 800; font-display:swap; font-style:normal;
}
@font-face{
  font-family:'Nunito Sans';
  src:url('../fonts/nunitosans-latin.woff2') format('woff2');
  font-weight:300 800; font-display:swap; font-style:normal;
}

:root{
  --navy:#1A5B9A;        /* marca · 6,98:1 sobre blanco, pasa AA */
  --navy-hondo:#12406C;
  --acento:#008EC2;      /* sólo íconos y texto grande */

  /* El calor. `--calido` es el que se usa para TEXTO (5,9:1 sobre blanco);
     `--calido-vivo` sólo como fondo de botón, con texto blanco encima. */
  --calido:#C2410C;
  --calido-vivo:#EA580C;
  --calido-f:#FFF3EA;

  --tinta:#131A22;
  --tinta-suave:#5B6875;
  --linea:#EFE7DF;       /* cálida, para que no corte el fondo */
  --linea-fria:#E4E9EF;
  --papel:#FFFDFB;       /* blanco cálido, no blanco clínico */
  --card:#FFFFFF;
  --fondo:#F8F4F0;
  --foto:#F4F6F8;        /* fondo de las fotos de producto */
  --ok:#137333;
  --alerta:#B3261E;
  --ancho:1280px;

  --radio:14px;
  --radio-chico:10px;
  --pastilla:100px;
  --sombra:0 2px 5px rgba(19,26,34,.045);
  --sombra-alta:0 20px 34px -14px rgba(19,26,34,.24);
  --curva:cubic-bezier(.2,.8,.3,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Nunito Sans',ui-sans-serif,-apple-system,'Segoe UI',sans-serif;
  font-size:15px; line-height:1.6; color:var(--tinta); background:var(--papel);
  -webkit-font-smoothing:antialiased;
}
/* Rubik manda en todo lo que "grita": títulos, precios y botones. */
h1,h2,h3,h4,.precio b,.btn,.logo{font-family:'Rubik',ui-sans-serif,sans-serif}
/* Los precios y los totales con cifras de ancho fijo: si no, la columna
   de una grilla baila al cambiar de número. */
.precio,.num,.total b{font-variant-numeric:tabular-nums}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,select{font:inherit}

.envoltura{max-width:var(--ancho);margin:0 auto;padding:0 24px}

/* ── Cabecera ───────────────────────────────────────────────────────────── */
.barra-aviso{background:var(--navy-hondo);color:#fff;font-size:12.5px;letter-spacing:.02em}
.barra-aviso .envoltura{display:flex;justify-content:space-between;gap:16px;padding-block:8px}
.barra-aviso a:hover{text-decoration:underline}

header.sitio{position:sticky;top:0;z-index:50;background:var(--papel);border-bottom:1px solid var(--linea)}
.cabecera{display:flex;align-items:center;gap:24px;padding-block:16px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:22px;letter-spacing:-.02em;color:var(--navy)}
.logo svg{width:34px;height:34px;flex:none}
.logo b{font-weight:800}

.buscador{flex:1;position:relative;max-width:520px}
.buscador input{width:100%;padding:12px 18px;border:1px solid var(--linea);background:var(--fondo);
  border-radius:var(--pastilla);outline-offset:-2px}
.buscador input:focus{outline:2px solid var(--navy);background:#fff}
.resultados{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;
  box-shadow:0 12px 32px rgba(20,24,31,.10);max-height:340px;overflow:auto;display:none;z-index:60}
.resultados.abierto{display:block}
.resultados a{display:flex;gap:12px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--linea)}
.resultados a:last-child{border-bottom:0}
.resultados a:hover{background:var(--fondo)}
.resultados img{width:38px;height:38px;object-fit:contain}
.resultados .vacio{padding:14px;color:var(--tinta-suave)}

.acciones{display:flex;align-items:center;gap:8px;margin-left:auto}
.btn-icono{position:relative;display:grid;place-items:center;width:44px;height:44px;
  border:1px solid var(--linea);border-radius:50%;transition:.18s}
.btn-icono:hover{border-color:var(--navy);color:var(--navy)}
.globo{position:absolute;top:-5px;right:-5px;min-width:20px;height:20px;padding:0 5px;background:var(--calido-vivo);
  color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;border-radius:999px}
.globo[hidden]{display:none}

/* ── Navegación con mega menú ───────────────────────────────────────────── */
nav.principal{border-top:1px solid var(--linea);background:var(--papel)}
nav.principal ul{display:flex;gap:2px;list-style:none;align-items:center}
nav.principal>.envoltura>ul>li>a,nav.principal>.envoltura>ul>li>button{
  display:block;padding:13px 16px;font-weight:600;font-size:13.5px;letter-spacing:.01em}
nav.principal li:hover>a,nav.principal li:hover>button{color:var(--navy);box-shadow:inset 0 -2px 0 var(--navy)}
.tiene-menu{position:static}

.mega{position:absolute;left:0;right:0;background:#fff;border-top:1px solid var(--linea);
  border-bottom:1px solid var(--linea);box-shadow:0 18px 40px rgba(20,24,31,.09);
  padding:32px 0;display:none;z-index:40}
.tiene-menu:hover .mega{display:block}
.mega .grilla{display:grid;grid-template-columns:repeat(4,1fr);gap:8px 28px}
.mega a.cat{display:flex;align-items:center;gap:12px;padding:10px;border:1px solid transparent}
.mega a.cat:hover{border-color:var(--linea);background:var(--fondo)}
.mega a.cat img{width:40px;height:40px;object-fit:contain;background:#fff}
.mega a.cat b{display:block;font-size:13.5px;font-weight:600}
.mega a.cat i{font-style:normal;font-size:12px;color:var(--tinta-suave)}

/* ── Piezas comunes ─────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 24px;
  font-weight:600;font-size:15px;border:2px solid transparent;border-radius:var(--pastilla);
  transition:transform .18s var(--curva),box-shadow .18s,background .18s,border-color .18s}
.btn:active{transform:translateY(1px)}

/* El naranja es la acción de plata: comprar y pagar. Nada más. */
.btn.primario{background:var(--calido-vivo);color:#fff;box-shadow:0 8px 18px -6px rgba(234,88,12,.55)}
.btn.primario:hover{background:var(--calido);transform:translateY(-2px);
  box-shadow:0 14px 26px -8px rgba(234,88,12,.6)}

/* El navy es navegar y cotizar: importante, pero no es la caja. */
.btn.navy{background:var(--navy);color:#fff}
.btn.navy:hover{background:var(--navy-hondo);transform:translateY(-2px);
  box-shadow:0 12px 24px -10px rgba(26,91,154,.6)}
.btn.borde{border-color:var(--linea-fria);color:var(--navy);background:#fff}
.btn.borde:hover{border-color:var(--navy);transform:translateY(-2px)}
.btn.wa{background:#25D366;color:#0B2F19}
.btn.wa:hover{filter:brightness(.95)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.ancho{width:100%}

.seccion{padding-block:76px}
.seccion.gris{background:var(--fondo)}
.titulo-seccion{max-width:768px;margin-bottom:32px}
.titulo-seccion h2{font-size:34px;line-height:1.1;letter-spacing:-.03em;font-weight:800}
.titulo-seccion p{margin-top:10px;color:var(--tinta-suave);font-size:15px}

.migas{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--tinta-suave);padding-block:18px}
.migas a:hover{color:var(--navy);text-decoration:underline}

/* ── Tarjeta de producto ────────────────────────────────────────────────── */
.grilla-productos{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;list-style:none}
.grilla-productos>li{display:flex}
.tarjeta{display:flex;flex-direction:column;width:100%;background:var(--card);
  border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;box-shadow:var(--sombra);
  transition:transform .22s var(--curva),box-shadow .22s}
.tarjeta:hover{transform:translateY(-6px);box-shadow:var(--sombra-alta)}
.tarjeta .foto{aspect-ratio:1;background:var(--foto);display:grid;place-items:center;
  padding:16px;position:relative}
/* multiply mete la foto en el fondo gris: las de catálogo vienen recortadas
   sobre blanco y sin esto se ve el recuadro. */
.tarjeta .foto img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.tarjeta .cuerpo{padding:15px 16px 17px;display:flex;flex-direction:column;gap:6px;flex:1}
.tarjeta .rubro{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--tinta-suave);font-weight:600}
.tarjeta h3{font-size:15px;font-weight:600;line-height:1.3;font-family:'Rubik',sans-serif}
.tarjeta .precio{margin-top:auto;padding-top:8px}
.tarjeta .precio b{font-size:25px;font-weight:800;letter-spacing:-.02em;color:var(--calido);line-height:1}
.tarjeta .precio i{display:block;font-style:normal;font-size:12.5px;color:var(--tinta-suave);margin-top:4px}
.tarjeta .cotizar{margin-top:auto;padding-top:8px;font-family:'Rubik',sans-serif;
  font-weight:700;color:var(--calido);font-size:17px;line-height:1}
.tarjeta .cotizar i{display:block;font-style:normal;font-size:12.5px;color:var(--tinta-suave);
  font-weight:400;margin-top:4px}
.tarjeta .pie{padding:0 16px 16px}

/* La cinta que separa las dos líneas de un vistazo. Es lo primero que
   necesita entender alguien que llega: ¿esto lo compro o lo consulto? */
.cinta{position:absolute;top:11px;left:11px;z-index:2;font-family:'Rubik',sans-serif;
  font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:4px 9px;border-radius:var(--pastilla)}
.cinta.ya{background:#DCFCE7;color:#15803D}
.cinta.cot{background:#E3EEF8;color:var(--navy)}

/* Agregar desde la grilla, sin entrar a la ficha. */
.agregar{width:100%;font-family:'Rubik',sans-serif;font-weight:600;font-size:14px;padding:10px;
  border-radius:var(--pastilla);border:0;background:var(--navy);color:#fff;
  transition:background .18s;cursor:pointer}
.agregar:hover{background:var(--navy-hondo)}
.agregar:disabled{opacity:.6;cursor:default}
.agregar.cotiza{background:#fff;color:var(--navy);border:2px solid var(--linea-fria)}
.agregar.cotiza:hover{border-color:var(--navy);background:#fff}

.etiqueta{display:inline-block;padding:5px 11px;font-size:11px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;border-radius:var(--pastilla);font-family:'Rubik',sans-serif}
.etiqueta.empresas{background:var(--calido);color:#fff}
.etiqueta.tienda{background:#E8F5EC;color:var(--ok)}

/* ── Estados ────────────────────────────────────────────────────────────── */
.cargando,.vacio-grande{padding:64px 0;text-align:center;color:var(--tinta-suave)}
.esqueleto{background:linear-gradient(90deg,#F1F3F6 25%,#E8EBF0 37%,#F1F3F6 63%);
  background-size:400% 100%;animation:brillo 1.3s ease infinite}
@keyframes brillo{0%{background-position:100% 50%}100%{background-position:0 50%}}
.esqueleto.tarjeta-falsa{height:360px;border-radius:var(--radio)}
.error{padding:40px 24px;border:1px solid var(--alerta);color:var(--alerta);background:#FDF3F2}

/* ── Pie ────────────────────────────────────────────────────────────────── */
footer.sitio{background:var(--tinta);color:#C8CED8;margin-top:64px;padding-block:56px 32px;font-size:13.5px}
footer.sitio .columnas{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:40px}
footer.sitio h4{color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px}
footer.sitio ul{list-style:none;display:grid;gap:8px}
footer.sitio a:hover{color:#fff;text-decoration:underline}
footer.sitio .marca{font-size:22px;font-weight:800;color:#fff;letter-spacing:-.02em;margin-bottom:10px}
footer.sitio .legal{margin-top:40px;padding-top:20px;border-top:1px solid #2A3038;font-size:12px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ── Animación de entrada ───────────────────────────────────────────────── */
.aparece{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.aparece.visible{opacity:1;transform:none}
/* La animación nunca decide si el contenido se ve. */
@media (prefers-reduced-motion:reduce){
  .aparece{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */
.hamburguesa{display:none}
@media (max-width:1024px){
  .grilla-productos{grid-template-columns:repeat(3,1fr)}
  .mega .grilla{grid-template-columns:repeat(3,1fr)}
  footer.sitio .columnas{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  /* el header de ecommerce colapsa a una sola barra */
  .hamburguesa{display:grid}
  nav.principal{display:none}
  nav.principal.abierta{display:block}
  nav.principal ul{flex-direction:column;align-items:stretch;gap:0}
  nav.principal li{border-bottom:1px solid var(--linea)}
  .mega{position:static;display:none;box-shadow:none;padding:12px 0}
  .tiene-menu:hover .mega{display:none}
  .tiene-menu.abierta .mega{display:block}
  .mega .grilla{grid-template-columns:1fr 1fr;gap:4px}
  .cabecera{flex-wrap:wrap;gap:12px}
  .buscador{order:3;flex-basis:100%;max-width:none}
  .grilla-productos{grid-template-columns:repeat(2,1fr);gap:12px}
  .seccion{padding-block:44px}
  .titulo-seccion h2{font-size:24px}
  footer.sitio .columnas{grid-template-columns:1fr}
}

/* ── Home · hero ────────────────────────────────────────────────────────── */
.hero{padding-block:26px 0}
.hero-caja{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;
  padding:52px 48px;border-radius:22px;
  background:linear-gradient(135deg,#F5FAFE 0%,#FFF4EC 100%)}
.hero-texto h1{font-size:50px;line-height:1.03;letter-spacing:-.035em;font-weight:800;margin:16px 0 16px}
.hero-texto h1 em{font-style:normal;color:var(--calido)}
.hero-texto p{font-size:17px;color:var(--tinta-suave);max-width:48ch}
.hero-botones{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.hero-foto img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:16px;
  box-shadow:0 20px 44px -18px rgba(12,32,51,.5)}

/* ── Home · bloques de categoría ────────────────────────────────────────── */
.bloque-cat{margin-bottom:40px}
.bloque-cabeza{display:flex;align-items:baseline;gap:14px;padding-bottom:14px;
  border-bottom:1px solid var(--linea);margin-bottom:20px}
.bloque-cabeza h3{font-size:20px;font-weight:800;letter-spacing:-.01em}
.bloque-cabeza span{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--tinta-suave)}
.tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.tile{border:1px solid var(--linea);background:var(--card);border-radius:var(--radio-chico);
  padding:16px 12px;text-align:center;box-shadow:var(--sombra);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  transition:transform .2s var(--curva),box-shadow .2s,border-color .2s}
.tile:hover{border-color:var(--calido);box-shadow:var(--sombra-alta);transform:translateY(-4px)}
.tile-foto{width:100%;aspect-ratio:1;display:grid;place-items:center;background:#fff}
.tile-foto img{width:78%;height:78%;object-fit:contain}
.tile b{font-size:12.5px;font-weight:600;line-height:1.3}
.tile i{font-style:normal;font-size:11.5px;color:var(--tinta-suave)}

/* ── Home · servicios ───────────────────────────────────────────────────── */
.servicios{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.servicio{border:1px solid var(--linea);background:var(--card);border-radius:var(--radio);
  padding:24px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--sombra);
  transition:transform .2s var(--curva),box-shadow .2s,border-color .2s}
a.servicio:hover{border-color:var(--calido);box-shadow:var(--sombra-alta);transform:translateY(-4px)}
.servicio h3{font-size:16px;font-weight:700}
.servicio p{color:var(--tinta-suave);font-size:13.5px}
.servicio .mas{margin-top:auto;padding-top:10px;color:var(--calido);font-weight:700;font-size:13.5px}

@media (max-width:1024px){
  .tiles{grid-template-columns:repeat(4,1fr)}
  .servicios{grid-template-columns:repeat(2,1fr)}
  .hero-texto h1{font-size:40px}
}
@media (max-width:768px){
  .hero-caja{grid-template-columns:1fr;gap:28px;padding-block:36px}
  .hero-texto h1{font-size:32px}
  .hero-foto{order:-1}
  .tiles{grid-template-columns:repeat(3,1fr);gap:8px}
  .servicios{grid-template-columns:1fr}
}

/* ── Listado ────────────────────────────────────────────────────────────── */
.titulo-pagina,.cabeza-listado h1{font-size:32px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.cabeza-listado{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  padding-bottom:20px;margin-bottom:24px;border-bottom:1px solid var(--linea);flex-wrap:wrap}
.cabeza-listado p{color:var(--tinta-suave);margin-top:6px}
.controles{display:flex;align-items:center;gap:16px}
.controles label{font-size:12.5px;color:var(--tinta-suave);display:flex;align-items:center;gap:8px}
.controles select{padding:9px 14px;border:1px solid var(--linea);background:#fff;border-radius:var(--pastilla)}
.cuenta{font-size:12.5px;color:var(--tinta-suave)}
.titulo-pagina{margin-bottom:24px}

/* ── Ficha de producto ──────────────────────────────────────────────────── */
.ficha{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding-bottom:24px}
.ficha-foto{border:1px solid var(--linea);border-radius:var(--radio);background:var(--foto);
  display:grid;place-items:center;box-shadow:var(--sombra);
  padding:32px;aspect-ratio:1}
.ficha-foto img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.ficha-datos h1{font-size:32px;font-weight:800;letter-spacing:-.02em;line-height:1.15;margin:12px 0 14px}
.ficha-desc{color:var(--tinta-suave);font-size:15px;max-width:56ch}
.ficha-precio{margin:28px 0 20px;padding:20px 0;border-block:1px solid var(--linea)}
.ficha-precio b{font-size:40px;font-weight:800;letter-spacing:-.03em;display:block;color:var(--calido)}
.ficha-precio b.cotiza{font-size:26px;color:var(--calido)}
.ficha-precio i{font-style:normal;font-size:13px;color:var(--tinta-suave);display:block;margin-top:6px}
.ficha-compra{display:flex;gap:12px;flex-wrap:wrap}
.ficha-compra .btn{flex:1;min-width:200px}
.ficha-nota{margin-top:14px;font-size:12.5px;color:var(--tinta-suave)}
.ficha-datos-tecnicos{margin-top:32px;border-top:1px solid var(--linea)}
.ficha-datos-tecnicos>div{display:flex;justify-content:space-between;gap:16px;
  padding:11px 0;border-bottom:1px solid var(--linea);font-size:13.5px}
.ficha-datos-tecnicos dt{color:var(--tinta-suave)}
.ficha-datos-tecnicos dd{font-weight:600}

.cantidad{display:flex;align-items:center;border:1px solid var(--linea);
  border-radius:var(--pastilla);overflow:hidden;background:#fff}
.cantidad button{width:40px;height:44px;font-size:18px;line-height:1}
.cantidad button:hover{background:var(--fondo);color:var(--navy)}
.cantidad input{width:52px;height:44px;text-align:center;border:0;border-inline:1px solid var(--linea);
  -moz-appearance:textfield}
.cantidad input::-webkit-outer-spin-button,.cantidad input::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}

/* ── Carrito ────────────────────────────────────────────────────────────── */
.carrito{display:grid;grid-template-columns:1fr 340px;gap:32px;align-items:start;padding-bottom:32px}
.carrito-items{border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;
  background:var(--card);box-shadow:var(--sombra)}
.item{display:grid;grid-template-columns:76px 1fr auto auto auto;gap:16px;align-items:center;
  padding:16px;border-bottom:1px solid var(--linea)}
.item-foto{width:76px;height:76px;display:grid;place-items:center;background:var(--foto);
  border-radius:var(--radio-chico);overflow:hidden}
.item-foto img{width:100%;height:100%;object-fit:contain}
.item-datos b{display:block;font-size:14.5px;font-weight:600}
.item-datos a:hover b{color:var(--navy);text-decoration:underline}
.item-datos span{font-size:12.5px;color:var(--tinta-suave)}
.item-total{font-weight:800;font-size:17px;min-width:82px;text-align:right;
  font-family:'Rubik',sans-serif;color:var(--calido)}
.item-quitar{width:32px;height:32px;color:var(--tinta-suave);font-size:20px;line-height:1}
.item-quitar:hover{color:var(--alerta)}
.vaciar{padding:14px 16px;font-size:13px;color:var(--tinta-suave)}
.vaciar:hover{color:var(--alerta);text-decoration:underline}

.resumen{border:1px solid var(--linea);border-radius:var(--radio);padding:24px;
  background:var(--card);box-shadow:var(--sombra);position:sticky;top:150px}
.resumen h2{font-size:16px;font-weight:800;margin-bottom:16px}
.resumen .fila{display:flex;justify-content:space-between;padding:9px 0;font-size:14px}
.resumen .fila.total{border-top:1px solid var(--linea);margin-top:8px;padding-top:14px;font-size:16px}
.resumen .fila.total b{font-size:26px;font-weight:800;color:var(--calido);font-family:'Rubik',sans-serif}
.resumen .ref{font-size:12px;color:var(--tinta-suave);margin-bottom:18px}
.resumen .aviso{margin-top:14px;font-size:12.5px;color:var(--tinta-suave);
  background:var(--calido-f);border:1px solid #F4DECB;border-radius:var(--radio-chico);padding:13px}

@media (max-width:900px){
  .ficha{grid-template-columns:1fr;gap:24px}
  .carrito{grid-template-columns:1fr}
  .resumen{position:static}
}
@media (max-width:768px){
  .item{grid-template-columns:60px 1fr auto;gap:12px;row-gap:10px}
  .item-foto{width:60px;height:60px}
  .item .cantidad{grid-column:2}
  .item-total{grid-column:3;text-align:right}
  .ficha-datos h1,.titulo-pagina,.cabeza-listado h1{font-size:24px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   CHECKOUT Y VUELTA DE MERCADO PAGO (19/8/2026)
   Mismos tokens que el resto: esquinas rectas, borde hairline, nada de sombra
   para separar. La única superficie nueva es el bloque de formulario.
   ═══════════════════════════════════════════════════════════════════════════ */

.bloque{background:var(--card);border:1px solid var(--linea);border-radius:var(--radio);
  padding:26px;margin-bottom:16px;box-shadow:var(--sombra)}
.bloque h2{font-size:17px;letter-spacing:-.01em;margin-bottom:4px}
.bajada-bloque{color:var(--tinta-suave);font-size:13.5px;margin-bottom:18px}

.bloque label{display:block;font-size:13px;font-weight:600;margin-bottom:14px;color:var(--tinta)}
.bloque label .opcional{font-weight:400;color:var(--tinta-suave)}
.bloque input,.bloque select{
  width:100%;margin-top:6px;font:400 15px/1.4 inherit;color:var(--tinta);
  background:var(--fondo);border:1px solid var(--linea);padding:11px 13px;border-radius:var(--radio-chico)}
.bloque input:focus,.bloque select:focus{outline:2px solid var(--navy);outline-offset:1px;background:#fff}
.bloque input[aria-invalid],.bloque select[aria-invalid]{border-color:var(--alerta);background:#FFF6F5}
.campos-2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media (max-width:640px){.campos-2{grid-template-columns:1fr}}

.error-campo{font-size:12px;font-weight:600;color:var(--alerta);margin-top:5px}

/* Medio de pago */
.medio-pago{display:flex;align-items:center;gap:13px;border:1px solid var(--linea);
  background:var(--fondo);padding:14px}
.medio-pago-logo{width:44px;height:32px;flex:none;display:grid;place-items:center;
  background:#00b1ea;color:#fff;font:800 10px/1 inherit;letter-spacing:.04em}
.medio-pago b{display:block;font-size:14px}
.medio-pago span{font-size:12.5px;color:var(--tinta-suave)}

.resumen-item{align-items:flex-start;gap:16px;font-size:13.5px}
.resumen-item span{color:var(--tinta-suave)}
.btn.ancho{width:100%;justify-content:center;margin-top:16px}

/* Vuelta de Mercado Pago */
.vuelta{max-width:560px;margin:0 auto;padding:64px 0;text-align:center}
.vuelta-icono{width:66px;height:66px;border-radius:100px;display:grid;place-items:center;
  margin:0 auto 22px;font-size:30px;color:#fff;background:var(--tinta-suave)}
.vuelta.ok    .vuelta-icono{background:var(--ok)}
.vuelta.espera .vuelta-icono{background:#8A5A00}
.vuelta.no    .vuelta-icono{background:var(--alerta)}
.vuelta h1{font-size:28px;letter-spacing:-.02em;margin-bottom:12px}
.vuelta p{color:var(--tinta-suave);margin-bottom:24px}
.vuelta p b{color:var(--tinta)}
.vuelta-datos{border:1px solid var(--linea);background:var(--papel);padding:18px;
  text-align:left;margin-bottom:24px}
.vuelta-datos div{display:flex;justify-content:space-between;gap:16px;font-size:13.5px;padding:5px 0}
.vuelta-datos span{color:var(--tinta-suave)}
.vuelta .btn{display:inline-flex;min-width:260px;justify-content:center}
.vuelta .ref{margin-top:18px}

/* El envío que todavía no se puede cotizar. Se muestra en gris y en peso
   normal: es un dato faltante, no un importe, y no tiene que competir con el
   total. */
.resumen .pendiente{color:var(--tinta-suave);font-weight:400;font-size:.92em}
.resumen .envio-nota{margin:-4px 0 10px}


/* ── Barra de confianza ───────────────────────────────────────────────────
   Contesta arriba de todo las tres dudas que frenan una compra online:
   cómo me llega, cómo pago, y si hay alguien del otro lado. */
.confianza{padding-block:34px 8px}
.confianza ul{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.confianza li{background:var(--card);border:1px solid var(--linea);border-radius:var(--radio-chico);
  padding:15px 17px;box-shadow:var(--sombra)}
.confianza b{display:block;font-family:'Rubik',sans-serif;font-size:14px;font-weight:600;margin-bottom:3px}
.confianza span{font-size:12.5px;color:var(--tinta-suave);line-height:1.45}

/* La tarjeta pasó de <a> envolvente a <article>: el título y la foto llevan
   su propio enlace para que el botón de agregar no quede dentro de un <a>. */
.tarjeta h3 a{color:inherit}
.tarjeta h3 a:hover{color:var(--navy)}
.tarjeta .foto{cursor:pointer}
a.agregar{display:block;text-align:center;text-decoration:none}

@media (max-width:1024px){.confianza ul{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.confianza ul{grid-template-columns:1fr}}

/* En dos columnas a 390px, "Agregar al carrito" parte en dos líneas y
   descuadra el alto de las tarjetas. Se achica la letra antes que abreviar
   el texto: "Agregar" solo pierde la mitad del sentido. */
@media (max-width:560px){
  .agregar{font-size:13px;padding:9px 6px;letter-spacing:-.01em}
  .tarjeta h3{font-size:14px}
  .tarjeta .precio b{font-size:22px}
  .hero-caja{padding:30px 22px;border-radius:16px}
  .confianza{padding-block:24px 4px}
}


/* ── El renglón que salva la grilla ───────────────────────────────────────
   Cuatro SSD con la misma foto y sólo el nombre son cuatro cajas iguales.
   La descripción corta —que WooCommerce ya tiene cargada en los 53
   productos— es lo que los vuelve distinguibles sin depender de la foto.
   Se recorta a 2 líneas para que todas las tarjetas midan lo mismo. */
.tarjeta .pico{
  font-size:13px;line-height:1.45;color:var(--tinta-suave);margin-top:-1px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
@media (max-width:560px){.tarjeta .pico{-webkit-line-clamp:3;font-size:12.5px}}

/* ── Callejones con salida ────────────────────────────────────────────────
   Producto o categoría que no existe. La regla: nunca dejar a alguien
   mirando una pared — siempre hay una forma de seguir comprando. */
.sin-salida{max-width:640px;margin:56px auto 72px;text-align:center}
.sin-salida h1{font-size:30px;letter-spacing:-.03em;font-weight:800;margin-bottom:10px}
.sin-salida p{color:var(--tinta-suave);font-size:15.5px;margin-bottom:26px}
.sin-salida-botones{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.salidas{display:grid;grid-template-columns:1fr 1fr;gap:16px;text-align:left;margin-bottom:28px}
.salida-grupo{background:var(--card);border:1px solid var(--linea);border-radius:var(--radio);
  padding:18px 20px;box-shadow:var(--sombra)}
.salida-grupo b{display:block;font-family:'Rubik',sans-serif;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--calido);margin-bottom:10px}
.salida-grupo ul{list-style:none;display:grid;gap:7px}
.salida-grupo a{font-size:14px}
.salida-grupo a:hover{color:var(--navy);text-decoration:underline}
@media (max-width:640px){.salidas{grid-template-columns:1fr}}