/* =====================================================================
   RV25 Relojería · PÁGINA DE UNA MARCA (marcas/<marca>/)
   ---------------------------------------------------------------------
   La arma herramientas/modulos/paginas-marcas.ps1. De arriba a abajo:
     .marca-portada   antetítulo, "Relojes <marca> originales en
                      Colombia", presentación y tres datos
     .marca-relojes   sus relojes (tarjetas del catálogo)
     .marca-pedido    "¿Buscas otra referencia?" + WhatsApp
     .marca-faq       tres preguntas (estilos de css/secciones/ayuda.css)
     .marca-otras     enlaces a las otras marcas
   También usa .ayuda-antetitulo, .ayuda-titulo y .ayuda-intro.
   ===================================================================== */

.pagina-marca main { padding-top: 64px; }

.marca-portada {
  padding: calc(var(--seccion) * .8) max(var(--margen), calc((100% - var(--ancho)) / 2)) 48px;
}
.marca-portada .ayuda-portada-titulo {
  margin-top: 14px;
  font: 400 clamp(38px, 9vw, 80px)/1.02 var(--titulo); letter-spacing: -0.03em;
  text-wrap: balance;
}
.marca-portada .ayuda-intro { max-width: 40em; font-size: 18px; }

.marca-datos {
  display: flex; flex-wrap: wrap; gap: 12px 40px;
  margin: 32px 0 0; padding: 24px 0 0; list-style: none;
  border-top: 1px solid var(--arena-2);
}
.marca-datos li { display: grid; gap: 4px; font-size: 14px; color: var(--tinta-suave); }
.marca-datos strong { font: 400 30px/1 var(--titulo); color: var(--tinta); }

.marca-relojes {
  display: grid; gap: 28px;
  padding: 0 max(var(--margen), calc((100% - var(--ancho)) / 2)) var(--seccion);
}

.marca-pedido {
  display: grid; justify-items: start; gap: 18px;
  padding: var(--seccion) max(var(--margen), calc((100% - var(--ancho)) / 2));
  background: var(--arena);
}
.marca-pedido .ayuda-intro { margin-top: 0; max-width: 36em; }

.marca-otras {
  padding: 48px max(var(--margen), calc((100% - var(--ancho)) / 2)) var(--seccion);
  border-top: 1px solid var(--arena-2);
}
.marca-otras ul { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 16px 0 0; padding: 0; list-style: none; }
.marca-otras a {
  font: 400 22px/1.2 var(--titulo); color: var(--tinta);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
}
.marca-otras a:hover { color: var(--acento-texto); }