/* ============================================================
   COMPUCELLVA TIENDA — estetica heredada de Tienda Negocio
   Paleta original del sitio viejo (template 47):
   primario negro, secundario teal, fondo gris claro, barra azul.
   ============================================================ */

:root {
  --primario: #000000;
  --contraste: #eeeeee;
  --secundario: #00adb5;
  --secundario-oscuro: #00888f;
  --fondo: #eeeeee;
  --texto: #222831;
  --texto-suave: #6b7280;
  --blanco: #ffffff;
  --azul-mensaje: #217bda;
  --verde-wa: #25d366;
  --rojo: #dc2626;
  --radio: 10px;
  --sombra: 0 1px 4px rgba(0,0,0,0.10);
  --sombra-hover: 0 6px 16px rgba(0,0,0,0.14);

  /* ---- Movimiento ----
     Las curvas que trae el navegador son flojas: arrancan lentas justo en el
     instante que el ojo mira. Estas tres son las unicas que usamos.
       --curva      : para lo que ENTRA o SALE (arranca rapido = se siente al toque)
       --curva-suave: para lo que se MUEVE en pantalla sin entrar ni salir
       --curva-panel: la curva de drawer de iOS, para el menu y el carrito
     Nunca ease-in: demora el primer cuadro y todo parece pesado. */
  --curva: cubic-bezier(0.23, 1, 0.32, 1);
  --curva-suave: cubic-bezier(0.77, 0, 0.175, 1);
  --curva-panel: cubic-bezier(0.32, 0.72, 0, 1);
  --t-toque: 140ms;   /* respuesta al presionar */
  --t-chico: 180ms;   /* hover, foco, cambios de color */
  --t-panel: 280ms;   /* menu lateral y carrito */
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: var(--texto);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }
a { color: inherit; }
button { font-family: inherit; }

.oculto { display: none !important; }

/* ============ BARRA DE MENSAJE ============ */

.barra-mensaje {
  background: var(--azul-mensaje);
  color: #fff;
  text-align: center;
  padding: 8px 14px;
  font-size: 0.95rem;
  word-break: break-word;
  /* Tres columnas y el texto en la del medio: asi queda centrado respecto de la
     pagina y no del hueco que deja el link. La primera columna esta vacia a
     proposito, es el contrapeso. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
}
#barra-mensaje-texto { grid-column: 2; }

/* El acceso para comercios. En la franja azul no va el teal de la marca (se
   pelean); va un chip blanco translucido, que es lo que ya se entiende como
   "boton" arriba de un fondo de color. */
.barra-acceso {
  grid-column: 3;
  justify-self: end;
  color: #fff;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  padding: 3px 13px;
  transition: background var(--t-chico) var(--curva), color var(--t-chico) var(--curva);
}
.barra-acceso:hover {
  background: #fff;
  color: var(--azul-mensaje);
}

/* En el celular no hay lugar para las dos cosas en la misma linea: el mensaje
   arriba y el acceso abajo, los dos centrados. Sigue viendose sin abrir el
   menu, que era el problema. */
@media (max-width: 700px) {
  .barra-mensaje {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 7px;
    padding: 8px 12px;
  }
  #barra-mensaje-texto { grid-column: 1; }
  .barra-acceso { grid-column: 1; justify-self: center; }
}

/* ============ CABECERA ============ */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--primario);
  color: var(--contraste);
}

/* Cuatro columnas: logo | menu | buscador | carrito.
   El ancho maximo sube de 1200 a 1600 y el logo y el carrito se van a los
   bordes: es lo que abre el hueco del medio para el buscador. El sobrante lo
   reparte el space-between, asi el buscador se apoya del lado del carrito y no
   queda flotando al lado del menu. */
.cabecera-inner {
  max-width: 1600px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto auto minmax(200px, 460px) auto;
  justify-content: space-between;
  align-items: center;
  gap: 12px 24px;
  padding: 12px 28px;
}

.logo-link { display: flex; align-items: center; }

/* max-width: none contra el `img { max-width: 100% }` de arriba: con el
   buscador compitiendo por el ancho, la columna del logo se encogia y el
   max-width le achicaba SOLO el ancho — la altura seguia fija en 44px y el
   logo salia estirado. Sin el limite, el que cede es el buscador. */
.logo { height: 44px; width: auto; max-width: none; display: block; }

.btn-hamburguesa {
  display: none;
  background: none;
  border: none;
  color: var(--contraste);
  cursor: pointer;
  /* 9px y no 4: el icono son 26px, asi el boton llega a 44. Se lo puede
     agrandar sin miedo porque la columna del logo ya es flexible. */
  padding: 9px;
}

.nav-principal {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
  font-size: 1.05rem;
  white-space: nowrap;
}

.nav-principal > a,
.nav-item-drop > a {
  color: var(--contraste);
  text-decoration: none;
  padding: 8px 2px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s;
}

.nav-principal > a:hover,
.nav-item-drop > a:hover,
.nav-principal > a.activo,
.nav-item-drop > a.activo {
  border-bottom-color: var(--secundario);
}

.nav-item-drop { position: relative; }
.nav-item-drop .flecha { transition: transform 0.15s; }
.nav-item-drop:hover .flecha { transform: rotate(180deg); }

.dropdown-categorias {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--blanco);
  color: var(--texto);
  border-radius: 0 0 var(--radio) var(--radio);
  box-shadow: var(--sombra-hover);
  padding: 14px 0;
  min-width: 240px;
  max-height: 70vh;
  overflow-y: auto;
}

.nav-item-drop:hover .dropdown-categorias { display: block; }

.dropdown-categorias a {
  display: block;
  padding: 7px 20px;
  text-decoration: none;
  font-size: 0.95rem;
  white-space: nowrap;
}

.dropdown-categorias a:hover { background: var(--fondo); color: var(--secundario-oscuro); }
.dropdown-categorias a.cat-hija { padding-left: 36px; font-size: 0.88rem; color: var(--texto-suave); }

.cabecera-acciones { display: flex; align-items: center; justify-content: flex-end; }

.btn-carrito {
  position: relative;
  background: none;
  border: none;
  color: var(--contraste);
  cursor: pointer;
  padding: 9px;
}

.carrito-badge {
  position: absolute;
  top: -2px;
  right: -4px;
  background: var(--secundario);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  border-radius: 999px;
  padding: 0 4px;
}

/* ----- Buscador de la cabecera -----
   Una sola barra para toda la tienda, adentro de la tira negra. Sobre el negro
   la caja blanca se despega sola: no lleva borde ni sombra (los necesitaba
   cuando estaba sobre el fondo gris de la home). */
.buscador-cab { position: relative; min-width: 0; }

.buscador-cab-caja {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--blanco);
  border-radius: 999px;
  /* Los 4px de arriba, abajo y derecha son el anillo blanco que rodea al boton:
     tienen que ser los tres iguales. Dos pastillas con el mismo centro tienen
     los arcos concentricos; si el de la derecha es mas finito que el de arriba,
     la curva se aprieta contra el borde y la esquina se ve cortada. */
  padding: 4px 4px 4px 15px;
  box-shadow: 0 0 0 0 rgba(0,173,181,0);
  transition: box-shadow var(--t-chico) var(--curva);
}

/* El aro teal es todo el foco que hace falta: sobre negro no hay borde que
   cambiar de color. */
.buscador-cab-caja:focus-within { box-shadow: 0 0 0 2px var(--secundario); }

.buscador-cab-lupa { display: flex; flex: 0 0 auto; color: var(--texto-suave); }

.buscador-cab-input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  outline: none;
  background: none;
  font-family: inherit;
  /* 16px a proposito, no 1rem (que aca es 14px): abajo de 16 el Safari del
     iPhone hace zoom solo apenas se toca el campo y descuadra toda la pagina. */
  font-size: 16px;
  color: var(--texto);
  padding: 8px 0;
}

.buscador-cab-btn {
  flex: 0 0 auto;
  /* stretch y no un padding vertical propio: asi el boton mide exactamente el
     alto del contenido de la caja y el anillo blanco le queda parejo en los
     tres lados. Con una altura propia quedaba 2px mas bajo y el margen de
     arriba no coincidia con el de la derecha. */
  align-self: stretch;
  border: none;
  cursor: pointer;
  background: var(--secundario);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0 20px;
  border-radius: 999px;
  transition: background var(--t-chico) var(--curva);
}

.buscador-cab-btn:hover { background: var(--secundario-oscuro); }

/* Sugerencias mientras escribe. Cuelgan del form, asi que quedan adentro del
   contexto de apilamiento de la cabecera (z-index 1000) y le pasan por encima
   a la pagina — no hace falta pelear el z-index como cuando vivian en la home. */
.sugerencias {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 900;
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra-hover);
  overflow-y: auto;
  max-height: min(70vh, 430px);
  text-align: left;
  color: var(--texto);
}

.sugerencia {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  text-decoration: none;
  color: var(--texto);
  border-bottom: 1px solid #f0f0f0;
}

.sugerencia:last-of-type { border-bottom: none; }
.sugerencia:hover, .sugerencia.marcada { background: var(--fondo); }

.sugerencia img { width: 44px; height: 44px; object-fit: contain; flex: 0 0 auto; }
.sugerencia-sinfoto { width: 44px; text-align: center; font-size: 1.3rem; flex: 0 0 auto; }
.sugerencia-nombre { flex: 1 1 auto; font-size: 0.9rem; line-height: 1.35; }
.sugerencia-precio { flex: 0 0 auto; font-weight: 700; font-size: 0.9rem; }

.sugerencias-vacio {
  margin: 0;
  padding: 16px;
  text-align: center;
  font-size: 0.9rem;
  color: var(--texto-suave);
}

.sugerencias-todos {
  display: block;
  width: 100%;
  border: none;
  border-top: 1px solid #f0f0f0;
  background: var(--blanco);
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--secundario-oscuro);
  padding: 12px;
}

.sugerencias-todos:hover { background: var(--fondo); }

/* ============ MENU MOVIL ============ */

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1100;
}

/* Con el menu o el carrito abiertos, el fondo no se mueve. En el celular el
   dedo cae sobre el fondo apenas te corres del panel, y lo que scrolleaba era
   la pagina de atras: volvias a cerrar y estabas en otro lado del catalogo.
   El cotizador ya lo hacia con su propia clase; esto empareja a los otros dos. */
body.panel-abierto { overflow: hidden; }

.menu-movil {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(300px, 85vw);
  background: var(--blanco);
  z-index: 1200;
  transform: translateX(-105%);
  transition: transform var(--t-panel) var(--curva-panel);
  display: flex;
  flex-direction: column;
}

.menu-movil.abierto { transform: translateX(0); }

.menu-movil-cabecera {
  background: var(--primario);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
}

.logo-menu { height: 30px; width: auto; }

.btn-cerrar {
  background: none;
  border: none;
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
  color: var(--contraste);
  /* La × dibuja 26x31; con este padding el boton llega a 44x44 sin que la
     cruz cambie de tamaño. Es el que se toca para salir del carrito. */
  padding: 6px 12px;
  min-width: 44px;
  min-height: 44px;
}

.menu-movil .btn-cerrar { color: var(--contraste); }

.menu-movil-links { overflow-y: auto; padding: 10px 0; }

.menu-movil-links a {
  display: block;
  padding: 12px 20px;
  text-decoration: none;
  font-size: 1rem;
  border-bottom: 1px solid #f0f0f0;
}

.menu-movil-links a.cat-hija { padding-left: 38px; font-size: 0.9rem; color: var(--texto-suave); }

/* ============ LAYOUT GENERAL ============ */

main { min-height: 55vh; }

.contenedor {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 16px;
}

.titulo-seccion {
  text-align: center;
  font-size: 1.6rem;
  font-weight: 500;
  margin: 26px 0 18px;
}

/* Encabezado que leen Google y los lectores de pantalla, pero que no se ve.
   No es display:none ni visibility:hidden a proposito: eso lo saca del arbol de
   accesibilidad y Google lo toma como texto escondido. Asi sigue estando. */
.titulo-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ============ HOME ============ */

.banner { padding: 16px 16px 0; max-width: 1200px; margin: 0 auto; }

.banner img {
  width: 100%;
  display: block;
  border-radius: var(--radio);
}

/* Carrusel (cuando hay mas de un banner cargado desde el admin) */
.banner.carrusel { position: relative; }

.banner.carrusel .diapo {
  display: none;
}

.banner.carrusel .diapo.activa {
  display: block;
  animation: diapo-in 0.5s ease;
}

@keyframes diapo-in {
  from { opacity: 0.35; }
  to { opacity: 1; }
}

.banner.carrusel .puntos {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.banner.carrusel .punto {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  background: rgba(255,255,255,0.55);
  box-shadow: 0 0 4px rgba(0,0,0,0.35);
  transition: background 0.15s, transform 0.15s;
}

.banner.carrusel .punto.activo {
  background: var(--secundario);
  transform: scale(1.15);
}

.franja-info {
  background: var(--primario);
  color: var(--contraste);
  margin-top: 20px;
}

.franja-info-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  padding: 22px 16px;
}

.info-item { display: flex; align-items: center; gap: 12px; }
.info-item svg { flex: 0 0 auto; color: var(--secundario); }
.info-item h4 { margin: 0; font-size: 0.95rem; font-weight: 700; }
.info-item p { margin: 2px 0 0; font-size: 0.82rem; opacity: 0.85; }

/* El juego repetido de items existe solo para el desfile del celular (abajo de
   768px). En escritorio las cuatro columnas estan quietas y la copia sobra. */
.info-item.copia { display: none; }

/* ============ GRILLA DE PRODUCTOS ============ */

.grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.tarjeta {
  background: var(--blanco);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform var(--t-toque) var(--curva), box-shadow var(--t-chico) var(--curva);
  position: relative;
  /* /productos son 228 tarjetas y 35.000px de alto. Sin esto el navegador
     calcula y dibuja las 228 aunque en pantalla entren cuatro. Con
     content-visibility solo trabaja las que estan por aparecer; el
     contain-intrinsic-size le dice cuanto miden las demas para que la barra de
     scroll no pegue saltos, y el `auto` hace que se acuerde del alto real de
     cada una una vez que la dibujo. Las fotos ya venian con loading=lazy: esto
     es la otra mitad, el layout y el pintado. */
  content-visibility: auto;
  contain-intrinsic-size: auto 280px;
}

/* El levantado va detras de (hover: hover): en un celular, tocar la tarjeta
   dispara :hover igual, y al volver atras desde el producto la tarjeta quedaba
   levantada y con sombra, como si siguiera apretada. */
@media (hover: hover) and (pointer: fine) {
  .tarjeta:hover { transform: translateY(-3px); box-shadow: var(--sombra-hover); }
}
.tarjeta:active { transform: scale(0.985); }

.tarjeta-foto {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #f7f7f7;
  overflow: hidden;
}

.tarjeta-foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.25s;
}

.tarjeta-foto img.foto-hover { opacity: 0; }
.tarjeta:hover .tarjeta-foto img.foto-hover { opacity: 1; }

.tarjeta-foto .foto-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: #d0d0d0;
}

.badge-agotado {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--texto);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  z-index: 1;
}

.tarjeta-cuerpo {
  padding: 12px 12px 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.tarjeta-nombre {
  font-size: 0.95rem;
  font-weight: 400;
  margin: 0;
  line-height: 1.35;
}

.tarjeta-precio {
  font-size: 1.15rem;
  font-weight: 700;
  margin-top: auto;
}

.btn-agregar {
  margin-top: 8px;
  min-height: 44px;
  background: var(--secundario);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 9px 14px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-agregar:hover { background: var(--secundario-oscuro); }
.btn-agregar:disabled { background: #c5c5c5; cursor: default; }

.tarjeta.agotada .tarjeta-foto img { filter: grayscale(0.6); opacity: 0.75; }

.ver-mas { text-align: center; margin: 26px 0 10px; }

.btn-secundario {
  display: inline-block;
  background: var(--secundario);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 11px 34px;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-secundario:hover { background: var(--secundario-oscuro); }

/* ============ PAGINA PRODUCTOS ============ */

.productos-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  align-items: start;
}

.sidebar-categorias {
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 14px 0;
  position: sticky;
  top: 90px;
}

.sidebar-categorias h4 {
  margin: 0 0 6px;
  padding: 0 18px;
  font-size: 1rem;
}

.sidebar-categorias a {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 18px;
  text-decoration: none;
  font-size: 0.92rem;
}

.sidebar-categorias a:hover { background: var(--fondo); }
.sidebar-categorias a.activo { color: var(--secundario-oscuro); font-weight: 700; }
.sidebar-categorias a.cat-hija { padding-left: 32px; font-size: 0.86rem; color: var(--texto-suave); }
.sidebar-categorias a .cant { color: var(--texto-suave); font-weight: 400; font-size: 0.8rem; }

.chips-categorias {
  display: none;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  margin-bottom: 12px;
  scrollbar-width: thin;
}

.chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 7px 14px;
  border: 1px solid #ddd;
  background: var(--blanco);
  border-radius: 999px;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}

.chip.activo { background: var(--primario); color: #fff; border-color: var(--primario); }

.contador-resultados { color: var(--texto-suave); font-size: 0.88rem; margin: 0 0 12px; }

.vacio {
  text-align: center;
  color: var(--texto-suave);
  padding: 48px 16px;
  font-size: 1rem;
}

/* ============ FICHA DE PRODUCTO ============ */

.migas {
  font-size: 0.85rem;
  color: var(--texto-suave);
  margin-bottom: 14px;
  overflow-wrap: anywhere;
}

.migas a { color: var(--texto-suave); text-decoration: none; }
.migas a:hover { color: var(--secundario-oscuro); }

.ficha {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 28px;
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 24px;
}

.galeria-principal {
  aspect-ratio: 1 / 1;
  background: #fff;
  border: 1px solid #eee;
  border-radius: var(--radio);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.galeria-principal img { width: 100%; height: 100%; object-fit: contain; }
.galeria-principal .foto-placeholder { font-size: 5rem; color: #d0d0d0; }

.galeria-thumbs {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.galeria-thumbs button {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 2px solid #e5e5e5;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: #fff;
}

.galeria-thumbs button.activo { border-color: var(--secundario); }
.galeria-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* El video del producto: mismo encuadre que la foto (los videos son verticales
   y el marco es cuadrado, asi que contain y fondo negro a los costados). */
.galeria-principal video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  display: block;
}

/* Esta regla NO es de adorno: el `display: block` de arriba le gana al
   `[hidden] { display: none }` de la hoja del navegador, que es mucho menos
   especifico. Sin esto el video se ve SIEMPRE — la galeria queda partida al
   medio, con la foto de un lado y el video del otro. Paso en produccion el
   29/07. Si algun dia se le pone display a un elemento que tambien se oculta
   con `hidden`, hay que acompanarlo con su regla [hidden]. */
.galeria-principal video[hidden] { display: none; }

/* La miniatura del video es una foto mas de la tira, con el play encima para
   que se entienda que no es otra foto. */
.galeria-thumbs .thumb-video { position: relative; }

.thumb-video-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

/* El triangulo, con bordes: sin SVG ni fuente de iconos. */
.thumb-video-play::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 9px;
  border-color: transparent transparent transparent #fff;
  transform: translateX(1px); /* el triangulo pesa a la izquierda, se centra a ojo */
}

.ficha-info { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.ficha-categoria {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texto-suave);
}

.ficha-titulo { font-size: 1.5rem; font-weight: 500; margin: 0; line-height: 1.3; }

.ficha-precio { font-size: 2rem; font-weight: 700; }

.ficha-stock { font-size: 0.9rem; }
.ficha-stock.disponible { color: #16a34a; font-weight: 500; }
.ficha-stock.agotado { color: var(--rojo); font-weight: 500; }

.ficha-compra { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; }

.stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
}

.stepper button {
  width: 44px;
  height: 44px;
  border: none;
  background: none;
  font-size: 1.2rem;
  cursor: pointer;
  color: var(--texto);
}

.stepper button:disabled { color: #ccc; cursor: default; }
.stepper .cant { min-width: 34px; text-align: center; font-size: 1rem; font-weight: 500; }

.btn-agregar-grande {
  flex: 1;
  min-width: 200px;
  background: var(--secundario);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 12px 22px;
  font-size: 1.05rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-agregar-grande:hover { background: var(--secundario-oscuro); }
.btn-agregar-grande:disabled { background: #c5c5c5; cursor: default; }

.btn-wa-consulta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 2px solid var(--verde-wa);
  color: #128c43;
  background: none;
  border-radius: 999px;
  padding: 10px 22px;
  font-size: 0.98rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s;
}

.btn-wa-consulta:hover { background: rgba(37,211,102,0.08); }

.ficha-descripcion { border-top: 1px solid #eee; padding-top: 14px; }
.ficha-descripcion h3 { margin: 0 0 8px; font-size: 1.05rem; }
.ficha-descripcion p { margin: 0; white-space: pre-line; line-height: 1.6; color: #3a3f47; }

.ficha-codigo { font-size: 0.8rem; color: var(--texto-suave); }

/* ============ CONTACTO ============ */

.contacto-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 900px;
  margin: 0 auto;
}

.tarjeta-contacto {
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 24px;
}

.tarjeta-contacto h3 { margin: 0 0 14px; font-size: 1.15rem; }
.tarjeta-contacto p:first-of-type { margin-top: 0; }

/* La aclaracion chica al lado de una etiqueta del checkout ("(si necesitas
   factura)"): no compite con el nombre del campo. */
.label-aclaracion { font-weight: 400; color: var(--texto-suave); }

.dato-contacto {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 0.95rem;
}

.dato-contacto svg { flex: 0 0 auto; color: var(--secundario); margin-top: 1px; }
.dato-contacto a { text-decoration: none; }
.dato-contacto a:hover { color: var(--secundario-oscuro); }

.botones-contacto { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }

.btn-wa-grande {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--verde-wa);
  color: #fff;
  border-radius: 999px;
  padding: 13px 24px;
  font-size: 1.05rem;
  font-weight: 500;
  text-decoration: none;
  transition: filter 0.15s;
}

.btn-wa-grande:hover { filter: brightness(0.93); }

.btn-contacto-sec {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 2px solid var(--primario);
  color: var(--texto);
  border-radius: 999px;
  padding: 11px 24px;
  font-size: 0.98rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s;
}

.btn-contacto-sec:hover { background: rgba(0,0,0,0.05); }

/* ============ PIE ============ */

/* ============ PAGINAS LEGALES ============
   Son las unicas paginas de texto corrido de la tienda. El ancho manda: a 900px
   como el resto de las secciones, una linea de texto legal entra a ~120
   caracteres y se lee pesimo. 760 la deja en ~85, que es donde el ojo encuentra
   solo el renglon siguiente. */

.legal {
  max-width: 760px;
  margin: 0 auto;
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 32px 34px 26px;
  font-size: 0.97rem;
  line-height: 1.65;
}

.legal .titulo-seccion { text-align: left; margin-top: 0; }

.legal h2 {
  font-size: 1.08rem;
  margin: 30px 0 8px;
  padding-top: 18px;
  border-top: 1px solid #e6e6e6;
}

/* El primer h2 va pegado a la intro: la linea de arriba ahi separaria dos cosas
   que son la misma. */
.legal .legal-intro + h2 { border-top: none; padding-top: 0; margin-top: 20px; }

.legal p { margin: 0 0 12px; }
.legal ul { margin: 0 0 12px; padding-left: 20px; }
.legal li { margin-bottom: 6px; }
.legal a { color: var(--secundario-oscuro); }

.legal-intro {
  font-size: 1.04rem;
  color: var(--texto);
  border-left: 3px solid var(--secundario);
  padding-left: 14px;
}

.legal-datos { list-style: none; padding-left: 0; }
.legal-datos li { margin-bottom: 4px; }

/* Las citas de la norma y las aclaraciones de letra chica. Se leen si se buscan;
   no le compiten al texto que el cliente necesita. */
.legal-nota {
  font-size: 0.86rem;
  color: var(--texto-suave);
  line-height: 1.55;
}

.legal-fecha {
  margin-top: 26px;
  padding-top: 14px;
  border-top: 1px solid #e6e6e6;
  font-size: 0.85rem;
  color: var(--texto-suave);
}

/* El formulario del boton de arrepentimiento. Va sobre el gris del fondo para
   que se despegue de la hoja blanca: es la accion de la pagina, no un parrafo
   mas. */
.legal-form-caja {
  background: var(--fondo);
  border-radius: var(--radio);
  padding: 20px;
  margin: 18px 0 10px;
}

.legal-form-caja .btn-agregar-grande { margin-top: 6px; }
.legal-form-caja .error-form a { color: var(--rojo); font-weight: 500; }

.arr-ok { text-align: center; padding: 6px 0; }
.arr-ok h2 { border-top: none; padding-top: 0; margin-top: 0; }

.arr-codigo {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--secundario-oscuro);
  background: var(--blanco);
  border: 1px dashed var(--secundario);
  border-radius: var(--radio);
  padding: 14px 10px;
  /* El codigo se copia a mano o se lee por telefono: que se pueda seleccionar
     de un doble clic sin arrastrar medio parrafo. */
  user-select: all;
  word-break: break-all;
}

.pie {
  background: var(--primario);
  color: var(--contraste);
  margin-top: 48px;
}

.pie-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 1.2fr 1fr auto;
  gap: 28px;
  padding: 36px 16px 26px;
}

.pie-col h4 {
  margin: 0 0 12px;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.pie-col a { display: block; color: var(--contraste); text-decoration: none; padding: 3px 0; font-size: 0.92rem; opacity: 0.9; }
.pie-col a:hover { opacity: 1; color: var(--secundario); }
.pie-col p { font-size: 0.88rem; opacity: 0.8; line-height: 1.5; }

.logo-pie { height: 34px; width: auto; margin-bottom: 10px; }

.pie-redes { display: flex; gap: 12px; margin-top: 8px; }
.pie-redes a { opacity: 0.9; }
.pie-redes a:hover { opacity: 1; color: var(--secundario); }

.pie-fiscal .qr-afip { width: 64px; height: auto; }

/* El boton de arrepentimiento. Recuadrado y con el teal de la marca porque la
   Res. 424/2020 pide "lugar destacado en cuanto a visibilidad y tamaño": si
   fuera un link mas de la columna de al lado no cumpliria. El display:block del
   .pie-col a no le sirve — necesita ser inline-block para que el recuadro se
   ajuste al texto y no cruce toda la columna. */
.pie-col a.btn-arrepentimiento {
  display: inline-block;
  border: 1px solid var(--secundario);
  border-radius: var(--radio);
  padding: 9px 14px;
  margin-bottom: 14px;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  color: var(--secundario);
  opacity: 1;
  transition: background var(--t-chico) var(--curva), color var(--t-chico) var(--curva);
}

.pie-col a.btn-arrepentimiento:hover {
  background: var(--secundario);
  color: var(--primario);
}

.pie-legal {
  border-top: 1px solid rgba(238,238,238,0.15);
  text-align: center;
  padding: 14px 16px;
  font-size: 0.82rem;
  opacity: 0.75;
}

/* ============ CARRITO ============ */

#overlay-carrito, #overlay-menu { z-index: 1100; }

.carrito {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(400px, 92vw);
  background: var(--blanco);
  z-index: 1200;
  transform: translateX(105%);
  transition: transform var(--t-panel) var(--curva-panel);
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 20px rgba(0,0,0,0.15);
}

.carrito.abierto { transform: translateX(0); }

.carrito-cabecera {
  background: var(--primario);
  color: var(--contraste);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
}

.carrito-cabecera h3 { margin: 0; font-size: 1.1rem; }

.carrito-cuerpo { flex: 1; overflow-y: auto; padding: 14px 18px; }

.carrito-vacio { text-align: center; color: var(--texto-suave); padding: 40px 10px; }
.carrito-vacio-icono { font-size: 2.5rem; margin: 0; }

.item-carrito {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
}

.item-carrito .foto {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  background: #f5f5f5;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #ccc;
  overflow: hidden;
}

.item-carrito .foto img { width: 100%; height: 100%; object-fit: cover; }

.item-carrito .nombre { font-size: 0.9rem; margin: 0 0 4px; line-height: 1.3; }
.item-carrito .precio { font-weight: 700; font-size: 0.95rem; }

/* Los del carrito eran 30x32: los mas chicos de toda la tienda, y son los que
   se usan para corregir una cantidad mal puesta. Van a 40 — no a 44 como los
   de la ficha, porque el renglon del carrito tiene la foto al lado y crecerlo
   mas lo desarma. */
.item-carrito .stepper button { width: 40px; height: 40px; font-size: 1rem; }
.item-carrito .stepper .cant { min-width: 26px; font-size: 0.9rem; }

.item-der { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }

/* El padding lo compensa un margen negativo igual: el area de toque llega a
   los 44px que pide el dedo, pero la caja que ve el resto del layout sigue
   siendo la del texto, asi que nada se corre de lugar. Tenia 13px de alto —
   para errarle habia que apuntar bien. */
.btn-quitar {
  background: none;
  border: none;
  color: var(--texto-suave);
  font-size: 0.78rem;
  cursor: pointer;
  text-decoration: underline;
  padding: 15px 10px;
  margin: -15px -10px;
}

.btn-quitar:hover { color: var(--rojo); }

.carrito-pie { border-top: 1px solid #eee; padding: 14px 18px 18px; }

.carrito-total {
  display: flex;
  justify-content: space-between;
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.btn-finalizar {
  width: 100%;
  background: var(--secundario);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 13px;
  font-size: 1.05rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-finalizar:hover { background: var(--secundario-oscuro); }

/* El mismo boton, pero cuando es un <a> (carrito vacio -> "Ver productos"). */
.btn-finalizar.btn-finalizar-link { display: block; text-align: center; text-decoration: none; }

.btn-vaciar {
  width: 100%;
  min-height: 44px;
  background: none;
  border: none;
  color: var(--texto-suave);
  font-size: 0.82rem;
  text-decoration: underline;
  cursor: pointer;
  margin-top: 4px;
}

/* Checkout dentro del carrito */

.checkout-form { display: flex; flex-direction: column; gap: 10px; }

.checkout-form label { font-size: 0.85rem; font-weight: 500; }

/* 16px clavados, no `rem`: abajo de 16 iOS hace zoom solo al tocar el campo y
   el cliente tiene que pellizcar para salir, en cada uno de los seis. Con la
   base de 14px, cualquier valor en rem que se lea bien queda abajo del limite.
   El padding acompaña para que el campo llegue a los 44px de alto. */
.checkout-form input,
.checkout-form select,
.checkout-form textarea {
  width: 100%;
  padding: 11px 12px;
  font-size: 16px;
  font-family: inherit;
  border: 1px solid #ddd;
  border-radius: 8px;
  margin-top: 4px;
}

.checkout-form input:focus,
.checkout-form select:focus,
.checkout-form textarea:focus {
  outline: none;
  border-color: var(--secundario);
}

.checkout-form textarea { resize: vertical; min-height: 60px; }

.error-form { color: var(--rojo); font-size: 0.85rem; margin: 0; }

/* El cartel del modo prueba del pago. Amarillo de advertencia a proposito: no
   es un mensaje de la tienda, es un recordatorio de que esto no cobra plata. */
.aviso-prueba-pago {
  background: #fff8e1; border: 1px solid #f0c000; border-radius: 6px;
  padding: 10px 12px; margin: 0 0 12px; font-size: 0.82rem; line-height: 1.45; color: #6b5300;
}
.aviso-prueba-pago a { color: #6b5300; font-weight: 700; }

.btn-enviar-wa {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--verde-wa);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 13px;
  font-size: 1.02rem;
  font-weight: 500;
  cursor: pointer;
  transition: filter 0.15s;
}

.btn-enviar-wa:hover { filter: brightness(0.93); }

.btn-volver-carrito {
  width: 100%;
  background: none;
  border: none;
  color: var(--texto-suave);
  font-size: 0.85rem;
  text-decoration: underline;
  cursor: pointer;
  margin-top: 10px;
}

/* ============ WHATSAPP FLOTANTE / TOAST ============ */

.whatsapp-flotante {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--verde-wa);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  z-index: 900;
  transition: transform 0.15s;
}

@media (hover: hover) and (pointer: fine) {
  .whatsapp-flotante:hover { transform: scale(1.06); }
}
.whatsapp-flotante:active { transform: scale(0.94); }

.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  background: var(--texto);
  color: #fff;
  padding: 11px 22px;
  border-radius: 999px;
  font-size: 0.92rem;
  z-index: 1300;
  box-shadow: var(--sombra-hover);
  opacity: 1;
  transition: opacity var(--t-chico) var(--curva),
              transform var(--t-chico) var(--curva);
}

/* El toast NO se saca con display:none. Con display el aviso desaparecia de
   golpe (entraba animado y salia de un salto), y ademas el keyframe reiniciaba
   desde cero: si agregabas dos productos rapido, el segundo aviso arrancaba la
   animacion otra vez en el medio. Con una transition el estado se reapunta
   solo, sin saltos, y sale con la misma direccion con la que entro.
   Los dos !important son para ganarle al `.oculto` global (que si usa display);
   como esta regla tiene dos clases, la especificidad la define a favor. */
.toast.oculto {
  display: block !important;
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
  pointer-events: none;
}

/* ============ RESPONSIVE ============ */

@media (max-width: 900px) {
  .franja-info-inner { grid-template-columns: repeat(2, 1fr); }
  /* minmax(0, 1fr) y no `1fr` a secas: un `1fr` pelado equivale a
     minmax(auto, 1fr), y ese `auto` es min-content — la columna se niega a
     achicarse por debajo de su contenido. La tira de miniaturas (64px cada una)
     la estiraba hasta 496px adentro de un celular de 343px: las ultimas
     miniaturas quedaban afuera de la tarjeta, pisando el fondo gris, y el
     overflow-x de la tira no llegaba a actuar nunca. Con el minmax(0, ...) la
     columna se achica y la tira scrollea, que es lo que se quiso siempre.
     La version de escritorio ya lo hacia bien; esto lo empareja. */
  .ficha { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .pie-inner { grid-template-columns: 1fr 1fr; }
  .contacto-grid { grid-template-columns: 1fr; }
  .legal { padding: 24px 22px 20px; }
}

/* Entre 1080 y 1280 las cuatro columnas entran, pero justo: el logo y el menu
   se compactan un poco para que al buscador no le quede una ranura. */
@media (min-width: 1081px) and (max-width: 1280px) {
  .cabecera-inner { gap: 12px 16px; padding: 12px 18px; }
  .logo { height: 38px; }
  .nav-principal { gap: 16px; font-size: 0.98rem; }
}

/* La cabecera cambia antes que el resto del sitio (1080 y no 768): con el
   buscador adentro de la tira negra, el menu horizontal ya no entra en la misma
   fila. Abajo de 1080 el menu pasa a la hamburguesa y el buscador baja a una
   segunda fila, siempre adentro del negro. */
@media (max-width: 1080px) {
  .btn-hamburguesa { display: block; grid-area: menu; }
  .nav-principal { display: none; }
  /* minmax(0, 1fr) y no `1fr` a secas, por lo mismo que en .ficha: el `1fr`
     pelado es minmax(auto, 1fr), y ese `auto` es min-content. La columna del
     medio lleva el logo, que arriba tiene `max-width: none` para no deformarse
     en escritorio, asi que su min-content son los 261px enteros del PNG. La
     cabecera se plantaba en 393px de ancho minimo: abajo de eso la pagina
     scrolleaba de costado y el boton del carrito quedaba afuera de la pantalla
     — en un 360px (Android de gama media) y en un 375px (iPhone SE, 7, 8, X),
     que son la mayoria de los telefonos que entran. */
  .cabecera-inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "menu logo carrito"
      "busq busq busq";
    padding: 10px 12px;
  }
  .logo-link { grid-area: logo; justify-content: center; min-width: 0; }
  .cabecera-acciones { grid-area: carrito; }
  .buscador-cab { grid-area: busq; }

  /* El `object-fit` es lo que deja anular el max-width de escritorio sin
     repetir el problema que aquel comentario describe: la caja se achica
     cuando no hay lugar, pero el dibujo adentro conserva la proporcion en vez
     de estirarse. */
  .logo { max-width: 100%; object-fit: contain; object-position: center; }
}

@media (max-width: 768px) {
  .logo { height: 34px; }
  .buscador-cab-caja { padding: 4px 4px 4px 13px; gap: 6px; }
  .buscador-cab-btn { padding: 0 16px; font-size: 0.88rem; }
  .sugerencia img, .sugerencia-sinfoto { width: 38px; height: 38px; }
  .sugerencia-nombre { font-size: 0.85rem; }

  .productos-layout { grid-template-columns: 1fr; }
  .sidebar-categorias { display: none; }
  .chips-categorias { display: flex; }

  .grilla { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .tarjeta-cuerpo { padding: 9px 8px 11px; }
  .tarjeta-nombre { font-size: 0.85rem; }
  .tarjeta-precio { font-size: 1rem; }
  .btn-agregar { font-size: 0.82rem; padding: 8px 10px; }

  .titulo-seccion { font-size: 1.3rem; }
  .banner { padding: 10px 10px 0; }
  .contenedor { padding: 14px 12px; }

  /* La franja de a dos columnas era un bloque negro de ~130px justo abajo del
     banner: en un celular se comia media pantalla antes de que aparezca el
     primer producto. Aca pasa a una sola linea de ~50px que desfila sola.
     El truco es el juego de items repetido (lo arma franjaItemsHTML en app.js):
     la tira mide el doble de un juego, la animacion la corre hasta -50% —
     exactamente un juego — y al volver a 0 la imagen es identica, asi que el
     corte no se ve y el desfile parece infinito. */
  .franja-info { margin-top: 14px; overflow: hidden; }
  .franja-info-inner {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    max-width: none;
    gap: 0;
    padding: 13px 0;
    animation: franja-desfile 24s linear infinite;
  }
  .info-item.copia { display: flex; }
  .info-item { flex: 0 0 auto; gap: 8px; padding: 0 16px; }
  /* Los iconos vienen con width/height de 34 en el atributo del <svg>: el CSS
     los pisa, si no la linea no baja de esa altura. */
  .info-item svg { width: 21px; height: 21px; }
  /* Titulo y detalle en el mismo renglon (es lo que hace fina a la franja) y
     sin cortes: el ancho lo pone el contenido, total la tira scrollea sola. */
  .info-item > div { white-space: nowrap; }
  .info-item h4 { display: inline; font-size: 0.82rem; }
  .info-item p { display: inline; margin: 0; font-size: 0.8rem; }
  .info-item p::before { content: ' · '; opacity: 0.7; }

  .ficha-titulo { font-size: 1.25rem; }
  .ficha-precio { font-size: 1.6rem; }

  .pie-inner { grid-template-columns: 1fr; gap: 20px; padding: 26px 16px 20px; }

  .legal { padding: 20px 16px 16px; font-size: 0.94rem; }
  .legal h2 { font-size: 1.02rem; margin-top: 24px; padding-top: 14px; }
  .legal-form-caja { padding: 16px 14px; }
  /* A 375px el codigo entero no entra en una linea a 1.5rem: antes de que el
     navegador lo parta por la mitad, se achica. */
  .arr-codigo { font-size: 1.25rem; letter-spacing: 0.08em; }
}

@keyframes franja-desfile {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Si el telefono tiene "reducir movimiento" activado, la franja se queda quieta
   y se arrastra con el dedo. Va como media query aparte (y no anidada adentro
   del bloque de arriba) porque el CSS nativo no anida @media. */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .franja-info { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .franja-info-inner { animation: none; }
}

/* ============================================================
   COTIZADOR DE REPARACIONES
   Minimalista sobre la paleta de la tienda: fondo claro, bordes
   suaves tipo vidrio y el teal solo donde hay que mirar (el precio).
   ============================================================ */

.cot-flotante {
  position: fixed;
  right: 18px;
  bottom: 84px;              /* arriba del boton de WhatsApp */
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border: none;
  border-radius: 999px;
  background: var(--primario);
  color: var(--blanco);
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  z-index: 900;
  transition: transform 0.15s, background 0.15s;
}
@media (hover: hover) and (pointer: fine) {
  .cot-flotante:hover { transform: scale(1.04); background: #1a1a1a; }
}
.cot-flotante:active { transform: scale(0.96); background: #1a1a1a; }
.cot-flotante-icono { font-size: 1.1rem; line-height: 1; }

/* En pantalla chica queda solo el icono: el texto tapaba la grilla. */
@media (max-width: 520px) {
  .cot-flotante { padding: 0; width: 52px; height: 52px; justify-content: center; }
  .cot-flotante-texto { display: none; }
  .cot-flotante-icono { font-size: 1.35rem; }
}

/* ----- MODAL ----- */

.cot-modal { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; }
.cot-fondo { position: absolute; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(3px); }
body.cot-abierto { overflow: hidden; }

.cot-panel {
  position: relative;
  /* Angosto a proposito: la tarjeta es foto + tres precios, y estirada a lo
     ancho queda vacia en el medio. */
  width: min(620px, calc(100% - 32px));
  max-height: min(86vh, 760px);
  display: flex;
  flex-direction: column;
  background: var(--blanco);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.3);
  overflow: hidden;
}

.cot-cabecera {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(0,0,0,0.07);
}
.cot-cabecera h2 { flex: 1; margin: 0; font-size: 1.05rem; font-weight: 500; }
.cot-atras, .cot-cerrar {
  width: 32px; height: 32px;
  border: none; border-radius: 50%;
  background: rgba(0,0,0,0.05);
  color: var(--texto);
  font-size: 1.1rem; line-height: 1;
  cursor: pointer;
  transition: background 0.15s;
}
.cot-cerrar { font-size: 1.5rem; }
.cot-atras:hover, .cot-cerrar:hover { background: rgba(0,0,0,0.1); }

.cot-cuerpo { padding: 18px; overflow-y: auto; }

/* ----- PASO 1: que reparar ----- */

.cot-opciones { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
@media (max-width: 520px) { .cot-opciones { grid-template-columns: 1fr; } }

.cot-opcion {
  display: flex; align-items: center; gap: 14px;
  padding: 20px;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 14px;
  background: rgba(255,255,255,0.7);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
@media (hover: hover) and (pointer: fine) {
  .cot-opcion:hover { border-color: var(--secundario); box-shadow: var(--sombra-hover); transform: translateY(-2px); }
}
.cot-opcion:active { transform: scale(0.98); border-color: var(--secundario); }
.cot-opcion-icono { font-size: 2rem; }
.cot-opcion-texto { display: flex; flex-direction: column; gap: 3px; }
.cot-opcion-texto strong { font-size: 1.02rem; font-weight: 500; }
.cot-opcion-texto small { color: var(--texto-suave); }

/* ----- MARCAS ----- */

.cot-grilla-marcas { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

.cot-marca {
  display: flex; flex-direction: column; gap: 4px;
  padding: 18px 14px;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 12px;
  background: rgba(255,255,255,0.7);
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
@media (hover: hover) and (pointer: fine) {
  .cot-marca:hover { border-color: var(--secundario); box-shadow: var(--sombra-hover); transform: translateY(-2px); }
}
.cot-marca:active { transform: scale(0.98); border-color: var(--secundario); }
.cot-marca-nombre { font-size: 1.02rem; font-weight: 500; letter-spacing: 0.02em; }
.cot-marca-total { font-size: 0.8rem; color: var(--texto-suave); }

/* ----- MODELOS ----- */

.cot-buscador { margin-bottom: 14px; }
.cot-buscador input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.15s;
}
.cot-buscador input:focus { border-color: var(--secundario); }

.cot-grilla-modelos { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }

.cot-modelo {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 10px;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 12px;
  background: rgba(255,255,255,0.7);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
@media (hover: hover) and (pointer: fine) {
  .cot-modelo:hover { border-color: var(--secundario); box-shadow: var(--sombra-hover); transform: translateY(-2px); }
}
.cot-modelo:active { transform: scale(0.98); border-color: var(--secundario); }
.cot-modelo-foto { display: flex; align-items: center; justify-content: center; height: 76px; }
.cot-modelo-foto img { max-height: 76px; width: auto; object-fit: contain; }
.cot-modelo-sinfoto { font-size: 2rem; opacity: 0.35; }
.cot-modelo-nombre { font-size: 0.9rem; font-weight: 500; text-align: center; }

.cot-sin-resultados { text-align: center; color: var(--texto-suave); padding: 18px 0; }

/* ----- FICHA CON LOS PRECIOS ----- */

.cot-ficha { display: grid; gap: 22px; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; }
@media (max-width: 620px) { .cot-ficha { grid-template-columns: 1fr; gap: 16px; } }

/* Fondo BLANCO: los renders de los equipos ya vienen con su propio fondo
   blanco, y cualquier tinte atras hace aparecer un recuadro dentro del otro.
   El marco "liquid glass" es lo que separa la foto del resto sin ensuciarla. */
.cot-ficha-fotos {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 18px;
  border-radius: 18px;
  background: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),   /* brillo del borde de arriba */
    0 1px 2px rgba(16,24,40,0.06),
    0 12px 28px rgba(16,24,40,0.10);
}

/* El anillo de vidrio: un borde de 1px hecho con degradado, que capta luz
   arriba y se apaga abajo. Se recorta con mask para que quede solo el
   contorno y no tape la foto. */
@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  .cot-ficha-fotos::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(150deg,
      rgba(255,255,255,0.95) 0%,
      rgba(0,173,181,0.45) 42%,
      rgba(255,255,255,0.75) 100%);
    /* Los -webkit- van DESPUES de los estandar a proposito: el shorthand `mask`
       reinicia `-webkit-mask-composite` en Safari, y al reves el anillo se
       llenaba y tapaba la foto. */
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    pointer-events: none;
  }
}

/* Sin soporte de mask el anillo no se puede recortar, asi que ahi va un borde
   comun: se ve bien igual, solo pierde el degradado. */
@supports not ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  .cot-ficha-fotos { border: 1px solid rgba(0,173,181,0.28); }
}
/* min-width:0 es lo que les permite achicarse: sin eso, frente y dorso juntos
   se desbordan del recuadro y quedan pegados al borde. */
.cot-ficha-fotos img { max-height: 240px; width: auto; min-width: 0; max-width: 100%; object-fit: contain; }
.cot-ficha-sinfoto { font-size: 4rem; opacity: 0.3; }
/* En celular la ficha se apila y el recuadro pasa a ocupar todo el ancho, asi
   que la foto puede ser mas grande que en el modal de escritorio. Es la que
   evita que el cliente cotice el equipo equivocado. */
@media (max-width: 620px) { .cot-ficha-fotos img { max-height: 210px; } }

.cot-ficha-titulo { margin: 0 0 12px; font-size: 1.25rem; font-weight: 500; }

.cot-precios { list-style: none; margin: 0 0 14px; padding: 0; }

.cot-precio-fila {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  margin-bottom: 8px;
  cursor: pointer;
  background: rgba(255,255,255,0.6);
  transition: border-color 0.15s, background 0.15s;
}
.cot-precio-fila:hover { border-color: var(--secundario); }
.cot-precio-fila.elegida { border-color: var(--secundario); background: rgba(0,173,181,0.07); }
.cot-precio-etiqueta { font-size: 0.95rem; }
.cot-precio-valor { font-size: 1.05rem; font-weight: 700; color: var(--secundario); white-space: nowrap; }
.cot-precio-fila.es-consultar .cot-precio-valor { font-size: 0.9rem; font-weight: 500; color: var(--texto-suave); }

.cot-link-educativo {
  border: none; background: none; padding: 0; margin-bottom: 14px;
  color: var(--secundario);
  font-family: inherit; font-size: 0.88rem;
  text-decoration: underline; cursor: pointer;
}

.cot-leyenda { margin: 0 0 14px; font-size: 0.85rem; color: var(--texto-suave); line-height: 1.5; }
.cot-nota-pago { margin: 10px 0 0; font-size: 0.8rem; color: var(--texto-suave); text-align: center; }

/* ----- LLAMADAS A WHATSAPP ----- */

.cot-cta {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%;
  padding: 13px 18px;
  border: none; border-radius: 999px;
  background: var(--verde-wa);
  color: #fff;
  font-family: inherit; font-size: 0.95rem; font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.15s;
}
.cot-cta:hover { filter: brightness(0.94); }
.cot-cta-suave { background: var(--primario); }

.cot-cierre { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(0,0,0,0.07); text-align: center; }
.cot-cierre p { margin: 0 0 12px; color: var(--texto-suave); line-height: 1.5; }

/* ----- EXPLICACION OLED VS INCELL ----- */

.cot-explicacion p { margin: 0 0 12px; line-height: 1.65; }
.cot-explicacion strong { color: var(--secundario); }
.cot-explicacion .cot-cta { margin-top: 6px; }

/* ----- DATOS DEL LOCAL ----- */

.cot-local {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid rgba(0,0,0,0.07);
  font-size: 0.87rem;
  /* Centrado: los tres textos son de largos muy distintos y alineados a la
     izquierda quedaban desparejos. */
  text-align: center;
}
.cot-local strong { display: block; margin-bottom: 3px; font-weight: 500; }
.cot-local a, .cot-local span { color: var(--texto-suave); text-decoration: none; line-height: 1.5; }
.cot-local a:hover { color: var(--secundario); }

/* ----- VERSION PAGINA (indexable) ----- */

.cot-en-pagina { padding-top: 26px; padding-bottom: 40px; }
.cot-titulo-pagina { margin: 0 0 6px; font-size: 1.5rem; font-weight: 500; }
.cot-bajada { margin: 0 0 22px; color: var(--texto-suave); }
.cot-subtitulo { margin: 32px 0 14px; font-size: 1.15rem; font-weight: 500; }
.cot-miga { margin-bottom: 10px; font-size: 0.85rem; color: var(--texto-suave); }
.cot-miga a { text-decoration: none; }
.cot-miga a:hover { color: var(--secundario); }
.cot-vacio { text-align: center; color: var(--texto-suave); padding: 26px 0; }

/* ============================================================
   RESPUESTA AL TOQUE
   Todo lo que se puede presionar se hunde un poco mientras esta
   apretado. Es el detalle que mas se nota en el celular: el cliente
   toca "Agregar al carrito" y ve que el boton escucho, sin esperar a
   que termine de pasar nada. La escala va entre 0.96 y 0.98 — mas
   abajo se siente un salto, mas arriba no se percibe.
   ============================================================ */

/* Botones de fondo lleno: ademas del hundido, mantienen su cambio de color. */
.btn-agregar,
.btn-secundario,
.btn-agregar-grande,
.btn-finalizar {
  transition: background var(--t-chico) var(--curva),
              transform var(--t-toque) var(--curva);
}

/* Los de WhatsApp se aclaran con filter en lugar de cambiar de fondo. */
.btn-wa-grande,
.btn-enviar-wa,
.cot-cta {
  transition: filter var(--t-chico) var(--curva),
              transform var(--t-toque) var(--curva);
}

/* Los de borde. */
.btn-wa-consulta,
.btn-contacto-sec,
.chip,
.cot-precio-fila {
  transition: background var(--t-chico) var(--curva),
              border-color var(--t-chico) var(--curva),
              transform var(--t-toque) var(--curva);
}

.stepper button,
.cot-atras,
.cot-cerrar,
.btn-carrito,
.btn-hamburguesa,
.btn-cerrar,
.galeria-thumbs button,
.banner.carrusel .punto {
  transition: background var(--t-chico) var(--curva),
              border-color var(--t-chico) var(--curva),
              transform var(--t-toque) var(--curva);
}

.btn-agregar:active,
.btn-secundario:active,
.btn-agregar-grande:active,
.btn-finalizar:active,
.btn-wa-grande:active,
.btn-enviar-wa:active,
.btn-wa-consulta:active,
.btn-contacto-sec:active,
.cot-cta:active,
.chip:active,
.cot-precio-fila:active {
  transform: scale(0.97);
}

/* Los chicos se hunden un poco menos: en un boton de 30px, 0.97 no se ve. */
.stepper button:active,
.cot-atras:active,
.cot-cerrar:active,
.btn-carrito:active,
.btn-hamburguesa:active,
.btn-cerrar:active,
.galeria-thumbs button:active,
.banner.carrusel .punto:active {
  transform: scale(0.92);
}

/* Un boton deshabilitado no tiene que responder: si se hunde, el cliente
   cree que algo paso y vuelve a tocar. */
.btn-agregar:disabled:active,
.btn-agregar-grande:disabled:active,
.stepper button:disabled:active {
  transform: none;
}

/* El punto activo del carrusel ya esta escalado a 1.15; sin esto, tocarlo
   lo achicaria a 0.92 y pegaria un salto. */
.banner.carrusel .punto.activo:active { transform: scale(1.08); }

/* ============================================================
   MOVIMIENTO REDUCIDO
   Quien lo pide en el sistema operativo suele hacerlo por mareo. No se
   apaga todo: los cambios de opacidad y de color ayudan a entender que
   algo cambio y se quedan. Lo que se saca es el desplazamiento.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Estos tres si conservan una transicion corta de opacidad: aparecer de
     golpe se lee como un error de la pagina, no como una respuesta. */
  .toast,
  .banner.carrusel .diapo.activa,
  .tarjeta-foto img.foto-hover {
    transition-duration: 150ms !important;
  }

  /* El menu y el carrito no se deslizan: aparecen ya puestos en su lugar. */
  .menu-movil,
  .carrito { transition-duration: 0.01ms !important; }

  .tarjeta:hover,
  .cot-opcion:hover,
  .cot-marca:hover,
  .cot-modelo:hover { transform: none; }
}

/* ============================================================
   ACCESO MAYORISTA (pagina /mayorista)
   ============================================================
   Reusa casi todo de la tienda: la cabecera negra, la grilla, la tarjeta y el
   cajon del carrito. Lo que se agrega aca es lo que no existe del lado publico:
   la banda que dice en que lista de precios esta parado, el login y el
   resumen del pedido. */

.pagina-mayorista { background: var(--fondo); }

/* La banda: arriba de todo y siempre a la vista mientras dure la sesion. Que
   nunca se pueda dudar de si el precio que esta mirando es el suyo. */
.may-banda {
  background: var(--secundario);
  color: var(--blanco);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 7px 16px;
  font-size: 0.88rem;
  font-weight: 500;
}
.may-banda strong { font-weight: 700; }
.may-salir {
  background: rgba(0, 0, 0, 0.22);
  color: var(--blanco);
  border: none;
  border-radius: 6px;
  padding: 4px 12px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--t-chico) var(--curva);
}
.may-salir:hover { background: rgba(0, 0, 0, 0.4); }

/* ---- Login ---- */
.may-login {
  max-width: 380px;
  margin: 48px auto 64px;
  padding: 0 20px;
  text-align: center;
}
.may-login h1 { margin: 0 0 8px; font-size: 1.5rem; }
.may-login-sub {
  margin: 0 0 26px;
  color: var(--texto-suave);
  font-size: 0.92rem;
  line-height: 1.5;
}
.may-login-form {
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 22px 20px;
  text-align: left;
}
.may-login-form label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 5px;
  color: var(--texto);
}
.may-login-form input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 12px;
  margin-bottom: 16px;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  font-family: inherit;
  font-size: 1rem;
}
.may-login-form input:focus {
  outline: none;
  border-color: var(--secundario);
}
.may-login-error {
  margin: 0 0 14px;
  color: var(--rojo);
  font-size: 0.86rem;
  font-weight: 500;
}
.btn-entrar {
  width: 100%;
  background: var(--secundario);
  color: var(--blanco);
  border: none;
  border-radius: 8px;
  padding: 13px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--t-chico) var(--curva);
}
.btn-entrar:hover { background: var(--secundario-oscuro); }
.btn-entrar:disabled { background: #c5c5c5; cursor: default; }
.may-login-volver {
  display: inline-block;
  margin-top: 20px;
  color: var(--texto-suave);
  font-size: 0.88rem;
  text-decoration: none;
}
.may-login-volver:hover { color: var(--texto); }

/* ---- Catalogo ---- */
.may-catalogo {
  max-width: 1200px;
  margin: 0 auto;
  padding: 22px 16px 60px;
}
.may-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.may-chip {
  background: var(--blanco);
  border: 1px solid #dcdcdc;
  border-radius: 999px;
  padding: 6px 14px;
  font-family: inherit;
  font-size: 0.84rem;
  color: var(--texto);
  cursor: pointer;
  transition: border-color var(--t-chico) var(--curva), background var(--t-chico) var(--curva);
}
.may-chip:hover { border-color: var(--secundario); }
.may-chip.activo {
  background: var(--primario);
  border-color: var(--primario);
  color: var(--blanco);
  font-weight: 700;
}
.may-conteo {
  margin: 0 0 14px;
  color: var(--texto-suave);
  font-size: 0.85rem;
}
.may-vacio {
  color: var(--texto-suave);
  text-align: center;
  padding: 40px 20px;
  line-height: 1.6;
}
/* La tarjeta del mayorista no es un link a otra pagina (no hay ficha propia con
   URL): abre el detalle en un panel. */
.pagina-mayorista .tarjeta { cursor: pointer; }

/* ---- Ficha en panel ---- */
.may-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.may-modal-fondo {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}
.may-modal-panel {
  position: relative;
  background: var(--blanco);
  border-radius: var(--radio);
  max-width: 760px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: var(--sombra-hover);
}
.may-modal-cerrar {
  position: absolute;
  top: 8px;
  right: 12px;
  background: none;
  border: none;
  font-size: 2rem;
  line-height: 1;
  color: var(--texto-suave);
  cursor: pointer;
}
.may-ficha {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 26px;
}
.may-ficha-foto img { width: 100%; border-radius: 8px; }
.may-ficha-datos h2 { margin: 0 0 10px; font-size: 1.25rem; }
.may-ficha-precio {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--texto);
  margin-bottom: 14px;
}
.may-ficha-agotado {
  color: var(--rojo);
  font-weight: 500;
  margin: 0 0 12px;
}
.may-ficha-desc {
  color: var(--texto-suave);
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0 0 18px;
  white-space: pre-line;
}

/* ---- Pedido ---- */
.may-checkout {
  max-width: 620px;
  margin: 0 auto;
  padding: 22px 16px 60px;
}
.may-checkout h1 { font-size: 1.4rem; margin: 10px 0 18px; }
.may-volver {
  background: none;
  border: none;
  color: var(--texto-suave);
  font-family: inherit;
  font-size: 0.9rem;
  padding: 0;
  cursor: pointer;
}
.may-volver:hover { color: var(--texto); }
.may-resumen {
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 16px 18px;
  margin-bottom: 18px;
}
.may-resumen-linea {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 5px 0;
  font-size: 0.92rem;
}
.may-resumen-total {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #eee;
  margin-top: 10px;
  padding-top: 10px;
  font-weight: 700;
  font-size: 1.05rem;
}
.may-form {
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 18px;
}
.may-form-negocio {
  margin: 0 0 16px;
  color: var(--texto-suave);
  font-size: 0.9rem;
}
.may-form label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 5px;
}
.may-form select,
.may-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 12px;
  margin-bottom: 16px;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.95rem;
}
.may-form select:focus,
.may-form textarea:focus { outline: none; border-color: var(--secundario); }

/* El precio unitario en el cajon del pedido: la tienda comun no lo muestra
   porque casi todo se lleva de a uno; por mayor se lleva de a diez y saber el
   unitario es justo lo que se mira. */
.item-carrito .precio-unit {
  color: var(--texto-suave);
  font-size: 0.8rem;
  margin-bottom: 4px;
}

@media (max-width: 700px) {
  .may-ficha { grid-template-columns: 1fr; gap: 16px; padding: 20px; }
}

/* El acceso mayorista adentro del menu del celular. Va PRIMERO de la lista
   (antes estaba al final, despues de todas las categorias, y no lo encontraba
   nadie) y marcado, para que se lea distinto de las paginas comunes. */
.menu-mayorista {
  display: block;
  border: 1px solid var(--secundario);
  border-radius: 8px;
  color: var(--secundario) !important;
  font-weight: 700;
  text-align: center;
  margin-bottom: 6px;
}

/* ============================================================
   La vuelta del checkout (/pago/volver)
   ------------------------------------------------------------
   Vive aca y no en un <style> adentro del HTML porque la CSP de
   las paginas publicas es style-src 'self': un <style> embebido
   NO se aplica, y la pagina le salia al cliente sin ningun
   formato justo despues de pagar.
   ============================================================ */
.pago-header {
  background: #000; padding: 14px 20px; display: flex; justify-content: center;
}
.pago-header img { height: 30px; width: auto; }

.pago-caja {
  max-width: 520px; margin: 40px auto 60px; padding: 36px 28px 30px;
  background: #fff; border-radius: 14px; text-align: center;
  box-shadow: 0 2px 18px rgba(0,0,0,.07);
}
.pago-icono {
  width: 60px; height: 60px; margin: 0 auto 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.pago-icono svg { width: 30px; height: 30px; stroke: #fff; stroke-width: 3;
  fill: none; stroke-linecap: round; stroke-linejoin: round; }
.pago-caja.ok .pago-icono { background: #00adb5; }
.pago-caja.esperando .pago-icono { background: #f0a500; }
.pago-caja.error .pago-icono { background: #d64545; }

.pago-caja h1 { font-size: 1.35rem; margin: 0 0 8px; line-height: 1.3; }
.pago-caja > p { color: #555; line-height: 1.6; margin: 0 0 22px; font-size: .95rem; }
.pago-num {
  display: inline-block; font-size: 12px; letter-spacing: 1.5px; color: #666;
  background: #f2f2f2; border-radius: 5px; padding: 4px 10px; margin-bottom: 16px;
}

/* El detalle de la plata. Importa sobre todo en cuotas: el cliente pago un
   numero mas grande que el precio de la web y tiene que verlo explicado aca,
   no descubrirlo en el resumen de la tarjeta. */
.pago-resumen {
  text-align: left; margin: 0 0 22px; padding: 16px 18px;
  background: #fafafa; border: 1px solid #eee; border-radius: 10px; font-size: .9rem;
}
.pago-resumen div { display: flex; justify-content: space-between; gap: 14px; padding: 5px 0; }
.pago-resumen dt { color: #666; }
.pago-resumen dd { margin: 0; font-weight: 600; text-align: right; white-space: nowrap; }
.pago-resumen .destacado { border-top: 1px solid #e4e4e4; margin-top: 6px; padding-top: 10px; }
.pago-resumen .destacado dd { color: #00adb5; font-size: 1.05rem; }
.pago-nota { font-size: .78rem; color: #888; line-height: 1.5; margin: -12px 0 20px; }

.pago-botones { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.pago-botones a {
  display: inline-block; padding: 12px 20px; border-radius: 8px;
  text-decoration: none; font-weight: 600; font-size: .92rem;
}
.b-wa { background: #25d366; color: #fff; }
.b-volver { background: #f0f0f0; color: #333; }

@media (max-width: 560px) {
  .pago-caja { margin: 22px 14px 40px; padding: 28px 20px 24px; }
  .pago-botones a { flex: 1 1 100%; }
}