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

:root {
  --font: "Inter", system-ui, sans-serif;
  --font-display: "DM Serif Display", Georgia, serif;
  --bg: #ffffff;
  --bg-subtle: #f7f8fa;
  --text-primary: #111318;
  --text-secondary: #2d3240;
  --text-muted: #5b6375;
  --border: #dde1e9;
  --accent: #b8391c;
  --accent-hover: color-mix(in srgb, var(--accent) 82%, black);
  --accent-light: color-mix(in srgb, var(--accent) 12%, white);
  --radius: 8px;
  --max-w: 960px;
}

[data-theme="dark"] {
  --bg: #161b26;
  --bg-subtle: #1d2333;
  --text-primary: #edf0f7;
  --text-secondary: #9ba3b8;
  --text-muted: #8a91a4;
  --border: #252d3f;
  --accent: #d94f2e;
  --accent-hover: color-mix(in srgb, var(--accent) 82%, white);
  --accent-light: color-mix(in srgb, var(--accent) 18%, black);
}

body {
  transition:
    background 0.2s,
    color 0.2s;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text-primary);
  line-height: 1.6;
  font-size: 1rem;
}

/* NAV */
.site-nav {
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 100;
  transition: background 0.2s;
}
.site-nav-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-nav-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.95rem;
}
.site-logo-img {
  height: 32px;
  width: auto;
  object-fit: contain;
}
.site-logo-placeholder {
  width: 32px;
  height: 32px;
  background: var(--accent);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.site-nav-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.site-nav-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 6px;
  transition:
    color 150ms,
    background 150ms;
}
.site-nav-icon-btn:hover {
  color: var(--text-primary);
  background: var(--bg-subtle);
}
.site-nav-links {
  display: flex;
  gap: 0.25rem;
}
.site-nav-toggle {
  display: none;
}
.site-nav-link {
  padding: 0.375rem 0.75rem;
  border-radius: 6px;
  text-decoration: none;
  color: var(--text-muted);
  font-size: 0.875rem;
  font-weight: 500;
  transition:
    color 150ms,
    background 150ms;
}
.site-nav-link:hover {
  color: var(--text-primary);
  background: var(--bg-subtle);
}
.site-nav-link.active {
  color: var(--accent);
}

/* HERO */
.site-hero {
  min-height: calc(100dvh - 56px);
  display: flex;
  align-items: center;
  padding: 4rem 1.5rem;
}
.site-hero-compact {
  min-height: auto;
  padding: 6rem 1.5rem;
}
.site-hero-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  width: 100%;
}
.site-hero-inner h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.15;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}
.site-hero-subtitle {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: var(--text-muted);
  margin-bottom: 0.75rem;
  max-width: 60ch;
}
.site-hero-desc {
  color: var(--text-muted);
  max-width: 55ch;
  margin-bottom: 2rem;
}
.site-hero-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* HERO GAME ("Pedido a pedido", web/game/) — only when hero_game is on.
   The canvas sits under the hero text; a veil in --bg keeps the text legible
   while the demo plays. Playing hides the text and hands the canvas the
   pointer. Everything is scoped to .site-hero-game. */
.site-hero-game {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.site-hero-game.site-hero-compact {
  min-height: 560px;
}
.hero-game-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  pointer-events: none;
}
.site-hero-game::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    var(--bg) 0%,
    color-mix(in srgb, var(--bg) 88%, transparent) 40%,
    color-mix(in srgb, var(--bg) 0%, transparent) 72%
  );
}
.site-hero-game .site-hero-inner {
  position: relative;
}
/* The overlays below set display, which would beat the hidden attribute. */
.site-hero-game [hidden] {
  display: none;
}
.hero-game-hud {
  position: absolute;
  top: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.4rem 0.5rem 0.4rem 1rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.9rem;
  white-space: nowrap;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.hero-game-pause {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  padding: 0.35rem 0.75rem;
  font: inherit;
  font-size: 0.8rem;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
}
.site-hero-game.is-playing .hero-game-pause {
  display: none;
}
.hero-game-hud:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.hero-game-lives {
  color: #dc2626;
  letter-spacing: 0.1em;
}
.hero-game-hud .site-btn-ghost {
  padding: 0.3rem 0.8rem;
}
.hero-game-hint {
  position: absolute;
  top: 4.25rem;
  left: 50%;
  transform: translateX(-50%);
  width: min(90%, 44ch);
  text-align: center;
  padding: 0.5rem 0.9rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.9rem;
  color: var(--text-muted);
}
.hero-game-over {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(90%, 26rem);
  padding: 1.5rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
  box-shadow: 0 12px 40px rgb(0 0 0 / 0.18);
}
.hero-game-over-text {
  font-family: var(--font-display);
  font-size: 1.35rem;
  margin-bottom: 1rem;
}
.hero-game-over .site-hero-actions {
  justify-content: center;
}
.site-hero-game.is-playing {
  min-height: max(560px, calc(100dvh - 56px));
}
.site-hero-game.is-playing::before,
.site-hero-game.is-playing .site-hero-inner {
  visibility: hidden;
}
.site-hero-game.is-playing .hero-game-canvas {
  pointer-events: auto;
  touch-action: none;
  cursor: grab;
}
@media (max-width: 719px) {
  /* Narrow: the hero text spans the width, so the veil covers it all. */
  .site-hero-game::before {
    background: color-mix(in srgb, var(--bg) 84%, transparent);
  }
  .hero-game-hud {
    gap: 0.6rem;
    font-size: 0.85rem;
  }
}

/* INTERIOR PAGES */
.site-page {
  padding: 4rem 1.5rem;
}
.site-page-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}
.site-page-inner h1 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  margin-bottom: 0.75rem;
  letter-spacing: -0.02em;
}
.site-page-subtitle {
  font-size: 1.125rem;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
  max-width: 60ch;
}
.site-page-body {
  max-width: 68ch;
  color: var(--text-secondary);
  line-height: 1.8;
}
.site-page-desc {
  color: var(--text-muted);
  margin-bottom: 2rem;
  max-width: 55ch;
}

/* LEGAL PAGES (aviso legal, condiciones, privacidad, cookies) — long-form
   text, so it gets prose spacing; the global reset would otherwise run every
   heading and list together. */
.legal-doc {
  max-width: 72ch;
  margin-inline: auto;
  color: var(--text-secondary);
  line-height: 1.7;
}
.legal-doc h2 {
  font-size: 1.25rem;
  color: var(--text-primary);
  margin: 2rem 0 0.75rem;
}
.legal-doc h3 {
  font-size: 1.05rem;
  color: var(--text-primary);
  margin: 1.5rem 0 0.5rem;
}
.legal-doc p,
.legal-doc ul,
.legal-doc ol {
  margin-bottom: 0.9rem;
}
.legal-doc ul,
.legal-doc ol {
  padding-left: 1.25rem;
}
.legal-doc li {
  margin-bottom: 0.35rem;
}
.legal-doc a {
  color: var(--accent);
}
.legal-doc code {
  font-size: 0.9em;
}
.legal-shipping {
  white-space: pre-line;
  margin-bottom: 0.9rem;
}
.legal-form {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-subtle);
  padding: 1rem 1.25rem;
  margin: 1.25rem 0;
}
.legal-updated {
  margin-top: 2.5rem;
  font-size: 0.875rem;
  color: var(--text-muted);
}

/* Checkout and contact form: terms acceptance + first-layer privacy notice
   (LOPDGDD art. 11 lets the form carry the basics and link the rest). */
.checkout-accept {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
/* Specific enough to beat `.site-contact-form input`, which pads every input
   like a text field. */
.site-contact-form .checkout-accept input[type="checkbox"] {
  width: auto;
  flex: none;
  padding: 0;
  margin: 0.2rem 0 0;
}
.checkout-accept span {
  flex: 1;
  min-width: 0;
}
.checkout-accept a,
.form-privacy-note a {
  color: var(--accent);
}
.form-privacy-note {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.checkout-shipping summary {
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 0.9rem;
}
.checkout-shipping .legal-shipping {
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* Contact page business info (address / phone / hours) — driven by the
   biz_* config fields, shown above the form when present. */
.site-contact-info {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  margin: 1.5rem 0 2rem;
}
.site-contact-info-item {
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}
.site-contact-info-item strong {
  color: var(--text-primary);
}
.site-contact-info-item a {
  color: var(--accent);
}

/* RENDERED MARKDOWN (page bodies + blog posts) — the *_html fields and blog
   contentHtml go through the same marked+sanitize pipeline, so both share these
   prose styles. Without them the global reset zeroes all margins and headings/
   lists render flat ("looks like plain text"). */
.site-page-body > :first-child,
.site-post-body > :first-child {
  margin-top: 0;
}
.site-page-body p,
.site-post-body p {
  margin: 0 0 1.15rem;
}
.site-page-body h2,
.site-post-body h2 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 2.25rem 0 0.85rem;
}
.site-page-body h3,
.site-post-body h3 {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 1.75rem 0 0.6rem;
}
.site-page-body h4,
.site-post-body h4 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 1.4rem 0 0.5rem;
}
/* An inline image in a post body (a product guide's product photo, bare or
   inside its link): never wider than the column, aspect ratio kept. Scoped to
   images marked wraps in a <p>, so the infographic <figure> keeps its own
   layout. */
.site-post-body p img {
  display: block;
  max-width: 100%;
  height: auto;
}
/* A guide's buy button (src/content/guide-buttons.js). `.site-post-body a`
   colours and underlines every body link and outranks `.site-btn`, which
   would paint the button's text in its own background colour. */
.site-post-body a.guide-buy {
  margin: 0.25rem 0 0.5rem;
  text-decoration: none;
}
.site-post-body a.guide-buy.site-btn {
  color: #fff;
}
.site-post-body a.guide-buy.site-btn-ghost {
  color: var(--text-primary);
}
/* A product guide's product block, on a desktop column: the photo and the
   buy button under it sit in a 320px column on the left and the «Lo mejor» /
   «A tener en cuenta» paragraphs flow to its right, instead of a 320px photo
   with the rest of a 960px column empty. The body is customer HTML with no
   wrapper per product, so the layout hangs off the shape the agent writes
   (a photo paragraph followed by the button paragraph) and nothing else: a
   hand-written post with a photo in a paragraph keeps its stacked layout. The
   next heading clears the floats so each product starts on its own row.
   `:has()` is supported in every current browser; one without it keeps the
   stacked layout, which is the mobile one. */
@media (min-width: 769px) {
  .site-post-body p:has(> a > img):has(+ p > a.guide-buy) {
    float: left;
    clear: left;
    width: 320px;
    margin: 0 1.75rem 0.75rem 0;
  }
  .site-post-body p:has(> a > img) + p:has(> a.guide-buy) {
    float: left;
    clear: left;
    width: 320px;
    margin: 0 1.75rem 1rem 0;
  }
  .site-post-body h2,
  .site-post-body h3,
  .site-post-body h4,
  .site-post-body .table-scroll,
  .site-post-body figure {
    clear: both;
  }
  .site-post-body {
    display: flow-root;
  }
}
.site-page-body ul,
.site-page-body ol,
.site-post-body ul,
.site-post-body ol {
  margin: 0 0 1.15rem;
  padding-left: 1.4rem;
}
.site-page-body li,
.site-post-body li {
  margin-bottom: 0.4rem;
}
.site-page-body a,
.site-post-body a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.site-page-body strong,
.site-post-body strong {
  color: var(--text-primary);
  font-weight: 600;
}
.site-page-body blockquote,
.site-post-body blockquote {
  margin: 0 0 1.15rem;
  padding-left: 1rem;
  border-left: 3px solid var(--border);
  color: var(--text-muted);
}
/* Infographics inserted into article bodies by the Infographic Engineer
   agent — either code-drawn SVG (inherits currentColor, so `color` here is
   what themes it) or a Muse-generated raster <img> (carries its own colours
   baked in; the raster case gets no dark-mode adaptation, only sizing). */
.site-page-body .article-infographic,
.site-post-body .article-infographic {
  margin: 1.75rem 0;
  padding: 0;
  color: var(--text-primary);
}
.site-page-body .article-infographic svg,
.site-post-body .article-infographic svg,
.site-page-body .article-infographic img,
.site-post-body .article-infographic img {
  display: block;
  width: 100%;
  height: auto;
}
.site-page-body .article-infographic figcaption,
.site-post-body .article-infographic figcaption {
  margin-top: 0.6rem;
  font-size: 0.875rem;
  color: var(--text-muted);
  text-align: center;
}

/* Infografia poster: lamina ilustrada + capa de datos en SVG.
   El <img> es el arte generado (sin una sola letra dentro) y el <svg> encima
   lleva TODO el texto, que asi sigue siendo nitido, indexable y traducible.
   Las dos capas comparten viewBox y relacion de aspecto.

   height:auto, NUNCA height:100%: con inset:0 el SVG se estiraria tambien
   sobre el <figcaption>, el viewBox haria letterbox y cada etiqueta caeria
   ~32px por debajo del dibujo al que pertenece. Con width:100% el SVG toma su
   altura de su propio viewBox y las dos capas casan al pixel.

   La regla generica de arriba pone width:100%/height:auto a CUALQUIER svg o
   img dentro de .article-infographic, asi que aqui hace falta mas
   especificidad para que el svg quede absoluto. */
.article-infographic--poster {
  position: relative;
}
.site-page-body .article-infographic--poster > img,
.site-post-body .article-infographic--poster > img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  border-radius: var(--radius);
}
.site-page-body .article-infographic--poster > svg,
.site-post-body .article-infographic--poster > svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  font-family: var(--font);
}

/* Ampliar una infografia.
   El agente dibuja siempre en un lienzo de 800 unidades, asi que el grafico se
   lee bien en la columna de escritorio y se queda pequenio en un movil. En vez
   de estropear el dibujo por el extremo pequenio, el grafico se ajusta siempre
   al ancho y el lector lo abre a pantalla completa. El boton lo inyecta
   web/site.js en tiempo de ejecucion: NO va en el `content` del articulo,
   porque el saneador (src/content/format-content.js) solo deja pasar una lista
   corta de etiquetas y un <button> no esta en ella. Sin JS no hay boton y el
   grafico simplemente se ve ajustado, como antes. */
.article-infographic.has-zoom {
  position: relative;
}
.infographic-zoom {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.6rem auto 0;
  padding: 0.4rem 0.9rem;
  font: inherit;
  font-size: 0.875rem;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}
.article-infographic.has-zoom {
  text-align: center;
}
.infographic-zoom:hover,
.infographic-zoom:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
}
.infographic-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}
.infographic-lightbox__bar {
  display: flex;
  justify-content: flex-end;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
}
.infographic-lightbox__close {
  font: inherit;
  padding: 0.4rem 0.9rem;
  color: var(--text-primary);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}
/* El grafico se mantiene a un ancho legible y la superficie se desplaza, para
   que en un movil se vea de verdad en vez de como una miniatura. */
.infographic-lightbox__surface {
  flex: 1;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1rem;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

/* Una infografia poster son DOS nodos (lamina + capa de datos). El visor
   clonaba solo el primero, asi que "Ampliar" abria el dibujo sin una sola
   cifra y nada parecia roto. Aqui se reconstruye el apilado. */
.infographic-lightbox__stack {
  position: relative;
  width: 100%;
}
.infographic-lightbox__stack > img {
  display: block;
  width: 100%;
  height: auto;
}
.infographic-lightbox__stack > svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}
.infographic-lightbox__surface > svg,
.infographic-lightbox__surface > img {
  width: 100%;
  min-width: 900px;
  max-width: 1400px;
  height: auto;
}
body.infographic-lightbox-open {
  overflow: hidden;
}
/* El wrapper lo genera el build (lib/table-scroll.mjs), no se escribe a mano.
   Una tabla no baja de su min-content, asi que una tabla ancha en el cuerpo de
   un articulo no encogia: empujaba el documento entero fuera de la pantalla en
   movil. Aqui el desbordamiento se queda dentro de la tabla.

   Acotado a .site-page-body / .site-post-body a proposito: ahi vive el HTML
   arbitrario que escribe el cliente. El transform envuelve tambien .cart-table
   y .product-specs, pero esos wrappers se quedan sin estilos — inertes, sin
   margen ni altura, para no romper el `hidden` del carrito vacio. */
.site-page-body .table-scroll,
.site-post-body .table-scroll {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 1.15rem;

  /* Degradado de borde: avisa de que quedan columnas fuera de vista. En iOS la
     barra de scroll es overlay y no aparece hasta DESPUES de deslizar, asi que
     no sirve de aviso. Sin JS: las dos capas "tapa" van en `local` (se
     desplazan con el contenido) y las de sombra en `scroll` (fijas). Si la
     tabla cabe entera no hay desplazamiento, las tapas no se mueven y no se ve
     nada — por eso no hace falta acotarlo por media query.

     La tapa DEBE ser el color de fondo real que hay detras (body usa --bg). */
  --table-fade: rgba(0, 0, 0, 0.16);
  background-image:
    linear-gradient(to right, var(--bg) 40%, transparent),
    linear-gradient(to left, var(--bg) 40%, transparent),
    radial-gradient(farthest-side at 0 50%, var(--table-fade), transparent),
    radial-gradient(farthest-side at 100% 50%, var(--table-fade), transparent);
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 32px 100%, 32px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}

/* Sobre fondo oscuro una sombra negra no se ve: se invierte a luz. */
[data-theme="dark"] .site-page-body .table-scroll,
[data-theme="dark"] .site-post-body .table-scroll {
  --table-fade: rgba(255, 255, 255, 0.14);
}

/* La region es desplazable, asi que tiene que alcanzarse con teclado
   (WCAG 2.1.1). El transform le pone tabindex="0"; esto le da foco visible. */
.site-page-body .table-scroll:focus-visible,
.site-post-body .table-scroll:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.site-page-body table,
.site-post-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.15rem;
  font-size: 0.9375rem;
}

/* El margen inferior lo lleva ya el wrapper. */
.site-page-body .table-scroll > table,
.site-post-body .table-scroll > table {
  margin-bottom: 0;
}
.site-page-body th,
.site-page-body td,
.site-post-body th,
.site-post-body td {
  border: 1px solid var(--border);
  padding: 0.5rem 0.75rem;
  text-align: left;
}

/* BUTTONS */
.site-btn {
  display: inline-block;
  padding: 0.625rem 1.25rem;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background 150ms;
}
.site-btn:hover {
  background: var(--accent-hover);
}
.site-btn-ghost {
  display: inline-block;
  padding: 0.625rem 1.25rem;
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition:
    border-color 150ms,
    color 150ms;
}
.site-btn-ghost:hover {
  border-color: var(--text-muted);
}

/* CONSTRUCTION */
.construction-wrap {
  min-height: calc(100dvh - 56px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
}
.construction-icon {
  font-size: 3rem;
  margin-bottom: 1.5rem;
}
.construction-wrap h1 {
  font-family: var(--font-display);
  font-size: 1.75rem;
  margin-bottom: 0.75rem;
}
.construction-wrap p {
  color: var(--text-muted);
  margin-bottom: 2rem;
}

/* BLOG */
.site-post-card {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--border);
}
.site-post-card:last-child {
  border-bottom: none;
}
.site-post-card h2,
.site-post-card h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.site-post-card h2 a,
.site-post-card h3 a {
  text-decoration: none;
  color: var(--text-primary);
}
.site-post-card h2 a:hover,
.site-post-card h3 a:hover {
  color: var(--accent);
}
.site-post-card p {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}
.site-post-date {
  font-size: 0.875rem;
  color: var(--text-muted);
}
.site-post-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.site-post-badge {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--accent);
  background: var(--accent-light);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
}
.site-post-cta {
  display: inline-block;
  margin-top: 2rem;
}
.site-post-summary {
  font-size: 1.125rem;
  color: var(--text-secondary);
  border-left: 3px solid var(--accent);
  padding-left: 1rem;
  margin: 1rem 0 1.5rem;
}
.site-post-toc {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin: 0 0 2rem;
}
.site-post-toc-title {
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.site-post-toc ol {
  list-style: decimal;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.site-post-toc-sub {
  list-style: none;
  margin-left: 1rem;
}
.site-post-toc a {
  color: var(--text-secondary);
  text-decoration: none;
}
.site-post-toc a:hover {
  color: var(--accent);
}
.site-related-posts {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.site-related-posts h2 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
}
.site-related-posts ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.site-related-posts a {
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 500;
}
.site-related-posts a:hover {
  color: var(--accent);
}

/* AI-generated / uploaded imagery — blog covers, index/page hero images and
   blog-card thumbnails. All served as optimized WebP from /uploads and
   lazy-loaded. Widths are fluid (max 100%) so pages stay responsive. */
.site-post-cover,
.site-page-image {
  display: block;
  width: 100%;
  height: auto;
  margin: 1.75rem 0;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.site-page-image {
  max-width: 68ch;
}
.site-post-card-media {
  display: block;
  margin-bottom: 0.9rem;
}
.site-post-card-media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.site-empty,
.site-loading {
  color: var(--text-muted);
  padding: 2rem 0;
}

/* CONTACT FORM */
.site-contact-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 480px;
  margin-top: 1.5rem;
}
/* display:flex above outranks the UA's [hidden] rule, so a form the scripts
   hide (B2B sign-in once signed in, checkout on an empty cart) stayed visible. */
.site-contact-form[hidden] {
  display: none;
}
.site-contact-form input,
.site-contact-form textarea {
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  /* 16px or more: iOS Safari zooms the page into any field smaller than that
     on focus, and does not zoom back out. Same on every public field below. */
  font-size: 1rem;
  font-family: var(--font);
  color: var(--text-primary);
  background: var(--bg);
  outline: none;
  transition:
    border-color 150ms,
    background 0.2s,
    color 0.2s;
}
.site-contact-form input:focus,
.site-contact-form textarea:focus {
  border-color: var(--accent);
}
.site-contact-form textarea {
  resize: vertical;
}

.blog-grid {
  display: grid;
  gap: 1rem;
}
.blog-card {
  margin-bottom: 0;
}

/* PRODUCTOS */
.product-search {
  margin-bottom: 1.5rem;
}
.product-search-input {
  width: 100%;
  max-width: 24rem;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text-primary);
  font-size: 1rem; /* >= 16px, or iOS zooms on focus */
}
.category-pills-wrap {
  margin-bottom: 1.5rem;
}
.category-pills-summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}
.category-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.category-pill {
  display: inline-block;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text-muted);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition:
    border-color 150ms,
    color 150ms,
    background 150ms;
}
.category-pill:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}
.category-pill.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.25rem;
}
.product-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.product-card-image {
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--bg-subtle);
}
.product-card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.product-card-body {
  padding: 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  /* Fill the leftover height of a stretched grid item, so the auto margin on
     the button below has room to push against. Without it the body is only as
     tall as its text and the buttons never line up. */
  flex: 1;
}
.product-card-body h2 {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
}
.product-card-body h2 a {
  text-decoration: none;
  color: var(--text-primary);
}
.b2b-banner {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--bg-subtle);
  padding: 0.875rem 1.125rem;
  margin: 1.5rem 0;
  font-size: 0.9375rem;
}
.b2b-banner a {
  color: var(--accent);
  font-weight: 600;
}
.product-price {
  font-weight: 600;
  color: var(--accent);
}
.price-vat-note {
  display: block;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--text-muted);
}
/* The retail price a signed-in B2B account sees struck through next to its
   trade price. Inserted by web/cart.js (applyB2bPrices), never in the build. */
.product-price-was {
  margin-right: 0.5rem;
  font-weight: 400;
  color: var(--text-muted);
}

/* Bank details shown after a reservation (web/cart.js, renderPayment) */
.checkout-transfer {
  margin: 1rem 0;
  padding: 1rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
/* Scoped under .site-page-body to outrank its paragraph margins: the
   success box carries that class. */
.site-page-body .checkout-transfer p {
  margin: 0;
}
.site-page-body .checkout-transfer p + p {
  margin-top: 0.25rem;
}

/* ÁREA DE PROFESIONALES (/profesionales) */
.b2b-login-error {
  color: var(--accent);
  font-size: 0.9375rem;
}
.b2b-account {
  margin-top: 1.5rem;
}
.b2b-account p {
  margin-top: 1rem;
}
.b2b-logout-btn {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--text-muted);
  text-decoration: underline;
  cursor: pointer;
}
.product-stock-badge.out {
  font-size: 0.875rem;
  color: var(--text-muted);
}
.product-add-btn {
  width: 100%;
  /* auto, not a fixed gap: product names are feed copy and run one to four
     lines, so a fixed margin leaves the buttons at four different heights
     across a row. The flex gap still keeps it off the price. */
  margin-top: auto;
  text-align: center;
}
.product-add-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 2rem;
}
.pager-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}
.pager-status {
  color: var(--text-muted);
  font-size: 0.875rem;
}
.cart-count-badge {
  position: absolute;
  top: 0.125rem;
  right: 0.125rem;
  background: var(--accent);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.15rem 0.35rem;
  border-radius: 999px;
}
.cart-icon-link {
  position: relative;
}

.product-detail {
  display: grid;
  grid-template-columns: minmax(0, 360px) 1fr;
  gap: 2rem;
  align-items: start;
}
.product-detail-image {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.product-detail-image-main {
  background: var(--bg-subtle);
  border-radius: var(--radius);
  aspect-ratio: 1 / 1;
}
.product-detail-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.product-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(3.5rem, 1fr));
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.product-gallery-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0.25rem;
  background: var(--bg-subtle);
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
}
.product-gallery-thumb.is-active {
  border-color: var(--text-muted);
}
.product-gallery-thumb:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 2px;
}

.product-specs {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.9375rem;
}
.product-specs caption {
  text-align: left;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.product-specs th,
.product-specs td {
  text-align: left;
  padding: 0.5rem 0.75rem 0.5rem 0;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.product-specs th {
  font-weight: 400;
  color: var(--text-muted);
  width: 45%;
}

.product-documents {
  margin: 1.5rem 0;
}
.product-documents h2 {
  font-size: 1rem;
  margin: 0 0 0.5rem;
}
.product-documents ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
/* "Aparece en estas guías" on a product page: same list as the documents. */
.product-guides {
  margin: 1.5rem 0;
}
.product-guides h2 {
  font-size: 1rem;
  margin: 0 0 0.5rem;
}
.product-guides ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.product-guides a {
  display: block;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text-primary);
}
.product-guides a:hover {
  background: var(--bg-subtle);
}
/* A category's buying guide(s), under its heading. */
.category-guides {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin: -0.25rem 0 1.25rem;
}
.category-guides a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.category-guides span {
  font-weight: 600;
  color: var(--text-primary);
}
.product-documents a {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text-primary);
}
.product-documents a:hover {
  background: var(--bg-subtle);
}
.product-document-type {
  flex: none;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.125rem 0.375rem;
  border-radius: 3px;
  background: var(--bg-subtle);
  color: var(--text-muted);
}
.product-detail-category {
  display: inline-block;
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}
.product-detail-price {
  display: block;
  font-size: 1.5rem;
  margin: 0.5rem 0;
}
.product-detail-desc {
  margin: 1rem 0;
}
.product-detail-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}
.product-qty-input {
  width: 4rem;
  padding: 0.625rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text-primary);
  font: inherit;
  font-size: 1rem; /* >= 16px, or iOS zooms on focus */
  text-align: center;
}

/* TIENDA — PORTADA DEL CATÁLOGO */
/* Full-bleed band: the hero sits outside .site-page so it can span the viewport
   while its contents stay on the same 960px column as the rest of the page. */
.shop-hero {
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border);
  padding: 3rem 1.5rem 2.5rem;
}
.shop-hero-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}
.shop-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}
.shop-hero-subtitle {
  font-size: 1.0625rem;
  color: var(--text-muted);
  max-width: 52ch;
  margin-bottom: 1.5rem;
}
/* The search is the band's payload, not a footnote to the heading. */
.shop-hero .product-search {
  margin-bottom: 0;
}
.shop-hero .product-search-input {
  max-width: 30rem;
  padding: 0.75rem 1.125rem;
  font-size: 1rem;
}
/* The hero already carries the top spacing for the page. */
.shop-hero + .site-page {
  padding-top: 2rem;
}

#shop-blocks {
  margin: 0 0 1rem;
}
.shop-block {
  margin-bottom: 3rem;
}
.shop-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.125rem;
}
.shop-block-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.shop-block-more {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}
.shop-block-more:hover {
  text-decoration: underline;
}
/* The lead blocks (best sellers, featured) get fewer, larger cards. Without this
   a hand-picked product rendered identically to row 47 of the grid below. */
.product-grid-lg {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
}
.product-grid-lg .product-card-body {
  padding: 1.125rem;
  gap: 0.5rem;
}
.product-grid-lg .product-card-body h2 {
  font-size: 1.0625rem;
}
.product-grid-lg .product-price {
  font-size: 1.125rem;
}
/* New arrivals: one scrollable row, so a long tail does not push the catalogue
   further down the page. */
.product-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(170px, 1fr);
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 0.75rem;
  /* Bleed to the page gutter so the row reads as continuing off-screen. */
  margin-inline: -1.5rem;
  padding-inline: 1.5rem;
}
.product-strip > .product-card {
  scroll-snap-align: start;
}
.product-strip::-webkit-scrollbar {
  height: 6px;
}
.product-strip::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}
/* Category tiles. The first version put the photo behind the label as a
   backdrop; on the real catalogue that failed. Feed photos are busy — many have
   dimensions burned into the image — so at tile size the picture collided with
   the label instead of sitting behind it. Photo on top, label below: the photo
   is legible as a photo and the label is legible as a label.

   Uniform tiles, no promoted lead tile either. A 2x2 lead needs the item count
   to match the column count to avoid stranding one tile alone on a last row,
   and the column count is responsive, so no fixed count ever fit. Equal tiles
   fill at any width. */
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem;
}
.category-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  text-decoration: none;
  color: inherit;
  transition:
    border-color 150ms,
    transform 150ms;
}
.category-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.category-card-image {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--bg-subtle);
}
.category-card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.5rem;
}
.category-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.7rem 0.8rem 0.8rem;
}
.category-card-label {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
}
.category-card-count {
  font-size: 0.875rem;
  color: var(--text-muted);
}
.brand-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.brand-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text-primary);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition:
    border-color 150ms,
    color 150ms;
}
.brand-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.brand-chip-count {
  font-size: 0.875rem;
  color: var(--text-muted);
}
@media (max-width: 600px) {
  .shop-hero {
    padding: 2rem 1.5rem;
  }
  .category-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  }
}

/* CARRITO */
.cart-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
}
.cart-table th,
.cart-table td {
  text-align: left;
  padding: 0.75rem 0.5rem;
  border-bottom: 1px solid var(--border);
}
.cart-table tfoot td {
  font-weight: 700;
}
.cart-table tfoot .price-vat-note {
  display: table-cell;
  font-weight: 400;
  border-bottom: none;
  padding-top: 0;
}
.cart-item-remove {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.875rem;
  text-decoration: underline;
}
.cart-item-qty {
  width: 3.5rem;
  padding: 0.375rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text-primary);
  font: inherit;
  font-size: 1rem; /* >= 16px, or iOS zooms on focus */
  text-align: center;
}

/* FOOTER */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 2rem 1.5rem;
  margin-top: auto;
}
.site-footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.875rem;
  color: var(--text-muted);
}
.site-footer-links {
  display: flex;
  /* Eight links do not fit one row on a phone. Without wrapping they forced
     the whole document to ~589px at a 375px viewport, so every page scrolled
     sideways and the copyright ran off the right edge. The row gap is smaller
     than the column gap so wrapped rows stay tight. */
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
}
.site-footer-links a {
  color: var(--text-muted);
  text-decoration: none;
}
.site-footer-links a:hover {
  color: var(--text-primary);
}
.site-footer-ai {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
.site-footer-ai p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-muted);
}
.site-footer-ai a {
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.site-footer-ai a:hover {
  color: var(--text-primary);
}
.site-footer-credit {
  margin-top: 1rem;
  justify-content: center;
  font-size: 0.875rem;
}
.site-footer-credit p {
  margin: 0;
}
.site-footer-credit a {
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.site-footer-credit a:hover {
  color: var(--text-primary);
}

/* WHATSAPP FLOAT */
.whatsapp-float {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #25d366;
  color: #fff;
  padding: 0.65rem 1.1rem;
  border-radius: 2rem;
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.35);
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.whatsapp-float:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45);
}

/* REVEAL */
.reveal {
  opacity: 0;
  transform: translateY(1.25rem);
  transition:
    opacity 0.5s ease-out,
    transform 0.5s ease-out;
}
.reveal.visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 640px) {
  .site-nav-links {
    display: none;
  }
  .site-footer-inner {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 768px) {
  .site-nav-links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg);
    padding: 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 100;
  }
  .site-nav-links.open {
    display: flex;
  }
  .site-nav-toggle {
    display: flex;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    color: var(--text-primary, #1a1a1a);
  }
  .site-nav {
    position: relative;
  }

  .site-hero {
    padding: 3rem 1rem;
  }
  .site-hero h1,
  .site-hero-inner h1 {
    font-size: clamp(1.6rem, 5vw, 2.5rem);
  }
  .site-hero-actions {
    flex-direction: column;
    gap: 0.75rem;
  }
  .site-hero-actions a {
    width: 100%;
    text-align: center;
  }
  .site-page {
    padding: 2rem 1rem;
  }
  .site-page-inner {
    padding: 0;
  }
  .site-footer-inner {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }

  .blog-grid {
    grid-template-columns: 1fr;
  }
  .blog-card,
  .site-post-card {
    margin-bottom: 1rem;
  }

  .product-detail {
    grid-template-columns: 1fr;
  }

  .contact-form,
  .site-contact-form {
    padding: 1.5rem 1rem;
  }
  .contact-form input,
  .contact-form textarea,
  .site-contact-form input,
  .site-contact-form textarea {
    width: 100%;
    box-sizing: border-box;
  }
}

@media (min-width: 769px) {
  .site-nav-toggle {
    display: none;
  }
}

/* A title's accent word (src/content/accent-word.js, marked *word* by the
   author). The Cálida sheet repaints it with its own accent ink. */
.accent-word {
  color: var(--accent);
}
/* The construction page's icon (site/_includes/icon.njk replaced the emoji,
   which rendered differently on every device). */
.construction-icon svg {
  width: 48px;
  height: 48px;
  color: var(--accent);
}