/* Copia sin cambios de project/tokens.css del Design System «Sabores y Brindis»
   (https://claude.ai/artifact/PZEnre9iA7UErqFw1MuMuj, revisión 1791669272-3f26).
   No editar a mano: si cambia el DS, se vuelve a copiar. */
/* Sabores y Brindis — generated from tokens.json */
:root, [data-theme="claro"] {
  --lemon-chiffon: #fff8ca; /* [Marca aprobada] "Fondo de todo": fondo de página, papel de menú, dorso de tarjeta, bordado sobre delantal. Uno de los tres colores permitidos para el logo. */
  --rosewood: #6b0b0c; /* [Marca aprobada] Color de marca: títulos, botón principal, bloque de Producción integral, línea Social, menú móvil abierto. Uno de los tres colores permitidos para el logo. */
  --coffee-bean: #2d120d; /* [Marca aprobada] Texto principal y fondos oscuros: pie de página, hero de /empresas, línea Empresas. Uno de los tres colores permitidos para el logo. */
  --botticelli: #cde3e8; /* [Marca aprobada] Acento fresco: línea Chef en casa, bloque de Degustaciones. Nunca para el logo. Sobre Botticelli, texto en rosewood (9.4:1) o coffee-bean (13:1). */
  --chiffon-soft: #f4eab8; /* [Marca aprobada] Tono de apoyo: fondo secundario (franjas, panel de formulario, testimonios, placeholders) sobre lemon-chiffon. */
  --filete: #e3d49a; /* [Marca aprobada] Tono de apoyo: filetes y bordes de tabla decorativos sobre lemon-chiffon (1.4:1, solo decorativo: no lo uses para separar controles). Como texto, solo sobre rosewood (8.4:1) o coffee-bean (11.8:1). */
  --cafe-suave: #6e4e45; /* [Marca aprobada] Tono de apoyo: texto suave sobre lemon-chiffon (6.9:1) y chiffon-soft (6.1:1); borde de campos de formulario (≥3:1). */
  --surface: var(--lemon-chiffon); /* Fondo de página. Claro: Lemon Chiffon (default de la web); Bordó: Rosewood (portadas, cierres, menú móvil abierto). */
  --surface-alt: var(--chiffon-soft); /* Bloques destacados sobre surface: franjas, panel de formulario, cajas de testimonio. */
  --ink: var(--coffee-bean); /* Texto principal sobre surface y surface-alt (claro 16.2:1 / 14.4:1; bordó 11.6:1 / 16.2:1). */
  --ink-muted: var(--cafe-suave); /* Texto secundario, pie de página y metadatos sobre surface y surface-alt (claro 6.9:1 / 6.1:1; bordó 8.4:1 / 11.8:1). */
  --heading: var(--rosewood); /* Títulos en Cormorant y eyebrows sobre surface y surface-alt (claro 11.6:1 / 10.3:1; bordó 11.6:1 / 16.2:1). */
  --rule: var(--rosewood); /* [Marca aprobada] El filete bordó: borde superior de franjas, paneles y testimonios; arriba de listas de contacto y FAQ. También bordes que separan controles (≥3:1). */
  --line: var(--filete); /* Divisores suaves entre filas (contacto, FAQ, menú) y borde inferior del encabezado. Solo decorativo. */
  --line-on-dark: rgba(255, 248, 202, 0.35); /* [v0.1 aprobada] Divisores entre ítems de Producción integral y del menú sobre rosewood o coffee-bean. Solo decorativo. */
  --brand-fill: var(--rosewood); /* Relleno de marca invertido respecto de surface: botón principal y bloques de encabezado. */
  --on-brand-fill: var(--lemon-chiffon); /* Texto sobre brand-fill (11.6:1 en ambos temas). */
  --action-hover: var(--coffee-bean); /* [v0.1 aprobada] Hover del botón principal (rosewood → coffee-bean, texto lemon-chiffon 16.2:1) y de enlaces. */
  --action-light-hover: var(--botticelli); /* [v0.1 aprobada] Hover del botón claro sobre fondos oscuros (texto rosewood 9.4:1). */
  --focus-ring: var(--coffee-bean); /* [v0.1 aprobada] Anillo de foco: 2px sólido, 3px de separación. Claro: coffee-bean sobre lemon-chiffon 16.2:1; Bordó: lemon-chiffon sobre rosewood 11.6:1. */
  --placeholder-fill: var(--chiffon-soft); /* [v0.1 aprobada] Fondo de contenido pendiente (foto, testimonio, logo de cliente, documento). */
  --placeholder-ink: var(--cafe-suave); /* [v0.1 aprobada] Texto y borde punteado de contenido pendiente, sobre placeholder-fill (6.1:1). */
  --accent: var(--botticelli); /* Acento fresco: Chef en casa y Degustaciones. Con moderación; nunca en el logo. */
  --on-accent: var(--rosewood); /* Texto sobre accent (9.4:1). */
  --line-social: var(--rosewood); /* [Marca aprobada] Color de la línea Social. Texto encima: lemon-chiffon (11.6:1). */
  --line-empresas: var(--coffee-bean); /* [Marca aprobada] Color de la línea Empresas. Texto encima: lemon-chiffon (16.2:1). */
  --line-chef: var(--botticelli); /* [Marca aprobada] Color de la línea Chef en casa. Texto encima: coffee-bean (13:1); título en rosewood (9.4:1). */
}
[data-theme="bordo"] {
  --surface: var(--rosewood);
  --surface-alt: var(--coffee-bean);
  --ink: var(--lemon-chiffon);
  --ink-muted: var(--filete);
  --heading: var(--lemon-chiffon);
  --rule: var(--lemon-chiffon);
  --line: rgba(255, 248, 202, 0.3);
  --brand-fill: var(--lemon-chiffon);
  --on-brand-fill: var(--rosewood);
  --action-hover: var(--coffee-bean);
  --action-light-hover: var(--botticelli);
  --focus-ring: var(--lemon-chiffon);
  --placeholder-fill: var(--chiffon-soft);
  --placeholder-ink: var(--cafe-suave);
  --accent: var(--botticelli);
  --on-accent: var(--rosewood);
  --line-social: var(--rosewood);
  --line-empresas: var(--coffee-bean);
  --line-chef: var(--botticelli);
}
:root {
  --space-1: 4px; /* Entre eyebrow y título chico. */
  --space-2: 8px; /* Entre logo, filete y slogan; gap de íconos; gap de la galería móvil. */
  --space-3: 16px; /* Gutter entre tarjetas en móvil, entre campos y entre fotos de galería. */
  --space-4: 24px; /* Gutter entre tarjetas de servicio en desktop; padding de tarjeta en móvil. */
  --space-5: 40px; /* Margen lateral de página en desktop; padding del panel de formulario. */
  --space-6: 64px; /* Separación entre columnas grandes (hero, contacto, producción). */
  --radius-0: 0; /* [Marca aprobada] Por defecto: botones, campos, tarjetas, paneles y bloques son a escuadra. */
  --radius-plate: 50%; /* [Marca aprobada] Solo círculos: el plato del isotipo, los números de los pasos y las portadas de destacadas. */
  --logo-min-screen: 160px; /* [Marca aprobada] Ancho mínimo del logotipo en pantalla (30 mm impreso). Más chico, usá el isotipo. Única excepción aprobada: el encabezado web (logo-header-h-desktop, logo-header-h-mobile). */
  --logo-header-h-desktop: 48px; /* [Marca aprobada · excepción] Alto del logotipo sin slogan en el encabezado web desktop (≈110px de ancho, por debajo de logo-min-screen). Solo en el encabezado. */
  --logo-header-h-mobile: 38px; /* [Marca aprobada · excepción] Alto del logotipo sin slogan en el encabezado móvil y en el menú móvil abierto (≈87px de ancho). Solo en esos dos lugares. */
  --rule-width: 1px; /* [Marca aprobada] Grosor del filete. Paneles de formulario: 2px arriba. */
  --touch-min: 48px; /* [v0.1 aprobada] Alto mínimo de botones y campos en desktop. */
  --touch-min-mobile: 52px; /* [v0.1 aprobada] Alto mínimo de botones, campos y filas tocables en móvil. */
  --step-plate: 56px; /* [v0.1 aprobada] Diámetro del número de paso (44px en móvil). */
  --container-max: 1280px; /* [v0.1 aprobada] Ancho máximo del contenido (FAQ: 960px). */
  --gutter-desktop: 40px; /* [v0.1 aprobada] Margen lateral del contenido en desktop. */
  --gutter-mobile: 20px; /* [v0.1 aprobada] Margen lateral en móvil. */
  --section-y-desktop: 112px; /* [Adaptable] Espacio vertical de sección en desktop (hero 72/88, franjas 40–80). */
  --section-y-mobile: 56px; /* [Adaptable] Espacio vertical de sección en móvil (hero 32/40). */
  --card-pad-desktop: 32px; /* [v0.1 aprobada] Padding de tarjeta de servicio y testimonio en desktop. */
  --header-h-mobile: 64px; /* [v0.1 aprobada] Alto del encabezado móvil. */
  --nav-breakpoint: 900px; /* [Adaptable] Por debajo, la navegación se reemplaza por el botón de menú. */
  --font-serif: "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --font-sans: Jost, Futura, "Century Gothic", system-ui, sans-serif;
  --text-web-h1: 500 92px/0.95 var(--font-serif); /* [v0.1 aprobada] Título del hero. Fluido: clamp(52px, 6.4vw, 92px); móvil 50px. Color heading; remate en cursiva. */
  --text-web-h2: 500 56px/1.02 var(--font-serif); /* [v0.1 aprobada] Título de sección. Fluido: clamp(38px, 4.2vw, 56px); móvil 38px, interlineado 1. */
  --text-web-card-title: 500 36px/1 var(--font-serif); /* [v0.1 aprobada] Título de tarjeta de línea de servicio y de bloques destacados. Móvil 30px. */
  --text-web-h3: 500 28px/1.1 var(--font-serif); /* [v0.1 aprobada] Ítems de Producción integral, pasos y formatos (26–28px). Móvil 22–24px. */
  --text-web-faq: 500 24px/1.15 var(--font-serif); /* [v0.1 aprobada] Pregunta de FAQ y citas de testimonio (22px). Móvil 21px. */
  --text-web-lead: 400 19px/30px var(--font-sans); /* [v0.1 aprobada] Bajada del hero (19/30); bajadas de sección 17/27. Móvil 17/26. */
  --text-web-body: 400 16px/25px var(--font-sans); /* [v0.1 aprobada] Texto de tarjetas y respuestas. Textos de apoyo 15/23. Color ink. */
  --text-web-nav: 400 15px/20px var(--font-sans); /* [v0.1 aprobada] Navegación del encabezado. Hover: rosewood con subrayado a 6px. */
  --text-web-button: 500 14px/1 var(--font-sans); /* [v0.1 aprobada] Etiqueta de botón, SIEMPRE en mayúsculas. */
  --text-web-label: 500 14px/18px var(--font-sans); /* [v0.1 aprobada] Etiqueta de campo, arriba del campo. El texto del campo va a 16px (evita el zoom en iOS). */
  --text-display: 500 72px/0.95 var(--font-serif); /* [Adaptable] Portadas y cierres de láminas y propuestas. Color heading. */
  --text-title: 500 40px/46px var(--font-serif); /* [Adaptable] Título de lámina. Color heading, sentence case. */
  --text-title-italic: italic 500 40px/46px var(--font-serif); /* [Marca aprobada: cursiva para el remate y el "&"] Remate en cursiva dentro de un título. Nunca un título entero. */
  --text-subtitle: 500 24px/30px var(--font-serif); /* [Adaptable] Subtítulos de columna en láminas. */
  --text-menu: 400 20px/28px var(--font-serif); /* [Marca aprobada: pasos del menú en Cormorant] Tarjeta de menú y frases destacadas. */
  --text-body: 400 16px/24px var(--font-sans); /* [Adaptable] Texto corrido en piezas y propuestas. Color ink. */
  --text-body-sm: 400 14px/20px var(--font-sans); /* [Adaptable] Descripciones breves y celdas de tabla. */
  --text-eyebrow: 500 12px/16px var(--font-sans); /* [Marca aprobada + v0.1] Numeración de sección y etiquetas: SIEMPRE en mayúsculas. Color heading. Igual en web y láminas. */
  --text-slogan: 500 13px/16px var(--font-sans); /* [Marca aprobada] El slogan en texto vivo, en mayúsculas espaciadas. Junto al logo, usá el SVG con slogan. */
  --text-caption: 400 12px/16px var(--font-sans); /* Pie de página, notas y textos de placeholder (13px en web). Color ink-muted. */
}
.web-h1 {
  font-family: var(--font-serif);
  font-size: 92px;
  line-height: 0.95;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.web-h2 {
  font-family: var(--font-serif);
  font-size: 56px;
  line-height: 1.02;
  font-weight: 500;
  letter-spacing: 0;
}
.web-card-title {
  font-family: var(--font-serif);
  font-size: 36px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0;
}
.web-h3 {
  font-family: var(--font-serif);
  font-size: 28px;
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: 0;
}
.web-faq {
  font-family: var(--font-serif);
  font-size: 24px;
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: 0;
}
.web-lead {
  font-family: var(--font-sans);
  font-size: 19px;
  line-height: 30px;
  font-weight: 400;
  letter-spacing: 0;
}
.web-body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 25px;
  font-weight: 400;
  letter-spacing: 0;
}
.web-nav {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0;
}
.web-button {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.12em;
}
.web-label {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: 0;
}
.display {
  font-family: var(--font-serif);
  font-size: 72px;
  line-height: 0.95;
  font-weight: 500;
  letter-spacing: 0;
}
.title {
  font-family: var(--font-serif);
  font-size: 40px;
  line-height: 46px;
  font-weight: 500;
  letter-spacing: 0;
}
.title-italic {
  font-family: var(--font-serif);
  font-size: 40px;
  line-height: 46px;
  font-weight: 500;
  letter-spacing: 0;
  font-style: italic;
}
.subtitle {
  font-family: var(--font-serif);
  font-size: 24px;
  line-height: 30px;
  font-weight: 500;
  letter-spacing: 0;
}
.menu {
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 28px;
  font-weight: 400;
  letter-spacing: 0;
}
.body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0;
}
.body-sm {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0;
}
.eyebrow {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.2em;
}
.slogan {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.3em;
}
.caption {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0;
}