/* ============================================================
   MONARCA · Café & Restaurante — tokens de marca v1
   Rionegro, Antioquia · septiembre 2026
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300&family=Jost:wght@200;300;400;500&display=swap");

:root {
  /* --- Color ------------------------------------------------ */
  --mo-tinta: #121110;   /* negro cálido: texto, fondos plenos, mosaico */
  --mo-cacao: #3B2E25;   /* madera del aviso: fondo alterno, hover oscuro */
  --mo-crema: #EFDDA8;   /* ACENTO DE MARCA (panel de la barra) */
  --mo-lino:  #E4D2B6;   /* uniforme: superficies secundarias */
  --mo-papel: #FAF6EE;   /* fondo por defecto */
  --mo-roble: #C2A177;   /* filetes, detalles, énfasis sobre oscuro */
  --mo-texto: #3F3A33;   /* cuerpo de texto sobre papel */
  --mo-suave: #8A7C63;   /* etiquetas, metadatos */
  --mo-link:  #8A6A38;   /* enlaces sobre claro (contraste 4.7:1) */

  --mo-exito:  #4E7A57;
  --mo-alerta: #9A4B3F;

  /* Proporción de uso: 60% papel · 25% tinta · 11% crema · 4% roble.
     El crema es acento, NUNCA fondo general de página.
     Combinaciones válidas para texto:
       tinta/papel · tinta/crema · crema/tinta · papel/cacao
     Prohibidas: crema sobre papel, roble sobre crema. */

  /* --- Tipografía ------------------------------------------- */
  --mo-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --mo-sans: "Jost", ui-sans-serif, system-ui, sans-serif;

  --mo-fs-display: clamp(40px, 6vw, 72px);
  --mo-fs-h1: clamp(32px, 4.6vw, 54px);
  --mo-fs-h2: clamp(26px, 3.2vw, 38px);
  --mo-fs-plato: 24px;
  --mo-fs-body: 17px;
  --mo-fs-small: 14px;
  --mo-fs-label: 12px;

  --mo-track-display: -0.022em;
  --mo-track-label: 0.24em;
  --mo-track-descriptor: 0.42em; /* «CAFÉ & RESTAURANTE» bajo el logotipo */

  /* --- Ritmo y forma ---------------------------------------- */
  --mo-max: 1080px;
  --mo-gutter: clamp(20px, 4vw, 32px);
  --mo-section: clamp(64px, 9vw, 96px);
  --mo-radius: 0px;       /* la marca no usa esquinas redondeadas */
  --mo-hair: 1px solid rgba(18, 17, 16, 0.14);
  --mo-hair-dark: 1px solid rgba(250, 246, 238, 0.22);

  --mo-tile: 74px;        /* módulo del mosaico */
}

/* ============================================================
   BASE
   ============================================================ */
body {
  margin: 0;
  background: var(--mo-papel);
  color: var(--mo-texto);
  font: 300 var(--mo-fs-body)/1.65 var(--mo-sans);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .mo-display {
  font-family: var(--mo-display);
  font-weight: 400;
  color: var(--mo-tinta);
  letter-spacing: -0.012em;
  line-height: 1.08;
  margin: 0;
  text-wrap: pretty;
}
h1 { font-size: var(--mo-fs-h1); font-weight: 300; letter-spacing: var(--mo-track-display); }
h2 { font-size: var(--mo-fs-h2); }
a { color: var(--mo-link); text-decoration: none; border-bottom: 1px solid currentColor; }
a:hover { color: var(--mo-tinta); }

.mo-wrap { max-width: var(--mo-max); margin-inline: auto; padding-inline: var(--mo-gutter); }
.mo-section { padding-block: var(--mo-section); border-top: var(--mo-hair); }

/* Etiqueta de sección */
.mo-eyebrow {
  font: 500 var(--mo-fs-label)/1 var(--mo-sans);
  letter-spacing: var(--mo-track-label);
  text-transform: uppercase;
  color: var(--mo-suave);
}

/* Descriptor bajo el logotipo */
.mo-descriptor {
  font: 400 clamp(10px, 1.1vw, 15px)/1 var(--mo-sans);
  letter-spacing: var(--mo-track-descriptor);
  text-transform: uppercase;
}

/* ============================================================
   MOSAICO — cenefa de círculos entrelazados (azulejo a línea).
   Dirección confirmada. Es el ÚNICO patrón de la marca.
   Reglas: máximo 25% del área · nunca debajo de texto ·
   solo tinta+crema · siempre a sangre (sin marco).
   Para franjas delgadas se reduce el módulo, nunca el grosor:
     franja de 10px  -> --mo-tile: 20px
     franja de 16px  -> --mo-tile: 32px
     franja de 20px  -> --mo-tile: 40px
     banda de 52px   -> --mo-tile: 104px
     paño completo   -> --mo-tile: 74px
   ============================================================ */
.mo-cenefa {
  width: 100%;
  height: 100%;
  --arc: transparent 30%, var(--mo-tinta) 30%, var(--mo-tinta) 32.6%, transparent 33.2%;
  background-color: var(--mo-crema);
  background-image:
    radial-gradient(circle at 0% 0%,     var(--arc)),
    radial-gradient(circle at 100% 0%,   var(--arc)),
    radial-gradient(circle at 0% 100%,   var(--arc)),
    radial-gradient(circle at 100% 100%, var(--arc)),
    radial-gradient(circle at 50% 50%, var(--mo-tinta) 0 3.4%, transparent 4%);
  background-size: var(--mo-tile) var(--mo-tile);
}

/* Franja de remate: usar como cierre de sección, a sangre.
   Envolver en un contenedor con overflow:hidden y la altura deseada. */
.mo-franja { height: 16px; --mo-tile: 32px; }
.mo-franja--fina { height: 10px; --mo-tile: 20px; }
.mo-franja--alta { height: 52px; --mo-tile: 104px; }

/* Pasepartú: el patrón como marco de una foto */
.mo-passepartout { --mo-tile: 48px; padding: 24px; }

/* ============================================================
   COMPONENTES
   ============================================================ */
.mo-btn {
  display: inline-block;
  font: 500 var(--mo-fs-label)/1 var(--mo-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 15px 26px;
  border: 1px solid transparent;
  border-radius: var(--mo-radius);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.mo-btn--primario { background: var(--mo-tinta); color: var(--mo-crema); }
.mo-btn--primario:hover { background: var(--mo-cacao); }
.mo-btn--secundario { border-color: var(--mo-tinta); color: var(--mo-tinta); padding: 14px 25px; }
.mo-btn--secundario:hover { background: var(--mo-tinta); color: var(--mo-crema); }
.mo-btn--sobre-oscuro { background: var(--mo-crema); color: var(--mo-tinta); }
.mo-btn[disabled] { background: rgba(18,17,16,0.16); color: rgba(18,17,16,0.45); cursor: default; }

/* Línea de plato con puntos guía */
.mo-plato { display: flex; align-items: baseline; gap: 12px; }
.mo-plato__nombre { font: 500 var(--mo-fs-plato)/1.2 var(--mo-display); color: var(--mo-tinta); }
.mo-plato__guia { flex: 1; border-bottom: 1px dotted rgba(18,17,16,0.32); transform: translateY(-4px); }
.mo-plato__precio { font: 500 22px/1.2 var(--mo-display); color: var(--mo-tinta); }
.mo-plato__desc { font: 300 15px/1.6 var(--mo-sans); color: #5A5348; margin: 7px 0 0; max-width: 56ch; }

.mo-card { border: var(--mo-hair); background: #FFFDF8; }
.mo-card__media { aspect-ratio: 3/2; background-size: cover; background-position: center; }
.mo-card__body { padding: 24px; }

.mo-field label {
  display: block;
  font: 400 var(--mo-fs-label)/1 var(--mo-sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mo-suave);
}
.mo-field input, .mo-field select, .mo-field textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(18,17,16,0.3);
  background: transparent;
  padding: 10px 0 9px;
  font: 300 16px/1.3 var(--mo-sans);
  color: var(--mo-tinta);
}
.mo-field input:focus, .mo-field select:focus, .mo-field textarea:focus {
  outline: none;
  border-bottom-color: var(--mo-tinta);
}

/* Bloque oscuro (horarios, pie de página, portadas) */
.mo-oscuro { background: var(--mo-tinta); color: var(--mo-papel); }
.mo-oscuro h1, .mo-oscuro h2, .mo-oscuro h3 { color: var(--mo-papel); }
.mo-oscuro .mo-eyebrow { color: var(--mo-roble); }
.mo-oscuro a { color: var(--mo-crema); }

/* ============================================================
   ASSETS
   /assets/monarca-logo-negro.png      logotipo + «COFFEE SHOP» (descontinuado)
   /assets/monarca-wordmark-negro.png  logotipo sin descriptor · tinta
   /assets/monarca-wordmark-blanco.png logotipo sin descriptor · blanco
   /assets/monarca-wordmark-crema.png  logotipo sin descriptor · crema
   /assets/monarca-isotipo-negro.png   monograma · tinta
   /assets/monarca-isotipo-blanco.png  monograma · blanco
   /assets/monarca-isotipo-crema.png   monograma · crema

   El descriptor «CAFÉ & RESTAURANTE» se compone en texto con
   .mo-descriptor debajo del wordmark, NO viene en el PNG.
   Tamaño mínimo del wordmark: 140px de ancho. Isotipo: 32px.
   Área de respeto: la altura de la M en los cuatro lados.
   ============================================================ */