/* Página pública. Usa exclusivamente las variables de marca.css */
.cabecera { background: var(--c-marino-900); color: var(--c-blanco); position: sticky; top: 0; z-index: 20; }
.cabecera .contenedor { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: var(--e-4); }
.btn-carrito { background: var(--c-naranja-400); color: var(--c-marino-900); min-height: 40px; padding: var(--e-2) var(--e-4); }
.btn-carrito .cuenta {
  display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px;
  border-radius: var(--r-pildora); background: var(--c-marino-900); color: var(--c-blanco); font-size: var(--t-xs);
}
.ola { display: block; width: 100%; height: 28px; color: var(--c-marino-900); }

main { padding-bottom: var(--e-8); }

/* Ficha del producto */
.ficha { display: grid; gap: var(--e-6); grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; padding-top: var(--e-5); }
.galeria { display: grid; gap: var(--e-3); }
.galeria-principal {
  position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in;
  background: var(--c-blanco); border-radius: var(--r-tarjeta); overflow: hidden; box-shadow: var(--sombra);
  aspect-ratio: 4 / 5;
}
.galeria-principal img { width: 100%; height: 100%; object-fit: contain; }
.galeria-principal .lupa {
  position: absolute; right: var(--e-3); bottom: var(--e-3); padding: var(--e-1) var(--e-3);
  border-radius: var(--r-pildora); background: rgba(1, 35, 64, .82); color: var(--c-blanco); font-size: var(--t-xs);
}
.miniaturas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--e-2); }
.miniatura { padding: 0; border: 2px solid transparent; border-radius: var(--r-campo); overflow: hidden; background: var(--c-blanco); cursor: pointer; aspect-ratio: 1; }
.miniatura img { width: 100%; height: 100%; object-fit: cover; }
.miniatura[aria-current="true"] { border-color: var(--c-azul-500); }
.sin-foto { display: grid; place-items: center; aspect-ratio: 4/5; background: var(--c-gris-100); border-radius: var(--r-tarjeta); color: var(--c-gris-500); }

.compra { background: var(--c-blanco); border-radius: var(--r-tarjeta); box-shadow: var(--sombra); padding: var(--e-6); position: sticky; top: 88px; }
.compra h1 { margin-bottom: var(--e-4); }
.precio { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--e-2); margin: 0 0 var(--e-2); }
.precio-valor { font: 900 2.25rem/1 var(--f-titulo); color: var(--c-marino-700); }
.precio-iva { font: 700 var(--t-lg)/1 var(--f-titulo); color: var(--c-marino-700); }
.precio-nota { margin: 0 0 var(--e-5); color: var(--c-gris-500); font-size: var(--t-sm); }
.descripcion { margin: 0 0 var(--e-5); max-width: 62ch; }
.descripcion p { margin: 0 0 var(--e-3); }

.cantidad { display: inline-flex; align-items: stretch; border: 1px solid var(--c-gris-300); border-radius: var(--r-pildora); overflow: hidden; background: var(--c-blanco); }
.cantidad button { width: 44px; border: 0; background: var(--c-gris-100); color: var(--c-marino-900); font: 700 1.25rem/1 var(--f-titulo); cursor: pointer; }
.cantidad button:hover { background: var(--c-gris-300); }
.cantidad input { width: 72px; min-height: 44px; border: 0; border-radius: 0; text-align: center; font-weight: 700; -moz-appearance: textfield; }
.cantidad input::-webkit-outer-spin-button, .cantidad input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fila-compra { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; margin-bottom: var(--e-5); }
.fila-compra .btn-accion { flex: 1 1 200px; }

.condiciones { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e-3); border-top: 1px solid var(--c-gris-300); padding-top: var(--e-4); font-size: var(--t-sm); }
.condiciones li { display: grid; grid-template-columns: 28px 1fr; gap: var(--e-2); align-items: start; }
.condiciones svg { width: 22px; height: 22px; color: var(--c-azul-500); }
.condiciones strong { color: var(--c-marino-900); }

/* Lightbox */
.visor { position: fixed; inset: 0; z-index: 50; background: rgba(1, 35, 64, .94); display: none; align-items: center; justify-content: center; padding: var(--e-5); }
.visor.abierto { display: flex; }
.visor img { max-height: 88vh; max-width: min(92vw, 1100px); width: auto; border-radius: var(--r-campo); background: var(--c-blanco); }
.visor button { position: absolute; border: 0; border-radius: var(--r-pildora); background: var(--c-blanco); color: var(--c-marino-900); width: 48px; height: 48px; font: 700 1.5rem/1 var(--f-titulo); cursor: pointer; }
.visor .cerrar { top: var(--e-4); right: var(--e-4); }
.visor .ant { left: var(--e-4); top: 50%; transform: translateY(-50%); }
.visor .sig { right: var(--e-4); top: 50%; transform: translateY(-50%); }
.visor .contador { position: absolute; bottom: var(--e-4); left: 50%; transform: translateX(-50%); color: var(--c-blanco); font-size: var(--t-sm); }

/* Carrito y pedido */
.pagina { padding-top: var(--e-5); }
.pasos { display: flex; gap: var(--e-2); list-style: none; padding: 0; margin: 0 0 var(--e-5); font-size: var(--t-sm); color: var(--c-gris-500); flex-wrap: wrap; }
.pasos li[aria-current="step"] { color: var(--c-marino-900); font-weight: 700; }
.pasos li + li::before { content: "›"; margin-right: var(--e-2); color: var(--c-gris-300); }
.dos-columnas { display: grid; gap: var(--e-5); grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); align-items: start; }
.tarjeta { background: var(--c-blanco); border-radius: var(--r-tarjeta); box-shadow: var(--sombra); padding: var(--e-5); }
.tarjeta + .tarjeta { margin-top: var(--e-4); }
.linea-carrito { display: grid; grid-template-columns: 88px 1fr auto; gap: var(--e-4); align-items: center; padding: var(--e-4) 0; border-bottom: 1px solid var(--c-gris-100); }
.linea-carrito:last-child { border-bottom: 0; }
.linea-carrito img { width: 88px; height: 88px; object-fit: cover; border-radius: var(--r-campo); background: var(--c-gris-100); }
.linea-carrito h3 { font-size: var(--t-md); margin-bottom: var(--e-1); }
.linea-acciones { display: flex; gap: var(--e-2); align-items: center; flex-wrap: wrap; margin-top: var(--e-2); }
.linea-total { font: 700 var(--t-md)/1.2 var(--f-titulo); color: var(--c-marino-900); text-align: right; }
.resumen dl { display: grid; grid-template-columns: 1fr auto; gap: var(--e-2) var(--e-4); margin: 0 0 var(--e-4); }
.resumen dl > div { display: contents; }
.resumen dt { color: var(--c-gris-500); }
.resumen dd { margin: 0; text-align: right; font-weight: 500; }
.resumen .total dt, .resumen .total dd { color: var(--c-marino-900); font: 900 var(--t-lg)/1.2 var(--f-titulo); padding-top: var(--e-2); border-top: 1px solid var(--c-gris-300); }
.resumen .entrega dd { color: var(--c-alerta); font-weight: 700; }
.enlace-secundario { text-align: center; margin: var(--e-3) 0 0; }
.vacio { text-align: center; padding: var(--e-7) var(--e-4); }

fieldset { border: 0; padding: 0; margin: 0 0 var(--e-5); min-width: 0; }
legend { font: 900 var(--t-lg)/1.2 var(--f-titulo); color: var(--c-marino-900); margin-bottom: var(--e-4); padding: 0; }
.rejilla { display: grid; gap: 0 var(--e-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rejilla .ancho { grid-column: 1 / -1; }
.trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
#bloque-factura[hidden] { display: none; }
.nota-final { font-size: var(--t-sm); color: var(--c-marino-900); }

.confirmacion { max-width: 720px; margin: 0 auto; }
.codigo-pedido { font: 900 clamp(1.6rem, 6vw, 2.4rem)/1.1 var(--f-titulo); color: var(--c-marino-700); letter-spacing: 0.04em; margin: var(--e-2) 0 var(--e-4); word-break: break-all; }
.check-ok { width: 56px; height: 56px; color: var(--c-exito); }
.version-legal { margin: 0 0 var(--e-5); color: var(--c-gris-500); font-size: var(--t-sm); }
.texto-legal { max-width: 72ch; }
.texto-legal h2 { font-size: var(--t-lg); margin: var(--e-6) 0 var(--e-2); }
.texto-legal p { margin: 0 0 var(--e-3); }
.texto-legal ul { margin: 0 0 var(--e-3); padding-left: var(--e-5); }
.texto-legal li { margin-bottom: var(--e-1); }

.pie { background: var(--c-marino-900); color: #c9d6e3; padding: var(--e-6) 0; font-size: var(--t-sm); }
.pie a { color: var(--c-blanco); }
.pie .contenedor { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-4); }

@media (max-width: 860px) {
  .ficha, .dos-columnas { grid-template-columns: 1fr; }
  .compra { position: static; padding: var(--e-5); }
  .resumen-primero { order: -1; }
}
@media (max-width: 560px) {
  .rejilla { grid-template-columns: 1fr; }
  .linea-carrito { grid-template-columns: 64px 1fr; }
  .linea-carrito img { width: 64px; height: 64px; }
  .linea-total { grid-column: 2; text-align: left; }
  .marca-sub { display: none; }
  .precio-valor { font-size: 2rem; }
  .tarjeta { padding: var(--e-4); }
}