/* site-common.css — estilos compartidos por TODAS las páginas públicas.
 * Se enlaza desde el <helmet> de cada página (junto a cookies.js). Aquí viven:
 *  - el color de texto naranja con contraste suficiente (≥ 4,5:1 sobre el fondo claro),
 *  - el gris de texto atenuado y las etiquetas «tag-outline» con contraste ≥ 4,5:1 también sobre los fondos tintados,
 *  - el menú móvil (botón «hamburguesa»; el comportamiento está en site-chrome.js),
 *  - los avisos de error de los formularios,
 *  - las zonas táctiles de al menos 44 px en móvil.
 * Los tokens del sistema de diseño (_ds/…/styles.css) no se tocan: solo se añade uno nuevo.
 */
:root {
  /* Naranja oscurecido para texto pequeño: 5,3:1 sobre #f3f2f2 (el token --color-accent da 3,0:1). */
  --color-accent-text: #8a5a14;
  /* Rojo de error: 6,6:1 sobre el fondo claro. */
  --color-error: #a12a1a;
  /* Gris de texto atenuado: el del sistema de diseño (#6d6969) da 4,46:1 sobre los fondos tintados (#eee8e1, #eae9e9);
     este, 4,95:1 como mínimo, sigue siendo un paso intermedio de la misma rampa neutra (entre 600 y 700). */
  --color-neutral-600: #666262;
}

.btn-ghost { color: var(--color-accent-text); }
/* Etiquetas con borde (Tour 3D, Vídeo con dron, horas de reserva, filtros…): el borde sigue siendo el dorado de marca,
   el texto usa el naranja oscuro con contraste suficiente (el dorado puro da 3:1 sobre el fondo claro). */
.tag-outline { color: var(--color-accent-text); }
.seg-opt:has(input:checked) { color: var(--color-accent-text); }

/* Los textos pequeños en naranja no bajan de 12 px. */
[style*="font-size:11px"][style*="--color-accent-text"],
[style*="font-size:11.5px"][style*="--color-accent-text"] { font-size: 12.5px !important; }

/* ---------- Errores de formulario ---------- */
.field-error {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-error);
}
.input[aria-invalid="true"],
.seg[aria-invalid="true"] { border-color: var(--color-error); }
.seg[aria-invalid="true"] { outline: 1px solid var(--color-error); }
.req-mark { color: var(--color-error); margin-left: 2px; }
.form-error-summary { font-size: 13.5px; line-height: 1.5; color: var(--color-error); }
.form-note { font-size: 12.5px; color: var(--color-neutral-600); }

/* ---------- Menú: botón «hamburguesa» ---------- */
.site-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
}
.site-burger [data-burger-close] { display: none; }
header[data-menu-open] .site-burger [data-burger-open] { display: none; }
header[data-menu-open] .site-burger [data-burger-close] { display: inline; }
nav[data-site-nav] a[data-nav-contact] { display: none; }

/* Escritorio: una sola fila a partir de 1261 px (el idioma más largo necesita ~1255 px). */
@media (min-width: 1261px) {
  header[data-site-header] { gap: 24px !important; }
  header[data-site-header] nav[data-site-nav] { gap: 18px !important; flex-wrap: nowrap !important; }
}

/* Por debajo (móvil y tablet): cabecera de ~60 px con botón de menú. */
@media (max-width: 1260px) {
  header[data-site-header] {
    padding: 8px 20px !important;
    gap: 12px !important;
    min-height: 60px;
    box-sizing: border-box;
    flex-wrap: wrap !important;
    align-items: center !important;
  }
  header[data-site-header] nav[data-site-nav] { display: none !important; }
  header[data-site-header][data-menu-open] nav[data-site-nav] {
    display: flex !important;
    flex-direction: column;
    flex-wrap: nowrap !important;
    order: 5 !important;
    width: 100% !important;
    margin: 0 !important;
    gap: 0 !important;
    font-size: 18px !important;
    padding-bottom: 8px;
  }
  header[data-site-header] nav[data-site-nav] a {
    display: flex !important;
    align-items: center;
    min-height: 48px;
    border: 0 !important;
    border-top: 1px solid var(--color-divider) !important;
  }
  header[data-site-header] nav[data-site-nav] a[aria-current="page"] {
    font-weight: 600;
    color: var(--color-accent-text) !important;
  }
  header[data-site-header] nav[data-site-nav] a[data-nav-contact] { color: var(--color-accent-text) !important; }
  header[data-site-header] [data-header-actions] {
    margin-left: auto !important;
    padding-left: 0 !important;
    border-left: 0 !important;
    gap: 10px !important;
  }
  header[data-site-header] [data-hide-mobile] { display: none !important; }
  header[data-site-header] [data-header-actions] > span { gap: 2px !important; font-size: 12.5px !important; letter-spacing: .03em !important; }
  header[data-site-header] [data-header-actions] > span a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 5px; }
  header[data-site-header] .site-burger { display: inline-flex; }
}

/* ---------- Zonas táctiles (≥ 44 px) sin agrandar el texto ---------- */
@media (max-width: 860px) {
  footer[data-site-footer] a { display: inline-flex; align-items: center; min-height: 44px; }
  footer[data-site-footer] [data-footer-grid] { grid-template-columns: 1fr 1fr !important; gap: 8px 24px !important; }
  footer[data-site-footer] [data-footer-brand] { grid-column: 1 / -1; }
  footer[data-site-footer] a[data-footer-access] { min-height: 44px; }
}
@media (pointer: coarse) {
  .seg-opt, .input, select.input { min-height: 44px; }
}

/* ---------- Rejillas en una columna (≤ 860 px): sus hijos pueden encogerse en vez de ensanchar la página ---------- */
@media (max-width: 860px) {
  [style*="grid-template-columns"] > * { min-width: 0; }
}

/* ---------- Pantallas muy estrechas (≤ 380 px, p. ej. 320 px) ---------- */
@media (max-width: 380px) {
  /* El selector de opciones (Motivo: Comprar · Vender · Valoración · Colaborar) pasa a dos columnas en vez de salirse de la pantalla. */
  .seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 100%; }
  .seg-opt { justify-content: center; min-width: 0; }
  .seg-opt + .seg-opt { border-left: 0; }
  .seg-opt:nth-child(even) { border-left: 1px solid var(--color-divider); }
  .seg-opt:nth-child(n + 3) { border-top: 1px solid var(--color-divider); }
  /* Cabecera de Vender: el botón «Valorar mi casa» (más largo en català y français) se queda fuera junto al menú y el cambio de idioma;
     la página repite la misma acción en su portada. */
  header[data-site-header] [data-header-actions] > a.btn-primary { display: none; }
  /* Pie: una sola columna (el correo, «aymerichbroker@gmail.com», no cabe en media pantalla de 320 px). */
  footer[data-site-footer] [data-footer-grid] { grid-template-columns: 1fr !important; }
  footer[data-site-footer] a { overflow-wrap: anywhere; min-width: 0; }
}