/* ============================================================
   Tienda ATP Outlet — estilo minimalista, paleta de atp-outlet.com
   ============================================================ */

:root {
  --color-acento: #039ee3;
  --color-acento-hover: #17a5e9;
  --color-acento-light: #25d8ed;
  --color-fondo: #ffffff;
  --color-fondo-alt: #fafafa;
  --color-fondo-suave: #f5f5f5;
  --color-borde: #dddddd;
  --color-texto: #252525;
  --color-texto-suave: #666666;
  --color-descuento: #e6392b;
  --radio: 4px;
  --sombra: 0 1px 3px rgba(0,0,0,.08);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--color-texto);
  background: var(--color-fondo-alt);
  line-height: 1.5;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.site-main { max-width: 1200px; margin: 0 auto; padding: 24px 16px 64px; }

/* ---------- Header ---------- */
.site-header { background: var(--color-fondo); border-bottom: 1px solid var(--color-borde); }
.header-top { padding: 14px 0; }
.header-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 16px;
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.logo img { height: 42px; }
.search-form { flex: 1; min-width: 200px; display: flex; }
.search-form input {
  flex: 1; padding: 9px 12px; border: 1px solid var(--color-borde);
  border-radius: var(--radio) 0 0 var(--radio); font-size: 14px;
}
.search-form button {
  padding: 9px 16px; border: none; background: var(--color-acento); color: #fff;
  border-radius: 0 var(--radio) var(--radio) 0; cursor: pointer; font-size: 14px;
}
.search-form button:hover { background: var(--color-acento-hover); }
.header-actions { display: flex; align-items: center; gap: 18px; font-size: 14px; white-space: nowrap; }
.cart-link { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.cuenta-link { display: flex; align-items: center; gap: 6px; }
.icono-usuario { flex-shrink: 0; }
.cart-count {
  background: var(--color-acento); color: #fff; border-radius: 999px;
  font-size: 12px; padding: 1px 7px; min-width: 18px; text-align: center;
}

/* ---------- Nav principal (Inicio / Tienda) ---------- */
.main-nav { display: flex; align-items: center; gap: 24px; }
.nav-link {
  font-size: 15px; font-weight: 600; color: var(--color-texto); padding: 8px 0;
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.nav-link:hover, .nav-link.activo { color: var(--color-acento); }
.nav-link.activo { border-bottom-color: var(--color-acento); }

/* ---------- Desplegable de categorias ("Tienda") ---------- */
.cat-dropdown { position: relative; }
.cat-dropdown-toggle {
  display: flex; align-items: center; gap: 5px; background: none; border: none; cursor: pointer; font: inherit;
}
.cat-dropdown-toggle[aria-expanded="true"] { color: var(--color-acento); }
.cat-dropdown-toggle .caret { font-size: 11px; transition: transform .15s; }
.cat-dropdown-toggle[aria-expanded="true"] .caret { transform: rotate(180deg); }
/* Abrir/cerrar es puramente CSS (hover/focus nativos, sin temporizadores JS):
   un puente invisible (::before) cierra el hueco visual entre boton y menu
   para que el :hover no se corte al bajar el raton. */
.cat-dropdown::before {
  content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 12px;
}
.cat-dropdown-menu {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 30; min-width: 240px; max-height: 60vh; overflow-y: auto;
  background: var(--color-fondo); border: 1px solid var(--color-borde); border-radius: var(--radio); box-shadow: 0 8px 24px rgba(0,0,0,.14);
  flex-direction: column; padding: 6px;
  display: none;
}
.cat-dropdown:hover .cat-dropdown-menu,
.cat-dropdown:focus-within .cat-dropdown-menu,
.cat-dropdown.abierto .cat-dropdown-menu {
  display: flex;
}
.cat-dropdown-menu a { padding: 9px 12px; font-size: 14px; border-radius: var(--radio); color: var(--color-texto); }
.cat-dropdown-menu a:hover { background: var(--color-fondo-suave); color: var(--color-acento); }

/* ---------- Buscador con autocompletado ---------- */
.search-wrap { position: relative; flex: 1; min-width: 200px; }
.search-wrap input { width: 100%; }
.search-sugerencias {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30;
  background: var(--color-fondo); border: 1px solid var(--color-borde); border-radius: var(--radio);
  box-shadow: 0 8px 24px rgba(0,0,0,.12); max-height: 320px; overflow-y: auto; display: flex; flex-direction: column;
}
.search-sugerencias a { padding: 10px 14px; font-size: 14px; color: var(--color-texto); border-bottom: 1px solid var(--color-fondo-suave); }
.search-sugerencias a:last-child { border-bottom: none; }
.search-sugerencias a:hover, .search-sugerencias a.activo { background: var(--color-fondo-suave); color: var(--color-acento); }

/* ---------- Breadcrumbs (generico) ---------- */
.breadcrumb { font-size: 12px; color: var(--color-texto-suave); margin: 0 0 16px; }
.breadcrumb a { color: var(--color-texto-suave); }
.breadcrumb a:hover { color: var(--color-acento); }

/* ---------- Footer ---------- */
.site-footer { background: var(--color-texto); color: #ccc; margin-top: 48px; }
.footer-inner { max-width: 1200px; margin: 0 auto; padding: 32px 16px; text-align: center; }
.footer-logo { height: 32px; margin: 0 auto 12px; filter: brightness(0) invert(1); opacity: .9; }
.footer-tagline { font-size: 13px; max-width: 480px; margin: 0 auto 16px; color: #999; }
.footer-links { display: flex; justify-content: center; gap: 20px; margin-bottom: 16px; font-size: 13px; }
.footer-links a:hover { color: var(--color-acento-light); }
.footer-copy { font-size: 12px; color: #777; }

/* ---------- Aviso informativo de cookies (no bloqueante) ---------- */
.aviso-cookies {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 200; max-width: 640px; margin: 0 auto;
  background: var(--color-texto); color: #eee; border-radius: var(--radio); box-shadow: 0 8px 24px rgba(0,0,0,.25);
  padding: 14px 16px; display: flex; align-items: center; gap: 14px; font-size: 13px;
}
.aviso-cookies[hidden] { display: none; }
.aviso-cookies p { margin: 0; flex: 1; line-height: 1.4; }
.aviso-cookies a { color: var(--color-acento-light); text-decoration: underline; }
.aviso-cookies button {
  flex-shrink: 0; background: none; border: none; color: #eee; font-size: 16px; cursor: pointer; line-height: 1; padding: 4px;
}
.aviso-cookies button:hover { color: #fff; }

/* ---------- Botones ---------- */
.btn {
  display: inline-block; padding: 10px 20px; border-radius: var(--radio);
  border: none; cursor: pointer; font-size: 14px; font-weight: 600; text-align: center;
}
.btn-acento { background: var(--color-acento); color: #fff; }
.btn-acento:hover { background: var(--color-acento-hover); }
.btn-outline { background: transparent; border: 1px solid var(--color-borde); color: var(--color-texto); }
.btn-outline:hover { border-color: var(--color-acento); color: var(--color-acento); }
.btn-block { display: block; width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------- Grid de productos ---------- */
.filtros-bar {
  display: flex; flex-wrap: nowrap; gap: 16px; align-items: center;
  background: var(--color-fondo); border: 1px solid var(--color-borde);
  border-radius: var(--radio); padding: 14px; margin-bottom: 8px; overflow-x: auto;
  position: sticky; top: 0; z-index: 15;
}
.filtros-bar select, .filtros-bar > input[type="text"] {
  padding: 7px 10px; border: 1px solid var(--color-borde); border-radius: var(--radio); font-size: 13px; flex-shrink: 0;
}
.filtros-bar > input[type="text"] { flex: 1 1 auto; min-width: 140px; }
.filtros-bar .btn { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 800px) { .filtros-bar { flex-wrap: wrap; } }

.leyenda-resultados { font-size: 13px; color: var(--color-texto-suave); margin: 0 0 16px; }
.cargando-mas { text-align: center; padding: 20px; font-size: 13px; color: var(--color-texto-suave); }

/* ---------- Slider de precio (doble asa) ---------- */
.precio-slider { display: flex; flex-direction: column; gap: 4px; min-width: 200px; flex-shrink: 0; }
.precio-slider label { font-size: 12px; color: var(--color-texto-suave); }
.precio-slider-valores { font-size: 13px; font-weight: 600; white-space: nowrap; }
.precio-slider-track { position: relative; height: 20px; }
.precio-riel {
  position: absolute; top: 8px; left: 0; right: 0; height: 4px;
  background: var(--color-borde); border-radius: 2px;
}
.precio-riel-relleno {
  position: absolute; top: 8px; height: 4px; background: var(--color-acento); border-radius: 2px;
}
.precio-range {
  position: absolute; top: 6px; left: 0; width: 100%; margin: 0; height: 8px;
  -webkit-appearance: none; appearance: none; background: transparent; pointer-events: none;
}
.precio-range::-webkit-slider-runnable-track { background: transparent; }
.precio-range::-moz-range-track { background: transparent; }
.precio-range::-webkit-slider-thumb {
  -webkit-appearance: none; pointer-events: auto; width: 16px; height: 16px; border-radius: 50%;
  background: var(--color-acento); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--color-acento); cursor: pointer;
}
.precio-range::-moz-range-thumb {
  pointer-events: auto; width: 16px; height: 16px; border-radius: 50%;
  background: var(--color-acento); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--color-acento); cursor: pointer;
}

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

/* ---------- Layout de catalogo (sidebar de categorias + grid) ---------- */
.layout-catalogo { display: grid; grid-template-columns: 240px 1fr; gap: 28px; align-items: start; }
@media (max-width: 800px) { .layout-catalogo { grid-template-columns: 1fr; } }
.sidebar-categorias {
  background: var(--color-fondo); border: 1px solid var(--color-borde); border-radius: var(--radio);
  padding: 14px; position: sticky; top: 16px; display: flex; flex-direction: column; gap: 12px;
}
.precio-filtro-form { border-top: 1px solid var(--color-borde); padding-top: 14px; }
.precio-filtro-form .precio-slider { min-width: 0; }
.sidebar-nivel-select { display: flex; flex-direction: column; gap: 4px; }
.sidebar-nivel-select label { font-size: 12px; color: var(--color-texto-suave); }
.sidebar-nivel-select select {
  padding: 8px 10px; border: 1px solid var(--color-borde); border-radius: var(--radio);
  font-size: 13px; background: var(--color-fondo); color: var(--color-texto);
}
.sidebar-nivel-select select:focus { border-color: var(--color-acento); outline: none; }

.tarjeta-producto {
  background: var(--color-fondo); border: 1px solid var(--color-borde); border-radius: var(--radio);
  overflow: hidden; box-shadow: var(--sombra); display: flex; flex-direction: column;
  transition: box-shadow .15s; position: relative;
}
.tarjeta-producto:hover { box-shadow: 0 4px 12px rgba(0,0,0,.12); }
/* Marco de imagen uniforme (misma altura) en todas las secciones de la
   tienda: catalogo, destacados, categorias y mini-carruseles de la home. */
:root { --alto-marco-imagen: 150px; }
.tarjeta-producto .imagen-wrap {
  height: var(--alto-marco-imagen); background: #fff; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}

/* Favoritos: boton corazon */
.btn-favorito {
  position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--color-borde); background: rgba(255,255,255,.92); color: var(--color-texto-suave);
  font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 2; transition: color .15s, transform .1s;
}
.btn-favorito:hover { transform: scale(1.08); }
.btn-favorito .icono-favorito-filled { display: none; }
.btn-favorito.activo .icono-favorito-filled { display: block; }
.btn-favorito.activo .icono-favorito-outline { display: none; }
.btn-favorito.activo { color: var(--color-descuento); }

.acciones-secundarias { margin: 10px 0 16px; position: relative; display: flex; gap: 8px; }
.btn-compartir, .btn-favorito--detalle {
  position: static; width: auto; height: auto; display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 1px solid var(--color-borde); border-radius: var(--radio);
  padding: 7px 14px; font-size: 13px; color: var(--color-texto); cursor: pointer; flex-shrink: 0;
}
.btn-favorito--detalle svg { flex-shrink: 0; }
.btn-compartir:hover, .btn-favorito--detalle:hover { border-color: var(--color-acento); color: var(--color-acento); }
.btn-favorito--detalle.activo { border-color: var(--color-descuento); color: var(--color-descuento); }
.btn-favorito--detalle.activo:hover { border-color: var(--color-descuento); color: var(--color-descuento); }

/* Popover de compartir: iconos de marca en circulos de color, como apps nativas */
.popover-compartir {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 50; min-width: 220px;
  background: var(--color-fondo); border: 1px solid var(--color-borde); border-radius: var(--radio);
  box-shadow: 0 8px 24px rgba(0,0,0,.14); padding: 10px; display: flex; flex-wrap: wrap; gap: 10px;
}
.canal-compartir {
  display: flex; flex-direction: column; align-items: center; gap: 4px; width: 64px;
  color: var(--color-texto); background: none; border: none; cursor: pointer;
  text-decoration: none; font-size: 11px; text-align: center;
}
.canal-compartir .icono-canal {
  width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #fff; transition: transform .12s;
}
.canal-compartir:hover .icono-canal { transform: scale(1.08); }
.canal-compartir .icono-canal svg { width: 20px; height: 20px; }
.canal-whatsapp .icono-canal { background: #25D366; }
.canal-facebook  .icono-canal { background: #1877F2; }
.canal-telegram  .icono-canal { background: #229ED9; }
.canal-email     .icono-canal { background: #6b7280; }
.canal-copiar    .icono-canal { background: #111827; }
.tarjeta-producto .imagen-wrap img { width: 100%; height: 100%; object-fit: contain; }
.tarjeta-producto .info { padding: 12px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.tarjeta-producto .titulo { font-size: 14px; font-weight: 600; flex: 1; }
.tarjeta-ruta { font-size: 11px; color: var(--color-texto-suave); }
.tarjeta-ruta a { color: var(--color-texto-suave); }
.tarjeta-ruta a:hover { color: var(--color-acento); text-decoration: underline; }
.badges-plataforma--tarjeta { margin: 0; gap: 6px; }
.badges-plataforma--tarjeta .badge-plataforma { height: 20px; padding: 0 6px; }
.badges-plataforma--tarjeta .badge-plataforma img { height: 13px; }
.tarjeta-producto .badge-condicion {
  align-self: flex-start; font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: var(--color-fondo-suave); color: var(--color-texto-suave); border: 1px solid var(--color-borde);
}
.tarjeta-producto .precios { display: flex; align-items: baseline; gap: 8px; }
.precio-actual { font-size: 17px; font-weight: 700; color: var(--color-acento); }
.precio-tachado { font-size: 13px; color: #999; text-decoration: line-through; }
.linea-oferta { display: flex; align-items: center; gap: 6px; align-self: flex-start; }
.badge-descuento {
  display: inline-flex; align-items: center; justify-content: center; align-self: auto;
  background: var(--color-descuento); color: #fff; font-size: 12px; font-weight: 800;
  padding: 4px 6px; border-radius: 6px; min-width: 34px; text-align: center; line-height: 1;
}
.texto-oferta { font-size: 12px; font-weight: 600; color: var(--color-descuento); }
.precio-desde { font-size: 11px; color: var(--color-texto-suave); }
.sin-stock { color: #999; font-size: 12px; font-style: italic; }

/* ---------- Home ---------- */
.hero {
  background: linear-gradient(135deg, var(--color-acento), var(--color-acento-light));
  color: #fff; border-radius: var(--radio); padding: 48px 32px; margin-bottom: 32px; text-align: center;
}
.hero h1 { margin: 0 0 8px; font-size: 28px; }
.hero p { margin: 0 0 20px; opacity: .95; }
.hero .btn { background: #fff; color: var(--color-acento); }

.seccion-home { margin-bottom: 40px; }
.seccion-home h2 { font-size: 20px; margin-bottom: 16px; border-left: 4px solid var(--color-acento); padding-left: 10px; }

.grid-categorias { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 800px) { .grid-categorias { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .grid-categorias { grid-template-columns: 1fr; } }
.tarjeta-categoria {
  display: flex; align-items: center; gap: 18px; background: var(--color-fondo);
  border: 1px solid var(--color-borde); border-radius: var(--radio); padding: 20px;
  text-decoration: none; color: var(--color-texto); transition: border-color .15s, box-shadow .15s;
}
.tarjeta-categoria:hover { border-color: var(--color-acento); box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.tarjeta-categoria img {
  width: var(--alto-marco-imagen); height: var(--alto-marco-imagen); object-fit: contain; border-radius: var(--radio);
  background: #fff; flex-shrink: 0; padding: 6px;
}
.tarjeta-categoria strong { display: block; font-size: 16px; margin-bottom: 4px; }
.cat-num-productos { font-size: 13px; color: var(--color-texto-suave); }
.ver-mas-categorias {
  display: block; margin: 18px auto 0; background: none; border: 1px solid var(--color-borde);
  border-radius: var(--radio); padding: 9px 20px; font-size: 13px; color: var(--color-texto); cursor: pointer;
}
.ver-mas-categorias:hover { border-color: var(--color-acento); color: var(--color-acento); }
.caja-mas-categorias {
  margin-top: 16px; max-height: 480px; overflow-y: auto; border: 1px solid var(--color-borde);
  border-radius: var(--radio); padding: 16px; background: var(--color-fondo-alt);
}
.caja-mas-categorias .grid-categorias { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 800px) { .caja-mas-categorias .grid-categorias { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .caja-mas-categorias .grid-categorias { grid-template-columns: 1fr; } }

/* ---------- Fila exterior de carruseles de categoria (home) ---------- */
/* En escritorio grande se ven 3 tarjetas-categoria a la vez; las flechas
   exteriores avanzan/retroceden un "grupo" completo (scroll nativo con
   scroll-snap, mas boton para quien no usa rueda/tactil). Cada tarjeta
   tiene una altura fija y predecible (cabecera + 2x2 productos), asi que
   no hace falta limitar la altura de la seccion: se deja crecer segun
   su contenido para que no se corte nada. */
.fila-carruseles-wrap { position: relative; }
.fila-carruseles-viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.fila-carruseles-viewport::-webkit-scrollbar { display: none; }
.fila-carruseles { display: flex; gap: 20px; }
.fila-carruseles-flecha {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--color-borde);
  background: rgba(255,255,255,.92); color: var(--color-texto); font-size: 16px; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.fila-carruseles-flecha-izq { left: 10px; }
.fila-carruseles-flecha-der { right: 10px; }
.fila-carruseles-flecha:hover:not(:disabled) { border-color: var(--color-acento); color: var(--color-acento); }
.fila-carruseles-flecha:disabled { opacity: 0; pointer-events: none; }

/* ---------- Tarjeta-carrusel de una categoria destacada ---------- */
.carrusel-categoria {
  flex: 0 0 calc((100% - 40px) / 3); scroll-snap-align: start; min-width: 0;
  background: var(--color-fondo); border: 1px solid var(--color-borde); border-radius: var(--radio); padding: 16px;
}
@media (max-width: 1100px) { .carrusel-categoria { flex-basis: calc((100% - 20px) / 2); } }
@media (max-width: 700px)  { .carrusel-categoria { flex-basis: 100%; } }
.carrusel-cabecera { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; gap: 8px; }
.carrusel-cabecera h2 { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carrusel-ver-todo { font-size: 12px; color: var(--color-acento); text-decoration: none; flex-shrink: 0; }
.carrusel-ver-todo:hover { text-decoration: underline; }
.carrusel-grid-fijo { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 10px; }
.carrusel-flecha:disabled { opacity: .3; cursor: default; }

/* Mini tarjeta de producto (solo foto, descuento y precio) usada dentro
   de los carruseles de categoria de la home. */
.mini-tarjeta-producto {
  display: flex; flex-direction: column; text-decoration: none; color: var(--color-texto); position: relative;
  min-height: 0;
}
.mini-imagen-wrap {
  height: var(--alto-marco-imagen); background: #fff; border: 1px solid var(--color-borde); border-radius: var(--radio);
  display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 6px;
}
.mini-imagen-wrap img { width: 100%; height: 100%; object-fit: contain; }
.mini-badge-descuento { position: absolute; top: 6px; left: 6px; }
.mini-precios { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.mini-precios .precio-actual { font-size: 14px; }
.mini-precios .precio-tachado { font-size: 11px; }

/* ---------- Ficha de producto ---------- */
.ficha-producto { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
@media (max-width: 800px) { .ficha-producto { grid-template-columns: 1fr; } }
.ficha-galeria .imagen-principal {
  aspect-ratio: 1/1; background: var(--color-fondo-suave); border-radius: var(--radio); overflow: hidden; margin-bottom: 10px;
}
.ficha-galeria .imagen-principal img { width: 100%; height: 100%; object-fit: contain; }
.ficha-galeria .miniaturas { display: flex; gap: 8px; flex-wrap: wrap; }
.ficha-galeria .miniaturas img {
  width: 60px; height: 60px; object-fit: cover; border: 1px solid var(--color-borde);
  border-radius: var(--radio); cursor: pointer;
}
.ficha-info h1 { font-size: 22px; margin: 0 0 6px; }
.ficha-info .breadcrumb { font-size: 12px; color: var(--color-texto-suave); margin-bottom: 12px; }
.ficha-info .breadcrumb a:hover { color: var(--color-acento); }
.ficha-info .descripcion { font-size: 14px; color: #444; margin: 16px 0; }
.referencia-producto { font-size: 12px; color: var(--color-texto-suave); margin: 0 0 12px; }

/* ---------- "Mas productos en <categoria>" (ficha de producto) ---------- */
/* Reutiliza el patron de fila-carruseles de la home (scroll nativo con
   flechas superpuestas) pero con tarjetas de producto normales de ancho
   fijo en vez de tarjetas-categoria de 3-por-fila. */
.seccion-relacionados .fila-carruseles { gap: 20px; }
.tarjeta-relacionada { flex: 0 0 270px; scroll-snap-align: start; min-width: 0; }

.tabla-condiciones { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px; }
.tabla-condiciones th, .tabla-condiciones td {
  padding: 8px 10px; border-bottom: 1px solid var(--color-borde); text-align: left;
}
.tabla-condiciones tr.seleccionable { cursor: pointer; }
.tabla-condiciones tr.seleccionable:hover { background: var(--color-fondo-suave); }
.tabla-condiciones input[type="radio"] { margin-right: 8px; }

.selector-cantidad { display: flex; align-items: center; gap: 10px; margin: 16px 0; }
.selector-cantidad input { width: 60px; padding: 8px; border: 1px solid var(--color-borde); border-radius: var(--radio); text-align: center; }

.titulo-badges-plataforma { font-size: 13px; font-weight: 600; color: var(--color-texto-suave); margin: 14px 0 6px; }
.badges-plataforma { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.badge-plataforma {
  display: flex; align-items: center; justify-content: center; height: 28px; padding: 0 10px;
  border: 1px solid var(--color-borde); border-radius: var(--radio); background: var(--color-fondo);
  font-size: 12px; color: var(--color-texto-suave);
}
.badge-plataforma:hover { border-color: var(--color-acento); }
.badge-plataforma img { height: 18px; width: auto; display: block; }

.aviso-outlet {
  background: var(--color-fondo-suave); border-left: 3px solid var(--color-acento);
  padding: 10px 14px; font-size: 13px; color: var(--color-texto-suave); margin: 16px 0; border-radius: 0 var(--radio) var(--radio) 0;
}
.aviso-visitas { font-size: 13px; color: var(--color-descuento); font-weight: 600; margin: 0 0 10px; }

/* ---------- Carrito / Checkout ---------- */
.tabla-carrito { width: 100%; border-collapse: collapse; table-layout: auto; }
.tabla-carrito th, .tabla-carrito td { padding: 12px 10px; border-bottom: 1px solid var(--color-borde); text-align: left; font-size: 14px; }
.tabla-carrito .cantidad-input { width: 56px; padding: 6px; border: 1px solid var(--color-borde); border-radius: var(--radio); text-align: center; }
.quitar-item { color: #b00; font-size: 13px; cursor: pointer; background: none; border: none; padding: 0; }

/* Tabla del carrito propiamente dicha (con imagen): esta si necesita
   anchos fijos por columna para que la imagen no se estire ni la
   columna de producto quede demasiado estrecha. */
.tabla-con-imagen { table-layout: fixed; }
.tabla-con-imagen img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--radio); }
.tabla-con-imagen th:nth-child(1), .tabla-con-imagen td:nth-child(1) { width: 110px; }
.tabla-con-imagen th:nth-child(2), .tabla-con-imagen td:nth-child(2) { width: 46%; }

/* Tabla de resumen de pedido (pedido_confirmado.asp): la columna de
   producto ocupa el espacio libre y envuelve el texto; el resto de
   columnas (numericas) no deben partirse en dos lineas. */
.tabla-resumen-pedido th:not(:first-child), .tabla-resumen-pedido td:not(:first-child) {
  white-space: nowrap; text-align: right;
}
.tabla-resumen-pedido td:first-child { width: 100%; }

.resumen-caja {
  background: var(--color-fondo); border: 1px solid var(--color-borde); border-radius: var(--radio);
  padding: 20px; position: sticky; top: 16px;
}
.resumen-caja .linea { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 14px; }
.resumen-caja .total { font-size: 18px; font-weight: 700; border-top: 1px solid var(--color-borde); padding-top: 10px; margin-top: 10px; }

.layout-checkout { display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: start; }
@media (max-width: 800px) { .layout-checkout { grid-template-columns: 1fr; } }
.layout-carrito { grid-template-columns: 75% 25%; }
@media (max-width: 800px) { .layout-carrito { grid-template-columns: 1fr; } }

.form-caja { background: var(--color-fondo); border: 1px solid var(--color-borde); border-radius: var(--radio); padding: 20px; margin-bottom: 20px; }
.form-caja h3 { margin-top: 0; font-size: 16px; }
.campo { margin-bottom: 14px; }
.campo label { display: block; font-size: 13px; margin-bottom: 5px; color: var(--color-texto-suave); }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 9px 10px; border: 1px solid var(--color-borde); border-radius: var(--radio); font-size: 14px;
}
.campo-fila { display: flex; gap: 12px; }
.campo-fila > .campo { flex: 1; }

.opcion-radio { display: flex; align-items: flex-start; gap: 10px; padding: 10px; border: 1px solid var(--color-borde); border-radius: var(--radio); margin-bottom: 8px; cursor: pointer; }
.opcion-radio:hover { border-color: var(--color-acento); }
.opcion-radio input { margin-top: 3px; }

/* ---------- Mensajes / alertas ---------- */
.alerta { padding: 12px 16px; border-radius: var(--radio); margin-bottom: 16px; font-size: 14px; }
.alerta-danger { background: #fdecea; color: #b3261e; border: 1px solid #f5c6c3; }
.alerta-success { background: #e8f7ee; color: #1e7a3f; border: 1px solid #bfe7cf; }
.alerta-info { background: #e8f4fb; color: #0d5c85; border: 1px solid #bfe0f2; }

/* ---------- Cuenta cliente ---------- */
.tabs-cuenta { display: flex; gap: 4px; border-bottom: 1px solid var(--color-borde); margin-bottom: 20px; }
.tabs-cuenta a { padding: 10px 16px; font-size: 14px; border-bottom: 2px solid transparent; }
.tabs-cuenta a.activo { border-color: var(--color-acento); color: var(--color-acento); font-weight: 600; }

.tarjeta-direccion {
  border: 1px solid var(--color-borde); border-radius: var(--radio); padding: 14px; margin-bottom: 12px; position: relative;
}
.tarjeta-direccion .badge-predeterminada {
  position: absolute; top: 10px; right: 10px; font-size: 11px; background: var(--color-acento); color: #fff; padding: 2px 8px; border-radius: 999px;
}

.vacio-estado { text-align: center; padding: 48px 16px; color: var(--color-texto-suave); }
.vacio-estado .btn { margin-top: 16px; }

/* Paginas legales (politica de cookies, etc.) */
.pagina-legal { max-width: 760px; margin: 0 auto; }
.pagina-legal h1 { margin-bottom: 6px; }
.pagina-legal h2 { font-size: 18px; margin: 28px 0 10px; }
.pagina-legal p { margin-bottom: 14px; line-height: 1.6; color: var(--color-texto); }
.pagina-legal .fecha-actualizacion { font-size: 13px; color: var(--color-texto-suave); margin-bottom: 24px; }
.pagina-legal ul { margin: 0 0 14px 20px; }
.pagina-legal li { margin-bottom: 4px; }
.pagina-legal a { color: var(--color-acento); }
.tabla-cookies { width: 100%; border-collapse: collapse; margin: 12px 0 20px; font-size: 13px; }
.tabla-cookies th, .tabla-cookies td { border: 1px solid var(--color-borde); padding: 10px 12px; text-align: left; vertical-align: top; }
.tabla-cookies th { background: var(--color-fondo-suave); }
.tabla-cookies code { background: var(--color-fondo-suave); padding: 2px 6px; border-radius: 3px; font-size: 12px; }