/* Copia de project/components/bundle.css del Design System «Sabores y Brindis»
   (revisión 1791669272-3f26). Único cambio: se quitó el @import de Google Fonts,
   que el HTML carga con <link> y preconnect. No editar a mano. */

/* Sabores y Brindis — componentes en CSS puro (sin JS). Prefijo sb-.
   Valores tomados de la exploración web v0.1 aprobada (versión 6, id 1791664972-3647).
   Logotipo e isotipo NO se recrean en CSS: se usan los SVG v2 del grupo Logos. */

/* ---------- Base ---------- */
.sb-serif { font-family: var(--font-serif); font-weight: 500; }
.sb-focus:focus-visible,
.sb-btn:focus-visible, .sb-field input:focus-visible, .sb-field select:focus-visible,
.sb-field textarea:focus-visible, .sb-nav a:focus-visible, .sb-menu a:focus-visible {
  outline: 2px solid var(--focus-ring); outline-offset: 3px;
}

/* ---------- Encabezado de sección ---------- */
.sb-section-head { display: flex; flex-direction: column; gap: var(--space-3); max-width: 760px; }
.sb-eyebrow {
  margin: 0; font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--heading);
}
.sb-h1, .sb-h2 { margin: 0; font-family: var(--font-serif); font-weight: 500; color: var(--heading); }
.sb-h1 { font-size: clamp(52px, 6.4vw, 92px); line-height: .95; letter-spacing: -.01em; }
.sb-h2 { font-size: clamp(38px, 4.2vw, 56px); line-height: 1.02; }
.sb-h1 em, .sb-h2 em { font-style: italic; }
.sb-lead { margin: 0; font-family: var(--font-sans); font-size: 17px; line-height: 27px; color: var(--ink); }

/* ---------- Botón ---------- */
.sb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; box-sizing: border-box;
  min-height: var(--touch-min); padding: 14px 28px;
  font: 500 14px/1 var(--font-sans); letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; border: 1px solid var(--rosewood); border-radius: var(--radius-0); cursor: pointer;
}
.sb-btn--primary { background: var(--rosewood); color: var(--lemon-chiffon); }
.sb-btn--primary:hover { background: var(--action-hover); border-color: var(--action-hover); color: var(--lemon-chiffon); }
.sb-btn--ghost { background: transparent; color: var(--rosewood); }
.sb-btn--ghost:hover { background: var(--rosewood); color: var(--lemon-chiffon); }
.sb-btn--light { background: var(--lemon-chiffon); color: var(--rosewood); border-color: var(--lemon-chiffon); }
.sb-btn--light:hover { background: var(--action-light-hover); border-color: var(--action-light-hover); color: var(--rosewood); }
.sb-btn[aria-disabled="true"] { background: transparent; color: var(--cafe-suave); border: 1px dashed var(--cafe-suave); cursor: not-allowed; }
.sb-on-dark .sb-btn[aria-disabled="true"] { color: var(--filete); border-color: var(--filete); }
.sb-btn--block { display: flex; width: 100%; min-height: var(--touch-min-mobile); padding: 14px 20px; }

/* ---------- Encabezado del sitio ---------- */
.sb-header { position: sticky; top: 0; z-index: 5; background: var(--lemon-chiffon); border-bottom: 1px solid var(--filete); }
.sb-header__inner {
  max-width: var(--container-max); margin: 0 auto; padding: 16px var(--gutter-desktop);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
}
.sb-header__logo { display: flex; align-items: center; }
.sb-header__logo img { height: var(--logo-header-h-desktop); width: auto; display: block; } /* excepción aprobada al mínimo de 160px */
.sb-nav { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.sb-nav a { color: var(--coffee-bean); text-decoration: none; font: 400 15px/20px var(--font-sans); }
.sb-nav a:hover, .sb-nav a[aria-current="page"] { color: var(--rosewood); text-decoration: underline; text-underline-offset: 6px; }
.sb-header__menu { display: none; width: 52px; height: 52px; align-items: center; justify-content: center; }
.sb-header--mobile .sb-header__inner { height: var(--header-h-mobile); padding: 0 12px 0 var(--gutter-mobile); }
.sb-header--mobile .sb-header__logo img { height: var(--logo-header-h-mobile); }
.sb-header--mobile .sb-nav, .sb-header--mobile .sb-header__cta { display: none; }
.sb-header--mobile .sb-header__menu { display: flex; }

/* ---------- Tarjeta de línea de servicio ---------- */
.sb-service { display: flex; flex-direction: column; border-radius: var(--radius-0); font-family: var(--font-sans); }
.sb-service__media { aspect-ratio: 4 / 3; }
.sb-service__body { padding: var(--card-pad-desktop); display: flex; flex-direction: column; gap: var(--space-3); flex-grow: 1; }
.sb-service__title { margin: 0; font-family: var(--font-serif); font-weight: 500; font-size: 36px; line-height: 1; }
.sb-service__text { margin: 0; font-size: 16px; line-height: 25px; flex-grow: 1; }
.sb-service .sb-eyebrow { color: inherit; }
.sb-service .sb-btn { align-self: flex-start; }
.sb-service--social { background: var(--line-social); color: var(--lemon-chiffon); }
.sb-service--empresas { background: var(--line-empresas); color: var(--lemon-chiffon); }
.sb-service--chef { background: var(--line-chef); color: var(--coffee-bean); }
.sb-service--chef .sb-service__title { color: var(--rosewood); }
.sb-service--chef .sb-eyebrow { color: var(--rosewood); }
.sb-service--compact .sb-service__body { padding: var(--space-4); gap: 12px; }
.sb-service--compact .sb-service__title { font-size: 30px; }
.sb-service--compact .sb-service__text { font-size: 15px; line-height: 22px; }

/* ---------- Contenido pendiente ---------- */
.sb-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center;
  padding: var(--space-4); background: var(--placeholder-fill); border: 1px dashed var(--placeholder-ink);
  color: var(--placeholder-ink); font: 400 13px/18px var(--font-sans);
}
.sb-placeholder b { font-weight: 500; letter-spacing: .16em; text-transform: uppercase; font-size: 11px; color: var(--rosewood); }
.sb-pending {
  display: inline-block; padding: 2px 8px; border: 1px dashed var(--placeholder-ink); background: var(--placeholder-fill);
  color: var(--placeholder-ink); font: 400 12px/18px var(--font-sans);
}

/* ---------- Campos y panel de formulario ---------- */
.sb-form { background: var(--chiffon-soft); border-top: 2px solid var(--rosewood); padding: var(--space-5); display: flex; flex-direction: column; gap: 20px; }
.sb-form__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--space-3); }
.sb-field { display: flex; flex-direction: column; gap: 6px; font: 500 14px/18px var(--font-sans); color: var(--coffee-bean); }
.sb-field input, .sb-field select, .sb-field textarea {
  font: 400 16px/1.4 var(--font-sans); color: var(--coffee-bean); background: var(--lemon-chiffon);
  border: 1px solid var(--cafe-suave); border-radius: var(--radius-0); padding: 12px 14px; min-height: var(--touch-min); width: 100%; box-sizing: border-box;
}
.sb-field--check { flex-direction: row; align-items: center; gap: 10px; font-weight: 400; }
.sb-field--check input { width: 22px; height: 22px; min-height: 22px; accent-color: var(--rosewood); }
.sb-form__note { margin: 0; font: 400 13px/19px var(--font-sans); color: var(--cafe-suave); }

/* ---------- Menú móvil abierto ---------- */
.sb-menu { background: var(--rosewood); color: var(--lemon-chiffon); display: flex; flex-direction: column; }
.sb-menu__item {
  display: flex; align-items: center; justify-content: space-between; min-height: 60px;
  border-bottom: 1px solid rgba(255, 248, 202, .3); text-decoration: none;
  font-family: var(--font-serif); font-weight: 500; font-size: 30px; color: var(--lemon-chiffon);
}
.sb-menu__meta { color: var(--filete); font: 400 15px/20px var(--font-sans); min-height: 44px; display: flex; align-items: center; }
.sb-menu a.sb-menu__meta { color: var(--filete); }

/* ---------- Barra inferior de presupuesto (móvil) ---------- */
.sb-bottombar {
  position: sticky; bottom: 0; z-index: 6; background: var(--lemon-chiffon); border-top: 1px solid var(--rosewood);
  padding: 10px 12px; display: grid; grid-template-columns: 1fr 52px; gap: 8px;
}
.sb-bottombar__icon { width: 52px; height: 52px; border: 1px solid var(--rosewood); display: flex; align-items: center; justify-content: center; }