/*
 * WADDON — tokens de marca, copiados TAL CUAL del producto.
 * Fuente: apps/web/src/app/globals.css. No son una propuesta: es lo que ya
 * está en pantalla en los terminales de los comercios.
 */

:root {
  /* --- El neutro: EL COLOR DE LA WEB ------------------------------------
   * Grafito. Va así a propósito: la web vende a los DOS oficios, y cuando
   * no se sabe cuál es, «pintarlo del azul del bazar sería mentir a media
   * cafetería; pintarlo del carmesí, a medio bazar». */
  --brand: #3b424b;
  --brand-strong: #22262b;
  --brand-soft: #eceef1;
  --on-brand: #ffffff;

  /* El filo de oro de la marca. Con cuentagotas: un borde, un subrayado.
     Nunca un fondo. */
  --oro: #d4af37;

  /* --- Superficies y texto (modo claro) --------------------------------- */
  --bg: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #eef1f6;
  --text: #16202e;
  --text-muted: #5b6a80;
  --danger: #b3261e;
  --danger-soft: #fdeceb;

  /* --- Tipografía -------------------------------------------------------
   * Pila del sistema: carga instantánea, cero dependencias externas. */
  --fuente: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Escala fluida. Ya está en su máximo a partir de 960 px de ancho. */
  --text-xs: clamp(0.7rem, 0.624rem + 0.29vmin, 0.82rem);
  --text-sm: clamp(0.78rem, 0.678rem + 0.39vmin, 0.94rem);
  --text-base: clamp(0.86rem, 0.733rem + 0.48vmin, 1.06rem);
  --text-lg: clamp(1rem, 0.809rem + 0.73vmin, 1.3rem);
  --text-xl: clamp(1.2rem, 0.85rem + 1.33vmin, 1.75rem);
  --text-2xl: clamp(1.5rem, 0.864rem + 2.42vmin, 2.5rem);
}

/* --- El azul del BAZAR. Solo en su sección. ----------------------------- */
[data-oficio='bazar'] {
  --brand: #1560c4;
  --brand-strong: #0f4a99;
  --brand-soft: #e7f0fd;
  --on-brand: #ffffff;
}

/* --- El carmesí de la HOSTELERÍA. Solo en su sección. ------------------- */
[data-oficio='cafeteria'] {
  --brand: #a93226;
  --brand-strong: #8a2620;
  --brand-soft: #fbebe7;
  --on-brand: #ffffff;
}

/* --- Modo oscuro -------------------------------------------------------
 * El producto lo tiene, así que la web también. Sin interruptor: lo que
 * diga el sistema del visitante. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10141b;
    --surface: #1a222e;
    --surface-2: #242e3c;
    --text: #eef2f8;
    --text-muted: #9aa8bd;
    --danger: #f2665c;
    --danger-soft: #3a1917;
  }
  [data-oficio='bazar'] {
    --brand: #5ea0f2;
    --brand-strong: #7db4f7;
    --brand-soft: #1b2a3f;
  }
  [data-oficio='cafeteria'] {
    --brand: #d9705c;
    --brand-strong: #f0a08e;
    --brand-soft: #3a211c;
  }
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--fuente);
  font-size: var(--text-base);
  line-height: 1.45;
  /* Regla dura del producto: nunca scroll horizontal, desde 320 px. */
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

h1,
h2,
h3 {
  line-height: 1.15;
}

/* --- LA CABECERA PEGAJOSA SE DESPEGABA -------------------------------------
 * El `<header>` lleva `position:sticky; top:0` y aun así se iba con el scroll:
 * medido a 360 px de ancho, con `scrollY` a 2000 su `top` era **−2016**. En
 * una portada de 7144 px eso deja sin navegación y sin botón de contacto a
 * quien baja a ver los precios.
 *
 * La causa NO es el `overflow-x:hidden` de aquí arriba. Eso convierte el
 * `body` en contenedor de scroll, que es sospechoso y parece la explicación,
 * pero se midió y no lo es: con `overflow-x:clip` —que no crea contenedor— la
 * cabecera seguía en `top:−2016`.
 *
 * Lo que la rompe es que un sticky solo se pega DENTRO de la caja de su padre,
 * y el padre mide una pantalla: el motor sustituye `<x-dc>` por
 * `#dc-root > .sc-host` y su propio `FULL_PAGE_CSS` les pone `height:100%`
 * (ver `support.js`). O sea, 640 px de caja para 7144 px de contenido: la
 * cabecera se pega 484 px y se va con el padre.
 *
 * Medido con las cuatro combinaciones: solo `clip` → sigue rota; solo esta
 * altura → `top:0` y el padre pasa a medir 7144. Así que se arregla aquí y el
 * `overflow-x:hidden` se queda como estaba, que es la regla dura del producto.
 *
 * `min-height` y no `height` para que una página corta siga llenando la
 * pantalla, que es para lo que estaba el `height:100%`.
 *
 * Va con el `html` delante a propósito: el motor inyecta su CSS en el `<head>`
 * al renderizar, o sea DESPUÉS de esta hoja, así que con la misma
 * especificidad ganaría él. El selector de tipo la sube sin recurrir a
 * `!important`. Si algún día el runtime deja de poner esa altura, esta regla
 * no estorba.
 */
html #dc-root,
html #dc-root > .sc-host {
  height: auto;
  min-height: 100%;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* --- Dónde para el scroll al saltar con un ancla ---------------------------
 * Tiene que ser al menos lo que MIDE la cabecera, o el título al que se salta
 * queda tapado por ella. Antes había un `5rem` (80 px) único para una cabecera
 * que a 320 px mide 199: el título saltado quedaba debajo.
 *
 * Los cortes salen de medir la cabecera en el navegador, no de calcularlos, y
 * se mide en CASTELLANO porque es el idioma de rótulos más largos —«Hablar con
 * nosotros», «Mantenimiento»— y por tanto el que envuelve antes; el inglés y
 * el chino nunca son más altos al mismo ancho.
 *
 *    320 px → 199    400 px → 135    680 px → 108
 *    900 px → 108   1000 px →  63   1280 px →  63
 *
 * Cada valor va por encima de su medida, no justo. Si se añade algo a la
 * cabecera —otro idioma, otro enlace— hay que volver a medir: lo vigila
 * `tests/unit/la-web-publica-habla-tres-idiomas.spec.ts`. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 13rem;
}
@media (min-width: 400px) {
  html {
    scroll-padding-top: 9.5rem;
  }
}
@media (min-width: 680px) {
  html {
    scroll-padding-top: 7.5rem;
  }
}
@media (min-width: 1000px) {
  html {
    scroll-padding-top: 5rem;
  }
}
body {
  margin: 0;
}
h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}
/*
 * EL ORDEN IMPORTA, y aquí estaba al revés.
 *
 * El `--line` claro estaba declarado DESPUÉS del bloque de modo oscuro, y las
 * dos reglas tienen la misma especificidad: gana la última que ve el navegador.
 * Así que en modo oscuro TODOS los bordes de la web salían con el gris claro
 * —tarjetas, tabla de precios, formulario, separadores del pie— sobre fondo
 * oscuro. No rompía nada y por eso no se veía como un fallo: se veía como un
 * diseño con los bordes demasiado marcados.
 *
 * Lo cazaron dos auditorías distintas el mismo día, y ninguna de las dos lo
 * tocó por estar fuera de su encargo. Se arregla poniendo el claro PRIMERO,
 * que es lo que hacen todas las demás variables de este fichero.
 */
:root {
  --line: #d9dee6;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --line: #33404f;
  }
}
a {
  color: inherit;
  text-decoration-color: var(--oro);
  text-underline-offset: 3px;
}
a:hover {
  text-decoration-thickness: 2px;
}
:focus-visible {
  outline: 3px solid var(--oro);
  outline-offset: 3px;
  border-radius: 4px;
}
input,
textarea,
button {
  font: inherit;
  color: inherit;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

[data-oficio='servicios'] {
  --brand: #e8b21a;
  --brand-strong: #7a5200;
  --brand-soft: #fdf4d9;
  --on-brand: #22262b;
}
:root {
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 2px 6px rgba(16, 24, 40, 0.06);
  --nav: #1a222e;
}
@media (prefers-color-scheme: dark) {
  [data-oficio='servicios'] {
    --brand: #f2c94c;
    --brand-strong: #f7d77a;
    --brand-soft: #352c14;
  }
  :root {
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    --nav: #0b0e13;
  }
}