/* Audio G.R. — Marcas, Productos usados y Contacto */

/* ---------- Selector de marcas ---------- */
.selector-marcas { position: sticky; top: var(--nav-alto-compacto); z-index: 30; background: rgba(var(--superficie-rgb), .94);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--borde-suave); }
.selector-marcas ul { list-style: none; margin: 0; padding: 12px 0; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.selector-marcas ul::-webkit-scrollbar { display: none; }
.selector-marcas a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: var(--r-chip); white-space: nowrap;
  border: 1px solid var(--borde); background: var(--superficie); color: var(--texto); font-weight: 700; font-size: 15px;
  transition: border-color var(--t-rapida) var(--ease), color var(--t-rapida) var(--ease), background-color var(--t-rapida) var(--ease); }
.selector-marcas a:hover { border-color: var(--azul); color: var(--azul); }
.selector-marcas a.is-activa { background: var(--marino); border-color: var(--marino); color: var(--blanco); }

/* ---------- Bloque de marca ---------- */
.marca { scroll-margin-top: calc(var(--nav-alto-compacto) + 72px); }
.marca + .marca { border-top: 1px solid var(--borde-suave); }
.marca__cabeza { display: grid; gap: 16px; margin-bottom: 32px; }
@media (min-width: 1024px) { .marca__cabeza { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 48px; margin-bottom: 40px; } }
.marca__cabeza h2 { font-size: 32px; line-height: 1.1; }
@media (min-width: 1024px) { .marca__cabeza h2 { font-size: 44px; } }
.marca__logo { height: 40px; width: auto; margin-bottom: 8px; }
.marca__desc { color: var(--parrafo); max-width: 60ch; }
.marca__datos { display: flex; flex-wrap: wrap; gap: 8px 32px; margin: 0; }
.marca__datos div { display: grid; gap: 2px; }
.marca__datos dt { font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--tenue); }
.marca__datos dd { margin: 0; font-weight: 600; color: var(--texto); }
.marca__vacio { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 28px;
  border: 1px dashed var(--borde); border-radius: var(--r-card); background: var(--superficie); color: var(--parrafo); }

/* ---------- Insignias y disponibilidad (usados) ---------- */
.insignias { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.insignia { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 6px;
  font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.insignia--usado { background: var(--rojo-ui); color: var(--blanco); }
.tarjeta__foto .insignia { position: absolute; top: 14px; left: 14px; z-index: 1; }
.disponibilidad { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--parrafo); }
.disponibilidad::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--borde-fuerte); }
.disponibilidad--disponible::before { background: var(--whatsapp); }
.disponibilidad--apartado::before { background: var(--estado-apartado); }
.disponibilidad--vendido { color: var(--tenue); }
.disponibilidad--vendido::before { background: var(--tenue); }
.tarjeta--usado .tarjeta__foto img { mix-blend-mode: normal; }
.galeria__principal--foto img { mix-blend-mode: normal; }

.datos-usado { display: grid; gap: 0; margin: 4px 0 0; border-top: 1px solid var(--borde-suave); }
.datos-usado div { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--borde-suave); }
.datos-usado dt { font-weight: 600; color: var(--texto); font-size: 15px; }
.datos-usado dd { margin: 0; color: var(--parrafo); font-size: 15px; }
.datos-usado ul { margin: 0; padding-left: 18px; }
@media (max-width: 479px) { .datos-usado div { grid-template-columns: 1fr; gap: 2px; } }
.ficha__info .frase-wa { margin: 4px 0 0; }

.aviso { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 32px; padding: 14px 18px; border-radius: 14px;
  background: var(--azul-tenue); color: var(--texto); font-size: 15px; }
.aviso svg { width: 20px; height: 20px; flex: none; color: var(--azul); margin-top: 1px; }

/* ---------- Contacto ---------- */
.contacto { display: grid; gap: 32px; }
@media (min-width: 1024px) { .contacto { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; } }
.tarjetas-contacto { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.tarjeta-contacto { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 20px 22px; border-radius: var(--r-card);
  background: var(--superficie); border: 1px solid var(--borde-suave); }
.tarjeta-contacto h3 { font-size: 17px; letter-spacing: -0.01em; margin-bottom: 2px; }
.tarjeta-contacto p, .tarjeta-contacto a:not(.btn) { color: var(--parrafo); font-size: 15px; overflow-wrap: anywhere; }
.tarjeta-contacto a:not(.btn) { color: var(--azul); font-weight: 500; }
.tarjeta-contacto a:not(.btn):hover { text-decoration: underline; text-underline-offset: 4px; }
.tarjeta-contacto--principal { padding: 26px; }
.tarjeta-contacto--principal .btn { margin-top: 14px; }
.contacto > *, .tarjeta-contacto > div { min-width: 0; }
@media (max-width: 479px) {
  .tarjeta-contacto--principal { grid-template-columns: 1fr; gap: 12px; padding: 22px; }
  .tarjeta-contacto--principal .btn { width: 100%; }
}
.tarjeta-contacto__icono { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--azul-tenue); color: var(--azul); }
.tarjeta-contacto__icono svg { width: 22px; height: 22px; }
.tarjeta-contacto__icono--wa { background: var(--whatsapp); color: var(--whatsapp-texto); }

.formulario { display: grid; gap: 18px; padding: 28px; border-radius: var(--r-card); background: var(--superficie); border: 1px solid var(--borde-suave); }
@media (min-width: 1024px) { .formulario { padding: 40px; } }
.formulario h2 { font-size: 24px; line-height: 1.2; }
.formulario__nota { font-size: 14px; color: var(--tenue); margin-top: -10px; }
.control { display: grid; gap: 6px; }
.control label { font-size: 14px; font-weight: 600; color: var(--texto); }
.control .opcional { font-weight: 400; color: var(--tenue); }
.control input, .control textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--borde); border-radius: var(--r-btn);
  background: var(--fondo-pagina); color: var(--texto); font: inherit; font-size: 16px;
  transition: border-color var(--t-rapida) var(--ease), box-shadow var(--t-rapida) var(--ease); }
.control textarea { resize: vertical; min-height: 112px; }
.control input::placeholder, .control textarea::placeholder { color: var(--tenue); opacity: 1; }
.control input:hover, .control textarea:hover { border-color: var(--borde-fuerte); }
.control input:focus, .control textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(var(--azul-rgb), .24); }
.control input[aria-invalid="true"], .control textarea[aria-invalid="true"] { border-color: var(--rojo-ui); }
.formulario__error { color: var(--rojo-ui); font-size: 14px; font-weight: 600; }
.formulario__enviar { justify-self: start; }
@media (max-width: 479px) { .formulario__enviar { justify-self: stretch; } }

.mapa { margin-top: 48px; border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--borde-suave); aspect-ratio: 16 / 7; min-height: 280px; background: var(--superficie); }
.mapa iframe { width: 100%; height: 100%; border: 0; display: block; }