/* ============================================================
   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: 10px;
  font-size: 0.95rem;
  word-break: break-word;
}

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

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

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

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

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

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

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

  .franja-info-inner { gap: 10px; padding: 16px 12px; }
  .info-item h4 { font-size: 0.85rem; }
  .info-item p { font-size: 0.76rem; }

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

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

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